如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

很多产品设计师，在画原型或者设计 UI 的时候痴迷于工具的使用，拿到需求文档之后急于动手画图，忽略了信息架构设计对于产品的作用。

信息架构作为一个产品的骨架，是产品非常重要的一部分，它决定了一个产品

的布局和未来的发展方向以及用户对一个产品的最初印象和整体体验。毫不夸张的说，好的产品信息架构是产品成功的一半。

那么到底什么是产品的信息架构呢？该如何设计产品的信息架构？如何评判一个产品信息架构的好坏？我们接着往下看：

一、信息架构的概念

让我们来看一个例子：

一个饭店需要有哪些设施，如果你是饭店的老板如何合理的排布这些设施，可以让客户感觉很舒服的用餐，这个过程就是一个信息架构的过程。他可以让客户对你的饭店产生好感，从而下次用餐的时候还会想到来你这里吃饭。

在排布饭店设施的过程中我们要遵循一些规范，比如用户的习惯或者施工规范等，正是因为需要遵循这些规范，所以我们需要一个信息架构来体现这些。

比较官方的信息架构解释是这样的：信息架构设计是对信息进行结构、组织以及归类的设计，好让使用者与用户容易使用与理解的一项艺术与科学。

简单来说，信息架构设计就是让用户可以 容易地理解你的产品是怎样的。让他们在使用你产品的时候可以更顺利更自然。就像一进入饭店就会有一种感觉，门口是等餐的地方，进去就应该吃饭，如果找洗手间一定不会往门口走，而会往深处走。这就是信息架构的好处：他让用户使用同类产品时更容易上手和理解，让产品更容易被接受。

二、为何需要信息架构设计

那对于线上产品来说为什么需要合理的信息架构呢？大家来看下边3组 app 的 tab栏截图。你能仅仅从 tab栏就看出这款 app 是什么类型的 app，如何使用吗？

很明显的，第一个是一款购物类 app，第二个是一款图片社交类的 app，第三个是微信的 tab，虽然首页名称是微信，但是我相信如果把名称换成「聊天」，你还是能认出这是微信的 tab栏。

从底部标签栏就可以大致看出产品是用来干嘛的，这就是信息架构的作用。一个合理的信息架构可以让产品非常容易被用户理解，可以让用户第一眼对产品有一个简单的认知，指导自己可以用产品做什么事，指导产品提供什么服务。

再看一组反例：

这三组 tab栏就让人很困惑了，看了半天你也许根本不知道这几款 app 是做什么用的，以及如何使用。如果你让用户很困惑，他会分分钟抛弃你的 app。

所以信息架构的核心目标是为用户提供更好的体验，获得更高的留存率。

一款信息架构良好的产品必然遵循以下两个标准：

• 让用户打开 app 的第一秒就知道这是一款什么 app，怎么用；
• 用户想要使用某一功能时，能够第一时间找到。

我们通过这两个标准来印证下上边3个正面案例的信息架构：

相信你能很快速的识别出这款软件的用途和用法，这就给提升留存提供了基础。

那么如果信息架构像架构一个饭店一样简单，那么信息架构为何需要设计？

因为你的实际产品功能可能有这么多：

毕竟我们不是支付宝，没办法把功能像豆腐块一样堆叠起来，我们需要一些科学的设计方法。

三、如何设计信息架构

合理的信息架构设计需要考虑5个步骤：

下面我来分步讲解一下。

1. 了解用户，场景，习惯

首先你的产品是给到用户用，你当然要最大限度的了解你的用户，我们先来看下一个概念：「心智模型」。

心智模型是经由经验及学习，脑海中对某些事物发展的过程，所写下的剧本。人类在经历或学习某些事件之后，会对事物的发展及变化，归纳出一些结论，然后像是写剧本一样，把这些经验浓缩成一本一本的剧本，等到重复或类似的事情再度发生，我们便不自觉的应用这些先前写好的剧本，来预测事物的发展变化。心智模型是你对事物运行发展的预测。再说得清楚一点，你「希望」事物将如何发展，并不是心智模型，但你「认为」事物将如何发展，就是你的心智模型了。

假设你从没见过 iPad，而我刚递给你一台并告诉你可以用它来看书。在你打开 iPad 使用它之前，你头脑里会有一个在 iPad 上如何阅读的模型。你会假想书在 iPad 屏幕上是怎样的，你可以做什么事情，比如翻页或使用书签，以及这些事情的大致做法。即使你以前从没有使用过 iPad，你也有一个用 iPad 看书的「心智模型」。你头脑里的心智模型的样式和运作方式取决于很多因素。

用户往往带着以往使用 APP 的一些习惯来使用产品；线下做同一件事的习惯、生活习惯、心智模型等。要考虑哪些是可以创新的，哪些是用户习惯，要在不妨碍用户习惯的情况下作出更能让用户接受的创新。

你要考虑清楚4个问题：

用户通常用你的产品做什么？

用户用你的产品来做什么？用来看新闻还是用来聊天？一定要考虑清楚用户的核心流程。从核心流程中提取信息架构的基础形式。

用户用这类产品最关心什么？

用新闻app 时咨询的真实性实效性，购物类app 精准搜索和售后功能，就是你的用户关注点在哪里，这是一个很好的突破口。

