2026年的UI设计,不再强调严苛的视觉规则,而是更注重结合使用场景做出合理的设计选择。
设计师不再默认选用极简或极繁风格,而是根据用户需求、情感诉求以及产品的实际使用方式来设计。

其中一个重大变化是,只要设计目的明确,人们对复杂设计的接受度大幅提升。
界面可以层次感丰富或富有表现力,只要易于理解就是合理的设计。
适配性是塑造2026年UI设计的另一核心趋势。界面的响应性不断升级,不仅能适配屏幕尺寸,还能根据用户的行为和偏好做出调整。
动效、色彩与布局的设计,不再只是为了装饰界面,更是为了传递设计意图。
这些变化共同指向了一种更平衡的设计思路,让视觉风格与产品易用性同步发展、相辅相成。
历经多年的扁平化界面设计后,2026年UI设计在视觉上的一大重要变化,是重新聚焦于设计的纵深感与质感。
通过分层布局、立体组件和细腻的三维元素,让界面重新拥有空间维度。

触觉极致化并非让界面变得杂乱无章、令人眼花缭乱,而是让数字元素更具物理质感和交互反馈感。
按钮设计看起来触手可及,而非单纯的符号;
图标设计兼具重量感与质感。
这些细节能让用户无需额外说明,就能理解各元素的使用方式。
渲染技术、产品性能和浏览器支持度的提升,让设计师能轻松为界面添加3D效果,且不会拖慢产品运行速度、影响产品的可访问性。
2026年的排版设计不再局限于静态布局,为文字赋予动态效果的动态排版,正从纯粹的装饰元素,成为界面设计的核心组成部分。

用户滚动页面时,标题文字可能会拉伸、位移或做出其他响应;用户点击或悬停时,标签文字也会产生细微的动态变化。
这些动效能清晰传递视觉焦点、层级或状态的变化,且设计的核心是提升文字的可读性,而非分散用户注意力。
合理运用动态排版,能为界面赋予情感与韵律,让产品呈现出更活泼、精致或趣味的气质,同时也能帮助用户更轻松地浏览复杂的界面布局。
2026年,排版不再只是承载内容的载体,更在塑造整体用户体验中扮演着主动且关键的角色。
在大胆且富有表现力的界面设计成为潮流的同时,受杂志排版启发的柔和、简约设计风格也愈发受青睐。
这一设计趋势借鉴印刷杂志、摄影作品和高端出版物的设计思路,并将其适配应用于数字产品设计中。

柔和光影风格的UI设计,通过柔和的渐变、漫射的阴影和细腻的纹理营造温暖的氛围与视觉纵深感,同时又不会造成视觉杂乱。
配色方案通常以低饱和度的中性色、暖白色为主,搭配少量点缀色,整体呈现出舒缓、简洁且设计感十足的视觉效果。
兼具杂志质感的界面布局,注重留白设计、视觉韵律与清晰的层级划分,让内容有足够的呼吸空间,同时又能保持精致的设计感。
这种设计思路特别适用于创意工具、内容平台和生活方式类产品——这类产品的设计氛围与基调尤为重要。
在设计风格的另一维度,科幻风渐变在2026年的使用频率大幅提升,尤其适用于科技类和实验性产品设计。
这类界面常运用高对比度、大胆的色彩搭配和富有氛围感的光影效果,打造极具未来感的视觉体验。

未来感渐变设计通常以深色为背景,搭配霓虹蓝、亮紫、金属色等鲜艳的电光色系,营造出极具电影质感的视觉效果,现代感与沉浸感拉满。
合理运用这类渐变设计,既能凸显产品的创新属性,又不会让整体设计显得杂乱。
这种设计风格在深色模式下的表现尤为出色,发光的点缀元素与分层的光影效果,能为界面增添更多纵深感与氛围感。
渐变的应用场景也不再局限于背景,如今还被广泛运用于按钮、文字和交互元素的设计中。
2026年,渐变不再只是装饰性的设计元素,更在品牌塑造与视觉叙事中发挥着关键作用。
2026年的动态图形设计已完全融入UI设计体系,不再局限于基础的悬停效果或加载动画。
动效设计被用于诠释各界面元素之间的关联、提供清晰的交互反馈,还能让不同交互场景间的过渡更流畅。

屏幕切换的动效设计目标明确、衔接自然,动画效果能根据用户的操作做出实时且自然的响应。微交互动效则无需过多文字说明,就能清晰展示系统状态、引导用户操作。新一代动态图形设计的核心优势,在于动效的细腻度与一致性。
动效不会刻意吸引注意力,而是通过让界面更易懂、更好用,为整体使用体验赋能。
随着设计工具与框架的不断升级,动态图形设计已不再是特殊的可选设计元素,而是优质UI设计的必备组成部分。
极简主义在2026年依然是主流设计思路,但已进化为更具表现力、更以人为本的新极简主义。
这种设计风格保留了传统极简设计的清晰性与简洁性,同时融入了温暖的氛围、细腻的质感与灵活的设计手法。

新极简主义的界面设计摒弃强烈的色彩对比与刻板的网格布局,转而采用柔和的色彩过渡、圆角元素与更具有机感的留白方式。
字体的选择经过精心考量,不再追求中性化,细微的视觉细节为设计增添独特个性,又不会造成视觉杂乱。
这一设计趋势的兴起,反映出人们逐渐意识到:极简主义并非只能营造冰冷、缺乏人情味的视觉效果。
新极简主义在追求设计清晰性的同时,将使用舒适度放在重要位置,打造出既高效又富有情感温度的界面。
叙事化设计已成为UI设计中愈发重要的组成部分,尤其适用于以教育、启发用户或引导用户完成复杂操作为核心目标的产品。
2026年的界面设计不再追求一次性展示所有内容,而是遵循叙事逻辑,随用户操作逐步呈现内容。

基于滚动的叙事设计、渐进式信息展示和随操作变化的视觉效果,让用户能以结构化、沉浸式的方式浏览内容。
动效、色彩与布局的变化,能清晰传递内容的推进节奏与使用场景,让用户的交互过程成为一场连贯的体验之旅。
这种设计思路将信息传递与用户自然的探索习惯相结合,有效提升用户对内容的理解度与参与度。
主打叙事化设计的界面,不会用繁多的选项让用户感到无从下手,而是为用户提供清晰的操作指引与体验节奏。
怀旧风依旧在影响UI设计,但在2026年,这种风格呈现出更精致、更具设计意图的新形态。
新复古风格将早期的数字美学与现代设计标准、技术相结合,做出全新的设计诠释。

像素纹理、复古配色方案和经典的界面设计元素,通过高分辨率视觉效果、流畅的动效和自适应布局被重新演绎,最终呈现的设计既带有熟悉的怀旧感,又不会显得过时。
这一设计趋势能引发用户共鸣,因为它将情感记忆与当代的产品易用性巧妙结合。
在致敬经典的同时拥抱现代设计,新复古风格的界面营造出一种跨世代的视觉延续感,能吸引不同年龄段的用户。
随着数字产品的渗透度越来越高,设计中对用户心理舒适度和长期使用体验的重视程度也不断提升。
舒缓式界面设计将可预测性、可访问性和情感舒适度放在首位,而非追求持续的视觉刺激。

这类界面会减少不必要的通知提醒、降低视觉干扰,且谨慎使用动效;配色方案的选择以提升使用舒适度为核心,布局设计则注重一致性与清晰性。
舒缓式界面设计对生产力工具、健康类平台和用户日常高频使用的应用尤为重要。
2026年,尊重用户的注意力,已逐渐成为评判设计品质的重要标准。
随着触控技术、运动传感器和空间计算技术的不断发展,手势交互设计的应用愈发广泛。
在许多界面中,滑动、拖拽、长按和多点触控等手势操作,正逐步取代传统的可视化控件。

