首页

设计的双重维度:理性奠基与感性赋能

涛涛 设计思维

设计的本质是什么?是冰冷的逻辑推演,还是温暖的情感共鸣?关于 “设计应感性主导” 还是 “理性为王” 的争论,在设计圈从未停歇。有人将设计等同于艺术创作,执着于个人情感的抒发;也有人将设计视为工程任务,严守逻辑与规则的边界。实则,这场争论的核心误区在于混淆了设计的两个核心维度 —— 设计决策与设计表达。真正成熟的设计,从来不是非此即彼的选择,而是以理性为根基,以感性为羽翼,二者层层嵌套、相辅相成的完整体系。

从 UX 视角拆解加载设计:3 种核心状态与 5 类场景化模式

涛涛 系统UI设计文章及欣赏

在产品交互中,加载是用户操作与系统反馈之间的关键衔接环节。无论是 App 的启动加载、页面切换时的内容刷新,还是按钮点击后的功能响应,加载体验直接影响用户对产品的感知 —— 流畅的加载能让用户沉浸于功能本身,而糟糕的加载设计则容易引发烦躁与流失。因此,针对不同场景选择适配的加载状态与模式,是提升 UX 设计质感的重要细节。本文将从加载的核心状态分类、场景化模式选择两个维度,结合实际应用场景展开分析,为设计实践提供参考。

10 个惊喜感设计案例:解锁产品体验的细节魔法

涛涛 用户研究

在产品同质化日益严重的当下,真正打动用户的往往不是颠覆性的功能,而是藏在交互里的 “亿点点惊喜”。一句戳心的文案、一个有趣的动效、一次贴心的反馈,都能让用户感受到设计的温度,进而加深对产品的好感度与粘性。本文精选 10 个极具巧思的产品设计案例,拆解其背后的设计逻辑,为创作者提供灵感启发。

B 端表单页设计:从核心逻辑到落地实践

涛涛 B端ui设计文章及欣赏

在 B 端产品中,表单页是连接用户与系统的关键桥梁,它承载着信息录入、数据提交、功能配置等核心任务,其设计合理性直接影响用户操作效率与系统数据质量。优质的 B 端表单页不仅能降低用户填写成本,更能助力系统实现精准的数据管理,为产品核心价值赋能。本文将从设计逻辑、核心原则、布局策略到复杂场景解决方案,全面拆解 B 端表单页的设计要点。

移动端弹窗交互设计规范:从类型到落地的全维度指南

涛涛 移动端UI设计文章及欣赏

弹窗作为移动端交互的核心控件,承担着信息提示、操作引导、功能选择等关键作用。但不合理的弹窗设计往往成为用户体验的 “重灾区”—— 过度打扰、操作模糊、场景错位等问题,会直接降低用户对产品的好感度。基于 iOS 人机交互指南及实际应用场景,本文系统梳理移动端弹窗的核心类型、设计规范与落地技巧,让弹窗真正服务于用户需求,而非成为交互障碍。

干货来了!40个界面设计经典技巧!(下)

清阳 系统UI设计文章及欣赏

21 让界面平滑显示而不要死板地呈现

用户进行操作过程中,界面上的元素会经常出现,隐藏,打开,关闭,放大缩小移位等。给这些元素增加些自然的动画,淡入淡出效果不但美观,也更符合实际,本来元素尺寸位置的变化就是一个需要时间的动画过程。但要注意动画时间不要设置过长,那样会让想尽快完成操作的用户不耐烦。

image.png

22 循序渐进的引导而不要直接让用户注册

与其让用户马上注册,何不让用户先进行一些体验式的操作呢。这个体验过程可以展示程序的功能,特性等。一旦用户通过简单几步的操作了解了程序的价值所在,那么它会更愿意填写注册表单的。这种循序渐进的引导可以尽量推迟用户注册的时间但又可以让用户在没注册的情况下进行个性化设置等简单操作。

image.png

23 过多边框会让界面四分五裂

