描边插画：可以简单理解为众多线面结合图标组合在一起，互相呼应而组成一个大画面。画面中的元素除了面以外，还具有描边，因此也叫描边插画。
本文内容：文章会详解如何画一张描边插画，教程素材没有用我之前的插画来做步骤分解，而是新画了一张插画以作示范，绘画原理都一样，理解原理就好。除了具体步骤以外，会针对一些易犯错误的地方添加重点标记。
一点建议：看完文章后，可以按照我分享的方法来临摹一遍，但我更趋向于小伙伴们能够发挥自己的想象力，做一张属于自己的原创插画。画完后若有不清楚的地方，欢迎在我的公众号中添加微信并附带插画，可给予建议。
这次插画的主题源自于我的一个梦：在草地上，遗落的帆布鞋里面长满了鲜花，小鸟守在花的旁边歌唱。
确定主题后，把脑海里的画面画出来，可以画在纸上，也可以用数位板在 ps 里面画，按照个人习惯就好。我比较喜欢手绘，因此在纸上画。
新建画布1600*1200
视图-勾选对齐点
在描边插画中，常见的问题之一就是描边的粗细问题. 以及描边间关系的处理问题。
描边粗细问题（下图以之前的四季插画为例子）
描边间关系处理
描边设置
描边的粗细是根据画布大小而决定的，1600*1200的画布，我习惯用 8pt 的粗细的线条，但是如果画布是1200*900，8pt 则显得过粗。具体的粗细可以根据情况而调整。
布尔运算法
形状断点重连法
形状生成器
钢笔勾勒法
钢笔勾勒法顾名思义就是用钢笔直接描出物体的外形。在这个插画中，植物的形状比较随性，因此用钢笔直接勾勒比形状剪切要快。绘制的过程中，注意调整线条的平滑度. 弧度，使其规整。在此不作示范。
最近看到 kit8 大神的画，突然想到如果白线运用在线性插画会怎样，就尝试了这种风格。把线稿复制一层置于顶上，改成白色，2px 粗细的线，然后向旁边移动错位，破一下画面沉闷的感觉。
看到这里，你应该也发现了，画面是比较灰的，因为我都是选择低饱和度的颜色，如果需要调整，就在 AI 中把插画导出 SVG 格式。然后拖到 PS 里面进行色相饱和度的调整。
在颜色调整过程中，遇到喜欢的配色就保存下来，这样一张插画就完成了。
我们都知道一个版面中必定有版心的概念。何为版心呢？版心就是除去天头、地脚和左右页边距余下的区域，也是我们页面内容的摆放空间。下图中灰色块的区域就是此页面的版心。
知道了版心，那么何为版面率呢？版面率就是版心所占页面的比例，通俗一点讲就是版面的利用率。
上面左图中版心的面积非常大，四周的余白少，版面的利用率高，所以版面率就高。右图版心面积小，版面利用率比左图低，所以版面率就低一些。
版面中也有满版与空版的概念。如上图，满版就是没有天头地脚与左右页边距的，此时版心即整个版面，版面利用率为100%。空版就是版面利用率为0%的。从满版到空版之间的版面率是递减的关系。
说完版面率的概念我们再来说一说版面率对画面气质的影响。
一般来说版面率越高，视觉张力就越大，版面也会更活泼与热闹；反之，版面率越小，给人感觉就越典雅与宁静，版面也会更有格调。
上图中高版面率的海报相对于低版面率的更热闹与活泼；低版面率的则更典雅。
画册中也是一样的，上图是我早些年做的一个案例。同样的内容跟图片，只是版面的利用率不同，我们可以发现右边低版面率的作品更安静和典雅。
版面率的高低能够影响版面的气质，所以我们实际工作中也要根据项目的气质分配合适的版面率。比方说典雅气质的项目我们就要用低版面率版面，如果用高版面率显然是与项目本身的气质相悖的。
说完版面率我们再来说一下留白，留白的概念大家都懂。而这里所说的留白更多的是指页面的负空间。
页面中去除内容后的空间就是负空间，如下面这个页面。
图中灰色块代表图和文字信息等内容，除去这些图片和文字后，页面中的其他空间都可以看作是负空间，也就是留白。当然，留白并不一定是白色，所有除去页面内容后的空间都是负空间，如上图右侧案例，黑色部分即此页面的留白。
负空间的多少即是留白的多少。留白的多少我们可以用留白率来表示，如上图，负空间小的留白肯定少，留白率就低。负空间大的的留白肯定多，留白率就高。
留白率就是版面留白的多少，实际上与版面率的概念差不多，如下。
空版留白最多，满版留白最少。当然这也不是绝对的，有的作品中虽然是满版，但空间广阔，比如天空什么的，都可以当作留白来看待。
上面说来留白率跟版面率也有一定的关联，所以他们对画面气质的影响也是如出一辙的。我们可以先来看一下低留白率与高留白率的几个作品。
通过这几个作品我们可以看出留白少的信息更丰富，版面更有活力，也更热闹，亲和力也更强。而留白多的更雅致，更安静典雅，更有格调跟品质感，但亲和力稍弱。
下面进行案例演示吧，首先看一看文案。
这一步我们需要把文案的层级关系拉开，大中小区分的明显一点。这个文案的层级关系肯定是 欲望の森林 ＞ 英文 ＞ 欲望是无尽的森林 ＞ 小文字信息的。
首先我们做一个有张力的版面，那么我们可以想一想什么样的版面是有张力的呢？
首先版面率要大，其次留白要小，让版面中的信息紧凑一点。
上图就是对版面的布局，可以看到图片是出血版的，没留天头与左右页边距。这样做的目的也是使版面率更大。
布局做好之后我们把图片与编排好的文字放置上去就可以了，如下。
上图可以看到留白比较少，符合留白率低的理论，虽然具备张力，但不是很明显。这种情况下我们可以改变一下底色使之感觉留白率更低，如下。
做完了留白少版面率高的，我们再来做一个典雅一点的。
根据本篇文章的内容思考一下什么典雅与安静的的排版版面率与留白率分别是什么样的？
一定是低版面率和较多留白的版面更能体现典雅与安静感。所以我们在版面安排上要使其留白更多，同时版面率要小一点。下图就是一个基本布局。
最后我们再根据版面布局置入图片微调一下就可以了，如下。
版面率跟留白率都能够影响版面的气质，我们做项目的时候具体问题具体分析，根据项目气质去设定版面率跟留白率的大小。
大家好，从今天开始我要以大白话且通俗易懂的方式，来与大家分享我的知识和观点。
主要讲解的是平面设计基础理论知识与实际用法，后期会讲一些高阶的设计思维。
本章节适合设计小白和需要填补设计基础的设计师学习阅读。
目录
1、理解、提取与布置
2、贴近与远离
3、排列与对齐
4、视线移动方向
5、组织与重复
1、理解、提取与布置
理解、提取与布置指的是根据设计的意图来进行信息的整理，然后再将整理好的信息中重要和不重要的信息按照优先级排列出来，最后再根据排列好的信息按个人美感和美学理念摆放到平面中。
1.1 理解部分
当收到一个海报设计需求时，我们不是要马上动手去做，而是要去思考需要设计的海报受众群体是哪些人，具体要怎么展示它，它展示的目的是什么。 
下面我就简单介绍一下设计思维及方法，首先要设置定一个需求【现代美术馆，需要设计一个简洁大方的海报】。根据这个需求在进行具体的思维延伸。
1.1.1 海报的受众群体
当我们收到设计需求时，要考虑海报的受众群体，男人/女人，少年/青少年/中年/老年，每种受众群体接受教育的程度和经历均不同，要根据不同的受众做合适的设计。当我们按照具体需求定义好受众群体后，就可以考虑推断用哪种风格来展示海报了。
对于现代美术馆需要一个简洁大方的海报，这个需求所涵盖的年龄区间比较大，基本上所有人都可以参观美术馆。那我们只要避免使用“个性化”的表象特征元素就可以解决这个问题了。
意思就是不要加入柔美的线条（除非展品的构成是柔美的线条），游戏和女妆这类具有一定代表性的象征元素，不要夹杂太多表现形式，用最容易让人理解的表象形式来处理就可以了。
1.1.2 怎么展示海报
现代美术馆，需要设计一个简洁大方的海报这个需求，可以根据主关键词“现代”和“美术馆”，次关键字“简洁”和“大方”来推断要采用哪种设计语言。“现代”的表现形式是无衬线体、干练（有棱角）、简洁、没有太多情绪。而“美术馆”只要在图片的处理上让主题与图片串联共通就可以了。
简洁大方的设计需求可以采用直线（字有时也是线）或大留白、配色多些白色、舒适的高纯度高明度、整体干净清爽，同时也要注意禁止添加太多颜色（如撞色）。
1.1.3 运用理解部分生成原型
根据前面的分析大概有了个原型，分为上下构图。上部分是美术馆的部分场景图片，下部分是具体的内容信息部分。所有要素均以现代感、简洁干练、配色不复杂、线性、整洁、清爽、专业、无太多情绪为基础进行设计的。
以上就是“信息的整理”中的“理解部分”，当设计师收到需求时，不要马上着手去做。先思考采用哪种表现形式（视觉语言）更适合需求，分析后再去做设计，这样才能准确表达具体的需求，也能做出更符合需求的设计。
1.2 提取部分
提取部分就很好理解了，顾名思义是将整理好的信息中重要和不重要的信息按照优先级排列出来。我们只需要根据优先级进行排序，并把最重要的信息排列到平面中就可以了。例如需求中有【ABCDEFGHIJKL】这么多种信息，把最重要的【CGIL】提取出来再排列优先级【IGCL】。由【ABCDEFGHIJKL】-【CGIL】-【IGCL】这个过程就叫“提取信息部分”。
1.3 布置部分
把提取并排列好优先级的信息规整好，就可以布置在平面上了。用之前设计好的原型套用已提取好的信息就可以了。特别要注意重要的内容放大，不重要的内容弱化。
* 要点
理解：首先要理解作品的受众群体、要怎么展现、目的是什么。
提取：其次要明确作品内容中什么是最重要的、根据优先级排序。
布置：最后把排列好的信息加以布置，重要的内容放大，不重要的内容弱化。
2、贴近与远离
贴近和远离的概念也是比较好理解的。与格式塔视知觉的亲密性与远离性是一个道理，初期只讲一些通俗易懂的概念，像格式塔视知觉以后会讲。
2.1 贴近和远离的 基础概念
贴近是指同类要素摆放在一起会呈现出一种共通性或产生某种规则，而远离是指同类要素分开摆放看上去就没有共通性或不会感到有某种规则。
当把同类要素（男人女人）放到一起，会觉得他们有一定的共通性，而且看上去像一对情侣。相反把同类要素（男人女人）分开来放，会觉得他们毫无关系。
我们把这种概念应用在平面设计上，如下图所示。
相同的要素摆放在一起会有一定的共同性，相反分开摆放则看上去没有关联。
贴近与远离基础概念的实际案例
2.2 贴近和远离的 进阶概念
把同类要素放到一起有种井然有序的感觉。如果要处理较为规整传统的版式时，可以考虑多将要素放到一起形成规则。另外把同类要素分开摆放，会感到没有共通性和规律规则，但是能为平面增加节奏感和冲击力。
贴近与远离进阶概念的实际案例
其次远离能使平面产生留白，通过留白也能使平面具有关联性。
虽然说远离能使要素看上去没有共同性和规则，但如果要素处在一个平面中，利用留白呈现出一种关联性。这就像吵架的夫妻一样，同在一个床上，女的偏床左侧，男的偏床右侧，呈现一种远离性。但他俩还是处在“床”这个平面中，也会呈现一种关联性。
贴近与远离进阶概念的实际案例
* 要点
同类要素贴近摆放在一起相互关联，同类要素远离摆放相互排斥。
同类要素贴近摆放在一起平面有规则，同类要素远离摆放增添节奏。
留白也能使要素有一定的关联性。
3、排列与对齐
排列与对齐的概念比较简单，也很容易理解。转化一下思维，把排列比作军队队伍中的“集合”，把对齐比作队伍中的向前/左看齐，就很好理解了。
3.1 排列
排列是指将要素按照一定的规则进行布置，使平面达到一种平衡与和谐。道理与收拾屋子一样，杂乱无章的屋子会让人感到不舒服且很压抑。整理的井然有序的屋子会让人心情舒畅很安心。平面中的“排列”就是屋子中的“整理”，目的是使杂乱的屋子变得规矩整齐。收拾屋子的方法就是“规则”，用规则的方法来排列就叫“布置”。
排列的目的是让平面变得有序和规则，当平面达到有序和规则就会呈现出一种舒适感，好比自然中的和谐。
3.2 对齐
对齐也可以理解为将要素按照一定的规则进行布置，使平面达到一种平衡与和谐。对齐与排列的差别在于，对齐是在排列的基础上进行操作的。先将要素按照一定规则进行排列，然后再将要素进行对齐。排列是画一个大体的框架，而对齐是做框架里的精细操作。
排列与对齐的实际案例
* 要点
排列与对齐的目的是让平面变得有序和规则，当平面达到有序和规则就会呈现出一种舒适感。
把排列比作军队队伍中的“集合”，把对齐比作队伍中的向前/左看齐，就很好理解了。
4、视线移动方向
设计书籍或排版布局时，要考虑通过设计让读者以怎样的顺序去阅读作品，通常情况下人的视线是从上到下移动的，所以在设计时要考虑到这一基本原则。阅读横排文章时视线是【由左至右】，阅读竖排文章的视线是【由右至左】。
视线的移动方向分为三个知识点，横排阅读、竖排阅读、流水式阅读。流水式阅读以后会讲。
随便补充一下啊，我读过的设计文献中提到的阅读方法只有“Z字视线移动方向”，而没有“T字视线移动方向”。有一种学习方法叫“T型阅读法”，与视线移动方向的“T字视线移动方向”不是一个概念。视线本身就是从上到下从左到右的形式阅读的，形成了Z字阅读方式，我觉得是国人是把这些概念给曲解了，如果有说的不对的地方，也请大佬们多多指点。
4.1 横排阅读
横排阅读是指作品的排版布局是以横向的排列方式让读者来阅读作品。横向的排列方式就是文字是横着的，大家现在读的这篇文章就是横向排列的文章。阅读横向排列的文章时视线是从上至下【由左至右】依次阅读的，如图所示。
懂得了横向排列的方式来阅读文章会有什么用呢？由于人们的阅读习惯，一般情况下阅读读物，都会遵循从左到右阅读文章的方式，这也就间接影响了文章内容的重要性。采用横向排列的方式进行排版布局，重要的内容要放在最左面，也就是最方便引导人们视线方向的地方。
如果不把重要的内容放在视线方向的地方，读者不仅阅读作品时会感到很吃力（可读性），而且会不理解作品是什么含义，视线也随之错乱，作品也会失去原本的含义。
横排阅读的实际案例
4.2 竖排阅读
横排阅读是指作品的排版布局是以竖向的排列方式让读者来阅读作品。阅读竖向排列的文章时视线是从上至下【由右至左】依次阅读的，如图所示。
一定要注意，竖向排列方式内容区在平面的最右面，与横向排列方式不同。这个规定就像地球为什么是圆的的道理一样。
竖排阅读的实际案例
* 要点
阅读横排文章时视线是【由左至右】，阅读竖排文章的视线是【由右至左】。
不要打破规则，一切以引导读者视线为主。
5、组织与重复
按照一定规则构成布局来编排要素，能使种类繁多的要素显得整洁有序。
5.1 组织
没有共通性的杂乱图形汇聚一起会造成视线混乱，读者注意力会被分散，也会降低理解力。将图形用框圈起来，按照等距进行排列，整体就会显得很整洁，也便于找出想要了解的图形。
组织规则的实际案例
5.2 重复
这里的重复不是指复制粘贴，而是元素上的重复构成。例如重复相同的格式，风格、文字、颜色、线、图案等。为了让平面具有条理性，用风格统一的要素做修饰，让排版符合流水式，视线清晰自然。
重复规则也可以应用在平面中、元素中、要素中、形状中等，灵活运用重复能使平面具有统一性，也能制造趣味性，增加读者对作品的印象。
重复规则的实际案例
* 要点
将图形用框圈起来，按照等距进行排列，整体就会显得很整洁，也便于找出想要了解的图形。
灵活运用重复能使平面具有统一性，也能制造趣味性，增加读者对作品的印象。
设计工作中，你是否经常觉得留给设计的时间不够用？为什么会这样？如何解决？Let’s go～
01 问题背景
设计工作中，你是否经常觉得留给设计的时间不够用？是否经常遇到这样的问题：
场景1：总感觉自己的设计差了点什么，导致设计上反复尝试。终于在交稿最后一天感觉ok了，兴致勃勃的拿去交工，然后得到这样的反馈——“这个不行，这不是我想要的”。
场景2：“多久能设计完？尽快？尽快是多久”“这个需求简单，随便搞搞就行了！” “要设计5天？啊呀～不用那么精致，差不多就行了！”
02 为什么会这样？
类似的事情在设计行业已经变成了大家都懂的梗，但是为什么会这样？
一.设计师自身原因导致
1.设计缺乏说服力导致无节操改稿
A.是不是设计目的不明确？
设计本身是一种解决问题的系统性方法，并不是一个结果，不能为了设计而设计。没有目的性的设计会导致大方向出错，就好比一把狙击枪打错了目标，即使威力再大也是徒劳。
B.是不是设计思路不正确?
很多设计师在接到需求的第一时间打开ps或其他软件直接开始试错，缺乏目的的设计很容易在中途发现错误或更好的方法，要么推翻重改，要么将就的给上游看。当然，结果肯定不会很理想。
C.是不是细节经不起推敲?
细节缺乏考虑的设计，无法阐述每一处设计的目的。当其他人提出疑问的时候，要么不能应对，要么强行应对，两种一定都很负面。
2.设计师估时不精准导致时间不够用
A.是不是估时不够合理？
不能精准评估设计时间，导致估算的时间过短或过长，设计师看到界面数量直接估时。不了解需求目的以及缺少设计难点的考虑，导致自己不能在估的时间内按时完成
B.是不是估时不够精细？
需求模块估时不精细，导致评估的时间不可信，对于其他岗位来说，大多不了解设计过程以及设计难点在哪，不能清晰阐述其难点在哪很容易被领导压时间或贴上负面标签。
二.外界原因包括哪些
1.当然也有不是设计师本身导致，比如需求方向反复变更。导致设计方案的不断更改
2.需求方出方案时间过长导致下游全部时间不够
3.需求方没能全局把控时间，没全面考虑其时间周期
所以，一套有说服力的设计以及精准的设计时间评估是设计师提升自身效率的核心，而能够发现项目效率问题所在是团队提升整体效率的核心。
03 怎么办？
那么如何让你的设计更有说服力和精准的制定你的设计时间？以及外界原因如何应对呢？
一.让你的设计更有说服力
A.明确设计目的
核心为提前沟通，提前了解需求。分别包括：
1.需求目的
需求目的并不是说需求方想做什么，而是做这个需求的目的是为了解决什么问题
2.数据
是否有数据支撑，证实问题的客观存在，尽量避免出现伪需求
3.是否对已有的场景造成不良影响
系统性考虑，避免单独需求的产出对系统级的设计造成影响，导致体验不统一或开发难度大以及各种后期改稿问题
4.用户与场景
需求用户是谁，在什么场景下用，避免设计方向出错
5.明确需求期望和时间期望
需求方是否有对设计的期望形式（包含动效期望，插画期望）以及期望时间是多少
B.清晰设计思路
1围绕战略目的，目标人群以及使用场景考虑
2通过其三个维度提取与筛选关键词
3围绕关键词确认设计调性
4围绕设计调性结合具体场景思考与执行
5具体细节打磨，基于设计调性以及场景考虑上提升品质感与好感度
C.让细节经得起推敲
1.细节的客观性
每一处的设计元素需有他的作用性，尽量避免可有可无的设计元素
2.细节服务于整体
每处细节的目的都应服务于整体，避免对整体有负面影响的细节设计
以上可以总结为
1明确的设计目的能够让你的设计和需求建立极强的契合，推翻设计就等于推翻需求
2清晰的设计思路能够让你的设计环环紧扣
3经得起推敲的细节能够让你的设计细化到每个元素都缺一不可
一套这样的设计方案就好像一杆枪枪命中要害的“狙击枪”，还有什么击不碎的目标呢？
二.如何合理的评估设计时间
A.方法时间评估
如果建立在详细评估了需求上来说，设计师已经能了解需求包含了什么内容，也一定有某处在设计上很难处理的模块，如“用户难理解的功能如何表达清晰、难适配的功能应该采用怎样的展示方法、状态太多的情况如何处理、信息过载的模块等等等”。分别评估其设计时间。
B.执行时间评估
如界面存在大量图标或需要大量图标、大量插画、动效等需要执行时间长的需求，需增加执行时间
三.如何尽量避免外界因素？
A.提前沟通
尽可能分析需求目的的正确性以及可能遇到的问题尽早提出
B.明确职位责任
设计师没有办法把公司的活都干了，该是谁的锅就该谁来背
C.如何让其他人理解设计时间
分别阐述这套设计的时间分别耗在哪，各模块各需要多久。的时间更有说服力
D.需不需要精细化设计到底应该由谁决定
当然，理论上每处设计都应该精细化，但是由于精细化是一个永无止境的事，结合项目本身考虑，需理性一些。需不需要精细化应该是由场景的重要程度、上线时间决定。不应由各职位一方决定。一个重要的场景可能让用户形成对产品品牌认识的第一印象，当用户对产品有了负面的印象，后期改善这个的成本会变的无穷大。作为设计师，需要严格把控方案的落地以及评估其体验的风险
04 结语
一个合理的设计过程可以减少不必要的时间浪费，一个合理的时间评估能够保证设计工作的正常进行。也希望每个设计师都有一个更美好的工作环境。
以上为本人的一些看法，也欢迎不同看法的伙伴相互交流，共同进步
提起平面设计，也许很容易联想到平面设计师。其实平面设计不仅是职业也是一个重要的设计知识体系，在我工作中发现平面设计知识是UI设计和其他设计领域中必备的能力，然而很多朋友认为「平面设计是属于纸媒行业的事」而忽略这部分知识的重要性，为此我想简明地将平面设计知识体系中最重要的知识点提出供大家汲取。
平面设计（graphic design），也称做视觉传达设计，是指在二维平面内通过多种设计组合来借此传递信息的视觉表现设计。平面版式设计需要使用字体知识（Font）、视觉设计（Visual Design）、版面（Layout）等方面的专业技巧来达成创作计划的目的。平面设计非常重视版式的设计，而版式并非只有纸媒才需要重视。如果想做好移动端设计、网页设计甚至是别的领域的设计，那么一定要加强学习平面版式的基础知识。
在我们开始学习平面版式基础之前，我们先来讲一下简明平面构成原理。平面构成是运用点、线、面和其他技法来构成基本元素的学习方法。它是在我们工作之前必须要学会的视觉语言。以下的内容希望如果您有时间进行练习，边练边摄取知识效果才能更好。
点是组成平面构成的基础要素。点可以是不同大小的；可以是不同疏密的；可以是不同虚实的。可以是整齐的点，也可以是随意排列的点。在一个画面上也可以有大小、疏密、虚实、整齐和随意对比的，对比就会产生韵律感。仅仅依靠点来构建画面时，我们会想方设法地让画面丰富，体会点的变化。
线有哪些呢？垂直线、水平线、斜线、曲线等。垂直和水平都会有稳定的感觉，斜线会更加有冲击力，曲线会感受更加柔和。由不同粗细、不同韵律的线条组合，作品将更加有视觉引导的效果。尝试只用线条构建一个画面，你会体会到不一样的视觉感受。
面的种类有不规则形状和几何形状两种。在《纪念碑谷》游戏中有个词叫做「神圣几何」，我非常的喜欢。几何图形真的是很神奇的存在，几何形是可以用数学表达出来的，也是我们在初中时就开始学习的。比如三角形、圆形、矩形、正方形、椭圆等。这些几何形在视觉上是非常令人感觉舒适的，如果你在创作时没有灵感时，可以从几何形中寻求灵感。不规则形状其实也可以分解成不同的几何形的组合。
平面构成的形式有重复构成形式、近似构成形式、渐变构成形式、发射构成形式、密集构成形式、对比构成形式、肌理构成形式等，如果平时您发现在工作中排版的图形能力比较差，那么建议您了解一下构成形式加以练习。
重复构成形式就是用一个基本的元素在一定的形式下重复排列，排列对方向和疏密会产生一种秩序的美感。谈起重复构成，我想顺便介绍一下重复构成的两种方式：第一种：二方连续。二方连续是图案的一种组织方法。二方连续是由一个单位纹样向上下或左右两个方向反复连续而形成的纹样。第二种：四方连续，是由几个纹样组成一个单位向四周重复地连续和延伸扩展而成的图案形式。
近似构成形式是使用相似的元素进行构成的一种方式。近似构成讲求在统一中带有变化。设计上采用基本形状之间相加相减求得近似的基本形。基本形类似的构成形式就是近似构成形式。总结来说就是看着一样实则要有变化。
渐变构成形式是把基本元素的大小、方向、虚实、色彩等关系进行渐次变化排列的构成形式。渐变可以是通过颜色、方向、虚实的变化也可以是通过外形的变化来完成，不一定是我们通常理解的颜色渐变。
发射构成形式是以一个点或多个点为中心向周围发射扩散等效果，就会具有较强的动感及节奏感。首先我们需要有骨骼线。骨骼线就是我们画面走向的一个看不见的线索。其次我们可以选择使用离心式、向心式、同心式几种发射方法来设计。
特异构成形式是在整体画面都有规律有固定形态的状况中进行小部分的变异以突破单调画面的形式。特异构成的部分可以用颜色、形状、线条等方法来做。很多运营类设计也会应用到特异构成形式。
密集构成就是在画面中使用大量重复密集的元素来给观察者一种压迫感和与留白的对比，密集构成很容易给观察者造成震撼和心理压力。
我们做对比构成的时候，可以使用元素的形状、大小、方向、位置、色彩、肌理等进行对比，以及重心、空间、有与无、虚与实的关系元素的对比。对比会产生强烈的反差和感官刺激。
视觉可理解的物体表面图案的纹理，我们就叫做肌理，以肌理为构成的设计，就是肌理构成。我们在做肌理构成时如果用Photoshop的时候会非常的方便，可以用图案、贴图等方式。
在平面设计的过程中，我们其实是在组织图片、文字、按钮、图标等最小元素的信息架构。这些元素是画面中的最小单位，它们本身就附着着某个信息，比如作品的标题、一个功能、去展览的地址、一个景点的照片等。这些排版中的元素需要我们放在画面中，不可以因为好不好看而删去必要的信息，然后根据他们的重要性进行排列组合。
字体是排版中最重要的元素，也是最直接的信息传达方式。一般来说设计师通常需要了解的字体有中文和西文字体两种：西文字体由来已久，由最早的罗马字体到我们现在苹果手机里的SFUI字体，西文字体经历了许多的设计上的变革。西文字体可以分为：罗马字体或衬线体（roman，serif）、无衬线体（sanserif）、手写体（s cript）、雕刻字系（glayphic）、典籍体字系（Classical）、装饰体字系（decorative）、展示体字系（Display）、当代字体字系（Contemporary）、符号字系（Symbol）等。中文字体由于起先版权不够重视其实并没有西文字体发展得顺利，数量上也远远落后于西文字体甚至是日文字体。好在中国设计正在崛起，在一大批设计师前赴后继的努力中，中文字体的数量正在呈指数级别增加。中文字体分为三种：第一种是黑体（笔画上没有装饰的字体）。黑体也有不同的具体字体如苹方、微软雅黑、思源等；第二种是由书法作品演变来的字体如从宋代活字印刷而来的宋体（对了，日本因为误解原因将宋体叫做明朝体）、楷体、仿宋体、行楷、隶体、魏体、舒体、颜体以及钢笔书写的字体；第三种是美术字体，比如综艺体、美黑体、水柱体、娃娃体等。
这里我引用了前端工程师在CSS样式表（一种用来表述网页样式的代码）中的族类概念。常见的族类有五种：衬线体（serif）、非衬线体（sans-serif）、手写体（cursive）、梦幻字体族（fantasy）、等宽字体族（monospace）。衬线体的特点就是笔画结尾处有装饰的处理，比如我们熟悉的Times New Roman、Georgia、宋体等。非衬线字体粗细比较均匀，比较现代并且在缩小的情况下依旧保持了可读性。非衬线字体如Arial、Helvatica、幼圆、楷体等。手写字体族就是由手写而产生的字体，比如迷你简黄草、Caflisch s cript等。梦幻字体族听上去稍显非主流，但是也是字体中不可忽视的一支力量。常见的梦幻字体族有WingDings、WingDings 2等。等宽字体族将西文的二十六个字母全部变成等宽，这样做的好处就是排版大大地轻松了。常见的等宽字族有Courier、Prestige等。总体来说字体的族类是衬线体和非衬线体两个大类，大家可以简洁地记忆：衬线就是笔画处有装饰的字体族，非衬线就是笔画较为相同粗细的字体族。
一个族类下面是不同的字体，然而一个字体又可能有好几个字族。字体文件中通常会包含几个字族，如果你安装了Helvetica，在Photoshop中你会发现字体选择器下包含了三十多个前缀是Helvetica的字族。原因很简单，字体设计师除了设计从A到Z的大小写字体、从0到9的数字、标点符号后，还为我们设计了同样字体的不同族类来协助我们在不同地使用场景下表达合适的意思。字族一般有：正常（Regular）、窄体（Narrow）、斜体（Italic）、粗体（Bold）、粗体斜体（Bold Ltalic）、黑体（Black）等等。虽然字体的字族有多有少，但是一般都具有正常、斜体、粗体、粗体斜体四种基本字族。应用场景上：粗体通常表示强调、斜体表示引用、正常是正文。很多时候我会发现很多设计师乱用斜体，其实斜体的设计并不是为了好看，而是在书中代表本段文字来自引用另一个著作的含义。
举个使用斜体的例子：「设计的作用在于寻找功能和社会间的接点，在功能足以说明一切的前提下，装饰成分是可以节制的，如何把握节制的度是考验一个设计师是否成熟的标尺。」 -《设计的觉醒》田中一光
一个字族中的任何一个字体也会有不同的笔画粗细变化。这种粗细变化的字体称之为字重（Font Weight），字族后面的字重选项如「Thin」、「Light」「Regular」「Book」「Bold」「Black」「Heavy」都是一个字族下的不同粗细变化。实际上，国际标准 ISO组织规定了九种字重，但是由于有些字重不常见，我们就记忆以上七种字重即可。中文字体也有相应的字重，如「极细」、「细」、「标准」、「常规」、「中等」、「粗」、「特粗」。在使用场景中，如果我们需要强调一个内容，比如标题时，一般会用粗体；如果在正文的设计中，那么就会用常规或标准等字体。英文也类似，这些字重是为了我们突出文字使用的。注意一点：在PS中我们也可以通过字体面板给文字人工加粗，这种加粗如果变成形状时会提示「该字体使用了加粗样式，不能变换」，所以可见这种人工加粗是有一点缺陷的。
任何字体都具有自身的气质。比如一款圆角萌萌的字体会给人温柔调皮的感觉；而边角锋利的字体会给人一种强硬的感觉；书法字体会让用户觉得充满中国风和个性；瘦长纤细的字体会给人一种未来感等等。每个字体都具有一定的感受，这与色彩心理学中每种颜色带给人不同的感觉一样，字体的外形和笔画也会给人一些心理暗示。
全角指一个字符占用两个标准字符位置。中文字符、全角的英文字符、国标GB2312-80中的图形符号、特殊字符都是全角字符。半角指字符占用一个标准的字符位置。
通常的英文字母、数字键、符号键都是半角字符。半角全角主要是针对标点符号来说的，因为正常情况我们没有打全角英文的需求。
半角英文 english
全角英文 ｅｎｇｌｉｓｈ
半角符号 ,.’」;:{}_+!@#$%^&*()
全角符号，＇＂；：｛｝＿＋！＠＃＄％＾＆＊（）
计算机编程基于英文，也就是半角字符。所以在编程中符号一定都是半角的，如：
name=”郗鉴”
全角符号编程就会无效，如：
name=「郗鉴」
在我们设计作品时也一定要记得中文搭配全角符号，英文搭配半角符号。不要出现如「好的．」或者「ｔｈａｎｋｓ。」这样的错误。全角半角的切换在中文输入法下按SHIFT+空格可相互转换，这个知识点虽然非常基础，但是无疑我们经常看到用错的设计。
我们在一个设计中一定会依靠一些配图或者照片素材来进行排版。有时我们会选择寻找素材或者是自己去拍，无论如何，作品中使用的图片一定要与整体设计色调相符，冷色暖色中性色都要符合整体的色调，一定是邻近色或对比色等色彩关系，不要因为自己的主观放置没有色彩关系的配图或者会抵消画面色彩倾向的配图。另外注意色彩会产生「水彩效果」，即两种颜色放在一起，如果其中一种是灰色或者比较脏的颜色，那么另一个颜色在我们大脑中也会感觉变脏了。类似于这种效果可以在作图中慢慢体会。
在一个设计中，图片与文字的量应该有一定的对比。人天生喜欢看图片而不是阅读，实际上人类有阅读能力的历史只有几千年，而欣赏图片的能力是天然的。如果你的需求上文字需求非常多，尝试与需求方商讨减少文字量。文字量越少，图形化设计越多，那么视觉上这个作品看起来就更轻松。
在平面设计中，因为最终目的是印刷，对我们的图片尺寸没有非常严格的要求。但是如果我们是为了互联网产品的设计的话，可能会涉及一些需要网站编辑直接上传的图片，如果你的尺寸不是一个固定尺寸，那么可能原本网站编辑不需要裁剪图片而可以直接上传的工序，要因为我们的一个尺寸变得很复杂。所以请牢记以下三个尺寸：4:3，16:9，1:1。4:3的原因是相机的画幅一般是4比3，所以我们看到的新闻客户端的图片大多是4:3。16:9的原因是视频宽荧幕画幅就是16:9，所以我们看到视频网站的截图一般都是直接由机器抓取的图片。1:1一般用于封面等图片素材的尺寸是正方形的。
任何一个设计中都需要把各个元素分级分清主次，这样才能更好的抓住重点。你可以想象自己在管理着一部玛丽苏电视剧，这部剧中谁是主角？谁是女二号？谁是群演？主角需要独立的化妆间和助理；女二号可能只有一个助理；群演可能就是整个剧里的一个过客。我们的设计也是如此，哪个信息是主角？哪个信息是女二号？哪些元素又仅仅是群演呢？女主元素首先要站C位（网络流行词，来源center）霸占画面的中心，然后这个元素要尽量突出，可以使用更鲜艳的颜色、更夸张的字重、加边框等方式突出；女二号信息一定不要抢了女主信息的风头，所以要和女主元素有一定的对比，字号上也要小很多，尽量让用户第一眼看到主要元素。而群演的元素一定要淡化，仅仅让人感知有这些元素就可以了，比如文字可以缩小到刚刚能注意到，颜色可以是接近背景色等。那么如何让这些信息按照他们的身份来排版呢？我们就要用到CRAP原则了，CRAP是这四个原则的首字母缩写，分别是对比、重复、对齐、亲密性四个原则。
在同一个视觉区域内的逻辑不同的元素应该有所区别，避免视觉上相似。这样就可以有效地区分谁是主角谁是配角了。为了让主要元素更突出，让次要元素更后退，我们可以尽量使它们的颜色、字体、大小、留白不同。如果两个元素不尽相同，请让它们截然不同。比如如果你想使用12px的正文与14px的标题区分明显，不如用12px与40px进行区分反差更大，更容易区分哪个内容是需要优先浏览的、哪个内容是次要的。对比的方式有以下几种：
色彩对比
在我们排版时首先要产生对比效果的就是背景和文字了。文字是第一阅读元素，背景和文字如果颜色很接近，那么就不容易区分出来引发注意了。一般来说在很多媒介的设计中我们习惯了白纸黑字，即白色背景和黑色文字。我指的不仅是纯黑和纯白，也包括其他类似明度颜色的对比。黑纸白字是另一个选择，深色背景和浅色文字的搭配其实不适合大量阅读，如果你的作品信息不多是没有问题的，但是如果用户阅读很久黑纸白字的界面，就会产生视疲劳（比如再次盯着白色的墙的时候文字还会出现等）不舒服的感受。当然一切取决于用户使用场景，如果我们的设计被应用在夜晚等较暗的环境，黑纸白字更利于阅读。总之，不管你的设计采用橙蓝、黑白、蓝紫配色，一定要记住文字和背景的对比关系。
除了文字之外，图标和其他装饰信息的色彩对比也是非常重要的。辅助信息或者辅助功能的图标尽量淡化以突出主要功能和图标；重要功能如订单等按钮则需要突出和醒目。色彩对比是设计中一个非常常见的手法。
大小对比
大小对比是指文字、图片、图标等元素为了区分重要性采用的区分方法。比如两行文字：郗鉴和相声演员，同属文字但权重不同：第二行的文字用于解释第一行的内容，所以第二行内容应该通过大小和颜色变成次级，让用户阅读时分清主次。与此类似，比如音乐播放界面中的三个按钮一般并排放在一起：上一首歌、播放、下一首歌，哪个应该更大呢？当然是常用的、重要的功能-播放按钮。当然如果图标同属一个级别也应该放在一个尺寸的级别上。
如果相同的内容（如标题等）属于同一个逻辑，可使它们的颜色、字体、大小、留白保持相同。这样可以增加条理性和加强设计的统一性。这个原则看似简单，但是新手很容易犯这个问题，所以再次提醒，一个级别的信息尽量使用一种设计来保持用户的认知，避免用户认为是另一种信息分类。这就是重复原则。在一个属性或逻辑单元里的内容应该尽可能地使用重复的颜色、大小、间距。我们来看，一个注册页面可含有：注册、登录、忘记密码、跳过等内容。如果我们把登录页面分为四个属性，那么可能我们需要四种字体或四个不同的区域。但如果我们把它们分为两类呢？注册和其他。那么同一个分类就可以重复使用一种字体了。看上去就不会很乱了。在重复原则下，用户会因为视觉惯性变成寻找线索的「僵尸」，会根据线索而顺畅地浏览下去。
任何内容在版面上都尽量应该上下左右对齐。随意摆放绝对是错误的。这一点一定要和大家多次强调，比如一个元素上下左右的间距都要是一样的。大家看到网页和app设计之中经常会有间距和留白，留白和对齐都是我们在设计时需要考量的，留白不是随意的。
在逻辑上有关系的两个元素应该尽量放在一起。两个视觉元素在一起就会变成一个视觉单元。比如注册页面中的登录视觉单元是由输入表单和登录按钮组成的。相同的内容，如小标题等，属于同一个逻辑。可使它们的颜色、字体、大小、留白保持相同，这样可以增加条理性和加强设计的统一性。
左到右阅读：从左到右是受现代社会影响后天影响我们的一种习惯。我们看一个比较大面积的设计时也会从左到右依次阅读，这也就是为什么网站的logo都在左上角。从上到下阅读：我们阅读作品时也是从上到下依次阅读，所以重要的内容一定在上面，按优先级来排列。从大到小阅读：我们的视觉也是比较调皮的，如果一个元素很大，我们也会首先去注意大的元素再依次看中等和小的元素。从重到轻：元素的颜色也会影响我们阅读的顺序，从重到轻依次浏览。狩猎式阅读：狩猎式阅读用户在寻找可以完成当前界面或设计中的任务线索，比如在购买页面中会寻找支付按钮等。S曲线阅读：S型曲线阅读比较适合比较大的设计，眼球需要左顾右盼从上到下来浏览信息，在S型的浏览方式下比较能够全面地观察每个页面元素，S型成了目前主流的视觉导向模式。那么在S型曲线中，我们的对其方式有三种：左对齐、右对齐、居中对齐。重点元素可以依次左右摆放，让用户有一个视觉浏览的惯性，左-右-左-右-左-右。
上面我们介绍了一些排版和平面的基本原理。那么实际上我们在应用中要做的就是将这些知识运用在具体的需求里。让多个元素能够完美地展现在一个画面里也是一种能力，我们管这种能力叫做构图能力。那么下面我来简单讲一下构图能力有哪些要点。
我们的任何一个排版里都会出现重心。重心是我们人类的一个心智模型，我们从物理世界里学习了重心的规律，在看平面作品的时候也会莫名地关注重心问题。在设计中我们可以利用这一点创作出倾斜的重心、居中的重心、左对齐的重心等。但是请大家注意，如果我们的排版里一个单元是居中的，那么这个单元内的元素也应该重心居中而不应该重心不稳，否则会感觉大厦即将倾倒。
设计某个元素或者几个元素组成的单元也要注重骨骼，骨骼有外延骨骼和内在骨骼两种。在做完设计以后可以将作品元素的外围连个线，看看是什么形状。有时我们会发现一些骨骼不好的设计确实会给人不舒服的感受。
1692年法国国王路易十四命令成立管理印刷的皇家特别委员会。委员会由数学家尼古拉斯加宗（Nicolas Jaugeon）担任领导，他们采用方格为设计依据，每个字体方格分为64个基本方格单位，每个方格单位再分成36个小格，这样印刷版面就有 2304个小格组成，在严谨的几何网格中设计字体和版面来试验视觉传达的功能。栅格系统英文是「grid systems」，是一种平面设计的方法。栅格系统运用固定的格子设计版面布局，其风格工整简洁，这种方法现在也被应用在移动设备和网站设计等领域里。科学的栅格会给人一种秩序的美感和现代感。
△ 网格系统在书籍排版的应用 作品:Dale magazine by Rocio Gomez
△ 网格系统在图形中的应用 作品:Pixty App Branding by Ramotion
我们在设计任何作品时，首先考虑的是应用的尺寸。如iPhone8的分辨率为750x1334px、安卓1080P分辨率为1080x1920px等。在我们确立了我们排版的尺寸后，我们就可以根据这个宽度设计可以被整除的栅格了。我们把整体宽度定义为W。然后整个宽度分成多个等分单元A。每个单元A中有元素a和间距i。所以他们之间的关系就是 W =（a×n）+（n-1）i 。当然每个应用的尺寸不止可以整除成一种栅格，这就要看我们内容排版的疏密程度了。之后，我们将过多内容的栅格和另一个栅格相加得到更大的排版空间；其他元素都须老老实实呆在自己的栅格内，这样就完成了一个布局非常科学的设计了。
比如一个网页宽度是1000px的情况中我们可以使用：20列每列40px和10像素间隔、20列每列30px和20像素间隔、25列每列30px和10像素间隔、25列每列20px和20像素间隔。如果网页宽度是990px我们可以使用：11列每列80px和10像素间隔、18列每列35px和20像素间隔、25列每列45px和10像素间隔、33列每列20px和10像素间隔。如果网页宽度是页宽980px我们可以使用：14列每列60px和10像素间隔、14列每列50px和20像素间隔、28列每列25px和10像素间隔。
用8当然不是因为数字吉利，而是因为 8 是偶数，并且8可以被成倍缩小三次！（就是8可以缩小一倍到4,4可以缩小一倍到2，这对于移动端适配来说太有优势了）考虑到移动设计中的适配特殊性，缩小到其它尺寸可能会出现虚边和半像素，用偶数可以避免这种情况。 为什么是8？因为比如1920×1080、1280×1024、1280×800、1024×768都是8的倍数（尽管部分尺寸不是8的倍数，但也不会显得奇怪）。除此之外，我们在做其它设计时也可以将不同的留白设计成有倍数关系的数字，比如10px、20px、30px等，让设计内部更有逻辑性。
黄金比例是一个定义为 (√5-1)/2的无理数。 运用到的层面相当的广阔，例如：数学、物理、建筑、美术甚至是音乐。 黄金比例的独特性质首先被应用在分割一条线段上。如果有一条线段的总长度为黄金比例的 分母加分子的单位长，若我们把他分割为两半，长的为分母单位长度，短的为分子单位长度，则短线长度与长线长度的比值即为黄金比例。
黄金比例（以下简称「黄金比」）约为： 0.618:1。
△ 使用黄金比例设计出来的苹果logo
斐波那契螺旋线也被叫做「黄金螺旋」，是根据斐波那契数列画出来的螺旋曲线，自然界中存在许多斐波那契螺旋线的图案，是自然界最完美的经典黄金比例。斐波那契螺旋线，以斐波那契数为边的正方形拼成的长方形，然后在正方形里面画一个90度的扇形，连起来的弧线就是斐波那契螺旋线。
斐波那契数列（FibonacciSequence），又称为黄金分割数列。在数学上，斐波那契数列是以递归的方法来定义：
F0=1
F1=1
Fn=Fn-1+Fn-2
△ 符合斐波那契螺旋线设计的Twitter logo
以64px为一个单位，即a=64px。那么大正方形的边长的一半=8a，大圆半径=7a，中圆半径=4.25a，小圆半径=3a。 8a/(8a-3a)=1.6 小圆与大正方形接近黄金比 7a/4.25a≈1.647 中圆与大圆接近黄金比 4.25a/3a≈1.417 中圆与小圆比例接近√2 整个栅格系统中的尺寸都是通过黄金比例互相联系的。
△ 内部符合斐波那契螺旋线和黄金分割的IOS启动图标骨骼
iOS的启动图标非常重要。并且苹果规定所有应用程序的启动图标都必须是圆角正方形作为图标背板。这个背板也给我们了一些参考线，苹果使用黄金分割和斐波那契螺旋线将画面分割为若干部分。如果我们绘制启动图标时可以贴合这些参考线。8a/(8a-3a)=1.6 小圆与大正方形接近黄金比7a/4.25a≈1.647 ，中圆与大圆接近黄金比，4.25a/3a≈1.417 中圆与小圆比例接近√2。
平面与版式的设计知识涵盖了字体的选择、图片的选择、平面构成基础、排版的CRAP原则、栅格化设计、黄金比例等多个知识点。如果我们现在接到一个需求，可以首先将内容放进画面并排列好重要性、然后选择合适气质的字体和图片、使用CRAP的排版原则将信息排成合理的顺序、利用栅格化和黄金比例让画面更加科学、最后如果发现画面比较空可以加入几何形装饰。怎么样，思路清晰了吗？平面与版式知识背后是人类读取信息几千年来形成的习惯以及现代社会约定俗成的阅读方式和心理学等，要想成为一个优秀的设计师，我们还需要进一步地了解设计背后的原理以及表达信息的多种方法。希望本篇文章能够对您的平面与版式设计有所启迪。
可拓展性原则是我自己瞎起的一个名字，高兴的话你说弹性原则也行。主要意思是指界面设计要足够的灵活，具有弹性，以满足将来可能出现的场景。我第一次考虑这个问题是从去年7月份开始，当时接到领导的一个临时需求，要给直投项目增加一个到期查询的功能。因为原来的界面设计比较死板，所以突然加一个新功能导致整个布局都被打乱了，结果做的很不理想。当时我就希望可以找到一个方法来应对领导这种突如其来的需求。
产品设计的可拓展性就是为了应对将来未知的改变。改变来自于功能的改变，因为产品是由一个个功能组成的。功能的改变可以分为两类：数量的改变和状态的改变。当然这里不涉及到具体的功能设计，只是探讨功能入口的展示。
数量的改变指的是功能的增加，删减与合并。多数是指新功能的增加，这就要求我们在界面（布局）设计中要给将来可能添加的新功能预留坑位。在哪里预留坑位？又给哪些功能预留呢？这里我就例举最常见的两种界面布局(导航)样式来说：宫格式布局和列表式布局。
不知道大家有没有注意到一个现象：一级页面中主要用宫格式布局，而二级，三级页面多数用列表式布局。这主要是因为一级页面是产品的门户和脸面，而且又多属于功能的聚合页，特别是首页，这就要求一级页面在展示足够多入口的同时还要兼顾视觉吸引力。而以icon，插画，图像为主要表现形式的宫格式布局在视觉设计上更容易出彩。特别是icon，在相同的空间里，可以展示更多的入口。
但是其缺点就是可拓展性差，不管是2*5还是3*4，你如果想单独新增一个功能，界面就会失衡。当然我们可以给用户提供分页，这就意味着有些功能需要用户滑动才能看到，具有一定的风险。
还有一种方法就是提供全部按钮，用户点击可以查看全部功能。
列表式布局就没有这方面的顾虑，它可以在不打破界面布局的情况下增加新功能入口，但是它的缺点在于可展示的入口太少了。宫格式布局一屏可以展示20多个入口，而列表式布局只能达到其一半的水平。
这也是经常困扰设计师的一个问题，因为数据反馈一个页面超过一屏往下内容的点击量是急剧下滑的，所以一般的一级页面都不会设计的很长。如何在有限的空间里展示足够多的入口呢？
没有什么是可以难倒我们设计师的，最近我看到一些产品在底部栏tab里动起了心思。以苏宁易购为例，当你点击进入「发现」，tab会变成「直播大厅」；点击进入「首页」，tab会变成「猜你喜欢」。所以虽然只有5个坑位但是塞进了7个tab，这是一个很好的思路。
还有在京东首页中，用户下拉会进入520专属活动页面。同样的还有微信，用户下拉直接显示你最近打开的小程序。但是目前来说，大多数用户还认为下拉只能刷新界面，对于「下拉发现新功能」足够的缺乏认知。这样的入口可以吸引多少的流量还有待检验。
对于一级页面我还有一个建议：千万不要随意把功能入口放在顶部栏上。因为对于一些小功能的迭代，入口放在哪里都一样，用户看得到很好，看不到也无所谓。但是如果要上线一些层级比较高的功能，又不想打乱界面的原有布局，最好放到顶部栏上。特别是你的界面中如果还没有搜索、城市定位、分享、筛选、通知等全局功能，一定要把顶部栏的位置空出来。文章开头我说的「到期查询」其实就属于筛选功能。
上面也说了，本文所提到的可拓展性指的是入口的可拓展性。那么入口在状态上的变化可以分为外部状态变化和内部状态变化。
外部状态变化主要说的产品层面的变化，针对的是C端产品。对C端产品来说，定期组织营销活动来拉新肯定是必不可少的。这种情况下我们需要对界面的元素进行处理使其来适应不同的活动氛围。从这个方面来说，我们可以发现为什么宫格式布局更容易受到各大电商平台的青睐。因为它可以根据不同的活动配置一套完全不同的icon，灵活多变。这种状态上的百变来打造营销氛围的能力是列表式布局所不具备的。
列表式布局可以向用户传递更多的信息，更能表现内部状态的变化。以下图为例，用户可以知道自己还有一张优惠券没有使用，知道自己本月还有126元没还。而宫格式布局碍于空间，很难向用户展示过多的信息。
以上方的日历为例，近期做了一个拆红包活动，用以icon为主的宫格布局只能加一个「拆红包」的角标。如果采用了列表式布局，可以直接展示金额，更能起到刺激用户的作用。
写分析总结写到现在读者越来越多，所以愈发担心自己写的不好会误导别人。对于设计来说，无所谓对错，只有合适和不合适。就像上面提到的两种布局方式，在列表式布局中你可以随意添加新功能，但是碍于空间，可添加的功能数目也不会太多；宫格式布局倒是不怕入口放不下，但是会引起界面的失衡。设计师的能力就体现在收集用户数据，分析具体场景，去思考得出最合理布局样式。不要拘泥于解决方案，因为解决方案有很多，我们要学习的是解决方案中所体现的思维方式和过程。
以上就是我针对产品设计中可拓展性原则的一个简单分析总结，欢迎大家留言讨论。
作为互联网的用户体验实践者-交互设计师，大大小小经历过很多不同种类不同维度的项目，比如成熟期产品的常规迭代项目（如社交指数、校园问答、空间社交周报、Feeds新增礼物等），这时我是哪里需要就在那里的问题解决者；也会和产品一起探索新的产品方向，经历从0到1的探索型项目（如视界、AR相机、ABCmouse等），此时我是主动探索的问题解决者。近两年都在思考用户体验设计师该如何在互联网团队中发挥设计最大价值，最终达到“解决用户问题，创造美好产品体验”的终极目标。结合自己的用户体验设计从业经历，我尝试给设计做个定义：
设计就是从已知探索未知的过程，是一个不断解决问题的过程。
具体来讲，就是从发现问题/机会点后，通过“How”等各种方法手段去解决问题/机会点的整个过程。
而解决问题/机会点的各种方法手段“How”就至关重要，在寻求“How”的过程中，受到MIT媒体实验室教授Neri Oxman文章《Design and Science - Krebs Cycle of Creativity》一文启发，Neri Oxman在《Design and Science - Krebs Cycle of Creativity》中提出的类似克雷布斯循环的创造力的克氏循环（KCC），创造性的将人类的创造力四种模式-科学、工程、设计和艺术，形成创意循环的地图假设并进行了相应解读，阐释了学科之间不再是割裂离散的孤岛这一命题。感兴趣的小伙伴可以使用传送门：
英文版原文：《Age of Entanglement》https://jods.mitpress.mit.edu/pub/ageofentanglement。
中文翻译版本之【设计读本】媒体实验室教授Neri Oxman文章《纠缠时代》，揭示创意循环在科学、工程、设计与艺术中深层关系》：https://zhuanlan.zhihu.com/p/27951549。
拓展阅读：《Design and Science byJoichi Ito》https://jods.mitpress.mit.edu/pub/designandscience。
区别于“点对点”的解决问题，为了从更高角度更好的解决问题，类比克雷布斯循环和创造力的克氏循环（KCC），将“发现-解决”问题/机会点这一过程整体系统化，尝试提出系统性解决问题之 < 思考-行动 > 模型-Krebs Cycle of Design。
系统性解决问题之 < 思考-行动 > 模型主要包含以下8个阶段：发现问题/机会点- 系统性思考- 判断问题/机会点- 挖掘行动- 挖掘出真正的问题/机会点 - 解决行动 - 构建更好的产品（1小步）- 迭代进化思考 - 重新发现问题/机会点。
前文讲述了系统性解决问题之 < 思考-行动 > 模型-Krebs Cycle of Design，接下来通过具体的项目，说明如何通过“系统性解决问题之 < 思考-行动 > 模型”全局解决问题，这里采用一个从需求引发的未知产品探索，以QQ空间基础Feeds信息流产品为例。
作为腾讯典型社交产品，QQ空间已经12年了，那么对于12年的空间Feeds信息流产品日常需求，整体来讲具有以下3个特点：需求量多（面对多个产品不断快速迭代）、需求类型杂、需求内容小。
基于这样一个前提，为了更好的解决问题，仅仅只做需求是不够的，需要设计师发挥产品主人翁意识，这样首先我的角色定位无形中发生了变化，从单纯的设计师（产品需求转换者）转变为产品设计师（产品需求洞察者）。
角色的变化，进一步带来了解决问题思维模式的变化，从之前为单一用户需求而设计的线性解决问题思维模式转变为从点触发的系统性解决问题思维模式。
总的来讲系统性解决问题之 < 思考-行动 > 模型，以空间基础Feeds信息流产品为例。主要有以下几个阶段，并且每一个阶段都是上一个阶段的自然转化。
1. 提出产品需求/机会点。
2. 基于产品需求/机会点，从点触发，通过系统性思考，全面的思考分析。
3. 基于系统性思考，判断需求在系统中是否有价值。
4. 判断有价值后，继续深入挖掘更多的问题和机会点。
5. 综合判断挖掘真正的问题/机会点。
6. 确定真正的问题/机会点后，针对性的进行解决行动。
7. 阶段性的解决行动后，就向构建一个更好的产品迈出了一小步。
8. 构建更好的产品后，为了产品后续更好发展，进入新一轮的迭代进化思考。
9. 迭代进化思考后，就开始了新一轮的系统性解决问题，构建越来越好的产品和更加美好的体验。
在互联网公司，尤其是互联网产品比较成熟时（如QQ空间Feeds信息流产品），设计师通常扮演者产品需求转换者的角色，在常规迭代项目中面对产品经理一个又一个的小点需求，很多设计师都是基于点对点的需求进行功能细化，有些甚至可以直接开始详细设计；而系统性解决问题思考行动模型则建议“将产品需求直接转换为详细设计”的这一类设计师，在日常常规需求之外，可以跳出点对点的小需求，更加系统的思考需求&探索问题和机会点。
从已知的需求、问题和机会点出发，从点触发设计师全局思考产品。通过系统性思考，了解产品整体系统，该部分思考的维度和方法，通常从商业、产品、项目、用户等多角度思考，如商业工具（理解商业的商业模式画布）、产品工具（了解行业位置的SWOT分析法、发散创意的搜寻领域图和思维导图）、产品工具（理解阶段目标的目标分解图）、用户研究工具（量化理解用户的问卷和访谈、定性用户研究的可用性测试&焦点小组、模拟分析场景的体验地图）。而以QQ空间Feeds信息流产品为例，阐述如何更全局的系统性思考产品。
系统性思考第1步：从日常繁琐的小需求中跳出，从资源输入-内容输出维度，全局的了解空间的整体产品体系，比如核心UGC业务、运营相关业务、分支业务、广告业务等。
系统性思考第2步：基于资源输入-内容输出维度全局了解产品体系后，针对Feeds信息流模块，梳理出资源输入类型和各个类型所包含内容，以及触达用户的内容输出Feeds类型以及包含内容信息，分析输入输出不同对象关系，明确空间Feeds信息流的空间枢纽作用，为下一步判断需求/问题/机会点的价值提供依据。
基于系统性思考，分析判断需求在系统中是否有价值。对于QQ空间Feeds信息流产品，通过产品的系统性思考，会发现Feeds基于空间的枢纽作用，连接空间各个业务内容，并以Feeds产品形态分发给UGC和PGC用户。因此Feeds信息流的产品设计优化对于整个空间而言，都有极大的商业和用户价值。
判断问题/机会点有价值后，继续纵向深入挖掘更多的问题和机会点，该部分思考的维度和方法可从需求挖掘和设计调研/用户研究两个维度，从产品、用户等多角度思考，如现有问题挖掘的日常积累法、数据定量分析法、用户调研访谈等定性研究、头脑风暴等涌现挖掘法、用户核心行为的全链路分析法等。下面以QQ空间Feeds信息流产品，举例如何深入进行挖掘行动。
挖掘行动第1步：从项目团队内部（产品&开发&设计师）收集现有痛点问题，并将问题梳理归类整理，确定内部收集痛点问题重要程度优先级。
挖掘行动第2步：从用户“发表-浏览-互动”的Feeds信息流相关的核心行为路径切入，收集用户/专家反馈，并分析确定用户核心行为路径哪些问题与Feeds相关。
挖掘行动后，就可以从产品内部、用户本身等多维度得到N个问题和机会点，通过对问题和机会点整理判断分析，得出真正的问题和机会点。如针对空间Feeds信息流产品真正的问题点和机会点有2个：Feeds缺失系统化、Feeds关键触点暴露的用户问题。
确定真正的问题/机会点后，针对性的进行解决行动。不同的问题和机会点，可根据需要采用适合的解决行动。下面仅以QQ空间Feeds信息流产品，举例如何进行解决行动。
解决行动第1步：针对有多个问题和机会点的情况，首先需要明确解决问题的优先级，这里可以参考评估优先级的方法-知觉图、C-BOX图表（来自代尔夫特设计指南《设计方法与策略》），定义问题管理四象限，从“重要程度+紧急程度”两个维度分析确定解决问题优先级，其中横坐标轴代表紧急程度，从左到右紧急程度降低；纵坐标代表重要程度，从上到下重要程度降低。正所谓建造房子地基很重要，Feeds缺失系统化代表Feeds信息流的地基不稳，在地基打牢之后我们可以有针对性的解决用户关键触点暴露的问题，分优先级逐步推进解决问题。因此形成了以解决“Feeds缺失系统化”为基础，有节奏的探索解决Feeds关键触点暴露问题的解决策略。
解决行动第2步：解决“Feeds缺失系统化”，即Feeds设计系统化，也就是将整个Feeds产品体系化，进行设计的规范化和组件化，并在设计层面和开发层面统一共享资源，并应用到产品的后续迭代中。而设计系统化的典型代表Material Design，就通过从真实世界观察到数字世界模拟，构建了一个数字世界观，包含设计理念、设计原则、设计元素（如输入框、按钮、文字等控件/组件）、设计模式（如空状态、手势、搜索等）、工具等内容。 关于设计系统化（design system感兴趣的小伙伴可以查看《design systems》一书，购买书籍链接：https://www.smashingmagazine.com/design-systems-book/。
Feeds设计系统化主要有以下3个阶段：明确设计系统化目标 - 明确设计系统化思路 - 设计系统化过程。
首先是明确设计系统化目标，明确预期目标有助于我们在项目后期更好的评估系统化设计的价值和效果，空间Feeds信息流产品主要从3个维度明确目标：规范化（形成Feeds基础设计体系，保障Feeds整体设计统一性）、提升效率（可以快速复用，保质保量的支撑业务需求的快速迭代）、可持续原则（一句话就是跟得上潮流，不断的迭代进化）。
其次是是明确设计系统化思路，明确了目标之后，需要定义如何进行Feeds设计系统化的思路，主要有以下4个阶段：场景类目梳理- 抽象框架- 填充细节内容 - 建立设计规范。
在明确了设计系统化思路后，依据思路，通过以下4个阶段一步一步构建Feeds设计系统化：场景类目梳理- 抽象框架- 填充细节内容 - 建立设计规范。
设计系统化第1步：场景类目梳理，从场景出发归类所有的Feeds类型。
设计系统化第2步：抽象框架，首先将所有Feeds类型每个的结构模块化，其次通过“类比-分析-聚类”归类同类型框架，最后设定Feeds框架应用策略（不同框架的每个模块可采用LEGO自由组合策略）。
设计系统化第3步：填充细节内容，补充A/B框架类型中的填充元素（控件/组件等内容）。
设计系统化第4步：建立Feeds设计规范，提升产品设计效率，为后续设计夯实基础。
Feeds设计系统化项目，在产品设计内部也得到了广泛好评，一定程度上提升了产品设计效率。
解决行动第3步：有节奏的探索解决Feeds关键触点暴露问题，也就是Feeds设计有亮点。设计有亮点的探索聚焦用户的核心使用路径，在关键触点上发现亮点设计机会点。
首先是聚焦用户核心行为路径，从用户触点切入，深挖不同关键触点，收集用户/专家的反馈，并针对用户的关键触点问题探索出相应的解决方案。
其次在有了这么多的亮点解决方案后，先做哪一个再做哪一个，我们需要明确亮点设计功能实践优先级。此时就需要回归产品目标用户群，深度探索目标用户的特性，比如QQ空间的使用用户群体为95后，他们具有“创造、个性、有趣、表达”等特性，他们爱玩的产品有“弹幕、变声语音、斗图、鬼畜视频”，这些产品都具有“DIY、个性互动、满足成就感”等心理因素，因此针对8个Feeds亮点解决方案，优先在互动层面实践快评表情。
接下来就是如何进行快评表情产品设计，首先明确快评表情产品设计思路，主要有以下4个阶段：定义产品需求-明确产品目标-探索用户趣味表达心智模型-定义具体的解决策略
在明确了产品设计思路后，依据思路，通过以下4个阶段逐步推进快评表情亮点化设计：定义产品需求-明确产品目标-探索用户趣味表达心智模型-定义具体的解决策略。
亮点设计第1步：定义产品需求，需要明确正在设计的产品需求到底是什么？该需求要解决什么问题，或者满足了用户哪一方面的诉求；比如在QQ空间快评表情产品设计中，由于快评表情可能存在空间多个用户场景（如Feeds评论、发表Feeds、直播场景等）。为了快速上线快评表情，验证其可促进用户活跃度，首先确定了快评表情的具体产品需求，将其使用场景缩小为优化Feeds评论表情功能。
亮点设计第2步：明确产品设计目标，确定了产品做什么后，为了更好的评估衡量设计效果，我们需要在具体设计前先定义设计预期目标。如快评表情产品需求中，在具体设计之前，明确了产品设计预期目标，如增加评论趣味性、增强用户互动欲望、提升用户活跃度等。
亮点设计第3步：探索用户趣味表达心智模型，明确了产品设计目标后，我们需要更深层次的挖掘用户使用产品心理动机，从而探索用户的一个使用心智模型，心智模型有助于我们在更高更深层面让用户使用产品过程中超出预期。如快评表情设计中，基于目标用户探索用户互动心智模型，发现了以用户互动诉求为基础，满足用户个性化、专属感、控制感的深层心理动机，从而可以让用户达到最终的成就感，建立起用户与产品的情感联系。
亮点设计第4步：定义具体的解决策略，分析了目标用户特性和动机后，可以尝试定义“如何做”的产品设计策略，搭建/聚焦用户使用核心路径，在核心路径上明确用户关键触点，并基于核心路径形成关键页面，并最后给出用户超越预期的产品体验。如快评表情设计中，由于是原有的评论表情优化，因此在定义解决策略时，首先聚焦评论表情的核心路径，基于核心路径寻求机会点，并且根据机会点搭建全新的快评表情使用路径。
定义了具体的设计解决策略后，就进入详细的交互设计阶段，此处仅由于内容篇幅太长，仅做简要的一些核心点说明。主要有3点：
1. 聚焦用户评论核心路径，找到评论表情关键触点，探索设计机会点。
2. 基于评论核心路径机会点，新增用户关键触点，加强用户与产品、用户与用户之间互动反馈。
3. 搭建用户使用新路径，通过主动触发和被动触发机制，强化推荐互动。
阶段性的解决行动后，比如进行了Feeds设计系统化打好根基，探索了快评表情的亮点设计后，已经向构建一个更好的产品迈出了一小步。无论从产品内部评价和上线后数据验证结果来看，均达到当时的一个小小目标。如产品数据验证部分方法感兴趣的，可查看“用户行为数据分析”等方法。
正所谓“潮流是在不断发展变化的”，互联网圈的发展更是日新月异，因此为了后续产品发展的更好，需要进入新一轮的迭代进化思考。如果设计师在横向有一个属于自己的设计中心（或者设计团队），可以定期挖掘讨论创意想法，沉淀为创意资源库，从而更好的发挥设计中心横向优势，合力扩大影响力。如QQ空间内部就有Qzone idea的创意小组，定期输出创意想法，讨论，并向上汇报推动产品侧落地。
总的来讲，系统化解决问题<思考-行动>模型可以你“找对事 & 做对事”，“如何做设计的亮点深挖四部曲”具体化做对事的过程，两者相辅相成，合力打造更美好的产品体验。
各公司开发成功产品的方式已经在根本上发生了变化。智能手机、社交网络或云计算等新技术使苹果、谷歌或亚马孙等科技巨头在大约20年内成为最有价值的公司。
这是我的第一篇系列文章“精益创新——如何在今天开发成功的产品”。这是多年来创新的转变和产品开发的方法论。
所有这些变化的发生是由于人们消费产品的方式发生了转变而造成。为了迎合用户行为和对产品期待的变化，科技公司必须将产品方向转变为更灵活、更敏捷、特别是以用户为中心上，即从瀑布流到敏捷设计再到精益设计。
虽然现在仍然有95%的大型组织在用瀑布模型开发新产品，但行业领头公司已经在率先使用精益设计作为方法了。
瀑布模型是序列顺序的处理方法，进程就像瀑布一样稳定地推向目标。它要求项目产出全面的计划并提前开发。
瀑布过程
由于前期设计和分析花费了大量的时间和精力，设计变更会使成本变得更高，尤其是设计后阶段。每个设计节点都有清晰的目标，达成后将进入下一个阶段。这样防止了客户在最后发布前评论和反馈。即使征求了建议，项目在接受反馈方面也不那么灵活。虽然瀑布模型是一种不那么灵活的方法，但它对需要执行“计划”的团队（在预算范围内）更有益。
随着互联网的兴起，瀑布模型漫长的开发周期已经不再能够提前规划人们的需求。同时，随着电子商务的全球化和新经济模式的到来引发了更多的竞争。公司在开发产品的周期中不得不对市场趋势作出反应，因此，需要一个灵活的产品开发步骤。
“敏捷”指的是由17个软件工程师发布于2001年2月的一份宣言，他们必须就轻量开发方法进行讨论。它基于迭代的方法，而不是像瀑布模型一样在项目之初就进行深入的规划。开发团队为了保证首先完成最重要的任务，他们会不断调整项目的工作范围。
每次迭代的目的是为了实现一个可交付的产品。随着来自终端用户的持续反馈得到鼓励，敏捷开发能对不断变化的需求作出反应，因为随着时间推移它们都是被需要的。因此，在管理和减少需求变化的风险方面，这些方法对项目来说是正确的选择。
我们都知道以人为中心的设计，设计思维作为一个概念已经存在一段时间了，只是名称不同（以用户为中心的设计、服务设计）。设计思维因得益于它解决问题的技巧和科学的方法而成为时尚。设计思维过程和方法的普及与2001年的IDEO有关。
“设计思维是一种以人为本的创新方法，它从设计师工具箱里汲取了灵感，将用户的需求、技术的可能性和商业成功的要求结合起来。”
汤姆布朗，IDEO创始人。
“设计师工具箱”是一个与设计师的方法和过程有关的应用——包括思考创造力、灵活的创意以及对用户行为和需求的清晰理解。设计思维是一个由4个基础阶段组成的结构化流程。
从目标群体的发现阶段开始，所确定的需求和问题将被合成一些主要的见解。这些见解是概念阶段的基础，这个阶段的目标是产出许多想法，而最有希望的想法将被作为原型进行开发。原型测试是最后一个阶段，这个阶段需要确保解决方案满足目标群体的需求。
设计思维之所以产生，是因为大公司缺乏创新能力，无法开发出能满足客户需求和客户问题的创新产品。如今，大多数的公司都使用分析思维来作为运营方式。这种分析思维阻碍了创造性（打破常规）思维的发展，而这种创造性思维是破坏性创新所必需的。
这种创造性，特别是大胆的思考（有些称为“疯狂思考”）与设计概念有关。为了创新，企业必须具备设计能力。为了设计，一个组织需要内部融合设计，以孕育出一种培养创造思维的文化。
设计思维的显著差异在于将用户置于每项活动的中心。此外，以人为本的设计强调体验胜于效率，因为良好的体验是用户与产品互动的动力。
2011年，随着Eric Ries《精益创业》这本书的出版，创新和产品开发实践已经向精益方向发展。精益创业的目标是避免开发那些没人需要的产品或服务。精益过程包含用户反馈和产品早期实验。
精益创新以“失败来了成功还会远吗？”的哲学而闻名。开发者接受这种失败，因为他们获得突破性成功前是要需要不断学习的。
精益方法也常被称为“客户开发”。它的目标是在搭建最终产品前，找出用户想要什么。精益的原则是建立你正在试着测试的假设和设想，而你通过在这些实验的学习，将会取得进步。
数字化和巨大的变革速度不再允许公司在不考虑客户需求的情况下简单地生产产品。在过去，向客户提供错误的产品只会导致项目失败。而今天，持续不能交付客户所需的产品，将导致整个商业模式的失败。诺基亚或柯达只是这里提到的两个最著名的失败案例。
智能手机、云计算和开源等技术使得产品的开发速度更快、成本更低。开发产品或进入市场的的门槛比以往任何时候都要低。这意味今天有更多的全球竞争。公司需要专注于了解用户和他们想要什么。客户可以很容易地转向其它产品。品牌忠诚度对消费者决策的影响逐年下降。
精益和设计思维都是以客户为中心、基于迭代的方法。客户参与和反馈是取得进展的动力。精益创新的关键不同之处在于，它在围绕产品考虑整个商业模式时更进一步。
亚马逊成为电子商务的领导者的原因之一是他们对客户服务的坚定承诺。虽然他们没有靠这个挣过一分钱，但是却帮亚马逊获得了客户的信任和忠诚。如今，成功的公司区别于他们的商业模式，而不是他们的产品供应。
在新世界中，成功的公司将有一个共同点：对用户行为和需求的超常理解。随着行为和需求的快速变化，确保建立客户需求的唯一途径就是让用户持续的参与到项目中来。准确的用户理解是长期商业模式成功的基石。
虽然设计思维，精益设计和敏捷开发可以单独使用，但是最好的结果来自这些方法的结合。设计思维有助于深入了解客户的需求和行为，而敏捷开发则有助于地开发和交付解决方案，精益方法的实践帮助我们在用户参与的假设测试中可以获得更直接的验证和学习。
当持续使用“开发–测试–学习”这个模式循环，就可以逐步接近一个成功的产品和有率的商业模式。
每天打开手机，各式各样的信息纷至沓来，每个 App 每个页面都有好多话要说。当信息汇集在一起的时候，如何能让用户一打开页面就能轻松理解各个信息元素之间的关系与差异呢？这就要靠我们设计师在设计之初构建合理的视觉层次了。一个页面的信息层级是不是清晰明了，很大程度上影响到用户的信息获取效率和使用体验。
在平面和网页设计中，视觉层次一般分为三层：主层（Primary）、副层（Secondary）和三层（Tertiary）。其中主层一般是指头条标题等核心信息，也是要让用户第一眼就注意到的信息。副层可以是小标题等信息，展示出主要内容与提纲。最后的三层一般由正文或其他额外信息构成，展示全部的内容，可以用较小的字号。
△ 图片来自网络
不过当我们在设计移动端页面的时候，因为屏幕尺寸的限制，有时候需要酌情减少页面的层级，这样才能让信息不会过于繁杂。
一般一个页面会根据功能分为多个模块，下面我们就从「模块内」和「模块之间」两个角度来谈谈如何构建合理的视觉层次。
我们所说的「模块」指的是什么呢？可以是一张卡片里面的内容，也可以是一个信息列表等等，总而言之是一个信息组。当我们拿到需求的时候，应该理解每个信息组里面的每条信息的价值，并且给他们分一个类。
比如有时候，PM 同学跑过来说：「我想加个大按钮」，「不想让用户注意到删除功能，但是一定要有」 ，或者「这次就想试一试，展示了这条信息点击率会不会涨」 ，又或是「这条信息展不展示都行，你设计的时候自己看吧……」 好好好，需求我都懂，那么该如何分类呢？
四象限法则相信大家都听说过，那么我们就改编一下这个法则，给每个信息组中的信息按「重要——不重要」「必要——不必要」来分个类吧。
面对又重要又必要的信息还等什么，一定要大要明显，让用户第一眼看到。
重要却不必要的信息，一般是从产品或流程本身来讲不是一定要有的信息，但是因为某种原因想要突显给用户，比如在信用卡的产品列表中加入每张卡的推荐理由，或者在餐厅列表中展示某某名人去过这家店……这些信息在列表中不是必须有的，但是对于引导用户判断又十分的重要，所以我们可以次一级的来展示，要让用户可以注意到，但也不能抢了风头。
哪种信息是必要但不重要的呢？比如一个活动弹窗的关闭按钮，一个订单的删除功能，一条免责声明等等，我们不希望用户注意到他们，但是这些功能又不得不存在，那么就要弱化展示这些信息。
不必要又不重要的信息，一般情况是要去掉的，除非在设计中信息太少了空荡荡的，为了排版美观才会把这种边缘信息留下占位。
接下来，当我们整理好信息层级之后，要靠什么手段来展示这些层级呢？答案是加大对比。
1. 大小
对比的第一步就是大小的对比，在大家的认知中，大的东西比小的东西更显眼、更重要。用户会自然而然地关注到尺寸较大的文本和尺寸较大的图，比如下图中一张足够大的信用卡卡面图片，一秒吸引目光。再比如页面中的大标题，都是这样的效果。
△ 截图来自查查公积金
在内容列表中，标题名字类的信息一般会使用14-17dp左右，补充说明内容一般使用11-12dp左右，具体的使用情况要根据信息的多少、信息的重要程度、上下对比等情况来进行具体的设计。
△ 图片来自融360、微信
2. 重量
有时候由于空间的限制，字号不能再大了？字号大了也没拉开层次？试试增加字重量吧。iOS&Android 由于字体不同，加粗的效果也不同，请酌情增减。
3. 颜色
颜色对于用户的感知有着巨大的影响。所以在进行视觉层次构建的时候，不同的颜色可以轻松构成层次结构，强烈的颜色比如红色、橙色都很容易引人注意。白色和浅灰通常可以用来作为大面积的背景色，和其他的颜色构成对比。在设计的时候可以运用 App 的主色和辅助色来拉开视觉层次。
△ 图片来自查查公积金、融360视觉规范
4. 对比
我们以上图这个贷款列表举一个综合的例子，四条信息从最突出到最弱化分别标为了1、2、3、4，这几条信息中的字号以至少6px的差值进行递减，并且只有前两条信息进行了加粗处理，同时颜色的选择上也是从强到弱：
大小、重量、颜色的运用，归根结底就是制造对比，这也是创建层次结构依靠的核心。一个元素和另外一个元素构成对比，才能有层次的展示他们之间重要程度上的差异，让用户更加容易获取到信息。
当我们已经合理的排布了一个模块内的视觉层次，接下来要做的就是把多个模块组合起来。
心理学家基于格式塔原理来检测用户对于元素之间关系的视觉感知，发现人们倾向于将视觉关系靠近的元素群视作为有关系的一组。值得说明的是，位置接近的元素，即使色彩形状大小都不一致，但只要他们足够靠近，都会被人们视为一组。
△ 图片来自网络
视觉层次的建立很大程度上是基于格式塔原理，所以我们要关注 UI 元素之间的靠近性。
基于这种认知，即使每个模块之中的内容有对比有强弱，但是只要每个信息组之间的元素的距离较近，并与其他信息组之间的距离拉远，留下足够的留白空间，就可以清晰的将整个页面的层次拉开。留白和元素本身之间构成的疏密对比，会更好的让用户注意到留白包围下的内容。
△ 图片来自网络
现在很多 App 都是通过对比与留白来进行页面中的「无形分割」，减少了很多线和块的运用，让页面更为简洁。基本上原则为：文字与图片对齐，与相关内容的间距要小于其他内容，标题要大。
△ 图片来自 Airbnb
当字体足够大的时候，会比小字符更有「图形感」，更加突出，可以更明确的告诉用户从这里开始是下一段了，字号一般在20-24dp之间，根据内容和整体风格来决定，颜色一般选择比较深的颜色 ，必要的时候可以加粗。当其他内容都是比较小的文字的时候，栏目标题也要控制一下大小。如果图片较多，标题就可以再大一些。
具体多大，就要在页面和谐的基础上多试几次……
△ 图片来自查查公积金
如上图，在查查公积金 App 中，当我们设计信用卡详情页的时候，由于整个页面里图形比较突出，看起来用加粗的「办卡礼」、「专享特权」标题更合适一些。可是在同个 App 的公积金详情页里面，整个页面用色都比较清淡，内容都是一些文字信息，如果内容标题加粗的话会显得比较突兀。所以综合整个 App 的页面风格权衡之后，还是选择了左侧没有加粗字体的设计。
总体来讲，UI 设计是没有公式的，只能有经验之谈和大体上的建议，很多时候都要设计师一次次的去尝试、去对比、去感受，才能给出针对当下页面需求最合理的层次构建与解决方案。
蓝蓝设计的小编 http://www.lanlanwork.com