导语：​提起中后台，除了高效、灵活和强大之外，不可忽视的还有它的海量数据。海量数据的筛选与呈现，直接决定决策人员的效率高低。本文作者主要是结合自己在实际工作中遇到的表格设计问题，针对Web端数据呈现方式之一，表格的设计进行探讨。

表格，是一种常见的信息组织整理手段。常用来展示、保存、对比分析、排序、筛选 、归纳等，是最清晰、高效的数据展现形式之一，由内、外两部分组成。

内部：由表头、表体、表尾共3部分组成；
外部：由筛选区域、操作按钮区、分页区共3大类组成。
从易读性和易操作性两大方面，教你做好表格设计

说完表格的组成，接下来将会从易读性和易操作性两个方面来分析下表格设计。

易读性

1. 行与列

表格的组成，也可以看作行与列的自由组合，这种组合赋予了表格多样性的特点。行与列构成了单元格的长与高，不同的长高会有疏密之分，充实与透气之感。

B端中后台通常会对应不同的角色及场景需求，根据目的及信息主体的不同，让用户根据自己的需求来定义表格的展示列及列的顺序，也可以通过行与列的显隐变化，来更好的满足信息的传达。

但需要注意的是系统应记住用户上一次的自定义列设置，减少用户重复操作。对于列的选择，应尽量减少列的数量，既要展示用户必要信息，又要避免出现用户无关数据，以免信息冗余，影响信息阅读效率性。对于用户需要的非重点、辅助性信息可以通过入口提供的方式来解决。

默认排序，应从用户目的出发，遵循用户查看数据的习惯，尊重数据之间的关联性，设计用户查看、操作数据的路径，而非随机排列。

从易读性和易操作性两大方面，教你做好表格设计

1. 数据展示

B端中后台中的表格展示的数据多且杂，这就要为用户先一步对数据进行梳理归纳，提高用户获取信息速度。

为便于对数据进行对比分析，一般需要在原始数据的基础上给出差值、升降变化、平均值、总计等数据处理结果，减少用户二次加工数据的过程，提升用户阅读信息的效率。

数据汇总展示

在表头或者表尾分别提供了总计的数据，方便用户进行快速查阅。

从易读性和易操作性两大方面，教你做好表格设计

数据对齐展示

常用对齐方式有数字右对齐，文字左对齐，混合型文本左对齐，列标签的对齐方式与数据的对齐方式保持一致。这样能形成的视觉边界线，便于视线的流动，从而快速提升数据的浏览、对比效率。

从易读性和易操作性两大方面，教你做好表格设计

空数据展示

B端中后台数据类型较多，对于空数据，切忌不要与数据为“０”进行混淆，对于空数据通用做法是用“－”表示，而不是什么都不显示，会让用户误以为是没有数据还是“0”数据。

最好做法就是为空数据做出释义，可以加在“列标签”的名词解释文案中。

从易读性和易操作性两大方面，教你做好表格设计

数据的关键属性标识展示

对于用户重点关注的数据状态、上升和下降等，可以用符号进行标识，帮助用户快速定位到目标信息。

从易读性和易操作性两大方面，教你做好表格设计

1. 固定表头、固定列和固定分页

在有限屏幕内，有限的内容展示区域内，阅读丰富且繁多的表格时，用户不得不拖动横向或纵向滚动条来阅读信息。

固定表头、固定列和固定分页，能够让用户明白当前单元格内信息的属性而不至于不知道该信息的意思。

固定表头

在固定的小区域内滚动会非常局促，而且区域滚动和全屏滚动同时存在时体验也很不好。固定表头可帮助用户识别信息，在全屏滚动上去后固定表头，有利于用户向下翻屏时能够便利的阅读数据。

从易读性和易操作性两大方面，教你做好表格设计

固定列

固定列的内容可视业务及目标用户的诉求而定，一般采用方法是固定比较重要信息，方便用户进行数据定位与对比，最好可以让用户自定义，满足不同用户诉求。

从易读性和易操作性两大方面，教你做好表格设计

固定分页

分页处理目前有放在上部、下部或上下部均有，需要根据场景来选择。分页固定目的是为了省去用户需要翻到顶部或底部进行操作的麻烦。

特别是可以自定义每页的数量和需要横向拖动数据查看，这就需要把分页固定在底部，方便用户横向拖动滑条查看信息和进行翻页操作。

从易读性和易操作性两大方面，教你做好表格设计

1. 分页

在Web端中的表格，涉及到跨页的数据操作时，分页会带来不便。

但往往受限于数据加载的压力，这种情况在大厂中尤其突出，加载数据都是亿量级别的，在Web端和手机端都需要实时下载数据的终端，我们通常做法就是提供分页展示数据来缓解服务器的压力。

表格中的的数据内容超过一定“数量”时需要提供翻页功能，而这个“数量”是由表头的数据的高度、表格的行间距、目标用户群体的显示设备的配置等因素来决定。

原则上整张表不要超过一屏，考虑到每个用户的使用习惯，我们一般提供可以让用户自定义每页的显示的数量，相比于跨屏翻页而言，向下滚屏会更便利，也更符合浏览信息路径。

从易读性和易操作性两大方面，教你做好表格设计

1. 全屏查阅

表格全屏展示是非常有必要的：

特别是在小屏设备上，全屏模式下可以直接屏蔽掉左侧导航栏、上方的报表区域和顶部的导航栏，可为用户提供更多可视区域。
在大量数据前面，可为用户提供沉浸式阅读体验，让用户更加专注，可减少与表格无关的视觉干扰。
用户可通过ESC键或关闭按钮随时退出全屏模式，操作成本低。
从易读性和易操作性两大方面，教你做好表格设计

