首页

UGD 模式

雪涛

一、什么是UGD?

大家都知道 UED(User Experience Design)用户体验设计团队,主张「以用户为中心的设计」,我们团队的前身就是一个典型的 UED 团队。那么什么是 UGD 呢?

UGD(User Growth Design)用户增长设计,主张「以用户为中心,以增长为导向」。

下面这个是我们团队现在的 logo,这个图形很清晰地描述了 UGD 的理念:在 UCD(以用户为中心的设计)的基础上增加一个向上的箭头(增长),变形成了 G(Growth,代表增长)。也就是我们在原先以用户为中心的基础上,还要做到帮助业务增长。

「增长」的概念对很多人来说也许还比较陌生。事实上,这个概念早在2010年就有人在美国提出了,到了2015年才引入国内,最近两年开始火爆。所以说它在国内其实也是一个比较新的概念。感兴趣的朋友可以看看《增长黑客》相关书籍。

二、为什么我们要变成UGD?

为什么我们要从传统的 UED 进化为充满挑战和不确定性的 UGD 呢?这要从天时、地利、人和三个方面说起。

1. 天时

先说说天时,大概2016年左右吧,中国互联网逐渐进入下半场。关于下半场的话题这里不多说了,感兴趣的同学可以上网搜搜相关的文章或者看一下我的新书《破茧成蝶2》(7月出版),里面有很详细的讨论。简单的说,下半场的特点就是:人口红利、流量红利、资金红利都在逐渐萎缩。原先你可以花钱买流量;或者通过好的 idea 拉来大笔投资;再或者通过打造的体验迎来大量用户。但这种「好时代」已经一去不复返了,如果没有实质的增长,创意、体验、流量都不能保证产品可以顺利的活下去。

2017年3月底,美国又发生了一件大事:可口可乐,这家以营销著称的公司,宣布将取消设立了24年的首席营销官(CMO)一职。全球市场营销、客户及商务领导、战略被整合成一个职能,由新创立的职位 CGO(Chief Growth Officer,首席增长管)领导。第一任 CGO 将直接向可口可乐新任 CEO 汇报。

可能很多人不了解,CMO 的工作性质和 UED 其实有很多相似的地方。比如都是成本部门(当然市场部还要额外花钱);都热衷包装创意而非对业绩的直接影响;都倾向于用定性的方式检验成果;都习惯通过经验而非试验来做决策……

很多企业主对此非常无奈,他们明明知道在营销等方面的花费存在巨大的浪费,却不知道浪费在哪里。随着大数据时代的到来(2015年左右),人们越来越重视数据的作用,越来越能够轻易的获取、存储数据,也越来越知道如何从数据中获取价值。在这种情况下,原先很多岗位的传统工作方式显然太过于低效,所以 CMO 逐渐被 CGO 取代也就不足为奇了。

从 CMO 到 CGO,揭示了四个变化趋势:

  • 从花钱到赚钱
  • 从定性到定量
  • 从创意到业绩
  • 从经验到试验

谁能肯定 CMO 的今天不会成为 UED 的明天呢?当然,我认为 UGD 只是未来的一个发展趋势之一,我想未来设计师还会有很多其它的发展方向等待我们深入探索。

2. 地利

虽然我换过几次工作,但是有一点我从来没变,就是一直在做和商业相关的产品(电商、To B、互联网金融),所以我对业务、对数据更敏感一些。和同行交流的过程中我也发现一个明显的现象:越是接触商业产品的设计师,越重视数据量化。当然现在不仅是商业产品,所有类型产品的从业人员都需要有这个意识。比如做社交产品,也需要通过活跃度等指标来检验成果。

3. 人和

设计团队的地位其实普遍是比较尴尬的,因为你很难证明对产品、对企业的价值。以前设计师还可以靠特立独行来赢得一些关注,但现在随着时代的变化,设计和业务绑定的趋势越来越明显。与此同时,大部分设计师却还没有做好相应的准备,不知道该如何帮助业务增长。

虽然支持团队很难成为核心团队,但我们依然可以通过改变自己,努力离核心部分近一点,更近一点。

三、UGD服务于用户还是业务?

看了前面的分析,可能有人会感觉迷茫:设计师到底应该服务于业务还是用户呢?

传统思维认为,设计师应该为用户、为体验负责。实际上,体验与业务并不冲突。通过一年多的试验,我们发现能带动业务数据提升的设计方案,质量都比原始方案要好。通过无数次的试验结果总结规律,设计师的进步非常快,也非常大。

所以我们团队的价值主张一直都是:以用户为中心,以增长为导向!

四、如何从UED转型成UGD?

很多设计师认为自己不太可能帮助业务有实质性的提升。其实设计的商业潜力是巨大的,只是还尚未被充分发挥出来。通过出众的造型和外观击败竞争对手、销量大幅提升的案例不胜枚举。所以我坚信设计师在这方面的空间非常大。

当然要成为 UGD 并不是通过输出美观的产出物就可以做到。UGD 必须致力于通过设计思维及专业技能,用最小成本为产品/企业创造最大价值。我们团队在这方面已经摸索了一年多的时间,现在还在继续探索中。

和 UED 相比,我认为 UGD 最重要的差别在于:

  • 更懂行业:行业间差异
  • 更懂用户:用户群体差异
  • 更懂数据:业务数据分析
  • 更懂增长:投入产出比

前三项相信大部分设计师已经开始意识到了,而第四项,也是最重要的一项,很容易成为设计师的软肋。因为设计师太习惯于追求完美、「憋大招」了,他们很少考虑如何用较小的成本创造更大的价值。实际上,设计师缜密的思维、优质的创意如果能和精益思维、增长思维结合起来,将产生惊人的效果!

当然说来容易做来难,我们在长期的实践过程中经历了很多失败和挫折,感谢公司的无限包容,使得我们最终能够沉淀出一套严谨的「增长体系」作为理论支撑,并不断带给业务方惊喜。

UI中国10周年海报

雪涛

祝贺UI中国十周年快乐,感谢UI中国对我一直的支持,最近也很忙,抽空做了个海报表示祝贺吧,比较菜,做得不是很好请担待,谢谢大家!

请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图

多伦多订餐APP-懒洋洋

雪涛

懒洋洋是一款为多伦多华人提供服务的订餐平台用户群一般为学生、白领等对于视觉上追求简约、舒适产品流程简易而顺畅(英文是用翻译软件翻的,如有错误,那就算了吧)

请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图

如何系统学习功能图标?来看资深设计师的全面总结!

雪涛

一、图标的定义

1. 什么是图标

图标是具有明确指代含义的计算机图形。从功能分类角度分为启动图标、应用图标、功能图标。

2. 什么是功能图标

功能图标是具有指代意义且具有功能标识的图形,它不仅是一种图形,更是一种标识,它具有高度浓缩并快捷传达信息、便于记忆的特性。

二、图标的种类

  • 具象图标:保持事物本来固有形态进行优化设计。如汽车,轮船,飞机,车票……
  • 抽象图标:不是一个具体的事物,更趋于概念化。如个人中心,空间,模式,最近等。

三、图标的风格

1. 面性图标

面性图标是由一根封闭的线造成了面,面性图标同样具有大小、形状、色彩、肌理等造型元素。直面图标具有稳重、刚毅的男性化特征;曲面具有动态、柔和的女性化特征。

不透明度图标

不透明度图标是通过调节图标的部分面性结构来增加层次感,从配色角度属于同色系。

△ NO-921

光影图标

三大面五大调,通过调节面的反光和阴影来增加面性图标的纹理。在扁平时代的今天保留着微拟物风。

多彩色图标

多彩色给人很酷炫的感觉,从明度角度还是要提取深浅的颜色来代表图标的黑白灰。

△ Kyle Anthony Miller

2. 线性图标

线性图标是通过粗细一致的线条绘制,高度概括出来的图标,既能让人赏心悦目,又给用户带来创造和应用的乐趣。

圆角图标

圆角图标给人以亲和力,也有柔软,软弱的一面。在图标设计越来越精美的今天,圆角图标的应用行业已经越来越广泛。比如女性,母婴,儿童,旅游……

△ Stephen Andrew Murrill

直角图标

直角图标给人以锐利,坚强,果断,不拖泥带水的一面。让人眼前一亮的是魅族系统Flyme6 里面的图标它就是用的直角,给人明快干净的感觉。真正更好的诠释它内在含义的非京东金融里的图标了 ,投资理财的时候需要人们果断作出判断。理财有风险,投资需谨慎。直角的感觉让人当机立断,不拖泥带水,快买快出。如果用圆角就感觉柔一点,感觉做事优柔寡断。所以一下子在金融领域被做成了标杆式的功能图标。

断点图标

断点图标是点线面演化的一种产物。在最开始UI兴起的时候,设计师们不满足于单线条的功能图标,通过点线面增加形式感。最早新浪体育运用到这一风格,算是还是很不错的一种风格。很遗憾只留在了我的记忆力,网上并没有找到之前的设计。

△ Catalin Mihut

高光式图标

高光式图标是传统绘画的产物,我们在传统绘画的时候往往最后一笔都是添加高光,起到画龙点睛的效果。高光式的功能图标采用里细外粗的规律,和断点式功能图标差不多一个年代的产物。在不断扁平不断简洁的今天,也不会感觉那最后一笔也是多余的。

△ Udisk6353

不透明度图标

不透明度图标是调节图标的部分结构的不透明度来增加图标的层次。色彩上面跟双色图标是一样的,只不过从配色角度属于同色系的范畴。

△ Laura Reen

双色图标

双色图标在实际应用中非常广泛,也是很百搭的那种。一种可以有彩色跟无彩色结合,有彩色的颜色可以是企业色,可以是代表行业或者产品的颜色跟无彩色黑色相结合。一种是主体色跟点缀色组合而成的双色,但使用时要考虑到当前界面中的配色不宜过多,多了就容易花。

△ stay

线面结合图标

线面结合图标也是一种很出彩的风格,线是高度概括的图标,这时候面更多的是充当装饰点缀的作用。面的表现方式也有很多种,可以是单色的,渐变色的,也可以像 MBE风格那样提取主体结构形成的面,也可以提取图标里面有闭合路径所形成的面。这种风格应用也非常广泛。

△ Ted Kulakevich

△ Prakhar Neel Sharma

结构图标

结构图标算比较有争议性的图标,结构图标是我们学绘画的时候老师要我们起形,要开始绘画结构,对基础的三大面五大调有很好的理解。现在结构图标正好相反,比如对于一个具像图标,我们要分析出它的每一笔每一画,看清每一个结构,然后用固定的形式来表现出来。固定的形式可以像优酷图标的相交结构点,可以像上海玛娜花园一笔一个颜色,等等。

一笔画图标

一笔画图标是难度系数比较高的一种风格,也是我非常喜欢的一种风格,当才开始流行断点图标的时候,锤子设计师欧阳念念就提出了一笔画图标的概念,当时也是有争议的一种图标。当网易云音乐也出了这种图标后就更具有说服力。一般也很难驾驭,也基本都能做出来,但是视觉上看上去很舒服还是要有深厚的功底。