用户有哪些思维定式？

和用户年龄身份相关的属性，产品体验符合相应用户的思维模式，心智模型，用户就会比较容易接受。

用户用什么类似的产品？

类似的产品也会带来一些用户习惯，迎合这些习惯也会让用户快速上手接受产品。

了解了你的用户场景和使用习惯之后你会知道如何做出符合用户心智的，容易被接受的产品，你不需要担心做的产品没有差异性或者没有竞争力，我们可以在核心流程之外做出创新点，让用户觉得你的产品又好用又有些不一样。

2. 了解业务

这里的业务包括与产品接触的内部及外部的人提出的需求，比如公司的运营，市场，销售，BD，公司的外部合作伙伴等。

这些人的需求我们也要收集，比如运营人员想更方便的管理注册用户，销售想更多的添加广告位，市场推广人员要求能统计不同渠道带来产品的下载量，注册数，活跃数，合作伙伴需要进行账号，内容互通等，总之只要与业务有关的人的意见，尽可能的在产品设计前多收集，即使做不了，也告诉他们原因，要不然产品上线后就等着被他们吐槽吧。

3. 调研竞品的信息架构

在做一款 app 时，我们面临了和无数竞品争抢用户的局面，这时候分析竞品就非常必要，我们需要在知己知彼的前提下，做好核心流程功能，再思考如何在差异功能上做好突破。

首先我们需要把竞品功能梳理成思维导图：

其实思维导图就是信息架构比较基础的形式了，但是光有思维导图没用，我们需要对思维导图进行分析。

我以前做过的一款人脉 app 为例，当初对比了领英、赤兔和脉脉，分析了这4款 app 的思维导图后得出的共性和差异点：

共性就是要符合用户使用习惯的地方，如果你调研的3-5个产品都这么做了，很可能这里是产生用户习惯的地方，是我们需要去遵循的，这是获得用户好感度的基础。

分析产品时你一定也会得出一些产品差异的地方，而这些差异就是你的产品竞争点，也是别人用你的 app 不用其他 app 的理由。比如人脉软件都会有社交相关的功能，但是脉脉会比较注重职场招聘、直播等互联网职场人比较关心的点，这样对应的用户群体就比较会吃你这套，会提升用户的粘性。

相信你在梳理了竞品的信息架构，总结了共性和差异点之后对产品的信息架构已经有一个比较清晰的认知了，在做自己产品信息架构的时候也会更胸有成竹。但是最后还有一件事我们可以做，就是对我们的要做的产品功能做卡片分类。

4. 卡片分类

卡片分类法是我们工作中常用到的一种方法，它可以在用户侧再一次印证和检测我们的产品信息架构。

卡片分类法就是让用户对功能卡片进行分类，组织，并给相关功能的集合重新定义名称的一种自下而上的整理方法。

说直白点就是准备一堆卡片，在这些卡片上写上你所需要包含的功能名称，然后给到用户侧，让用户进行分类，让用户进行组织，来了解用户到底觉得这些功能应该怎么合并怎么归类的一种方法。它可以帮助你站在用户角度去了解用户是怎么认定这些功能的，也可以在卡片分类法的过程中更加了解用户是怎么想的。

卡片分类法大概的步骤和注意点是这样的：

卡片分类法最终会产出这样的一个树形图：

5. 产出信息架构

其实到这一步信息架构大概的雏形已经有了，你可以用 axure 或者类似 mindnode 的软件把信息架构梳理出来。

接下来你要对信息架构进行重要性分级，这样在产品开发的前期可以帮助梳理产品研发的优先级，集中精力解决用户的最大痛点。在产出页面时也可以更好的把控页面元素的大小层级，位置关系等。

最后你需要注意层和度的平衡：层一般不超过5层，超过操作困难。度过多会让用户认知成本增加，容易找不到想找的内容。这里的度指的是同一页面展示的信息量。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

小明的设计故事：身为设计师的小明，刚刚遇到下发的设计需求，看了半天需求，无从下手。于是疯狂寻找竞品去借鉴，去素材网站寻找素材拼凑。

如果在设计工作中遇到与小明相同的情况：没有设计头绪，大脑一片空白，画着不一定能过审的草稿时，请继续阅读下面的文章，希望大家能从作者的设计总结中有所启发。

目录：

• 从业务目标切入
• 从用户行为切入
• 从设计方法上切入

什么是设计点？

设计点是设计师通过设计手段介入设计任务的一个节点，比如：设计目标 、设计风格 、用户行为 、用户情绪 、信息表达等都是设计的切入点，设计点能够影响设计的风格走向和设计师的创作思路。

那如何从众多的设计点中找到一个清晰的设计主线呢？只需从3个方面切入。

一、从业务目标来切入：晒讲义案例

下图是阿里巴巴UED 的设计理论，同程序员提倡的「不造重复的轮子」一样，设计理论也没有必要去反复总结类似的。目前阿里的这个设计理论，很好的支持了包含大型项目到中型项目的各个环节，易于理解，且和我们的工作认知贴近，是一个很好的入门方法。

我们通过定义业务目标和聚焦设计目标，来最终实现设计的产出。

下图是平台营销活动的设计5个要义，其核心也是业务目标。

