2020 年小编及团队成员对 Speedwork Customer App 及 Workshop App 进行了“从 0 到 1”的设计，包括设计理念到视觉语言，界面框架到组件模式，单用户触点到全链路场景。

往期回顾：

企业出海！设计师如何做好产品本地化设计：竞品分析印尼篇 上一章，我们宽泛的了解印尼的宏观环境、电商市场、移动市场、支付、物流、税收、汽车及两轮汽车市场、汽车后市场。

阅读文章 >

C 端设计内核探索 回到最基础的 用户体验 设计流程，我们需要对 Speedwork 的商业目的、产品目标及用户需求进行深挖，也就是战略层。 站在 C 端用户的角度上，能想到的关键词为：正品保障、专业服务、价格实惠透明、便捷、选择多等等。我们的任务是打通线上线下体验闭环，关注各个用户触点的产品体验，帮助用户更轻松更高效的完成汽车养护，建立平台品牌心智。

Speedwork Customer App 的目标用户为两轮、四轮汽车车主。通过对目标用户的问卷调研，针对 C 端用户在购买转化阶段的主要决策因素进行分析，对其中的 21 项因素做了基于 KANO 模型的分析，考察不同因素在购买时候的影响程度。

UI 进阶必学系列：需求分析工具 KANO 模型 大家知道，长期以来我们一直在坚持分享一些基础的干货内容，那些看书、看分享很难系统搞得明白的知识点，这和我个人对基本功的执念有密不可分的关系。

阅读文章 >

最终 Speedwork Customer App 的核心理念聚焦在 4 个关键字：简、好、惠、安。

Auto care supplies & services on demand. 品牌触达，情绪共鸣

1. 简单易用

基于养车业务的线上化，更多的内容和服务需要在 Speedwork 上去体现。不论对于内容的认知，还是平台产品功能的操作体验，我们都希望能以简单的方式直接面向用户，让用户能够轻松掌控一切并能感受到细致入微的服务体验。

2. 正品保障、贴心服务、便捷体验

“专业养车”是 Speedwork 需要传递的第一印象。我们希望通过一致性、亲切感、场景化的表达让用户感受到专业信赖、贴心服务的 Speedwork。设计师需要在界面上将正品保障、质保服务、专业度进行透出，将心智传达到用户侧。

3. 产品的价格有竞争力

印尼的人均客单价低：平均网购额为 481000 印尼盾（约合 36 美元），这一数据远低于新加坡（平均 91 美元），印尼在东南亚国家中排名倒数第二。因此有竞争力的价格，一定是初期获客的关键因素。由于人的大脑存在“损失厌恶”等认知的偏差，利用这些认知偏差我们可以给用户适当的紧迫感，例如加一些限时限量的元素，所以如何在用户决策的拐点界面去呈现促销是设计的重点。

4. 数据安全与隐私保护、数字支付安全

第一章提到由于消费者对于在线交易缺乏信任且信用卡普及率低（印尼不到 5%的人拥有信用卡），所以在线支付的时候消费者更倾向于银行卡支付及货到付款。受疫情影响，印尼的消费者大大减少了对现金的使用，电子钱包成为在线支付的最优选择。作为一个汽车养护电商平台，保护用户数据及支付安全，是获得用户信任做出购买决策因素之一。

统一的视觉语言 1. 情绪板

我们使用情绪板确定视觉的方向，明确契合汽车养护场景，探索建立一个专业、信赖的品牌主色，让用户直观的感受到品牌理念。通过对“简、好、惠、安”4 个关键字进行映射衍生（视觉、心境、物化），检索出具有代表性的图片，进行情绪版的制作。

最终我们选用绿色作为产品主色，绿色在印尼本地是非常受欢迎的颜色，绿色是穆斯林的代表色，本土电商 tokopedia 以及生活出行的两大巨头 Grab、Gojiek 的产品色也都选取了绿色。

2. 框架搭建

从 3d 视角去看界面，可将页面水平切片为背景层、内容层、框架层、临时层。从下往上看，背景层是整个页面的全局背景色，内容层是承载着不同页面功能需求、业务诉求；框架层主要是标题导航栏和底部菜单栏，它们是控制全局页面跳转关系的；临时层主要是事件的展示，比如动作面板、选择器、对话框、提示、通告栏等。

3. 建立规范

相信大家对设计规范、设计系统都不陌生，我们基于原子设计理论，分别建立中后台产品、移动端的设计规范，将业务与设计解耦，将组件拆分成原子级，再进行拼装，从最小颗粒度（原子）、简单组件（分子）、复杂组件、模版、再到最后的页面搭建。当业务复杂度高的时候，设计师会根据不同业务进行业务组件的设计。但业务组件的基础其实都是在于原子级设计，只是业务组件不具备通用性。

4. 注入品牌 DNA

我们结合品牌基因，增强识别，并通过网格化规范绘制，使得整体统一有序。

细节的体验设计 1. 字体的选择

设计师要注意产品所使用的字体是否有版权问题，尽量使用开源字体，并且该字体能适配多语言。Speedwork 使用的字体是 Roboto，和 logo 的文字字体一致且能够适配泰语、印尼语、越南语和马来语。Roboto 是随着 Android 4.0 操作系统引入的一种无衬线字体系列，该字体由谷歌的界面及字体设计师 Christian Robertson 设计，并且完全开源使用。

2. 多语言适配（印尼语&英语）

Speedwork 交付的时候不止是在印尼上线，同时会进入马来市场。因此界面设计时需同时考虑到印尼语和英语的字段长度，避免固宽的控件里文字被截断展示或者换行的情况。另外一个问题，我们设计是以英文交付的，印尼运营人员再根据英文翻译印尼语，这个时候翻译者一定要考虑到展示场景，尽可能的准确及简短。

3. 手机号格式

在竞品分析的章节，不知大家是否留意到，Planet Ban 的手机号填写规则是最小 10 位数且需开头加 0，例如 08**********；Bukalapak 和 tokopedia 的注册页也在输入框下面增加了提示“例如：081234567890”；但是 Shopee 是自动根据手机号去识别是那个国家的号段，当小编输入手机号后自动识别为（+62）822-****-****。经过分析对比可看出，印尼本地产品不支持其他国家手机号注册，因此无需选择或展示+62（国家代码），Shopee 和 lazada 都是针对东南亚市场多个国家的，所以会展示国家代码。

印尼手机号为 08 开头，从 10-13 位都有，其中超过 90%的为 12 位，11 位和 13 位约为 4%，10 位的不足 1%，因此手机位数的判断是“10～13 位数字”，如果去 0 输入，则手机号位数判断应该是“9～12 位数字”。为什么可以去 0，因为 0 后面开始的 3 位才是运营商的号段，比如 822 就是 Telkomesl 的手机号，就跟中国移动，联通号段不同一样。

那到底是依照本地产品加 0 的输入格式，还是依据国际化产品国家号+去 0 手机号的格式呢？从用户角度，两种形式都可以，以 Shopee 和 Tokopedia 势均力敌的访问量看，用户都能理解并完成注册。从产品角度，Speedwork 虽然以印尼市场为主，但同时也需要进军马来市场，考虑到数据存储的标准和后续的通用性，最终是选择 Shopee 的形式。

4. 日期格式

众所周知，中国的日期格式是年月日，美国标准日期格式是月日年，英国的日期格式是日月年，如 1987 年 4 月 20 日，美国是 April 20, 1987，英国是 20 April, 1987。Gmail 的日期格式是 Wed, Jul 31, 2019, 7:50 AM；印尼本土电商 Tokopedia 的订单页上的日期格式是 12 Sep 2021; 14:00 WIB，印尼当地新闻网站上的新闻发布日期格式是 22 December 2021 14:46，印度尼西亚的食品生产日期也是按照“日月年”的顺序排列的。由此可见，印尼普遍是使用“日月年”的日期格式。在 Bukalapakd 的 flash deal 页面，展示整点秒杀时间的展示是 10.00 WIB | 13.00 WIB | 16.00 WIB，因此严谨的时间是应该要加上时区的且整点的格式是“.”不是分号，时分秒的表达与国内一致。在促销场景里展示日期范围时，常用的格式是 21-23 December 或是 30 Aug 2021 – 28 Nov 2021。

*注：WIB 是 Waktu 印尼 Barat(西方印尼时区)，印尼跨越 3 个时区，分别是 WIB(GMT+7)、WITA(GMT+8)、WIT（GMT+9）。

5. 地址格式

印尼的地址格式和西方的写法一样，地址从小到大展示：详细地址（街道、建筑、门牌号等）/区/市/省/国家，邮编。例如 Speedwork 在印尼的某门店地址：

Wisma, Jl. Hayam Wuruk Kel No.8, RT.6/RW.2, Kb. Klp.（详细地址）,

Kecamatan Gambir 甘比尔区（District 区）,

Kota Jakarta Pusat 中雅加达（City 市）,

DKI Jakarta 雅加达特区 (Province 省)

10120（邮编）,

Indonesia（国家）

6. 货币单位和价格格式

印尼卢比是东南亚国家印度尼西亚的法定货币，印尼卢比与人民币汇率比大致在 2000:1 左右。卢比的英文是 Rupiah，简写为 Rp。比如人民币的符号是¥，编码是 CNY；卢比是 Rp，编码是 IDR；¥100 相当于 Rp224.240，也可以写成 224.240 IDR。如果是去印尼旅游，简单的换算就是除去三个 0，然后除以 2，例如 10.000 印尼盾折合约人民币 5 元。另外中国标准的数字用法是整数部分每三位一组，以“，”分节，小数不分节。四位以内的整数可以不分节。 例如 624,000、92,300,000、19,351,235.235767 1256。印尼的数字用法常见的是都用“.”分隔。

7. 姓名格式

在做国外项目的时候，填写姓名往往会拆分成 first name 和 last name；印尼人大多数人只有名，没有姓。可是也会遇到的印尼人名不只一个词，也有两个或两个以上部分组成的，有的只是名，有的是连名加姓。因此在做印尼本地产品的姓名录入时，可以不用拆分姓名，就用 full name 字段会更通用更合适。

情感化的设计 第一章节有提到印尼人口结构年轻化，30 岁以下人口占比超过 50.0%；处于热带雨林气候的印尼，年平均温度 25-27℃，通常气温较热且多海岛的国家，民众通常喜好绚丽的颜色；从印尼本土的产品界面配色不难看出，共性就是色彩饱和度高，喜欢用对比色，并且通过插画来表现情绪、描绘场景，让用户产生共情，且更能帮助树立品牌形象，从产品功能到品牌化情感连接，在用户心智中建立一个完整立体的形象，通过品牌力的建设再反向赋能产品。

“情感化设计”是唐纳德·诺曼在《情感化设计》一书中提出的，他从设计的三个层次本能、行为、反思，阐述了情感在设计中所具有的重要地位和作用。诺曼认为：“将情感融入 产品设计 ，将解决设计师们的长期困扰，即产品的实用性和视觉性的主要矛盾。”本能层主要体现的是视觉感受，用户对产品的品牌感知、第一印象等；行为层反应的是用户与产品的交互，也就是我们常说的可用性；反思层是产品触发了用户的主动反思，去探寻使用该产品的目标，是一种深层次的情感共鸣。情感化设计在很多时候可以缓解用户负面情绪，帮助用户快速熟悉产品，拉近与用户的友好度，所以运用好情感化设计可以帮助提升产品体验和留存率。可以通过插画来表现产品主要使用场景，并通过刻画主人物形象（穿着工服的硬朗男性形象），表现专业度和安全感。

汽后市场的产品的难点在于用户的需求大多是低频刚需，所以要提供一些产品

