什么是工具类产品:
一,工具类的产品分为广义和侠义。
二:广义工具产品通常用更为准确的词汇来描述这些细分特征.如“社交”“电商”等
三:纯工具类产品特征具备两个单一.解决需求单一和实现路径单一。
工具类产品讲究两个方面 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,细节越多,图标的直观表现力越弱;细节少,图标的直观表现力得到提升。