此次线上分享，momo在核心用户群进行直播分享，且由UI中国Q群管理员在各个会员交流群同步转播。感谢momo的分享，听课的同学纷纷表示获益匪浅，同时也非常感谢此次参与转播的几位管理员（SAGM、Satchcin、吉庆、墨羽、蛋蛋等人）的支持。在分享前，我们通过活动话题帖收集了一些问题，momo也抽选了几个比较典型的问题进行解答。

以下为本次分享的文字实录，部分有修改：

一、贯穿整体设计的理念——层级与亲密性

在视觉设计中，设计师经常把一个理念丢掉：层级和亲密性。

事实上，层级和亲密性对于视觉设计来说至关重要。因为使用清晰的视觉层级手法去表现，会给用户带来明确的信息框架，能够通过视觉差异将信息分类。

打个比喻，我们所设计的某一个或一套界面，将它们拟人化后，发现它们互相都是有关系的。

第一种关系：血缘关系。

血缘关系是什么？将信息拟人化，就是“爷爷 > 爸爸 > 儿子”这种关系。信息本身的内容是有一致属性，却又有点不同，比如信息提示。

信息提示可以分为：公告-提示-警示-禁止。

血缘关系里发现他们都是提示信息，但是层级不同，所以视觉的展现力度也会不同。

如上图，将不同的层级信息相应地使用不同的颜色来展现：公告-蓝色、提示-绿色、警示-橙色、禁止-红色。

第二种关系：上下级关系。

上下级关系是什么？即“公司 > 部门 > 小组”这种关系。信息本身的内容是包含属性的。比如专题，会有个聚合页如同部门，landingpage如同小组。

第三种关系：邻里关系。

邻里关系是什么？就是地理位置很近，但是又没啥关系的信息。比如在pc 平台上的一些首页界面中，第一屏以下的一些内容。如女装，食品，电器等这类频道入口。再深入一些发现，这些入口内部的信息包含着血缘关系和上下级关系。

当这些关系得到梳理了以后，层级关系和亲密性也非常清晰的梳理出来了。

根据格式塔（Gestalt）心理学：当对象离得太近的时候，人们的主观意识会认为它们是相关的。这个心理学可以帮助我们对信息内容的排布进行准确的设计。

如上图所示2个设计稿，或许大家在一些网站上看到过类似的设计展示。这2张设计稿，所表达的就是界面中的层级。看下面的那张图，同学们可能会疑惑，问这个层级和下方图的对比不同，下方图是：背景层-内容层-操作层-状态层。这是因为下方的示例图我运用的是Material Design，而谷歌理念基于的是安卓手机平台，所以它的一些状态和导航层因为硬件的不同而使层级不同。——安卓机上拥有物理返回按键。

关于层级，再看上方的设计稿（获得外观专利），这是一个运用卡片设计的设计稿，这里有2个理念，一个是box理念或者称为抽屉理念，这个理念在我的书里有解释过，另一个是卡片层级理念。 Box理念是将信息比喻成家里放衣服的五斗橱。五斗橱里每个抽屉对应的是家庭中不同成员的衣物。

当我拉开我自己的抽屉时，我知道里面都是属于我的东西，这就类似于卡片设计。点开每张卡片，卡片中的内容是隶属于这张卡片的。 卡片层级理念：是将卡片设计成2个景深度的卡片。有Z轴的理念。

二、互联网设计中的阅读舒适度-文字篇

互联网设计中的阅读舒适度从文字的角度可以分为5大维度，分别是：字体、字号、行长、间距、背景。这里的背景我们称为无彩色背景、仅以深浅之分。 字体可分为：衬线体和非衬线体。这个就不多说了，接触设计的同学们都清楚了解这两种形式的字体区别。但是这里有一点是在学校或者现在网络上的观点不太一致，或者说因为时代的变化，而产生变化的结论：在曾经印刷出版中，衬线体阅读识别度比非衬线体高的结论，这个结论发生了变化。 在现在分辨率越来越搞清的情况下，我们的字号使用更大了，在这个大趋势的情况下，衬线体的横向笔画就太弱了，导致看似笔画的缺失。所以使用非衬线体更有优势。

