最近看到很多美妆博主都在出什么红黑榜，其实就是在说哪些产品是有问题，不推荐大家使用，有哪些东西是可以安利的好物。 想着 B 端设计当中，也会存在这一情况...

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

想着 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...

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

自 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...

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

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

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

编辑导语：6月23日，腾讯视频宣布推出《梦华录》大结局点映礼，这一行为引起网友热议。对于长视频平台来说，推出点映到底是好是坏？需要考虑哪些因素？一起来看一下吧。 《梦华录》这部现象级国产佳作，豆瓣分一度飙升至8.8分，牢牢“焊”在微博热搜上。但近期的一次热搜，

编辑导语：6月23日，腾讯视频宣布推出《梦华录》大结局点映礼，这一行为引起网友热议。对于长视频平台来说，推出点映到底是好是坏？需要考虑哪些因素？一起来看一下吧。

《梦华录》这部现象级国产佳作，豆瓣分一度飙升至8.8分，牢牢“焊”在微博热搜上。但近期的一次热搜，却是鲜花、鸡蛋一起扑来。

6月23日，腾讯视频宣布推出《梦华录》大结局点映礼。根据规则，VIP会员在购买价值18元的“点映礼直播（含回放）观看券”之后，不仅能在6月26日观看点映直播，还能在主创团队直播陪伴下，提前收看7月3日上线的大结局。

喜迎者有之——点映官宣后，“录人们”喜不自胜，奔走相告，“求加更”的夙愿终于得偿。

吐槽者不少——例如质疑腾讯视频急于搞钱，“鹅，你没有心”，甚至有人声称“已举报超前点播死活复燃”。

截至6月24日下午，《梦华录》大结局点映礼的预约观众超过20万人。有视频行业人士告诉《财经故事荟》，“通常来说，从预约到最后付费的转化率，大概也就10%吧，按照18元的最低礼包价估算，目前的点映收入大概在40万左右。”

假定点映收入在点映礼之前翻倍式增长，来到100万元，才勉强达到《梦华录》制作成本的千分之三，再加上广告收入至多能冲抵两成制作成本，这样一部品质、口碑、人气俱佳的国产精品，大概率是在赔老本赚吆喝。

而有限的盈利模式创新尝试，又遭到部分网友的讨伐，导致长视频平台的生存空间愈发逼仄。

“做爆款亏钱，再想挣点钱又被举报，这种业态正常吗？”一位影视圈人士对《财经故事荟》反问道。

01 貌似“赢麻了”，可能亏惨了 《梦华录》上线即火，堪称内娱古偶天花板，上线15小时播放量破2亿，上线7天破十亿，截至6月22日，《梦华录》播放量已破25亿次。

这样一部貌似“赢麻了”的佳作，到底赚不赚钱？

先看成本端。

一位影视制作人向《财经故事荟》断定， “要达到这个（《梦华录》）水准，整体成本没有两三亿，拿不下来，还要紧着手缝花”。

他解释说，两三亿元的成本看似不低，但也在合理区间。2017年的热播大剧《孤芳不自赏》、《择天记》、《三生三世十里桃花》版权费，均超过6亿元。

正是由于版权费用、制作成本高居不下，长视频平台长期深陷亏损。

以爱奇艺为例，降本增效之下，今年第一季度，其内容成本依然高达45亿，在总成本中占比高达75%。

作为腾讯视频打造的高成本爆款，《梦华录》能否回本呢？答案是否定的。

《梦华录》收益大概可以拆解为三块： 一是会员费，二是广告收入，三就是类似点映等增值服务收入了。

先来看看会员费，长视频平台的会员规模整体已经见顶，类似《梦华录》等爆款对于平台的会员规模而言，更多是“防流失”，而非“谋新增”。

再来看广告，据Tech星球不完全统计，《梦华录》广告主已有30多个。甚至有广告代理商声称，“某饮品品牌预算500万，想要中插贴片，还在等排期”。