通过几个的设计方法的展示，我们可以看出，处于上游业务目标的重要性。

只有业务目标和设计目标一致的时候，我们的设计工作才有意义。当我们评判我们的设计结果时，除了设计的数据指标外，能快速判断设计方案比迭代之前更优的指标就是是否符合业务目标，是否更贴近用户的诉求。

1. 切入模型

根据工具模型我们从业务目标出发，去定义设计目标从而得出设计方向。

2. 明确业务诉求

3. 得出业务目标

用分享讲义的策略给用户带来学习交流机会和学习成就感，达到拉新和活跃用户目的。

4. 视觉推导

5. 案例

二、从用户行为切入

视觉设计师，尤其是运营设计师一定要具有交互思维，作为全链路设计目标的我们，掌握交互思维，能更好的理解产品文档和规避更多的设计错误，从而准确引导用户操作路径。

方法：了解页面中的功能交互流程，梳理用户操作行为路径，可以对行为步骤中的信息内容进行归类分组提供依据。

切入模型：

三、从设计方法上切入

常见的方法有：情感化、原子化、组件化、游戏化等等。

方法：分解设计需求，归纳设计模块，运用已知的设计类型进行视觉化设计。

1. 提取仪式感设计点-晒成绩项目

仪式感的作用：通过用户在体验过程中由产品功能实现—交互操作—体验心理变化建立，形成对价值观的建立，是给用户带来更高层次的享受。

从四个层面理解仪式感：权威感、尊重存在感、期待感、荣誉感的意义。通过分解设计内容来发现机会点，插入仪式感设计方法。

视觉推导：

案例：

2. 提取情感化设计点

情感化设计3要素：

案例：

3. 提取游戏化设计点

将游戏机制运用于非游戏场景。比如：要想鼓励用户多参与交互，你可以在 APP 加入「挑战」这类的游戏元素，用户可以参与挑战，通过连续抽奖，并获得相应奖赏，从而达到预期目的。

案例：

寻找设计点就是拆解与分析的过程。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

如何从无到有设计一款字体

对于很多刚接触字体设计的同学经常会遇到一种情况那就是想法高大上，结果很悲伤，为什么会造成这样的结果？归根结底是对字体设计本身了解还不够细致就照葫芦画瓢直接上，为了避免这种尴尬的结果，我们应该在开始着手做字体之前要做好各项准备工作，不断去浏览优秀的字体设计从中寻找设计的感觉，确定感觉后建立网格系统，开始逐步设计字体。我在做字体设计的时候会把握几个步骤「建网格」——「选字体」——「拆字体」——「绘笔画」——「绑骨架」——「粗与细」——「取与舍」——「磨细节」——「去感受」。

下面我们就以大家最常见的矩阵字体为例来给大家分享如何制作字体。

1. 建网格

建立网格系统，万丈高楼平地起，要做一款扎实的字体离不开网格系统的规范。

2. 拆字体

以「燃」为例——选取一个默认字体，按照字体结构对笔画进行拆分。

3. 绘笔画

将拆分出的笔画用横线和竖线在网格系统里进行笔画重绘，此时不要做细节，撇、捺和点根据自身走向和结构特点也归属为横竖线。

4. 绑骨架

拆分绘制的字体笔画就是字体的骨骼，笔画间的连接处可以理解成是人体的关节，关节的意义在于保证字体稳固的同时又灵活多变，字体的笔画可以根据视觉需要围绕关节在一定范围内做活动，也可调整长短比例。

5. 粗与细

笔画的粗细与硬度由你想要的字体气质来决定，细笔画与曲笔画柔美气质，粗笔画与直笔画沉稳大气，虽说设计是一种感觉，但是这种感觉对于初学者来说很难把控，所以跟大家共享一下常用的几种笔画的粗细，在1000PX*1000PX画板里采用6px，10px和20px为基础笔画粗细，根据想要的业务气质选取即可。

6. 解与构

常见的字体结构有「上下结构」「上中下结构」「左右结构」「左中右结构」「半包围结构」和「全包围结构」。其中「上下结构」中着重强调占比较小的那部分笔画，进而达到字体本身的平衡，例如「感」字着重设计心字；「上中下结构」中一般会在不影响识别性的前提下去掉中间部分横行笔画，进而达到字体本身的平衡，例如「享」字着重设计口字；左中右结构中在不影响识别性的前提下会简化左边部分笔画，进而达到字体本身的平衡，例如「燃」字着重设计火字。

7. 取与舍

笔画变粗后整个字体笔画间的空间比例会受到一定影响，因此为了字体的美观度和透气性我们会对字体结构进行一些取舍和整合。

8. 磨细节

为了让字体看起来更加舒适，我们将字体的拐角做圆，做圆角的同时也要根据网格系统来调整圆的度数。

9. 去感受

打磨整体字体，继续刻画细节。

注意：在一组字里，每个单字的结构都存在差异，适当调整字体内部的比例，形成感官上舒适的笔势，对保持视觉上大小一致很重要。汉字字体类型繁多，但是如果我们用几何法则来划分字体类型其实大致可以归纳为三种：方形，圆形和三角形，从面积上来看方形和圆形的面积最大，三角形次之，所以我们为了保持字重大小的一致性需要调整他们之间的大小比例，做到大小均匀，笔画一致，结构严谨和间隙适中。