易操作性

1. 筛选

在大量的表格信息中，如果没有筛选查找信息简直犹如大海捞针，而表格跟筛选是不分家的。

说到表格一定会说到筛选，筛选也就是数据过滤，常在数据量较大的场景中使用，其目的是通过关键字搜索和条件筛选能够帮助用户快速的找到所需要的信息内容。

对于表格外部筛选，如果有时间会单独出一篇详情介绍。这里不展开详细说。

筛选根据筛选功能的位置不同，可分为表外筛选和表内筛选。

表外筛选：筛选功能位于表格上方，与表内筛选的不同之处是过滤值可以不限“表格列”的内容、可单次进行多列的交叉筛选。
表内筛选：筛选功能位于表格内，也就是放置在列标签上的筛选，受“表格列”内容的限制，仅能做单次单列的筛选。
从易读性和易操作性两大方面，教你做好表格设计

1. 数据选择

在信息列数较多的情况下，数据的选择就尤为重要。当鼠标指针悬停在表格列或行时，给予视觉状态的变化提示，可以让用户捕捉到所在的位置，而不至于视觉上的错行，能够降低人的心理压力和增加掌控感。根据数据选择功能分为单个选择和批量选择。

单个选择

鼠标指针悬停在整行时应与默认态有所区分。当标识选中行或选中行的数量，选中行可操作的命令状态须同步，明示当前行可操作的命令或反馈当前已选行的数量。

从易读性和易操作性两大方面，教你做好表格设计

批量选择

提供选择当前页部分行、选择全部行、取消选择全部行三种功能；状态反馈分为半选态 、未选态、全选态共三种。

当用户未进行选择时，表头的选择框的状态是未选态；
当用户选择一行数据时，此时表头的选择框的状态切换为半选态，同时反馈此行的数量；
当用户在表头勾选“当前页所有行”时，表头的选择框切换成了全选态，且给出了选择“全部所有行”的操作。
从易读性和易操作性两大方面，教你做好表格设计

1. 数据操作

对于数据的操作，主要针对表格内部来说。表格操作大体可分为显性操作和隐形操作。

显性操作

指操作选项显示在行内，优点是明显直观，可以根据列表上的信息做出快速的判断并且高频发生的操作。

适用列数较少的列表。但弊端是信息过载，尤其是列数较多，可展示列数会随操作数增加而减少，同时误操作率较高。对于危险系数比较高的操作，也不建议采用这种设计。

从易读性和易操作性两大方面，教你做好表格设计

隐性操作

当鼠标悬停或点击时才显示其他低频、高危的操作选项，优点是界面简洁明快，信息密度低，可以帮助页面突出更加重要的信息，可减轻空间压力，减少干扰。

弊端是增加用户的点击次数和提高了操作门槛。列数较少的表格不适用隐性操作。

从易读性和易操作性两大方面，教你做好表格设计

1. 数据下载

为方便用户对数据进行再次整合分析、统计分析等，可提供数据下载功能及多种下载格式。

从易读性和易操作性两大方面，教你做好表格设计

1. 空表

对于B端中后台来说，表格显示最多就是两种情况：一种就是表格有数据，这种最容易解决，有数据就显示相应数据；还有一种表格是没有数据，也就是空表状态，这也是让很多设计师容易忽略掉的页面。

空表分两种：可创建和纯展示

可创建

是用户有创建诉求，数据是由用户或系统产生的，可创建分两种：

比较轻量的方式，是直接示意用户创建数据，无须给出表格样式。
在表格的空白内容处加入创建的快捷入口，引导用户新建。
从易读性和易操作性两大方面，教你做好表格设计

纯展示

没有创建诉求的，数据是系统产生的，不是由用户创建的，直接告之暂无数据。

从易读性和易操作性两大方面，教你做好表格设计

写在最后
看上去平淡无奇的数据表格，其实是非常重要的，通过合理的组织架构和呈现方式，使原本枯燥的数据呈现出生命力，这是一件很神奇的事。

而围绕用户目的与实际使用场景，为用户准确高效的筛选信息，反映隐藏在数据背后的秘密，促进信息的理解，降低用户的决策成本。设计一个准确、高效、易用的表格，更是一件考验设计师功底的事。

