首页

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

清阳 设计思维

数字化产品竞争中,「选项顺序效应」被大厂广泛应用,借首因、近因效应调整选项顺序,左右用户决策。深耕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

5 种用户浏览模式全解:用科学眼动逻辑优化页面布局

清阳 设计思维

众所周知,我们大部分用户群体的阅读习惯是从左到右、从上至下,这与西方文化基本一致。下文将从浏览模式、浏览路径、页面布局三个维度展开分析,结合研究成果与实践经验,优化页面布局,提升用户阅读效率与体验。
 
早在 2006 年,尼尔森团队发表《眼睛轨迹的研究》报告,提出了广为人知的F 型浏览模式。除该模式外,经资料梳理,用户浏览网页时还存在多种典型模式,以下为详细总结(兰亭妙微 ui 设计公司)。
 

一、F 型浏览模式:长文本页面的主流轨迹

image.png

F 型是用户浏览长篇内容的核心模式,眼球以扫描为主,而非深度阅读,眼动热图呈现清晰的字母 F 形态。
 
  1. 顶部水平扫视:先聚焦内容区上半部分,形成 F 的顶栏;
  2. 次段短距扫视:向下滑动后,二次水平扫描范围更短,构成 F 的下横线;
  3. 左侧垂直扫描:最后沿页面左侧快速浏览,形成 F 的竖杆。
 
该模式适配 PC 端、手机端所有文本型页面,手机端因屏幕更小,F 型轨迹更紧凑。
 

F 型布局设计要点

 
  1. 头两段内容是核心,直接决定用户是否继续停留;
  2. 关键词前置,放在标题、副标题和段落开头;
  3. 左侧优先放置关键信息,契合用户垂直扫描习惯。
 

二、Z 型浏览模式:轻信息页面的最优选择

image.png

Z 型轨迹遵循从左到右、从上到下的古腾堡原则,眼动路径形成字母 Z,适合无大段文本的展示型页面。
 
用户视线会自然落在 Z 的起点(左上)和终点(右下),这两个位置是放置核心信息、行动按钮的黄金区域。
 

Z 型布局设计要点

 
  1. 重要信息放在左上、右下视觉落点;
  2. 简化中间区域内容,避免干扰视线流动;
  3. 适合落地页、首页、海报型页面设计。
 

三、专注浏览模式:深度阅读的特殊场景

image.png

专注模式是逐字精读状态,用户会投入大量时间阅读全文,不会遗漏信息。
 
仅在任务驱动、强兴趣导向时出现,比如学习资料、工作文档、深度干货文章等场景。
 

设计适配建议

 
  1. 减少干扰元素,保持排版简洁舒适;
  2. 保证文字清晰度、行间距与可读性;
  3. 无需刻意引导视线,聚焦内容本身即可。
 

四、斑点浏览模式:关键词驱动的碎片化浏览

image.png

用户只关注加粗、变色、高亮的关键词,或自身感兴趣的信息,眼动热图呈现零散斑点状。
 
这是用户快速筛选信息的常见方式,核心是只看重点、跳过无关内容
 

设计适配建议

 
  1. 核心信息用加粗、对比色突出;
  2. 控制高亮元素数量,避免视觉混乱;
  3. 关键数据、利益点单独标注。
 

五、分层蛋糕浏览模式:标题导向的高效扫描

image.png

当页面有清晰的标题、副标题、分级加粗时,用户会只看突出层级,快速略过正文,眼动轨迹像分层蛋糕的纹路。
 
这是仅次于专注模式的高效信息获取方式,也是用户最常用的快速阅读逻辑。
 

设计适配建议

 
  1. 建立清晰层级:主标题→副标题→重点句→正文;
  2. 用标题提炼核心,让用户 3 秒读懂内容;
  3. 重点内容加粗,弱化冗余文字。
 

 

关键排版结论:图片与布局的适配逻辑

 
  1. 信息型图片:对齐排版、Z 型排版差异极小,都能吸引用户关注;

    image.png

  2. 装饰型图片:优先用左对齐排版,用户可自动忽略,不干扰文字阅读;Z 型排版会增加图片曝光,但易分散视线;

    image.png

  3. 首图至关重要:决定用户对后续图片的价值判断,避免顶部放无意义装饰图;
  4. 用户浏览习惯:看完页面底部会回滑查看,建议添加「回到顶部」功能。
image.png

 

最终总结

  1. 长文本用F 型,展示页用Z 型,多种模式可嵌套使用;
  2. 信息图优于装饰图,无意义图片会被用户自动忽略;
  3. 核心信息放视觉热点区,层级清晰、关键词前置是通用原则;
  4. 适配用户回滑习惯,优化页面上下交互体验。

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

 

image.png

 

为什么很多大厂主按钮不用主题色?原来还有这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

从方法到工具,兰亭妙微设计师带你高效搞定图表设计

清阳 设计资源

数据可视化,是用视觉语言与数据对话。一份好的图表设计,不仅要美观,更要精准传递信息、高效辅助决策。兰亭妙微UI设计公司结合实战经验,从图表选型、设计原则、视觉规范、实用工具四大维度,帮你从零到一做好专业图表设计。
 

 

一、数据可视化的核心价值

image.png

数据本身是抽象的,可视化是让数据产生价值的关键。它能把复杂数字转化为直观图形,帮我们快速识别趋势、差异、分布、占比、流转等核心信息,避免因表达不当导致信息失真。

image.png

日常设计中,很多人过度追求视觉效果,却忽略数据与图表的匹配度,最终让好看的图表失去实用意义。好的可视化,永远是数据为先,设计为辅
 

 

二、图表设计核心方法:先选对,再做好

image.png

图表设计以目标为导向,先明确要传递的信息,再匹配图表类型,三步即可完成正确选型。
 

1. 图表选型三步法

image.png

(1)读懂数据:明确核心关系

 
先锁定页面最重要的数据,确定要表达的核心关系:
 
  • 比较:不同类别数据差异
  • 趋势:随时间 / 序列的变化
  • 分布:多变量关联与规律
  • 构成:整体与部分的占比
  • 流转:流程阶段的数值变化
 

(2)分析用户:匹配阅读需求

image.png

不同角色关注重点不同:
 
  • 管理者:看整体趋势、核心结果
  • 业务岗:看细分对比、个体变化
  • 执行层:看明细数据、流程节点
 

(3)按数据关系选图表

image.png

  • 比较类:柱形图、条形图、折线图
     
    柱 / 条形图:快速对比类别差异,是最通用的选择;
    image.png
    折线图:展示连续数据(如时间)的变化趋势。
  • 分布类:散点图、气泡图、雷达图

    image.png

    散点图:看变量相关性;气泡图:新增维度用大小表达;雷达图:多指标综合对比。
  • 构成类:饼图、环形图、树状图

    image.png

    饼 / 环形图:展示单一维度占比;树状图:呈现层级化结构占比。
  • 流转类:漏斗图、瀑布图、桑基图

    image.png

    漏斗图:转化流程分析;瀑布图:数值增减变化;桑基图:数据流向与分配。
 

2. 信息图形(Infographic)

image.png

偏向艺术化的可视化形式,适合科普、新闻、报告等场景,侧重易懂、美观、定制化,需要设计师具备信息提炼与视觉美化能力。
 

 

三、图表设计四大原则

 
遵循原则,避免信息扭曲,提升可读性。
 
  1. 准确性

    image.png

    数据真实无扭曲,优先用大众熟悉的图表(柱、线、饼);颜色不超过 5 种,降低认知负担。
  2. 一致性

    image.png

    颜色、样式、术语全局统一,同一指标固定用同一颜色,保持视觉连贯。
  3. 辅助性

    image.png

    用标题、图例、交互提示降低理解成本;小众图表需加说明,通用图表保持简洁。
  4. 可扩展性

    image.png

    适配多设备尺寸,兼顾宏观(整体)与微观(单点)数据;通过小图预览、大图交互实现层级展示。
 

 

四、图表视觉设计规范

 

1. 基础构成

image.png

  • 标题与说明:清晰点明核心结论,副标题补充数据范围、时间等背景;
  • 坐标轴与网格:横轴常用作时间 / 类别,纵轴为数值;网格线密度适中,小图可省略;
  • 图形元素:柱、线、点等保持简洁,适配真实数据与极限场景。
 

2. 颜色设计

image.png

  • 用法逻辑:色相区分类别,明度 / 饱和度表达数值梯度;
  • 配色方式:邻近色(温和统一)、互补色(强对比突出)、连续渐变(体现数值变化);
  • 品牌适配:沿用品牌色,或从 Logo、素材图提取配色,保持视觉统一。
 

3. 数据墨水比

image.png

核心:用最少的装饰,传递最多的数据信息
 
  • 保留核心数据元素,删除无关装饰;
  • 不过度简化导致信息缺失,在简洁与完整间平衡。
 

 

