编辑导语：大家在日常排版过程中，有没有遇到过这样的问题，当面对各种信息时，不知道如何对这些信息进行分层排版，常常会陷入比较纠结的场面。作者总结了信息层级排列的方法，与你分享，希望能够对你有所帮助。 这篇文章从另外一种维度去阐述信息层级，个人认为有效地解决了自己

编辑导语：大家在日常排版过程中，有没有遇到过这样的问题，当面对各种信息时，不知道如何对这些信息进行分层排版，常常会陷入比较纠结的场面。作者总结了信息层级排列的方法，与你分享，希望能够对你有所帮助。

这篇文章从另外一种维度去阐述信息层级，个人认为有效地解决了自己大部分排版的问题。希望对大家有所帮助。

老规矩，先看目录，按需取用，已经将重点标记出来了。

01 写在前面 大家有没有遇到这样的问题，当你面对非常复杂的信息时，在进行信息整理设计时，往往会陷入比较纠结的场面，不知道怎么把这一堆信息进行比较好的排列。如果你刚好也有这部分疑问，这篇文章适合你继续阅读。

本篇文章会提供一种解决排列问题的简单底层逻辑，我们可以围绕这个逻辑去排布我们的页面，从而让整体排版变得更加清晰合理。

02 信息层级的作用 信息层级存在于我们目前看到的每一个画面。它本质上是信息组织的一种方式，通过信息的放大缩小和对应的位置，能够将复杂的信息分为不同的模块呈现在我们的视野中。

大家先简单看一下图中两个画面，你就能够直观感受到信息层级对于用户认知的作用。

不好的信息层级就像左图一样会让画面比较杂乱，难以进行视觉上的识别。而优秀的信息层级就像右图一样能够让我们快速且准确地识别出画面想要传递的信息。

因此信息层级的排列不仅影响视觉上的美观度，更影响人们在检索信息时候的效率。尤其是对于B端复杂场景，我们不仅需要考虑清晰传递业务价值，合理的信息层级划分也是提高产品体验的重要部分，好的信息层级则意味着更好的使用体验。

03 如何做好信息层级 既然信息层级对于使用体验比较关键，那么怎样做好页面的信息层级则显得尤为重要。而目前网上的资料也是参差不齐，我也曾为此类问题查阅了大量资料，想要找到一个简单高效的答案。

但目前查阅到的资料几乎都在讲排列的四个基本原则：对比、对齐、亲密、重复。不可否认的是这四个方法对于我们排布信息层级确实起到了很大的作用。但也阐述得太过宽泛，让人很难在实际中更有效地利用。

即使我对排版四个原则非常熟悉，在面对复杂层级排版时仍会面对困惑。因此我对目前页面上比较好的页面排版进行了进一步的探索：

经过线上页面与概念的整体研究发现，他们在遵循排版原则的基础上，本质上都存在一个简单的逻辑：那些优秀的页面设计都把主内容的层级控制在了三层左右，如下图所示。

因为三层左右的层级是最容易被用户感知，且视觉上不易混乱。超过三层后随着层级越多复杂性会相对增加。

比如我们看下面这两个例子，左边层级因为特别复杂，造成用户获取信息效率变低，而通过层级的转换，我们可以将其变得更简单且易读。

再举一个例子，我们在大部分场景见到的纯文字排版基本都离不开以下几种形式：

因此，我们需要在排版时需要首先思考一个逻辑：那就是尽量将我们的内容层级控制在三层左右。且这三层内有比较明显的对比关系。

有同学看到这肯定要问了，这个道理我也懂啊，可是在实际业务中大部分时间拿到的信息太多，根本做不到保持在三层以内。

别急，这篇文章的重点当然不是告诉你这么简单的道理，而是在面对复杂层级的时候，我们应该怎样去控制它的层级表现，从而让它在最终呈现上保持在三层左右，让用户获取信息的效率更高。

其实我们在实际中的大部分优秀页面，在本身的信息层级上可能都非常复杂，但我们可以通过一系列的方法，去减轻这种多层级的影响。

从而让我们的页面即使承载了很多复杂的信息，也能变得更加简单清晰。那我们接下来就阐述一下对复杂层级的处理方案。

04 信息层级前置处理 这可能是被很多人忽略的一点，就是信息的前置处理。我也曾遇到过某些信息很复杂导致排版很困难，但却忽略了这些信息是否真实地被需要。这就需要我们从源头上进行第一层的判断。

源头降低的本质就是判断我们当前所要呈现的信息是不是必要的。其实这也是在目前工作中遇到的场景，比如某些时候产品给到了我们很多信息，但我们并不一定会全盘接受，而是通过当前页面的业务场景去进行判断。确定每个信息的合理性，从而可以决定有些元素是否可以删减，提高整体信息设计的一致性。

1. 当前的所有信息真的需要存在于页面中吗，如果去掉某些信息有无影响 比如当你在进行打车的时候，当你输入目的地之前，一切其他的信息都无需呈现。当你输入目的地后。

车辆的相关信息和价格才会进行呈现，当你打车后，司机的相关信息才会进行呈现。这些都是按照用户的使用场景来进行对应的呈现。

2. 当前信息的重要程度是怎样的，对于某些不重要的信息是否可以通过隐藏的方式展现 当你拿到一堆信息，信息的重要程度就决定了我们需要将哪些信息作为主体，哪些信息作为次要辅助信息，哪些信息甚至可以收起或者省略。

比如当你浏览新闻的时候，标题永远是最关注的，而评论，作者，简介等都是可以忽略的信息。

上述两个问题的确认，会影响我们对后面的信息排布。因此我们需要在源头，比如去和产品或者业务沟通，弄清楚该信息呈现的缘由以及必要性，这样能够帮助我们最后理清楚信息层级。

05 信息层级排布处理 信息排布的本质是通过我们对信息进行排列上的调整，来将多余的层级融入到三层以内。从而让我们整体的页面显得更加简洁。

通过目前的实践总结，我觉得目前可以有以下五种方法来帮助我们更合理地安排信息层级。

1. 信息分组 信息分组是大家在设计时都能够想到的形式，分组能够将复杂的信息打散，从而降低页面整体的复杂度。比如我们常用的分组方式有三种方式：间距、分割线、卡片。

那么这三种方式有没有区分呢，VIVO设计团队曾经就这个问题展开过用户调研，但结果表示，如果纯粹从用户的角度来讲，对其变化感知不大。

但这三种分割方式会影响我们在呈现信息时的整体视觉观感，因此我们可以根据当前信息的复杂度作出以下规则：

通过这三种场景的区别，我们可以根据信息复杂度更好地选择分割方式，让界面的表达清晰明确。

2. 利用组件拆分 组件其实是目前大部分设计师在进行信息排布时必备的部分，因此对于这部分设计师的熟练度也是最高的。而本篇想要强调的是，目前这几种组件对于我们信息层级的划分起到了比较重要的作用：树形结构、表格结构、步骤条、选项卡。

▍树形结构：对于有关联性的多层级非常适合，可以将复杂的层级结构进行收拢，从而能够显著降低信息的复杂度。

▍表格结构：对于信息多且关联性不大的复杂信息，可以聚合到表格来进行呈现，但表格的呈现方式不宜滥用，需要根据我们场景来进行选择。

▍步骤条：步骤条则对场景要求非常明确，我们可以将多个场景通过分布的形式进行呈现，从而减少当前页面的复杂度。

▍选项卡：选项卡更适合于同级的数据，对于同类型的结构可以更好地将页面进行拆分，从而让当前页面更简洁。

由于组件这一块大家的认知已经比较全了，在这里就不进行更深入的讲解了。如果有需要的同学可以通过浏览各大厂的组件文档去进行更细致的查阅。

3. 更改布局 通过改变布局的方式，我们可以将多层结构的样式通过拆分布局来将其控制在三层内。这句话什么意思呢，举个简单的例子：

从上图中你可以看出目前的层级较多，尤其是两层tab的叠加，视觉上就会显得稍微有点凌乱。我们可以通过将第二层tab换个布局，从上下结构变为左右结构，达到从视觉上简化层级的作用：

当然以上只是举了一个简单的例子。这里底层逻辑就是当遇到相对比较复杂逻辑时，我们可以考虑通过改变结构来减少其复杂度，比如上述的两栏结构，甚至三栏结构，从而让整体变得更加简洁。

4. 信息融入 我们可以利用信息融入的形式来减弱其对层级的影响。信息融入从本质上讲就是将某两种层级信息通过不同的组合方式，让其融入到同一个层级中。比如我们看下面这一个例子，Coding产品设计中将标题与tab利用分割排列在一起，从而变为同一层级，这个时候就不会出现四层的复杂结构，页面还是保持三层结构，通过这种方式有效降低了页面的复杂度。

信息融入这个方法，当我们在进行B端布局时，用得比较多。比如我们最常见的标题、搜索和按钮等都放在同一行上。这样既能够节省视觉空间，还能够降低信息层级的复杂度。

但在进行信息融入的过程中，我们需要注意的是：如果放在同一层级会造成理解上的误解时，这个时候不要采用该方案。比如搜索框的位置，放在哪个层级决定了对应的搜索范围。

5. 信息弱化 信息弱化的原则是，将某些超出层级的部分进行弱化。比如有5个层级，但其巧妙地将功能筛选融入到了当前的结构中，使得即使超过3层我们也不会觉得其特别复杂，我们再看一个例子：

可以看到TAPD将「另存为视图功能」与「缺陷统计」进行了弱化，虽然还是有4种层级，但从视觉感知的层面上不会觉得视觉凌乱。

在很多时候，我们觉得信息混乱的原因，就是页面要素太多太花哨。比如工作中的一个小卡片，也就是利用信息弱化去减少画面的复杂度：

因此我们需要学会对信息分级，不重要的信息就进行弱化，这样整体的表述上会好很多。

通过上述5种方案：信息分组、利用组件拆分、更改布局、信息融入、信息弱化，我们可以将大部分层级过多的复杂信息简化在三层以内，从而让我们最终的页面呈现不会太过复杂，更容易被用户理解。

但不可否认仍会有更复杂的页面，即使缩减也仍有过多层级，那么这个时候就一定要记得最开始的从源头去追溯这些所有信息是否必要。

06 信息层级小细节 在研究的过程中，也总结了目前在进行信息层级排布过程中比较纠结的一些细节点，也分享给大家。希望对遇到相同问题的同学一些帮助。

1. 被忽略的沿着字的轴线对齐 大家对「对齐」并不陌生，它存在于我们的每个页面。但在对齐的过程中，我们可能会忽视一个小细节点，那就是沿着字的轴线对齐。比如下图两个例子：

在看见左图时，总觉得哪里会有点奇怪，但又不知如何表述。而右图看着就会相对更舒服。经过对比过后明显发现右边的图整体相比于左侧会更整齐，而这就是说的沿着字的轴线对齐。

这主要是由于相似原则引起的：那些明显具有共同特性(如形状、大小、颜色等)的事物会被我们的视觉组合在一起，即相似的部分在感知中会形成若干组。

而左侧因为标题字和底部字没有形成对齐，因此会显得更加凌乱一点。所以沿着字的轴线对齐会让我们在整体的页面呈现中显得更整齐。

2. 卡片是用线框还是背景 这是我平时在做设计呈现时也会纠结的一个问题。当你想用卡片来呈现视觉时，你有没有纠结过到底是用线框卡片还是背景色填充呢。

我就曾陷入这种纠结，但在去搜索查阅时，发现目前其实关于这块相关的资料，因此在大部分情况下都是由设计师自行决定的。但经过线上产品的调研发现，这块内容其实也包含着一定的规则：

（1）取决于卡片的数量

对于卡片少的其实可以用色块来呈现，对于卡片多的可以考虑用线框来进行。这其实主要是从一个视觉的维度来进行呈现，举个简单的例子：

通过coding和飞书的卡片对比，你会发现卡片过多时线性设计会让页面显得更整洁和清新，色块设计就会让页面显得更厚重。右侧整体的呈现会显得更好一些。

