最近看到很多美妆博主都在出什么红黑榜，其实就是在说哪些产品是有问题，不推荐大家使用，有哪些东西是可以安利的好物。

想着 B 端设计当中，也会存在这一情况。然后我在打开 Ant Design，浏览完所有的组件，你会发现：“组件当中也会存在红黑榜~”

今天我也来“带带货”，说说 B 端组件当中的红黑榜

首先我先说一下关于红黑榜的定义

使用频率高：也就是这个组件我们平时会频繁的使用 黑榜：在使用过程中，会遇到诸多问题，导致无法正常使用 红榜：往往会更满足 B 端产品的实际需求，对于组件有更深的认识 通过我的分享能够给大家有一个初步的认识，当然整个组件都是基于我平时的设计观察与使用，目的也是想和大家分享、避避坑，如果有什么疑惑，欢迎在评论区我们一起讨论~

树形选择 树形选择在 B 端系统当中的出现频率非常高，比如我们常见的：表格、表单、各类详情页，只要涉及到 层级结构 的选择，都会有它的身影（注意，这里主要说的是树状的选择类组件）但是作为设计师，树形选择在使用的过程当中，会出现很多意想不到问题

1. 尺寸无法确定

因为树形选择本身这个组件的特殊性，它的大小需要通过内容当中的高度与宽度共同决定，而在设计过程当中，高度与宽度究竟为多少就要仔细的考虑

因为在使用树形选择时，需要思考每一个内容的具体尺寸，太高太低都不行

如果太低，展开树形选择就会非常的麻烦；如果太高，则在数据量较少的时候，会给人数据很空

横向空间也是同理，也就造成了在设计时，需要深入思考

2. 适用性太低

树形选择，作为基础组件，在应付复杂的选择需求时，很明显的会感到“力不从心”，无论是从它显示选中时的内容，还是大量的数据时的选择难度，树形在适用性上，都会大大降低，当遇到这类情况时，建议采取更多 “业务组件” 的方式来对选择进行优化

分类表单 分类表单（也可以叫 Tab 表单，不过只是代称而已~）在 B 端产品当中也非常常见，它出现在复杂的表单当中，但是作为设计师，在真正去使用分类表单时，你就会发现会有非常多的问题需要我们去处理

1. 效率低

对于用户而言，分类表单不能够完整的查看表单信息，每一个都需要来回切换。也就意味着填写表单的时候，我们不能通过滚动查看所有数据，而是要去点击每一个单独的分类里面，通过分类了解具体的表单内容

同时必填项的提示，在分类表单也非常难以处理，因为其每一个独立，而作为用户，其实是不清楚具体哪一个分类里面有必填项，也会导致填写的效率过于低下（其实会有处理的办法，只是大家对于这类提醒都不太满意）

2. 编辑模式不易处理

分类表单在编辑状态时，同样难以处理。当提交完分类表单后，我们还需要考虑数据在详情页里的展示形式，因为表单与详情页的映射关系，这时候在设计时，应该提供某一分类下的数据编辑，还是整个分类表单的数据编辑？

其实这种情况，特别是初级 B 端设计师，处理起来也是非常棘手

顶部导航 顶部导航非常特殊，虽然在我之前 导航菜单 的文章当中提到过，但在使用顶部导航的过程当中，还是会面临很多问题：

6000 字干货！B端产品的导航菜单设计5步法 导航菜单对于用户的使用来说尤为重要，本文是我从实际工作出发，结合自身产品和过去经验对于导航进行的一次全面总结。

阅读文章 >

顶部导航最大的局限性便是展示数量太低，毕竟在空间布局当中，横向空间与纵向空间的差异其实是非常大的，顶部导航的高度设定不能过高，同时 二级、三级菜单 只能够使用下拉菜单，也就导致在导航菜单的设计当中局限性过大，并且项目一旦发展过后，不容易解决问题。

当然，顶部导航并不是一无是处，在许多工具型产品、官网 当中，顶部导航都有着它的一席之地，其实这类形式，更多是以内容为主的网站结构，才会采取顶部导航，也就是上下结构会更加合理。

栅格 栅格严格意义上来讲不算是组建，但是由于很多设计师 误用、乱用，导致设计师为了栅格而栅格。

因为在常见的移动端设计当中，是不存在栅格（主要是移动端横向空间小，使用不频繁）

在桌面端的设计当中，并不是说栅格不好，而是很多时候设计师使用栅格往往会非常盲目，举一个简单的例子，在表格当中是否需要使用栅格？

答案是：“不用使用栅格”，其实这类问题就是目前很多设计师的问题，因为会盲目使用，也就导致了我在做设计的过程当中，出现很多为了栅格而栅格的现象。后面有时间单独总结一下栅格主要运用在哪些地方，希望大家别盲目使用。

至于栅格应该如何使用，在我之前的文章当中都有提到：

B端设计指南：栅格的定义和使用方法 在一个 B 端页面当中，关于栅格的使用方法，你或多或少都会有所疑惑。

阅读文章 >

滑动输入条 滑动输入条在很多概念设计当中都会经常出现，特别是在 Dribbble 上的桌面端设计当中，是每一个设计师的标配，但是在实际的 B 端项目中，特别是桌面端的 B 端系统当中，滑动输入条是非常不合理的一个组件。

因为 B 端产品当中，大多数的产品都是需要精准录入，并且数据的区间非常大，因此也就造成了滑动输入条，使用起来给用户的感受是非常糟糕的，并且由于大多数用户的预期还是以直接输入为主，这也就造成了现如今 B 端产品很见到滑动输入条的原因。

面包屑 面包屑导航在实际工作当中经常使用，因为在常见的 B 端系统当中，导航菜单以及信息结构，一定是非常复杂的（除非你的系统里面就只有一级导航菜单，并且没有其他的页面层级逻辑）

因此通过面包屑导航，能够让我们清晰知道整个页面的信息结构，通过面包屑又因为其 小巧、灵活，无论你是在一个完整大页面当中，又或者是一个小的气泡卡片当中，面包屑都能进行承载，并且它还能够起到 返回 的作用，又能够清晰的展示页面的路径信息，是一个可以一举多得的组件。

穿梭框 穿梭框相比大家的不会陌生，在设计 B 端产品的时候，或多或少都会有所涉及，与此同时，由于穿梭框本身复杂，再加上很多设计师会觉得它占比过大，因此不会去使用。

今天安利穿梭框，其实是想安利这一类的穿梭类的组件，你会发现其实很多业务选择类的组件都会通过穿梭框的形式进行演变，比如我们常见的“国家城市选择、部门成员选择” 甚至表格当中的字段显示隐藏设置，这些都是传统的数据选择过后一步一步演变而来，因此这类穿梭框型的数据选择。

其实更加体现的是设计师基于目前的组件所进行的优化，而分析它为何这样做，这样做的原因，成为了穿梭框上榜的理由。

折叠面板 折叠面板就像一个大的“盒子”，当产品经理在你的身后说着：“这个信息我要放，那个信息也不能落下的时候”，拖出一个折叠面板来解决这个问题。

其实在折叠面板的使用过程中，主要是在详情页以及表格当中，因为折叠面板本身可以容纳很多信息，并且能够交代具体的层级关系，因此使用折叠面板能够有更多展示数据的可能性，即插即用，非常方便。

气泡卡片 在页面当中的任何地方，蹦出一个气泡卡片你都不会感到奇怪。其实气泡卡片我在日常设计当中，经常使用的一个组件，因为它能够容纳下任意的内容，小到一串文字、大到一个视频，都能够在气泡卡片当中进行使用。

并且在信息当中，气泡卡片作为一个信息补充的组件，因此在系统当中，需要展示但是又不是那么重要的信息，使用气泡卡片，就会更加的方便。

锚点导航（锚点定位） 最后一个，自然逃不掉我们的锚点导航。感觉在我的疯狂安利下，越来越多的产品都开始使用锚点导航。因为 B 端产品必定是复杂且多的信息，自然而然我们在使用的过程当中要更多考虑信息的承载。

（锚点导航就不配图了，这个得自己用过感受才行）

而在使用过程的当中，锚点又不像分类那样过于绝对，不会强行分割过多数据，因此会更加易用。

同时它的兼容性会更强，可以出现在 表单页、详情页 等各个地方～

它的好处实在是太多了，这里就不过多赘述了，用过的人都说好。

做一个小小的总结 黑榜：树形选择、分类表单、顶部导航、栅格、滑动输入条。

红榜：面包屑、穿梭框、折叠面板、气泡卡片、锚点导航。

其实，我们在做 B 端设计的时候，你会发现要解决的就是 组件设计 。这里讲到的所有内容都是基础组件，实则在工作当中用到的更多的反而是基于基础组件之上，所演化而来的业务组件。但是业务组件确实是一个“深坑”，里面的特殊性、业务场景、具体问题，我们就在后续文章一起聊聊。

欢迎关注作者的微信公众号： CE青年Youthce

最近看到很多美妆博主都在出什么红黑榜，其实就是在说哪些产品是有问题，不推荐大家使用，有哪些东西是可以安利的好物。

想着 B 端设计当中，也会存在这一情况。然后我在打开 Ant Design，浏览完所有的组件，你会发现：“组件当中也会存在红黑榜~”

今天我也来“带带货”，说说 B 端组件当中的红黑榜

首先我先说一下关于红黑榜的定义

使用频率高：也就是这个组件我们平时会频繁的使用 黑榜：在使用过程中，会遇到诸多问题，导致无法正常使用 红榜：往往会更满足 B 端产品的实际需求，对于组件有更深的认识 通过我的分享能够给大家有一个初步的认识，当然整个组件都是基于我平时的设计观察与使用，目的也是想和大家分享、避避坑，如果有什么疑惑，欢迎在评论区我们一起讨论~

树形选择 树形选择在 B 端系统当中的出现频率非常高，比如我们常见的：表格、表单、各类详情页，只要涉及到 层级结构 的选择，都会有它的身影（注意，这里主要说的是树状的选择类组件）但是作为设计师，树形选择在使用的过程当中，会出现很多意想不到问题

1. 尺寸无法确定

因为树形选择本身这个组件的特殊性，它的大小需要通过内容当中的高度与宽度共同决定，而在设计过程当中，高度与宽度究竟为多少就要仔细的考虑

因为在使用树形选择时，需要思考每一个内容的具体尺寸，太高太低都不行

如果太低，展开树形选择就会非常的麻烦；如果太高，则在数据量较少的时候，会给人数据很空

横向空间也是同理，也就造成了在设计时，需要深入思考

2. 适用性太低

树形选择，作为基础组件，在应付复杂的选择需求时，很明显的会感到“力不从心”，无论是从它显示选中时的内容，还是大量的数据时的选择难度，树形在适用性上，都会大大降低，当遇到这类情况时，建议采取更多 “业务组件” 的方式来对选择进行优化

分类表单 分类表单（也可以叫 Tab 表单，不过只是代称而已~）在 B 端产品当中也非常常见，它出现在复杂的表单当中，但是作为设计师，在真正去使用分类表单时，你就会发现会有非常多的问题需要我们去处理

1. 效率低

对于用户而言，分类表单不能够完整的查看表单信息，每一个都需要来回切换。也就意味着填写表单的时候，我们不能通过滚动查看所有数据，而是要去点击每一个单独的分类里面，通过分类了解具体的表单内容

同时必填项的提示，在分类表单也非常难以处理，因为其每一个独立，而作为用户，其实是不清楚具体哪一个分类里面有必填项，也会导致填写的效率过于低下（其实会有处理的办法，只是大家对于这类提醒都不太满意）

2. 编辑模式不易处理

分类表单在编辑状态时，同样难以处理。当提交完分类表单后，我们还需要考虑数据在详情页里的展示形式，因为表单与详情页的映射关系，这时候在设计时，应该提供某一分类下的数据编辑，还是整个分类表单的数据编辑？

其实这种情况，特别是初级 B 端设计师，处理起来也是非常棘手

顶部导航 顶部导航非常特殊，虽然在我之前 导航菜单 的文章当中提到过，但在使用顶部导航的过程当中，还是会面临很多问题：

6000 字干货！B端产品的导航菜单设计5步法 导航菜单对于用户的使用来说尤为重要，本文是我从实际工作出发，结合自身产品和过去经验对于导航进行的一次全面总结。

阅读文章 >

顶部导航最大的局限性便是展示数量太低，毕竟在空间布局当中，横向空间与纵向空间的差异其实是非常大的，顶部导航的高度设定不能过高，同时 二级、三级菜单 只能够使用下拉菜单，也就导致在导航菜单的设计当中局限性过大，并且项目一旦发展过后，不容易解决问题。

当然，顶部导航并不是一无是处，在许多工具型产品、官网 当中，顶部导航都有着它的一席之地，其实这类形式，更多是以内容为主的网站结构，才会采取顶部导航，也就是上下结构会更加合理。

栅格 栅格严格意义上来讲不算是组建，但是由于很多设计师 误用、乱用，导致设计师为了栅格而栅格。

因为在常见的移动端设计当中，是不存在栅格（主要是移动端横向空间小，使用不频繁）

在桌面端的设计当中，并不是说栅格不好，而是很多时候设计师使用栅格往往会非常盲目，举一个简单的例子，在表格当中是否需要使用栅格？

答案是：“不用使用栅格”，其实这类问题就是目前很多设计师的问题，因为会盲目使用，也就导致了我在做设计的过程当中，出现很多为了栅格而栅格的现象。后面有时间单独总结一下栅格主要运用在哪些地方，希望大家别盲目使用。

至于栅格应该如何使用，在我之前的文章当中都有提到：

B端设计指南：栅格的定义和使用方法 在一个 B 端页面当中，关于栅格的使用方法，你或多或少都会有所疑惑。

阅读文章 >

滑动输入条 滑动输入条在很多概念设计当中都会经常出现，特别是在 Dribbble 上的桌面端设计当中，是每一个设计师的标配，但是在实际的 B 端项目中，特别是桌面端的 B 端系统当中，滑动输入条是非常不合理的一个组件。

因为 B 端产品当中，大多数的产品都是需要精准录入，并且数据的区间非常大，因此也就造成了滑动输入条，使用起来给用户的感受是非常糟糕的，并且由于大多数用户的预期还是以直接输入为主，这也就造成了现如今 B 端产品很见到滑动输入条的原因。

面包屑 面包屑导航在实际工作当中经常使用，因为在常见的 B 端系统当中，导航菜单以及信息结构，一定是非常复杂的（除非你的系统里面就只有一级导航菜单，并且没有其他的页面层级逻辑）

因此通过面包屑导航，能够让我们清晰知道整个页面的信息结构，通过面包屑又因为其 小巧、灵活，无论你是在一个完整大页面当中，又或者是一个小的气泡卡片当中，面包屑都能进行承载，并且它还能够起到 返回 的作用，又能够清晰的展示页面的路径信息，是一个可以一举多得的组件。

穿梭框 穿梭框相比大家的不会陌生，在设计 B 端产品的时候，或多或少都会有所涉及，与此同时，由于穿梭框本身复杂，再加上很多设计师会觉得它占比过大，因此不会去使用。

今天安利穿梭框，其实是想安利这一类的穿梭类的组件，你会发现其实很多业务选择类的组件都会通过穿梭框的形式进行演变，比如我们常见的“国家城市选择、部门成员选择” 甚至表格当中的字段显示隐藏设置，这些都是传统的数据选择过后一步一步演变而来，因此这类穿梭框型的数据选择。

其实更加体现的是设计师基于目前的组件所进行的优化，而分析它为何这样做，这样做的原因，成为了穿梭框上榜的理由。