五、高效图表设计工具

 
无需复杂操作,在线 / 开源工具快速出图:
 
  1. Flourish:在线可视化平台,模板丰富,支持多数据源导入与一键导出;image.png
  2. ECharts:开源免费,配置灵活,兼容多端,适合前端开发与设计师使用;image.png
  3. Tableau Public:拖拽式操作,快速制作交互式仪表盘,支持在线分享;image.png
  4. Informationisbeautiful:创意可视化模板,适合制作高颜值信息图;image.png
  5. D3.js:前端可视化库,支持高度自定义交互图表;image.png
  6. 配色工具:Muzli Colors、Coolors、Brand Colors、Flat UI Colors。

     

    转载:优设

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

经典图标设计标准,零基础也能快速掌握

清阳 图标设计文章及欣赏

谷歌Material Design的图标设计标准正在重新定义界面视觉语言。兰亭妙微UI设计公司深度解析从简洁性、几何形状到风格统一的三大核心原则,详解24dp标准尺寸下的网格系统与布局规范,并揭秘复杂图标的细节处理技巧。无论是圆角控制还是描边粗细,这套方法论让零基础设计师也能快速掌握专业级图标设计。

今天分享的是「图标设计准则」。图标是界面设计里的 “刚需元素”,一个小图标能快速传递很多信息。好的图标需要兼顾简洁、现代、友好。但图标的尺寸很小,设计时既要严格遵守设计规则,又得清晰表达信息,这样才能保证整套图标的风格统一、辨识度高。

今天就来聊聊大厂在用的图标设计原则和设计规范,配合案例进行设计分析~

01 图标设计的3个核心原则

① 形式够简洁

给大家举个例子,就说下面的小船图标,想让图标清晰好认,就得做减法,那么用正面的简约船身造型最合适。

如果图标设计的过于细致,例如图标中添加了船帆、桅杆或者旗帜等细节,太写实的图标不仅会降低识别速度,还会破坏整套图标的视觉统一性。

设计总结:

✅ 简化图标造型,提升清晰度和辨识度

❌ 拒绝过度写实,避开复杂繁琐的设计

② 多用几何形状打底

使用几何图形和统一的基础形状来设计图标,能打造出清晰醒目的视觉感受。哪怕结构简单,也能保持清晰的形态,缩小到小尺寸时也照样容易分辨。

反过来讲,尽量少用那些纤细、松散的不规则形状,它们会破坏线条的连贯性,让整套图标看起来乱糟糟的,没个统一的调性。

设计总结:

✅ 靠几何图形和统一的造型,打造醒目视觉效果

❌ 少用纤细、不规则的形状

③ 整套风格保持一致

这里给大家看一组风格统一的图标示例。对品牌识别和系统适配来说,保持图标集的视觉一致性太重要了。

要是把不同风格的图标混在一起用,用户根本没法把它们当成“一家人”。所以同一套图标里,不管是形状、线条粗细,还是比例、边角处理,都得按同一个标准来。

设计总结:

✅ 单套图标集里视觉风格要保持统一

❌ 千万别混搭不同风格的图标

02 图标尺寸怎么选?

在谷歌的Material Design 3 设计规范中,标准 (基线) 图标尺寸是24dp×24dp,设计时建议按100%的比例来做,这样能保证像素级的精准度。

除了这个标准尺寸,还有20dp、40dp、48dp这几种常用尺寸可以选:

20dp:适合用在桌面端、紧凑布局,或者那些小尺寸的视觉元素

40dp/48dp:针对显示器、大屏幕,还有标题栏这类特殊场景

03 标准图标布局

设计图标时,内容需要放在有效区域内里。有效区域是指页面滚动或适配不同设备时图标不会被遮挡的“安全可视区域”。

如果想让图标的视觉冲击力更强,可以让内容延伸到有效区域和裁剪区域之间的留白处,但不能超出裁剪区域,不然图标很容易被裁剪显示不全。

具体要怎么布局呢?看下面这两点就够了:

① 有效区域:图标内容要放在20dp×20dp的范围内,四周各留2dp的边距

② 边距:给有效区域留出2dp边距,既能让图标和周围元素拉开视觉距离,又能让整体看起来更平衡

接下来通过一个图标案例来简单总结一下:

上图从左到右分别代表了在有效区域、在有效区域和裁剪区域、在裁剪区域之外创建的图标案例。

设计总结:

✅ 图标内容保持在20dp×20dp的有效区域里,记得留2dp边距⚠️ 想加视觉冲击力?内容可以延伸到边距区域

❌ 任何情况下,图标都不能超出裁剪区域

① 网格和关辅助线

一套图标中可能有的是圆形,有的是方形,那怎么才能保证形状不同的图标保持视觉大小的一致性呢?

这种情况大家在设计图标时应该都碰到过,解决方法可能大多是通过眼睛对比查看,把看着小的图标调大一些或者把看着大的图标调小一点。这种方法效率不高,而且设计出来的图标大小不容易保持一致性。

这里提供一个更科学和高效的辅助图标设计方法——使用网格和辅助线,照着这些辅助线来设计图标,能轻松保持比例一致。

例如常用的24dp×24dp图标网格,由正方形、圆形、竖矩形、横矩形这四种基础辅助线构成。它们就像图标的“骨架”,能帮所有图标保持统一的比例和对齐效果,哪怕放大10倍看,结构也照样清晰。

给大家拆解一下这四种辅助线:

方形辅助线:边长18dp,是图标的基础平衡基准。比如图表类图标就可以照着这个方形来画,保证比例稳定。

圆形辅助线:直径20dp,用来设计圆润平衡的图标。像地球图标用这个圆形打底,就能和其他图标和谐搭配。

垂直矩形辅助线:高20dp、宽16dp,适合强调纵向比例的图标。比如文档图标围着这个竖矩形设计,比例会特别清晰。

水平矩形辅助线:高16dp、宽20dp,适合横向比例的图标。像邮件图标用这个横矩形当基础,形状会很均衡。

04 图标结构解析

一个完整的图标,由圆角、起始/结束点、内部形状、外部轮廓等组成。

① 图标圆角

这里重点说下大家容易踩坑的“圆角”的设计:例如下图的银行卡图标,采用外角2dp圆角、内角尖角的设计,这样既柔和又利落。

如果把圆角做得太大,如下图左侧文档图标,图标的辨识度就会下降;如果一个图标中混用不同半径的圆角,如下图右侧的图标,整个图标看着就会很杂乱。

设计总结:

✅ 按规则设置圆角,统一圆角半径

❌ 避免圆角半径过大/半径混用的情况

② 描边粗细

推荐的图标描边粗细是2dp或常规 (400),也可以根据需求灵活调整,例如在MD3设计规范中就提供了100 (细)到700 (粗)的多种选择。

这里有两个小技巧:

设计直角线性图标时,描边的末端尽量做成直角,例如下图左侧的箭头图标,45度切割的直角就很清晰;在下图右侧的添加图标中,内部的加号也采用了2dp的描边粗细,与外轮廓保持一致。

另外要注意一套图标需要保持相同的描边粗细。如果描边x粗细不一致,不仅会模糊图标形状,还会破坏视觉一致性。

设计总结:

✅ 描边粗细保持统一,直角图标末端也用直角

05 复杂图标怎么处理?

如果图标需要一些精细的细节,可以通过一些灵活的调整来提升辨识度,但不能扭曲基础的几何形状或破坏整体比例。

比如回形针图标,为了在24dp的空间里放下多个曲线,可以把 2dp的标准描边粗细微调成1.5dp;再比如拉面图标,下面的碗作为托底采用2dp的粗描边,上面的筷子拉面等元素细节更多,则采用1.5dp的细描边,让细节更清晰。

还有一个小原则:设计复杂图标时,尽量保持正面视角,别做倾斜、旋转的等距或者3D效果——多余的深度感会增加识别难度。

设计总结

✅ 正面视角设计,细节微调不跑偏

❌ 少用倾斜、旋转的等距/3D呈现方式

最后

图标是一种高效的视觉语言,能打破语言壁垒,快速传递信息。但它的优势,必须建立在清晰的结构和统一的规则之上。

设计时基于标准的辅助网格走,保持比例均衡、视觉重量一致,设计出的图标才不会喧宾夺主,反而能提升整个产品的用户体验。

转载:人人都是产品经理

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

 

image.png

B端数据可视化设计,14个章节带你掌握表单设计(下)

清阳 设计思维

表单是 B 端产品核心信息载体,优秀的表单设计能直接提升填写效率、降低错误率、减少业务成本,是 B 端体验与数据流转的关键环节。兰亭妙微ui设计公司在上篇基础上,用 14 个可落地章节,帮你掌握高易用性表单设计。

一、先明确:好表单的 5 个核心价值

 
  1. 提升体验:降低填写困惑,让操作更轻松顺畅
  2. 降低错率:清晰指引 + 实时校验,保障数据准确
  3. 提高效率:简化操作、减少重复输入,节省时间
  4. 提升完成率:降低填写门槛,减少用户中途放弃
  5. 降本增效:减少数据纠错与沟通成本,赋能业务
 

 

二、14 个表单设计核心方法(可直接落地)

 

1. 信息降噪:只留关键,简化内容