△ 图源：ElethomHunter

为了拉出字体的气质，一般会把字体做的稍微偏瘦长一些。

字体设计的手段是多种多样的，每个设计师都有自己擅长的切入点，最后的结果是自己想要的就好。上述的分享希望能给字体设计初学者一点帮助，也欢迎各位同行大神交流切磋。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

阅读之前，温馨提示下，文中提到的 UI设计方式不一定有对错，如果使用得当，它们都有很大的可能性。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

表单提供了几个可以更轻松收集用户输入的控件。设计表单时，在正确的位置使用正确的控件是一项挑战。

复选框控件有三种状态：unselected（非勾选态）、selected（勾选态）和indeterminate（未确定态）。最后一个状态代表子选项列表在父选项下分组且子选项处于勾选态和未勾选态之间的情况。

切换开关代表允许用户打开或关闭物体的物理开关，如灯的开关。

点击切换开关需要两个操作步骤：选择和执行，但复选框只有一个选项，其执行通常需要另一个控件。

在选中复选框和切换开关控件之间时，最好关注使用的环境而不是其功能。

下面是一些在设计表单体验时决定这两个控件之间的指导性原则和案例分享。

案例1：即时回复

使用切换开关时，

1. 应用设置的立即响应是无需明确操作的。

2. 设置需要打开/关闭或显示/隐藏功能才能显示结果。

3. 用户需要执行不需要审核或确认的即时操作。

如果需要即时响应的选项最好选择使用切换开关

案例2：设置确认

使用复选框时，

1. 应用设置需要在提交之前由用户确认和审核。

2. 在显示结果前，设置定义需要执行提交、确定、下一步、等应用操作。

3. 用户必须执行其他步骤才能使更改生效。

如果需要显式操作来应用设置，则首选复选框

案例3：多项选择

使用复选框时，

1. 有多个选项可供使用，用户必须从中选择一个或多个选项。

2. 逐个单击多个切换开关，每次单击后等待查看结果是需要额外的时间。

在列表中选择多个选项，复选框能提供更好的体验

案例4：不确定状态

使用复选框时，

1. 当多个子选项在父选项下分组时，需要中间选择状态。中间状态表示在列表中选择了多个子选项（但不是全部）。

使用复选框最好地显示不确定状态

案例5：清晰的视觉状态

使用复选框时，

1. 有可能与切换开关的开/关状态混淆。有时很难理解开关是显示状态还是动作。

2. 需要提供明确的勾选状态或未勾选状态。

有时切换开关不能清晰地显示它是状态还是动作

案例6：相关项目

使用复选框时，

1. 用户必须从相关项目列表中选择选项。

用复选框显示要选择列表中的相关项

使用时切换开关时，

1. 用户切换独立的功能或行为。

独立项目可使用切换开关进行选择

案例7：单选项

使用复选框时，

1. 提供单个二进制是/否选择。

2. 只有选择或取消选择一个显而易见的选项。

单个是/否选项更适用于复选框

使用切换开关时，

1. 需要单一选择，并且您希望为开/关类型的决策提供两个选项。

使用切换开关可以最好地理解单个开/关决定

结论

重要的是在表格中的正确位置提供正确的控件使其更加用户友好。由于表单有很多很长的选项，若用户必须进行额外点击才能填写信息，对用户来说会变得枯燥乏味。提供的案例和指南会帮助你决定在表单中添加控件时选择复选框还是切换开关。

参考文献

1. Control and Patterns《控制和模式》

2. When to Use a Switch or Checkbox《何时使用开关或复选框》

3. Selection Controls《选择控制》

4. UX Design: Checkbox and Toggle in Forms《UX设计：表单中的复选框和切换》

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

前几天带大家学习了《牢记这9个排版设计要点，领导都无话可说了…》，今天给大家带来排版设计要点第二弹。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

但是，今天我并不是专门只针对某个店铺做视觉统一的设计分享，而是想从全局的角度去给大家阐述这个问题，毕竟，你得知道自己为什么需要做视觉统一，你才可能做好视觉统一，所以这个问题就不单单只是指店铺了，而是关于品牌与用户之间的问题。

因为不管是店铺也好，平台也好，他们其实都是为卖货服务的，它们与品牌产品之间其实都是合作关系，最终其实都是要链接到用户身上的，而设计师要做的，归根结底都是处理好它们与用户之间的关系，帮助达成交易。

所以我将要分享的关于视觉统一的方法，就不单止是适用于店铺了，而是品牌、平台、店铺都适合的。

按照惯例，我还是先给大家列出一个提纲，方便大家理解：

• 为什么需要统一视觉风格？
• 统一视觉风格的方法有哪些？
• 统一视觉风格的注意事项及总结

接下来我就逐条展开给大家说一下这其中的奥秘吧！

一、为什么需要统一视觉风格？

当我们提到统一视觉风格这几个字，不知道大家能联想到什么？或者能联想到什么画面什么公司什么产品呢？在回答这些问题之前，我还是先给大家举一些例子也许你就明白了。

比如前几天我无意中打开了淘宝app，然后刚好看到了2018年淘宝新势力周的一系列卖场页面：

