兰亭妙微ui设计公司分享：在 UI 组件体系中，按钮是使用频率最高的基础控件。看上去只是圆角矩形搭配文字，却承载着整套界面的交互逻辑。实际项目里不少设计师都会遇到类似困境：从专业角度判断按钮字号不宜过大，但业务方坚持放大文字，沟通过后只能妥协。一枚小小的按钮背后，藏着大量容易被忽视的细节，本文完整拆解按钮设计的知识框架与落地规范。

一、按钮的核心价值：它到底承担什么作用？

按钮的本质是触发即时交互行为的界面控件，并非单纯的视觉装饰。核心目的是降低用户决策成本，清晰传递 “此处可交互，点击后将发生对应行为”，主要体现在三个方面。

1. 执行功能性操作 展开收起、数值增减、下拉切换这类高频基础操作，常使用图标按钮实现。视觉上做弱化处理，把视觉重心留给页面主体信息，按钮仅承担工具属性。

   

2. 引导用户完成下一步动作 这是按钮最常见的用途。绝大多数交互页面依靠按钮承接核心行为：创建、保存、提交、确认，将产品业务流程转化为用户可感知、可点击的操作入口。

   

3. 塑造用户的使用习惯 当用户重复点击按钮获得正向反馈，就会形成使用心智。签到、领取权益等可带给用户收益的操作，可以适度强化按钮视觉权重，加深用户点击行为，培养产品使用惯性。

   

二、按钮的 5 大基础类型，分清层级再使用

不同按钮对应不同行为优先级，页面内需要做好区分，避免层级混乱。

• 主按钮：页面核心行动点，同一操作区域内只保留一个主按钮，用于凸显最高优先级操作。
• 默认按钮（次按钮）：适用于无明显强弱区分的并列操作，作为主操作的补充选项。
• 虚线按钮：多用于新增类操作，传递唤起新建流程的语义。
• 文本按钮：弱视觉次级操作入口，不抢夺页面主体焦点。
• 链接按钮：专门用于外部页面跳转的交互元素。

三、完整交互状态：不止正常点击，这些状态不能漏

很多设计师只设计正常、点击两种样式，一套完备的按钮组件，需要覆盖交互状态与业务属性状态。

交互状态（桌面端 & 移动端区分）

1. Normal｜正常状态：按钮默认展示形态，页面静态下的标准样式。

   

2. Hover｜悬浮状态：仅桌面端生效，鼠标悬浮提供视觉反馈，移动端不存在悬浮态，一般采用低透明度黑色叠加实现，样式可跟随产品风格调整。

   

3. Click｜点击状态：鼠标点击或手指按压瞬间的反馈，触发业务动作，视觉表现加深，效果可自定义。

   

4. Disable｜禁用状态：代表当前操作不可执行，常见于表单未完成填写、校验不通过场景。

   

两种落地方式：一是直接置为灰色，属于行业通用做法；二是保留原有色相，降低透明度。禁用按钮视觉强度必须显著弱于可操作按钮，同时需要引导用户补齐前置条件，解除禁用限制。

业务属性状态

• 常规按钮：普通正向操作，系统通用样式。
• 危险按钮：删除、权限变更、数据销毁等高风险行为，建议搭配二次确认弹窗使用。
• 幽灵按钮：描边样式，适配复杂背景，多用于落地页场景。
• 加载按钮：异步请求等待阶段使用，配置加载动画，规避用户重复提交。

四、实战避坑：按钮设计 9 条准则 & 禁忌

1. 同一操作区，仅保留 1 个主按钮

页面同时出现多个高权重主按钮，会加重用户选择负担。产品追求低思考成本的体验，次要操作降级为描边按钮或文本按钮。弹窗对话框内这条规则尤为关键。

2. 圆角值匹配产品调性，拒绝盲目跟风

• 直角：偏向严谨克制，适合企业级 B 端后台产品。
• 小圆角：通用性最强，兼顾严谨感与柔和感，绝大多数项目优先选用。
• 胶囊大圆角：风格属性极强，更适配年轻化产品，全局把控成本高，谨慎使用。

切忌使用过渡模糊的中间圆角，容易产生廉价违和的视觉感受。

3. 按钮文案精简，拒绝折行

按钮文案简短有力，优先使用动词，避免长句，禁止文字换行。文案过长应当优化文字表述，而不是单纯放大按钮尺寸。

4. 文字与容器比例协调

