给大家看两张图，这两页的文字内容相同，你更想看哪本？

不出意外的话，大家应该会选右手边的吧（选左边的请自觉去面壁）。（所拍书籍为《西文字体》，高冈昌生 ）

虽然大家不是专业做文字排印的，但对文字排版的感知力，其实是生而有之的。

中文也是如此，优秀的出版社（译林出版社、广西师范大学出版社等），为了让阅读体验顺畅、版面舒适，在文字排印上做了许多工序。

正是这些工序，提升了书籍正文的阅读体验。想要在阅读软件上打造优秀的阅读页，这些工序正是我们需要借鉴的。

通过设计师与开发的共同努力，我们最近完成了这一文字排版能力的建造，让阅读页的效果能够更上一层楼。

最终效果如下：

本文将从以下几个部分说明这些工序存在的理由、实现的逻辑等。

细致的来看，文章包括以下内容：

优秀的文字排印三原则与实现工序

通过前期的大量学习与调研（专家观点：小林章先生、鸟海修先生、刘庆先生等人关于字体排印 or 字体设计的讲座、W3C 中文排版需求（强烈建议大家看这个）、孔雀计划的文章、字体排印的专著：《平面设计中的网格系统》、《字体排印》、《西文字体》等；本次改版几乎所有的功能与逻辑都参照了以上专著与文章。）

文字排印要遵循的三个原则

我们把文字书排版时的工序，总结为「文字排印要遵循的三个原则」：

1. 尽量保证字间距恒定

原则说明

中文排版中，字与字之间的间距被称为「字间距」。

文字间距会影响阅读节奏。字间距大的文章，阅读速度会变慢。因此，散文、诗歌在排版时，会刻意调大字间距。

下面的图，仅凭自己感受，选一张更好的:

不出意外的话，应该是觉得下图更好看。

尝试默读一下，你会发现，上边的图片，最后两行字间距被拉大，阅读速度放慢；而这不是作者的本意，换言之，这会破坏阅读节奏。

因此，我们把「保证字间距恒定」作为首要原则，来保障阅读节奏感。

备注（建议第二次看文章的时候再读）：需要说明的是，部分字面较大的字体（方正博雅宋、兰亭黑等）在书籍排版时为了契合书籍内容的调性，有时会刻意设置字间距，这与「字间距保持恒定」的原则并不冲突。在电子阅读软件中，由于无法针对特定书籍进行调整，因此本次设计实际上是保持「密排」(字与字之间没有额外添加字间距，保留字体原始的间距)。

工序

行长是字号的整数倍。相同字号下，汉字字宽固定（就是字号本身），汉字标点的字宽同样也是字号本身（除了个别标点之外，例如破折号）

汉字排版时，没有额外字间距的情况下，是上图所示的字面框依次密排。

因为中文书籍的正文排版常用两端对齐，如果行长不是字号的整数倍，则汉字之间会有异常的行间距出现。

更严重的是：阅读软件字号可变的情况下，行长不可能做到适应所有字号且字间距不会被拉大。

行长是字号的整数倍是中文字体排印中标点挤压等的前提。
——《孔雀计划》，原文链接：https://thetype.com/2017/07/12513/

在阅读软件中，随着字号调整，如果沿用「版心宽度固定」的思路，难免存在字间距被拉大的情况。
对此，我们调查了国内外知名中文阅读软件，发现：KindleAPP 能随着字号变化自由变动，但这会导致：改变字号大小时，版心宽度略微变化。

有此顾虑，我们做了一个测试。结果证明，大家不会发现版心宽度有变化。这说明用户投入到阅读当中、调整字号时，并不会因为版心宽度变化而有不适，甚至不会感知。通过测试，打消了我们的顾虑。
最终我们大胆采取了「版心宽度跟随字号调整而变化」，来确保「行长是字号的整数倍」。

虽然「版心宽度跟随字号变化」并没有不适，但我们需要保证在多种屏幕尺寸、字号下，版心占据屏幕的区域都舒适。

面对这个问题，我们制定了一个公式，可根据屏幕大小、字体大小等，自动调整版心宽度。确保「行长是字号的整数倍」的同时，保证页面美观。

标点符号「优先推入式避头尾」。如图所示，为宋抄本《孙子算经》；在古代，书籍排版可以做到字间距恒定，原因是古代不存在「标点」，也就没有「标点避头尾」导致的种种问题。

而现代汉语存在标点符号，有的标点不能放在行首，有的不能放在行尾。

我们把不能放在行首的标点叫做避头标点，如逗号、顿号、句号等；把不能放置在行尾的叫做避尾标点，如前引号、前括号等。

「推出式」避头尾是大部分阅读软件的做法：

以避头标点为例，若此标点被排到了行首，「推出式」 的做法是从上一行拉一个字放在本行。如下图所示：

然而这么做的话，上一行的字间距被拉大，打断了阅读节奏（阅读节奏放慢）。

我们发现专业的排版软件（Indesign）和出版社（广西师范大学理想国系列、人民文学出版社、译林出版社等知名出版社）的做法是「优先推入式避头尾」，这种方式可以很好地解决「仅推出式」造成的问题。如下图所示：

△ 《少数派报告》译林出版社

通过「优先推入式避头尾」，上图中标出的双引号的宽度被挤压了一半，如果它保留为「全宽」，就没办法排在这一行，这就是「优先推入式避头尾」的最终效果。

以避头尾标点为例，「优先推入式」避头尾在这种情况下会将本行内标点宽度挤压，为避头尾的标点腾出空间，如下图所示：

上面的图可以看到：通过「优先推入式标点挤压」，第一行的字间距没有被拉大，保持了密排。

通过将本行内的标点宽度进行挤压后，腾出了空间给本来排不到的逗号，确保了字间距的恒定。然后只有在本行内标点无法压缩出足够空间时，才会选择「推出式」的处理方式。

因此这种处理方式叫做「优先推出式」标点避头尾。

行内标点挤压。因为相邻标点挤压、行首段首挤压，会出现部分标点符号占据半宽的情况。这种时候，一行的末尾可能正好有汉字或标点轧在了边框上，如下图所示，为汉字轧在边框的情况：

遇到这种情况，通过挤压行内标点宽度，从而腾出空间给最后一个字。这种做法叫做「行内标点挤压」

标点悬挂的逻辑和配套内容。存在另外一种处理方式来避头，叫做「标点悬挂」，即将标点悬挂在文本框外。

然而这种采用「标点悬挂」，需要配套做「行尾强制半宽」，如下图所示：

然而行尾强制半宽带来的问题是字间距被拉大，违反了原则一（尽量保证字间距恒定），对于宽度有限的手机屏幕，尽量不要改动。因此最终我们没有采用标点悬挂的处理方式。
Type is Beautiful 网站中对此有详尽的思考，如有兴趣请看：https://thetype.com/kongque/

2. 版心灰度均衡

原则说明

书籍排版中，文字所在的范围称为「版心」。

经验老道的文字排印设计师，检查正文排版效果时，最常用的方法是：离远看页面，就像蒙上一层磨砂玻璃一样，检查整个页面是否疏密均衡（《字体排印》，高冈昌生先生），也叫做「灰度均衡」（龟仓雄策先生称之为「浓淡匀称」，from《疾风迅雷》）。灰度均衡的版心可以让整个页面美观的同时，也保证了读者阅读中不会被突然的空白打断。

如下图所示，第一张图因为一些原因导致了页面中有许多「窟窿」，显得零碎，灰度明显不均衡。而第二张图，通过「标点挤压」将这些「窟窿」填上，整个版面更像是一个整体，灰度更均衡。

看倒数第二行的「乃跪地罪曰：‘大人何故’」两个标点连续的地方，从整体的角度看，会不会觉得这里有一个窟窿？

总的来说，灰度均衡的版面整体感更强、视觉上更舒适，因此也是相当重要的原则。
工序：

相邻标点挤压

众所周知的，汉字是方块字，在字体设计时会被放在一个方形里；中文标点同样也会被放置于同等大小的方框之中，如下图所示。

如上图所示，中文标点所占体积一般远小于汉字，因此当多个标点符号连续排列时，会让版面在这里好像有一个窟窿。专业的中文排版中会做的事情是「相邻标点挤压」。如下图所示：

如上图所示，有连续标点存在时，通过压缩标点所占的宽度，从而补上「窟窿」。

3. 版面齐整

原则说明

与西文书籍的左侧对齐不同，中文书籍（横排）传统而言是讲究两端对齐。这是被大多数国人认可的中文排版方式，因此不再赘述。

工序

行首段首标点挤压。当行首出现标点符号，会感觉左侧不齐：

可以看到，处理前版心左侧因为有单引号，看起来第一行没有和第二行左对齐，处理后效果回归正常。同样的，段首的标点也需要挤压。

实际落地时的经验与产出

知道了以上内容，我们需要把它变成开发需要的逻辑。具体如下：

1. 相邻标点挤压逻辑

在 W3C 的《中文排版需求》中，对相邻标点挤压的具体做法为：

• 依照中国大陆的常见的排版规则，当结束夹注符号出现在顿号、逗号、句号之后时，缩减两者间二分之一个汉字大小的空白；而在港台则不会做此调整。
• 当顿号、逗号、句号出现在结束夹注符号之后时，缩减其间二分之一个汉字大小的空白。
• 当开始夹注符号出现在顿号、逗号、句号之后时，缩减其间二分之一个汉字大小的空白。
• 当开始夹注符号出现在结束夹注符号之后时，缩减其间二分之一个汉字大小的空白。
• 当两个（或以上）开始夹注符号连续排列时，缩减其间二分之一个汉字大小的空白。
• 当两个（或以上）结束夹注符号连续排列时，缩减其间二分之一个汉字大小的空白。
• 当间隔号出现于结束夹注符号之后时，缩减其间四分之一个汉字大小的空白。
• 当间隔号出现于开始夹注符号之前时，缩减其间四分之一个汉字大小的空白。

通过梳理，我们将其简化描述为 4个逻辑（实际逻辑与 W3C 基本一致）：

