首页

UI 设计中的用户体验设计|兰亭妙微设计实战全解

涛涛

设计师遇到瓶颈,最好的破局方式,是跳出纯视觉审美,回到用户体验本质,重新审视需求、场景、行为与感受,用科学方法做有依据、可落地、能产生价值的设计。

UI 设计师必须懂情感化设计 —— 兰亭妙微深度解读

涛涛

在产品同质化严重、用户体验愈发重要的今天,情感化设计早已不是 UI 设计的加分项,而是决定产品竞争力的核心必修课。作为专注 UI 与用户体验设计的兰亭妙微,我们始终认为:好的 UI 不只是界面美观、功能可用,更是能与用户对话、传递温度、建立情感连接的设计语言。

产品设计案例分析:小米商城APP首页全新升级

清阳

小米作为国内生态系统最为完善的手机品牌之一,它的商城设计也是一直被学习的案例。“品牌电商”和“高端化”,是小米商城设计的两大主题。兰亭妙微ui设计公司对小米商城APP的首页设计进行了分析,希望对你有帮助。

一、提炼设计语言

根据最新的产品定位,能提炼出两个重要的信息,即“品牌电商”“高端化”,若想把这两点落实到产品设计当中,首先就是对这两个关键词有充分且客观的认识。

1. 什么是品牌电商?

京东、淘宝、拼多多是不是品牌电商?肯定不是,他们属于综合类电商,他们销售各种品牌的产品,品牌电商的特征是,只针对一个品牌或集团旗下多个品牌(集团为品牌)的产品进行销售。

综合类电商:追求性价比,更多的是满足消费者物质层面的需求,购买动机是功能、卖点、价值等利益点。

综合类电商在设计上,贴近用户的心智诉求,就应该注重产品的利益点露出,页面设计上强调热闹的氛围,这样才能进一步刺激用户的消费欲望。

品牌电商:品牌电商应注重品牌的调性,赋能品牌,用户追求品牌溢价,满足精神层面的需求,购买动机注重品质,以及身份的价值认同感,符合自己的社会属性等。

设计上,不应过分强调利益点,不然会降低品牌的品质感,品牌电商应聚焦商品本身,更多的去解读产品的价值和优势,让用户感到品牌产品的品质。

2. 如何理解高端化?

什么是高端的?那首先得明白什么是低端的,从人类发展的客观事实上来看,或从我们普遍认同的价值观上来看,落后往往代表低端,先进则更能表现高端,下面我们看几组图片。

从图片的对比上来看,粗糙、多色彩、杂乱看起来是低端的,精致、单色、简洁更多人会认同是高端的。

最终通过品牌电商的特点,以及高端化设计认识,我总结出4条设计语言:

1)回归产品本身

聚焦产品价值为核心,回归本真,营销信息合理展示。

2)克制的

克制色彩营销的导向, 复杂的设计,助力品牌高端化。

3)极致的

以用户语言,打造产品细节,打磨用户体验,做好服务。

4)有品牌感知的

提取品牌DNA,建立官网心智,打造官方商城优势。

有了设计语言的方向指导,那所有的设计都要依据这四条原则进行设计,接下来看一下案例中如何运用设计原则。

二、案例解析

下图是一年前的首页,最直观的感受就是,整体看上去色调很多,图素的饱和度也较高,根据我们的设计语言,对banner、金刚位、活动腰带、一拖三(瓷片区)等、做了一系列的改版,同时还增加了几个模块,接下来我们细讲。

1. banner头图改版

banner图区域结合需求,做了非常大胆的尝试,对头图设定了几种状态,日常状态、活动状态、新品发布会状态

日常状态:依旧是轮播banner展示,在图素的设计上,对版式和用色做了规范调整。

色调上不再采用高饱和的图素,板式上去掉了行动按钮,原因就是结合设计语言“回归产品本身”这一理念,去营销化,图素上的信息就展示关于产品本身,图、名称、卖点、价格。

这就是一个品牌电商,在日常展示上,应该有的一种态度,吸引用户的一定是产品本身,而不应该是一个利益点。

活动状态:当有重要的活动或新品时,会直接把所有banner都下掉,直接把一个加长的活动图素放上去,业务方给起了个名字叫huner,意思就是直接“呼脸上”的意思,逻辑上就是重点强调。

huner展示

根据活动的重要程度,huner的高度会不一样,左图是与哈利波特联名的一款手机,比较重要,所以更大,右图是每月一次的F会员日活动,所以相对较小。

关于活动氛围,在设计上还有一个递进关系,当活动越重要,那huner的底部圆角就会越圆润,因为越圆润的设计越活跃,越活跃的设计活动氛围就会越热闹。

另外有时我也会做一些动效上去,来重点渲染活动氛围,下图所示:

迪士尼联名产品发布会动画:

双11活动huner动画设计:

春节期间年货节huner动画设计:

618倒计时huner动画设计:

新品发布会/重大节日状态:这个状态会在huner图中下方增加多个次级活动入口,原因发布会和重大节日流量较高,这样的设计形式,流量聚焦,减少路径,能更好的完成活动目的。

另外在这个样式的基础上还有一种形式,huner下方的坑位会去掉产品图,弱化展示,目的是为了给下方活动腰带更多的流量。

大促期间各个需求组,都希望在首页分到更多的流量,在众多活动中,肯定有主有次之分,放在一起设计形式相同就会平均流量,这显然不是平台想要的效果,所以解决方案就是,通过设计形式来干预流量的走向。

对于一个多业务方的首页,设计上往往还需考量各方利益,不能因为一方,影响另一方,做好权重需求分配,平衡利益,这也是设计师需要有意识思考的问题。

总结:banner头图的改版设计,日常轮播不会存在任何营销信息,保持品牌电商的调性,活动期间根据不同级别的活动,给出级别不同设计方案,活动过多时,通过设计形式干预流量的走向。

2. 金刚位优化

金刚位做了简单的优化,之前最大的问题是,产品的形状各异,都是以最大要求尺寸展示,导致最终的视觉呈现常常不统一。

解决方案下图所示,规范了较为方正的产品和较长产品,不同的呈现尺寸,让视觉尽可能看起来统一。

米金商城图标进行了改版,采用写实效果,降低饱和度,尽可能看起来更贴近真实,这样与真实的产品图标会更加契合。

金刚位中“小米发布”的入口,有一个重要的改变,之前一直是一个圆角矩形,现在结合我们的设计语言“有品牌感知的”原则,进行调整。

提取小米logo的超椭圆形状,直接用于图标的呈现,小米发布是一个重流量的入口,所以一直是一个动效状态。

因为“小米发布”是中间位置,图标尺寸保持最大也不会不和谐,较大的展示面积,能把动效内容展示的更清晰。

3. 新品大卡

这个内容是新增模块,非常态化呈现,每次会随着发布会新品发布出现,比如老板在发布会上正在介绍一款新品,那小米商城就会随着发布会的节奏,首页首屏出现一个非常突出的新品大卡。

当介绍第二款新品时,新品大卡就会以banner轮播的形式出现,另外有一点很重要,新品大卡的副文案,一定得是卖点,而不能是利益点。

卖点就是展示这个产品本身的亮点,利益点是这个产品有什么优惠,对于刚发布的新品就直接上利益点,有损新品的价值感,不符合我们“回归产品”的设计语言。

