首页

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

聊聊 UI 设计中的潜台词

清阳 交互设计及用户体验

对一个产品而言,除了自身的内容之外最重要的便是设计了。对于设计每个人都有自己不同的审美和想法,那么该如何做出好的设计呢?本文从潜台词这一角度兰亭微妙UI设计公司来介绍如何搞好设计,让我们一起来看看吧!

对一款产品而言,内容是核心,而设计则是让核心价值触达用户的关键桥梁。UI 设计的审美与思路向来千人千面,而想要打造出贴合用户体验的优质设计,除了打磨直观的视觉与信息呈现,更要读懂设计背后的 “潜台词”。本文将从潜台词的视角,拆解 UI 设计的底层逻辑,探索让设计与用户深度共鸣的方法。
 
在 UI 设计工作中,我们总会听到诸如此类的需求与反馈:
 
“这个页面的感觉不太对”
 
“需要再加一些氛围感”
 
“这段信息呈现得有点干”
 
……
 
这些看似模糊、如同 “五颜六色的黑” 般难以落地的要求,往往让设计师无从下手。而 “潜台词”,正是破解这类问题的关键钥匙。接下来,我们将从为何思考设计中的潜台词何为设计中的潜台词潜台词的核心作用三个维度,聊聊 UI 设计里的潜台词艺术。
 

一、为何思考设计中的潜台词

 
我对设计潜台词的思考,源于一次微信游戏名片的设计实践。微信游戏名片的核心功能,是在游戏 APP 中展示玩家的游戏信息,为玩家间的社交搭建桥梁,让不同游戏的玩家能便捷查看彼此的微信游戏数据。
 
最初的设计方案,采用了与微信客户端一致的设计语言,意在强化微信的渠道认知,界面的信息结构也做到了简洁清晰。但上线后,这份看似 “合格” 的设计却收获了大量负面反馈:有用户觉得名片风格过于生硬,像突兀插入的小广告;也有玩家表示,沉浸游戏时看到这款名片,完全没有点开的欲望。

image.png

这一结果让我开始反思:为什么看似满足了 “简洁清晰” 的设计要求,却无法契合用户的使用体验?我们在做设计时,是不是遗漏了什么核心要素?而想要找到答案,首先要厘清一个根本问题 ——UI 设计,究竟在设计什么?

image.png

从设计理论与行业资料中,我们能找到诸多答案:
 
  • 设计是信息的包装与合理排布
  • 设计是整理信息的艺术
  • 设计的本质是交流,是信息的有效交换
 
这些答案中,都绕不开一个核心词 ——信息。信息是视觉设计的基础元素,设计师通过整合文字、图片、声音、视频等直观信息,吸引用户注意力,让用户能快速捕捉页面核心内容。但在实践中我发现,除了这些直观可读的信息,用户的注意力往往还会被另一类隐藏的视觉信号吸引,而这,就是 UI 设计中的潜台词

image.png

用户的注意力会同时聚焦于直观信息与潜台词信息,唯有兼顾两者,才能让设计真正贴合用户的感知与需求。
 

二、何为设计中的潜台词

 
其实在工业设计领域,早已存在关于 “物品潜台词” 的探讨。唐・诺曼曾提出,物品具备两种示能性:一是物件本身的物理特质,二是使用者能感知到的提示性特质。而这一提示性特质,正是物品所传递的潜台词。

image.png

深泽直人的两个经典设计,完美诠释了这种潜台词:一款香蕉汁饮品,无需任何文字说明,仅凭香蕉造型的瓶身,就能让用户立刻知晓产品属性,传递出 “这是香蕉汁” 的潜台词;一款台灯的底座被设计成托盘造型,使用者会自然而然地将钥匙、手表等随身小物放置其上,因为底座的形态传递出 “可以盛放小物件” 的提示。
 
如同物品的信息可分为物理特质与提示性特质,UI 设计中的信息也能分为直接信息潜台词信息。直接信息是界面中直观的文字、图片、数据等内容,而潜台词信息,则是设计师通过颜色、形状、图案、质感等视觉手法,为界面赋予的隐藏信号。

image.png

这些视觉潜台词,能为界面营造专属氛围、唤起用户的情绪共鸣,甚至引发用户的回忆与思考,让设计超越单纯的信息呈现,成为与用户沟通的语言。
 

三、潜台词的核心作用

 
在日常的 UI 设计工作中,我发现潜台词能发挥三大核心作用:传递隐藏信息建立情感连接减少认知成本。这三大作用,能从不同维度优化用户体验,让设计更有温度、更易理解、更贴合场景。
 

1. 传递隐藏信息,让体验路径更流畅

 
回到微信游戏名片的设计案例,从潜台词的视角分析,问题便迎刃而解。市面上主流的头部游戏,界面大多采用暗色沉浸式风格,这种视觉设计的潜台词是:“放下外界干扰,开始专注的游戏体验吧”,目的是为玩家营造专注、沉浸的游戏心流。

image.png