打眼一看，《梦华录》似乎仅仅靠广告费，就能赚翻天，其实不然。

很多网剧的广告招商资源，在剧集播放之前，就已消耗殆尽。彼时，没有广告主能绝对断定剧集上映后，到底是扑街还是真香。因此，广告定价必然也较理性。

这也就不难理解，上述饮品品牌临时掏出500万，腾讯视频也不敢贸然接收，因为未必有位置可供插入广告。

目前长视频的广告分为贴片广告、中插、tips等多元形式，但广告过多，必然招致用户反感，因此，视频平台也不敢任性。

另有广告行业人士告诉《财经故事荟》，“类似《梦华录》这样的爆款网剧，一般广告收益五六千万元就到顶了，很难有多大的上行空间”。

长视频广告的整体收缩也是大势所趋。QuestMobile报告显示，2022年Q1，在线视频广告份额从2019年的5.8%缩减至4.3%。

最后看点映收入，如前所述，预计到26日活动截止，《梦华录》点映带来的整体收入，大概在百万元量级。

盘完了成本收益后，上述影视制作人告诉《财经故事荟》，“ 《梦华录》的价值，一为腾讯视频赢了口碑，二为取悦存量会员。但它还是个赔钱买卖，而且赔得还不少。”

口碑爆款，亏损严重，或许是中国高成本大制作网剧的宿命。

02 点映是长视频平台的艰难平衡 腾讯视频为何冒着争议风险，推出点映？这恐怕源于用户催更。

数据显示，截至6月21日，关于用户希望《梦华录》加更/超前点播事件，各平台共计传播传播12728篇，其中仅微博就有11156篇。

加更是打破既定的播放周期，提前播放相关剧情——乍看起来，似乎对于那些急切等待结局的观众而言，是简单干脆的宠粉之举。

但平台应该也有难言之隐。

鲜为人知的是，剧集的播出周期，并非平台独断而定，通常是平台、内容方、广告商等集体协商的结果。 一旦剧集大面积提前更新，可能所有合同都要重新签订，各种宣传物料制作、广告植入节奏，也将彻底会打乱。

“如果非常仓促加更，不去协调好各方，可能就会面临着违约和索赔”，此前，有长视频人士向《财经故事荟》解释，“比如广告商，他们的广告植入档期，通常要经过内部的层层审批，还要多部门打配合仗，不能随意更改”。

因此，针对主流的会员和非会员，保持聚集的播放周期不变，就可以对广告主等签约金主有所交代。针对部分“心急”的观众，平台通过提前点播满足其需求。

这是一种平衡之举，平台既满足了用户的加更诉求，同时谨遵广告等商业合同的规定。

即便如此，腾讯视频在设计《梦华录》大结局点映礼时也显得小心翼翼，点映礼活动主要内容不仅有主创明星陪看剧，观众演员直接互动等，还赠送提前解锁剧情的权限。

整体而言，相对讨伐“超前点播”的声音，大部分用户更为理性。在自媒体大V阑夕设置的投票中，仅有29%的用户不怀念超前点播，还有71%的用户，期待超前点播、“内容好，可以有”。

在《梦华录》播放时，不少用户在弹幕上呼吁“超前点播”，“我出100元，超前点播”，“等不及了，我想超前点播”，“超前点播吧，我不差钱”、“来个万人请愿让腾讯超前点播吧”……

当然，类似奈飞等“财大气粗”的国外玩家，可能不会有上述“两难”纠结。

一是，国外长视频平台观众付费意识强，奈飞的会员规模已经超过2亿，比肩国内的爱优腾之和。

二是，爱优腾在涨价后，会员价格为22～30元/月，而且，不少会员付费，还是通过其他优惠联名活动所得，价格更低。奈飞的会员费则为9.99～19.99美元/月，至少是爱优腾的两倍以上。

