首页

兰亭妙微设计研报:UI 设计中的情感化设计体系与实战应用

涛涛 用户研究

在人机交互体验不断升级的当下,UI 设计早已突破单纯的功能性与视觉性边界,情感化设计成为连接产品与用户的核心纽带。兰亭妙微设计团队深耕用户体验设计多年,结合经典设计理论与商业项目实战经验,拆解 UI 情感化设计的底层逻辑、核心价值与落地方法,让设计不止于美观,更能触达用户内心,打造有温度、有记忆点的产品体验。

兰亭妙微设计小课堂:UI 文案排版与视觉优化实用技巧

涛涛 设计思维

UI 设计中,文案作为信息传递的核心载体,其排版方式与视觉处理直接影响用户的阅读体验和信息接收效率。兰亭妙微设计团队结合日常商业设计实战,提炼出 UI 文案排版与视觉优化的核心实用技巧,聚焦文案对齐方式、投影处理两大高频设计痛点,用简单易懂的方法规避设计误区,让文案设计既美观又实用。

兰亭妙微视觉设计课 6:质感运营弹窗设计实战

涛涛

这套兰亭妙微自研的质感弹窗设计方法论,手把手教你打造高吸睛的 APP 运营弹窗,掌握后轻松提升弹窗点击率!

组件库 | UI设计师必会的组件系统!

清阳

在产品设计与开发的协作链路中,组件库是串联设计规范、视觉落地、开发还原的核心枢纽。从文字、图标等基础元素,到按钮、输入框、表单等功能控件,组件库将所有通用界面元素标准化、规范化,既让设计输出更高效,也让开发还原更精准,更是团队统一设计语言、提升协作效率的关键工具。本文从组件库的基础认知、核心价值、构成要素、搭建思维到避坑要点,全方位拆解 UI 设计师必备的组件库搭建能力,助力初 / 中级设计师快速掌握组件系统的设计与落地逻辑。
 

一、组件库基础认知:为什么建?是什么?怎么搭框架?

 

1. 为什么一定要做组件库?

image.png

无组件库的设计工作,本质是陷入重复劳动的低效循环:设计表单时定好的输入框尺寸、描边色值,后续复用只能重新绘制或拷贝旧文件,极易出现数值偏差、属性混淆;若需统一调整样式,上百个界面逐一修改的工作量,不仅耗时耗力,还会大幅提升出错率。
 
而组件库的核心价值,是让设计师从 “重复画图的工具人” 转变为 “聚焦业务的设计者”—— 一次设计、无限复用,统一修改、全局同步,既保证视觉一致性,又能将节省的时间投入到业务需求思考与体验优化中,真正提升设计价值。
 

2. 什么是组件库?

 
组件库是将界面中具备通用性的元素 / 控件进行归纳、整理、规范后形成的组件集合,核心目标是实现快速复用、批量修改、协作统一

 

它是设计师与开发的 “通用工具库”:设计师可随时调用组件完成界面设计,开发可基于组件封装样式与逻辑;对组件的任一修改,都会同步更新所有已调用的实例,从根源上解决设计与开发的衔接偏差,确保用户体验的一致性。
image.png

3. 组件库的底层框架:原子设计方法论

 
2013 年 Brad Forst 在《Atomic Design》中提出的原子设计方法论,是组件库搭建的核心逻辑,将产品界面从基础到复杂分为 5 个层级,层层嵌套构建完整的设计体系,也是组件库分类与整理的底层依据:
 
  • 原子:界面最基础、不可拆分的元素,如单一颜色、字体、图标、线条等;
  • 分子:2 个及以上原子组合而成的功能性单元,如搜索框(输入框 + 按钮 + 图标)、单选按钮、表单项等;
  • 组织:多个分子组合而成的完整功能模块,如个人信息版块、商品列表模块、导航栏等;
  • 模板:由原子、分子、组织构建的页面框架,定义布局与元素排布,如列表页模板、详情页模板、表单页模板等;
  • 页面:在模板基础上填充真实内容、完善细节后的高保真界面,是组件库的最终落地形态。

image.png

二、组件库的核心价值:不止提效,更是产品设计的底层保障

 
组件库并非简单的 “元素合集”,而是贯穿产品设计、开发、迭代全流程的基础体系,其价值体现在 5 个核心维度:
 

