首页

外卖平台搜索功能设计核心总结

清阳 设计思维

兰亭妙微UI设计公司,以美团、饿了么、大众点评为案例,分析外卖平台搜索功能的价值、类型与设计方法,提炼出打造优质搜索体验的核心要点。

一、搜索的核心意义

image.png

  1. 高效找餐:帮有明确需求的用户快速检索,节省时间、提升点餐效率。
  2. 引导消费:用热词、推荐等引导无目标用户,创造消费、促进下单。
 

二、主流平台搜索类型特点

image.png

  1. 入口:统一用搜索框,保证高曝光。
  2. 模式:美团 / 饿了么 = 全量模糊搜索;大众点评 = 城市定向搜索。
  3. 功能:饿了么 / 大众点评带扫一扫,支持二维码快速找品。
  4. 引导:美团 / 饿了么用大色块按钮;美团加搜索标签刺激转化。
 

三、四大设计原则

  1. 场景预热:搜索前用轮播热词、运营活动、IP 动态对话引导。image.png
  2. 贴心引导:提供历史搜索、搜索发现、热榜,缩小范围、展示权益。

    image.png

  3. 预期管理:实时联想关键词,展示商家 / 商品 / 优惠,减少无效操作。

    image.png

  4. 细致分类:结果分层归类,搭配榜单与笔记,方便筛选避坑。

    image.png

 

四、总结

外卖搜索要围绕效率、引导、体验打磨细节,借鉴优秀竞品设计,打造流畅流程,提升用户留存。
 

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

 

image.png

10个产品细节剖析,看看高手如何做温度的设计!

清阳 设计思维

随着互联网产品的不断发展,在生活和工作的方方面面都有非常多的产品普及,用户的选择性更多了。想要打动用户,就要拿出更优质的服务和差异化的产品,当产品和服务拉不开差距的时候,产品设计的体验感变得至关重要了。

为了提升用户体验度,做出有温度的设计才能打动用户,兰亭妙微UI设计公司相信这些案例可以带给你一些启发。

1. 插画氛围:用场景感激活用户参与欲

image.png

产品的社区、活动等模块,核心目标是提升用户参与度。温暖具象的插画场景,能快速唤起情感共鸣。
 
  • 钉钉成长社区用全家福温馨插画,精准击中家长记录孩子成长的心理,有效提升动态发布活跃度。
  • 用视觉氛围降低参与门槛,让用户愿意主动互动、分享。
 

2. 热点主题化:借势营造沉浸式氛围

image.png

蹭热点不只是营销手段,更是视觉与体验的氛围升级
 
  • 麦当劳 App 频繁推出品牌联名主题,将界面背景、插画、图标全面贴合联名风格,整体统一且辨识度极强。
  • 从视觉到交互完整落地热点氛围,让用户感受到新鲜感与品牌趣味。
 

3. 情感化动态:让打卡更有仪式感

image.png

线下到店打卡的核心是参与感与真实感,动态设计能强化这两点。
 
  • 大众点评打卡采用 IP 角色 + 定位符号动画,清晰传递 “真实到店” 的含义。
  • 流畅动效提升操作愉悦度,让简单打卡变成有情绪反馈的小仪式。
 

4. 应景天气设计:把自然氛围搬进产品

image.png

天气类产品的竞争力,在于场景化与氛围感
 
  • 苹果天气 App 在中秋夜晚同步展示圆月效果,与现实节气高度呼应。
  • 随季节、节日、天气变化的视觉皮肤,让产品更贴近生活、更有人情味。
 

5. 品牌化刷新:让基础操作贴合产品特质

image.png

下拉刷新是高频操作,贴合产品属性的趣味动效,能大幅提升记忆点。
 
  • 当当 App 将刷新设计为 “开书→翻页” 动画,完美契合图书平台定位。
  • 把通用操作变成品牌小彩蛋,枯燥动作也变得有趣。
 

6. 长按快捷删除:提升效率更人性化

image.png

消息通知易造成红点困扰,简化删除流程是体验刚需。
 
  • 淘宝通知列表支持长按一键弹出删除选项,可单条 / 全部清除。
  • 减少滑动、点按步骤,高效解决用户痛点,更贴合使用习惯。
 

7. 多元头像预设:降低设置门槛,强化 IP

image.png

很多用户不愿自定义头像,优质预设能解决这一问题。
 
  • 贝壳找房提供微信头像导入 + 专属 IP 头像选择,选择丰富、一键应用。
  • 既提升用户头像完成率,又持续曝光品牌 IP,情感化与品牌化双赢。
 

8. 点亮城市足迹:用成就感驱动用户

image.png

旅行、出行类产品的核心情感是探索欲与成就感
 
  • 高德地图首次抵达新城市会自动弹出欢迎提示,并点亮城市足迹。
  • 用轻量玩法带来即时成就感,激发用户探索更多地点。
 

9. 昼夜视觉切换:让界面随时间更治愈

image.png

动态变化的界面,能带来持续新鲜感与细腻感知
 
  • 美团 “看病买药” 个人中心,昼夜切换顶部背景与小药箱 IP 动作。
  • 柔和的视觉变化,让界面更有生命力,提升整体使用舒适度。
 

10. 多感官趣味:视觉 + 触觉打造沉浸互动

 
随着交互技术成熟,多维感官体验成为新趋势。
 
  • 马蜂窝 AI 帮手 “十一实况” 结合重力感应,旋转手机即可触发场景变化。
  • 从视觉延伸到触觉,让互动更真实、更有探索乐趣。

     

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

 

image.png

B端产品体验调研中,设计验证怎么做?

清阳 设计思维

人们认为设计师是表面工作——设计师拿着盒子说‘它看起来好!’这不是我认为好的设计。设计可不只是看起来或者摸起来的样子,设计考虑的是用它的感觉。 ——Steve Jobs 2003年11月30日《纽约时报》

在日常的 B 端产品调研支持过程中,我们研究员经常会遇到这样的场景:

“你们帮我看看,产品方案满不满足用户需求?功能符不符合用户预期?”

“(研发问)功能上线的 ROI 是多少?用户对这类功能是否有需求?解决了用户什么问题?”

“你们多找一些用户验证一下 demo 方案行不行…”

无论是产品同学,还是设计同学,相信大家或多或少都会在需求文档、设计文档评审时被业务方、研发问到方案可行性和落地价值等方面的“灵魂拷问”,而这些疑惑同时也在拷问我们研究员。那么作为研究员,我们是如何从用户的角度去辅助产品同学和设计同学进行敏捷的方案验证呢?

首先,我们先来了解什么是产品可用性测试?

可用性(Usability),被定义为一种用来衡量界面好用程度的属性。好用程度的高低一般取决于以下五个要素:

  1. 可学习性(Learnability):初次接触这个设计时,用户完成基本任务的难易程度。
  2. 效率(Efficiency):用户能多快完成任务。
  3. 可记忆性(Memorability):当用户一段时间没有使用产品后,是否能马上回到以前的熟练程度。
  4. 出错(Errors):用户能否从错误中恢复。
  5. 满意度(Satisfaction):用户对产品的主观满意度。