折叠面板 折叠面板就像一个大的“盒子”，当产品经理在你的身后说着：“这个信息我要放，那个信息也不能落下的时候”，拖出一个折叠面板来解决这个问题。

其实在折叠面板的使用过程中，主要是在详情页以及表格当中，因为折叠面板本身可以容纳很多信息，并且能够交代具体的层级关系，因此使用折叠面板能够有更多展示数据的可能性，即插即用，非常方便。

气泡卡片 在页面当中的任何地方，蹦出一个气泡卡片你都不会感到奇怪。其实气泡卡片我在日常设计当中，经常使用的一个组件，因为它能够容纳下任意的内容，小到一串文字、大到一个视频，都能够在气泡卡片当中进行使用。

并且在信息当中，气泡卡片作为一个信息补充的组件，因此在系统当中，需要展示但是又不是那么重要的信息，使用气泡卡片，就会更加的方便。

锚点导航（锚点定位） 最后一个，自然逃不掉我们的锚点导航。感觉在我的疯狂安利下，越来越多的产品都开始使用锚点导航。因为 B 端产品必定是复杂且多的信息，自然而然我们在使用的过程当中要更多考虑信息的承载。

（锚点导航就不配图了，这个得自己用过感受才行）

而在使用过程的当中，锚点又不像分类那样过于绝对，不会强行分割过多数据，因此会更加易用。

同时它的兼容性会更强，可以出现在 表单页、详情页 等各个地方～

它的好处实在是太多了，这里就不过多赘述了，用过的人都说好。

做一个小小的总结 黑榜：树形选择、分类表单、顶部导航、栅格、滑动输入条。

红榜：面包屑、穿梭框、折叠面板、气泡卡片、锚点导航。

其实，我们在做 B 端设计的时候，你会发现要解决的就是 组件设计 。这里讲到的所有内容都是基础组件，实则在工作当中用到的更多的反而是基于基础组件之上，所演化而来的业务组件。但是业务组件确实是一个“深坑”，里面的特殊性、业务场景、具体问题，我们就在后续文章一起聊聊。

欢迎关注作者的微信公众号： CE青年Youthce

大家好~ 这里是被大暴雨吵得没睡好的花生，当然这并不耽误我和大家继续聊设计。

自 2016 年 Adobe、Apple、Google、Microsoft 联合发布 OpenType 1.8 规范以来， 可变字体 一直是 字体设计 方面的热门话题。期间很多经典字体也相继推出了新的可变字体版本，比如思源黑体的 Variable OTF/TFF、Helvetica 的 Helvetica Now Variable，Figma 也在今年增加了可变字体功能，而可变字体在网页设计、动态海报、创意视频等方面的运用也越来越多，这些都显示出可变字体的发展潜力。

图片来源： https://www.monotype.com/fonts/helvetica-now-variable

免费可商用！免费西文可变字体 LL Changer 打包下载 因为对可变字体很感兴趣，所以有了 LL Changer 这款衬线变非衬线字体的一个小实验。

阅读文章 >

什么是可变字体 可变字体是能包含整个字体系列的单一字体文件。我们都知道标准的字体文件一般包含 Thin、Light、Regular、SemiBold、Bold、Heavy6 个字重，每个字重以单独的字体文件形式存在，如果存在 Italic、Condensed、Extended 等变体，那相关的字体文件能多达二三十个。

而可变字体则能在一个字体文件中实现字体粗细、宽窄、高低、倾斜等多种样式的自由调整，且每个维度调整的步数最高有数百个，综合下来一个字体文件支持的字体样式高达百万，远超静态字体的样式数量。

可变字体之所能有如此惊人的样式数量，主要依靠对字体单个或者多个「轴」的设置。轴涉及重量、宽度、高度、倾斜、斜体和光学尺寸等多个方面，Figma 上有专门对可变字体「轴」概念进行讲解的网页，感兴趣的小伙伴可以进行深入了解。

「动态字体概念」 https://www.figma.com/typography/variable-fonts/#the-basics

可变字体的优势 相对静态字体，动态字体的优势包括：

1. 更小的文件体积

以经典西文黑体字体 Roboto 为例，一套标准的字体包包含 12 个字体文件，每个文件大小都在 170KB 左右，而其可变字体 Roboto Flex 则只有 1 个字体文件，大小 108KB，但是可支持的字体样式远超静态字体的 12 个。对网页设计来说，更少的字体文件数量和更小的文件体积能为网站带来更少的 HTTP 请求次数和更快的加载速度，给用户带来更流畅的使用体验。

更自由的设计空间

可变字体允许设计人员通过滑块对字体样式进行自由更改，这样一方面能让设计人员可以随时快速对字体样式进行调节，无需等待字体文件重新加载；另一方面超丰富的字体样式让设计师可以按照自己的想法对版式进行更精准细致的设计，保留更多选择和创意空间。

更好的响应式网页适配性

可变字体可以更好地适配响应式网页设计，字体形态能够随着设备显示比例的不同进行相应的改变，使页面在不同的设备、对比度和观看环境等条件下都能呈现最佳的视觉效果，为用户提供更加舒适的使用体验。

TYPO 实验室使用了可变字体作为其 2018 年会议视觉标识的一部分。

Config 2022 落幕！这15项新功能让 Figma 更简单好用了 大家好，我是和你们聊设计的花生~ 2022 年 Config 已于 2022 年 5 月 10 日-11 日在旧金山举行，这场由 Figma 召开的线上设计大会，邀请了来自全球 20 多个国家的 100 多位相关行业从业者发表演讲，与全球用户交流分享设计经验和最新的理念。

阅读文章 >

5 个可变字体资源网站 下面为大家推荐几个超好用可变字体网站，在上面你可以全面了解现在比较热门的可变字体、调节参数以预览不同的可变字体样式、下载相关资源、获取字体 CSS 代码，或上传自己电脑上的可变字体预览其效果。

1. v-fonts

网站链接： https://v-fonts.com/

v-fonts 是一个简便好用的可变字体公用资源搜寻网站，它包含目前大部分公开可用的可变字体，并提供字体基本信息、制作者、版权信息和下载渠道，用来找免费可商用的可变字体非常方便。

v-fonts 提供可变字体所有可用轴的设置界面，调整滑块就能实时预览字体的样式，还可以按字体特征标签、设计师和字体出版商等方式来快速筛选自己想要的可变字体。

2. Axis-Praxis 

网站链接： https://www.axis-praxis.org/specimens/__DEFAULT__

Axis-Praxis 是一个按时间顺序收集可变字体资源的网站，网站历史可以追溯到 1991 年，因此收集了很多珍贵的历史资料。在 Axis-Praxis 上我们可以在一个完整的版式内预览可变字体的不同样式，支持修改文字对齐方式和颜色，也支持上传本地可变字体文件进行预览。

点击在字体一栏右侧的圆形 i 字黑标，可以查看字体的详细信息，包括字体信息信息、版权、可用轴、命名范例等。

这 5 款工具，让设计师工作效率提升 200%！（六） 大家好，我是和你们一起聊设计花生~ 又到了为大家推荐设计师效率工具的时候啦，今天的 5 款神器分别是： 简单好用！

阅读文章 >

3. wakamaifondue

网站链接： https://wakamaifondue.com/

wakamaifondue 是由个人设计的可变字体预览工具网站。我们可以上传自己电脑上的字体，网站会自动识别然后显示出该可变字体的详细信息、布局特征和所有字符集等信息，并提供字体的 CSS 样式表格下载。

3. Font Playground 

网站链接： https://play.typedetail.com/ 

Font Playground 是一个专门用来预览优质可变字体的网站，网站提供可自由编辑字体的白板，在上面你可以同时预览多个字体的样式效果，非常适合用来观察字体细节并比较不同字体的差别。

网站左下角提供可变字体的版权信息和资源渠道，右侧是调节面板，如果点击白板上方的「code」右侧面板就会切换为 CSS 代码。

4. Google font 的可变字体

链接： https://fonts.google.com/variablefonts

Google font 有一个专门的可变字体版块，上面收集了 Google font 上所有的可变字体，点击对应的字体名称就可以转到详情页进行下载，字体都是免费可商用的。网站上还有对各种轴定义的解释，非常全面，对可变字体的各种轴缩写词还不明白的小伙伴一定记得看看。

5. variablefonts 

网站链接： https://variablefonts.io/ 

variablefonts 是一个非常全面的可变字体入门科普网站，在其中可以了解到可变字体如何运作，如何让 UI 设计更加轻松和美观，并提供相关可用资源。

以上就是今天为大家推荐的可变字体相关资源，希望对大家的设计工作有所帮助，喜欢的小伙伴记得点赞收藏哦~ 如果你还有关于文章或者设计内容的疑问，欢迎在评论区提出，我会第一时间回答。另外也欢迎大家加入优设的官方设计交流群，和喜欢设计的小伙伴一起交流（入群二维码见下方 Banner）~

前段时间，有个找我内推鹅厂同学面试没过，他问我面试一般会因为哪些原因挂掉，腾讯面试完一般会给什么评价？方便他做好后续的改进。

我觉得这是个好问题，所以当天晚上就抽了点时间，去看了下之前由我内推过的同学面试评价。因为我推荐的人挺多，所以还是能收集到蛮多真实面评的，总结下来大致上有 11 点常见问题。对这些问题，我逐一做了分析并给出了可能的解决办法。当然，这不是标准答案仅供参考哈。

这篇文章是在星球中的日常分享，当时得到了非常多星友的认同，所以我就把这个系列的内容做一个完善，分享到这里，希望能带给更多朋友以启发。

看完这篇文章，你能知道投简历过程中被拒绝的常见原因和解决办法。之后看大家的反馈，点赞转发比较多的话就接着聊聊大厂面试官主要会最看重面试者哪些特质这个话题了。废话不多说，直接看问题吧。

问题 1：学历不符合 现在大厂的招聘一般都是本科起步，如果学历低于本科直接投的话，很容易在简历阶段就被刷了。当然，这并非绝对，尤其对于社招设计类的会放得相对宽一些。

不过，现在的招聘情况大家也能感受到，尤其是对于校招来说，学历内卷还是挺夸张的。从我身边能看到的情况来看，硕士已经是基本的门槛，有海外留学经历，甚至博士都大有人在，普通本科这么一比较就会比较难。这其实也不难理解，招的人就那么多，大家的学历普遍都高了，门槛肯定也是水涨船高。在能力比较难客观衡量的时候，学历就成了一个相对容易判断的标准，至少能说明学习能力是很强的。

所以，我建议有机会考研的尽量考，争取拿到更高的学历。说实话，如果再给我一次机会的话，我肯定会选择考研，多读点书，绝对有好处的。

如果学历暂时确实不达标，我推荐你可以从下面 2 个方法来解决：

1）自考本科有些也是认可的。可以边工作边读书，把学历提升一下，当然前提是你对考试提升学历还有兴趣。

2）先从大厂外包做起，接触大厂项目。虽然是外包，但同样也可以把自己当做是项目 owner，尽可能的在项目发挥自己的能力，把项目做好得到领导信任，再由领导推荐转正。这算是一个曲线救国的方式，我身边就有不少成功案例。

问题 2：经历和项目深度和岗位要求不匹配 由于项目深度不匹配造成被刷掉，多半是在投高级岗位的时候会遇到。匹配度其实是在招聘中最看重的一个点。

比如你以往的经历一直做的是 B 端的业务，那么你去投 C 端的 APP 设计，可能就会有点难度。有些岗位还会特别要求你有某一个领域的经验，尤其是 B 端的业务。这个一般会写在招聘要求里，比如说有做过 XX 相关的设计经验优先录用。那么简历上如果有类似匹配的项目经历，得到面试机会就会大很多。

如果投递了一个岗位不行的话，建议继续多投不同岗位，找到能匹配自己能力的。挂掉不代表能力差，很可能是不够匹配。不匹配的原因可能是多角度的，也不用太纠结，有时候眼缘也很重要。保持自信心在找工作的过程中尤其重要，不要轻易怀疑自己。

问题 3：没有自己的设计方法论 作品集或者面试过程中，对于设计的推导不够准确，这其中还包括设计推导、设计方法、整体设计根源诠释、解决手段实施方法层面理解不够导致挂掉。

这也是我经常强调的，前面做的问题分析要跟后面的设计产出对应的上，一些设计细节和取舍要知道为什么。

很多人可能在网上学了各种作品集套路，但我发现很多人只学了一半，很模板化地列举一堆设计套路的内容，比如做用户分析、旅程地图、竞品分析、情绪板、定位改版原因、设计目标、产品目标等等，但一通操作下来发现跟最后的输出结果完全匹配不上。

逻辑不通、结论没有验证、设计质量不高等等这些都是最常见的问题。不要为了分析而分析，我最近还在站酷上看到一个非常强悍的分析，几乎堆满了所有能想到的方法论，都可以写成一本书了。需要声明一点的是，我没有说分析的不好，有思考是好事，但更看重最终的结果。

其实对于面试官来说，更希望看到的是你有自己的设计方法论。通俗的说就是要展示你在项目中的设计流程，你是怎么处理这个问题的，最终你还能抽象出你的方法并复用到别的项目中去，别人用你的设计方法也能得到跟你差不多的设计结果。这种包含了思维方式，或者解决问题的通用方法，就是方法论。有自己的观点，而不是理论套话。

问题 4：作品审美不行 执行能力决定设计师的下限，审美决定设计师的上限。

审美能力对于设计师来说非常关键，这就要求作品集中呈现的作品一定要是精品，不要拿差的作品凑数，会拉低整体的作品水平。比如在作品配图，情绪版，作品最终效果等等各方面都要求做到精致。

我在帮星友看作品集的过程中，发现有些人会有一个诡异的观点：对作品的数量过分限制。实际上数量并不是关键，关键在于作品的质量。

所以我建议：

1）为了提高作品的展示效果，一页不要塞太多内容，展示大图，突出细节

2）少一些文字描述，能用图说明的就不要写文字

3）绝不堆砌乱七八糟的作品，只放自己最满意的精品。如果自己都不满意，放上去必然是减分的。如果你的作品质量上下浮动很大，会判断你的设计发挥不稳定，是存在风险的。

提高审美的方法就是要每天多看，如果你不知道看什么好的作品，可以看这篇：

觉得看国外作品没用？用实战案例帮你学会正确的审美姿势！ 编者注：发好看的国外设计作品，总有人会评论你换成汉字试试。

阅读文章 >

问题 5：工作经验偏浅 对于社招高级设计师岗位来说，工作经验一般至少 3 年以上。如果你目前的经验在 3 年以下，入选的概率是比较低的。

还有一种情况是虽然工作年限比较长了，但作品没能体现对等的水平。我曾经见过一份非管理岗的设计师简历，工作经验已经 10 年以上了，但作品的水平还停留在工作 2-3 年时的水平，最新的作品跟她 7-8 年前的设计产出没有什么大的区别。这就是明显的经验与能力不够匹配，说明没有在工作中做自我提升，学习的主动性太弱，那么未来的可塑性会被认为是比较差的。

功夫更在平时，平时一定要多花一些时间做好提升，每段时间回顾下是否有学到新的知识，自己的设计能力有没有提高。当然，如果当前工作时间不长，可以多投一些非高级的岗位，提高成功概率。

问题 6：细节处理明显不当 作品的细节处理在一定程度上反映着设计师的真实水平，千万不要忽视作品中的细节，一定要仔细。细节处理得不好，会让面试官觉得你作为视觉设计师的基本素养：对美感的极致追求还不够。

有些人的项目展示中存在明显的信息层级和设计细节处理不当的问题。作品的细节，交互逻辑要经得起推敲，放到作品集中的作品，自己一定要仔细推敲，不要觉得面试官不会看，失败往往就在细节处。担心作品细节不易被看到，可以在作品中单独把设计亮点，细节单独放大展示。