image.png

  • 极简处理:必填项占绝大多数时,隐藏选填提示符,减少视觉干扰
  • 折叠非必填:用「展示更多」收起次要字段,只保留核心必填项
  • 选填项保留意义:给愿意补充信息的用户选择权,降低填写压力,灵活收集额外数据
 

2. 标签与指引:清晰易懂,不产生歧义

image.png

  • 标签简短直白,不使用专业黑话
  • 填写规则前置提示,比如格式、长度、范围
  • 复杂字段加小问号提示,hover 显示说明,不占主视觉
 

3. 长表单:分步 / 分页,缓解填写压力

image.png

适合注册、认证、发布等流程型长表单:
 
  • 分步填写:按业务逻辑拆步骤,配清晰步骤导航
  • 分页填写:左侧固定导航,用户可快速跳转模块
  • 小缺陷:用户无法一次性看到全部字段,需做好进度提示
 

4. 动态验证:实时反馈,即时纠错

image.png

  • 输入失焦后立即校验,不等到提交才报错
  • 错误提示就近展示,明确错误原因 + 修改建议
  • 避免提交后批量修改,大幅降低用户挫败感
 

5. 默认值 + 自动填充:减少手动输入

image.png

  • 高频选项设默认值,比如常用城市、状态
  • 复用历史数据,自动填入重复信息
  • 关联字段自动联动,比如地址→邮编、身份证→生日
 

6. 智能辅助:让表单 “会思考”

image.png

  1. 上下文自动填充:手机号→姓名、身份证→生日 / 性别
  2. 条件逻辑显隐:选 “是” 展开对应字段,选 “否” 直接隐藏
  3. OCR 智能识别:身份证、发票、营业执照上传后自动提取信息填入
 

7. 响应式适配:多端一致,不崩不乱

image.png

B 端表单必做适配,避免前端自由适配导致体验差:
 
  • 固定适配:字段宽度固定,兼容客户最低屏幕分辨率
  • 间距适配:左右边距固定,组件自适应宽度(适合弹窗 / 抽屉,不建议长表单)
  • 移动端:单独设计,用系统原生输入组件,不直接套用 PC 端
 

8. 字段简洁:用最少文字讲清含义

image.png

  • 标签短、准、无歧义,不堆砌长文案
  • 合并冗余字段,不拆分语义完整的信息
 

9. 长数字不拆分:一个输入框搞定

image.png

手机号、身份证、银行卡、订单号等禁止拆成多框
 
  • 减少点击切换,支持一键复制粘贴
  • 避免分段输入带来的操作繁琐与误操作
 

10. 防错纠错:从源头减少错误

image.png

  • 格式限制:数字框仅输数字,限制长度(手机号 11 位、身份证 18 位)
  • 专用输入:车牌号用专属键盘,屏蔽 I/O 等易混淆字符
  • 范围置灰:时间选择器禁用无效日期,堵死错误操作路径
 

11. 就地编辑:在哪看就在哪改image.png

 
遵循交互之父阿兰・库珀原则:需要在哪里输出,就在哪里输入
 
  • 列表少量编辑:直接在行内修改,不跳转、不弹窗
  • 保持注意力连贯,提升操作效率
 

12. 三重保存:杜绝数据丢失

 

表单保存是 B 端底线,分三类实现:

image.png

  1. 延迟草稿:间隙 / 定时自动保存,无打扰后台运行
  2. 随机草稿:高频自动保存,保留历史版本,支持回退
  3. 条件草稿:触发式保存,异常关闭可恢复
  4. 提示保存:未保存跳转 / 离开时,弹窗确认,防止误操作
 

13. 所见即所得:实时预览最终效果

image.png

  • 表单编辑区 + 预览区联动,即时看到展示效果
  • CMS、物料配置、富文本等场景必加预览
  • 支持多端(PC / 移动端 / 小程序)效果切换查看
 

14. 重视用户反馈:让业务专家帮你优化

image.png

  • B 端用户是一线业务专家,最懂真实痛点
  • 做用户测试、收集操作反馈,持续迭代
  • 案例:贷款审核从 “逐个审” 优化为 “批量审”,效率大幅提升
 

 

三、总结

 
表单是 B 端数据流转核心枢纽,14 个设计要点围绕简洁、清晰、高效、防错、容错展开,从视觉降噪到智能辅助,从实时校验到多重保存,完整构建以用户为中心的表单体系。掌握这套方法,你的表单设计将从 “能用” 升级为 “好用”,真正为业务提效赋能。

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

 

image.png

长文干货!如何从零开始构建「用户行为分析」?

清阳 用户研究

一、用户行为分析:如何开始搭建

体验或交互设计师知晓用户行为分析有什么用?

答:我们所处的行业下,各类产品变得成熟精细,大家开始拼细节卷服务,市场竞争激烈。对于产品的各种优化改版也就开始变得谨慎,往往需要经过用户研究或是数据分析等工作来验证或决策,不再是由设计师或产品经理凭借过往经验办事或对标竞品照抄了,恰好用户行为分析就是用户洞察中具有代表性的一项;

体验或交互设计师为什么要掌握这些呢?

答:回归到用户体验相关设计,本身就是一项细致活儿,处处需要用户研究或数据洞察来辅助设计工作,了解其相关甚至熟悉搭建分析,从职能发展趋势来看,可能是迟早的事;

所以即使你目前用不上用户行为分析相关,也不要急着关掉文章,先简单了解一下吧,说不定你会有兴趣呢,说不定不久后刚好用上呢?

 

 

二、用户行为分析能干啥

用户行为分析是数据分析的一个重要领域,特别是在数字化服务行业中,主要目的是通过深入研究用户群体的流量动向以及操作行为特征等,来了解用户与产品间的关系、效果、趋势,以帮助我们优化产品设计、提升用户体验并驱动业务决策。

说人话就是:

监测用户在产品上做出了哪些行为、是否符合预期、有什么特征、问题在哪里,然后看看产品上需要做些什么调整或迎合用户的特征偏好来决策啥的。

三、用户行为分析有啥优势

具备一定的客观性与真实性

被动采集的行为数据有时候比用户口述反馈的信息要更真实有效,一方面更加直接,另一方面也少了些用户心理设防(霍桑效应);

image.png

具备一定的代表性与准确性

由于是群体性的大数据,所以更有代表性,并且是即时的数据记录,不容易记混记错,准确性也更好;

image.png

具备可持续性与可追溯性

通过数字化技术实现,可以伴随产品发展持续的采集数据,可以较为方便的调取过往数据进行比对追溯分析;

image.png

具备一定的 AI 不可代替性

用户行为的背后依旧是人文心理等方面的内容分析或业务场景化决策,往往离不开人工的加持介入;

image.png

四、实施构建的流程

以下是对用户行为分析的工作流图解,由于不同企业的诉求有差异,以下工作流仅代表大部分用作交流;

image.png

五、关键节点拆解说明

此次主要聊聊基础的上手运用与注意事项,不涉及过深或难以理解的部分,如果说用户行为分析可以到达高等数学的程度,那么此次就讲讲加减乘除好了,师父领进门,修行靠个人,各位看客请上座!

image.png

1. 目标需求拆解

① 什么时候开始?

首先你的产品得有流量,然后得有一个关乎到用户行为的目标,例如想看看用户流量分布、了解功能使用频率、任务执行的漏斗关系、用户行为偏好、用户数据画像构建等,这个时候就可以考虑开始了,不然就可能南辕北辙费力不讨好。

image.png

② 界定一个范围?

首先构建一套完善的用户行为分析系统并持续的维护与应用并不是一个轻松的事情,所以最好是针对性构建+多迭代,不要上来就想着做全盘搭建,表面的工作或问题往往可能只是浮冰,逐步的深入后问题会越来越多,个人深有体会!

image.png

③ 由上而下,找准路线?

通过业务目标向下拆解,一般上层目标无非是商业转化、用户活跃留存、任务通过率这些,向下拆解则是通过业务目标去锁定核心的业务场景或任务线路,这些核心的页面、场景或是任务线路,就是你前期可以界定的一个范围,后续的重点工作则是将核心功能的入口或路径穷举出来,避免数据对不上或找不到异常源头的情况。

在我的认知里,用户行为分析建设不是一锤子买卖,步伐走小一点,基础搭好一些,以后的迭代建设或维护也会轻松许多;

概括一下就是,不要追求全面,靠拢业务价值,关联上指标或者核心业务场景即可。

之前网上看到有大佬给了一个建设思路,这里搬来大家参考一下;

image.png

2. 带你认识不一样的埋点

数据埋点技术已经很成熟了,甚至有很多第三方的埋点+分析的服务,以及采集用户行为数据的不仅仅只有埋点技术方案,哪怕你做一个录屏技术都可以,只不过从数字化产品视角出发,埋点技术更有性价比,以及符合用户隐私权益,所以这里专门讲一下“埋点”这个老技术,熟悉的大佬们可以跳过埋点这部分。

① 埋点是什么

数字化应用大多有个特征,就是需要用户进行界面交互,有交互就有行为动作发生,而数据埋点就是将用户在界面交互时产生的各种类型的监控日志上报到产品后台去,这样业务团队就可以知道到用户在不同页面或业务场景下操作了什么,去往过哪些页面,当结合业务后台的订单等数据时,就可以还原出更加清晰的用户行为全貌。

