交互文档该怎么写，是很多 B 端设计师每天都会遇到的问题。兰亭妙微在大量 B 端项目中深刻体会到：画交互原型只是第一步，一份规范、清晰的交互文档，才是团队高效协作的关键。今天我们系统梳理交互文档的撰写方法，帮你完成一次深入的扫盲。

C 端设计追求极致的用户体验和视觉震撼，每个细节力求完美，让人一眼被吸引；B 端设计更注重功能完善和信息清晰，或许没有华丽外观，但每个功能、每个布局都经过深思熟虑，确保用户高效准确地完成工作。今天，兰亭妙微带你深度剖析 C 端与 B 端在设计价值上的差异与碰撞。

兰亭妙微ui设计公司分享：移动端底部导航栏（Tab Bar）是 App 最核心的导航组件，大量海外成熟产品沉淀了很多可复用的设计思路。本文结合海外头部案例，拆解底部导航栏的底层逻辑与落地技巧，帮设计师理清设计思路，规避常见体验坑点。

在正式学习设计方法之前，先思考两个核心问题，做设计不要上来就直接套用 Tab Bar：

问题 1：你的产品真的需要底部 Tab Bar 吗？

市面上微信、淘宝、美团等大量 App 都在用底部导航，但Tab Bar 并不是所有应用的标配。

像系统日历、计算器、Uber / 滴滴这类产品，就没有使用底部 Tab 栏。是否采用底部导航，要结合产品业务场景、信息架构综合判断，不要盲目跟风主流产品。

问题 2：为什么要使用底部 Tab Bar？

底部导航栏的核心价值，是降低用户跳转成本，实现页面之间快速切换。借助 Tab Bar，用户可以一键直达核心模块，提升整体操作效率。

明确这两个前提后，下面结合案例分享 8 个可落地的设计技巧：

1. 只承载产品最核心的功能入口

底部导航栏的空间十分有限，切忌堆砌过多功能标签，造成导航臃肿混乱。优先放置用户高频访问的模块，搜索这类高频操作，非常适合收纳到底部导航，加速内容检索。

案例 Spotify Spotify 的底部导航仅保留四大核心入口：首页浏览、搜索发现、个人音乐库、会员专区。首页负责内容消费，搜索用来挖掘新歌与播客，音乐库存放收藏歌单，会员入口便于用户完成付费转化，全部都是音乐播放器场景下最高频的能力。

2. 控制标签数量：4‑5 个为最优区间

行业主流 App 的底部导航普遍设置 4‑5 个标签。这个数量既能覆盖核心业务，也保证按钮点击热区充足，避免标签过多导致按钮过小、误触率升高。 同时导航栏可以承载轻量状态提示，比如消息红点、数字角标，直观向用户推送状态。

案例 Pinterest Pinterest 底部仅设置 4 个标签，按钮尺寸充足，点击容错率高。消息标签搭配数字角标，实时提示未读消息；搜索常驻底部，用户可以在信息流和搜索结果之间无缝来回切换。

3. 灵活选择标签形式：图标 + 文字 / 纯图标

底部标签分为两种常用形式：图标搭配文字、纯图标。

• 图标 + 文字：通用性最强，图标做视觉识别，文字做语义解释，适合绝大多数产品，降低理解门槛。
• 纯图标：仅适用于图标语义高度通用、用户认知已经形成共识的场景；如果图标表意模糊，严禁省略文字。

案例：宜家 App & YouTube 宜家 App 使用纯图标导航，主页、分类、个人中心的图标符号大众认知度高，即便没有文字，用户也能快速理解含义。 反观 YouTube，导航图标表意相对抽象，如果去掉文字，用户很容易混淆功能，因此必须搭配文字说明。

4. 标签文字力求简短精炼

导航栏文字一定要简短清晰，文字过长会挤压图标空间，还会出现文字截断、换行的问题，干扰用户识别。对于重点操作按钮，还可以去掉文字，强化视觉焦点。

案例 TikTok TikTok 底部导航标签文字全部极简化，中间发布按钮直接去除文字，放大图标视觉权重，引导用户创作，兼顾美观度与引导性。

5. 原则：尽量不要隐藏底部导航栏