按钮常用字号 12px、14px。文字占比失衡，会出现拥挤压抑或者空洞松散的问题，破坏界面精致度，这也是设计师与业务方经常产生分歧的地方。

5. 弥散阴影，仅限主按钮使用

如需增加投影，阴影色调尽量继承按钮本身色相，营造通透感。只有主按钮可以配置阴影，次按钮、文本按钮增加阴影会打乱层级，降低识别效率。

6. 同组主次按钮样式体系统一

弹窗、表单模块内部，主、次按钮严格沿用组件库既定样式，不要随意修改描边、圆角、填充色，避免样式碎片化。

7. 和周边组件做好视觉区隔

不要让按钮和卡片标题、标签、模块卡片外观趋同。一旦控件样式混淆，用户无法快速识别可点击区域，造成认知障碍。

8. 兼顾浅色 / 暗黑模式适配

暗黑模式已经成为标配，设计按钮时，同步校验亮色、暗色两套主题下的色彩对比度，保证可读性。

9. 弹窗、提交页，主按钮放右侧

弹窗、确认对话框、表单提交场景，确认主按钮放置右侧，取消次要按钮放置左侧；普通业务页面可根据布局灵活调整，这也是解决团队设计分歧的实用原则。

五、按钮尺寸的规范思路

可以参考这套尺寸逻辑：

按钮高度 = 文字行高 + Xn 按钮宽度 = 文字宽度 + Xn

n 为产品定义的基础间距单位，X 为自然数。这套逻辑同样可以复用到卡片、模块间距等组件规范搭建。

提示：按钮文字优先选用 12px、14px，避免字号过大。行业常用按钮高度：40px、36px、32px、28px、24px，可直接落地组件库。

写在最后

按钮只是 UI 系统里一个很小的组件，但细节决定整体体验。无论组件体量大小，设计师不应当只输出视觉，更要思考样式背后的交互逻辑与用户心智。打磨好每一处微小细节，产品体验才能够持续提升。

转载：站酷

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

兰亭妙微ui设计公司分享：这张“认知偏差图谱”对 PM、UX/UE、 UI设计师 来说，简直就是一本《用户大脑操作手册》。 如果说编程是写给机器的代码，那么认知偏差就是写给人类大脑的“底层代码”。

这张图片展示的是著名的 “认知偏差这一图谱” (Cognitive Bias Codex)。这是一个系统性的知识图谱，由 Buster Benson 整理分类，John Manoogian III 设计。

核心逻辑是：人类的大脑不是为了追求“真理”或“逻辑完美”而进化的，而是为了“生存”和“效率”进化的。

这张图将180多种认知偏差归纳为人类大脑必须面对的四大核心挑战（Four Conundrums）。我们可以从这四个维度来深度解构：

第一维度：信息过载 (Too Much Information)

挑战：

世界上每秒钟发生的信息量不仅庞大，而且极其复杂，我们的大脑无法处理所有细节。

大脑的应对策略（过滤器）：

大脑必须进行过滤。它会激进地忽略绝大多数信息，只捕捉它认为重要的部分。

产生的偏差逻辑：

1. 我们只关注显眼或奇怪的事物： 比如Bizarreness effect（怪诞效应）。大脑对平庸的事物视而不见。
2. 我们只关注变化： 比如Anchoring（锚定效应）。我们往往根据对比来判断价值，而不是事物的本质。
3. 我们只关注证实自己信念的信息： 比如Confirmation bias（确认偏误）。为了节省能量，大脑拒绝处理那些挑战我们现有世界观的信息。
4. 我们容易被重复的信息洗脑： 比如Availability heuristic（可得性启发法）。我们误以为刚听到的、或记忆深刻的事情就是大概率事件。

深度洞察： 在这一象限，所谓的“偏见”，其实是大脑的“降噪耳机”。

第二维度：意义匮乏 (Not Enough Meaning)

挑战：

世界是碎片化的、模糊的。看到的信息往往是不完整的，但这让我们感到不安和困惑。

大脑的应对策略（脑补）：

大脑是一个故事生成器。它会自动填补空白，强行寻找规律，哪怕这些规律并不存在。

产生的偏差逻辑：

1. 我们在稀疏的数据中寻找模式： 比如Gambler’s fallacy（赌徒谬误）或Pareidolia（幻想性视错觉，如看云像人脸）。我们无法接受随机性。
2. 我们用刻板印象填补未知： 比如Stereotyping（刻板印象）或Halo effect（光环效应）。因为了解一个人太累，不如直接给他贴标签。
3. 我们把熟悉的人事物想得更好： 比如Out-group homogeneity bias（外群体同质性偏见）。对自己人哪怕做坏事也有苦衷，对外人则认为他们本性如此。
4. 我们会简化数字和概率： 大脑不擅长数学，我们更喜欢简单的因果关系，而非复杂的概率分布。