我记得我曾经面试腾讯的时候，PDF 最边缘有 1px 的像素白边，面试官都给我提醒了，说这是细节问题，关键他还是一个交互，印象深刻。所以，对于自己作品中的尤其是一些容易出现问题的地方，比如图标设计，界面对齐问题，排版问题等等，一定要仔细校对，确保不会出现低级问题。从我看过的作品集来说，你把这些基础问题优化好了，作品集质量就能提升一个档次了。

问题 7：观点的总结提炼能力不够 现在很多人做作品集知道了要加分析，但像前面说的只学会了一半。知道分析，却不懂如何呈现自己的观点，文字提炼能力不够。面试官会觉得你对方法论的总结和提炼能力不够，导致个人瓶颈可能比较低。

会发现有些人的作品集中有大篇幅的文字说明，甚至都把视觉作品淹没其中，这是非常不可取的。

人都喜欢看图胜过文字，面试官也是人，何况还都那么忙。所以这就要求：

1）作品思路的文案要足够精简，避免暴露自己的总结能力差。建议多用关键词，避免大白话，切忌长篇大论

2）能用图说明的就尽量避免用文字

3）注意文字的排版，尽量不要干扰作品的展示

问题 8：作品没有记忆点 作品没有记忆点，跟其他作品集太过雷同。现在按套路出牌的作品集太多，尤其是 UI 设计师的作品集，简直就像是流水线出来的一样。越是在这样的环境，越要有自己的亮点，能让面试官记住你就成功了一半。

努力让自己的作品集有亮点，当然这不是说你的作品集在展示逻辑上一定要是一个另类，而是说要有自己的特点。比如你可以展示自己的独特经历，标签，项目，一些亮点设计等等，并在呈现过程中凸显出来。在作品展示上，也可以有一些自己独特的排版、优秀的视觉作品，设计的广度等等都可能会让人印象深刻。

找到属于自己的标签，比如我的标签有开发转设计拥有技术落地能力、文案写作能力、接触的领域多、能坚持、有探索精神，良好的自学能力。这些标签我会放到作品集开头的自我介绍那里，当然在后面的作品集内容中最好有具体的案例可以佐证这些标签。

问题 9：放弃做笔试题 现在设计岗社招的话，基本上都需要做题，除非你特别优秀或者特别资深。做题的目的在于考察你在既定的条件下，处理实际需求的能力。这些测试题的内容，大概率就是在招的这个岗位日常需要做的事情，所以一定要认真对待。

举个我当时做题的思路供大家参考。我当时面试腾讯做的题是一道 UI 改版的题目，给了 4 天时间对 APP 的首页和一个菜单页进行改版。最后的产出我是给到了一个大概 14 页的设计提案 pdf。这份提案包括了我的设计思路，改版过程，重点改动的内容展示，图标设计，界面设计以及做了整体的设计包装展示等等，提案的内容绝大多数都是图为主，思路基本上以关键词呈现，总字我记得还不到 100 字。

做题就是要向不了解你的人充分展示你解决问题的能力，如何分析，做事的方法流程，以及最后的设计产出。对于设计岗来说，最后的设计结果是非常重要的，千万不要前面一通分析，最后的视觉输出却做的比较差，或者跟前面的分析匹配不上，都会造成面试题不通过。

当然，也有遇到坚决不做题的设计师，如果有给到做题的要求却不做的话，那基本上是没后续的。如果你特别想来这个岗位的话，建议还是做下，当做练习也是不错的。

问题 10：面试题提案设计突破不够大 面试题在做的时候，一定要胆大心细。

如果是视觉设计师的题，一个优秀的设计提案至少有 2 个标准：

1）设计执行力强。提案中作品的呈现，视觉表现力强，能让人眼前一亮。

2）有自己的独立思考。一定要有所突破，不要把自己框死在已有的交互或者视觉中。

在做完设计提案后，要反复思考上面 2 个问题，你的设计有亮点吗？有没有自己特别满意的地方，有没有跳出原来产品的条条框框。至少要让自己觉得惊喜了，你才有戏。

我记得我自己曾经做题的时候，第一版做下来基本上就是重设计了图标，布局什么的做了点优化。做完后觉得没有太多惊喜，心里觉得这样肯定不行，因为这些细节处对方说不定早就内部探讨过了，不会只有我能知道。之所以不是最终线上版，多半就是被舍弃的调整。

做改版测试题，步子一定要迈得大一些。后面做第二版的时候做了大的调整，基本上改完后跟线上效果完全不一样了，而且把能做的视觉效果拉满。配图精挑细选，banner 也做了专门的设计，图标也结合品牌做了大的优化，在一些细节处也做了小惊喜的设计，等等。最终自己比较满意了才提交过去，结果就是笔试题顺利过了。笔试题过了，基本上半只脚就踏进了门，后面的面试不出大问题的话，一般都能过。

问题 11：工作地点不匹配 有些人投简历的时候不看工作地点，最后面试发现 base 地不方便协调或者成本太高，导致简历挂掉。最好是找自己能去的工作地。

很多人可能不会想到这一条也会成为不通过的理由之一吧？其实还蛮多的。我建议是，如果你对工作地无所谓的话，可以在简历中就提到说，自己可接受城市迁移。比如你现在在北京，如果机会在深圳，你也可以很自由地过来这边。当然，如果你真的介意工作地的话，就干脆不要投异地的岗位了。

不小心就写了快 5000 字，篇幅有限，就不再增加大家的阅读负担了。本来还想分享大厂面试官在看作品集时会最看重你的哪些特质，就放到下一篇再聊，敬请期待吧！大家点赞转发越多，文章更新就越快哦~

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

界面三重构给设计师提供一个崭新视角，相关的知识、理论、技巧还不完备，设计师可以根据自己的经验和阅历进行迭代。

当不确定成为常态，公司的组织架构频繁变动，产品不断迭代，设计师需要跟随用户需求、业务、产品进行技能迭代，UI 设计师学习数据分析、运营、交互等技能提升自己。这些技能都需要产品界面设计为载体，那么 界面设计 中有哪些确定不变的方法和技巧呢？那就需要对界面有更深入的理解。

如何理解界面设计？ 互联网的项目职能有产品经理、用户体验设计师、交互设计师、UI 设计师、 视觉设计 师、前端工程师、后端工程师、测试工程师等，每个职能岗位对界面设计的理解深度也各不相同。

1. 交互视角

交互设计师会从信息架构、概念设计、导航设计、标签设计、表单设计、搜索、筛选、关系、用户、目标、行为、场景、组件、模式等维度去观察和理解界面设计。

2. 组件化视角

产品经理、交互设计师、UI 设计师、前端工程师共同搭建设计系统语言时，他们会从逻辑、关系、信息、载体、容器、技术等维度把界面拆分成一个一个的组件，比如 Button、Modal、List、Icon、Tab、Card、Toast、Popover 等。

3. 视觉视角

UI 设计师、视觉设计师的视角会关注界面设计中的字体、色彩、图标、图片、布局、编排、比例、质感、栅格、风格、趋势等。

4. 前端视角

前端工程师会从代码视角理解界面结构，相关知识点有框架、容器、盒子原理、样式、标签、表单、模式、绝对定位、自适应、响应式、百分比等。

5. 界面三重构构思

基于以上视角，现在我会以一种新的视角带你去理解和学习界面设计，它就是界面三重构。简单说就是分别从 X 轴、Y 轴、Z 轴三个维度去理解和解读界面设计。但是在模型抽象时遇到了困难，如图模型一是从界面、交互、前端的 X 轴、Y 轴、Z 轴去解读，模型二是从 X 轴、Y 轴、Z 轴的界面、交互、前端的去解读。

模型的抽象不够简洁，有很多重复的点。这种结构很像组件化中的类别和状态。我尝试用组件化命名的方式梳理出平面逻辑图。梳理出界面—X、界面—Y、界面—Z、界面—XY、界面—XZ、界面—YZ，因为交互和前端都是建立在界面之上的，所以就有了界面+交互—X、界面+前端—X。当写到界面X轴相关知识时，如果有交互、前端的知识点，可以在此基础上接着写。

根据平面逻辑图我抽象出一个更简单的模型。可以从界面的 X、Y、Z、XY、XZ、YZ 去输出相关知识点，交互、前端在界面三重构的基础上阐述。

X 轴设计 X 轴设计中有位置的结构关系，位置的排序，段落文本行长的易读性，交互和前端中的应用。

1. 位置 X 轴从位置上可以简化为左右、左中右的结构关系。

左右结构

在左右的结构关系中，自古就有左为上，人的视线浏览顺序是从左到右，从上往下。所以重要的信息内容可以优先放在左边。在舞台剧表演中，重要的角色登场往往也是从左边进场。微信的发现列表页把图标加文字放置左边，右边放箭头指向。

左中右结构

左中右的结构布局让层级更加丰富，从而增加层次感。左中右的位置顺序是可以被定义的，常见的有左中右对应一二三的位置关系，也可以对应二一三的位置关系。这两种位置关系分别巩固了左或中为最重要的地位。

左右并列秩序

我们来看看 App 界面的底部 Tab 栏的结构，当我们随意打开一个 App 时，你还记得底部 Tab 从左到右的栏目分别是什么呢？可能经常使用的 App 我们很熟悉，对于不熟悉的应用可能就不是很了解。但是我们依然可以从中找到规律，就是第一个栏目往往是首页，最后一个是我的个人中心，其他的相对比较模糊。

由此我们推断出从左往右的顺序并不是一二三四依次递减，而是一三四二递减结束处呈上升趋势。这种秩序不但适用于 C 端产品的界面设计，同样也适用于 B 端的界面设计。B 端产品界面的导航结构第一个是首页（工作台）或最重要的内容分类，最后一个是更多或设置。同样遵循以上规则。

右侧位置最重要典型的就是模态设计，在对话框设计中，确定和取消按钮往往把最重要的放置在界面的右侧，这时位置的排序确定为一，取消为二。

2. 易读性 文字段落编排时更多的需要考虑段落文本的易读性，当你设计 C 端产品时，因为屏幕尺寸的原因会忽略段落文本的行长，但在 Web、B 端设计中，行长的定义可以影响到读者的阅读效率和体验。美国芝加哥有学者做过一个试验，人的眼睛在不停地跳动，跳动的时候是看不见字的，停下来的时候才能看见字，而且每次停下来只能看六个字。所以一段文字不要排得太长，过长眼睛在阅读时会很疲劳，在阅读时我们更适合阅读较短的文字。

网页新闻详情页面的行长，我研究了纽约时报为 640px、华盛顿邮报 680px、Medium680px，所以我们设计师可以控制行长最大在 640—680px。但是西文和汉字还是有区别的，站在前人的规则上去学习定义规则更加重要。

3. 交互改变位置秩序 位置的重要秩序其实是很容易打破的，在界面固定不变时结构中相对稳定，当交互大兄弟来了，说我想尝试改变改变，如图把手机的网易云音乐和 QQ 音乐进行组合成组，原来的一二三四的结构就被打破了，变成了一三二的视觉结构关系。点开组合后，这时候用户大兄弟来了，网易云音乐与 QQ 音乐的排列先后次序取决于产品在用户心中的重要程度和操作频次。因人而异，所以大家一定要带着客观的心态去学习，不同视角和不同思考维度都会有异样的结果。

4. 响应式与断点 X 轴设计从前端的角度就是响应式和断点，因为载体的容器大小不同，前端代码主要用 Media 来打断点，不同断点之间会定义相对应的样式。内容元素按照栅格系统进行适配调整。

Y 轴设计 1. 视觉中心

物理几何中心是居中的，但是人的视觉中心是偏上的，有时候眼见为实是假的，视错觉中有大量的案例，在色彩和图形设计中需要视错觉的矫正。

如下图 APP 的闪屏页的 Logo 居中布局，考虑到有向下的重力和视觉中心偏上的理论，往往把 Logo 居于物理中心上方。

2. 倒金字塔信息层级

倒金字塔结构是按重要性递减顺序安排消息的一种结构形式。界面展示的信息层级多为倒金字塔结构，重要的信息放上面，越往下信息层级越低。网页设计中还会有折线之上的运用，以前人们看报纸是折叠的，但是为了告知读书报纸展示也是有内容的，所以折叠设计时看到一些图片引导读者打开。

Apple 官网的信息层级也遵循倒金字塔信息层级，上方 Logo 加导航，中间为最新发布的产品，下方为历史发布产品。信息重要层级依次递减。Apple 官网下方露出 iPhone 的照片来引导用户滚动下拉浏览。

3. 纵向模式

纵向模式是用户习惯自上而下滚动来浏览更多信息，当用户还未确定目标信息时，纵向视觉流能帮助用户在不需要回扫的情况下获取更多信息。如图微信 APP 的发现界面，用户会选择一列一列快速浏览直到找到某一目标信息后，再横向浏览细节。那么问题来了，上文中提到倒金字塔信息层级，重要的信息应该放置上方，为什么 APP 的 Tab 栏很重要却放置在界面底部，下文隐喻设计中“驾驶舱隐喻”会讲到。

XY 轴设计 X 轴与 Y 轴组合后就形成了一个平面，所以平面设计的理论知识在此次也适用。

1. 盒子原理 当我们做界面设计时，为了让界面的元素统一为一个整体时，给他们整体来个框框就形成了一个一个盒子的样式，这样更有利于组合信息。典型的设计有卡片、列表、模块化等。

2. 四角压边 在 Dribbble 的作品展示中，由于作品图片展示比例为 4:3，为了平衡界面中的元素，常常在四个角放一些小的相关元素来平衡画面。我们来看一下 R 神的插画作品中大量使用了四角压边的设计技巧。

运用到界面设计中最典型的就是卡片设计，比如个人中心、银行卡、列表页面等。如图银行卡就采用卡片设计，四角放置信息，整体给人简洁大气的感觉。

四角压边在设计中是可以灵活运用的，可以把四角压边变成三角压边，两角压边。如图当四角压边的 A1、B1 与 A2、B2 位置慢慢移动至重合时，四角压边就变成了两角压边，多用于列表页。

3. 跷跷板原理 四角压边的本质是跷跷板原理，通过调整元素让界面达到平衡。跷跷板原理本质是平衡，需要关注的是中间的一条水平线。微信列表设计中就运用了这个原理来平衡界面。在苹果的原生设计中列表之间分割线是不包含图标且一直切到最后侧。因为左边的图标视觉重量大，右边的重量小，但是通过缩短左侧的杠杆长度并增加右侧的杠杆长度来达到视觉平衡。这种设计技巧在编排设计中会被大量运用。

4. 8 点网格（4 点网格） 8 点网格理论来源于谷歌 Material Design 的设计语言，4 点网格理论来源于苹果 iOS 的设计语言。个人还是更加喜欢 iOS 的 4 点网格，因为原子单位越小，可呈现的方式越多，可解决的问题方案也越多。8 点网格可以理解为最小单位，其他使用的单位都为 8 的倍数。8 点网格多用于 DIV 盒子与盒子之间的间距。图标、头像等固定尺寸的也可以使用 8 的倍数。

如何用「8点网格」来规范你的设计？看这篇好文！ 8点网格流行有一段时间了，我最早知道这种设计方式是在看了谷歌的Material Design设计规范之后开始认识的。

阅读文章 >