底部导航承载着 App 最重要的模块入口，常规场景下应当常驻页面底部，滚动页面时也不隐藏。一旦导航消失，用户会失去位置锚点，无法快速切换页面。

特例：Pinterest Pinterest 滚动页面时会收起底部导航。这是特殊场景下的取舍：产品以图片流为核心，隐藏导航是为了减少遮挡，给图片留出更大展示空间。该方案属于个案，不建议通用产品直接照搬。

6. 清晰反馈用户当前所处位置

导航不只是用来跳转，更要告诉用户「我现在在哪」。通过选中态样式区分当前页面，避免用户迷失在产品内。常用方式：图标变色、样式填充、下划线指示等。

案例：多邻国 & Headspace 多邻国，选中 Tab 图标做色彩填充，通过视觉变化区分激活状态，让用户一眼识别当前所在板块。 Headspace 采用底部下划线跟随切换的方案，选中选项下方出现标识线条，切换 Tab 线条同步移动，位置感知明确。

7. 依靠用户反馈迭代导航方案

导航栏设计不是一次定稿，需要数据和用户反馈持续打磨。设计师需要调研：哪些 Tab 点击频次高、哪些入口几乎无人使用，到底适配 4 个还是 5 个标签，基于真实用户行为做调整。

案例 Pinterest Pinterest 早期版本的 Tab 栏和市面产品大同小异，团队收集大量用户行为数据与反馈后，迭代优化导航结构，打磨出适配自身用户习惯的底部导航。持续迭代，是产品体验优化的关键。

8. 利用 Tab 栏承载状态更新提醒

底部导航栏不止承担跳转职能，还可以借助红点、状态标记，向用户推送外部变化，无需进入页面就能感知新动态。

案例 Twitter Twitter 在产生新内容时，首页图标会出现更新原点提示，唤醒用户点击查看新内容。同类的设计，也广泛应用于 YouTube、Pinterest 等海外产品。

转载：优设

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

兰亭妙微ui设计公司分享：随着跨端办公趋势不断深化，B 端业务早已不再局限于 PC 后台。手机、平板正在成为业务人员随时随地处理工作的重要载体，打破办公场景的时空束缚。但 B 端移动端绝非 PC 页面简单缩小，需要围绕移动端场景、角色、操作习惯做轻量化重构。本文将从设计认知、核心模块实操、项目落地协作三个维度，完整拆解 B 端移动 App 的设计思路与实战要点。

一、建立认知：理清多端差异，找准移动端定位

PC、平板、手机三端并不是简单复制，而是一套功能逐级下放的关系：屏幕尺寸越小，功能越聚焦核心，剔除复杂配置与低频操作，适配对应角色的真实工作场景。

表格

以有赞美业工作台为例：手机端只保留宫格式核心入口；Pad 端在入口之外直接展示业务内容；PC 端承载完整数据看板、快捷操作与复杂管理功能。

设计启示：同样一套业务，不同终端的用户角色、使用目标完全不同，移动端设计的核心目标，是在保证操作效率的前提下兼顾可用性，而不是复刻 PC 全部能力。

二、核心模块实操：表单、列表、数据页、工作台四大组件设计

B 端移动端高频页面集中在表单、列表、数据看板、工作台，下面结合行业案例拆解每个模块的设计策略。

2.1 B 端移动端表单设计

表单由标题、必填标记、字段标签、提示文案、输入区域、操作按钮共同组成。 大部分表单追求快速完成，但部分场景需要引导用户审慎填写，例如资质审核页面、小屏适配、多语言国际化场景，这时标签布局方案就至关重要。

1）左对齐标签（左标签‑左内容）

优势：贴合阅读习惯，适合陌生、复杂业务字段，引导用户仔细阅读内容； 劣势：长标签会拉大标签与输入框距离，拉长填写耗时。 眼动实验表明，左对齐标签填写速度最慢，适合资质认证、金融申请这类需要审慎核对信息的页面，刻意放缓用户填写节奏，降低出错概率。

变体方案：左标签‑右内容，优化长标签适配，视觉排布整齐；但标签与输入框的关联性减弱，适合选择类录入场景。