1. 保持设计与体验的一致性

 
产品不同业务场景的设计表现易出现差异,组件库通过标准化的样式、交互规范,让团队在既定框架内设计,既保证输出质量统一,也让用户在不同页面、不同功能中获得连贯的使用体验,避免因设计混乱导致的用户认知成本提升。
 

2. 降低团队协作与新人上手成本

 
新成员加入时,无需花费大量时间梳理项目设计语言 —— 成熟的组件库是 “可视化的设计手册”,无论是设计新人还是资深设计师,都能快速参考、直接调用,大幅降低沟通成本与试错成本,快速融入工作节奏。
 

3. 全方位提升团队工作效率

 
  • 对设计师:减少重复性设计工作,组件统一修改后全局同步,避免逐一调整的低效操作;
  • 对开发:可封装常用组件样式与逻辑,按需调用即可,减少冗余代码、优化软件包体积,同时降低与设计的沟通成本,后期维护也更便捷。
 

4. 稳固产品的品牌视觉形象

 
颜色、字体、图标风格等品牌基因,均是组件库的核心构成部分。一致性的视觉样式让产品的品牌形象更鲜明,让用户形成稳定的视觉认知,加深对产品的记忆点,让品牌视觉落地更可控。
 

5. 遵循用户固有使用习惯

image.png

组件化设计严格贴合用户的惯性思维:绿色代表安全 / 通过、红色代表错误 / 警告、放大镜图标关联搜索功能…… 除非产品体量足够大且有合理的差异化需求,否则无需违背用户习惯。标准化的组件设计,能减少用户的思考与试错成本,提升使用体验。
 

三、组件库的核心构成:从基础元素到功能组件,层层规范

 
组件库的构成遵循 “从基础到复杂” 的逻辑,核心分为基础视觉元素功能基础组件两大部分,每一部分都需明确规范、统一标准,确保可复用、可调用。
 

1. 颜色:定义产品视觉调性与信息层级

image.png

颜色是产品设计风格的基础,核心是按功能属性分类定义,形成标准化色库
 
  • 先明确核心色系:主体色(品牌色)、辅助色、中性色(背景、文字)、功能色(成功、错误、警告、提示);
  • 基于核心色系提炼渐变色与色阶,适配不同场景的视觉需求;
  • 对所有颜色进行分组、命名,确保设计师与开发可快速检索、统一调用,同时梳理颜色的信息层级,让界面视觉平衡、重点突出。
 

2. 文字:标准化字体体系,适配全场景使用

image.png

文字规范的核心是明确核心属性,按场景分类,避免样式混乱,核心包含 4 个基础属性:字体、字号、字重、行高;针对不同使用场景制定对应的文字样式,并整理成标准化表格,方便查阅与调用。
 
表格
 
 
 
样式规范 字号 行距 (折行) 核心使用场景
大标题级 40px 60px 模块标题、核心数据、页面大标题
小标题级 32px 48px 内容标题、板块小标题
正文级 28px 42px 正文内容、按钮文字、副标题
辅助说明级 24px 36px 金刚区文字、Tab 栏、辅助说明
微提示级 24px 36px 容器标签、弹窗提示、小红点数字
 
段间距、字距、缩进等属性使用频率较低,可根据产品实际需求,确定使用频率后再决定是否纳入组件库。
 

3. 图标:统一绘制标准,适配开发灵活调用

image.png

图标设计的核心是标准化绘制规范,保证视觉统一且开发可适配
 
  • 用 keyline 栅格控制不同形状图标的大小、比例,确保视觉协调性;
  • 绘制完成后转曲为面性图标,避免样式变形;
  • 定义图标常用颜色,让开发可根据高保真效果图灵活切换,无需重复适配。
 

4. 基础组件:原子方法论的落地,功能化组件合集

image.png

参考原子设计方法论,将原子、分子、组织层级的元素组合、嵌套、精细化归类,形成可直接调用的功能基础组件,涵盖产品设计的核心通用控件,例如:按钮(不同尺寸、状态)、弹窗(提示、确认、操作)、表单(输入框、选择器、校验项)、选项控件(单选、多选、开关)等,每个组件都需明确样式、交互、状态规范。
 

四、组件库搭建的核心思维:从框架到细节,科学规划

 
搭建组件库并非简单的 “元素堆砌”,而是基于产品特性的科学规划,核心掌握 4 大思维,让组件库兼具复用性、扩展性、易用性
 