logo类图标

logo 类图标跟一笔画算是同等级别难度的,需要图标足够精致到可以直接拿来当应用图标,乃至于 logo。这种在app中屈指可数。最为经典的就当属网易云音乐的 logo 了,其实它也属于一笔画图标,同时又用做了 logo,它的含金量可想而知。

情感化图标

情感化图标是提取人的五官跟图标相结合具有拟人化的图标,这种拟人化的场景模仿人在真实场景的应用。QQ 的底部图标通过五官方向大小移动变化很好的表现出当前场景。QQ 开了先河,相信后续会有很多情感化图标出现,会有它的一席之地。

3. 如何转换线性图标与面性图标?

线性的闭合路径的图形变面性图标,闭合路径里面的线条反白,重要的关联结构线反白,让面性图标透气;线性的不闭合路径的图形变面性图标,应适当的增加线的粗度来达到视觉上的平衡。

△ Jory Raphael

△ Sebo

4. 如何去创造新的图标风格

绘画结构+点线面+色彩,绘画结构可以清晰的分析出事物的主体结构,勾勒出主体轮廓,对创造新的图标风格有很大帮助。绘画结构选的角度是人很熟知的角度,比如正面,尽量不要选择带有透视角度进行设计。点线面是设计的基础,通过从点线面角度去构思会获得更多的灵感。色彩方面可以是企业色、行业色、主题色、点缀色等等。(图design by Ted-Kulakevich and Graphéine )

四、图标的特性

1. 统一性

大小的统一

在网页设计中图标的主流尺寸有16×16、24×24、32×3、48×48、 64×64、96×96、128×128、256×256、512×512。在移动端iOS规范中在2倍图下最适合人点击的区域大小为48*48px,iOS功能图标其他尺寸为48加或减4的倍数;安卓android 功能图标其他尺寸为48加或减8的倍数。为什么 iOS 是4的倍数,一个数除以2倍图在乘以3倍图要是偶数最小的数为4;为什么安卓android 是8的倍数,安卓开发中最小的单位是1dp,1dp=2px,同时也要满足一个数除以2倍图在乘以3倍图要是偶数最小的数为4,所以安卓要是8的倍数。在很多带有色块的图标,不仅要保证色块44*44pt的大小统一,也要保证里面色块里面的功能图标的大小统一。

风格的统一

风格上面已经归纳的很全了,直角图标和圆角图标基础上可以添加一个其他风格,如双色风格;但是剩余的其他风格最好就不要两两相加,不然就会给用户感觉很容易乱,也不够简洁,主次不明。

规范的统一

视觉的规范

为什么我们再同样的大小区域去绘制正方形、圆形、三角形,虽然符合了大小统一的特性,但是从视觉上还是不能看上去很均衡?这就需要我们规范化的去绘制图标,安卓android 规范里给出了图标的绘制方法。

圆角的规范

2. 简洁性

简洁性不单单体验在图标的简洁,还要体现在从创意到实际落地的简洁。在使用软件 ai 或者 sketch 的时候绘制基础图形不要出现小数点和基数,多用偶数。

3. 层次明确

图标具有可点击性和标识性。可点击性就会有点击前、点击时、点击后三种状态,主流底部标签栏会在点击前使用线性图标,点击时和点击后使用面性图标;也有使用颜色来区分。

4. 延展性

图标的延展性之前在图标的风格也讲到,好的图标可以直接当应用图标或者 logo 来使用。同时好的图标还可以通过点线面动效变化做下拉加载动画。

五、如何学会合理的设计功能图标?

1. 头脑风暴

头脑风暴看似一个不知道怎么解释的词,简单的说就是多动脑子,越用越活。头脑风暴不单单是这里用到,是所有设计师做设计之前必备工作。头脑风暴完你会觉得你的设计思路会很宽,然后就是要合理的分析每个的可行度,完成的工作量,自己当前设计的水平是否可以有效完成。其实很多设计师能有效的搜索到自己想要的东西也算是头脑风暴的一种,虽然你不会想出很多点子但还是很明确的知道自己想要什么,一定注意不要直接拿来主义,还是要通过平时的练习掌握更多的风格。为以后头脑风暴想出的很多点子能很好的实践出来。比如以旅游为主体进行头脑风暴,这个就能想到很多很多。

2. 搜集资料

搜集资料的时候要很好的提取关键词,直接从 iconutopia、iconfont、iconfinder、iconmonstr 搜索获取灵感。具象的事物可以看看该事物好的品牌公司的产品,品牌公司的工业设计相对较好,对后面提取元素也会有很大的帮助。也可以通过提取好的关键词,翻译成英文,再到国外的网站追波、be搜上一搜看看。搜索到的素材和元素一定要再设计,不能拿来直接用。

3. 提取元素

提取元素又归结到绘画结构中去了,绘画好的看到具象事物,心里默默打开一个灯,三大面五大调,光影关系都有了。不是很理解的还是多练习吧。具象图标就是提取主要轮廓线,保留可要可不要的元素,到最后的时候做统一删减;抽象图标有时候确实没有一点的思路的时候可以在就 iconutopia、iconfont、iconfinder、iconmonstr 找找,找到了合适的还要进行 redesign。有想法后选择一种图标风格这样的绘制效率会很快。

4. 规范化

上面元素提取好后,需要开始选择一种图标风格进行绘制。开始绘制的时候不要过于追求图标的风格,还是要从图标本身出发快速的绘制好。等全部绘制好了突然想换一种图标风格也是很快的,水到渠成。可能刚开始很难在规范化的框框里直接就提取元素开始绘制,那就只能先绘制要你想要创意的元素图标,全部画好后在统一的规范里面再绘制一遍。规划化的目的就是让图标统一,任何两个图标拿出来从视觉大小、风格都是一个统一的整体。

5. 加减法

一套图标绘制好了之后还是在放在一起看一下整理的感觉,最后通过加减法适当的修修补补,对于视觉上看上去过于繁琐的图标要保留大轮廓的同时减少结构达到视觉平衡;对于确实很简单但有没办法添加任何的东西元素来增加的为它做加法的时候是否可以放大,来增加它的视觉丰满感。

用户体验是一种过程,而不是结果

雪涛

任何人都抵挡不了时间的力量,你可以斥责它的无情,也可以赞美它的给予,在这个成长的历程中,我们寻找的不是时间给我们带来了什么,而是这个过程中我经历了什么。后者,才是我们需要深思并感恩的。

与「用户体验」一样,许多人会评判一个产品用户体验的好与差。但是「好」与「差」只是整体上的一种结论,普通人可以说这两个字。但作为设计师,必须懂得在体验过程中,知晓哪里好与哪里差,更要知道为什么好为什么差。

就好像评书似的,真正读过某本书的人,不会单纯的说:「这本书太好/烂了」。他一定会有一种感悟,哪怕只是一句话。

既然是为了提升「用户体验」,就得与用户一起进行体验的走查,才能有根据的进行优化。

一般我们会建立一种用户体验路径,其目的是为了了解用户的动机、关注点和需求点。所以为了提升用户体验,就必须邀请用户参与体验路径的设计过程。

用户在使用一款产品时,他们中的大多数只是为了完成某个任务,所以在这个过程中,也许用户只使用了部分功能,也可能使用了所有功能。

因此,不要将体验路径的设计限制在特定的产品或功能服务上,要理解完整的用户体验路径,针对性的进行走查,与用户一起提升产品易用性。

一、让用户参与产品设计流程

真实的用户体验路径需要通过不同用户的参与互动,不管是一对一的讨论或焦点小组,都需要大量的数据才能得出真实的结论。

任何没有基于研究报告的尝试、假设、数据,都将使它在很大程度上只是理论性的。所以我们一定要通过不同用户的不同体验结论,客观的进行分析路径中的哪一环可以继续优化。

与用户的交流沟通是其中的关键,在用户的帮助下,你很容易找到可提升的体验点。

因为,用户情绪的波动和心情的愉悦、满足、怀疑、失望以及懊悔的表现是无法在报告中准确反映出来的,所以设计师要重视这些用户反馈,包括这些互动的场景可以使设计师产生共鸣,通过同理心来设计并优化功能。

然而,没有任何产品或功能服务能够满足过程中的所有用户需求,所以,要深入了解每一个阶段出现的需求点,因为它们都会衍生出不同的因素,这使我们能够理解产品如何更好的服务于用户的生活。

同样,没有任何灵丹妙药能积极地改变用户体验,而是通过与用户的持续接触。也许你会说很难进行与用户直接的对话,所以你通过客服回访、用户反馈等方式收集信息也未尝不可。

可能到这里你还没有完全明白其中的道理,下面我举个例子详细说明。

二、拆解 – 用户体验之旅

让我们来举一个旅游平台的例子,这个平台是供于各种各样的人和商务旅行者使用的,其中包括了航班、酒店、出租车租赁等在内的度假套餐。

为了让各位深入了解体验路径,以及更好地了解我们的用户,让我们对旅行者的体验路径也做一个拆解。如下图:

这个路径将全面地了解用户的想法、感受和行为,因为他们会经历不同的阶段,帮助填补我们路径中的空白点,帮助我们更好的进行产品的设计。

1. 计划旅行

在计划旅行时,设计师认为用户的想法是什么?

  • 目的:休息、假期、出差;
  • 目的地的候选名单,检查距离和到达目的地的时间;
  • 出行方式选择:飞机、火车、巴士、游轮、自驾;
  • 查看酒店位置与评论好坏;
  • 评估旅行成本(如航班、酒店等费用);
  • 可取消功能(如已订的航班、酒店等)。

2. 用户角度

通过与用户的走查、回访、反馈,可以帮助我们了解用户内心真实的想法,帮助我们增强以及简化用户的体验方式。

  • 在条件允许的情况下,提供尽可能多的价格;
  • 经常出差的人会为了飞机上的最佳座位而自愿增加费用;
  • 出来旅行的家庭想要知道目的地有哪些有趣的儿童活动;
  • 显示符合用户自定义预算的旅行套餐;
  • 帮助用户估算旅行成本;
  • 给出评价信息,可供用户评判(朋友、预订平台、Facebook等)。

3. 特殊情况

产品是否有处理特殊情况的功能?

  • 由于个人原因,推迟了旅行计划;
  • 目的地天气或其他情况不利。

我们是否可以帮助用户更好地应对这些情况?通过及时提供有关目的地天气状况、备选旅行计划或建议类似目的地的信息等。

那么通过第一个内容的拆解,我们就可以发现,这个点能做的功能就有很多。而且这些功能还能排列优先级,设计师能主动进行推进,提升设计师自身的价值。功能走查的重要性相信各位也看出来了。下面继续。

1. 完成预订