苹果和谷歌都是在定义产品系统中的度量单位，西方人一直想定义度量这个问题，其中最有名的就是勒·柯布西耶的《模度》，他的理论是以西方人的的比例结构来定义规范，并不能适用于全世界更多的人种比如东方人、非洲人。但是苹果设计团队发现世界上所有人类的手指触摸屏幕大小是一致的，最小为 44pt。iOS 定义了人类使用触控屏的基本度量，44pt 也是 4 的倍率，这才是我喜欢 iOS 的 4 点网格的真正原因。

5. 视觉流引导 读者在看界面的时候，眼睛的视线受到画面内容的吸引，就会产生一个视觉先后的次序，将这些视觉集中点的先后依次连起来，就形成了视觉流导向。 设计师经常会考虑版面或界面上的文字是否会被阅读，实际上很多文字都不会被阅读，但是可能会被浏览。视觉眼动仪可以检测到人们如何浏览一个页面的，从找到切入点，到了解界面中信息关注的先后次序，从而调整界面元素，来引导用户去关注重要且有用的信息。常用的视觉流导向有 F 模式、Z 模式、古腾堡图表法等。

视觉动线技巧

赶紧收下！连BAT设计师都在使用的视觉动线技巧（上） 不知道大家有没有打开一个网站或者一个 APP，但是不知道去看那里，因为页面中有太多的信息内容，我们很难决定，从哪里开始，然后我们就很容易关闭这个 APP 或者网站。

阅读文章 >

赶紧收藏！连BAT设计师都在使用的视觉动线技巧（下） 上篇文章《赶紧收下！

阅读文章 >

F 模式

尼尔森 F 型 视觉模型 由 Jakob Nielsen 于 2006 年提出，他指出用户在浏览界面时，视线动线会呈现宛如英文字母 F 的形状，这种视觉浏览模式主要包括以下三个方面：

读者的眼睛会先从顶部开始，从左到右水平移动，浏览的上半部分会形成一条横向的运动轨迹，这就是 F 形状的第一条横线。 读者的目光会向下移动，并再开始从左到右观察，但浏览的视觉动线长度会相对短些，这就是形成了 F 形状的第二条横线。 读者从界面左边的部分进行垂直扫描，以较短的长度向下扫描，此时读者的阅读速度较慢，而且更有条理性和系统性，这样就形成了 F 形状的一条竖线。

根据尼尔森 F 模型，我们可以得出几个心理暗示：

读者在浏览界面时是快速扫视，不会仔细阅读每一个界面内容。 界面的头两段文字无比重要，多用小标题、短句引起阅读者注意。 将重要的内容放在最上边，将重要的信息显示在标题和段落的前部显示给读者。 Z 模式

Z 模式是基于用户从左到右自上而下的阅读习惯，用户首先关注的上半部页面的内容，依照从头部的左边到右边，再沿着对角线浏览下一部分的中部左到中部右，循环往复的浏览模式。如图头条的文本编排从标题从左到右阅读到文本从左到右阅读。

视觉设计基础技巧

超有趣！高级设计师必知的6个视觉设计基础技巧 同样一个三角形，位置不同，差别极大。

阅读文章 >

古腾堡图表法

古登堡图表法（Gutenberg Diagram）又称对角线平衡法则（Diagonal Balance），由 14 世纪西方活字印刷术的发明人约翰·古腾堡提出。古登堡图表将要画面显示的东西分成了四个象限：

第一视觉区(Primary Optical Area)：左上方，读者首先注意到的地方。 最终视觉区(Final Optical Area)：右下方，视觉流程的终点。 强休息区(Strong Follow Area)：右上方，较少被注意到。 弱休息区(Weak Follow Area)：左下方，最少被注意到。 如图小程序的授权页从 Logo 到允许高亮按钮就是对角线平衡构图。

Z 轴设计 Z 轴设计可分为视觉度层级（单界面）、结构层级（单界面）、产品用户流程（多界面）。

1. 视觉度层级（单界面） 视觉度层级是根据界面元素的视觉表现来进行划分浏览的先后次序。界面的视觉度表现技法有主体与背景、投影、色彩字重字号等。

主体与背景

界面中使用背景色是让元素向前进，背景色多为灰色且有颜色倾向，偏冷色或暖色。微信界面使用了偏冷色背景，Craft 界面使用了偏暖色背景。当背景色为白色时就需要留白、线条、投影来区分层级。

投影

界面中使用投影可以增加内容的视觉层级，之前追波流行的弥散投影也是为了增加界面视觉层级。谷歌 Material Design 就是运用纸张的物理投影来映射到设计系统中。在界面设计中使用投影时要思考这种技巧的保鲜时长。

色彩大于字重大于字号

色彩最典型的就是 App 的消息红色圆点，红色的波长最长，所以用最突出的红色来提醒用户有新动态。字重是从面积的大小衡量的，标题文字常常加字重来提升视觉。在定义组件时，鼠标悬浮、Hover 的各种状态就是用颜色来区分，目的是让用户操作后有反馈的感知。

2. 结构层级（单界面） 界面元素中的结构层级可以分为内容层、导航层、遮罩层、弹出层。内容层是界面内容元素的承载；导航层是位于内容之上，位置相对静止；遮罩层配合弹出层一起使用，又叫模态层；弹出层属于轻量化设计，比如消息通知、下拉菜单和加载、报错等状态提醒。

模态对话框

如图模态对话框是用户在完成任务时，不希望跳转页面而打断工作流程，而是用 Modal 对话框在一个界面上承载相应的操作。对于信息量不大，容器可展示的操作可用模态对话框。

3. 产品用户流程（多界面） 产品的界面设计需要从概念到信息分类到信息架构，目的是方便用户快速的搜索、筛选、辨别出有用的信息。交互设计需要学习辛向阳教授的交互设计五要素：用户、行为、目标、场景、媒介。

产品的 Z 轴设计其实是从平面（界面）、空间（层级）、架构（关系）梳理出结构关系，但站在产品层面最重要的是信息与用户的交互设计，关注用户旅程地图中用户流程。用户流程需要多界面之间跳转，这就形成了产品的 Z 轴界面设计。

什么是用户流程

用户流程是用户从打开 APP 到完成任务关闭 APP 的使用全过程，包括了用户看到什么信息，做了什么事。 疫情期间每天都需要使用随申办小程序，用户流程是打开微信，进入到微信首页，下拉查看常用小程序，点击随申办，查看随申办，退出小程序。

根据用户流程优化体验，用户流程越短越好，操作流程尽量不超过 5 步。用户流程要顾及头尾，即用户进入到一个新界面会看到什么信息，用户成功完成任务后会跳转到哪里，或显示哪些反馈信息。这些都是最容易被遗忘的接触点。

如何确定用户流程？

基于用户的使用场景。以查找朋友圈某个朋友的信息为例，需要思考用户有哪些场景，如果知道谁发的，就会先通过找到人，然后进入其朋友圈找到信息。如果忘记谁发的呢，那只能凭记忆里在朋友圈慢慢滑动，直到找到该信息。

以上从交互设计五要素行为和场景对用户流程进行分析，还可以从用户、目标、媒介去思考如何帮用户高效的完成任务。拆解用户方法有用户画像分类、北极星指标分类、用户目标分类、用户角色分类、利益相关者等。拆解媒介的方法有竞品分析、头脑风暴、ABTest、埋点数据分析等。

交互设计五要素

学会「交互设计五要素」，帮你更快Get到设计关键点！ B端浪潮下设计师的「尴尬」 供应链资源整合是企业发展态势。

阅读文章 >

XZ 轴设计 上文已经讲了 Z 轴相关设计，为什么还要写 XZ 轴、YZ 轴的设计呢，从 X、Y、Z、XY、XZ、YZ 更有逻辑性和完整性，也确定存在一小部分的案例可以解析。

1. Banner 轮播图

Banner 轮播图除了横向的 X 轴出场次序，还有 Z 轴点一对一的当前状态。移动端受容器大小限制多为 Z 轴设计，Web 端容器变大可以变成左右的交互设计形式。

2. 导航栏

导航栏是 Z 轴的视觉与交互结合，当前状态需要重点突出，视觉向前进，点击导航栏后底部的横线会有动效移动，可以侧滑导航栏选择类别，这样效率会更高；也可以侧滑下方内容切换选择。

3. 列表侧滑删除

列表侧滑是使用内嵌的布局方式，界面设计中用户习惯是先查看再操作，当容器大小放置不下可先隐藏操作按钮。QQ 聊天界面侧滑内容可以引用该内容。微信消息列表侧滑出现标为未读、不显示、删除操作按钮。

YZ 轴设计 YZ 轴多结合界面交互一起设计，通过用户操作形成 Z 轴信息架构的变化。YZ 轴设计多用于信息流、键盘输入等。

1. 页面滑动

信息流的设计多为 Y 轴设计，Y 轴急促、紧张的情绪会让用户不停的刷信息。信息流设计中采用相似的界面结构保持统一，比如固定的头像位置，固定的操作按钮位置，标题文本形式等。微信朋友圈信息流一整块一整块的加载提高阅读效率；而抖音的视频流是一个一个加载，更注重精准推送和沉浸式的观看体验。

2. 键盘输入

键盘输入也是采用 YZ 轴设计方式，不同场景下的键盘输入交互也有差别，微信聊天界面的键盘输入框放置在底部，每次调用键盘组件时界面会从下往上移动；而朋友圈评论时，键盘组件除了从下往上移动，还要对齐到对应评论的内容上。前端的定位技术会有所不同。

模型升级 界面三重构模型中的界面可以替换成交互、前端、容器、用户、信息等，当然也可以替换成桌面端、Web、小程序、APP、B 端设计等。这样就可以把中间的要素抽象成 N，界面三重构模型升级为 N——X轴、Y轴、Z轴，N可以为单一的内容比如界面，也可以是N=N+N比如界面加交互一起思考。简化的模型更适合微观层面的细节设计，并不适合于宏观视角的分析设计。

1. 如何使用该模型？

我们来举一个组件的例子，比如导航设计共分为二级导航，我们常规会显示出一级导航。一级导航可以从 X 轴、Y 轴两个维度去思考，X 轴的多为横向全局导航，Y 轴多为侧边导航栏。当交互大兄弟来显示二级导航时可以平铺（XY）、上浮（Z）、内嵌（Z），二级导航展示方式还需要考虑容器大兄弟的意见，容器够大就可以选择平铺，容器小就展开收起的交互模式，展开就会有上浮和内嵌的两种形式。

模型抽象的 N 是随时发生变化，对应的界面设计形态也会发生变化，但是 X 轴、Y 轴、Z 轴的方法和设计技巧是相对不变的。只是你知道或不知道，会用或不会用的区别。产品设计中常用的两个方法是等价设计和同形异构。

2. 等价设计

等价设计是帮助用户完成任务的结果是一致的，但过程可能不同，又或者是产品的逻辑结构是一致的，但设计的外在形式有差别。

如图京东购物车的数量添加减少功能是展示出来的，直接可以添加可减少商品数量；但是淘宝购物车的数量是展示结果，修改商品数量需要点击后出现步进器组件。这两个设计形式就是等价设计，等价设计的好坏需要考虑很多因素，用户、目标、场景、手段、行为、容器、信息关系、生活方式等。存在即合理，合适最重要。

3. 同形异构

同形异构是指不同的信息、数据类型设计出相同的外在形式。微信消息列表中也有微信广告助手、服务通知、订阅号消息、文件传输助手、个人聊天、群聊天等，这些消息的数据类型、对象各不相同，可是外在的结构形式是一样的，这样做的目的是简化、统一，通过图标和头像来区分人、应用、工具的消息差异。

以上总结的界面三重构相关知识、理论、技巧都有其使用范围，那么有没有一种设计方法可以凌驾于界面三重构模型之上呢，答案是肯定的，那就是隐喻设计。

隐喻设计 什么是隐喻设计？我们应该怎么去理解它呢？隐喻可以理解为隐含的相似性，它用想象的方式将某一物体与另一物体相联系，并把二者的特征、情感等相互结合转移。

隐喻设计是通过象征、类比的手法将复杂抽象的概念简明化、具象化、降低用户学习使用的成本，为用户创造清晰、明了、舒适的操作体验。产品设计具体表现在苹果的 iOS 操作系统和谷歌的 Material design。

1. iOS 六大设计原则之一 iOS 六大设计原则：AestheticIntegrity(审美完整性)、Consistency(一致性)、Direct Manipulation(直接操作)、Feedback(反馈)、Metaphors(隐喻)、User Control(用户控制)。

Metaphors(隐喻设计)当一个 app 的虚拟对象和动作都是对熟悉事物的隐喻时（不管基于现实世界还是数字世界），用户学习的更快；隐喻设计在 iOS 系统中很好的得到体现，因为用户是直接与屏幕产生物理交互的。用户移动视图来查看更多的内容；拖拽内容；切换开关、移动滑块并且直接滚动来选取值；甚至可以像翻书或杂志一样轻快翻页。

关于隐喻设计还可以用另一个概念来表达，那就是心智模型。因为人类几千年的发展，虽然科技进步很快，外部环境也发生剧烈变化，但是人类的心智进步其实是很慢很慢的。

拓展阅读

如何掌握用户心智模型？收下这篇4000字的干货！ 产品设计中挖掘用户心智，是打造产品良好用户体验的关键一步。

阅读文章 >

2. 心智模型 心智模型最早是由苏格兰心理学家苏珊·凯里在 1943 年提出的，是指在人们心中根深蒂固存在的，影响人们认识世界、解释世界、面对世界，以及如何采取行动的陈见、假设和印象。心智模型是一种内部表征，但这种表征并不是对外部世界的完全模拟，具备不正确性和不科学性等。因为用户心智模型存在这些不足，所以需要了解其偏差与错误的来源，以便今后采取适当的措施提高用户与系统的交互效率。

在产品设计的系统领域，心智模型是指人们对于产品系统的理解，用户需要了解这款产品是干嘛的、它有哪些功能、这款产品解决了我什么问题、我要如何使用该产品。每个用户将具有不同的思维模式，他们对产品或网站的进一步体验将逐渐改变和调整其思维模式。

心智模型其实是通过学习、感悟不断提升自我认知的过程，还记得我刚开始学习软件时候，如合成软件 Photoshop、三维软件 C4d。当我第一次接触这类软件时，感觉整个人摸不着头脑，太多的概念都不清楚，比如通道、图层样式、曲面建模、打灯光、动态图形等。踏踏实实的去学习这款软件是最有效的方式，通过不断的试错和总结，慢慢的得心应手，这样我们对于软件的心智模型就会逐渐形成。

但是有些心智是和我们生活方式、习惯、文化息息相关的。日本设计师深泽直人就提出了一种叫做无意识设计的设计理念，又称为“直觉“。其实在界面设计中也存在日常生活与线上产品的映射。所以设计师需要有好奇心、有共情、有洞见，才能很好理解设计来源于生活这句话。

3. XY 情绪 X 轴与 Y 轴的情绪可以从日常生活中找到答案，星巴克、瑞幸的店铺使用了 X 轴的横向排列，而在肯德基、麦当劳的店面排队使用了 Y 轴竖向排列的方式。我们尝试用抽象思维把它们进行图形化，可以表达的更加直观。

星巴克、瑞幸的店铺使用了 X 轴的横向排列，用户可以看到工作人员不停工作，哪怕需要等待一会也不会很压抑，整个体验过程会给人一种舒适、安逸、闲散。而肯德基、麦当劳的店面排队使用了 Y 轴竖向排列，会营造一种热闹的感觉，因为是快餐需要快速的售卖商品就需要给用户营销一种紧张急促的感觉，买完就走的即视感。

通过对日常生活和物理世界的映射，设计师在产品设计时可以考虑使用 X 轴和 Y 轴的情绪设计，比如文本采用横向排列会给用户带来一种平静、舒适的体验。APP 底部的 Tab 栏横向排列希望用户花更多的时间浏览每个栏目的内容，这时候内容的好坏、吸引度也是重要的衡量指标。