合理的手势交互设计能减少视觉杂乱,打造更流畅的交互模式,但这需要设计师做好新手引导与交互反馈设计,确保手势操作的易发现性与可访问性。
2026年,成功的手势交互界面设计,都能在保证直观易用的同时,兼顾设计的清晰性。
转载:人人都是产品经理
优秀的UI设计,能在表现力与克制感、创新性与易用性、美学设计与人文共情之间找到完美平衡。
设计师不仅关注界面的视觉效果,更重视用户的使用感受,才能打造出超越表面视觉吸引力、引发用户深度共鸣的产品体验
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

今天兰亭妙微UI设计公司来和大家聊聊在 B 端设计当中十分基础,但是争议越来越大的组件:步骤条
因为在过去很长一段时间里,步骤条几乎是 B 端复杂表单的“标配”,只要遇到信息量大的任务,设计师的第一反应往往是:太长了,用步骤条切分一下吧;产品经理设计原型也是:逻辑复杂了,步骤条来一下吧。
但是在 2026 年的今天,我们重新在看很多表单时,经常会出现滥用表单的情况,而很多高效的 SaaS 产品正在让步骤条退场,取而代之的时更扁平、直观的单页交互。
为什么会出现这种变化?我们在设计表单时,到底该如何抉择?今天我们就来深入讨论一下。
首先,在交互设计初期,我们需要承认步骤条确实做出了很多贡献。在交互设计的理论当中,步骤条的核心价值在于“降低认知负荷”。
它利用的就是心理学中的“组块化”原理,将一个庞大的任务(比如 50 个填写项)拆解为若干个小任务(Step 1、Step 2、Step 3)。

这种逻辑非常线性,同时能够降低用户的理解成本,通过步骤引导用户,避免了他们在复杂的流程中迷路,所以最初在 C 端产品当中经常使用。
同样这样就造成了很多设计师的路径依赖:只要表单长,就用步骤条,产品经理的视角也是如此

然而,这种线性逻辑遇到复杂的 B 端业务时,问题就会出现。
因为 B 端通常都是专家型用户,他们在处理业务时,需要的往往不是“保姆式的引导”,而是“全局的掌控感”。
步骤条在 B 端复杂场景下,存在三个致命的体验缺点:

这是最严重的问题。想象一下,一个采购员正在创建一个复杂的入库单,如果使用步骤条,他必须填完基础信息点击下一步,才能看到物料明细。
但在实际业务中,他可能需要看着“物料明细”的种类,反过来去修改“基础信息”里的仓库类型。
步骤条这时候就是一堵墙,切断了信息之间的联系。用户被迫在“上一步”和“下一步”之间反复横跳,导致使用步骤条表单异常痛苦,极大地降低了录入效率。
B 端的高效录入讲究的是 连贯、一气呵成,通常需要高效的无鼠标快速操作。
而步骤条的每一次“下一步”点击,本质上都是一次系统级的强打断,它强制用户从输入的心流中抽离出来,停下手中的动作去寻找按钮、等待页面校验或刷新。对于每天要处理上百个表单的业务员来说,这种高频的中断会成倍放大操作的疲劳感。
在传统的单页长表单中,发现数据填错,用户只需鼠标滚动回去修改即可,所见即所得。
但在步骤条模式下,修改成本被无限放大:用户可能需要连点两次“上一步”,修改完成后,再连点两次“下一步”才能回到原位。
更糟糕的是,B 端表单不仅用于“新建”,更常用于数据的“二次编辑”。如果是为了修改最后一步的某个小字段,用户却不得不把前面的步骤全部重新点击过一遍(甚至可能触发连环的必填项校验拦截)。在编辑场景下,步骤条带来的交互冗余是成倍增加的。
目前我们看到越来越多的系统,正在提出一个新的要求:“非必要,不步骤”。
B 端产品开始转向“长表单 + 锚点导航”的模式。这种现象我认为其实就是在:把业务的处理掌控权,彻底交还给用户。
全局视角:目前其实最常见的做法就是将基础信息、详细配置、关联数据等所有模块,展示到一个空间当中,配合页面当中的 锚点定位,用于告诉用户页面的整体情况,这样就能消除未知的焦虑。
随机存取:在表单层面,我们希望彻底解放线性顺序的束缚。用户不再受制于系统,可以根据手头掌握的资料灵活决定录入节奏,对于很多当前信息缺失的情况,我们可以提供更多新增的入口,减少用户跳转。
同时需要考虑草稿箱、暂存等功能,给表单提供非线性的操作路径,才能契合真实的复杂业务场景。
沉浸式心流: 通过上下翻页替代步骤跳转,我们发现在单一页面中,能够使用户更容易沉浸心流,专注填写。
难道就不能用步骤条了?
作为设计师,我们需要明确步骤条的使用决策。
在决定使用哪种组件时,先问自己两个问题:
Q1:后续步骤的内容,是否与前一步内容会有依赖?是 → 使用步骤条。(比如:Step 1 选了“企业”,Step 2 才出现“营业执照”上传入口;选了“个人”,Step 2 则是“身份证”。前后有强逻辑耦合。)否 → 使用单页锚点。(比如:填写入职信息,基本信息和教育经历之间没有逻辑依赖,只是信息的类目不同。)

Q2:这个任务是否是一次性的、不可逆的?是 → 使用步骤条。(比如:大额转账汇款、极低频的系统初始化向导,需要用户步步确认,谨慎操作)否 → 使用单页锚点。(比如:日常的高频数据录入、编辑商品详情信息)

其实在我看来,很多系统“去步骤条化”,本质上是要求设计师跳出组件库的舒适区,重新深挖业务场景。
作为 B 端设计师,我们不能成为盲目拖拽组件的执行者,而要在业务效率与交互心智之间找到最佳平衡点,这才是我们不可替代的价值。
转载:人人都是产品经理
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

作为专注于体验设计的创新团队,兰亭妙微UI设计公司认为:一个好的设计,不仅要解决问题,更要抚慰情绪。我们从“不确定感”“压力”和“关怀”三种典型情绪出发,重新拆解航班状态页的设计逻辑,让它不再是冰冷的工具,而是成为用户旅程中善解人意的“情绪伙伴

你有没有匆忙赶着去机场的经历?是否也在航班延误时感到过焦虑? 这些情绪我们都曾体验过——但它们真的被运用到设计中了吗?
这一次,我们从“情绪”出发,重新设计了航班状态页,分享 3 个由用户情绪驱动的设计决策。
想象一下这个场景: 用户可能正坐在赶往机场的火车上。一边盯着时间,一边核对路线,脑子里不断计算着:“我来得及吗?万一航班有变化怎么办?”
这是一种非常典型的不确定时刻。 不是恐慌,而是那种微妙却持续的紧张——用户此刻只想确认一件事:一切是否仍在按计划进行。

我们的设计回应在这个场景中,用户最需要的,其实就是航班状态信息本身的确定性反馈。 而最常见、也最容易引发误解的状态之一,就是航班“延误”。
但延误并不等于灾难——航班依然会飞,有时甚至反而给用户多出了一点赶往机场的时间;起飞延误,也不一定意味着落地延误。
而在旧版本中,“延误”与“取消”使用了同一种红色。这种表达,会在第一秒就把“延误”解读为一种危险信号,放大了用户原本就存在的不确定感。
因此在改版中,我们将“延误”的颜色调整为橙色:
一个颜色的变化,背后对应的其实是一种“风险等级可视化分级设计”,而不是简单的视觉改动——让信息 既足够被看见,又不会过度制造恐慌。
也正是在这种细微的情绪调节中,用户的不确定感被悄悄降低了。

再换一个场景:用户已经站在值机柜台前,一只手拿着护照,另一只手扶着行李,也许身旁还有一个小孩正拉着他们的衣角。外部刺激密集、节奏迅速,这是一种短暂但强烈的压力时刻。
在这种状态下,用户最迫切的需求,往往不是“浏览”; 而是马上确认关键信息是否齐全——PNR 号、行李额度、值机所需的任何关键信息。 这不是一个可以让用户慢慢寻找入口的时刻。
他们只想快速、明确、毫不犹豫地进入「我的预订」。