甚至东南亚国家如越南、泰国视频平台的会员定价，都能轻松碾压爱优腾。简单粗暴的“会员数X会员费”，对奈飞营收大盘的贡献高达99%，尽管奈飞也面临会员订阅数下滑等问题，但它依旧有底气对广告金主说不。

但在中国，爱优腾恐怕就没有这个本钱了。

03 别让“烂柠檬效应”毁掉影视行业 推出点映服务，本质上是长视频对分级服务的尝试。

一位长视频平台人士曾做过粗略估计，“长视频平台的一千个用户当中，通常只有五到十个人左右愿意开超点，而一刀切拒绝超前点播，就会导致那些少数派要委曲求全”。

毕竟，长视频平台，动辄上亿观众，诉求各异，也很难找到“万全之策”，服务分层化已是常态趋势。

以奈飞为例，目前其对不同会员账号，分为基本、标准、高级三个等级，其中，高级会员的定价为19.99美元/月，是基本会员定价的两倍左右。

就连B站、快抖等过去免费的平台，也开始尝试了分层的付费服务。

6月21日，B站UP主“勾手老大爷邓肯”作为B站UGC视频付费的首个试水者，为其最新栏目《邓肯解说世界十大未解之谜/灵异事件》定下了30元的价格。

相较长视频而言，30元着实不算便宜。微短剧、中视频的制作成本、内容水准比起来标准制作的网剧而言，都不及九牛一毛，而且可能存在版权风险。

而平台为长视频用户提供分级服务的前提，是精准切分用户类型——

价格敏感用户，无需缴纳任何会员费，也可观看免费内容，不过要容忍广告叨扰。《梦华录》就推出了非会员服务，只是播放节奏相对滞后；

体验敏感型用户，精力有限，强调观感，愿意成为会员，跳过广告；

最后是少数剧集铁粉，付费提前解锁剧集，甚至愿意购买剧集的周边产品以及其他增值服务。

道理已然清晰，包括点映在内等增值服务，应当存在于科学合理的服务分级体系之中。 需要考量的因素，无外乎——

1）新的增值服务，是否伤害了老用户的权益。

归根结底，不论是点映还是超前点播，并没伤害存量观众的原有收益，而是额外打造一个增值服务包。如同高铁设有二等座、一等座和商务座，二等座乘客可以加钱升级为一等座，这并未损害二等座乘客的利益。

2）新的增值服务定价是否合理，是否存在多元获取渠道。

对此，自媒体大V六神磊磊的公众号的投票结果显示，22%的用户急于加更点映，不在意具体金额，80%的用户愿意支付的点映费用在10-30元区间。

除真金白银的付费之外，平台也许可以考量，设计积分兑换等其他增值服务获取渠道。航空行业早就对此驾轻就熟，里程积分可以换赠品，也能换机票等等。

视频平台不妨借鉴一二。

3）是否杜绝了各种次生风险。

针对《梦华录》此次点映，有些观众担心会导致盗版泄漏等。平台应该做好防范措施，并对外公开说明，以此打消观众担心等等。

对平台而言，分级服务本质上是“开源尝试”，在暗黑潮湿的亏损长夜中，寻求一缕光明，仅此而已。

对用户而言，平台的持续亏损不是好事儿——钱多未必能产出好内容，但钱少一定无法持续产出好内容。

在合法合规的情况下，还不允许长视频平台开展商业模式创新，只能出现经济学中的“烂柠檬效应”——好内容越来越少，垃圾内容占据主流。

这样畸形的内容生态，于平台，于观众，于上游，都是灾难。

尤其是疫情这两年，影视制作行业的日子更是难上加难，数据显示，2020年，超过5000家影视相关公司倒闭，2021年又有近4000家影视公司破产。

“这是正循环关系，平台营收上来了，影视公司也能多分到钱，内容质量也会上来，否则就是一毁俱毁”， 上述影视制作人告诉《财经故事荟》，“观众早晚会明白这一点”。

 

采写：陈纪英