在信息流的设计中大量采用 Y 轴，因为 Y 轴紧张、急促的感觉会让用户下意识的快速下滑，比如微信的朋友圈；抖音上滑来切换视频；直播互动通过大量评论来营销热闹氛围。

4. 隐喻设计 驾驶舱隐喻—APP Tab栏

在前文中提到人阅读浏览的顺序是从左往右，从上往下的。那么应该把重要的东西放置在左边或者上边。Tab 栏作为 APP 应用的主导航为什么却放置在界面的底部，这时候就需要用隐喻设计来解释了。就好比科学的尽头是哲学，哲学的尽头是佛学一样。

日常生活中开车、骑车，手永远是在控制方向和操作，而视线前方就是驾驶员需要浏览阅读的内容，比如行人、马路、车流等。把驾驶舱隐喻映射到产品界面中，底部 Tab 栏是引导用户去往哪里，上方动态变化来满足不同用户对不同内容的需求。

问答隐喻—知乎问答

在线下学校的教室里，老师提出问题学生们举手回答的场景，抽象一层其实是一个提问者、多个回答者的逻辑，是一对多的关系。知乎问答界面就采用了教室的问答隐喻设计，一个问题多个回答。

观看隐喻—B站直播

在电影院看电影时，屏幕在正前方，很多人共同观看一个屏幕。其实也是一对多的关系。B 站的直播界面平台，也是数以万计的人共同观看一个直播，下面的评论弹幕映射电影院的欢声笑语。

会议隐喻—Zoom视频会议

协同办公领域，在会议室开会是再寻常不过了，会议室开会时能同时看到同事的面部表情，每个同事都可以投屏进行共享会议内容。Zoom 的视频会议软件采用了线下会议隐喻设计，Zoom 视频会议支持多人视频讨论，每个人都可以共享屏幕进行实时分享内容。

互联网行业才短短十几年，但人类的日常生活却已经演化了几千年。好的生活方式和习惯会慢慢的保留下来。当设计产品时遇到问题没有方向时，不妨停下脚步看看人们在日常生活中是如何运作？能不能从生活中吸取灵感。

总结 界面三重构给设计师提供一个崭新视角，相关的知识、理论、技巧还不完备。设计师可以根据自己的经验和阅历进行迭代。从用户体验五要素的视角去看，界面三重构算是从结构和表现层进行挖掘设计的可能性，偏微观层面的设计。在实际运用中需要结合用户、信息、交互、界面、前端、场景、流程等多维度思考。

界面三重构的想法起源于 2019 年，2020 年于 Gllue UED 团队内部分享，2021 年于 RDD 内部分享，整理制作发表于 2022 年 6 月。

感谢阅读，很片面，共勉。

欢迎关注作者的微信公众号：「水手哥学设计」

大家好~ 这里是被大暴雨吵得没睡好的花生，当然这并不耽误我和大家继续聊设计。

自 2016 年 Adobe、Apple、Google、Microsoft 联合发布 OpenType 1.8 规范以来， 可变字体 一直是 字体设计 方面的热门话题。期间很多经典字体也相继推出了新的可变字体版本，比如思源黑体的 Variable OTF/TFF、Helvetica 的 Helvetica Now Variable，Figma 也在今年增加了可变字体功能，而可变字体在网页设计、动态海报、创意视频等方面的运用也越来越多，这些都显示出可变字体的发展潜力。

图片来源： https://www.monotype.com/fonts/helvetica-now-variable

免费可商用！免费西文可变字体 LL Changer 打包下载 因为对可变字体很感兴趣，所以有了 LL Changer 这款衬线变非衬线字体的一个小实验。

阅读文章 >

什么是可变字体 可变字体是能包含整个字体系列的单一字体文件。我们都知道标准的字体文件一般包含 Thin、Light、Regular、SemiBold、Bold、Heavy6 个字重，每个字重以单独的字体文件形式存在，如果存在 Italic、Condensed、Extended 等变体，那相关的字体文件能多达二三十个。

而可变字体则能在一个字体文件中实现字体粗细、宽窄、高低、倾斜等多种样式的自由调整，且每个维度调整的步数最高有数百个，综合下来一个字体文件支持的字体样式高达百万，远超静态字体的样式数量。

可变字体之所能有如此惊人的样式数量，主要依靠对字体单个或者多个「轴」的设置。轴涉及重量、宽度、高度、倾斜、斜体和光学尺寸等多个方面，Figma 上有专门对可变字体「轴」概念进行讲解的网页，感兴趣的小伙伴可以进行深入了解。

「动态字体概念」 https://www.figma.com/typography/variable-fonts/#the-basics

可变字体的优势 相对静态字体，动态字体的优势包括：

1. 更小的文件体积

以经典西文黑体字体 Roboto 为例，一套标准的字体包包含 12 个字体文件，每个文件大小都在 170KB 左右，而其可变字体 Roboto Flex 则只有 1 个字体文件，大小 108KB，但是可支持的字体样式远超静态字体的 12 个。对网页设计来说，更少的字体文件数量和更小的文件体积能为网站带来更少的 HTTP 请求次数和更快的加载速度，给用户带来更流畅的使用体验。

更自由的设计空间

可变字体允许设计人员通过滑块对字体样式进行自由更改，这样一方面能让设计人员可以随时快速对字体样式进行调节，无需等待字体文件重新加载；另一方面超丰富的字体样式让设计师可以按照自己的想法对版式进行更精准细致的设计，保留更多选择和创意空间。

更好的响应式网页适配性

可变字体可以更好地适配响应式网页设计，字体形态能够随着设备显示比例的不同进行相应的改变，使页面在不同的设备、对比度和观看环境等条件下都能呈现最佳的视觉效果，为用户提供更加舒适的使用体验。

TYPO 实验室使用了可变字体作为其 2018 年会议视觉标识的一部分。

Config 2022 落幕！这15项新功能让 Figma 更简单好用了 大家好，我是和你们聊设计的花生~ 2022 年 Config 已于 2022 年 5 月 10 日-11 日在旧金山举行，这场由 Figma 召开的线上设计大会，邀请了来自全球 20 多个国家的 100 多位相关行业从业者发表演讲，与全球用户交流分享设计经验和最新的理念。

阅读文章 >

5 个可变字体资源网站 下面为大家推荐几个超好用可变字体网站，在上面你可以全面了解现在比较热门的可变字体、调节参数以预览不同的可变字体样式、下载相关资源、获取字体 CSS 代码，或上传自己电脑上的可变字体预览其效果。

1. v-fonts

网站链接： https://v-fonts.com/

v-fonts 是一个简便好用的可变字体公用资源搜寻网站，它包含目前大部分公开可用的可变字体，并提供字体基本信息、制作者、版权信息和下载渠道，用来找免费可商用的可变字体非常方便。

v-fonts 提供可变字体所有可用轴的设置界面，调整滑块就能实时预览字体的样式，还可以按字体特征标签、设计师和字体出版商等方式来快速筛选自己想要的可变字体。

2. Axis-Praxis 

网站链接： https://www.axis-praxis.org/specimens/__DEFAULT__

Axis-Praxis 是一个按时间顺序收集可变字体资源的网站，网站历史可以追溯到 1991 年，因此收集了很多珍贵的历史资料。在 Axis-Praxis 上我们可以在一个完整的版式内预览可变字体的不同样式，支持修改文字对齐方式和颜色，也支持上传本地可变字体文件进行预览。

点击在字体一栏右侧的圆形 i 字黑标，可以查看字体的详细信息，包括字体信息信息、版权、可用轴、命名范例等。

这 5 款工具，让设计师工作效率提升 200%！（六） 大家好，我是和你们一起聊设计花生~ 又到了为大家推荐设计师效率工具的时候啦，今天的 5 款神器分别是： 简单好用！

阅读文章 >

3. wakamaifondue

网站链接： https://wakamaifondue.com/

wakamaifondue 是由个人设计的可变字体预览工具网站。我们可以上传自己电脑上的字体，网站会自动识别然后显示出该可变字体的详细信息、布局特征和所有字符集等信息，并提供字体的 CSS 样式表格下载。

3. Font Playground 

网站链接： https://play.typedetail.com/ 

Font Playground 是一个专门用来预览优质可变字体的网站，网站提供可自由编辑字体的白板，在上面你可以同时预览多个字体的样式效果，非常适合用来观察字体细节并比较不同字体的差别。

网站左下角提供可变字体的版权信息和资源渠道，右侧是调节面板，如果点击白板上方的「code」右侧面板就会切换为 CSS 代码。

4. Google font 的可变字体

链接： https://fonts.google.com/variablefonts

Google font 有一个专门的可变字体版块，上面收集了 Google font 上所有的可变字体，点击对应的字体名称就可以转到详情页进行下载，字体都是免费可商用的。网站上还有对各种轴定义的解释，非常全面，对可变字体的各种轴缩写词还不明白的小伙伴一定记得看看。

5. variablefonts 

网站链接： https://variablefonts.io/ 

variablefonts 是一个非常全面的可变字体入门科普网站，在其中可以了解到可变字体如何运作，如何让 UI 设计更加轻松和美观，并提供相关可用资源。

以上就是今天为大家推荐的可变字体相关资源，希望对大家的设计工作有所帮助，喜欢的小伙伴记得点赞收藏哦~ 如果你还有关于文章或者设计内容的疑问，欢迎在评论区提出，我会第一时间回答。另外也欢迎大家加入优设的官方设计交流群，和喜欢设计的小伙伴一起交流（入群二维码见下方 Banner）~

界面三重构给设计师提供一个崭新视角，相关的知识、理论、技巧还不完备，设计师可以根据自己的经验和阅历进行迭代。

当不确定成为常态，公司的组织架构频繁变动，产品不断迭代，设计师需要跟随用户需求、业务、产品进行技能迭代，UI 设计师学习数据分析、运营、交互等技能提升自己。这些技能都需要产品界面设计为载体，那么 界面设计 中有哪些确定不变的方法和技巧呢？那就需要对界面有更深入的理解。

如何理解界面设计？ 互联网的项目职能有产品经理、用户体验设计师、交互设计师、UI 设计师、 视觉设计 师、前端工程师、后端工程师、测试工程师等，每个职能岗位对界面设计的理解深度也各不相同。

1. 交互视角

交互设计师会从信息架构、概念设计、导航设计、标签设计、表单设计、搜索、筛选、关系、用户、目标、行为、场景、组件、模式等维度去观察和理解界面设计。

2. 组件化视角

产品经理、交互设计师、UI 设计师、前端工程师共同搭建设计系统语言时，他们会从逻辑、关系、信息、载体、容器、技术等维度把界面拆分成一个一个的组件，比如 Button、Modal、List、Icon、Tab、Card、Toast、Popover 等。

3. 视觉视角

UI 设计师、视觉设计师的视角会关注界面设计中的字体、色彩、图标、图片、布局、编排、比例、质感、栅格、风格、趋势等。

4. 前端视角

前端工程师会从代码视角理解界面结构，相关知识点有框架、容器、盒子原理、样式、标签、表单、模式、绝对定位、自适应、响应式、百分比等。

5. 界面三重构构思

基于以上视角，现在我会以一种新的视角带你去理解和学习界面设计，它就是界面三重构。简单说就是分别从 X 轴、Y 轴、Z 轴三个维度去理解和解读界面设计。但是在模型抽象时遇到了困难，如图模型一是从界面、交互、前端的 X 轴、Y 轴、Z 轴去解读，模型二是从 X 轴、Y 轴、Z 轴的界面、交互、前端的去解读。

模型的抽象不够简洁，有很多重复的点。这种结构很像组件化中的类别和状态。我尝试用组件化命名的方式梳理出平面逻辑图。梳理出界面—X、界面—Y、界面—Z、界面—XY、界面—XZ、界面—YZ，因为交互和前端都是建立在界面之上的，所以就有了界面+交互—X、界面+前端—X。当写到界面X轴相关知识时，如果有交互、前端的知识点，可以在此基础上接着写。

根据平面逻辑图我抽象出一个更简单的模型。可以从界面的 X、Y、Z、XY、XZ、YZ 去输出相关知识点，交互、前端在界面三重构的基础上阐述。

X 轴设计 X 轴设计中有位置的结构关系，位置的排序，段落文本行长的易读性，交互和前端中的应用。

1. 位置 X 轴从位置上可以简化为左右、左中右的结构关系。

左右结构

在左右的结构关系中，自古就有左为上，人的视线浏览顺序是从左到右，从上往下。所以重要的信息内容可以优先放在左边。在舞台剧表演中，重要的角色登场往往也是从左边进场。微信的发现列表页把图标加文字放置左边，右边放箭头指向。

左中右结构

左中右的结构布局让层级更加丰富，从而增加层次感。左中右的位置顺序是可以被定义的，常见的有左中右对应一二三的位置关系，也可以对应二一三的位置关系。这两种位置关系分别巩固了左或中为最重要的地位。

左右并列秩序

我们来看看 App 界面的底部 Tab 栏的结构，当我们随意打开一个 App 时，你还记得底部 Tab 从左到右的栏目分别是什么呢？可能经常使用的 App 我们很熟悉，对于不熟悉的应用可能就不是很了解。但是我们依然可以从中找到规律，就是第一个栏目往往是首页，最后一个是我的个人中心，其他的相对比较模糊。

由此我们推断出从左往右的顺序并不是一二三四依次递减，而是一三四二递减结束处呈上升趋势。这种秩序不但适用于 C 端产品的界面设计，同样也适用于 B 端的界面设计。B 端产品界面的导航结构第一个是首页（工作台）或最重要的内容分类，最后一个是更多或设置。同样遵循以上规则。

右侧位置最重要典型的就是模态设计，在对话框设计中，确定和取消按钮往往把最重要的放置在界面的右侧，这时位置的排序确定为一，取消为二。

2. 易读性 文字段落编排时更多的需要考虑段落文本的易读性，当你设计 C 端产品时，因为屏幕尺寸的原因会忽略段落文本的行长，但在 Web、B 端设计中，行长的定义可以影响到读者的阅读效率和体验。美国芝加哥有学者做过一个试验，人的眼睛在不停地跳动，跳动的时候是看不见字的，停下来的时候才能看见字，而且每次停下来只能看六个字。所以一段文字不要排得太长，过长眼睛在阅读时会很疲劳，在阅读时我们更适合阅读较短的文字。

网页新闻详情页面的行长，我研究了纽约时报为 640px、华盛顿邮报 680px、Medium680px，所以我们设计师可以控制行长最大在 640—680px。但是西文和汉字还是有区别的，站在前人的规则上去学习定义规则更加重要。

3. 交互改变位置秩序 位置的重要秩序其实是很容易打破的，在界面固定不变时结构中相对稳定，当交互大兄弟来了，说我想尝试改变改变，如图把手机的网易云音乐和 QQ 音乐进行组合成组，原来的一二三四的结构就被打破了，变成了一三二的视觉结构关系。点开组合后，这时候用户大兄弟来了，网易云音乐与 QQ 音乐的排列先后次序取决于产品在用户心中的重要程度和操作频次。因人而异，所以大家一定要带着客观的心态去学习，不同视角和不同思考维度都会有异样的结果。

4. 响应式与断点 X 轴设计从前端的角度就是响应式和断点，因为载体的容器大小不同，前端代码主要用 Media 来打断点，不同断点之间会定义相对应的样式。内容元素按照栅格系统进行适配调整。

Y 轴设计 1. 视觉中心