所以每次业务方给出的是利益点,我都会提醒他换成卖点,讲明原因,他们通常也是非常认可的。

4. 活动腰带

活动腰带是重运营区域,所以设计形式会常常换样式,不然用户容易视觉疲劳,但任何设计形式,也都是围绕设计语言开展,下图所示,新旧活动腰带对比。

新旧对比很直观的感受就是,变得冷静克制了,场景变得写实了,减少色相了,降低饱和度和明度了,下面我精选了一些近一年中用过的活动腰带。

写实风格的KV能增强商品的品质,也更符合目前的产品定位,从数据来看对比以前也是增长趋势。

对于品牌电商来说,能给用户带来品质感,其实就等于用户对平台增加了信任感,设计促进了用户的信任,那就等于设计赋能了品牌。

5. 手机腰带

手机腰带也是新增的模块,原因很简单,集团的主营业务就是手机,所以手机要有个专门的模块展示。

手机腰带日常保持冷静的设计调性,大促期间会增加标签和突出利益点的处理。

另外值得说的一点是,手机腰带下面三个手机做到了“千人千面”,不同标签的用户会看到不同的手机推荐。

6. 一拖三(瓷片区)

这个模块的改版非常有讲头,这一年中也是经历了多个版本的迭代,首先看一下最初的设计稿,其实是非常符合当时的产品定位,与之前的活动腰带也非常契合,营销感较重,主打的就是一个热闹。

最初的设计没有问题,符合当时的产品定位,但后来应业务方的需求,加了一个配置标签的功能。

当时告诉运营同学的是,四个卡片中只能加一个,功能上并没有限制只能加一个,后来如上图所示,每个都加,夸张的时候四个都加。

本来就是多色的色块,再加上几个突出的标签,那直接就“花枝招展”了,每个卡片都加标签,就等于没有突出任何一个。

后来公司提出高端化路线,就快速做了一个用不到开发的去色的调整,去掉标签,下图所示,修改尺寸板式需要开发介入。

在用去色后样式的同时,我也在进行需要开发介入的设计迭代优化。

首先分享一下我对改版优化的设计思考,对于改版设计拿到需求后,不提倡直接去找参考,应该先去调研改版的目的,了解业务方的想法。

然后结合产品定位,分析目前的设计存在哪些问题,深入去思考如何改版才能深入人心,这个环节非常重要,不仅能培养独立思考能力和意识,而且也是锻炼设计提案能力的重要方法。

拿到需求直接去找参考不仅是一种“懒”的行为,而且非常容易做很多徒劳无功的工作,因为不了解真正的改版目的,不思考存在的问题,最后难免就是多次的改稿。

在一拖三的案例中,我总结了四个问题:

  1. 整体看起来非常紧凑;
  2. 产品图片不能完全展示;
  3. 大卡片的产品名称字号过大;
  4. 大卡片的文案居中对齐,不符合现在的设计原则;

问题一:整体看起来紧凑,其实也并非紧凑,而是如若有一个宽松和它对比,那它就是紧凑的,我先有个方案,再对应给它定义一个问题,当然前提是问题与解决方案是客观成立的。

我坚信宽松一定会打败紧凑,紧凑变宽松会给人一种轻松的清爽感,事实上也的确如此,最后的宽松方案大家都非常认可。

问题二:产品不能完全露出,导致用户看不到产品全貌,从而会降低点击的兴趣,露出半个产品,这样对用户不仅不友好,而且也是对产品不尊重,所以展示出产品的全貌迫在眉睫。

问题三:大卡片的产品名称字号过大,甚至大过板块标题的字,常态展示模块不应该出现不冷静的字号,会显得不精致。

问题四:大卡片的文字排版为居中,居中排版的优点是表现力会更强,缺点是板式结构变得不够整洁,且不耐看,结合我们的设计语言“克制的”能简洁绝不会让它复杂。

最大的改变是一拖三变成了一拖四,整体看起来不再有紧绷感,虽说增加了模块的高度,但也增加了一个坑位,这对对应的业务方来说也是求之不得的好事。

产品图不在部分露出,每个模块都是对角排版,文字左对齐,且可以展示更长的产品名称,整体看起来较为工整,整齐的设计,带来的就是信任感。

接下来我们看一下规范上的整理,边距上视觉统一,产品名称与卖点的间距是卖点与价格边距的二分之一,即五分原则。

同时卖点与价格的边距与外边距相同,在这种小模块设计中,在能把信息层级分清楚的基础上,UI设计间距越少越好,大小相等的东西都会看起来就会更整洁。

产品图的规范设定与前面的金刚位一样,方正的产品贴合小框大小,较长的产品贴合大框。

最后整体看一下,小米商城首页一年前后的对比。

总结:

这次首页的改版主要就是根据公司高端化战略和清晰的产品定位,总结得出设计语言,然后根据设计语言进行改版优化。

  • 首页banner头图,常态化展示进行了去营销化设计,目的就是渲染品牌电商的品质调性,活动期间做了huner的创新型设计。
  • 金刚位的产品图,统一了视觉大小的规范设计,优化图标,融入公司logo的图形元素,促进品牌官网心智的建立。
  • 新品发布会直播时,在商城首页实时同步新品信息,通过新品大卡的形式,做到全网购买新品最快途径。
  • 腰带风格改变,走品质路线,去繁从简,不同的级别的活动,有不同的设计形式承载。
  • 新增手机腰带,同时手机针对不同特征用户做了更精准的投放,做到了“千人千面”。
  • 一拖三改为一拖四,卡片信息重新排版,同时也做了去营销化设计,不再出现标签等营销信息。

首页还有会员楼层、省心优惠、新品上新三个楼层,依旧在改版中,上线后再与大家分享。

关于设计语言:

这四条设计语言,是我一年多以前在改版设计产品站(产品详情页)时做的总结,有些原则在这次的首页改版并没有体现,比如“极致的”用户体验服务,但在产品站的改版中有非常多的体现。

对于电商产品最重要的两个板块就是,首页和产品站,首页负责准确的流量分发,产品站负责销售转化,所以产品站的设计也是非常非常有学问,下一篇文章就是产品站的改版,敬请期待。

三、最后

最后跟大家分享一下,这次改版的重要心得,电商首页的每个模块都是一个业务方,设计上要考虑各方利益,不然你的设计很难推动。

设计形式可以影响流量的走向,合理运用会有非常不错的效果。

设计前的深度思考尤为重要,不仅能培养独立思考的意识,也能无形中锻炼设计提案的能力。

转载:人人都是产品经理

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

 

image.png

细节见真章!12个按钮设计容易踩到的坑

清阳

细节定成败:12个常见的按钮设计误区

按钮设计的直觉性,源于物理按钮给我们留下的行为习惯。回顾历史,物理按钮正是现代UI组件的鼻祖。它们至今仍被大量使用,其魅力在于:即便用户不懂内部原理,只需轻轻一按,就能让设备运转起来。正如《Power Button》一书作者Rachel Plotnick所言,按钮文化塑造了我们今天下达数字指令的方式。

“你只需按下按钮,剩下的交给我们。”——柯达公司的这句经典广告语,精准捕捉了按钮对用户的吸引力:用最简单的触碰,换来即时的满足感。

即便触摸屏日益普及,物理按钮也并未消失。它所塑造的交互习惯,深刻影响着数字界面按钮的设计,成为衡量直观性与易用性的永恒参照。