是时候确定目的地、日期、旅行方式和停留地点了。(依然是设计师角度)

  • 设计有序、直观的预订体验;
  • 安全流畅的付款流程,包括多种支付渠道的选择;
  • 旅行模式的确认细节,包括驾驶方向和帮助热线电话号码;
  • 酒店确认:房间详情和热线电话。

2. 用户角度

  • 直接能从航空公司/酒店确认信息,这样会比旅行社确认更具价值;
  • 目的地指南(视频、天气、穿着、提示、要做的事情、文化等);
  • 建议的旅行路线;
  • 紧急求助热线(如果客户在预订过程中拨打电话,呼叫应该能及时取得联系)。

3. 特殊情况

  • 预订未确认,付款已处理。

1. 出行与酒店

设计师考虑的用户需求。

  • 舒畅的旅行体验(飞行准时等);
  • 入住酒店,快速办理手续;
  • 干净,方便,光线充足的房间(特别是床,洗手间);
  • 体验当地的美食和文化;
  • WiFi 覆盖;
  • 干净整洁的出租车等交通工具;
  • 与家人和朋友实时分享照片;
  • 合理的分配时间。

2. 用户角度

  • 主动跟踪用户的行程,确保一切顺利(发送提醒,与酒店确认);
  • 目的地指南(事件、当地交通、天气、衣服、提示、要做的事情等);
  • 当地餐厅/购物券/优惠等。

3. 特殊情况

  • 航班延误或取消;
  • 紧急的医疗情况;
  • 信用卡透支。

1. 旅程与归来

旅途中的回忆和收获。

  • 在脸书/ Instagram / Twitter / WhatsApp 上共享更新和照片;
  • 与家人和朋友分享经验;
  • 回忆当地的美食;
  • 经验与旅游前的期望不相符,过度炒作;
  • 航班和酒店服务;
  • 评论旅程的整体情况。

2. 用户角度

  • 提醒携带基本药物;
  • 帮助预支旅行预算;
  • 关于外汇转换;
  • 当地医疗建议、

3. 特殊情况

  • 剩下的钱如何兑换;(如国外游)
  • 退款;
  • 行李丢失。

通过以上的拆解说明,可见体验路径对于功能设计的重要性,各位设计师一定不要主观认为「你就是用户」,而是结合用户需求进行分析,设计出更合理的功能。

小结

设计师要不断完善用户的体验路径模式,因为它会一直发展,将产品优化的越来越好,而不仅仅是停留在:「这个产品我做完了」的想法上。

所以为什么说用户体验是一种过程?因为它始终在不断变化,所以作为设计师也要持续的自我增值,才能跟上产品迭代、时代发展的步伐。

用户体验是一种过程,而不是结果

渐变质感技法入门指南:对比用色

雪涛

渐变这一视觉趋势,在最近几年里可谓如日中天。很多平平淡淡的设计,将平涂改为渐变,立刻就能增加醒目感。

  • 虽说渐变是一个有效的元素,但为什么我们的渐变,还是和大神们的渐变有区别?
  • 我们应该怎样做出渐变的质感?
  • 为什么说用色才是渐变的精髓?

今天我们就来和大家聊聊渐变这个话题,深入了解我们似乎以为自己懂了的渐变,我们将和大家一起分析渐变配色中,利用色彩不同特性之间的对比来用色,以及一些简单的操作小技巧。比如快速生成一个色轮,以及简单的利用混合工具来配出渐变配色的色彩。

渐变是在色彩上的一个相对缓慢的过渡,我们的视觉会随着这个渐变的过渡而产生一种流动感,而这种流动感全凭在色彩上发生的种种变化。是的,我们的重点来了,就是这个变化,需要我们今天深入去加以了解。

谈到变化,我们自然会想到这个变化的范围。如果拿出我们的色轮来看,我们就会发现色轮上的变化范围有大有小,当两个色彩距离较近时,我们可以说他们是邻近色,这时难以发现他们的区别,直至我们的肉眼无法分辨。这时候可以说变化范围较小。

当两个色彩距离180,在色轮上呈相对,我们可以说这时的色彩变化是最大的,于是也就产生了最强烈的对比。很多撞色的情况,也是在这种对比下发生的。我们通常会把这对颜色称为互补色。

当然,实际的情况比这要稍微复杂一点,我们一起来看下。

一、色相对比

刚刚大家可以发现,这个色轮上的色彩的一个特点是什么?只有色相的变化。没错,我们平时也已经习惯了,只用色相来区分色彩。所以,今天要讲的第一个对比,也就是色相的对比。

色相的对比,在色轮上就能很直观的表现。例如红色和黄色这一段,截取过来以后,就变为了红 – 黄渐变。利用色环就能很轻松的实现色相的渐变。距离越远,渐变色的对比也就越大,互补色之间的对比达到了极值,比如红 – 蓝渐变的对比就大过红 – 黄渐变。

这里首先教给大家一个快速生成色轮的小技巧,这个技巧不需要利用网上的图片或工具。现做现用,很方便。

1. 小技巧:快速生成色轮

STEP 01

让我们先用这个自定义形状工具画出一个圆环。

STEP 02

然后在圆环里填充色彩,这里我们运用一个渐变叠加。

渐变叠加的叠加方式为角度渐变,渐变色这里选用「色谱」,没有找到这个渐变的小伙伴记得要追加色谱。

这时做出的色轮,在色彩上饱和度达到最大值。因此也能表现最强烈的色相对比。目前比较流行的渐变色是明度偏高,饱和度居中的渐变,也像这样的糖果色,因此这时大家可以利用调整图层「色相/饱和度」来增加明度或降低饱和度。

2. 高能提醒:别被参数骗了

可能很容易被初学者忽略的是,我们在 PS 里的色彩(HSB)这个参数里看下,一般来说H-色相,S-饱和度,B-明度,这里的情况和我们在色彩学里学到的 HSB 有点小差异。

色相这里没有问题,但是饱和度和明度,尤其是饱和度上面,大家可以看到一般来说饱和度时,色彩是慢慢失去色度,也就是呈现灰色,但是在软件里把 S 这个值调到最小呈现出是白色;还有另一个属性:明度,最大的明度,应该是白色,在软件里的 B 这个参数调到最高时,并不是白色。

在 PS 里,只有把色彩放到「色相/饱和度」这个工具里,才会看到和我们书里的概念表现一致的特性。

3. 工具不同,渐变也就不同

运用色环配出的渐变色和直接利用渐变工具配出的渐变色还有差别的,最重要是体现在颜色的过渡上。如果是用渐变工具选择了左边绿色,右边紫色的渐变色,在中间出现的过渡色就表现出一种发灰的色彩。如果所选用的两端的颜色是在色环上距离有定的角度,就会出现这种灰色。这是因为两种颜色彼此混合所造成的。有些情况下,确实是需要这样过渡的,这就直接用渐变工具来做渐变。

另外一个情况就是不希望色彩发灰,这时需要用到色环,在色环上根据所需要的渐变过渡来选取不同的色彩配置。

可以看出来,尽管没有饱和度、明度的变化,色彩仍然是彼此之间所表现的特质都很独特,所以基本上利用色相对比,就能配出非常优秀的渐变作品。

一般来说,渐变本身就足够吸引人,有渐变参与的情况下,我个人的建议是色彩不要太多,尽量少元素,整体风格倾向极简,这时最能发挥渐变色这种特质的魅力。

这个案例中的渐变过渡,中间的这个红色和蓝色的渐变就是用渐变工具做出来的,两边的渐变都是取用了色环上的渐变过渡,可以看到色彩上两边的渐变中的色相更多,更饱满,饱和度和明度都没有丧失,而中间的渐变在红蓝之间的过渡出现了饱和度较低的紫灰色。

二、色温对比

色温是什么?色温更多是色彩对人的主观的心理因素的影响。虽说是主观,但是大家的整体倾向还是比较类同。比如蓝色清凉,红色温暖。

所以,把色环上的色彩根据主观温度进行一个划分,就有了我们经常听说的暖色和冷色。冷暖色虽然无法用属性值来进行衡量,但是却在色彩中发挥不小的作用。

1. 获得平衡感

渐变中加入色温这个属性,这个游戏就会更好玩。一般来说,为了达到配色平衡,我们的配色中需要冷暖进行平衡,这里的平衡并非是1:1的严格配比,而是彼此渗透,双方根据位置、面积、形状等等元素的共同参与,共同实现一个版面的平衡。当然,这不是件容易的事,但这是我们配色中的方向之一。

回到我们的色温对比,要体现在渐变中,就是要有冷色和暖色的参与。一般来说,在比较简单的过渡性双色渐变里,一个冷色一个暖色是非常常见的表达方式。还是拿刚刚那个案例来看,左边两个配色就是冷暖的过渡,而右边的配色相对来说偏暖,当然相比之下,洋红色还是比橙色会更偏冷一些。

2. 绿色和紫色:冷暖不定

冷暖色的对比都是在同一个版面内的一个动态对比,尤其对于绿色和紫色这个范围内的色彩来说的话更是如此。比如绿色,在和蓝色搭配的时候,由于蓝色是绝对的冷色,所以绿色就表现出暖色的特质;而绿色如果和橙色搭配,橙色又是绝对的暖色,所以绿色又表现出冷色的特性。紫色也是同样的情况,和蓝色搭配它偏向暖色,而和橙色搭配时它又是偏冷的。

用起来其实也很简单,如果你的配色中发现整体感觉偏冷,就增加暖色。如果太暖,那就增加冷色调。如果整体的配色看不出哪里不对劲,但总觉得色彩有点奇怪,就先看看色温是不是实现了平衡。

三、明度对比


再增加一个属性,渐变这个游戏又增加难度了,明度这个属性表现为颜色的明暗程度,明度引入了另一个性质:光。其实我们平时看到的色彩就是因为有了光,才有了颜色。但是一般来说我们会把光简单归属于「发光」这个行列。事实上,由于光线的折射,我们视网膜接受到光的波长,才产生了色彩。那么光线的强烈与否,就会影响这个颜色的表现。

明度的对比,是所有颜色属性当中,最容易被觉察到的。我们可以简单来看,我们的素描就是利用明暗来表现物体,黑白灰能毫不费力表现现实中光的感觉。所以在配色中,有了明暗对比,是一个很好表现色彩感染力的元素。

1. 表现立体感

即使明度相同,我们的色彩明暗程度(从主观感受来说),也是不一样的。比如相同明度的黄绿色和紫色,在明暗表现上,黄绿色明显更亮,更靠前。如果让这两个色彩之间发生渐变关系,这样的表现就很像左上角有光渗入进这块平面中。如果进一步降低的紫色的明度,这时,明度的对比就更为强烈。这时很适合表现出某种立体感。

当然,我们的色彩并非一定要有立体感才能生动,有些配色大师,会刻意去弱化立体感,所以会尽量避免明暗的对比。但是,作为初学者,一定要知道明暗对比,懂得在适当的情况下拿来使用。