通常这些埋点会分为“页面访问(PV、UV)、区块曝光(区域、时长)、按钮操作(动作、状态)”三大类型,并携带交互元素和操作者的各类特征信息参数,便于我们知晓更多的场景细节与用户情况,例如知晓这个「免费试用」按钮是对应了那个产品?点击的用户是否已开通这个产品?这个用户是否为付费用户?是否个人还是商家类型?用户从哪个渠道进来的等,而且这些植入在产品代码中的埋点可以不间断持续的采集和配套产品迭代进行维护,可以帮助业务团队获取大量有效数据用作业务分析决策。

image.png

② 什么时候派上用场

这些数据埋点主要是为业务目标的洞察分析服务,也就是说业务目标中需要采集用户行为数据时,埋点就要派上用场了,相比传统的业务日志,埋点可以收集到更加全面的界面交互的行为数据,能够简易的还原出一套线上用户的使用情景,而不仅限于一些业务后台就能统计出的转化率或基础数据等;

image.png

并且埋点数据可以与业务数据分开存储运维,这意味着埋点数据可以更迅速的根据设定的指标公式统计出期望的数据或视图,并且不会干扰业务访问的性能质量,因此产品迭代后的新老数据对比、营销活动的效果评估、用户行为的特征偏好识别等,数据埋点都以可以派上用场的。

③ 怎么提埋点需求?

首先埋点需求没有固定的文档格式,其次不同埋点服务平台的要求也有差异,就移动端来讲,很多服务商已经支持可视化埋点、全埋点、无埋点服务,可以实现自动识别交互元素并进行埋点操作,大大减少了开发工作量,那么再聊回埋点需求怎么提。

核心结论就是由上而下,通过业务目标或核心指标进行拆解,然后关联到核心的任务流程上,对于一个页面或一套流程没有必要进行全篇埋点,技巧我概括为以下几点;

image.png

埋点需求的主要内容基本包含以下,根据业务或埋点平台的差异,可以自行调整;

image.png

④ 业务扩参怎么一回事儿

扩参即扩展参数,指在当前用户界面中可以请求到的业务数据,并将这些业务数据绑定到埋点日志中一并上报给埋点数据后台,通常为一些用户属性参数、业务属性参数、设备属性参数、网络环境参数,这样我们就可以通过这些额外的参数进行数据分析或是过滤,举个典型案例;

image.png

3. 数据治理是做什么

① 为什么要治理?

简单说就是提升数据质量与准确性,在庞大的一套数据中,我们需要弄清楚数据之间的映射关系,即不同的数据参数代表了什么元素什么动作什么含义,数据是否有缺漏或冗余、报错漏报乱报、是否有无效的脏数据(例如内部的测试数据或脚本爬虫等带来的数据),如果我们不去将这些数据进行治理,则统计出的数据指标特征或趋势都将不可靠,无法被商业应用。

简单讲就是元数据没治理准确,得到的数据指标也就失去了实用价值。

image.png

② 怎么去治理?

本质是查缺补漏将无效的数据过滤掉或纠错,再把数据涵义映射成具体的指标或描述,用作进一步的指标计算与分析,如果数据又多又杂,你会发觉这一步要你老命,例如埋点就需要逐个查询原始埋点的位置、触发条件、埋点用途、埋点含义甚至与关联业务数据的关系校对等。

不过还好,一般来讲这些工作都是数据建模(BI)相关人员去负责的,作为应用层的我们,更多的是能够根据业务目标提出埋点需求、提出指标与数据报表需求,以及通过数据核算或查看数据趋势等手段找出异常让 BI 修复,所以这里就不展开埋点数据治理的方法了。

③ 数据维护不易

就埋点监控用户行为的方式来讲,除了平时的治理与报表问题修复,每次迭代改版还要做好相关埋点信息的管理与维护更新,保证不出错,不影响关联指标,甚至是线上用户偏好的推荐算法等应用,特别是数据规模越来越大后,又密切关联着业务决策时,数据更不容出错,且要求准确。

六、三大分析内容产出

1. 内容产出的先后

在用户行为分析内容构建的过程中,除非是有特定场景特定诉求,通常个人认为都是先出指标、再完善行为链路、再逐步丰满用户画像的一个过程,原因如下;

  1. 通常先接到的都是一些核心指标,例如转化率、留存率、活跃度等,同时这些指标也是上层最先关注到的;
  2. 接着就是完善不同场景或任务路径相关,帮助洞察微观视角下的体验障碍或用户偏好等,产出流量统计、流程漏斗等,起到业务体验的洞察改善决策作用;
  3. 用户画像的数据本身就没那么好收集,并且是一个逐步完善和被业务决策应用的过程,所以一开始不会直接奔着用户画像构建开始;

2. 基础指标构建

所谓指标可以理解成是产品某项业务的成绩,例如我是卖包子的,那么我的指标大概率就是每天卖出去多少包子、利润有多少、哪款包子销量高,根据这些信息我就可以知道我平时应该准备多少包子、哪些品类的包子需要多做一些、我靠卖包子能赚多少钱。

image.png

① 指标构建的原理

实际上指标的构建逻辑可以很简单,例如 A 占 B 的百分比、ABC 的总和、连续多天 A 占 B 的变化等,很多加减乘除的算法就能搞定,主要是能拿到真实数据,不然我怀疑你在做烂账......

常见指标:

image.png

3. 行为链路分析

用户行为路径是一种数字化的旅行地图,相比较传统服务的旅行地图,场景会更纯粹、意图更准确、数据采集更便捷,主要作用有以下几点;

  1. 分析用户在产品中的活动范围或页面路径的关系,可以帮助了解用户活跃分布,流量走向等情况;
  2. 识别在任务或流程漏斗中的卡点或跳失情况,帮助优化流程体验或提升转化率等指标;
  3. 通过用户的互动方式或路径特征来进行用户分类或偏好分析预测等,用于内容推荐算法或精准营销;

这些行为我们可以大致分为浏览、消费、互动三大类,根据不同的业务类型,可以选择性采集和分析相关数据,例如电商产品就比较关注用户的浏览与消费行为,常见的有商品浏览、添加购物车到下单;

而社交应用就更关注用户的互动行为,如不同类型的内容访问、评论点赞、关注收藏分享等;

这些数据最终可能由可视化的数据报表呈现出来,以便于业务团队快捷的找到数据问题或特征,如常见的漏斗图、桑基图、雷达图、树状图、散点图、决策树等;

image.png

小话题延展

最近在 UXRen 的一场分享会中,听罗浩讲了体验营销的话题,虽然是关于用户研究在职能岗位上挖掘新的商业能力的内容,但是其中有一段是关于如何在旅行地图中挖掘新的营销触点,有一些体会,这里结合用户行为链路分析简单聊一下;

背景与问题:

产品功能与业务增多,引流渠道多样化,不同渠道流量的撬动关键是什么,核心场景具备哪些能力,哪些渠道的流量能吃掉,这些流量所处的触点或场景能支持什么,用户意图是什么,产品能力能满足什么,产品发展可以支持哪些?如何分流或匹配各类流量的意图,并提供路径分发,这些用户流量数据有何趋势或特征,是否能与场景或触点进行根因分析,是否沉淀行为或偏好模型?

行为路径的重点:

在于观察不同触点下的客户意图,展开业务所能触及的部分或新的机会,并匹配合适的关键路径,以提升转化或用户粘性等,然后做数据回归分析,抓取有效的用户特征信息,并应用到产品的内容推荐或外部引流投放信息优化上。

流程过程:

触点展开与机会洞察,触点场景——意图识别——结果匹配(关键路径)——(根因回归)画像更新——算法推荐——广告优化

image.png

这一套下来,是不是感觉有点儿似成相识?后来一想这不就是一套用户增长的设计思路嘛。

4. 用户数据画像

主要是帮助了解和理解用户,使得我们可以划分用户群体和识别偏好特征,最终以提供精准营销或是洞察用户诉求来迭代改善产品。

其中偏好特征我们还可以根据业务属性细分为兴趣偏好、行为偏好、消费偏好等,并为不同偏好特征的群体提供个性化的内容服务,例如常见的内容标签标记,通过识别用户常看内容的标签,来推荐类似的标签的内容或是有潜在兴趣的标签内容来抓住用户的兴趣。

image.png

常见画像指标构建

这些指标会通过用户行为、设备信息、个人资料的完善来逐步获取,主要可以了解到用户的地域分布、年龄与性别分布、设备与活跃度情况,相应的数据在业务后台基本上都能够获取到,只需要将某个时间分区的数据拉出来,经过 Excel 之类的软件把数据加工一下,就能够获取到相关数据视图。

如果将多个数据指标结合起来分析,便可以获取一些复合型数据指标,例如哪些年龄段的用户群体消费能力更强、活跃度更高、不同教育背景的兴趣爱好是否有一定的关联性等等;

image.png

进阶画像指标构建

进阶的数据画像会完善更多的用户特征信息,便于业务团队找到用户群体的特征,做进一步的精细化运营或内容推荐,常见的画像指标如下;