过多边框会喧宾夺主。不用说,边框确实在划分区域进行版块设置时有很大的作用,但同时其明显的线条也会吸引走用户的注意力。为了达到划分版块又不转移用户注意力的目的,在排版时可以将界面上不同区域的元素通过空白进行分组,用上不同的背景色,将文字对齐方式进行统一,还有就是为不同区域设置不同的样式。当使用所见即所得的界面设计工具时,我们经常在界面上方便地拖出很多区块来,这些区块多了就会显得杂乱无章。所以我们又会到处放些横线来分界。一个更好的做法是将区块垂直对齐,这样做不会让那些多余的线条来扰乱视觉。

image.png

 

24 展示产品带来的好处而不要罗列产品特性

市场就是这样的,用户永远只关心自身利益而产品特性对他们来说倒不是那么重要。只有利益才更直观地体现出使用产品所带来的价值。Chris Guillebeau在他的著作《100美元起家》中指出,相比压力,冲突,烦心事和未知的未来,人们在乎得更多的是爱,金钱,认同感和自由支配的空闲时间。所以我相信在展示产品特性时回归到利益上是必要的。

image.png

 

25 考虑零数据的情况

界面上经常需要呈现不同数量的数据,从0,1,10,100到10000+等。这里存在个普遍的问题就是:在程序最开始使用的0条数据到过度到有数据之前,该如何进行显示界面。这也是我们经常忽视了的地方。当程序初始没有数据时,用户看到的就是一片空白,此时用户可能不知道该进行哪些操作。利用好没有数据的初始界面可以让用户学习和熟悉如何使用程序,在程序中创建数据。力臻完美永远是我们追求的目标,界面设计也不例外。

image.png

 

26 默认将用户引入

将界面做成默认用户选中想要使用你的产品,意味着如果用户真的需要使用,那么可以直接点击确定而不需要额外点选了。当然,也有另一种做法就是默认不选中服务,用户需要的话可以手动点选。前者这种设计更好的原因有两点。一是用户不需要额外点选,非常省事,因为默认设置为用户需要我们的产品或服务。二是这种做法某种程度上是在向用户推荐产品,暗示了其他人都选择了我们。当然,将界面设计成默认选择的样子多少存在点争议,有点强迫用户的感觉。如果你想道德一点,你可以要么把让用户选择的文字写得模棱两可,要么使用双重否定这样不那么直白的描述,这两种方式都可以让用户觉得没有那么强的感觉是被强迫选择使用产品的。

image.png

 

27 界面设计得一致,不要增加用户的学习成本

自从Donald Norman的一系列著作面世后,界面设计中尽量保持一致性成了一个普遍遵循的准则。在设计中保持一致性可以减少用户的学习成本,用户不需要学习新的操作。当我们点击按钮,或者进行拖拽操作,我们期望这样的操作在整个程序的各个界面都是一致的,会得到相似的结果出来。反之我们需要新情境下重新学习某种操作会产生何种结果。可以在很多方面下功夫来实现一个一致的界面,包括颜色,方向,元素的表现形式,位置,大小,形状等。不过在让界面变得一致之前,记住一点,适当的打破整体的一致性也是可取的。这偶尔的不一致性的设计用在你需要强调的地方可以起到很大的作用。所以世事无绝对,我们应遵从一致的设计准则,但适当地打破这种常规。

image.png

 

28 使用较贴切的默认值会减少操作

适当的默认值和预先填充好的表单字段可以大量减少用户的工作量。在节省用户宝贵的时间上面,这是种非常常见的做法,可以帮助用户快速填完表单或者注册信息。

image.png

 

29 遵从一些约定而不要去重新设计

界面设计中遵从约定的准则跟之前的界面一致性准则很相似。如果我们遵从了界面设计中的一些约定,用户用起来会很方便。相反,不一致和没有遵从约定的设计则会提高学习成本。有了界面设计中这些约定,我们想都不用想就知道界面右上角(大多数情况下)的叉叉是关闭程序用的,或者点击一个按钮后我们能够预测到将会发生什么。当然,约定是会过时的,随着时间的推移,同样的操作也有可能被赋予新的含义。但要记住,当你在界面中打破这些常规时一定要目的明确,并且出发点是好的。

image.png

 

30 让用户觉得可以避免失去而不是获得