尤其是在同色系或者邻近色色系的渐变里,明度对比是一个增加立体表现力的方式。有些时候,平涂的方式看起来呆板单调,利用同色系渐变就能很好解决这个问题。两个色彩之间可以非常近似,即便如此,还是和平涂有差别。有了光的感觉就要随时注意受光的方向,在整个画面里保持全局光,所谓全局光,换个简单的说法就是大家都在同一光源照射下。

我们可以再和大家演示一下,例如这里有两个圆,这两个圆都是填充为紫 – 绿渐变,这时的紫和绿是同样的明度。这里注意,就算是同样明度,两个颜色在直观的感觉上,明暗程度也是有差别的,比如绿色会稍微亮一点。这时打开渐变工具,在后边的绿色这一端色彩,将它的明度调高,这时大家会发现,右边这个圆就变为了一个球体。

2. 从黑白灰开始

明度渐变还是增加作品细腻程度的一个方法,我们和大神的差距,也许真有可能就是一处小小的明暗关系的不同。别忘了,明度对比对整体效果所发生的影响是最大的,但也是我们最容易忽略的,有时候一旦有了颜色,我们的焦点都在色调和色度上。但其实所有的配色,比如我们做设计,一开始总是从黑白灰开始做起,先配置好明度,然后再开始根据明度来选择用色。

有了对明度的把握,我想我们对色彩的把握才能上升到新的层次,否则,我们在一堆色彩里,很容易迷失方向。

四、色度对比

这里说的色度,也被叫饱和度,有的书上也叫彩度,拿我们日常用语讲就是鲜艳程度。色度对比越强,尤其是色轮上的互补色,在他们色度都达到最大时,会撞出最大的火花,产生最强烈的效果。

有时候这种高彩度的配色用在动感很强的设计中,看上去活力四射。但这种互补色之间也会发生彼此互斥的关系,造成整个版面的凌乱,所以要非常谨慎的对待色度。

空气透视 – 空间感的塑造

色度对比最常见的就是用在空间感的塑造上,大家都知道,色度越高,在视觉上会制造一种「更近」的效果。

举例来说吧,我们这里可以画一个梯形,这个梯形用渐变来填色。如果用单色,大家一定感觉不出空间感。如果我们采用渐变,使得同一个颜色,比如紫红色,在这个梯形上,由上到下做一个渐变,这个渐变中两端的色彩,在色度上有差距。那这时就能体现出一个慢慢延伸到远方的感觉。甚至还能有种暴露在空气中,被空气弱化的视觉效果。这个也运用在插画中,也被叫做空气透视。

色彩浓度的强弱对比,和其他的色彩的属性相结合,配色就变得更复杂。但是通常来说,配色并没有标准答案。所以导致很多人在配色的时候,都是依靠一种感觉在操作。其实感觉的确是一个最直接的选色方法之一,但是并不是唯一的方式。大家如果对色彩有更深入的了解以后,就会慢慢理解感觉层面下的更有趣的东西。这个也是经验积累。

在饱和度这一环,PS 里如果觉得不是很靠谱,就像我之前和大家提过,那么大家可以进入到 AI 里,利用 AI 的混合工具来生成不同的色阶。例如我们在这里用一个高饱和度的红色和一个低饱和度的蓝色相搭配。应该说,这两端的色彩既有饱和度的对比,也有色调和明度的对比,还有色温的对比,应该说是对比是非常丰富的。所以,这一条矩形,用在背景色上,我个人感觉不是太合适。如果是做成一些特殊的效果,还是不错,比如设计字体的时候做笔画造型,或者做装饰的线条。

最后一个我们要略提一下,就是透明度的对比。尽管透明度不是标准的颜色属性中的一种,但是在我们软件操作当中,透明度是相当实用的。渐变的色彩,我们可以改变其中一个色彩的透明度,比如降低到0,那么一端的色彩消失不见,这样最容易造成一种浓雾的效果。

这个插画,是在设计我自己的个人网站时做的,其中这些背景中的立方体的某些块面,就是采用某一端降低透明度的效果。有一种在云端的感觉。

五、两个渐变配色网站推荐

1. Grabient

网站链接:https://www.grabient.com/

这个网站的工具很好用,我当时在群里推荐的时候,有人问我说这个和 PS 里的渐变工具有什么区别。我在刚刚其实已经和大家讲过,PS里的颜色的设置是有一些和我们的色彩理论不太符合的地方,但是这个渐变工具就完全符合我们对色彩属性的了解。所以在这里可以进行调试,再确定渐变的值,最后放到 PS 里用。

2. WebGradients

网站链接:https://webgradients.com/

这个网站,我相信大家应该不会陌生,好多地方都推荐过,这个渐变色是可以作为背景色来使用的。大家可以看到这上面大部分的渐变的明度都比较高,比较浅。过渡也非常细腻。这一点大家可以拿来当作自己配色的参考。

这两个工具以外,还有很多其他好用的工具我就不一一演示了,这是我用的比较多,而且觉得还挺实用的两个网站。

写在最后

其实色彩和音乐的感觉是最接近的,每个色彩对应每个音调,那经过组合以后就能表现出一定的情感。通常你也很难说,哪一首音乐是最好听的,因为每个人喜欢的音乐风格都不一样。但是总有那么一些歌是广为流传成为经典的。

所以要学会渐变,首先应该是了解色彩。我们不可能通过一篇文章就能完成学习,肯定是希望以这篇文章作为一个启发点,大家可以从中找到自己的学习的方向。

图标设计五维自检法

雪涛

图标是界面设计中最重要的元素之一,也是我们 UI设计师必备的技能,日常工作中我们经常会接到含有图标设计、优化的需求。但到底什么样的图标才算是优秀的?也许很多设计师并没有太完整的评判体系,只是凭感觉,这样就会造成输出效果不稳定、耗时太长等不良的后果。

所以借着这次机会我梳理了一套图标设计自检的评判体系,一共五个维度,大纲如下:

  • 识别
  • 性格
  • 品牌
  • 饱满
  • 细节

一、识别

评判事物的价值在于它的用途是什么。

图标的用途是帮助用户理解信息,所以「识别性」就是图标最重要、最底层的价值,如果你设计一个图标,用户看不懂,即使视觉再美观,也是无根之木,没有任何价值可言。

识别性可以分为两个方面,一是含义识别,二是视觉识别。

先说含义识别,简单来说就是你的图标能不能被理解,当然并不是设计师自己能理解就可以了,而是需要用户来决定。这里和大家分享一个我判断图标是否易识别的方法——内部用户调研法,说白了就是随机问一些团队内部人员,最好多问几种岗位,这样得来的结果更加可靠,案例如下。

我在改版「话题」这个图标的时候,想到了微博的「#」,于是把「#」和气泡框结合到了一起,如下图:

这时我找来10个内部人员进行测试,只有3个能看懂图标的意思(这3个人都是平时经常玩微博的),在这样的数据之下,不用犹豫,这个方案一定是不可取的。

在进行调研时,最少要保证80%的人能看懂,才证明你的方案是可行的。

再来说视觉识别,顾名思义这一点已经与图标含义无关,而是视觉层面的问题,例如大小、底色等等阻碍用户识别的因素。

这里引入一个国外的测试结果,是我在一位前辈的文章中看到的,测验包括一组四种样式的图标:白底黑色实心图标,白底黑色空心图标,黑底白色实心图标,黑底白色空心图标,经过10天的时间,1260名参与者总共完成了超过25000次图标的认知测试。将得出的数据分成四组进行双向方差分析,在相同的统计条件下,选择黑底白色空心图标要比其他三种组合的时间慢0.17秒,也就是说这种图标的信息表达能力会少弱,如下图:

所以在这样的理论与数据的支撑下,我对部分图标进行了如下改版:

有底色的图标全部从线性改成面性,如改不成面性(例如时钟)需要适当加粗描边,目的就是提高视觉识别性。

切记,识别性是图标最重要的价值,尤其是在没有文字说明的情况下,一定不要让用户产生困惑,不然你就是在消耗用户体验,而不是给用户体验赋能!

二、性格

试想如果一个人没有性格,那这个人就是没有灵魂的,图标也一样,没有性格即没有灵魂。

那如何打造属于自己的性格呢,我们需要从用户和品牌出发,例如腾讯动漫的用户都是动漫、cosplay爱好者,给人一种又萌又可爱的感觉,所以我们需要让图标尽量圆润一些:

像上图2号图标一样,增大圆角,使图标看起来更加圆润可爱。

基于这样的用户人群,我们还将原有一些单色图标,改成下面这样的彩色图标:

目的就是让图标可爱活泼的性格更加明显。

三、品牌

品牌性是我们经常提到的纬度,常用的提取品牌的基因也有很多,颜色、图形、吉祥物等等,这里举两个例子,一个是具象的品牌基因——吉祥物:

我们有自己的品牌吉祥物——黑子,所以在图标设计时可以将其运用起来,如下图就是结合黑子形象设计出来的「逗币」图标:

再举个比较抽象的例子,从 logo 当中提取品牌基因。

由于 logo 的字体笔画比较粗,整体给人一种厚重饱满的感觉:

因此我们可以在品牌logo 中提取「粗胖饱满」的品牌基因,在这样的背景下就不用再纠结图标使用2px描边还是3px的描边了:

我们可以很确定的使用3px描边,因为它既符合品牌基因又符合用户性格(肥胖圆润显得可爱)。

四、饱满

很多时候我们做出来的图标不够精致,其中一个很大的原因就是不够饱满。

如何判断图标是否饱满呢?我常用的衡量方法就是在图标上面加一个矩形,看图标的正形的面积是否还可以增加。

例如下图,蓝色是正形,红色是负形:

很明显蓝色的正形面积是可以增加的,例如:

这就是在增加图标的饱满度,我也是按照这个思路来改版图标饱满度的。

举个真实的例子,我们原版的续看图标是上下结构,而上面部分的图形太窄,导致左上角、右上角的空白太多(也就是绿色部分太多),没有撑满矩形,如下图:

于是我对图标的结构进行了调整,尽可能的减少绿色部分,最后达到了下图这样的效果:

最后提醒大家,对于图标的饱满度,还需要结合整套图标的视觉效果来进行调试,虽然上面这个方法可以解决大部分图标的饱满问题,但还是要具体场景具体分析,切记,我们的目标是让整套图标看起来和谐、统一、精致!

五、细节

细节也包含很多方面,例如:

1. 角度是否一致或者遵循某种规律

我们定制的角度规范是30度的倍数,这样可以很大程度的提高图标统一性。

2. 描边末端的细节处理

下图就是一个错误的例子,一个描边末端是直角,一个又是圆角:

我们在处理这样的细节时,一定要保证统一性。

3. 像素对齐问题

大家会觉得只要把一个尺寸的图标做好像素对齐,导出其他倍数的图标就是ok的,其实这样的想法是不对的,因为在导出0.5或1.5倍数关系的时候,像素很容易再次产生不对齐的情况。