一、分清按钮与链接

按钮向用户传达“可操作”的信号,广泛出现在对话框、表单、工具栏等场景中。

image.png

  • 链接:用于导航到另一个地方,如“查看全部”、“阅读更多”。

  • 按钮:用于执行具体动作,如“提交”、“合并”、“创建”、“上传”。

二、定义完整的按钮状态

image.png

每个按钮都应具备清晰、无干扰的视觉反馈。其交互状态需明确定义,以区别于周围布局:

  1. 正常:可交互的默认状态。

  2. 焦点:通过键盘(如Tab键)进入可编辑状态时的提示。

  3. 悬停:鼠标指针置于元素上方时(主要适用于桌面端)。

  4. 按下:表示用户正在点击该按钮。

  5. 加载中:操作未立即完成,向用户反馈任务正在进行。

  6. 禁用:当前不可交互,但未来可能启用。

三、选择合适的按钮样式

圆角矩形按钮因其高识别度最为常见。样式的选择取决于用途、平台及设计规范。主流样式大致分为:

image.png

  • 填充按钮(实心):视觉权重最高。

  • 描边按钮(线框):视觉权重次之。

  • 文本按钮:视觉权重最弱。

利用样式差异构建清晰的动作层级,在多个选项中引导用户。通常,最重要的操作使用“首要”按钮样式,其他操作则按重要程度递减。

四、避免让用户思考

image.png

可用性专家Steve Krug曾说:“别让我思考。”用户早已被各类电子产品“教育”,对按钮的外观和功能形成了固定认知。任何与“标准”的较大偏差,都可能造成困惑。

五、区分可点与不可点元素

切勿对交互式元素(如按钮、链接)和非交互式元素(如纯文本标签)使用相同的颜色,否则用户会因不确定哪里可以点击而感到迷茫。

六、保持一致性

image.png

“一致性是最强大的可用性原则之一。当事物总是以相同方式表现时,用户就无需担心意外发生。”——雅各布·尼尔森(Jakob Nielsen)

一致性提升了操作的效率和准确性,减少了误操作。它创造了可预测性,帮助用户掌控流程。在定义主要、次要等按钮样式时,请确保颜色、形状等元素的一致,不仅在项目内部,也应尽量遵循平台的整体规范。

七、保证足够的点击区域

image.png

按下一个按钮应是轻松简单的操作。如果用户容易误触相邻元素,会带来糟糕的负面体验。

  • 推荐尺寸:对于多数平台,触摸目标建议至少为 48x48dp。无论屏幕大小,其物理尺寸应约为9mm。触摸屏元件的目标尺寸至少应在7-10mm之间。

  • 图标按钮:务必确保其可点击的热区大于图标的可视范围。这一原则不仅适用于移动设备和平板,也同样适用于鼠标操作的网页端。

八、践行无障碍设计

image.png

所有组件都应遵循无障碍设计原则。除了目标区域大小,字体尺寸、色彩对比度也至关重要。有许多工具可以帮助检测组件的可访问性表现。

九、谨慎使用手势

image.png

手势(如滑动、双击、长按)能提供触觉反馈并节省时间。然而,对于普通用户而言,许多手势并不直观。建议将复杂手势作为快捷操作留给高级用户,同时为普通用户保留明确的按钮操作入口。

十、使用清晰的按钮标签

image.png

按钮传达的文字信息与其外观同等重要。模糊的标签会让用户感到困惑甚至误导。

  • 使用动词:好的标签能引导行动,就像按钮在主动询问用户:“要把这件商品加入购物车吗?” 或 “要确认订单吗?”

  • 避免模糊词汇:应避免使用“是/否”或过于通用的“提交”等标签。

十一、合理排列按钮顺序

image.png

“确定”与“取消”谁在前?两种方式各有道理:

  • 确定在前(如Windows):符合自然的从左到右阅读顺序。

  • 确定在后(如macOS):促使用户在行动前先评估所有选项,有助于减少错误。

两种顺序都没有绝对的对错,也不会造成严重的可用性问题。选择哪种,取决于平台规范与具体场景。

十二、少用“禁用”状态

image.png

你是否曾面对一个灰色按钮,停留数秒甚至数分钟,却不知如何是好?滥用“禁用”状态极易引发用户的挫败感。

建议:尽量避免使用禁用按钮。更好的做法是始终启用按钮。如果用户遗漏了必填信息,只需在相应空白字段下方给出明确提示,或高亮显示错误项即可。

 

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

 

image.png

超多案例!3个设计策略让你的AI产品更加人性化!

清阳

在 AI 时代做产品设计时,“人性化” 体验依旧是不变的主旨,核心目标是让设计回归用户本身,在合理应用新技术的同时,尊重用户的认知习惯、情感需求与行为差异,让 AI 产品既好用、又 “懂用户”。兰亭妙微UI设计公司会介绍以下三个设计策略和典型案例:

  1. 个性化定制
  2. 多产品互通
  3. 低操作门槛

希望会为你带来更多的设计灵感。

一、个性化定制

基于用户的个体特征、行为数据、场景语境与目标偏好,提供“千人千面”的专属设计方案。核心在于将体验从“通用适配”转向“精准贴合”,从而提升用户的认同感、满意度与留存率。

案例1:ChatGPT推出年度回顾功能,将用户一整年的AI对话转化为可视化数据、AI人格画像与定制诗歌。

image.png

案例2:Gemini新增“使用历史对话作为上下文”功能,实现更连续、更具记忆感的多轮对话体验。

image.png

案例3:ChatGPT推出多维度人格参数调节滑块,通过档位化控制实现交互风格的精准适配,标志着AI对话系统从统一输出转向用户主导的个性化体验设计。

image.png

案例4:Google发布Android 16,利用AI重构通知系统,自动将广告、新闻推送等不重要通知静音并生成摘要,帮助用户保持专注。同时强化图标、主题与深色模式的个性化表达,用户可以自由调整图标形状,让桌面更贴合个人风格。超多案例!3个设计策略让你的AI产品更加人性化!

二、多产品互通

AI智能体能够调动其他产品进行互动,协调多个不同产品或设备,实现它们之间的交互与协同工作,从而为用户提供更便捷、高效、智能的服务体验。

案例1:Gemini Agent上线租车功能,支持自动比价、读取邮箱及租车服务预订,AI正逐步进入端到端的生活服务领域。

 

image.png

案例2:OpenAI与Instacart合作,将“买菜”功能接入ChatGPT。用户可在聊天中一边讨论菜谱,一边生成购物清单,并直接完成结账,全程无需跳转应用。

image.png

案例3:Cursor为Cursor Browser推出全新可视化编辑器,将网页、代码与视觉编辑工具整合在同一窗口,支持拖拽调整界面、直接查看组件属性与样式,并通过自然语言指令快速修改,自动同步至底层代码。

image.png

案例4:谷歌将虚拟试穿门槛降至只需一张自拍,借助Gemini Nano Banana生成全身模型,将AI从可选趣味功能升级为低门槛、便捷实用的购物入口,进一步将搜索与电商融合为一体化、内容驱动的消费场景。

image.png

案例5:谷歌推出Workspace Studio,将AI自动化直接嵌入Gmail、日历与文档,开始重构企业日常工作的操作层。

image.png

三、低操作门槛