image.png

此外就是在收集用户数据的过程中,保证用户隐私安全、合法性和安全性。

用户分层模型应用

当我们采集到一定的用户数据后,就可以在数据画像的构建阶段进一步完成用户分层工作,这一步是为了将用户分类,因为不同用户群的目的是有差异的,例如闲逛、精准采购、参与活动的等等,以提供差异化的服务做精准营销、识别用户群体特征做业务策略决策、或是优化产品体验相关,不过当你的用户规模尚小,运营模式简单,你也不用迫切去进行用户分层相关,因为收益不大。

那么通常都有哪些用户分层模型呢?其实你并不陌生,一些给你列举了一些;

image.png

七、分析结论到应用

相信你也发现了,用户行为分析的构建与产出并不只是行为链路的数据,同时会包揽很多其他的有价值的指标与数据,所以不要被用户行为四个字迷惑,或许你此刻正需要构建相关数据。

当你准备构建或整理用户行为分析前,记得目标或问题先行,针对性采集数据或建设指标,在你有了相对准确或清晰易懂的数据后,那些数据报表或图表根本难不倒你,说白了无非是将纯纯的一堆数据换了形式展示,如果你数据可视化的形式与应用不够了解,你可以看看 AntV 官网的介绍说明了解一下,其实你也不用每个都研究个遍,实用的就那么几个,酷炫是要代价的,报表搭建平台支不支持、Excel 支不支持、时间精力够不够研发给你整,都是问题~

AntV 官网 :https://ant-design-charts.antgroup.com/examples

最后

你可能疑问没有完整的教程手把手教你啊,其实不然,构建的前提、流程、要点、建设方向均在此篇中交代过,当你按照这套流程框架去做,基本上不会有啥大问题,一般来讲这些内容也够用,至于选用哪些数据埋点平台、数据分析平台、报表搭建平台、视自家公司情况而定吧。

也不要担心在数据报表搭建或分析的过程中,你搞不定,是不是你执行先不说,多问问百度或平台客服总能解决,如果就是觉得很难上手,那么大概率是工具你不熟,或者工具不好用

转载:优设

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

 

image.png

深度拆解9类B端筛选组件,扒出设计的四大问题(上)

清阳

B 端表格页面的核心竞争力,在于是否能让用户高效、精准地触达目标数据,而筛选功能正是这一核心的关键载体。作为 B 端产品 “增删改查” 中 “查” 的核心手段,筛选组件的设计直接影响业务操作效率。兰亭妙微ui设计公司将从筛选与搜索的核心差异切入,拆解筛选底层逻辑,系统梳理 9 类主流筛选组件的设计要点、适用场景,同时明确设计原则与避坑方案,帮你掌握适配不同业务场景的筛选设计落地 SOP。

那好话不多说,我们正式开始~

在开始之前先来说说 什么是 B 端产品,我们通常也叫做管理后台。

这里会有两个问题:“它管理什么?到底如何管理?”给大家三秒钟可以思考一下。

首先它管理的是数据,无论是 ERP 系统的订单数据、CRM 的客户数据、OA 的流程数据,你都会发现管理后台就是在不停的对数据进行补充、整合。

那到底应该如何管理?简单来说就是 数据的“增删改查”,筛选其实就是查询的一种重要方式。

image.png

比如一个客户关系管理系统(CRM),销售人员去拜访客户就会提前查询客户信息,来了解客户关注内容进而去组织销售话术。

那这里的筛选应该如何设计?怎样设计既能高效便利,同时也具备扩展性?那今天我们系统盘点筛选组件究竟应该如何设计?

一、筛选与搜索的差别

这里我们先来讲讲筛选的邻居“搜索”,因为很多同学其实对于这两者之间的差别不太了解,只知道它们都是在工具栏当中,都是在做查询数据的工作。但在功能上是有明显的区分:

搜索是对系统的关键词进行精准匹配,比如用户 ID、手机号、昵称、地址等信息内容

筛选则是给出产品的固定条件选项,比如归属人、状态、类型 等,你可以按需勾选条件,就能得出对应数据

这里稍微多说一句,因为所有的 B 端系统都是由字段组成,而在大的分类上,字段主要包含有输入、选择、上传三大类型。

搜索服务于输入类字段,比如刚才讲到了 用户 ID、手机号、昵称、地址等 都是得让用户自行输入才会得到,因此在表单里输入,在表格当中也是输入搜索,所以系统是关联的。

筛选则是选择类字段,也就是归属人、状态、类型 等,在 B 端系统当中,选择字段尤为重要,所以在表单处选择同样在筛选处也是相同逻辑。

理解筛选与搜索的差异后,我们再来说说筛选~

image.png

二、筛选的逻辑

在筛选的过程当中,有着非常多重要的逻辑需要提前掌握,我们通过简单的快问快答,帮助大家快速拆解。

第一题:什么是 且、或、非

这是筛选当中必须要了解的基础运算条件。

且就是筛选的条件必须同时满足才能出结果,比如一个电商数据分析师,需要筛选潜在高意向客户,在筛选条件为「时间在近 30 天有支付订单、近 30 天累计消费金额≥800 元、近 30 天订单次数≥2 次」,必须同时满足才会满足用户需求。

或就是这些条件满足任意一个就能出结果,比如还是电商数据,需要寻找对产品有兴趣的潜在客户,就需要筛选「近 90 天内有过人工咨询记录、近 30 天内访问产品详情页≥6 次、近 180 天内提交过试用申请」,三个条件满足任意一个,这样就能涵盖更为全面。

非就是这些条件必须排除掉才能出结果,比如电商数据,因为涉及到刷单、退款的情况,需要将其进行清洗,因此在筛选条件上就需要满足「订单状态≠测试订单、支付状态≠已退款、客户类型≠内部员工」,需要同时排除这些数据。

所以对应的筛选运算规则,其实背后都是用户在使用时需要深度分析使用的最为重要的工具~

第二题:在B端系统当中多个筛选条件默认的运算规则是什么?

A:且 B:或 C:非

在 B 端系统当中,最常用的运算规则就是且,也就是取多个筛选当中的交集。

比如下面这三个筛选项,所计算的呈现规则就是 「销售负责人是李强」且「销售时间是 近一个月」且「价值为高价值」的客户,这样就是一个典型的且的关系。

因为这种思维方式是最符合用户的思考逻辑,这也是众多 B 端系统当中的常见逻辑。

image.png

 

第三题:且、或、非可以同时存在于一个筛选组合当中吗?

A.可以

B.不可以

它们可以出现在同一个筛选组合当中,因为实际的业务往往是“多条件、多逻辑” 的复合场景。

比如在教育管理系统当中,班主任要筛选 初三年级且数学月考不及格 或 非 住校生 的学生,来针对这两类人群进行重点管理与监控。

但在筛选的设计当中,为了让用户理解逻辑,我们需要通过 条件组(如括号、层级缩进、虚线框)让用户直观感知分组关系,避免依赖抽象的优先级规则。

image.png

第四题:如果你是一个设计师,应该如何降低成本表达这个关系?

因为逻辑较为复杂,所以在筛选时有些基础办法可以降低门槛。

① 可视化展示筛选运算,如果用户对于且、或逻辑不太了解,可以使用图标快速表示

image.png

② 实时校验逻辑规则,不要出现相互矛盾的筛选逻辑

这个功能其实不太好做,但 ONES 做了一个最简单的逻辑判断。在且条件当中,同一筛选条件不得选择两次,这样用于避免在且条件当中经常出现的相互矛盾的筛选逻辑。

image.png

三、筛选的类型

好的,准备工作已经完成,我们就可以顺利了解筛选的类型。

由于筛选的类型众多,我们会按照 业务复杂度、容器差异 两个维度,来对筛选进行归类。
通过业务复杂度,将其分为:基础筛选、高级筛选、自定义筛选

按照容器差异,将其分为:标签筛选、折叠筛选、浮窗筛选、抽屉筛选、表头筛选、AI 筛选

1. 基础筛选

基础筛选是将 高频使用(使用频率≥80%)的筛选条件进行固定,一直保持在页面中的核心位置,不折叠、不隐藏,让用户能够直接看到的筛选类型。

这是一个最为基础的筛选方式,在常见的 Ant Design、Arco Design 的页面模板当中都会有基础筛选的身影。

image.png

使用基础筛选最为重要的便是 快速触达,用户打开页面就会查看筛选条件,不需要点击“更多”“展开” 等入口,这能满足 B 端用户 高效完成日常操作 的核心需求。

在使用基础筛选时,我们需要注意以下问题:

① 基础筛选条件的数量不宜过多,一般 3-4 个最为合适

因为筛选条件过多,就失去了常驻的意义。但在实际业务当中,我们也需要考虑 5 个、7 个这类极端场景,毕竟常驻是最为基础的方案,难免会遇到特殊情况。(需要在筛选的规则当中进行梳理,将交互逻辑呈现清楚)

② 基础筛选当中,排序规则会非常重要

一般按照 高频-低频 的方式,从左到右依次排列,对于高频低频的获取方式,我们可以数据埋点、卡片分类、问卷调研等多种方式进行搜集。