举个例子,我们做图标是以2倍图为基础,然后统一导出3倍图,那这时候3倍图就是2倍图的1.5倍,导出的时候就发生了下面这样的情况:

虽然2倍图是像素对齐的,但3倍图却没有对齐,如果设计师没有仔细检查切图,就会发生线上图标发虚的情况,所以我们在输出切图时,一定要仔细核查,发现错误及时调整,免得造成不良影响。

除了以上这些,还有视觉大小、圆角、描边粗细是否统一的细节,当然,这些都比较容易理解,就不一一举例说明了,大家在做图标设计的时候一定要多多注意。

总结

本次梳理的五纬自检法可以用在图标设计的自我检查、改版优化等多个方面,或许它并不全面,但一定具有参考价值,希望能给大家带来启发和灵感,我们也会更加努力,争取做出更好的作品和教程与在设计道路上的你们分享交流。

设计师必须掌握的交互知识

雪涛

交互设计是什么?
交互设计 Interaction Design 也被成为IXD。交互设计建立起了人与计算机便捷沟通的通道,它的目标是创造可用性和用户体验俱佳的产品。作为UI设计师,我们在工作之中经常会对接交互设计师和产品经理,他们具有丰富的交互知识和经验。那是不是我们作为UI设计师,就只需要专心做好视觉层面的工作而不需要了解交互设计了呢?当然不是,在视觉设计层面更多地考虑布局和交互原则才可以让我们的界面更友好,视觉设计师是交互设计中非常重要的角色。
用户体验
在工作中经常听到UED(用户体验设计)和UCD(以用户为中心的设计),可见互联网行业非常重视用户体验,而用户体验绝不仅仅是要样子好看。有些设计师只关注视觉层面,认为产品战略等用户体验维度和自己的设计无关,那么就会和产品经理等角色处于不同的世界了。“他们为什么要我这么改?”、“为什么这里文字要浅一点?”有时不理解对方的思考角度就会造成争执。用户体验(User Experience)是用户使用产品的心理和感受,用户体验体现了产品设计以人为本的设计精神。其实早在互联网出现之前就有“顾客先点鸡就先有鸡”、“顾客就是上帝”这种说法,并且西方很多大公司如施乐、联合利华等大公司早在互联网行业出现之前就已经开始进行研究用户体验了,可见用户体验对所有产品是多么的重要。但是让人摸不着头脑的是,用户体验有时非常地主观:因为用户体验背后影响用户的因素有人的喜好、情感、印象、心理反应等,有些人明明有摩拜却要走很远找OFO,也有人只吃肯德基而不吃麦当劳。这些选择并不是优胜劣汰,而是有背后的原因的。要想让我们的产品被人喜欢,我们需要研究用户。
Image title
用户研究七种方法
但用户可能是几百万人呢!我们面对这样抽象的群体然后告诉自己要以他们为中心设计这多么抽象啊。这么多用户甚至有时用户自己的声音也是矛盾的。我们到底怎么样了解用户的心声呢?
用户画像
根据产品的调性和用户群体,用户研究团队可以设计出一个用户的模型,这种研究的方式被称为用户画像。用户画像是由带有特征的标签组成的,通过这个标签我们可以更好地理解谁在使用我们的产品。用户画像建立后,每个功能可以完成自己的用户故事:用户在什么场景下需要这个功能。这样,我们所设计的功能就会更接近用户实际的需要。比如我们现在要设计一个女装购物应用,那么我们可以做这个用户画像:小美,在北京国贸CBD上班,21岁,收入8000,喜欢淘宝购物和电视购物。使用我们产品的目的是为了寻找正品时尚大牌服装进行网购。小美因为刚毕业所以一方面喜欢大牌一方面又资金短缺(启发:我们的产品是不是要解决这两个痛点?)小美是时尚OL,审美很高,不喜欢俗气的设计。(启发:界面设计是否考虑不要使用粉粉嫩嫩的颜色而使用大牌的黑白色?)。看,即使小美并不真实存在,但是她指引了我们的产品设计。接下来,我们还可以给小美增加一个头像,在做设计时我们想象这个人就是真实存在的用户,她会对我们的设计有什么看法。当我们完成用户画像之后,还可以接着设计用户故事:小美经常需要在工作场合穿符合工作气质的衣服,也需要在约会时有晚礼服之类的服装,可是小美的收入有限,她眼光较高但是对价格过高的服装无法承担,她使用我们的APP就是为了寻找正品且价格适中的服装。那么,小美在哪里用我们的APP呢?这就要为小美继续设计一个用户使用场景了:小美在开会时可能会打开看看、在地铁里也会浏览、在清晨打开衣柜时也会浏览。基本来说是碎片时间,而且是有着装需求时。(启发:我们是不是需要把字号调大以适应地铁里颠簸的阅读环境?我们是不是需要设计省流量模式免得刚刚毕业的小美花一笔巨大的流量资费?)
Image title
用户画像
用户访谈
邀约用户来回答产品的相关问题,并记录作出后续分析。用户访谈有三种形式:结构式访谈(根据之前写好的问题结构)、半结构式访谈(一半根据问题一半讨论)、开放式访谈(较为深入地和用户交流,双方都有主动权来探讨)。用户访谈设置时要注意:用户不可以是互联网从业的专业人员、不可以提出诱导性问题、不要使用专业术语。用户访谈适合产品开发的全部过程。
问卷调查
可分为纸质调查问卷、网络问卷调查。依据产品列出需要了解的问题,制成文档让用户回答。问卷调查是一种成本比较低的用户调查方法。问卷调查适合产品策划初期对目标人群的投放,另外注意一个问题最好收集10个问卷,也就是如果你有10个问题那么至少要收集100个问卷才是有效的。要知道不是所有人都愿意耐心地填写问卷,很可能敷衍了事的回答会扰乱我们的判断。
焦点小组
焦点小组一般有6-12人组成,由一名专业人士主持,依照访谈提纲引导小组成员各抒己见,并记录分析。并且在焦点小组的房间里会有一扇单向玻璃窗,用户是看不到里面有谁的。而在里面坐着的通常是开发团队,他们可以清晰地看到用户是如何吐槽他们的产品的,但是他们没有权利直接和用户进行解释。焦点小组需要特殊的房间和设备,主持人也需要训练有素,焦点小组特别能够分析出用户在没有我们说明的情况下如何使用我们的产品和对产品的不满。
可用性测试
通过筛选让不同用户群来对产品进行操作,同时观察人员在旁边观察并记录,可用性测试的要求是用户不可以是互联网从业者而应该是真实产品的用户群体。但是可用性测试一般要有一个可用的软件版本或者原型供人测试才可以,在软件开发的前期不适合用这个方法。
眼动测试
使用特殊的设备眼动仪来追踪用户使用产品时眼睛聚焦在哪里,盲区是哪里。比如一个网站通过眼动测试可以知道用户的视觉会自动屏蔽网站的常见广告位置,这时如果希望提高广告的点击,就需要把广告位放置于用户聚焦时间较长的位置。眼动测试的设备比较专业,通常在小公司较难开展。
用户反馈和大数据分析
根据市场提供的反馈和数据得出客观的判断和合理的推测。用户反馈也是用户研究的一个重点,用户反馈主要是用户通过产品的反馈入口主动向开发者提出的意见。
有了这些方法,我们就能更好地了解用户和接近用户了。但是要注意,用户研究也是有陷阱的。比如:填写问卷和参与调研的用户可能并不是核心用户;提交用户反馈的用户之外可能有更多沉默的用户等。总之用户研究是一个必要的手段,但是仍然需要产品团队来对产品的方向做出决断。
用户如何使用产品
使用场景
刚才我们介绍了用户使用的场景是根据产品的功能和平台决定的。电脑的使用场景是正襟危坐,手持鼠标。而移动端则是随时随地使用,我们的用户可能在地铁里、在厕所里、在吃饭时、在上课中怕老师看到把手机藏在桌洞里、在工作中领导巡视后偷偷瞄、在辗转反侧睡不着的时候没有开灯地浏览等。这时我们要为用户考虑,如果他们在使用我们产品的各种场景中有什么需要,是不是需要省流量、是不是需要调整字号、是不是需要过滤蓝光、是不是需要护眼模式、是不是不方便看视频、是不是需要缓存视频、是不是界面目前单手不太友好、是不是扫二维码时需要个手电功能、是不是需要语音提醒、是不是需要清除访问记录。一个不考虑用户使用场景的产品一定是会遭到吐槽的。很久之前我听同事在吃饭时抱怨过“大爷的,也不搞个提示,早晨在地铁里用4G看流量以为是在家用WIFI,结果看了一集《甄嬛传》花了80块钱”、“哎?你是不是早晨开会时玩游戏了?你的比分都给我们推送了哈哈哈”。
Image title
我的产品中的用户使用场景表格
操作手势
网页设计所处的电脑端目前主要还是依靠鼠标点击来操作。鼠标点击的最小单位甚至可以是一像素。而移动端不太一样,移动端设备中我们使用手指来操作界面。一般来说,手指点触区域最小尺寸为7×7 mm,拇指最小尺寸为9×9 mm。也就是在我们@2x设计中为88px(或44pt)。这个神奇地88PX在移动端应用很广泛:很多表单单项的高度是88ox、导航栏高度也是88px等等。那您可能会说,也不对吧,有些界面上的图标看上去没有88px啊。是的,但是那只是视觉,我们可以通过增加图标点击区域的方式(比如给60像素大小的图标左右增加22像素的透明区域)来让图标更好点击。千万在设计时不要把操作区域放得特别近,可以把所有点击区域用88px标记看是否有重叠的情况,避免点击一个图标时误点另一个图标。除了点击区域,移动端还可以利用各种手势来进行各种操作的设计。主要的手势有:
Image title
单点触碰(Tap):点击用来选择一个元素,类似鼠标的左键,是最常用的手势。
拖曳(Drag):点击某个元素然后拖拽进行移动,类似现实生活中移动物体的感觉。
快速拖曳(Flick)速度很快的拖曳操作。
滑动(Swipe):水平或垂直方向的滑动,比如翻阅相册和电子书翻阅的手势。
双击(Double-Click):快速点击一个物体,通常会在放大、缩小操作中使用。
捏(Pinch):两根手指头向内捏,捏的动作会使物体变得更小,通常在缩小操作中使用。网易新闻客户端中正文页面即可通过捏的动作来缩小字号。
伸展(Stretch):两根手指向外推,现实中这种操作会使物体向外拉伸,元素可能会变得更大,通常会在放大操作中使用。网易新闻客户端中正文页面可以通过伸展放大字号。
长按(Touch and hold):手指点击并按住会激发另一个操作。比如朋友圈的相机图标长按可只发文字。但是注意,长按不是一个常态操作,所以一般不太建议用户进行该操作。但长按操作又是有需要的,所以会把删除、只发文字状态等操作隐藏其中。
除了用户使用场景、点击区域、手势,那么还有一个影响我们设计的使用情况,就是用户怎么拿手机很重要。用户可以:单手拿手机、双手拿手机、直向拿手机、横向拿手机。我们需要考虑这些可能发生的特征进行手势互动的规划与设计。比如OFO为了让单手(说不定是左手还是右手)操作方便,主要按钮在下方并且做的很大,左右手都可以轻松点击。而微信的很多按钮也都是大长条,方便左右手的触发。横屏使用场景一般是游戏、视频等,所以一般的APP并不支持横屏操作(微信、支付宝、微博均不支持横屏操作),
Image title
格式塔:我们如何认知?
我们发现有些用户在使用设计好的界面时找不到一些重要的功能按钮。“奇怪,分享功能不就在更多按钮里面吗?”、“用户怎么连这个也找不到啊”你也许会说。我们要来了解一下用户是如何认知我们设计好的界面的。在初高中考试的时候您一定见过完形填空这种格式吧,“格式塔”源自德语“Gestalt”,意即“整体”、“完形”的意思。格式塔心理学认为,我们在观察的时候会自动脑补出一些逻辑和含义来,会让观察对象变成一个完整的、整体的、常见的形状。
"研表究明,汉字的序顺并不定一能影阅响读,比如当你完看这句话后之,才发这现里的字全是都乱的。"研究格式塔心理学对我们做互联网产品和设计有什么用呢?掌握格式塔的理论我们就可以让用户按照我们安排的“剧本”来交互和操作界面了。我们可以让用户比较容易地根据固定位置找到提交按钮、我们也可以让用户不经过太多思考在杀毒软件中点击杀毒按钮等。格式塔心理学对于我们做好表现层是非常有利的。格式塔原理主要有格式塔五大律和格式塔三大记忆律两个知识点。
接近律 law of proximity
格式塔心理学认为,人们认知事物的时候,会依靠它们的距离来判断它们之间的关系。两个元素越近就说明它们之间关系更强。但是接近也是有对比的,在复杂的设计中,我们要一边考虑它们之间内部的逻辑关系一边来排版。
Image title
A组和B组因为接近律而产生不同地阅读顺序
Image title
距离更近的信息暗示了他们有内在的逻辑关系
相似律law of similarity
认知事物时,刺激要素(比如大小、色彩、形状等要素)相似的元素我们倾向于把它们联合在一起或者认为它们是一个种类。比如,我们能轻易的分辨出拨号页面中拨号键和按键群的区别。
Image title
相似的元素暗示了他们属于一个种类
Image title
类似外形的单元会被我们人脑默认为同一属类
闭合律law of closure
就算没有外形的约束,我们也会自动把图形脑补完全。比如半个形状或者有缺口的形状我们不会认为是一条线,而是一个完整的形状。闭合是指一种完形的认知规律。
Image title
左边的图中我们会认为是圆形有缺口而不是一条曲线
右边的图形中我们会认为是圆形被三条线截断了而不是四个图形
Image title
界面设计中露出一半内容,闭合律让我们感知右边还隐藏着更多内容
连续律law of continuity
在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线,使曲线继续成为曲线,也就是视觉的惯性。利用连续律我们可以让用户操作界面时不经过思考就点击一个固定的位置。
Image title
深谙连续律的流氓软件
成员特性律law of membership character
如果我们有很多同样的按钮,如何让某个更重要的按钮突出但是仍然让用户感知还是按钮呢?那就要用到成员特性律了。成员特性律赋予了集体中某一个元素特殊的一些刺激元素从而突出它。
Image title
独特的外形暗示了它与别的元素有不同的功能
Image title
拨号页面中拨号键与微博发布微博图标都与其他按钮不同
记忆律:我们如何记忆?
接着格式塔五大律还有专门研究用户记忆的格式塔记忆律。格式塔心理学家沃尔夫对遗忘问题所作的经典性研究得出了格式塔的三大记忆律。沃尔夫实验时要求实验体观看样本图形并记住它们,然后在不同的时间里根据记忆把它们画出来。结果发现实验体在不同的间隔时间画出来的图像都有不同。有时再现的图画比原来的图画更简单更有规则,有时原来图画中显著的细节在再现时被更加突出了。还有的比原来的图像更像某些别的我们都很熟悉的图案了。沃尔夫把这三种记忆规律称之为格式塔三大记忆律:“水平化”、“尖锐化”、“常态化”。
Image title哪个图形才是正确的?(图片来源:网络)
水平化leveling
水平化是指在记忆中我们趋向于减少知觉图形小的不规则部分使其对称;或趋向于减少知觉图形中的具体细节。
尖锐化sharpening
尖锐化是在记忆中与水平化过程伴随而行的。尖锐化是指在记忆中,人们往往强调知觉图形的某些特征而忽视其它具体细节的过程。在有些心理学家看来,人类记忆的特征之一,就是客体中最明显的特征在再现过程中往往被夸大了。
常态化normalizing
常态化是指人们在记忆中,往往根据自己已有的记忆痕迹对知觉图形加以修改,即一般会趋向于按照自己认为它似乎应该是什么样子来加以修改的。
Image title
情感化设计是什么?
了解格式塔会让我们把界面做得符合用户的心理预期,让用户能够明显地找到他应该找到的操作。可是用户好像还是不开心,因为用户觉得界面不好看。您是不是也会陷入这样的矛盾:可用性重要还是美感更重要?怎么样能够让我们设计的界面又好用还漂亮呢?情感化设计由唐纳德·A·诺曼博士提出,指的是设计中情感在所处于的重要地位以及如何让用户把情感投射在产品上来解决可用性与美感的矛盾。情感化设计是在抓住用户注意、诱发情绪反应以提高执行行为的可能性的设计。比如红色且巨大的购买按钮能够无意识地抓住用户的注意、可爱萌萌的卡通可以缓解用户网络不好时的焦虑等等。情感化设计有三个水平,它们是递进关系,分别是:本能水平(重视设计外形)、行为水平设计(重视使用的乐趣和效率)、反思水平设计(重视自我形象、个人满意、记忆)。
Image title
本能水平
我们都是视觉动物,对外形的观察和理解是出于我们本能的。本能水平的设计就是刺激用户的感官体验,让别人注意到我们的设计。这个阶段的设计会更加关注外形的视觉效果。比如各大电商网站的专题页面设计,更加注重抓眼球和外观的刺激。
行为水平
行为水平是功能性产品需要注重的。一个产品是否达到了行为水平,要看它是否能有效地完成任务,是否是一种有乐趣的操作体验。优秀行为水平设计的四个方面:功能,易懂性,可用性和物理感觉。比如好用的记事本APP等。
反思水平
反思水平的设计与用户长期感受有关,这种水平的设计建立了品牌感和用户的情感投射。反思水平设计是产品和用户之间情感的纽带,通过互动给用户自我形象、满意度、记忆等体验,让用户形成对品牌的认知,培养对品牌的忠诚度。马洛斯理论把人的需求分成生理需求、安全需求、社交需求、尊重需求和自我实现需求五个层次。我认为反思水平的设计就是提供给用户归属感、尊重、自我实现。比如Google每逢节日就会有一些符合节日化的设计、网易严选的空状态也会有品牌感的体现等。
Image title
淘宝空状态中的情感化设计
情感化设计的表达
Image title
画面 画面是情感化设计的重点,让错误页面或者空状态都成为一幅可爱的插画。
应景 让用户在我们的产品中体验到一些和真实世界一样的氛围变化。
游戏感 没有人喜欢做任务。试着让用户完成的任务变成游戏吧。比如每次登陆加金币,有足够的金币就可以获得什么称号。
冲突 冲突非常能够勾起人的情绪,营造一个竞争或者对抗的氛围,让用户感觉自己置身在一个比赛或者格斗中一样。
讲故事 给产品和无聊的图像一些故事内容,毕竟没有人讨厌讲故事。
隐喻 用一些大家理解,随处可见的事物表达一些无趣、生涩的概念。
互动 给用户和其他用户多制造互动机会,比如排行榜、推荐等,不要让用户感觉孤独。
交互八原则
当我们了解了产品五要素(产品设计的维度问题)、格式塔心理学(用户如何认知的问题)、情感化设计(如何让用户满意的问题)后,我还要给您介绍一大堆地交互原则。这些交互原则会帮助我们设计出更好用的界面,当然也可以帮助我们讲出这样设计的原因。不拿出一些理论怎么能够让别人信服你的设计,对不对?
费茨定律(Fitts’Law)
费茨定律指的是:光标到达一个目标的时间,与当前光标所在的位置和目标位置的距离(D)和目标大小(S)有关。它的数学公式是:时间 T = a + b log2(D/S+1)。这个定律是由保罗.菲茨博士(Paul M. Fitts)提出的所以得名。菲茨定律在很多领域都得到了应用,特别是在互联网设计中尤为深远。我们利用费茨定律估算用户移动光标到链接或者按钮所需的时间,时间越短越。比如有一个按钮在左下角,我们的操作可以细分为两个阶段:第一个阶段大范围移动到左下方向,然后再做微调到达这个按钮之上。所以这个时间受按钮和链接所在位置与按钮和链接大小影响,也就是说我们在做设计时要考虑光标默认会放在哪里、我们的链接按钮是不是太小了。
Image title
费茨定律说明距离越短、目标大小越大,那么光标到达目标越快
Image title
费茨定律在网页设计中的使用
Image title
OFO和苹果音乐APP都将按钮放置手指最容易点击的区域并且按钮足够大
希克定律(Hick’s Law)
希克定律是指一个人面临的选择(n)越多,所需要作出决定的时间(T)就越长。它的数学公式是:反应时间 T=a+b log2(n)。在我们的设计中如果给用户的选择更多,那么用户所需要做出决定的时间就越长。比如我们给出用户菜单-子菜单-选项,那么用户可能会很纠结;如果我们简化成菜单-选项,就会减少用户做选择的时间。
Image title
用户反应时间和选择数量的关系
Image title
我们应该减少用户的选择
7±2法则
让我们先玩个游戏,请记忆下面的文字,一分钟后移开视线:
挣 多 久 可 猫 风 师 袅 崩 六 酒 望
现在闭上眼睛想一下刚才的文字您能回忆几个?大概是五个到九个之间。1956年美国科学家米勒对人类短时记忆能力进行了研究,他注意到年轻人的记忆广度大约为5到9个单位之间,就是7±2法则。这个法则对我们做界面设计的启迪就是如果希望用户记住导航区域的内容或者一个路径的顺序,那么数量应该控制在七个左右,比如苹果和站酷网站的导航个数。另外,移动端底部Tab区域最多也是五个,而页面中的八大金刚图标也是八个。
Image title
苹果、站酷、Dribbble等网站导航数量全部是7±2
泰思勒定律(Tesler’s Law)
这个定律是说产品固有的复杂性存在一个临界点,超过了这个点过程就不能再简化了。我们只能将这种复杂性转移。比如我们如果发现页面的功能是必须的,但当前的页面信息过载,那么就需要将次要的功能收起或者转移。
Image title
Dribbble网站导航将更多功能收起在一个表示更多的图标内
防错原则
一个表单是需要填写完毕后方可提交的。但是用户有时会漏填或者忘记填写,这是用户点击提交会怎么样?很可能有些选项会被清空(比如密码选项基于安全考虑会清空cookies)那么用户还得重新填写。这时解决办法是在用户没填写完之前把按钮设置一个看起来不能点击的样式,用户想提交时弹窗:您还有内容没有填写完哦,然后把用户定位在没填写完的项目,让那个表单高亮。(是不是真的做到以用户为中心啦?)再比如推特只允许用户填写140个字,但用户一写爽了往往会超出140个字那怎么办?解决办法是给他在旁边倒数还能写几个字。看,这些都是我们为了防止用户操作出现错误所做的努力,防错设计就是要减少错误操作所带来的灾难。错误的提示当然需要设计师的设计了。可是也许您不知道有些错误提示含糊,用户并不知道到底错的是哪里,下一步该怎么办。比如仅仅登录功能就可能会有用户名错误、密码错误、网络超时、连续三次输入密码错误、用户名为空等不同的错误,而有些产品仅仅给出“出错了”,那么用户当然会不知所措了。正向的例子比如一次我在登录Google Mail时输错了密码,它提示“密码输入错误,提示:您在1个月前改过密码”。
Image title
BOO!APP输入密码时卡通会蒙住眼睛,输错时也会有提示
奥卡姆的剃刀法则(Occam’s Razor)
奥卡姆的剃须刀法则主要就是说我们做产品时功能上不可以太繁琐,应该保证简洁和工具化。比如产品中为用户提供了收藏功能是否就不需要喜欢了?提供了喜欢是否不需要点赞了?一定保证功能上的克制。
Image title
QQ将更多功能收起到了头像和加号图标中
防呆原则
有一个著名的交互书籍叫作《Dont make me think》,翻译过来就是不要让我思考。这句话一直在我做设计时响起:不要认为用户是专家!不要认为用户是专家!有时我们会觉得,点击汉堡包图标当然就是菜单啊!这个按钮长按不就会调出XX功能了嘛。但是我们忘记了普通用户可能并不理解什么是汉堡包图标、什么是抽屉式导航、什么是长按、双指滑动。更何况普通用户并不会研究我们的APP,在他们眼中我们的产品只是众多工具中的一个,我们何德何能认为自己的产品是值得用户花时间学习的?一定要把交互和设计做得简单,并且让用户在别的地方“学习”过。每个页面强调一个重要的功能而不要让用户做选择题。这些都是有效防呆的好方法。防呆和不要让我思考都讲的是我们的设计要自然而然。
Image title
运动APP KEEP 的页面中总有一个按钮是突出的
防止不耐烦原则
用户是很容易不耐烦的,你还记得你多少次看着视频加载条骂人吗?如果我们需要用户等待载入信息,一定要给一个有情感化的设计提示,避免用户产生焦虑。 比如很多游戏(比如决战平安京、王者荣耀等)加载时都会出现主角跑步的小动画,美团等APP下拉刷新时也会有几帧的动画来安慰用户。动画要好于苹果默认提供给开发的“转菊花”,因为卡通形象更有亲和力。但是好像还不够,用户需要掌控感,“哎?它一直加载,是不是死机了?”为了防止用户没有掌控感,我们可以为用户设计加载条或者加载提示。加载状态条很遗憾很多都是假的甚至是重复的,原因是其实要判断加载了多少M的素材的代码更占资源!我们本来想安慰用户等待加载的时间竟然会变得更长,那当然不行啦。于是很多时候我们会做一个假的加载状态条来安抚用户,我想您一定看过反复加载的加载条吧!加载条下的文案其实也是可以变得非常有情感化设计感受的,比如通常是:加载场景资源、加载素材这样的文案,但是有些APP需要很长加载时间时会给出这样的文案:导演正在准备、女主角准备化妆了、摄像师打开了灯光。是不是更加好玩啦?
Image title
美团和网易严选的加载动画
总结
交互知识其实关键还要在应用和分析。一方面,我们可以在工作中积累经验,不断地思考如何和同事配合一起研究提高产品在使用时的体验;另一方面,我们也要经常积累一些产品使用时发现的交互。建议大家平时可以收集你觉得不错的情感化设计或者微交互,比如发现饿了么在下雨天送货时会有电闪雷鸣和雨滴的设计;OFO和滴滴打车在不同节日也会把地图找车里的图标换成节日相关的图标;BOO!APP在输入密码时小怪兽会捂住眼睛;WPS在晚上写作时(没错就是现在)会提示你开启过滤蓝光的护眼模式等等。一个好的设计师一定是懂得交互的设计师,也应该是非常细心的设计师,也应该是懂得为用户着想的设计师。