可用性测试主要用于验证产品的可用性,该方法能够帮助产品同学和设计同学了解在实际使用情境中该设计方案(概念或创意)的质量(评估是否可用/是否有效/用户是否满意),并在测试结果的基础上进行改进。

换句话说,可用性测试是观察有代表性的用户,让用户完成产品中的各项任务,了解用户如何使用产品,界定出可用性问题并解决这些问题,让业务、产品、设计、研发等上下游角色尽快对产品方案达成共识并积极优化产品体验。

image.png

通过可用性测试,我们可以:

  1. 了解用户如何与产品进行交互;
  2. 了解用户是否能够完成指定任务;
  3. 了解用户需要多久才能完成指定任务;
  4. 了解用户对本品和竞品的满意度;
  5. 明确产品存在哪些需要优化的可用性问题;
  6. 明确产品可用性情况及是否符合上线目标;
  7. 让产设研团队在开发上线前发现问题并解决。

那么,什么情况下可以做可用性测试?

在实际项目执行中,我们通常会在几个特定阶段去进行产品可用性测试,不同阶段采取的调研方式也有所不同,所关注的内容亦随之变化。

(1)设计初始阶段,我们通常会进行前期用户需求挖掘或相似产品使用情况分析,并基于需求概念设计出来的草图方案进行探索性可用性测试,来确定方案内容和功能的范围是否符合用户预期方向和使用需求,以此初步评估草图方案的有效性和可用性。因此,在该阶段,我们常以纸张原型测试+定性深访为主,先从认知上与用户保持一致,理解了用户,做出来的产品方案更能贴近用户诉求。

(2)灰度上线前,我们一般对 demo 终稿进行评估性可用性测试,向目标用户介绍新设计,同时尽可能保证 demo 稿是用户能够直观测试使用的,以此来确定 demo 在功能满足、信息布局、流程交互,甚至是视觉样式上是否能够提供良好的用户体验。所以,在该阶段我们更多会进行面对面测试+可用性测试量表(SUS 量表),一般在会议室等固定安静的环境中进行,并要求用户按既定任务测试操作,任务测试过程中不打断用户并观察记录用户在关键流程环节使用中遇到的问题,测试完成后向用户提出问题或进一步探究原因。

(3)灰度上线或全量上线后,我们通常会对上线后的新方案进行对比性可用性测试,通过灰度方式在同一时间维度下比较新方案和原方案的可用性反馈和用户满意度,确保方案在全量上线之前修复任何潜在问题。因此,在该阶段我们以 A/B 测试+场景化调研问卷(如下图所示)为主,通过用户体验数据和业务数据来评估出最优版本。

image.png

实际执行中,我们怎么做可用性测试?主要实施步骤有:

image.png

STEP1:设计任务

可用性测试的基础是任务,任务测试内容的好坏是能够对测试结果的准确性有直接影响的。因此在招募用户之前,需要对测试的产品方案进行任务设计。比如,测试商家在 B 端营销系统报名营销活动流程方案的任务可以是:报名一场双 11 大促活动。

在设计比较合适的测试任务时需要注意以下几点:

  1. 选择最核心的功能或操作流程作为任务。产品最核心的功能和操作流往往是最频繁被用户使用的地方,假设最常用最核心的地方还存在可用性问题,那么就算优化了其他边缘部分的可用性问题,依旧是对产品整体体验于事无补。比如在商家报名大促活动流程中,最核心的环节是查找活动→选择商品报名→跟踪报名进度,那么就需要重点将这部分作为测试任务。
  2. 任务应符合常规操作流程。在实际业务中,产品线的职责分工会比较细化,比如 A 产品会负责 A 模块,B 产品负责 B 模块…单一功能模块的测试任务较多的情况下,如果各任务之间操作流无法串联甚至是存在冲突的话,用户测试的操作流就是不合常规的,也容易给参与测试的用户带来困扰。因此,我们研究员需要根据用户操作习惯来进行评估测试任务并设计串联流程。
  3. 为任务创建一个应用场景。简单的场景描述会对用户执行任务有帮助。比如:任务是“报名一场双 11 大促活动”,我们可以创建这样一个场景:你关注的双 11 大促活动报名时间开始了,你想上商家后台去报名双 11 大促,请登录商家后台来完成大促活动报名。
  4. 明确任务的起点和终点。用户是否完成了任务的评估依据是:用户是否从起点(页面 A)到达了终点(页面 B)。因此要明确起点和终点的定义,哪个页面是起点?哪个是终点?比如:任务是“报名一场双 11 大促活动”,起点页面就是商家后台首页,终点页面就是提交报名素材成功的页面。另外在评估是否到达终点页面之外,还需要关注用户在任务过程中的操作动线、是否有效填答信息,若没有,我们需要搞清楚背后原因是什么。
  5. 任务不应过于简单。若想测试用户是否能够找到某功能,不要用类似“找到 XX 功能按钮”这类表述,我们应该给用户提供一个要处理的实际场景任务,比如不是“找到换品功能按钮”而是“报名完成后想要重新换品”。
  6. 避免提供线索和描述操作步骤。任务只需要给出具体目标即可,不需要给到测试用户具体的操作步骤,不然会容易错过用户在执行任务过程中到某一环节可能存在的“意外问题”,而这些“意外”恰恰是我们需要关注的。

STEP2:招募用户

在招募用户环节,最重要的是样本数量的确定。在实际的可用性测试中,我们常常被产品同学或设计同学问到:

“6 个用户提出的问题能代表全部么?”

“几个用户是不是太少了?他们提出的问题是可靠么?”

诸如此类的样本数量“挑战”,不胜枚举。人机交互博士 Jakob Nielsen 曾提出:“有 5 个人参加的用户测试,即可发现大多数(85%)的产品可用性问题。” Nielsen 这张经典图表(如下图)告诉我们答案:一般最严重的问题都是前几名用户发现的,随着用户数量增多,发现问题逐渐减少。

image.png

当然在实际执行中也会存在一些局限性,比如只能发现问题数量,但无法确定发现问题的严重程度,因此还是需要从实际情况比如测试任务的复杂程度、人力资源的投入程度等等来确定招募样本数量。

STEP3:前期准备

  1. 测试地点与工具准备。比如安静的会议室、电脑、录音笔、录屏软件(录制操作全程,便于后续回顾分析)等。
  2. 任务相关资料准备。如①数据收集表,如收集任务是否完成、完成时间、关键事件中遇到的体验问题、满意度;②访谈提纲,包含任务步骤、需要注意深挖的环节问题等。比如,任务是“报名一场双11大促活动”,访谈验证sop示例:

image.png

STEP4:试点测试

试点前测的目的是针对整个测试流程和提纲进行测试,便于前置发现流程和提纲中存在的问题,及时优化,避免造成真实测试用户的资源浪费。试点前测需要注意:

  1. 访谈提纲的话术表达和任务流程的设计,是否能够准确让用户理解?
  2. 提纲内容是否透露了操作步骤,用户是否很快完成任务?
  3. 时间安排是否合理,用户是否可以在规定时间内完成任务?
  4. 任务流程安排是否合理,用户是否感到疑惑?