我们的设计回应
航班状态页,往往是用户走到柜台前最后查看一次的页面。 因此在这个高压场景中,“我的预订”必须是第一时间被看到的入口。
在这次改版中,我们做了三件小调整:
这些变化看起来都不大,但它们背后遵循的是同一个原则:在高压力状态下,为用户提供「最短决策路径(Shortest Decision Path)」。
当用户无需思考“我要点哪里”,而是第一眼就知道“这就是我要找的”,压力,便在这一瞬间被有效削减了。

在旅程的后半段,节奏逐渐慢了下来。
用户已经通过安检,买了一杯咖啡,坐下等待登机。
在这个相对放松的时刻,他们偶尔会再次打开航班状态页,然后看到一个按钮:“分享航班状态”。
也正是在这一瞬间,用户的情绪,从“关注自己”,悄然转向了“想到别人”。
他们会想到来接机的朋友或家人——
是否顺利、是否会在机场焦急地反复确认时间。 于是,一个非常真实、也非常普遍的念头出现了:“我想让对方更方便一点。”

我们的设计回应
为了让这种“关怀”更容易被表达,我们在这次改版中优化了“航班分享”的入口: 让用户可以一键将航班信息发送给接机的人, 对方无需再向用户反复确认,便能直接跟踪航班的实时动态。
这不是一个效率型功能,而是一个典型的“情绪外溢(Emotional Spillover)”场景——用户所感知到的安心,被自然地传递给了另一端的人。
设计在这一刻所做的,只是顺势托住了这种善意:让用户,帮别人更轻松一点。

如果要总结这一切,我想说:设计不仅是在“做界面”,而是在“进入用户的情绪”。
这有点像演员的“方法派表演(Method Acting)”——他们不是站在外面诠释角色,而是走进角色,成为角色本身。
当你也带着这样的方式进入用户的情绪场景时,你会发现:
很多设计决策不再是反复权衡的“选择题”,而会变成一种顺理成章、甚至“非这样不可”的结果。
因为此时你已经不再是站在屏幕这一侧为用户设计,你是在用户的状态之中,替他们做出判断。
转载:人人都是产品经理
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。


1.大脑是个 “偷懒的天才”(认知负荷)
关键在于:人类的大脑很强大,但也超级 “偷懒” 。
我们一直都在努力节省脑力。这就是为什么优秀的 UI 设计不会让人们进行没必要的思考。要是你的应用程序用起来像解谜游戏,用户会直接离开,说不定走之前还会留下一篇言辞激烈的差评。
设计不是为了炫耀你有多聪明,而是要让用户感觉自己很聪明 。
这些技巧能让大脑 “不宕机” :
把复杂内容藏起来,等需要的时候再展示。(对,说的就是你 “高级设置” 。 )
希克定律很简单:你给别人的选择越多,他们做决定花的时间就越长,而且越想哭,或者直接放弃。
你有没有盯着一个按字母顺序排列,从 “阿富汗” 开始罗列了 30 个国家的下拉菜单发懵?就是这种情况。
设计要做的是减少决策难度。不是剥夺用户选择自由,而是让选择路径一目了然。
像极简主义者一样设计:

小得可怜的按钮、细得离谱的文本链接,还有关闭按钮 “X” 比果蝇还小的可关闭弹窗。
我们都为此吐槽过。菲茨定律表明,点击某物所需的时间取决于两个因素:目标的大小和距离。所以,要是你想让用户真的去点击按钮,那就得让它便于点击。
实用建议如下:

用户看屏幕可不是从上到下逐行阅读,他们浏览的样子就像喝了浓缩咖啡的松鼠,这儿瞅瞅那儿看看。
所以,你得像指挥家引领管弦乐队那样把控视觉层级。通过尺寸、颜色、粗细和间距来告诉用户:“嘿,先看这儿!”
要是没有视觉层级,所有元素都在争抢用户的注意力。可要是所有元素都在大喊大叫,那就什么都听不见了。
不妨试试这些方法:
你或许想成为按钮设计界的毕加索,或者重新发明导航栏。但你猜怎么着?人们偏爱他们熟悉的东西。
登录表单总是按固定顺序设置邮箱和密码输入框,这并非偷懒,而是因为大家对此熟悉。
具体做法如下:

格式塔心理学本质上是我们大脑快速解读现实的方式。我们不会把事物看成孤立的元素,而是依据接近性、相似性、对齐方式和连续性对它们进行分组。
如果你的用户界面(UI)不遵循这些模式,用户就会感到困惑。而困惑会让用户迅速关闭页面。
举例如下:
告诉你个秘密:人们做决策时凭的是情感,之后才从逻辑上找理由。这一点在 UI 设计中同样适用。
想想看,你有没有因为某个按钮给人的感觉很好就点了它?比如那令人愉悦的悬停效果,或是那巧妙的动画。
设计能引发愉悦感,也可能带来挫败感。
如何从情感角度进行设计:

用户不会记得使用过程中的每一秒,他们记住的是最强烈的瞬间和结尾,这就是峰终定律。
所以,如果你的结账流程十分顺畅,但确认页面却像 404 错误页一样糟糕,猜猜他们会记住什么?
设计小贴士:
要是用户不确定某个按钮的功能,就会犹豫不决。而这种犹豫会破坏操作的连贯性。
最出色的用户界面(UI)能消除疑虑。它们仿佛在告诉用户:“嘿,点这儿,放心,不会误删所有东西。”
可以利用以下方法:

说实话,有时候你确实没时间从头构建每一个流程。这时候,像 “Made in Figma” 这样的插件就能救急。
它能让你直接使用预先构建好的 UI 流程和组件,这些都遵循了最佳实践。无需猜测,也不用到处找灵感。就好比有个不唠叨的设计副驾在帮你
当我想在不牺牲质量的前提下快速推进工作,或者大脑靠咖啡因强撑,只需要一个可靠的布局来开展工作时,我就会经常用它。
首先,感谢你。显然你对优秀设计非常上心。
其次,这里有一份基于心理学的 UI 设计小抄:
转载:人人都是产品经理
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

从谷歌的Gemini到ChatGPT Plus,从Photoshop的智能填充到钉钉的AI助理,这个符号似乎已经成为了AI的专属标志。这篇文章将带你深入了解“菱形十字星”的起源、发展以及它在AI图标中的广泛应用,探讨这个视觉符号如何成为AI时代的标志。

不知道大家有没有发现一个现象,现在很多AI标志或图标里都带有“菱形十字星”元素,自带一股科技感和闪光感。这个设计风向实际已经兴起两三年了。
2022年ChatGPT的发布直接给IT行业来了一场大变革,之后大部分应用都开始接入AI功能。设计师们琢磨来琢磨去:到底用啥图标代表AI好呢?最后“菱形十字星”成了共识。
接下来就如大家所见了,哪里有AI,哪里就有菱形元素——谷歌的Gemini、Figma AI、ChatGPT Plus、PS的智能填充、有道词典的logo、钉钉的AI助理、百度搜索的问AI……

那么“菱形十字星”元素是如何演变而来的呢?又是从什么时候开始、因为哪些原因,这个视觉符号逐渐成为AI专属标志的呢?一起来看看~
说起菱形元素的最直接的起源,在日本漫画里其实早有踪迹。
在日本流行文化里,“菱形十字星”元素常用来突出漫画人物角色的眼睛或者强调某个场景。到了20世纪70、80年代,它逐渐成为一种视觉符号:只要角色看到想要的东西或者喜欢的人,或是觉得某件事很酷很惊喜,眼睛里就会冒出这种闪光的菱形十字星。
后来到了1999年,日本电信公司Docomo创造了第一批“表情符号”,突破了纯文字交流的局限。当时设计师栗田重隆一共设计了176个表情,其中就有个菱形十字星图案 (左下角),能把这个图案加进去估计就是因为它在当时的日本流行文化里太有存在感了。