想要用好留白?这篇文章帮你从头开始梳理

雪涛

留白对于设计的价值,已经得到相当广泛的认可了。留白的存在让其中的元素得到更好的凸显,有了留白才有强调,它们从来都是一体两面,焦不离孟。今天的文章,我们来聊一下留白的使用技巧和最佳实践。

设计中的留白

留白本身通常还被称为负空间,它们可以在网页布局中各个元素之间,还可以在特定 UI元素的内部。留白赋予了页面呼吸感,而它本身并不一定非得是白色的空白区域。留白界定了 UI元素本身的空间边界,而借助格式塔原理,它还可以创造视觉上的联系。

因此,留白是一种重要的、功能强大的设计元素,它对于创造积极的用户体验有着重大的影响。 交互设计基金会的 Mads Soegaard 是这么说的:“留白就像一块画布,它是将不同设计元素融合到一起的背景,又让这些元素通过对比衬托脱颖而出。”

在诸多的平面设计领域当中,负空间都发挥着无法替代的作用。无论是设计LOGO、平面插画还是字体的时候,留白的使用关系着整个设计的表现力。就像下面的博客插图,负空间的运用让整个画面显得更加生动。

无论是在网站设计还是 UI设计当中,设计师都需要借助留白来提升界面和导航的可用性。布局元素周围的留白或者负空间通常被称为宏空间,而它们之间的留白和内部的负空间,则被称为微空间。

