【干货】作为设计师,你可知道侠义的工具类产品怎么分?

什么是工具类产品:

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

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

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

工具类产品讲究两个方面 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,细节越多,图标的直观表现力越弱;细节少,图标的直观表现力得到提升。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,948评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,371评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,490评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,521评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,627评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,842评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,997评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,741评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,203评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,534评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,673评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,339评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,955评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,770评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,000评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,394评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,562评论 2 349

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,799评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,066评论 4 62
  • 2016年须臾走过,这一年发生的事情如跑马灯般从我的脑海略过,有酸涩,有甜蜜,有迷茫,有遗憾。 婚后生活意料之中的...
    鬼鬼酱0225阅读 160评论 0 0
  • 昨天是我在晨读群里晨读的日子,照惯例,今天由我来进行晨享。我特意选择了爱沟通的内容进行了朗读。因为在沟通这方面我还...
    亲子教育刘文君阅读 263评论 7 5
  • 毕业后选择留在大城市的你,现在是否一切都安好,工作是不是顺心,生活是不是如意? 2017年的夏天,我们大学毕业,很...
    罗小伟阅读 309评论 2 2