image.png

③ 筛选基础,样式就不基础

基础筛选有着较多的筛选样式,大家可以结合自身业务进行选择,这里推荐样式一与二,因为展示效率更高~

image.png

这里列举一些常见的基础筛选产品,大家可以一并查看:

image.png

2. 高级筛选

高级筛选是较为复杂的筛选形式,它为了满足更多 低频、复杂、个性 的业务需求,通常会提供相对独立筛选面板,展示更多的筛选条件。

独立面板也就是我们后续会提到的 浮窗筛选、抽屉筛选、表头筛选...,所以它们的关系也会相对复杂。

image.png

高级筛选与基础筛选最大的区别在于:

基础筛选只能覆盖 3 个左右的高频筛选,而高级筛选可支持 10 + 维度的灵活组合;常驻只能使用且的逻辑相对简单,而高级可以有条件组嵌套支持复杂业务逻辑;常驻位置较为固定,而高级则有面板加持,可以更为灵活。

其实选择高级筛选或者基础筛选,最大的话语权还是场景。

如果你的筛选是简单筛选几个条件,那基础筛选就已经足够,反之对筛选条件、筛选效率有着更高要求,我们则会考虑更为复杂的筛选方式。

在使用高级筛选时,这些问题尤为重要:

① 因为高级筛选需要访问独立面板,因此在入口的设计就会尤为重要。一般会用文字链接或者图标来提示用户,便于寻找。

image.png

② 基础筛选与高级筛选可以并存,因为角色不同、使用场景不同,常驻可以作为高频使用的固定模块,高级则作为特定角色需要更多筛选的补充,这部分放在下面 筛选的原则-筛选角色化 给大家详细说明。

这里列举一些常见的高级筛选产品,大家可以一并查看:

image.png

image.png

3. 自定义筛选

自定义筛选则是在高级筛选的基础上,进一步业务化。

它是为了满足 字段不固定、需求差异化 的业务场景,用户能够自定义选择 筛选字段,配置字段的筛选规则。

使用自定义字段最重要的核心要素就是 突破固定字段限制,因为高级筛选是针对产品预设好的固定字段进行筛选,自定义则是用户可以自行选择字段,用于适配更为灵活、多变的业务场景,如 CRM 的客户自定义字段、OA 的流程表单(因为不同的公司对于 流程、客户信息的管理不太相同,因此需要提供自定义字段进行支持)

在设计自定义筛选时,我们的方案选择主要受到“筛选频率、条件复杂度、界面空间”的影响。

① 小入口+大弹窗,以筛选图标作为入口,点击过后弹窗展示所有筛选条件。这种方式适合 中低频(每天 1-3 次)使用筛选,界面空间紧张用大弹窗容纳复杂配置

image.png

 

② 展开收起式,当用户点击筛选后,将表格与工具栏之间的部分展开,用于呈现筛选条件。它能够避免弹窗的跳转感,筛选时用户的视线可以无需离开表格区域,适用于 筛选条件数量多、高频使用的场景

image.png

③ 固定常驻式,在顶部区域固定,默认展开,这样就无需点击入口,这样更适合“筛选是核心工作流” 的场景image.png

 

自定义筛选是最难设计的,在使用过程中会有 四大基本元素

筛选入口:需要让用户快速找到入口,同时不干扰主界面。

逻辑运算区:主要就是 且、或 逻辑的展示,只是在运算区域里面,需要考虑切换时究竟应该如何做?

神策数据是通过文字方式,快速展示 且、或 逻辑,并且支持手动直接切换,这个方案目前看来是用户最容易理解的。

字段选择区:选择你所需要筛选的字段,点击 添加、选择,整体逻辑较为简单。

条件组管理区:筛选条件全部展示过的后续动作,比如保存,批量录入 等相关动作都可以放在条件组管理当中,进行呈现。

 

4. 标签筛选(外露筛选)

接下来的 标签筛选、折叠筛选、浮窗筛选、抽屉筛选,都是对容器进行分类。因此我们需要进行展开讲解,穷举一下不同容器的形式和变化。

先来说说标签筛选(外露筛选)

标签筛选是将重要的筛选选项设计成“可点击的标签按钮”,将筛选过程当中的选项直接来进行展示,目的是为了能够让筛选条件,直接暴露出来给到用户进行使用。

它最重要的是提升效率,针对高频使用的筛选维度将其外露展示,将多步操作压缩为 一步点击,同时能够凸显当前的筛选状态,避免用户忘记自己选了什么。

在使用标签筛选时,需要注意这些内容:

  1. 在标签的设计上,因为存在的样式相对较多,所以我们可以根据自身产品的视觉层级,进行逐一选择。
  2. 涉及到多角色使用标签筛选时,需要重点考虑角色化的差异,因为其常驻,如果内容都不是用户关注的点,标签常驻的意义也不会很大。
  3. 当标签选项超过 7 个时,则需要考虑对此筛选内容是否需要进行单独处理,因为选项过多,用户使用标签筛选也不会特别清晰。

比如我想外露的内容是各种状态,我就可以将其放在顶部,进行指标图+筛选功能的杂糅,像在小红书千帆系统当中,对于订单的多种状态,就会使用这一技巧,进行呈现。

image.png

5. 折叠筛选

折叠筛选则是用隐藏的方式,按照使用频率将筛选条件分层。高频条件平铺展示、低频条件收折在面板当中,点击展开的筛选类型。

它最重要的价值是要平衡“空间与效率”的问题,当筛选条件 4-8 个时,如果全部平铺页面就会过于冗余,如果全部隐藏又会增加操作步骤,折叠筛选通过 “高频展示 + 低频折叠”,让用户既能快速操作高频条件,又能按需调用低频条件,兼顾 “便捷性” 与 “功能完整性”。

正因为这样的特性,所以很多基础固定的筛选一旦变多后,通常就会使用折叠的方式进行呈现。

image.png

6. 浮窗筛选

浮窗其实是将筛选包起来,用浮窗进行承载,临时唤起,用完即走。

在设计时首先会有一个统一的筛选入口,浮窗弹出后设置对应条件,然后点击确认、取消,浮窗自动收起,不占用页面只提示有筛选条件。

image.png

对于系统而言,它为什么需要浮窗筛选?本质上会有三个原因:

  1. 节约空间,因为在列表当中,如果把筛选条件进行常驻会挤压核心内容,列表当中的屏效相对较低,这时候筛选则会呈现为隐藏-唤起的模式,我们列表所展示的信息数量就会变多。
  2. 降低页面复杂度,当筛选条件是常驻时,条件多了过后就会导致使用起来异常困难,特别是针对那些使用频率本身偏低的用户来说,更是无效信息,因此收纳起来就能降低复杂度,使用户的专注度能够更加聚焦于核心任务当中。
  3. 更强的适配性,假如在需要设计移动端的筛选,也可以复用统一的交互,并且用户点击筛选图标已形成记忆。

我们之前就有相同的业务,需要将桌面端的部分移植到 Pad 端与移动端,使用浮窗性价比就会更高。

7. 抽屉筛选

抽屉筛选就是浮窗筛选的另一种表达,它主要是平衡 筛选条件与界面空间 的另一种选择。
但确实会发现现在的抽屉筛选已经没有当年的雄风,感觉大家就避之不谈,基本不会使用它。其实也会有几个原因:

  1. 抽屉需要来回滑动,操作上不如弹窗直接高效,视觉上也缺乏弹窗的简洁与高级感;
  2. 展开时内容常偏向主屏幕一侧,容易造成明显的视觉偏移,影响整体体验

很多之前沿用抽屉筛选的产品,现在都在调整自己的交互方案。

并且因为抽屉的不稳定性,我们其实不太建议同学们使用抽屉进行选择自己的选项条件。

image.png

8. 表头筛选

表头筛选是一种相对特殊的筛选形式,它是将筛选入口放置在头部,提供给到用户进行快捷的筛选操作。

本质上是在满足长时间使用 Excel 用户的使用习惯,因为在 Excel 当中表格众多,对于筛选只能使用一种影响较小,最为通用的做法,随着 B 端产品的发展,也会发现很多设计方式都被得到了延续。

在理解表头筛选时,会有两种使用场景:

① 空间较少,使用表头筛选可以进行轻量的筛选动作。

这样点击筛选过后便可直接选择筛选选项,执行筛选操作。你可以看到飞书文档,在主页列表中就会这样设计便可以轻量满足筛选需求。

image.png

② 字段太多,需要表头筛选带入更多筛选值,进行筛选安排。

这种方案本质上是针对高级筛选的体验补充,记住!是需要高级筛选 or 自定义筛选时才会用到筛选策略。

因为在这两种筛选当中,需要选择筛选字段,有大量的选项,这对用户来说会十分影响其正常使用,通过表头处的点击,就能够将字段默认带入,缩短筛选路径,提高筛选效率。

这种方案的表头筛选也会有相应弊端,首先是表头空间问题,因为表头本身需要展示的信息就相对较多,比如冻结、排序、等等,过多的操作会导致表头过于复杂,如果还加上筛选,表头空间就会更大,更不适合进行使用。