理清概念

留白和负空间虽然是两个不同的说法,但是两者表述的是同一个东西。之所以有两个不同的说法,是因为两个名称是来源于不同的两个领域。

留白是来自排版印刷设计领域,因为页面的背景通常是白色的,而文本和图片周围的区域也多是白色的空白,因此有留白之说。而负空间这个说法是源自于摄影,吸引人注意的视觉主体被称为正空间,而相应的留白就成了负空间。

需要注意的是,留白并不一定非得是白色的,可以是其他的颜色,甚至是其他的图案。

留白为何如此重要

当你进入一个挤满各种物品和人的房间,到处都是东西和人,找到特定的东西肯定是一个非常艰难的事情。相应的,在干净的地面上,摆放的唯一的物品肯定是非常醒目的,你不需要花费任何力气就能注意到它。这也是留白发挥作用的原理所在。

虽然客户可能会要求设计师在页面上尽可能多地塞满各种元素和功能,这样可以节省空间。但是,实际上这是一个最常见的错误的做法:用户并不需要在网页上一次完成全部的工作。更重要的是,太多的元素会分散用户的注意力,用户会难以找到真正想要的信息。正如同 Aarron Walter 所说:“你想让用户注意到所有事情的时候,他们会感知不到任何东西的。”

对于设计而言,负空间的价值是非常高的,我们随便总结一下,都有很多:

  • 它让页面的可阅读性得到了提升;
  • 它增强了视觉层次;
  • 它使得元素和元素之间的关系更加清晰,更容易被感知,而不需要借助表格、框架这样的附加手段;
  • 它为页面增加了呼吸感,而不至于导致混乱;
  • 它让用户更容易将注意力集中到核心元素上,减少分心;
  • 它提升了页面的风格,让设计更加优雅。

看看这个城市指南的着陆页吧,负空间在背景中扮演了非常重要的角色,更重要的是,图片中的元素和前景的文本标题之间有所互动,这也同样是借助负空间的方式来呈现,呈现出一种和谐而有趣的设计效果。

影响留白的核心因素

合理的使用留白能够让界面的用户体验提升不少。

可读性和清晰度:如果和元素之间没有足够的留白,会变得难以阅读,用户需要花费额外的精力来进行分辨。不合理的留白设计会让用户感到紧张,想要让用户感到自然,需要让留白恰到好处,令布局显得足够自然。如同音乐中的韵律感一样,设计中的韵律感是通过留白的变化来呈现的。

品牌化:如果你熟悉LOGO的设计,你会发现设计师借助元素周围的留白来营造氛围提升感觉,留白的功能性在品牌设计上有着非常显著的体现。打破留白的设计规则,对于整体是有害的。

强化属性:留白的运用能够强化属性,比如新闻博客平台会更加密集地呈现信息,甚至会借助动态的数据呈现和较为致密的布局来营造一种资讯的密集感和平台的调性。

视觉层次:富有层次感的留白设计能够创造出视觉层次,并且让用户注意到特定的元素和信息。

留白对于视觉的影响主要体现在以下的几个方面:

  • 文案和内容
  • 图形元素
  • 导航
  • 视觉识别

接下来看看几个案例。这是 The Big Landscape 的首页,没有表单,没有视觉框架,仅仅借助留白来平衡所有的设计元素。设计师构建出了清晰的层次结构,并且允许用户一瞥即可看清所有的内容块,这样的设计看起来是清晰而有条不紊的,而且充满呼吸感。白色的背景和简约的布局让整个界面充满了实体杂志的质感, 而这也相对视觉化地告知用户这是一个在线的数字杂志。

另外一个是移动端的APP Upper。整个应用的留白都是使用黑色来进行填充的,在视觉上,黑色的留白和核心的视觉元素构成了鲜明的对比,从而起到了凸显的作用。整个设计留白充足,用户不会错过关键的部分,也不会分心,布局的组织性极强,可读性也都毫无问题。设计师确保了整体的优雅性,也让布局更加具有美学特征。

需要考虑的问题和隐患

1. 术语紊淆

和不熟悉设计术语的客户进行沟通的时候,应该尽量让他们明白负空间/留白的含义和功能。对于非设计从业者而言,很多时候确实不能很快接受「屏幕中需要留下更多的留白」这样的概念。对于黑色或者深色的背景,这类客户可能会有不好的联想,事实上并非如此。在进行足够深入的沟通之后,尽量将这些关键点灌输给客户,避免术语和概念上的误读。

2. 希望减少留白,增加页面和内容

其实这个是几乎所有的设计领域都会面临的问题。客户会希望室内设计师在一面墙摆满柜子而不是给两个剩余的地方留白,而建筑设计师也常常需要建筑周围有足够的留白,确保呼吸感,提供更好的服务。设计师需要和客户沟通,了解哪些部分更重要,哪些部分次重要,而哪些内容是可有可无的,分清层级,进行筛选。留白有助于营造更加协调的布局,让信息和功能的可用性更强。