服务或是功能，能够刺激用户频繁打开应用，提升用户粘性；同时规范线下履约流程，标准化服务。满足用户需求的产品+高性价比的商品+运营策略+优质专业的服务+合理的网点布局，几者缺一不可。我们所说的情感化设计也不局限于应用产品本身，整个闭环上所有的触点都应该覆盖到。

数字化运营 建立平台品牌心智不止是在线上，还需考虑线下物料投放。由于 Speedwork 的运营是由印尼本地团队负责，如何标准化进行线上线下全渠道运营推广物料的制作是需要通盘考量的。最终，我们决定通过在线上设计平台上传营销物料模版，不仅能够跨部门跨地域协作提高效能，同时也将本地设计资产数字化实现设计赋能，保证任何人输出的物料设计都能符合平台品牌规范。

数据分析与用户增长 通过数据埋点，我们可以得知产品的活跃状态，比如留存（次日留存率、七日留存率、月留存率）、流失分析、新增变化等；通过漏斗模型分析，可以针对关键流程进行转化率监测，协同产品、运营共同找到用户流失的原因。

站在商业角度，我们可以通过数据客观的了解产品的获客、激活、留存、变现能力，洞察问题并及时的去调整产品功能及链路，使得产品更符合用户的心智认知，使之逐步转化、使用、首单、复购，甚至习惯、分享，形成用户黏性。所以我们想要实现用户增长，需要帮助用户在关键决策点推波助澜，进行精细化设计。

常见的增长手段有优惠券、促销活动、补贴、分享裂变等，通过实际利益去撬动用户增长培养用户习惯。或是通过产品本身提供的服务和功能去满足用户的诉求，来撬动用户增长。无论是通过何种手段，我们都要进行用户的链路设计，一个链路有几个环节几个步骤，如何缩短链路，让用户丝滑且快速的去体验产品核心功能，展现产品的价值，是用户体验设计需要去持续关注的。

想用设计提升转化率？先学会这个超好用的漏斗模型！ 漏斗模型，是一种数据分析方式，是一个线性流程，更是一种普遍适用的方法论，或者说是一种思维方式。

阅读文章 >

本章结尾 数字化时代消费者各种消费行为，都会被以非常微小的颗粒度所记录下来，作为用户体验设计师，需要具备社会学理论知识，通过调研去理解行为背后的情景及动机，更好的设计产品与消费者之间的互动。数据让消费者更加立体化，不仅仅可以告诉我们已经发生的事情，同时也可以预测趋势，进而可以告诉我们处于营销前线的平台，或者商家为什么发生的这些以及可能还会发生什么。

企业出海！设计师如何做好产品本地化设计：印尼篇 可以预见的是，企业出海会是未来两年的趋势之一，特别是东南亚国家，这两年经济增速很快，成为了国内诸多公司的出海首选。

阅读文章 >

欢迎关注作者微信公众号：「Gtech UED」

五一假期结束了，给大家贡献一波设计干货吧！这次的合集几乎每个工具和素材都非常有特色，两款都很「顶级」的配色工具就不说了，独特的字体网站和多达 5.3G 的免费头像素材源文件，无需安装就能使用的3D场景渲染服务，乃至于免费的样机包装网站和在线去除视频背景的服务，里面总会有一两个你能用得上：

1、设计感超强的取色工具 https://www.color-selector.com/

配色似乎并不复杂，但是少有人能够做到完美协调自然。当然，取色工具也不算少，但是用起来足够舒适、又充满设计感的倒是不多，这个名为 Color Selector 的配色工具恰恰能够满足上面的需求。从根本上来说，这是一个配色数据库，它所提供的配色方案大多来自于流行时尚、室内设计、经典建筑、抽象插画等照片、插画，这些配色方案足够经典，但是又足以应对绝大多数的设计需求。

2、独特的免费字体网站 http://velvetyne.fr/

设计师从来都不会嫌弃免费字体的太多。当然，相对而言，免费的英文字体比起免费的中文字体要多不少，但是足够优秀又足够独特的英文字体，想必大家平时也不会屯太多。这个 2010 年所创建的法国字体网站，就是专门干这个的——它专门搜集了各种开源免费但是足够独特的字体。这个网站所提供的字体，应该能够成为你的字体库当中的独特补充。

3、时尚的 UI 样机生成网站 https://cleanmock.com/

和很多同类工具一样，这个样机生成工具能够将你所设计的 APP 页面或者是网页，快速包装成为比较简约时尚的样式，你只需要快速点击几下就能够生成，足够清爽，足够专业。

4、移除视频背景工具 Unscreen https://www.unscreen.com/

图片背景去除的工具如今已经非常之多了，随着短视频内容的爆炸增长，对于视频背景移除的需求也越来越多，这个名为 unscreen 的服务就显得非常具有存在的必要了。全自动处理，完全免费，还有什么比这个更加吸引人的呢？

5、「宇宙最强」取色器ColorSlurp https://colorslurp.com/

虽然这个名为 ColorSlurp 的工具，很大概率是因为没有我国广告法的约束才敢口出狂言号称「宇宙最强」，但是它应该是有足够扎实的功能和特性打底，才能如此宣传。ColorSlurp 内置了高精度的放大镜来帮你读取屏幕上的每一个像素，取色之后，内置的配色方案管理功能、对比度检查等功能确保了色彩的可用性，iOS 平台的客户端还有相机取色、快速导出、iCloud 同步等功能。ColorSlurp 目前只有 Mac 和 iOS 的客户端，感兴趣的同学可以上手体验一下，看看是否当得起「宇宙最强」的称号。

6、免费的 UI/UX 学习平台befront https://befront.io/

学习 UI/UX 的设计平台又多了一个。Befront 会提供真实的设计案例来帮你理解和学习 UI/UX 知识，和以往的很多平台不同的地方在于，它会提供一个基于机器学习的 Figma 插件，来辅助你练习，并且提供及时反馈。值得一提的是，Befront 的课程内容是分免费和收费部分的，可以先看看免费的部分。

7、涂鸦风 SVG 素材合集 https://svgdoodles.com/

很多时候大家看惯了规整的几何图形之后会感到厌倦，充满手绘质感的几何元素相对而言能够让视觉内容更加俏皮、富有生命力。这个 SVG 矢量格式的手绘涂鸦素材合集就能满足这个需求，素材本身可以无损放大，而且也更加便于契合跨平台视觉设计对于精度的要求。

8、3D 场景渲染生成工具 Colorful Studio https://www.colorful.app/

严格意义上来说，它是用来帮你快速搭建场景，渲染生成照片的工具。无需安装客户端，你可以直接在浏览器当中使用，借助大量的预制的 3D 素材，快速搭建场景，然后利用服务器端的算力来渲染，帮你生成最后的照片，对于电商和社交媒体而言，它提供的素材可以说是相当豪华了。最重要的事情是，它还处于公开测试阶段，完全免费，火速申请一波吧！

9、免费立体人物角色素材合集 https://powerpeopleplatform.com/

准确地说，Power People Platform 提供的免费的人物角色设计素材库是 3D 风格而非真的 3D 素材，其中包含 12 个原创角色，3种不同的肤色，6种发色，5种衣服，23 种服饰配色以及无数可选的背景颜色。这套素材库提供高达 2000×2000 px 的 PSD 源文件，你可以按照自己的需求灵活调整。这些素材超级大，你可以在文章开头和结尾的百度云链接中下载。

往期干货：

第一波！2022年4月精选实用设计干货合集 大家好，4月的第1波实用设计干货合集来了！

阅读文章 >

第二波！2022年4月精选实用设计干货合集 大家好，这里是 4月的第2波实用设计干货合集！

阅读文章 >

第三波！2022年4月精选实用设计干货合集 大家好，4月的第3波实用设计干货合集来了！

阅读文章 >

按钮是设计界面中常用且重要的组件之一，它在页面中占据的位置不大，却承载着重要的交互操作。我们在设计的过程中很容易忽略对按钮设计，它的样式、使用场景、层级与排布等等，都值得我们深入了解、学习，从而合理的利用到我们设计的页面中去。本篇文章主要归纳总结 web 端按钮设计的相关知识点：

本篇文章着重讲解 web 端按钮，app 端与 pc 客户端按钮有部分知识点与之相通。后期会持续更新这两个端按钮的相关知识～

按钮的定义与作用 1. 按钮的起源与定义 在物理世界按钮是这样定义的：是一种常用的控制电器元件，常用来接通或断开“控制电路”（其中电流很小），从而达到控制电动机或其他电气设备运行目的的一种开关。

在日常生活中，灯的开关、电视遥控器上的按键、汽车上的各种控制键等等都是我们 UI 按钮在物理世界的实体存在。所以在之前很长一段时间，都很流行拟物风格的按钮，即在触摸屏上展示 1:1 复制物理世界按钮样式的 UI 按钮。虽然现在 UI 按钮的设计风格大多都是采用扁平风格或微写实风格，但其体验感及交互均是对物理世界按钮的一种映射。

所以 UI 按钮设计，是否直观、易用会直接影响用户完成整个业务流程的感受、意愿及效率。例如：

使用电视遥控器调台，电视却没有任何反应——感到苦恼、无法完成调台；点击业务流程中的提交按钮，页面却没有任何反应——感到困惑、无法完成操作、不想继续使用了。

在 UI 设计中，按钮的定义如下：是一个明确指示交互行为动作的组件，标记了一个操作命令，响应用户点击行为，点击后可触发一个即时操作获得相应的反馈&结果。

2. 按钮的作用 接下来我们看一下 UI 按钮的具体作用：

作用一：触发某种功能

通过操作按钮，触发功能获得相应的反馈&结果，例如：

收起、展开按钮——点击收起展开页面信息

作用二：引导用户进行下一步操作

将按钮放在适当的位置，去引导用户进行下一步操作，避免用户不知道后续如何进行，从而提高任务流程完成率。例如：

在分步骤复杂的表单最后放置的“下一步”按钮，用户填写完当前页后，点击“下一步”——进入下一个填写流程中。

作用三：聚合信息

使用按钮，跳转详情页面，例如：

对于一些说明、隐私政策等等，如果需要展示的内容过多，但又不是当前页面的重点，可以设置一个图标按钮或文字链接按钮，通过点击触发，可跳转完整的内容详情页。

作用四：培养用户习惯

通过相对固定的位置、形式、文案，以及触发反馈，可以培养用户操作认知和习惯。例如：对于一些常见图标按钮，收藏、点赞、分享、说明等，用户看到类似的样式，就会知道是什么含义，点击后会获得怎样的反馈。

按钮的分类与使用场景 通过以上的一些配图，我们会发现页面中的按钮展现形式多样，有色块的、描边的、文字的、图标的等等。那他们具体是如何分类和使用的呢？接下来就带大家详细地剖析下按钮的分类与使用场景。

首先，根据我们页面中控件的使用交互形式，我们可以将按钮分为两大类：

命令按钮：常规按钮、图标按钮、文字按钮、幽灵按钮、悬浮按钮——通常会触发页面与页面之间的交互，视觉优先级高

选择按钮：开关按钮、单选框、复选框、胶囊选择、标签选择按钮——通常是一种状态即时改变的交互，视觉优先级低

接下来我们详细看一下这两大类按钮的具体细分和使用场景

1. 命令按钮控件 常规按钮

常规按钮，有主次按钮之分。主按钮承载重要核心操作、次按钮承载辅助操作。常规按钮的常见状态主要有以下 6 种：

正常状态（Normal)——按钮在页面中正常可进行点击操作的状态