STEP5:观察访谈

在观察测试中,需要检查用户任务目标和心理认知是否可以顺利执行下一步操作,以此来发现可用性问题,因此我们要对以下问题做到心中有数:

image.png

在事后访谈中,有以下几点小小访谈 tips:

  1. 认知习惯层面:首先了解用户对方案功能的基本理解,比如是否能够理解?理解的意思是什么?为什么会有这些理解等等,之前在这些环节中用户的操作习惯是什么样的?
  2. 需求关注层面:用户在这些环节关注哪些方面?然后再给用户解释每个功能方案的定位作用是什么,方案解决什么问题。同时追问用户,就目前方案是否解决实际中的问题,哪些问题?以及还有哪些优化的建议等等。尽管大多数人认为不该直接问用户产品的优化建议,用户给到的结论也只是基于自身经验的主观想法,但是若根据用户给到的答案继续深挖“为什么”,可能会知道用户真正想要达到的效果和预期是什么。
  3. 切记不要上来就一通讲解方案后就单纯问用户你觉得好不好,应该还要继续往下追问。因为这样通过对用户现有的行为习惯和需求关注的了解,才能够判断评估用户说的话是否逻辑自洽,才能够验证方案是否能够真正满足用户的需求,而不是伪需求。

STEP6:分析报告

一般情况下,可用性报告的内容主要包含以下三方面:

  1. 研究概述:测试目标、样本描述、研究方法等。
  2. 问题解读:问题描述、原因解读、严重程度及影响范围评估、数据结果等。
  3. 解决应对:建议的解决方案。

最后的话

好的产品设计应当满足以下特征:可用性、易用性、好用性且具有吸引力。每个特征都是为了能让产品站稳脚跟而存在的,倘若想要让产品功能最终具备这些特征属性,就离不开产品可用性测试的过程。

而且一个产品设计方案在没有经过用户验证的情况下,容易在实际上线使用后出现一些隐性风险。而前置的设计验证,在一定程度上可以辅助我们产品功能在上线前发现问题,改进设计。

以上,共勉~希望能对大家有所启发。

转载:优设

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

 

image.png

教科书级干货!6招兰亭妙微UI设计公司,带你玩转情感化设计

清阳 设计思维

过去十几年,数字产品设计的核心一直是能用、稳定、无障碍,但如今功能同质化严重,情感体验成为产品决胜关键
 
C 端用户追求 “用得开心”,加载动画、趣味细节都能提升好感;B 端用户需要 “用得舒服”,简洁界面、贴心反馈能缓解工作疲惫。
 
情感化设计不是单纯美化界面,而是用设计触发正向情绪,建立用户与产品的情感连接,最终提升满意度与忠诚度。兰亭妙微UI设计公司带您一起看。

image.png

一、什么是情感化设计

image.png

 
情感化设计是以激发用户积极情绪为核心的设计理念,超越基础功能与可用性,让用户在使用中产生愉悦、安心、被重视的感受。
 
它基于唐纳德・A・诺曼的三层情感模型,覆盖用户全体验链路:
 

1. 本能层(视觉感官)

image.png

第一眼视觉冲击,直接影响初始好感。
 
  • C 端:美团橙黄色传递温暖食欲感
  • B 端:Notion 低饱和色系降低信息压迫感
 

2. 行为层(操作交互)

 

image.png

操作流畅度与即时反馈,决定使用舒适度。
 
  • C 端:淘宝购物车动效、点击反馈
  • B 端:360 安全卫士查杀流畅动画
 

3. 反思层(品牌记忆)

image.png

 
使用后的长期感受,塑造品牌忠诚度。
 
  • C 端:网易云音乐年度听歌报告
  • B 端:Slack 年度团队感谢动画
 

 

二、UI 情感化设计发展三阶段

 
  1. 功能导向期:以技术为中心,仅满足基础使用,用户适配系统image.png
  2. 体验兴起期:关注可用性,界面更直观易用

    image.png

  3. 情感化阶段:以用户情感为核心,打造有温度的体验image.png

 

 

 

三、为什么要做情感化设计

 
人类决策由情绪驱动,大脑杏仁核、前额叶皮层等区域负责情感处理,多巴胺、血清素直接影响愉悦感。
 

image.png

情感化设计能:
 

 

  • 触发用户正向行为,降低心理防线
  • 建立品牌认同与身份归属感
  • 实现用户体验与产品价值的双赢
 

 

四、情感化设计三大核心要素

image.png

 

1. 视觉设计:用美学传递情绪

 
  • 色彩:蓝色 = 信任、红色 = 热情、黄色 = 活力,精准匹配情绪image.png
  • 排版布局:简洁对称 = 平静舒适,杂乱无章 = 焦虑烦躁image.png
  • 动画过渡:轻量动效缓解等待焦虑,提升操作愉悦感image.png
 

2. 交互设计:用细节传递关怀

 
  • 微交互:按钮反馈、悬停变化、加载动画,体现设计用心image.png
  • 个性化:基于用户行为定制推荐,让用户感到被理解image.png
 

3. 内容语言:用语气拉近距离

  • 语气适配:幽默亲切 or 专业严谨,匹配产品调性image.png
  • 正向引导:错误提示安抚、成功操作鼓励,减少用户挫败感image.png
 

 

五、情感化设计的价值(C 端 + B 端)

 

对 C 端产品:拉近距离,提升粘性

 

image.png

  • 降低使用门槛,拟人化设计减少操作挫败感
  • 强化用户认同,契合审美与情感偏好
  • 促进转化传播,激发分享欲与复购
 

对 B 端产品:提升效率,优化协作

 
  • 缓解工作压力,简化流程、清晰反馈减少焦虑image.png
  • 增强团队协作,正向激励提升参与感image.png
  • 降低落地阻力,人性化设计减少员工抵触image.png
 

 

六、6 招落地情感化设计(核心实操)

 
  1. 视觉轻量化:低饱和配色、留白设计,减少视觉疲劳
  2. 微交互精细化:操作必有反馈,加载、点击、错误状态全覆盖
  3. 文案人性化:拒绝生硬提示,用亲切、鼓励的语言沟通
  4. 场景适配化:C 端做节日皮肤、个性化内容;B 端做高效流程、简洁界面
  5. 反馈即时化:任务完成、流程卡点及时提示,给用户掌控感
  6. 迭代动态化:通过用户调研与数据反馈,持续优化情感体验

 

 

 

结尾总结

 
情感化设计不只是好看的插画、动效,而是覆盖视觉、交互、文案的全维度体验设计。
 
它把冰冷的功能,变成懂用户、有温度的产品,让 C 端用户爱上使用,让 B 端用户高效舒适。
 
做好情感化设计,需要产品、设计、研发多方协作,以用户为中心,持续迭代优化。
转载:优设

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

 

image.png

B 端表单设计(上)优化版|清晰、好读、可直接落地

清阳 设计思维