• 「1个结束夹注符」后面是：开始夹注符、结束夹注符、顿、逗、句(包括全宽句点）、冒、分，就挤。
• 「1个开始夹注符」后面是：开始夹注符，就挤。
• 「顿、逗、句（包括全宽句点）」后面是：开始夹注符、结束夹注符，就挤。
• 「分、冒」后面是：开始夹注符，就挤。

备注：成对出现的标点叫做夹注符，如双引号、书名号等；其中细分为开始夹注符与结束夹注符。
此外，我们注意到，一些出版书在以上逻辑之外，把问号与叹号与[顿、逗、句]归为一类，实际效果良好，因此出于问号与叹号同样占据字面不多的逻辑，采用了这种分类法。然而随后在走查阶段发现线上部分字体的问号与句号占据字面的位置不同。

这促使我们关注到标点在字面中占据的位置，我们梳理了客户端所有字体的中文标点。

发现汉仪乐喵、方正兰亭黑、汉仪启体等几款字体的问号字面占据异常，如果进行相邻标点挤压可能会造成标点粘连的情况，因此最终我们决定保持问号与叹号不参与相邻标点挤压。

2. 避头、避尾标点汇总表：

以上逻辑实施需要首先让程序判定哪些标点是避头尾标点，因此我们梳理了所有汉字标点并分为避头、避尾两类（部分标点即避头又避尾）。

汉字标点符号与西文的标点符号许多时候仅凭肉眼难以分辨（如,与，前者是西文标点中的逗号，后者是中文标点中的逗号），因此我们使用Unicode 码为每一个标点精准划分，确保不会造成错误。

3. 行内标点挤压与「优先推入式避头尾」逻辑：

「行内标点挤压」与「优先推入式避头尾」其实本质上都是对行内标点宽度进行压缩，因此在逻辑上归为一类。根据具体解决逻辑的不同将其分为以下四类：

针对这四种情况要做的具体事项补充在右侧：

至于推出逻辑，则稍简单些，书籍中有时候会遇到连续几个标点符号都是避尾标点的情况（或连续避头标点），因此对推出的逻辑设定为：

备注：国内知名的字体设计与排印网站 Type is Beautiful 中有介绍，行内标点挤压的方式有多种，「开明式」「全部半宽式」「平均式」等等…我们选择了「平均式」（有权重），开发难度会稍小些、效果也更可控制，不再赘述。

4. 整体逻辑流程图

但是仅仅通过文字性质的描述还不够，我们需要能让程序理解的逻辑。

由于部分处理方式之间互相干扰，因此根据这四种方式影响的内容不同，以「对其他处理方式的干扰程度」从高到低排序，并串联成整整体的逻辑图，以保证整体逻辑简单、不重复，如下图所示。

在此基础上，我们将文章中第二部分所梳理的逻辑细节填充进流程图内，并合并重复流程，最终获得如下流程图，方便开发理解和工作：

5. 小结

通过「避头尾标点列表」「可挤压标点与挤压空间」「广义的推入逻辑具体说明」「整体逻辑流程图」四个文件，我们可以顺畅的将设计要求传达给开发。

最终，通过这些工序，我们可以在最大限度上保证字间距恒定、版面齐整和内容灰度均衡。提升阅读流畅性和阅读页的体验。

总结

文字排印作为一个古老的技艺，从排版工人操作实体字模的时代，经历了照排时代，来到了数字排版的当下，排版的自由度和效率已然成倍提高，然而由于许多原因至今这些排版的工序只在出版社等专业领域流通。

相对于纸质书籍，电子阅读在易携带性、阅读方便性、多媒体辅助阅读上有得天独厚的优势，然而最基础的阅读体验有时候不如纸质书籍，我们希望通过我们的努力，电子阅读在未来，能够让读者获得全面超过纸质书籍的阅读体验。

当然，文字在移动端的体验上限远不止如此，一些产品仅靠网格系统与字体排印加上优秀的字体，已经做出了令人惊艳的体验。

如上图所示，通过优秀的明朝体、网格系统，物书堂出品的几个词典 APP 的界面让人惊艳，文字之美还有很多可能，这也是我们的努力方向。我们也知道，当前客户端内中英混排、英文排版等方面，依然有进步空间，未来也会进一步完善。

文章来源：优设

根据遇到的问题，总结的一些小经验，个人的一点薄见，欢迎大家交流。

国内国外运营 Banner 设计

最近有小伙伴接到了国外的运营外包项目，发现国外和国内对于运营的需求是有差别的，这篇文章就谈谈国内外：中国、韩国、欧美，它们运营设计的各自特点和里面的门道。

主要从以下三方面来说：

1. 风格特点

三个地区文化差异大不相同。

中国从古到今讲究遵循传统，过年过节讲究气氛，营造一种氛围。用红包来表达祝福和心意；其次，就是社会环境，中国人喜欢「热闹」，逢年过节，一帮人聚到一起才热闹，别人都买、卖的火的肯定就是好的，所以就「跟风效仿」。

韩国建国很晚，历史相对比较短。所以文化氛围比较年轻，偶像文化在韩国盛行，传统的东西相对较少，都是比较年轻化的：年轻化的偶像，年轻化的文化，年轻化的价值观。

欧美整个文化环境受移民的影响，比较开放国际化，体现的文化也是比较多元的，包容性、简洁、时尚是这些它最直接的特点。

接下来分别谈一下三个地区运营推广的设计特点差异化：

中国

中国的运营突出的是优惠：送红包、满减、优惠券等；必须要喜庆，鲜艳的色彩：以红色、橙色、黄色居多，来刺激消费。就好像进了卖场「瞧一瞧看一看，季末打折满100减99」

韩国

韩国的文化里「社交」这一关键词体现的尤为重要，「Line」这款APP对韩国影响比较大，里面的矢量涂鸦风格的插画深入人心，Line 官方设计可爱且特色鲜明的「馒头人」、「可妮兔」、「布朗熊」和「詹姆士」四个形象也很有特点，所以Line的「IP属性」和「矢量涂鸦」就成为了韩国主流设计风格。

2. 整体构图

而韩国的偶像明星文化也颇具影响力，在推广时也会用到明星来制造效应。

我们从整体构图解析一下三个地区的设计细节。首先把一个运营 banner 按照组件层级进行拆分，分别来看一下。

分为：文字层、主体物层、装饰层、背景层

文字层

从文字层可以看出中国的文字层级划分更加清晰。运用「格式塔」原理，主文案和副标题的突出，能让用户对信息提取更加准确直观。

中文结构的复杂性，排版上必须严格区分，所以在层级划分上装饰线的运用也是比较常见的。（后面有针对性字体设计形式，详细解读，这里就不细说了）

韩文的本身的图形特质，为保证识别度，文案提炼精简，信息层级相对较少。文字层级一般分为两层。

有意思的是韩文由于字形结构的单一，排版上很多时候会搭配字体形式的变化来增加排版样式的变化，装饰线的运用也比较多变。

英文排版上本质上和韩文相同——符号化，通过字形的特点来特出主要信息。

排版的优势性，让其排版变化上自带韵律感，加上装饰线的运用，本身字形的符号特性视觉呈现很有设计感。

主体物层

为了辅助信息传达，往往采用图文结合，注意主体物的构图布局朝向，主题物对主要文字起到视觉引导作用，用户的聚焦点一定是主文案，而不是主体物。

下图里「手」作为整个画面的「支点」，把模特的脸部向主要文案指引，最终达到活动的最核心。

下图里「眼睛」为整个画面的「支点」，利用眼睛视线，把用户向文案核心指引。

利用周围的物体形成三个「支点」，把视觉中心聚焦到中间主文案。

装饰层

点线面是运用最多的元素，中国把平面设计的三大构成运用到了。

为了营造构图的稳定性，在设计里加入点和线的元素让画面占比更加平衡，同时弥补画面中空白的地方，减少负空间，让构图更加饱满。

同时点和线的元素也是为了辅助衬托主体元素，分布要合理，避免过多，造成使画面的拥挤。

面简单的理解成形状，用形状配合主体物，达到聚焦视觉中心，来突出主题，但是形状不易过于复杂，「格式塔原理」——「简单」原则（我们的眼睛在观看时，眼脑并不是在一开始就区分一个形象的各个单一的组成部分，而是将各个部分组合起来，使之成为一个更易于理解的统一体），用户更容易理解。

三角形——利用稳定的特点来达到视觉的平衡

圆形——最简单直接有效的图形元素，视觉聚焦更明确

多边形——丰富画面，多边形的边角多的特点也多用做突出设计的高逼格

形状流体在营销中突出了活动的促销感和气氛，在重大活动中经常看到，色彩上也比较鲜艳。相较欧美、韩国，中国电商运用比较多，这也侧面反映出出中国运营推广竞争的残酷性映射出来的「浮夸」。

背景层

中国设计里最多变的就属背景了。可以利用多彩渐变、放射的线、还有图案叠加，让画面迎合表达的主体基调

韩国的设计分为涂鸦放射背景和纯色背景简单几何形状

欧美撞色对比和性冷淡纯色底，也会运用视错觉，来吸引用户眼球

3. 营销推广层面

文案是营销第一要素，想办法突出运营信息，是所有运营必须要注意的，这就有了根据活动气氛进行字体设计。

中国字体的复杂和文化的久远特殊性，对于字体我们是有很深的研究和造诣，表现空间也很大。另外由于中文字形的复杂，导致字库设计成本比较大，字体种类相对较少，为了避免字体版权问题，多采用一些设计变形来达到营销推广目的。比如针对字形进行改变、针对笔画进行加工、针对体积和质感进行变化等。

层次叠加——提取等比重的笔画，变现字体的体积和空间感

笔画链接——让文字直接更紧凑，空间运用更整体合理

笔画装饰——增加文字设计感，突出表现风格

厚度层次——让字体突出，增加厚重感

字形改变设计——考虑到字体版权，对字体进行再设计，结合主题进行宣传

字体内部装饰——字体呼应主题的一种简单方式

韩国字形相对简单，变化不是很多，运用厚度体积和笔画装饰来表现字体

欧美的西文字体更多的是运用和主体物穿插、和字形搭配的变换，和复古风字体厚度设计

4. 小结

可以看到不同的国家地区根据本国习惯、审美、风格不同，都有各自不同的设计。中国营销快速简单直接出效果；韩国偶像路线，不管是对于模特的选择，还是网红形象的选择，把粉丝效应运用到了；而欧美则简单兼顾设计创意表现。

浅谈学习Banner

随着教育在大趋势下崛起，很多学习类产品开始出现。很多在做教育的小伙伴求助，学习类的运营 banner 无从下手，思路不清晰，那么我稍稍的屡了一下思路，浅谈一下学习 banner 的个人薄见。

在很多设计师刚开始缕思路的时候，总因为无从下手而着急盲目，下意识的认为「我不会啊」！那复杂的不会，就从简单的开始缕。从设计开始，我构图都没想好，设计啥设计？那再简单点，从构图开始吧，我思路都没想好，构啥图？继续再简单点，一步一步往前推，直到推到最简单的细节，从最初第一步开始做。你会发现，首先第一步就是先建立一个符合主题的思路。

谈到学习类 banner，光听一听就觉得头大甚至很讨厌的事情。因为本来学习就是让人很拒绝的，如何引导用户主动做一个不想做的事，就得用到一些特殊的手段了。

咱们这次主要从以下方面来多维度探讨：

1. 主题定位方向

K12教育

K12 也就是九年义务教育和三年高中，所以人群定位青少年，年龄 7-18 岁。这个年龄段非常单纯。

大家可以回想一下我们小时候，在这个年龄最享受的是什么？那就是「满足感」和「参与感」，我们小时候玩积木、做游戏，最重要的不是赢了能得到什么东西，而是参与到其中享受快乐。所以建立一种参与感，参与进来「一起玩」的感觉，就会得到满足。

我们看到下面这类 APP，为了能够吸引这一部分用户，大多都以有趣好玩为主，「游戏性」是最大的特点，所以情感化设计是非常好的选择，通过丰富的「体积感插画」用游戏的思路激发兴趣，让他们感觉有参与感，从而吸引他们「想看」并「点击」。

知识付费

而对于成年人来说，学习需求变成一种「插件思维」，能够快速学会，或者说是能够收获很多的干货，突出不枯燥、学会、能懂。这类的情感化设计相对于少儿学习插画，更多的突出主题所以，以更极简的设计形式。

有时候文字作为主视觉中心更加直观，整体设计风格可能更加简单，对于成年人来说，这种设计更能直达我们需求本身，更容易理解。

高端知识分享

对于这部分人来说，定位跟上面两类完全不同，从所处层级来说就不同。首先这类人，学习的可能就不只是干货了，更多的需求是职场环境带来的。比如，我怎么跟同事、朋友、下属更好的相处，如何具有更好的说服力，或者是想进修一下，就有了学习需求，基于「马斯洛金字塔」里的，这里学习需求可能也是更高层次的，为了体现自己的价值。

所以更关心的是，这是谁讲的课；通过设计情绪版，映射出当前课程的专业、严谨、课程的价值高，这些关键点。

课程的品质感的体现，颜色不能太多，插画设计元素少，更多的利用文字排版和少量图形来突出主题。

总之，根据所代表的用户来针对性设计。就好像剪头发，Tony 老师肯定不会给一个 20 多岁的年轻人理一个小平头；穿衣服也一样，你上班肯定不会穿个背心裤衩就去了，但在海边放松你也不可能穿个西装、牛仔，我相信大家都能明白这个道理。

2. 构图结构

良好的构图，目的是能够让用户易懂，首先结构要清晰、简单，主要构图比如：居中、左右。

居中结构

突出活动文案，居中构图是个很好的选择，不足就是体现不了有趣好玩的调性。直白说主要就是明确干什么。所以用户的视觉焦点会聚集在重心区域，忽略掉周围的东西，在设计的时候，周围元素主要是衬托，不能抢主视觉重心。

所以说运用插画风格的话，简单轮廓插画和剪影插画是最适合的。

设计的时候注意几点：一，主体物要突出饱满，太小容易画面太空；二，弱化辅助元素并不是要把它做的粗糙。

左右结构

左右结构分为两种，一种是左图右文，左文右图。两种构图的秘密在于，用户的浏览顺序是「从左至右」，如果图在左边，图在表意性不明显的情况下，我们需要看一遍文字，再看一遍图，这样图相当于重复浏览了两次；文字在左边就减少了重复阅读，提高了阅读效率，在运营推广「3秒原则」里，是首先要考虑的因素。而插画设计本身也是为了烘托气氛，表意性不是很明显，所以突出文案尤为重要。

所以，市面上大部分的学习知识类左右构图的，更倾向第二种左文右图。

左右构图受限于屏幕显示内容，所以，有一个明确的主体物至关重要。比如：像 VIPKID 和哒哒英语，会有一个自己的 IP 主形象，比较生动突出了品牌特征，还能让用户有代入感；还有像一些知识分享的，就会有一个明确的讲师或者人物，体现专业权威性，在设计上一切都以突出主人物来展开，就不要设计太过于复杂。

不同于电商的模特，主人物首先穿着上不能太花哨，要正式；周围装饰上不要太浮夸，要精简，甚至像高端知识分享的，背景就一个简单颜色来衬托。

衍生结构

还有以上面构图衍生的构图形式，比如倾斜构图，受限于 banner 尺寸高度，过大的倾斜角度会让画面失衡，负空间留白不均，会让画面不协调。

构图比例合理

注意画面整体构图比例，文案占比永远都是大的，不要让主要画面辅助元素过大抢了文案的风头，因为即使图形辅助再精彩，用户更关心的是「你能给他看什么」。

文案和辅助元素大概是六四开，黄金分割比例能让焦点更多的关注内容，有些小伙伴可能在做的时候过多的沉浸在放大的画布里，由于没有直观感受，错误的预估当前构图的合理性，所以做图的时候多缩小画布离远看是个非常不错的方法。还有一个就是，做完了 banner 导出图片，双击打开图片，把图拖小到无法拖动为止，再看当前实际尺寸大小，用实际尺寸来检查。

更多构图形式：《文案超多的海报设计该怎么排版？16个实用模板送给你！》

3. 文案文字

文案选字

文字的选择也是衡量当前产品用户定位的标准，首先文字结构不能太过于复杂，K12 教育因为本身用户年轻化的特点，字形简单而且饱满有趣，所以一些艺术手写可爱字体比较适合。

免费商用可爱字体推荐：沐瑶软笔手写体、站酷快乐体、郑庆科黄油体、站酷小薇 LOGO 体、锐字真言体。

其他可爱字体推荐：汉仪唐美人、汉仪糯米团、汉仪铸字童年体、汉仪小麦体、方正胖娃体、方正字迹新手书、造字工房童心、文悦方糖体。

如果是高端知识分享和知识付费，体现高端。文字就要简单，字形不要那么随意，一些黑体和简单的衬线体就比较合适。

免费商用黑体衬线体推荐：思源黑、思源宋、站酷文艺体、方正书宋简体。

其他黑体衬线体推荐：汉仪瑞意宋、方正清刻本悦宋、方正兰亭、造字工房朗宋、造字工房黄金时代体、造字工房尚雅体。

文案排版

当用户人群比较年轻，意味着所有的呈现方式都要直接，文案精简并且排版直观，提炼关键主标题，信息层级要拉开明显，如果信息层级不清楚，识别性是很差的，先看下面的案例：

看这两个，明显右边的对于我们识别，和对当前功能的认知更清晰，还有一个明显的视觉引导，突出了最主要的交互点；而左边的由于信息比较密集，导致我们无法短时间反应出关键信息是什么，这是比较糟糕的，运营同样如此，而运营比较尴尬的一点是，如果用户看不懂或不感兴趣，是根本不会点击、不予理睬的。那么流量入口的意义就没有了，设计的再精美，都是一个非常差的作品。

提炼文案是很有必要的，下面两个同样的设计，右边对于文案的认知就更明显。

有的时候往往文案的关键信息比较多，我们在排版的时候第一个重要点，就是排版怎么拉开信息对比，同时又让排版紧凑？有时需要增加一些特定图形，或按钮。但是又会考虑，加了这些特殊图形和文案又显得相对独立不整体；还有就是关键点该怎么取舍，强化那些文案、弱化哪些，或是主文案是重要的，同时关键的数字也要突出怎么办？

左图，左边主文案放大了关键点，由于右边文案文字比较粗，所以层级拉开还是不够突出，如果想拉开对比的话那就让他们截然不同。右图，字体选择上拉开强弱，让右边的文字比划选择细一些；左图的关键数字不够突出，通过提亮改变颜色，来强化；按钮在左边画面显得太独立，和文案没有形成统一关系，反而按钮看起来变得要比文案重要，那么把按钮插到里面。

现在所有的信息，一环插一环，并且突出的文案明显，关键数字也明显；最后让他们整体在画面构图中面积比例放大，改版后是不是舒服很多。

还有一些小伙伴可能觉得亲密性原则不就是距离相近么，然后没有把控好各个部分的文字距离，导致反而该拉开的没有拉开，该近的没有近。

上图这个案例里，主文案分为了两行，但左边由于主文案行距比较宽，而跟辅助信息的距离太近，导致亲密性不够，而由于副标题文案又比较孤立，上半部的信息和下半部信息太散，整体统一度不够。

右图改进后，调整合适行距，并且加装饰线，协调一下辅助信息比较短的问题，同时也起到分割的作用让上下文案有关联和统一。

文案排版的其他细节还有错位排版时，注意错位的大小，太大会丢失掉排版的平衡性；注意文案排版对齐，往往有的时候不注意，会让你的作品看起来不够精细；文案做倾斜处理的时候，一般情况都是往右边倾斜，第一，右边都是我们的主要习惯方向；第二，往右可以很好的把用户引导到关键信息上，这些也是做 banner 排版里经常犯的错也是要规避的一些坑。

4. 颜色技巧

颜色倾向

如果是代表年轻化，多用绿色和黄色，绿色代表活力、生机、积极向上；黄色系代表温暖、希望、舒服。

这两个颜色由于是临近色的关系所以也会搭配出现在画面中，色环 90° 角的颜色搭配所以是最舒服的配色，还有就是颜色对比非常和谐。

由于蓝色是绿色的邻近色、是黄色的对比色，红色是绿色的互补色、黄色的邻近色，所以绿、黄、蓝、红这些会在画面中组成主色、辅色、点缀色。

注意协调好每部分颜色之间占比，主色 60% 左右、辅色 30% 左右、剩下的辅助色 10% 左右。

如果是代表科技、互联网，就会以蓝色为主，颜色也不会像上面那样丰富，颜色体现的设计也没有那么活泼，代表冷静、自然、科技。

一般画面在2-3种颜色，以蓝色为主，再搭配紫色。因为紫色和蓝色是邻近色，不会像暖色调一样太冲撞，所以我们经常会看到蓝紫这种「好基友」的搭配。

知识分享类，分为普通的讲师分享和高端知识分享。讲师分享颜色要亮一些，颜色搭配大概是 1-2 种。

而高端知识分享，要体现知识的稀缺性和专属感，代表尊贵、品质、价值，颜色大多用暗色或消色（消色就是黑白灰），大概也是 1-2 种。

颜色方面我总结几点坑需要避开的：一，如果用插画表现，一定要避免颜色的灰和脏，因为学习代表着积极向上的，灰色不适合。颜色选取的时候大概要避开「颜色警示区」的位置。

二，插画风格避免选择紫和一些冷色调，以暖色调为主，才能贴合情绪版定位；三，同样的道理，颜色不要过于艳丽、过于刺激，反差明显了，反而阅读体验不好，影响观感；四，所有的颜色最终都要定位到主题上，做完后，反向推倒检查一下，颜色呈现符合当前文案定位吗？符合面向的用户人群吗？根据主题当前配色合适吗？

更多电商配色方法：《这是一篇不看会后悔的配色干货》

5. 小结

最后我想说的是，所做的东西把自己当成模拟用户自检一下，自己如果看到这个 banner 会点击么？会吸引到你么？能直观感受到么？会让你舒服么？如果连自己都无感，那是相当失败的。

如何使Banner中主体物更突出

运营专题在设计的时候，我们要考虑的是针对运营需求，给特定需求的用户传达零成本阅读体验，很多设计师做的 banner 画面特别乱，原因是画面中没有突出主体元素。

所以在 banner 设计上要考虑贴合当前传达的主题，所谓设计的「言之有物」。下面来详细的谈一下运营设计时如何突出主体元素，其中的言之有物。

运营活动最终想给用户快速传达文案信息，也就是「三秒阅读」体验，配合辅助文案的主体图形更能方便用户去理解。

可以看到下图左为了让画面丰富，设计师往往会加一些辅助元素或图形；而图右糟糕的元素添加反而会过度设计，干扰用户对于运营活动本身的理解和其表意性。

那么，如何突出视觉主体物，而达到最理想的设计作品的表意性呢？

我们从以下五方面细谈：

1. 图形化辅助元素

流畅线条的运用

我们在看音乐类运营 banner 的时候发现线条运用非常普遍，特别是利用 illustrator 里的「混合工具」来实现两条线之间的复制混合。

人物涂鸦剪影

往往为了表现特定的主题：比如年轻化、个性化，通过错位移动，添加亮色来使人物突出，往往更多的表现在：音乐、设计、嘻哈接头文化的电商运营宣传中。

这类设计个性鲜明，所以做之前考虑好，所要传达的特定的人群是不是符合当前的审美认知。

简单几何形状

有时候为了让传达主题更加明确，简洁化设计很有必要「少即是多」，所以比如学习和知识付费类的设计，干脆就用简单的圆形、方形、波浪曲线。

下面这个案例，设计者为了使这几个人物不会太散，用圆形包裹，目的也是为了更加整体，试想一下，如果把圆形去掉，人物不仅会显多，画面也显得既单调又乱。

立体几何载体

让风格调性显得品质高，同样让设计少而精。需要注意的是，品质感高逼格的设计所用的图形相对要规整一些，尽量不要显得太随意，多用方块形状和立体几何载体。

比如网易严选，为了突出「所卖东西都是精挑细选」，会采用立体几何载体衬托的方式，所表现的就是「隆重和百里挑一」，我们不一样~（会唱的朋友们一起唱）

多边图形

运用模特表现的时候，高品质感会用一些规则多边形，比如：四边形、多边形等。多边的形状会给我们带来稳重感，「尊贵感与众不同」往往是这类商品想传达给我们的。

不规则流体

促销类电商营造促销的氛围，激发购买欲，会用到多色彩的不规则流体，目的为了传达「降价、折扣、满减、超值、限时」等 ，往往会为围绕主体物四周，突出主体元素。

小结

图形化元素是最简单也是最实用的一种突出主体元素的表现方式，不管是用哪种，一定要想明白所表现的主题：符不符合当前主题；推广所属对应的用户群体：心理认知上能不能赞同；满足这两点，所加的图形才有意义。任何图形都是为了辅助突出主体元素，记住这一点，你就不会盲目的进行设计。

2. 文案装饰衬托

文字铺底

直接把相关文字铺底是最常见的一种方式，用当前所对应主题的人物名字、相关文案、对应英文等。

文字与主体穿插

利用文字与主体的穿插营造出空间感，也是在平面设计中经常用到的手法，同样也是在保证文字基本的识别度前提下。

注意文字颜色与主体颜色之间要拉开反差，不要糊成一坨，就适得其反了，适当的时候加一点点阴影还是很有必要的。

小结

不管是什么形式，所加的文字要有意义，跟主题相关。任何加的文案一定要能衬托主体物，也要有很强的表意性，毕竟文案才是最重要的。

3. 颜色对比的运用

主体物吸色衬托

从主体物上之间选取，作为背景颜色搭配，来衬托主体物简直不要太完美，前提是主体物的颜色相对够和谐舒服。需要衬托的背景颜色相对要弱一点，以突出主体。

颜色对比

我们一想到颜色对比，马上想到「红配绿赛狗屁」这句话，这句话的意思不是说红配绿不行，而是说错误的红配绿不行，听不懂啊？来，举个栗子…李子…梨子…例子！

左图的红绿颜色占比可以看到是比较平均的，大概1：1的比例，但是红色作为一个比较刺激的颜色，颜色很鲜艳，如果搭配的绿色也一样饱和度很高，两个撞到一起没有一个突出色，画面就不会那么和谐了。

右图如果我们把红色的占比相应的减少，饱和度不变，而绿色降低饱和度，从而面积占比增大，起到衬托的作用，画面之间是不是舒服很多。

下图其他的颜色对比同样如此。

小结

颜色对比的口诀是：主体如果是亮色，背景就用冷色；主体用重色，背景用亮色；主体用纯色，背景用灰色；不管哪种对比，主体物的颜色一定是面积最小的那一个，无论如何拉开颜色对比反差是王道。

4. 主体物局部打光

人物面部打光

人物面部是最容易辨识，也是视觉焦点部分，所以让面部从画面凸现出来尤为重要，让光源聚焦到脸部，主体人物显得更加有质感和饱满度。

物体亮部打光

物体和人物相比相对简单，亮部高光部分为视觉焦点，让物体显得有质感，只需要给亮部特殊光源即可。

小结

光线能在突出主体物的同时，让构图更加丰富和饱满，切记光线不要过亮，看起来会很不舒服。

5. 主体元素摆放技巧

人物截取范围

截取摆放人物的时候注意，为了让视觉焦点集中、有辨识度。具有代表性的人物和明星一般截取一半左右，大约胸部以上部位；而电商模特为了展示所卖衣服，一般露出大约三分之二。

万万不要切头部

让人物完美的呈现在画面之中，让画面能够看起来舒服些，构图也相对完整，反之把头部一刀切，会使画面负空间变小，构图拥挤，而观看者对于人物的识别度也随之降低，阅读成本变高。

多人物摆放要求

多人物组合时，整体人物处理要基本保持一致，特别是眼睛视线要尽量保持统一的视觉基准线，不然会显得杂乱不堪。

多物体的摆放

表现美食产品的时候，文字居中构图，物体散点摆放要注意，角度的统一，统一俯视角度，不要有俯视有平视，保证统一度。

6. 案例带练示例

案例分析

这是一个小伙伴做的医美类的运营 banner，当看到这个设计的时候我的内心是崩溃的，我们分析一下问题。

问题一，首先主体物没有突出，主体人物偏灰，背景也灰；问题二背景太乱，没有视觉焦点；问题三，文案识别度完全丢失掉了，排版也太乱；好下面我们来改一下。整体看下来，并没有表现出医美要体现的「变美」，用户完全没有视觉感受。

调整改动

前后对比

最后我们来看看对比效果，是不是好很多。

无论什么样的设计，加什么样的元素，目的只有一个就是要有理有据、有道理，所有的运营设计都是为了辅助主体文案。不要让你的设计无用，或者减分，把设计元素最大化发挥它的作用才是设计的最终目的，你就说是不是吧！

作者从自身经验出发，结合实际案例，分享了流量获取过程中非常有价值的知识，值得运营人细读精读，一起学习。

大家好，我是国平。我做流量已经有16年了，2010年之前主要在阿里巴巴国际站负责免费流量增长，把海外B2B免费流量的日UV做到几百万。后来成立了一家乙方公司叫光年实验室（以前叫杭州光年），是携程、阿里云等40多家主流的大型互联网公司的流量顾问。另外这些年也没少折腾其他项目，其中做过电商（外贸独立B2C网站）、做过电商系统（类似有赞）、 做过移动端APP （社交方向）。

来“群响”这段时间，只要能参加的聚会都参加了，听过大家分享很多非常有意思的流量玩法。先不说不同行业的“隔行如隔山”，就是在流量领域，可能有很多种细分领域，大家之间的资讯都是隔离得很厉害的。流量的渠道和玩法是永远在变的，不过也有一些不变的东西，如平台和内容创造者的博弈、大家仰视平台的心态（其实没必要）、以及各种流量玩法的底层模式等。

我首先分享的是过去一个很主流的流量渠道–搜索引擎，看看在现在这个移动互联网时代和新媒体时代还能如何获取流量。

第一个议题就是：现在是否还值得做搜索引擎营销

结论是：值得做，不过如果不了解现在国内百度的现状生态，99%的人ROI一定会很差的。至于海外的Google，它依然是大部分人的第一大流量来源。

首先说为什么值得做。

大家可能不知道的是，在搜索引擎，也是65%以上的流量来自移动端，所以不要认为搜索引擎是PC流量的代表。百度的DAU是没有下降的，DAU在3亿多，大家在手机上也是会搜索的。

我喜欢把流量分为“搜索流量”和“社交流量”，分别对应“人找信息”和“信息找人”。我的观点是这两种大家获取信息的模式没有主次之分。

只是在国内，百度的相对市场份额是一路下滑的，先是淘宝、去哪儿等分走了很多垂直搜索的流量，接着又有微博、微信、抖音等社交平台相继崛起，百度没有以前那么重要了。

我们服务的好几家头部互联网公司每天的总UV（包括APP）当中，还有超过四分之一的流量来自搜索引擎。 客户不能拿来作为案例，不过有公开的渠道可以查到的一个例子：知乎某段时间的每天的总UV有四千多万的情况下，来自搜索引擎的UV有一千三百万。

搜索引擎流量的转化率，一直都是所有流量渠道里面最高的。因为社交媒体的流量的性质是“逛”，而搜索引擎流量是主动“搜”。搜索引擎流量在关键词和内容匹配的情况下，有不少做到过10%左右转化的例子。

然后搜索引擎流量相对稳定可控，而且像SEO自然排名这样的流量还不要花钱，这也是头部互联网公司比较重视这块的原因。不说它们，就是那种中型的以卖流量为商业模式的互联网公司，如融360、土巴兔就是其中的代表，每天都从百度获取百万UV以上SEO免费流量。

最后就是目前还存在一些以前很少有人知道的红利，这是今天后面要讲的重点。

那为什么说大部分人做搜素引擎流量的人ROI会很差，要从自然排名（SEO）和 竞价排名 （PPC）两块来看所谓的内情。

搜索引擎营销分为自然排名和竞价排名两块，自然排名就是非广告排名，是由系统按照一定的算法来决定谁应该排在最前面。竞价排名就是买排名（PPC。即Pay Per Click），根据你花钱的多少以及用户更喜欢谁的广告把你的广告排在前面去，当然在百度主要是看谁花的钱多。

对于自然排名来说，它的回报周期应该是一年以后，而很多人期望几个月就有好效果；然后是整个行业的无论是甲方公司还是乙方公司都没有很专业的人，搜索引擎营销服务商行业总体来说是一个逆淘汰的行业。还有百度自己的页面在搜索结果中占了快三分之一，而剩下的流量头部效用明显，也就是只有大网站才能获得不错的流量；在这么一种糟糕的情况下，百度对优秀内容的判断严重失控，很多人通过一些作弊的方法快速获取了很多流量。

而竞价排名这种花钱买排名的方式，对于很多人是鸡肋一样的存在了。我个人觉得百度的价值观不是很正，他们在一开始就用错误的方法在引导大家投放广告。 这个可能有点危言耸听，也就是在指责百度为了自己的利益，这十几年以来一直在误导大家去花更多的钱。

这是由于竞价排名的模式就决定了，只有大家都共同认为某些关键词的流量很大才会去竞争这个词，而大众都是拍脑袋来认为哪些词重要与否的，比如任何一个卖口红的都认为“口红”这个词要是不投的话，好像搜索引擎流量就不要做了，百度也就顺水推舟让大家用这种思维模式去投广告。

具体案例：我给大家两张图，假设客户是在卖“阿胶”：

为了让大家有直观的感受，我先考一下大家：假设你是这个卖阿胶的商家，你去百度投广告，你们会决定买什么关键词呢？

这张是曾经百度给客户培训的关键词选词方法：

这种方法就是大家去定义一些和你的业务相关的核心词，如阿胶、滋补品等，再定义一些前缀和后缀等，然后再排列组合。这样出来的词就是：

上海阿胶电话

北京阿胶电话

上海阿胶网站

……

由于大家选词方法一样，就会产生竞争，一定可以把少部分大家能想到的词的价格抬上去。

而这张是我们一直以来用的关键词选词方法：

这里是通过很多数据挖掘工具，先把整个行业用户正在搜索什么都列出来，必须要穷尽整个行业，越多越好，然后按照核心词再分成不同的组，这个时候用户的需求就明明白白列在你面前了。

从这份数据能看到，“阿胶”这个代表整个类目的词语，每天的搜索量也只有8078。搜索引擎上所有的行业都是这样的，用户搜索的80%的词，字数都是很多的。其实大家想一想也不难理解，即使一个初级网民，也明白用“阿胶”这样的词语是搜索不到自己想要的东西的，大部分来搜索引擎搜索都带有明确的需求而来，大部分人的需求都有个性化和独特的地方。

但是在商家投放广告的时候，就陷入了一个思维上的误区，以为“阿胶”这个词语特别特别重要。实际上，一个品类重要，不意味着代表这个行业的某个行业关键词就重要。

比如“iphone11 价格“这个词语的搜索量远远超过”手机“这个词语；”163邮箱“这个词语的搜索量一天是十多万，而”免费邮箱”这个词语的搜索量是三千多。“小说” 这个词搜索量不高，“TXT全本小说下载” 这个词每天有160多万的搜素量。

百度也就没有纠正大家的误区，让大家按照这个思维定势去买关键词。十多年来，很多人也是这样按照这个误区在做着SEO。

第二张图是我从百度于2019年10月28日获取的数据，每天百度上真实地搜索“阿胶”相关的关键词基本都在这里了。无论你怎么想破脑袋，你也想不出用户是这样在搜索的。图二的数据，即使有些从事了10年搜索引擎流量运营的人，从来都没看到过的。

我前面所说的流量红利，就是这么多年以来行业里都在用错误的方法做搜索引擎流量，所以以至于到了今天，搜索引擎上还有一大半的流量没有人要的。我再发几张图，大家自行去搜索就知道了。

（这里的日搜索量是指查询这个数据的那天再往前30天的流量总数除以30天，就得出最近一个月的日均搜索量。数据是有时效性的，所以要用的数据。）

以下是稍旧一些的数据。

投资理财：

汽车行业：

第二个议题：搜索引擎营销是一个什么样的流量世界

搜索引擎营销已经有一帮人做了十多年，现在来看这是一个什么样的流量世界呢？

首先搜索引擎是“长尾理论”的最佳实证, 在搜索引擎做流量要深刻的理解长尾效用。Google曾经公布过一个数据：google每天的十几亿次搜索中，如果匹配用户搜索的那个几个词语，有15%的搜索词是过去1年从来没有人这么搜索过的。比如类似搜索 “ how to make an automatic door in minecraft ”，这样的词的组合, 每天有15%的词过去1年都没人这么组合在一起搜索。这样的情况，不光Google和百度是如此，淘宝、小红书、微信搜索里都是这样。

如果真是情况是这样的，你根本就没法做到说我要“做某几百个词的排名”这样的事情，因为每天词语都在变。我看过太多团队其实就拿着几十个自己想出来的词在那里做投放和做SEO。这种情况十年前是这样，现在也还是这样。

很多人问过我怎么找搜索引擎营销方面的人。我的建议是只要他们问面试者一个问题就可以结束面试了。那就是问对方在做搜索引擎营销的时候目标关键词是多少个。

分这么几个水平段：

• 少于1千个词—-还没有入门；
• 1千到3万个词—-大部分是标准教程培训出来；
• 3万到10万个词—-只有这个阶段才能考虑录用 ；
• 10万到50万个词—-对于一个非常小业务范围的品类是合格的；
• 50万到500万个词—-这样的人大概一年都面试不到一个。

在搜索引擎上，找到50万个属于某个行业词绝对是一种很强的能力。实际光找足50万这个数量还不够，如果要做好投放，还要找到最佳性价比、鲜的词。现场如果有在投放搜索引擎广告的人，对比看一下自己公司后台有多少关键词在投就知道你们目前所处的阶段了。

搜索引擎其实有广泛匹配的机制，但是如果你投的词太少，广泛匹配机制也并不能挽救你，而且这样会有很多没有转化的词在浪费钱。

现场目前做的是新媒体行业居多，假设你是一个做美妆的，你的目标就是要小红书上的美妆KOL推广你的产品。假设小红书官方在后台把所有的美妆达人都拉一份数据统计有2万个，而你们现在只有20多个KOL在投，你的对手却有1000多个。（这里先忽略1000多个KOL的操作成本，和红人KOL营销不同，买某个词的流量在搜索引擎上操作成本很低。）这个和在搜索引擎上做投放是一模一样的。

类似的，不知道大家同不同意，现在还在找大V合作的，如果是做效果广告的话，就是那种以前在搜索引擎上买“阿胶” 这种关键词的人，ROI很低。

阿里巴巴的流量增长团队是2002年成立，现在在搜索引擎这块的投放水平可以看一个网页：https://www.alibaba.com/showroom/showroom.html

大家点一下A字母，这里都是以A开头的关键词，一页是120个词，A字母下有22429页。A到Z一共是2千多万个词。

以前这是我负责的，我能确定每个词每天的流量都达到了一定的搜索量，也就是说都是比较重要的词语。那时候我们的口头禅就是“加词等于加流量”。记得当时从国外一家专门卖词的公司买了3万多个优质的词，然后我们一个季度的KPI就完成了。

顺便提一下， 其实这种方法也可以用来做产品。

比如旅游行业，当时有个知名网站，我们把整个旅游行业的词挖掘到了大概有500万左右，然后像前面那样分组分类，就知道了这个行业大部分用户的诉求。

当你在搜索引擎上能分析的词达到500万的时候，已经基本上是全量数据了，这些数据至少可以代表这个行业一半以上的人的诉求。这可以成为大数据的一次很好的应用。后来通过这批数据，发现旅游行业只要你去做攻略类产品是一定会活得不好的，因为攻略类需求占比排在很后面。结果现在大家也看到有些做攻略类的APP至今挣扎在盈利边缘。

然后大家看前面的汽车行业的词库数据，从2015年起， “SUV”和“七座”一直是这个行业真正的热点，但还是很多汽车互联网公司不知道这个。

然后看在阿里巴巴的一个页面：https://www.alibaba.com/showroom/mp3.html

这里列出了MP3的一些属性，有按“功能”、“屏幕” “充电时间” “风格” 和 ”颜色”， 这里的属性分类以及每个分类里的那些项目，完全是按搜索引擎里用户的搜索量从高到低排序的。这样做的结果就是转化率和粘度非常高，比当时产品经理做的页面提高了4倍。

具体很多细节可以在线下聚会可以分享。

第三个议题：怎么做好SEO和PPC

做好SEO和PPC最重要的事情就是关键词挖掘，不做这个事情基本是没法搞好搜索引擎流量的。大家要明白这么一个场景：在搜索引擎上，你的流量是通过一个个的关键词作为载体传播出去的，没有太多词传播你的流量，总的流量怎么可能多呢。

具体的关键词工具，我先介绍我们开发的一个：

https://mp.weixin.qq.com/s/M1VCCFqNb9xSBnmD2hktFg

一个行业里，光靠人脑是想不出这么多词的，这个工具可以帮你自动挑出很多词。光年实验室正在做一个SAAS平台，还有更多的关键词工具会出来。

注意一点，词语的数据一定要有时效性，最好就是最近几天的。前面说过Google的15%的搜索词是过去1年从来没有人这么搜索过的，如果数据没有时效性是没什么意义的，很多一个星期前流量大的词现在可能就不是的了。

对于很多人来说，最能去执行的就是去百度做PPC投放。如果你们可以搞好关键词挖掘，百度对你来说依然是一个非常有红利的流量渠道。

不过要遵循一些基本规则：

1. 为了防止收不回成本，第一批投放的词必须是没有任何人和你竞争的

在百度，如果这个词没有人和你竞争，点击价格只要3毛钱就可以。

所以一开始的策略就是买别人没有投的词，我们所有投出去的词都要查一下有没有人在投，但凡有一个竞争对手就不投了。大家可能想不到的是，即使这样你竟然还是可以投很多词的。

2. 做好广告组和落地页面的优化

我个人觉得搜索引擎是最早教会国内互联网人什么是转化率、落地页、复购这些基本概念的，在它之后成熟的淘宝只是进一步把它普及给了更多的人。 而北美在90年代中期就有了第一波商业化的互联网公司，它们更早更系统的研究很多东西，可以去补课，比如《Landing Page优化权威指南》这种最基本的书。

很多淘系的培训，由于它是一个封闭系统，速成技巧居多，系统的东西不多。广告组和落地页面的优化，稍微科学地做一下改进，可能可以提升好几倍的ROI。

至于那种最基本的事情都无法做到的公司，比如：你们的投放人员投放的关键词少于100个；以及无论什么关键词的流量都跳转到首页等这种业余行为，应该立即关掉搜索引擎投放，去拓展现在的微信、快手和抖音等渠道。没有专业投放就只能放弃这个渠道了，但要我说这里真的很多流量没人要。

我曾经见过两家在海外竞争的中国互联网公司，同样的APP，一家的获客成本是1美元多，另一家是10多美元，而第二家一直以为本来就要这么多，直接决定了后面一家公司一年后在这个赛道出局。

不专业的投放就是在给公司放血，我见过很多不专业的投手害死公司。

3. 不要找外包公司，靠自己的团队打造自己的流量竞争力

特别是那种代为操作帐号的公司。这个句话得罪很多人，但是事实。流量获取、用户增长应该要成为一家公司的核心竞争力，怎么可能靠一家第三方公司拿到这个竞争力呢？ 搜索引擎流量外包这是一个逆淘汰行业，好的公司已经出局。（像我们这样的顾问型公司也只适合成熟的流量团队）

例如现在上市的某家流量外包的公司，曾经我们在办公室把他们的方案当作笑话在传阅的。 当他们的收益来自于你投放广告金额的百分比的时候，你投放的金额越多，他们收入越高，利益相悖，怎么可能会有精细化优化的动机。由于甲方帐号太多、而这些帐号基本都是实习生在操作的外包公司不要太多。

以我有限的创业经验， 产品和流量，应该是要公司高管要花最多时间的部分。我这么多年看过很多好的用户增长团队，很大程度上他们成就了那些公司。例如，我比大家更早知道今日头条的张一鸣，在2006年他们做酷讯的时候流量是做得特别好，甚至有一种方法成了后来行业惯用的方法。

当时酷讯做火车票查询，他们从一个固定的火车查询数据里把很多站站查询、车次查询生成了几十万个不同的网页，而这些网页都命中了很多查询“上海到南京火车票”这样的流量，从前面的案例大家可以推算，这种流量偏偏是大头，而“火车票“这种太泛的词流量没大家想象的那么高，所以酷讯的搜索引擎流量是很好的。

这种做法即使是十年后被“欣欣旅游网“抄了一遍依然获得了大量流量。

操作方法具体看：http://huoche.cncn.com/

这种方法后来被总结为：当你的行业有一些从固有数据库能查询到的数据，请把它网页化，去命中搜索引擎的关键词，然后这些流量就是你的。

后来有人把QQ号码、邮政编码、手机号码、天气预报等等都网页化一遍，都是大量的流量。

最开始今日头条APP在推出后，一个多月就做了900万的装机量，这是擅长流量的团队才能完成的业绩。而“今日头条”这个APP早期对5千多个网站抓取内容再去做流量的做法，和早期站长的那些站群方式是何其相似。大家想想抖音这个APP本身是怎么火的，怎么可能没有流量增长团队在后面做了大量工作。

SEO这块，要充分利用百度把近三分之一的流量给了自己的产品这个状态。百度问答、百度贴吧、百度文库、百家号甚至百度网盘等等全家桶里，全部要有你的内容。当你有了上面那样的词库，词库里都是用户的搜索需求，搜索量哪些高哪些低已经全部告诉你了。然后再在百度这些渠道里铺内容就只需要一些常识，只要去琢磨如何把你的内容合理放上去就可以了。

最近的流量红利是百度小程序，这和以前的百家号一样，是优先排名的。我个人觉得这是百度最后一波红利了。

百度也给了很多大站很高的权重，如知乎、搜狐自媒体、CSDN（你没看错）等，这一点在海外的Google也是这样的趋势，这不是搜索引擎偏心，而是经过很长时间的进化，上面会聚集更多好的内容创造者。我们可以去上面铺内容并转化用户。

大家要放弃一定要用自己的网站去做流量的观念，流量肯定是越来越集中到头部去的，那种把自己的网站也要打造成流量中心的想法越来越不现实了，特别是啥优势也没有的小站。所以可以安心地做一个别人平台上的内容贡献者，在这些平台上贡献内容，转手再把这些页面拿去任何其他平台上去引流。我以前一直说的方法就是要“让内容在渠道中间流动”。

还是以“阿胶“为例，可以这样操作：

从上面的词库可以看出：“阿胶糕适合什么人吃“有2万多一天的搜索量，去百度一下这个词，我现在在杭州搜索，发现是一个广告都没有人投的。（不排除其他地方有或者当你看的时候可能会有）

这个时候，应该去知乎、百家号、搜狐自媒体、百度知道、百度小程序等等渠道里出现你的一篇软文，里面在推荐你的产品。这样做完后，你要和现在这些排在前面的网页去竞争排名，只要一些简单的SEO技巧比如“锚文本轰炸”或“外部链接”，甚至最原始的“关键词密度”，你排上去的几率非常大，然后这些流量就是你的了。当然最后，这个词如果被别人挖掘到，那也也会变成红海，所以你的应对方法就是去发现更多其他蓝海词语，或者直接硬抢也是没几个人在竞争的。还有，图片中那几个排名前三的百度问答，你即使现在再去回答一下也会有很多流量的。

这么多年了，百度依然还有很多流量没人要。这点百度其实是自己把自己作死的。你看，虽然百度让很多人出高价买了词，收入也很多，但是百度的很多流量没有卖出去。相当于流量还有很多库存，流量没有充分被商业化，而广告主却在高价流量中没有获得好的ROI，这是双输的。今日头条在这一点上就做得好很多，本来信息流的流量比百度还集中，头条的巨量引擎现在开始开发很多的功能让大家的投放尽量错开不要撞车。

如果你们是APP且内容很多，一定要找个前端工程师把内容网页化并做基本的SEO，可以白捡很多流量。比如今日头条的SEO在我看来还是做得不够好，内容也是重复的，但是应该在百度获得上百万日UV不是问题。

还有很多的技巧实在无法短时间说明白，影响SEO排名的因素有几十个现在一个都没怎么讲，但这些也并不重要，刚才提到的3个都是随便一查就能找到的技术。 这么多年，在流量领域有技术算法派也有策略派，最后都是策略派胜出。这点也可以给正在做抖音、微信、快手的人一些启示。

这里再顺便说一下，“阿胶糕适合什么人吃“这个词如果你有把握用3毛钱的PPC成本可以收回投资的话，直接买一轮流量先。

第四： 基于关键词和基于关系链的流量方法

接下来我跟大家分享一种我多年来积累的流量体系，这是我最想分享的，它是很多方法的来源。

我个人的观点，流量一直只有两种载体：关键词 和关系链。很多渠道里的流量传播都是这两个基本载体中的一种，或者是变种、混合。

这是我们以前在阿里流量团队的方法论，它的推导是这样的：

流量的背后，是我们大家对信息的需求，不管你是找一个笑话段子、还是看一篇教你做饭的文章、或者是纯粹无聊打发时间随便刷刷。

人类目前为止传播信息的模式，要么通过文字、要么通过人和人的关系。

这个在原始社会甚至没有文字的时候都是这样的，比如一个部落发现了猎物要去捕猎，这个信息也是通过大家早就形成的语言以及人和人之间的关系网传递出去。

而假设我们回到20多年前没有互联网的时代呢？也是这样的。

我是80后，经历过没有互联网的时代。我举一个例子，那时候我有一个亲戚在船厂工作，他听人说有一种水下焊接的技术，但不知道具体是怎么实现的。在今天面对这样的情况你搜索一下就可以知道。

但是在没有互联网的时代，他也有两种方法可以去解决这个问题：一是去一家尽可能大的图书馆去查资料，以前的图书馆有个重要职能就是大家去查资料的地方；二是去问他的师傅或其他朋友，通过他们的关系网去找信息。很有意思的是，Google这个搜索引擎就诞生在1996年两位创始人在斯坦福大学给校方做电子图书馆的基础上的。

图文、视频他们传播的时候一定要用关键词给他们做索引的，比如抖音的算法就是给每段视频和每个人打标签，标签就是关键词，然后把人的关键词和视频的关键词做匹配，这是属于变种。

我们先看关键词为载体的流量渠道。

搜索引擎、淘宝和APP应用商店是关键词主导的流量渠道，这个自不必说。即使微信这个以关系链为载体的流量渠道，它首屏的搜索流量也非常大，所谓的WSO（微信搜索优化）也有了一些成功案例。而在微信小程序搜索里，如果你搜索“股票”，有几千个小程序都写着股票的标题，但是你搜索“股价”，却只有3个小程序写着股价的标题，你只要是第4个，也能每天来很多用户。仅仅整个股票证券行业，至少还有上万个这样的词没有人去关注。

在美国，有组织统计过所有搜索流量和所有社交流量，是非常巧合的1：1的比例，前面说过：“信息找人” 和 “人找信息” 这两种大家获取信息的模式没有主次之分，这里就有第一个数据上的证明了。

对于我们获取流量的人来说：人多的渠道要多圈人，词多的渠道要多占词。

我用一个例子开启大家的用关键词做流量的视角。 有一家做家装互联网的公司是这样获客的：在搜索引擎上把这个行业最热门的几千个关键词都搜集起来，买了十多个QQ号码，然后每个QQ号最多可以建500个群，他们建立的大量QQ群的群名称都是那几千个关键词中的一个，有软件可以批量维护群的活跃度，所以当QQ用户在用这些关键词去搜索QQ群的时候，他们的QQ群排在比较前面。这样十多个QQ号码每天能让八千到一万左右的QQ号码加入他们的群，然后再用微信私域的方法转化用户。

关键词为载体的流量都可以总结为一个这样的方法论： 在任何渠道里做流量，都可以观察这个渠道里是不是有些流量是通过关键词分发的。如果有，就去抢以关键词作为载体的流量。

至于关键词的来源，百度是一个普及程度很高的搜索引擎，只要那里热搜的关键词，在你要做流量的渠道里大概率也是热搜的。你都要做到大批量占领你所在行业的关键词，我们以前阿里的流量团队把这个方法叫“关键词占领”。

比如：微信好物圈，这是一个流量通过关键词分发的渠道；你占据了一批好的关键词命名的圈子，你就天然获得大量流量。

比如飞聊，也是一样的通过关键词分发的渠道，如果你认为这个平台会崛起，是一定要去里面建很多你包含这个行业的热门关键词为标题的小组，以后小组火了流量就是你的。目前飞聊的DAU也有几百万。

比如抖音这样的算法分发的平台，如果你的视频都打上很多行业热门词的标签，额外获得很多流量不是问题，更别说抖音是可以搜索的。去搜索一些热门关键词，很多排在前面的视频流量很大，但是他们可能不是靠内容精彩获得的流量，只是靠标签命中热门词流量就可以。

你只需要笃定一点：只要人类还在用文字传播信息，“关键词占领”的方法就会一直有效。

还有就算花钱购买流量的渠道都是能让关键词发挥作用的，比如今日头条的巨量引擎后台是开放了用关键词定位人群的投放的。

关于这个信息流投放，很多时候我们投放信息流，时间点很接近、人群属性可能都是25-45女性、高收入年龄什么的，大家的定向条件其实高度集中，所以广告展现是要靠提价的。但假如大家是用关键词定向，就不会撞车这么严重，也能触达到很多平常大家触达不了的用户， 平台流量得到充分利用，广告主ROI更好看，是多方共赢的。

关于关系链的流量，我在线下听过大家分享过很多好方法，特别是内容驱动、私域社群的很多玩法等。有时候很有感慨的，今天大家做的很多内容十多年前也有一批人和你们是同样的心态和状态，只是平台变了，但很多讨论的内容都是如出一辙。淘宝当年用一种仰视平台（163/网易/搜狐）的心态去拉流量，今天又有那么多商家用仰视淘宝的心态去获取流量，想想很有意思。

和关键词的玩法不一样，关系链的玩法我觉得国内是远远领先国外的。

不过国外有一批同行也是做社交关系链流量的，他们比我们更早把社交关系链的方法系统化一些，他们是怎么做的呢？

这里插述一下，像微信公众号这样的平台我觉得其实是抄袭自Facebook。这个一个很另类的观点，我借这个机会说一下。

大家看一张截图，Facebook在2009年就推出了一个产品叫 Facebook Pages，如：https://www.facebook.com/pages/ （需要翻**墙）

商家、公司、公众人物、社群可以给自己生成一个页面，这个页面大家可以关注，然后如果商家发布什么消息可以更新到你的信息流上。这和微信公众平台是完全一定的定位和功能，只是早了4年多。他们很多商家在Facebook做营销也是要拼命涨粉的，如Amazon的Facebook Pages有了快3千万粉丝。

而2013年，现在这样定位的微信公众平台才正式进入大家视野。所以如果我们借鉴吸收国外同行的方法也有一些有意思的角度。

基本上那时候的方法论是这样的：如果传播流量的载体是关系链，那就去优化这4个点: 即，传播信息的人的数量、传播信息的人的影响力、传播信息的速度、传播信息的美誉度。

国内是把传播信息的速度做到了的，相信不用我复述那些方法。然后做各种帐号矩阵的人也是把传播信息的人的数量做得非常好了，比如至今微博上的很多明星的流量运营团队。

国内严酷的竞争环境造就了大家各种奇招百出。我分享几个我们做社交关系链流量的玩法，看看我们是如何按国外的社交流量方法论做国内的平台的。

在“传播信息的人的数量“上，我举快手APP的例子。

快手APP上官方是分均分发流量的逻辑，也就是你打开快手，会把你附近的一些人推荐在你的快手主页。为了迎合这种分发逻辑，我们肯定是要做多帐号分发的。比如直播是这样操作的：我们开发了一个自己的群播系统，长下面这个样子,

它的视频信号是用一个摄像头来拍的，视频内容输入这个系统后，可以把这个视频分发到无数个其他快手帐号上，每个帐号模拟不同的地理位置，这样只要一个直播内容就可以出现在全国各个不同的地方。

当然它也可以把同一个视频信号同时在快手、抖音、腾讯、斗鱼等APP上跨平台同时直播。快手是不太喜欢相同的内容的，所以这个摄像头拍摄的画面的背景是绿幕，这个系统可以实时渲染出不同的背景，这样看起来就是不同的内容了。（没有破解app等非法操作。）

在社交关系链的传播方法里，环境很恶劣，你是被逼着要这么做的，在场的大家应该都知道，因为其他人会去布局更犀利的事情。有些我们都知道的大公司，私底下也很多类似的操作。在其他条件相同的情况下，如果传播人数别人比你多个几十上百倍，你也就没法安心地靠内容驱动了。

在增长黑客的很多成功案例里，以及现在我们在市面上看到的成功产品，有大量依靠人数取胜的例子。

那怎么做到“传播信息的人的影响力“ 呢？我们打造了这么一个系统，这个系统的原理和“企查查”的原理差不多，就是打造一个聚合爬虫（合法的爬虫，从不同的数据源爬取数据聚合在一起），这样做的结果就是：指定任何一个行业，每天都能找到几千个这个行业下的优质KOL，并有他们的个人微信二维码等联系方式。

如下图就是金融领域每天抓取到的数据：

会按各种指标给每个KOL打分，分数低于一定的值就先不考虑联系。但还是每天都有这么多的KOL，这又怎么来大量联系呢？我们也偷了个懒，是用企业微信批量联系的。

由于企业微信一天加上万个人都不是问题，所以我们就做了一套企业微信的群控系统，可以批量把这些人加为好友，然后群发话术来沟通，粗筛一遍后再人工沟通。在别人都在批量“洗”终端用户时，我们在批量“洗”行业内的KOL。

以下是我们的微信群控软件的演示版，企业微信类似：

大部分人都没注意企业微信的功能，这个企业微信大家一定要重视的，非常好用。过一段时间我们会推出一个企业微信的工具出来。

很多人不知道企业微信官方就有群发接口，不要再用那些山寨的群发功能了，然后每天加人不会轻易被封，加人还没有总数限制，而且你能相信腾讯官方在企业微信里竟然还开发有“活码”这种东西吗？

从策略上来说，如果腾讯官方专门希望你用企业微信来做私域，你哪有还不赶快用的道理，只会越来越顺应大家的需求的。只是注意一点，企业微信目前还没有朋友圈，微信群功能也受限（有消息说11月底都会放开），所以一定是要探索一套新的不同于个人微信私域运营的流量玩法。

这种玩法还特别适合产品冷启动，大家在冷启动的时候最缺的就是种子用户，这类聚合爬虫的方法可以让你迅速获得你想要的用户从而冷启动成功，我们自己就有过很多冷启动成功案例。

说起这个群控系统，我们做了两套不同技术原理的系统。大家知道基于xposed的群控系统在今年618的时候已经被微信严打，以前我们也认为xposed这种群控方案侵入性太强，我如果是微信官方也会非常不喜欢别人把我的APP改得乱七八糟。两套系统用的是别的解决方案，只是用它替代人工，不要非法破解使用就行，目前这两套方案都是比较安全的。

有些时候我们用这些系统能形成比较大的优势，但是越是这样我们反而越会想办法做好内容。毕竟我们是从大平台出来的，我们并不想在任何平台出于搞流量的需求而制造内容垃圾的。

为了防止带偏大家，我再多说一句。对于很多这样做流量的方法看起来很激进，但做起来是有底线的。应该要像阿里巴巴内部的那种做事风格，那就是：初心要正，但是做事要狼性。

我们从事的互联网行业是个信息产业，所以要尽可能地“传递高质量的信息”，把内容做到尽可能地好。而在分发这些内容的时候却要无所不用其极地、想尽一切办法去传播这些内容。

最后我们再来说一下“传播信息的美誉度”。我们国内真的非常不重视这个，而欧美的同行是很重视这个的，在这块做得非常好。

举个例子，我2011年曾经去瑞士日内瓦培训过一家公司，他们有个业务是专门帮瑞士本国的那些品表在新浪微博上做传播。他们的工作之一竟然是把一个微博帐号历来所有人的评论全部人肉分析一遍，用Excel全部统计好。分成正面评价和负面评价，而正面负面的评价又会分为好几个维度，具体到了是哪些角度是正面的，也有哪些维度是负面的。

而且让我吃惊的是这一切那时候竟然是人肉操作的，而操作这个的人也只学过3年中文，为了理解文字内容还要去翻词典。

社交媒体是最应该重视美誉度的。我们国内现在有了传播深度这个概念，美誉度就决定了每一层传播的时候的你的势能是加百分之几十的还是减百分之几十，按照数学公式计算，后面的结果天差地别。

今天的分享就到这里，希望对大家有启发。最后我建议大家去看一部电影叫《社交网络》，讲的是Facebook的创立历史。电影里前面十分钟在宿舍那段其实讲了马克·扎克伯格做增长黑客的方法，如果你能看懂的话非常有意思。

其实我所知道的增长黑客文化正是来源于Facebook，Facebook的历史上也有很多不能说的隐秘的获取流量的方法的。

文章来源：

看似简单的登录框，暗藏了多少值得推敲的用户体验？这10个细节，就是你和设计高手的区别。

技巧1：更明显

你不应该让你的用户到处寻找登录区域。他们找的时间越长，就会越沮丧。他们越沮丧，最终登录的可能性就越小。

一个很好的例子就是 Gmail 的登录页面。

你可以确切地知道你需要在何处登录，以及要在输入区域输入什么内容，上面的例子，如果你没有 Gmail 帐户，它允许你通过单击「创建帐户」来轻松地创建一个帐户。

好的用户体验是使你的登录区域明显，使你的用户尽可能容易地进行登录操作。

技巧2：使用第三方登录

第三方登录正迅速成为用户登录账户的方式，理由很充分。为不同的产品创建多个账户既耗时又令人困惑。很难记住一堆不同的密码和用户名。

通过允许用户使用用户的第三方账户中的信息来创建一个账户，可以解决所有关于这些问题。

让我们来看看下面的石墨文档和MONO登录时的选择方式：

甚至还有更方便的注册登录方式，手机短信验证码在注册的同时登录：

一些产品在用户点击第三方注册登录时还需要用手机号进行短信登录，从用户的角度看，这很明显是一个不好的体验，但是产品的角度去思考就不一样了，产品为了获取用户更多的信息，则需要这样来设计流程。

这种设计流程该不该用，这需要在产品和用户之间进行权衡，第三方与手机短信验证码登录，在提高用户体验的同时，可以提高用户的效率，使界面更加直观。

技巧3：更简单

因为环境不同，在中国很多网页端的网站，第三方登录很的产品很少。

例如，如果你的 QQ 没有在电脑端登录，因为即使选择第三方 QQ 登录，你也要拿出手机—打开 QQ —打开扫一扫，进行扫码登录等一些列的操作。

又或者，当你想要登录 behance，只要浏览器有记录之前的第三登录，点击第三方登录即可直接进入该网站，甚至不用注册。

可以看下面的腾讯网与 behance 的网页登录：

好的登录体验应该只有账号、密码两个输入字段，或者手机号码、短信验证码两个字段，以及使用第三方登录的选项。在简单、的同时，并为用户提供了很好的体验。

技巧4：区分注册与登录

如果一个用户来到你的网站进行注册，或者想他们返回登录界面，这就需要让用户清楚的知道他在何处，下一步应该去哪里。

我们通过使用登录字段与注册字段的区别来帮助他们，让我们看看下面的 dribbble 注册界面：

创建账户的按钮已 dribbble 的主题能很快突出在用户面前。新用户可以直接在页面上注册，而返回的用户可以使用最上面右上角的登录两字。看到上面「sign in 」字段了吗？

dribbble 使用了不同的颜色、布局去区分注册按钮与登录的入口，这样更加清晰明了。

同时可以看看 dribbble 的主页面，他们会把 sign in 与 sign up 的进行区分，在 sign up 加上微边框，让用户能更快区分两者的不同。

技巧5：跳过用户名

让用户用他们的用户名来进行登录真的不是一和很明智的做法，为用户省去记录你产品的用户名的麻烦，应该让他们使用他们的电子邮件地址或电话号码注册来进行代替用户名。

ins 让用户有机会用他们的电话号码或电子邮件地址登录。

反例：

尽可能让用户同时用手机号码或邮件地址来登录，因为用户可能会忘记他们用来登录你的产品的电子邮件地址，所以这时，用户能使用手机号码进行登录。

技巧6：密码可显示

给用户提供可显示密码的按钮，减少用户输错密码的操作，当输错的同时，可进行对错的字段进行纠正，不用全部删掉重新来。

让我们来下面的脉脉和片刻：

技巧7：记住用户信息

还有什么比再次到你之前登录的网站或 app，却发现你需要再次输入账户密码登录更令人沮丧的事情吗?

当你的用户返回到你的网站时，请确保他们已经登录了，或者为了方便登录，提前为他们预先填充账户和密码等字段。

谷歌在这方面做得很棒。每当用户需要重新登录到 YouTube、Gmail 或任何其他谷歌品牌时，他们的登录信息都会被记住，使登录过程更加简单。

盟友银行允许用户勾选 「保存用户名」 复选框，允许网站在用户到达网站时默认记住用户名。这是记住用户信息的另一个好方法，展示形式可以多样化，可根据自己产品与用户需求来进行把控。

技巧8：轻松恢复密码

有时你的用户会忘记他们的登录信息。当这种情况发生时，尽量让恢复过程尽可能的轻松。

公众号的账户密码输入栏有记住密码复选框，以防用户忘记他们的用户名和密码，不用每次进来都输入账户密码进行登录。

印象笔记对他们的密码做了一些巧妙的处理，让用户知道他们多久以前更改了密码。

这个小小的提示可以唤起用户的记忆，帮助他们记起密码。

如果用户忘记了他们的登录信息，要让他们清楚应该去哪里。如果你将使令人沮丧的情况变得不那么令人沮丧，你的用户将因此会喜欢上你的产品。

技巧9：让用户知道大写锁定已开启

我们都有过这样的经历：令人沮丧地输入和重新输入你的密码都无济于事，结果却发现你一直开着大写锁定键。

可以通过警告你的用户，防止这种情况发生。微软的 Edge 浏览器还使用户可以选择在键入时打开大写锁定时打开通知。

技巧10：无密码登录

让你的移动用户使用无密码登录，现在很多特别是金融类 app，都可以让用户进行指纹登录，因为不像其他 app 一样可以一直保持用户已登录状态，在保障安全的同时能更便捷。

以上的设计技巧与案例希望能帮助各位读者提高产品的用户体验。

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

业内有很多人觉得手势交互没必要拿出来深究，觉得用户使用产品的过程中，自然而然就会去使用拇指，进行手势操作。但这种说法，就跟「用户心理模型」类似。当然，对于用户来说没必要深究手势交互，但作为设计师，如果不了解其背后的逻辑，那么就无法解决产品设计背后的一些问题。

所以我们今天，好好聊一聊手势交互这件事。你会发现，原来你以往观察或以为的设计问题，都是手势交互在作祟。

手势的意义

我们以前经常听到「以用户为中心做产品设计」这句话，意思是产品需依附于目标用户的真实场景来设计。与此同时，其实还有一句话在提醒着交互设计师如何做产品设计，就是「以触摸屏为中心做产品设计」。

为什么呢？因为用户从始至终都是在跟触摸屏做接触，不管换了什么设备，他们都是要通过屏幕与产品进行交互的。

我们可以在这里思考一下手势的意义。

手势的出现改变了什么？可以回想一下 iPhone 4 发布的时候，当看到这样一台屏幕上没有任何按键的设备，是不是会觉得不可思议？键盘，电话接听按键等都消失不见了。

人们在使用 iPhone 这样的产品时，不再需要去强行记忆任何固体按键。触摸屏与手势的结合，帮助我们隐藏不必要的元素，帮助用户聚焦于内容，在有限的物理空间获得更多的信息。

所以用户通过触摸屏与产品进行交互，跟通过键盘按键与屏幕进行交互是完全不同的。手势交互更自然且更。

手势操作对我们来说如此自然和直观的主要原因是因为它们类似于与真实对象进行直接交互。譬如你用遥控器控制电视上的按键，需要通过上下左右这样的操作来定位指示器，而触摸屏直接就可以通过手指点击内容进行操作。这是完全不同的概念。

综上所述，我们能知道，手势的三个要素：简洁、易用、直观。

所以我们通过一些常见的手势行为，就可以在产品界面上很轻松的完成任务。

常见的手势行为：

• 点击：单指短暂触摸表面；
• 双击：单指快速两次触摸表面（通常是缩放）；
• 拖动：沿表面移动而不会破坏接触；
• 捏/展开：用两根手指触摸表面以移入（捏合）或移出（展开）；
• 按下：单指触摸表面并按住；
• 滑动：快速手势，不需要触摸目标。

当然，我们经常也会遇到一些背离手势交互的产品设计，虽然也是点击、拖动等等，但操作起来总是不那么顺心。这里面有一个关键点就是，手势直观性。

有数据表明，苹果的 3D Touch 使用率非常低，就是因为直观性太差，用户不知道通过这个操作能带来什么结果，且使用它需要长按，经常会同时呼出「卸载」，那么效率也就会降低。久而久之，用户就不去使用了。

正面例子如下图，滑动与文案结合。

这样一看，用户马上就能知道这个操作行为如何触发，紧接着就产生行动，然后会反馈结果。

这也是手势交互的核心：触发，行动，反馈。

对比 3D Touch，触发没有提示，行动后时常有两种反馈结果，相比起来就不那么友好了。

除了上面聊的这些，手势交互还能从另一方面来提升效率，就是拇指操作区域。

拇指驱动设计

我们都知道，现在手机屏幕越来越大，甚至比最早屏幕大了一倍以上。但是很多设计师并没有转换思维，跟进这个趋势的变化。

这里给大家普及一个知识：大部分人误以为，手指在屏幕上的热区是永恒不变的，但其实手指热区会根据设备的变大而缩小。因为手掌支撑设备的重心靠后走了，所以拇指操控屏幕的范围也就变小了。如下图。

结果是，手机屏幕变大，双手持机的用户变多，但依然还有 75％ 的用户是使用拇指来触摸屏幕的。因此，术语「拇指驱动设计」应运而生。

我们上面说到，在使用一些产品的时候，经常会遇到使用起来不顺心的情况，然后说了「手势直观性」的概念。但这里，还有个更重要的原因，就是「拇指操作区域」。

拇指操作区域被分为三块内容，分别是：易于触达，难以触达，以及介于两者之间的区域。

看下图。

所以在设计界面时，要注意界面的主要操作元素是否处于用户易于触达的范围之内。

如果你仔细观察并思考过，也会发现，iOS 的产品界面中，「返回」按钮就位于「难以触达」的区域。原因是产品人员本身也不想用户返回或退出，而是让用户聚焦于当前页面，想要返回，那就需要付出一点成本，什么成本？操作成本。

有人会说，由于 iOS 可以从手机的左边缘向右侧轻扫以获得返回效果，因此在大多数 iOS 产品中，返回都不需要太大的操作成本。但是，并不是所有 iPhone 用户都知道这一点，也不是所有产品都支持这一特性的。而且手势交互的进化本来也就是为了提升用户操作的效率，所以本质上他们并不矛盾，只是相比以前，我们现在的操作更快了。并且「右滑」返回，本身在手势操作中相比「点击」也是更具操作成本的。

当了解了手势的一些意义，以及拇指操作区域对于产品设计的重要性之后，我们就可以通过一些案例来做一个全局分析了。

1. 内容在上，操作在下

许多人设计 App，但是没人研究过 App 为什么要这么设计。

比如，为什么起初要把标签栏放底下呢？关于这个问题，当初我也是问了许多人，而基本都只是说这是官方设计规范。这相当于是一句废话。

通过翻阅多方资料，我发现在工业设计领域有一条重要的基本设计原则：内容在上，操作在下。

比如在使用电脑的时候，操作在下意味着使用者在操作过程中，手指始终处于界面下方，而内容在上面，就不会出现手指遮挡内容的情况。

如下图的键盘操作提示：

基于此，相信你也知道为什么标签栏在下方了吧？

另外，为什么 iOS 设计规范建议将「编辑」按钮放置在界面右/左上方的位置呢？

界面右/左上角的位置对拇指来说显然是不友好的。然而，这样做的原因也是显而易见的：编辑功能会让数据发生变化。将这类控件放在难以操作的位置上（与左上角的返回是一个道理），就是一种防御性的设计策略，可以在一定程度上避免因为太容易产生误操作而导致的破坏性的结果。

通过这一小段之前聊过的内容，你们会发现，手势与拇指操作其实在驱动着产品设计。下面我们来聊个大的案例。

汉堡包菜单的消失解析

汉堡包菜单，也就是侧边栏导航，Facebook 早期测试显示侧边栏导航让用户使用率降低了一半。

我们一起来看看市面上给出的三类说法。

1. 可见性太低

默认状态下，用户是看不见侧边栏的，除非点击了侧边栏的弹出按钮。所以这种情况下，里面的功能都是用户脑袋里已知的，但很可能都想不起来。比如，现在你回想一下知乎底部 5 个标签分别是什么？或者微信右上角「+」里面有哪些功能？是不是要想一会儿，才能记起来？甚至还是想不起来。

之前我在文章里写过，用户对于功能的使用一定是「所见即所得」，而不是「心向往之」。用户只会注意自己看到的信息，而不是凭借记忆或想象来使用产品。

底部标签栏就很好的解决了汉堡包菜单的「可见性」问题。

2. 效率较低

效率较低主要在于操作频率，大家看下面两组图的对比。

第一张图，当用户从首页进入到个人信息页面，只需要两步；而第二张图，则要三步。

这里多一步看起来似乎影响不大，但如果现在要从个人信息页面到「标签 3」的话，第一张图也只需要两步，第二张图还是需要三步，当频繁去使用这样的产品后，用户的整体效率就会下降，体验也会随之降低。

3. 与平台模式冲突

大家应该知道，在 iOS 的操作页面中，通过手势可对 tab 进行左右切换，而侧边栏除了通过点击菜单按钮展开之外，也可以通过右滑弹出。这里面有什么冲突呢？看下图。

当页面聚焦在「标签 2」时，右滑除了能回到「标签 1」，同样也很可能会切出侧边导航栏。

这样的手势冲突，导致页面层级与功能导航的优先级混乱了。

无论是导航还是控件，当它们组成一个页面后，它们的操作就会有优先级。比如下面这个例子。

如果你对标红的分段控件比较熟悉，就知道，它是可通过屏幕滑动进行切换的。但是在「短信」里，它是不能通过滑动屏幕进行切换的，因为用户可对单条信息进行左滑做删除或其他操作。所以当页面操作模式存在矛盾时，我们会将子层级操作优先于父层级操作。

譬如你进入朋友圈，是不能马上回到首页的，这时候页面层级较深，产品人员要将用户聚焦于页面本身，如果直接能返回到首页，页面层级和产品架构就会混乱。

类似的例子还有很多，我这里就不继续列举了。

所以从「短信」的例子可以看出，当控件与控件之间的手势发生冲突时，我们要考虑优先级，将内容优先于页面来处理。那么回到上面的例子，分段控件与汉堡包菜单的手势发生冲突时，很明显我们要优先分段控件的操作，而禁止掉汉堡包菜单的右滑手势。结果就是，效率又低了。

4. 小结

这三类，如果你认真思考里面的关系，其实就会发现，它们的共通点就是与拇指的联系过于被动或直接被切断了。

• 第一个「可见性太低」的例子，菜单被隐藏，拇指不能直接与菜单产生关系，并且距离过远，拇指难以触达。
• 第二个「效率太低」的例子，用户需要通过拇指来回操作，导致效率降低，这就跟使用遥控器控制电视机一样，用户无法直接触达内容。
• 第三个「手势冲突」的例子，其实就很清晰了，就是说标签栏的优先级可能会被页面的其它控件所取代，那么拇指就无法直接对其产生作用，从而禁止当前页面的手势交互行为。

它们的核心点就是拇指与触摸屏的关系。

如果你现在还不能深刻理解汉堡包菜单的劣势，那就想一下去看一下现在的产品，其中「我的」、「个人中心」或「更多」其实都是变相的汉堡包菜单。

在「我」这个标签页里，这一系列功能列表，无非就是另一种模式的汉堡包菜单，只是这里呈现的都是不重要的功能，并不影响用户使用这个产品。回想一下，你是不是很少，甚至从来没用过这里的某几个功能？再跟手势结合，就会发现，「我」所处区域并不是容易点击的区域，这就是它效率低下的原因了。现在能懂了么？

弹框的操作路径

当传统的确认弹窗逐渐被手势操作取代，大家就应该察觉到：以往从电脑迁移到移动设备上的交互行为已逐渐被改善。

我曾经写过一篇文章，叫「取消按钮的设计逻辑」，讲了「左取消，右行进」这个原理。意思就是当我们在设计弹框的时候，用户已经习惯这样的操作路径，所以不要轻易更换位置以混淆用户的认知。再从手势的角度来说，就是右边更容易点击。

后来有同学说到，但是有些特殊场景，譬如删除资料，而产品人员不希望用户删除，于是把删除放在左边，取消放在右边。毕竟右边更容易点击，所以位置换了会比较合理。

这是错的！

我们不能通过改变用户使用产品的常识来将产品人员的想法置于用户之上。当用户已经形成「左取消，右行进」的认知之后，违反这样的一致性，去换位置是很危险的。所以出现了 action sheet，来解决一些产品关于 alert 无法解决的问题。

如图。

大家要记住的是，当页面逻辑与手势操作产生逻辑冲突时，我们不是去否定以前已经被验证且正确的内容，而是通过创新，来解决这个冲突。这就是拇指驱动设计的一种方式。

包括我们以前在移动设备上选择删除某项数据，都会弹出警告框，询问我们是否确认删除。这种方式会打断我们的操作行为，久而久之，用户已经对此交互方式习以为常，或者说免疫了，但这种弹框的方式始终被认为是不好的一种交互手段。所以侧滑删除，已经被更多产品功能用来取代没必要弹框的操作。

也许很多人没思考过底层原因，或者仅仅只是觉得其相比弹框显得更友好。其实这个行为是基于手势交互做了相应的优化，让用户操作起来更加方便。

Banner

到了这里，我再举个所有人都熟悉的例子，就是轮播图了。

轮播图最早出现于网页端，后来被大量商家模仿，以至于到移动端还备受各产品设计人员的欢迎。但其实很多人对轮播图的使用方法都是错误的。

下面来看轮播图与手势的关系。

试想：你的轮播图有 6 张 Banner，你要翻到第 4 张，无论是往前翻还是往后翻都要产生 3 次交互行为。而大部分产品的用户在界面停留的时间不会这么久，更不会看完你 Banner 的内容。以至于有研究表明，大部分产品里，除了第一张 Banner 的点击率能达到 83% 之外，其余的点击率都非常低。

有人说可以点击下面的原点指示器做跳转，这么小的点，你觉得点击它现实么？所以手势交互与轮播图是相互矛盾的一种设计方式。

所以当运营策划了一个活动，而你就往顶部的轮播图里塞，这个行为就已经注定这个活动的用户参与度是很低的了。除了个别电商产品，他们以卖广告位给商家作为盈利点，但即便如此，我相信这个广告位除了第一张图的点击量稍高外，其他图片的点击量相对于产品本身的用户体量比较而言还是很低的。这也是为什么部分产品把轮播图规则改为用户进入首页随机展示轮播图页面，而不是强制指定于显示第一张的原因。

毕竟轮播图在顶部，用户需要通过拇指长时间的在「延伸区域」进行操作，那么使用率自然就降低了。

如果你的产品有很多活动是在同时期进行的，那么我给部分产品的建议是放一个活动主题入口，如下图。（当然，这要视情况而定，并不是通用的。）

搜索框的变化

我们现在看到的搜索框基本都是放在屏幕顶部。

为什么呢？

市面上对这个问题的解释是这样的：用户已经被现在的产品训练得在界面的顶部必须看到一个搜索框，设计师打破这个常规就要承担风险。

看完这篇文章，你就已经知道，对于用户来说，由于屏幕顶部离拇指很远，处于难以触达的区域，在体验上很不好。所以搜索框成了认知上应该在顶部，但操作体验上又不应该在顶部的一个设计。

但是回想一下，会发现大多数 App 的主要内容都是位于易于触达的区域。所以当看到高德地图把搜索框移动到下面来之后，就能知道，拇指驱动设计的概念被越来越多的人认识到其重要性。

地图类产品把搜索框移到下面来的首创应用不是高德，应该是 Lyft。

瞧，拇指驱动设计，多酷~

总结

《上瘾》里有句话：当人们不由自由地做出下一个举动时，新的习惯就会成为他们日常生活的一部分。

当手势充分地发挥了作用，辅助用户操作或实现功能，它就成了用户不可分割的一部分。

今天通过对手势意义的解读，以及拇指驱动设计的解析，再加上这些案例的拆解，我相信你能更好地理解为什么手势交互这么重要了。

交互设计师对于「触摸屏」，必须有深刻的认识，才能理解设计背后的逻辑。

如果这篇文章对你有帮助，记得点个赞，后面我好持续输出。

文章来源：优设

互联网的底层逻辑就是以一种更的形式来满足了我们的需要，让我们的生活和生产更加的智能和。

底层逻辑是什么？如果给它一个释义的话，那应该是：最初的意图或做一件事情原始的出发点。

互联网的底层逻辑

我们生活在一个网络时代。可以利用网络，购物，打车，叫外卖，娱乐，办证，学习等需要。可是在没有网络的年代里，做任何事情都是需要跑腿和亲力亲为。

我们对比没有网络年代。互联网给我们生活带来了极高的便利和效率。

我认为互联网的底层逻辑是：用一种更的形式来满足我们生活生产而产生的需要。

我们拿买衣服，购买外套举例。

• 进店购买：询问导购–找到外套–挑选–决定买不买
• 网上购买：搜索外套–屏幕展示外套–挑选–决定买不买。

经过对比发现：

进店购买和网络购买最初的意图都是满足穿衣服。两种形式的心理活动逻辑一样。都是店铺找到外套，然后作出购买决定。只是两种方法的获取形式和途径是不一样的。

1. 实体店询问导购，变成了我们线上自主搜索。
2. 口头说出外套变成输入关键词“外套”。
3. 获取到的结果由导购带到引导变成外套信息数据展示

互联网技术的让购物，让买衣服多了一种途径，多了一种形式并且有别于我们传统的购买方式。

再如直播卖货，直播卖货在网络上火了一把。口红一哥李佳琦直播卖货，1分钟售罄14000支唇膏、打破“30秒涂口红”吉尼斯记录、5个半小时带货353万……最高时段3000万人在线围观。

现在我们要聊的并不是网络红人的伟大数据。而是网络直播这个事。想一下，网络直播是否在真实生活情景有原型。

看到上面的情景，是不是觉得熟悉了。

• “瞧一瞧，看一看”
• “厂家做活动，回馈消费者，不要1999，不要1599，只要999”
• “走过路过不要错过”
• …..

我们暂时称这些情景为现场直播，现场叫卖。由于互联网技术的成熟，直播平台的成熟。将现场直播搬到了网络直播。网络直播底层逻辑就是现场叫卖的另一种形式。

我们可以发现，互联网很多项目其实都是可以从现实生活中找到原型：

• 购物–电商
• 线下地推–网络直播
• 电话叫餐–外卖
• 培训–网课
• 阅览馆–电子书
• 办证跑腿提交纸质资料–网上提交电子档资料
• ……

互联网如何让生活生产变得更为？

1. 连接，跨空间，跨地域连接人

假如没有网络，我们人与人之间的生产活动大多只存在于本地圈子。例如：

• 在当地文化圈学习，与当地同龄人成为同学。
• 信息和话题交流闭塞，对外界信息获取滞后。
• 和当地人做生意，把货品卖给当地的消费者。

有了网络：

• 在抖音快手，我们可以看到其他城市的面貌，了解更多的人文民俗。
• 在网络课程上学习平时接触不到的知识。比如：理财，摄影，写程序，做会计。
• 还可以通过电商将生意做到全国各地。

网络连接能突破界限，跨地域、跨空间，将不同省份，不同城市的人，通过互联网联系起来。然后将我们的信息，个人技能，社会信息放大到更多地方。

2. 赋能，释放能量，价值最大化

以前有种现象。那就是信息不平衡，需求与被满足不平衡。

比如：A想采购一批水果加工仪器，但当地农业为主，别说售卖水果加工仪器，即便是询问他人也鲜有人知道。

但在网络时代，我们只要百度或者阿里巴巴搜索。总会得到我们想要的线索或者结果，总能找到加工仪器供应商的信息。

再如：十八线县城要学习IT编程语言，一般来说要去大城市培训机构学习。有了网络，直接在一些课程平台上购买课程就可以了。

上面的例子想说明的就是互联网可以放大社会资源的利用率，将价值更大化，让更多人参与参与到社会资源的共享当中。消除局限和阻隔，将知识课程提供千千万万的人可以学习使用。

滴滴平台一方面解决了人们打车难的问题，另一方面也将闲赋私家车全部利用起来，给打车这和私家车车主同时满足需求和创造价值。

几年前我们看着小卡片的菜单和电话叫外卖，现在我店家再也不用通过发传单来招揽生意了，只要用户有需要打开app就可以实现足不出户享受用餐。

互联网将社会资源效率更大化。无论是外卖平台，学习平台，电商平台都是将原来局限在小范围的服务放大到全国各地的人群使用。这些都是互联网技术赋予的能量。

3. 破界，突破界限，让不可能成为可能

在那个守着电视机，听广播看报纸，用着纸币的年代。怎么也不会想到今天我们可以拿着手机看新闻，追剧，刷抖音；用手机乘公交，乘地铁；手机当钱包，网纱购物，线下消费。所以很多老人好像有点不能理解年轻人的生活方式。

所以技术可以让满足我们需求的方式发生改变，甚至是颠覆的。

从前我们看的也并不是电视本身，而是看声情并茂的画面；报纸也不是报纸而是信息；使用纸币是为了完成交易。电视，报纸，纸币这是一个时代的载体。

互联网技术的发展让这些载体发生了变化，打破了刻板印象。让我们知道了很多东西其实只是个物体，这些物体帮助实现我们内心产生的需要。

今天只是这些物体被新的物体替代了，就好比手机替代了一部分看电视的需求。在十几年前我们怎么也不会想到今天那么多东西都被改变和替代。也许我们现在不切实际的想法，在将来的某一天也终将会被替代和成为现实。

互联网把我们每一个人连接在一起。放大了市场，提升了效率，突破了界限。用一种新的形式满足人们日新月异的需求升级。

互联网继续，5G来袭，展望未来。

互联网已经渗透到了各行各业。大到与我们生活息息相关，也可以小到陌生领域。人们都说互联网的发展已经到了瓶颈，我更愿意相信是互联网是暂时进入到了它的发展周期。

技术只会不断的向前，不断的用新的更好的方式来突破替代的旧的形式。随着5G网络的到来，肯定会有新一轮的技术革命到来。

第5代移动通信网络比4G网络的传输速度要快10倍以上，一部1G的电影可在8秒之内下载完成，我相信这绝对又是一个新的起点，很期待5G时代给我们带来的惊喜。

4G时代连接人与人，是服务业的升级

不难发现，4G网络应用大多数属于服务范畴。像电商，外卖，打车，餐饮其实都是服务员行业。4G时代提高了服务效率，实现了跨距离，跨空间服务。

视频聊天可以穿越见面时空对话；电商可以让你在一个地方买遍全国甚至全球；新零售可以实现不出门买菜做饭。4G网络连接人与人，大大提高了人与人之间服务的效率和数量。

5G时代连接人与物，交互体验升级

随着5G网络的到来及速度效率的提升，我们可以实现更加多元化的连接。

5G可以做到4G想做但有无法实现的事情，例如扩展到人与物之间的连接；也可以在4G基础上实现更加精准的计算，又如精密的医疗，更加精准和快速的大数据。

5G网络将继续升级改变我们生活，它将继续改变娱乐，交通，医疗，智能家居等等领域。我们可以试着猜想：

• VR技术，让看电影能够有更佳的3D体验。
• 网上购物不在需要看图片。而是有更好的体验，身临其境在虚拟的店铺中。可以对商品有触摸和移动等虚拟的互动体验。
• 无人驾驶技术
• 智能家居。不在家或者在外地对家居进行操作，比如：关窗，开空调，扫地等。
• 智能医疗。如；远程手术。由于5G网络有着更加精准的效率。支持医生运用机器跨医院操作手术等。

技术的进步会给我们的生活带来改变，我们期待新的形式来满足我们的需求，期待我们的生活和生产更加的智能和。

 文章来源：人人都是产品经理

需求整理的现状

写这篇文章的初衷，是在实际工作中遇到 PRD & DRD 文档，对于一些交互设计图，会产生不理解，或者说在实际落地画图的时候会发现一些前后不一致的问题，解释过于冗余，不清晰。在接触新的业务时，很难把新理解的内容从上至下的消化完整。所以希望通过这篇文章帮助刚接触交互的同学更好地开展交互设计工作。

在传统瀑布式需求分析流程中，我们设计师往往拿到的是已成型的信息架构图&产品结构图&关键业务流程图，只是了解一下大概是什么类型的产品，很难发现企业产品中真正关键的流程价值点在哪里，或者说也不清楚后续发展的走向，只能卯足了劲去做图做说明，整理完整。时间紧迫压力大，又要照顾整个项目。往往决定产品成功与否的，是产品 20% 的主要功能（二八原则）。所以在面临初期产品设计中，应该将主要精力放在重要功能流程中。

目前，在互联网产品中，敏捷开发是所有产品设计者最推崇的。原因在于，能够对业务、设计、开发更有前瞻性&敏捷性。

理解业务需求，是做好交互的首要条件

产品交互的成功一定是建立在业务需求提炼清晰的基础上。业务需求的价值提炼，也是设计师需要参与完成的。业务需求是一个比较大的任务，来源可能是老板的要求，可能是产品提出的，也可能是用户的反馈。通过业务需求，我们要分析出相关的业务目标。有个偶然的机会，了解到彩色 UML 的设计方法，在具体实践中，感觉这个方法能够快速适应任何业务流程，简单方便，易懂，并能快速发现业务流程中的问题，加以修正完善。

彩色UML建模

有幸认识王海鹏老师，他推荐了早年他翻译的彩色 UML 建模一书，作者 Peter Coad，是将彩色和企业组件集成到建模技术之中的第一本书的主要作者，是世界上经验丰富的建模人员之一，他所创建的模型几乎涉及到所有行业。

此书是第一本介绍用彩色来表达软件设计的著作。作者用 4 种颜色来代表 4 种架构型，给定一种颜色，你就知道这个类可能具有哪些属性、链接、方法和交互。得到的彩色构建块能创建更好的模型，并获得应有的认可。彩色和架构型仅仅是开始。作者更进一步将这些架构型发展为 12 个类的领域无关组件。作者在过去 10 年中创建的每个模型，都遵循这个组件所表达的基本形状和职责。

笔者利用彩色 UML 建模的设计方法，用于业务梳理工作，达到了意想不到的效果。以下为彩色 UML 建模基本概念（截取彩色 UML 建模书中的介绍）。

△ 《彩色UML建模书》第9页

△ 《彩色UML建模书》第10页

△ 事例会员注册

交互设计中常用图

1. 实体关系图（又称ER图）

定义：ER 图是用来描述现实世界中的实体关系模型，所谓实体是指客观上或者逻辑上存在并且可以区分的人事物。

作用：促使你以最适合技术理解实现的方法，来规范的描述功能模块的核心要素，其实就是数据库的物理结构。而这种描述是无二义的，最清晰传达 PM 的设计思想。

2. 功能结构图

功能结构图就是按照功能的从属关系画成的图表，在该图表中的每一个框都称为一个功能模块。功能模块可以根据具体情况分得大一点或小一点，分解得最小功能模块可以是一个程序中的每个处理过程，而较大的功能模块则可能是完成某一个任务的一组程序。用通俗的话来说，功能结构图就是以功能模块为类别，介绍模块下各功能组成的图表。

作用

• 梳理需求，以鸟瞰的方式对整个产品页面中的功能结构形成一个直观的认识。
• 思考并明确产品的功能模块及其功能组成。

3. 信息结构图

信息架构属于用户体验的结构层，是产品的骨架。一般是由产品经理或者更高层的管理人员给出大框架。除非是大的产品迭代，否则不会大改。

作用

• 帮助 PM 梳理复杂内容的信息组成，避免信息内容在展示过程中出现遗漏、混乱、重复；
• 作为开发工程师建立数据库的参考依据。

信息结构图构成要素

• 导航：网页访问者的访问途径。
• 频道：某一个同性质的功能或内容的共同载体，也可称为功能或内容的类别。
• 子频道：某频道下细分的另一类别。
• 页面：单个或附属某个频道或分类下的界面。
• 模块：页面中多个元素组成的一个区域内容，可以有一个或多个，也可以循环出现，如：文章列表。
• 模块元素：模块中的元素内容，以文章列表举例，文章标题、文章摘要、文章发布时间，这些都是元素，都是组成模块的内容，同时他们也是可以循环出现的。元素的类型可以是：文字、图片、链接等等。

4. 产品结构图

定义：产品结构图是综合展示产品信息和功能逻辑的图表，简单说产品结构图就是产品原型的简化表达。

作用：它能够在前期的需求评审中或其他类似场景中作为产品原型的替代，因为产品结构图相较于产品原型，其实现成本低，能够快速对产品功能结构进行增、删、改操作，减少 PM 在这个过程中的实现成本。

5. 业务流程图（泳道图）

业务流程图，不是操作流程图也不是页面流程图。它是产品的整体业务流程，直接和业务挂钩，可以说是产品的核心流程。

作用

通过业务流程图，钻研关键事件的流程，分析为什么要这么做，探索出更深层次的问题，从而对现有不合理的业务流程进行重组优化，进而制定优化方案，改进现有流程；阐述在项目中各个角色是如何产生相关联系的。

绘制规范/建议

• 让涉众参与，不要闭门造车：与业务流程图包含的各个参与角色代表适时确认事情的原本流程。
• 恰当的层次分解，不要将所有的环节都铺到一张图上。
• 逐渐深入，先抓枝干：切忌一开始就陷入细节。
• 流程一定有开始和结束：切忌交出来的流程图，让读者问：流程的开始点是什么？用清晰的代表开始和结束的符号来完成第一步和最后一 步。
• 流程图符号绘制排列顺序：由上至下，由左至右。
• 同一流程图符号大小宜相对一致。
• 编号：这是让沟通效率更高的优化措施。当你有了编号系统，相当于对你的流程图都赋予了唯一识别身份证号。负责流程规则审核和优化的部门能够清楚在邮件里传达 H5.1 流程优化，大家就更明确指的是什么。
• 路径符号应避免互相交叉。

6. 任务流程图

任务流程图就是通过图形化的表达形式，阐述产品在功能层面的逻辑和信息。它能够更清晰、直观地展示用户在使用某个功能时，会产生的一系列操作和反馈的图标。

作用：基于业务流程，进行任务流程梳理，阐述角色和程序发生交互的流程，你如何进行操作，系统如何进行反馈。

任务流程与需求文档中的业务流程并不一样。虽然它们都是流程图，但业务流程更偏向于业务限制、后台逻辑等，并不过分注重用户的操作逻辑。而任务流程则需要关注用户如何操作、界面如何反馈等，从而引导用户完成用户目标。

7. 页面流程图

定义：指电子产品具体所呈现的页面跳转流程图。其承载了业务流程图所包含的业务流转信息。

作用：

• 交互设计/原型设计的底子，基本依据。
• 站在用户视角，代表用户所有可能的操作过程，页面流程能快速发现体验问题。
• 突出页面元素与逻辑关系，提升原型设计的效率。

8. 线框图/原型图

定义：页面的模块、元素、人机交互的形式，利用线框描述的方法，将产品脱离皮肤状态下更加具体跟生动的进行表达。

作用：用例阐释者，用来了解用例的用户界面；系统分析员，用来了解用户界面如何影响系统分析；设计员，用来了解用户界面如何施加影响及它对系统「内部」的要求；类测试人员，用来制定测试计划活动。

构成要素

• 页面标题：即每一个页面的对应标题，一般就是导航栏标题。
• 页面内容：以黑白为主，保证信息规整易读。
• 交互说明：用标签将其对应起来，包括交互逻辑、操作流程及反馈、元素状态、字符限制、异常/特殊状态、相关规则等等。
• 主流程线：只需要画出主流程线即可，千万不可太多太杂，时刻考虑读者的感受。

9. 线框图/原型图交互说明的几种类型

限制

包含范围值、极限值等。

范围值主要指数据的取值范围。比如，当你的界面上出现了下拉菜单、筛选按钮、滑块等控件时，你必须标注清楚它们的选择范围，否则开发人员就不清楚该如何设定，如图所示。

极限值主要指数据的显示限制。比如，最多应该显示多少字数，过时如何显示，是否折行等，如图所示。

状态

包含默认状态、常见状态、特殊状态等。

「默认状态」主要指默认显示的文字、数据、选项等。这些内容需要注明，否则开发人员可能难以意识到这是用户填完的效果，还是默认就有的。

「常见状态」主要指针对某一个模块，经常遇到的一些状态。这些状态都需要在原型上表述出来。比如一个普通的积分模块，一般会出现 3 种状态：未登录状态、登录后未签到状态、登录后已签到状态，如图所示。

「特殊状态」一般指非正常情况下的样式、文案、说明等，如图所示：

操作

包含常见操作、特殊操作、误操作、手势操作等。

「常见操作」主要指正常操作时得到的反馈状态。比如一个普通的翻页控件，在经过不同操作后会立即出现如下的状态。

「特殊操作」主要指一些极端情况下的操作。一般，用户不会这么操作，但是一旦遇到极端情况，还是要想好应对措施，因为对于开发人员来说，不管是正常的还是极端的操作情况，他们都要去编写对应的代码。如下图，是填写用户信息的例子，当不写交互说明时，开放往往会遇到很多问题：如果已经勾选了 2 个人，再勾选第 3 个人，怎么办？如果勾选了「张XX」，下面区块中会相应地出现张XX的信息，那么这时候允许修改张XX的身份证信息吗？假如允许的话，修改后「张XX」还保持勾选状态吗？表单提交后要新增一个被保险人信息吗？若修改的是除身份证号码以外的信息，「张XX」 还保持勾选状态吗？提交表单时是覆盖原存储信息吗？若修改后出生日期、性别与身份证号码不吻合怎么办？等等。

面对各种复杂的情况，一方面要和开发人员积极探讨，看看有没有其他的解决方法可以简化各种逻辑判断；另一方面，在得出结论后，要把交互说明写清楚，避免出现让开发人员感到棘手的情况。

「误操作」主要指当用户操作错误时的情况。不过我们在设计时要尽量避免有用户犯错的机会。如图所示，提示中已告诉用户「库存5件」，如果这个时候用户在「数量」一栏中输入「6」会怎么样呢？系统会自动帮用户将其改为「5」省去用户手动修正的操作。

「手势操作」主要指用户使用移动产品时的操作方式。常见的有点击双击、长按、捏、伸、滑动等等。

反馈

用户操作后得到的反馈动作，包含提示、跳转、动画等。

「提示」主要指操作后，系统反馈给用户的文字说明等，如图所示。

「跳转」主要指点击某个链接后，页面跳转到哪里。设计师需要在原型上注明跳转时是「原页面刷新」还是「新页面打开」。如果是做手机应用的话，需要注明跳转时的转场方式，如图所示。

「动画」主要指用户操作后，系统通过动画的方式反馈给用户。动画给人的感觉比较友好、趣味性较强，是非常常见的一种反馈形式。比如删除某条信息，该信息以渐变消失的形式告诉用户：这条信息已经被删除了。在移动应用中，动画反馈的形式更为常见。因此设计师一定要在原型上表述清楚动画的形式，必要时可以制作 domo 动画演示效果给开发人员。

文章来源：站酷

引子问题：

从眼睛进入的视觉信息，占大脑皮层中形成视觉的视觉信息的百分之多少？

这个是视觉通路的说明图，是认知心理学的一个知识。外界信息从眼睛到LGN之后，会往两个方向走，一个形成腹侧通路另一个形成背侧通路。也就是一个形成“你看到是什么”，另一个形成“这个东西离你有多远”。

这是的研究，就是主视觉皮层那块区域并不像我们想象的一样，是一个简单的、从下往上的一个回馈。它真正来自LGN的信息输入只占到10%，LGN从眼睛获得信息也不超过10%。你可以想一下眼睛到LGN，到大脑皮层形成视觉的过程。大脑皮层中的视觉信息90%是它自己产生的，只有10%是来自LGN。LGN当中视觉信息的90%由大脑皮层自己产生的，只有10%来自眼睛。

做一下乘法，你就会发现，即使是眼睛看到的数据信息完全进入大脑皮层，它至多只能占到10%，如果他不是至多10%的话，有可能眼睛实际进入大脑皮层的数据信息只有1%。也就是说大脑主要是在生产信息，而不是在接受信息。所以你应该把你的精力用于研究那90%左右的信息是怎么产生的、它是什么样的规律。

1. 《UI设计与认知心理学》一书的主要内容和结构

本书的结构第一从设计实现角度来讲比例构图、构建页面的具体结构、栅格系统、组织原则等等。

第二部分是主要的部分，从第八章一直到十六章是从认知智能的角度，就是你怎么处理信息的角度去做这个交互设计。第十章这里头有一个叫模因论，模因论就是把模因类比成基因。

第十三章和第十六章写的就更抽象一些，第十三章主要是讲人工智能的基础，第十四章是讲应用，第十五章就是和今天话题有相关的地方，就是VR、5G这些，第十六章是我研究生毕业论文，我个人认为没写完，又写了一遍，是从心理学角度去阐述，为什么我们设计和国外的设计是不一样的。

2. 举例认知与UI设计

我们先有一个感性认识，认知与UI设计有什么关系？这其中有两点。

第一个就是古腾堡定律与内隐记忆。古腾堡定律，大家都听过吧，（注：该法则描述了一个理论：人的眼球移动规律趋向于从上到下，从左到右，在视觉区域中，左上角通常为视觉起始点，右下角为视觉终点，而右上和左下是视觉落盲点。）也就是F形阅读。这是尼尔森·诺曼在2006年产出的一个结论，即人浏览页面的方式会形成一个F型的路径。

但是有个公司叫EyeQuant，他们是做一些眼动仪及其研究的。他们统计了大概是15万张前六秒人的注意力的热区图，它形成了大概这个结果。

EyeQuant就说尼尔森·诺曼的结论可能不太对，它不是F型的，他给出了很多结果。

你会发现这个图很多时候是居中或者是中间等等。于是EyeQuant公司的研究结论就是：有太多因素影响眼球运动，不用把F型法则当做金科玉律。他们在官网上发了一个帖子，这是他们这结论，底下是论文的网址，大家也可以自己看一下文章，判断一下EyeQuant说的对不对。

我们来了解一下古腾堡定律，如果大家不了解，我先来解释一下。古腾堡是一个德国人，他发明了独立印刷术，他认为人的阅览浏览页面的规律是从左上到右下的。左上是第一注意区，然后是右下，另外两个区域是最容易被人忽略掉的。

上方是热力图，大家可以看一下，这两个图其实是有关联的，热力图和古城堡定律大家注意看，最关键的点都是左边。比如当你做web导航的时候，你一般会把导航放到左上角，很少有人放在右上角。跟我们阅读习惯是相关的。读书写字都是从左开始的，所以热力图表现出来并不是彻底的居中或者是在右下，左边还是一个很重要的位置。第二点是2006年的互联网产品形态和现在互联网产品形态是不同的，过了十几年了，拿现在的数据说以前的事情，有效性是有限的。

另外，有几个反例它是没法解释的。大家有没有关注过阿拉伯语的网站，你会发现它的导航是倒过来的。我看了之后我以为是有个镜子，它其实是正确的，因为阿拉伯文是从右向左书写的。通过以上，我们可以认识到古腾堡定律其实还是起作用的，它是根据你的书写的方向形成的。

有关网页布局的规律，应该是：同时受到古腾堡定律以及产品自身因素的影响。那么EyeQuant公司做的那个研究有没有价值呢？是有价值的，它确实是往中间偏了，但是这是和产品的特性有关，因为06年之后越来越多电商的页面，包括纯展示的东西越来越多了，居中构图的情况也越来越多，很多吸引注意的图片放到中心位置了，所以它会影响整个观感。

古腾堡定律在认知心理学里实际就是内隐记忆。内隐记忆就是：无法通过有意识的过程而接触的知识。举个例子，骑自行车大家都会吧。如果我跟你说有本书教骑自行车，你看完了就能学会，这不可能对吧，你需要自己练习骑。你学会了之后，当你要教别人，你也没办法通过语言告诉他，你只能说你必须得练，这个就是内隐记忆。

生活当中有一个体验，我相信所有人都会有，就是不管是用是安卓还是iOS都会有一个问题，就是比如你把A左边的应用删了，iOS系统会让后面的应用自动补位，它会把A应用推到第一个位置，结果就是你每一次想要打开A应用时候很容易点错。这也是内隐记忆在起作用。

这是内隐记忆的分类，有四种。骑自行车与古腾堡定律和第一种程序性记忆比较相关。第二种是知觉表征系统，大家听说过无意识设计吧，这就和知觉启动是相关的。条件反射就不用说了，巴甫洛夫的狗玩摇铃它就流口水。非联想学习中的习惯化和敏感化是什么意思呢？就是比如说你家里有一个空气净化器，打开的时候你会感觉它发出的噪音很明显，但是过一段时间你又不太注意它的噪音了，就是习惯化。

敏感化是什么呢？烟尘和污染的空气非常刺激呼吸道，所以一旦雾霾 ，呼吸道不好的人就会非常敏感，非常难受。比如说北京的雾霾，一开始可能不太注意到它，但是在北京待十年的结果是只要看天，我就能估算出这个pm2.5是多少值，正负不超过50，非常精准。比如一看今天这个天气情况，我猜污染指数有150，一查手机大概130左右。这就是敏感化，你对这个刺激的信息处理会变得更快。

画表情的秘诀，这个是其中一个例子，它涉及到一块脑区叫梭状回面孔区。大家可以看一下，这些表情有一个什么样的共同点。

大多数的表情是没鼻子的，或者鼻子特别小。再看一下这两张图片，有什么明显差异么？

这两个照片差异非常明显，这个叫撒切尔效应。这时候你感觉还行，两个人可能眼睛不太一样，但是当把照片导过来的时候，反差就特别大，你就感觉右边那不是个人，对吧？

这叫面孔倒立效应，只有正立的时候，才能有效识别面孔。就是必须得形成倒三角你才能有效识别一张面孔。鼻子并不参与三角区的方向判定。

你会发现插座也会被当成表情，面孔倒立效应的基础是部分神经的特异化，部分神经元是专门用来处理面部信息的，识别人的情绪对人的认知是很有作用的。快速地判断一个人的情绪，对社会化动物来说非常关键。有一块脑区专门处理人脸识别，识别情绪。

以上大家可以形成一个大概印象，就是认知心理学可能会和你的设计相关联，也说明了认知科学对UI的指导性，这是我的一个观点。右边是它的逻辑事实，书中尽量去证明这个观点。

3. 认知科学对UI设计的指导性

第一，广义的设计概念。想证明认知科学对UI设计的指导性，得先说清广义设计概念。我对它的定义是解决问题的目的与恰当方式的综合。

你想解决这个问题是吧？方式的综合前面还有一个恰当，我强调这个恰当。

第一个先说他目的性，比如说你设计一个汽车、设计一个界面、设计一个流程，是有目的的，不是无目的的。第二是设计是解决问题的恰当手段，设计是你要找一个恰当的解决方法。比如你累了怎么办，你可以造个沙发、设计个躺椅。还有各种各样的方式，哪一种方式是最恰当的方式，是设计出来的。这都是各种各样能解决你累了的一个手段，但是你一定要找到那个最合适的。

这个之后我们还要定义一下UI的概念，这也是我个人的观点和定义。就是解决虚拟界面信息传输问题的目的与恰当方式的综合。

我是交互设计师，我没有用比如说交互或者视觉这个概念，因为我认为这个概念有些窄，并不是说我区分不了视觉设计师和交互设计师。别人问你如何区分交互设计师和UI设计的时候，你就用一句话就能区分：你和界面之间有没有一次以上的信息互动？如果有，那就是交互要介入，如果没有一次就够了，基本就是视觉的活。

传统设计的目的、主题和体验公式。首先传统设计处在两个过程的中间，第一个是“人-自然“中间，也就是人造物，就是你要通过你设计的工具去改造自然。种个地、开个矿等，你设计这个东西是在告诉别人怎么用。比如说不能把门把手放到转轴的内侧，他一定放到转轴的外侧，这个门把手就是在提示我们怎么去操作这门，怎么推这个门。这是基于材料及其加工工艺的造型理论。

另一个就是设计处在“人-人造物-他人“的认知过程中间。它所具有的特性是示能性与自我定位。比如说我穿衣服，你会发现我没有一个红色和绿色的衣服，我喜欢穿蓝色，黑色等，这实际是对自己身份认识的一种构建，向别人传达出一种信息的设计物。传统设计都会包含这些信息，你住什么地方，穿什么衣服，看什么书，都会有这两个作用。

这是史上特别著名的穿丝袜的潮男叫路易十四。你会发现这个东西就是在两方面表达出传统设计的作用，第一个就是示能性。高跟鞋的形状一定是后边开口前面是收口的，因为你要把脚放进去。高跟提高你的身高。这个执杖宽头的地方是用来放手的，窄头的地方是用来杵地的。传统设计的主题是基于材料及其加工工艺的造型理论与设计实践，这是我的观点。我本科是学工业设计的，读研究生的时候也是学工业设计的，我发现我做的所有的事情都是围绕造型和工艺的造型理论。

举几个例子，轮胎演化过程、手机演化过程，你会发现材料的变化，造型的变化。

再来看一个深刻的例子。

这是一个著名的女设计师设计的，她为什么能做成这个东西？是因为她做这个东西的时候，出现了新的数学工具来帮助建筑造型，很多原有的建筑学派不愿意用这套东西，但是她非常激进，要用的数学工具来处理这个造型，才能做成这个建筑。

包括大家现在坐的车，你会发现曲面的车越来越多，车越来越漂亮，是因为数字化之后，加工的工艺更好了，能做出特别漂亮的曲面。原来为什么红旗特别贵？因为那是老师傅用锤子敲出来的，不是像现在数控技术就把它弄出来的。劳斯莱斯也都是敲出来的，所以很贵，想做很好看的曲面成本极高，但现在就成了很容易的一个事情。

传统设计的体验公式就是E=e*n，e是衰减的。e就是每一次使用的体验，比如说手机，你拿到手机的时候是一个体验，是一个e，用了多少次，n就是几。比如说我做一个椅子，用一次是e，用了多少回，它的乘积是整个体验。n是不会变的， e是唯一的关键，而且他每一次都一样。所以传统设计里对它的造型会非常看重，到底表现出什么东西，好不好用，会特别关键。

我再说一下UI设计的目的、主题和体验公式，UI设计的目的和传统设计不一样的地方是，它示能性更主要，自我定位更次要。我举一个例子，马云想用支付宝，不好意思，他也得跟我们用的一样。不管多有钱的人都好，还是只能用Facebook不太可能为这个人单独设计出一款来。也就是说UI设计是绝对平等的，只能说买个皮肤，你可以花钱，但大多数情况下，它的主体功能是不区分消费能力的，所有人用的支付宝都是一样。不管这个人多穷、多有钱。

所以UI设计更主要的是通过界面来告诉你这个东西怎么用，是比自我定位更重要的。所以我们主要考虑的是界面能不能告诉用户是干嘛用的，怎么用，这是最关键的。这和传统设计不一样，传统设计因为有材料成本的问题，一定会涉及到选择和自我定位的关系的问题。

UI的设计体验公式就是E=a*b*c*…*n。这里为什么用乘法而没用加法呢？大家知道有一个叫迷失度的一个概念，它是形容网页体验中，如果a是零的话，后面做再好也没有用。比如说用户找不到入口，到界面这卡在这了，这界面如果是0.1，那后边所有的转化率就全是0.1乘以这个系数。所以它并不要求每一个页面达到百分之百，但是它强调整体乘积一定是一个高值，比如说这个页面的转化率提高了，提高3%，下一页面降低5%，它是一个乘积的关系，每个页面都很重要，它是一个拉长的一个体验公式。最后乘以一个使用次数。

我们再回到认知心理学，我家有三本到四本心理学的书，来看看他们每个人是怎么定义认知心理学的。

斯腾伯格所著的是一本卖得比较好的书，大家可以看一下，认知心理学规定了研究范畴是什么，这是斯滕伯格写的，他认为认知心理学就是研究人如何觉知，学习、记忆和思考问题的。

下面这本书是三个人合著的，他们压根没有给认知心理学一个明确的定义，只是提到这是有关于思考者的心智的科学。但是他说的不是很具体，而是写了一堆研究对象，你把它抽象一下，会发现关键词实际和斯坦伯格的是一样，觉知、学习、思考、语言。

再来看第三个，艾森克和基恩干脆就没定义认知心理学是什么东西，他说现在这个东西是一个特别广泛的研究领域。

这三本书里头有两本书的第二章叫认知神经学，有一本是在第一章的第三部分叫认知神经学。我原本为我的书取名叫《认知与UI设计》，就是这个原因。很难把认知心理学和认知神经学切得特别开，它们的联系实际是很广泛的。

UI设计围绕觉知、注意、记忆与识别会有一些简单的例子。

视觉组织原则，这个是格式塔闭合原则，这是从神经学层面解释格式塔的闭合原则。就是有一个未封闭的图形，大家可以看到左边，你知道他是未封闭的，包括有那种特别的那种三角，有两个半圆，三个半圆，我们会把它脑补成一个闭合的图形，这个是有神经学基础的。

有个叫赫布定律，这个是什么意思呢？两个神经元如果彼此之间互相刺激，他的神经的突触就会变多，它表现在除了突触增多还有髓鞘增厚，都会使神经之间的联系变得更紧。

细胞集合的定义就是，人对信息整个识别过程是这样的，过去你接受过原始刺激，你会记住它，比如说右边这个完整的圆，你第一次看到这个圆，会形成刺激，再看这个圆又形成刺激，它会形成一个完整的赫布集合。等你再看到左边这个不完整的圆的时候，就是一个不完整的刺激，它会激活原来形成的赫布集合，让你产生错觉认为它是原来的完整的状态。识别和记忆是一体的。记得越少，识别越快。

意识和注意的模型与用户体验是相关联的。真正进入到意识的信息是少之又少的。因为人的视觉能看到的只是可见光。在一个很长的光谱中，视觉信息只占这么一点。人对视频信息的感知还有个体偏向，人对红黄蓝的敏感程度是不一样的，它只对部分色彩更敏感一些，更窄。

信息有一部分是无意识的，比如说心跳的声音，在环境特别安静的时候，你能听见心跳的声音，但是当你注意力在别的地方时，你会过滤掉它，心跳声就不进入你的意识了，但它实际是一直在发生的。

你要建立一个概念，就是用户能注意到的事情，是整个界面里头很小的一部分，大部分他什么都记不住，因为他没空。短时记忆的容量是非常少的，比如说让你记电话号码，一般大家都是以443或者344地记，会把它切割成几个块，这样会更容易记一些。

下面这是《艺术与视知觉》这本书里的一个实验。左上角的图案是他们用来做实验的图。你会发现这个图是一个特别拧巴的形状，首先它是不闭合的，不是完整对称的，设计师看到会非常不舒服。这个图是怎么做实验的呢？就是把这个图给你闪一下，就给你0.2秒或者0.3秒。看完之后让你回忆，回忆这个图是怎么构成的？右边这七种是大家回忆的，它有一个共同的特征，就是把它规律化。这个不是有意进行的，是你与生俱来的能力。把一个不规则的东西记成一个规则东西，是你本来的能力。

我们再看一下，我们把这个时间拉长，你会发现很有趣，第一个是字母A的演化。这原来是头牛，公元前1800年恐怖谷铭文里的文字，长得像左上角第一个。后边的人画牛很费劲，识别它、记忆它很费劲。就把它简化，简化，最后就变成拉丁字母。每一次他都在丢失视觉信息，每次都在不停的丢失识别，使它更规整。26个字母基本都是按照这种原理出现的，只不过它是一个特别长时间，跨度上千年，变成这种结果。

第二个是中国的鱼纹，这是李泽厚的书《美的历程》里的截图。你可以发现鱼纹的演化过程也这样，开始鱼纹真的是条鱼，后来这个鱼变成对称性了，上下对称的。到最后它已经不是鱼了，花了几百年时间变成这个样子。

谷歌的logo也是一样的规律。不停地进行简化，不停地进行识别。识别和记忆是一体的。每次记忆时一定会丢失信息，不管记什么东西一定会丢信息。记忆的东西比看的东西更少，当再识别的时候是拿剩下的东西来识别。这也是和人的认知相关的。

4. 科学研究的范式。

要想研究一个东西，得有一个合理的思维的过程，才能产生正确的思维的结果。思维能力和思维形式会决定思维产出。

我们看一下概念和命题，这是柏拉图的三段论。我举个例子，大前提是希腊人是勇敢的人。小前提是雅典人是希腊人，结论是雅典人是勇敢的人！这是一个特别标准的三段论推理，大前提小前提，不停地缩小集合的范围，得到这个结论。

但是问题是什么？这个语境里头我没有解释这几个概念：雅典人的概念是什么？如果你注意土耳其的地图，你会发现爱琴海那一块靠近土耳其大陆的很多岛是希腊的，特洛伊现在应该是更靠近土耳其一些。雅典人的概念就是伯罗奔尼撒半岛上一个地区的人叫雅典人，但整个希腊实际是一个特别宽泛的概念，它并不是原来的半岛，而是把周边很多岛屿，甚至靠近罗马的岛都扩到希腊地域里，所以这是一个问题。希腊人的概念又是什么？我也没说。我尽管做了推理，我没说勇敢的人的概念是啥。有个坏人在行凶，你用声音制止了还是用行动，能不能作为判断这个人是否勇敢的标准？在你说出一个推理命题的概念的一刹那，实际上已经把这个东西表达出来，但是在这个命题里是没有说的。

我说得有点绕，其实我想表达的意思是：做推理的时候，推理里的概念，你是不可能在这个推理里头说出来的。你想把这个概念进行规定的时候，还得通过其他语言和其他概念来说这个概念。比如说我们学的数学几何，是基于欧几里得的五大公理，五大公设。有了这个东西，才有推理和判断的基础，它是先于命题存在的。如果不对UI进行定义，如果不对设计进行定义的话，我写这本书就是一个很扯的一个事情，因为并没有形成自己的观点和基础。只有形成观点和基础了，才能围绕这个东西进行推理，哪些是合理的哪些是不合理的。先有概念和命题，才有后边理论和假说。

要判断一个理论靠不靠谱，需要符合逻辑三恰。

第一个要逻辑自洽，就是你不能自己打自己的脸，你需要自圆其说。事实与逻辑相符，就是一个观点在你的学说里是兼容的，不能出现逻辑矛盾。

逻辑它恰是什么呢？你提出这个理论和其他理论不能产生矛盾，除非你能证明理论错了，或者在某些条件不适用，这个理论才是靠谱的，你不能和原来既有的公理产生冲突。

逻辑续洽是什么？就是新的场景、新的案例用这个理论还能解释的通满足这三条才是好理论，缺一条都不行。

5. 视角

这一章是从逻辑的视角去看一看，这套理论对不对。从认知的角度考虑设计对不对。认知角度本身对不对。

第一个叫逻辑自洽，在认知理论内部没有矛盾。

我举一个案例。这里有两个图，大家第一眼看上去它是怎么构成的？我用等式表示出来。会有人第一眼看上去认为它是最上方的方式或者是最下方的方式构成的吗？没有人会说这个图形是用这两个更复杂的方式构成的。但是你想没想过，为什么你第一眼看上去就是按中间这两个等式的方式构成的。因为这样理解认知成本，如果把一个你没见过的东西或者一个复杂的东西展示给你看，一定是按照你的记忆，还原成你接触过的最简单的一个构成。它会降低你认知的成本，如果记成奇怪的形状，一定会使你记忆成本更高。

第二，认知一定是要符合演化论。

人们对演化论的误解之一，就是认为越快越强越好，其实不是，而是适应。可能你更强、更聪明、更快，但是适应不了环境。

比如说为什么色盲基因还存在？

男性里头大概有7%-10%，女的还少一点。按理来说我们应该认识更多色彩，为什么色盲还存在？外界信息变成视觉信息主要是靠视锥细胞，它比较密，是在中凹附近。眼动追踪的时候，也主要靠中凹移动来看东西。视感细胞对色彩并不敏感，但是对明暗敏感。色盲在夜间视力很好，比如说晚上要偷袭猎物，或者是偷袭敌人，有色盲的部落会派出这些人，这些人夜间视力更好，会给种群带来生存优势。所以色盲基因没有消失是有意义的。非洲有一种镰刀形红细胞贫血病也是一个案例，拥有这个基因的人不容易得疟疾。但是如果没有疟疾情况下，他容易贫血、容易患各种各样的病。

现实视角的逻辑续洽，第一个就是能预测新的设计趋势，第二是解释新的实验现象。

第一个是扁平化是趋势而不是潮流。这个用左上角的一个图一下就能解释清楚。鸡尾酒的杯子一定是透明的。我们做的界面很多时候就是那鸡尾酒的杯子，大家能理解扁平化是什么原因了吧？因为网速越来越快了，各种各样酷炫的东西越来越多，信息量越来越大，就相当于鸡尾酒里有颜色的酒，颜色越来越多。如果用一个不透明的杯子，或者透明度不够好的杯子，看不出里头的颜色。所以扁平化是一个趋势，不是潮流。

这是我前两天看到的一个帖， 2019年发的一个论文，叫图标样式对可用性的影响。大家可以自己去翻这个论文，很有意思。

测试结果是：最不易识别的是最右边这组。中间是识别度比较高的，这个解释特别简单：过度简化导致识别困难。意思是简化信息的时候，不是一减到底就是好。比如说前面的例子从牛到A的过程，你不能上来就给埃及人拿了一个A，他不认识。Instagram改版为什么受到热议？因为它突然之间扁平了，没有渐进过程，咣叽就变成一个特别扁平的图标，它的纹理和它的图形都发生了变化，所以识别上会特别不舒服。我举过一个例子，比如说你慈祥的老母亲整成了张柏芝或者是高圆圆，你一定不会认为这是一件好事，你会感觉很难接受。

第二个测试结果是这次识别度高的是右边的，中间的识别度是低的。测试结果是多数面型icon识别比线型icon更容易识别。这个是格式塔的描述方式，有阴影的图形只在内部成立，外部行成不了轮廓。线性图形则正好相反，是两向轮廓。

比如说我们看苹果图标，你不管它是从第一版还是到最后一版，他都是面性图标。

因为苹果是个球，它是个实体，这个轮廓在苹果内部成立，就类似于这种感觉。后边是有阴影的，有外部的，因为你要聚焦，后边东西会虚化掉。它只在内部成立。

面形图标普遍比线性图标识别要快，只有三个反例，只有三个反例需要解释。

第一个图，咱先不看虚拟的，你会发现这两个图标线性识别度高，原因是因为它表面有条纹，这两个图中圾桶和钥匙都有条纹，所以用线性来表达的时候，效果更好。其他图标的实体都是曲面，不是条纹。没有参差不齐的边缘，而是曲面，是单向轮廓形成的。因此线型图标更容易辨认。

感受野是人的视锥细胞和神经节细胞的一个联系，不管刺激中心区域、刺激整体、刺激边缘都会有反应。和感受野关联的是神经节细胞，人类眼睛有很多神经节细胞，但这些细胞不是完全均等的点，而是一组点围绕一个中心形成一个组合一样的结构，外边一圈组合，中间有几个组合。

下图的这个就类似视网膜上的结构，神经节也是类似这种结构。当环境同时变亮的时候，刺激比较弱。同时变黑的时候，刺激也比较弱。只有在交界点的时候，反应最强烈。想象一下，当我们看到一个物体的轮廓的时候，细胞对它的反应最大，就形成一条边。这个实际上就是卷积核，人工智能卷积核就是模拟感受野形成的一个原理。

内积就是矩阵内的数字一个一个互相乘，乘完之后形成一个结果。卷积核模拟感受野的原理是：数字矩阵就相当于一个卷积核从最左边一直扫到最后一排，会形成不同的数值。比如说这个是我们要看的图像，比如说黑的会计算成1，白的会计算成0。用卷积核扫一遍就相当于在模拟人眼睛看到的东西，黑白区域之间就会形成一条边，就是我们所看见的轮廓。

这就是我们眼睛看到东西的原理，比如说我们现在做视觉识别，也是用这种特别简单的技术。卷积核实际是模拟人的感受野。

关键点是神经学是怎么解释面形图标和线性图标的不同的。当你看到全亮的东西和全暗东西的时候是有差异的。卷积核扫一圈之后，计算机会认为这个里头的东西和外头东西是一样的。对它刺激是一样的。所以只对边缘有认识。但人的神经比较特殊，它自带一个数值，它能识别出暗和亮。所以当你看一个面形图标的时候，你对轮廓里面黑色部分的认知和对轮廓外白色认知是不一样的，这叫单侧型的轮廓，而不是双侧型的。当你看到线性图标的时候，类似于计算机的感觉，但是你看到面形图标的时候，是人的感觉。

文章来源：UXren