在这里先给大家分享一组近期APP使用过程中发现的UI&交互知识点，大家可以一起学习交流，对于个人观点不认同的可以在下面留言探讨，thanks~
产品即场景，体验又贯穿整个产品~孰重孰轻早已分不清
产品即场景，而场景化核心要素之一的“体验”，是其中最重要的一项。
本文从体验出发，结合AARRR（用户增长）模型进行阐述，其中我认为该模型的使用必须是在产品搭建的场景下才能运作的。而其中涉及每一步的良好体验刚好又反哺场景的完善。
从获取-激活-留存-转化-传播每一个步骤中都存在内部因素和外部因素。本文只讲内部因素，产品从最开始的外部获客，转向产品内部的使用体验，再转向外部传播的这么一个过程。
文章不是教案，更不是真理。希望大家带着批判的眼光去看待每一篇文章。毕竟思辨精神才是形成独立思维的法宝。由于文章较长，我会分成上下两部分发布，进入正文：
获取（ACQUISITION）分为三个部分：
一：自然流量的获取
自然流量的获取，我们能干涉其中的体验非常少，只能打磨产品本身。但是自然流入的用户一定是基于以下几个点中的其中一个或多个。我们或许可以干涉体验前~
1.某个社会现象、热点所引发的相关功能性需求（例如前不久滴滴司机杀害空姐事件，引发多少芳龄少女的恐慌。提高了强烈的安全意识，这时候你会发现App Store里面一款app杀了出来“怕怕”（有兴趣的朋友自行下载体验），正是这个社会热点现象引发的自然流量暴增。当然也不排除产品借这个热点营销自己的产品）
2.某个痛点确确实实需要解决（当某类用户存在某个痛点时，会自己通过搜索或者同类产品对比选择一款产品进行使用，如果你的产品刚好能帮助使用者解决痛点，那么你成功吸引了用户。）
3.纯粹进行产品的体验（产品发烧友、同类竞品的体验人员、无意中下载的等）。我们称为无效流量，因为这部分用户一般是不太可能成为产品的忠实粉丝的。他没有明确的目的、没有明确要解决的痛点。
二：运营推广的获取
运营推广这个名词在互联网诞生之前就已经存在了。只是说原来传统的营销手段即产品-价格-渠道-促销开始逐渐失效。转而变为场景化的运营推广。将推广落实到具体的小场景中。
1.线上推广
其中线上推广包含线上营销活动（营销活动又分为已有话题进行营销【可以选择融入当前的热点话题类似节日、娱乐圈大事件等】&【提供话题痛点解决方案进行营销】和制造话题营销【创造业内的话题】【通过深度用户进行制造话题】、优惠活动（包括邀请好友得好礼、会员优惠、某个节日优惠等）。线上推广无非就是通过网络搭建虚拟场景，通过场景边界的不断延伸，覆盖吸引更多的用户参与进来。
2.线下推广
线下推广包含地推（地推不可避免的会带来2部分的人群：被地推活动中的奖品吸引的人；确实被产品的介绍所吸引的人）、海报&代言（同样会有2部分人群：被明星效应所吸引的人；被产品介绍所吸引的人）、门店的互相导流合作。线下推广效率远远没有线上推广来的快。但是对于需要线下场景的产品来说，这又是必不可少的。
三：社群自传播
通过单点击破，这就需要运营团队有很好的洞察能力，找到符合产品调性的社群，通过事件引爆该社群或者社区，让社群成为你产品的拥护者和传播者。
1.通过老带新的模式进行获取用户
当产品与老用户之间建立很好的纽带关系后，老用户自然会以个人为中心，向外帮你宣传产品。
2.引爆社群
通过各类社区，找到符合你产品的目标人群。通过对该社群的研究，运用社群内部语言或者表达，调动整个社群帮你发力。有点及面的扩散，称之为“气球理论（很细的一根针就能戳爆气球）”这同样是能引爆传播性特别重要的一点。
3.参与感（社会关系绑定）
当你周围的人都在转发或者都在使用的时候，如果你不了解或不使用的话，会引起个体的孤独感。也就是说“他们都在玩，我不玩就落伍了”，但是这种情况在产品推广的前期一般不太会出现。当传播势能达到一定程度的时候，才会出现刷爆朋友圈！
激活（ACTIVATION）分为二个部分：
当用户从外部导流进产品后，这时用户的去或留都跟产品&业务有关。如何让用户在进入产品后自然而然的进行使用也就是防呆原则。对，通过引导或者吸引使用者进行下一步操作。（打个比方，你去一家陌生的餐厅，进去后没任何人招呼你，没人告诉你要去选位置或者点菜，是不是有不知所措的感觉，我想你很快就会另寻他家吧）
一：进入产品后的操作引导
1.视觉引导（包括页面元素优先级、页面元素突出强弱进行视觉上的引导，很常见的就是：在你第一次使用某个产品时，会引导使用者进行第一步第二步的操作，降低用户对产品的陌生感）
2.动效引导（通过页面浮层的形式教育用户如何进行操作，这也是在产品设计中，对新用户的一种引导方式）说到底就是为了消除用户对新鲜事物的陌生感和手足无措感。
二：产品本身是否能激起用户的探索欲
当然这个问题本身是建立在是否能真正的帮助用户解决某些方面的痛点。否则再强的探索欲，也跟你产品本身没有关系。如何激起用户的探索欲？
1.产品整体视觉表现、使用流程的体验是不是够吸引人，是不是有属于产品本身吸引人的点。（当年的path效果，直接将它送上全民热潮之巅）
2.产品是否对使用者产生持续的吸引能力，产品前期只有不断的通过各种方式刺激用户。（产品体验优化、活动力度、宣传方式、让惠让利等）但需要注意的是：过度营销不等于有效刺激。
3.产品的任务流程设置是否合理，正常情况都是由简单到复杂的程度设置任务，由于用户的沉默成本，当完成一定任务后，就会沉淀下来慢慢成为产品的忠实用户。（摩拜产品是先让用户填写个人信息，最后才提示充值押金，站在使用者的角度来看，已经把个人信息都出卖给平台了，还在乎那200多块钱吗？不然你让他把流程倒过来试试，先充钱，再填信息。保证没多少人会用）。流程设置就像钩子一样，慢慢慢慢的把用户勾住。
上半部分先到这里，下半部分会从“留存”“转化”“传播”角度进行展开~
多数人能够成为很厉害的设计师，很厉害的产品经理。凡事都会有所谓的套路，当你熟知了解某个行业，或者多个行业的套路时。你会站在更高的视角看待问题，同样你会走的比人家更远更快。所谓的套路，是基于个人而言，可能你有个很好的导师能够告诉你以往的经验。但是我更认为，套路是通过一步步看似笨拙的努力不断总结不断归纳
峰终定律是由诺贝尔奖得主 DanielKahneman 提出的，百度百科上它是属于心理学上的定义。
我把它结合了自己的理解应用在设计学上可以解释为：
用户在使用某个硬件产品，软件产品或者服务系统来完成自己目标的过程中，用户情感地图曲线的波峰（体验最好）、波谷（体验最差）、结束点的体验，决定用户对整个过程的体验评价。
而在过程中体验好与不好体验的比重，好与不好体验的时间长短，对记忆几乎没有影响。
这一定律主要是阐述人对过去体验的记忆由两个因素决定，一个是「高峰」，一个是「结束」。
把用户情感地图曲线和峰终定律结合起来，简单画一张图：
既然用户整体体验与整个过程中好坏综合无关，只跟几个关键点有关，那么可以得到一个公式：
用户整体体验评价（E）=（y1-y2）+y3
y1，y2，y3 可以称为关键时刻 MOT（Moment Of Truth）
这两天和包子聊到宜家的峰终定律，突然明白了为什么我们有些课程调研，大家都喜欢去宜家调研了。
虽然它的店员很少，找货物也要自己找椅子搬下来，就算只买一件家具也需要逛完整个商场，但是每次逛完结束的时候都可以吃那个特别好吃的「一元冰淇淋」呀，这就是它的「终」。
而在逛的过程中，就像包子讲的，它的体验模式很棒，把产品作为空间的一部分。曾经有一位宜家的老顾客也说，宜家商品物有所值，展区实用，产品随意试用，大概这就是它的「峰」吧。
扔一个我的学习小伙伴包大佬的分析：
如果说峰终定律怎么影响互联网产品的用户体验的话，可以先举几个体验差的例子。
很多时候，用户在某个平台完成某个任务后，会出现很多引诱用户点击的赞助商的内容。比如问卷星，每次填完，任务结束的时候，它还会打着抽奖的名义接广告……
再举个例子，你有没有过在某些 app 注册账号，登录 or 注册很多次却失败的情况，或者花了很久时间才注册 or 登录成功？原因可能是账号密码错误，可能是注册流程过多跳出率过高，可能是填写信息冗杂……
如果这款产品不是用户刚需的话，最终会导致很多用户卸载它，就算你之后流程的体验再好，用户根本无法体验到最后。
一款好的产品不仅能够解决用户的「痛点」，也能刺激用户的「痒点」，更能打造用户的「爽点」。
有一些产品能在用户使用的过程中利用峰终定律打造 「爽点」，提升用户体验。
如果用外卖这个来举例子的话，应该算是一个大的服务系统，它会涉及到很多方，比如消费者，商家，骑手等，而这一整个服务系统的设计，只针对消费者而言，流程也会十分复杂，其中利用峰终定律考虑的就更多了。
那就其中用户（消费者）与饿了么 app 的交互流程来举例的话，用户点外卖这个任务：
从打开 app——选择店——选择美食——付款，用户的任务已经结束了，但是饿了么会在结束的时候，给用户一个分享领取红包的福利，用户会觉得自己获得了很大的优惠，体验会十分好，这也就是利用了峰终定律的「终」。
我发现游戏里面对峰终定律是用得最多的，曾经玩过 lol，王者荣耀，吃鸡手游……
如果问曾经玩 lol 或者王者最爽的时候是什么时候，那大概是：比赛过程中的 First blood，penta kill ，killing spree，legendary，you have slained an enermy 等这些配音和画面的视觉刺激吧。
按照常规的模式是，杀人后系统直接提示「您已经杀灭了一名敌人」，但是它会去强化这种杀人的体验，将杀人的场景分为多种类型，通过视觉上的弹框击杀提示与配音上的激励叠加，把杀人的体验不断深化，做到，另外在推塔和偷掉水晶的时候是不是也是最爽的时候呢？我觉得这里就利用了峰终定律的「峰」。
我记得在游戏结束的时候，比如 lol 里面推掉水晶的时候，游戏画面会停止几秒，然后再出现水晶慢慢破灭，加上大大的「胜利」二字，有的时候回到大厅还需要等几秒的时间。
王者荣耀，吃鸡这类在游戏结束的时候也会给用户很多激励，明明可以在结束后直接回到大厅，但它们会延长这些胜利或者失败的体验，如果胜利，当然是爽，还想再拥有这样的体验，继续打；如果是失败，那再接再厉，想拥有赢的体验，继续打……
总之就是会让用户上瘾。它们会把这些用户体验做到，在游戏结束的时候这些的体验就利用到了峰终定律的「终」。
「峰终定律」改善用户体验的步骤：
在《用户体验的要素》一本书中，Jesse James Garrett 将用户体验分为了五个层级，战略层，范围层，结构层，框架层，表现层。
其中在框架层里面有一个很重要的概念就是导航设计，作者对导航设计的定义是：元素的组合，允许用户在信息架构中穿行。
我觉得可以把导航设计理解为：我们从用户的心智模型出发，结合业务目标，对信息架构的一个梳理，来帮助用户完成目标。
通过自己手机里几十款 app，总结了以下六种导航设计模式，包括：标签导航，宫格导航，侧边导航，列表导航，菜单导航，轮播导航……
简单介绍了它们的优缺点，适用场景，以及一些衍生导航与相关案例……（不过导航设计一定是视产品和情况而定的，并没有确定的依据与理论）
标签导航分很多种，有底部标签导航，顶部标签导航，底部标签导航又可以衍生出舵式导航，顶部标签导航又可以分为静态或者是动态导航……
底部标签导航是最基本的导航，几乎绝大部分 app 中都在用，tabbar 位于页面最底部，一般3-5个 tabbar，有文字+icon，也有纯 icon 形式，但大部分是文字+icon 的形式，我想是减少用户记忆负担吧，如下：
而关于底部标签导航的优点，缺点以及适用场景也简单整理了：
我发现很多用户发布或者生产内容的 app 会将底部标签导航进行变体，很多人把它称为舵式导航，就像这种：
中间的「+」一般是发布的意思，并且是 app 里面使用最频繁的一个功能，一般都会重点突出。并且，该标签中很多时候会有二级导航，二级导航里可扩展性就比较强，如图：
而顶部标签导航顾名思义就是 tabbar 位于顶部，最早知道它是在 Material Design 里面，因为 Google Pixel 手机底部存在物理导航，所以将标签导航置于顶部不会显得突兀。它很少用作一级导航，一般是二级导航比较多，而且我发现顶部标签导航，几乎都是纯文字的形式，比如：
突然想到今天交互设计课上的时候，老师讲的人机交互里，重要的操作放在大拇指可触达的范围内。
而顶部标签导航，如果是点击标签进行操作的话，用户单手操作就十分不方便，所以我发现体验好的 app 的顶部操作导航都是可以直接通过左右滑动屏幕的交互来切换。
而当标签类目过多的时候，可以通过左滑展现更多标签，比如很多新闻阅读类的 app：
如果是可以滑动查看更多的话，一定要通过一些方式告诉用户可以滑动查看更多，比如最后一个标签隐藏一半的方式等：
关于顶部标签导航的优缺点以及适用场景，如下：
宫格导航，也是十分常见的导航形式，除了一些工具类 app 外，大部分是作为二级页面展示出来，并且以 icon+文字的形式居多。
如果将宫格的 icon 换成 picture 的形式的话，可以衍生出一种新的类似于卡片式导航的形式 ，可以通过垂直滑动来切换，比如：
那，如果宫格信息太多，我发现很多 app 会采用分类展示的形式，并且通过水平滑动的方式来切换，比如：
但是上面两种可以垂直或者水平滑动的形式，一定要让用户知道是可以水平或者垂直滑动的，采取的是边界地方信息只展示一半的形式，告诉用户可以继续滑动……
除此之外，宫格导航还可以在电商里面运用，在首页的运营内容块，它可以根据内容的重要性调整模块的大小，比如：
关于宫格导航的优缺点和适用场景，如下：
有些书里面会把侧边导航叫做抽屉导航，这类导航其实比较少了，原本也是从 Google Material Design 里面提取出来的概念，一般会在首页呈现一个主要功能，将其他不常用的功能收纳放到侧边导航里，比如：
而关于侧边导航的优缺点以及适用场景，如下：
列表导航也是十分常见，几乎在每一个 app 里面都会存在，大部分时候是作为二级导航存在，但是也会存在于一级导航的时候，比如邮箱，iOS系统自带的设置等。
一般在列表导航里都会有下一个层级，可以通过箭头来告诉用户是否有下级菜单。
当列表信息比较多的时候，可以对列表进行分类，可以添加小标题或者直接分隔开。比如：
而在有些列表导航里，我们还需要展示给用户一些预览信息，比如 iOS系统里的健康，个人信息里的一些基本数据展示，如下：
关于列表导航的优缺点以及适用场景，如下：
其实菜单导航也可以称为下拉导航。这也是今天上交互设计课的时候，老师以微信的「+」为例子介绍的一种导航形式。最初了解这种导航形式也是来源于 Material Design 里面的 Menu。
Menu 是临时的一张纸（paper），由按钮（button）、动作（action）、点（pointer）或者包含至少两个菜单项的其他控件触发。
比如：
当信息层级变多的时候，菜单导航里要展示一层或者两层信息，比如大众点评采取的形式：
关于菜单导航的优缺点以及适用场景，如下：
还有一些导航比如轮播导航，完全的沉浸式体验，高度简洁的导航，比如天气，但是这种导航因为轮播点的大小不会很明显，所以用户很难快速感知自己所在位置，并且轮播导航轮播的数量也不宜过多 。
其实导航的类型应该还有很多，并且在一个 app 里面几乎不可能只使用一种导航，哪怕只是一个页面，也会存在多种导航的组合形式，比如：
描边插画：可以简单理解为众多线面结合图标组合在一起，互相呼应而组成一个大画面。画面中的元素除了面以外，还具有描边，因此也叫描边插画。
本文内容：文章会详解如何画一张描边插画，教程素材没有用我之前的插画来做步骤分解，而是新画了一张插画以作示范，绘画原理都一样，理解原理就好。除了具体步骤以外，会针对一些易犯错误的地方添加重点标记。
一点建议：看完文章后，可以按照我分享的方法来临摹一遍，但我更趋向于小伙伴们能够发挥自己的想象力，做一张属于自己的原创插画。画完后若有不清楚的地方，欢迎在我的公众号中添加微信并附带插画，可给予建议。
这次插画的主题源自于我的一个梦：在草地上，遗落的帆布鞋里面长满了鲜花，小鸟守在花的旁边歌唱。
确定主题后，把脑海里的画面画出来，可以画在纸上，也可以用数位板在 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的排版原则将信息排成合理的顺序、利用栅格化和黄金比例让画面更加科学、最后如果发现画面比较空可以加入几何形装饰。怎么样，思路清晰了吗？平面与版式知识背后是人类读取信息几千年来形成的习惯以及现代社会约定俗成的阅读方式和心理学等，要想成为一个优秀的设计师，我们还需要进一步地了解设计背后的原理以及表达信息的多种方法。希望本篇文章能够对您的平面与版式设计有所启迪。
蓝蓝设计的小编 http://www.lanlanwork.com