这是网上找的的一张图，可以看出我所说的这个方面，一般来说字号和字体是配合起来看的。太小的字号，会让阅读费力度增大。 行长和间距我们也需要结合起来看，太长的行长用户的阅读费力度会高。太小的间距也会使阅读费力度变大。在设计的时候，间距的距离也能说明亲密性关系。越大的间距说明亲密性越薄弱，越小的间距说明段落关系越紧密。 背景——这里的背景指的是浅色和深色，浅色的背景包容性更广，浅色本身就是扩张色。可以将更多的层级的设计展示在浅色背景上。

三、互联网设计中的阅读舒适度-色彩篇

哪条路更敢一个人走？

哪个宝宝更想救助他?

暖色更接近我们还是冷色更接近我们？

色彩是影响用户对界面第一印象的重要因素，色彩的应用对视觉层级的影响也能起到立竿见影的效果，总结起来人眼对色彩的关注度差别主要是以下两点：

（1）先暖色后冷色

色彩的不同色相，对人眼的刺激及产生的反映目前没有找到绝对的先后顺序，但是冷色类和暖色类色彩，是有明显的层次差别的，如下图，人眼一般会优先看到左侧的图片，这和我们人眼对不同波长的反映有一定关系。

从生理学上讲，人眼晶状体的调节，对于距离的变化是非常精密和灵敏的，我们能判断出物体离我们的远近，但是它有一定的限度，对于波长微小的差异就无法正确调节。眼睛在同一距离观察不同波长的色彩时，波长长的暖色如红、橙等色，在视网膜上形成内侧映像；波长短的冷色如蓝、紫色等，则在视网膜上形成外侧映像。因此，暖色好象在前进，冷色好象在后退。

（2）先高反差后低反差

除了冷暖色对眼睛的刺激不同，色彩的反差是最容易造成关注度差别的因素，在自然界动物为了生存，运用的保护色就是和反差相关。

再来看这个设计，头部的暖色拉近功能距离。下部分的冷色推远了距离，使层级拉的更开。就像第一个卡片有层级，其实背景也做了变化，好的设计有很多值得研究的内容。

本次分享大致是以上3个内容，更多的关于视觉效果设计的分享，如果感兴趣，可以看我写的书《视觉链：互联网产品的视觉设计理念与规范》。

四、问答互动

（注：1-4题为活动主题贴中收集，题5为会员群提问）

问题1.在快速迭代下怎样确保整体视觉与交互的一致性？怎样让设计师不仅仅是服务于视觉而参与到产品战略中？

我认为目前最主要的工作是确立理念，这个理念是可视觉可交互的。当理念一致的时候，那么在快速迭代下的整体设计就能确保一致了。理念和规范不同，这个在书里我也写到了一些理念，例如直线和浪线理念，抽屉与卡片理念，点线面理念，每一种理念都会有一种解释，但是又不像规范那样的限制设计师的设计，这即保持了一致性，又保证了设计师的可创意。

建立的理念会改变产品思路。将产品选择方式也进行了改变。比如在一些完成页的最后进行一些推广和推荐，就是设计师可以发挥的地方。它的设计能决定产品的二次粘性。

问题2.作为面试官的面试经验和心得

看到论坛里问到的问题，各位想必也能感受到设计师工作年限会遇到不同的问题。