1. 先理解产品结构,再搭建组件框架

image.png

先梳理产品的业务属性、核心功能、页面布局,以此为基础构建组件库的基本框架,并对组件进行分类与权重排序 —— 相同业务属性的产品,布局与组件复用率极高,过度的结构差异化会违背用户习惯,引发反感。
 
因此,组件库的差异化应聚焦细节设计(如按钮圆角、图标风格、色彩搭配),而非核心结构,让组件库既适配产品业务,又符合用户认知。
 

2. 组件分类归类:明确类型,区分基础与属性

 
在 UI 层面,将组件分为 4 类,并进一步整合为基础组件属性组件,让前期规划更清晰,后期调用更高效:
 
  • 基础组件:包含系统原生组件与扩展组件,适配全产品通用场景;
     
    ✅ 原生组件:系统(Android/iOS/ 小程序)自带的基础控件,如按钮、弹窗、导航栏;
     
    ✅ 扩展组件:基于原生组件的功能扩展,如带图标的 toast 弹窗、增加功能入口的导航栏;
  • 属性组件:包含自定义组件与封装组件,与产品核心功能强关联;
     
    ✅ 自定义组件:脱离系统组件,贴合产品特性的设计,如商品列表、个人中心卡片;
     
    ✅ 封装组件:根据产品使用场景组合封装的复杂组件,如日历组件、筛选组件、分页组件。
 

3. 结构细分:拆至最小颗粒,提升复用率

 
将独立组件打散至原子级的最小颗粒,例如将按钮拆分为 “背景色 + 文字 + 边框 + 圆角”,充分提高细小组件的复用率;修改时仅需调整单一原子元素,即可实现全局响应,再通过原子的重新组合,形成不同样式、不同功能的组件,让组件库的样式与数量呈倍数增长,兼具灵活性与统一性。
 

4. 命名规则:层次清晰,团队通用

 
合理的命名是组件库维护与调用的关键,核心原则是层次清晰、通俗易懂、团队通用
 
  • 用 “/” 分隔场景与类别,体现组件的结构层次(Sketch 可自动识别),让设计师快速检索;
  • 命名示例:按钮 / 主操作 / 大按钮 / 待激活、按钮 / 次要操作 / 小按钮 / 可操作、表单 / 输入框 / 初始状态;
  • 避免使用生僻的专业名词,优先选择 “按钮、表单、弹窗” 等团队共识的术语,降低使用成本。
 

五、组件库搭建与使用的避坑要点:避开误区,让组件库真正落地

 
组件库的搭建与使用,易陷入 “重形式、轻实用” 的误区,掌握 4 个核心注意事项,让组件库兼具规范性与易用性:
 

1. 核心原则:先保证易用性,再追求复用性

image.png

不要为了复用而复用,组件库的核心是服务于产品体验与设计效率。针对特殊业务场景,在符合产品易用性的前提下,可将已复用的组件解除关联,适当做加减法 —— 既不盲目追求极致简约,也不刻意增加复杂度,让组件适配场景才是最佳选择。
 

2. 命名技巧:不纠结细节,追求团队通用

 
无需花费大量时间在组件命名的 “精致化” 上,核心是通俗易懂、团队可快速理解。组件库是团队协作工具,而非个人设计作品,简单直接的命名,远比 “高大上的专业名词” 更有价值。
 

3. 认知误区:组件库不限制设计创意

image.png

部分设计师认为 “拼组件会扼杀创意”,实则是对组件库的误解:组件库解决的是复用率高的重复性设计需求(如字体、配色、表单、基础控件),而在图形设计、动效表现、背景氛围、视觉亮点等方面,设计师仍有极大的创意发挥空间。
 
组件库是 “解放创意的工具”—— 减少重复劳动,让设计师将更多精力投入到创意设计与体验优化中,实现 “规范基础 + 创意亮点” 的双重效果。
 

4. 维护逻辑:随产品迭代,间歇更新优化

image.png

组件库并非 “一建了之”,而是需要持续维护的动态体系。可利用产品版本迭代的间隔时间,复盘组件库的使用情况,优化组件细节、补充新的通用组件、淘汰无用组件,避免组件库陈旧导致的设计与开发脱节,让组件库始终适配产品的发展需求。
 