2）顶对齐标签

优势：阅读效率极高，标签到输入框视觉跳转仅需 50ms，比左对齐快约 10 倍；对长标签、多语言场景兼容性强； 劣势：占用更多纵向屏幕空间，适合字段数量不多的移动端页面。

选型总结：追求填写效率优先选顶对齐；需要用户仔细阅读、风险较高的业务，优先选左对齐标签。

2.2 B 端移动端列表设计

移动端 B 端列表核心目标：快速查看信息、高效完成操作，由卡片容器、筛选器、搜索三大要素构成。

1. 卡片：移动端优先卡片式布局，承载多元信息与交互，适配多端展示，强化信息区分；分为长卡片（如饿了么商家版订单）、短卡片（如 58 同城商家版招标信息），根据信息密度选型。
2. 筛选：帮助用户在海量业务数据中快速定位，减少手动翻找成本。
3. 搜索：支持关键词直达目标条目。

视觉差异化设计技巧： 可以参考真实线下单据的视觉语言做拟物化轻量化表达，消解纯数据页面的枯燥压迫感。例如途牛商旅复刻纸质差旅审批单线条、医鹿模拟病历钉扣样式、饿了么商家版模仿外卖小票样式，让界面和真实业务认知对齐，提升用户的理解效率。

2.3 B 端移动端数据页设计

移动端数据页面 = 核心指标统计 + 可视化图表卡片 + 筛选控件 + 明细列表。

• 指标统计：提炼业务核心指标，采用主指标 + 辅助指标的组合展示；
• 可视化图表：做到 “一图胜千言”，把海量抽象数据转化为直观图形。

1）激励性数据设计

参考经典电力公司案例：通过对比图表，向用户展示自身和周边群体的用电差异，利用对比感知驱动行为改变，最终实现整体功耗下降。这套思路同样可以迁移到 B 端产品，通过对比维度，让业务人员直观感知自身业务的好坏差距，激发优化意识。

2）移动端图表取舍

移动端屏幕有限，图表需要做取舍：

• 直角折线：数据精度高；平滑曲线：降低认知负担，视觉更柔和；
• 部分业务场景可以弱化坐标轴、简化刻度，牺牲部分绝对精度，强化趋势感知，适合首页概览类图表，追求趋势感知而非精准读数（如淘特商家版生意参谋）。

2.4 B 端工作台：产品价值的门面

工作台是用户进入产品的第一站，帮助用户快速掌握工作进度、直达高频功能入口，是产品体验、视觉规范的核心落地场景，千牛、飞书、医蝶谷均是典型代表。

改版实战案例 —— 医蝶谷医生工作台 旧版首页将极速问诊模块占据近 40% 首屏空间，对接单慢的新手医生不够友好；新版做业务与视觉双重优化：

1. 业务策略：将极速问诊模块收起，把问诊 Tab 整合到首页，首屏优先展示待办任务，医生打开 App 就能直观掌握当日工作，提升抢单门槛合理性。
2. 视觉策略：弱化功能图标饱和度，减少视觉干扰，把用户注意力引导到待办、消息等高价值业务信息上，而非花哨的图标样式。

实战案例：医疗医生端音视频排班设计

医生工作具备三大特征：突发事务多、多任务并行、流程复杂（手术、查房、带教、接诊、写病历穿插进行），排班时间碎片化、无固定周期。针对该业务痛点，落地三条设计策略：

1. 优化层级，提升屏幕利用率 将时间标签置顶，调整卡片内信息权重；自动收缩无任务的时间段，无需向下长距离滑动，首屏就能够看到全天完整排班。
2. 色彩标签传递信息，克制视觉元素 放弃复用 C 端业务图标，改用简约色彩标签区分不同问诊类型，快速识别排班类型。
3. 简化操作路径，降低操作成本 优化前添加一组时段需要 4 步，设置 3 段不连续排班要操作 12 次；优化后单条时段仅需 3 步，3 段不连续排班 4 步即可完成，大幅降低高频排班的操作负担。

B 端设计关键启示：视觉好看只是基础，所有交互、界面优化，都必须扎根于真实业务场景与用户工作习惯，行业壁垒高的产品，前期深度用户调研必不可少。