深度洞察： 在这一象限，大脑是一个“编剧”，为了让世界看起来合理，它不惜虚构情节。

第三维度：需要快速行动 (Need To Act Fast)

挑战：

时间是有限的。如果我们在丛林里看到风吹草动，思考太久会被吃掉。在这个象限，速度 > 准确度。

大脑的应对策略（直觉决策）：

大脑会牺牲精确性来换取自信和决断力。

产生的偏差逻辑：

1. 为了行动，我们需要过度自信： 比如Dunning-Kruger effect（达克效应）或Overconfidence effect（过度自信效应）。如果我们知道自己多无知，可能就不敢行动了。
2. 为了专注，我们偏向眼前的利益： 比如Hyperbolic discounting（双曲贴现）。眼前的一个苹果比下周的一箱苹果更有吸引力。
3. 为了避免后悔，我们维持现状： 比如Sunk cost fallacy（沉没成本谬误）或IKEA effect（宜家效应）。我们不愿承认过去的投入是浪费的。
4. 我们要显得自己很重要： 比如Spotlight effect（聚光灯效应）。我们总觉得别人在关注我们，这让我们行为更谨慎（或更冲动）。

深度洞察： 在这一象限，大脑是一个“赌徒”，为了不错失机会，它宁愿错判也不愿不判。

第四维度：该记住什么？ (What Should We Remember?)

挑战：

也就是存储空间有限。我们不能记住所有吃过的早餐。

大脑的应对策略（压缩与重构）：

记忆不是录像带，而是经过剪辑的摘要。我们只存关键帧。

产生的偏差逻辑：

1. 我们事后会修改和强化记忆： 比如Misattribution of memory（记忆错误归因）。记忆是会被当下的环境篡改的。
2. 我们只记概略，忽略细节： 比如Implicit stereotypes（隐性刻板印象）。
3. 我们根据体验的高峰和结尾来记忆： 比如Peak-end rule（峰终定律）。一段经历好不好，全看最爽的时刻和结束的时刻，中间的过程会被忽略。
4. 外部能存的，大脑就不存： 比如Google effect（谷歌效应）。既然能搜到，大脑就会选择遗忘。

深度洞察： 在这一象限，大脑是一个“吝啬的图书管理员”，它只保留它认为将来用得上的目录，而且经常把书名贴错。

总结：如何运用这张图？

对这张图的深度理解，不仅仅是背诵这些名词，而是认识到：

偏见是人性的出厂设置（Feature, not Bug）：

这些偏差在远古时代帮助人类活了下来。锚定效应帮我们快速比价，从众心理帮我们融入部落。

现代社会的错配：

在现代复杂的金融、职场和社交环境中，这些原本用来“省电”和“保命”的快捷方式，变成了阻碍我们做出理性决策的Bug。

元认知（Meta-Cognition）：

这张图的最大价值在于自省。当你下次想把所有的功劳都归于自己时，看一眼“自利偏差”；当你觉得某个投资肯定涨因为最近都在涨时，看一眼“近期偏好”。

对PM、UE、UI带来的价值是什么？

对产品经理 (PM) 的帮助

核心价值：商业策略、定价模型、用户留存、决策避坑。

PM 往往背负着 KPI（转化率、留存率、GMV），需要从宏观层面设计产品的机制。

定价与营销策略 (利用锚定效应 & 框架效应)：

应用：

• 在定价页面，利用 Anchoring (锚定效应)。先展示一个贵的“企业版”，再展示一个“超值版”，用户会觉得后者非常划算。
• 利用 Decoy Effect (诱饵效应)。设置一个没人买的“诱饵选项”，只为了衬托主推套餐的性价比。

用户留存与活跃 (利用损失厌恶 & 沉没成本)：

应用：

• 利用 Loss Aversion (损失厌恶)。文案上，“您即将失去5折优惠”比“您将获得5折优惠”更能驱动点击。
• 利用 Sunk Cost Fallacy (沉没成本谬误)。设计会员成长体系或积分系统，用户投入越多时间（沉没成本），越离不开平台。

需求挖掘与自我纠偏 (避免确认偏误)：