直到2010年,这个表情加入到Unicode 6.0标准,表情的官方名称叫Sparkles,从此在全世界的数字设备上都能使用它了,也就是现在咱们手机里打出来的✨表情。
1990年Photoshop推出了“魔棒”功能,这让菱形十字星元素在数字世界里的存在感又上了一个台阶。估计不少设计师都用过这个功能:点一下魔棒工具,就能选中图片里颜色相近的区域。在此之前,要做这事要么手动用橡皮擦,要么一点点框选,操作起来很麻烦。

不过话说回来,跟其他图标比,“魔棒”图标表达出来的含义其实挺模糊的。你看时钟、日历、文档、放大镜、垃圾桶这些图标,一看就知道是干啥的。
但魔棒图标是啥意思?可能真说不准。正是由于这种特性,“魔棒”适合表达新颖、神秘、美好、便利等含义 (魔法棒一挥,美好的事情即将发生)。
后来在图片编辑领域,菱形十字星元素用得越来越频繁。只要是能“少动手”的功能,比如自动调色调、快速选区域、滤镜,在设计图标时都喜欢加入菱形十字星元素。

到最后,只要是能自动处理各种繁琐任务、个性化定制的功能图标,都会加入菱形十字星元素。现在它几乎成了一个万能的图形,所有让人觉得亮眼的功能,好像都能用菱形十字星表示。

真正让菱形十字星元素和AI绑定在一起,是2020年谷歌相册推出的AI图像增强功能——与其向普通用户解释AI多复杂,不如直接传递“神奇的事情马上要发生”的感觉。同年谷歌表格的“探索”功能也用了菱形十字星元素,通过机器学习给用户推荐主题。这大概是谷歌首次尝试给AI功能建立“视觉符号”。

此后菱形十字星元素迅速成为AI功能的视觉语言。各大公司好像心照不宣都开始用它代表AI——你用我也用,慢慢就成了行业特征。
在AI人工智能刚兴起的时候,许多设计师可能都面临类似的困惑:如果必须用一个图标来代表AI,它会是什么形状?最开始有人使用机器人、大脑、芯片、灯泡或复杂电路图案等图形代表AI。但AI智能且复杂,要找个视觉稳定、可扩展且美观的图标来代表,好像前面这些选项都差点意思——所以最后还是用”菱形十字星”这种视觉上最亮眼的图案成为首选。
现在菱形十字星常作为辅助元素在图标里搭配使用,而不是单独使用。
比如夸克的AI搜索是一大一小两个菱形搭配;有道的句子润色是魔棒搭配菱形;稿定AI平台对菱形用的更广泛,凡是跟AI相关的功能,像创意画布、AI改图、AI扩图等功能图标中都有菱形十字星作为辅助元素。

虽然菱形十字星用的越来越频繁,但也有一些产品在尝试减少菱形的使用并探索更加个性化的AI设计图标。
比如Notion刚开始推AI功能时用的也是菱形十字星图标,后来AI功能逐渐完善了之后就将AI换成了人脸效果的图标,这个图标让Notion的AI视觉效果一下子有了辨识度。

说不定等AI完全变成标配功能之后,咱们还会重新用回那些传统的图标。就像90年代的软盘保存图标一样,菱形十字星或许也会成为一个时代的标志。
但在此之前,菱形十字星很可能仍将作为一种重要的视觉语言,象征着向AI人工智能时代的过渡,成为我们拥抱和理解新技术的标志
转载:人人都是产品经理
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

很多品牌和产品在做设计改版时,明明想让界面更美观、体验更流畅,却常常迎来用户吐槽。从 LOGO 更新到 APP 界面重构,一旦改动不当,很容易出现 “越改越难用” 的声音。兰亭妙微 UI 设计在长期的产品 UI 与品牌视觉项目中发现,用户抵触改版并非挑剔,而是习惯、情感与体验预期没有被兼顾。本文从用户心理出发,分享 5 个实用步骤,帮你降低改版争议,让升级真正被用户接受。

其实从品牌LOGO到产品APP设计,只要一改动,大家第一反应往往是持怀疑态度。哪怕团队前期把设计规划做得再周密,用户该不喜欢还是不喜欢。那这是什么原因呢,咱们一起聊聊~
抵触改版的核心原因主要有三个维度,咱们一个个介绍。
看人们天生偏爱熟悉的安全感。在熟悉环境中,已知的规则和模式能降低决策压力,带来可控感。
熟悉度偏差

简单说就是“再好用的新东西,也不如熟悉的旧东西”。这是大脑的一种“偷懒”习惯——处理熟悉的事不用费太多劲,所以我们会默认熟悉的选择更安全、更舒服。
尤其面对变化时,这种偏差会更明显,让人忍不住依赖原来的使用逻辑和界面布局。
禀赋效应

这本来是经济学概念,放到产品里也特别贴切——人会觉得自己拥有的东西更值钱。对用户来说,常用的APP产品早就不只是工具了,更像自己的电子资产。
一旦重新设计,用户心里会有种“丢了东西”的失落感,自然会抵触。
看改变设计=打破习惯。用户体验专家雅各布·尼尔森说过一句话:人们不想花时间学习,只想花时间做事。这句话精准点出了用户对设计变更的不满——改设计本质上是让用户“打破旧习惯、学习新规则”,而这两件事都很难办。
使用习惯被打乱

常用的APP用久了,用户基本不用动脑就能操作,比如“点底部按钮进首页”“左滑删消息”。但设计一改,比如底部按钮挪到顶部、主屏幕能直接用的功能藏进了汉堡菜单,用户就得重新寻找和记住这个操作,让原本简单的操作变成了刻意寻找,增加使用麻烦。
三个行为解释为什么学习新事物这么难?

用户不想学新设计新事物,可能并不是懒,而是背后有三个行为逻辑在“拖后腿”:
看有没有考虑过重新设计的核心目标,可能本来就不是为了吸引老用户?
先看看苹果iOS 26的更新介绍:新面貌、全新设计、全新设计元素、图标大焕新…宣传里都是“全新”“个性”这类词——其实很多品牌重新设计,核心目的是吸引新用户。
对企业来说要赚钱就得拉新,所以会用“亮眼的新功能”“颠覆性设计”吸引新用户。
新用户本来就是第一次用,不用适应旧版本,反而觉得新鲜;但老用户不一样,得花时间重新学、重新适应,相当于多了一道使用门槛。
所以老用户会吐槽“改得乱七八糟”,甚至要求回退到旧版本,本质上是和品牌的“拉新目标”冲突了。
重新设计不是简单的改一改图标风格、调调按钮位置,而是从前期规划到后期落地,每一步都得考虑用户感受。
在决定重新设计前得先明确:你的产品的核心价值是什么?重新设计要实现什么目标?
比如苹果的设计不管怎么更新,始终围绕“创新”“易用”“细节控”这几个核心——iOS 的大版本更新,哪怕界面变了,用户也会觉得“这很苹果”,因为它没偏离品牌的核心体验。
所以第一步不是怎么改,而是为什么改,确保设计改版和品牌价值、用户的核心需求对齐。
减少抵触的关键是让设计贴合用户需求。
那怎么贴合呢?
主要靠用户研究。
先看看用户之前吐槽的点是什么,比如按钮太隐蔽、筛选功能不好用;再问问用户想要什么,比如希望能快速标记已读、想要深色模式。基于这些反馈做设计,既能解决老问题,又能让用户觉得我的意见被官方采纳了,加深参与感和荣誉感。
比如京东APP的15.0大改版,采用逐步放量来进行改版,京东内部一直强调“以客户为中心”,具体改哪儿、怎么改,都必须站在用户视角。
根据内部小伙伴透露: 京东APP改版从1%对外开放时就启动了用户建议收集,会快速根据用户的建议反馈、以及数据表现进行调整迭代。
这期间,很多用户给出很有价值的建议或反馈。从升级改版效果上看,多数用户在新版App上都比之前停留更长时间了,较好提升了用户体验。
不是所有设计都能随便改,需要考虑这个功能或界面“用户用得多不多、重要不重要”。
比如Spotify之前在底部导航栏加了个“AI创建播放列表”的按钮,看似是个小改动却引来一堆吐槽。
因为底部导航是用户每天点几十次的核心区域,早就形成了肌肉记忆,突然加个按钮,用户很容易点错,还得重新适应布局。
所以设计改版前要先考虑:这个功能用户每天用几次?是不是核心操作?用得越频繁、越核心,改动时越要谨慎。
使用频率越高,重新设计时收到的负面反馈可能性就越大。
重新设计不代表要“一刀切”,把原有的设计全部推翻,而是保留一些熟悉的元素帮用户快速适应。