通过简化决策、减少手动操作、贴合用户认知习惯等方式,让不同能力层级的用户都能轻松享受AI服务带来的价值。

案例1:Gemini Veo3.1正在小范围测试“视频模板库”,用户可在工具菜单中选择或自定义模板快速生成视频,让“人人皆可做电影”成为可能。

image.png

案例2:灵光App上线可视化“科普动画生成”功能,将抽象科学原理自动转化为动态演示,让教育与科普内容从纯文字升级为“秒懂级”的可视化表达,巩固了其在学习场景中的差异化优势。

image.png

案例3:知名组件库shadcn推出shadcn create,提供可视化方式自定义基础组件的结构、间距、字体与风格,并支持一键在Next、Vite、TanStack Start中启动生成主题,大幅降低构建专属设计系统的门槛。

image.png

案例4:Manus推出Design View,从“反复对话生成”逐步迈向“所见即改”的创作流程。

image.png

案例5:Google在Android版Google News中加入AI播客功能,将新闻自动转化为可收听内容,拓展了通勤、碎片时间等场景下的新闻消费方式。

image.png

案例6:Grok iOS版新增多种语音唤醒模式(默认、隔离、按住说话),在不同环境下提升了语音交互的可控性,打磨出“随时可用但不打扰”的语音入口,为AI助手向高频、低负担使用场景渗透铺平道路。

image.png

案例7:亚马逊旗下AI智能家居助手Alexa Plus上线网页端入口,将原本以语音和音箱为核心的家居控制能力延伸到桌面与工作流中,使其成为更常用的日常AI助理。

image.png


技术的边界在不断拓宽,但设计的温度始终取决于我们对“人”的底层关怀。在AI浪潮中,工具形态会随算法不断进化,而用户对尊重、高效与情感连接的需求从未改变。

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

 

image.png

兰亭妙微:UI 设计师必掌握的核心交互设计知识

涛涛

作为深耕 UI/UE 设计领域的专业机构,兰亭妙微始终认为,优秀的 UI 设计绝非单纯的视觉美化,而是让界面成为人机高效沟通的桥梁。交互设计作为 UI 设计的核心内核,直接决定了产品的易用性与用户体验。在为各行业客户打造优质设计方案的实践中,兰亭妙微沉淀了一套系统的交互设计方法论,从界面布局形式、导航组件设计,到表单反馈、评论体系搭建,再到搜索功能优化,每一个环节都藏着提升产品体验的关键逻辑。以下便是兰亭妙微为 UI 设计师梳理的必备交互设计核心知识,助力设计师打造更友好、更高效的产品界面。

为什么很多大厂主按钮不用主题色?原来还有这5个设计方法!

清阳

我发现很多人设计主按钮,只会用主题色。而兰亭妙微 ui 设计公司在服务大量企业级产品过程中发现,很多大厂设计的主按钮,并不统一用主题色。

注意,这里讲的不是作为陪衬的次按钮,而是一个页面上最显眼的主按钮 CTA (Call to Action) 按钮。

 

image.png

一、背景对比色:极致醒目,适配多色背景

image.png

核心逻辑:采用与背景色强对比的黑白基础色,让按钮在色彩丰富的界面中脱颖而出,解决主题色因画面元素干扰而辨识度不足的问题。

image.png

大厂案例:闲鱼主题色为黄色,搜索按钮选用黑色;YouTube 极少使用红色主题色,主按钮以黑色为主,而在黑底广告卡片上则切换为白色;Spotify 绿色主题色之外,大量主按钮采用白色。这类设计的共性是黑白与背景形成反向对比,白色背景配黑按钮,黑色背景配白按钮。

image.png

image.png

image.png

实测验证:美国电商平台 Etsy 曾对商品详情页 “加入购物车” 按钮做黄 / 黑配色 A/B 测试,最终选择黑色方案,数据证明其视觉吸引与点击转化效果更优。
 

image.png

image.png

适用场景:页面包含大量图片、视频、彩色元素,需要主按钮快速抓住用户注意力的场景,如首页搜索、内容播放页核心操作、电商商品页转化按钮。
 

二、背景相似色:低调适配,避免过度抢眼

image.png

核心逻辑:使用半透明色、浅灰色等与背景色调相近的色彩,让按钮融入界面的同时保持可识别性,适用于 “需作为主按钮,但无需过度醒目” 的交互需求。
 
大厂案例:酷狗短视频广告的 “看全集” 按钮为半透明样式;喜马拉雅播放页按钮均采用半透明设计;闲鱼帮助与客服页底部主按钮用浅灰色;金融 App Revolut 的按钮也以半透明为主。

image.png

image.png

image.png

 

设计考量:这类场景的背景往往色彩鲜艳(如视频、彩色广告图),叠加主题色易显杂乱,而强对比色又会过度吸引注意力,甚至干扰用户核心操作。例如未成年模式的 “不再提醒” 按钮,若设计得过于醒目,可能导致有实际需求的用户误触。
 

image.png

适用场景:背景色彩多变的视频 / 广告界面、辅助性核心操作、需避免用户误触的功能按钮。
 

三、环境色:随境变色,实现视觉和谐

image.png

image.png

image.png

核心逻辑:让主按钮色彩跟随界面环境(如广告 banner、内容卡片)动态变化,贴合环境色调的同时保证识别性,让整体视觉更协调。
 
大厂案例:美图秀秀首页主按钮会随广告 banner 的色彩同步调整;YouTube 部分广告卡片的按钮,色彩会根据卡片内容进行适配。
 
设计要点:该方法对技术实现有一定要求,需保证按钮色彩与环境的适配性 —— 既不能与环境色融合导致识别困难,也不能对比过强破坏整体美感,核心是 “和谐中突出交互”。
 
适用场景:首页广告 banner 旁的核心操作按钮、个性化内容卡片的交互按钮、注重视觉美感的创意类 App 界面。
 

四、模块色:色彩定类,助力快速识别

image.png

image.png

image.png

核心逻辑:根据产品功能模块的固定属性赋予专属色彩,让用户通过色彩快速关联按钮功能,形成视觉记忆,替代主题色的单一标识作用。
 
大厂案例

image.png

  1. 行业通用模块色:国内 App 的会员模块普遍使用金色,即便品牌主题色不同,酷狗(蓝色)、微信读书(蓝色)、携程(蓝色)的会员相关按钮均为金色;营销 / 优惠券模块多采用橙红色,闲鱼(黄色)、QQ 音乐(绿色)、饿了么(蓝色)的优惠券按钮均沿用这一配色。image.png
  2. 产品专属模块色:猎聘 App 用橙色代表求职者模块、蓝色代表招聘方模块,通过色彩划分不同身份的功能入口。
     
    设计价值:对老用户而言,无需看清按钮文字,仅通过色彩就能快速判断功能,大幅提升交互效率;对新用户而言,固定的模块色彩能快速建立功能认知。
     
    适用场景:产品有明确功能模块划分的场景,如会员体系、营销活动、身份选择、功能分类等。
 

五、状态色:色彩表意,规避操作误触

image.png

image.png

核心逻辑:利用用户的色彩认知习惯,将按钮与操作状态绑定,用色彩传递 “可操作 / 不可操作”“正向 / 负向” 的信息,通过色彩提示规避误触。
 
大厂案例