4月20日开始，麦当劳日本与奥特曼联名的2款汉堡正式上市限量发售，与此同时，麦当劳日本还推出了一款在线LOGO字体生成器，用户可以在上面输入文字，然后生成《奥特曼》在上世纪 60 年代和 70 年代极具科幻风格的时髦字体。 笔者生成的「LOGO新闻」 字体生成界面干净易用，只需在文本框中输入您想要的任何内容，即可生成对于的字体。但遗憾的是，文本仅限于六个字，而且不可以是汉字，只支持片假名字符生成。 据悉，麦当劳日本与奥特曼合作发售的2款日式炸鸡汉堡分别对应着杰克·奥特曼和初代奥特曼，而且会根据联动款式不同，汉堡的外包装设计也有所不同。 包装分为深蓝色和红色两种，深蓝色包装盒的「归来鸡肉塔塔的奥特曼（杰克奥特曼）」汉堡使用的食材是南蛮鸡肉塔塔，对应的是《归来的奥特曼（杰克·奥特曼）》；红色包装盒的「宫崎名产南蛮鸡肉塔塔」款汉堡则对应的是《新·奥特曼》。 熊本县西瓜汁和青森富士苹果汁 熊本县西瓜汁和青森富士苹果汁 众所周知，《归来的奥特曼》是圆谷制作公司于1971年制作的51集特摄电视剧，而《新·奥特曼》则是日本导演庵野秀明企划的「新·日本英雄宇宙」系列的第3部电影作品，该电影于2022年5月13日上映。 《归来的奥特曼》和《新·奥特曼》海报设计 为了配合麦当劳和奥特曼的联动，麦当劳日本在上周二公开了一系列电视广告。广告将以《归来的奥特曼》的主题曲为背景音乐，讲述了不知为何，人类好像都失去了力量。而就在这关键时刻，一小女孩佩戴的汉堡项链发出信号，四十米高的奥特曼拿着汉堡出现了。 人们激动万分，估计是吃了奥特曼的大汉堡，一下子恢复了活力。看完这广告不禁让人想起魔性的士力架广告「饿货，来条士力架吧！」。不过按照奥特曼的和人类的比例关系来说，奥特曼拿来的汉堡应该够这群人吃上几个月了。 麦当劳的创意广告合辑 自1966年开播以来，《奥特曼》已在全球100多个国家和地区播出，至今仍很受欢迎。为纪念其55周年，去年7月初，圆谷公司专门设计了一款《奥特曼》55周年纪念官方LOGO。LOGO由奥特曼的英文名字「Ultraman」、数字「55」以及「th Anniversary（周年纪念）」三部分组成。 奥特曼55周年纪念LOGO 其中数字「55」的笔画上带有锋利的尖角，与红色的奥特曼日语片假名「ウルトラマン（奥特曼）」字体设计极为相似，也就是本文中提到的可以生成的专用LOGO字体。 《新·奥特曼》LOGO 即将上映的新电影《新·奥特曼》同样是为了纪念「空想特摄」奥特曼系列诞生55周年而上映的作品。 新奥特曼（图右）的胸前没有指示灯 值得一提的是，本片将取消奥特曼皮套，首次采用CG技术制作，相信视觉效果会更加逼真。该片原计划也是去年上映，不过因为疫情原因推迟到今年的5月13日。 原文地址: https://www.logonews.cn/ultraman-logo-generator.html

大家好，我是 Clippp，今天为大家分享的是「组件设计」。现在有很多成熟的组件库，能为设计的规范性带来更大的便利。

但作为设计师，不仅仅需要了解每个组件的样子、用在哪些地方，更需要清楚地知道组件的本质，即组件的形状、行为、状态等内在属性和设计细节，才能更深层地掌握组件设计。

组件的五种属性
想要全面了解并学习组件，首先要搞清楚组件具备的属性：

作用：定义组件的用途和作用，明白组件用来做什么的。

形状：不同形状的组件对产品、对用户分别有哪些作用。

行为：通过用户点击或触摸等动作定义交互行为。

状态：定义并告知用户当前的状态。

语境：根据组件所属的场景考虑组件不同的用途。

一看就懂！组件设计的 3 大类型+5 种属性科普

1. 形状

通过形状的差异，我们能快速辨别不同类型的组件。在设计中，通常采用「文字与图形」相结合的形式来定义组件的形状。在设计组件时，要将形状、颜色、图标和文字等视觉元素组合在一起，并合理安排组件的层级结构。

例如一个点赞按钮的设计，看起来很简单，但是如果我们结合不同的使用场景和吸引用户注意力的程度去考虑，一个点赞的组件就可以分为下面 6 种甚至更多的形状。

一看就懂！组件设计的 3 大类型+5 种属性科普

所以在设计时，要充分地考虑使用场景和诉求，并对组件的形状有清晰的认知，在接下来的设计中需要哪种形状的组件直接对号入座，整个设计过程就会变得很明确。

1. 行为

行为和交互逻辑以及业务逻辑相关，会告诉用户操作后的结果。用来告知用户触发组件时的即时反馈，或者组件当前处于什么状态。

一看就懂！组件设计的 3 大类型+5 种属性科普

1. 状态

通过组件状态的变化可以告诉用户当前在进行哪一步操作，有助于用户了解组件当前的情况。常见的组件状态包括：正常状态、聚焦状态、悬停状态、激活状态、加载状态、禁用状态。

正常状态(Normal)：是组件最常规的状态，也是设计师首先设计的状态，表示这是用户可以交互的元素。

聚焦状态(Focus)：多用在电脑端中，表示元素已被选中。比如在填写表单时，点击键盘上的 tab 键，电脑的光标会切换到下一栏，下一栏的输入框出现聚焦状态。

悬停状态(Hover)：当鼠标悬停在元素上时，元素会有状态的上的变化。另外，在移动端和 Pad 端上的组件不需要悬停状态。

激活状态 (Active)：点击组件时，组件的颜色会变深，同时还会出现内阴影等效果。

加载状态(Loading)：表示当前数据仍在加载中，需要等待。

禁用状态(Disabled)：组件置灰状态，告知用户当前条件不满足，无法使用。

一看就懂！组件设计的 3 大类型+5 种属性科普

1. 语境

组件的用法跟随场景或环境会发生变化。即使是同一个的组件，在不同的使用场景中也可以有不同的使用方法。

所有的设计元素都是相对的，它们会根据组件的排版位置、一起使用的其他组件元素以及用户的使用目的等来定义组件的用途。

固定/可变：定义大小是可变还是固定。

窄/宽：根据空间的宽度定义用途。

层级结构：即使是相同的功能也需要根据层级结构定义组件的用法。

浮动：定义组件是基于可访问性浮动还是基于滚动移动。

一看就懂！组件设计的 3 大类型+5 种属性科普