六、结语:组件库是提效工具,更是产品设计的长期资产

 
组件库不仅是设计与开发的 “提效神器”,更是串联团队协作、保障品牌视觉、提升用户体验的核心工具,它为设计规范到开发还原搭建了高效的桥梁,让团队摆脱重复劳动,将更多时间投入到产品细节打磨与业务价值挖掘中,实现设计向产品的真正赋能。
 
完成组件库的搭建,只是产品设计体系建设的开始。真正的价值,在于持续的优化、完善与落地 —— 从全局视角出发,让组件库始终适配产品的业务发展与迭代需求,才能让其发挥最大价值,成为产品设计的长期核心资产。

 

转载:防脱发药水

 

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

 
 
 

情感化 UI 设计简明指南 | 兰亭妙微设计 致新手设计师

涛涛

在 UI 设计从功能驱动转向体验驱动的当下,情感化设计早已成为打造优质产品体验的核心要素。冰冷的界面与功能,唯有注入情感的温度,才能让用户产生共鸣、建立情感连接,进而提升产品的用户粘性与品牌好感度。兰亭妙微设计深耕 UI 设计领域,深知情感化设计对新手设计师的入门难度,本次特整理一份简明易懂的情感化 UI 设计指南,从核心设计思路到落地技巧,为新手设计师梳理清晰的设计方向,助力快速掌握情感化设计的核心逻辑。

8 个实用 UI 设计技巧,打造高质感界面 | 兰亭妙微设计

涛涛

在 UI 设计的实践中,精致的界面往往并非源于复杂的设计手法,而是藏在细节的视觉调整里。兰亭妙微设计深耕 UI 设计领域多年,深知细节对设计质感的提升作用,本次为大家梳理 8 个简单易懂、落地性极强的 UI 设计技巧,能够快速改进设计中的常见问题,提升界面精致度,让设计作品更具专业感。

UI 设计中的视觉引导技法深度解析 | 兰亭妙微设计

涛涛

视觉引导是 UI 设计的核心技法之一,涵盖色彩引导、动效引导、操作引导、视觉心理等多个维度,而真正优秀的设计,从来都是设计思路先行于设计技法。兰亭妙微设计深耕 UI/UX 设计领域,始终秉持「形式追随功能」的核心设计理念,在实际项目中通过科学的设计思路落地视觉引导技法。本次我们将以一个汽车问答测评 H5 的实战案例,拆解视觉引导的设计逻辑与落地技巧,分享从问题分析到方案优化的全流程设计思路。

2016 年 UI 设计趋势深度分析 | 兰亭妙微设计

涛涛

进入 2016 年,UI 设计行业在体验设计领域涌现出诸多全新设计元素与表现手法,彩色投影、双色调渐变等设计形式在各大设计社区的出现频率持续攀升,逐渐成为行业新的设计风向。兰亭妙微设计深耕 UI 设计领域,始终关注行业前沿趋势变化,为了让设计实践更具方向感,也为给行业同仁提供参考,我们对 2016 年 UI 设计的主流流行趋势进行系统梳理与深度分析,提炼出当下最具实践价值的设计思路与手法。

UI 必懂的 5 个设计心理学知识,兰亭妙微ui设计公司从理论到落地全拆解(下)

清阳

三、五架帽理论(LATCH 原则):高效组织信息的 5 个核心方法

 

核心定义

image.png

由 Richard Saul Wurman 提出,又称LATCH 原则,是基础的信息组织原则,通过 5 种方式让信息呈现更高效,提升用户获取信息的效率,分别是:Location(位置)、Alphabet(字母)、Time(时间)、Category(类别)、Hierarchy(视觉层级)
 

核心原理

 
用户在产品中获取信息时,有固定的认知习惯,违背这个习惯会增加用户的思考成本。五架帽理论的本质,是顺应用户的认知习惯,让信息 “好找、好懂、好记”,这五个方法可单独使用,也可组合使用。
 

产品落地技巧

 

1. Location(位置):围绕用户位置组织信息

image.png

以用户的当前位置为核心,展示周边相关信息,适用于地图、本地生活、出行类产品,比如:
 
  • 地图 APP 优先加载用户当前位置的道路、地标、周边商户,位置变化时实时更新信息;
  • 外卖 / 生鲜 APP 按 “距离由近到远” 展示商户,让用户快速找到周边可配送的商家;
  • 游戏(如绝地求生)随用户位置变化,加载周边的建筑、道具、敌人信息。
 