我们喜欢成功,没有谁愿意失败。根据心理学得到的可靠结论,人们一般更顷向于避免失去拥有的东西而不是获得新的利益。这一结论也适用于产品的设计和推广中。试着说明你的产品会帮助客户维护他的利益,保持健康,社会地位等要好过告诉客户这个产品会带来一些他未曾拥有的东西。比如保险公司,它是在销售我们出事之后可以得到的大笔赔偿呢还是在强调可以帮助我们避免失去拥有的财产?

image.png

 

31 具有层次的图形化展示优于直白的文字描述

具有层次的设计可以将界面上重要的部分与不次要部分区分开来。要让界面层次分明,可以在这些方面做文章:对齐方式,间距,颜色,缩进,字体大小,元素尺寸等。当所有这些调整运用得适当时,可以提高整个界面的可读性。相比在一个很直白的界面上用户一眼就可以从上瞟到底的设计,这样分明的设计也可以让用户放慢速度来慢慢阅读。这样也使界面更有特色一些。就好比一次旅行,你可以乘坐高铁快速到达景区(从页面顶部瞟到底部),但你也可以慢行以欣赏沿途风光。所以层次分明的设计让眼睛有可以停留的地方,而不是对着空白单调的一个屏幕。

image.png

32 将有关联的功能分组而不是杂乱无章

将各个功能项分组合并起来可以提高程序的可用性。有点常识的人都知道刀子和叉子,或者打开文件和关闭文件是放在一起的。将功能相近的元素放在一起也符合逻辑,符合我们平时的认知。

image.png

 

33 使用内联的验证消息而不是提交后再验证

在处理表单时,最好立即检测出用户所填写内容是否符合要求然后给出验证消息。这样错误一出现能就能得到改正。相反,提交后再检查表单会给出错误消息,会让用户感到乏力又要重复之前的工作。

image.png

34 放宽对用户输入的要求

对用户输入的数据,尽量放宽限制,包括格式,大小写什么的。这样做可以更人性化一点,也使得界面更加友好。一个再恬当不过的例子就是让用户输入电话号码的时候,用户有很多种输入方式,带括号的,带破折号的,带空格的,带区号和不带区号的等等。如果你在代码中来处理这些格式的问题,代价也只是你一个人多写几行代码而以,却可以减少无数用户的工作量。

image.png

35 让用户感觉需要快速做出响应而不是毫无时间观念

适当的紧迫感是个有效的战术可以让用户立即做出决定而不是等上个十天半个月。重要的是这种战术屡试不爽,因为它暗示了资源的紧缺或者活动的时间有限,今天可以买,但明天可能就无法这么低价了。另一方面,这一战术也让用户感到会错失一次大好的机会,再一次,应用了人们害怕失去的本性。当然,这种战术会被一些人嗤之以鼻,认为是不耿直的做法。不过,这只是种战术而以,并且在保持合法性的前提下应用也无伤大雅。所以请不要为了营销而在界面上制造紧迫的假象。

image.png

 

36 使用饥饿营销

物以稀为贵。饥饿营销给出的信息就是东西不多,只剩几件,明天再来,可能没了。你去比较一下批发与限量版的东西他们的价格差距有多大就知道了。回过头来看,那些批发商或者大零售商,他们也使用饥饿营销,以获得更好的销量。但在软件行业,我们经常会忘记有饥饿营销这回事。因为数字产品是可以很容易拷贝复制的,不存在缺货的情况。其实,在界面设计中,也可以将其运用起来与现实中的资源紧缺进行联系。想想一次网上研讨会的门票,想想你一个月可以服务的人数限制,这些信息都可以告知用户是有限的。

image.png

 

37 让用户选择而不是重新填写

这一界面设计中的经典准则是有心理学依据的,相比要让某人回想想某样东西,从一堆东西中认出某样东西会更容易些。辨识出一样东西只需要我们稍微回忆一下,通过一些线索就可以完成。而回想则需要我们全面搜索自己的大脑。也许这也是为什么试卷上选择题会比简答题做得快的原因。所以试着在界面上展示一些用户之前涉及到的信息让他们进行选择,而不是让他们想半天然后自己填写。