而最初的微信游戏名片,采用明亮清晰的设计风格,其潜台词更偏向 “高效、冷静的平台功能工具”。游戏界面与名片界面的潜台词形成强烈反差,这正是用户觉得违和、生硬的核心原因 —— 视觉潜台词的割裂,打破了玩家的游戏沉浸感。

image.png

想要让玩家的游戏与社交体验无缝衔接,就需要让游戏名片传递与游戏 UI 连贯的视觉潜台词。基于此,我对设计方案进行了两大优化:
 
  1. 加入通用的游戏视觉元素点缀,贴合游戏场景;
  2. 将卡片整体改为暗色模式,与游戏的沉浸式风格统一。
 
优化后的新版游戏名片,传递出与游戏主界面一致的 “专注、沉浸” 潜台词,不仅弱化了原本的突兀插入感,还能兼容大部分游戏的视觉风格,让玩家在游戏与社交的过渡中,拥有更连贯、流畅的体验。

image.png

这一案例也印证了:潜台词是界面隐藏信息的传递载体,精准运用潜台词,能让用户的体验路径更顺滑,让设计与使用场景深度融合。
 

2. 建立情感连接,让设计更有温度

 
第二个案例,来自微信游戏礼品站的设计。游戏礼品站是支持玩家间互赠游戏道具、周边的小程序,在设计过程中,产品经理常提出一个核心需求:“这个页面能不能更有氛围感?”
 
“氛围感” 看似抽象,从潜台词的角度解读,本质就是在传递直接信息的基础上,通过视觉语言为用户传递更多情感信息。基于此,我确立了明确的设计目标:通过视觉潜台词,让用户的情感产生共鸣、持续升温,让送礼与收礼的过程,充满仪式感与情感价值。
 
想要实现这一目标,并非让所有页面都堆砌华丽的视觉元素,而是要找对设计发力点,具体分为三步:
 

第一步:梳理页面,按情感浓度划分设计层级

image.png

首先梳理礼品站的完整使用路径,发现不同页面的情感承载度差异显著:一部分是挑选、购买道具的工具类页面,核心需求是高效、便捷;另一部分是赠送、接收、拆礼物的核心页面,核心需求是完成用户的情感传递。显然,后者是情感化设计的关键切入点。

image.png

第二步:挖掘情感元素,传递专属潜台词

 
结合现实生活中的送礼体验,一份有温度的礼物,既不会是简单的塑料袋包装,也不会是过度繁琐、华而不实的堆砌,而是恰如其分的仪式感 —— 简洁整洁的礼盒,搭配写满心意的留言卡片,就是最能传递情感的形式。

 

基于此,我将 “礼盒” 与 “留言卡片” 抽象为核心 UI 元素:礼盒直观表达 “送礼” 的行为,传递 “这是一份用心准备的礼物” 的潜台词;写有双方昵称与留言的卡片,连接起送礼者与收礼者的关系,强化情感共鸣。将这两个元素融入核心的 “拆礼物” 页面,即便用户不看界面文字,也能立刻感知到 “有朋友为我送上了一份心意满满的礼物”,让情感传递更直接、更动人。
 

第三步:统一视觉语言,利用曝光效应加深记忆

image.png
确定 “礼盒” 这一核心情感象征后,我为其设计了扁平、微拟物、强拟物三种不同维度的视觉表现形式,根据不同页面的风格,搭配不同重量感的图形。同时,让 “礼盒”“留言卡片” 的视觉元素在礼品站的各个页面反复出现,利用曝光效应,让用户对礼品站形成专属的视觉记忆,也让情感潜台词的传递更连贯。

image.png

小结来说,通过挖掘贴合场景的核心情感元素,让设计传递专属的情感潜台词,能有效放大用户间的情感连接,增强用户的场景代入感,让送礼这一行为超越道具本身,成为玩家间情感交流的纽带。
 

3. 减少认知成本,让信息更易理解

 
第三个案例,是和平精英 S12 赛季战报的设计。赛季战报的核心功能,是回顾玩家在赛季中的游戏表现,而设计的核心挑战是:如何将冰冷、复杂的游戏数据,转化为直观、易懂的内容,让玩家能快速感知自身的游戏成果,进而产生分享欲望。

image.png

从潜台词的角度思考,破解这一问题的关键,是用用户熟悉的事物,具象化陌生的抽象数据—— 通过视觉潜台词,将游戏数据与用户熟知的概念关联,用熟悉事物的潜台词解释陌生数据,降低用户的认知成本,让数据变得生动、有画面感。
 
具体设计中,我们做了两大尝试:

image.png

一是将 “击杀人数” 具象为现实中的 “楼层高度”。和平精英中,被淘汰的玩家会变成存放装备的小木盒,我们便将玩家赛季总击杀数,转化为 “盒子堆叠的高度”—— 比如 “本赛季淘汰 175 人,盒子堆叠高达 16 米,相当于 6 层楼的高度”,用现实中可感知的 “楼层高度”,让玩家直观感受到自己的击杀成果,远比冰冷的数字更有冲击力。

image.png