物理几何中心是居中的，但是人的视觉中心是偏上的，有时候眼见为实是假的，视错觉中有大量的案例，在色彩和图形设计中需要视错觉的矫正。

如下图 APP 的闪屏页的 Logo 居中布局，考虑到有向下的重力和视觉中心偏上的理论，往往把 Logo 居于物理中心上方。

2. 倒金字塔信息层级

倒金字塔结构是按重要性递减顺序安排消息的一种结构形式。界面展示的信息层级多为倒金字塔结构，重要的信息放上面，越往下信息层级越低。网页设计中还会有折线之上的运用，以前人们看报纸是折叠的，但是为了告知读书报纸展示也是有内容的，所以折叠设计时看到一些图片引导读者打开。

Apple 官网的信息层级也遵循倒金字塔信息层级，上方 Logo 加导航，中间为最新发布的产品，下方为历史发布产品。信息重要层级依次递减。Apple 官网下方露出 iPhone 的照片来引导用户滚动下拉浏览。

3. 纵向模式

纵向模式是用户习惯自上而下滚动来浏览更多信息，当用户还未确定目标信息时，纵向视觉流能帮助用户在不需要回扫的情况下获取更多信息。如图微信 APP 的发现界面，用户会选择一列一列快速浏览直到找到某一目标信息后，再横向浏览细节。那么问题来了，上文中提到倒金字塔信息层级，重要的信息应该放置上方，为什么 APP 的 Tab 栏很重要却放置在界面底部，下文隐喻设计中“驾驶舱隐喻”会讲到。

XY 轴设计 X 轴与 Y 轴组合后就形成了一个平面，所以平面设计的理论知识在此次也适用。

1. 盒子原理 当我们做界面设计时，为了让界面的元素统一为一个整体时，给他们整体来个框框就形成了一个一个盒子的样式，这样更有利于组合信息。典型的设计有卡片、列表、模块化等。

2. 四角压边 在 Dribbble 的作品展示中，由于作品图片展示比例为 4:3，为了平衡界面中的元素，常常在四个角放一些小的相关元素来平衡画面。我们来看一下 R 神的插画作品中大量使用了四角压边的设计技巧。

运用到界面设计中最典型的就是卡片设计，比如个人中心、银行卡、列表页面等。如图银行卡就采用卡片设计，四角放置信息，整体给人简洁大气的感觉。

四角压边在设计中是可以灵活运用的，可以把四角压边变成三角压边，两角压边。如图当四角压边的 A1、B1 与 A2、B2 位置慢慢移动至重合时，四角压边就变成了两角压边，多用于列表页。

3. 跷跷板原理 四角压边的本质是跷跷板原理，通过调整元素让界面达到平衡。跷跷板原理本质是平衡，需要关注的是中间的一条水平线。微信列表设计中就运用了这个原理来平衡界面。在苹果的原生设计中列表之间分割线是不包含图标且一直切到最后侧。因为左边的图标视觉重量大，右边的重量小，但是通过缩短左侧的杠杆长度并增加右侧的杠杆长度来达到视觉平衡。这种设计技巧在编排设计中会被大量运用。

4. 8 点网格（4 点网格） 8 点网格理论来源于谷歌 Material Design 的设计语言，4 点网格理论来源于苹果 iOS 的设计语言。个人还是更加喜欢 iOS 的 4 点网格，因为原子单位越小，可呈现的方式越多，可解决的问题方案也越多。8 点网格可以理解为最小单位，其他使用的单位都为 8 的倍数。8 点网格多用于 DIV 盒子与盒子之间的间距。图标、头像等固定尺寸的也可以使用 8 的倍数。

如何用「8点网格」来规范你的设计？看这篇好文！ 8点网格流行有一段时间了，我最早知道这种设计方式是在看了谷歌的Material Design设计规范之后开始认识的。

阅读文章 >

苹果和谷歌都是在定义产品系统中的度量单位，西方人一直想定义度量这个问题，其中最有名的就是勒·柯布西耶的《模度》，他的理论是以西方人的的比例结构来定义规范，并不能适用于全世界更多的人种比如东方人、非洲人。但是苹果设计团队发现世界上所有人类的手指触摸屏幕大小是一致的，最小为 44pt。iOS 定义了人类使用触控屏的基本度量，44pt 也是 4 的倍率，这才是我喜欢 iOS 的 4 点网格的真正原因。

5. 视觉流引导 读者在看界面的时候，眼睛的视线受到画面内容的吸引，就会产生一个视觉先后的次序，将这些视觉集中点的先后依次连起来，就形成了视觉流导向。 设计师经常会考虑版面或界面上的文字是否会被阅读，实际上很多文字都不会被阅读，但是可能会被浏览。视觉眼动仪可以检测到人们如何浏览一个页面的，从找到切入点，到了解界面中信息关注的先后次序，从而调整界面元素，来引导用户去关注重要且有用的信息。常用的视觉流导向有 F 模式、Z 模式、古腾堡图表法等。

视觉动线技巧

赶紧收下！连BAT设计师都在使用的视觉动线技巧（上） 不知道大家有没有打开一个网站或者一个 APP，但是不知道去看那里，因为页面中有太多的信息内容，我们很难决定，从哪里开始，然后我们就很容易关闭这个 APP 或者网站。

阅读文章 >

赶紧收藏！连BAT设计师都在使用的视觉动线技巧（下） 上篇文章《赶紧收下！

阅读文章 >

F 模式

尼尔森 F 型 视觉模型 由 Jakob Nielsen 于 2006 年提出，他指出用户在浏览界面时，视线动线会呈现宛如英文字母 F 的形状，这种视觉浏览模式主要包括以下三个方面：

读者的眼睛会先从顶部开始，从左到右水平移动，浏览的上半部分会形成一条横向的运动轨迹，这就是 F 形状的第一条横线。 读者的目光会向下移动，并再开始从左到右观察，但浏览的视觉动线长度会相对短些，这就是形成了 F 形状的第二条横线。 读者从界面左边的部分进行垂直扫描，以较短的长度向下扫描，此时读者的阅读速度较慢，而且更有条理性和系统性，这样就形成了 F 形状的一条竖线。

根据尼尔森 F 模型，我们可以得出几个心理暗示：

读者在浏览界面时是快速扫视，不会仔细阅读每一个界面内容。 界面的头两段文字无比重要，多用小标题、短句引起阅读者注意。 将重要的内容放在最上边，将重要的信息显示在标题和段落的前部显示给读者。 Z 模式

Z 模式是基于用户从左到右自上而下的阅读习惯，用户首先关注的上半部页面的内容，依照从头部的左边到右边，再沿着对角线浏览下一部分的中部左到中部右，循环往复的浏览模式。如图头条的文本编排从标题从左到右阅读到文本从左到右阅读。

视觉设计基础技巧

超有趣！高级设计师必知的6个视觉设计基础技巧 同样一个三角形，位置不同，差别极大。

阅读文章 >

古腾堡图表法

古登堡图表法（Gutenberg Diagram）又称对角线平衡法则（Diagonal Balance），由 14 世纪西方活字印刷术的发明人约翰·古腾堡提出。古登堡图表将要画面显示的东西分成了四个象限：

第一视觉区(Primary Optical Area)：左上方，读者首先注意到的地方。 最终视觉区(Final Optical Area)：右下方，视觉流程的终点。 强休息区(Strong Follow Area)：右上方，较少被注意到。 弱休息区(Weak Follow Area)：左下方，最少被注意到。 如图小程序的授权页从 Logo 到允许高亮按钮就是对角线平衡构图。

Z 轴设计 Z 轴设计可分为视觉度层级（单界面）、结构层级（单界面）、产品用户流程（多界面）。

1. 视觉度层级（单界面） 视觉度层级是根据界面元素的视觉表现来进行划分浏览的先后次序。界面的视觉度表现技法有主体与背景、投影、色彩字重字号等。

主体与背景

界面中使用背景色是让元素向前进，背景色多为灰色且有颜色倾向，偏冷色或暖色。微信界面使用了偏冷色背景，Craft 界面使用了偏暖色背景。当背景色为白色时就需要留白、线条、投影来区分层级。

投影

界面中使用投影可以增加内容的视觉层级，之前追波流行的弥散投影也是为了增加界面视觉层级。谷歌 Material Design 就是运用纸张的物理投影来映射到设计系统中。在界面设计中使用投影时要思考这种技巧的保鲜时长。

色彩大于字重大于字号

色彩最典型的就是 App 的消息红色圆点，红色的波长最长，所以用最突出的红色来提醒用户有新动态。字重是从面积的大小衡量的，标题文字常常加字重来提升视觉。在定义组件时，鼠标悬浮、Hover 的各种状态就是用颜色来区分，目的是让用户操作后有反馈的感知。

2. 结构层级（单界面） 界面元素中的结构层级可以分为内容层、导航层、遮罩层、弹出层。内容层是界面内容元素的承载；导航层是位于内容之上，位置相对静止；遮罩层配合弹出层一起使用，又叫模态层；弹出层属于轻量化设计，比如消息通知、下拉菜单和加载、报错等状态提醒。

模态对话框

如图模态对话框是用户在完成任务时，不希望跳转页面而打断工作流程，而是用 Modal 对话框在一个界面上承载相应的操作。对于信息量不大，容器可展示的操作可用模态对话框。

3. 产品用户流程（多界面） 产品的界面设计需要从概念到信息分类到信息架构，目的是方便用户快速的搜索、筛选、辨别出有用的信息。交互设计需要学习辛向阳教授的交互设计五要素：用户、行为、目标、场景、媒介。

产品的 Z 轴设计其实是从平面（界面）、空间（层级）、架构（关系）梳理出结构关系，但站在产品层面最重要的是信息与用户的交互设计，关注用户旅程地图中用户流程。用户流程需要多界面之间跳转，这就形成了产品的 Z 轴界面设计。

什么是用户流程

用户流程是用户从打开 APP 到完成任务关闭 APP 的使用全过程，包括了用户看到什么信息，做了什么事。 疫情期间每天都需要使用随申办小程序，用户流程是打开微信，进入到微信首页，下拉查看常用小程序，点击随申办，查看随申办，退出小程序。

根据用户流程优化体验，用户流程越短越好，操作流程尽量不超过 5 步。用户流程要顾及头尾，即用户进入到一个新界面会看到什么信息，用户成功完成任务后会跳转到哪里，或显示哪些反馈信息。这些都是最容易被遗忘的接触点。

如何确定用户流程？

基于用户的使用场景。以查找朋友圈某个朋友的信息为例，需要思考用户有哪些场景，如果知道谁发的，就会先通过找到人，然后进入其朋友圈找到信息。如果忘记谁发的呢，那只能凭记忆里在朋友圈慢慢滑动，直到找到该信息。

以上从交互设计五要素行为和场景对用户流程进行分析，还可以从用户、目标、媒介去思考如何帮用户高效的完成任务。拆解用户方法有用户画像分类、北极星指标分类、用户目标分类、用户角色分类、利益相关者等。拆解媒介的方法有竞品分析、头脑风暴、ABTest、埋点数据分析等。

交互设计五要素

学会「交互设计五要素」，帮你更快Get到设计关键点！ B端浪潮下设计师的「尴尬」 供应链资源整合是企业发展态势。

阅读文章 >

XZ 轴设计 上文已经讲了 Z 轴相关设计，为什么还要写 XZ 轴、YZ 轴的设计呢，从 X、Y、Z、XY、XZ、YZ 更有逻辑性和完整性，也确定存在一小部分的案例可以解析。

1. Banner 轮播图

Banner 轮播图除了横向的 X 轴出场次序，还有 Z 轴点一对一的当前状态。移动端受容器大小限制多为 Z 轴设计，Web 端容器变大可以变成左右的交互设计形式。

2. 导航栏

导航栏是 Z 轴的视觉与交互结合，当前状态需要重点突出，视觉向前进，点击导航栏后底部的横线会有动效移动，可以侧滑导航栏选择类别，这样效率会更高；也可以侧滑下方内容切换选择。

3. 列表侧滑删除

列表侧滑是使用内嵌的布局方式，界面设计中用户习惯是先查看再操作，当容器大小放置不下可先隐藏操作按钮。QQ 聊天界面侧滑内容可以引用该内容。微信消息列表侧滑出现标为未读、不显示、删除操作按钮。

YZ 轴设计 YZ 轴多结合界面交互一起设计，通过用户操作形成 Z 轴信息架构的变化。YZ 轴设计多用于信息流、键盘输入等。

1. 页面滑动

信息流的设计多为 Y 轴设计，Y 轴急促、紧张的情绪会让用户不停的刷信息。信息流设计中采用相似的界面结构保持统一，比如固定的头像位置，固定的操作按钮位置，标题文本形式等。微信朋友圈信息流一整块一整块的加载提高阅读效率；而抖音的视频流是一个一个加载，更注重精准推送和沉浸式的观看体验。

2. 键盘输入

键盘输入也是采用 YZ 轴设计方式，不同场景下的键盘输入交互也有差别，微信聊天界面的键盘输入框放置在底部，每次调用键盘组件时界面会从下往上移动；而朋友圈评论时，键盘组件除了从下往上移动，还要对齐到对应评论的内容上。前端的定位技术会有所不同。

模型升级 界面三重构模型中的界面可以替换成交互、前端、容器、用户、信息等，当然也可以替换成桌面端、Web、小程序、APP、B 端设计等。这样就可以把中间的要素抽象成 N，界面三重构模型升级为 N——X轴、Y轴、Z轴，N可以为单一的内容比如界面，也可以是N=N+N比如界面加交互一起思考。简化的模型更适合微观层面的细节设计，并不适合于宏观视角的分析设计。

1. 如何使用该模型？

我们来举一个组件的例子，比如导航设计共分为二级导航，我们常规会显示出一级导航。一级导航可以从 X 轴、Y 轴两个维度去思考，X 轴的多为横向全局导航，Y 轴多为侧边导航栏。当交互大兄弟来显示二级导航时可以平铺（XY）、上浮（Z）、内嵌（Z），二级导航展示方式还需要考虑容器大兄弟的意见，容器够大就可以选择平铺，容器小就展开收起的交互模式，展开就会有上浮和内嵌的两种形式。

模型抽象的 N 是随时发生变化，对应的界面设计形态也会发生变化，但是 X 轴、Y 轴、Z 轴的方法和设计技巧是相对不变的。只是你知道或不知道，会用或不会用的区别。产品设计中常用的两个方法是等价设计和同形异构。

2. 等价设计

等价设计是帮助用户完成任务的结果是一致的，但过程可能不同，又或者是产品的逻辑结构是一致的，但设计的外在形式有差别。

如图京东购物车的数量添加减少功能是展示出来的，直接可以添加可减少商品数量；但是淘宝购物车的数量是展示结果，修改商品数量需要点击后出现步进器组件。这两个设计形式就是等价设计，等价设计的好坏需要考虑很多因素，用户、目标、场景、手段、行为、容器、信息关系、生活方式等。存在即合理，合适最重要。

3. 同形异构

同形异构是指不同的信息、数据类型设计出相同的外在形式。微信消息列表中也有微信广告助手、服务通知、订阅号消息、文件传输助手、个人聊天、群聊天等，这些消息的数据类型、对象各不相同，可是外在的结构形式是一样的，这样做的目的是简化、统一，通过图标和头像来区分人、应用、工具的消息差异。

以上总结的界面三重构相关知识、理论、技巧都有其使用范围，那么有没有一种设计方法可以凌驾于界面三重构模型之上呢，答案是肯定的，那就是隐喻设计。

隐喻设计 什么是隐喻设计？我们应该怎么去理解它呢？隐喻可以理解为隐含的相似性，它用想象的方式将某一物体与另一物体相联系，并把二者的特征、情感等相互结合转移。