三、落地协作：设计师如何与开发配合，推动规范落地

多数 B 端移动端以 H5、RN 技术实现，便于多端复用。设计师不仅要输出视觉，更要理解前端实现逻辑，减少落地偏差，提升整体研发效率。

3.1 提升开发效率：框架先行，分层交付

不要等全部视觉完成再交付，优先输出页面的底层框架线框图给到开发，研发可以先搭建页面 DOM 结构，之后再交付视觉标注，完成 CSS 样式还原，实现部分并行开发，节约项目工时。

3.2 性能优化：图片资源策略，降低服务器与带宽压力

图片资源会占用服务器存储，同时影响页面加载速度：

1. 提高图片复用率，同一份素材多处复用；
2. 大图分层切图：将人物、主体元素从背景中拆分独立输出，实测可将图片体积减少约 50%，同时支持不同页面复用主体素材。

3.3 关注 H5 环境下容易踩坑的细节

1. 空格占位符  （1 个空格）、 （半个汉字宽度）、 （1 个汉字宽度），文本换行、间距实现需要提前和开发对齐规则。
2. 字重还原问题 PingFang 字体的 Medium (500) 在 Web/H5 环境下还原效果差，和常规字重几乎看不出差异。需要和前端提前约定：设计稿中 Medium 中黑体，代码直接写font‑weight:600，保障粗细效果和设计稿一致。

3.4 循序渐进推动设计规范落地

很难在一个版本完成全部规范整改。设计师需要兼具部分产品思维，对优化需求做优先级拆分，分版本迭代上线。 推荐建立排期跟进表格，记录需求描述、分类、版本、负责人、上线时间，明确状态，同步给产品、开发，持续跟进，避免规范只停留在设计稿无法落地。

转载：优设

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

前言

兰亭妙微ui设计公司分享：PC 端与移动端是当下最主流的两类人机交互载体。经过多年发展，两者各自形成成熟的交互范式：PC 依托鼠标 + 键盘完成操作，移动端以触屏手势为核心。

即便是完全相同的业务功能，落地到不同设备上，交互细节往往需要针对性调整，以此适配硬件特性，保障统一且舒适的用户体验。本文将从真实设计案例出发，拆解两者细微却关键的交互差异，帮我们理清设备、用户行为与界面设计三者之间的内在关系。

五大典型交互差异案例

1. 输入框清除按钮

清除按钮，作用是一键清空输入框内已填写的全部内容。输入内容不为空时，按钮展示在输入框尾部，点击即可清空文本。

PC 端依靠键盘退格键，就可以快速删除文字；但移动端触屏删除字符效率偏低，逐字删除操作繁琐。因此清除按钮在移动端非常普遍，登录页、搜索框是最高频的使用场景，帮助用户快速纠错，大幅提升操作效率。

反观 PC 网页端，单行输入框很少内置清除按钮，但 “一键清空” 的需求依然存在，大多迁移到批量场景中：例如 B 端后台筛选组件的「重置」按钮、多选组件内的批量清除选项，用来一次性清空多条筛选条件。

2. Hover（鼠标悬停）状态

鼠标悬停是 PC 端极具代表性的轻交互。当光标悬浮在组件上方，元素会发生状态变化：既可以唤起 Tooltip 提示文字、展开二级下拉菜单，也能通过样式变化，暗示用户 “该区域支持点击”。

而移动端没有鼠标光标，手指接触屏幕即触发点击，不存在 “悬停” 这个中间状态。组件状态只能从常态直接切换为按压态。 这就对移动端设计提出要求：按钮、可点击控件，必须依靠视觉样式明确表达可交互属性，不能依赖 hover 做提示。

原本依靠 hover 展开的二级导航、悬浮菜单，到移动端就要改成点击唤起弹窗，或是 Tab 标签切换的形式完成跳转。

3. 按钮操作 VS 手势操作

手势是移动端得天独厚的交互优势；PC 端受限于键鼠逻辑，更多依靠实体按钮承载功能。