在B端产品设计中,表单作为核心数据录入与交互载体,其设计的合理性直接影响产品效率与用户体验,兰亭妙微ui设计公司在长期服务B端客户的过程中发现,许多产品因表单设计不规范、逻辑混乱,导致用户填写效率低、错误率高,甚至放弃操作。基于此,结合兰亭妙微ui设计团队的实战经验,我们保留核心干货,修正设计误区,梳理清晰逻辑,打造一份可直接落地、适合设计师快速查阅的B端表单设计指南,助力更多产品打造高效、易用的表单体验。
 

一、开篇:B端表单到底是什么?

表单是B端产品核心数据录入载体,本质是把线下纸质单据搬到线上,适配电脑/移动端操作习惯。核心目标:降低填写成本、减少错误、提升效率、提高完成率。

image.png

二、表单三大设计原则

  1. 表意明确:用对组件:日期用DatePicker、数字用InputNumber,不混用、不误导。
  2. 简洁高效:信息获取快、录入操作快;视觉清爽,不堆砌。
  3. 安全容错:操作前:清晰提示输入规则;操作中:实时校验、自动纠错;操作后:草稿保存、二次确认防误操作。

三、表单基础构成(必掌握)

基础表单 = 标签 + 表单域 + 提示信息 + 操作按钮;高阶表单 = 基础 + 校验提示/帮助提示/占位符/动态增减。

image.png

1. 标签布局(4种,效率排序)

效率:顶对齐 > 右对齐 > 左对齐 > 内部标签
  • 顶对齐标签:速度最快(50ms定位)、浏览填写双快、省横向、占纵向。✅ 适用:追求快速填写、标签长短不一、延展性要求高。

    image.png

  • 右对齐标签:填写快、省纵向、阅读稍慢。✅ 适用:要屏效+要速度,标签长度差异小。image.png
  • 左对齐标签:阅读稳、填写慢、省纵向。✅ 适用:复杂/敏感信息、需要用户仔细核对(如注册)。

    image.png

  • 内部标签:省空间、输入后消失易遗忘。✅ 适用:移动端极简表单(≤2项),不建议PC端大量使用。

     

2. 必填/选填标记规则(统一最关键)

image.png

  • 全必填:可统一不标,保持全局一致即可
  • 必+选混合:只标必填* 或 只标选填,二选一并贯穿全站
  • 星号位置:建议放标签左侧,一眼扫完必填项

3. 表单域(输入核心)

image.png

包含:输入框、选择器、时间选择器、数值选择器、上传。
设计要点:
  • 宽度与输入内容匹配:长度暗示输入量(建议用80/120/160/240/400这5档)
  • 提供合理默认值:减少选择负担,提升填写速度
  • 提示文案:有用、具体,不写“正确但无用”的话

4. 操作按钮

image.png

  • 弹窗表单:按钮底部居右(确认在最右)
  • 页面长表单:按钮居中(减少操作距离)
  • 阅读顺序:右上角/右下角 → 从右往左;表单内 → 从左往右

四、表单4种布局类型

  1. 基础表单:表单项≤7个、结构简单,直接单列/双列排布。

    image.png

  2. 锚点定位表单:内容极多、纵向超长、各组强关联,用锚点快速跳转。

    image.png

  3. 标签页(Tab)表单:内容多、各组无强关联,用Tab分组隔离。

    image.png

  4. 分步(Steps)表单:有先后逻辑顺序,给用户进度预期。

    image.png

五、表单5种交互形式(按内容量排序)

内容由少到多:气泡卡片 → 原位编辑 → 弹窗 → 抽屉 → 页面跳转
  1. 气泡卡片 Popover:轻描述、轻操作,不打断流程。

    image.png

  2. 原位编辑:展示即编辑,回车保存,极简录入。

    image.png

  3. 弹窗 Modal:不离开当前页,承载简单表单。

    image.png

  4. 抽屉 Drawer:侧边滑入,可多层,适合中量内容。

    image.png

  5. 页面跳转:最通用,适合复杂、长表单,必打断当前流程。image.png

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

     

    image.png

兰亭妙微:UI 设计中的色彩运用法则与实战实践

涛涛 设计思维

色彩是 UI 设计的灵魂,它并非单纯的视觉装饰,而是传递品牌情绪、引导用户行为、强化设计质感的核心语言。兰亭妙微深耕 UI/UE 设计领域十六载,始终将色彩运用作为设计体系的核心环节,在工业制造、医疗健康、财税金融、航天军工等垂直领域,将色彩理论、色彩心理学与行业场景深度融合,形成了一套 “理论落地 + 行业适配 + 用户感知” 的色彩运用方法论。从色彩比例的精准把控到色彩情绪的精准传递,从自然灵感的汲取到实用工具的高效运用,兰亭妙微让每一种色彩的选择都有逻辑、有温度、有价值,让色彩成为连接品牌与用户的无声桥梁。

如何做好B端产品的竞品分析?

清阳 设计思维

竞品分析作为日常工作中常用的基础能力,在 C 端和 B 端两种截然不同的产品形态下需要面对的难点也是不尽相同的。那么作为面向企业、公司的 B 端产品,在做竞品分析时的流程以及侧重方向上都有哪些特点呢?兰亭妙微UI设计公司将从产品差异等几个方向为大家分享一下自己的思考和总结,以期能够提供参考和建议。

“竞品分析”我们从字面上理解,就是对现有的以及潜在的竞争产品的优劣进行分析和总结。用以了解市场行情及自身产品的定位,发现新的市场机会,探索产品迭代的有效策略。在正式介绍 B 端竞品分析的经验和思路之前,想先简单介绍一下 C 端产品和 B 端产品的差异点,也能更好的理解 B 端产品的特性。

一、先搞懂:B 端 vs C 端 核心差异

image.png
B 端产品面向企业 / 组织,强调效率、流程、合规;C 端面向个人用户,强调体验、流量、转化。两者做竞品分析的思路完全不同。
 
表格
 
 
 
对比维度 B 端产品 C 端产品
用户 企业客户、组织角色(管理者 / 员工) 海量个人用户
场景 办公场景、工作流程、时间固定 生活场景、碎片化、强私人属性
设计 重流程、效率、稳定性 重体验、细节、拉新留存
竞品 公开度低、同质化低、难体验 公开易找、同质化高、易体验
盈利 定制化报价、按年 / 模块收费 明码标价、会员 / 广告 / 电商
 
B 端竞品分析两大难点
 
  1. 竞品难找、信息不透明
  2. 产品难试用、核心功能不开放
 

 

二、第一步:明确分析目的 + 搭建分析框架

image.png

做竞品分析前,先定目标,避免盲目对比。
 

1. 分析目的(二选一为主)

 
  • 战略层:对比市场定位、定价、客户群、产品矩阵、服务模式
  • 功能层:找产品优缺点、看流程合理性、辅助迭代规划
 

2. 必收集的背景信息

image.png

  • 公司背景:成立时间、规模、行业案例
  • 技术背景:核心技术、迭代节奏、生态合作
  • 客户与场景:目标行业、使用角色、核心痛点
 

 

三、第二步:B 端竞品怎么找、怎么筛?

 

1. 四类必选竞品

image.png

  1. 初代产品:看行业起源,理解原始需求
  2. 直接竞品:核心对标,全面拆解
  3. 间接竞品:局部功能可借鉴的产品
  4. 头部竞品:行业标杆,看成熟方案
 