组件的三种类型
组件的类型大致可以分为三类：导航类（用于导航信息的组件）、输入类（用户输入信息时使用的组件）、信息类（用于向用户传递信息的组件）。

一看就懂！组件设计的 3 大类型+5 种属性科普

1. 导航类组件

作为导航提示或者展示信的组件，包括卡片、列表、网格、轮播、选项卡、菜单栏等组件。

卡片：容纳信息最常见的方式。

列表：用于对同一属性的信息进行排序，以便于识别。

网格列表：用于在两列中显示卡片或信息单元。

轮播：用于水平滚动而不是垂直滚动。

选项卡：用于显示具有不同类型的信息。

菜单：用于显示难以用选项卡显示的大量复杂层次结构。

一看就懂！组件设计的 3 大类型+5 种属性科普

1. 输入类组件

用于输入信息或做出选择的组件。现在很多组件库中的输入类组件形状都很相似，这样设计的原因是考虑到用户的使用习惯，避免使用让用户感到陌生的组件。

复选框：当选择多个元素时使用

单选按钮：当只能选择几个元素中的一个时使用

文本字段：当用户输入文本信息时使用

下拉菜单：打开菜单查看各种信息时使用

按钮：用于在各种场景下输入有关用户决策的信息

切换开关：用于打开/关闭特定状态

一看就懂！组件设计的 3 大类型+5 种属性科普

1. 信息类组件

用来传递信息的组件，根据要输入的信息类型来传达用户的选择。常用的信息类组件包括：

指导文字：用于提供指导信息。

工具提示：用于展示文字无法传达的内容。

吐司提示：轻量级的提示，在提示过后通常会自动消失。

警告：用来向用户传达需要清楚了解的重要信息。

弹窗：向用户传达需要做出选择的内容。

用户引导：用于传达用户不熟悉的页面内容。

一看就懂！组件设计的 3 大类型+5 种属性科普

最后
以上就是组件的属性和类型的解析，希望通过这些内容能帮助你对组件有更多的认识和思考。

「组件系列」的其他文章，近期也会不断更新，欢迎大家关注

Dribbble 平台对于互联网 UI 界面设计有着举足轻重的定位，对 Dribbble 设计的研究会让我们看清设计的方向。

为了保证这篇文章的质量，Dribbble 年度的每个作品都超过 550 赞。在此原则下挑选了 828 件作品，作品总的大小为 2.2G。

总结
从挑选出的 828 件作品中，排名前十的作品中 9 件为 B 端设计，另一件作品也是 B 端产品 C 端化的产物。其中：

B 端界面设计占比 476/828，57.4%；
C 端界面设计占比 180/828，21.7%；
视频动效作品占比 223/828，26.9%；
明眼人都能看出其中的比重关系，B 端设计再次大火，为什么是再次？因为 B 端设计之前火过，只不过没有赶上一个好的时代，在 C 端设计风光的十年里而忽略了其存在。随着 C 端市场饱和与数字化的浪潮下，实体经济、ToB、ToG 的产业再次迎来了它的曙光。视频动效的作品占比也已超过 C 端界面设计，相信今年视频动效作品占比还会再次提升。

Dribbble 年度最佳作品
从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

Dribbble 年度最佳作品来自大家最熟悉的 UI8 团队中的 Tran Mau Tri Tam ✪，作者来自越南西贡，最佳作品截止目前355K浏览量，2933个赞。

为什么看似平平无奇的作品却能获得 Dribbble 年度最佳作品呢？既不是 C 端也不是纯 B 端的作品，更像一个网页与平面的结合体。如果去掉搜索图标、分类图标和按钮，你可以理解它就是一个平面作品，一个字体加几何形体构建的作品，为了丰富画面的层次，让画面更加的活泼采用了多彩加几何色块，让标题阅读有停顿感和呼吸感。faster 底部的横线让它从标题文字中脱颖而出，这种使用线条突出重要信息的设计也是今年Dribbble 设计流行趋势之一。

MetroUI 是 Windows8 的界面设计语言，在 2010 年至 2013 年间曾经风靡一时，那也是移动互联网的发展元年，现在国家推行实体经济、数字化带动 To B、To G 的发展元年，通过几何色块（MetroUI）实现 B 端产品与 C 端设计风格的传承与衔接，你会发现历史总是惊人的相似。最后背景结合今年最流行的微软风，毛玻璃的多彩高斯模糊渐变风，年度作品当之无愧。

最后来看下按钮的设计，正常的按钮要么文字加色块，要么左图标加右文字，它设计成左文本加右图标，更加注重信息的可读性和易读性，也体现 B 端设计重功能和交互体验，视觉点到为止的设计理念。

下面我们来欣赏年度最佳作品里面的流行趋势吧。

1. 易读性（停顿感）

字体三原则：可读性、易识性、易读性。当你同时读一篇文言文和一篇设计文章，肯定设计文章的内容可读性更好。易识性是用在字体设计上，不能过于浮夸的改变字体骨架、形体而不易识别。易读性和每个位设计师都息息相关，因为我们都需要编排文本。当我们小时候写作文时，不会写的文字可以用拼音代替。这时候读者读到拼音时会有停顿感，更加适合用户阅读。

通过给用户制作停顿感来增加用户的易读性。可以在相关联文本后面添加图片、表情、图标来更好的理解文本内容，丰富文本内涵。比如情侣间表达爱意时会输入文本，“我爱你”、“我 Love 你”、“我 ai 你”、“我❤️你”，哪个更加会有情感共鸣呢？不言而喻，相信你心中已经有答案了。

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

1. 曲线