大家知道像淘宝天猫京东这样的平台，每年各种卖场促销活动是很多的，而且每一场活动都需要容纳成千上万的商家和数以万计的商品，但是，所有这些东西都却只是通过一块液晶显示屏展现在消费者面前，那么这时候就是我们设计师发挥作用的时候啦。

这时候设计师需要做的事情就包括以下几个方面：

• 要保证活动页面里能把所有东西都容纳进去；
• 要保证页面是方便顾客浏览的，所以要有规律可循；
• 要保证页面是可以吸引顾客一直逛下去的，所以页面有规律的同时又要有所差异，视觉上不枯燥，不然会视觉疲劳；
• 要在顾客心里和脑袋里建立某种印象，找到存在感，以免被顾客遗忘；
• 既要保证平台活动整体的调性和谐性，又要为不同的商家提供最恰当的展示机会，所以视觉表现形式要合理；
• ……

总而言之就是要权衡平台、商家、顾客三者之间的关系和利益：顾客买的爽，商家卖的爽，平台名利双收。

那么这时候保持页面视觉统一就很有必要了，因为视觉统一就有以下非常重要的几点作用：

1. 强化品牌或事件在用户心中的印象

因为几乎所有的品牌都需要做的一件事情就是占领用户心智，就是要让用户在众多的品牌选择里有自己的一席之地，不要把自己遗忘了，所以它需要不断的出现，保持存在感。

一个活动每年去做，一个电影每年都出续集，一个产品每年都会出不同的系列等等，都是同一个道理，都是在强化自己在用户心目中的印象，保持存在感。

提到这个，我平时每次搞活动都会提醒大家不要经常换头像或微信昵称，我让大家多来留言其实就是这个道理，因为我每天要面对的那么多人的头像和名字，如果你长期不换头像并且经常来留言，那我肯定会记得你；但如果你经常换头像，并且留言次数还少，那我铁定就不记得你了，因为你没有强化一个符号在我的脑海里啊，明白了吧。

2. 让事件变得有序有规律可循

就像我们办运动会，不同的队穿不同的衣服、喊不同的口号等等，即便是队里的人走散了，你看一下队服或对方喊的口号你就能辨别出是自己人还是别人了是吧。

再比如你去超市货架上拿饮料，正是因为这种视觉统一的作用，所以你才能很好的辨认出自己要买的品牌产品，而不至于拿错了，反过来对于品牌也一样，自己内部的产品之间是有统一的视觉形象的，同时又是跟其他品牌相区分开来的，所以才可以保证顾客不买错。

这些道理运用到页面设计上也是一样的，让顾客方便逛，同时别逛错了地方。

3. 提高相关人员的可执行性

因为像这种大型的活动，需要大量的人力投入，就拿设计师来说，一般都是某个主设计师出来一个设计方案，然后这个方案不仅要能达到以上提到的要求，还必须要是能保证其他设计师能够以这个设计方案的模版，去执行剩余的几十上百个页面，工作量非常之大。

二、统一视觉风格的方法有哪些？

前面我们讲到了统一视觉风格和形象的必要性和重要性，那么接下来就是大家最关心的如何统一视觉形象的问题了，所以我依旧会从好几个方面以举例的方式给大家做讲解，你就明白了。

不过在这之前，我还是拿一张图给大家看，还是淘宝新势力的这张图：

你在这个画面里看到了什么？这个视觉画面里都包含了哪些东西？

嗯，我看到了模特、文字、图案、各种颜色，还有布局、排版、以及所有上面的内容汇聚在一起所组成的一种风格。

那所谓统一页面的视觉风格，也就是说只要保证以上所有提到的这些东西，我在另外的页面里也至少能找到一项是类似的，那我们就很容易将它们视为是具有共通性的页面了，也就达到了视觉风格统一的目的。

以下面这几个淘宝新势力分会场的页面为例：

你应该注意到了，这些页面虽然颜色不一样，但整体看视觉却非常统一，同时细看又有些差别，其原因就在于以下几个方面：

• 不同的页面对应的色相不同，但是明度和饱和度是近似的；
• 不同的页面对应的文案不同，但是文案的字体样式、布局排版是一样的；
• 不同的页面对应的氛围点缀元素不同，但是氛围元素的风格、质感、手法等等是类似的；
• 不同的页面对应的点缀元素不同，但是每一个页面里的点缀元素都是跟相应的主题、模特、文案等等相呼应的。

所以你才会有这些页面具有统一的视觉风格的印象，包括其他会场的页面，虽然做了一些小调整，但是依然可以看得出来是统一的视觉风格：

因为这里运用到了跟上面同样的原理。

不过这种手绘风格与模特相结合的设计形式我以前也给大家分析过，我这里就不深入举例了，大家可以看看圣保罗艺术家 Ana Strumpf 为很多时尚杂志所做的插画封面就能有所体会：

这种手法给人俏皮、时尚、新潮的感觉，非常适合追求趣味个性而又不失品味的心态年轻的群体，所以这一次的淘宝新势力周大概也是出于这种新潮人群定位考量，才会做这种形式的设计吧。

而且这种扁平质感半插画性质的设计形式几乎是很难过时的，非常前卫和耐看。