比如推特改名“X”后,虽然图标从蓝鸟变成了X,主色调也成了黑白色,但发布按钮还是沿用了原来的蓝色,核心的界面布局也没大改。老用户打开APP不会觉得完全陌生,能更快接受X这个新品牌。
除非是彻底换赛道的大改版,否则尽量保留用户熟悉的识别点,比如常用按钮的颜色、核心功能的入口位置,减少陌生感的冲击。
用户抵触新设计很多时候是因为没得选。如果能让用户自己决定用旧版还是新版,抵触改版的情绪就会少很多。

像支付宝个人中心的改版,首次进入新页面会有一个“页面布局全新升级”的提示,用户可以自主选择“开始体验”或者“稍后体验”。
在新版页面的右上角仍保留“返回旧版”的入口,方便用户返回旧版熟悉的页面中。
这样一来,愿意尝鲜的用户就可以体验新设计,哪怕暂时不用新版,也不会抵触更新,毕竟选择权一直在用户手里。
不是所有的重新设计都能一次成功,改完后用户吐槽也很正常。关键是先判断吐槽主要集中哪些方面,再针对性解决。
① 如果吐槽集中在界面很陌生
比如用户说“按钮位置全变了,看着好别扭”“找不到原来的功能了”,这种情况大多是适应问题。用户刚接触新设计,原来的使用习惯被打破,自然会觉得麻烦。
但只要设计本身没问题,随着时间推移,用户慢慢养成新习惯,这种吐槽会越来越少。
这时候不用急着改回去,给用户一点适应时间就行。
② 如果吐槽集中在某个特定功能
比如用户一直说“保存按钮藏太深了,找半天找不到”“原来能直接用的筛选,现在要进二级菜单”,这种情况大概率是设计缺陷。
这类问题不会随着时间消失,反而用户用多了吐槽会越多。
这时候要赶紧收集反馈,分析问题出在哪里,比如把藏得太深的功能挪出来或者恢复常用的操作路径,别让一个小缺陷毁了整个改版效果。
最后不能指望通过一次改版把所有的旧问题解决掉。
设计改版是一个不断迭代的过程,就像很多大厂APP会搞A/B测试,快速试错后再优化调整。
所以说改版完成不是结束,而是根据用户反馈持续优化的开始!
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

这篇文章将为你提供五个实用的设计技巧,帮助你提升产品的用户体验和决策效率。从增加紧迫感、使用默认选项和一键操作,到缩短操作路径、提供实时反馈,再到信息整理和分步呈现,这些技巧都能有效降低用户的认知负荷,帮助他们在最短的时间内做出最佳选择。

在产品设计的常规逻辑里,“延长用户使用时间”往往是核心目标之一。从算法推荐到趣味互动,大部分设计都在努力让用户多停留。
但设计的本质是服务需求,而需求从来不是单一的:对于内容类产品,“久留”是价值;但对于像打车、点外卖、订酒店票务等服务,“快速决策”才是用户的核心痛点。
今天就来聊聊如何通过设计帮用户快速决策,提升产品的核心竞争力~
心理学里有“快思考”和“慢思考”的概念:快思考靠直觉和本能反应,做出的判断偏情绪化;慢思考则是逻辑分析,决策会更谨慎、更深思熟虑。
赶时间的用户大多靠快思考做决定,下面这五种元素能帮他们加速决策:

这五个元素的核心都是“降低认知负荷”,也就是减少用户需要动脑处理的信息量。
毕竟认知负荷越低,决策越快;要是信息太多导致 “认知超载”,理解起来费劲,决策速度自然就慢了。 接下来咱们看看这些元素的实际应用案例,搞懂怎么进行落地设计。
“错失恐惧”(FOMO,Fear of Missing Out) 表示怕被落下、被排除在外的感觉,商业里常用这招制造稀缺感,让用户觉得“不选就亏了”。
大家可能都经历过订机票或酒店时,页面上弹出“立即预订,不然价格要涨/马上售罄”的提示。这就是在强化紧迫感,用稀缺性鼓励用户快点下单。
设计方向↓
数量提示

比如预定酒店时,在酒店卡片上展示“直降xx元”、“低价房仅剩1间”等提示说明,营造低价房马上就没的紧张感。
类似的还有特价商品“仅剩x份”,目标小区的房源“仅剩x套”都是利用数量不断减少的提示,从而引导用户快速下单。
倒计时提示

倒计时用来提醒用户在限定时间内作出决定,常用在限时秒杀、限时抢购、优惠马上截止等强调时间性的活动中,营造出时间有限、优惠即将结束的紧张感。
根据希克·海曼定律,选项越多,用户越难下决定。所以与其给出所有选项,不如聚焦用户真正需要的,效果反而更好。
设计方向↓
提供默认选项

把对用户最重要、最实用的选项设为默认。 比如打开视频APP,首页会展示上次没看完的电视剧看到了第几集,引导用户继续观看。
听播客的过程中如果退出了再进入播客,页面上提示上次播放的位置,用户可以选择是否自动续播还是重新播放,再给用户提供便利性的同时保留了自出选择的权力。
还有在提交商品订单时,默认勾选优惠券抵扣、积分抵扣等优惠选项,方便用户快速提交订单。
一键完成操作

能让用户只需要点击一下就完成任务。比如输入密码时从密码库中一键选择保存好的密码,省去了输入密码和忘记密码再找回的麻烦;输入手机验证码时,验证码会在键盘上悬浮展示,点击一下即可完成输入,提高操作效率。
除了上面两个场景外,支付时的自动跳转也很典型——点击“立即支付”自动打开支付软件,接着用Face ID或者输入支付密码验证就能付款,最大限度地减少了不必要的交互,特别方便。
快速导航就是用户不需要费力,一看就能理解、随手就能操作的界面。把操作路径缩到最短,用户就能用最少的操作找到需要的信息。
设计方向↓
简单快捷的手势操作

通过用户熟悉的的手势操作来找信息、做决定。比如职位详情页左右滑动就能查看不同的职位详情,省去了返回职位列表、滑动列表、再点击列表看详情等一系列的操作。
交友软件的滑动交互也非常经典,用户轻轻一滑就能匹配好友,不需要浏览复杂的个人资料。
输入内容自动补全/搜索发现

在搜索内容的时候提供搜索建议,比如输入地址时为用户提供更精确的地址建议,或者在输入网址链接时,根据历史搜索记录自动补全链接;还有根据搜索记录自动推荐一些用户可能感兴趣的内容,都是提高操作效率的好方式。
用户操作后能马上得到反馈的界面,也能加快决策速度。
设计方向↓
提供加载动画、完成图标、震动反馈等多种反馈

比如苹果的Face ID功能,验证时不仅会震动,还有验证前、中、后的动画效果,最后还会显示成功或失败的图标。
实时反馈操作结果

在Nike的注册界面中,会把密码的四个要求展示到页面上,用户每满足一个要求就会自动在要求上打一个对钩,真正做到实时反馈;网络慢的时候,用骨架屏的方式进行界面预加载提示,这些设计能让用户立刻知道操作有没有成功,从而快速做出决定。
设计方向↓
信息可视化设计