在标题文字上添加曲线来突出重要文案是 2021 Dribbble 最流行的趋势之一，第一个设计目的就是突显文字，其次就是想表现铅笔真实书写的感觉。之前很多带有签名的设计中，签字的文本都是手写体的感觉，手写体对比电脑的机械字体会带有一种人文气息，也会让两者之间产生一种对比、矛盾。

除了突显文本外，曲线还有视觉引导的作用。通过视觉引导让用户按照设计师编排的顺序进行浏览界面。当然还有比这更科学的工具就是眼动仪测试，通过真实用户眼睛浏览界面显示对应的热点图。

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

1. 多彩高斯渐变风

多彩高斯渐变风是从色彩的角度来传达和丰富画面的，多彩高斯渐变风其实是从制造矛盾到平衡矛盾的过程，多彩渐变多为冷暖对比来制造画面的冲突，需要控制冷暖画面的大小来实现平衡。主流的还是以暖色突显为主。多彩渐变主要起到活跃气氛、吸引目光、平衡画面的作用。

多彩高斯渐变还可以结合轻拟物、几何图形、三维等新的组合方式去创新，给用户呈现一种更加新颖的视觉表现形式。最后我们还是要回归到内容上，为了更好的传达信息需要去设计与内容相匹配的视觉风格。

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

B 端界面设计

1. 侧边栏 Sidebar

B 端设计的火爆带动了 B 端相关模块设计，更多的人也愿意尝试 B 端相关模块设计，侧边栏作为产品架构中重要的导航系统，好的侧边栏设计能为用户带来更好的效率。主流侧边栏都做了展开、收起、拖拽等交互效果，也是受限于 PC 屏幕为展示更多数据而腾空间。侧边栏主要承担的功能有导航、分类、自定义筛选、共享、新增等。Dribbble 的 B 端产品设计已经不再是假大空概念设计，而是一套实用美观可落地的设计。

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

1. 仪表盘设计

仪表盘设计是一个很好的隐喻，想象一下开摩托车或汽车主驾驶前面的屏幕，汽车仪表有燃油表、车速表、里程表、水温表、转速表、故障指示灯等。B 端类产品后台界面的仪表盘设计也需要展示一些重要的数据和各种状态，大体分为侧标栏、导航栏、待办任务、个人信息、报表数据、消息中心、快捷入口等。当然最重要的就是报表数据，团队收益、任务进度、转化比例、新增、存量、团队工作时长等都是老板或领导关心的内容。每个公司业务不同、每个人员权限不同，自定义的仪表盘也各有差异。重要的是突显数据和业务状态，需要分层级系统性去思考和设计。

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

1. 流程设计

复杂的事情简单化，简单的事情标准化，标准的事情流程化，流程的事情自动化。流程设计是每一个企业核心功能和业务，可自定义的管理流程系统搭建也是 B 端产品设计的难点，需要对业务高度抽象，让每一个业务人员可自定义的流程才是好的流程设计。

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

1. B 端 C 化

B 端 C 化是 B 端产品设计的视觉表现力慢慢往 C 端产品设计的视觉靠齐，国内 B 端产品界面设计视觉水平还有很大的提高空间。除了视觉上的提升外，由于业务的发展，B 端产品也开始移动化、智能化，国内主流还是通过小程序、H5 来现实 B 端产品 C 端化。

B端产品C端化是自嗨？对不起我想得太简单了！
经常在网上看到「B 端产品 C 端化」的讨论。

阅读文章 >
从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

1. 轻代码化

轻代码化是一种低代码赋能无代码的方式，弥补无代码拓展性差、覆盖场景少的问题。在保有无代码灵活、易用、快捷的同时，又能覆盖低代码使用场景。简单理解就是无需代码开发即可如搭积木般快速、灵活地创造属于你的个性化管理系统，轻松实现多元业务场景的数字化管理。

轻代码化将功能进行打包，升级成全局可以用的配置，技术人员配置好后，业务人员在应用编辑时直接选择使用模版，绑定对应的变量即可使用。

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

界面设计技巧

1. 人文气息

为什么人加色块的组合方式能流行起来？还是 B 端行业流行带动的。B 端讲的更多的是企业对企业。企业对企业除了讲行业解决方案外，还需要传达公司的价值观、使命、愿景。人加色块的组合方式非常适合体现公司的企业文化。对于一家全球化的公司不同肤色的人物组合在一起，这种人文气息和价值观已经就不言而喻了。

当然企业也需要进行营销，抓人眼球。几千年来的遗传证明了，人的大脑对食物、性、动的东西、人脸和眼睛、危险的动物很敏感。人加色块的组合方式也具有抓人眼球营销的功能。真可谓一举两得。

这种风格更适合大公司，国内的一些手机厂商 OPPO、VIVO 等也会通过手机+背景+人物来体现科技与人文的结合，而对于中小型公司产品差异化和行业解决方案展现应该还是重中之重。

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

1. 毛玻璃效果

毛玻璃效果加大了模糊程度，透明效果更加扁平，很好的顺应当下 UI 扁平化的设计趋势。苹果 Mac OS Big Sur 系统的图标、界面中运用了大量毛玻璃和半透明元素，界面更扁平。至于 C4D 三维彩色玻璃的视频教程可以在 B 站搜索“透光艺术-C4D 创建彩色玻璃的 4 个技法”，完全能满足 UI 设计师。当然还有一个好消息就是 Mac 用户可以享有 OC 一年免费的使用权，具体安装购买方法上某宝就可以轻松搞定，真香。