（2）取决于页面的视觉重心

这里页面视觉重心的含义是当你整个页面都全是线框时，你可以利用色块的卡片来达到突出页面重心的效果，让整体页面没有那么单调，可以看到下图的例子，右侧的页面会相对更稳重一点。

3. 底色用灰色块还是彩色块 在进行色块时，时常会纠结用灰色底还是彩色底来进行。那么这两者到底有没有界限的区分呢，我们应该何时使用这两种色彩呢。

我们先看一下案例：

可以看出目前这两种颜色的运用更多的是功能上的区分：

彩色背景更适用于「想要引起用户注意的界面」，比如一些功能引导或者营销性质的页面。从表现性质上来讲更重。 而灰色背景更适用于「利用灰色背景来区分层级关系」或者一些微弱提示的信息。从表现形式上来讲更轻。 所以我们可以根据当前的信息场景来选择合适的色彩，后面再面对时就可以不用那么纠结。

07 写在最后 本期的内容到这里就结束了。关于这期的信息层级内容，真正需要深入了解的是控制信息层级背后的方法。

很多时候我们看见的优秀页面并不是因为它本身就简单，而是通过我们合理的信息层级控制，让最终呈现上显得不复杂，这其实也是我们在实际工作中需要注意的很重要的一个点。

本文重点内容再回顾，当我们遇见复杂的信息层级时，需要分三步：

明确当前所有信息的必要性和重要分级，需要从源头去深入了解； 运用五个方法可以有效降低信息层级：信息分组、组件拆分、更改布局、信息融入、信息弱化 同时在运用过程中需要注意影响层级的小细节 以上是本文关于信息层级的另一种角度的描绘，虽然没有提及四大基本原则，但在实际运用中也是很重要的。最后，虽然进行了很多资料查询，但在在阐述过程中不可避免会有阐述不到位的地方，欢迎进行反馈。

 

本文由 @蒙东东东 原创发布于人人都是产品经理，未经许可，禁止转载

题图来自Unsplash，基于 CC0 协议

给作者打赏，鼓励TA抓紧创作！