所以到这里你应该就好理解了，一般来说，我们有以下5个途径可以达到统一视觉风格的途径。

1. 提炼某种风格，重复使用

比如你看今天淘宝新势力的一些会场页面，视觉风格就非常统一，一眼就看出是实体模特＋手绘图形相结合的风格形式，在模特脸部做一些图案轮廓线，然后模特周围点缀一些手绘图案做氛围，有点达达主义的感觉。

2. 建立某种品牌色，重复使用

当我们重复看到某种颜色跟某个品牌或产品同时出现，时间久了就会自然而然的把这个颜色和品牌联系在一起，从而产生条件反射，只要看到某个颜色立马就会想到这个品牌，只要听到这个品牌的名字脑海里就会出现某种颜色。

这其实就是通过建立某种品牌色达到视觉风格统一的目的从而让品牌在用户心里建立起了这种色彩印象。

比如蒂芙尼蓝：

所以，任何页面，任何场所，任何产品上只要出现了这个蒂芙尼蓝色，用户都会默认他们是相关联的：

再比如，可口可乐红：

当然了，色彩种类那么多，有的品牌或店铺的品牌色并不是单一的，而是多彩的，这都没有什么限定。

那这个如果是运用到页面设计或 Banner 设计里的话，这种品牌色是一定都需要出现在画面里的，至于色彩比例就因需要而定了，而且今后只需要出现这种颜色，就能反过来达到视觉统一的目的。

3. 提炼某种视觉元素，重复使用

所谓视觉元素，其实就是指一切你能看到的想到的元素，所以这里的视觉元素也是指多个方面的，比如某种图案图形、某个物件、某个文字、产品、模特、logo 等等其实都算是视觉元素。

那说到视觉元素的运用，我脑海里印象比较深刻的2个品牌就是初语和天猫，前者是店铺，后者是平台。

我们可以看看品牌升级以前的初语，它有一个让人印象非常深刻的视觉元素，就是她的模特和眼部的妆容：

所有的模特都保持了一致的妆容特点，气质也是类似的，当然你也会看到很多他的设计都是会与艺术名画相结合，这些都是它的特点，并且加以充实用，就给人建立了很深刻的印象，你只要看到这种模特妆容或者画面，你就知道：「噢没错了，这是初语」。

那天猫也是一样的，每年双十一这个天猫头的元素就会以各种形式露面，而且不止是在双十一，可以说是相当强大的视觉符号了，你想忘都忘不掉它：

2017年天猫双十一宣传海报

△ Budweiser 百威

△ GUERLAIN 娇兰

△ Beats

这种通过某种视觉符号来统一视觉形象，重复使用从而加深用户印象的方式在很多其他地方都有用到，比如每一个苹果手机，每一次开机，都会出现同样的开机画面：白底＋黑色的苹果 logo。

4. 打造品牌专属的IP或宠物形象，并重复使用

这就跟品牌给自己找了个的代言人一样的效果，只要这个形象出现了，你就知道这个是xxx品牌。

比如店铺，三只松鼠就是这么干的：几乎所有的页面里都会出现三只松鼠。

比如平台，京东有狗，天猫有猫，苏宁也有狮子等等，电商界俨然是一个动物世界。

再比如珠宝品牌，卡地亚Cartier 有猎豹：

这只猎豹经常出现在各种品牌宣传广告里，或者制作成各种首饰，用户看到猎豹就会想到卡地亚。

5. 提炼某一句口号，重复使用

既然我们前面提到了视觉元素，那么文案或口号其实也是画面里的其中一种视觉元素，所以我们再以2017年天猫双十一宣传海报举例：

△ Budweiser 百威

△ GUERLAIN 娇兰

△ Beats

这里面的「xxx祝你双11快乐」 「天猫双11全球购狂欢节」等等口号文案，重复使用，其实就起到了这种画面视觉统一的作用。

而且这种方式也在很多地方有运用到啦，比如你看的很多动漫、电视剧，总会重复出现一些台词，嗯，说到这里，我想到了小时候看的一个动画片《宠物小精灵》，每集火箭队出场台词都是这几句：

然后每集结束的时候总会有那么一幕，喵喵被抛到空中然后喊出一句台词：「我们还会回来哒～」。

你看这种重复口号的威力多么可怕啊，一二十年了还让用户印象深刻呢。

不过，其实最后列举的这三点其实都可以称作是视觉元素的重复使用啦，至于原因我也在前面作了解释，而且以上所有的方式其实都是可以结合运用的，并不是孤立存在的。

还有，大家注意到了吗？我在每一条后面都加了4个字「重复使用」，因为就算你有了自己特定的视觉元素、有属于自己的宠物形象、有自己的品牌色、有自己的风格等等，但是你压根就不露面，你还特别低调藏着掖着不展示自己，那谁还记得你啊。

说到这个，我想到了异地恋之所以容易失败，不也是差不多道理吗？你和男/女朋友三五年不见面没有关系，没法手拉手亲亲嘴也没有关系，但是如果你们压根就不联系，不出现在彼此的视线里，那感情自然会淡的呀，等于是白白给了别人可乘之机。

所以我一直都觉得品牌和用户之间其实也是一样的道理，就是在「谈恋爱」，而不是做生意，至于你们之间是谈的什么类型的恋爱，那就看自己本事了。