隐喻设计是通过象征、类比的手法将复杂抽象的概念简明化、具象化、降低用户学习使用的成本，为用户创造清晰、明了、舒适的操作体验。产品设计具体表现在苹果的 iOS 操作系统和谷歌的 Material design。

1. iOS 六大设计原则之一 iOS 六大设计原则：AestheticIntegrity(审美完整性)、Consistency(一致性)、Direct Manipulation(直接操作)、Feedback(反馈)、Metaphors(隐喻)、User Control(用户控制)。

Metaphors(隐喻设计)当一个 app 的虚拟对象和动作都是对熟悉事物的隐喻时（不管基于现实世界还是数字世界），用户学习的更快；隐喻设计在 iOS 系统中很好的得到体现，因为用户是直接与屏幕产生物理交互的。用户移动视图来查看更多的内容；拖拽内容；切换开关、移动滑块并且直接滚动来选取值；甚至可以像翻书或杂志一样轻快翻页。

关于隐喻设计还可以用另一个概念来表达，那就是心智模型。因为人类几千年的发展，虽然科技进步很快，外部环境也发生剧烈变化，但是人类的心智进步其实是很慢很慢的。

拓展阅读

如何掌握用户心智模型？收下这篇4000字的干货！ 产品设计中挖掘用户心智，是打造产品良好用户体验的关键一步。

阅读文章 >

2. 心智模型 心智模型最早是由苏格兰心理学家苏珊·凯里在 1943 年提出的，是指在人们心中根深蒂固存在的，影响人们认识世界、解释世界、面对世界，以及如何采取行动的陈见、假设和印象。心智模型是一种内部表征，但这种表征并不是对外部世界的完全模拟，具备不正确性和不科学性等。因为用户心智模型存在这些不足，所以需要了解其偏差与错误的来源，以便今后采取适当的措施提高用户与系统的交互效率。

在产品设计的系统领域，心智模型是指人们对于产品系统的理解，用户需要了解这款产品是干嘛的、它有哪些功能、这款产品解决了我什么问题、我要如何使用该产品。每个用户将具有不同的思维模式，他们对产品或网站的进一步体验将逐渐改变和调整其思维模式。

心智模型其实是通过学习、感悟不断提升自我认知的过程，还记得我刚开始学习软件时候，如合成软件 Photoshop、三维软件 C4d。当我第一次接触这类软件时，感觉整个人摸不着头脑，太多的概念都不清楚，比如通道、图层样式、曲面建模、打灯光、动态图形等。踏踏实实的去学习这款软件是最有效的方式，通过不断的试错和总结，慢慢的得心应手，这样我们对于软件的心智模型就会逐渐形成。

但是有些心智是和我们生活方式、习惯、文化息息相关的。日本设计师深泽直人就提出了一种叫做无意识设计的设计理念，又称为“直觉“。其实在界面设计中也存在日常生活与线上产品的映射。所以设计师需要有好奇心、有共情、有洞见，才能很好理解设计来源于生活这句话。

3. XY 情绪 X 轴与 Y 轴的情绪可以从日常生活中找到答案，星巴克、瑞幸的店铺使用了 X 轴的横向排列，而在肯德基、麦当劳的店面排队使用了 Y 轴竖向排列的方式。我们尝试用抽象思维把它们进行图形化，可以表达的更加直观。

星巴克、瑞幸的店铺使用了 X 轴的横向排列，用户可以看到工作人员不停工作，哪怕需要等待一会也不会很压抑，整个体验过程会给人一种舒适、安逸、闲散。而肯德基、麦当劳的店面排队使用了 Y 轴竖向排列，会营造一种热闹的感觉，因为是快餐需要快速的售卖商品就需要给用户营销一种紧张急促的感觉，买完就走的即视感。

通过对日常生活和物理世界的映射，设计师在产品设计时可以考虑使用 X 轴和 Y 轴的情绪设计，比如文本采用横向排列会给用户带来一种平静、舒适的体验。APP 底部的 Tab 栏横向排列希望用户花更多的时间浏览每个栏目的内容，这时候内容的好坏、吸引度也是重要的衡量指标。

在信息流的设计中大量采用 Y 轴，因为 Y 轴紧张、急促的感觉会让用户下意识的快速下滑，比如微信的朋友圈；抖音上滑来切换视频；直播互动通过大量评论来营销热闹氛围。

4. 隐喻设计 驾驶舱隐喻—APP Tab栏

在前文中提到人阅读浏览的顺序是从左往右，从上往下的。那么应该把重要的东西放置在左边或者上边。Tab 栏作为 APP 应用的主导航为什么却放置在界面的底部，这时候就需要用隐喻设计来解释了。就好比科学的尽头是哲学，哲学的尽头是佛学一样。

日常生活中开车、骑车，手永远是在控制方向和操作，而视线前方就是驾驶员需要浏览阅读的内容，比如行人、马路、车流等。把驾驶舱隐喻映射到产品界面中，底部 Tab 栏是引导用户去往哪里，上方动态变化来满足不同用户对不同内容的需求。

问答隐喻—知乎问答

在线下学校的教室里，老师提出问题学生们举手回答的场景，抽象一层其实是一个提问者、多个回答者的逻辑，是一对多的关系。知乎问答界面就采用了教室的问答隐喻设计，一个问题多个回答。

观看隐喻—B站直播

在电影院看电影时，屏幕在正前方，很多人共同观看一个屏幕。其实也是一对多的关系。B 站的直播界面平台，也是数以万计的人共同观看一个直播，下面的评论弹幕映射电影院的欢声笑语。

会议隐喻—Zoom视频会议

协同办公领域，在会议室开会是再寻常不过了，会议室开会时能同时看到同事的面部表情，每个同事都可以投屏进行共享会议内容。Zoom 的视频会议软件采用了线下会议隐喻设计，Zoom 视频会议支持多人视频讨论，每个人都可以共享屏幕进行实时分享内容。

互联网行业才短短十几年，但人类的日常生活却已经演化了几千年。好的生活方式和习惯会慢慢的保留下来。当设计产品时遇到问题没有方向时，不妨停下脚步看看人们在日常生活中是如何运作？能不能从生活中吸取灵感。

总结 界面三重构给设计师提供一个崭新视角，相关的知识、理论、技巧还不完备。设计师可以根据自己的经验和阅历进行迭代。从用户体验五要素的视角去看，界面三重构算是从结构和表现层进行挖掘设计的可能性，偏微观层面的设计。在实际运用中需要结合用户、信息、交互、界面、前端、场景、流程等多维度思考。

界面三重构的想法起源于 2019 年，2020 年于 Gllue UED 团队内部分享，2021 年于 RDD 内部分享，整理制作发表于 2022 年 6 月。

感谢阅读，很片面，共勉。

欢迎关注作者的微信公众号：「水手哥学设计」

前段时间，有个找我内推鹅厂同学面试没过，他问我面试一般会因为哪些原因挂掉，腾讯面试完一般会给什么评价？方便他做好后续的改进。

我觉得这是个好问题，所以当天晚上就抽了点时间，去看了下之前由我内推过的同学面试评价。因为我推荐的人挺多，所以还是能收集到蛮多真实面评的，总结下来大致上有 11 点常见问题。对这些问题，我逐一做了分析并给出了可能的解决办法。当然，这不是标准答案仅供参考哈。

这篇文章是在星球中的日常分享，当时得到了非常多星友的认同，所以我就把这个系列的内容做一个完善，分享到这里，希望能带给更多朋友以启发。

看完这篇文章，你能知道投简历过程中被拒绝的常见原因和解决办法。之后看大家的反馈，点赞转发比较多的话就接着聊聊大厂面试官主要会最看重面试者哪些特质这个话题了。废话不多说，直接看问题吧。

问题 1：学历不符合 现在大厂的招聘一般都是本科起步，如果学历低于本科直接投的话，很容易在简历阶段就被刷了。当然，这并非绝对，尤其对于社招设计类的会放得相对宽一些。

不过，现在的招聘情况大家也能感受到，尤其是对于校招来说，学历内卷还是挺夸张的。从我身边能看到的情况来看，硕士已经是基本的门槛，有海外留学经历，甚至博士都大有人在，普通本科这么一比较就会比较难。这其实也不难理解，招的人就那么多，大家的学历普遍都高了，门槛肯定也是水涨船高。在能力比较难客观衡量的时候，学历就成了一个相对容易判断的标准，至少能说明学习能力是很强的。

所以，我建议有机会考研的尽量考，争取拿到更高的学历。说实话，如果再给我一次机会的话，我肯定会选择考研，多读点书，绝对有好处的。

如果学历暂时确实不达标，我推荐你可以从下面 2 个方法来解决：

1）自考本科有些也是认可的。可以边工作边读书，把学历提升一下，当然前提是你对考试提升学历还有兴趣。

2）先从大厂外包做起，接触大厂项目。虽然是外包，但同样也可以把自己当做是项目 owner，尽可能的在项目发挥自己的能力，把项目做好得到领导信任，再由领导推荐转正。这算是一个曲线救国的方式，我身边就有不少成功案例。

问题 2：经历和项目深度和岗位要求不匹配 由于项目深度不匹配造成被刷掉，多半是在投高级岗位的时候会遇到。匹配度其实是在招聘中最看重的一个点。

比如你以往的经历一直做的是 B 端的业务，那么你去投 C 端的 APP 设计，可能就会有点难度。有些岗位还会特别要求你有某一个领域的经验，尤其是 B 端的业务。这个一般会写在招聘要求里，比如说有做过 XX 相关的设计经验优先录用。那么简历上如果有类似匹配的项目经历，得到面试机会就会大很多。

如果投递了一个岗位不行的话，建议继续多投不同岗位，找到能匹配自己能力的。挂掉不代表能力差，很可能是不够匹配。不匹配的原因可能是多角度的，也不用太纠结，有时候眼缘也很重要。保持自信心在找工作的过程中尤其重要，不要轻易怀疑自己。

问题 3：没有自己的设计方法论 作品集或者面试过程中，对于设计的推导不够准确，这其中还包括设计推导、设计方法、整体设计根源诠释、解决手段实施方法层面理解不够导致挂掉。

这也是我经常强调的，前面做的问题分析要跟后面的设计产出对应的上，一些设计细节和取舍要知道为什么。

很多人可能在网上学了各种作品集套路，但我发现很多人只学了一半，很模板化地列举一堆设计套路的内容，比如做用户分析、旅程地图、竞品分析、情绪板、定位改版原因、设计目标、产品目标等等，但一通操作下来发现跟最后的输出结果完全匹配不上。

逻辑不通、结论没有验证、设计质量不高等等这些都是最常见的问题。不要为了分析而分析，我最近还在站酷上看到一个非常强悍的分析，几乎堆满了所有能想到的方法论，都可以写成一本书了。需要声明一点的是，我没有说分析的不好，有思考是好事，但更看重最终的结果。

其实对于面试官来说，更希望看到的是你有自己的设计方法论。通俗的说就是要展示你在项目中的设计流程，你是怎么处理这个问题的，最终你还能抽象出你的方法并复用到别的项目中去，别人用你的设计方法也能得到跟你差不多的设计结果。这种包含了思维方式，或者解决问题的通用方法，就是方法论。有自己的观点，而不是理论套话。

问题 4：作品审美不行 执行能力决定设计师的下限，审美决定设计师的上限。

审美能力对于设计师来说非常关键，这就要求作品集中呈现的作品一定要是精品，不要拿差的作品凑数，会拉低整体的作品水平。比如在作品配图，情绪版，作品最终效果等等各方面都要求做到精致。

我在帮星友看作品集的过程中，发现有些人会有一个诡异的观点：对作品的数量过分限制。实际上数量并不是关键，关键在于作品的质量。

所以我建议：

1）为了提高作品的展示效果，一页不要塞太多内容，展示大图，突出细节

2）少一些文字描述，能用图说明的就不要写文字

3）绝不堆砌乱七八糟的作品，只放自己最满意的精品。如果自己都不满意，放上去必然是减分的。如果你的作品质量上下浮动很大，会判断你的设计发挥不稳定，是存在风险的。

提高审美的方法就是要每天多看，如果你不知道看什么好的作品，可以看这篇：

觉得看国外作品没用？用实战案例帮你学会正确的审美姿势！ 编者注：发好看的国外设计作品，总有人会评论你换成汉字试试。

阅读文章 >

问题 5：工作经验偏浅 对于社招高级设计师岗位来说，工作经验一般至少 3 年以上。如果你目前的经验在 3 年以下，入选的概率是比较低的。

还有一种情况是虽然工作年限比较长了，但作品没能体现对等的水平。我曾经见过一份非管理岗的设计师简历，工作经验已经 10 年以上了，但作品的水平还停留在工作 2-3 年时的水平，最新的作品跟她 7-8 年前的设计产出没有什么大的区别。这就是明显的经验与能力不够匹配，说明没有在工作中做自我提升，学习的主动性太弱，那么未来的可塑性会被认为是比较差的。

功夫更在平时，平时一定要多花一些时间做好提升，每段时间回顾下是否有学到新的知识，自己的设计能力有没有提高。当然，如果当前工作时间不长，可以多投一些非高级的岗位，提高成功概率。

问题 6：细节处理明显不当 作品的细节处理在一定程度上反映着设计师的真实水平，千万不要忽视作品中的细节，一定要仔细。细节处理得不好，会让面试官觉得你作为视觉设计师的基本素养：对美感的极致追求还不够。

有些人的项目展示中存在明显的信息层级和设计细节处理不当的问题。作品的细节，交互逻辑要经得起推敲，放到作品集中的作品，自己一定要仔细推敲，不要觉得面试官不会看，失败往往就在细节处。担心作品细节不易被看到，可以在作品中单独把设计亮点，细节单独放大展示。

我记得我曾经面试腾讯的时候，PDF 最边缘有 1px 的像素白边，面试官都给我提醒了，说这是细节问题，关键他还是一个交互，印象深刻。所以，对于自己作品中的尤其是一些容易出现问题的地方，比如图标设计，界面对齐问题，排版问题等等，一定要仔细校对，确保不会出现低级问题。从我看过的作品集来说，你把这些基础问题优化好了，作品集质量就能提升一个档次了。

问题 7：观点的总结提炼能力不够 现在很多人做作品集知道了要加分析，但像前面说的只学会了一半。知道分析，却不懂如何呈现自己的观点，文字提炼能力不够。面试官会觉得你对方法论的总结和提炼能力不够，导致个人瓶颈可能比较低。

会发现有些人的作品集中有大篇幅的文字说明，甚至都把视觉作品淹没其中，这是非常不可取的。

人都喜欢看图胜过文字，面试官也是人，何况还都那么忙。所以这就要求：

1）作品思路的文案要足够精简，避免暴露自己的总结能力差。建议多用关键词，避免大白话，切忌长篇大论

2）能用图说明的就尽量避免用文字

3）注意文字的排版，尽量不要干扰作品的展示

问题 8：作品没有记忆点 作品没有记忆点，跟其他作品集太过雷同。现在按套路出牌的作品集太多，尤其是 UI 设计师的作品集，简直就像是流水线出来的一样。越是在这样的环境，越要有自己的亮点，能让面试官记住你就成功了一半。

努力让自己的作品集有亮点，当然这不是说你的作品集在展示逻辑上一定要是一个另类，而是说要有自己的特点。比如你可以展示自己的独特经历，标签，项目，一些亮点设计等等，并在呈现过程中凸显出来。在作品展示上，也可以有一些自己独特的排版、优秀的视觉作品，设计的广度等等都可能会让人印象深刻。