其次用户理解成本也会相对过高,因为很多行业属性相对较为简单的 B 端产品并不会使用这类筛选,对于用户初次使用也会有不小的负担。但表头筛选目前的普及率仍然比较低,使用比较频繁的便是纷享销客。

image.png

9. AI 筛选

来到重点,AI 筛选。它不仅仅是未来筛选设计的大趋势,更是能够在产品层面解决 筛选复杂化的问题。

比如刚才的高级筛选、自定义筛选,无疑都是在增加用户的操作层面,他们需要不断的选择,才会得到自己想要的结果。而 AI 筛选的价值在于它解决了 用户自然语言与程序逻辑执行 之间的壁垒,让筛选能够响应用户的自然语言诉求。

比如我想筛选最近一个月的高价值客户,就只需要在 AI 输入框中说出自己想法,然后就能得到筛选结果。

image.png

程序逻辑执行,程序就可以根据自身知识库,对高价值客户进行拆解,逻辑变为 客户时间为:最近创建一个月客户、类型为高价值。

这样一来,其得到的结果就会更为简单合理,但是在设计 AI 筛选时,它的难度还是会相对较大。

因为 AI 的结果可能会出现差错,那对应的修改策略就会极为重要。

所以我们可以看到,像 Jira 对于 AI 筛选就会有更多的修改入口让用户对于筛选结果进行快速修正,同时在入口上也需要做更多的设计进行提示。

image.png

转载:优设

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

 

image.png

研究鸿蒙系统后,总结了给设计师的未来多端应用设计指南

清阳

随着鸿蒙系统的持续成熟、全场景生态不断完善,互联网产品正式迎来新一轮多端应用适配的核心挑战。当下数字产品界面功能愈发复杂、信息层级愈发繁琐,叠加操作系统多元、终端设备类型跨度极大的行业现状,单一的移动端设计思维早已无法适配全场景交互需求,设计师唯有跳出传统单端设计框架,彻底重构适配万物互联的全新设计思维,才能紧跟数字产品的发展趋势,打造出跨端流畅、体验统一的优质应用。本文结合鸿蒙系统官方设计理念与核心规范、主流iOS及Android系统最新设计标准深度研究,联动兰亭妙微UI设计公司的多端适配实战项目经验,为广大UI/UX设计师系统梳理未来多端应用设计的核心思路、落地准则与实操指南,破解跨设备适配难题,助力精准贴合鸿蒙生态设计要求。

前言:鸿蒙,中国互联网生态的关键变量

image.png

“百年未有之大变局” 下,国家数字安全的重要性日益凸显,完全依托国外操作系统的应用生态,已难以匹配大国发展的未来需求。鸿蒙系统的崛起,不仅是一款国产操作系统的落地,更成为未来几年中国互联网行业的核心 “变量”,推动多端应用设计从 “单端适配” 向 “全场景融合” 的深层变革。
 
对于设计师而言,鸿蒙系统的到来绝非简单增加一套系统适配,而是设计理念、职能定位与实操方法的全面升级。如何理解并践行鸿蒙的全场景设计思维,成为应对万物互联时代设计挑战的核心命题。
 

一、互联网发展与操作系统的必然演变

 

1. 互联网发展:从单屏到多屏,设计思维的四次迭代

 
互联网的发展始终与设备形态、屏幕载体同频进化,每一次设备革新都催生新的设计理念与设计师职能,而屏幕的演变也从 “固定化” 走向 “碎片化、全场景化”。
image.png
互联网发展与设计思维的四个阶段清晰界定了设计师的核心目标转变:

image.png

互联网阶段 核心设备 设计核心 设计师职能特征
Web1.0(萌芽期) 固定显示器 信息密度优先,美观与交互次要 平面设计师,聚焦静态信息排列
Web2.0(爆发交互期) 固定显示器 + 笔记本电脑 网页风格、视觉效果与互动形式创新 网页设计师,基于虚拟世界的创意设计
移动互联网时代 智能手机触摸屏 以手机为核心的用户体验设计 UI / 交互 / 动效设计师,逐步融合为体验 / 产品设计师
万物互联时代 多类型屏幕(平板 / 可穿戴 / 智能家居 / VR/AR) 以人为核心的多设备协同场景化体验 全场景设计师,兼具多端适配与协同思维

 

当下我们正处于移动互联网向万物互联的过渡阶段,设计师的核心仍以体验设计为根基,但多设备、多场景的适配与协同已成为必须具备的核心能力。
 

2. 传统操作系统的弊端:单端设计思维的天花板

 
全球主流操作系统(Windows/MacOS/iOS/Android)均伴随巨头企业发展形成生态,并基于不同设备衍生出独立系统(如苹果的 iPadOS/WatchOS/VisionOS)。但随着设备与应用的持续丰富,单端设计思维的弊端愈发明显:

image.png

  • 多平台、多尺寸适配设计差异大,视觉与体验一致性难以保证;
  • 各系统底层代码壁垒高,需不同开发团队维护,开发成本剧增;
  • 设计师需维护多套规范、组件与素材,效率低下且易出现标准混乱。
image.png
即便苹果等企业尝试推进多端体验融合(如统一 MacOS 与 iOS 的组件样式),但受限于庞大的既有生态,难以从底层打通设备间的桥梁,仅能通过 “桥梁式连接” 实现浅层协同,而非真正的设备融合。

 

image.png

3. 鸿蒙系统的创新:从 “设备协同” 到 “设备融合”

 
鸿蒙系统作为全新的全场景智能操作系统,站在传统操作系统的成熟经验之上实现弯道超车,其核心设计理念彻底打破了单端设计思维的桎梏 ——一次开发、多端部署,这也是鸿蒙与传统操作系统的本质区别。

image.png

鸿蒙通过两大核心技术实现这一理念,为全场景设计奠定底层基础:
 
  1. 分布式软总线:打破设备物理壁垒,让所有设备如同单一设备般实现高效通信,实现设备间的能力共享与数据互通;
  2. 自适应 UI 框架(方舟开发框架):可根据设备的屏幕尺寸、像素密度、交互方式(触控 / 遥控 / 旋钮),自动适配对应的 UI 布局与交互逻辑,从技术层面减少多端适配的重复工作。

image.png

鸿蒙系统对设计师的核心要求,是建立全场景设计思维:从应用框架、组件形态、交互方式、反馈形式等维度,将多端设计整合为一套统一的全场景设计系统,而非对不同设备做孤立的设计适配。
 
一套完整的全场景设计系统,需具备四大核心要素:

image.png

  • 全场景的自适应 / 响应式布局规范:基于屏幕比例抽象,打造阶梯式自适应结构;
  • 全场景 API 的统一:实现全局配色、字体、组件、布局的统一管控;
  • 多模态组件库:适配不同设备 / 场景的组件样式、交互与反馈形态;
  • 全场景适配的成熟经验与实操指南。
 
下文将重点围绕全场景设计的框架与布局层面,梳理鸿蒙设计的核心实操要点。
 

二、全场景布局的基础要素:统一基准,抽象尺寸,建立秩序

 
多设备适配的核心前提,是建立一套统一的布局基础规则,解决 “尺寸不统一、比例差异大、布局无规律” 的核心问题,鸿蒙系统通过虚拟像素、断点系统、栅格系统三大要素,搭建了全场景布局的底层框架。
 

1. 基准倍率统一:vp 虚拟像素,实现跨设备尺寸归一

image.png

面对海量设备的像素密度与屏幕尺寸差异,鸿蒙采用虚拟像素(vp) 作为设计的基础单位,实现所有设备设计尺寸的归一化,其核心逻辑与 Android 的 dp 一脉相承,但更适配鸿蒙的全场景设备体系。

image.png

  • vp 的核心定义:针对应用的设备虚拟尺寸,区别于屏幕硬件的物理像素(px),可在任何屏幕上缩放以保证统一的视觉尺寸体量;
  • vp 的换算规则:1vp≈160dpi 屏幕上的 1px,鸿蒙 API 接口无单位时,默认单位均为 vp;
  • 注意点:因设备屏幕多样化,vp 与 px 的换算无固定整数倍率(如苹果 pt 的 2x/3x),需参考鸿蒙官方文档做精准适配。

image.png

2. 屏幕尺寸抽象:断点系统,划分跨设备布局区间

 
基于 vp 完成尺寸归一后,通过断点系统界定 “布局何时需要变化”,这是响应式布局的核心,鸿蒙从横向(窗口宽度)、纵向(窗口宽高比) 两个维度,将全场景设备的屏幕抽象为五大梯度,实现屏幕尺寸的标准化归纳:
 image.png
 
鸿蒙断点梯度 对应设备类型
XSmall 智能手表、小屏穿戴设备
Small 手机、竖屏折叠屏
Medium 横屏手机、小平板、展开折叠屏
Large 平板设备、车机
XLarge PC、智慧屏

 

 image.png
相较于 Android 的断点规范,鸿蒙的断点系统覆盖范围更广,充分考虑了可穿戴设备、折叠屏等万物互联时代的特色设备,更适配全场景设计需求。
 