举几个常见场景：移动端信息流普遍使用下拉刷新，把刷新行为和向下滑动手势结合；但 PC 端想要刷新局部内容，就必须提供独立的刷新按钮。 轮播图也是同理：PC 大多设置上一页、下一页点击按钮完成切换；移动端用户更习惯直接左右滑动切换图片。图片缩放、视频音量调节也遵循这套逻辑。

背后本质原因：鼠标可以精准定位到很小的按钮；移动端手指点击精度有限，屏幕空间宝贵，用手势替代按钮，既节省界面空间，也贴合用户操作直觉。

4. 右键菜单 VS 长按唤起菜单

PC 端习惯使用鼠标右键唤起更多操作菜单；移动端对应的等效交互是长按。

拿文本编辑举例：PC 端需要先选中文字，再点击右键调出剪切、复制菜单；移动端选中文本后，会直接弹出操作面板。 因为移动端缺少 Ctrl/Cmd 这类快捷键组合，如果选中文本后还要求用户再长按，极易误触，直接弹出菜单，能减少操作步骤，降低出错概率。

5. 弹窗设计逻辑

PC 屏幕空间充足，弹窗类型丰富，Tooltip、消息提示、抽屉、非模态通知都可以灵活使用，很多反馈提示不会阻断用户当前操作，体验更流畅。

移动端屏幕狭小，弹窗会占据屏幕绝大部分区域，会强制打断用户操作，因此弹窗的使用需要更加克制谨慎。

除此之外，弹窗内的按钮排布也存在平台习惯差异：移动端、macOS 系统，确认类强引导按钮通常放置在右侧；Windows 系统则将确认按钮放在左侧，设计时需要尊重系统原生交互习惯。

转载：优设

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

一、产品定位：先回答系统替谁解决什么问题

• 面向C端交易者： 产品致力于降低入门门槛，通过“个人仪表盘”和AI助手（Kaiana），将复杂的市场数据转化为可执行的洞察，让新手敢交易，老手交易快。
• 面向B端与生态： 通过区分Retail App、CFI Prime（机构版）和Web官网，构建分层服务体系。设计不仅要展示行情，更要传递“合规、透明、受监管”的品牌信任感，这是金融产品的生命线。

二、信息架构：把功能转译为用户的工作顺序

• 首页即驾驶舱： App首页打破了传统的列表式布局，采用模块化Widget设计。用户可以根据自己是偏向“看盘”、“学习”还是“资产管理”，自定义添加、移除或重排组件。这种架构将主动权交还用户，实现了“千人千面”的信息流。
• 资金流与交易流的解耦与重组： 在“Money Flows”板块，设计将存款、取款、历史记录从复杂的菜单中剥离，形成独立的线性任务流。而在“Trade & Portfolio”中，则将图表、下单面板、持仓列表紧密聚合，符合交易员“观察-决策-执行”的心流模型。
• 跨端体验的一致性： Web端侧重于品牌叙事、信任背书（如展示牌照、赞助商）和宏观产品介绍；移动端则聚焦于高频操作和实时反馈。两者在视觉语言上高度统一，但在信息密度上做了精准切割。

三、关键交互：从浏览信息走向完成任务

• 极简的资金操作路径： 存款和取款界面采用了“分步式”引导。例如转账界面，先选账户，再输金额，最后确认。每一步只展示必要信息（如预估到账时间、手续费），避免了传统银行APP那种填表式的压迫感。
• AI助手的对话式交互： Kaiana AI不仅仅是一个客服入口，它被设计为一种新的交互范式。用户可以通过自然语言（如“给我看看今天表现最好的资产”）直接获取图表和分析，缩短了从“产生疑问”到“获取答案”的路径。
• 暗色模式下的数据可读性： 针对交易员长时间盯屏的场景，交易界面默认采用深色背景。但在交互细节上，买涨（绿色）与买跌（红色）的按钮对比度极高，且数字键盘布局经过优化，确保在移动端单手操作的准确性。

四、视觉系统：品牌表达必须承担信息语义