image.png

  1. 基础操作状态:所有手机的来电显示界面,均用绿色代表 “接听(正向操作)”、红色代表 “拒绝(负向操作)”,贴合大众的色彩认知习惯。
  2. 电商操作状态:淘宝直播间商品列表,橙色按钮代表 “可立即抢购”,蓝色按钮代表 “不可抢购可预约”,用色彩明确区分商品操作状态。
  3. 风险操作提示:删除、取消等负面 / 风险操作的按钮多采用红色,通过醒目的色彩提示用户谨慎操作。
     
    设计原则:遵循用户的普遍色彩认知,不随意颠覆固有习惯(如避免用绿色代表删除、红色代表确认),让色彩成为操作状态的 “视觉提示牌”。
     
    适用场景:有明确操作状态区分的场景、包含风险 / 负面操作的界面、需要用户快速判断操作可行性的交互入口。
 

主按钮放弃主题色的核心原因与适用场景总结

 

核心设计逻辑

 
大厂主按钮不用主题色,本质是从 “品牌视觉统一” 转向 “交互体验优先”,当主题色无法适配界面场景、满足交互需求时,选择更贴合实际的色彩方案,具体原因可归纳为 5 点:
 
  1. 界面色彩过于丰富,主题色的醒目度不足;
  2. 环境色彩多变,主题色难以与整体视觉和谐;
  3. 主按钮为辅助性操作,无需过度抢眼;
  4. 需通过色彩划分模块,帮助用户快速理解功能;
  5. 需通过色彩传递操作状态,避免用户误触。
 

通用设计建议

 
当遇到以下 3 种情况时,可直接放弃主题色设计主按钮:
 
  1. 按钮周围的色彩鲜艳、元素丰富,主题色易被淹没;
  2. 产品有明确的功能模块划分,需要色彩建立视觉记忆;
  3. 按钮为辅助性核心操作,或包含风险操作,无需 / 不宜过度醒目。
 
主按钮的色彩设计,最终的核心不是 “是否使用主题色”,而是 “色彩是否服务于交互”。品牌主题色可作为视觉基础,但在实际设计中,需结合界面场景、用户需求、操作逻辑灵活调整,让色彩既贴合产品视觉体系,又能真正引导用户高效交互。

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

 

image.png

告别转圈焦虑!5个提升用户体验的等待时刻设计技巧

清阳

今天,兰亭妙微 ui 设计公司分享的是「等待时刻的交互体验」。打开 APP 一直在加载转圈、快递位置长时间不更新、预计时间到了外卖还没送达 —— 这些时刻是不是让你越等越烦躁?这些场景一旦卡住,我们都会很着急:系统怎么没反应?继续等下去有用吗?

告别转圈焦虑!5 个核心技巧优化产品等待时刻的用户体验

 
打开 APP 持续加载转圈、快递物流长时间无更新、外卖超预计时间仍未送达…… 这些等待场景总能让用户心生烦躁,甚至对产品产生质疑。当系统响应出现延迟,用户的核心焦虑往往源于 “未知”:系统是否正常运行?继续等待是否有意义?

image.png

事实上,等待是产品使用中无法避免的环节,与其依靠技术单方面提升响应速度,不如通过针对性的交互设计,稳住用户心态、减少等待焦虑,让用户在等待中也能保持使用沉浸感。本文将从等待类型分析出发,分享 5 个能显著提升用户体验的等待时刻设计技巧,让 “等待” 不再是产品体验的短板。
 

一、先做分类:精准设计的前提是区分两种等待类型

 
产品中的等待场景可分为可预测型不可预测型,二者的核心差异在于是否能明确等待时间与进度,对应的设计逻辑和组件选择也截然不同,精准区分是做好等待体验设计的基础。
 

image.png

1. 可预测型等待:核心是 “准确可视化,承诺要靠谱”

image.png

这类等待的关键特征是等待时间明确、流程步骤清晰,比如外卖配送时效、打车司机接驾时间、文件下载进度等。当用户对等待有明确预期时,对产品的信任度会显著提升,反之,若进度卡顿、实际时间与预估严重不符,会直接消耗用户信任。
 
设计核心原则:预估时间宁保守不夸大,且需结合实际情况动态更新,避免信息滞后。例如电商、外卖的预计送达时间(ETA),需根据交通、天气、物流状态每 5-10 分钟实时调整,杜绝 “宣称 12 小时达,实际等待一天” 的不靠谱情况。
 
适配设计组件

image.png

  • 进度条:直观展示操作进行状态与完成进度,适合有明确完成节点的场景;
  • 计时器:用于等待时间短、能精准计算的场景,如广告 “5 秒后可跳过”;image.png
  • 文字说明:展示打车、外卖、快递等场景的预估时间 / 距离,如 “预计 19:20 送达,距你 1.8km”;

    image.png

  • 步骤条:提示任务当前进度与整体步骤,常与进度条搭配使用,引导用户按流程完成操作。

    image.png

 

2. 不可预测型等待:核心是 “持续给反馈,告知在运行”

image.png

服务器延迟、身份验证、页面随机加载等场景属于此类,等待时间不明确、步骤模糊是其核心特征。若让用户在无反馈的状态下干等,极易引发焦虑,甚至出现反复刷新、直接退出 APP 的行为。
 
设计的关键并非提供准确时间,而是让用户明确感知 “系统正在正常运行,并未卡住”,通过视觉反馈缓解未知焦虑。
 
适配设计组件
 
  • 加载器:表示操作正在进行但无具体进度,分环形(短时间加载,如点击按钮、打开弹窗)和线性(长时间加载,如下载大文件),又可细分为无限型(无起点终点,适用于服务器响应不确定的临时卡顿)和有限型(进度条逐步填充,适用于有预估范围但无精确数字的场景,给予 “马上完成” 的心理暗示)。

    image.png

     
    进阶设计可融入品牌元素,打造个性化加载器,如美团将 IP 形象奔跑动画融入加载动效,强化品牌体验的同时增加趣味性;
  • 骨架屏:以灰色占位框提前展示页面排版结构,搭配闪烁动效营造动态加载感,让用户预判加载内容的呈现形式。既适用于 APP 首次打开的整页加载,也可用于列表、卡片、个人主页等模块的局部加载,比单纯的转圈加载更能减少 “等待漫长” 的感知。

image.png

二、核心优化:5 个设计技巧,让用户不再怕等

 
无论是可预测型还是不可预测型等待,设计的核心都是营造可预测性、提供可视化反馈、稳住用户心态。结合不同等待类型的特征,总结 5 个通用且高效的设计技巧,覆盖绝大多数产品等待场景。
 

image.png

1. 即时反馈:杜绝 “无响应”,点击即有回应

image.png

用户点击操作后,若长时间无任何反馈,会默认系统卡顿或操作失效,进而产生放弃、重试的行为。哪怕等待仅一两秒钟,也需立即给出视觉 / 交互反馈,比如按钮点击后的状态变化、加载动效的即时启动,让用户明确感知 “操作已被接收,系统正在处理”。
 

2. 组件搭配:灵活组合,让进度更清晰

 
无需局限于单一组件的使用,应根据产品功能和使用场景,灵活搭配进度条、加载器、骨架屏、步骤条等组件。例如大文件下载时,可结合 “线性进度条 + 文字说明(已下载 88%,预计 2 分钟完成)”,既展示实时进度,又给出时间预估,双重反馈让用户对等待更有底,明确知晓 APP 运行正常。
 