2. Alphabet(字母):按字母顺序组织信息

image.png

适用于数据量大、需要精准查找的场景,是最经典的信息组织方式,比如:
 
  • 通讯录按姓氏拼音首字母排序,支持字母索引,快速定位联系人;
  • 词典、题库 APP 按字母 / 拼音排序,方便用户查找内容;
  • 电商 APP 的品牌分类,按字母顺序排列,提升筛选效率。
 

3. Time(时间):按时间维度组织信息

 
时间先后 / 热度排序,适用于内容、社交、资讯类产品,比如:
 
  • 朋友圈、微博按 “发布时间从新到旧” 展示内容;
  • 资讯 APP 分 “最新、今日、本周” 板块,让用户按时间获取信息;
  • 电商 APP 的订单页面,按 “下单时间从新到旧” 排序,方便用户查找近期订单。
 

4. Category(类别):按属性分类组织信息

image.png

将信息按相同属性 / 功能划分,是产品设计中最常用的方式,适用于几乎所有产品,比如:
 
  • 音乐 APP 按 “曲风(流行、摇滚、民谣)、歌手、专辑” 分类;
  • 电商 APP 按 “商品品类(服饰、食品、数码)、功能(热销、新品、优惠)” 分类;
  • 手机桌面的 APP 文件夹,按 “社交、办公、娱乐” 分类。
 

5. Hierarchy(视觉层级):按重要性划分视觉层级

image.png

在信息组织的基础上,用颜色、大小、间距、字体等视觉手段,突出核心信息,弱化次要信息,比如:
 
  • 电商 APP 的商品页面,核心信息(商品名称、价格)用大号粗体,次要信息(产地、规格)用小号常规字体;
  • 首页金刚区,将高频功能(首页、消息、我的)用更醒目的图标 / 颜色突出,低频功能弱化展示;
  • 详情页的标题用大字号 + 强对比色,正文用常规字号 + 浅色系,让用户快速抓住重点。
 

关键总结

 
五架帽理论的 5 个方法不是孤立的,组合使用效果更佳:比如通讯录 = 字母 + 视觉层级,外卖 APP = 位置 + 类别 + 时间,首页金刚区 = 类别 + 视觉层级。核心是让信息组织符合用户的认知习惯,降低查找成本。
 

四、禀赋效应:让用户 “珍惜” 你的产品,提升留存与转化

image.png

核心定义

 
由心理学家 Daniel Kahneman 等提出,指人们对已经拥有的物品 / 服务,会高估其价值,比未拥有时更珍惜。这一现象源于 “损失厌恶”:失去一件东西的痛苦,远大于得到它的快乐。
 

核心原理

 
当用户从 “旁观者” 变成 “拥有者” 时,对产品的心理价值会大幅提升,会因为 “害怕失去” 而更愿意继续使用、付费甚至分享。比如生日收到的礼物,哪怕原本不喜欢,也会舍不得卖掉;免费试用的会员,到期后会因为 “失去权益” 而选择付费。
 

产品落地技巧

 

1. 赋予用户 “专属价值”,强化拥有感

image.png

让用户感受到产品 / 服务是 “为自己量身定制的”,提升心理归属感,比如:
 
  • 学习 APP 将学习数据生成个性化报告,支持一键分享,让用户觉得 “这份成果是独属于我的”;
  • 旅游 APP 记录用户的旅游足迹,生成 “我的旅行地图”,激发用户的珍惜感和分享欲;
  • 电商 APP 为用户生成 “专属会员标识”“定制化推荐页面”,强化专属感。
 

2. 提供免费试用 / 体验,诱导禀赋效应

image.png

让用户先 “拥有” 产品的权益 / 服务,再让他们面对 “失去” 的选择,比如:
 
  • 视频 / 音乐 APP 为新用户提供 7 天免费 VIP,到期后用户会因为 “失去高清画质 / 无损音乐” 而选择付费;
  • 办公 APP 提供 30 天免费高级功能,让用户习惯后,不愿回到基础版;
  • 电商 APP 为新用户发放 “专属优惠券”,让用户觉得 “拥有了优惠,不用就亏了”。
 

3. 增加个性化设置,让用户 “参与产品打造”

image.png