警惕：PM最容易犯 Confirmation Bias (确认偏误)。做用户访谈时，只听得进支持自己想法的声音。这张图提醒PM：你要寻找证伪的数据，而不是证实的数据。

对 UX/UE 设计师 (交互/体验) 的帮助

核心价值：降低门槛、引导路径、减少挫败感、流程设计。

UX 的核心是“好用”，让用户不思考（Don’t make me think）。这张图告诉 UX 设计师大脑的“带宽”有限。

减少认知负荷 (应对信息过载)：

应用：

• 对抗 Choice Overload (选择过载)。不要给用户太多选项（席克定律），选项越多，用户越可能放弃选择。
• 利用 Default Effect (默认选项效应)。人类是懒惰的，把最希望用户选的项设为“默认勾选”（如下载安装包时默认勾选“同意协议”）。

优化体验流程 (利用峰终定律)：

应用：利用 Peak-End Rule (峰终定律)。用户记不住整个流程，只记得最爽的瞬间（Peak）和结束时的感觉（End）。

实操：哪怕中间流程平淡，但在“支付成功”或“任务完成”的那一刻，要给出一个超棒的动画反馈或奖励，用户就会觉得整个体验很棒。

表单与信息架构 (利用序列位置效应)：

应用：利用 Serial Position Effect (序列位置效应)。用户倾向于记住第一个和最后一个项目。把最重要的功能放在菜单的开头或结尾，而不是中间。

对 UI 设计师 (视觉) 的帮助

核心价值：视觉焦点、信任感建立、情感化设计。

UI 需要在0.1秒内抓住用户的眼球，并传递正确的情绪。

引导视觉注意力 (利用冯·雷斯托夫效应)：

应用：利用 Von Restorff Effect (隔离效应)。在一组相似的元素中，那个“不一样”的会被记住。

实操：为什么“购买按钮”的颜色通常和背景色对比强烈？就是为了利用这个偏差，让大脑第一眼捕捉到它。

建立信任感 (利用美即好用效应)：

应用：利用 Aesthetic-Usability Effect (美即好用效应)。用户会觉得“长得好看”的界面“更好用”、“bug更少”。

实操：高级的排版和精美的插图不仅仅是为了美，是为了降低用户对系统错误的容忍度。

利用熟悉感 (利用单纯曝光效应)：

应用：利用 Mere Exposure Effect (单纯曝光效应)。人们喜欢熟悉的东西。

实操：UI 图标设计尽量遵循通用的设计规范（如放大镜代表搜索），不要为了创新而创新，陌生的图标会让用户警惕和困惑。

一句话总结：这张图展示大脑为了在这个复杂世界中生存，会通过”过滤信息、填补意义、快速反应、选择性记忆”四种方式来简化现实——这些认知捷径既是生存智慧，也是商家理解用户行为、设计消费体验的重要科学依据。

转载：人人都是产品经理

兰亭妙微（蓝蓝设计）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设计公司分享：移动端底部导航栏（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设计公司分享：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。

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设计公司分享：在产品设计中，真正打动用户的，往往不是宏大的功能，而是一个个细腻巧妙的细节。一句共情的文案、一段独特的交互、一处别出心裁的视觉表达，都可以击穿用户心理，带来超出预期的体验惊喜。

本期整理了 10 个充满巧思的产品设计案例，拆解它们的设计思路，希望能够给各位设计师带来灵感，共同交流成长。

温馨提示：文中配图均来自各产品截图，仅用于设计学习交流，如有侵权，请联系删除。

目录

一、趣味二层楼交互：下拉刷新的创意玩法 二、情感化文案：用文字唤醒沉睡用户 三、鼓励式设计：强化用户的成就感 四、双向反馈设计：让用户感知被重视 五、弹出式金刚区：高效收纳拓展功能 六、重力交互徽章：让成就展示更鲜活 七、多元头像预设：降低个性化设置门槛 八、拟人化客服入口：拉近咨询的距离 九、场景化按钮：把产品场景融入控件 十、微动效按钮：调动用户点击欲望

一、趣味性的二层楼设计：下拉刷新的创意玩法

下拉刷新 “二层楼” 已经成为移动端非常成熟的交互模式，常被用于活动营销、功能推广，玩法也不断迭代出新。

麦当劳 App 猫窝 3.0 活动，就巧妙结合猫爪视觉符号与下拉刷新动作，打造极具趣味性的二层楼营销入口。把简单的下拉动作，变成充满仪式感的趣味体验，既抓住用户眼球，也提升用户参与意愿。