找到属于自己的标签，比如我的标签有开发转设计拥有技术落地能力、文案写作能力、接触的领域多、能坚持、有探索精神，良好的自学能力。这些标签我会放到作品集开头的自我介绍那里，当然在后面的作品集内容中最好有具体的案例可以佐证这些标签。

问题 9：放弃做笔试题 现在设计岗社招的话，基本上都需要做题，除非你特别优秀或者特别资深。做题的目的在于考察你在既定的条件下，处理实际需求的能力。这些测试题的内容，大概率就是在招的这个岗位日常需要做的事情，所以一定要认真对待。

举个我当时做题的思路供大家参考。我当时面试腾讯做的题是一道 UI 改版的题目，给了 4 天时间对 APP 的首页和一个菜单页进行改版。最后的产出我是给到了一个大概 14 页的设计提案 pdf。这份提案包括了我的设计思路，改版过程，重点改动的内容展示，图标设计，界面设计以及做了整体的设计包装展示等等，提案的内容绝大多数都是图为主，思路基本上以关键词呈现，总字我记得还不到 100 字。

做题就是要向不了解你的人充分展示你解决问题的能力，如何分析，做事的方法流程，以及最后的设计产出。对于设计岗来说，最后的设计结果是非常重要的，千万不要前面一通分析，最后的视觉输出却做的比较差，或者跟前面的分析匹配不上，都会造成面试题不通过。

当然，也有遇到坚决不做题的设计师，如果有给到做题的要求却不做的话，那基本上是没后续的。如果你特别想来这个岗位的话，建议还是做下，当做练习也是不错的。

问题 10：面试题提案设计突破不够大 面试题在做的时候，一定要胆大心细。

如果是视觉设计师的题，一个优秀的设计提案至少有 2 个标准：

1）设计执行力强。提案中作品的呈现，视觉表现力强，能让人眼前一亮。

2）有自己的独立思考。一定要有所突破，不要把自己框死在已有的交互或者视觉中。

在做完设计提案后，要反复思考上面 2 个问题，你的设计有亮点吗？有没有自己特别满意的地方，有没有跳出原来产品的条条框框。至少要让自己觉得惊喜了，你才有戏。

我记得我自己曾经做题的时候，第一版做下来基本上就是重设计了图标，布局什么的做了点优化。做完后觉得没有太多惊喜，心里觉得这样肯定不行，因为这些细节处对方说不定早就内部探讨过了，不会只有我能知道。之所以不是最终线上版，多半就是被舍弃的调整。

做改版测试题，步子一定要迈得大一些。后面做第二版的时候做了大的调整，基本上改完后跟线上效果完全不一样了，而且把能做的视觉效果拉满。配图精挑细选，banner 也做了专门的设计，图标也结合品牌做了大的优化，在一些细节处也做了小惊喜的设计，等等。最终自己比较满意了才提交过去，结果就是笔试题顺利过了。笔试题过了，基本上半只脚就踏进了门，后面的面试不出大问题的话，一般都能过。

问题 11：工作地点不匹配 有些人投简历的时候不看工作地点，最后面试发现 base 地不方便协调或者成本太高，导致简历挂掉。最好是找自己能去的工作地。

很多人可能不会想到这一条也会成为不通过的理由之一吧？其实还蛮多的。我建议是，如果你对工作地无所谓的话，可以在简历中就提到说，自己可接受城市迁移。比如你现在在北京，如果机会在深圳，你也可以很自由地过来这边。当然，如果你真的介意工作地的话，就干脆不要投异地的岗位了。

不小心就写了快 5000 字，篇幅有限，就不再增加大家的阅读负担了。本来还想分享大厂面试官在看作品集时会最看重你的哪些特质，就放到下一篇再聊，敬请期待吧！大家点赞转发越多，文章更新就越快哦~

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

「页面还原度」即开发工程师对设计稿的还原程度，页面还原度的高低，直接决定从产品需求到设计实现的程度是否被准确有效的表达。

拓展阅读

如何做好设计还原？从这5个方面入手！ 作为设计师，一个老生常谈的话题就是还原度检查。

阅读文章 >

在 B 端产品中，往往更加重视产品功能的实现，页面还原度并不被重视；但是功能实现和页面还原并不是两个孤立的问题，页面还原度低，同样会影响用户的可用性和易用性，损失的是产品最终的输出价值和用户体验，因此，B 端产品团队同样需要重视页面还原度的实现。

大部分开发团队通过 UI 走查环节解决页面还原度低的问题，即在测试阶段由 UI 设计师 对产品的还原度进行走查和标注，开发工程师对问题进行修复。然而，只在 UI 走查环节解决页面还原度问题，有以下缺陷：

开发周期有限，页面还原度问题最终服从于产品功能的实现，修复时间受制于迭代周期被无限推迟，随着问题的累积，造成开发工作量无限期增加的恶性循环 全局性的设计问题没有得到及时修复，无形中增加了设计每次版本迭代中 UI 走查的工作量 线上页面是设计工作的执行表现层，在走查环节进行校正，设计的工作质量难以评估和量化 因此，本文结合工作实践以及与产品、前端、测试的深度沟通，从设计全链路探究产品还原度低的原因，并结合工作实践总结提升页面还原度的解决方案。

页面实现还原度低的原因 1. 设计规范和设计组件库不一致

（1）使用不同设计系统

以 Ant Design 和 Arco Design 表单组件为例，两个设计系统的色值、间距、交互效果等都各有差异，如果设计与前端使用不同的组件库，设计稿和线上页面必然大相径庭

（2）使用同一设计系统

前端工程师在开发过程中不会对所有设计元素逐一查看，更不会对比设计稿规范与设计系统默认规范是否一致，如果设计师对默认的设计规范作出调整且没有在设计稿中作出标注，同样会造成设计稿和线上页面的差异

2. 前端和设计页面实现的思考路径不同 UI 设计师在静态固定宽度的页面进行设计，关注的是如何把产品需求转化为设计语言，将设计元素科学合理的布局与排版。

前端工程师需要完成的是如何在不同分辨率的情况下，最大可能对设计稿进行还原：

以上案例展示了设计师和前端工程师对同一页面不同的实现方式，在线上页面宽度与设计稿一致的情况下，表单之间的横向间距都是 65px。但是，如果页面缩放或者在不同分辨率屏幕下展示，设计认为一行两列表单的间距依然是 65px；而按照前端工程师的实现方式，不同分辨率下单个栅格的宽度是变化的，那么表单之间的横向间距必然会发生动态变化。

3. 设计走查 缺乏系统、动态、可追踪机制

常规的设计走查流程，设计师对线上页面进行截图和标注，最后将所有标注截图汇总给前端工程师。这样的走查流程有以下问题：

走查问题全部使用描述文字，问题无法进行分类分级管理 工作完成状态无法反馈，工作量难以追踪，设计师需要根据前端反馈结果对所有走查问题进行二次检查 如何提升页面实现还原度 1. 建立一致的设计规范和组件库 建立 B 端设计组件库和设计规范，使用范围不应仅局限于设计团队内部，应达成整个团队尤其是前端工程师和设计师的设计规范和组件库的一致，从而实现设计稿到线上页面输出统一的设计语言，从根本提升设计质量和还原度。但是，统一和前端的设计规范与组件库并非易事，需要将产品的发展阶段、前端团队开发团队工作习惯、设计历史原因等因素进行综合考量，笔者结合工作实践，设计师可以从以下方面提升与前端团队的一致性。

（1）设计组件的选择

设计师在接收到设计需求后，需要首先和对接的前端工程师和产品经理确认并考虑以下问题：

是否有统一的设计组件库，如果没有，此次版本是否需要建立； 当前产品的设计组件库是什么，组件库是否可以覆盖当前产品的大部分需求；如果答案为是，建议继续沿用当前的设计组件库； 当前版本是否有更换设计组件库的需求，如果需要，更换何种组件库。 在前面的案例中，我们看到使用不同的第三方组件库，页面差异很大，因此，设计师在开始初始，需要尽量和前端（或者前端和设计师）使用一致的设计组件库

（2）设计组件库更新机制

B 端产品业务复杂，大部分第三方设计组件库并不能覆盖全部的设计需求，设计师依然需要创建符合产品需求的设计组件；此外，设计师会对现有的第三方组件库根据产品需要进行微调；设计师对设计组件库的改造和更新，同样需要团队成员特别是设计师和前端工程师评审通过，保持前端工程师和设计师组件一致

（3）设计师使用组件保持克制

设计师需要充分考虑产品的可用性和用户的学习成本，在组件的使用过程中保持克制，组件的使用需要定义明确的规则和范围，如果仅仅因为“好看”而使用不同风格的设计组件，会极大增加开发团队的学习成本，造成团队成员使用组件的混乱和困惑。

（4）设计规范

制作设计规范的目的是为了统一设计内部以及与前端工程师的设计规范，提升团队的协作效率。前端工程师根据设计规范建立公共组件库，提升前端组件复用率，减少设计与前端的对接成本，提升工作效率。测试工程师根据设计规范建立稳定、一致的测试用例，提高测试工作效率。因此在设计规范在制定和更新过程中，需要与开发、测试充分沟通与协作，形成团队稳定、一致的规范文档，从根本上提升协作效率，高效完成界面的开发和验收。

2. 设计师需要了解前端知识 设计师在设计过程中需要代入前端思维开展设计工作，虽然设计师最终交付的是一个静态尺寸的设计稿，但是在设计各个阶段，都需要充分考虑不同排版和设计元素排列在不同分辨率设备中的显示效果，理解前端实现页面的基本逻辑和适配规则，将设计语言转化为前端规则，最大程度实现页面的还原。

制定设计规范，与前端同步模版页面的设计规范和规则，例如栅格规范，适配规则 在设计过程中，考虑设计元素排版与布局在不同分辨率的展示效果，与前端沟通，采用何种方式最大程度实现不同分辨率下的页面高度还原 设计走查过程中，理解前端的实现方式，分析页面实现的合理性，与前端工程师解决走查问题的合理解决方案。 如果有设计同学的设计工具是 Figma，强烈建议大家学习 Figma 的自动布局和智能组件制作功能，Figma 自动布局的实现方式和前端实现逻辑是高度一致，使用自动布局思维进行设计，可以进一步提升和前端的沟通效率。

拓展阅读

Config 2022 落幕！这15项新功能让 Figma 更简单好用了 大家好，我是和你们聊设计的花生~ 2022 年 Config 已于 2022 年 5 月 10 日-11 日在旧金山举行，这场由 Figma 召开的线上设计大会，邀请了来自全球 20 多个国家的 100 多位相关行业从业者发表演讲，与全球用户交流分享设计经验和最新的理念。

阅读文章 >

3. 设计思想宣讲 在设计走查工作中，经常会遇到一些这样的情况，前端工程师不理解为什么设计师对一个字体的字号、字重、不同元素的间距反复强调，设计稿和线上页面不仔细查看，并不能看出区别，为何设计师对于这些像素级的差异要“锱铢必较”？诸如此类的问题，其根本原因在于团队成员并不理解设计师的工作，停留于设计师就是把设计组件摆的“好看”的认知误区。

设计师的本质工作是为了解决问题，使用不同的设计方法，背后隐含的是设计师对产品不同信息的处理和传达，因此，设计师有必要和团队成员主动沟通，解释设计师在设计工作中对不同信息的处理逻辑，设计师如何将文字需求转化为视觉语言准确传达给用户。不同专业对同一事物的关注度和敏感度不同，例如需求评审过程中，设计关注排版，后端关注数据，测试关注异常情况。因此，对同一页面感知度团队成员差异巨大，这样的结果可能会导致设计师对信息的传达在页面上线后大打折扣，因此，设计师必须和团队成员，尤其是前端工程师分享在设计师在设计过程中，是如何将需求内容转化为视觉语言传达给用户的。

4. 科学合理的设计走查流程 上文笔者介绍了常规设计走查流程带来的诸多问题，经过不断地实践和探索，对设计走查过程不断优化，形成了一套更加高效的的设计走查流程

（1）设计工具的选择

走查工具

让设计稿还原度更高！两款高手都在用的B端设计走查神器 B 端设计师在工作当中一定会遇到这样的情况：因为上线的项目与设计稿不符而与前端进行争论、为了知道开发颜色使用是否准确只有“截图”，然后在设计软件当中“吸色”来进行判断。

阅读文章 >

工欲善其事，必先利其器。选择合适的设计工具可以极大的提高工作效率。在这里为大家推荐两款优秀的设计走查工具；

尺寸查看工具 CSS Peeper

网站链接： https://csspeeper.com/

设计师在设计走查过程中往往需要“像素眼”对线上的每一个设计元素属性、间距进行核对，甚至需要右键检查元素查看前端的数值是否能和设计稿一致。使用 CSS Peeper 神器后，设计师可以直接点击设计元素查看 CSS 样式，还可以看到 padding、margin 值，大幅度提升设计师设计走查的工作效率

截图+标注工具 xnip

过去的设计走查标注过程，设计师截图后，需要将截图拖入设计软件进行标注和说明，这个过程有几个问题：

设计师和前端工程师需要修改颜色、字体，使用箭头标注间距，增加设计师工作量 如果一张截图问题较多，标注的内容互相交叉，会增加前端工程师的查看效率，增加沟通成本 使用支持截图+标注的工具，例如 xnip,支持快框选和文字输入，标注功能支持自动排序和排版，提升工作效率，降低沟通成本

线上协作表格

大家在设计走查沟通中，是否遇到这样的问题

① 使用截图标注交付截图文件

优点：问题可视化，方便前端快速定位问题

缺点：

设计单方面反馈前端，需要再次查看线上页面进行还原检查 前端工程师查看都是具体的标注问题，难以确定解决的优先级，可能导致高风险问题由于交付时间的原因而没有及时得到解决 设计师和前端工程师的工作难以被量化 ② 使用文档记录问题

优点：

可以对设计走查问题分类分级管理 方便对设计问题进行追踪和管理 设计师工作可以被量化 缺点：问题难以可视化，增加沟通成本

基于以上在设计走查过程中遇到的问题，我们使用在线表格类工具，对所有设计走查问题分类、分级，支持团队成员对所有走查问题实时内容可见、可编辑，结合 xnip 工具，对需要截图标注的问题作为补充。

不同走查问题分类管理

功能缺陷问题提交测试工程师 设计规范问题反馈前端工程师 交互优化建议问题由设计师做记录，建立设计优化需求 问题解决优先级分级管理

「重要」问题优先处理 「一般」问题可非此次功能发布前处理 （2）设计走查标准

设计走查原则

设计走查的基本原则，即线上实现页面必须达成的标准

一致性:信息展示一致;相似的功能和任务，用户操作交互路径一致 可用性：页面间信息层级清晰，信息视觉流流畅，重点明确 准确性：基础控件使用正确；内容展示正确，不存在错别字；信息架构表达准确 完整性：操作路径完整；功能实现完整 设计走查颗粒度

设计走查的颗粒度，一般来自于产品开发目标和开发周期。一般情况下，如果产品开发周期紧迫，产品目标是优先实现功能交付，那么设计师可以将功能实现的相关问题标注为高优先级问题优先解决；如果产品的目标是 UI 重构或者体验优化，那么影响产品界面还原和体验优化的问题也应提升为高优先级。

设计走查沟通

设计师对走查问题的描述，应该描述准确。

问题定位-问题发生的位置和状态； 问题是什么-功能缺失？组件使用错误？间距错误？ 问题如何解决； 设计师在走查问题中，尽量直接描述问题，减少使用“请查看设计稿”这样的表述，降低设计师和前端工程师的沟通成本。

本次分享到这里就结束了，希望可以对大家有所帮助，我们下期再见