不必要的元素越多,用户越容易漏掉重要信息,还会产生决策疲劳。
例如在滴滴的打车界面中,只展示用户最关心的车费和预计到达时间,方便即时对比;通过图标+文字的排列组合,在选项较多的情况下,帮助用户快速理解;对于内容比较多的筛选条件,可以考虑优先展示最常用的选项,将不常用的选项收起来。
分步操作
如果需要呈现的内容比较多,还可以考虑采用分步的形式,让用户一步一步来,而不是一次填完所有信息。
分步操作能大幅度减少用户每次需要处理的内容,缩短页面停留时间。

比如选购汽车时需要选择很多的配置,就可以采用分步操作一页只做一件事 (One Thing per Page),每次只显示一个操作项,把选配置这个复杂的流程变得简单易操作。
对于匆忙的用户来说,用户体验应该超越简单的界面,成为一个有助于快速做决定的场景。
设计时一定要帮用户用最少精力、最短时间做出最佳选择。尤其是需要即时反馈、信息清晰的场景,体验的好坏直接影响用户满意度。
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

在设计领域,如何让用户快速适应并接受新的技术和功能是一个关键问题。本文通过深入探讨心智模型和学习曲线的概念,为设计师提供了实用的指导。从理解用户熟悉的操作习惯到设计平缓的学习曲线,作者详细阐述了如何在创新设计中保持用户友好性。

每当像人工智能、扩展现实(XR)、自动驾驶这类可能颠覆设计范式的新技术出现时,设计师总得琢磨怎么做出创新的用户界面。但在这个过程中,有两个关键概念不能忽略——心智模型和学习曲线,这些直接关系到用户能不能看懂、会不会使用这些新功能。
技术变得越来越“陌生”,可用户思考问题的方式,可能还倾向于沿用过去的习惯。那么在这个快节奏时代,设计师应该打造什么样的体验呢?今天就来聊聊如何结合心智模型和学习曲线来设计用户体验。
所谓心智模型,就是用户理解某个功能时会用到的思维方式,核心是“靠过去的经验判断”。

举几个常见的例子你就懂了:
一想到客服中心,脑子里就会冒出“耳机”图标;
想保存文档,第一反应就是找“磁盘”图标;
想打电话,哪怕现在智能手机都普及了,还是会下意识找“座机”图标。
有意思的是,现在用“磁盘”图标的用户大部分都没见过真正的软盘,但这个图标一直没被淘汰,核心原因就是用户的心智模型没改变——大家已经默认“磁盘=保存”了。

所以说,新设计不能凭空创造,得顺着用户习惯延伸。典型的例子就是“拟物化”设计,它会把现实里的操作习惯、物理体验搬到数字界面上。
这种设计在服务行业特别好用,尤其是对两类用户:一类是习惯了现实操作、对数字产品没形成固定认知的人,比如老人和小孩;另一类是刚接触新服务,还没建立使用逻辑的人。

再具体说说:
对孩子来说:他们更熟悉童话故事、现实里的小游戏,要是用纯数字导航按钮,可能半天搞不懂。
但换成拟物化插图就不一样了——比如点一下“大门”图标就能开始任务,再用地图直观显示任务进度,很快就能上手。
对普通用户来说:遇到不熟悉的应用时,长得像现实物品的按钮更容易理解。比如界面上的“相机”按钮做得跟真相机快门一样,用户不用学就知道“点这个能拍照”。
学习曲线衡量的是用户学习新界面、新体验的速度。

要是学习曲线太“陡”,就像图表里最底部的那条线,用户可能学半天都摸不着门道,哪怕新功能再厉害,他们也可能放弃使用。
所以理想的状态,是设计一条“平缓的学习曲线”,如图①那条。尤其是做所有人都能用的通用功能,一开始别搞太复杂,得让用户轻松入门。换句话说,设计时顺着用户的心智模型来,本质上就是在打造平缓的学习曲线。
想给用户提供全新的体验?别急着推翻一切,而是先从他们熟悉的体验里找“连接点”。ChatGPT主界面的设计就是一个好例子。

ChatGPT的主界面很容易让人联想到浏览器里的搜索栏,这就是抓住了用户的习惯——大家早就形成了“在空白搜索框里输问题,就能查看答案”的心智模型。ChatGPT只是在这个基础上延伸:你输的是对话,它给的是更具体的回复,用户不需要重新学习就能快速使用。
反过来想,如果ChatGPT一上来就是个满是按钮、图表的复杂页面,而不是现在这个简单的输入框,会怎么样?用户会觉得“这个产品太麻烦,学不会”,大概率会放弃使用。

还有个反面案例是“隔空手势”。这种没有触觉反馈的操作,哪怕现在扩展现实 (XR) 技术这么火,也很难普及。核心问题就是没有形成统一的心智模型:每个人对“空中划一下”的理解不一样,有的觉得是“返回”,有的觉得是“切换”。
而且不同文化背景下的相同手势,手势意义可能差很远,根本没法统一标准。

那什么样的交互更容易被接受?答案是“用户在现有产品里已经熟悉的操作”,比如捏合屏幕缩放图片、轻点一下相当于“确认”、左右滑动切换页面,这些操作不用教,用户拿到新设备自然就会用。
所以设计师要做的,不是在新范式里搞“彻底革新”,而是把用户现有的使用习惯自然延伸到新场景里,让他们一点点适应,慢慢学会新功能。
与其一下子进行大改版,不如逐步优化,这样效果更好。另外,让用户自行选择“要不要体验新功能”,也能减少抵触情绪。

苹果iPad 的“台前调度”功能就是这种逐渐适应的典型案例。一开始iPad的定位是“用来看视频、看文档的内容消费设备”,不是用来办公的,所以没有高效的多任务功能。
但用户对iPad的心智模型是“像手机一样的移动设备”,不是像电脑那样的生产力工具,要是直接给iPad加个跟电脑一样的多窗口界面,用户会觉得“这不是我熟悉的iPad 了”,肯定会有抵触感。

所以苹果的做法很聪明:保留iPad原来的操作逻辑,同时加了“台前调度”功能。如果用户想全屏用APP,还是跟以前一样,要是需要多窗口办公,再手动开启这个功能。没有强迫用户改变习惯,而是让他们自己掌控“要不要学新东西”,这样接受度会变得更高。
所以后面想推广隔空手势,也可以参考这个思路:先把手机/平板用户已经熟悉的手势 (比如滑动、轻点) 用到新场景里,等大家适应了,再一步步扩展建立新的手势规范。
还是拿ChatGPT举例。ChatGPT是“实时生成答案”,用户输入关键词后,结果需要等几秒钟才能出来。这时候要是没反馈,用户会怀疑:“我刚才点发送了吗?它是不是没收到?”。

所以ChatGPT在生成答案时,会提供大量的视觉反馈、动效反馈来提示“正生成中”,让用户知道“没出问题”。这种反馈很重要,能消除用户的不确定感。

苹果在这方面也做得很好。每次推出新的解锁方式 (比如按键解锁、滑动解锁),都会给出清晰的视觉反馈。尤其是取消Home键后还加了“触觉反馈”,滑动时手机会轻轻震动一下,就像以前按Home键的触感,用户能立刻知道 “解锁成功了”。
清晰的反馈能帮用户搞懂“新系统怎么用”,哪怕是第一次使用,也不会因为“不知道操作对不对”而放弃。
不是说一定要无条件顺着用户的心智模型,也不是所有功能都追求“越简单越好”。要是局限于老模式会做不到差异化,但完全不管用户习惯又会让学习曲线太陡。关键是找到平衡。

首先要明确设计的服务是“所有人都能用” (通用性),还是“针对特定人群” (特异性);然后看目标用户愿不愿意学、能不能学会。
比如用户是“对新技术接受度高、有相关基础”的专家用户,比如设计从业者用的专业软件,那学习曲线可以稍微陡一点 (图②),不用过分简化功能;但如果是给老人用的健康APP,那必须优先做平缓的曲线 (图①),怎么简单怎么来。
简单说就是:先考虑服务的核心需求是易用还是高效,用户的学习能力,再决定学习曲线该怎么设计。
心智模型是用户根据自己的经验、学习慢慢形成的,并非固定不变。所以哪怕是用同一款产品,不同用户的心智模型也可能不一样,不仅是个人差异,不同国家、文化、年龄、性别的人,认知习惯也会差很多。
举个例子:同样是“点头”这个动作,大多数国家表示“同意”,但在保加利亚和希腊,点头反而表示“拒绝”。要是设计时没考虑到这种文化差异,很可能出问题。