2. 小众领域:先发散→再收敛

 
  • 发散:提炼核心关键词(如体验管理→CEM、体验监测、客户洞察、数据采集)
  • 收敛:用官网信息筛选,剔除定位不符的 “伪竞品”
 

3. 信息渠道

 
  • 行业报告、行业峰会 / 论坛
  • 搜索引擎、垂直媒体
  • 厂商官网、客户案例、销售资料
 

 

四、第三步:B 端产品难体验?这 4 种方法最实用

 
B 端多为半公开 / 非公开系统,不能直接注册试用,用以下方式突破:
 

1. 半公开产品(可对外售卖)

image.png

  • 看官网:快速了解定位、功能、客户、案例
  • 申请试用 / 付费:最真实体验流程与交互
  • 角色扮演咨询:假装客户问销售,获取报价、交付、实施细节
 

2. 非公开产品(内部系统 / 定制系统)

image.png

  • 人脉借账号:亲自操作体验
  • 操作录屏 / 影子计划:录屏回放完整流程
  • 用户访谈:访谈使用者 / 客服,了解真实痛点
  • 流程记录:梳理操作路径,还原体验地图
 

 

五、第四步:分析总结 + 输出可落地结论

image.png

  1. 按框架对齐信息:功能、流程、体验、定价、客户、服务逐项对比
  2. 提炼优劣势:哪些可直接借鉴、哪些要避开
  3. 结合自身落地:不照搬竞品,匹配公司资源、产品定位、团队能力
  4. 长期跟踪:B 端迭代慢,需持续关注竞品更新

image.png


 

六、极简工作流程(直接照做)

定目标 → 2. 搭框架 → 3. 找竞品 → 4. 巧体验 → 5. 对比分析 → 6. 输出结论与迭代建议

转载:优设

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

 

image.png

 

【设计法则】如何精进你的设计知识体系之—古腾堡原则!

清阳 设计思维

“在设计的道路上,若暂时看不清远方,不妨先俯身夯实脚下。兰亭妙微坚信,真正的专业并非灵光一闪的偶然,而是源于严谨知识体系的必然。我们主张让每一个像素的落点都有理可依,让每一次交互的流转都有据可引。只有用逻辑筑起设计的基石,才能让作品在纷繁的视觉中站得稳、立得住,让人不仅看见美,更能看见背后的价值。”

一、什么是古腾堡原则

古腾堡原则是由14世纪西方活字印刷术发明人约翰·古腾堡提出,早在20世纪50年代在设计报纸的过程中,提出了一项原则,认为人的阅读方式应该是遵循某种习惯进行的,像读书一样,由左到右,从上到下。

经过研究,他最终得出了被后人熟知的「古腾堡原则」,古腾堡你可能觉得既难懂还陌生,它还有另外一个名字:对角线平衡法则。

这个原则的支撑点为「阅读重心」,由人们一直以来的阅读习惯形成。将页面的设计与阅读的重心相协调,能帮助读者梳理阅读的逻辑。据研究发现,这么做能提高读者阅读的节奏和理解能力。

古腾堡原则指人的阅读方式遵循从左到右的眼动规律,且画面显示的东西都分成四个象限:

1、第一视觉区(Primary Optical Area):处于左上方,读者首先注意到的位置。

无论用户在搜索内容、主动阅读或者快速浏览,这都是用户阅读的第一落点区域。因此在这个区域我们应放置一级内容或者核心功能。

2、最终视觉区(Final Optical Area):处于右下方,视觉流程的终点。

这个区域是用户浏览行为的最终落点区域,当用户浏览到这个部分时需要采取措施,我们可以在这里插入按钮或者行动点。这也就能解释为什么按钮都会在右下角出现。当用户的浏览行为结束后,可以进行操作反馈。

3、强休息区(Strong Follow Area):处于右上方,较少被注意到。

在这个阶段,我们不应该去设置一个重要的行动点,一方面用户容易忽视,另一方面,当用户浏览完中心区域的内容后,再返回到强休息区操作,视线会有个折回过程,用户体验并不太理想。

4、弱休息区(Weak Follow Area):处于左下方,最少被注意到。

用户对这块的注意程度最弱,因此也用来放置最弱的信息提示。

二、古腾堡原则在设计中的应用

遵循古腾堡法则,界面中的左上和右下是用户视觉最为重点关注的位置,设计师应该把界面的关键元素放在主视区,最终视觉区可以放按钮,休息区可以用来放一些相对次要的内容,如辅助图形、文字信息。

比如我们常用的页面弹窗、各种文件和合同文件等等就是采用这种原则进行设计的。

1、古腾堡原则在web端界面布局设计

我们可以根据一般的用户视觉习惯,来放信息权重不同的内容。

第一视觉区是用户浏览网页的起始点,最终视觉区是结束离开网页的终点。整体是根据人们从上到下、从左至右有规律的阅读习惯设计的。

我们可以看到人人都是产品经理网站信息结构的布局

1、根据起点第一视觉区的特性把LOGO和导航放在左上角,推荐的文章也以图片的形式放在这里进行曝光;

2、弱休息区则放一些最新推荐的文章,吸引用户不断往下翻;

3、高闲置区则放文章内容之外的惊喜推送内容;

4、最终视觉区则是提供给用户相关推荐课程或者想要加入的社区入口,也是常见的放置广告的地方。

2、古腾堡原则在移动端页面布局设计

古腾堡图表应用最典型的例子就是商品详情页,在界面的顶部展示商品图片、名称、价格、快递和优惠等用户主要关心的信息;右上和左下通常是分享、客服和收藏等次要信息;右下角则放置最终促成用户交易的购买按钮。

3. 图文类信息

结合古腾堡的视线强弱分析,我们可以得知左侧的首要视觉点一定是强视觉区,但是有时候简单的图片+文字的排列也会有很多设计思考。

比如:第一个图今日头条的布局,光看它的配图我们根本猜不出来整体条目所表达的内容,所以头条的图片元素传达信息的效率远不如文字,所以第一视觉区会留给文字信息;

而第二图中美团列表也图片所传达的信息效率更直观,会一眼告诉用户我这家是西餐还是中餐,是早点还是正餐,所以在美团的条目中图片会被放在第一视觉区。

这两种布局的目的都是让用户可以快速浏览,不让用户在接收信息时受阻造成体验打断。

此处还可以延伸一下,如上图第三个图,头条的视频条目也是先文字后视频,为什么呢?

按理说视频的传达信息效率要远大于配图,猜想一下,头条的设计是想将视频作为终端休息区进行视觉强化,第一,可以强化信息种类的分类让用户更好辨识,第二,让视频条目传达信息效率更快且满足整体使用APP时一致性的用户心智,让用户能快速上手并且顺畅体验浏览。

三、古腾堡原则在按钮设计中的应用

我们还可以依据古腾堡原则来解读关于按钮位置背后所呈现的设计思路。

1、标题和操作按钮

我们都知道引导用户操作的页面中,一般页面按钮都在界面底部是因为离手近,方便操作,但不仅仅如此还因为浏览是用户的第一行为,他们的视线会根据页面元素进行移动,最终停留在底部结尾的地方。