来源公众号：财经故事荟（ID：cjgshui），资深围观，谨慎吐槽，横跨财经、科技的原创深度解读。

本文由人人都是产品经理合作媒体 @财经故事荟 授权发布，未经许可，禁止转载。

题图来自 Unsplash，基于 CC0 协议

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

{{{path> 赞赏

编辑导语：B端产品的展现形式包含了很多类型，标签页、弹窗、悬浮层等等。本篇文章中作者分享了如何正确的呈现B端产品，让产品的交互体验更加丝滑。感兴趣的小伙伴们快来一起看看吧，希望对你有所帮助。 在B端产品操作中，需要高频率地打开各类链接和按钮，如果点击后需要展示

编辑导语：B端产品的展现形式包含了很多类型，标签页、弹窗、悬浮层等等。本篇文章中作者分享了如何正确的呈现B端产品，让产品的交互体验更加丝滑。感兴趣的小伙伴们快来一起看看吧，希望对你有所帮助。

在B端产品操作中，需要高频率地打开各类链接和按钮，如果点击后需要展示新的内容，那么展现形式就包含了很多种类型，标签页、新页面、悬浮层、弹窗、抽屉等等。

在面对数量庞大的B端页面、组件、交互场景下，应该选择哪种展示形式就变成了一个棘手的问题。

本篇分享就将集中在解决如何选择正确的呈现形式上，让产品的交互体验更顺滑。

一、内容的载体形式 网页是一种可视化的UI界面，也是一种内容载体，它是浏览器访问网站后显示的主要对象，也是浏览器展示内容中层级最高的单位。

在同一个网站中，如果我们想要访问其它网页，就需要点击按钮或链接触发，这时候，打开新网页的方式就有两种，在新窗口/标签中打开（_blank）或者在本窗口/标签中打开（_self）。

不管是哪种，本质上都需要浏览器重新加载新的页面。对于一般的企业官网、新闻网站来说，这种加载的模式没有太大的问题，因为操作频次相对适中，用户中间会有比较长的时间停顿下来查看页面的内容信息。

而B端项目则不同，虽然也有不少查看页面信息的需求，但是包含了更多需要短平快完成操作目标的使用场景，比如修改个标题，更改商品价格，添加分类字段等。

如果所有高频操作的场景，都要重新加载页面，使用起来的 “顿挫感” 是非常强的，降低使用体验。

早期的网站加载内容必须刷新页面，所以顿挫感是难以解决的，只能想办法减少跳转流程来提升用户体验。

随着网页技术的发展，异步处理（AJAX数据交换方式）技术的应用，让网页的内容可以通过不刷新或加载新网页的形式加载和显示。

简单解释，就是早期的网页加载完成以后就是 “静止” 的，里面所有内容是固定的（不是HTML的静态）。而异步处理，就是让页面中的指定模块处于 “运动” 的状态，客户端可以在不重载网页的情况下只加载和更新这个模块的内容。

比如下面的案例，设置不同的条件选项，在过去的网页中只能重载页面更新，而使用异步处理就可以直接和服务器请求数据刷新这个图表模块，而不用重载整个页面。

所以，在B端项目中，我们不再是只有重载网页一个选项，而有了其它的选择，如下图所示。

其中，网页展示作为一个基础展示对象，我就不多做介绍了。我会通过分别介绍其它几个内容的载体，帮助大家区分它们和重载页面有何不同，以及如何正确选择内容加载形式。

二、浮层的使用解析 首先介绍浮层，它是我对通过悬浮在页面基础内容之上的内容层的统称。例如各类气泡、提示框、下拉菜单，都是浮层的表现形式。

浮层是比较底层的形式，其展示内的容完全不需要使用一个新的页面，且 和触发的元素有较强的视觉联系 （对比弹窗）。

浮层并不是由内容的多和少决定的，复杂的浮层可以包含非常多的交互选项和内容信息，导致我们很容易和下方解释的弹窗搞混。

比如客户端软件常见的隐藏式侧边栏，搜索栏中展开的复杂面板，都是浮层的一种而不是弹窗。

浮层最大的特点，源自它的位置定义逻辑，它会和触发它的元素具有非常紧密的位置关系，而不是像弹窗一样无差别显示在界面或浏览器视图的固定区域。

如果我们想要显示内容，完全没到用一个新页面展示的地步（如搜索建议面板），且和触发它的控件有较强的联系，就可以考虑使用浮层来展示。

三、弹窗的使用解析 弹窗，也是一种悬浮在基础内容之上的内容层，它和浮层的不同之处，就在于弹窗通常是居中固定的显示区域，和触发它的元素没有什么位置联系。并且，弹窗可以包含的内容量级也是高于浮层的。基础的弹窗包含强提示弹窗，或类似注册登录这种表单弹窗。

而高级的弹窗，则类似下方案例，约等于打开一个独立的网页。

之所以使用这些高级弹窗作为页面载体，原因就是对原触发页面的使用和关注并没有结束，需要支持快速关闭当前的窗口并返回原来的页面中去。

比如在一个非常长的列表中，你下滑了几十页的高度，肯定不想放弃掉当前的页面位置，所以Behance或者花瓣等应用，都采用窗口模式加载新页面。

或者类似一个列表页面中需要大量创建新的数据，这些数据又不复杂。于是就通过弹窗表单的形式，快速完成创建并在原页面中再次点击 “新增” 按钮。

高级的弹窗使用除了保持原页面位置、高频操作等防止加载的原因之外，还有个更重要的特征，就是 强制吸引用户的注意力到窗口上 。

因为弹窗主要以模态 （Modal，后方有黑色遮罩）居中显示，通过深色蒙版进行前后隔断，凸显弹窗区域，意味着我们 强制让用户关注眼前的信息和任务 。

如果我们想要显示的内容，需要保留原页面状态，减少页面跳转数量，又需求用户强行关注，就可以使用这种模式展示。

四、抽屉的使用解析 最后，就是最难选择，也最容易和其它组件搞混的抽屉了。

抽屉本身的特征包含悬浮属性，覆盖在原页面之上。而我们常见的侧边栏、侧边菜单并不能和抽屉画上等号，因为他们会占用画布的实际显示区域，和原有内容同层。

比如下方案例中，Jira左侧导航（不分左右）可以隐藏收入，页面内容变大，这是侧边栏。而点击列表选项，右侧弹窗的窗口覆盖原有页面，才是抽屉。

和高级的弹窗类似，抽屉也可以当成一个独立的页面展示信息。但它和弹窗不同的是，抽屉通常是从页面的右侧展开，没有遮挡左侧的空间。它的主要特征是 还需要在原页面进行交互。

比如Teambition案例中的列表，我们每开一个抽屉都还可以直接点击原列表的其它选项切换下一个抽屉，省掉关闭步骤或者原页面被遮挡的情况。

它比较适合应用在表格/列表环境中，作为表格/列表内容的详情页形式展开，这样用户可以在一个页面中快速查看不同列表的具体信息或编辑。并且，表格/列表本身的特征会将标题放在最左侧，也方便抽屉的切换。

也因为这种特性， 抽屉不太需要使用模态和遮罩将左侧内容遮挡掉 。如果需要通过遮挡来吸引用户注意力，那么这种情况往往更适合使用弹窗。

所以，如果不想通过新页面打开的列表详情内容，且不是强制要求用户聚焦的任务，就可以使用抽屉的形式展现。

五、结尾 以上就是几种基本的内容展现形式说明，时间关系还有后半部分关于如何站在系统框架级的角度使用内容载体的分享，我会留在下次分享。

如果有关于这部分的实际项目疑问，也可以在下方留言。

我们下篇再见～

 

作者：酸梅干超人；公众号：超人的电话亭

本文由 @超人的电话亭 原创发布于人人都是产品经理。未经许可，禁止转载。

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