3. 贴合预期:保守预估,制造 “超预期” 体验

 
提供可靠的时间信息是降低用户焦虑的关键,预估时间要往保守方向说,让实际等待时间大概率短于预估时间。比如打车时提示 “预计 5 分钟后司机应答”,若实际 3 分钟就完成接驾,用户会产生 “产品效率高” 的正向感知;反之,若预估时间过短,实际等待远超预期,会直接降低用户对产品的信任度。
 

4. 提供备选:释放用户时间,缓解等待压力

image.png

 
若预计等待时间较长(如人工客服排队、大型数据加载),切勿让用户被动等待,需为其提供可选择的替代方案,让用户能在等待中进行其他操作,减缓焦虑。
 
  • 功能层面:增加 “完成后通知我” 按钮,用户无需停留在当前页面,后续可通过消息接收完成提醒;
  • 服务层面:如客服场景,在人工排队时推荐 AI 智能客服,让用户优先通过 AI 解决基础问题,既节省用户时间,也降低产品的人工服务成本。
 

5. 利用时间:让等待成为 “有价值的学习时刻”

image.png

与其让用户对着加载动效发呆,不如在等待期间提供有价值、有意思的内容,将空白的等待时间转化为用户的 “学习 / 了解时间”,一举两得。
 
例如懂车帝的 3D 车型库加载场景,因需要加载复杂的 3D 模型和空间内容,等待时间相对较长,产品在进度条上方展示 6 个手势操作教学(双指滑动、单指旋转、双击切换等),既抓住了用户的注意力,又让用户在进入功能前提前掌握操作方法,省去了后续的单独操作引导,提升了整体使用效率。
 

三、设计总结

 
随着产品功能的不断丰富,用户注册、内容提交、复杂功能加载等流程的复杂度也在提升,等待成为产品体验中无法规避的环节。单纯依靠技术手段提升响应速度,总会存在体验上的局限性,而设计师通过精准的场景分类、贴心的组件选择和科学的设计策略,能让原本令人烦躁的等待时刻,变成提升产品体验的加分项。
 
好的等待体验设计,本质是站在用户视角化解 “未知焦虑”,让用户在等待中感受到产品的用心与可靠。慢下来的设计,反而能让用户的使用体验更 “快”,这也是产品体验优化的核心逻辑之一。
 

兰亭妙微(蓝蓝设计)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端与C端设计:效率逻辑与情感逻辑的本质区别

清阳

在数字化产品全面渗透的当下,UI设计早已不是单一的视觉美化工作,而是根据产品定位、用户需求、商业目标分化出清晰赛道的专业体系。其中,B端设计与C端设计作为两大核心分支,看似同属用户体验设计范畴,却在目标设定、核心原则、实现路径、落地细节上有着天壤之别,二者各司其职又相辅相成,共同构成了完整的数字化用户体验版图。本文将结合兰亭妙微UI设计公司多年深耕UI设计领域的实战经验,全方位拆解B端与C端设计的核心差异,帮助从业者、企业方精准把握两类设计的精髓,打造适配场景、贴合需求的优质产品。

B 端与 C 端设计:效率逻辑与情感逻辑的本质分野

 
在数字产品的设计版图中,B 端与 C 端设计如同一枚硬币的两面,同属用户体验构建的核心组成,却因服务场景、用户需求的本质差异,形成了效率至上与情感共鸣的两种核心逻辑。二者的区别远不止于界面布局、交互细节的表层差异,更根植于价值主张的根本不同:B 端设计以工具理性为核心,追求复杂业务中的极致效率与严谨秩序;C 端设计以用户感性为导向,致力于在轻量化交互中建立深度情感连接与使用愉悦。本文将从目标设定、设计原则、复杂性呈现等七大维度,深度剖析二者的核心差异,同时解读当下行业的融合趋势,为产品设计提供底层逻辑参考。
 

一、目标设定:任务完成的工具性 VS 体验愉悦的情感性

 

B 端设计:效率至上的工具理性

 
B 端产品的核心价值在于解决企业明确的商业问题,通过优化业务流程提升组织效能、降低运营成本,其用户使用产品的核心诉求是完成特定工作任务,而非兴趣或娱乐。这种强工具属性,决定了 B 端设计的核心导向是最大化功能效用,最小化任务完成时间,让专业从业者能高效处理复杂业务。
 
典型案例:钉钉工作平台
 
作为企业级协作工具的标杆,钉钉的设计深度契合 B 端产品的效率逻辑,所有设计选择均围绕企业业务落地展开:
 
  • 功能密度优先:单屏承载多模块信息,大幅减少跨页面跳转的操作成本;
  • 组织架构可视化:将企业层级、权限关系在界面中直观呈现,明确业务协作边界;
  • 任务流程线性化:把审批、汇报等核心企业流程标准化,规避操作冗余;
  • 数据呈现结构化:报表、统计数据以最直接的形式展示,降低专业数据的解读成本。
 
钉钉的 “已读未读”“DING 一下” 强提醒功能,从纯用户体验视角看虽有 “压迫感”,但从企业管理效率出发,却是确保信息高效传达、业务及时推进的必要设计,精准满足了组织对信息可控性、业务落地性的核心需求。
 

C 端设计:情感连接的用户共鸣

 
C 端产品身处注意力稀缺的市场环境,用户的使用意愿源于情感认同而非任务压力,产品的成功与否,核心取决于能否在用户心中建立深度情感连接,创造超越功能本身的体验愉悦。相较于 B 端的 “完成任务”,C 端更追求 “愿意使用、乐于分享” 的用户心智。
 
典型案例:微信
 
从即时通讯工具成长为全民数字生活平台,微信的设计演进是 C 端产品构建情感连接的经典范本,其设计策略始终围绕用户体验与社交共鸣展开:
 
  • 渐进式功能披露:从基础通讯出发,逐步上线朋友圈、公众号、小程序、视频号,让用户在熟悉产品的基础上自然接受功能拓展,降低认知门槛;
  • 社交场景自然延伸:将红包这一传统民俗数字化,打造全新的社交互动模式,让功能成为情感传递的载体;
  • 界面极致简洁:核心聊天界面十年基本不变,以稳定的交互体验降低用户的记忆成本;
  • 生态化而不臃肿:通过小程序实现功能无限拓展,同时保持主应用的轻量化,兼顾体验与实用性。
 
微信早期的 “摇一摇” 无强实用价值,却通过简单的交互动作创造了新奇的社交体验;朋友圈的半封闭分享模式,虽限制了内容传播范围,却提升了强关系社交的互动质量与情感安全感,让产品与用户的社交需求深度绑定。
 

二、设计原则:复杂中的秩序构建 VS 简单中的体验深度

 