二、通过情感化的文案激活用户

用户活跃度，直接决定产品功能价值能否充分释放。如何唤醒长期沉寂的用户？情感化文案是成本很低却效果出众的手段。

钉钉运动为推动捐步功能的用户参与，针对久未使用功能的用户输出共情向文案，搭配 “天降幸运” 的心理暗示，给到用户意外的小奖励，用情绪共鸣完成用户唤醒，实现产品目标。

三、鼓励式设计，放大用户成就感

闯关、刷题类产品中，鼓励式设计被广泛使用。通过正向反馈不断给予用户肯定，放大成就感，以此提升用户投入度。

驾考宝典 App 就运用了这套思路：用户刷题连续答对题目时，页面会弹出连对提示给予正向激励。不断强化用户的做题成就感，驱使用户更加专注刷题，激发学习进取心。

四、通过反馈提升双向体验感

收集用户评价与反馈，是产品迭代的重要依据。当产品涉及多方角色时，一套合理的反馈链路，能够同时提升多方体验。

高德地图打车业务，会在行程前后分别收集用户评价。一方面用户的意见可以给到司机作为改进参考；另一方面用户的反馈行为本身，也会让用户感受到自己的想法被平台重视，一举两得，优化整体服务闭环。

五、弹出式金刚区功能延展

金刚区是 App 首页核心流量位，创意主要集中在图标视觉与交互形式上。

携程旅行 App 做了一次有意思的迭代：不再把全部功能平铺展示在首页金刚区，将更多功能收纳进底部弹窗。点击金刚区入口，弹窗呼出更多功能。既压缩金刚区占用版面，提升首页空间利用率，也拓展了金刚区的交互可能性。

六、趣味性的徽章展示

徽章是用户线上成就的符号，徽章的视觉表现、交互形式，会直接影响激励效果。

B 站创作中心对创作者徽章做了创意表达：采用玻璃球质感，结合重力感应动态效果。转动手机，徽章就跟随重力滚动，互动感十足。既强化徽章的视觉权重，也激励创作者持续产出内容，努力解锁更多成就。

七、丰富多样的头像预设

头像作为用户个人标识，代表着自我表达需求。完备的头像预设库，能够降低用户个性化设置的操作成本。

嘀嗒出行 App 个人中心头像设置模块，准备了风景、美食、运动、动物、植物等多风格头像素材，同时支持一键随机更换。丰富的预设，满足不同用户审美偏好，让用户无需自行上传图片，也能快速设置个性头像。

八、让在线咨询更真实

在线客服是大多数产品的标配。常规入口多为图标、文字按钮，而加入人物形象，就可以弱化机器感，拉近和用户的心理距离。

马蜂窝 App 在线咨询按钮嵌入客服头像，仅仅一处微小改动，就让客服入口更具真实的人感。降低用户咨询的心理门槛，间接提升咨询转化。很多时候体验升级，就藏在这些不起眼的小细节之中。

九、场景化的按钮设计

同质化 UI 环境下，把产品业务场景融入控件，是打破千篇一律界面的有效思路。

携程机票权益中心的按钮设计十分巧妙：控件复刻飞机舷窗轮廓与挡板形态。默认状态挡板闭合，点击之后模拟挡板推开，露出窗外风景，把坐飞机的场景直接封装进按钮交互，创意直观易懂。

十、动态按钮更有点击欲

按钮的视觉表现，直接影响用户的点击意愿。相比静态样式，微动效能够带来更强的视觉吸引力。

红果短剧 App 广告按钮就使用气泡发散的微动效，动态元素让按钮在页面中脱颖而出，有效抓住用户视线，提升点击转化。

转载：站酷

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

兰亭妙微ui设计公司分享：好的 UI 作品，背后都有一套可复用的设计逻辑。优秀设计师不是靠灵感堆砌画面，而是把底层设计原则内化到每一次排版、每一个组件当中。吃透下面这四项核心原则，反复练习推敲，能够快速打通设计思路，实现设计能力的稳步提升。

一、对齐：秩序，即是视觉之美

秩序，代表把界面元素有条理、有逻辑地组织排布，形成整洁舒适的视觉观感。生活里造型优美的建筑、排列规整的物件，都是依靠秩序带来美感。映射到 UI 界面中，对齐就是构建页面秩序最基础的手段，对齐做好了，页面就不会杂乱松散。

UI 设计中对齐的两大要点