让用户通过个性化设置,将产品变成 “自己的样子”,提升主人翁意识,比如:
 
  • 浏览器 / APP 支持换肤、换背景、调整布局,让用户按自己的喜好定制产品;
  • 笔记 APP 支持自定义笔记本封面、字体、颜色,让用户觉得 “这是我的专属笔记”;
  • 社交 APP 支持自定义头像、昵称、个性签名,强化用户的拥有感。
 

4. 利用 “损失厌恶”,提升用户粘性

image.png

明确告知用户 “不继续使用会失去什么”,比告知 “继续使用会得到什么” 更有效,比如:
 
  • 签到 APP 提示 “已连续签到 5 天,中断将重置进度,失去 100 积分”;
  • 会员 APP 提示 “您的 VIP 还有 3 天到期,到期后将失去免费包邮、专属折扣等权益”;
  • 打卡 APP 提示 “今日未打卡,将失去本月打卡勋章的领取资格”。
 

关键总结

 
利用禀赋效应的核心,是让用户从 “使用产品” 变成 “拥有产品”,通过专属价值、免费试用、个性化设置,让用户产生拥有感,再利用损失厌恶,让用户因为 “害怕失去” 而提升留存和转化。
 

五、干扰效应:减少信息干扰,让用户专注核心操作

 

核心定义

image.png

用户同时思考 / 处理两件及以上事情时,思考效率和操作准确性会大幅下降,难以专注核心目标。简单来说:信息越杂乱,用户越容易分心,操作效率越低
 

核心原理

 
人的大脑像电脑一样,同一时间处理的信息有限,当多个无关信息同时出现时,大脑需要花费精力筛选信息,从而分散对核心操作的注意力,甚至导致操作失误。比如设计时被紧急需求打断,再回来时会忘记原本的思路;产品页面图标杂乱,用户会找不到核心功能。
 

产品落地技巧

 

1. 简化视觉设计,避免 “过度装饰”

image.png

视觉设计的核心是 “服务于功能”,而非单纯的美观,避免用复杂的设计增加用户的认知负担,比如:
 
  • 金刚区图标避免使用过于复杂的实物图 / 彩色渐变,优先用简约的线性图标 + 清晰的文字,让用户一眼识别;
  • 页面避免过多的色彩、动效,核心操作按钮(如确认、支付、提交)用强对比色突出,次要元素用低饱和度色彩;
  • 生鲜 APP 的分类图标,避免用复杂的商品实物图,用简约的图标(如苹果代表水果、青菜代表蔬菜)即可。
 

2. 划分信息层级,避免 “信息堆积”

image.png

将页面信息按核心功能、次要功能、辅助功能划分层级,突出核心,弱化次要,隐藏辅助,比如:
 
  • 美团首页金刚区,将高频功能(美食、外卖、超市便利)用大图标突出,低频功能(旅游、美甲、洗车)用小图标弱化,避免信息杂乱;
  • 个人中心页面,将核心功能(我的订单、我的资产、我的收藏)放在顶部,次要功能(设置、帮助、关于)放在底部,按使用频率排序;
  • 详情页将核心操作(购买、加入购物车)放在固定位置,次要信息(商品参数、评价)放在下方,避免干扰核心操作。
 

3. 按用户目标,组织页面功能

 
围绕用户的核心操作目标设计页面,移除无关的功能和信息,比如:

 

  • 刷题 APP 的答题页面,仅保留 “题目、选项、上一题、下一题”,移除广告、推荐、消息等无关信息,让用户专注答题;
  • 支付页面,仅保留 “支付金额、支付方式、确认支付”,避免添加其他功能(如充值、领券),防止用户分心;
  • 阅读 APP 的阅读页面,支持 “沉浸式模式”,隐藏导航、广告、消息,让用户专注阅读。
 

4. 功能分类聚合,避免 “分散摆放”

image.png

将同类功能聚合在一起,避免分散摆放导致用户查找困难,比如:
 
  • 个人中心将 “设置、帮助、反馈、关于” 聚合在 “更多功能” 里,避免零散摆放;
  • 电商 APP 将 “收藏、足迹、购物车” 聚合在 “我的资产” 板块,按 “用户资产” 的逻辑组织;
  • 办公 APP 将 “新建、保存、分享、打印” 聚合在操作栏,按 “文档操作” 的逻辑组织。
 