B 端:在复杂性中建立可落地的秩序

 
B 端产品的核心设计挑战,在于面对不可避免的业务复杂性时,建立清晰、可复制的使用路径。专业工具的价值往往与功能深度正相关,因此设计师的核心任务并非消除复杂性,而是管理复杂性,让复杂的业务逻辑转化为可被用户理解、操作的系统。
 
  1. 信息架构的深度与广度平衡
     
    以金山 WPS 企业版为例,作为服务企业全流程办公的专业套件,其需满足从基础文档编辑到复杂企业管理的多层次需求,对应的设计解决方案精准且落地:
    • 模块化功能区:将数百项功能按办公场景分类组织,让用户能快速定位所需功能;
    • 上下文智能显示:根据用户当前操作动态调整工具栏,避免无关功能造成的视觉干扰;
    • 多视图支持:为同一文档提供编辑、审阅、阅读等多模式,匹配不同办公场景的使用需求;
    • 模板系统化:内置符合企业规范的各类文档模板,降低企业办公的标准化成本。
     
  2. 一致性与可预测性
     
    一致性设计是 B 端产品减少用户认知负荷的关键,飞书作为企业协作平台,将这一原则贯穿设计全流程:
    • 操作模式统一:所有列表的排序、筛选、分组操作遵循相同逻辑,让用户 “一次学会,处处能用”;
    • 反馈机制标准化:成功、警告、错误提示采用统一的视觉语言,让用户能快速识别操作结果;
    • 导航结构稳定:核心导航项位置固定,不因功能更新而频繁变动,保障业务操作的连续性。
     
 

C 端:在简单中创造有温度的体验深度

 
C 端产品的设计挑战与 B 端截然相反 —— 如何在保持表面交互简单的同时,提供足够丰富的体验深度。用户不会为 “强大但复杂” 的产品买单,却愿意为 “简单却有趣、有温度” 的产品投入时间,因此 C 端设计的核心是轻量化交互 + 高价值体验
 
  1. 认知负荷最小化
     
    抖音的界面设计是降低 C 端用户认知负荷的典范,让不同年龄、不同互联网认知的用户都能快速上手:
    • 单一内容焦点:全屏展示单个视频,排除所有干扰元素,让用户专注于内容本身;
    • 手势操作统一:上滑切换内容、双击点赞、左滑进入主页,以最直观的手势替代复杂操作;
    • 零文本界面:几乎无需阅读任何说明文字,实现 “无教程式操作”;
    • 即时反馈强化:点赞时的爱心动画、评论后的快速回复提醒,以视觉化反馈明确操作结果,提升使用愉悦感。
     
  2. 情感化交互设计
     
    从微信的 “拍一拍” 到小象超市的 “加购动画”,这些看似 “非必要” 的设计元素,实则是 C 端产品建立用户粘性的关键,其核心价值体现在三方面:
    • 增加产品个性:通过微交互打造独特的产品气质,让产品在同质化市场中形成记忆点;
    • 创造愉悦时刻:在完成核心操作时给予超出预期的反馈,让简单的操作变得有温度;
    • 强化行为习惯:通过积极的视觉、触觉反馈,鼓励用户重复使用,逐步培养使用惯性。
     
 

三、复杂性呈现:显性结构的可管理 VS 隐性智能的轻量化

 

B 端:拥抱并管理显性复杂性

 
B 端产品的复杂性是可见的、结构化的,其面向的专业用户具备理解业务复杂性的能力,而产品设计的核心是让这种复杂性变得可管理、可操作,而非刻意隐藏。用户通过理解系统的内在逻辑,获得对复杂业务的控制能力,进而提升工作效率。
 
典型案例:明道云 aPaaS 平台
 
明道云作为面向企业的低代码平台,需要支持用户自定义复杂业务流程,其设计将显性复杂性的管理做到了极致:
 
  • 可视化流程设计器:通过拖拽组件构建工作流,让抽象的业务流程转化为直观的视觉图表;
  • 数据模型清晰展示:以可视化形式呈现实体关系,让用户能快速理解数据关联逻辑;
  • 权限矩阵明确配置:将每个角色的操作权限矩阵化展示,清晰界定不同岗位的操作边界;
  • 系统架构透明化:向管理员开放 API 接口、数据表结构,让企业能根据自身需求进行二次开发。
 
B 端产品对不同类型复杂性的管理策略各有侧重,核心均为 “让复杂可落地”:
 
表格
 
 
 
复杂性类型 设计应对策略 典型案例
功能复杂性 模块化组织、渐进式披露 金山 WPS 企业版
流程复杂性 可视化工作流、状态实时追踪 明道云
数据复杂性 多维视图、智能筛选排序 Tableau
权限复杂性 角色矩阵、分级授权管控 钉钉
 

C 端:将复杂性隐藏于智能背后

 
C 端产品的核心追求是“简单的表面”,将所有技术、逻辑的复杂性隐藏在智能算法和后台处理中,让用户在无感知的情况下享受复杂技术带来的优质体验。用户无需理解背后的逻辑,只需关注 “使用是否便捷、体验是否愉悦”。
 
典型案例:今日头条的推荐系统
 
表面上,今日头条只是一个支持无限刷新的信息流平台,操作简单到极致,但背后却依托复杂的智能系统,实现了 “千人千面” 的内容推荐:
 
  • 实时兴趣学习:根据用户的每次点击、停留时长、收藏转发等行为,动态调整推荐策略;
  • 多维度内容理解:对文本、视频等不同形式的内容进行深度语义分析,精准识别内容核心价值;
  • 个性化排序:基于用户兴趣标签,对信息流进行个性化排序,让用户 “总能看到感兴趣的内容”。
 
C 端产品的隐性复杂性与表面简化设计形成了完美的互补,最终转化为优质的用户体验:
 
表格
 
 
 
隐层复杂性 表面简化设计 最终用户体验
推荐算法 无限刷新信息流 内容精准匹配,提升使用粘性
内容理解 统一的信息卡片样式 不同形式内容一致呈现,降低视觉认知成本
兴趣预测 个性化内容排序 越用越懂用户,提升体验契合度
A/B 测试系统 稳定的界面与交互 产品持续优化,用户无感知适配
 

四、协作模式:结构化协同的专业性 VS 社交化连接的轻量化

 

B 端:多角色工作流的精细设计

 
B 端协作产品的核心是服务企业组织的协同需求,需要支持不同岗位、不同角色的复杂互动,因此设计必须兼顾权限、流程、信息安全三大核心约束,让结构化的协作流程落地,提升组织协同效率。
 
典型案例:飞书的协作架构
 
飞书的设计充分考虑了企业协作的复杂性,从底层架构上支撑多角色、多场景的结构化协同:
 
  • 角色化视图:为不同岗位定制专属信息面板,让用户只看到与自身工作相关的内容,避免信息冗余;
  • 权限精细控制:文档、群聊的访问权限可精确到个人,保障企业核心信息的安全;
  • 流程节点明确:审批、任务分配等流程的状态实时可见,让每个角色都能清晰掌握业务推进进度;
  • 异步协作优化:通过评论、@提及、任务留言等功能,支持非实时协作,适配企业跨地域、跨时段的协作需求。
 

C 端:基于关系的轻量级互动

 
C 端社交产品的协作核心是人与人的连接,而非标准化的业务流程,因此设计更偏向灵活、去中心化,重点在于降低互动门槛、增加互动趣味,让用户能轻松实现情感交流与信息共享。
 
典型案例:微信群的社交设计
 
微信群的设计完美体现了 C 端协作的轻量化特点,契合用户的社交需求:
 
  • 扁平化管理:群成员关系基本平等,管理员仅拥有基础的管理权限,弱化层级感,提升交流自由度;
  • 灵活进退出:用户可随时加入或退出群聊,无复杂的审批流程,适配社交关系的动态变化;
  • 多媒体富互动:支持文字、图片、语音、视频、红包、小程序等多种互动形式,让情感表达更丰富;
  • 弱流程约束:无固定的协作流程,对话自由流动,适配日常社交的随意性、多样性。
 