1. 各类元素相互对齐 文字与文字、文字与数字、文字与图片、图片与图片，以及各个内容模块之间，都要建立对齐关系。严谨对齐的界面，整体观感规整克制；一旦对齐关系混乱，页面就会显得粗糙、不专业。

   

2. 保证间距体系统一 界面间距建议遵循 4pt / 8pt 倍数栅格规范（1 倍设计稿），用标准化数值约束内外边距。 例如微信聊天列表左右边距设置 16pt，京东首页采用 12pt 边距；电商场景适当收窄边距，能够留给内容更多展示空间。

   

小结：对齐不只是 “把线条对上”，而是建立一套统一的视觉坐标系，奠定整个页面的基础骨架。

二、格式塔原则：理顺远近亲疏，降低用户理解成本

格式塔理论的核心：人的眼睛会自动把视觉元素做分组归纳。设计师利用这套心理规律，划分信息层级，让用户一眼读懂内容关系。它包含六大子原则：亲密性、相似性、连续性、封闭性、对称性、主体与背景。

1. 亲密性（邻近原则） 距离更近的元素，大脑会默认为它们属于同一组。 标题和配套正文距离要近，不同模块之间拉开距离。如果标题与正文间距过大，模块边界模糊，用户就很难识别内容归属。

   

2. 相似性 形状、颜色、大小等属性相近的元素，会被感知为同类。 支付宝应用中心就是典型案例：同一功能板块下的图标，会使用相近色调，用户可以快速区分理财、生活服务、公益等不同功能分组。

   

3. 连续性 人会下意识把断开的图形脑补成连续完整的形态。 惠普、苹果的品牌 Logo 都存在缺口，但我们依然可以识别出完整图形轮廓。UI 中很多分割线、指示箭头，同样会利用连续性引导视线流动。

   

4. 封闭性 哪怕图形没有完整闭合，大脑也会自动补全轮廓。 APP 首页里，卡片只露出一小部分，我们依然能够识别这是完整卡片，暗示页面可以横向滑动浏览更多内容。

   

5. 对称性 对称的布局会带来稳定、均衡的视觉感受。 应用商店网页端，左右两个卡片区块采用对称排布，视觉平衡，阅读体验舒适。

   

6. 主体 / 背景（主次层级） 画面里视觉权重更高的对象，会成为主体，其余内容退居背景。 弹窗就是这个原则的典型应用：弹窗作为主体浮于页面之上，底层页面变暗弱化，强制用户聚焦弹窗内的核心信息。

   

小结：格式塔原则本质是善用人的视觉本能，不用多余线条，仅靠位置、颜色、形状，就完成信息分组。

三、呼吸感：把控留白，让界面张弛有度

所谓呼吸感，核心就是留白与间距。 就像拥挤的城市街道让人压抑，开阔山野使人放松，界面也一样。全部元素挤在一起，信息满满当当，会带来强烈压迫感；合理留出空白，界面才会松弛通透。

留白不是无意义的空白，它是界面的组成部分。它隔开不同模块，区分信息层级，缓解视觉疲劳，同时突出核心内容。很多精致的移动端界面，组件之间预留充足留白，整体干净清爽，就是呼吸感的直观体现。

误区提醒：呼吸感不等于一味拉大间距，留白需要和内容体量匹配，平衡信息密度与视觉舒适。

四、配图与图标精细化：细节决定页面质感

图片与图标是 UI 页面的重要加分项，细节处理不到位，会直接拉低整套设计的品质。

配图

圈内有句玩笑话：“做设计一小时，找图四十分钟”，足以说明配图的重要性。优质配图拥有完整的构图、光影与层次，能够烘托页面氛围；劣质图片会破坏整体调性，再精致的排版也会被抵消。

图标

图标是功能的可视化入口。清晰易懂、绘制精致的图标，能够引导用户操作，提升转化；反之表意模糊、细节粗糙的图标，会让用户产生困惑，阻碍信息传递。

建议使用标准化「图标盒子」工具规范图标输出，统一圆形、方形、扁形、高挑型图标视觉尺寸，保证整套图标视觉重量均衡。工具提供 PSD、Sketch 两种格式，方便设计师落地使用。

转载：优设

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

用户体验设计与心理学有着根深蒂固的联系 —— 社会心理学、行为心理学和认知心理学，共同构成了理解用户行为的底层框架。兰亭妙微在近期的设计研读中，系统梳理了七个对体验设计影响深远的心理现象，与大家分享。