3. 优先级不够高

如果深思熟虑的信息架构和界面并不匹配,留白并不是万能的解决方案。你需要在考虑界面设计之前,就确定用户获取信息的方式,然后再进行设计。在确定风格之前,先要梳理清楚用户流程,否则,再好的负空间设计也不足以发挥出它应有的功能。

如何做好电商类App?来看这份对新版淘宝的设计思考!

雪涛


电商类 App 是日常使用频次非常高的应用,它们的每一次更新改版不仅是业务的拓展、用户需求的满足,同时也是消费趋势的引领与跟随。

近期淘宝 App 的许多页面都有了较大的改动,在分析淘宝改版的基础上,通过几个关键页面的分析对比淘宝、京东、苏宁易购三大综合类电商平台的产品设计,希望此篇文章能让大家对电商类 App 的产品设计有更深的认识。

一、淘宝改版

前阵子淘宝进行了改版,这次改版循序渐进,并做了较多的 A/B 测试。

1. 主要改版页面

上图是淘宝几个主要改版页面。从视觉上看,很明显的大圆角卡片、去线条,整体风格统一轻质化。大圆角卡片追随了 iOS11 的风格(App Store 中尤为突出),卡片使信息更加聚焦,模块感更强;圆角卡片本身也比原先的卡片式增加了更多细节;大圆角卡片亲和力高,更加活泼,也符合淘宝人群的定位。

上图为5个 tab 的页面,这次统一了头部的颜色,强调了品牌,统一性方面也得到了提升。

以下是从单个页面的角度进行改版分析。

2. 个人首页

△ 旧版图为除夕的截图,颜色方面先不讨论

新旧版本的对比,可以看出88会员、卡券包优先级提高,会员信息更加集中、突出。这也印证了这两年会员机制的火热,拉新成本和难度都越来越高的情况下,巩固老用户才能带来更多的价值。

新版的卡片式很突出,去掉了大部分的线条,转而用块面来代替线条表达层级关系。

「我的订单」部分 icon 样式发生了变化(7. 7. 2 版),从填充式转变为线条式,突出了 icon 右上角的数字,但这一点在测试版本中又改回来了(后面讨论)。

88会员和物流这两块内容滚动呈现,真正是动效解决问题,从时间轴来解决信息量大而空间局限的问题,同时动态效果增加了用户吸引度。

在测试版中,这个页面主要看到两个点的变化,一个是 icon 改为原来的填充式,一个是动效滚动的节奏。

icon 的问题个人猜想是因为体量与重要性、位置的问题,线条式的体量弱于填充式。在「我的淘宝」页面中,最重要的信息是「我的订单」,因此需要一定的突出。另外在测试版里,「我的订单」的上面固定的广告位放置了旅行青蛙的广告,此位置的突出性导致其弱化了底下的「我的订单」,占用了原先「我的订单」的 C 位,因此测试版考虑到更全的场景(有广告),从而将 icon 的样式换回了体量大的填充式。

动效滚动是上面说的88会员和物流,7. 7. 2版本里两个滚动是同时进行的,而7. 7. 8的测试版中两个滚动是错开的。上下同时滚动会让人有些混乱,会让人认为这两块的信息是相互关联的。

3. 店铺首页

这一块做的 A/B 测试。店铺页面的改动较大,导航做了较大调整。新版将常用操作和重要功能放到了底部固定;二级导航中的内容让商家自定义选择,从而满足不同店铺的需求;新版一级二级导航较旧版层级关系明确了许多。

再来说说这次的 A/B 测试,这次的测试时间比较长(从7. 7. 2到目前的7. 8. 2都在,目测到8. 0应该会给出一个结果)。店铺页在导航上的大改动,会在一定程度上对已经形成习惯的老用户造成冲击,对页面重新适应和学习,有点类似于前摄抑制(在认知心理学上指之前学习过的材料对保持和回忆以后学习的材料的干扰作用)。新版设计的目的一是方便用户初期快速学习,二是中后期快速使用。对于中后期的快速使用就需要一段时间的铺垫来获得数据。该次测试应该是区分各种不同的用户,简单来说测试新用户、老用户分别对于新旧版本的学习,以及他们对新版本熟悉之后的使用。

4. 物流详情

这一块可以说是样式上的大改。用可视化来表现包裹正处的位置以及即将进行的操作,增强用户感知(降低理解难度),进一步提升对商品信息的把控感。比原先仅仅是文字展示而言生动了许多,样式接近外卖等待中的订单页面。可视化固然可以展示更多的信息,但是在用户非训练的情况下信息传递的速度未必比文字要更快,不同的人对图形的理解也会有所偏差。不过介于外卖 App 的页面已经对很多用户进行了教育,相信这种理解上不会有太大难度。但是依然要在后续优化中逐渐突出信息的重点。

物流详情页除了样式的巨大变化,还有一个特点就是场景化细分,不同的场景做出了差异化。例如仅仅是物流详情页,根据不同的场景:发货未揽件 – 已揽件未配送 – 快递员配送中 – 到达菜鸟驿站/其他快递点 – 已签收等,页面突出的信息均有所区别。已揽件时突出快递信息,配送时突出配送员信息等。

从场景细分做差异化,让用户获取当前最需要的信息这件事的出发点无疑是很好的,但是从上图中,仅是快递信息这一类信息,就出现了三种样式(如上图),并且位置也不统一。如果用户是购买了几件不同店家的商品,这时快递员打电话来说我是XX快递的,快递给你放在了某某地方,这时我想知道这是啥商品的时候,于是我就打开了物流详情,来找快递信息,发现快递信息居然不在原来的地图底下了,找了好一会才发现放到了快递员下方。这个例子也就是说在非常见场景下获取某个信息时可能需要付出额外的学习成本。

不过在7. 7. 8的测试版本中,又将快递信息的样式减为两种,算是一种妥协。本人认为,场景细分出发点是好的,但在样式和位置两点中,最好至少有一点是固定不变的,这样才不会过多增加用户的学习成本,也能涵盖一些小概率场景。

5. 动效

这两张图都是店铺页面顶部的动效,当用户向下滑动页面时,顶部的信息会出现变化,也算是细分场景的一种,通过动效的方式完美过渡,过渡的流畅感会让用户对该平台增加些许好感。

我的淘宝这一页的动效解决问题在上面有说到,右边的有好货页面,当用户在滑动页面时,攻略推荐一栏的图片有依次展现的效果,吸引眼球,小有惊喜。

总结来看,淘宝改版的设计角度可以总结为:设计追随目标,品牌、会员突出,追随设计趋势,细分场景,可视化展现和流畅动效。另外淘宝对设计、测试的态度上来说,设计解决实际问题,设计需要验证,测试要严谨。

二、淘宝与其他竞品

这里只选了京东和苏宁易购两个与淘宝进行了几个关键页面比较,以下主要从视觉的角度谈一下有哪些问题,这里几乎不牵扯业务、页面跳转等问题。

1. 首页

淘宝:整体看起来没有什么硬伤,没有用卡片风格。

京东:这边也是继淘宝改版后不久改版上线。这边首屏的 icon 这一块的卡片式生硬,大有为了卡片而卡片既视感,京东秒杀这块的整齐度不高,也有些左重右轻。「每日逛」这种装饰性较强的风格也与整体卡片式简洁风格不符。「东家小院」楼层次级标题的颜色跳跃,大有喧宾夺主之感。

苏宁易购:目前还没有改版。掌上抢这楼层整齐度不高,和京东类似,同时缺少层次感,部分有渐变部分没有,非常不统一。「逛实惠」楼层视觉不平衡,而且信息层级很有问题。

2. 搜索结果页

风格:淘宝这页用了无框设计,省去了中间的分割线,商品图片尺寸较大;从左到右,图片尺寸越来越小,分割线从无到细到粗,整体效果上淘宝和京东效果比易购的好。

标签:在标签的处理上,易购的标签非常强,在页面上非常突出,喧宾夺主;京东的标签弱化,与淘宝类似,但完全不同类的标签样式相同(秒杀与自营),会让人觉得有些混乱。

图文编排:淘宝和京东都没有硬伤,比较和谐,但易购的图片和文字大小间距比例不和谐,图片与线框无论在视觉效果上还是像素上都没有对齐;易购底部没有适配 iPhone X。

3. 分类页

风格:淘宝用了明显的卡片,去线条;而京东也用了卡片,卡片感微弱,是为了统一性而做;易购仍然是线框区分,整体区分效果不佳。

品牌:淘宝和京东在文字的处理上没有用更多的色彩,而易购的色彩运用得非常多,削弱品牌感,且没有带来任何优势。

4. 商品详情页

此页面我仅从节奏感这一个角度来看,上图已经标出了每个页面的节奏感给我的感受。淘宝整体的节奏感比较好,轻重缓和;京东和易购在节奏感上做的都有些问题,重节奏之间无轻节奏的调和会缺乏呼吸感。

5. 购物车

风格效果:淘宝没有用卡片风格;京东用了卡片,导致大量留白,同时没有带来任何优势,苏宁易购整体稍显拥挤,没有亮点。

图文编排:淘宝整体非常和谐;京东图片均使用了白底,这点很好保持了统一性;京东使用了大量的设计细节,字号、粗细、字体、颜色等等非常丰富,但整体效果并没有很理想,稍显琐碎与凌乱;苏宁易购的文字大小与间距处理不和谐而带来拥挤感。

其他细节:京东标签不同于搜索结果页的弱化,而是非常强化,导致视觉焦点混乱,个别按钮非常小,操作不便;易购标签处理上比京东收敛;易购底部 tab 与其他部分没有区分,浮框像广告,效果不佳,数量修改框的描边太硬,比例不和谐。

6. 个人首页

整体风格:淘宝和京东都是明显的卡片式,苏宁易购是广义上的卡片式。

这里主要说一说易购的问题:首屏出现「我的专场」的大片不平衡色块非常不合适,部分 icon 效果不佳,另外有一些内容上的 bug。

7. 订单

淘宝和京东的订单页个人认为没有什么硬伤,淘宝有个适配的问题。苏宁易购的问题比较多,首先是顶部「常购清单」中没有商品的 bug,然后是图片与购物车等地方的风格不符,商品之间分割线有时有有时无,间距有问题等等。

三、总结

综合上面具体页面的分析可以看出淘宝在 UI 设计上的优势:追随设计趋势、统一性、排版和谐等。

关于统一性这一点,可能有人说京东做的更好,因为它几乎所有页面都用了卡片风,而淘宝没有。个人认为,设计风格是次于设计目标的,如果这种设计风格不能很好满足该页面的设计目标,建议还是以设计目标为重;如果仍然强制使用该风格的话,会得不偿失。淘宝的做法是把卡片这种风格归类为轻质化风格,除了卡片以外,还有去线条、色块等等设计语言,因此并非强调一定要使用卡片形式。

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档