五、演进路径:垂直深耕的专业化 VS 跨界扩张的生态化

 

B 端:在专业领域持续垂直深耕

 
B 端产品的演进始终围绕行业专业化、业务深度化展开,往往沿着垂直专业化的路径发展,在特定领域建立难以替代的专业壁垒。其新功能的开发与上线,均建立在已有专业深度的基础上,与原有系统深度集成,保障数据与流程的一致性,避免因功能扩张导致的业务混乱。
 
典型案例:金蝶云・苍穹的演进轨迹
 
金蝶云・苍穹从单一财务软件发展为企业级云原生平台,其每一步演进都紧扣垂直深耕的核心:
 
  1. 财务专业化阶段:深度优化会计凭证、财务报表等核心功能,打造财务领域的专业壁垒;
  2. 管理扩展阶段:在财务核心的基础上,增加供应链、生产制造、人力资源等模块,实现企业管理的全流程覆盖;
  3. 平台开放阶段:提供标准化开发平台,支持企业根据自身业务需求进行定制化扩展;
  4. 智能化阶段:引入 AI 技术,实现财务数据的智能分析、业务趋势的精准预测,从 “工具” 升级为 “企业决策助手”。
 

C 端:打破边界的生态化扩张

 
C 端产品的演进更加大胆、激进,核心围绕用户需求展开,常常跨越行业边界,构建以用户为中心的全场景服务生态。其核心逻辑是 “以核心能力辐射多场景,以用户需求驱动功能扩张”,通过打造一站式服务平台,提升用户的使用粘性与生命周期价值。
 
典型案例:美团的边界扩张史
 
美团从团购网站成长为全民生活服务超级平台,其扩张路径始终以用户的生活服务需求为核心,以核心能力为支撑:
 
  • 核心能力辐射:以外卖配送的即时性能力为基础,拓展至生鲜、药品、商超的即时配送,打造 “30 分钟生活圈”;
  • 场景自然延伸:从餐厅团购出发,逐步覆盖酒店预订、旅游服务、电影票务、休闲娱乐等生活场景,实现 “吃住行游购娱” 全覆盖;
  • 数据网络效应:通过积累海量的用户评价数据,提升服务与用户的匹配效率,形成 “数据越丰富,体验越优质” 的正向循环;
  • 协同价值创造:到店业务与外卖业务相互引流、相互促进,实现不同业务板块的协同发展,提升平台整体价值。
 

六、成功衡量:可量化的效率指标 VS 多维度的体验评估

 

B 端:以客观数据衡量效率提升

 
B 端产品的价值直接关联企业的投资回报,其成功与否可通过明确、可量化的业务效率指标来衡量,所有指标均围绕 “降本、增效、提质” 展开,数据结果是产品价值的核心体现。
 
核心衡量指标包括:
 
  • 任务完成时间减少:核心业务流程的操作耗时降低百分比;
  • 错误率下降:人工操作失误、流程衔接失误的减少比例;
  • 人力成本节约:通过自动化、标准化替代的人工工作量;
  • 流程标准化程度:企业内部标准化流程占总业务流程的比例。
 

C 端:以主观体验为核心的多维度评估

 
C 端产品的成功更具多元性与主观性,其价值体现在用户的使用意愿、粘性与口碑中,因此评估体系需兼顾数据指标与主观体验,核心围绕 “用户是否愿意用、是否持续用、是否推荐用” 展开。
 
核心评估指标包括:
 
  • 用户留存曲线:不同时间段的用户保持率,反映产品的长期吸引力;
  • 日 / 月活跃用户规模:反映产品的市场渗透率与用户使用习惯;
  • 用户满意度评分:通过调研获取的用户主观评价,反映产品的体验契合度;
  • 净推荐值(NPS):用户向他人推荐产品的可能性,反映产品的口碑与传播力;
  • 平均使用时长:单次使用与每日总使用时间,反映产品的用户粘性。
 

七、融合趋势与未来展望:相互借鉴,各守核心

 
当下,随着 B 端市场竞争的加剧与 C 端产品的深度发展,B 端与 C 端设计不再是泾渭分明的两个领域,而是出现了相互借鉴、融合创新的趋势。但值得注意的是,融合并非 “同质化”,二者仍坚守自身的核心设计逻辑,在保留本质的基础上优化体验。
 

B 端产品的消费化体验升级

 
新一代 B 端产品开始重视用户体验的优化,引入 C 端设计的思维与方法,在保障效率与专业性的前提下,降低使用门槛、提升操作愉悦感,核心升级方向包括:
 
  1. 移动优先:充分考虑员工移动办公的场景需求,优化移动端界面与交互,实现 “随时随地处理业务”;
  2. 上手简化:通过新手引导、标准化模板、一键操作等设计,降低产品的初期学习成本;
  3. 视觉轻量化:在保持信息密度的前提下,优化界面视觉设计,采用卡片式布局、可视化图表,降低视觉疲劳;
  4. 微交互优化:增加操作后的实时反馈,如任务提交成功的动画、流程推进的提醒,让专业操作更有温度。
 

C 端产品的专业化功能完善

 
C 端产品在坚守情感体验与轻量化交互的基础上,开始向专业化、精细化发展,为不同用户群体提供更具深度的功能支持,核心升级方向包括:
 
  1. 创作者工具专业化:内容平台为创作者提供专业的数据统计、粉丝管理、内容编辑工具,满足其精细化运营需求;
  2. 商家后台复杂化:电商平台的商家后台功能日益接近传统 B 端产品,提供库存管理、数据分析、客户运营等全流程专业工具;
  3. 企业级功能引入:部分 C 端产品推出团队协作版本,如微信企业版、飞书个人版,在保留 C 端体验的基础上,满足小型团队的协作需求。
 

核心设计原则的趋同与分化

 
尽管二者相互借鉴,但核心设计原则的差异仍清晰存在,这种 “和而不同” 的状态,正是产品设计贴合用户需求的体现:
 
表格
 
 
 
设计维度 B 端设计倾向 C 端设计倾向
信息密度 高密度,减少页面跳转,适配专业操作 低密度,焦点明确,降低认知负荷
交互模式 专业、高效,标准化流程优先 直觉、有趣,轻量化体验优先
个性化程度 基于角色定制,匹配企业组织架构 基于行为偏好,实现千人千面
迭代速度 稳重、兼容性优先,保障业务连续性 快速、创新优先,贴合市场需求
 

结语:理解差异本质,创造跨界价值

 
B 端与 C 端设计的本质差异,源于其服务的用户群体、使用场景与核心需求的不同:B 端设计如同精密的专业仪器,核心使命是在复杂的企业业务中建立秩序,实现效率的最大化;C 端设计则如富有温度的艺术作品,核心追求是在简单的用户交互中创造共鸣,实现体验的最优化。
 
优秀的产品设计师,并非简单地 “站在 B 端” 或 “站在 C 端”,而是深刻理解两种设计逻辑背后的底层需求,根据产品定位与用户场景选择恰当的设计策略。在 B 端产品中适当融入情感化设计,让专业操作更有温度;在 C 端产品中合理引入效率工具,让愉悦体验更具价值。这种跨越边界的设计思维,正是当下数字产品创新的核心动力,也能让产品在满足核心需求的基础上,创造出超出用户预期的价值

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

 

image.png

日历

链接

个人资料

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

存档