实战案例

 
技术类求职 APP 个人中心改版:旧版功能杂乱,将 “已购、钱包、收藏、错题、投递记录” 等功能分散摆放,且把无关的 “头像、昵称” 放在视觉核心位置,用户查找 “投递记录” 的平均时间为 15 秒。
 
新版围绕用户核心目标(查看投递进度、管理学习内容) 优化:
 
① 强化个人属性(等级、粉丝),放在头部吸引用户;
 
② 将核心功能(我的简历、投递记录)放在顶部,按产品价值排序;
 
③ 将次要功能(收藏、错题、下载)按 “学习管理” 聚合,模块划分清晰;
 
④ 视觉上采用简约风格,弱化无关元素,核心按钮用强对比色突出。
 
优化后,用户查找核心功能的平均时间缩短至 3 秒,操作效率提升 80%+。
 

关键总结

 
避免干扰效应的核心,是“少即是多”:围绕用户的核心操作目标,简化视觉设计、划分信息层级、聚合同类功能,移除无关的信息和功能,让用户不用思考,就能快速找到并完成核心操作。
 

全文核心总结

 
设计心理学的本质,是“站在用户的角度做设计”,读懂用户的心理,才能让设计触达用户的需求。这 5 个心理学法则,各有侧重但可组合使用:
 
  • 五架帽理论组织信息,让用户 “好找信息”;
  • 干扰效应简化设计,让用户 “专注操作”;
  • 蔡加尼克效应引导参与,让用户 “愿意完成”;
  • 峰终定律打磨体验,让用户 “记住产品”;
  • 禀赋效应强化拥有,让用户 “珍惜产品”。
 
不用精通所有心理学理论,把这 5 个法则融入日常设计的每一个环节,从信息组织、页面设计到流程体验,让每一个设计决策都有心理逻辑支撑,就能做出既好看又好用的产品设计。
转载:防脱发药水

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

UI 必懂的 5 个设计心理学知识,兰亭妙微ui设计公司从理论到落地全拆解(上)

清阳

本文从背景定义、核心原理、产品应用、实战案例四个维度,拆解 5 个 UI 设计中高频实用的心理学法则,不讲晦涩理论,只讲落地方法,兰亭妙微ui设计公司帮你把心理学融入日常设计工作。
 

阅读导航

  1. 峰终定律:抓准体验关键节点,让用户记住你的产品
  2. 蔡加尼克效应:利用未完成心理,提升用户参与度
  3. 五架帽理论(LATCH 原则):高效组织信息,降低用户认知成本
  4. 禀赋效应:让用户对产品产生 “归属感”,提升留存与转化
  5. 干扰效应:减少信息干扰,让用户专注核心操作
 

一、峰终定律:体验的好坏,由两个关键节点决定

 

核心定义

 
由 2002 年诺贝尔经济学奖得主丹尼尔・卡尼曼提出,人们对一段体验的记忆,只由体验的高峰时刻(正向 / 负向)和结束时刻决定,与体验的总时长、中间过程的平均感受无关。简单来说:好的峰值 + 好的终值,就是好的体验

image.png

核心原理

 
用户不会记住产品使用的每一个细节,只会对 “最爽的瞬间” 和 “最后的感受” 印象深刻。哪怕过程中有一些小瑕疵,只要峰值足够惊艳、终值足够舒适,用户对整体体验的评价依然会很高。
 

产品落地技巧

 

1. 强化正向峰值:打造用户的 “愉悦瞬间”

 
在用户使用产品的关键节点,用仪式感、惊喜感拉高情绪,比如:
 

image.png

盲盒 APP 购买成功后,弹出动态收藏卡,放大用户的获得感;

  • 网易云音乐直播间为新用户弹出「新人见面礼」,用视觉设计拉满氛围;
  • 功能操作完成后(如打卡、缴费、答题),用情感化弹窗给予肯定,如 “任务完成!你也太厉害了吧~”。
 

2. 降低负面峰值:缓解用户的 “焦虑时刻”

image.png

当用户遇到网络卡顿、操作失败、抽奖未中等负面场景时,用情感化设计减少挫败感,比如:
 
  • 网络断开时,用趣味动效 + 温柔提示 “网络开小差啦,点击重试吧” 代替冰冷的报错码;
  • 抽奖未中时,弹出安慰式弹窗 “没关系,下次好运 buff 加持~”,并附带小额优惠券。
 