根据古腾堡原则,将标题和内容放在顶部即第一视觉区,引导用户浏览所有内容后注意到底部的按钮作为终端休息区,这样的摆放即符合用户由上到下的阅读习惯又达到了产品预期的目标。

2、底部垂直双按钮

按钮的水平布局和垂直布局:

垂直布局下,用户浏览时的眼动路径单纯向下,这种由上自下的浏览效率是最高的。

水平布局时,用户由左至右的浏览效率要明显低于垂直布局,但也同时避免了垂直布局下过快的决策造成风险。

这和表单布局方向类似,那些想要让用户快速浏览并完成的表单往往采用了垂直布局,而需要用户仔细阅读、认真填写的表单往往使用了水平布局。

如果产品希望用户对每个按钮都有足够的关注度,垂直摆放是最佳选择,且【重要按钮应该放在页面最底部】,虽然垂直双按钮在样式上做了区分,但用户同样会停留一段时间将按钮的内容进行对比思考。

那么,按照古腾堡原则,重要的按钮应该放在页面最底部,但是现实我们看到的垂直摆放按钮的主次反而是相反的,主要的CTA 按钮往往被放置在了上方?

观察上图,有没有发现浅色按钮很容易被忽略掉,这样就违背了产品要保证每一个按钮都要有足够关注度的目的,所以我们要违背古腾堡原则来满足业务需求,正如我们所看到的微信授权页面一样。

为了保证「允许」与「拒绝」这两个独立的按钮能够被用户足够的重视,并且其中的任意一个按钮不会被轻易的忽略掉,这里将「允许」按钮颜色加重设定为主按钮,并且放在「拒绝」按钮之上,让眼睛原本垂直向下的运动轨迹产生回流的变化。

“拒绝”按钮能让用户注意到,这样便起到了防错性,缺点是会对用户造成流程上较强的打断性,适用于需要用户思虑、审核信息的场景。

所以,这也提示我在设计中要思考:设计原则虽是设计的基础,并非一成不变,要合理权衡设计原则与产品目标之间的关系。

3、水平按钮主次

水平摆放的按钮,最典型的就是电商类型的详情页,【加入购物车】和【立即购买】按钮。

结合古腾堡原则的视觉重点说明,右下角视为视觉终端区域,即视觉最终停留的位置,所以他们将与转化率相关的【立即购买】按钮放在了界面的右下角,让用户更容易关注到。

再比如:比较常见的「确认」和「取消」弹窗样式,通常是在需要让用户确认某种操作行为时出现,有可能是提交表单、确定信息、页面操作引导等等,目的是让用户最快地看到主要操作内容,为用户提高操作效率。

这些按钮的差异不仅仅是位置,还包含按钮的样式、颜色、尺寸等等维度都存在着明显差异。比如上图的,页面引导按钮,支付宝的转入转出按钮位置,都是一样的逻辑,也是我们在设计中的一些设计支持业务转化的一种方式。

为什么要这样设定水平按钮主次关系?

平常我们所看到的弹窗,推荐按钮都是在右侧,那么将推荐按钮放在左侧会怎么样?如下图所示:

当我们在设计表单中的组合按钮时,比如:取消与确认、提现与充值。根据古腾堡法则,用户使用界面时从第一视觉落点区是主视觉区(Primary Optical Area),最终停留在结尾的终点区(Terminal Area)。

不难看出推荐按钮放在右侧后,眼睛的运动轨迹会在水平方向轴上来回的往复运动,无形中增加了用户选择时长。

水平多按钮同样存在着反面应用

当业务需求需要用户产生视觉回流,或者想要让用户习惯性的点击右下角终点位置,比如常见的卸载软件提示弹窗。

相比横排按钮,用户点击主操作按钮时会更加顺畅,有利于业务的转化,对于用户体验流程的打断也会比竖向按钮相对弱些,适用于能帮助用户快速完成流程的场景,具体使用哪种布局要权衡体验、用户与业务目标之间的统筹关系。

4、右上角按钮位置

根据古腾堡原则,右上角区域属于强休息区,用户对这块的注意程度最低。

既然如此,为什么页面的“发布”、“编辑”等按钮都在右上角呢?

顶部按钮的设计,关键还在于可编辑内容区域,而不是按钮本身,顶部按钮更适用于「编辑页面」,顶部按钮尺寸较小,它所占空间有限,因此在操作上相对来说不便于点击,需要用户谨慎操作。

而底部按钮的核心在于按钮本身,而不是内容。底部按钮更适合全局最终的确定,提交等操作按钮。

四、应用古腾堡原则需要注意点

1、虽然古腾堡图所揭示的阅读规律是普遍适用的,但是只在信息均匀分布的页面证明古腾堡原则的阅读规律。

若是为了突破常规或达到一种强烈的冲击,古登堡图所揭示的视觉规律经常被设计师所颠覆。常用的颠覆方法为采用特别醒目的形象,或者大小颜色更为鲜明抢眼的元素置于闲置区,从而改变玩家的阅读顺序。

上图banner中,右侧的3D内容第一吸引用户眼球,而后才会看到左边的文字,视觉流程如红色箭头,这就是突破古腾堡常规设计原则的常见设计。

2、语言本身的阅读顺序可能也会产生一定的影响,例如阿拉伯语从右至左的文字顺序可能并不符合古腾堡原则的阅读规律。

3、用户已熟悉,并养成独特阅读习惯的页面也不一定遵循此规律,比如用户自动跳过轮播广告的【轮播图盲视区】现象。

五、总结

古腾堡图贯穿于界面设计的每个角落,只要谨记阅读引力的顺序:从上到下,从左到右,综合阅读流来排布视觉层级,即能做出合理的设计。

但设计师也不能局限于古腾堡图的规律中,要善用规律并结合其他设计知识做出更加完美的设计。

应用建议:

  • 原则是设计的基础,并非一成不变,需要结合设计原则与产品目标之间的关系进行合理运用;
  • 不需要死遵循原则,比如焦点模式下用户将首先查看页面上最主要的元素(视觉重量最大的元素或区域)。顺序将取决于这些焦点的相对权重以及指示下一步要看的任何视觉提示。
  • 想要让用户进行某种操作时,正常情况下主要按钮放在右侧,操作流程畅通,提高效率,需要用户确认思考的场景下,主要按钮可放在左侧,达到反复确认的目的。
  • 创建层次结构和流程会颠覆视觉动线的模型。

转载:人人都是产品经理

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

 

image.png

产品出海设计有哪些细节需要注意?来看滴滴的国际化设计细节!

清阳 设计思维

设计同学都知道,大多数 “飞机稿” 都会参考一些海外 App 的设计,这类设计往往凭借简洁的视觉呈现与国际化的排版风格,让页面看起来更具高级感。这种 “高级感” 的背后,实则是海外产品设计体系与国内市场需求差异的直观体现。
 