• 科技蓝与金融黑的融合： 整体色调采用了深邃的蓝黑色系，这在金融行业通常代表稳重与科技感。高饱和度的霓虹色（如青色、亮蓝）仅用于关键数据点和CTA按钮，既突出了重点，又营造了类似彭博终端的专业氛围。
• 玻璃拟态与层级感： 在Web端和App的卡片设计中，运用了轻微的磨砂玻璃效果（Glassmorphism）。这种视觉语言不仅现代，更重要的是它在深色背景上有效地划分了信息层级，让复杂的数据看板显得轻盈而不杂乱。
• 实体化的数据隐喻： 宣传图中使用了悬浮的卡片、立体的手机模型和光线追踪效果，将无形的“数据流”具象化。这种视觉修辞暗示了产品的“流动性”和“即时性”。

五、面向产品与设计团队的可复用价值

• 模块化思维： 无论是App首页还是Web落地页，都采用了组件化思维。产品经理在设计时应考虑内容的“可配置性”，允许用户或运营人员根据需求组装页面。
• 情感化设计的克制应用： 金融产品通常冰冷，但CFI通过圆润的倒角、流畅的微交互和AI助手的拟人化形象，注入了温度。设计师应学习如何在保持专业性的前提下，通过细节缓解用户的焦虑感（特别是在亏损或操作失败时）。
• 全链路的信任构建： 设计不仅仅在App里，官网的“牌照展示”、“赞助商墙”也是用户体验的一部分。产品经理需要将“建立信任”作为核心指标，贯穿从落地页到开户再到交易的全流程。

六、专业审视：仍需补齐的体验边界

• 深色模式的无障碍测试： 虽然深色模式很酷，但在户外强光下（很多交易员会在户外看盘），低对比度的灰色文字可能难以辨认。需要增加“高对比度模式”或自动感光适配。
• AI hallucinations（幻觉）风险： Kaiana AI如果提供错误的投资建议，会带来巨大的合规风险。设计中必须包含显著的免责声明，并且AI的回答应当基于实时数据源，而非大模型的通用训练数据。
• 自定义带来的混乱： 首页完全开放自定义可能导致用户把界面改得面目全非，找不到核心功能。需要设置“恢复默认布局”的一键重置功能，并对模块的最小/最大尺寸做限制。
• Web端的性能负载： 官网使用了大量高精度的3D渲染图和动效，在低端设备或弱网环境下可能导致加载缓慢，影响首屏转化率。需要做充分的性能优化和降级处理。

结语：设计的最终判断标准是业务与使用价值

随着 UI 设计行业的持续发展，虽然已不再是一才难求的状态，但依然有很多人希望跻身这个行业。一面是不断涌入的新人，一面是在行业中步履维艰的奋斗者。面对这样的状态，你是否反思过：以自己当前的环境与专业能力，真的会 UI 设计吗？

UI 的美不只体现在表面，更藏在内在的体验中。

兰亭妙微在项目中经常遇到这样的情况：运营同学提需求说 "界面太乱、很难用，改得好看舒服一点"。但 "好看舒服" 背后，是对业务逻辑、用户场景和信息层级的系统性梳理。今天我们用一个真实的 H5 问卷后台改版案例，解析从需求到设计的完整过程。

兰亭妙微ui设计公司分享：交互设计师输出方案时，除吃透业务需求、研究用户行为与心理之外，一套成熟的交互设计原则是保障方案可用性的重要依据，尼尔森十大可用性原则就是行业最常用的设计标尺。本文结合真实项目实战，拆解其中的人性化帮助原则在业务中的落地方法。

所谓人性化帮助原则，就是在界面中通过各类功能、提示机制，辅助用户顺畅完成任务。尼尔森将帮助提示划分为三类实现形式：一次性提示、常驻提示、帮助文档。下面结合一次产品 2.0 改版项目，讲解三类提示该如何落地。

项目背景

本次迭代为产品某功能板块的 2.0 升级。前期收集用户反馈发现，大量用户的核心痛点：看不懂、不会用该板块功能。 基于业务诉求与用户痛点，我们确立改版在交互体验上两大核心目标：

1. 让用户感知到 2.0 版本的更新与功能变化；
2. 给用户提供有效指引，帮助用户顺利完成操作目标。

一、如何帮助用户感知新版功能

版本迭代后，页面入口重新整合、同时新增功能点位，新老用户进入页面很容易产生认知迷失。我们需要设计合理的引导，让用户快速读懂本次改版。