所以必须做深入的用户研究:看看用户平时是怎么跟产品互动的,他们对“怎么用”有哪些固有认知,有没有什么普遍的习惯或误区。要是仅凭自己的假设做设计,很可能让产品“不好用”。
设计师最容易犯的错误就是觉得“我懂的,用户也懂”。实际上,用户的心智模型和设计师可能差得很远——设计师在产品开发过程中会把功能逻辑、操作细节都摸透,形成一套复杂的认知。
但新用户刚接触产品时,对这些一无所知,可能连“点哪个按钮”都得犹豫半天。

怎么缩小这个差距?多参与用户测试、多跟用户聊一聊,看看他们实际用的时候会遇到什么问题,而不是闭门造车的想 “用户应该会这么用”。
新技术≠好体验,关键是考虑用户需求和习惯。创新技术本身再好,要是用户用不明白的话作用也不大。技术越新,越要跟用户熟悉的概念挂钩,让他们觉得“这东西我能上手”。
而做到这一点,核心就是利用好心智模型,在用户习惯的基础上设计一条平缓的学习曲线,让他们慢慢适应。
最后,设计时不妨多问自己几个问题:
我设计的新界面,跟用户以前的体验有什么连接点?怎么帮用户轻松学会使用?什么样的反馈才有效?用户能快速掌握核心功能吗?
慢慢来比较快
转载:人人都是产品经理
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

五个看似简单的图标,背后却是Adobe数十年产品演进的缩影。从拟物到极简,从功能隐喻到文化符号,这些“常青树”图标不仅定义了设计工具的操作逻辑,更见证了人机交互语言的变迁。

Adobe的产品大家应该都用过,每个产品里都有很多一些经典且有特色的工具图标。今天介绍五个Adobe图标,称得上是设计圈的“常青树”。它们陪着Adobe走过几十年,跟着旗下的王牌产品一起成长,一路迭代却始终不过气。
每个图标背后都有段故事,不止于设计,更藏着技术、文化、用户需求和这些年产品的变迁~
核心功能:控制图层显示 / 隐藏
“眼睛”图标是经典的设计隐喻,用得广好理解,用来表达“显示/隐藏”“可见/不可见”这种对立的概念。
在早期浅色版PS中,最开始用来控制图层“显示/隐藏”的是版本A,效果做得特别逼真,睫毛、瞳孔都看得清楚。

后来推出深色版本的PS,写实的“眼睛”看着有点怪,就重新设计了在浅/深背景下效果差不多的版本B。
现在的“眼睛”图标早就从精致的写实风,变成了简约抽象的符号风,适用范围更广,能让人明白是“控制可见性”。

同时,针对浅深不同的颜色模式,“眼睛”图标在保持形状不变的情况下反转了颜色,这样在不同平台或者设备中都能使用样式更统一的图标。
核心功能:一键实现图像便捷操作(如选色)
“魔棒”图标的设计一直围绕“魔法”展开,但现在四芒星成了AI标志性元素后,就得重新考虑“魔棒”的展示效果,既要保留“魔棒”的标志元素,又要和AI功能图标有区分。

在新版PS中,“魔棒”图标保留了原来的闪光样式,重新调整了闪光元素的位置、大小和旋转角度。从最开始的单个A版样式,改成了旋转后的B版样式,最后用了三个独立闪光元素的C版样式,彻底和AI功能区分开。
核心功能:精准绘制矢量路径、贝塞尔曲线
现在“钢笔”图标是很常见的设计,但回溯到1987年Adobe Illustrator刚推出时,它才真正成为“创建、编辑矢量路径”的代名词。
它不是用来随手画的“铅笔”,也不是用来涂色的“画笔”,而是能精准画贝塞尔曲线、做矢量图的“钢笔”。

这么多年,“钢笔”代表“矢量绘图”的核心意思没改,但图标的朝向调整过。
在Illustrator 15版本里,“钢笔”角度被旋转倾斜,目的是更好地适配按钮空间,还能和其他工具图标的方向保持一致。

核心功能:修剪、旋转、矫正图像
从Photoshop 1.0版本开始,“裁剪”图标就存在了。它的设计灵感,来自暗房里洗照片时用的遮罩框,特别是框上的角线。这么多年“裁剪”图标虽有小调整,但一直是个经得起时间考验的经典符号。

这些年“裁剪”图标做了不少优化:
星号标记的地方,是这些年Adobe尝试调整标尺交叉位置的情况,直到2020年才确定了现在“左上右下”的位置顺序(这亿点变化你发现了吗…)
核心功能:保存文件(本地/云端/U盘)
“软盘”图标和“电话听筒”图标一样,都是拟物化设计的代表——就算很多人没见过真正的软盘,也知道它代表“保存”。
用图标表示抽象操作本身就不容易,再加上这么多年存储设备一直在变,软盘图标的“长寿”更让人惊讶。

从最开始代表软盘的A版图标,到后来代表光盘/硬盘的B版图标,再到现在代表保存到云端的C版图标,它的含义一直在延伸。
但看到这个经典符号,大家就知道是“保存”,这就够了。
图标虽小,但影响力却很大。
寥寥几个像素,却承载着丰富的意义、记忆和隐喻。随着工具、用户和平台的不断发展,作为指引的图标也在不断演变。

这些图标的变化告诉我们,设计不是一成不变的,而是一个不断倾听用户、测试效果、优化改进的动态过程,有时甚至会回归到那些有效的经典设计里。
所以下次你点图标时,不妨多停一秒,好好看看这个藏着很多故事的小小图像。
转载:人人都是产品经理
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

UI走查中95%的问题源于“间距不准”,而肉眼难以量化,导致沟通低效。DevTools(浏览器开发者工具)作为设计师与前端的“共同尺子”,能将页面视觉问题转化为可测量、可验证的技术事实。本文从设计师视角系统讲解如何用DevTools高效走查,希望可以帮到大家。
如果你经常参与 UI 走查,应该会有类似的体验:设计稿里一切工整、呼吸感刚刚好,到了线上页面,总有种说不出的别扭——按钮看起来有点胖,列表挤成一团,弹层莫名“顶头”——你明明感觉哪里不对,却很难说清楚问题到底在哪儿。
有一组数据挺扎心:在一次前端对UI 走查问题的统计中,“间距”占到了 95%、字体相关只有 3%、边框背景色等合计只有 2%。
换句话说,大部分“看着不舒服”,其实都跟间距有关系。但是间距很难通过肉眼直接量化,导致设计师走查费时、与前端沟通效率低,前端修改有时也是“跟着感觉来”、难以达到最优效果。
这也是为什么,我把 DevTools(开发者工具)当成 UI 走查的标配工具。
这篇文章,就想从一个设计师的视角,讲讲什么是 DevTools 、如何用 DevTools 做高效的 UI 走查,把实践中总结出的那一整套方法,汇成一条实际好操作的路径。
本文不涉及复杂的代码和技术概念,放心享用。
DevTools(Developer Tools,开发者工具)是现代浏览器自带的一套网页检查与调试工具,用于查看网页的结构、样式、脚本、网络请求和性能等信息。它能够实时展示页面背后的代码和布局,并允许用户在本地修改样式、观察变化。
DevTools 不是独立软件,而是浏览器内置功能。目前主流浏览器都提供了自己的 DevTools,包括Chrome、Safari、Firefox、Edge等。
DevTools 不是只给前端用的“黑客面板”,而是设计师与工程师之间的一把“共同的尺子”,它能让一个页面的“表面外观”变成“透明结构”:你可以在上面看到每一个元素的真实尺寸、间距、颜色和字体,可以在几秒钟内验证“到底是谁没对齐”,也可以通过临时修改样式,把你脑子里的改善方案可视化地呈现出来。
换句话说,它提供了一种把 UI 视觉现象与技术实现逻辑直接对应起来的能力。