俗话说:“一方水土养一方人”,这一点在 APP 设计中展现得淋漓尽致。不同地区的用户习惯、文化背景与市场环境,直接塑造了产品的设计逻辑。本次调研聚焦 Uber 与滴滴(国际版 / 国内版),从视觉设计、页面结构、功能架构等维度,兰亭妙微ui设计公司结合海外产品设计的通用规律,深入分析国际 APP 与国内 APP 的核心差异,为出海产品设计提供参考。
 

1. 排版:留白艺术与信息密度的平衡

打开 Uber,页面结构呈现出极强的“克制感”——利用大面积留白引导用户视线聚焦核心功能(如叫车入口、目的地输入框),无多余信息干扰,页面整洁度与操作流畅性俱佳。
滴滴国际版同样遵循这一逻辑,功能分区明确,留白充足,用户无需在复杂布局中费力寻找关键入口。

image.png


相比之下,滴滴国内版的内容排版信息密度明显更高:在有限的屏幕空间内,不仅包含叫车功能,还叠加了活动提示、附加服务入口等内容,排版相对紧凑。

image.png

image.png

这种差异背后,是两种设计理念的碰撞:

  • 国际 App:遵循北美、北欧等地区主流的“极简主义”设计原则,通过留白分割区域,弱化次要元素,让核心功能成为视觉焦点,降低用户决策成本。

  • 国内 App:受“一站式服务”需求驱动,需在单页面内承载更多功能与信息,因此通过层级分明的排版(如卡片分区、字体权重区分)提升信息承载量,满足用户“一次打开、多点获取”的使用习惯。


2. 色彩:从“功能导向”到“氛围营造”的差异

色彩是用户对产品的第一感知。国际与国内 App 的色彩运用逻辑,恰好呼应了不同市场的视觉偏好:

 

  • Uber 采用“黑白为主、蓝色点缀”的极简配色——白色背景保证页面清爽,黑色文字确保信息清晰,仅在功能按钮(如“确认叫车”)和关键信息(如预估费用)处用蓝色强调。

  • 滴滴国际版 色彩使用略多于 Uber,但仍以“功能区分”为核心——地图起终点用对比色标识、特殊车型用专属颜色标注,避免多余装饰色造成视觉疲劳。

  • 滴滴国内版 则采用“高饱和度、多色彩分区”策略——橙色代表主叫车业务、绿色代表拼车、蓝色代表巴士服务,同时用不同颜色区分路况(如红色拥堵、绿色畅通),通过强烈的色彩对比吸引用户注意力,贴合国内用户对“热闹感”“明确区分”的视觉偏好。

由此可见,国际 App 在色彩运用上大多偏好简洁、淡雅的色调,有助于降低用户的视觉疲劳,让用户专注于内容本身;而国内 App 则常用丰富鲜艳的色彩组合来区分功能模块,通过强烈的色彩对比营造活力满满的视觉氛围。

为更清晰对比差异,我对 Uber 和滴滴国内版的首页进行了区域划分:

image.png

整体来看,两款软件的首页布局大致可分为五个区域:功能区域、下单区域、更多功能、活动推广、底部 Tab。二者功能分类框架相似,但每个区域的“功能优先级”与“信息承载度”差异显著:

image.png

 

1. 国际 App:核心功能优先,弱化干扰元素
Uber 功能模块与信息层级区分清晰,几乎没有营销广告信息干扰,减少了用户无意义的操作。页面功能聚焦,为用户提供简洁高效的叫车服务,注重专业性,降低页面思考时间。在成熟的海外市场,用户对 App 的使用目的明确(如 Uber = 叫车),因此产品无需通过“附加功能”吸引用户,而是通过优化核心流程提升体验。

2. 国内 App:全能聚合,追求“一站式服务”
滴滴国内版则走“全能聚合”路线,追求一站式服务。除了主要的叫车功能,页面为更多功能留出了近一半空间,整合了搬家、借钱、快送等生活服务,一个 App 就能满足多种需求。在国内庞大的互联网市场,单一功能难以留住用户,因此“全能化”成为主流策略。

image.png


国内与国际 App 设计的差异,并非单纯的“审美不同”,而是由文化语境、价值观念、用户习惯等深层因素共同决定的:

  1. 语境文化:低语境 vs. 高语境的表达差异
    海外(以美国为代表)属于“低语境文化”,人们更习惯“信息直给”——因此 App 设计需减少视觉干扰,用留白和简洁排版让信息清晰易读。
    国内属于“高语境文化”,用户对“信息密度高、多元素叠加”的设计容忍度更高——即使页面包含多个功能入口,用户也能通过上下文(如色彩分区、位置习惯)快速定位需求。

    image.png

  2. 价值观念:个人主义 vs. 集体主义的行为导向
    海外强调个人主义,用户更注重隐私与自主选择权,App 设计也更倾向于简洁、专注,减少不必要的打扰。
    国内强调集体主义,用户更倾向于“从众与热闹氛围”,活动推广、多服务聚合正是为了满足用户“融入集体、获取实惠”的心理需求。

    image.png

  3. 信息获取习惯:专一性 vs. 综合性的使用逻辑
    海外用户习惯“一个 App 对应一个需求”,对功能专一性要求高——因此国际 App 无需整合多余功能,只需打磨核心体验。
    国内用户习惯“一个 App 解决多个问题”(如滴滴 = 叫车 + 搬家 + 快送),对“一站式服务”需求强烈——这也促使国内 App 通过功能聚合来提升用户留存率。

    image.png

  4. 审美习惯:功能性 vs. 意境感的视觉偏好
    海外更注重“功能性审美”——Uber 的黑白配色、简洁排版,本质是“为功能服务的审美”,让用户专注于操作而非视觉装饰。
    国内更注重“意境与氛围营造”(如滴滴国内版用鲜艳色彩营造“活力感”),同时受“从众心理”影响,使“高饱和色 + 多功能”成为主流设计范式。

    image.png


从 Uber 与滴滴的对比可见,国际 App 的“极简风”与国内 App 的“聚合风”并无绝对的优劣之分。前者是成熟市场、低语境文化与个人主义价值的产物,后者则适配国内竞争环境、高语境文化与多元用户需求。

对设计从业者而言,海外 App 的参考价值不在于单纯复制“高级感”的形式,而在于理解其背后“用户需求优先”的设计逻辑。唯有结合目标市场的文化特征、用户习惯与商业需求,才能做出真正适配用户的好设计。

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

 

image.png

深度解析|大厂都在用的「选项顺序效应」,如何影响用户决策?

清阳 设计思维

数字化产品竞争中,「选项顺序效应」被大厂广泛应用,借首因、近因效应调整选项顺序,左右用户决策。深耕UI/UE设计的兰亭妙微(蓝蓝设计)在实践中发现,它是衔接产品目标与用户体验的关键。本文结合大厂案例与兰亭妙微实践,解析其对用户决策的影响,提供落地参考。

什么是选项顺序效应?

选项顺序效应(Order Effect) 指用户面对一系列选项时,选项的呈现顺序会显著影响其决策结果。这种现象主要由两种认知偏差驱动:

  • 首因效应(Primacy Effect):最早出现的选项因获得优先曝光,更容易在用户记忆中留下印象。

  • 近因效应(Recency Effect):最后出现的选项更接近决策时刻,在短时记忆中更为突出。