App 大版本更新，常会用全屏引导页介绍新能力；针对局部功能改版，常见方案有两种：页面定位式遮罩引导、更新弹窗，二者需要结合业务场景取舍。

• 更新弹窗：把全部改版信息集中弹窗展示，但弹窗空间有限，信息堆砌，用户很难逐个理解各个新入口的作用；
• 页面定位引导：以遮罩锚点聚焦单个功能入口，分步讲解，用户可以对照新旧版本差异理解，还可以顺着页面核心操作流程做演示，加深对功能与流程的记忆。

  

本次改版将原先零散入口收拢到同一页面，还新增了具备操作连续性的快捷入口，更适合分步聚焦讲解。因此最终选用页面定位遮罩引导，引导用户逐步认识改版后的页面结构。

二、如何帮助用户上手使用功能

理想的交互是足够直观，用户无需额外提示就能上手。但用户的产品经验参差不齐，新手、低频用户很容易在页面里陷入困惑，产生挫败感。就像逛超市，熟客清楚区域分布，而初次到访的顾客、老年用户，则需要清晰的区域标牌来指引方向。

针对不同场景，可以分别使用一次性提示、常驻提示、帮助文档三类帮助手段。

1. 一次性提示

一次性提示仅在特定时机出现：用户首次使用功能、版本更新，或是针对隐藏、不易察觉的操作；用户阅读关闭后就不再重复弹出。

场景案例 1：资料填写领优惠券弹窗 业务需要引导用户完善个人基础信息，完成后发放优惠券。最初方案是弹窗引导跳转填写，但是用户关闭弹窗、或是填写后返回页面，就再也找不到填写入口。 优化方案：用户关闭弹窗返回页面后，触发一次性气泡提示，告知用户入口位置，提示阅读完毕关闭后，就不再重复打扰。

场景案例 2：上传图片调整顺序 用户反馈：上传商品图片提交后，才发现图片排序不符合预期。为此新增拖拽调整图片顺序的能力，但该操作属于隐藏手势，用户很难主动发现。 解决方案：图片上传完成后弹出一次性气泡：「长按可调整图片位置」，用户手动关闭提示后，后续不再展示，完成操作认知传递。

2. 常驻提示

常驻提示会持续展示，多用于操作流程中必须知晓的警示、规则说明，提示文案紧贴对应的操作模块，不会自动消失。

场景案例 1：图片上传风险免责提示 用户自主上传商品图片，存在图片侵权风险。在图片上传模块下方放置常驻免责声明，持续提醒用户承担图片发布对应的相关责任，兼顾用户告知与平台风险规避。

场景案例 2：提交审核规则提示 用户编辑完商品信息提交审核，容易产生等待焦虑，不清楚审核时长、去哪里查看结果。 我们将审核周期、结果查看路径，以常驻说明文字放在「提交审核」按钮上方。用户提交之前就能完整知晓规则，消除等待过程的心理不确定感。

3. 帮助文档

帮助文档主要承载复杂规则解释、高频 FAQ，适合体量较大、不适合放在操作流程内的内容。 调研发现部分用户甚至不理解这个板块本身的用途。我们在页面增加「操作手册」常驻入口，里面收纳板块功能介绍、完整操作步骤、高频常见问题。当用户遇到困惑，可以主动查阅文档，自主解决疑问。

总结

人性化帮助原则不是简单堆砌弹窗、提示文字，而是分层设计：

• 改版、首次操作场景：用一次性提示做轻量化科普，避免长期打扰；
• 风险、关键规则类信息：用常驻提示紧贴操作，确保用户操作前能够看见；
• 复杂规则、大量 FAQ：收拢进帮助文档，供有需要的用户主动查阅。

好的帮助设计，是做用户的 “安全网”：优先做到界面本身足够易懂；在此基础上分层提供帮助，新手有指引，熟手不受干扰，遇到问题的用户可以找到解决方案。

转载：优设

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

前言