开始之前,第一步永远是把 DevTools 打开。最常用的方式是:

很多设计师第一次看到 Elements 面板时,会被大片的 <div> 吓到。
其实可以把它当作“页面骨架实时展开图”:每一层缩进就是嵌套关系,每个标签对应页面上的一个区域。
我们不需要懂它,只需要关注与UI走查密切相关的三个面板:样式Styles(样式规则)、计算样式Computed(最终计算值)、布局Layout(布局体系)。

如果你对英文属性名不够熟,可以在右上角齿轮按钮里,把语言切换到中文,这能降低学习成本。

要做 UI 走查,第一件事就是精准选中目标元素,常见方式包括:
点击 DevTools 左上角的小箭头
在页面上移动鼠标,高亮所选区域,点击可锁定元素
适合复杂、多层嵌套的界面。

hover到具体元素,右键 → 检查(Inspect)适合按钮、标题、图标等肉眼识别明显的元素

既然 UI 走查里 95% 的问题都是”间距看着不对”,学会量间距是最划算的一件事。
有两个方法:
要理解间距,首先要认识 Box Model(盒模型)——这是网页布局的基础概念,它将每个元素看作一个”盒子”,由内到外分为四层:content(内容区)、padding(内边距)、border(边框)、margin(外边距)。
DevTools 能将这个模型可视化展示,让你清楚看到每一层的数值,从而与设计稿进行比对,精准定位间距问题的根源。
在页面或者元素Elements 面板中移动鼠标,页面对应区域会出现不同颜色的高亮框:橙色:margin、绿色:padding。
适合快速巡检整体布局。

至于颜色、字体、行高等样式,可以从样式Style或者计算样式Computed查看。
Style面板显示了所有作用于当前元素的样式规则,包括颜色、字号、字重、字体、边框、阴影、圆角。
如果你发现同一个属性,比如font-size,出现了很多次,有的还被划上了删除线。也别奇怪,这代表有多个规则作用于它。
怎么找到哪个是真实的值呢?有两个方法:
一是Styles 面板里的规则,是按从上到下的优先级排列:越靠上的规则优先级越高。我们只需要从上往下找即可。被覆盖的会被划上删除线,不再生效,直接忽略就行。


二是计算样式Computed面板。
它显示了元素最终的样式,更直观,更适合回答:最终字号是多少?行高值是多少?是否有透明度?宽高是多少?
并且可以勾选“组合”,将这些属性分组显示,分为Layout、Text、Appearance和Other。更易查找。

DevTools 最强大的地方在于:你不仅能看到样式,还能立即修改它,实时预览效果——这让走查从”发现问题”变成了”提出方案”。
在 样式Styles面板中,找到你想修改的属性(比如 font-size: 14px),直接点击数值部分,就能进入编辑状态。
步骤:点击数值(如 14px) → 输入新值(如 16px) → 按 Enter 确认,页面立即生效
适合快速微调单个属性。
选中数值后,无需手动输入,可以用键盘上下键进行微调:
适合精细调整间距、透明度等需要”试着来”的场景。
如果某个属性根本不存在(比如你想加个 border-radius),可以在 Styles 面板的任意规则块内:
点击空白处 → 输入属性名(如 border-radius)→ 输入值(如 8px) → 按 Enter 确认
页面立即应用新样式。
有时你不确定是哪条规则导致了问题,可以用”复选框”快速开关样式:
在 Styles 面板中,每条样式左侧都有一个复选框,取消勾选即可临时禁用该规则,观察页面变化。
适合排查”到底是哪条规则在捣乱”。
当你调整出满意的效果后,可以:
右键点击修改后的属性 → 选择”复制” → “复制声明”或”复制规则” → 粘贴到文档或发给前端
这样你就能把”视觉方案”转化为”技术语言”,大幅提升沟通效率。

注意:所有修改都是临时的,刷新页面后会恢复原样。DevTools 不会改动源代码,只是让你在本地预览效果。
许多 UI 缺陷只在 hover、active、focus 状态下暴露,例如:hover 时颜色未变化、点击态几乎无反馈、表单 focus 出现丑陋蓝框。
在 Styles 面板顶部点击 :hov,勾选对应状态即可模拟:hover、active、focus、visited……无需鼠标繁琐操作。

当你发现”每个元素单独看都没问题,但整体就是不顺眼”时,问题往往出在布局层级。
这时候,DevTools 的布局 Layout 面板就能派上用场——它能把页面背后隐藏的布局逻辑全部”照亮”。
点击右侧面板中的布局 Layout,会显示所有网格布局(Grid)和弹性盒子布局(Flexbox)。
如果点击网格名称(或勾选复选框,或直接在元素Style面板中点击对应的 Grid 标签,三者是联动的),页面中会直接高亮显示网格区域,你可以看到:网格线与区域划分、网格线行号与列号、轨迹大小、区域名称、延长网格线(用于检查模块对齐效果)。
这对于排查”为什么这个卡片没对齐”特别有用。
如果点击弹性盒子名称(或勾选,或直接在元素中点击对应的 Flex 标签,三者是联动的),页面中会高亮显示色块、框线,你可以看到:主轴方向(横向还是纵向)、子项的分布方式(居中、两端对齐等)、容器与子项的边界、哪个元素占用了过多空间。
你还可以:点击色块,修改框线颜色、点击定位图标,直接跳转到 样式 Styles 中的对应代码。
这对于排查”为什么按钮挤在一起”或”为什么间距不均匀”非常有帮助。

DevTools 的“设备模拟”工具,让响应式问题无处可藏。
观察:导航是否撑开、文字是否过密、元素是否溢出、弹窗是否遮挡、按钮是否掉到底部……
并支持:切换设备型号、改变屏幕宽度、翻转屏幕方向。

当你熟练掌握了 DevTools 的基础操作,你会发现自己开始好奇更深的问题:这些元素是怎么组织的?移动端怎么走查?能不能让 AI 帮我自动找问题?
这些问题没有标准答案,但值得探索。
移动端页面分两种:H5 网页和原生 UI。它们的走查方式完全不同。
如果是 App 内的 H5 页面(WebView),你可以通过真机调试,直接用 DevTools 查看。如果是原生 UI(比如 iOS 的 UIKit、SwiftUI),DevTools 就无能为力了,需要用专门的工具,比如 Lookin。
怎么判断一个页面是不是原生?
有几个简单的特征:文本无法长按选中、滑动非常顺滑、动画丝滑、左右滑返回手势明显(iOS)。如果”像网页但又不像网页”,那可能是混合页面——Native 外框 + 内嵌 H5。

有团队已经在尝试用 AI 做自动化 UI 走查,比如让 AI 批量识别间距、颜色、字号等问题。
但目前来看,AI 更适合做”初筛”——它能快速找出明显的偏差,但最终的判断和决策,还是需要人来做。因为很多设计问题不是”对错”,而是”合不合适”。
未来,走查可能会变成这样:AI 先跑一遍,标出疑似问题;设计师再用 DevTools 逐一确认,给出具体的修改建议。这样既提高了效率,又保留了人的判断力。
当你习惯了这种基于 DevTools 的走查方式,你会发现自己跟以前有一处很大的不同:过去你走查,是在“凭感觉找问题”,现在你走查,是在“用证据找原因”。
DevTools 不是让你变成前端工程师,而是让你能够理解界面背后的结构、逻辑和约束,并提供既符合体验、又便于实现的解决方案。
最终,UI 走查也会从一场“找谁背锅”的会,变成一场“让产品更好”的会——设计师和工程师坐在同一个 DevTools 界面前,说着同一种语言,指着同一份证据。而这,正是一个成熟团队应该拥有的样子。
转载:人人都是产品经理
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

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