我曾经在面试中遇到过这类应征者，带着移动硬盘来面试，打开文件夹后密密麻麻的设计文件呈现在我面前，作品质量层次不齐，在听过几个作品阐述后，我不得不打断他，要求在这些文件中挑选自己认为最好的3个作品向我阐述设计理念和思路。而面试官的面试时间是有规划的，从计划的30分钟，被迫延长至一两个小时，阐述的设计思路不明。并不是作品数量越多越好，而是取决于作品质量。而事实上在他们打开文件夹的一瞬间，我对他们的面试印象已经打了折扣，因为这是一类没有面试规划的应征者，更甚至于面试着互联网界面视觉设计师的岗位，却是希望从事互联网运营视觉设计工作的设计师。而有些设计师，根本不知道这里的区别在哪里。那么如何确立自己的互联网产品职业规划呢？

设计师对应聘岗位还是要有了解，不要打无准备的仗。将自己水平最高和稳定的作品归类和提炼，相似的不需要再给面试官看了，一定要说清设计思路。要知道，你是你自己的作品唯一的翻译官。如上所述，这样会给面试官一个非常良好的印象。设计师们还是要多看、多做、多磨、多记。

问题3.现在各种APP，在底部标签栏的地方一般都有四到五个icon，为什么有的APP会选择带icon+文字的叙述，有的会选择只要icon不要文字？

现如今安卓以及Material Design也越来越好，但是大多数软件都会选择采取和IOS差不多的设计理念和规范，是如何来确定这个度的呢？

我们先看icon的作用是什么，有些icon的隐喻非常能表现出来，配合文字后，记忆点非常强，老实说用户看那些标签栏频道的入口时，大多都是记位置的，这就是为什么淘宝，京东等电商网站在做一些节日皮肤的时候，敢把那些icon改成热点文案的一个依据。但是这些icon最好是有文字作为辅助解释的，因为识别icon的费力度还是很高的，这也是为什么有些会只保留文字，有些使用icon还会搭配文字。只保留文字有时候是icon隐喻太特别，或者功能型的app，文字识别效率是最高的。Icon也附有一些装饰性作用。而只用icon我觉得不可取，毕竟如今一个icon代表多种含义的太多了，会发生歧义。

关于material Design，或者IOS平台，这些只是理念，符合你公司或者设计的理念的可取处使用就好，不可取的不用。这个可以和公司战略政策相关，比如和google有推广合作，毕竟这是一个理念，并不是强制性规范。而是使用哪种，需要查看产品对应的用户使用平台的占比，还是遵循28法则。不要让小部分用户的体验去挑战大部分的用户体验。很有可能平台用户更多偏向于iOS理念，然而iOS10之后已经趋向于统一了。

问题4.momo老师能不能谈一下层级区分与视觉引导方面。

今天的分享就是着重于层级区分的，下一次分享我可以多聊一些视觉引导方面的维度，比如拉近三维距离，大小对比区分，引导性元素，时间轴引导的运用等。我的书里也对此进行了非常详细的进行了阐述。

问题5. 安卓的屏幕色差问题如何解决？（此题为会员群内提问）

这个我在给我们公司的国际部门正好也做了一个新的设计，因为我们面向的用户是外国人，所以他们用安卓机还蛮多的，这个时候其实我们需要评估，安卓机它的占比是比IOS的更多（确实就是国外用安卓会比较多一些）。

那么如何解决安卓的屏幕色差问题？我们没有办法去解决屏幕本身的色差。这里就需要：一方面设计师在进行开发还原度的时候，要和开发去看每一个机型，它的颜色，特别是灰度这个颜色怎么样去调节，针对一些常用机型，让开发手动的去调节一下。当然这个解决方法是建立在开发同学的人力资源足够的基础上，可以去这么做。并且如果有条件的话，我建议是对一些主要机型去进行一一的矫正。

第二方面是我们会可以运用一些中性色。因为安卓机，有的偏冷色有的偏暖色，所以在设计的时候尽量用色不要太偏色标，尽量用一些中性色或者极端偏冷色和极端偏暖色的这种色彩。

以上即为本次线上分享全部内容。接下来，你们还想听什么分享？