image.png

38 让点击更轻松

像链接,表单的输入框还有按钮等,如果尺寸做得大一点则点击起来更方便容易些。根据费特定律,使用像鼠标这样的外设来点击需要一些时间,特别是元素比较小的情况下,时间会更多。鉴于此,最好还是把你的表单输入框,按钮等做大点。抑或者你可以保持原有的设计不变,只是把元素可点击区域(也就是热区)增大。这样的一个典型例子是手机设备上的文本链接和导航菜单,它们文字不一定很大但背景是拉伸的,在很宽范围内点击都有效。

image.png

 

39 优化页面加载速度,不要让用户等太久

速度很重要。页面加载速度和UI对操作的响应速度都直接关系到用户是否有耐心继续等下去。无疑地每多一秒种的等待都会失去一些用户或者项目机会。一个好的解决之道当然就是优化你的页面和图片。除此之外还可以运用心理学让这个等待时间显得不那么长。具体来说有两种技巧。一是显示进度条,二是展示其他相关或有趣的东西来吸引用户的注意力(就好比你沿着传送带走走总比傻站在原地盯着一个位置看要好得多吧)。

image.png

40 除了按扭外,快捷键也必不可少

当你的程序广为流传,应该考虑下高级用户的感受。人们总是试图为一些重复性的操作找到更快捷的方法,快捷键就应运而生了。相比在界面上点来点去,快捷键无疑大大提高工作效率。一个好的例子就是现今流行于各个主流程序中的J(后退)K(前进)快捷键组合,比如在Gmail,Twitter和Tumblr中。按钮固然好,但快捷键会锦上添花。

image.png

转载:微信公众号UI设计

设计干货|让你的ui界面更高级

清阳 移动端UI设计文章及欣赏

每天学点设计,瞬间让UI界面变高级的设计细节

image.png

image.png

image.png

image.png

By:UI设计小画(小红薯)

UI变精致的超实用设计小细节

清阳

UI设计中的每一个细节都可能对用户体验产生影响。整理了UI设计中常用的几个小细节,使你的页面设计更加精致。

(1)数值对齐VS视觉对齐

image.png

(2)垂直对齐更利于阅读

image.png


(3)选项增加合适的图标

image.png


 (4)导出图标

image.png


(5)留白分割

image.png


(6)按钮边距

 

image.png


转载:设计小细节

智能硬件的终极体验是什么

清阳 设计思维

在科技日新月异的今天,智能硬件已渗透至生活的方方面面。从智能音箱到可穿戴设备,从智能家居到自动驾驶汽车,我们被无数智能设备所包围。然而,许多智能硬件却未能真正提升生活质量,反而因操作复杂、功能冗余或体验割裂而令人失望。智能硬件的终极体验,绝非功能的简单堆砌,而应是一种无缝融入生活、无声赋能于人的智慧存在。这种体验的核心,在于回归“人”本身,通过深刻的设计愿景与方法论,重新定义科技与人类的关系。

一、当前智能硬件设计的缺失:功能至上与体验割裂

市面上大多智能硬件仍陷于“功能至上”的误区。厂商热衷于比拼参数、添加新功能,却忽略了用户真正的需求:自然、流畅且愉悦的体验。例如,许多智能家居设备需要下载独立应用、经历繁琐配置,甚至不同品牌间无法互联互通。这种设计思维本质上是“技术驱动”而非“人性驱动”,导致设备之间形成数据孤岛,用户被迫适应技术,而非技术服务于人。

更深层次的问题在于,许多智能硬件缺乏设计价值的体现。设计价值不仅是外观的美学,更是产品与用户情感、行为和生活方式的深度契合。当前大多数产品将“智能”等同于自动化或远程控制,却未能触及智能化的本质:理解上下文、预测需求并提供主动、个性化的服务。例如,一个真正的智能家居系统应当能够感知家庭成员的生活节奏,自动调节光线、温度与音乐,而非仅仅通过手机应用开关灯光。

二、设计愿景:无形与有意的融合