总结

之所以我们需要做视觉统一，其实就是为了强化我们在用户心理的印象，让他们记住我们，记住我们是很有规范的，靠谱的，可信赖的品牌印象等等，并且还要重复的出现在用户的视野里，那怎么出现呢？方法就在我上面列举的几条内容里啦。

当然，你也得控制一个度，不要过份的运用这些方法，不然会招致用户反感的。

想想有的男孩子可以成功讨女孩子欢心，而有的却被女孩子嫌弃的不行，知道原因了吗？道理都是一样的啊。

你看下面这些世界杯期间的广告，画面 low，口号 low，重复次数又很多，用户记住是记住你了，但真的挺烦的。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

目录：

• 前言（上瘾模型-pick模型）
• QQ空间小游戏为案例（项目介绍&目标人群）
• 触发用户＆抓住动机
• 付出行动
• 情感撩动＆情感满足
• 持续投入
• Pick me

一、前言

尼尔·埃亚尔写的《上瘾》中提出「上瘾模型」的概念，其中分为四大步骤：触发-行动-多变的犒赏-投入。

这四个步骤是一个循环的过程，当用户越沉迷于这个循环，那说明你的产品对用户的吸引力越强，反之当用户中断了这个循环，作为产品设计师就需要考虑我们在哪一步出现了问题，用户为何抛弃了你的产品，或者说用户是怎么「戒掉」你的产品。这其中的原因可能会很多样，比如用户找到了更好的撩动自己情感的产品，又或者你没有达到用户的预期。

那么怎么样才能让用户在有多个选择时，选择 pick 你呢？我试着把「上瘾模型」结合认知心理学中的「心智模型」，系统性的提出<锁定目标用户-触发用户-抓住动机-付出行动-情感撩动-情感满足-持续投入-pick> pick模型。

二、QQ空间小游戏为案例（项目介绍&目标人群）

空间小游戏平台是国内领先的 H5 游戏平台，通过接入外部优质 H5 游戏开发商来提供角色扮演、休闲、策略、剧情、棋牌、双人pk 等六大类别的轻量小游戏来满足用户碎片化时间娱乐的需求。

• 目标人群：手Q所有用户都是我们既定的目标人群，平台游戏类型能满足不同年龄阶层的用户需求。
• 用户场景：个人碎片化时间， 好友之间有互动娱乐需求时。

平台分为4个 Tab，每个 Tab 都满足了用户相应的需求。

• 首页：承载所有平台游戏，有分类让用户去找喜欢类型的游戏，也根据智能算法进行游戏推荐。
• 社区：提供一个让玩家能互相交流的平台。
• 礼包：给用户提供游戏福利，加强对平台依赖性。
• 我的：承载 VIP 体系和积分任务体系。

以下我想通过空间小游戏为案列，讲解 pick模型在实际运用中的指导意义。

三、触发用户&抓住动机

触发分为内部触发和外部触发，触发要显而易见，行为要易于实施。

1. 外部触发

空间小游戏作为依附于手Q空间的一个入口级平台，我们可以很好的利用好友关系链的传播性，这也就是触发模型中的外部触发——人际型触发。由于平台的关系链属性，所以我们会把人际型触发当做外部触发的核心触发方式，因为好友之间的触发是相对其他触发方式更加稳固值得信赖的，当然付费推广型触发也是在产品冷启动时期常用的方式。人际型触发我们细分为自主型和被动型，自主的主要是用户通过分享游戏或者邀请好友的方式，被动的就是平台通过用户在游戏内的信息触发给他的好友。

人际型触发（主动型&被动型）是外部触发的核心触发方式。

自主型人际触发-邀请好友来平台玩游戏，通过展示游戏特点吸引用户点击进入，这就是典型的自主型人际触发方式，也是最容易形成病毒传播的方式。

被动型人际触发-在不透露隐私的前提下，通过好友在游戏内的信息吸引用户的关注进行触发，这种触发一般会使用在广告位和推荐位模块上，这样能尽可能的提高用户的安全感和认可度。

2. 内部触发

也就是用户自主的触发，情绪触发是主要的内部触发方式，尤其是负面情绪，当人厌倦，孤独，沮丧或者游离不定的时候会让我们体会到轻微的痛楚和愤怒，我们在内部触发这里需要抓住用户孤独，无聊的情绪波动。当用户无聊的时候，如果产品能快速的出现到用户眼前，并能消除用户的负面情绪，那么这就能让用户产生记忆点，每当这种情绪袭来的时候，用户总能想到你。

通过展示游戏的热度信息来吸引用户关注，在用户无目的性刷空间的时候，通过推荐热门游戏相关数据，然后与用户的孤独情绪产生碰撞。

总结：触发是让产品卖出去的第一步，而有效的触发才是成败的关键点。有时候内部触发和外部触发并不是独立存在的，在不同的场景下两种方式是可以做到相互结合的。触发方式千万种，最适合自己产品的触发方式才是最好的。

四、付出行动

人在做出行为时有两个基本动因，一个是该行为简单易行，二是行为主体有这个主观意愿。