{{{path> 赞赏

编辑导语：做设计时，如果一个一个的修改按钮，很容易让设计师沦为做图机器，如果提前搭建好可复用的组件模板，就可以一次性批量修改，解放生产力，让设计师把更多的时间精力投入到业务需求的深入思考中。 一、背景 1. 为什么需要 Figma 组件库 当我们在做设计稿的时

编辑导语：做设计时，如果一个一个的修改按钮，很容易让设计师沦为做图机器，如果提前搭建好可复用的组件模板，就可以一次性批量修改，解放生产力，让设计师把更多的时间精力投入到业务需求的深入思考中。

一、背景 1. 为什么需要 Figma 组件库 当我们在做设计稿的时候，例如做一个按钮，如果没有做成可复用的组件，那后面在其他模块要用到按钮的地方可能又需要重新画，会有很多的重复劳动。又或是另一种场景，我们需要把按钮的尺寸或颜色统一调整，可能需要一个一个去改，很容易改错或者疏忽。

总之，一次性设计是使设计师沦为做图机器的罪魁祸首。如果我们提前搭建好可复用的组件模板，就可以达到复用的目的，而且可以一键批量修改，从而解放生产力，把更多的时间精力投入到业务需求的深入思考中。

2. Figma 组件库在设计体系中的定位 设计体系（Design System，也可以叫设计系统）是可复用组件的集合，由清晰的标准引导，通过机制化的组织流程和具象的指南与工具加以整合，以帮助开发者（设计、研发等）高效且一致地创建大量的应用，并且动态地确保用户体验的一致性。

需要指出的是，设计体系不只是组件库，不只是样式指南。当你浏览上面这些案例内容的时候，你固然会看到组件库和样式指南，但更值得关注的是它们陈述的设计目的、设计理念、设计原则、设计模式、设计与工程同步的方法等等。

Figma 团队做了一个专门以设计体系为题的网刊，域名为 designsystems.com。该网站有大量围绕设计体系的文章、教程及代码库。

总的来讲，Figma 组件库是设计系统中的一部分，是沉淀设计规范的设计资产。作为连接设计师和设计师、设计师和开发的桥梁，组件库首先应该是灵活易用的；其次，组件库是需要跟随产品不断进化的，这就要求它是容易被维护的，否则它就会落后于产品迭代，直至逐渐被遗弃。

二、Figma 组件库如何助力设计提效 1. 线上调用、实时同步 跨团队使用组件库(样式、组件)、实时更新、组件库的主题颜色一键切换、组件可以增加提示语等功能，所有的调用方式都是线上的，不需要任何本地文件的传输。如果组件库有更新，只需要 Review 之后 Update 即可实时同步。

2. 多人协作、共创共建 Figma 组件库可以有多个设计师共同创建，大家只需要约束好相应的组件层级嵌套规范，每个人可以负责自己所属的模块，分别更新、分别发布。

3. 灵活拼装、自由组合 Figma 组件库有非常高的自定义拼装能力，不解除组件的基础上也能够改变一些颜色、圆角、布局间距等。对于一些特殊的业务场景，也能将基础组件拆分开进行组合。

三、Figma 组件库搭建经验分享 1. 原子设计理论 提到组件库，不得不提到原子构建理论。Atomic Design(原子设计)是构建Design System 的核心指导理论。化学中，所有的物体都是由原子构成，原子组合构成分子，分子组合构成有机物，最终形成了宇宙万物。

2013年 Brad Forst 将此理论运用在界面设计中，形成一套设计系统，包含5个层面：原子、分子、组织、模板、页面。那么对应设计系统来说，我们的颜色、字体、图标以及按钮、标签等都会对应到相应的原子和分子，通过组件之间的搭配组合，最终构成页面。

2. Foundation 全局基础样式 在设计系统中，基础样式可以理解为构成设计稿最基础的「原子」。如果你的设计稿中全部都使用共享样式，当后续需要调整时，只需要调整样式库即可，设计稿会跟着变化，而不需要一个个调整；样式库还可以通过 Design Token 来映射到前端代码中，以提高最终开发的还原度。

样式是 Figma 中的一些可以复用的模式，目前支持四种：

1）颜色样式（Color）

颜色样式可以用于填充颜色、描边颜色、文字颜色。是页面整体风格表现的重要基本元素，它可以建立品牌的识别性，梳理页面的视觉层级关系，突出内容并平衡其他视觉元素。建议大家可以按照功能和属性将颜色进行分组命名，比如，比如品牌色、成功色、警告色等，并将默认、悬浮、点击、禁用等颜色放在一组，方便团队其他设计师使用。

2）文本样式（Text）

文本样式中包括：字号、字重、行高和字距等。需要注意的是不要单纯的将名称命名为T1、T2等纯符号性的名称，可以在后面加上适当的语义化描述，比如一级标题、常规正文等文案，同时也可以在描述里添加对应的使用说明，这样当鼠标悬浮在这个样式上，会给用户带来提示性的预览。这种办法同样适用于颜色、阴影等全局样式，会更加方便大家调用且能够很好的解除新用户的使用疑虑。

3）效果样式（Effect）

效果样式包括：外阴影、内阴影、模糊、背景模糊等。阴影值应该遵循现实物理世界中物体的特性。因此在阴影的设定上采用了三层阴影的表达方式，让阴影更加柔和，更符合真实光源下的物体状态。物体的高度直接影响阴影，离地面越高阴影越大，模糊值越高，反之相反。

4）布局栅格（Layout Grid）

横向和纵向布局参考。可以通过栅格样式来制定全局的尺寸和间距规范，尤其是用在响应式网页的设计当中，可以通过栅格来做出一些适配效果。

3. 创建样式 在 Figma 中创建四种样式（颜色 Color、文本 Text、效果 Effects、栅格 Layout Grid）的操作类似。

这里以颜色为例，选中一个图层，Fill 填充颜色之后，点击右边的四个点图标，在弹出的 Color Styles 颜色样式面板中点击加号，然后再填写样式的命名就能创建了。这里补充一下命名中使用斜杠“/”可以给样式进行分组。

1）批量创建样式

如果想一次性创建多个颜色样式，可以将所有的颜色通过矩形平铺出来之后，按下快捷键 Cmd+R，来批量更改好图层命名。

然后再通过插件「Styler-Generate Styles」就能一键批量创建样式，解放双手。

以上是以颜色样式距离，其他的文字样式、效果样式的创建方法也是同理。

2）样式命名

样式命名对于共享样式库的显示顺序十分重要，你可以通过斜线分隔命名的方式来给它们归类。比如说你可以设置一系列的警告颜色，都以 error/ 开头，再设置一组排版文字的颜色，都以 Text/ 开头，这样它们就会被自动归类，方便你在使用时查找。一般有以下几种分类依据：

按色调分类 按主题分类 按场景分类

3）样式描述

给样式添加描述和给组件添加描述作用一致，描述信息可以帮助你判断哪里该用哪种样式，保持团队风格统一。另外补充一下，描述也是可以被检索到的，例如可以尝试名称用英文和前端对齐，描述用中文方便英文不好的同时协作。

4. 组件类型 1）主组件（Main component）

在左边图层列表内显示为紫色的，图标为四个菱形组成的图形。它作为主组件，它的变化会实时同步到它所有的实例组件中，有时也称之为父组件。

2）实例组件（Instance）

对着主组件接着按下 Cmd D 复制的元素，它们在左侧图层列表内显示为紫色的空心菱形。它们作为主组件的引用，会自动同步主组件的各个属性变动。一个主组件可以有多个实例组件，有时我们也称其为子组件。实例组件有以下特点：

可以修改很多属性，比如背景色、文字内容、布局间距等，修改的属性不会再跟着主组件同步； 图层结构不可以改动，也不可以删除图层，按删除键不会删除而是隐藏图层； 内部图层尺寸不可以改，但是实例组件整体的尺寸可以更改。 实例的编辑可以逆向覆盖。只要在实例替换面板中点选 Push overrides to main component，即可将当前的实例属性同步给母版及所有的实例。

5. 组件嵌套 组件的嵌套，类似原子理论中「分子组合成组织」的过程。它所对应的元素往往是一些较为复杂的控件、卡片等。比如我们上面做的按钮组件，将它的实例结合图标、文案编为一个结果页 Frame，再将 Frame 组件化即可完成一个组件的嵌套。

6. 组件集（Variants） 当我们有很多相近的组件时，可以把它们做成一个组件集（也称变体）。这样在引用时就不用从一堆相似组件中寻找了，只需要切换不同的多组件属性即可。例如按钮可以按照类型（Type）和状态（State）共四种。

1）属性切换

那么，我们就可以把它创建为一个有两个维度属性的变体，此时可以通过组合 Type 和 State 属性来切换四种状态。其中 Type 和 State 称为属性名，后面的选项（比如 Default、Hover）称为属性值。

2）创建组件集

创建组件集有两种方式。一是选中多个主组件，在右侧就会出现组合为变体组件集（Combine as variants）选项，点击之后这些主组件就会被一个组件集（紫色虚线的 Frame）装起来，在组件调用面板也变成了一个组件；二是选中没有做成组件对普通图层，点击上方的 Create component set也能创建组件集。默认会调用左上第一个属性的组件。

3）组件集命名

创建组件集的时候 Figma 会自动根据组件名称中斜线（ / ）分割的值来生成属性列表，所以在创建之前推荐先按照一定规则命名。如下图，我们按照 Button/Type/State 的格式给每个按钮命名，Figma 会自动提取出所有可能的属性，生成右侧的属性值列表。

4）属性和值

按照上图命名的四个按钮组合为变体组件集之后，在右侧会显示自动分好类的属性值，不过我们还需要手动更改一下属性名，也就是把 Property 1 改为 State，把 Property 2 改为 Type。

5）组件调用

此时按下 Shift+I 打开组件调用面板，可以看到四个按钮组件在这里只显示为一个按钮。拖拽一个实例组件到画布中，我们就可以在右边通过选择属性来切换不同的按钮变体了。

6）属性值顺序调整

这里右侧的属性名和属性值的显示顺序可以在变体组件集的面板中调整。从组件调用面板拖拽出来的实例组件，各项属性值都默认选第一个，所以我们一般会把使用频率比较大的属性值排在第一位。

7）组件属性- Boolean Property

上述实例组件右侧面板中的属性选择都是下拉菜单的形式，如果我们的组件是现实隐藏，例如图标左侧是否带图标，可以通过组件属性的现实隐藏来实现。选中图标，点击右侧面板 Layer 右边的箭头，修改默认值为 True 或 False。

后面在调用的时候，就能通过开关的形式来切换是否现实图标，同时组件集内部的数量也并不会增加，可以节省内存消耗。

8）组件集内增加组件

我们可以直接在变体组件集里面添加新的组件，选中变体组件集之后在右下角出现一个紫色的加号，点击它可以添加变体组件。

9）组件集属性冲突

假设我们要添加一个禁用状态的主按钮。点击添加变体，此时虚线框中会复制出一个按钮，我们把它的背景色修改。可以看到，选中变体组件集时在右侧会出现属性冲突的提示。因为这个新添加的变体组件属性也会被复制过来，和已有的组件属性一样，就有了冲突。

这里发生冲突的是它的 State 属性，它也是 Default，我们把它更改为 Disable，属性冲突的提示就消失了。

10）组件集内增加属性名

当需要增加属性类型的维度时，可以点击 Properties 右侧的加号按钮，创建新的 Variant，创建好之后相当于多了一个新的属性名，便可以将每个组件设置对应属性名的属性值。

11）注意事项

变体可以帮我们避免大海捞针式的选择，将组件切换简化为少量属性组合，但是在创建和使用变体时养成一些好的习惯可以帮我们更好的利用它。

并不是任何组件都适合组合在一起成为变体，我们一般把同一组件的不同状态组合为变体； 切换变体的时候也相当于替换组件，所以我们要确保一个变体组件集内的各个组件结构和命名一致，这样在切换的时候已修改的属性才会被保留；

如果需要解除变体组件集，可以直接将组件从虚线框内拖拽出来，全部拖拽出来这个组件集虚线框就会消失； 组件集也是一个 Frame，不过是一个特殊的 Frame，这个紫色虚线框是可以修改的，你还可以给它添加自动布局属性来自动排布里面的组件变体； 使用 Config 2022 更新的组件属性中的新功能，例如 Boolean Property、Swap Instance Property，可以一定程度上减少组建集内部的组件数量，避免巨型变体组件集，如果 一个变体组件集内有几千个组件，可能会消耗大量内存，导致操作 Figma 卡顿。

四、Figma 组件库的发布、更新和使用 组件库制定的意义，就是让团队每一位成员都能用到最新的组件，提升效率、保证一致输出。那么接下来就讲一下如何在 Figma 中发布、更新和适用组件库

1. 发布组件库 Asset 点击 Team library 按钮（书本图标）； Library 面板上，点 Publish； 二次确认面板，再次点击 Publish 即可发布成功；

1）发布频率

当组件库发生变动，维护者发布后使用者在文件中会收到通知，来决定是否同步更新到设计稿。如果维护者频繁发布，使用者也会频繁收到通知，所以最好将更新发布固定在一定频率，比如每天下午六点发布一次，这样使用者只需要每天早上更新一次就可以了。

2）私有组件 Private components

当组件库中有一些临时或者很少复用的组件，可以给这些临时组件的命名前加上 _ 或者 . ，也就是英文符号下划线或点。在发布组件库的时候，Figma 会自动隐藏这些私有组件，这样你在构建组件库的时候可以遵循原子化方法，同时发布出去给其他设计师使用的组件库也很简洁，不会有一些临时组件。

2. 复用组件库 创完了组件库，团队成员的复用步骤如下：在Tteam library 开启想生效的组件库，开启后在 Assets 中就可以找到组件库对应的组件然后复用，可以通过分组形势查找，也可以通过关键词模糊搜索。

3. 更新组件库 组件库也可以理解成是设计团队的一个小的产品，也是需要不断更新迭代的，当我们的组件库有更新内容的时候，可以和发布组件时进行同样的操作，点击 Assets 面板中的 Team Library 按钮，就能将在组件库中修改的内容发布更新至云端。

1）同步云端组件库

当原组件库发生变化，Figma 右下方回弹出一个提示框，点击 Review 进行查看，可以预览所有在本文件中用到的组件库中的组件的更新的情况，确认之后点击更新，即可将变化同步到所有用到此组件库的文件。通过这种更新同步组件库的方式，便能够达到一键修改，全剧替换的便捷操作。

2）复制组件的注意事项

组件通过 复制粘贴 来复用只适用于两种情况：对于同文件下完全适用；对于跨文件的情况，组件 只有在作为组件库发布后才可以跨文件粘贴复用 ，否则，复制粘贴的方式只能直接拷贝母版，无法以实例的状态拷贝！

比如上面做好的 Button 组件，同文件复制粘贴没有问题。但对于跨文件复用的场景，如果跳过发布，由文件 A 直接拷贝到文件 B ，拷贝后显示的就是没有正确复用的 Main component 状态；只有在 Libraries 发布后，拷贝到文件 B 时才显示为被复用的实例状态。

4. 组件的替换 组件的替换主要有两种形式，一种是组件与组件的切换，点击右侧面板组件名称的下拉选择器，例如从按钮切换到复选框，属于两个完全不同的组件切换；另一种是组件集内组建属性的切换，在组件属性的选择其中切换即可，例如按钮内部的各种状态切换。

五、结语 Figma 组件库是一个强大的提效工具，也是设计系统中很重要的一部分。作为连接设计师和设计师、设计师和开发的桥梁，有了统一的标准后，输出出的效率也会大大提高，对于团队来说能很好的提升产品的品牌感和体验。另外组件库是需要跟随产品不断进化的，这就要求它是容易被维护的，需要梳理清楚它的使用者是谁，要把 Figma 组件库当作一个设计团队的产品来维护和升级，方便使用对象的查找、复用和理解。

由于时间和篇幅有限，关于 Figma 组件库介绍中存在的疏误之处还望大家给与指正，欢迎大家一起学习和讨论。

参考文献：

《设计体系：数字产品设计的系统化方法》

https://help.figma.com/hc/en-us/articles/5579474826519-Create-and-use-component-properties

https://help.figma.com/hc/en-us/articles/4404856784663-Swap-style-and-component-librarieshttps://mp.weixin.qq.com/s/PoEk5vRRrquLOTOH3QZgIw

 

作者：波波 Bobby He ；深耕 B端体验设计，持续学习输出中。

本文由 @波波Bobby He 原创发布于人人都是产品经理。未经许可，禁止转载。

题图来自 Unsplash，基于 CC0 协议。

给作者打赏，鼓励TA抓紧创作！

{{{path> 赞赏

编辑导语：人们常说，优秀设计背后的工艺是无形的，然而，这不是随机发生的，不管人们是否注意到，设计的背后是遵循着大量而严格的原理去执行的。本篇文章将探讨那些最底层的设计原理，并分析它们为什么会使得设计更加有效，感兴趣的朋友快来看看吧! Hi，我是彩云。设计趋势年

编辑导语：人们常说，优秀设计背后的工艺是无形的，然而，这不是随机发生的，不管人们是否注意到，设计的背后是遵循着大量而严格的原理去执行的。本篇文章将探讨那些最底层的设计原理，并分析它们为什么会使得设计更加有效，感兴趣的朋友快来看看吧!

Hi，我是彩云。设计趋势年年在变，设计技能也在不断更新，但回到本源，底层的理论知识是不会变的。我自己几乎每年还会翻看一些讲设计基础的书，比如《写给大家看的设计书》之类的，会发现这些原理每次看都会有新的收获。 随着工作年数增加，对底层知识的价值认识也越来越深刻， 不知道你会不会有这种感觉？

在Medium上看到一位工作超过17年的国外设计leader写的一篇关于设计原理的文章，讲设计如何变得有效？总结得很好。文章很长，为了提高你的阅读体验，我打算分2期来更新，如若你能耐心看完，相信定会有收获！

当没有认知紧张时，用户心流才会发生。 当一个设计有效时，你才能体验到认知上的轻松。如果没有，你的“心流状态”就会中断(稍后会详细讨论)，让我们陷入认知紧张，于是“设计失败了”。

当基本设计原则被忽略时，这种情况很容易发生，导致设计无法“整合”。这些基本原则包括：平衡性、一致性和视觉层次、负空间、接近性、对比、统一、一致性、配色方案和排版层次等方面。 （彩云注：很多人看到这些以为自己都懂，但实际设计时犯错最多的也是这些问题）

从神经科学的角度来说，当一个设计起作用时，我们会“感受到它”。其影响立竿见影。它发生在潜意识里，在一瞬间完成，是人的本能反应。我们不需要把它放在显微镜下分析它。

优秀设计以简洁和优雅而引人注目。 乔纳森·伊夫(Jonathan Ive)和迪特尔·拉姆斯(Dieter Rams)都可以算作这种设计思想的拥趸。

人们常说，优秀设计背后的工艺是无形的。然而，这不是随机发生的。 不管人们是否注意到，设计的背后是遵循着大量而严格的原理去执行的。 伟大的设计师不会在画板上随意地将各种元素组合在一起，这是有方法的。

相反地，当一项设计被认为“有些地方不对劲”时，人们就会下意识地觉得这个设计是有问题的。这样的结果会给品牌或产品带来不好的影响。当一个高端或奢侈品品牌受到高度关注时，这种影响尤其有害。这就是为什么你永远不会遇到设计不完美的香奈儿(Chanel)商店的原因。

“你对一件事的第一印象会建立起你随后的观念，如果一家公司在你看来不专业，你可能会认为他们做的其他事情都不专业。——Daniel Kahneman，普林斯顿大学心理学教授

这不是一个精心制作的设计，会导致认知紧张。你会在这个网站上预订你的行程吗？

我们都同意上面是糟糕的设计，就像建在沙子上的房子，一个忽视基本设计原则的设计将会崩溃。潜意识里，它会立即被认为是破碎的，无论是视觉上、精神上和情感上。

人类的大脑是懒惰的、有偏见的，喜欢走捷径。Daniel Kahneman称之为“低维思维”。当人们看到某种设计时，它的“美学完整性”、视觉感知和神经科学之间存在着相互关联。

当一个设计是合理的，换句话说，它是令人愉快的、有效的，我们会迅速、直观的判断它是合理的。 我们的心率降低，多巴胺水平增加，会有一种幸福和平静的感觉。这就像我们听到舒缓的音乐，会沉浸在一种每时每刻的“心流状态” 中。“在这种状态下，人们会专注于一项活动，其他一切似乎都不重要”——来自于一个心理学概念，由 Mihaly Csikszentmihalyi在他的畅销书《心流:最佳体验的心理学》中写道。

你更愿意住进哪个房间？

一、设计原则在审美完整性中的作用 苹果的人机界面指南（Apple’s Human Interface Guidelines）几十年来一直在谈论“美学完整性”。它也可以被称为“设计完整性”或“审美凝聚力”。

苹果对美学完整性的定义是“当一个设计的外观和行为与其功能完美匹配时”（彩云注：我的理解就是所见即所得，符合用户的心理预期） 。换句话说，设计的构成是产品的一个组成部分。我们将研究决定设计组合成败的设计原则——更多的是关于 UI，而不是关于 UX。

美学完整性不仅仅是关于设计有多好看。 它指的是具有明显连贯性的设计：有效的结构和布局，是什么让它产生效果。换句话说，它的元素在视觉层次、对齐、间距、平衡、对称、重复、比例、强调、接近、对比、统一、一致性、配色、排版、负空间等方面都有出色的运用，这里仅举几个例子。

这与“黄金比例”无关，黄金分割不能解决问题。 斐波那契数列螺旋没那么玄乎，给设计师带不来惊人的设计。

设计师们在安吉丽娜·朱莉或蒙娜丽莎的脸上画出金色螺旋形时惊呼道：“果然是黄金比例”。当然，自然界中确实有神圣几何学(黄金比例，又称斐波那契螺旋，是基于此)， 但 依赖“黄金螺旋”作为设计原则是一种谬论， 它已被多次暴露在其赤裸裸的荒谬中。

这是我的洗衣机，上面叠加了斐波那契螺旋。

“审美的完整性”不是没道理的。这个概念是基于基本的设计原则，是有成就的设计师实践他们的艺术作品的经验总结。

让我们来看看一些设计原则，以及它们为什么会使得你的设计更能更加有效。通常情况下，真正优秀的设计会结合这些设计原则。

我们将探讨以下这些最底层的设计原理：

视觉层次感 间距、对齐和网格 平衡 对比 对称 重复 几率原则和三分原则 引导线 比例 强调 整体性 亲密性 一致性 颜色 排版 负空间 二、视觉层次感 视觉感知的基本规则对任何视觉设计都是至关重要的，因为它们指导着如何尽可能快地传达信息。 视觉层次是设计中信息的结构和优先级。 它决定了人们接受和处理信息的顺序，因为它以一种视觉方式引导他们。

视觉层次感重在打造视觉优先级。 通过巧妙地使用颜色、形状、大小、间距、比例和方向，创造性地使用决定层次的视觉元素来传达构图的意义、概念和情绪。

核心关注点是什么，你希望用户首先注意到或开始阅读的设计中最重要的元素是什么？我们想让它成为焦点，然后其他部分的设计从这里展开。

一个具有良好视觉层次的网站会引导用户关注重要的部分

视觉层次对于每一种视觉设计都是至关重要的，无论是需要引导访客眼球的首页还是移动端UI的导航入口。用户对每个元素的理解取决于组合中的其他元素及其上下文。建立视觉层次的一些技术是:位置、大小和比例、颜色和对比、间距和亲密性、负空间、纹理、引导线和高度。在一个元素周围使用丰富的负空间可以使它看起来更有意义。使用引导线可以创造移动，就像一个人的眼睛在设计上移动一样。排版的层次结构也扮演着重要的角色，通过不同的大小和权重，我们可以让更重要的文本元素脱颖而出并建立秩序。

加分技巧 使用一个隐形三角形连接设计中的三个重点区域（构图）。 注意古腾堡图模式（Gutenberg Diagram）、F 模式（F-Pattern）、Z 模式（Z-Pattern）和层蛋糕模式（Layer Cake Pattern）的视觉扫描，并顺应趋势而不是反对趋势。

没有视觉层次的网站没有明显的兴趣点。

三、留白、对齐和网格 设计中的对齐和间距通过空间上的连接传达出一种秩序和组织感，这两个原则都在设计背后发挥重要价值。设计师早期学到的基本知识之一是在网格上编排设计，然后对齐和分隔这些元素。

左对齐、居中对齐、右对齐都没错，但你必须对齐，否则当元素没有对齐时，设计就会给人崩溃的感觉。它给人一种不安的感觉。

没对齐的话，眼睛看着很难受

网格有很多不同的类型:列网格、基线网格、模块网格、层次网格、像素网格等。不同设计使用不同网格，但最基本的是设计元素的对齐和间距。

(Illustration courtesy UX Engineer)

网格可以被打破。 一个死板的构图可能会在视觉上无趣，除非一个元素从网格中脱颖而出。错位或“打破网格”是赋予元素更多视觉权重的一个机会。当在设计中设置视觉层次结构时，它可以用来强调某些东西。

有时打破网格可以创造强调和移动

五、平衡 设计上有两种平衡:对称和不对称。 所有的构成元素：排版、颜色、图像、形状、图案、留白等，都具有一定的视觉重量。 有些元素很重，很吸引眼球，而有些元素很轻，感觉不那么重要。

这些元素的放置方式能够在对称设计中创造出一种平等的顺序感，或者一种稍微偏离平衡能够创造出一种不对称的设计。无论对称还是不对称，我们的大脑都被某种平衡感所吸引，因为它创造了和谐、秩序和美学上令人愉悦的结果。

多重原则:平衡、对齐和对称在网站上发挥作用

六、对比 “对比”指的是使设计中不同的元素更容易区别开。 强烈的对比可以在设计中强调一个区域，而微弱的对比可以弱化它，创造一个视觉层次。对比在设计中也扮演着重要的角色。对比不足会使文字特别难以阅读，尤其是对视力有障碍的人来说。

在左边的设计中，一些文字和背景之间的对比不够

Web内容可访问性指南 (WCAG)呼吁“文本的视觉呈现应该有至少4.5:1的对比度”，除了大规模文本，它应该有至少3:1的对比度。因此，设计师需要确保内容保持舒适易读。

其他UI元素(如各种显示器和设备上的卡片、按钮、文字和图标)之间的适当对比也是必须的。如果UI元素之间没有明显的区分度，设计就容易产生混乱。

七、对称 在格式塔原理中，对称和秩序的法则也被称为prägnanz，德语单词“好身材”的意思。这个原理说的是， 大脑会以尽可能简单的方式感知模糊的形状，这都是为了节省大脑能量。

我们倾向于寻找一切事物的对称性。几项研究发现，面部对称能提高人们对人脸吸引力的评价(尽管完全对称的脸其实并不一定那么有吸引力)。该理论认为，这种偏好与选择DNA最好的伴侣的进化优势有关。

对称在自然界中也无处不在。看看一只蝴蝶，一朵花，或者一只海星。

同样的原理也适用于数字领域，平衡对称的设计更令人愉悦。

对称性在应用中发挥作用。Uber Eats、Booking.com和Behance

八、重复 重复是一致性的近亲，是优秀可用性的标志。

在设计中利用重复是件好事，因为我们的大脑总是在寻找模式、相似性和一致性。为什么?因为重复相同性质的元素需要更少的认知努力。

我们更容易识别重复的模式，而不是每次看到新模式都要重新校准大脑。正如前面提到的，大脑作为一种生存机制是懒惰的，模式识别和认知捷径意味着有意识地处理视觉信息所需的能量更少。

例如，重复元素的形状和大小、填充、留白、类型和颜色，也有助于更对称、更好地平衡，做出美观的设计。

The Athletic这个软件就是用重复元素做设计的好例子。

好了，为了照顾大家的阅读体验，再写更多估计有很多人要开始没耐心了。 所以剩下的设计原则，我们下回再接着聊，敬请关注哈。

 

原文作者：Miklos Philips

原文地址：https://uxdesign.cc/design-principles-why-a-design-works-a572c5d2d92d

译者：彩云Sky，腾讯高级视觉设计师；公众号：彩云译设计

本文由@彩云Sky 翻译发布于人人都是产品经理，未经许可，禁止转载。

题图来自 Unsplash，基于 CC0 协议。

给作者打赏，鼓励TA抓紧创作！

{{{path> 赞赏

编辑导语：产品设计上的许多细节都有可能影响到用户的产品使用体验，进而影响到产品的打开率以及留存率等。这就要求产品设计师在交互体验层上结合一定小技巧，以提升用户体验。本篇文章里，作者结合案例，总结了一些UI技巧，一起来看看吧。 对于很多设计师来讲在设计界面过程中

编辑导语：产品设计上的许多细节都有可能影响到用户的产品使用体验，进而影响到产品的打开率以及留存率等。这就要求产品设计师在交互体验层上结合一定小技巧，以提升用户体验。本篇文章里，作者结合案例，总结了一些UI技巧，一起来看看吧。

对于很多设计师来讲在设计界面过程中往往会忽略掉很多的细节，比如卡片的排版、文字的排版、各种状态的反馈等等，特别是刚入行的设计师在做页面时往往是直接拿到竞品的页面搬运到自己产品上，这种做法理论上不会让自己的页面出错。

但是很多人往往忽略了一点，就是别人这么设计的目标是什么，是否会匹配自己的设计目标，如果不了解这些贸然地去搬运设计，那么时间久了会养成一个不好的习惯，需要设计师去进行设计时可能就会遇到很多难点，作为初级设计师或者刚入行的设计师，前期可以去进行搬运设计，但是一定要了解别人为什么这么做。

接下来将分享12个设计上的小技巧，大部分在日常设计中都会遇到，了解到这些设计细节，可以让我们的界面更加高效、易用、美观提升用户体验。

一、快捷交互 我在做界面时可以时常利用交互手势去帮助用户提升操作效率，避免繁杂小操作步骤。

1. 左侧为什么错？？ 左图中针对单条消息的操作汇聚到了icon内，对于用户理解成本比较高，当用户想要去删除或者屏蔽消息时需要通过聚合入口才能完成操作，大大的提升了用户操作成本。

2. 建议正确做法～~ 我们可以在类似的消息场景或者其他列表形式的场景中，添加一些交互手势，随着手机系统的更新，用户的操作习惯已经被各大产品培养的非常成熟，并不用担心用户无法操作的情况，增加手势有弊端也有优势，右图中手势增加了用户首次使用的学习成本，但是降低了高频功能的操作成本，这个理论上是可以接受的。

3. 实际产品中的运用

二、提升交互路径 利用拇指定律把关键的操作入口元素等，放置右侧提升用户操作效率。

1. 左侧为什么错？？ 左图中把按钮放置了模块左下侧，这样是不利于用户进行操作，当然如果整个模块的热区都是同一个，这样并没有什么问题，用户点击卡片区域任何位置都能够完成下一步操作，如果出现一个模块内存在多个热区入口，而用户想要到达目标必须通过按钮点击才能进入，那么左图中的排版位置就会提升用户的操作时间。

2. 建议正确做法～～ 当一个页面内出现多个相同模块或者一个模块出现多个热区入口时，按钮点击区域有限，我们设计时就可以利用拇指定律进行排版，如右图中布局，将按钮放置右侧可以便于用户在右手操作时快速到达目标，因为国内使用右手的人数远远大于左手用户，所以我们需要满足大部分的体验，合理利用拇指定律。

相关定律：费兹定律、拇指定律。

3. 实际产品中的运用

三、问题前置 对于我们来讲很多东西是简单的，但是不乏会有一些用户是陌生的，对于他们来讲可能会有填写成本。

1. 左侧为什么错？？ 左图中理论上并不是错，我们经常设计表单时都会用的提示话术，但是我们需要考虑更多维度的东西，对于我们来讲填写这种表单非常简单，例如个别用户，可能会临时忘了邮箱格式，又或者输入手机号时多填了一位数等等情况，用户错误一次操作步骤就会多一步，反之就是降低使用产品时的体验。

2. 建议正确做法～～ 如右图中，我们设计时可以更改提示的话术，帮助用户把问题前置，当用户看到提示邮箱时就会按照格式去填写，通过把手机号的位数拆分，让用户更好的记忆数字，这样无论对产品还是用户都没有任何损失，反而能降低错误频率。

3. 实际产品中的运用

四、提升可读性 无论是页面还是模块，用户在阅读时是已扫读的方式进行浏览，我们需要保证页面的文字元素具备一定的规律，以此来提升阅读效率。

1. 左侧为什么错？？ 左图中可以看到，文字与输入框放在同一列进行展示，这样一方面不利于后续的文字扩展，通常这种表单填写的页面，在页面中都是具有很大的空间位置，这样排布会造成视觉上的不规律和拥挤，降低了筛选效率，当然如果是模块区域很小的情况下，可以适当的进行使用。

2. 建议正确做法～～ 右图中我们把文字与输入区域上下排布，虽然文字长短不一，但依据对齐原则在竖列情况看是具备对齐规律的，有效地提升信息筛选效率。

3. 实际产品中的运用

五、点击引导 我们在做系统功能模块时需要注意添加功能点击引导，用户对此类消息模块认知上会默认不可点击，因此需要我们加以引导。

1. 左侧为什么错？？ 我们常见的消息模块内容为两种，一种是互动类消息即用户与用户，另一种时是系统消息即产品推送的内容。

前者基于用户习惯而言用户已经没有使用成本默认是可以进行点击交互，后者因为部分产品会把系统消息作为展示的形式给用户，但是有些产品的系统消息却是可以点击交互，这就导致了用户认知上出现了混乱，左图中像系统通知功能通知其实从视觉上看，并不具备点击欲望，因此可能会对用户造成错误的理解。

2. 建议正确做法～～ 当我们在设计时需要注意，若消息列表中存在系统类消息并且可以进行交互，在设计时可以添加向箭头、红点提示等方式告知用户可以点击，如果该功能有数据指标，这种方式也同样能赋能产品指标。

3. 实际产品中的案例

六、注意饱和度 目前市场上产品几乎都有深色版本，我们在设计时深色版本的颜色时需要注意饱和度的高低，同样的饱和度在黑色背景上会比白色背景上更加亮，这跟人的视觉感官有很大的关系，因此我们在做黑色版本时需要注意是否调整饱和度。

1. 左侧为什么错？？ 在黑色背景中使用过高的饱和度会刺激眼睛，很多深色版本都是从白色模式通过反向颜色直接调整，而彩色元素会直接运用到深色中，那么就会造成一个问题，因为我们习惯在白色模式下看颜色，忽然切换到黑色中看彩色刺激程度非常高“就像黑夜中忽然打开手电筒”，对眼睛的伤害很高。

2. 建议正确做法～～ 我们在设计深色版本时可以根据产品主色降低饱和度，包括图标等元素，以此来缓冲对用户视觉感官的刺激，目前很多大厂的处理方式是直接在彩色元素上添加一层黑色透明遮罩进行处理，这样无需在添加更多的颜色规范。

3. 实际产品中的案例

七、禁止特殊字体 在设计模块或者页面时不建议使用特殊字体来突出文字层级，这样会导致视觉不统一，以及开发成本增加。

1. 左侧为什么错？？ 左图中灰色字使用了特殊字体，看起来虽然好看，但在实际开发中会导致开发成本增加，我们产品一般使用的是系统字体，若使用特殊字体需要让开发同学添加对应字体包，这样会导致我们的产品包的内存过大，除非产品中默认一直使用该特殊字体，这样才有使用的价值。

2. 建议正确做法～～ 一般系统字体就能够满足我们的设计需求，在UI设计中我们可以通过不同的字体粗细来调整文字层级，这样能够保证视觉更加统一，减少产品包大小。

3. 实际产品中的案例

八、按钮也要有层级 在设计时需要注意多个入口在同一位置时，需要把它们进行层级划分，避免影响用户决策。

1. 左侧为什么错？？ 图中可以看到，两个面性按钮非常明显的在模块中，当用户在浏览页面中很容易出现困惑，到底需要点击哪个才能购买预定，因为两个都是面性无法快速进行定位入口，这样不仅影响用户决策效率，还会影响产品点击率。

2. 建议正确做法～～ 建议设计类似模块中时，无论是pc还是移动端都需要对入口进行结构划分，这样能够使用户在浏览页面时快速定位到入口，提升决策效率，做体验是解决用户的思考时间。

3. 实际产品中的案例

九、图标保持一致 在UI设计中使用图标时，要保持一致性，确保他们共有相同的视觉风格，相同的重量，填充和描边。不要混搭。

1. 左侧为什么错？？ 可以看到左图中的图标并不统一，线性里面掺杂着面性点缀，这在UI设计中严重违背了一致性的原则，会导致我们的页面不够严谨专业。

2. 建议正确做法～～ 在设计图标时，首先要保证图标风格一致，其次在这个基础上保证图标的描边粗细、视觉占比重量、颜色等，不要出现混搭风格。

3. 实际产品中的案例

十、利用对比 在设计页面模块时，可以多利对比度的方式来体现设计的表现力，鲜明直接的色值能够直接表达事物的性质以及特点，通过对比，也能够更加清晰的强调设计中的重点，这样给用户的印象会更深刻，同样会给产品带来一定的趣味性。

1. 左侧为什么错？？ 左图中单看视觉也没问题，只是在表现上图标与背景融入到一块了，导致视觉表现力较差，在设计中如果符合产品风格的前提下，我们可以避免这种方式，这种方式虽然具有视觉效果但不够强，对用户的记忆点不够深刻。

2. 建议正确做法～～ 设计到类似的模块时我们可以利用对比的关系，以此突出视觉元素，通过颜色焦点引导用户关注，强化用户印象同时还能增加页面的视觉表现力和氛围感。

3. 实际产品中的案例

十一、图文叠加 在设计图文叠加的卡片或者页面时，我们需要注意不同明度的图片上，文字识别是否有阻碍，一般情况会通过遮罩方式避免这个情况。

1. 左侧为什么错？？ 左图中在深色图片下字体的可读性是没有问题的，但当出现文字底部区域的图片相对复杂时便会影响识别，第二种情况当图片明度过高时文字同样无法识别，试想一下，一张白色调性的图片上放文字，那基本无法看清，严重影响阅读体验。

2. 建议正确做法～～ 在界面设计时如果遇到类似的卡片，建议在文字区域添加渐变遮罩的方式，以此保证文字的识别度，或者添加纯黑色透明遮罩进行处理，这样可以兼容不同环境的图片与文字的重叠，保证基本的阅读体验。

3. 实际产品中的案例

十二、注意遮罩透明 UI设计中经常会遇到弹窗，弹窗是需要配合页面遮罩来让用户进行专注操作，不同的遮罩透明度所带来的专注度也不同。

1. 左侧为什么错？？ 左图中我们看到，遮罩的透明度过低，我案例设置的是17%，此时弹窗内容与页面内容结构上区分并不是很明显，一般弹窗是用来让用户跳脱页面内容，从而浏览弹窗内容，转变用户目标，当弹窗无法聚焦时便很难达到目标，并且视觉上层级更加混乱。

2. 建议正确做法～～ 右图中案例我把透明度调整到了37%，我们此时再看弹窗很容易就忽略页面内容，因为灰色越高，遮挡度越高，用户跳脱感就越强，这样我们可以让用户专注弹窗内容，同时视觉结构上也区分很明显

3. 实际产品中的案例

 

作者：爱吃猫的鱼；公众号：防脱发药水

本文由 @爱吃猫的鱼 原创发布于人人都是产品经理。未经许可，禁止转载。

题图来自Pexels，基于CC0协议

给作者打赏，鼓励TA抓紧创作！

{{{path> 赞赏

编辑导语：作为设计师，也需要不断地提升自己，顺应时代的设计趋势。本篇文章中作者结合实际经验为大家分享了自己观察到的比较主流的交互设计点，感兴趣的小伙伴们快来一起学习吧。 大家好呀，去年花了半年时间写了《从用户体验分析》系列，获得了还不错的关注度，也得到了很多读

编辑导语：作为设计师，也需要不断地提升自己，顺应时代的设计趋势。本篇文章中作者结合实际经验为大家分享了自己观察到的比较主流的交互设计点，感兴趣的小伙伴们快来一起学习吧。

大家好呀，去年花了半年时间写了《从用户体验分析》系列，获得了还不错的关注度，也得到了很多读者朋友的鼓励，这里非常感谢大家的支持。

今年2022年，我观察到了一些非常棒的作品。我们作为设计师，也需要不断地提升自己，顺应时代的设计趋势。

世界变化很快，愿你保持初心，让纷繁复杂的世界如同画卷，在你的眼前展开。

随着移动互联网的发展，原本PC互联网连接商业支付、购买商品、浏览信息流等的能力已经转移到移动端，而PC互联网更加专注于其他领域的优势：

更大的屏幕能够包含更多的信息，并获得更深度的沉浸感受，如观影、浏览网页等。 通过鼠标、键盘、触控板、手绘板的连接，提供了更多的交互方式，能够执行更加繁杂的工作任务，如表格编辑、程序开发、视频制作、文档书写、图像制图、3D制图等。 得益于显卡、CPU、存储、USB插槽、显示器等的扩展性，在大型游戏、大型3D渲染、复杂制图上相较于手机端依然有一定优势。 从场景（办公场景、娱乐场景）来看，PC端移动性较差，但同时基于该特点，PC端能够更加专注当前任务。模块化、多人协同、多端协同的发展正不断地提升用户的使用体验。 下面是我观察到的目前比较主流的交互设计点，与大家分享。分别是：

无缝体验 交互更加高效 更加智能化、降低门槛、降低门槛、降低门槛 更加模块化 更加简洁、甄别关键任务 3D动效、大图、带来更深的沉浸感 协同合作的兴起 一、无缝体验 典型的案例就是苹果的Mac系统与Ios系统越发趋同，都采用了卡片化、模块化，整个交互规范、视觉感受都一致以达到多端统一。

同时信息可以自由流转：比如在同一Apple账号下，Mac与IOS中复制的信息可以进行同步粘贴。备忘录、日历、提醒事项、录音中的信息进行流转，在任何一台Mac上登录Apple账号后都可以进行同步。

在国内，B站的网页端与App端的体验也逐步趋同，框架设计上更加卡片化与扁平化。

信息流转上，手机上暂停的视频到网页端继续播放，实现了无缝切换。

淘宝首页：从过去复杂的信息流导航变为现在更加简洁的个性推荐卡片。整体体验与淘宝手机端一致。

二、交互更加高效 总结：精简无关信息，关注最重要的核心任务，减少用户跳出，沉浸式心流设计。

1. 登录方式更加高效 许多网页接入腾讯、阿里的生态，支持扫码关注公众号/手机验证码即可完成注册。省去了用户编辑个人信息、输入邮箱、输入密码等复杂的交互流程。

2. 减少页面跳转 心流式体验设计是这几年很热门的词，指的是通过优化用户体验让用户能够沉浸式地高效完成目标任务。

这需要做到产品的交互习惯满足用户使用习惯，并且交互流程满足用户预期。过于频繁的弹窗打扰和页面跳转的等待时间都会影响用户进入心流。

比如，例如飞书审批，审批详情不需要跳转，点击卡片即左侧弹出详情页弹窗；让用户可以在同一个页面即可浏览信息，不需要进行跳转到新的页面进行查看，方便用户完成批量的审批任务。

再比如：阿里云，开通服务的时候不需要跳转，而是在侧边弹出订单弹窗，方便用户操作。

3. 交互组件的易用性迭代，不再局限于大弹窗 上面说到，频繁的弹窗提醒也会影响用户进入心流，用户在对表单、画布中的内容进行删除的时候，如果使用全屏二次提醒弹窗，会感到创作过程被打断。

钉钉宜搭：卡片画布类产品，删除操作时，不局限于大弹窗，而是用靠近按钮的小弹窗，使鼠标的滑动路径更短，操作更加简便；并且在不过多打扰用户的前提下，完成了目标操作。

三、更加智能化，降低门槛、降低门槛、降低门槛 复杂性守恒定律由Larry Tesler于1986年提出，也称泰斯勒定律。指的是“任何系统都存在其固有的复杂性，且无法被减少，只能设法调整、平衡。我们要考虑的是，怎么样更好地处理它，让用户简单、高效地使用它”。

很多的中后台系统中很多表单会存在大量的配置项，这些配置项是否可以简化，让平台变得更简单智能？

大部分时候答案都是否定的，过度追求简化往往容易弄巧成拙。功能逻辑易于解释与理解才是更好的方案，当你试图简化降低复杂度，可能在其他地方埋了雷。

其中一个解决方案是将复杂度转交给系统，苹果公司的黑盒理论与此互通；就是用户不需要了解系统或功能背后的实现逻辑，只需要关注呈现在用户眼前的交互界面即可。

如今数据智能化处理正不断发展，我们也看到了智能化在PC端领域的应用。

1. 剪映 剪映相比于老牌视频编辑软件更加简单，提供各种在线特效模板，来降低任务复杂度。相比传统的PR、AE软件需要本地存储预设文件，或者手动编辑简单了很多。

用户不需要知道背后的实现的技术原理，也不需要掌握过多的特效制作、调色技巧即可完成视频的剪辑、调色工作。

2. 钉钉宜搭画布 推荐组件功能：用户在进行流程搭建时，不需要从左侧组件区拖拽组件，而是点击连接线中间来添加组件。

如果可以其实还可以更进一步，就是根据后台数据分析创建目标流程需要的组件，向用户主动推荐相关组件，以此来降低用户的创建门槛。

四、更加模块化 随着传统业务向互联网转型越发普遍，线下业务流程转到线上的需求场景越来越多，一个单一的系统不能完全满足所有的业务场景需求，由此需要一个更加灵活模块化的系统来针对不同的应用场景来应用不同的产品架构。

而该系统中的功能框架、交互组件又可以重复利用，于是更加灵活、模块化、可自定义配置的系统后台越发受到欢迎。

1. 飞书、钉钉易搭 飞书、钉钉易搭内的审批流程、会议系统、工单系统都可以通过模块化的组件进行高效搭建，不需要代码即可像搭积木一样实现用户的自定义需求。

2. 天猫优品 阿里的天猫优品电器店线下门店设计平台，整理了线下门店所需的16个模块（前台、小家电中岛、洗衣机、橱窗、空调、吧台等），通过线上三维化场景直接进行可视化设计，所见即所得，并且能够模拟现场灯光效果，根据门店现场规格，直接在三维空间里修改，快速导出效果图;非常高效地完成了其他门店的需求化定制。

五、更加简洁，甄别关键任务，路径缩得更短 1. 抖音、快手网页端 抖音网页端的用户体验沿袭了手机App端的风格，用户进入网页的核心目的就是看短视频打发时间，于是进入首页即可看短视频，不需要用户手动选择分类，并且手机端的用户偏好通过用户的账号同步至网页端，有了很顺畅的用户体验。

相比快手网页版，快手延续了常规视频网站的交互方式，将视频内容分为短视频、直播、同城、长视频、小剧场等多个类别，由用户自主去选择观看的内容，内容虽然更加多元，但确实路径过长，不够直接。

2. 淘宝、京东首页 再举个例子，新版的淘宝网页端不再像个门户网站导航，而是通过数据分析用户喜好来主动推荐代替用户自己选择。

用户来淘宝网页端，其实并不是买东西，大众用户已经习惯了在手机上进行支付，到了网页端反而会不适应。用户来到淘宝网页端的更多目的就是逛，看有没有自己想要的东西，遇到喜欢的，就点进去看了。

于是新版淘宝通过个性化推荐把过去复杂的活动运营页板块、特价板块、品类板块替换掉了，让用户在网页端获得更好的“逛街”体验。

而京东，在首页做了复杂的流量分发设计，通过不同的频道、不同的板块将用户引流至相关的专题页面，再进行商品浏览。

本质上来说，用户来到淘宝、来到京东的目的都是因为闲，而淘宝的通过数据智能，大数据精准推荐用户喜欢的商品，简化了用户的使用路径，并且使整体页面更加简洁。

六、微动效、大图、3D元素带来更加深的视觉刺激 网页的官网、首页承担着产品介绍、流量分发、增强品牌印象等的职责。我观察到越来越多产品官网都开始采用3D元素、视频背景、大图元素、微动效来让页面呈现更加具有质感和动感。

1. 3D元素 它是由Web3D技术的发展而兴起，能够给网页Banner带来更强的视觉吸引力，同时也强化了公司融合了AI技术的品牌印象。如法大大官网、腾讯云、阿里云的首页Banner展示。

法大大首页Banner，鼠标滚轮向下滚动3D元素会相应产生变动，文案与元素一静一动，对比明显，也更易于用户注意到文案信息。

2. 大图、视频 大疆官网首屏采用了全画幅大图的形式展示热门产品，下方的产品推荐页自动播放宣传视频，提升了页面的视觉冲击力，展示了其科技属性。

七、协同合作兴起 疫情时期，线上办公的需求和频率激增，线上协作兴起，许多办公软件都有了多人场景编辑功能。特别是对于复杂的项目，需要团队成员共同完成，协同合作的功能越来越受欢迎。

比如我们熟悉的figma，逐渐取代了传统UI设计软件ps、sketch等的头部地位，其中的项目协同功能更是广受欢迎。

只需要发送项目链接邀请成员即可进行项目协作，还支持多人标注、语音沟通，大大提升了工作效率。

许多办公软件也都上线了类似的功能，比如幕布可以通过设置权限、发送链接或二维码来邀请协作者共同编辑文档，为产品的使用场景提供了更多可能。

八、总结 曾鸣在《未来商业20讲》里说：“未来的互联网世界的两大趋势是数据智能、网络效应”。

这在PC端也得到了印证。

淘宝网首页、抖音首页、哔哩哔哩网页端将PC端与APP端的数据进行互通，并对用户行为偏好数据进行分析，为用户提供更加精准的信息流的同时，还使得页面的交互更加简单，视觉效果更加简洁，过去依赖用户自主选择进行流量分发的形式将会越来越弱势。

在工具类产品中，利用数据智能化可以将用户操作上的复杂度转移给系统，从而降低用户使用门槛，提升用户体验。

与此同时，工具类平台也越发灵活化化，通过模块化设计来自定义搭建不同用户的使用需求的产品，还能节省资源建设成本。

网络效应的部分应用体现在用户在使用工具类产品中，不再是孤单的个体，而是能通过线上协同，让用户与用户之间能够产生共同协作，共同交流，更加方便地完成任务。

 

本文由@为美好而设计 原创发布于人人都是产品经理，未经许可，禁止转载。

题图来自 Unsplash，基于 CC0 协议

给作者打赏，鼓励TA抓紧创作！

{{{path> 赞赏

编辑导语：业务团队在进行产品设计时，是否可以借助一定外力，实现设计价值的最大化？比如AI人工智能，也许就是可以助力用户交互体验提升的一大利器。那么，AI人工智能可以从哪些细节入手、改善设计流程呢？不如看看作者的总结。 写在前面 回想一下，你在进行 UI 设计工

编辑导语：业务团队在进行产品设计时，是否可以借助一定外力，实现设计价值的最大化？比如AI人工智能，也许就是可以助力用户交互体验提升的一大利器。那么，AI人工智能可以从哪些细节入手、改善设计流程呢？不如看看作者的总结。

写在前面 回想一下，你在进行 UI 设计工作中，是否会遇到下面场景：

你怎么知道用户会喜欢这个界面设计？ 这个界面能不能抓住用户的注意力（眼球）？ 有数据支撑你的设计吗？ 这个界面可以怎么改进？ 你到底行不行呀？ 这个界面还不如原来的！ Okay，面对这些质疑和挑战，你内心的 OS 应该也是那句： 你行你上呀！

一、大数据时代的设计方式 其实，在大数据时代，设计工作者也可以尝试使用数据来为自己的设计“正名”。设计如果没有和大数据连结，就等于说设计师凭个人经验猜测。设计如果和大数据连结，它其实可以看到很多的趋势。

美国牛津大学大数据知名权威-迈尔逊伯格教授在演讲中谈及。过去是通过「 假设→实验→验证 」，看结果与假设是不是相呼应。

如果是，那就对。 如果不是，就要重做 。 过去的设计是这样的流程。现在自从有了大数据之后，你的流程不是这样的，你会 先看到一个模式（pattern）再返回去做设计 ，意思是「 你会先看到结果 」。

你可以想象一下，你是电视剧「开端」的男女主角。

你知道公交车即将遭遇爆炸，你可以回到过去找到车上的凶手，让这个爆炸不要发生。

大数据可以让你从结果回退思考设计应该怎么做。

现在大家的行为都可以被你预先看见，被你看见之后就可以先知道结果，你就可以通过改变一些因素让事件得以发生或者避免。

从技术上来理解，就是通过大数据进行深度学习，把机器模型训练出具备人的浏览习惯。

当你把“设计作品”给他看的时候，他可以后验性告诉你结果。即人们是怎么浏览这个“设计作品”的，你再根据这个结果来进行设计工作。

二、Grammarly，一款在线语法纠正和校对工具 在写作领域，专业的学术写作可以让你获得高分，妥帖的商业邮件能够促进交易达成，风格统一的品牌文案有助于树立企业形象。

我们日常使用的 Grammarly 已经把后验性理念，通过「 人工智能应用于文字场景 」融合在产品当中。

当你开始进行写作时，Grammarly 会及时纠正你的单词和语法错误，根据你设定的目标进行评分，并根据你的写作内容分析你的语气、同义词替换、以及根据受众类型给出风格建议，等等。

在写作内容发送之前，就能发现内容上的错误以及不足，用技术帮助人们优化写作内容，提高写作生产力。

我们知道图像相较于文本数据的处理，会更加复杂。文本分析可以依赖语法规则，那在设计创意领域，人工智能（AI）可以做些什么，帮助设计师完成如 Grammarly 这样的工作。

三、VisualEyes，预测性的设计评估工具 最近，我发现了一款国外预测性的设计评估工具——VisualEyes。

它主要是通过 AI 模型模拟人浏览的方式分析设计界面上的元素，预测用户会关注界面哪部分元素，以及关键引导信息的清晰度，为改进界面的视觉传达提供参考。

1. 眼动追踪研究和 5 秒测试 VS 注意力图 你试着观察下面的饼干盒。

你会发现你在注视饼干盒的轨迹图，大致会如左图依序从 1-10 标示的动线。观察的顺序通常是 LOGO，产品名称和图案 ，你会猜测这些元素的相关性很强（能抓住用户的眼球），然后通过对被试者进行无辅助回忆度测试，验证这些关键元素。

设计界面眼动追踪测试，一般会涉及“实验设计、安装设置、数据采集、数据处理、数据解读” 5 个步骤，耗时长且效率较低，设计研究结论因样本数限制，有所局限。

VisualEyes 在注意力地图上利用人工智能（AI）可以即时产生用户测试数据，直观、有效、可视化地展示出关于用户视觉行为特点的分布情况。

热点图是基于注视点的绝对注视时间长度来创建的，最大值设置为 2.2 秒，也就是深红色的区域，代表吸引了最多的注意力，而绿色/蓝色区域代表吸引了较少的注意力。

注意力图（Attention Map）是眼动追踪研究和 5 秒测试的完美替代品。

设计师可以基于设计方案热点图，如果热点区域有所减少且分布面积增加，说明用户认知负荷的减少、可被理解程度的提升和信息穿透力的增加。

2. 快速偏好测试 VS 清晰度得分 另外，你的界面设计与竞争对手相比，谁的设计更好呢？这也是设计师常常被挑剔的话题。

清晰度得分可以体现网站的清晰度和美观程度。 大量的 UX 研究表明，与同行业竞争对手产品界面相比，当用户在浏览“视觉上吸引人”的界面时，清晰度得分更高，他们更能容忍小的可用性问题。

清晰度得分（Clarity Score）是快速偏好测试的完美替代品。

这个工具评分根据全球数千名测试人员的大规模研究数据预测模型生成。不管是概念阶段的原型稿、视觉稿，亦或已上线的产品，都可以通过测试数据获取用户对视觉的品牌认知及主观感受。

Ryanair 是一家成立于 1984 年的爱尔兰廉价航空公司，以它为例，我们来看看如何进行同行业竞争对手清晰度得分比较。

首先，将 Ryanair 网站界面上传进行清晰度评分。

接着，通过采集“美国航空公司、阿联酋航空公司、汉莎航空公司、达美航空公司、伊比利亚航空公司和卡塔尔航空公司”的网站界面，分别进行评分。

然后，把其他航空公司与 Ryanair 进行清晰度得分比较。

从结果可以发现得分分布在 65-82 分，Ryanair 在同行业者是最低的，而在对比的航空公司基准值大概是 75 分，Ryanair 距离基准值还有不小的距离。

通过清晰度分析地图作为诊断工具，你可以依此作为判断参考，找出界面中杂乱无章的区域，删除/优化界面上冗余信息。

3. AB Test VS 兴趣范围 兴趣范围 (AOI, Areas of Interest) ，主要用于衡量用户在设计的关键区域中的注意力。

AB Test 需要足够的访客（样本量）来提高转化率。如果你采用常规的 AB Test 的流程，一般需要跑 2 周才能获得足够的数据。使用 AI 工具，则可以缩短到 2 分钟。

以 Spotify 的界面测试为例，在清晰度得分一致的情况下， 设计团队希望在「绿色」和「紫色」的按钮中进行抉择，究竟哪个颜色的按钮能带来更好的转化率？

针对注册按钮（CTA）对于用户注意力的影响，方案 B 高于平均注意力投入 2.47 倍，方案 A 则高于 3.85 倍， 由此可判定方案 A 优于方案 B 。这个范围的定义可以量化注意力并简化对于设计方案的决策过程。

四、小结 人工智能（AI）是为了更大程度地弥补人类不足之处，并不是以取代某项工作职能为目的。

目前，大多数设计师并没有使用人工智能（AI）改善设计流程的经验。真的，你可以尝试去了解、使用它，结合人工智能（AI）更大程度地发挥设计价值。

最后，希望本文能给你一些启发。

#专栏作家# 龙国富，公众号：龙国富，人人都是产品经理专栏作家，人因工程硕士。致力于终身学习和自我提升，分享用户研究、客户体验、服务科学等领域资讯，观点和个人见解。

本文原创发布于人人都是产品经理，未经授权，禁止转载。

题图来自Unsplash，基于CC0协议。

给作者打赏，鼓励TA抓紧创作！

{{{path> 赞赏

进击的版式简而言之就是分享一些我观察设计作品的方法，从整体到细节都会讲到。如果一个作品GET不到，就带大家多看一些（我也不想这么中二的，如果有更好的名字欢...

进击的版式简而言之就是分享一些我观察设计作品的方法，从整体到细节都会讲到。如果一个作品GET不到，就带大家多看一些（我也不想这么中二的，如果有更好的名字欢迎评论。

往期回顾：

PPT 超全自学指南（1）：明确目标+软件操作 历时一个月的精心制作，用轻量有趣的图文，帮你轻松自学 PPT 设计。

阅读文章 >

PPT 超全自学指南（2）：搜索能力和逻辑能力 历时一个月的精心制作，用轻量有趣的图文，帮你轻松自学 PPT 设计。

阅读文章 >

PPT 超全自学指南（3）：图示能力和设计审美 历时一个月的精心制作，用轻量有趣的图文，帮你轻松自学 PPT 设计。

阅读文章 >

PPT 超全自学指南（4）：深入发展和学习资源 历时一个月的精心制作，用轻量有趣的图文，帮你轻松自学 PPT 设计。

阅读文章 >

PPT 超全自学指南（5）：8个常见问题解答 历时一个月的精心制作，用轻量有趣的图文，帮你轻松自学 PPT 设计。

阅读文章 >

PPT 超全自学指南（6）：进击的版式之观察逻辑（上） 进击的版式简而言之就是分享一些我观察设计作品的方法，从整体到细节都会讲到。

阅读文章 >

阅读指南：先看原图，看自己可以获取多少信息并思考，之后对照长图。

比如你可以问自己：为什么这个标题没有横着摆放呢？思考后，然后试图从中找到答案。如果横着放，其他会涉及到什么变动会让新的版式成立呢？

分享的是我平时看图的方法，如果思考后有疑问的可以评论留言，我们一起解决~

设计原图来自Pinterest，以后图源清晰的都会标注原作者。

案例四：

案例五：

总结 通过前面几个案例，主要想为大家建立起一个从整体到细节的有结构的观察方法，基本都是没有特殊元素的图文排版。每期都有不同内容，建议从《进击的版式-观察逻辑（上）》开始看哈~

在这些步骤中，我们借助辅助线和色块来分析设计，除去直接照搬设计来临摹学习之外，还可以把色块内的内容更换、改变色块的位置和大小等方式来创造新的版式和二次设计，这样就可以通过一个版式延展出很多不同版式。

在 APP11.0 深度解读系列的第一篇文章中，剖析了基于生态进行体系化大改版的解读与思考，本文将聚焦于视觉设计，阐明我们对此版本的设计主张与思路，在各个...

在 APP11.0 深度解读系列的第一篇文章中，剖析了基于生态进行体系化大改版的解读与思考，本文将聚焦于视觉设计，阐明我们对此版本的设计主张与思路，在各个场景是如何外化以辅助达成改版目标的。

如何进行体系化大改版？京东 APP 11.0 深度解读！ 在受到不确定性扰动的外部环境下，今年的 APP11.0 升级格外不同。

阅读文章 >

11.0 设计理念 随着 京东 用户群体、服务场景的多样化，对于体验设计来说也迎来进一步挑战。在精细化服务的背景下，我们期望在 10.0 设计理念上进行升级，打造能够为用户提供更纯粹的购物体验。因此，“让购物变得简单快乐”的 11.0 应运而生，同时也成为我们在体验上追求的重要目标。通过对目标的拆解，得到视觉关键词和产品关键词。11.0 的设计主张也会持续在品牌、产品、运营设计上进行渗透和升级。

品牌设计升级 | 通过 JOY 实现与用户的交流 1. 简化图标

秉承极简的设计原则，在不增加用户重新认知成本的前提下，我们尽可能降低 ICON 中体积、光源、空间等其他繁杂的物理限制，压缩中间过渡的灰色色调，拉开明暗对比度来提高瞬间识别度。

同时我们反复调整 JOY 脸部边线的细微曲率，降低原生图像的有机感，让他更为耐看，带来更简洁高效舒适的使用体验。

ICON 的质感来自普通纸张折叠产生的折痕阴影，取其生活化的自然趣意，体感加载速度更敏捷轻量。

启动图中的字体也简化为与品牌调性更契合，简单轻松的手写体，圆润笔尖更快乐，疏朗笔划更清晰，上扬 6.18 度植入品牌基因，更有速度感和生命力。

2. 强化互动

在 ICON 与开屏的设计上我们还运用了视觉暂留的特性做了响应式互动设计，尝试为大家带来些新体验。从点击侧面待命状态的 ICON 进入开屏，变成转过脸来打招呼的立体 JOY，意在模拟日常沟通中即时响应，营造情感化互动，在进入 app 的购物前环节，先建立亲切敏捷的品牌印象。而在 2 个静态页面间创造多一层动态视觉信息，赋予其动态含义，同时实现质感和情绪上更饱满的递进，比纯静态分离画面更有助于提高信息传达的效率和密度。

3. 运营阶梯递进

大促版的 icon 与开屏同样贯穿了互动的思路。同样是响应设计，日常状态为侧面待命，表达的是贴心不打扰，大促时则采用正面形象紧贴屏幕，拉近距离主动沟通，头部下移，匀出更多空间呈现运营场景的丰富性以突出大促主题，点击以获得肯定时才打开开屏场景化的新世界。

运营设计升级 | 用运营思维活化产品体验 基于品牌的运营设计与产品设计相结合，我们希望通过 IP 的拟人化表达，在京东 APP 内进行品牌渗透，从而让 APP 更具情感与趣味。

1. 内外联动

本次主要尝试以首页 TOP LOGO 和用户登录注册页进行内外联动，使用了统一的主题概念，来传达简单快乐的感官体验。登录注册页的主题场景化运营渗透与之联动，增加视觉可玩性与互动性，有利于提高用户在登录注册时的操作宽容度，降低负面体验感。

2. 渲染大促氛围

同时在上述设定中，在大促时期也代入了促销概念，烘托营销氛围。未来我们也会持续探索更多关于 IP 场景化运营的模式。

外宣设计升级 | 用符号打造升级意象 1. 提炼策略

版本符号的作用在于让用户形成专属 APP11.0 的视觉记忆。今年我们希望从解读升级策略中获得关于符号的灵感。本次升级的主题是新生态、新体验、新增长。而新生态、新体验、新增长最终需要达成的目标正是开拓运营新赛道，从而使用户获得更好逛、更贴心、更好买的体验。基于这个解读推导，我们决定以“开拓”作为关键设计概念。

2. 意念视觉化

视觉化的过程中，我们选择以“门”作为视觉符号。“门”代表了“开拓”，也代表了“打破空间壁”。

同时我们考虑到了材质的使用，基于 APP11.0 的视觉风格——极简、有趣，我们使用玻璃作为材质，追求轻盈和通透视觉感受。

3. 应用延展

宣传物料方面，我们使用“围绕旋转的门”表达“新生态”，使用“向外扩展的门”表达“新体验”，使用“螺旋上升的门”表达“新增长”。这三个形式的“门”应用于各个宣传物料当中。

外宣设计升级 | 用开屏打响升级心智

用户在更新 11.0 版本后，在开机时会先看到一个启动视频，这个视频会说明这次更新的亮点，也需要突出主站品牌的调性，还需要用户产生耳目一新的感觉。

1. 抓住产品亮点

基于视频大小与用户耐心程度的考量，开机视频的市场锁定在 15s 以内。在这个时长里，版本更新的细节不可能事无巨细的娓娓道来，于是我们先锁定了用户感知最为明显的三个部分：首页改版，视频化，频道广场，并选择了准确、精炼、亲切的文案风格来进行功能阐释。

2. 统一材质

“去噪”是近几次京东改版的内在方向，11.0 的版本符号使用了玻璃卡片的轻质感形式，体现出轻量化与品质感。我们决定就用玻璃卡片为开机视频的核心视觉元素，通过玻璃卡片的不同演绎将改版内容表现出来。这也让 11.0 在整体运营上的视觉元素做到了统一。色调由开场的冷色逐渐过渡到结尾的红色，也是在侧面传达出变化的主题。

外宣设计升级 | 用外宣视频传递功能亮点 1. 表达重心转移

去年的 App 10.0 外宣视频，我们选择了定格动画的形式来切入六一儿童节的营销节点借势宣传。而今年，除了在视频号、微博等传统媒体渠道进行投放外，外宣视频也同时上线 App store 和各大安卓手机的应用市场。因此，相比时效性强的营销宣传，今年的视频表达的重心由运营造势转移到内容表达上来，意在让内容更明确清晰和具体，也希望用这种直接的语言传递出京东务实高效的品牌性格。

2. 内容排布

由于内容更加强调产品改版的具体功能与业务，视频的重点就落到了如何高效且有趣地传递信息上来。近年改版用户关注度最高也是观感最直接的部分，就是 Joy 的形象变化，因此我们在剪辑结构上把这部分放在了最开头，借此吸引观看者的兴趣。针对产品改版内容我们进行提炼浓缩并以更接地气更好理解的方式呈现，希望观看者在兴趣降低之前快速高效的传递完内容。最后结尾，我们推动视频的节奏与情绪达到高点，落到了整个 11.0 的视觉符号，与“不负每一份热爱”的 slogan，完成扣题结尾。

3. 包装演绎

旁白文案是除画面以外最直接最高效的信息创达方式，我们重新整理并用更易懂、更接地气的语言讲述，以确保每个最普通的消费者快速理解。同时旁白也串起了整个视频内容的主线。

另外，围绕着主线我们对内容选取合适的画面进行配合，并对界面功能的展示进行了 3D 化、动态演绎、场景演绎的视觉语言等方式进行丰富表达。

11.X… 11.0 版本正如京东 APP11.0 的版本一样持续开放的大门，我们希望以此为起点，对上半年的经验进行收归吸收，在下半年的 11.X 中继续探索与创造更多 APP 上的视觉表达，致力为大家带来更简单快乐的生活体验。

欢迎关注「JellyDesign」的小程序：

Hi，我是彩云。设计趋势年年在变，设计技能也在不断更新，但回到本源，底层的理论知识是不会变的。我自己几乎每年还会翻看一些讲设计基础的书，比如《写给大家看的...

Hi，我是彩云。设计趋势年年在变，设计技能也在不断更新，但回到本源，底层的理论知识是不会变的。我自己几乎每年还会翻看一些讲设计基础的书，比如《写给大家看的设计书》之类的，会发现这些原理每次看都会有新的收获。随着工作年数增加，对底层知识的价值认识也越来越深刻，不知道你会不会有这种感觉？

在 Medium 上看到一位工作超过 17 年的国外设计 leader 写的一篇关于设计原理的文章，讲设计如何变得有效，总结得很好。文章很长，为了提高你的阅读体验，我打算分 2 期来更新，如若你能耐心看完，相信定会有收获！

当没有认知紧张时，用户心流才会发生。当一个设计有效时，你才能体验到认知上的轻松。如果没有，你的“心流状态”就会中断（稍后会详细讨论），让我们陷入认知紧张，于是“设计失败了”。

当基本设计原则被忽略时，这种情况很容易发生，导致设计无法“整合”。这些基本原则包括：平衡性、一致性和视觉层次、负空间、接近性、对比、统一、一致性、配色方案和排版层次等方面。（彩云注：很多人看到这些以为自己都懂，但实际设计时犯错最多的也是这些问题）

从神经科学的角度来说，当一个设计起作用时，我们会“感受到它”。其影响立竿见影。它发生在潜意识里，在一瞬间完成，是人的本能反应。我们不需要把它放在显微镜下分析它。

优秀设计以简洁和优雅而引人注目。乔纳森·伊夫(Jonathan Ive)和迪特尔·拉姆斯(Dieter Rams)都可以算作这种设计思想的拥趸。

人们常说，优秀设计背后的工艺是无形的。然而，这不是随机发生的。不管人们是否注意到，设计的背后是遵循着大量而严格的原理去执行的。伟大的设计师不会在画板上随意地将各种元素组合在一起，这是有方法的。

为什么有些设计具有美的感受，而有些却没有

相反地，当一项设计被认为“有些地方不对劲”时，人们就会下意识地觉得这个设计是有问题的。这样的结果会给品牌或产品带来不好的影响。当一个高端或奢侈品品牌受到高度关注时，这种影响尤其有害。这就是为什么你永远不会遇到设计不完美的香奈儿(Chanel)商店的原因。

“你对一件事的第一印象会建立起你随后的观念，如果一家公司在你看来不专业，你可能会认为他们做的其他事情都不专业。——Daniel Kahneman，普林斯顿大学心理学教授

这不是一个精心制作的设计，会导致认知紧张。你会在这个网站上预订你的行程吗?

我们都同意上面是糟糕的设计，就像建在沙子上的房子，一个忽视基本设计原则的设计将会崩溃。潜意识里，它会立即被认为是破碎的，无论是视觉上、精神上和情感上。

人类的大脑是懒惰的、有偏见的，喜欢走捷径。Daniel Kahneman 称之为“低维思维”。当人们看到某种设计时，它的“美学完整性”、视觉感知和神经科学之间存在着相互关联。

当一个设计是合理的，换句话说，它是令人愉快的、有效的，我们会迅速、直观的判断它是合理的。我们的心率降低，多巴胺水平增加，会有一种幸福和平静的感觉。这就像我们听到舒缓的音乐，会沉浸在一种每时每刻的“心流状态” 中。“在这种状态下，人们会专注于一项活动，其他一切似乎都不重要”——来自于一个心理学概念，由 Mihaly Csikszentmihalyi在他的畅销书《心流:最佳体验的心理学》中写道。

你更愿意住进哪个房间？

设计原则在审美完整性中的作用 苹果的人机界面指南（Apple’s Human Interface Guidelines）几十年来一直在谈论“美学完整性”。它也可以被称为“设计完整性”或“审美凝聚力”。

苹果对美学完整性的定义是“当一个设计的外观和行为与其功能完美匹配时”（彩云注：我的理解就是所见即所得，符合用户的心理预期）。换句话说，设计的构成是产品的一个组成部分。我们将研究决定设计组合成败的设计原则——更多的是关于 UI，而不是关于 UX。

美学完整性不仅仅是关于设计有多好看。它指的是具有明显连贯性的设计：有效的结构和布局，是什么让它产生效果。换句话说，它的元素在视觉层次、对齐、间距、平衡、对称、重复、比例、强调、接近、对比、统一、一致性、配色、排版、负空间等方面都有出色的运用，这里仅举几个例子。

这与“黄金比例”无关，黄金分割不能解决问题。斐波那契数列螺旋没那么玄乎，给设计师带不来惊人的设计。

设计师们在安吉丽娜·朱莉或蒙娜丽莎的脸上画出金色螺旋形时惊呼道：”果然是”黄金比例“（彩云注：但事实上有点故弄玄虚了）。当然，自然界中确实有神圣几何学(黄金比例，又称斐波那契螺旋，是基于此)，但依赖“黄金螺旋”作为设计原则是一种谬论，它已被多次暴露在其赤裸裸的荒谬中。

这是我的洗衣机，上面叠加了斐波那契螺旋。

“审美的完整性”不是没道理的。这个概念是基于基本的设计原则，是有成就的设计师实践他们的艺术作品的经验总结。

让我们来看看一些设计原则，以及它们为什么会使得你的设计更加有效。通常情况下，真正优秀的设计会结合这些设计原则。

我们将探讨以下这些最底层的设计原理：

视觉层次感 间距、对齐和网格 平衡 对比 对称 重复 几率原则和三分原则 引导线 比例 强调 整体性 亲密性 一致性 颜色 排版 负空间 1. 视觉层次感 视觉感知的基本规则对任何视觉设计都是至关重要的，因为它们指导着如何尽可能快地传达信息。视觉层次是设计中信息的结构和优先级。它决定了人们接受和处理信息的顺序，因为它以一种视觉方式引导他们。

视觉层次感重在打造视觉优先级。通过巧妙地使用颜色、形状、大小、间距、比例和方向，创造性地使用决定层次的视觉元素来传达构图的意义、概念和情绪。

核心关注点是什么，你希望用户首先注意到或开始阅读的设计中最重要的元素是什么？我们想让它成为焦点，然后其他部分的设计从这里展开。

一个具有良好视觉层次的网站会引导用户关注重要的部分

视觉层次对于每一种视觉设计都是至关重要的，无论是需要引导访客眼球的首页还是移动端 UI 的导航入口。用户对每个元素的理解取决于组合中的其他元素及其上下文。

建立视觉层次的一些技术是:位置、大小和比例、颜色和对比、间距和亲密性、负空间、纹理、引导线和高度。在一个元素周围使用丰富的负空间可以使它看起来更有意义。使用引导线可以创造移动，就像一个人的眼睛在设计上移动一样。排版的层次结构也扮演着重要的角色，通过不同的大小和权重，我们可以让更重要的文本元素脱颖而出并建立秩序。

加分技巧

使用一个隐形三角形连接设计中的三个重点区域（构图）。 注意古腾堡图模式（Gutenberg Diagram）、F 模式（F-Pattern）、Z 模式（Z-Pattern）和层蛋糕模式（Layer Cake Pattern）的视觉扫描，并顺应趋势而不是反对趋势。（彩云注：这里的这些模式彩云就不过多介绍了，感兴趣的可以自行了解下）

没有视觉层次的网站没有明显的兴趣点。

2. 留白、对齐和网格 设计中的对齐和间距通过空间上的连接传达出一种秩序和组织感，这两个原则都在设计背后发挥重要价值。设计师早期学到的基本知识之一是在网格上编排设计，然后对齐和分隔这些元素。

左对齐、居中对齐、右对齐都没错，但你必须对齐，否则当元素没有对齐时，设计就会给人崩溃的感觉。它给人一种不安的感觉。

没对齐的话，眼睛看着很难受

网格有很多不同的类型:列网格、基线网格、模块网格、层次网格、像素网格等。不同设计使用不同网格，但最基本的是设计元素的对齐和间距。（彩云注：关于网格方面的知识，彩云以前也写过不少，比如：

想要用好网格系统，这8个小技巧你必须掌握！ Hi，我是彩云。

阅读文章 >

网格系统真是太好用了，6个方面帮你早点学会！ Hi，我是彩云。

阅读文章 >

Illustration courtesy UX Engineer

网格可以被打破。一个死板的构图可能会在视觉上无趣，除非一个元素从网格中脱颖而出。错位或“打破网格”是赋予元素更多视觉权重的一个机会。当在设计中设置视觉层次结构时，它可以用来强调某些东西。

有时打破网格可以创造强调和移动

3. 平衡 设计上有两种平衡：对称和不对称。所有的构成元素：排版、颜色、图像、形状、图案、留白等，都具有一定的视觉重量。有些元素很重，很吸引眼球，而有些元素很轻，感觉不那么重要。

这些元素的放置方式能够在对称设计中创造出一种平等的顺序感，或者一种稍微偏离平衡能够创造出一种不对称的设计。无论对称还是不对称，我们的大脑都被某种平衡感所吸引，因为它创造了和谐、秩序和美学上令人愉悦的结果。

多重原则:平衡、对齐和对称在网站上发挥作用

4. 对比 “对比”指的是使设计中不同的元素更容易区别开。强烈的对比可以在设计中强调一个区域，而微弱的对比可以弱化它，创造一个视觉层次。对比在设计中也扮演着重要的角色。对比不足会使文字特别难以阅读，尤其是对视力有障碍的人来说。

在左边的设计中，一些文字和背景之间的对比不够。

Web 内容可访问性指南 (WCAG)呼吁“文本的视觉呈现应该有至少 4.5:1 的对比度”，除了大规模文本，它应该有至少 3:1 的对比度。因此，设计师需要确保内容保持舒适易读。（彩云注：具体可用性配色工具，彩云之前的文章中有分享过，现在这种可用性颜色已经越来越被重视了，你也要用起来啊）,之前写的文章，推荐大家可以看看：

自从知道这3个配色神器后，配色容易多了！ Hi，我是彩云。

阅读文章 >

其他 UI 元素(如各种显示器和设备上的卡片、按钮、文字和图标)之间的适当对比也是必须的。如果 UI 元素之间没有明显的区分度，设计就容易产生混乱。

5. 对称 在格式塔原理中，对称和秩序的法则也被称为 prägnanz，德语单词“好身材”的意思。这个原理说的是，大脑会以尽可能简单的方式感知模糊的形状，这都是为了节省大脑能量。

我们倾向于寻找一切事物的对称性。几项研究发现，面部对称能提高人们对人脸吸引力的评价（尽管完全对称的脸其实并不一定那么有吸引力）。该理论认为，这种偏好与选择 DNA 最好的伴侣的进化优势有关。

对称在自然界中也无处不在。看看一只蝴蝶，一朵花，或者一只海星。

近万字干货！带你全面了解格式塔原则 好的设计师理解心理学在视觉感知中的强大作用。

阅读文章 >

对称

同样的原理也适用于数字领域，平衡对称的设计更令人愉悦。

对称性在应用中发挥作用。Uber Eats、Booking.com 和 Behance。

6. 重复 重复是一致性的近亲，是优秀可用性的标志。

在设计中利用重复是件好事，因为我们的大脑总是在寻找模式、相似性和一致性。为什么?因为重复相同性质的元素需要更少的认知努力。

我们更容易识别重复的模式，而不是每次看到新模式都要重新校准大脑。正如前面提到的，大脑作为一种生存机制是懒惰的，模式识别和认知捷径意味着有意识地处理视觉信息所需的能量更少。

例如，重复元素的形状和大小、填充、留白、类型和颜色，也有助于更对称、更好地平衡，做出美观的设计。

The Athletic 这个软件就是用重复元素做设计的好例子。

掌握重复原则，帮你轻松塑造画面统一性 重复、对比、对齐以及亲密性是版式设计中的四大原则，各种排版形式与规则都是基于这四大原则衍生而来，而掌握这些具有指导性的设计原则，能够帮助我们在短时间内，更快更好的达成设计目标。

阅读文章 >

好了，为了照顾大家的阅读体验，再写更多估计有很多人要开始没耐心了。所以剩下的设计原则，我们下回再接着聊，敬请关注哈。

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