聚焦状态(Focus）——为方便键盘用户，展示电脑光标所在位置的一种状态。用户可以通过键盘上的Tab键对页面内的元素进行选择操作。类似于表单填写中输入框的聚焦状态(获取焦点状态），我们可以通过键盘选择和聚焦反馈，知道自己选中的填写项是哪个，从而进行填写操作。该状态，很多产品都去掉了，但是在开发代码中是可以设定的。如果 设计师 合理利用，可以提高产品易用性。举个例子：表单填写过程中，用户通过键盘完成了所有的填写项目。当我们的按钮设计该状态，就可以通过键盘继续操作，先聚焦按钮，然后点击enter键进行取消或提交操作。

悬停状态(Hover)——鼠标移入停留在按钮上但未点击的状态

点击状态(Pressed)——鼠标点击按钮的时候，按钮给出的效果反馈状态

加载状态（Loading）——点击按钮后，因为系统、网络等等原因，操作需要等待一段时间后才会跳转或生效。这个时候就需要加载状态反馈给用户，避免给用户造成困扰(疑惑有没有点击成功？），避免用户因为困扰重复操作，缓解用户的等待焦虑。

禁用状态(Disabled)——表示该按钮不可点击的状态，用于页面中未达到触发条件的时候，按钮的样式。

以上几种状态，通常通过改变其填充颜色的灰度和亮度来表达不同的状态，具体呈现形式，可以根据自己产品的特性去定义。下面，我们来看下主按钮和次按钮的详细定义和常见状态案例展示。

主按钮

主按钮为高权重按钮，与页面上的核心操作强相关，所以在页面上需要醒目显示去引导用户操作，通常使用色块填充引导用户视觉聚焦。

主按钮可以是色块+文字，也可以是色块+图标+文字；通常为主色，也可以根据页面情况赋予不同颜色（详见章节三、不同颜色赋予按钮的情感，与层级关系）

次按钮

次按钮也叫标准按钮，为中权重按钮，在页面中使用最多。通常使用边框+文字的形式呈现。

次按钮可以是边框+文字，也可以是边框+图标+文字；通常为灰色、主色，也可以根据页面情况赋予不同颜色（详见章节三、不同颜色赋予按钮的情感，与层级关系）。

此处以灰色为例，展示其变化规则：

图标按钮

图标按钮是一种图形，样式不一，为低权重按钮，在页面中根据业务情况展示，丰富页面效果。

通常以用户已经形成认知的形式去展现，例如：

文字按钮/链接

文字按钮、链接为低权重按钮，视觉感弱。当某个按钮在同一个页面上重复出现，为了不干扰用户视线，可以使用文字按钮，例如表格行的操作项。

文字按钮、链接也可以与图标组合使用，层级略高于纯文本按钮

按钮菜单

菜单按钮是一种合集按钮，将页面中一些低频操作或同类型操作整合收起，以达到精简页面的效果。展现形式可以是色块、文字链接、图标等等，点击后展开具体操作供用户选择。

其他命令类型按钮

幽灵按钮

幽灵按钮是网页设计中，以线框简单示意轮廓、文字示意功能的按钮：

样式通透简约，可以与页面背景很好的融合 常用于官网设计，与图片结合使用 与次按钮不同点在于，不受规范约束，可以根据设计场景定制轮廓粗细、字体大小粗细等 现在很多网页中，线框形式的幽灵按钮不再作为主要按钮单独使用，而是与色块形式按钮搭配使用。（现在很多网页产品，更注重行为召唤、点击率，使用色块形式的按钮能更好的聚焦用户目光）

悬浮按钮

悬浮按钮是指悬浮在页面上方的按钮，不会随着页面的滚动变化消失。源自安卓的 Material Design。应用到网页上，通常承载一些咨询、客服、置顶等常用功能或者想让用户使用的功能。设计要点：

悬浮按钮是按钮一种展现形式，既可以承载命令类型按钮，例如分享；也可以承载选择类型按钮，例如收藏； 可用来承载常用关键操作，例如网站某个作品页面中的：收藏、评论、推荐、分享的悬浮按钮； 可作为引导工具，引导用户操作，例如很多官网都会悬浮在线咨询、客服一类的按钮； 可以根据不同场景，在页面中选择是否放置悬浮按钮； 不要过度使用悬浮按钮，如果一个页面上悬浮按钮太多，且分散在各个地方，会干扰用户视线，使得整个页面乱糟糟的； 悬浮按钮只承载正向操作，不应该执行危险破坏性的操作，例如删除。 2. 选择按钮控件 选择按钮通常被纳入选择控件中讲解，为了让大家更好的了解它与命令按钮的区别，此处我们来简单讲解一下常用的选择按钮：

开关按钮

开关按钮类似于物理世界中灯的开关，切换「开关」会立即生效，适合用于具有对立意义的选项，无需与命令类按钮搭配使用。

当出现以下情况时，我们应该使用开关：

无需确认或审核操作，即可生效选择后的结果 选项是独立、且对立的功能、行为，仅在“开或关”的选项上做选择时

单选框

单选框是只能选中其中一项的按钮，它容许用户在一组选项中选择其中一个。

选项数量一般为 2-5 个 平铺展示，会更快捷提供给用户进行选择 描述过多的时候，可采取纵向排列的形式，方便用户进行对比判断

复选框

复选框是一种可同时选中多项的基础控件，允许用户从多个选项当中选择多个选项的选择控件。

选项数量一般为 2-5 个 平铺展示，会更快捷提供给用户进行选择 具有半选中状态(indeterminate) 可以独立出现，常用于「是否同意用户协议」等场景

其他状态切换按钮

胶囊选择按钮

胶囊选择是单选框的一种衍生样式，特点是点击面积更大，同时更强调选项。在 element 中，胶囊选择既可以作为单选按钮、也可以作为多选按钮。但个人认为，胶囊选择的样式更适合当作单选按钮。

标签选择按钮

标签选择按钮样式多样，可以以按钮的形式单独存在，也可以与单、复选框结合构成结合样式使用。

常规按钮的视觉组成 上一个章节，我们弄清楚了按钮的分类与使用场景。以上按钮中，使用最多、层级最高的就是常规按钮，接下来我们以常规按钮为例，剖析它的视觉组成、绘制技巧以及各类风格样式。

1. 常规按钮的组成元素 常规按钮由容器、背景、描边、圆角、图标、文案、投影组成，这些元素不是必须出现的，而是根据具体使用场景去呈现。不同的元素搭配，构成的按钮样式也不同，以传达给用户各类信息。

容器：整个按钮的承载体，容纳其他组成元素。容器的形状一般为规则图形，尺寸根据页面要求制定。

背景：为按钮的底色，不同颜色的底色可以表达出按钮不同的功能特性，例如红色代表危险操作；同时也是不同按钮状态的展示形式。

描边：为按钮最外层的边框线条，常用于次按钮的描边。不同颜色描边可以表达出按钮不同的功能特性，例如主色描边二级按钮、灰色描边三级按钮、红色描边危险按钮；同时也是不同次按钮状态的展示形式。

圆角：传达按钮气质的一种元素，可影响界面视觉风格。

图标：对按钮文案的一种图形化表达，目的是为了加强按钮层级、吸引用户注意力、丰富美化页面。

文案：使用合适的字号表现样式，使用精简的文字表达按钮的含义。

投影：一种丰富按钮样式的设计手法，让按钮突出，更具质感、层次感。可提升按钮的视觉呈现。特殊风格才会有，一般没有。

根据以上组成元素，接下来我们来详细看一下，如何设计定义这些属性，不同属性对按钮的呈现有何影响。

2. 按钮的容器与尺寸制定 容器的形状，需要遵循无障碍设计

在一套系统中需要保持样式的统一性 符合用户认知，使用用户已经形成心智模型的样式

设计师如何做无障碍设计？从这五个方面出发！ 互联网设计师如何着手发起无障碍优化？

阅读文章 >

根据不同场景大部分产品可以将按钮分成超大、大、中、小三种。这一点大家根据自己产品的复杂度可以调整新增按钮尺寸。此处做一个通用展示。

超大按钮：用于登录等具有重要意义的场景下

大按钮：用于全局性操作的界面上

中按钮：标准按钮，可用于各类操作场景

小按钮：用于局部控件类操作界面，例如下拉面板、选择器弹窗、表格等

按钮的高度如何定义？

通常以 4 的倍数去制定

按钮的宽度如何定义？

为了保证同一个组件内，不同字数文案按钮的样式统一，可以固定 4 个字以内的按钮为一个固定宽度（min-width)，超出 4 个字设定 padding 值自适应适配。

3. 按钮的背景与描边 按钮的背景色与描边色，可以表达出按钮的状态，也可以表达出按钮不同的功能特性。按钮的状态在前文我们已经详细展示过了，接下来我们来看看不同颜色的按钮表达出的功能特性。通常使用的颜色有以下几类：

品牌色——主题色，常用于普通信息按钮

功能色——成功色、危险色（出错、失败）、警告色（提醒）

其他——灰度色，用于层级较低的二级、三级按钮

4. 按钮的圆角 按钮的圆角，主要分为三大类直角、圆角、全圆角。圆角通常使用的是小圆角，应尽量避免大圆角。

直角——圆角为0px，形状尖锐，给人严谨的感觉，常用于性质较为严谨的产品。

圆角——通常控制在按钮高度的1/6及以下，以2的倍数设定，例如2px、4px、6px等。通常根据产品的定位去设定。例如钉钉、企业微信的受众比较广泛，主要按钮的圆角值为4px；飞书的受众偏年轻，主要按钮的圆角值为6px。

全圆角——全圆角按钮的圆角值固定为高度的50%，按钮形状柔和。web端全圆角的使用相对以上两种比较少，因为需要考虑到鼠标的操作热区与其他控件的组合使用。

另外，同一套系统中，不同大小按钮的圆角值，应当根据按钮的尺寸，按统一比例设定，而非使用固定圆角。以达到视觉比例平衡，圆角“看起来”一致。

5. 按钮的文案 对于按钮中的文案，需要遵循以下原则；

使用合适比例的字号 精简文案，避免折行 使用合理、无歧义的文案

6. 按钮的投影 按钮的风格除了扁平风，还有渐变、轻拟物等风格。通过颜色渐变、添加投影样式，可以塑造其他风格的按钮。对于按钮的投影需要注意以下几点：

基于按钮本身的色值，去设置投影样式，会让投影更干净舒适。 浅色按钮应避免使用投影，否则会影响按钮的识别度，页面显脏。 根据页面慎重使用投影样式，一般层级较高的主要按钮才使用。（B 端扁平风格按钮使用居多）

按钮的层级与排布 分析完了表层样式规范，这个章节，我们来看看按钮在界面中的具体使用。

1. 按钮的层级 对于页面中常用组合搭配的按钮层级如下：01～12 层级由高到低排列（具体是否有这些样式，根据产品情况确定）

高权重按钮——色块按钮

中权重按钮——描边按钮

低权重按钮——文字按钮、图标按钮

（此处我们暂不考虑独立场景、层级的按钮）

2. 按钮位置 web 端页面，除去顶部和侧边导航栏，主要内容页面里的按钮该如何放置排布呢？我们可以将内容页面分为以下三个部分：

标题栏(Header)——主要是全局性操作按钮，例如编辑、新建等；

主体内容(Body)——有两种操作按钮

第一种，是局部操作按钮，例如表格内部的操作项目；

第二种，是全局性完成按钮，跟随在内容后的，例如取消、确定、上一步、下一步等；

底栏(Footer)——主要是全局性页面完成按钮，需要贴底固定性质的。例如取消、确定、保存等。

对于弹窗页面，内容相对比较少，按钮排布方式可以如下：

对于内容页和弹窗页底部按钮的对齐方式，根据具体业务场景和视觉协调度选择即可（内容页居中比较多，因为页面太大了；弹窗右对齐比较多）。注意保持，同一类场景下对齐方式一致。

3. 按钮顺序： 确定了按钮的放置位置，还需要确定按钮放置的顺序。放置顺序分为两步确定：

第一步：确定主按钮、次按钮的顺序

第二步：确定同级别按钮之间的顺序

确定主、次按钮的顺序

首先，我们看一下页面中按钮的阅读顺序：

左对齐排布按钮——从左往右阅读——符合用户“F”型浏览模式

右对齐排布按钮——从右往左阅读——符合“Z”型阅读模式、费茨定律、古腾堡法则

用一篇超全面的文章，帮你读懂经典的费茨定律 费茨定律由心理学家 Paul Fitts 提出，用来预测从任意一点到目标中心位置所需时间与该点到目标的距离和大小有关，距离越大时间越长，目标越大时间越短。

阅读文章 >

用超多案例，帮你掌握交互设计心理学的古腾堡原则 写在前面 在平时的设计过程当中，你是否有这样的疑惑？

阅读文章 >

然后根据阅读顺序，我们可以初步的定义出以下按钮层级顺序：

上图的按钮层级顺序，只是一个基础参考，在实际设计的过程中我们还应当考虑业务场景和用户心智模型。例如，主体内容区的底部跟随按钮，若带有明确方向、具有下一步性质的按钮，应当为主按钮，放在最右边。

常见问题讨论：确定和取消该怎么放？

这个问题，是在设计的过程中，经常被抛出来讨论的问题，有没有固定确切的答案呢。首先说明，没有。各个平台、软件都有不同的规范。最具代表的就是：win 的用户都习惯确定在左、取消在右；mac 的用户都习惯确定在右、取消在左。

个人更倾向确定在右、取消在左的放置规则，原因如下：

1. 根据“Z”型阅读模式，确定在右时，用户的视觉流更加流畅；

2. 根据费茨定律，确定在右时，用户到达我们想要引导他进行操作的按钮，更快，操作效率高；

3. 根据古腾堡法则，确定在右时，刚好处于最终视觉落点区，便于用户快速获得目标操作；

4. 根据方向性原则，取消和确定，一定意义上带有“上一步”和“下一步”的意义，正如前文展示的，确定在右会更合理；

5. 根据用户心智，如今移动端产品，大部分都是确定在右，一定程度上培养了很多用户的使用习惯，那么转到 web 端，保持和移动端同样的交互，用户使用起来会更顺手。（为什么移动端的产品采用这样的排布方式，个人认为大概是苹果设计规范的影响，而且据统计：全世界右利手的人占比约 90%，左利手的人仅约 10%，确定按钮在右，更利于绝大多数用户的操作）

对于确定和取消到底该怎么放，大家可以结合自身产品的情况定位，需要注意的是，要保证同一个产品内规范一致。

确定同级别按钮的顺序

对于同级别按钮，我们需要遵循以下原则去确定顺序：

相关按钮临近原则，将与主按钮相关的次按钮优先放在主按钮旁边。 根据业务场景，按照前文的阅读顺序规律，衡量按钮权重再进行位置分配。

除了以上案例分析的组合样式，B 端页面中按钮组合多样，以下罗列了一些常见场景供大家参考：

按钮设计的原则总结&注意事项 最后根据以上内容我们来总结下，按钮在设计应当遵循的原则及注意事项

1. 设计原则

按钮样式符合用户心智模型

按钮类型、层级分明，规则统一

按钮状态清晰，操作反馈明确

根据业务场景使用合适的按钮

2. 设计注意事项

一个操作区域至多一个主按钮

主次按钮样式统一、与其他控件样式区分处理

按钮样式慎用大圆角

按钮中的文字，字号适中，文案精简、无歧义

合理使用投影样式

根据场景合理使用禁用按钮：需要应引导用户操作时，扔掉禁用；明确区分禁用和可用样式；在恰当的时候对禁用按钮给出解释；结合 loading 状态让禁用按钮更生动。

参考文章推荐 1. 「按钮的学问：确定在左，取消在右？」

推荐指数：五颗星

推荐理由：使用不同的理论说明佐证确定和取消按钮的 排版 方式

按钮的学问：确定在左，取消在右？ 开篇 layq ：确认框，顾名思义，就是对用户的关键行为进行确认。

阅读文章 >

2. 「交互细节！确定按钮到底该放在左边还是右边？」

推荐指数：四颗星

推荐理由：用实验论证确定按钮的放置位置，结论是：确定按钮放在右边比较好

交互细节！确定按钮到底该放在左边还是右边？ 仔细想想，我们做交互设计，讲了那么多“高大上”的理念，竟然很多小细节都还没有弄清楚——比如，确定和取消按钮哪个该放左边哪个该放右边？

阅读文章 >

3. 「大厂高手出品！中台组件设计指南：按钮篇 」

推荐指数：五颗星

推荐理由：使用完整的规范去写的文章，实打实的案例。

大厂高手出品！中台组件设计指南：按钮篇 希望接下来每一篇关于中台组件的分享都对大家有所帮助，本文主要分享中台组件按钮的发展史、按钮的类型、按钮的使用规范等内容。

阅读文章 >

4. 「按钮规范系列！从四个方面详解「按钮位置」的设计方法」

推荐指数：四颗星

推荐理由：用古腾堡原则详解按钮位置的摆放规律，为什么这么放置。主要案例是 APP 端的。

按钮规范系列！从四个方面详解「按钮位置」的设计方法 @Daidai丶呆 ：两年前，我写过一篇文章《高手课堂！

阅读文章 >

5. 「5000 字干货！写给新人的按钮设计指南」

推荐指数：五颗星

推荐理由：主要讲的是 APP 端的，层级清晰、案例完整。

5000字干货！写给新人的按钮设计指南 前言 说起按钮，很多做设计的小伙伴是熟悉的不能再熟悉了，它是我们在设计界面时最常用、最重要的组件之一，也是易被忽略的元素之一，所以在设计之前，做好对按钮组件的认识、了解非常有必要。

阅读文章 >

6. 「从 6 个层面，系统分析按钮设计的知识点」

推荐指数：五颗星

推荐理由：主要讲的是 APP 端的，命令按钮和选择按钮做了区分说明。案例丰富，常见按钮组成拆解和最后的按钮样式小结表都超级棒

从6个层面，系统分析按钮设计的知识点 虽然直觉认为按钮是一种很简单的控件，但在梳理按钮相关知识点的过程中，发现小小控件其中包含了很多容易被忽略的细节。

阅读文章 >

7. 「推荐！禁用状态二三事 」

推荐指数：三颗星

推荐理由：讲述了什么时候、什么场景使用禁用状态以及使用禁用状态的注意事项

推荐！禁用状态二三事 sherry ：禁用，顾名思义，代表不可用的意思。

阅读文章 >

结尾 整篇文章内容是基于日常学习与工作经验的总结，部分规范内容，大家可以根据自己的产品业务做适配调整，以上仅供参考。部分案例配图源自网络，仅供交流学习，侵删。

欢迎点赞、分享，期待你的关注小红点～欢迎留言交流～

从6个层面，系统分析按钮设计的知识点 虽然直觉认为按钮是一种很简单的控件，但在梳理按钮相关知识点的过程中，发现小小控件其中包含了很多容易被忽略的细节。

阅读文章 >

按钮是设计界面中常用且重要的组件之一，它在页面中占据的位置不大，却承载着重要的交互操作。我们在设计的过程中很容易忽略对按钮设计，它的样式、使用场景、层级与排布等等，都值得我们深入了解、学习，从而合理的利用到我们设计的页面中去。本篇文章主要归纳总结 web 端按钮设计的相关知识点：

本篇文章着重讲解 web 端按钮，app 端与 pc 客户端按钮有部分知识点与之相通。后期会持续更新这两个端按钮的相关知识～

按钮的定义与作用 1. 按钮的起源与定义 在物理世界按钮是这样定义的：是一种常用的控制电器元件，常用来接通或断开“控制电路”（其中电流很小），从而达到控制电动机或其他电气设备运行目的的一种开关。

在日常生活中，灯的开关、电视遥控器上的按键、汽车上的各种控制键等等都是我们 UI 按钮在物理世界的实体存在。所以在之前很长一段时间，都很流行拟物风格的按钮，即在触摸屏上展示 1:1 复制物理世界按钮样式的 UI 按钮。虽然现在 UI 按钮的设计风格大多都是采用扁平风格或微写实风格，但其体验感及交互均是对物理世界按钮的一种映射。

所以 UI 按钮设计，是否直观、易用会直接影响用户完成整个业务流程的感受、意愿及效率。例如：

使用电视遥控器调台，电视却没有任何反应——感到苦恼、无法完成调台；点击业务流程中的提交按钮，页面却没有任何反应——感到困惑、无法完成操作、不想继续使用了。

在 UI 设计中，按钮的定义如下：是一个明确指示交互行为动作的组件，标记了一个操作命令，响应用户点击行为，点击后可触发一个即时操作获得相应的反馈&结果。

2. 按钮的作用 接下来我们看一下 UI 按钮的具体作用：

作用一：触发某种功能

通过操作按钮，触发功能获得相应的反馈&结果，例如：

收起、展开按钮——点击收起展开页面信息

作用二：引导用户进行下一步操作

将按钮放在适当的位置，去引导用户进行下一步操作，避免用户不知道后续如何进行，从而提高任务流程完成率。例如：

在分步骤复杂的表单最后放置的“下一步”按钮，用户填写完当前页后，点击“下一步”——进入下一个填写流程中。

作用三：聚合信息

使用按钮，跳转详情页面，例如：

对于一些说明、隐私政策等等，如果需要展示的内容过多，但又不是当前页面的重点，可以设置一个图标按钮或文字链接按钮，通过点击触发，可跳转完整的内容详情页。

作用四：培养用户习惯

通过相对固定的位置、形式、文案，以及触发反馈，可以培养用户操作认知和习惯。例如：对于一些常见图标按钮，收藏、点赞、分享、说明等，用户看到类似的样式，就会知道是什么含义，点击后会获得怎样的反馈。

按钮的分类与使用场景 通过以上的一些配图，我们会发现页面中的按钮展现形式多样，有色块的、描边的、文字的、图标的等等。那他们具体是如何分类和使用的呢？接下来就带大家详细地剖析下按钮的分类与使用场景。

首先，根据我们页面中控件的使用交互形式，我们可以将按钮分为两大类：

命令按钮：常规按钮、图标按钮、文字按钮、幽灵按钮、悬浮按钮——通常会触发页面与页面之间的交互，视觉优先级高

选择按钮：开关按钮、单选框、复选框、胶囊选择、标签选择按钮——通常是一种状态即时改变的交互，视觉优先级低

接下来我们详细看一下这两大类按钮的具体细分和使用场景

1. 命令按钮控件 常规按钮

常规按钮，有主次按钮之分。主按钮承载重要核心操作、次按钮承载辅助操作。常规按钮的常见状态主要有以下 6 种：

正常状态（Normal)——按钮在页面中正常可进行点击操作的状态

聚焦状态(Focus）——为方便键盘用户，展示电脑光标所在位置的一种状态。用户可以通过键盘上的Tab键对页面内的元素进行选择操作。类似于表单填写中输入框的聚焦状态(获取焦点状态），我们可以通过键盘选择和聚焦反馈，知道自己选中的填写项是哪个，从而进行填写操作。该状态，很多产品都去掉了，但是在开发代码中是可以设定的。如果 设计师 合理利用，可以提高产品易用性。举个例子：表单填写过程中，用户通过键盘完成了所有的填写项目。当我们的按钮设计该状态，就可以通过键盘继续操作，先聚焦按钮，然后点击enter键进行取消或提交操作。

悬停状态(Hover)——鼠标移入停留在按钮上但未点击的状态

点击状态(Pressed)——鼠标点击按钮的时候，按钮给出的效果反馈状态

加载状态（Loading）——点击按钮后，因为系统、网络等等原因，操作需要等待一段时间后才会跳转或生效。这个时候就需要加载状态反馈给用户，避免给用户造成困扰(疑惑有没有点击成功？），避免用户因为困扰重复操作，缓解用户的等待焦虑。

禁用状态(Disabled)——表示该按钮不可点击的状态，用于页面中未达到触发条件的时候，按钮的样式。

以上几种状态，通常通过改变其填充颜色的灰度和亮度来表达不同的状态，具体呈现形式，可以根据自己产品的特性去定义。下面，我们来看下主按钮和次按钮的详细定义和常见状态案例展示。

主按钮

主按钮为高权重按钮，与页面上的核心操作强相关，所以在页面上需要醒目显示去引导用户操作，通常使用色块填充引导用户视觉聚焦。

主按钮可以是色块+文字，也可以是色块+图标+文字；通常为主色，也可以根据页面情况赋予不同颜色（详见章节三、不同颜色赋予按钮的情感，与层级关系）

次按钮

次按钮也叫标准按钮，为中权重按钮，在页面中使用最多。通常使用边框+文字的形式呈现。

次按钮可以是边框+文字，也可以是边框+图标+文字；通常为灰色、主色，也可以根据页面情况赋予不同颜色（详见章节三、不同颜色赋予按钮的情感，与层级关系）。

此处以灰色为例，展示其变化规则：

图标按钮

图标按钮是一种图形，样式不一，为低权重按钮，在页面中根据业务情况展示，丰富页面效果。

通常以用户已经形成认知的形式去展现，例如：

文字按钮/链接

文字按钮、链接为低权重按钮，视觉感弱。当某个按钮在同一个页面上重复出现，为了不干扰用户视线，可以使用文字按钮，例如表格行的操作项。

文字按钮、链接也可以与图标组合使用，层级略高于纯文本按钮

按钮菜单

菜单按钮是一种合集按钮，将页面中一些低频操作或同类型操作整合收起，以达到精简页面的效果。展现形式可以是色块、文字链接、图标等等，点击后展开具体操作供用户选择。

其他命令类型按钮

幽灵按钮

幽灵按钮是网页设计中，以线框简单示意轮廓、文字示意功能的按钮：

样式通透简约，可以与页面背景很好的融合 常用于官网设计，与图片结合使用 与次按钮不同点在于，不受规范约束，可以根据设计场景定制轮廓粗细、字体大小粗细等 现在很多网页中，线框形式的幽灵按钮不再作为主要按钮单独使用，而是与色块形式按钮搭配使用。（现在很多网页产品，更注重行为召唤、点击率，使用色块形式的按钮能更好的聚焦用户目光）

悬浮按钮

悬浮按钮是指悬浮在页面上方的按钮，不会随着页面的滚动变化消失。源自安卓的 Material Design。应用到网页上，通常承载一些咨询、客服、置顶等常用功能或者想让用户使用的功能。设计要点：

悬浮按钮是按钮一种展现形式，既可以承载命令类型按钮，例如分享；也可以承载选择类型按钮，例如收藏； 可用来承载常用关键操作，例如网站某个作品页面中的：收藏、评论、推荐、分享的悬浮按钮； 可作为引导工具，引导用户操作，例如很多官网都会悬浮在线咨询、客服一类的按钮； 可以根据不同场景，在页面中选择是否放置悬浮按钮； 不要过度使用悬浮按钮，如果一个页面上悬浮按钮太多，且分散在各个地方，会干扰用户视线，使得整个页面乱糟糟的； 悬浮按钮只承载正向操作，不应该执行危险破坏性的操作，例如删除。 2. 选择按钮控件 选择按钮通常被纳入选择控件中讲解，为了让大家更好的了解它与命令按钮的区别，此处我们来简单讲解一下常用的选择按钮：

开关按钮

开关按钮类似于物理世界中灯的开关，切换「开关」会立即生效，适合用于具有对立意义的选项，无需与命令类按钮搭配使用。

当出现以下情况时，我们应该使用开关：

无需确认或审核操作，即可生效选择后的结果 选项是独立、且对立的功能、行为，仅在“开或关”的选项上做选择时

单选框

单选框是只能选中其中一项的按钮，它容许用户在一组选项中选择其中一个。

选项数量一般为 2-5 个 平铺展示，会更快捷提供给用户进行选择 描述过多的时候，可采取纵向排列的形式，方便用户进行对比判断

复选框

复选框是一种可同时选中多项的基础控件，允许用户从多个选项当中选择多个选项的选择控件。

选项数量一般为 2-5 个 平铺展示，会更快捷提供给用户进行选择 具有半选中状态(indeterminate) 可以独立出现，常用于「是否同意用户协议」等场景

其他状态切换按钮

胶囊选择按钮

胶囊选择是单选框的一种衍生样式，特点是点击面积更大，同时更强调选项。在 element 中，胶囊选择既可以作为单选按钮、也可以作为多选按钮。但个人认为，胶囊选择的样式更适合当作单选按钮。

标签选择按钮

标签选择按钮样式多样，可以以按钮的形式单独存在，也可以与单、复选框结合构成结合样式使用。

常规按钮的视觉组成 上一个章节，我们弄清楚了按钮的分类与使用场景。以上按钮中，使用最多、层级最高的就是常规按钮，接下来我们以常规按钮为例，剖析它的视觉组成、绘制技巧以及各类风格样式。

1. 常规按钮的组成元素 常规按钮由容器、背景、描边、圆角、图标、文案、投影组成，这些元素不是必须出现的，而是根据具体使用场景去呈现。不同的元素搭配，构成的按钮样式也不同，以传达给用户各类信息。

容器：整个按钮的承载体，容纳其他组成元素。容器的形状一般为规则图形，尺寸根据页面要求制定。

背景：为按钮的底色，不同颜色的底色可以表达出按钮不同的功能特性，例如红色代表危险操作；同时也是不同按钮状态的展示形式。

描边：为按钮最外层的边框线条，常用于次按钮的描边。不同颜色描边可以表达出按钮不同的功能特性，例如主色描边二级按钮、灰色描边三级按钮、红色描边危险按钮；同时也是不同次按钮状态的展示形式。

圆角：传达按钮气质的一种元素，可影响界面视觉风格。

图标：对按钮文案的一种图形化表达，目的是为了加强按钮层级、吸引用户注意力、丰富美化页面。

文案：使用合适的字号表现样式，使用精简的文字表达按钮的含义。

投影：一种丰富按钮样式的设计手法，让按钮突出，更具质感、层次感。可提升按钮的视觉呈现。特殊风格才会有，一般没有。

根据以上组成元素，接下来我们来详细看一下，如何设计定义这些属性，不同属性对按钮的呈现有何影响。

2. 按钮的容器与尺寸制定 容器的形状，需要遵循无障碍设计

在一套系统中需要保持样式的统一性 符合用户认知，使用用户已经形成心智模型的样式

设计师如何做无障碍设计？从这五个方面出发！ 互联网设计师如何着手发起无障碍优化？

阅读文章 >

根据不同场景大部分产品可以将按钮分成超大、大、中、小三种。这一点大家根据自己产品的复杂度可以调整新增按钮尺寸。此处做一个通用展示。

超大按钮：用于登录等具有重要意义的场景下

大按钮：用于全局性操作的界面上

中按钮：标准按钮，可用于各类操作场景

小按钮：用于局部控件类操作界面，例如下拉面板、选择器弹窗、表格等

按钮的高度如何定义？

通常以 4 的倍数去制定

按钮的宽度如何定义？

为了保证同一个组件内，不同字数文案按钮的样式统一，可以固定 4 个字以内的按钮为一个固定宽度（min-width)，超出 4 个字设定 padding 值自适应适配。

3. 按钮的背景与描边 按钮的背景色与描边色，可以表达出按钮的状态，也可以表达出按钮不同的功能特性。按钮的状态在前文我们已经详细展示过了，接下来我们来看看不同颜色的按钮表达出的功能特性。通常使用的颜色有以下几类：

品牌色——主题色，常用于普通信息按钮

功能色——成功色、危险色（出错、失败）、警告色（提醒）

其他——灰度色，用于层级较低的二级、三级按钮

4. 按钮的圆角 按钮的圆角，主要分为三大类直角、圆角、全圆角。圆角通常使用的是小圆角，应尽量避免大圆角。

直角——圆角为0px，形状尖锐，给人严谨的感觉，常用于性质较为严谨的产品。

圆角——通常控制在按钮高度的1/6及以下，以2的倍数设定，例如2px、4px、6px等。通常根据产品的定位去设定。例如钉钉、企业微信的受众比较广泛，主要按钮的圆角值为4px；飞书的受众偏年轻，主要按钮的圆角值为6px。

全圆角——全圆角按钮的圆角值固定为高度的50%，按钮形状柔和。web端全圆角的使用相对以上两种比较少，因为需要考虑到鼠标的操作热区与其他控件的组合使用。

另外，同一套系统中，不同大小按钮的圆角值，应当根据按钮的尺寸，按统一比例设定，而非使用固定圆角。以达到视觉比例平衡，圆角“看起来”一致。

5. 按钮的文案 对于按钮中的文案，需要遵循以下原则；

使用合适比例的字号 精简文案，避免折行 使用合理、无歧义的文案

6. 按钮的投影 按钮的风格除了扁平风，还有渐变、轻拟物等风格。通过颜色渐变、添加投影样式，可以塑造其他风格的按钮。对于按钮的投影需要注意以下几点：

基于按钮本身的色值，去设置投影样式，会让投影更干净舒适。 浅色按钮应避免使用投影，否则会影响按钮的识别度，页面显脏。 根据页面慎重使用投影样式，一般层级较高的主要按钮才使用。（B 端扁平风格按钮使用居多）

按钮的层级与排布 分析完了表层样式规范，这个章节，我们来看看按钮在界面中的具体使用。

1. 按钮的层级 对于页面中常用组合搭配的按钮层级如下：01～12 层级由高到低排列（具体是否有这些样式，根据产品情况确定）

高权重按钮——色块按钮

中权重按钮——描边按钮

低权重按钮——文字按钮、图标按钮

（此处我们暂不考虑独立场景、层级的按钮）

2. 按钮位置 web 端页面，除去顶部和侧边导航栏，主要内容页面里的按钮该如何放置排布呢？我们可以将内容页面分为以下三个部分：

标题栏(Header)——主要是全局性操作按钮，例如编辑、新建等；

主体内容(Body)——有两种操作按钮

第一种，是局部操作按钮，例如表格内部的操作项目；

第二种，是全局性完成按钮，跟随在内容后的，例如取消、确定、上一步、下一步等；

底栏(Footer)——主要是全局性页面完成按钮，需要贴底固定性质的。例如取消、确定、保存等。

对于弹窗页面，内容相对比较少，按钮排布方式可以如下：

对于内容页和弹窗页底部按钮的对齐方式，根据具体业务场景和视觉协调度选择即可（内容页居中比较多，因为页面太大了；弹窗右对齐比较多）。注意保持，同一类场景下对齐方式一致。

3. 按钮顺序： 确定了按钮的放置位置，还需要确定按钮放置的顺序。放置顺序分为两步确定：

第一步：确定主按钮、次按钮的顺序

第二步：确定同级别按钮之间的顺序

确定主、次按钮的顺序

首先，我们看一下页面中按钮的阅读顺序：

左对齐排布按钮——从左往右阅读——符合用户“F”型浏览模式

右对齐排布按钮——从右往左阅读——符合“Z”型阅读模式、费茨定律、古腾堡法则

用一篇超全面的文章，帮你读懂经典的费茨定律 费茨定律由心理学家 Paul Fitts 提出，用来预测从任意一点到目标中心位置所需时间与该点到目标的距离和大小有关，距离越大时间越长，目标越大时间越短。

阅读文章 >

用超多案例，帮你掌握交互设计心理学的古腾堡原则 写在前面 在平时的设计过程当中，你是否有这样的疑惑？

阅读文章 >

然后根据阅读顺序，我们可以初步的定义出以下按钮层级顺序：

上图的按钮层级顺序，只是一个基础参考，在实际设计的过程中我们还应当考虑业务场景和用户心智模型。例如，主体内容区的底部跟随按钮，若带有明确方向、具有下一步性质的按钮，应当为主按钮，放在最右边。

常见问题讨论：确定和取消该怎么放？

这个问题，是在设计的过程中，经常被抛出来讨论的问题，有没有固定确切的答案呢。首先说明，没有。各个平台、软件都有不同的规范。最具代表的就是：win 的用户都习惯确定在左、取消在右；mac 的用户都习惯确定在右、取消在左。

个人更倾向确定在右、取消在左的放置规则，原因如下：

1. 根据“Z”型阅读模式，确定在右时，用户的视觉流更加流畅；

2. 根据费茨定律，确定在右时，用户到达我们想要引导他进行操作的按钮，更快，操作效率高；

3. 根据古腾堡法则，确定在右时，刚好处于最终视觉落点区，便于用户快速获得目标操作；

4. 根据方向性原则，取消和确定，一定意义上带有“上一步”和“下一步”的意义，正如前文展示的，确定在右会更合理；

5. 根据用户心智，如今移动端产品，大部分都是确定在右，一定程度上培养了很多用户的使用习惯，那么转到 web 端，保持和移动端同样的交互，用户使用起来会更顺手。（为什么移动端的产品采用这样的排布方式，个人认为大概是苹果设计规范的影响，而且据统计：全世界右利手的人占比约 90%，左利手的人仅约 10%，确定按钮在右，更利于绝大多数用户的操作）

对于确定和取消到底该怎么放，大家可以结合自身产品的情况定位，需要注意的是，要保证同一个产品内规范一致。

确定同级别按钮的顺序

对于同级别按钮，我们需要遵循以下原则去确定顺序：

相关按钮临近原则，将与主按钮相关的次按钮优先放在主按钮旁边。 根据业务场景，按照前文的阅读顺序规律，衡量按钮权重再进行位置分配。

除了以上案例分析的组合样式，B 端页面中按钮组合多样，以下罗列了一些常见场景供大家参考：

按钮设计的原则总结&注意事项 最后根据以上内容我们来总结下，按钮在设计应当遵循的原则及注意事项

1. 设计原则

按钮样式符合用户心智模型

按钮类型、层级分明，规则统一

按钮状态清晰，操作反馈明确

根据业务场景使用合适的按钮

2. 设计注意事项

一个操作区域至多一个主按钮

主次按钮样式统一、与其他控件样式区分处理

按钮样式慎用大圆角

按钮中的文字，字号适中，文案精简、无歧义

合理使用投影样式

根据场景合理使用禁用按钮：需要应引导用户操作时，扔掉禁用；明确区分禁用和可用样式；在恰当的时候对禁用按钮给出解释；结合 loading 状态让禁用按钮更生动。

参考文章推荐 1. 「按钮的学问：确定在左，取消在右？」

推荐指数：五颗星

推荐理由：使用不同的理论说明佐证确定和取消按钮的 排版 方式

按钮的学问：确定在左，取消在右？ 开篇 layq ：确认框，顾名思义，就是对用户的关键行为进行确认。

阅读文章 >

2. 「交互细节！确定按钮到底该放在左边还是右边？」

推荐指数：四颗星

推荐理由：用实验论证确定按钮的放置位置，结论是：确定按钮放在右边比较好

交互细节！确定按钮到底该放在左边还是右边？ 仔细想想，我们做交互设计，讲了那么多“高大上”的理念，竟然很多小细节都还没有弄清楚——比如，确定和取消按钮哪个该放左边哪个该放右边？

阅读文章 >

3. 「大厂高手出品！中台组件设计指南：按钮篇 」

推荐指数：五颗星

推荐理由：使用完整的规范去写的文章，实打实的案例。

大厂高手出品！中台组件设计指南：按钮篇 希望接下来每一篇关于中台组件的分享都对大家有所帮助，本文主要分享中台组件按钮的发展史、按钮的类型、按钮的使用规范等内容。

阅读文章 >

4. 「按钮规范系列！从四个方面详解「按钮位置」的设计方法」

推荐指数：四颗星

推荐理由：用古腾堡原则详解按钮位置的摆放规律，为什么这么放置。主要案例是 APP 端的。

按钮规范系列！从四个方面详解「按钮位置」的设计方法 @Daidai丶呆 ：两年前，我写过一篇文章《高手课堂！

阅读文章 >

5. 「5000 字干货！写给新人的按钮设计指南」

推荐指数：五颗星

推荐理由：主要讲的是 APP 端的，层级清晰、案例完整。

5000字干货！写给新人的按钮设计指南 前言 说起按钮，很多做设计的小伙伴是熟悉的不能再熟悉了，它是我们在设计界面时最常用、最重要的组件之一，也是易被忽略的元素之一，所以在设计之前，做好对按钮组件的认识、了解非常有必要。

阅读文章 >

6. 「从 6 个层面，系统分析按钮设计的知识点」

推荐指数：五颗星

推荐理由：主要讲的是 APP 端的，命令按钮和选择按钮做了区分说明。案例丰富，常见按钮组成拆解和最后的按钮样式小结表都超级棒

从6个层面，系统分析按钮设计的知识点 虽然直觉认为按钮是一种很简单的控件，但在梳理按钮相关知识点的过程中，发现小小控件其中包含了很多容易被忽略的细节。

阅读文章 >

7. 「推荐！禁用状态二三事 」

推荐指数：三颗星

推荐理由：讲述了什么时候、什么场景使用禁用状态以及使用禁用状态的注意事项

推荐！禁用状态二三事 sherry ：禁用，顾名思义，代表不可用的意思。

阅读文章 >

结尾 整篇文章内容是基于日常学习与工作经验的总结，部分规范内容，大家可以根据自己的产品业务做适配调整，以上仅供参考。部分案例配图源自网络，仅供交流学习，侵删。

欢迎点赞、分享，期待你的关注小红点～欢迎留言交流～

从6个层面，系统分析按钮设计的知识点 虽然直觉认为按钮是一种很简单的控件，但在梳理按钮相关知识点的过程中，发现小小控件其中包含了很多容易被忽略的细节。

阅读文章 >

Hi，我是彩云。咱们平时在做 UI 组件库的时候，会遇到一个问题，定义了很多颜色但在团队合作的时候，却依然还是会根据每个 设计师 自己的喜好来 配色 ，很难将颜色规范很好的统一起来。这其中有一个很严重的问题就是对于颜色的命名和管理不够清晰，那么今天这篇文章通过一个国外大厂真实的颜色组件升级案例，希望能帮你解决这个难题。

我们花了几个月的时间改进了设计系统 Cobalt 中颜色的处理方式。颜色是 UI 的基本元素：它们构成视觉语言，帮助定义品牌，并被开发和设计师每天用在产品设计中。

但如果我们在使用颜色上没有明确的指导原则，颜色被团队中的设计师按喜好使用时，将会导致产品看起来非常混乱。

我们 APP 中的不一致例子

接下来我会告诉你，我们是如何做好颜色规范以及在整个项目中面临的挑战，正如你将看到的，这个项目并不像看上去那么简单：

如何通过 Getaround 在设计和技术方面管理颜色 概述这个系统的局限性，并说明我们如何改进它 什么是语义颜色 我们是如何实现它的，以及它带来的优势！ 我们之前在 Getaround 中如何管理颜色？ 1. 在设计方面

和许多设计团队一样，我们使用 Figma 作为我们的主要设计工具。我们的颜色被放在“基础”库中，可以在其中找到我们在产品中使用的所有常见样式，例如字体样式、颜色、图标等。这个库提供了我们每天使用的专用系统库（iOS、Android、Web、电子邮件）。

颜色名称过去是基于它们的外观。例如：紫色颜色是我们的主要颜色，而石墨色是基本文本的常规颜色。

2. 在技术方面

在我们的 APP 中，曾经会用相同的系统来管理颜色。此外，还有一些语义颜色，但仅限于 iOS，开发用的也不多。

我们在旧系统中面临的限制 在使用这个系统时，团队反复面临同样的问题：

如何确保从一位设计师到另一位设计师以相同的方式使用颜色？ 如果没有适当的指导原则，我们如何确保开发很好的还原？ 如果明天我们必须用全新的配色方案来改造我们的品牌，要怎么快速统一？ 让我们试着找出我们是如何陷入这种境地的？

1）没有明确的颜色使用规范

所有设计师都使用相同的色板，但自 2019 年 Getaround 品牌重塑以来，除了引入不一致之外，没有明确关于如何使用它们的规范，所以设计师在选择颜色时迷失了方向。

然后他们将开始建立自己的参考资料，每个设计师都有不同的配色想法。

例如：设计师应该在所有这些灰色阴影中为次级文本选择哪种灰色？颜色命名在这里不是很有帮助

2）旧品牌的设计包袱

以前品牌的一些旧颜色仍在使用（按钮上的蓝色阴影，标题……）。到现在也没有真正的行动计划来迭代它们。

旧驱动器品牌

我们对新系统的设想 在 2021 年初，我们有机会为我们的 iOS 和 Android APP 来制定长期的 UI 规划。

我们问自己“5 年后我们的 APP 会是什么样的？”。我们会回顾，Getaround 品牌是如何成为我们视觉方法中心的。

以上是我们品牌和设计团队在 2020 年完成的全面工作的一小部分

致力于设计系统的 Cobalt 团队借此机会重新考虑了 颜色系统 。然而，为了使这一目标成为现实，我们面临着一些挑战：

1）制定指导原则

我们如何确保每个设计师都可以依赖易于理解和使用色彩系统？拥有一个简单系统将加快使用速度。

2）颜色能通过可用性标准

我们如何确保从一开始就设计出易于使用的颜色？

3）易于维护并符合未来趋势

我们如何才能使系统易于维护并符合现在和未来的行业标准（例如：暗模式）

我们新的颜色系统：语义颜色 在我们的探索阶段，在 Figma 的共享环境中工作促使我们保存和记录我们所做的设计决策。就像我们应该如何命名我们的强调色：（主要？强调？）

我们还测试了 APP 界面在黑暗模式下的外观，以及如何正确支持这一点。我们应该创建一个单独的调色板还是为每个组件都创建一个深色版本？我们开始与开发讨论这个问题，以了解他们有什么解决方案来处理这些问题。

语义颜色的概念很快就被开发人员提出来，因为他们知道并且很好地使用了这个概念。但对于设计师来说，又要如何准确理解呢？

1）什么是语义颜色？

语义指的是根据颜色的使用方式而不是色调来命名颜色的方法。

例如，你可以将颜色命名为“成功”或“积极”，因为它指的是含义，而不是“绿色”或“翡翠绿”。

甚至可以根据颜色在屏幕上的应用方式来命名颜色，例如背景颜色、按钮背景颜色、文本颜色、图标颜色等……

2）从基于外观的配色方案到基于语义的配色方案

语义颜色并不新鲜，越来越多的产品开始采用这种方式来定义颜色。我们可以从下面一些大厂的颜色规范来学习

google： https://material.io/design/color/the-color-system.html#color-theme-creation

Apple： https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color

Shopify： https://polaris.shopify.com/design/colors#navigation

Asana： https://polaris.shopify.com/design/colors#navigation

显然，这种颜色系统有很多优点。因此，现在让我解释一下我们如何在实践中将这个概念应用到我们的产品中。

3）深入研究语义颜色

我们的新颜色系统由两部分组成：

基础色板 语义颜色

基础调色板

我们与品牌团队密切合作，他们定义了一个全新的品牌，我们在工作时会围绕这个品牌考虑。

该品牌的每种颜色都采用多种色调进行调整，以创造更大的灵活性，一次构建成为基础调色板。它代表可以在产品中显示的所有可能颜色。团队可能不会全部使用它们，但他们会选择在产品中效果最好的那些。

基础调色板

语义颜色，语义颜色建立在用作参考的基础调色板之上。正如我之前解释的，命名不再是指颜色的“外观”（洋红色、棕色、绿色……），而是指UI 元素它们被应用于（文本、图标、按钮、背景……）以及该元素的状态（活动、非活动、成功……）。

请参阅此处的命名法和一些示例：

语义颜色结构和示例

这意味着来自基础调色板的颜色可以用于多种语义颜色：

这就是我们根据这个新原则重新调整颜色命名的方式：

我们通过设计师和开发进行了内部用户测试，以确定命名语义颜色的最佳方式。

我们尝试了很多不同的命名方法，发现过于详细的命名系统对于我们的团队和产品的规模来说维护和使用太复杂了。我们决定做一些简单的维护，同时在命名方面有足够的延展性。

语义颜色的好处 1）语义色彩嵌入设计原则

语义颜色侧重于颜色的用途。它消除了设计师和开发对使用什么颜色的盲目猜测，因为视觉语言直接传达了设计决策。

例如：在这里，颜色命名使设计师更容易做出正确的选择。在我们的原则中， *Accent* state 用于交互元素。

2）解锁黑暗模式

语义颜色可以适应不同的主题。语义颜色的名称始终相同，但它的外观可能会根据所选模式而改变。例如，语义颜色“主背景”可以指浅模式下的“白色”和深色模式下的“黑色 500”。根据用户选择的模式，将自动显示正确的颜色。这对我们的设计系统来说是一个真正的游戏规则改变者，因为它将使它更加面向未来。

明暗模式下的语义颜色 Primary.Background

3）语义颜色高效灵活

如果我们将来要更新颜色，使用语义颜色也会变得更容易。假设我们想要将我们的主色更改为蓝色。我们只需要将基础调色板中的“紫色”更新为“蓝色”。与该颜色相关的所有语义颜色也将神奇地更新。

另一种情况可能是更新特定 UI 元素的颜色，例如按钮，而无需触摸使用紫色颜色的其他元素。在这种情况下，我们只需要更新 ButtonBackground.Primary 颜色，非常简单。

如果没有该系统，更新颜色将需要经过大量 QA 以确保将更改应用到任何地方。

4）颜色组合指南

这个系统似乎很容易使用，但设计师仍然有一些问题：

我什么时候可以使用正常文字颜色？ 我什么时候可以使用次级文本颜色？ 我什么时候可以使用可交互颜色？ 为了帮助设计师选择颜色，我们创建了一个交互式指南，列出了所有可能的颜色组合。

我们在 figma 原型中创建了这个指导原则，每次更改设计系统颜色时都会更新该规范。它突出了允许的语义颜色组合，以最大限度地保持一致性。

Figma 中内置的语义色彩交互指南

结果 采用这种新的颜色系统产生了一些变化：

1）我们从“Foundation”库中提取颜色，并将它们分为深色和浅色模式。这一举措使我们能够使用 Figma 开关功能轻松地将设计文件从 Light 切换到  Dark 模式。这也使库更轻且更易于维护。

2）语义颜色已在我们的 iOS 和 Android 应用程序上成功实现，我们现在正在努力在我们网络平台上使用相同的系统。我们很快就会有一个集中的配色方案来处理所有系统上的颜色。

总结 总结下今天学到的内容：

1）发现并准确描述团队在使用颜色时遇到的问题

2）如何从提出设想，到以新的方式来定义颜色

3）如何通过语义化颜色来使得大家更方便的使用颜色，我们也可以在自己的组件库中多使用语义化的颜色来进行命名管理，这样团队协作才会更加高效。

超详细！凤凰新闻「暗黑模式适配落地」全方位复盘 凤凰新闻 APP 在 2020 年上半年完成了 Dark Mode 适配，本文主要从规范、设计和实现的角度对整个项目的落地过程进行复盘。

阅读文章 >

欢迎关注作者的微信公众号：「彩云译设计」

UI/UX 设计能力的提升离不开分析与探索，针对优秀产品的设计进行分析总结，探索设计背后的经验规则。为了辅助大家不断思考和总结，黑马家族产品体验日记栏目持续更新，希望可以开启大家更多的灵感。

今天给大家分享的总结涉及手势交互、情感化设计探索、感官体验升级、结构布局突破、自定义设计强化等内容。

利用手势辅助实现快捷操作 利用手势交互辅助隐藏式功能操作，可以在不改变当前结构的基础上实现快捷操作，带给用户更加便捷化的体验。

夸克 APP 在访问了多层级页面之后，如果想要快速回到浏览器主页，点击返回按钮一级一级返回过于繁琐。通过底部导航栏向上进行滑动，可以快速激活返回主页的操作，手势辅助实现自动跳转。该设计解决方案通过手势辅助隐藏功能操作，提高了用户对于产品的使用体验。

点赞设计的情感化探索 点赞在阅读类场景中随处可见，用于表达用户对内容的认可度而产生的情感共鸣，通过点赞给予赞同。点赞设计的创新已逐步在探索，通过更加情感化的设计表达提高 用户体验 ，借助手势的变化呈现出更有趣味性的点赞设计。

今日头条 APP 单击点赞图标会随机性弹出表情化符号，多次点击会持续弹出更为丰富密集的表情符号，长按则会像模拟持续发射的特效，伴随着音效和震动带来“视听触”等多重体验。点赞设计的情感化探索不仅带给用户多重感官体验，也是用户释放阅读压力的一种情感共鸣。

情感化的点赞文案设计 除了从点赞视觉感官层面进行设计探索以外，众多产品也在文案提示设计上面进行情感化探索。

AcFun APP 在对话题等内容点赞时，会弹出温馨的文案提示，每次点赞都会出现不同的文案。情感化的文案设计提高了话题互动的活跃度，带给用户更好的社交互动体验。

突破常规的模式切换设计 设计都在探索差异化的感官表达，如何突破常规至关重要。无论是在布局结构层面还是元素情感化表达层面，设计师都在尝试更有创新的表达，带给用户不一样的使用体验。

Wonder APP 在模式切换上做出了一个新颖的设计解决方案，通过环形卡片设计进行模式切换，可以单击和滑动进行切换。动态的卡通形象增加了感官体验，流畅的卡片切换也带来了不错的操作体验，是一个在布局层、视觉感官层、互动层等方面的不错探索。

特色的签到展示设计 签到设计对于大家来说并不陌生，提高用户签到的参与度是大家都在不断思考和探索的方向。

AcFun APP 将签到设计成日历展示形式，点击签到之后弹出，配合日历运势的概念来设计，提高用户的签到兴趣。内容却不是正式的日历运势相关内容，配合趣味化的文案设计，让用户会心一笑。视觉感和情感化文案设计的融入，提高了签到设计的感官体验，进而提高用户的参与度。

自定义字号提高阅读体验 通过公众号等自媒体进行阅读已经成为大家的习惯，不同公众号编辑内容都会有所不同，字体大小和行间距等没有特定的规范。官方虽然会有默认设置，但是无法兼顾不同的内容需求。提高小编的编辑体验和满足用户的阅读体验，自定义的阅读调整至关重要。

在公众号阅读文章时，可以通过右上角的功能入口进入“调整字体”。用户可以根据自己的阅读习惯设置字体大小，在标准和自定义大小之间切换，提高用户的阅读体验。

自选色实现更灵活的个性换肤 个性化的皮肤主题在众多产品中已经运用普遍，当用户体量增加之后，个性化的设置才能满足不同用户的体验需求。

酷我音乐 APP 在个性换肤模块中，除了设置多个主题皮肤供选择以外，用户还可以通过自选色设置更加灵活的配色风格。可以选择更多推荐的配色风格，也可以通过色环自己调节任意颜色，满足不同用户对于感官体验的需求。

自定义图满足用户的创作欲 对于一些追寻个性化较强的用户，预装的自定义设计已经无法满足他们的体验需求，激发用户创作欲的设计迎面而来。

酷我音乐 APP 在个性换肤模块中，用户可以通过“自定义图”实现更加个性化的皮肤。用户可以选择任意拍摄的照片，然后通过透明度和模糊度来调节照片效果，满足自己对背景效果的要求。针对按钮的颜色也提供了几个配色选择，用户可以根据自己调节后的背景效果进行搭配。基于更加个性化的需求满足用户的创作欲，才能带给用户更加人性化的使用体验。

关联功能叠加设计提高使用率 为了提高功能的曝光度，直接展示在用户的视野中是很多设计师的处理形式，但是却增加了感官层面的视觉负担。

幸识 APP 把关联功能进行合并式的叠加设计，不仅对视觉进行降噪，由于属于关联性的操作，用户更容易通过功能联想进行使用。当用户点击观看“时间戳”时，底部功能会被替换为“发起”，发起时间戳和观看本身就是一个流程的体验。当我们遇到关联性功能设计时，不一定选择各自展示，相互叠加或者切换式的交互设计也是不错的解决方案。

趣味性爆满的点赞设计 点赞是用户情绪化表达的关键，表示对于内容的认可度和作者的支持度。普通的点赞设计已经无法满足一些情绪爆满的用户，更加趣味夸张的设计在逐步被探索。

微博 APP 针对点赞设计单击时，出现表情化的符号弹出，持续点击或者长按点赞图标则会出现色彩丰富、表情符号四处爆发的视觉效果。一场趣味性爆满的视觉盛宴，满足用户释放情绪的最大化需求。

小结 在用户使用体验和感官体验层面探索了这些优秀的案例，希望可以抛砖引玉，带给大家更多启发。发现设计背后的思路，总结设计表达的经验，运用优秀案例的技巧，提高我们的设计解决能力。

以上总结仅代表个人观点，如有不足欢迎大家留言补充，我们互相进步。

10个产品细节剖析，看看大厂是如何做设计的！ 前言 满足用户需求、提升用户的产品使用体验，是产品在设计过程中必然要考虑的事情。

阅读文章 >

欢迎关注作者的微信公众号：「黑马家族」

大家好，我是努力为 设计师 寻找 效率工具 的花生~

今天继续为大家推荐的 5 款能有效提升工作效率的神器，它们分别是：

无损压缩！功能超全的 GIF 处理神器「EZGIF.com」 写教程必备！快捷键图片生成工具「KeyCaps」 打开即用！免费的图片转文字神器「白描网页版」 样式可调节！Google 字体推出系列图标「Material Symbols」 改颜色换样式！文件夹修改神器「Folder Painter」 错过上一期的小伙伴看这里：

这 5 款工具，让设计师工作效率提升 200%！（四） 大家好我是花生~ 勤勤恳恳挖掘效率神器的我最近又发现了不少好用的小工具，今天就继续为大家推荐其中不能错过的 5 款，它们分别是： 一键查看！

阅读文章 >

EZGIF.com 「网址直达」 https://ezgif.com/optimize

「EZGIF.com」是一款在线的 GIF 编辑工具，功能包括在线制作 GIF，视频转 GIF，GIF 裁剪、删帧、比例压缩、旋转、添加文字、调速、倒放等等。虽然是外文网站，但是可以直接打开使用，无需注册登录。

我最常用的是它的 GIF 优化功能，用来压缩 GIF。将 GIF 上传后，拖动横条选择压缩强度，点击优化，片刻后就会有压缩好的图像显示出来，可以很直观地看到压缩后图像的质量和大小，不行的话可以调整选项重新压缩。

它提供的压缩选项很多：优化颜色、定向删帧、有损压缩、优化透明度等等。个人经验定向删帧和有损压缩的优化效果最好。

KeyCaps 「网址直达」 https://kcaps.app/

「KeyCaps」是一个专门生成快捷键图片的工具，输入所需的快捷键，1 秒生成对应图片。网站提供快捷键 7 种不同的快捷键样式，可以切换 Mac 符号。支持导出 JPG 和透明底的 PNG。

白描网页版 「网址直达」 https://web.baimiaoapp.com/

「白描网页版」是一款在线的文字识别工具，无需登录注册，免费使用。将文字图片或 PDF 上传后就能快速识别，准确度非常高，还能保留文本格式。

提取出的文字可以直接复制，也能导出为 DOCX 和 TET 格式。除了识别图片，「白描网页版」还支持识别表格和数学公式。

Material Symbols 「网址直达」 https://fonts.google.com/icons （需梯子）

Google 字体想必大家都非常熟悉了，上面有很多高质量的免费可商用字体，最近 Google 字体推出了新的图标系列 Material Symbols。

Material Symbols 包含 2500 个图标，分为轮廓、圆角、尖角三种大类。图标被整合为字体文件，这意味着我们可以像调节字体一样，调节这些图标的大小、粗细和填充形式。且 Material Symbols 还有 figma 插件，这比其他图标库都灵活很多。

Folder Painter Folder Painter 是一款可以改变文件夹颜色和样式的软件。我的桌面上放了很多文件夹，找资料不太方便，用 Folder Painter 将常用的几个文件夹颜色修改后，它们瞬间成为一堆黄色文件夹中“最靓的仔”，定位快了很多。

Folder Painter 程序不到 900KB，安装后回到桌面，选中文件夹单击右键，就能修改文件夹的颜色和样式。程序已打包，下载链接文章开头和结尾都有。

以上就是为大家推荐的 5 款效率工具，希望对大家的工作有帮助。 如果你有想要解决的问题，但还没有找对应的工具，欢迎在评论区分享出来，说不定下一期就会有相应的推荐了~

我是夏花生，我们下期见。

大家好，我是努力为 设计师 寻找 效率工具 的花生~

今天继续为大家推荐的 5 款能有效提升工作效率的神器，它们分别是：

无损压缩！功能超全的 GIF 处理神器「EZGIF.com」 写教程必备！快捷键图片生成工具「KeyCaps」 打开即用！免费的图片转文字神器「白描网页版」 样式可调节！Google 字体推出系列图标「Material Symbols」 改颜色换样式！文件夹修改神器「Folder Painter」 错过上一期的小伙伴看这里：

这 5 款工具，让设计师工作效率提升 200%！（四） 大家好我是花生~ 勤勤恳恳挖掘效率神器的我最近又发现了不少好用的小工具，今天就继续为大家推荐其中不能错过的 5 款，它们分别是： 一键查看！

阅读文章 >

EZGIF.com 「网址直达」 https://ezgif.com/optimize

「EZGIF.com」是一款在线的 GIF 编辑工具，功能包括在线制作 GIF，视频转 GIF，GIF 裁剪、删帧、比例压缩、旋转、添加文字、调速、倒放等等。虽然是外文网站，但是可以直接打开使用，无需注册登录。

我最常用的是它的 GIF 优化功能，用来压缩 GIF。将 GIF 上传后，拖动横条选择压缩强度，点击优化，片刻后就会有压缩好的图像显示出来，可以很直观地看到压缩后图像的质量和大小，不行的话可以调整选项重新压缩。

它提供的压缩选项很多：优化颜色、定向删帧、有损压缩、优化透明度等等。个人经验定向删帧和有损压缩的优化效果最好。

KeyCaps 「网址直达」 https://kcaps.app/

「KeyCaps」是一个专门生成快捷键图片的工具，输入所需的快捷键，1 秒生成对应图片。网站提供快捷键 7 种不同的快捷键样式，可以切换 Mac 符号。支持导出 JPG 和透明底的 PNG。

白描网页版 「网址直达」 https://web.baimiaoapp.com/

「白描网页版」是一款在线的文字识别工具，无需登录注册，免费使用。将文字图片或 PDF 上传后就能快速识别，准确度非常高，还能保留文本格式。

提取出的文字可以直接复制，也能导出为 DOCX 和 TET 格式。除了识别图片，「白描网页版」还支持识别表格和数学公式。

Material Symbols 「网址直达」 https://fonts.google.com/icons （需梯子）

Google 字体想必大家都非常熟悉了，上面有很多高质量的免费可商用字体，最近 Google 字体推出了新的图标系列 Material Symbols。

Material Symbols 包含 2500 个图标，分为轮廓、圆角、尖角三种大类。图标被整合为字体文件，这意味着我们可以像调节字体一样，调节这些图标的大小、粗细和填充形式。且 Material Symbols 还有 figma 插件，这比其他图标库都灵活很多。

Folder Painter Folder Painter 是一款可以改变文件夹颜色和样式的软件。我的桌面上放了很多文件夹，找资料不太方便，用 Folder Painter 将常用的几个文件夹颜色修改后，它们瞬间成为一堆黄色文件夹中“最靓的仔”，定位快了很多。

Folder Painter 程序不到 900KB，安装后回到桌面，选中文件夹单击右键，就能修改文件夹的颜色和样式。程序已打包，下载链接文章开头和结尾都有。

以上就是为大家推荐的 5 款效率工具，希望对大家的工作有帮助。 如果你有想要解决的问题，但还没有找对应的工具，欢迎在评论区分享出来，说不定下一期就会有相应的推荐了~

我是夏花生，我们下期见。

UI/UX 设计能力的提升离不开分析与探索，针对优秀产品的设计进行分析总结，探索设计背后的经验规则。为了辅助大家不断思考和总结，黑马家族产品体验日记栏目持续更新，希望可以开启大家更多的灵感。

今天给大家分享的总结涉及手势交互、情感化设计探索、感官体验升级、结构布局突破、自定义设计强化等内容。

利用手势辅助实现快捷操作 利用手势交互辅助隐藏式功能操作，可以在不改变当前结构的基础上实现快捷操作，带给用户更加便捷化的体验。

夸克 APP 在访问了多层级页面之后，如果想要快速回到浏览器主页，点击返回按钮一级一级返回过于繁琐。通过底部导航栏向上进行滑动，可以快速激活返回主页的操作，手势辅助实现自动跳转。该设计解决方案通过手势辅助隐藏功能操作，提高了用户对于产品的使用体验。

点赞设计的情感化探索 点赞在阅读类场景中随处可见，用于表达用户对内容的认可度而产生的情感共鸣，通过点赞给予赞同。点赞设计的创新已逐步在探索，通过更加情感化的设计表达提高 用户体验 ，借助手势的变化呈现出更有趣味性的点赞设计。

今日头条 APP 单击点赞图标会随机性弹出表情化符号，多次点击会持续弹出更为丰富密集的表情符号，长按则会像模拟持续发射的特效，伴随着音效和震动带来“视听触”等多重体验。点赞设计的情感化探索不仅带给用户多重感官体验，也是用户释放阅读压力的一种情感共鸣。

情感化的点赞文案设计 除了从点赞视觉感官层面进行设计探索以外，众多产品也在文案提示设计上面进行情感化探索。

AcFun APP 在对话题等内容点赞时，会弹出温馨的文案提示，每次点赞都会出现不同的文案。情感化的文案设计提高了话题互动的活跃度，带给用户更好的社交互动体验。

突破常规的模式切换设计 设计都在探索差异化的感官表达，如何突破常规至关重要。无论是在布局结构层面还是元素情感化表达层面，设计师都在尝试更有创新的表达，带给用户不一样的使用体验。

Wonder APP 在模式切换上做出了一个新颖的设计解决方案，通过环形卡片设计进行模式切换，可以单击和滑动进行切换。动态的卡通形象增加了感官体验，流畅的卡片切换也带来了不错的操作体验，是一个在布局层、视觉感官层、互动层等方面的不错探索。

特色的签到展示设计 签到设计对于大家来说并不陌生，提高用户签到的参与度是大家都在不断思考和探索的方向。

AcFun APP 将签到设计成日历展示形式，点击签到之后弹出，配合日历运势的概念来设计，提高用户的签到兴趣。内容却不是正式的日历运势相关内容，配合趣味化的文案设计，让用户会心一笑。视觉感和情感化文案设计的融入，提高了签到设计的感官体验，进而提高用户的参与度。

自定义字号提高阅读体验 通过公众号等自媒体进行阅读已经成为大家的习惯，不同公众号编辑内容都会有所不同，字体大小和行间距等没有特定的规范。官方虽然会有默认设置，但是无法兼顾不同的内容需求。提高小编的编辑体验和满足用户的阅读体验，自定义的阅读调整至关重要。

在公众号阅读文章时，可以通过右上角的功能入口进入“调整字体”。用户可以根据自己的阅读习惯设置字体大小，在标准和自定义大小之间切换，提高用户的阅读体验。

自选色实现更灵活的个性换肤 个性化的皮肤主题在众多产品中已经运用普遍，当用户体量增加之后，个性化的设置才能满足不同用户的体验需求。

酷我音乐 APP 在个性换肤模块中，除了设置多个主题皮肤供选择以外，用户还可以通过自选色设置更加灵活的配色风格。可以选择更多推荐的配色风格，也可以通过色环自己调节任意颜色，满足不同用户对于感官体验的需求。

自定义图满足用户的创作欲 对于一些追寻个性化较强的用户，预装的自定义设计已经无法满足他们的体验需求，激发用户创作欲的设计迎面而来。

酷我音乐 APP 在个性换肤模块中，用户可以通过“自定义图”实现更加个性化的皮肤。用户可以选择任意拍摄的照片，然后通过透明度和模糊度来调节照片效果，满足自己对背景效果的要求。针对按钮的颜色也提供了几个配色选择，用户可以根据自己调节后的背景效果进行搭配。基于更加个性化的需求满足用户的创作欲，才能带给用户更加人性化的使用体验。

关联功能叠加设计提高使用率 为了提高功能的曝光度，直接展示在用户的视野中是很多设计师的处理形式，但是却增加了感官层面的视觉负担。

幸识 APP 把关联功能进行合并式的叠加设计，不仅对视觉进行降噪，由于属于关联性的操作，用户更容易通过功能联想进行使用。当用户点击观看“时间戳”时，底部功能会被替换为“发起”，发起时间戳和观看本身就是一个流程的体验。当我们遇到关联性功能设计时，不一定选择各自展示，相互叠加或者切换式的交互设计也是不错的解决方案。

趣味性爆满的点赞设计 点赞是用户情绪化表达的关键，表示对于内容的认可度和作者的支持度。普通的点赞设计已经无法满足一些情绪爆满的用户，更加趣味夸张的设计在逐步被探索。

微博 APP 针对点赞设计单击时，出现表情化的符号弹出，持续点击或者长按点赞图标则会出现色彩丰富、表情符号四处爆发的视觉效果。一场趣味性爆满的视觉盛宴，满足用户释放情绪的最大化需求。

小结 在用户使用体验和感官体验层面探索了这些优秀的案例，希望可以抛砖引玉，带给大家更多启发。发现设计背后的思路，总结设计表达的经验，运用优秀案例的技巧，提高我们的设计解决能力。

以上总结仅代表个人观点，如有不足欢迎大家留言补充，我们互相进步。

10个产品细节剖析，看看大厂是如何做设计的！ 前言 满足用户需求、提升用户的产品使用体验，是产品在设计过程中必然要考虑的事情。

阅读文章 >

欢迎关注作者的微信公众号：「黑马家族」