上一步我们已经通过各种方式触发了用户，这个时候就需要用户能做出行动。在我们空间小游戏这个案例里，用户点击游戏 logo 时，我们有过一个很大分歧，那就是用户在平台或者广告位上看到游戏 logo 点击后，是直接进入游戏还是需要一个游戏详情页去介绍游戏。

两种方式都有各自的优势，即点即玩能快速的让用户进入游戏，能提高转化率，游戏详情页能让用户更好的了解游戏内容，再进一步确认是否去玩这个游戏。

针对这两个方案，我们最终选择前者-即点即玩，因为我们考虑到 H5 游戏都是属于比较轻量的游戏，所以我们希望用户能形成一种认知，平台内所有游戏是轻量的，便捷的。所以在面临方案选择时，回头看看产品的调性与特点，可能能帮助我们做抉择。

而针对已经玩过平台内游戏的老用户，我们必须能让用户在下次想开启游戏时快速的找到玩过的游戏。根据后台数据我们的用户平均在玩的游戏数量是2.9个左右。最后我们选择在小游戏首页顶部位置设立一个最近在玩模块，首屏展示三个，可滑动和查看更多，希望能让用户快速的找到玩过的游戏。

所以触发是有分新用户和老用户的区别的，针对新用户我们更多的是需要拿内容去吸引他们，而老用户则需要能让他们快速的找到自己已经玩过的游戏。所以触发要简单易行，主观意愿是需要我们去引导和吸引的。

五、情感撩动&情感满足

优秀的游戏总是能持续的撩动用户的情感，让人在游戏中得到满足感，成就感。我们平台所有游戏都是第三方公司提供，我们没有权限对游戏内容进行过度的参与，我们只能尽可能的把最优质的游戏筛选进来，所以在情感撩动和满足上我们不能完全依赖开发商的游戏质量和设定。所以必须在我们平台的体验上给用户一些噱头，一些小目标，让用户在平台上也能得到情感满足。只有这样，用户才能对平台产生记忆点和依赖，这才是我们想要达到的目标。

从平台的角度我们希望通过<社交属性，奖励机制>两个方向去撩动用户的情感，用户可以在社交里面找到荣誉感（晒自己的游戏等级和战绩）,也可以在多变的奖励机制里面不停的完成一个又一个的任务而获取相应的奖励。

1. 社交属性

游戏社区，让充值玩家可以有地方炫耀自己获得成就感（名称附带游戏等级和荣誉），让普通玩家也能通过社区了解更多游戏攻略，甚至可以在这里与陌生人交友（点击头像可跳转手Q资料卡）。

2. 奖励机制

• 游戏礼包 tab，通过发放平台特殊礼包福利，让用户养成习惯，每日来平台领取礼包再去玩游戏。
• 平台任务（签到，转发，进入游戏等）可获取积分，积分可以到兑换商城换取游戏金币和抽奖，通过积分抽奖能调起用户的心理起伏，让用户乐此不彼的投入到获取积分当中。
• 首冲优惠，充值抵扣券，通过优惠的方式引导用户充值，研究表明当用户首冲后，之后充值的概率会提高很多。

总结：多变的福利奖赏会使大脑中的伏隔核更加活跃，并且会提升神经传递多巴胺的含量，促使我们情感产生起伏，然后一旦情感被满足，我们将会持续的投入下去，比如更多的时间，更多的金钱。

六、持续投入

人为什么会进行投入，投入行为背后的大思路是利用用户的认知，就是用户会认为投入越多，服务越好，得到的情感满足越丰富。当然事实也的确是这样的，投入的阶段我们需要让用户对未来的奖赏（心理，福利）抱有强烈的期待，这样才能让用户持续的投入。

比如我们在设计 VIP 体系时，随着 VIP 等级的提升，用户所拥有的特权就会不断增加，通过特权的吸引，当用户在游戏体验中发现了比较困难的任务时，我们就会提醒用户是否去升级 VIP，让通关更轻松，用户将很难抵挡这种特权满足。

又比如我们设定每周三为积分翻倍日，用户可以得到更多的积分，我们不断丰富积分商城的兑换物品，持续吸引用户的注意，让用户不断去期待新奖励。

七、PICK ME

我理解的 pick 是一种充满信任感的选择，这种选择会让用户去把产品分享给自己的好友，会在社交平台上讨论产品。但是能让用户 pick 你，并不是一件简单的事情，就好比你 pick 创造101小姐姐时，你可能会关注小姐姐的样貌、才艺、背景、人设，这些都是影响你产生认同感重要的因素。

我们做产品何尝不是这样呢，如果你的产品没有解决用户的痛点，没有让他产生愉悦的情绪，你就会被「淘汰」。用户的投票都是在符合自己心智模型的基础上做出的选择，pick 模型的设计目的就是将用户遇到的问题（情感需求）和我们作为设计者的解决方案频繁的联系到一起。

总结

让用户对产品产生习惯，是我们的终极目标。而如何让用户产生使用习惯，不是一朝一夕能达成的，这需要产品不断的迭代优化，让你的产品不断的解决用户变化多端的需求，那么忠诚就随之而来了。我们回顾一下 pick 理论，从更简单理解的角度来看，可以分为<触发-持续解决问题-养成习惯>，这里的难点属于第二步，当你的产品能不断解决用户的问题，养成习惯只是水到渠成的结果罢了。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。