实战案例！「毛玻璃拟态」图标的临摹思路与原创技巧
这篇文章主要分享怎么做一套毛玻璃拟态图标，以及在这基础上如何发散创意。

阅读文章 >
从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

1. 轻拟物

轻拟物这几年一直流行，在 UI 设计中趋于稳定的位置。从写实到扁平再到轻拟物，其实是设计师们一路不断探索的结果。本质就是光影对形体产生的视觉感受。在色彩中对高光、亮面、明暗交界线、暗面、反光（环境光）五个部分的处理。写实三维的图标等设计更适用于简洁的画面中，扁平等设计更适用于复杂一点的界面中，比如 B 端产品界面中的功能图标。轻拟物可使用的范围更广，效果更佳。Sketch、Figma 软件对于渐变、高光、投影、高斯模糊处理已经非常简单且出彩。

大厂都在用的轻拟物设计风格，本文教你四步完成！
上期我们聊到了最近比较流行的轻拟物风格，科普了基础概念，如果你还没读过，可以前往阅读： [link https://www.uisdc.com/light-imitation-style] 本期展开轻拟物的具体技法讲解和演示。

阅读文章 >
从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

1. 简洁设计

简洁设计遵从了密斯·凡德罗的“少即是多”的设计原则，在 B 端产品界面中更加需要简洁设计，我们最熟悉的 Sketch 软件界面已经是相当的简洁了。回到现实当需求功能不断增加，产品界面的编排如何取舍，如何保证界面的简洁是设计师需要深度思考的问题？如何与上级沟通？该功能是否可做可不做？是否需要埋点用数据说话？如果只是一味竞品有我们就需要有，功能不断累加只会让界面越来越重。

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

1. 几何图形

几何图形和几何插画有异曲同工之妙，几何图形多为产品界面和宣传内容的抽象，产品界面的几何图形多为占位符形式，加上色彩和几何色块让其成为一个整体。B 端产品视觉设计 C 端化的进程中，几何图形、几何色彩不失为最好的突破口，相信今年Dribbble B 端产品的视觉设计一定会更上一个台阶。

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

几何图形另一个场景化的地方就是品牌，作为一名 UI 设计师一定会经历从图标到几何图形到品牌设计的过程，品牌设计的技巧基本还是以几何图形为主，至于品牌的内涵需要更深层次的解读。掌握主流品牌设计的技巧对产品定位、品牌宣传打下扎实的基础。

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

1. 暗黑设计

暗黑模式的设计是解决在微弱环境下内容也可以有更高的可读性。随着用户夜晚及深夜使用电子设备时长增大，如何在夜晚这个特定场景下使用更加舒适。合理使用暗黑模式可以减轻眼睛疲劳，提高在夜间使用的可读性。

在设计暗黑主题时，不能为了突显视觉上的逼格，而去使用高饱和度鲜艳的色彩来突显界面的品质感。而应该把舒适度、可读性作为设计的衡量指标。Material Design 给出了暗黑主题的设计准则，即正文和背景之间的对比度应至少为 15.8:1。按照此标准设计，可读性都还不错。这里介绍一个插件“Stark”（Figma、Sketch、XD、Chrome 插件）用来测试界面的对比度。

顶级大厂如何做好暗黑模式设计？来看 Ant Design 的规范文档
近年来暗黑模式的设计趋势开始一点点明显，Ant Design 在这次 4.0 的升级中也对这类暗黑场景化的设计开始进行初步的探索，接下来就让我们一起来看下 Ant Design 这一针对企业级的设计体系是如何设计暗黑模式的。

阅读文章 >
从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

1. 模块化（组件化）

为什么叫模块化，而不叫组件化，组件化更多的利用原子系统从原子、分子、组织、模版、页面来快速的搭建界面，但在 B 端产品设计中基础组件和业务组件的搭建是以提高工作效率为前提，是否有从 0 到 1 搭建 B 端产品组件的经历是设计师一生中最宝贵的经验之一，它能提高设计师的系统化思维、逻辑思维和抽象思维能力。

产品模块化设计就是将产品分成几个部分，也就是几个模块，每一部分都是具有独立功能，具有一致的连接接口和一致的输入、输出接口的单元，相同种类的模块在产品族中可以重用和互换，相关模块的排列组合就可以形成最终的产品。通过模块的组合配置，就可以创建不同需求的产品，满足客户的定制需求 。

为什么我强烈建议你学会使用模块化设计？
风筝KK：模块化设计是将设计分解成小的模块，然后独立设计它，最后再将它们组合成更大的系统，就像小朋友玩的积木一样，由一些简单的零件组成小的模块，然后再组合成各种模型样式。

阅读文章 >
从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

1. 插画

插画作为设计的一大品类，不同的插画师都有自己擅长的风格，本质是都有自己的个性，但是在产品设计中更多是需要共情、共性来讲故事，表达产品理念和价值观。这就需要插画师去尝试并探寻出适合互联网产品设计类的插画风格。设计的本质是旧元素的重新组合，插画不会过时，而是需要结合当下和产品找到最匹配的设计风格。

1. 几何插画

几何插画算是插画简化的一种表现形式，人和物的形态不再写实，而是抽象成几何图形拼凑的感觉，同时保留人物形态的神韵。加上几何色块与人物交互形态的表现，传达出简洁、科技的现代感。难点还是在人物形态的表现上，平时多练习练习速写还是很有必要的。

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

1. 线面插画

线面插画最近一两年非常流行，准确的说是非常适合。首先线面插画主要是由线条和块面组合而成，用块面表现人物形态时某些结构会表现不出来，这时候用线条简单勾勒后，结构就会清晰明了。其次当线面插画运用在界面上时，可以打破界面纯文字或组件化的机械和沉闷感。线面插画的风格提升画面热闹感的同时，还能保持界面的干净整洁。

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

动效

1. 微交互

界面微交互动效会让用户的体验更加精致到位。想要打造优秀的产品设计，微交互和动效设计是绕不开的，UI 界面设计通过微交互反馈告知用户当前正在发生的事情，所处的状态。细微的动效更能调动用户情绪，取悦用户。C 端产品微交互和动效已经很成熟了，一部分功劳来自 iOS 系统原生自带的效果。B 端产品的微交互和动效更多还是在学习海外产品，还需要给前端工程师灌输微交互和动效的设计价值，共同打造产品体验细节。

想做好微交互设计？我总结了这 8 种常见类型！
大家好，我是 Clippp，今天为大家分享的是「微交互设计」。

阅读文章 >
从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

1. Mg 动画

Mg 动画需要很好的节奏感、韵律，每一个场景动画都需要其中的元素进行连接变化，让转场动画更加自然，MG 人物动画通过点线面的动效变化让画面更加有趣、自然，通过粒子效果让特定场景无限循环会让人更加印象深刻。

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

三维

1. 三维图标

MacOS Big Sur 系统图标的更新带动了三维图标的流行，三维图标的应该场景还是需要有较大留白空间的界面，因为三维图标太小后就看不到更多细节。三维图标感觉又回到了拟物化和扁平化哪个更好的问题上？设计师应该保持开放多元的视角。设计本身也在不断的演化融合，存在即合理。合适最重要，它们都会有适合自己的场景和设计价值。

如何从零开始完成一套3Ｄ图标设计？来看大厂的实战案例！
背景 QQ 游戏中心经过设计改版之后，我们重新设定了整体的世界观——多彩的游戏宇宙。

阅读文章 >
从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

1. 轻三维

为什么轻三维在界面设计中占有一席之位？一个是设计师不断追求差异化的产物。另一个是更好的表现内容，并与用户产生共鸣。轻三维的基础模型都是来自手机界面中的各种元素，比如组件、开关、按钮、占位符、图表、几何图形、图标、进度条等，这些都是用户日常使用系统软件常见的元素，通过简单的几何形体建模—打灯光—加材质—渲染—PS调色。难度系数不大但效果很出彩。第一个出彩点是模型带有厚度的倒角，结合灯光渲染的光泽是二维软件不能比拟的。第二个出彩点就是材质自由添加，特别是当下流行的毛玻璃效果，玻璃材质渲染效果更佳。第三个出彩点就是可以加局部灯光，局部的渐变色或环境光更加出彩。

「新拟物化」过时了！此刻你最应该拥抱的是「玻璃拟物化」！
还记得今年年初大家追捧的 新拟物化（Neumorphism）风格嘛？

阅读文章 >
从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

1. P4D（PS+C4D）

P4D 是 PS 加 C4D 的设计表现技法，也是视觉设计的最后一个环节，通过 PS 对 C4D 的渲染图片进行调色，利用 PS 的调色技巧可以很好的解决 C4D 打灯光的瑕疵，还可以利用 PS 强大的合成功能，将渲染图片与图片素材进行合成，来表现画面的视觉度，当然三维软件比较难实现的水、粒子、烟花等效果，也可以通过 PS 的后期合成来实现，这也是 P4D 的强大之处。

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

1. 卡通 IP

卡通 IP 设计最近三四年技术的迭代已经慢慢的走上成熟，卡通 IP 也从传统的纯 PS 手绘技法，转到 C4D 建模—角色绑定—MD衣服制作—OC渲染—PS（静态）/AE（动态）调色。

卡通 IP 火的本质更适合做营销，相比于品牌或 Slogan，卡通 IP 具有亲和力和画面感。随着各种手办行业大热，受互联网大厂影响下，卡通 IP 已经是互联网 B 轮以上公司的标配了。如果团队中没有这样能力的人，也可以通过绘制好二维，一套三维可以选择外包完成。

对于 UI 设计师来说学习是有成本的，暂时并不是必备技能，如果喜欢完全可以学习，从设计差异化的角度来看三维视觉确实有一定的竞争力。

盲盒和NFT背后，是属于设计师的掘金热潮
前段时间冰墩墩的爆火，让本就火热的潮玩手办市场，再次成为瞩目焦点。

阅读文章 >
从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

1. 三维动画

C4D 三维场景动画通过构建实物和场景模拟生活中的现实场景，会让用户体验真实感，三维软件制作动效的最大优势是通过动力学和表达式来模拟真实感，未来在 AR/VR 领域会有更好的发展。相对于界面动效学习成本难度也相对较大。在三维动画中 C4D 软件对于域、动力学还是有一定的优势。

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

总结
上一次写 Dribbble 流行趋势还是两年前了，通过两年的沉淀对趋势流行有了更深的认知。十年的互联网行业风风火火，随着最近的互联网裁员潮大家也慢慢的进入到反思层，客观的看待和理解这个真实的世界，曾经的流行趋势也需要慢慢的沉淀下来。

存在即合理，趋势流行稍纵即逝，注定是不长久的，只有大浪淘沙历史遗留下来的风格才能更长久。但我们也不能不去关注，因为哪有什么所谓的创新，只不过是旧元素的重新组合，并符合当下这个时代人的审美需求。香奈儿的“时尚易逝，风格永存”大概就是这个意思吧。

6000 多字的设计流行趋势，希望能帮助设计师度过互联网裁员的寒春。最后希望以后每年坚持输出设计流行趋势。为设计行业奉献微薄之力。

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

8000字干货！超全面的 Web 端按钮设计指南

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

按钮的定义与作用

1. 按钮的起源与定义

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

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

8000字干货！超全面的 Web 端按钮设计指南

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

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

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

1. 按钮的作用

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

8000字干货！超全面的 Web 端按钮设计指南

作用一：触发某种功能

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

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

8000字干货！超全面的 Web 端按钮设计指南

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

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

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

8000字干货！超全面的 Web 端按钮设计指南

作用三：聚合信息

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

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

8000字干货！超全面的 Web 端按钮设计指南

作用四：培养用户习惯

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

8000字干货！超全面的 Web 端按钮设计指南

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

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

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

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

8000字干货！超全面的 Web 端按钮设计指南

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

1. 命令按钮控件

常规按钮

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

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

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

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

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

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

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

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

主按钮

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

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

8000字干货！超全面的 Web 端按钮设计指南

次按钮

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

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

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

8000字干货！超全面的 Web 端按钮设计指南

图标按钮

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

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

8000字干货！超全面的 Web 端按钮设计指南

文字按钮/链接

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

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

8000字干货！超全面的 Web 端按钮设计指南

按钮菜单

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

8000字干货！超全面的 Web 端按钮设计指南

其他命令类型按钮

幽灵按钮

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

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

悬浮按钮

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

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

1. 选择按钮控件

选择按钮通常被纳入选择控件中讲解，为了让大家更好的了解它与命令按钮的区别，此处我们来简单讲解一下常用的选择按钮：

开关按钮

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

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

无需确认或审核操作，即可生效选择后的结果
选项是独立、且对立的功能、行为，仅在“开或关”的选项上做选择时
8000字干货！超全面的 Web 端按钮设计指南
单选框

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

选项数量一般为 2-5 个
平铺展示，会更快捷提供给用户进行选择
描述过多的时候，可采取纵向排列的形式，方便用户进行对比判断
8000字干货！超全面的 Web 端按钮设计指南

复选框

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

选项数量一般为 2-5 个
平铺展示，会更快捷提供给用户进行选择
具有半选中状态(indeterminate)
可以独立出现，常用于「是否同意用户协议」等场景
8000字干货！超全面的 Web 端按钮设计指南

其他状态切换按钮

胶囊选择按钮

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

8000字干货！超全面的 Web 端按钮设计指南

标签选择按钮

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

8000字干货！超全面的 Web 端按钮设计指南

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

1. 常规按钮的组成元素

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

8000字干货！超全面的 Web 端按钮设计指南

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

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

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

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

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

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

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

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

1. 按钮的容器与尺寸制定

容器的形状，需要遵循无障碍设计

在一套系统中需要保持样式的统一性
符合用户认知，使用用户已经形成心智模型的样式
设计师如何做无障碍设计？从这五个方面出发！
互联网设计师如何着手发起无障碍优化？

阅读文章 >
8000字干货！超全面的 Web 端按钮设计指南

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

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

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

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

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

按钮的高度如何定义？

通常以 4 的倍数去制定

8000字干货！超全面的 Web 端按钮设计指南

按钮的宽度如何定义？

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

8000字干货！超全面的 Web 端按钮设计指南

1. 按钮的背景与描边

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

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

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

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

8000字干货！超全面的 Web 端按钮设计指南

1. 按钮的圆角

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

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

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

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

8000字干货！超全面的 Web 端按钮设计指南

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

8000字干货！超全面的 Web 端按钮设计指南

1. 按钮的文案

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

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

1. 按钮的投影

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

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

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

1. 按钮的层级

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

高权重按钮——色块按钮

中权重按钮——描边按钮

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

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

8000字干货！超全面的 Web 端按钮设计指南

1. 按钮位置

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

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

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

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

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

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

8000字干货！超全面的 Web 端按钮设计指南

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

8000字干货！超全面的 Web 端按钮设计指南

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

1. 按钮顺序：

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

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

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

确定主、次按钮的顺序

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

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

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

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

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

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

8000字干货！超全面的 Web 端按钮设计指南

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

8000字干货！超全面的 Web 端按钮设计指南

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

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

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

1. 根据“Z”型阅读模式，确定在右时，用户的视觉流更加流畅；
2. 根据费茨定律，确定在右时，用户到达我们想要引导他进行操作的按钮，更快，操作效率高；
3. 根据古腾堡法则，确定在右时，刚好处于最终视觉落点区，便于用户快速获得目标操作；
4. 根据方向性原则，取消和确定，一定意义上带有“上一步”和“下一步”的意义，正如前文展示的，确定在右会更合理；
5. 根据用户心智，如今移动端产品，大部分都是确定在右，一定程度上培养了很多用户的使用习惯，那么转到 web 端，保持和移动端同样的交互，用户使用起来会更顺手。（为什么移动端的产品采用这样的排布方式，个人认为大概是苹果设计规范的影响，而且据统计：全世界右利手的人占比约 90%，左利手的人仅约 10%，确定按钮在右，更利于绝大多数用户的操作）

8000字干货！超全面的 Web 端按钮设计指南

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

确定同级别按钮的顺序

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

相关按钮临近原则，将与主按钮相关的次按钮优先放在主按钮旁边。
根据业务场景，按照前文的阅读顺序规律，衡量按钮权重再进行位置分配。
8000字干货！超全面的 Web 端按钮设计指南

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

8000字干货！超全面的 Web 端按钮设计指南

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

1. 设计原则

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

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

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

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

1. 设计注意事项

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

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

按钮样式慎用大圆角

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

合理使用投影样式

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