在认知心理学层面,这与人类有限的注意力资源、工作记忆容量以及信息加工方式密切相关。用户并不会严格比较所有选项,而是依赖顺序线索进行“满意化决策”(Satisficing)。

在UX/交互设计中,该效应常见于:

  • 表单与调查(选项顺序影响回答倾向)

  • 电商与订阅套餐(不同顺序改变选择分布)

  • 导航与推荐系统(前置或置底选项更易被点击)

核心风险:用户的选择可能更多受顺序驱动,而非真实偏好。若在设计或研究中忽视这一点,可能导致数据偏差与不公的用户体验。

image.png

为什么顺序效应如此强大?

1. 注意力分配

用户的视觉焦点通常遵循阅读习惯(从上到下、从左到右),前置位置天然获得更多曝光。

2. 记忆机制

  • 首因效应:最早出现的选项因更多复述与加工,更易转化为偏好。

  • 近因效应:最后出现的选项因处于决策“临界点”,直接影响最终选择。

3. 认知负荷与满意化决策

当选项过多时,用户难以全面比较,会采用“选择第一个合理选项”的启发式策略。

4. UX场景中的放大因素

  • 导航栏或底部菜单:靠前或靠下的功能更易被点击

  • 订阅套餐:首位选项被视为“默认选项”,末位高价套餐因“对比效应”更突出

  • 问卷调研:固定选项顺序可能导致结果偏差

核心洞察:用户的选择并非完全理性,界面排列与信息呈现方式深刻影响着决策路径。

设计场景中的顺序效应应用

1. 导航与功能入口排序

场景:底部导航栏或首页主菜单,常将“消息”“首页”等高頻功能置于最左侧或最上方
逻辑:利用首因效应,确保用户优先接触核心任务,降低操作成本

2. 订阅套餐与付费选项

场景:会员订阅页常见“基础版—推荐版—高阶版”布局,并对中间档进行视觉强化
逻辑:结合顺序效应与折中效应,引导用户选择中间档,提升转化

3. 表单与问卷选项设计

场景:兴趣选择、调研问卷
逻辑:为保证数据客观性,应采用随机化选项顺序,避免结果偏差

4. 产品推荐与信息流排序

场景:推荐列表或信息流
逻辑:前列选项点击率与转化率显著高于后列,基于“认知吝啬”原则,用户倾向于选择思考成本更低的前列结果

5. 专业启示

  • 积极作用:优化排序帮助用户快速定位高频功能、常用选项,提升效率

  • 潜在风险:问卷结果可能偏离真实意图;过度迎合商业目标可能侵蚀用户信任

核心思考:顺序效应既是交互优化的工具,也可能成为操控用户选择的手段。设计师需在效率与公平性间寻求平衡。

案例分析:顺序效应在产品中的实战

案例一:美团外卖商家列表

场景:美团外卖频道中,顶部Tab固定展示「附近商家」与「特价外卖」两个入口。滑动时右侧动态面板偶发提示引导切换至「特价外卖」,底部导航栏左侧按钮由“外卖”动态切换为“刷新”。

设计说明

  • 「附近商家」置于首位,符合用户直觉预期

  • 「特价外卖」虽在次序上处于弱势,但通过动态引导与样式差异获得额外感知加权

  • 底部导航栏的再定义,使用户在滚动后自然转向“实时更新”

启示:顺序效应中,若需突显非首位选项,可借助动态触发、UI再编码、差异化样式打破固有注意力分布。但过度引导可能带来注意力稀释与操作负担。

image.png

案例二:京东外卖首页频道与筛选逻辑

场景

  1. 顶部Tab依次为:精选推荐、品质正餐、咖啡、奶茶果汁、快餐便当……遵循由泛化到具体、主流到小众的排序

  2. 「精选推荐」下设有“外卖百亿补贴”专栏及个性化推荐餐馆列表

  3. 餐馆列表支持多维度筛选(优惠活动、商家特色、品质优选、配送速度)

设计说明

  • 将“精选推荐”置于首位,确保用户第一眼落在平台最想推广的内容

  • 高频需求(品质正餐、咖啡奶茶)置于前列,符合使用概率分布

  • 多维筛选满足理性比较需求,降低选择焦虑

启示:顺序效应不仅体现在Tab排列,更贯穿专栏配置与筛选组合。通过“顺序+补贴+筛选”三层递进,逐步引导用户决策。但过度强调补贴可能导致用户忽视多样化商家,筛选维度过多也可能增加决策成本。

image.png

案例三:Instagram底部导航栏

场景:Tab顺序为:首页、搜索与探索、发布、Reels、个人主页

设计说明

  • 首页首位:确保用户进入应用后立即接触社交动态,增强亲近感

  • 发布按钮居中:强化“内容生产”的战略地位

  • Reels第四位:紧随发布入口,借助邻近性推动短视频增长

  • 个人主页末位:形成“消费→发现→生产→沉浸→展示”的闭环路径

启示:Tab顺序基于用户心理路径引导,逐步塑造行为习惯。但战略倾斜可能稀释社交关系核心,使平台从社交转向纯内容消费。

image.png

顺序效应的边界:何时会失效?image.png

  1. 信息密度过高:选项过多时,首尾优势被削弱,用户更多依赖搜索、筛选或排序功能

  2. 用户目标明确:用户带着特定目的时,顺序效应几乎失效

  3. 习惯与算法干扰

    • 高频使用形成固定操作路径

    • 个性化算法动态排序可能降低用户对首尾推荐的信任

    • 中间选项若使用强烈视觉强调,可能覆盖顺序优势

设计的责任:平衡引导与公平

伦理考量

  • 知情权与透明度:确保用户理解推荐逻辑,避免误导或操控感

  • 避免过度操控:首尾位置与稀缺、优惠叠加可能引发焦虑或后悔

  • 平等呈现:在信息密集型平台,避免无意中造成曝光偏差

  • 长期信任:短期优化若损害信任,将影响品牌长期价值

反向策略:用顺序激发自主选择

image.png

  • 刻意打破首尾优势,将重要选项置于中间或随机排序,迫使用户主动浏览

  • 内容平台可通过交替首尾内容,提升冷门内容曝光率

  • 教育平台:调整习题顺序,避免学生只关注首尾任务

  • 电商平台:将冷门商品穿插中间位置,促成更多探索

反向使用启示:顺序效应不仅能引导用户,也可通过反向策略激发主动性与探索欲。设计师应让心理机制为用户价值服务,而非单纯追求短期转化。

 

设计总结

选项顺序效应揭示了:人们面对多个选项时,先看到或最后看到的选项更容易影响决策。这对设计师而言既是机会,也是责任。

核心洞察

  • 首位和末位天然吸引注意,可用于突出关键动作或推荐内容

  • 当用户目标明确时,顺序影响减弱,需结合视觉层级强化信息

  • 有意识地调整或打乱顺序,可以让用户探索更多中间选项

最终思考:设计不仅是优化行为,更是尊重用户决策的自由。巧妙的顺序安排,既能提升效率,也能保持体验的公平与透明。

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

 

image.png

日历

链接

个人资料

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

存档