3. 打磨终值体验:给用户一个 “完美收尾”

 

在用户完成整个使用流程后,强化满足感和成就感,比如:
 
  • 刷题 APP 在用户完成整套习题后,展示直观的数据分析页(正确率、能力提升、排名),并附带鼓励语;
  • 外卖 APP 下单成功后,清晰展示配送进度 +“下单成功!吃货专属福利已到账”,让收尾更愉悦;
  • 课程 APP 完成学习后,生成学习证书 / 打卡海报,支持一键分享,放大用户的成就感。
 

实战案例

image.png
刷题功能体验优化:针对用户刷题时的 “未知焦虑”,做了三个核心调整:
 
① 用进度条实时展示刷题进度,让用户知道 “还有多久完成”;
 
② 最后 3 题弹出鼓励语 “加油!马上完成啦,你超棒的”,强化峰值;
 
③ 结果页展示个性化数据报告(如 “商业模式模块能力提升 15%”),打磨终值。优化后,用户刷题完成率提升 30%+。
 

关键总结

 
设计时先绘制用户情绪曲线,找到峰值和终值的关键节点,重点打磨这两个时刻的体验,比均匀优化所有环节更高效。
 

二、蔡加尼克效应:未完成的事,用户会记得更牢

 

核心定义

 
由苏联心理学家蔡加尼克提出,又称 “契可尼效应”,指人们对未完成、被中断的事情,记忆会比已完成的事情更深刻,且会持续产生完成的冲动。简单来说:用户对 “没做完的事”,会更上心
 

核心原理

image.png

当一件事未完成时,大脑会一直处于 “紧张的激活状态”,持续关注这件事;一旦事情完成,这种紧张感会消失,记忆也会快速淡化。就像考试时没答上的题,会一直记挂到考试结束;综艺在关键剧情插广告,你会舍不得换台。
 

产品落地技巧

 

1. 用进度提示,引导用户持续完成

image.png

在需要用户持续参与的场景(签到、课程、打卡),添加可视化进度条 / 进度点,让用户清晰看到 “完成了多少,还剩多少”,比如:
 
  • 学习 APP 的签到页面,展示 “已连续签到 3 天,再签 4 天领 50 积分”,用未完成的奖励吸引用户持续打卡;
  • 健身 APP 的课程页面,标注 “本课程共 8 节,已学 3 节”,激发用户的完成欲。
 

2. 拆分复杂任务,减少用户心理负担

image.png

在用户需要完成复杂操作时(如注册、信息填写、认证),将流程拆分为多个简单的小步骤,并明确展示当前步骤,比如:
 
  • 新用户注册时,将 “手机号验证→设置密码→完善资料” 拆分为 3 个页面,标注 “1/3 验证手机号”,让用户觉得 “任务很简单,很快就能完成”;
  • 信息认证时,按 “身份信息→银行卡信息→人脸验证” 拆分,中途退出后再次进入可直接定位到未完成步骤。
 

3. 用待办提醒,强化 “未完成” 的心理暗示

image.png

在产品中添加待办事项、未读提醒、未完成任务标识,让用户时刻感知 “还有事没做”,比如:
 
  • 日历 APP 的代办功能,未完成的事项会持续高亮,让用户产生 “必须做完” 的心理;
  • 办公 APP 的待办列表,用小红点标注未处理的消息,引导用户及时操作;
  • 电商 APP 的购物车,保留用户未付款的商品,并用 “库存仅剩 3 件” 强化完成冲动。
 

实战案例

image.png

新用户注册流程优化:旧版将所有信息(头像、昵称、手机号、性别、兴趣)堆积在一个页面,填写率仅 40%;新版按业务维度拆分为 3 个步骤(手机号验证→基础信息→兴趣标签),每个页面仅需填写 1-2 项内容,并添加进度提示 “2/3 完善基础信息”。
 
优化后,利用蔡加尼克效应让用户产生 “完成冲动”,同时结合沉没成本效应(用户填了前两步,不愿放弃第三步),最终信息填写率提升至 75%+,内容推荐准确率也同步提升。

image.png

 

关键总结

利用蔡加尼克效应的核心,是让用户 “看到未完成的目标”,并通过拆分任务、可视化进度,降低用户完成目标的门槛,从而提升参与度和完成率。
 
转载:防脱发药水

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

日历

链接

个人资料

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

存档