image.png

 

3. 基础布局秩序:栅格系统,保证多设备布局一致性

 
在单设备设计中栅格系统并非必需,但在多设备全场景设计中,栅格是通用的辅助定位系统,为布局提供可循规律,解决动态布局的一致性问题,栅格会随屏幕、窗口、子容器尺寸的变化动态调整。
 

image.png

栅格的三大核心构成

 

 

  1. Margins(边距):元素与窗口左右边缘的距离,决定内容展示宽度,可按窗口尺寸定义不同数值;
  2. Gutters(间距):栅格之间的距离,控制元素间的视觉关系,取值通常不大于边距(符合格式塔原理);
  3. Columns(栅格):内容占位框架,数量决定布局复杂度,宽度由窗口宽度与栅格数量自动计算,不同窗口尺寸匹配不同栅格数量。
 

image.png

鸿蒙栅格系统的设计原则

 
鸿蒙采用窗口栅格系统,核心逻辑与 Android 一致:通过断点系统抽象窗口宽度区间,再匹配对应的栅格数量(边距、间距),实现内容布局的最佳适配。
 
  • 应用可根据自身风格(紧凑型 / 宽松型 / 通用型)定义专属栅格组合(如 8 间距 / 12 间距 / 16 间距);
  • 栅格内容区最大使用宽度为 2220vp,窗口宽度超过该值时,内容区不再放大,多余区域左右留白,避免大屏内容过度拉伸。
 

三、应用级自适应布局架构:随屏而变,适配不同设备交互逻辑

 
基础布局要素解决了 “统一规则” 的问题,而应用级自适应布局架构则针对不同设备的屏幕特性与用户操作习惯,设计可动态调整的应用整体框架,让应用在不同设备上都能实现高效的交互与信息展示。鸿蒙系统给出了 7 种核心的应用级布局适配方法,设计师可根据应用需求灵活组合:
 

1. Tab 栏响应架构:底部→侧边,适配大屏操作

image.png

 
底部 Tab 是移动端核心全局导航,但大屏中会因拉伸占用过多空间,窗口宽度≥840vp 时,建议将底部 Tab 挪移至左侧,成为侧边 Tab;
 
  • 侧边 Tab 可融合更多导航选项、全局操作元素(如菜单栏、头像),充分利用大屏空间;
  • 该数值为鸿蒙建议值,可根据应用的空间需求灵活调整。
 

2. 分栏布局:父子层级→平行显示,释放大屏信息展示能力

image.png

 
大屏的核心优势是更大的信息展示空间,可将移动端的父子层级页面拆分为平行分栏,窗口宽度≥600vp 时,建议使用分栏布局
 
  • 鸿蒙默认两栏宽度比例为 4:6,特定场景可调整为 5:5 或 6:4;
  • 若页面以内容 / 商品展示为主,可适当提高分栏的窗口宽度阈值,或不采用分栏布局,保证阅读效率。
 

3. 悬浮式侧边导航栏:适配小屏 / 双折叠屏,节省核心空间

 

image.png

在竖屏手机、双折叠屏等空间有限的场景,侧边导航作为临时层级,采用蒙版 + 左侧唤起的悬浮形式,不占用核心阅读空间,同时让用户清晰感知层级关系。
 

4. 嵌入式侧边导航栏:适配大屏,提升操作效率

image.png

 
在 PC、智慧屏等空间充裕的大屏场景,侧边导航采用嵌入式布局,通过向右挤压主内容区,从双栏模式切换为三栏模式,兼顾操作效率与布局多样性。
 

5. 侧边面板:适配宽屏沉静式场景,实现轻交互

 
宽屏的视频、阅读等沉静式场景中,将原本的底部浮层操作(如评论、信息查看)改为侧边面板,在不打断核心体验的前提下,实现便捷的轻交互处理。
 

6. 跟手半模态:适配大屏 / 折叠屏,符合人体工学

image.png

 
移动端弹窗多置于屏幕中间,但大屏 / 双折叠屏中,用户单手难以覆盖全屏幕,需将操作弹窗放置在符合人体工学的位置(如靠近右手的边缘),提升操作便捷性。
 

7. 半弹窗与弹窗变化:适配多屏,实现模态自适应

 
移动端为减少页面跳转,常用底部半弹窗实现内容型临时页面;在折叠屏 / 平板等大屏场景,将半模态页面自适应为临时窗口模式,充分利用大屏空间,提升交互体验。
 

四、模块级响应式布局方法:细节适配,让界面过渡更自然

 
应用级架构解决了整体框架的适配,而模块级响应式布局则聚焦单个功能模块的动态调整,让模块随容器尺寸(屏幕 / 窗口)变化实时适配,并通过过渡动画实现自然的界面变化,鸿蒙梳理了 8 种核心的模块级适配方法,覆盖绝大多数设计场景:
 

1. 横向等距自适应

image.png

 
模块内元素左右间距固定,模块宽度随容器宽度等值变化,是最基础的模块适配方式,适用于简单的线性排列元素。
 

2. 横向均分自适应

image.png

 
容器尺寸变化时,将空间平均分配至元素间的空白区域;若尺寸变化幅度大,可在模块内设置断点,调整元素数量与尺寸,适配设计目标。
 

3. 等比缩放

 

image.png

元素长宽绑定并等比缩放,适用于对比例要求严格的元素(如 LOGO、固定比例图片),保证视觉形态的一致性。
 

4. 占比缩放

image.png

 
元素尺寸与容器 / 区域的某一维度(宽 / 高)按比例绑定,比等比缩放更灵活,能更稳定地分配布局与元素空间,是日常设计中最常用的缩放方式。
 

5. 自适应延伸

 

image.png

元素间距与大小固定,仅通过容器调整显示 / 隐藏的内容数量;需注意高频 / 必要元素需持续露出,避免核心功能被隐藏。
 

6. 自适应隐藏

image.png

 
聚焦小屏核心操作,将低频操作整合至 “更多” 按钮中,适用于空间有限的小屏 / 穿戴设备;核心原则是按操作优先级排序,保证核心操作的便捷性(如音乐播放器的播放 / 暂停始终居中)。
 

7. 自适应折行

 

image.png

层级相同的内容展示首选方式,容器宽度变化时,内容不隐藏,仅做折行显示,保证信息的完整性,适用于标签、列表项等元素。
 

8. 重复布局

 

image.png

利用大屏宽度优势,将同属性组件横向并列排布,适用于对宽高比敏感的图片 / 组合内容,避免内容放大超过 150% 导致的视觉变形。
 

五、空间哲学的变革趋势:容器化与悬浮化,未来跨端设计的核心方向

image.png

 
鸿蒙系统虽有后发技术优势,但在设计风格与趋势上,仍可借鉴苹果、Android 的最新探索,而空间与容器的具像化、导航 / 操作的悬浮化,已成为全球跨端设计的共同趋势,也是鸿蒙设计未来的重要发展方向。
 

 

1. 苹果 iOS26/VisionOS:空间容器化的先驱

image.png 
苹果 iOS26 的核心革新之一,是将 “空间” 与 “容器” 概念具像化,打破导航 / 操作按钮与页面的融合关系,将其置于独立的悬浮空间中;这一设计最早应用于 VisionOS,不仅让跨端适配更简单,也为用户适应 XR 设备的视觉风格与操作逻辑做铺垫。
 

2. Android Material Design 3:导航操作的容器化趋势

 

image.png

安卓的 Material Design 3 也明确体现出导航与操作的容器化趋势,通过独立容器承载导航与操作元素,减少对内容展示空间的占用,提升跨端适配的灵活性。
 

3. 鸿蒙设计的未来方向:融合容器化与悬浮化

 

image.png

容器化与悬浮化的设计逻辑,在跨端适配中具备显著优势:无需为导航刻意划分独立空间,元素悬浮于内容之上,让导航与内容的布局适配更高效。未来鸿蒙的设计体系,必然会融合这一趋势,设计师提前适应并应用该理念,将掌握未来跨端适配的主动权。
 

结语:全场景设计思维,让复杂回归简洁

 
形式追随功能,而功能的实现始终取决于底层技术的发展。从 PC 到移动互联网,再到万物互联,应用形态、操作系统、设备种类都在不断 “复杂化”,而鸿蒙系统的到来,让多端一体化设计从理念变为现实。
 
对于设计师而言,未来的核心命题,是在复杂的多设备、多场景中寻找设计的简洁性:如何在提供丰富功能与连续体验的同时,让用户感受到视觉与交互的秩序与统一?如何降低多端适配的设计与开发成本?
 
全场景设计思维,正是解决这一命题的关键钥匙。它要求设计师跳出单端设计的局限,以 “人” 为核心,以鸿蒙的技术框架为基础,从底层规则、应用架构、模块细节三个层面,打造一套统一、灵活、可适配的全场景设计系统。
 
万物互联的时代,设计的边界正在不断拓展,而唯有重构思维、紧跟技术趋势,才能让设计始终成为产品体验的核心驱动力。
 

兰亭妙微(蓝蓝设计)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

日历

链接

个人资料

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

存档