兰亭妙微ui设计公司分享：百度优选作为百度在 2023 年 5 月全新推出的电商业务，提出“百度优选，超会选”品牌主张，目标为广大消费者提供高效、精准、专业的消费决策参考。新品牌起步阶段，想要快速建立用户认知，设计团队借由大促营销、行业生态活动等关键事件持续输出品牌内容，层层夯实用户心智，逐步加深大众对百度优选的品牌印象。

一、新品牌基础体系搭建

LOGO 是品牌对外的一面镜子，承载品牌内核。本次设计围绕购物、亲和、优选三大核心关键词发散创意，提取购物袋、笑脸表情、代表 “优” 的字母 U&YOU、百度 “度” 首字母 D 作为视觉原型，传递轻松愉悦的购物体验感。

历经 5 轮迭代，产出 70 余套设计方案，最终确定整合 D 字母、笑脸、购物袋、U 元素的 LOGO 形态。品牌主色选用优选红，借暖色调的情绪感染力，调动消费者购物欲望，同时建立信任感。

配套完成整套品牌视觉规范：定制专属字体「百度综艺体」，输出横排、竖排多套 LOGO 组合版式，统一品牌视觉输出标准。后续依托 11.11、12.12、3.8、8.18 等核心电商大促，反复曝光品牌形象，持续强化用户认同感。

二、大促品牌心智的概念定位

伴随夜经济兴起，夜间消费需求持续释放。百度优选在 2023 双十一落地数字人直播 “日不落计划”，依靠 7×24 小时不间断数字人直播服务 C 端用户；搭配搜索端 AI 购物助手智能导购，为用户提供专业商品推荐，提升选购效率，催生全新消费业态。

基于 AI 驱动的新消费模式，设计团队确立四大心智建设方向：造场景‑节日化、造趋势‑智能化、造品质‑营销化、造记忆‑品牌化，为整个双十一大促视觉搭建顶层逻辑。

1. 造场景：紧扣夜经济，烘托大促节日氛围感
2. 造趋势：诠释全新消费模式，传递智能化消费感知
3. 造品质：聚焦优质商品，用营销视角放大商品价值
4. 造记忆：放大 IP 与品牌曝光，完成品牌化传播

三、落地：把品牌心智融入设计全链路

围绕四大心智方向提炼视觉关键词与设计元素，融合 3C 数码、食品酒水、服饰穿搭、美妆个护等主流品类，完成整套主视觉设计输出。

1. 主视觉设计理念

主视觉以 “夜生活” 为核心场景，还原电商 24 小时不间断经营的新业态。夜空礼花、环绕堆叠的商品渲染狂欢的大促氛围；数字人带货、智能推荐的视觉符号体现智能电商的行业新趋势；品牌 IP、超级符号反复露出加深用户记忆；高精度 3D 视觉表现，充分展示各品类商品，传递电商营销氛围感，本次双十一主题定为AI 购物狂欢节，狂欢日不落・24 小时嗨购不停。

2. 品类会场：AIGC 解决业务痛点

双十一期间要上线九大品类会场，面临两大现实难题：

• 活动频次高，物料需求量巨大，人力供给紧张；
• 既要统一品牌调性，又要实现不同会场之间的视觉差异化。

AIGC 恰好成为破局关键。团队先从 LOGO 中拆解提炼出微笑曲线超级符号，把微笑服务的品牌内核植入视觉，强化品牌记忆点。

工作流升级为：超级符号 + AIGC 生成品类素材 + 人工二次创作，产出最终页面。对比传统纯人工设计，单活动页面设计效率得到显著提升，高效化解素材多、人力不足的困境。

团队为九大品类会场规划五套差异化配色，在保证整体风格统一前提下，利用 AIGC 批量生成成套视觉物料。项目沉淀 80 + 可复用的品类设计组件，形成设计资产库，能够持续赋能后续运营活动，实现长期复用复利。

完成物料生产之后，将统一的主视觉风格完整覆盖搜索、商城、直播三大业务场域，落地 11 类营销玩法与全部重点资源位，保障全渠道活动视觉表达高度统一。

总结

百度优选通过多轮大促实践，持续输出品牌内容，不断扩大品牌曝光。未来，团队将继续围绕新一代智能电商平台的品牌定位持续迭代设计方案，进一步提升百度优选的用户感知与市场口碑。

转载：优设

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