二是用游戏玩家熟知的装备等级颜色体系,区分分享卡片的稀有度。将灰色、绿色、蓝色、紫色、金色,分别对应 “普通、优秀、稀有、史诗、传说” 的实力等级,这种颜色的潜台词,在游戏玩家的认知中早已形成固定印象。用不同颜色打造赛季战报的分享卡片,能让玩家一眼感知到自己赛季表现的稀有程度,既降低了认知成本,又提升了卡片的分享价值。

image.png

这一案例的核心思路是:当需要向用户传递陌生、抽象的概念时,将其具象为用户熟悉的事物,用熟悉的潜台词唤起用户的记忆与认知,能让信息传递更高效,也让设计更贴近用户的认知习惯。
 
综上,UI 设计中潜台词的三大核心作用可总结为:
 
  • 传递隐藏信息:让设计的隐藏信号与场景契合,让体验路径更流畅;
  • 建立情感连接:挖掘核心情感元素,放大用户间的情感共鸣,增强代入感;
  • 减少认知成本:将陌生概念具象为熟悉事物,用熟悉的潜台词加快用户认知。

image.png

四、写在最后

 
思考 UI 设计中的潜台词,能让设计师跳出 “仅整理信息、排布界面” 的固有思维,用更多维度看待界面中的信息传递。很多时候,最精简的界面未必是最好的设计,真正的优质设计,是在简洁的基础上,通过图形、颜色、质感等设计手法,为界面描绘专属的故事,传递出准确的视觉潜台词。
 
而回到最初的问题 —— 为什么看似简单清晰的设计,却无法满足用户需求?如今我能给出明确的答案:我们追求的设计 “简单”,从来不是图形、界面排布的表面简单,而是用户感知的简单
 
UI 设计的本质,不仅是为信息建立秩序,更是用有限的设计资源,为用户打造更美好的感受与体验。读懂设计的潜台词,让设计与用户深度沟通,才是 UI 设计的核心要义。

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

 

image.png

兰亭妙微:B 端产品步骤条表单的取舍逻辑与设计落地策略

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

在 B 端产品设计中,步骤条表单曾是处理长流程、多节点信息录入的经典组件,凭借清晰的流程指引,成为商家入驻、资质认证、订单创建等场景的常规选择。但在兰亭妙微为各行业企业做 B 端产品升级的实战中发现,步骤条表单的使用场景正大幅收缩,甚至在高频数据录入、常规业务操作中逐渐被 “长表单 + 锚点导航” 替代。这并非步骤条组件本身的设计缺陷,而是 B 端产品的设计核心从 “流程标准化” 转向了 “业务效率化”,当步骤条的强流程约束与 B 端用户的实际业务操作逻辑相悖时,其体验短板便被无限放大。

兰亭妙微:B 端表单标签对齐的专业设计准则与场景落地

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

表单是 B 端系统的核心交互组件,而表单标签的对齐方式,看似是设计细节,实则直接影响用户的填写效率、视觉体验与操作连贯性。兰亭妙微在多年 B 端设计实战中,为金融、制造、电商、政务等多行业打造过千余套表单设计方案,深知标签对齐的设计选择并非 “凭喜好”,而是需要结合使用场景、终端设备、业务需求、用户操作目标综合判断。

兰亭妙微:B 端交互设计的六维思考框架

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

在兰亭妙微 15 年的 B 端设计深耕历程中,我们始终认为:B 端交互设计的核心从来不是单纯的界面绘制,而是以业务赋能为核心的全链路思考。初级设计师做 B 端设计,常陷入 “就需求做设计” 的误区,看似快速交付,却让产品在后续迭代中出现流程割裂、权限混乱、适配性差等问题;而兰亭妙微的资深 B 端交互设计团队,始终遵循一套成熟的六维思考框架,从需求接收到方案落地,层层拆解、多维验证,让设计既贴合当下业务需求,又能支撑产品长期发展,真正实现 “效率优先、数据显性、协同顺畅” 的 B 端设计核心目标。

兰亭妙微:设计在产品全生命周期的价值深耕

涛涛 设计管理与成长

在兰亭妙微设计公司的服务体系中,我们常被客户问及:设计的价值该如何落地?在产品从概念到落地、从迭代到增长的全流程里,专业设计团队究竟能为产品创造怎样的核心价值?答案从来不是单一的界面产出或视觉美化,兰亭妙微始终认为,设计的价值体现在产品每一个发展阶段的深度参与中 —— 以用户为核心,用科学的设计方法衔接商业需求与用户体验,让设计成为产品从 0 到 1、从 1 到 N 的核心驱动力。

兰亭妙微设计师们关注的设计界前沿动态:院校突破与创意实践双开花

涛涛 设计管理与成长

设计领域的发展始终在学术探索与商业实践的双向奔赴中稳步前行,2025 年诸多前沿动态为行业注入了全新活力。从顶尖艺术设计院校的国际排名突破,到充满巧思的工业设计作品落地,再到大型建筑专案启动、国际艺术特展开幕与潮流 IP 跨界亮相,设计的边界不断被拓宽,融合性与创新性愈发凸显,展现出多元且蓬勃的发展态势。

日历

链接

个人资料

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

存档