什么是工具类产品：

一，工具类的产品分为广义和侠义。

二：广义工具产品通常用更为准确的词汇来描述这些细分特征.如“社交”“电商”等

三：纯工具类产品特征具备两个单一.解决需求单一和实现路径单一。

工具类产品讲究两个方面 1，可用性：信息识别度 空间体验...2，美感：图标美感、比例，配色和谐考究，字号 层次 字号...

广义类工具类产品。他们有更精准词汇来描述，如“社交”“电商”“社区”“新闻”等属性关键词更能概括产品特性。比如：微信拥有社交关系，生活支付，购物消费，游戏等，就不只是通讯工具。微博有发表微博，视频直播，游戏中心...也不只是笔记工具。

侠义类工具产品：解决需求单一，实现路径单一。如美图秀秀：专门用来美化照片/墨迹天气：专门用来查看天气/印象笔记专门用来记录笔记。实现路径单一的意思是用户与APP交互单线就可以完成目标。如石墨文档：在产品里就能完成文档/有道云笔记在产品里就能记好笔记/Xmind在产品里就能理清脑图...路径不单一如美团不但在APP上操作，还需要去规定场地使用。

侠义类工具例子：有道云笔记。解决需求单一：方便用户记录。实现路径单一：实现路径是服务方决定的，使用场景只有在这个APP中。

---

工具类产品4大关键词：简洁、易懂、快速、引导

简洁：

导航架构上的简洁：

1，导航构架上的简洁有助于快速的理解产品。2，注意不同层级的优先关系，使用最合理的层次来引导用户使用。采用 模块化设计，隐藏相似功能。功能上简洁：一级导航上就能找到需要的/相似的功能，操作归纳，颜色深浅做选择与否。例子：石墨

视觉层次上的简洁：

1，尽量少用多种元素来组合，避免页面更加复杂。2，重复使用某种设计手法，达到统一且富有韵律感。使用卡片来区分内容，使用线条来分割信息，通过字号和颜色区分，文字识别先达到。

页面信息上的简洁：

1，把用户最想看见的内容放在首屏；2，学会隐藏，把大段的内容精简；3，简洁的同时要保证内容可识别。产品的定位决定信息排布：没有标题（EverMemo），只保留标题（锤子便签），保留标题+两行内容（朋友圈）(例子：搜狐）

易懂：

1，优先考虑功能的理解度和识别度。2，其次考虑视觉美感，最后平衡两者。展示方式：图标，图标+文字，文字（例子 mac邮箱的发送与QQ邮箱的发送）

快速：

工具类产品的目的就是想通过将功能产品化，来提升用户的工作效率。

预见：预见下一步的操作，提升使用效率

苹果发送图片默认最新的图，发送邮件推荐最近的联系人

填充：默认项的填充，减少用户重复操作。

举例:谷歌浏览器的默认复制功能,有道云笔记与石墨提示之前的登入账户，滴答清单的默认时间段选项，锤子日历常用的事件。

转移：通过动画动效，转移用户注意力，减缓心理上的等待时间。1，加载动画告诉用户目前的状态。2，通过有趣的动画来转移用户的注意力，减缓等待的时间。

引导：1，引导能减少用户对产品的距离感；2，引导能有助于用户快速使用功能；3，聪明的引导帮助用户快捷完成任务。新功能引导（第一次打开APP,专门的帮助引导中心。）智能引导：

---

工具类产品设计特征：字体、配色、配图、图标

字体有自己的性格。

儿童类产品-安全亲和，文艺类-复古韵味，工具类产品-效率简洁，女性时尚类产品-纤瘦轻盈。

工具类的字体常用英文Helvetica（非衬线文字），Arial（非衬线文字）；中文 宋体（衬线文字）,微软雅黑（非衬线文字）

通常情况下，为了更好的兼容性，产品优先选择系统自带字体： IOS使用的中文是苹方简体（ios9以后），华文细黑（ios8以前），英文是San Francisco，三类文字都是非衬线文字。例子：锤子便签、印象笔记、滴答清单、网易有钱。

安卓APP选择的中英文字体分别是思源黑体和Roboto。

当产品有自己强烈风格倾向的时候，要选择符合自己产品定位和调性的字体。如文悦古体。

WINDIW是微软雅黑。当设计的字体用户电脑里没有的话，最后的视觉效果会有偏差。这两种字体的识别性和普及型都很高。

为什么优先选择系统自带字体：

1,设计的产品最终是呈现在用户的终端上的，要考虑用户的使用环境。

2，字体缺少情况下、行距、会替换成其他默认字体，影响内容的排版。

3，系统默认字体经过时间的考验，在识别性和阅读体验方面都比较好。

新手误区：1，喜欢用自己喜欢的字体设计所有的产品；2，没有分析归纳需求，到底合适哪种字体。3，没有考虑所使用字体的实现性。

色彩如何选择和搭配？

如何选择颜色，例子 邮件类产品怎么都用蓝色呢？

1，工作时的状态，邮件的使用的时候是在认真，比较严肃的工作状态下。

2，从色彩心理学上讲蓝色是和平、宁静、理性的颜色，也是IT的行业色。

既然邮件类产品都是蓝色，为什么网易邮箱是红色呢？

从品牌的延续性去考虑就会发现这个颜色是品牌延续，看到这个红色会联想到网易红，所以选了红色而不是蓝色。但里面的界面还是蓝色为主色调。

锤子便签是拟物化设计，所以选色时用了真实世界中便签色。淘宝除了橙黄这个品牌色外还使用了色换上各种色系，来表示玲琅满目的购买氛围。有道云笔记是冷静理智的书写，所以用了冷色调中的色系。

1，产品定位和使用场景决定颜色的选择。

2，品牌的延续性对颜色的选择也有影响。

3，避免选择影响用户情绪的颜色（比如大红大紫）

4，选择颜色的目的从功能性出发，减少视觉干扰，提高工具产品效率。

如何确定色彩比例：

举例:网易邮箱

白色：蓝色：其他颜色约6：3：1

例子：有道云笔记

白色：蓝色：其他颜色约是6；3；1

举例：淘宝

效率优先原则：减少色相-减少视觉干扰-突出内容

1，工具类产品的配色更克制

2，首先符合自己的产品定位

3，效率优先原则

配图

2B产品配图

2C产品配图：直接选择产品里含有重要界面来当配图

1，选取产品界面来配图，是展示产品特点最直接的方式。

2，让浏览的用户对你的产品一目了然。

图标

Blibli vs 网易邮箱

Blibli的颜色比较丰富，圆角比较多。有一定的情感性，比较Q，二次元。网易邮箱大师色彩较少，多用直角，比较中性。

1，图标在工具类产品中并没有表现出和其他产品有显著的差别。

2，但通常不会使用偏“可爱”风格的图标。

图标一般会使用线、面、线面等多种形式结合的形式。1，通常不会使用偏“可爱”风格的图标，2，细节越多，图标的直观表现力越弱；细节少，图标的直观表现力得到提升。