智能硬件的终极体验,应当如电力一般无处不在却隐于无形。它的设计愿景应聚焦于以下三点:

  1. 无缝融合(Seamless Integration):硬件应自然融入环境与日常流程,不打断用户的心流。例如,智能耳机不仅提供降噪功能,还能根据环境自动切换模式(如从通勤降噪切换到办公室通透模式),甚至监测用户健康状态并发出提醒。

  2. 主动智能(Proactive Intelligence):设备应通过持续学习用户习惯,提前预测需求并主动响应。例如,智能冰箱不仅记录食品库存,还能根据用户饮食习惯推荐食谱,并自动生成购物清单。

  3. 情感联结(Emotional Connection):智能硬件不应仅是工具,更应是懂你的伙伴。通过设计语言、交互反馈与个性化服务,与用户建立信任与情感纽带。例如,教育机器人通过鼓励式交互激发孩子学习兴趣,而非机械地完成任务。

这一愿景的实现,需依托于一种人性化的设计方法论,将技术能力与人文关怀深度融合。

三、设计方法论:从“人性驱动”到“场景化创新”

为实现终极体验,智能硬件设计需超越传统用户中心设计(UCD),转向场景化、系统化的设计思维

  1. 场景深度洞察(Deep Scenario Insight)
    设计不应始于功能定义,而应源于对用户日常生活场景的深度洞察。通过 ethnographic research(民族志研究)等方法,观察用户在不同场景中的行为、痛点与渴望。例如,智能办公设备的设计需理解开放式办公室与远程办公的不同需求,提供聚焦模式与协作模式的无缝切换。

  2. 跨设备系统设计(Cross-Device System Design)
    智能体验往往依赖多设备协同。设计需打破单设备思维,构建一致且连贯的生态系统。苹果的“接力”(Handoff)功能便是一个范例,允许用户在不同设备间无缝切换任务。未来智能硬件应更进一步,实现设备间能力互补(如手机计算力+手表传感器+电视显示屏)。

  3. 自适应交互(Adaptive Interaction)
    交互方式应自然且自适应:结合语音、手势、触控等多种模态,并根据上下文自动选择最优方式。例如,智能车载系统在检测到驾驶员疲劳时,自动切换为语音交互并建议休息。

  4. 伦理与可持续性(Ethics & Sustainability)
    终极体验必须包含对社会与环境的责任。设计需关注隐私保护、数据安全与长期可持续性。例如,设备应采用本地化处理减少数据上传,并通过模块化设计延长产品寿命。

四、终极体验:科技与人文的共鸣

智能硬件的终极体验,是科技与人文的完美共鸣。它并非炫技式的功能展示,而是于细微处改善生活品质,让人更专注於真正重要的事物:创造力、人际关系与自我实现。

当我们回望当前市场的空白,正是这种设计价值的缺失:太多产品追求“炫酷”而非“有用”,追求“销量”而非“意义”。未来真正的突破性产品,必将源于对人性深层次需求的洞察,以及将技术转化为温暖体验的设计能力。

最终,智能硬件将不再被称为“硬件”,而是成为我们生活中无声却不可或缺的伙伴。它知道你需要什么,并在你意识到之前就已准备好一切——这才是智能的终极体验。

转载:UX设计便利店

 

UI欣赏|朦胧高级的健康产品多端设计

清阳 移动端UI设计文章及欣赏

今天欣赏一组该健康类产品的UI设计,设计师还是Afterglow

image.png

image.png

image.png

by @Afterglow

 

该产品围绕智能手表与手机应用,提供运动、健康数据服务。

优点

  • 黑与浅绿主色调,科技感与活力兼具,辨识度高。
  • 心率、卡路里等数据以简洁图表呈现,可读性强。
  • 适配手表、手机多终端,满足不同场景需求。
  • 交互元素醒目,操作逻辑清晰,互动性好。

缺点

  • 部分界面信息模块稍密集,易分散注意力。
  • 色彩种类单一,缺乏视觉新鲜感。

可以学习的手法

  • 用半透明卡片展示信息,增强界面层次与科技感。
  • 通过心率波形动态示意,为界面增添活力与实时感。

转载:UX设计便利店

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档