大公司都在用的酷炫数据跑分图,零基础让你学会!

我之前在网上看到一个用动态数据图展现近 60 年世界 GDP 变化的视频,不断变化的数据,配合宏大的音乐,在一些时间点上标注出对应的大事件,视觉效果非常棒,展示形式也很好。

后来我查了一下,有说用 PPT 做的,有说用 Python 做的,还有说 Echarts 做的。

这几个方法,虽然最后大致都能达到效果,可要么是门槛太高,要么是操作太麻烦。

经过我的寻找,终于找到了一种效果最好,实现最简单的方法。

先看我做的成片 《2013~2019年 七大短视频平台百度指数对比》:

△ 近六年七大短视频平台百度指数对

成片看完了,今天便将我这一招从天而降的掌法分享给大家。

学会这门武功,拢共分三步。

步骤一:准备一个Excel数据表

以我这个视频为例,第一步大家要准备一个 Excel 数据表,每个列分别是 App 名称、 App 名称 、App logo 链接以及时间。

然后将对应的信息填入。

把第一步完成以后,我们基本掌握七成武功了。

步骤二:Excel导入flourish网站

我们打开 flourish 网站,然后打开点击文章 How to make 「bar chart race」 。

网站链接:https://flourish.studio/

点击创建图表,切换到 data,将自己做好的 Excel 导入进去。

△ 点击创建,导入Excel

表格导入进去之后我们就能大致看到动画的基础效果了。

△ 初步效果

但是我们需要优化一下它的美观度,比如图标大小,柱状图宽度,柱状图间距,字号大小等等。

这些元素在右侧都是可以调整的,虽然这个是英文网站,但是 Google 浏览器是可以翻译网页的,不过有些词汇会翻译得比较奇怪。

△ 视觉调整前

△ 视觉调整后

因为目前它只可以导出网页和图片,所以美观度调整的差不多我们就可以录屏了。

步骤三:录屏及剪辑

录屏完成以后我们就可以开始最后一步了,然后把录制好的视频文件导入剪辑软件,配上音乐,加上一些时间点的大事件,这样一个炫酷的动态数据可视化图表就完成了。

△ 完成

附上完整的视频教程:

欢迎关注作者的微信公众号:隐匿的大 V

优设大课堂

即将离职的 Dribbble 创始人,临别之际的20条人生私分享

编者按:Dribbble 的联合创始人 Dan Cederholm 决定离开他工作了整整十年的设计师社区,开始新的征程了。在此之前,他在 Awwwwards 的分享会上分享了自己这 10 年来的20个重要的体会,也许对你也是极有价值的分享。

上个月,我在旧金山的Awwwards大会上做了30分钟的演讲。我过去经常做关于CSS和网页设计的主题演讲,但是这次有点不同。我决定与大家分享我在过去10年里与他人共同创办Dribbble公司时学到的20件事。时机是非常重要的,因为当时我刚刚决定完全退出Dribbble,看看接下来会发生什么。稍后我会对此进行详细介绍。

回顾我从「为设计师建立一个平台」这件事中学到的东西,比如如何经营一家企业,以及如何度过一些艰难的人生岁月,事实证明,这些经历既有趣又困难。我想如果这些想法对大家有帮助的话,我可以跟大家分享。那么我们就进入正题吧。

我需要先声明如下:我将分享的内容仅是源于我的个人经历,而不是Dribbble公司或者当前团队的观点(这是非常棒的)。这些都是我个人用历史的眼光来思考的。

1.谨慎选择你的合作伙伴

我很幸运地认识了Rich Thornett(Dribbble的联合创始人)。我们是马萨诸塞州塞勒姆的邻居。我可以从我的前门看到他的后门,我们的孩子也是朋友。我们的兴趣和技能也完全吻合。Dribbble是作为一个副业项目开始的。没有商业计划,没有颠覆设计行业的使命,也没有我们正在改变世界的信念。我们有了一个想法,于是便开始付出行动。

选择合伙人其实和选择结婚对象很类似。如果你幸运地获得了一定的成功,你将会和这些人一起经历很多。你们会有很多时间在一起。一起做出重大的人生决定。当然,你们也一定会出现意见有分歧的时候。你得忍受ta恼人的双关语——不,桥豆麻袋(哈哈哈,皮一把),我其实还挺欣赏Rich玩文字游戏的天赋。你应该明白:共同创办一家公司需要你投入,有时这并不容易,因此沟通是至关重要的。

在我们经历了这么多之后,Rich和我仍然是好朋友,这让我松了一口气——这对我来说意义重大。因此,要明智地选择你的伴侣。

2.千里之行,始于文化衫

创业都是从一件文化衫开始的(哈哈哈,并不是)。我一开始啥也没干就先做了Dribbble的文化衫,朋友们,我的优先级排列就是如此。

早在2008年,我们就向朋友和同事发送了50件衬衫和一张卡片,宣布推出 Dribbble 的 beta 版。第一批成员在社区的建立和发展过程中发挥了关键作用。这件衬衫让他们感到拿人手软,良心不安——于是他们就真的加入了我们的网站。关键要点在于:不要只发普普通通的电子邮件,而是给那些你希望可以加入你的团队的人送些小东西,比如一件免费的t恤。

3.最开始的100个成员至关重要

出于私心,我们一开始选择了我们有意向深入了解的设计师。后来,当我们发出邀请时,最初的一批人又会邀请了下一批人。在早期的大家族中一直延续着一种责任感。

你会从这些人身上得到大量反馈,他们很特别,因而你选择了他们。他们会时常给你提一些中肯的建议。

如果你对早期的 Dribbble 有所了解的话,应该知道,我们当初推出的平台机制其实会限制设计师上传作品的频率,只有到达一定程度才会获得邀请朋友的邀请码,这件事情对于真正的设计师而言,其实并不是障碍,但是它会给我们带来一个积极的副作用:让网站上分享出来的设计作品质量非常高。

4.扫清障碍,铺平道路

倾听和观察这些早期的 Dribbble 成员,对于引导整个 Dribbble 社区,以及随后开发站点功能至关重要。Dribbble 早期的许多功能都是在成员反馈的基础上进行改进。

我们倾向于采取一种观察者的立场,谨慎地添加我们的成员想要的功能,这使我们能够避免其他类似社区遇到的一些陷阱,这些社区通常有非常严格的规则和严格的UI,试图预测成员想要什么。

当然,这种情况在其他地方也会发生。Twitter的@、标签、Instagram故事等等——你永远无法预测一个社区最终会如何使用你创建的工具,当然这没什么大不了的。

5.别害怕舍弃

我们开发了很多非常愚蠢的功能。幸运的是,它们从未被公开过。我们会在内部迭代,然后看看是否可以吸引用户。

然而有时候你会为一个好创意投入大量人力物力资源,然而投入市场后它却失败了。我知道接受它并不容易,但你需要学会放手,扔掉它,继续前进。把它归结为一次学习经历,总结经验,继而努力前行。

当然,我们也发布过一些糟糕内容,但是谢天谢地,通过在内部迭代和缓慢部署,避免了大多数疯狂的想法浮出水面。这与「高频更新上线功能」是截然相反的,我很庆幸我们的做法更有条理。这里有一个完美的例子,关于我们是怎样花了大量的时间在一个疯狂可怕的想法上:

6.上线之前一定要持续迭代

我们尽最大的努力做出精妙的微调,力求不破坏原有的风格。确实有一些容易引起轰动的瞬间,但是那些瞬间都是转瞬即逝的。并且可能会对每天使用网站的用户造成冲击。

在设计Dribbble 社区时,建立用户信任以及打造一个让用户体验舒适的社区是至关重要的——尤其是在刚起步的时候。

7.感觉迷茫也不用慌张

我花了很长时间才意识到这一点。在商业和生活中,没有人真正知道他们在做什么。每个人都在即兴发挥。

当我12岁的时候,我想建一个滑板坡道,于是我爸主动提出帮我。我爸和我一样,他也不是特别得心应手,但他愿意尝试任何事情。所以,我们在地下室用他的圆锯切木板的时候,突然我听到了呼呼的声音!锯子用崩了,我爸把绳子割断了。

在这整个过程中没有发生电击事故真的是谢天谢地。但我想说的是,这件事断送了我对土木工程的念想。但那一天我印象最深的是,我爸对于事故本身一笑置之,并未多说。多年来,这件事在某种程度上成了一个令人尴尬的家族传奇,但是这确实是我爸的锅。

能够对自己的错误一笑置之,同时又不害怕陷入自己不知道如何去做的事情,这是一种非常强大的品质。我认为,人们在创建和经营企业时拥有这种能力是至关重要的。

8.快马加鞭地让脸皮厚起来

为设计师设计是很困难的。我们是一群固执己见的人,不是吗?

就像网络上的大多数东西一样,Dribbble多年来承受了大量的负面影响。随着曝光率和吸引力的增加,批评人士会蜂拥而出。

Dribbble 被指控破坏了设计行业。这真是太棒了,真的。我的意思是,如果一个为设计师设计的网站能够破坏整个学科,这可真是太牛了,对吧?但更严重的是,当你站在我的角度考虑问题,终究会有点不好受是吧。所以说,最好迅速变成一个无所畏惧的厚脸皮,面对一切腥风血雨。

你需要进行如下考虑

  • 随着时间的推移,你会明白该忽略谁,尤其是在社交媒体上。你会开始分辨谁是真正的批评,谁只是喜欢挑起争端。忽视后者。无论如何,你永远无法取悦他们,而且他们肯定是那种开趴体都会骂街的人。
  • 要重视正面评论,并且让团队成员都能看到。在早期,我们启动了#highlights Slack#频道,在那里我们收集并发布关于Dribbble的正面评论。我还记得Jeff Veen告诉我,在Typekit的创业早期,团队会把用户吹彩虹屁的推文打印出来,挂在会议室的墙上。

我知道这并不容易,但还是要专注于那些积极的声音,从中收获勇气。

9.趋势是个轮回

Dribbble经常被提及的一件事是它的 Popular 页面,以及它似乎会延续的同质化趋势。我喜欢它,现在仍然喜欢。在UI设计领域,我最喜欢的一个时代是21世纪后期的拟物化时代。这是一个有趣的,创造性的发现方法,以采取标准的iOS图标形状和然后竭尽全力地将细节灌注进去。通过 Dribbble,我发现了很多有天赋的像素艺术家,他们中的许多人来自东欧和亚洲。

如果看看这个时候 Popular 的页面,我们会听到「Dribbble 除了图标设计师啥都没有」这样的声音。

后来,长阴影又流行了起来……

然后又流行整齐一致的设计搭配一个45º的阴影。还记得这个趋势吗?这个趋势非常有意思不过生命周期却出奇的短暂。紧接着,一切有都变得单调而乏味了……

然后……猫又火了

当然也不全是猫啦。

不管怎么说,我一直很高兴能看到这些趋势来来回回起起伏伏。它们会在一段时间内非常流行,而且一切总在变化,有时会卷土重来。

我的建议是不要担心流行趋势,而是使用最适合你手头项目的风格,并且坚持下去。对于你正在解决的问题,选择你认为正确的方法。耐心点,旧有的风格迟早还会流行起来的。

10.一切都是暂时的,没什么大不了

另一个不去纠结流行与否的原因在于,一切风潮都是暂时的。我的作品集里有一些老作品,当然有好的也有坏的。这些年来,我做过一些相当愚蠢的东西……

所有这些都有一个共同点,那就是它们都消失了,这些设计和产品都不复存在了。现在,你可能会因为设计工作的无常和可有可无而感到沮丧,但是你也可以把它看作是一件好事。你可以继续重塑你自己,重塑你的工作。还记得当时这些东西有多重要吗?那些紧急会议和打扰你度假的电话会议,那些事情所带来的设计和产品,最终还是会被替代。

世事无常。过去那些急迫和紧张的事情和经历,我会努力把它记在心里的。

当然,并不是所有的东西都是精神上的,但不是所有的东西都是暂时的吗?就像所有的星尘都不会永远漂浮在一个位置。

你应该知道你的工作是暂时的,这个想法会让你更加轻松自由一点,也许还会给你一些额外的安全感。因为你不必时时担心它的发展趋势,你不用为了让你的公司成为全世界最好的公司,而背负巨大的压力。

11. 人际关系是头等大事

因此,虽然你的设计可能会消失,你的工作只是暂时的,但朋友同事和人际关系是始终存在的。很快,你就会意识到它们是这一切中最重要的部分。在工作结束很久之后,如果你做对了事情,你身边就会有好人、朋友、同事、未来的同事,这些人会比你创造的东西更有价值。

同时,对你的同事要友善。你永远不知道你们的人生道路是否会再次交叉。今天的客户或同事可能是未来的工作领导或新公司的创始人。你永远不知道。我可以把我的整个职业生涯归功于我从朋友和以前的同事那里得到的恩赐。

回到21世纪初,我作为一名自由设计师与Odeo的团队一起工作。项目快结束时,Ev Williams亲切地问道:

Ev:「你有空跟我们一起做一个叫推特的新项目吗?」
我:「不了,我没档期。」

我真是个傻X。

但事实是:你永远不知道你的下一个项目或大机会将从哪里来——更确切地说,它将从谁那里来。但是一切都是从「人」开始的。

12. 保持对「副业」的敏锐感知

当我专注于一个产品而不是做多个短期项目时,我逐渐意识到了一件事:你的技能会很容易生疏。你很容易觉得自己落后了。当你从一个客户的项目跳到另一个客户时,你将不断地重新创建工作流程和工具集合。每次都像重新开始一样。当你只经营一家公司的时候,你的行动会慢得多,给自己特定的标签,同时会发现自己在脱离某些圈子,等等。

在业余项目和副业中让自己保持新鲜感吧。边做试验,边学习新东西,让学习的齿轮转动起来。不管我有没有计划,我有限的注意力总是会产生各种业余项目,我很庆幸自己一直在不断的通过这种方式学习新东西。

等等,其实真要说的话,Dribbble本身就是Rich和我的一个副业啊喂!!!Advencher Supply Co.是我不久前开始的一个坑,它结合了我的许多兴趣:设计实体产品、户外活动、冒险等等等等。我学到了很多制造和零售方面的新技能,这很吸引人。更不用说木偶戏和视频制作了,哈哈,稍后会详细介绍这件事情。

没有13条,因为它是一个不吉利的数字(手动狗头)

14. 不要迷信

(译者注:哈哈哈哈哈哈,真的被这老哥圈粉)

15. 好律师,好会计

这绝对是关键,这是你需要实现考虑的头等大事!早些时候,一家大型水果公司给我们寄来了一封止息信,因为我们请了一位懂得如何处理这封信的会计,这让我们省掉了很多痛苦。

还有,还记得第一条吗?我把合伙创业比作婚姻。如果你的事业成功,你将不得不同时处理一些重大的财务和法律事务。了解你的业务的律师和会计师将是非常重要的。

16. 想想你从何时起开始变得固执

一件事情只要你做的时间足够久,它总会变得越来越舒适的。随之而来的,人也会逐渐陷入到这种舒适感当中,固步自封和自满就会生发。而我确实犯了这样的错误,这是我觉得自己比较愚蠢的一个主要案例。

我非常不愿意在前端工具包中使用Sass,这就是典型。Sass会使编写CSS更容易。Rich极力游说我们在代码库中使用Sass,我固执地拒绝了,因为我荒谬地觉得自己需要控制样式表中最无关紧要的各种属性和格式。

我当时的观点是,我是通过使用查看源代码来学习web设计的,代码呈现的方式对我来说很重要。随着时间的推移,我开始发现浏览器的代码检查工具变得更好了。查看源代码让位于浏览器内置的更强大的前端代码剖析工具,这些代码直接构建到浏览器中。我开始意识到Sass会给我们带来巨大的好处。

我花了一年(也许更长时间)才改变主意。不久之后,我为此专门写了一本书,《网页设计师的Sass》。哈哈哈哈哈哈哈,这件事这可能会把 Rich 气到吐血😂

我得到的教训是:不要试图阻止一些可能最终对业务有帮助的事情,尤其是当它只是因为你固执或拒绝改变。一旦你放开自己,学习一些新的东西,那么是时候……boom!

17. 分享学习成果

我的整个职业生涯都归功于写作和分享。这个习惯始于博客。在早期的网络时代,博客是我们交流想法的方式。我喜欢博客,因为它们赋予我力量。我从大学辍学,没有接受过任何正式的培训,但我可以在博客上分享我的想法,并接触到来自世界各地不同的人,这真的很神奇。

于是我开始写作。我会写下正在学习的东西。它迫使我以一种不同的方式思考我正在学习的东西,以及如何向像我这样的新手解释它。事实证明,这不仅有助于巩固某一学科的知识,而且也是让其他人学习的好方法。这是我从其他人那里学到的方法。

需要记住的是,你不需要成为一个专家才能开始教学。每个人都是边做边想。在我的播客频道的50多次采访中,这成了一个反复出现的主题。许多大咖都认为传递知识对自己的事业有帮助。无论你的职业处于什么阶段,都可以开始写作和分享。

18.谨慎融资

总的来说,我并不反对融资,但我很高兴 Dribbble 过去(直到现在)是一家完全独立的公司。多年来,风险投资公司一直对我们很感兴趣,但我们最终意识到,接受外部投资者会改变公司的发展轨迹。我们会被别人推着走,有着截然不同的优先级。投资的回报将是唯一的目标,而我们的产品路线图很可能需要彻底改变以适应这一点。而我们的首要任务永远是与设计师和我们的社群保持一致。

对一些人来说,风险投资是很好的,但在投资前要意识到,这可能会对你的公司产生的负面影响。

19. 将自己放在第一位

这是一个至关重要的问题,也是我历经艰辛才学会的。我在30岁出头的时候就开始出现焦虑症。我一生都患有焦虑症,虽然直到它开始恶化才被诊断出来。几年后,我终于得到了正确的治疗药物和疗法,这真的改变了我的生活。

焦虑症是一种病症——它是生理层面的一种化学失衡,这种原始的「要么干,要么死」,有时不应该发生。这也是一种经常被那些没有经历过的人误解的情况。但是千万不要因此感到羞耻,正视它。这件事应该拿出来讨论,因为有数以百万计的人饱受其苦。

我的一位医生将焦虑描述为一个曲线,随着年龄的增长,焦虑会以不同的方式表现出来,使日常生活变得困难。并且它会随着时间的推移改变。但是,只有理解它的存在,才是朝着正常生活迈出的第一步。

当你在事业上疲于奔命时,处理焦虑(或任何健康问题)显然是一个挑战。一场艰难的离婚,孩子的出生,一切都可能因此失控。这让我回到了第一条,在这条路上,你对伴侣的选择变得更加重要。来自伴侣的支持和理解意义重大——而我在这件事上还是非常幸运的。

我提出这些是因为我希望大家能更公开地讨论这个问题。首先要照顾好自己,这样你才能成为团队的好领导。比如当你在飞机上,他们告诉你在帮助别人之前,要注意保护好好你自己的氧气面具。顺便提一嘴,我讨厌坐飞机。

20. 知道什么时候该放手

写这篇文章也是如此。

几年前,Rich 和我把 Dribbble 的多数股权卖给了 Tiny。为了让公司进入一个新的阶段,我们需要寻求专业帮助。一年后,我减少了一半工作时间,主要专注于播客。现在我终于完全放手,退出了日常的管理。Dribbble 在 Zack Onisko 的带领下,拥有一支优秀的团队,现在已经有50名远程工作人员。

要从你已经担心了10年的事情中抽身而去并不容易。情绪当然是相当复杂,但总的来说,我已经准备好了……

最后分享我的下一步计划

这是我接下来的计划

成立 Advencher Supply Co.

我将把更多的精力放在我真正感兴趣的事情上面,并把它与我喜欢的户外活动(划船、飞钓、陆游、摄影)结合起来。这是一种爱的运动,我很高兴能花更多的时间来培养它。

做播客

我喜欢学习编辑和制作播客。跟以往一样,虽然我心里也没什么底。但我从与社群成员的对话中学到了很多。我很幸运能够开创播客频道,如果我能找到一个新的合作伙伴/赞助人来帮助我,我很乐意自己制作一个新的节目。我愿意继续与有创造力的人交谈,深入了解他们的故事、过程和生活。也许其中还夹杂着一点冒险。感兴趣吗?请联系我哦:)

制作LOGO

我喜欢制作LOGO和品牌设计,我尤其喜欢与规模较小的企业合作,帮助他们提升自我。

谢谢聆听!不断分享,不断学习,不断创造,不断鼓励,记住一切都是星尘,星尘就是一切。

原文地址:《WHAT I LEARNED CO-FOUNDING DRIBBBLE》
原文作者:Dan Cederholm
优设编译:@陈子木

优设大课堂

对谈世界上最早的UI设计师:我们不止创造了汉堡图标

编者按:汉堡图标一直都很火。问题是,到底是谁创造了汉堡图标?事情有意思的地方就在这里:创造汉堡图标的人并不是某个无名之辈,恰恰相反,它的创造者是图形界面的创造者,是世界上最早的 UI 设计师,是一群如今名声远不如那些科技巨头,但是真正改变世界的人。

用户体验和产品设计师 Geoff Alday 在几年前就开始对汉堡图标到底是怎么来的这件事情非常好奇,随后他做了一些深入的「考古工作」,一些非常有意思的事情逐渐展现在了他的眼前。他在一个 Vimeo 视频中追踪到了最早的汉堡图标的踪迹,这是一个 1990 年的某个设计大会的视频,其中一个分享者正在演示如何在施乐之星电脑的窗口标题栏中找到菜单按钮。而这个按钮,则是由三个长方形堆叠在一起的。

△ 最早的汉堡图标藏在施乐之星中

施乐之星承载了最早的图形化界面,它是如今无处不在的 UI 界面的鼻祖。因此,Geoff 找到了当年的负责人之一 Norm Cox。

「你确实没少做功课,」Norm Cox 在邮件中回复 Geoff :「找我你就找对人了。」

汉堡图标无处不在。去年 12 月, Reddit 和麦当劳联手在两家网站上重新设计了汉堡图标,让它看起来真的就像汉堡一样,而与此同时,这个汉堡图标的创造者 Norm Cox 迎来了自己的 67 岁生日,并且收到了一个特殊的生日礼物:一个巨无霸汉堡。大家对于这个小图标的名字的来源历史兴趣并没有减弱,最主要是压根没有预料到它能在它诞生了几十年之后,会流行成这样。

如今每一个正在制作开发移动端网站或者 APP 的人,基本上都会在自己的产品中用上汉堡图标。而每一个称职的用户体验设计师也都会很想知道,像 Chrome 和 Amazon 这样体量的产品为什么不用汉堡图标。

有批评者认为汉堡图标让产品的参与度和效率变低了,但是更多的人眼中,汉堡图标无处不在正是事情变得更好的一个重要的标志。著名的软件开发者和 UX 社教司 Michael J.Fordham 在 Medium 上写道:「(汉堡图标)正在成为纯粹的力量、纯粹的功能并且让设计师有理由在这个设计上偷点懒。」汉堡图标肯定是不错的选择,因为全世界人民都知道这三条横线的含义是什么。

不过依然有很多人不知道,这三条横线是怎么进入数字世界的。每一个东西都有起点。如果说汉堡图标也是从一个产房里面出生的话,那么我应该跟当时负责接生的医生好好聊聊。所以我找到了当时在场的三个人,Norm Cox、David Canfield Smith以及 Ralph Kimball ,并且跟他们好好聊了一下汉堡图标是怎么诞生的,以及施乐之星诞生时的往事(已经40多年了),还有他们认知中最好的设计思想是怎样的。

△ 一台完整的施乐之星电脑(Xerox Star),首个拥有图形化界面的电脑

Norm Cox,首席视觉设计师,隶属于施乐系统开发部门,而 David Canfield Smith 和 Ralph Kimball,则是部门的两位主设计师。

Norm Cox :当 Geoff Alday 找到我的时候,跟我说的第一句话是「整个设计行业都在关注这个菜单小图标怎么用的时候,而我才意识到是你创造了它。」而我盯着它看的时候,满脑子想的是「天哪,我可能是在一个星期二玩上八点半创造了这个小东西,但是设计完之后从来没想过它会怎样。」

Dave Canfield Smith:汉堡图标这个真的是太微不足道了。我们最自豪的事情之一是施乐之星这台电脑,和同时代的其他电脑相比,操控所需要的命令要少太多了,但是它几乎可以做任何事情,比我们当时所呈现出来的东西要多太多了。汉堡菜单是我们当时用来承载多余命令和操作的一个载体和方法,我们当时暂时无法找到更好的方法。

天哪,我可能是在一个星期二玩上八点半创造了这个小东西,但是设计完之后从来没想过它会怎样。──Norm Cox

Norm Cox :相比于施乐之星本身的革命性,汉堡图标的流行和火爆显得略有一点荒谬,它其实是整个产品中实际上最微不足道的部分,不过它现在确实成为了无处不在的符号。

Ralph Kimball:从 1972 年到 1982 年,我一直在为施乐工作。首先是在施乐的帕罗奥托研究中心(著名的PARC,图形化界面和施乐之星诞生的地方)作为研究科学家,专注于用户界面的设计,然后是参与施乐之星工作者的研发。我们在那里的工作是整合并制作出一致的、富有创意的图形化界面解决方案和方案,这些东西主要是 1976 年之前在帕罗奥托研究中心做的,早期阶段则是在 SRI 和犹他大学(Alan Kay 的 Dynabook 项目)开发完成的。

Dave Canfield Smith:在 1975 年的时候,SRI 雇佣了还在斯坦福大学的我,这也是我第一次同 Charles Irby 碰面。Charles 是后来 UI 团队的首席设计师,与 Doug Englebart 一同合作。在 SRI 工作不到一年时间,Charles 就离职去 PARC 工作,并且跟我说这里的工作到底有多好,并且希望我能过去。所以我随后就去 PARC 实习了,Alan Kay 是我的主管。在那里,我用上了真正意义上的第一台个人计算机 Alto,并且使用 Small Talk (Kay所设计的编程语言)来撰写我的论文。相比于 SRI,PARC 并没有那么大,但是它门槛其实更高。除非你拥有博士学位,否则你压根不会被邀请和雇佣。

Norm Cox :我第一次去 PARC 的时候,穿了一套全新的涤纶西装三件套,接待员替我把 Charles Irby 叫出来了,他当时已经负责领导施乐之星的用户界面和功能设计小组。当时他穿着防滑短裤和凉鞋,以及手工染色的T恤,走下楼梯来迎接我。我这个时候才注意到,他脑后的马尾辫都已经及腰长了,邋遢的胡须,整个身形都比较瘦小。我迅速意识到我就不该穿西装来 PARC。办公园区里面还有个哥们肩头上站着一只真的鹦鹉,满园区瞎溜达。在办公室里面,每个人都有懒人沙发,还有人带了霓虹灯和薰香。想想吧,20 世纪 70 年代的加里福利亚。

办公园区里面还有个哥们肩头上站着一只真的鹦鹉,满园区瞎溜达。──Norm Cox 和 PARC 的企业文化

Dave Canfield Smith:当时我们在 PARC 先研发了 Alto 电脑(其实最主要是作研发之用,一共才制造了几百台),突然之间我们的团队就有了这个位图屏幕,分辨率是 700×1000 像素,每个像素都可以单独的控制关闭和开启。这个显示器一下子点燃了我们的想象力和创造力。

Norm Cox:在施乐之星项目之前,我正在管理另外一个设计团队,为施乐当时生产的电子打字机开发字体。随后,带着鼠标和黑白像素显示器出现在我们办公室。我一直都非常迷恋各种新事物,绘画,水彩,木工,任何创意设计和新媒体。所以我开始不停地玩儿它。

Dave Canfield Smith:当我在 1976 年加入施乐的系统设计开发团队的时候,我的工位在办公室很偏僻的角落。当时公司打算将施乐之星推向市场,目标使用场景是办公室。当时传统的办公室当中,绝大多人并不了解电脑,而且管理层是不需要打字输入的,相反秘书是需要的。所以,我的想法是将办公室场景下的很多元素逐渐融入到整个计算机的视觉系统当中,包括文件柜、垃圾桶、文档、文件夹,这样会更易于学习和理解,并不是像之前那样仅仅提供一个简单的说明手册就完事了。我们在 PARC 利用全部所有的技术来创造这些东西。

Ralph Kimball:在施乐之星中,不再依托键盘来发出操作指令,相反使用图形化界面来进行直觉操作,这才是它最具有革命性的一点。

Dave Canfield Smith:当时在我自己的小隔间的墙壁上贴满了各种打印文档,上面全都是各种图标的属性,以及它们能够做什么。这包括文档、文件柜、打印机、时钟、邮箱、图书馆(这是一个类似谷歌一样的检索界面,我确实没有聪明到发明谷歌)……激光打印机和使用因特网的电子邮箱,这两种东西都是 PARC的发明,我会尽可能利用 PARC 的技术来制作综合办公系统。

Ralph Kimball:Norm Cox 确实是施乐之星开发团队挖到的宝,因为他能够如此高效地利用媒体的力量来转化为有效的设计。在遇到 Norm 之前,Charles Irby 和我在旧金山和很多著名的平面设计师碰头聊过了,但是他们对于设计图形化界面完全没有思路。

Dave Canfield Smith:我曾经画过第一版的设计稿(图3),在我看来真的是垃圾。真得感谢上帝我们有 Norm Cox,我们才能拥有一套直到今天看着依然很舒适的图形化界面。Charles 对于我的设计真的很宽容了,他从未说过「Dave 的设计稿真糟糕」这样的话,相反他以一种更隐晦的方式来推进事情。有天他来我的办公室并且对我说「我想要是能够为设计图标做一个设计竞赛倒是挺不错的」。

Norm Cox:Bowman 是负责程序开发的,他写了一个非常粗糙的图形化的程序,让我们可以能够在显示器上创建图形。Wallace Judd 是一个人因工程学专家(更加接近如今的交互设计领域),他写过很多关于这方面的论文,但是他在视觉设计上并没有太深的造诣。所以,最终我被邀请过去参与图标设计「比稿」,我们每个人都设计了一套,然后所有人都围着争论到底哪套更好。

△ 最早的UI图标设计比稿

Dave Canfield Smith:当我的设计稿被退回来的时候,我再看到它的时候,感觉像是有人指着我的鼻子在指责我一样,清晰,印象深刻。

Norm Cox:你要知道,这件事其实是我们设计思考的启蒙。我们在那一刻学到了重要的一课:我们做的东西不仅要好看,还要确保功能。通过可用性测试,我们开始关注更多的事情。之后,Bowman、Dave 和 Wallace 对我说「好吧,Norm,你去做吧。」于是,我就成为了官方的主设计,但是我们都很清楚,整件事情,从来都是团队努力的结果。

Dave Canfield Smith:其实我到现在还不明白汉堡图标的魅力到底在哪里,因为在我看来,它甚至不是一个图标,它只是一个符号。图标应该既具有视觉表现力,也应该有功能性的机器语义,而这个菜单图标仅仅只拥有前者。它并没有暗示任何其他和菜单相关的信息,它只是静静地在屏幕上。你捅一下它,然后弹出一个菜单,光标移开,菜单消失,就这样而已。图标应该包含隐喻,它应当映射到这个世界上一个客观存在的可操作的对象。

这件事其实是我们设计思考的启蒙。──Norm Cox

Norm Cox:在施乐之星上,每英寸屏幕有 72 个像素点,这个范围内你要能够传达你的想法。我们从施乐所制造的打印机和复印机的既有符号系统,以及道路上的各种标志中获得了很多灵感……

Dave Canfield Smith:对于电脑需要执行的绝大多数的指令和操作,在此之前是通过手动输入命令行来操作的,但是我们想到了更好的呈现方式。我们的大脑虽然很聪明,但是本质上是厌倦花费大量的时间来挑选最佳的执行方案的。所以,我们将绝大多数的功能以图标的形式直接呈现在屏幕上,而额外的操作则通过下拉菜单隐藏起来,你只需要额外多点一下就能将它们触发出来,而这就是汉堡图标的来源。

Norm Cox:在任何一个车库当中,总会有一个放置各种杂物的桶,里面有螺母和螺栓,钉子和抹布,以及一些难以分类的杂物。这就是汉堡菜单图标所对应的隐喻。就像没有完美的系统一样,也不存在完美的界面,就像 Dave 刚刚说的那样,你总会遇到各种各样不合适的东西。

Dave Canfield Smith:在当时,有一个典型的操作命令是「分页」(Paginate)。由于当时计算机的速度和容量不足,在文档界面中,电脑无法实时地显示文字和图片排版,所以你需要通过点击「分页」来预览整个文档。这是一个明显受限于时代和功能的操作命令,它有多愚蠢你应该能够感受到。我们并不喜欢它,但是它必须存在,所以我们把它藏在一个偏僻的菜单当中,这样用户就不用一直在主界面上看到它。我们想在用户面前展示真正有用的、重要的命令。

Norm Cox:对于这个菜单符号要使用什么符号来呈现,我想了很多,包括加号,省略号,下拉箭头。但是你仔细想想看,我们想要表达的含义是「杂项」,或者是「其他」和「额外」,上面三个符号本身和这个含义是相去甚远的。我想找到一个直观、易于解释且令人难忘的事物,来作为这个菜单的符号。

Dave Canfield Smith:三条横线所呈现出来的是一个抽象的图像,而它所对应的意象是你点击它之后所看到的东西的形象:菜单。

Norm Cox:如今你还会看到另外一个广泛使用的符号,三个垂直排列的小圆点,它更像是汉堡图标缩短之后的版本。

Dave Canfield Smith:从设计的角度上来看,它非常的国际化,因为它是非语义化的。你不希望你产品在其他的国家地区还需要针对这个图标进行额外的语言翻译,因为翻译还需要额外的占用空间,因为别人不理解。

Norm Cox:我们开始因此逐渐意识到用户在识别信息时的层次,用户在看屏幕的时候,他们会快速扫视寻找特定的形状,在形状匹配的情况下,再相对仔细地查看细节。就像当你注意到一个钻石形状的路标的时候,你是先看到路标本身,然后才注意到其中的细节文本。所以,我们需要确保你在界面中扫视的时候,不用扫视太多的内容。屏幕上每一个像素都很重要,不应该将无关的信息放上去,一切都应该有清晰的目标,额外的装饰是没有必要的。这些限制意味着我们必须设计一些优雅而简单的东西:永恒经典的设计风格。

Dave Canfield Smith:我们在竭尽全力避免混乱。我们希望它具备有一种独特的视觉吸引力,这样人们会花费更多的时间在界面上。

Norm Cox:如果你曾经关注过图标设计的整个历程,尤其是在苹果、微软两家的用户界面当中,你会发现图标从最初的简单的线条,随着像素密度的增加,逐渐演变成为极具真实感的写实照片一样的图标,包含阴影、高光和各种各样东西,再重新回到极为简约的线条和形状,这背后的原因其实和我们前面所说的是一样的。

Dave Canfield Smith:如今的 Mac 系统中,遍布着各式各样的菜单。但是在最初的施乐之星当中,我们只有一个下拉菜单,并且菜单中大多是单个命令。并不是我们当时所设计的功能太少了,我们当时的媒体文档软件中,包括了文本编辑、字体选取、布局工具、图片甚至嵌入式音频,内容非常非常丰富(你想想看吧,那是70年代中期)。然而我们在很大程度上并不需要那么多菜单。你难道不觉得这是一件非常奇妙的事情吗?为什么?因为我们在竭尽所能地去「概括」和整合命令,而不是去消除功能。使用按钮指令来完成任务,这是我发明的!Apple 的用户可以使用剪切、复制、粘贴、撤销这样的功能来完成任务,而在此之前,在施乐之星上,已经存在移动、复制、删除、撤销、显示属性、复制属性等一系列的基本的核心操作了。

你会发现图标从最初的简单的线条,随着像素密度的增加,逐渐演变成为极具真实感的写实照片一样的图标,包含阴影、高光和各种各样东西,再重新回到极为简约的线条和形状,这背后的原因其实和我们前面所说的是一样的。──Norm Cox

Ralph Kimball:我们一直在努力构建一个非常简单的用户界面,竭尽全力不去使用让用户感到迷惑的所谓的高级指令,让有经验的用户能够具备更高的工作效率。在施乐之星的开发过程中,我们需要为各种各样的问题作出非常具体的决策。

Dave Canfield Smith:我们希望人们能用施乐之星来做有用的事情,而不是让它成为一个复杂的东西。让复杂的事情变简单并不容易,我们为创造更简单的界面而竭尽全力去做事情。

Norm Cox:我认为我们当时并没有意识到当年那是怎样一个特殊的时刻。我们觉得自己是一群做着自己感兴趣事情的嬉皮士,但是如今来看,我们仿佛是借用技术的力量在整个世界的耳边低语,然后彻底改变整个世界。

下面是 1982 年,施乐之星的用户界面的使用视频:

结语

施乐之星后面的故事,是乔布斯和比尔·盖茨之间关于图形化界面操作系统的纠纷,你可以在很多地方读到关于这段历史的故事,但是这和今天的访谈内容无关。

我们应该向这帮最早的图形界面的创造者致敬,向这批最早的 UI 设计师致敬──如果一个行业需要有一个清晰明确的祖师爷的话,那么访谈中的三位应该是最早的 UI 设计师,是创造 UI 设计师这个职业的人(应该也是设计比稿的「受害者」)。

原文链接:An oral history of the hamburger icon (from the people who were there)
原文作者:DALE BERNING SAWA
优设编译:陈子木

优设大课堂

专业的设计流程是怎样的?来看腾讯高级设计师的实战案例全方位复盘!

飞线巴士小程序于 2019年1月18日在郑州正式上线运营。近期保持小步快跑,逐步优化迭代,强化产品功能,优化体验流程,目前 1.4 版本已上线。本文复盘在设计过程中遇到的问题与思考,阐述智慧交通设计语言的应用与实施。

项目背景

公共交通作为国人主要的出行方式,在高峰时段,仍会面临拥挤、等待时间长、需要换乘等一系列问题。定制巴士产品希望能帮助用户实现点对点的个性化公交出行需求,专车专线,提升出行乘车体验。做个有趣的比喻就是「打低调百万豪车不是梦」。同时,定制巴士也可以帮助公交集团实现科学配车,充分调动闲置运力资源,满足市民出行需求,双向协作,力求达到解决城市拥堵问题,建设智慧城市的目标。

基础沉淀

随着乘车码业务的不断发展,持续深挖公共交通出行领域潜在价值,衍生出公交、地铁出行助手、定制巴士等系列产品,经历 2 年的探索与沉淀,智慧交通设计语言逐步建立。

对外,统一的视觉语言帮助用户加深产品的印象,提高用户体验的完整性和一致性。对内,统一的设计原则,可提升设计与研发流程的工作效率,降低重复沟通确认与试错成本。同时让设计师形成统一共识,产品需要传递给用户的体验感受,以及整个系统的设计约束是什么。

关于推导过程可点击阅读《高手如何做设计?来看腾讯乘车码的实战过程全复盘!》一文。我们归纳整理出「模块化、信息聚焦、设计降噪、导向清晰」等原则,初步形成 Smart Metro 设计语言的雏形。这些基础原则指导我们进行体验一致化的产品设计,不断发展的业务与产品设计迭代中,持续沉淀与验证设计原则的准确性。同时也在此基础上探索出行细分领域中的个性化解决方案。

设计挑战

通过前期调研发现大部分竞品的定制线路多是公司或小区等集团合作的路线,对于个人用户而言,响应效率低、机动性差。而我们希望打造的产品正是要补齐这一点不足,降低门槛,无论是由企业还是个人都可发起线路,在出行前一定时间内拼够最低的成团人数,线路将自动生成并由系统派车,这样才算真正做到智慧定制巴士产品的核心──定制。

正是由于线路运营的性质变化,随机变动的线路比固定线路的信息量多出许多,信息量级增大,复杂性也更高。而用户在短时间接受的信息量有限,因此信息量过载带来的肯定是信息模糊的问题。那么如何让用户在信息感知上从模糊转向清晰?关键信息如何聚焦?辅助信息如何协助用户做决策?这些都是我们需要重点思考与解决的问题。

设计拆解

实际工作中,我们将问题打散拆解,重新梳理归纳。整个产品服务流程主要拆分为两部分:(理清体验流程触点)

  • 线上:发起拼车,拼车流程
  • 线下:找车、乘车

再结合实际场景与时间线去分析:(明确用户行为目标)

  • 流程中,用户需要达成的目标是什么?
  • 页面中,当下对用户最重要的信息是什么?将来对用户重要的信息是什么?

对流程进行有效地拆解之后,再在流程中对单个页面信息进行梳理与归纳,从而构建合理舒适的视觉模型。

构建视觉模型

学美术的同学都画过素描,一般画素描会先打框架,找大关系,再找关键点,找准明暗交界线,进一步重点刻画,最后再做细节的点缀修饰,正确表现对象的形体、空间和质感。构建页面的视觉模型其实和画画非常类似。

以飞线巴士首页为例,可以概括为:大关系,分重点,小提示 3 个关键点来构建整个页面的视觉模型。

1. 大关系

可以理解为对整体内容信息的分类,为了缓解大量信息对用户带来的视觉模糊,首先梳理信息之间大的逻辑关系,飞线巴士首页中搜索、我的行程、推荐线路作为不同类型内容的入口而存在,将三个内容通过模块化的设计,建立页面结构。

2. 分重点

在分清大的逻辑关系之后,通过关键信息的提炼与强化来增强模块之间的差异性。

如搜索模块在页面中的最顶层,起终点圆点图形标识、文案提示让用户能快速感知自己的位置并搜索想去的地点。

我的行程是用户正在参与的行程,重点提示用户关注时间与状态变化,票据样式增强用户参与感,提示用户去关注状态以及去使用。

推荐线路则是将线路信息重点展示,价格信息和指引信息一起引导用户操作,形成特定的信息组合方式。

找到模块内的重点信息,再针对不同的重点信息来进行视觉结构设计,增强模块之间的差异性,同时提升用户识别信息的效率。

3. 小提示

最后再将信息的关键要点进行概括,由少量文字组成,形成一个小标签来做信息大关系的一个小提示,帮助用户更好的类比信息,理解信息。

信息结构化

信息以简洁和结构化的方式呈现,帮助用户更易于接收和消化信息内容。视觉层次的构建很大程度上依赖排版。我们必须围绕内容进行设计,有效的传递信息,赋予内容形式,为内容服务。

Jeff Johnson《认知与设计—理解UI设计准则》中提到利用格式塔原理对信息进行排版,是视觉识别模型的其中一种,也是在视觉设计中应用得最多的。例如将相关内容组织到一起,使他们的物理位置接近,相关的内容被看成一个信息组,这就是接近性原则。如果多个信息组放在一起我们就会将他们归成一个大类,这就是相似性原理。这些原理在工作中不是独立存在的,而是综合运用的。

我们对所有流程中的信息进行梳理,提取共性,同时根据不同的使用场景差异化的展示,将信息以特定的组合方式有规律排列,形成结构化的信息模型,增强视觉识别性与体验记忆点。帮助用户高效获取他们想要的内容,并达成目标。

焦点指引

在用户使用我们的定制产品时,我们需要帮助用户明确每一步需要做什么事情,强调突出指示信息,从视觉的角度来说,大致可以归纳为:大小、粗细、多少,以此来控制一个页面的节奏感。

大小也就是字体的大小、粗细就是字体重量的区别,多少也就是间距疏密关系的把握。我们通过强化的页面标题,以通俗简短的语句,清晰明确此页面的操作指引,明确用户所需要做的事情,帮助用户做出每一步的选择完成出行目标。

通过间距来划分,运用更大的空间来间隔,构建更加清晰干净的界面,易于阅读同时也让阅读得到休息,形成阅读的节奏感。拉长距离引导关注,可以通过增加元素周围的空间使元素更显著,只要确保留白的页面空间能通过内容去引导视线,同样起到焦点指引的作用。

如在乘车凭证的设计,将乘车口令信息以夸张的、大的加粗字体放置在页面中同时增加上下左右的空间,形成一个强烈的视觉引导,让乘客与司机都能非常清晰地看到口令信息,验票上车。把更多的传达融合在更少的元素中,设计降噪,我们需要减少不必要的干扰信息,尽量简化精确内容,形成焦点指引,让用户降低疑虑与抉择的时间。

服务设计

在定制巴士这个项目中给我最大的感受,就是更加近距离地深入接触到了用户。对于定制巴士产品而言,除了在线上产品做到好的用户体验之外,更重要的还有线下服务体验这一环是否能够给用户提供良好的乘车感受。所以我们要在线上产品设计中做好拼车流程指引,线下流程也需要做好找车乘车的服务指引。

因此在产品上线前我们做了一轮用户调研,通过众测与跟访去发现在产品服务流程中存在的问题,也是根据用研中发现的问题持续优化迭代。

对于拼车出行流程中线下找车困难的问题,我们加入了同站名导航提醒的指引,优化地图信息样式等方面帮助用户更好的使用产品。对于线下服务流程,我们多次跟访用户,观察用户的行为与体验,优化了司机的行为规范给到合作方,如司机停车必须打双闪方便用户找车,司机必须佩戴工作袖章,优化司机验票流程等等。

我们关注着数据上的变化,关注着用户的每一次出行,在促成拼团成功率方面我们还在与产品做进一步流程与功能优化迭代,希望有越来越多的用户得到更好的出行体验。

积极地与用户保持沟通,建立核心用户群,培养种子用户等。用户也非常积极地反馈自己的想法,同时给出许多珍贵的意见与思路帮助我们优化产品。热心的用户甚至会主动自发宣传我们的产品,接触到的每一个用户都那么鲜活与真实。

写在最后

对于公共交通出行,我们在探索更合适的设计解决方案,持续沉淀更多的设计思考。

在当下的产业互联网趋势下,定制业务也将不断接入更多的城市,不同的城市业主方都存在不同的地域特色与商业诉求。作为设计师能做的还有很多很多,我们不再只关注产品视觉设计层面,需要更多的走出办公室,走到川流不息的城市中间,走到真实的用户身旁,悉心观察、用心感受,站在更全面的角度去思考关于整个产品服务设计的方方面面。

设计语言也不再只是简单的规范文档,或者一组研发组件,而应该是一个不断摸索,随着业务发展而动态调整的设计系统工程;我们将会持续验证与完善我们的智慧交通设计语言,努力做好不同业务需求的设计支撑。后续智慧交通设计团队将在不同业务中,为大家分享更多不同城市、不同出行细分领域下的个性化解决方案,敬请期待。

欢迎关注「腾讯FITdesign」公众号:

优设大课堂

为什么高手的配色那么抢眼? 原来是用了CMYK 配色法!

界面配色

2016 年玩追波的时候,有幸加入了 FreedomUnion 团队,当时团队内的小D(Dea_n)的界面渐变风很受欢迎,他使用的颜色干净、舒服、有感染力,很快形成了自己特有的设计风格。

我被他的配色深深吸引了,特别想研究他的配色,就尝试把他的作品在 PS 中打开,尝试吸色,找找他经常使用的配色范围。为什么他配出来的颜色就很吸引人,长时间看眼睛也不会太累?下面先欣赏一下小D(Dea_n)的设计作品。

作品已经过了三年了,如果是一般的配色作品应该看上去会有些过时,但是小D(Dea_n)的作品看上去并没有,还是有不少作品的配色现在看上去也是很前卫的。一起来看看我对小D(Dea_n)的大部分作品的吸色情况吧。

小D(Dea_n)的用色着实很大胆,很多都是贴边用色。我上大学的时候,老师曾经说过尽量少用贴边的颜色设计,包括灰色也可以使用带有颜色倾向的高级灰。这下终于明白了为什么小D(Dea_n)的配色这么亮眼。

当然我也有自己的小发现,我发现每个的作品主配色的 CMYK 值总会有两种色值为 0%,比如C:0%、M:91%、Y:95%、K:0%。

难道只是偶然?当时我也请教过小D(Dea_n)是否是刻意的,得到的答案是并没有。然后小D(Dea_n)靠自己卓越的配色能力进入小米 RIGO 设计团队。

当小米 miui9 系统官网海报出来的时候,我把作品拿到 PS 一吸色,结果告诉我小D 一定参与了这个作品的配色设计。那为什么只有黄色的 CMYK 的色值是有 3 种颜色混合而成的。

难道仅靠着一点吸色就可以肯定 CMYK 配色方法的存在?CMYK 配色方法是不是只存在 UI 界面设计中?CMYK 配色方法可不可以增加它的扩展性?CMYK 配色方法可以作为一种配色方法帮助设计师完成色彩搭配的工作吗?带着这些疑问我继续研究配色。

图标配色

我们来看一下「子弹短信」的应用图标,它的用色基本符合之前说的 CMYK 配色方法,当然是不包含子弹上的深色调。渐渐地我发现 CMYK 配色方法的路子越来越宽了。

Asher 是追波绘画写实图标的大神,他的写实作品配色饱和度高,光影通透到位,需要很强的手绘功底。在他的设计作品中除去暗色调和深色调的部分,其他配色基本都使用了 CMYK 配色的技巧。

大厂系统规范

我们都知道 iOS 系统和 Android 系统,在他们各自的系统规范中对配色也有相应的规范。我们提取两大系统规范中的配色进行吸色分析。

一顿猛吸之后,发现大厂系统规范的用色也基本符合 CMYK 配色方法的标准。

前段时间 IBM 重新定义了他们的设计语言,在产品配色中 Blye 60、Alert60、Alert40、Alert20、Alert50 等主要配色都符合 CMYK 配色的方法。

配色中的主色或品牌色

近期很多互联网公司进行了品牌改版,深亮色调到浅亮色调慢慢成为一种趋势。

新版的 Facebook LOGO 从深蓝色变为亮蓝色,字体则继续保持原样。其中 CMY 值进行适当减少。除此之外,图标部分也由原来的圆角正方形变为圆形,图标中的「f」从偏右的位置移到圆形的中间位置。

全球旅行者喜爱的民宿预订平台 Airbnb 的品牌 logo 主色也符合 CMYK 配色的方法。和 2019 潘通流行色珊瑚橘很接近。

微信 7.0 版本使用了经过调整的全新图标。图标除了原来绿色渐变的背板变浅外,两个标志性的对话气泡与背景板的比例也做了相应的调整。色彩的 CY 值减少了。调整后的新版图标除了空间感和符号感也更强外,整体变得「更轻」了。

在网易云音乐 6.0 版本中,对品牌 LOGO 再次进行了调整。新版网易云音乐图标最明显的变化为红色的主色调,其次为「留声机」和「音符」组合而成的图形部分。

红色较之前变得更加明亮,同时图标红色背景由之前的纯色改为轻微的红色渐变填充。新的红色着重考虑了用户长时间使用屏幕造成的视觉疲劳,采用比较「轻」的色彩可有效降低这种问题。其中颜色 CMY 三种色值都有减少。图形部分,新版图形缩小了中间交叉部分的面积,顶部向右弯曲的弧形变大。整体效果较之前更加清晰,特别是在更小的应用尺寸中,其展示的效果明显要比之前的好。

不同颜色CMYK的色域范围

看到上面的描述是不是特别想知道当 CMYK 中的两个色值同时为 0 时,不同颜色的色域范围?带着这样的想法,把红橙黄绿青蓝紫中每类选一种颜色进行区域研究。打开 PS,在拾色器中截取不同颜色的色域范围如下:

上图白色区域就是在红色 C 值为 0、K值为 0 时的色域范围,范围还是很小的。

黄色的 CMYK 色域很奇怪,在色相 38-58 度的黄色纯度最高时,CMY 都有色值。也就是 PS 里面最纯的黄色也是由 CMY 复色调和而成的。这也是为什么之前黄色使用时,CMYK 色值是由三种颜色混合而成的。

上图白色区域就是在绿色 M 值为 0、K 值为 0 时的色域范围,范围开始慢慢变大,意味着绿色高饱和度的可使用颜色越来越多。

上图白色区域就是在绿色 M 值为 0、K 值为 0 时的色域范围,范围也开始慢慢变大,大体范围和绿色相当。

上图白色区域就是在蓝色 Y 值为 0、K 值为 0 时的色域范围,范围应该很大了。

上图白色区域就是在紫色 Y 值为 0、K 值为 0 时的色域范围,范围和蓝色的色域范围相当。

上图白色区域就是在洋红色 Y 值为 0、K 值为 0 时的色域范围,范围和蓝色、紫色的色域范围相当。

1. CIE

从理论上讲,可见光分布的色彩域就是 CIE 所表示的色域。在颜色感知的研究中,CIE 1931 XYZ 色彩空间(也叫做CIE 1931色彩空间)是其中一个最先采用数学方式来定义的色彩空间。从 CIE 图中能看出冷色的区域远远大于暖色的区域。其中黄色和红色的色域范围相对较少,完全符合 PS 拾色器里面的色域范围。

2. RGB

RGB 是计算机荧光屏显示颜色的色彩方式,它们是由 R、G、B 三种发光质通过加光混合产生的。RGB 色彩模式是一种加色模式,将红光、绿光和蓝光以不同的比例相加可以合成各种各样的色光。R、G、B 三种颜色各能产生 2 的 8 次幂,即 256 级不同等级亮度的颜色。256*256*256 即 16777216种颜色。RGB 色彩模式主要用在电脑显示器和电视上。RGB 色彩模式是绘图软件最常用的一种颜色模式。

3. CMYK

CMYK 由C(青)、M(品红)、Y(黄)、K(黑)四色高饱和度的油墨以不同角度的网屏叠印形成复杂的彩色图片。CMYK 色彩模式是一种颜料模式,它利用色料三原色混色原理,加上黑色油墨,形成各种各样的色彩。

这种模式属于相减混色模式,广泛运用于绘画和印刷领域。CMYK 的色域范围比 RGB 的色域范围要小,某些色彩无法用 CMYK 油墨印刷出来。当这些不能印刷出来的颜色出现时,在 PS 的「拾色器」对话框上会显示一个带感叹号的三角形警告标志,表示这些颜色超出 CMYK 的色域。即使设计了比较鲜艳的颜色,如果超出了 CMYK 印刷颜色的色域,计算机就会用一个接近它的较灰暗的颜色去顶替它。可见大部分 CMYK 印刷颜色的色域小于 RGB 屏幕颜色的色域。

我们来仔细研究下 CIE 色域范围,CMYK 当中的黄色色域值有一小段超过了 RGM 的色域值。这就说明黄色的更饱和的 CMYK 的原色和间色可能在 RGB 的范围之外。

其他的我们还有一个方法去验证。就是在 PS 里面新建颜色模式为 CMYK 的文件,打开拾色器界面,把颜色调到右上角改变色相值的 0-360度 的范围。色相在 38-58 度的黄色区域对话框上不会显示带感叹号的三角形警告标志,表示黄色区域的 CMYK 色域值是超过 RGB 的色域值。这就是为什么 iOS 系统规范中的黄色色值必须是三种颜色混合而成的。这时候特殊的颜色就需要特殊处理。

CMYK配色法使用技巧

CMYK 配色法就是两种颜色的色值为 0%,但是黄色因为色域问题是由三色组成的(c值尽量小于10)。

色域集中在纯色系的范围,浊(灰)色系和暗色系除外。

界面的主色(纯色系为主)、图标设计、品牌色(纯色系为主)都可以使用 CMYK 配色法。

总结

CMYK 配色法目前多适用于互联网产品,虽说在创意上要敢于创新,但在实际的工作中还是需要理性地根据公司品牌和产品定位,合理地进行色彩搭配。目前此方法没有更多的理论依据支撑,如有疑问希望多多交流。

欢迎关注作者的微信公众号:「水手哥学设计」

优设大课堂

为什么有人工作才两年,能力就远超过五年的设计师?(十)

那些工作两年的设计师,为什么成长速度这么快?本系列邀请了多位设计大咖,为你揭秘他们快速成长的秘诀。

往期回顾:

大家好,我是彩云Sky,感谢优设的邀请,借着这个机会跟大家分享一些我的经历,聊聊如何学习与成长。

先简单介绍一下自己:我是 2013 年开始参加工作的,大学学的是计算机专业,工作后做过开发和设计。从不到 10 人的小公司一路打怪升级到现在来到腾讯,我算是幸运的。一路走来,收获了一些经验,希望我的分享能对大家有所帮助。

优设:

刚进入职场的设计师,应该培养哪些能力才能快速成长?

彩云:

以我自己的经历来看,我觉得最主要的就是自学能力,其次是专注,和多多练习。

1. 培养自学能力

自学能力的培养对我来说,是对我职业生涯影响最大的一件事。记得还在学校的时候,因为玩游戏想做帮派宣传片,自学了 Vegas 和 AE,整天泡论坛,翻教程,可以说我的自学能力是从大学的时候就开始在培养了。到毕业后,边做开发边学设计,一路走来,靠的都是自己自学。

我认为,在如今这个时代,自学能力几乎是一个人最为核心的竞争力之一,对于技术来说,更新换代实在是太快了,以至于等到别人能把经验分享给你的时候已经有些晚了。如果有良好的自学能力,就能快速适应项目需要,成为项目的推动者。比如我最近项目中需要用到 Unity 游戏引擎,虽然以前从未用过,但通过自学,不到 1 个月就能基本掌握游戏引擎的运用并在项目中发挥作用,如果等我报班学习,那肯定是来不及的。

那如何自学一个全新的知识呢?这里分享一些我自己的经验。

核心原则:先做,遇到问题再找答案。学东西,一定是有自己的思考才能学的更好,先按自己的想法去做,遇到问题再搜答案,这样才能把一个东西掌握好。

对于看教程,一定是带着问题和目的才能更有收效。现如今,网上可以找到的资料太多了,要把那些资料当字典,当你需要的时候,来翻翻它就好了,不要贪多。千万不要漫无目的地逛教程网站,看到感兴趣的就学,这样很容易分散精力,容易浮躁。比如网上有非常多炫酷的 AE 特效教程,几乎每一个你都想学,但东一榔头西一棒子,你会发现关掉教程,依然还是不会做东西。其道理,就是没有学到思维方式,而这种思维方式一定是通过自己大量的思考和练习得来的。

如果是看视频教程的话,对于重点知识,我一般的方法是看 3 遍:第一遍用 1.5 倍速快速过完,了解大致讲的什么内容;第二遍会照着做,一定要跟教程做的大致一样,不允许放过细节,往往深挖细节能学到更多;然后关掉教程,自己再做一遍,做的过程中有什么问题随时记录下来,然后再看第三遍教程,反思自己哪里还没有掌握好。

另外,还需要确定好阶段性目标,有目的地去学习,最好固定时间,每天坚持。比如,我最近这段时间就学 unity 引擎,那么我就给自己定一个计划,每天至少看完一个知识点并力求掌握。看的过程中,遇到重点知识,动手操作,加深理解,有可能做的时候就会遇到问题,把问题解决,基本上就掌握了。

2. 专注一件事

天天逛设计网站,大神太多了,什么都想学,什么班都想报。虽然多学一点总没错,但如果每一个知识都是浅尝辄止的话,可能会让一些人更加迷茫,造成一种什么都会一点,又好像什么都不会的错觉。

我的建议是,一段时间内,只专注做好一件事。比如,你可以给自己定一个半年计划,这半年内,只专注于 c4d,其他想学的内容就先放下,然后再具体分解下这半年内的每月或者每天应该做什么。比如,可以是提升建模能力,每天建一个模型,把家里能看到的东西都做一遍;也可以是为了提升渲染表现,每天渲染一张效果图等等。总之,最好把计划写的足够具体,并且可执行,定时完成,专注一件事,形成习惯,这样提升最快。

有些人担心自己很难坚持,问我是怎么能长期坚持做一件事的,这个我后面再讲。

3. 多看,多练,少说话

刚工作的前三年,其实本不该迷茫,你需要的只是多做而已。经常有朋友在公众号留言给我,说刚参加工作,作品很差,不知道怎么提升,很迷茫。迷茫大多数都是因为手上的能力跟不上自己的想法。其实,谁的作品也不是生来就好的,只是别人花的时间比你多,做的多而已。这个阶段,唯一可以快速提升自己的就是埋头苦练,别被市面上各种文章公众号忽悠,全链路,全栈等一堆专业名词,各种高大上。对于设计师来说,如果手上功夫不行,天天各种理念,落不了地,也很难有说服力。少说话,干就完了。

优设:

您有哪些坚持了三年以上的工作和生活习惯?

彩云:

不知道坚持了 3 年以上还在做设计算不算?哈哈,开个玩笑。在工作上坚持了 3 年以上的习惯就是每天做计划和总结,这个习惯对我来说帮助很大。我会在每天早上刚到公司或者去公司的路上,写下今天内的计划,并排上优先级,然后到晚上下班的时候,再复盘今天完成的情况与收获。我还会记录工作中遇到的问题,有些会直接写上当时的解决办法,有些没能及时解决的,就会把问题继续保留,等有空的时候再来解决。

这个习惯从 2013 年刚工作就坚持在写,到现在已经写了超过 1000 篇(工作日记录),这个方法帮助我提升了总结和写作能力,在写文章,总结时非常有帮助,有兴趣的朋友也可以试试这个方法。

生活上的习惯,就是我会让自己的生活尽可能的规律化,因为有规律才好落实计划。有很多人好奇我的时间作息表,觉得我工作已经那么忙了,为什么还能有时间做到每天锻炼,做练习,每周还能做译文,我也借这个机会分享给大家吧。

我最近每天早上大概 6 点 40 起床,然后会花半个小时做口语打卡或者做早餐,大概 7 点 40 出门,然后在班车上听英语或者看看公众号文章,工作前会花一个小时左右看看设计网站,优设,dribbble 之类的,有不错的设计就会用 eagle 收集起来。中午的时候,大概也会花上一个小时时间看看国外设计媒体,了解最新的设计相关资讯,觉得不错的就会申请翻译授权,然后分享给大家。晚饭后,继续加班或者学点自己想学的东西,最近一般都是 9 点后下班,大概 10 点左右到家。到家后,会花 30 分钟时间按 keep 上的课程来锻炼健身,洗漱完毕大概 11 点后,再花 40 分钟到 1 个小时左右,看看视频教程,动手做点练习,然后大概在 12 点半左右睡觉。周末两天,没别的事的话,大多数时候会花 1 天时间做译文,另外一天抽空学点东西或陪陪家人。

写的比较流水账和具体了,但我几乎每天都在坚持这套时间表,规律成习惯,也就没觉得很难了。

对于时间管理,还是那句老话,时间就像海绵里的水,挤挤总是有的。

优设:

对你职业生涯帮助最大的习惯是什么?

彩云:

最大的习惯就是持续学习,并且不局限于设计。

记得我还在第一家不到 10 个人的小公司时,因为有很多自由学习时间(在那家公司唯一的好处就是老板不管我们),学习兴趣非常高。那时候,我基本上除了要做少量需求外,其他时间全部拿来学习,还利用每天在地铁上的一个小时看完了好多本英文小说。晚上回到家,基本都是在看教程和做练习中度过的,当时住的地方连桌子都没有,还是拿了一个小桌板在床上学的,想想也算艰辛,但却没觉得苦。那段时间过的非常充实。

当时坐在我身后的开发老哥说: 「当年我刚毕业的时候也跟你一样,但现在工作 5-6 年了,已经没了斗志,要是你能一直这么坚持学下去,肯定不得了。」我一直记得他说的这句话,一转眼,我现在也工作了 6 年了,虽然还没有变的不得了,但我庆幸我对学习还保持着浓厚的兴趣,面对新的知识还是充满好奇心。

能长期坚持做一些事情,我也有我自己的一些方法。

给自己清晰的,可量化的目标。拿我之前在朋友圈连续 100 天打卡界面来举例,假如有以下两种计划:

  1. 给自己定了 100 天提升 UI 设计能力的计划,但没有写具体怎么提升;
  2. 100 天提升 UI 设计能力,每天做一张界面并列好这 100 天中每天要做的界面主题,比如美食,旅游,阅读等等,并在朋友圈打卡。

显然 2 就是一个可量化,并通过自己的努力和朋友的监督能达成的一个计划,至于 100 天后 UI 能力到底能不能提升,别迟疑,先做再说。

我一般在学习兴趣降低的时候,会去挑一个全新的东西来学习。因为我发现,学习一样东西,从完全不会到稍微会一点的时候是最激动的,最容易激发学习的斗志。然后等到这门知识陷入困境的时候,再回头来看看之前的,这样跳跃式的学习方法可以让自己保持学习的状态。

不断正向激励自己。当你因为坚持一件事而有收获的时候,就能体会到一种成就感与满足感,记住这件事,哪怕只是坚持了一周的计划,也在心里把它作为激励自己的事情。在心里暗示自己,我坚持一周就完成了这么多,坚持一个月,坚持一年呢?不断给予自己一些正向激励会让自己进入一个良性循环,更不容易放弃。

优设:

有哪些不注意的小习惯,长此以往对设计师有害?

彩云:

从我自己遇到过的情况来看,我觉得有一些小习惯比较常见,其实不大好。

认为简单就不动手做,但真相往往没那么简单。看教程时,觉得很简单,不愿意亲自动手去做。但其实,往往是有很多不知道的细节被你忽略了,而动手做的时候,因为每一步都需要自己思考,才可能会发现问题。

明明能搜到的答案,却要到处问。且不说,到处问人比较费时间,同时也让自己失去了解决问题的能力。很多人遇到问题,都不知道在搜索引擎搜什么关键词,究其原因,还是因为自己主动搜的少了。找答案也是需要练习的,长期不练,怎能娴熟?

喜欢加各种群,美其名曰聊设计,聊着聊着就变成吹水了,而且还能让很多人上瘾,不忙的时候,不知不觉就是一个下午。其实真正加群能学到知识的,少之又少(我自己的交流群例外,基本上有闲聊我都会警告,学习的氛围还不错。),真的有困难,私聊更好。工作的时候,少看 QQ,微信,锻炼自己忍受消息红点的能力, 你会发现你的生活自然就充实了起来。

只做执行,不注意总结。埋头苦干,丢一个需求过来就做,而不问前因后果。纯执行的岗位,很容易被替代掉,你会做别人也可以,而一个人的思维却是很难培养的。每做一个需求,一个项目,多注意总结思路,对自己的成长很有帮助。

只收集,不注意归纳。平时喜欢收集各种网站,教程,素材,字体等等,而不做整理。单纯的收集意义并不大,到用的时候依然只是躺在自己的收藏夹中,发挥不了什么用处。

最后,推荐一些我经常看的或用的资源。

网站

App

  • 每日英语听力:资源量很大,里面我觉得不错的有 ESLPod 和 CNN 两个板块适合订阅,大概 20 分钟一节,语速偏慢,我每天路上听完一节正好。
  • 轻课小程序:口语课挺不错的,发音很标准,跟读也不错,每一节大概 20 分钟,我最近都在练习。
  • 有道云笔记:免费,不限制终端登录数量,随时记录很方便。

最后再推荐一下我自己的公众号。每周会定时更新一篇原创精选译文,每一篇外文我都是精心挑选,翻译保证质量,力求让大家看到国外最新的设计资讯,目前已经持续更新了 490 天,共 70 篇译文,也期待大家关注。

欢迎关注作者的微信公众号:「彩云译设计」

优设大课堂

用阿里巴巴APP的案例,教你如何快速适配「深色模式」

2019 年的两场重量级发布会 Google I/O 和 Apple WWDC 终于落下帷幕。在各种新奇科技资讯中大家会有趣地发现两家公司不约而同的发布了手机系统的 Dark Mode(Theme),大众群体可以在随后的几个月内升级 Android Q 和 iOS 13 体验暗黑色彩模式的 UI 界面。

预感Dark Mode这个词今年要火了!

ICBU 设计团队的小伙伴们迫不及待地从有限的零散资料入手快速试验解读,就「暗黑模式」下的体验设计进行了总结和探索。仅供抛砖引玉,欢迎一起探讨。

简单回顾下近几年 UI 发展历程,暗黑模式其实并不是全新概念:

  • 大家感知比较深的应该是2018年 MacOS 10.14,这个电脑端 Dark Mode 已经受到不少好评;
  • 再往前追溯,前几年的 Windows10 早就支持了暗色模式;
  • 还有设计师最熟悉的工具软件 Adobe 系列和 Sketch 都或早或晚的开始了暗色界面风格;
  • 国内神机小米也在最新 MIUI 10 中加入了深色模式;苹果在 iOS11 里试验了「反转颜色」功能……

暗色体验的转变早已开始潜移默化的演变。

以 Alibaba.com App 为例,我们先快速预览下暗黑模式下的 App 界面。

暗黑模式为什么受到追捧?

IT 大佬们为何纷纷把 Dark Mode 纳入自家的设计体系?

1. 暗光环境下使用场景

随着人们对智能机的依赖性越来越强,设备使用时间也高频覆盖了白天、黑夜,所以暗光环境的使用需求被实实在在的摆到台面上。

以设计职业为例,2019 年阿里经济体设计师大会上分享的数据结果,设计师群体通常要在晚上工作 5-6 个小时。

2. 屏幕亮度造成的「光污染」

长时间使用智能机导致视力下降已经成为不争的实事,我们无法摆脱工作生活中对智能设备的依赖,但是可以通过设计&技术手段降低高频亮屏对眼睛的损害。所以 Dark Mode 可以降低屏幕的整体视觉亮度,减少对眼睛的视觉压力。

3. 节能耗电

现在主流的智能机屏幕越做越大,屏幕越做越亮,OLED、AMOLED 都成了耗电大头,而手机却越做越薄,电池在本身技术蓄电量不能跳跃式发展的前提下只能为轻薄机身做让步,所以手机续航能力的问题也日益严峻。即使是评价口碑领头羊的 iPhone 系列也不免要为提升续航寻找最优解决方案,可以降低设备耗电速度的 Dark Mode 优势突显出来(由于 OLED 屏幕中每个像素都是自主发光,所以在显示深色元素时像素所消耗的电流更低,尤其在纯黑颜色时像素点可以完全关闭达到省电的效果)。

4. 专注内容

色彩具有层级关系,深色会在视觉感官上自动后退,浅色部分则会向前延展,这样的对比强烈的层次关系可以让用户更注重被凸显出来的内容和交互操作。尤其在信息负责界面内层级关系的合理拉开对操作效率都有明显的促进作用。

5. 信息保护

有趣的测试发现,暗黑模式下的屏幕信息在非正视角预览时,信息的辨别可视性反倒会降低。当色彩运用得当,可以让暗黑模式下起到一定的信息保护作用,如 Alibaba.com 贸易客户端用户对个人信息具有一定的隐私性需求。

需要特别注意的是 Dark Mode 不只是为夜晚使用,它也不完全代表夜间模式。除了前面提到的硬件营销和体验需求,用户也极有可能在白天打开暗黑模式,这就意味着 Dark Mode 模式下必须让界面的信息交互在亮光环境下依然保持清晰的可视性。

同时国际上有针对满足身体障碍人群的使用需求的通用标准,今年 Google I/O 大会上重点讲解的Live Caption 就是为解决特殊人群用户的使用障碍。同样在 iOS & Android 的设计语言中也在重点说明满足色盲色弱用户的使用需求的 WCAG 2.0(Web内容可访问性指南),这些都是需要设计师着重考虑的地方。

「暗黑」时代已到来,设计师如何接招?

我们以 Alibaba.com App 为例,快速研究了 Dark Mode 模式的无线 UI 升级适配。

1. 暗黑UI不是简单的反色处理

暗黑主题是一种弱亮度 UI ,主要显示深色的界面。暗黑主题通过大面积使用黑色(深色)、颜色的减少减弱,降低了设备屏幕发出的亮度,同时也满足了最低色彩对比度的要求。有助于改善眼睛视觉疲劳,同时节省电池电量(具有 OLED、AMOLED 屏幕的设备利用关闭黑色像素来显示黑色)。

结合平台设计语言去看,比如 Android 以卡片层级为主的设计思路,那么在黑暗主题下就是提高卡片的层级:使用最暗的颜色作为主要背景,利用卡片高度的叠加来显示灰度的变化。卡片高度越高,颜色越浅。

iOS 13 设计规范中给了一组系统级别颜色适配光、暗黑模式下的色彩变化需求,仔细分析会发现在保障原色系基础上,适量增加对比度&降低透明度。

举个例子,Alibaba.com 以亮橙为品牌色的产品,更要慎用饱和度过高和过深的颜色。在使用品牌色时,需要考虑到颜色是否适合于深色(黑色)的背景使用。也可以使用品牌延展色(浅色)或辅助颜色,既保持了对比度,不易产生疲劳感,也满足了界面的美观。所以暗黑模式下对色彩做了降级处理,保障清晰度的同时避免亮色与暗色依然会形成刺眼的视觉效果,反倒会降低对比识别度。

2. 注重用户的观感体验

以文字颜色配比为例,传统浅底深字的界面,因为对比度较强,阅读时间长后眼睛容易产生疲劳感。通过黑暗模式的深底浅字,减少了屏幕中发出的光,也满足了最低色彩对比度要求。但暗色背景上的浅色文字也要把握尺度,避免亮度过高会产生的视觉疲劳。

3. 「亮&暗」顺畅切换适配原则

从用户需求出发,保持常规主题和暗黑主题的流畅切换的适配原则。

设计方案需要满足常规主题&暗黑主题的同时适配:在Android Q & iOS13 中,用户可能随时在这两个模式间进行切换(iOS支持设置时间段内自动切换)。因此需要在设计和开发 APP 的时候,同时兼顾到这两个模式下的使用体感。

4. WCAG 2.0 标准(Web内容可访问性指南)

WCAG 2.0 是国际公认的通用标准,在某些西方国家甚至作为评判产品优劣的重要指标,所以涉及到有海外用户的 App 尤其要关注这个标准。

保持足够的对比度:利用深色(黑色)主题色来配上浅色文字,将对比度控制在 4.5 : 1 的基础上,满足了 Web 内容无障碍指南的 AA 级要求。

这里给大家分享一个查询对比度的实用工具 Contrast-ratio.com 来检测文字和背景是否符合规范。(注意:在实际的项目中也并非所有的内容的对比度都在 4.5 : 1 之上)

使用不同透明的文字来表达层级关系:在深色主题上进行多层文字(浅色)表达时,可以对文字进行降透明度的方式来设计,越重要的文字透明的数值越低(对比度越高),非重要的文本信息透明的数值越高(对比度越低)。

5. iOS 13&Android Q暗黑模式对比(还在研究中…)

仔细解读 iOS & Android 两套设计语言可以发现它们的 Dark Mode 策略其实有所不同,除了在基础色彩体系的数值有些差距外,更明显的是在 Accent color 的不同处理方式。

iOS 13 在颜色把控上减少亮暗两种模式下色彩产生的较大幅度变动。

Android Q 则强调保障清晰观看体验的前提下,要具备更多的灵活性,比如在原色彩上面加 40% 的白色透明遮罩,以增强在深色背景上的清晰对比度。缺点可能会让原色彩在感官上发生较大的偏差。

6. 初步发现的「坑」

浅色为主的图片、视频等图像内容信息

以电商 APP 为例,不可避免有大量商品图片元素,并且在目前主流图片规范引导的是干净的浅色底为主,就会形成下图中「Dark」所示,产品图区域比较突兀。简单高效的解决方案还需要不断测试,如:阿里达摩院的智能算法抠图工具「顽兔」也许可以实现产品图透明底,以配合不用背景颜色的需求。

开发团队视角,暗黑模式实现成本

Android Q & iOS 13 因为采用不同的暗色视觉方式,所以如果遵循各自平台的官方规范做适配,极有可能导致同一个 APP 在两端的品牌视觉有较大差异,不利于给用户建立统一严谨的品牌心智,所以可以尝试 follow 其中一端的标准,改动另一端。或者跳出两边官方规范自成一套暗色视觉体系,需要根据每个产品的情况自主选择。

暗黑模式对开发的工作量也是一个不小的挑战,尤其是规模庞大的复杂 APP,同时有 Native、Weex、Flutter 等代码结构时,想做 Dark Mode 适配不是一件简单的事情。

总之,如 2016 年的「刘海屏」一样,不管喜不喜欢,它就这样闯入你的世界。

Dark Mode 带来的暗黑体验势必要让视觉设计师们耗费一番心思。试想当用户把手机切换到暗黑模式下舒服地享受着暗色系的舒适宁静时,打开一个没有做适配的 App,会犹如深夜睡觉突然被打开灯,心里会痛苦地呐喊「关灯」。

Dark Mode 到底会带来多大的革新浪潮,大众用户接受度都还需要时间的验证。虽然现在只有零散的官方谍照,也缺乏详尽的官方规范文档。但是抱着与时俱进的心态,ICBU 设计将联合技术团队开始对 Dark Mode 做对应解决策略的研究开发。

欢迎关注「阿里巴巴国际UED」公众号:

优设大课堂

IP 形象可以怎么用?用百度和天猫的案例给你完整示范!

@完美的Z先生 :近年来互联网公司纷纷打造自己的 IP 形象,一方面是 IP 形象能让用户快速建立品牌联想与品牌识别,另一方面是 IP 时代的到来,这个大时代可以从品牌学、社会学、经济学原因来分析。

  • 品牌学原因:年轻用户对于卡通二次元的喜爱,让产品品牌在 IP 的使用上找到了契合点,让 IP 在产品上进行多次传播,实现品牌价值的输出,因此活用 IP 形象可以打造很好的宣传活动。
  • 社会学原因:人有寻找同类的极度渴望,年轻用户通过喜爱的品牌表现出自己的个性,使得 IP 在社会中得到了爆发式的传播。
  • 经济学原因:IP 是经济时代的「吸粉神器」,IP 自然顺势爆发,逐渐成为新的增⻓引擎。

那么 IP 与品牌到底是什么关系?下面我用一张品牌全局设计思维图让大家一目了然地看出 IP 与品牌的关系。

从图中可以看出 IP 属于品牌设计这一环节里的,我想打造 IP 的公司一定是看中了 IP 在品牌宣传上的优势,那 IP 到底有什么优势呢?

  • 实现品牌差异化:IP 具有鲜明的人设与性格,拥有更多人性化特征,富有生命力。
  • 亲和力:可以实现品牌与消费者之间的零距离互动。
  • 自带粉丝力量:转化粉丝成为品牌客户,提高品牌的认知度和好感度,扩大品牌的影响力,并帮助品牌实现跨形态、跨时代、跨行业的延展。
  • 解决资产荒:为品牌创新提供力量。
  • 新的市场盈利点:线下与线上营销结合,系列衍生产品等。

企业为什么要自创 IP 呢?对企业而言 IP 它具有针对性,根据自身定位、特质、用户群体设计而成,受众一眼就能辨识,快速吸引用户的视线。代表性强,对外是自身形象与企业品牌的代言人利于项目传播。可持续性经营,IP 具有强生命力,有持续性生命周期、有独特内涵,可做更多延伸内容、品牌故事。

当然让上述所说的 IP 优势发挥到极致,让目标用户群更准确的形象感知,就要建设一致性和连贯性。这里我只从设计的维度去分析,我个人认为从标志设计就开始运用 IP 更有利于活化品牌体系,也就是说整个品牌设计流程会变成下图这样。

目前我觉得天猫和度小满在运用 IP 形象上做得特别好,保持高度的统一,他们贯彻到了品牌设计以及品牌体验中,使用户快速建立品牌联想与品牌识别,并活化了品牌视觉体系。下面我们就来看看他们是怎么运用 IP 形象的吧。

天猫

天猫的IP形象应用到了APP logo 上,一方面为了贴合「天猫」这个名字,另一方面这样运用能让用户对形象快速感知。

对 IP 形象进行图形提炼,将猫头简化,猫头承担重要载体,并做了六张视觉来体现品牌 slogan 与五个品牌关键词。

1. 天猫打造超级品牌日,玩出了联合营销/IP化联合营销

天猫开创的双11 已成一年一度全球最大的购物狂欢节,天猫和消费者的互动,从消费关系转变为基于 IP 与品牌更有效链接的粉丝关系。IP 形象同时又是标志,在打造超级品牌日同时,延展到了各种海报内容物料上,随时随地让你感受天猫的存在。同时对 IP 形象进行了全方位的人格化处理。拟人化的外形+人格化的动作+人格化的性格……让天猫的形象更鲜活、更真实起来。在线下与消费者进行亲密接触沟通,更大程度地刷新存在感,还起到了品牌「形象代言人」的作用。

天猫双11品牌海报

各家做的各种创意十足的内容必须严格按照天猫的品牌规范在猫头的图形上做设计,对于天猫来说,这些源源不断的优质内容汇聚成的天猫超级品牌日是非常宝贵的品牌资产。

天猫双11开屏

开屏头部与底部运用了统一的品牌展示样式,与此同时开屏主视觉里面也有 IP 形象的贯穿,通过品牌广告曝光,引导用户进入各个天猫品牌旗舰店,促进购买转化的同时,加深了用户对品牌的感知。

天猫双11 UI界面

从个人中心这个简洁的页面上看,都能看到天猫的 IP 形象的贯穿,头部卡片红色底色加了猫头的元素以及下方底部特殊 tab。

在天猫超级品牌日之外,天猫的日常运营也保持着高度的统一和连贯,整个运营活动的主视觉都在猫头形状里做,每个活动的猫头大小尺寸都是一致的,与此同时主视觉内也有一个 IP 形象在贯穿,每个IP都与当前场景发生故事,给用户一种情感的带入。

天猫品牌开屏与广告开屏

大家都知道开屏基本上都是强制性曝光,只要使用 APP 的人群都可以强制性曝光,流量巨大。天猫的品牌开屏(左图)选用全屏式,设计非常简洁,只有 logo 和 slogan。广告类的开屏(右图)选用底部保留式,留给天猫自身品牌曝光,广告自身的主视觉也运用猫头的图形元素,从而增加 IP 的曝光量。

天猫的 UI 设计运用 IP 情感化设计,运用 IP 做用户引导,可以使用户引导变得更有趣味性,不会枯燥乏味,赋予产品情感,增加用户对 IP 认知的同时,引导用户操作,并达到设计的目的。

天猫积分兑换红包页面以及缺省页面也运用了 IP,赋予产品情感,带给用户亲切感,拉近用户与产品、企业的关系,从而增加用户粘性。

天猫标题栏可配置图片,以及下拉刷新和商品刷新也运用了猫头的设计元素。

天猫还运用了 IP 线下体验店的方式与线上营销结合,为天猫这个 IP 注入更多的个性和故事。定制活动天猫私人收藏馆,是天猫情感化的一次尝试。

在消费升级的大背景下,天猫从品牌标识、品牌视觉、运营、UI再到线下等,整个品牌战略更加清晰、聚焦。为企业打造超级 IP 形象带动数亿额的销售量。

接下来我还想讲一个案例,它也是在品牌标识上运用了 IP,运用方式稍微有一点不同,是在于 logo 的品牌背书用的是 IP。

度小满

1. 高度保持统一的开屏

在 App 启动时抓住用户第一眼,聚焦注意力,助力品牌曝光。

节日运营与日常运营主视觉里面也运用了 IP 元素,为品牌获得充分曝光创造了条件。一眼难忘的效果让品牌在第一时间植入消费者大脑。

个人中心以及缺省页面同样也运用到了 IP,给用户一种代入感,情景感。

从天猫、度小满的 IP 应用中,我们可以看到他们高度保持统一和连贯,会让用户快速建立品牌联想与品牌识别,强化了品牌标识,降低了识别成本,提高了品牌的认知度和好感度,活化品牌视觉体系,品牌与消费者能更好地建立有效的沟通,为更多维度的视觉应用做基础。同时依靠亲和力增加用户的交互度和粘性,品牌和消费者之间的零距离互动,因此这种 IP 的应用方式是值得我们借鉴的。

优设大课堂

大家都在用的「点赞」功能还能怎么创新? 腾讯顶尖设计团队给了这个答案!

如何在产品功能上做更多的创新来体现设计价值一直是设计师关注的话题,尤其是在体系成熟的产品里,如何对完善的基本框架和功能进行突破,如何挖掘用户的互动诉求并拓展更多的互动行为等对于设计师来说都是很大的挑战。我们从前期互动行为的挖掘、情感化的视觉体验打磨以及趣味的玩法升级三个方面,剖析 Qzone 击掌功能的整个设计历程,或许能为大家提供一些参考性的思路和设计方法。

何为互动

我们先从真实生活场景中的互动说起。

人与人之间的互动无处不在,它是我们生活中必要的组成部分,也是整个人类社会的基石。从本质上来讲,社交产品要解决的问题就是人们之间互动的问题。那么如何定义互动呢,我们可以从日常的生活场景中窥得一二。

1. 反馈链

首先,让我们来看一看日常生活中的互动案例:

这是一个很常见的熟人互动案例,我们可以看到,熟人间很容易产生话题,并持续互动下去。但是如果同样的话题发生在不是很熟悉的人之间,可能就会是另一番场景:

在例二中,因为 A 与 B 互相不熟悉,所以 A 没有对 B 的回复产生进一步互动,对话因此结束。我们可以进一步推理,其实在这个案例中,不管原因变成什么,只要 A 没有响应 B 的反馈,那么 A 与 B 的互动就大概率会终止。

这是因为良好的互动行为一定是双方(或多方)的互相行为,一旦因为某些原因导致其中的反馈中断,互动将无法持续。

由此可以总结出:互动在本质上是由一系列的反馈(互动)组成的一条反馈链。

2. 反馈质量

但是光有反馈链还远远不够,在社交场景下,我们往往希望反馈链足够长,这样才能让互动双方产生感情升温。在例二中,其实是存在着一条很短的反馈链的,A 与 B 只互动了一个回合。A 没有继续响应 B 的反馈,是因为 B 的反馈质量较低。试想,当 A 向 B 问好时,若 B 的回复是「早上好,你今天穿的真精神!」那么 A 会不会响应 B 的反馈呢?我想大概是会的。

由此可见:反馈链的长短取决于每次反馈(互动)的质量。

高质量的反馈具备很多特点,其中有三个尤为重要:

反馈链中的指向性

我们日常生活中的互动行为,一般都会以一个「握手机制」作为开端。这个握手机制可以是显性的(直接喊出对方的称呼,可以是名字、外号,也可以是关系称谓),有时也可以是隐性的(眼光的对视、话题的流转等)。这个握手机制帮助互动双方建立了互动的场景,让双方达成「开始交流」的共识,以便信息的接收者做好倾听并回复的准备,这就是互动中的指向性。

任何互动行为都是发生在两个或者多个明确的对象之间的,因此在良好的互动行为中,指向性显得尤为重要──没有人会去响应别人的自言自语。在互动的过程中,指向性不明确的互动行为是低质量的,不容易获得进一步的反馈,例如评论区中的统一回复、群发的新年问候、领导在台上的讲话等。反之指向性明确的互动是高质量的,比较容易获得反馈,例如群聊中@某个人、收件人为某个人而非邮件组的邮件、多人聊天时眼光的对视等。

适度的互动行为

互动行为的适度包含两个方面:信息适度及行为适度。

一方面,由于互动行为本质上是信息的传递过程,因此每次反馈的信息质量会直接影响到反馈的整体质量。好的反馈应该传达适度的信息,让接收者可以对传递的信息进行轻松地接收及处理,最大程度降低接收者的反馈门槛。

另一方面,传递信息的行为也应该是适度的。在生活中,不同的场合下,我们会选择不同的行为来表达同样的意思,比如比较正式的场合会选择握手作为问好,而与家人久别后的见面则可能是一个热情的拥抱。

反馈的即时性

互动行为是依赖于一定语境的,当语境消失,互动也将停止。在社交产品的互动场景中,互动语境一般会随时间流逝而逐渐减弱直到消失,所以反馈的质量也随时间的流逝而逐渐衰减,若想让反馈链可以得到延续,要尽量保证在语境消失前产生反馈行为,因此即时性的反馈就显得十分重要。

点赞到击掌的互动探索

有了以上的理论基础,接下来分析一下 Qzone 中的互动行为。

Qzone 中的互动方式可以归为三类:评论、转发、点赞。其中,评论和转发都可以产生完整的反馈链。针对评论,用户还可以继续通过评论、点赞等方式进行反馈;针对转发内容,用户也可以进行进一步的评论、转发、点赞。而对于点赞行为,反馈链到此戛然而止,用户无法对点赞行为进行直接的反馈。

因此,为了让用户的点赞可以形成完整的反馈链,我们的设计目标就呼之欲出──为 Qzone 中的点赞行为寻找一个具有指向性的、适度的、具有即时性的反馈行为。

1. 互动场景的选择

既然要设计的是一个具有指向性的互动行为,我们就必须在可以接收到赞的场景里去做这件事。所以我们首先遍历了主人态下,所有可以看到别人给自己点赞的场景。

但是以上的场景中,并不是都适合承载点赞的反馈行为。根据用户的行为目的,我们可以把以上场景分为两类:围绕点赞行为的关键行为路径(图c.消息列表、图d.点赞列表)、不以点赞为核心目标的其他场景(图a.好友动态、图b.个人主页)。显然,我们应该把围绕点赞行为的关键行为路径作为主要互动场景。并且所有对于点赞的反馈都是直接依附于点赞行为本身的,使反馈行为具有明确的指向性。

2. 适度的语义及交互

前文提到,适度的互动包含「信息适度」和「行为适度」两个方面,落地到产品里,就是定义互动行为的「语义」和「交互行为」。

关于点赞反馈行为的语义表达,我们列举了很多来自现实社交场景中的备选方案,然后以动作的情感程度和成熟程度划分了 4 个象限,对这系列动作进行归类。

由于点赞行为本身所传达的情感是比较轻量化的,我们更倾向于选择一个轻量化的情感表达方式作为点赞的反馈;同时由于 Qzone 的用户群体以年轻用户为主,我们还需要选择一个尽量贴合年轻用户感官的语义。因此我们在象限图中初步选中位于左下角的「击掌」和「剪刀手」两个概念。考虑到「击掌」比「剪刀手」具有更为明显的指向性,所以确定「击掌」为最终的落地方案。

同时,因为点赞行为本身是一个极其轻量化的行为,所以我们也用最轻量的交互操作作为它的反馈,只需要一次点击即可。

3. 反馈的及时触达

用户每次收到针对点赞的反馈,都会收到一条与点赞相同的消息提醒,通过 push、首页新消息提醒、红点等让用户第一时间知晓。在消息箱列表中,每一条点赞和回赞都成为单独的一条消息,可以让用户最直观的查看并进行反馈。

综上所述,我们确定了整个反馈链的交互框架:

情感化的视觉体验打磨

击掌的视觉设计是一个发现问题到解决问不断循环的过程。在这个过程中,推动解决方案逐步升级的核心方法是情感化设计。

击掌动作本身就带有丰富的情绪,而情感化的设计方法可以让情绪的释放更大化,所以在视觉设计阶段,我们以情感化设计作为方法去推进方案逐步完善,最终建立起用户与产品、用户与用户间的情感连接,加深用户对功能的认可和共鸣,带来更加有趣的体验。

情感化设计具象到击掌这个功能,需要解决两个问题:

  • 如何唤起用户在现实场景中的击掌记忆;
  • 如何符合空间用户群体的基本调性。
1. 唤起用户在现实场景中的击掌记忆

设计之初,我们用平面 icon 的形式来表现击掌,虽然可以满足基本的功能诉求,但是在视觉体验上乏善可陈,我们又尝试更丰富的各种视觉表现以此引起用户对击掌这个动作的共鸣。

在设计推敲的过程中共经历了三个阶段,在不断发现问题和解决问题的循环中寻找更优的设计方案:

Step 1 | 静态展示到动势塑造

我们用两个手掌叠加的样式构造了击掌 icon 的基本造型。为了增强用户对于「击掌」的语义感知使用了漫画中常用的动态线条,让用户从视觉上直观感受到这是一个动态的互动行为,而非简单的单方面点亮 icon,以此加强用户对击掌这个互动行为的认知。

Step 2 | 2D动画演绎

但是这样的动势表达仍然具有局限性,动态线条的表达方式并不具备普适性,无法保证用户可以理解其中的含义。因此我们在第二个阶段的设计迭代中使用更加直观的动画来帮助用户理解,使其与现实生活中的动作产生呼应。

Step 3 | 3D表现

在解决了语义表达的问题后,我们遇到了一个新的挑战,由于整个动画的展示范围较小,在视觉表现力上并不理想。因此在第三个设计阶段中,我们通过放大动画、尝试 3D 表现形式的方法解决上述问题。同时,3D 的表现手法还可以通过光影和质感来传达更多信息,更加直观易懂,具有极强的代入感。

2. 符合空间用户群体的基本调性

空间的主流用户以年轻人居多,为了匹配用户群体的基本调性需要打造一个「年轻」、「有趣」的 3D 击掌动画。为此,我们以「3D」、「young」、「fun」作为关键词收集参考素材,以此建立情绪板。

趣味和轻量的质感

如前文所述,对于击掌反馈行为是一个轻量化的互动,为避免 3D 表现手法过于写实而带来不必要的厚重感,同时也为了增加动画的趣味性,我们选择卡通的手掌造型进行建模。在材质的选择上我们偏向黏土材质,弱化高光,让视觉上的体验更加轻量。

弹性曲线让动画更生动

现实生活中的击掌动作是一个减速运动,但是为突出击掌的动势和加强趣味性,我们采用了非写实的弹性曲线来打造这个动画,以此加强动画的趣味性。

礼花烘托氛围

在后续的产品迭代优化过程中,我们引入了无限击掌的玩法,用户之间可以无限回赞。这就导致动画被重复播放,会加速用户对动画的审美疲劳。所以为配合产品玩法的升级对动画的设计也进行了迭代,基于击掌次数设计了不同的展示彩蛋──在击掌达到特定次数后,会有彩带礼花蹦出,在烘托多次击掌的热情氛围的同时,给用户带来更多趣味和惊喜。

在击掌功能的设计过程中,我们不断在发现问题、解决问题的循环中不断寻求更优解,逐步把一个不到 100 像素范围内的击掌 icon 做到更好,以此来唤起用户对现实击掌的记忆,建立起与用户情感上的连接。

另外,通过趣味性的视觉表现手法不断推敲动画设计,让 Qzone 的年轻用户不仅从心理上建立连接,在表现层也能感知到符合自身标签的趣味调性。

趣味性的玩法升级

除上文提到的彩带礼花以外,在击掌玩法升级过程中,我们也拓展了更多内容。

1. 给用户制造惊喜

随着用户间反复击掌次数变多,粒子效果会不断升级,并加入富有层次的入场效果。而且达到关键击掌次数的时候,会展示击掌的次数,通过用户的成就感来刺激其产生更多的击掌行为。

2. 个性化的延展

为了丰富手掌样式的选择,给用户提供更多样的体验,我们和增值团队一起设计了更多的手掌形式,同时引入一些 IP 形象,让击掌更能唤起用户的共鸣,也更加有趣。

写在最后

击掌这个功能从前期探索到上线和二次迭代经历了很长一段时间,整个项目对设计师来说也是一次收获满满的过程。

1. 创新也可以是从1到N的过程

创新并不都是从 0 到 1,从无到有的创新,尤其对于功能和框架体系成熟的产品,盲目的追求创新去改变用户的认知和习惯是不妥的,从小的问题点着手去深挖和思考,找到合适的解决方案并打磨细节给用户创造惊喜,以小博大去做创新也能达到四两拨千斤的效果。

2. 打磨细节创造惊喜

探索和挖掘到一个不错的想法之后,打磨细节也是同样重要的,我们出了各种不同的击掌效果方案,去找到给用户惊喜和操作轻量的平衡,这个功能上线以后我们也一直在关注用户的反馈,从用户反馈中发现还可以做惊喜升级,从一个点出发,把这个点不断的扩充做得更细致和更加闭环。

3. 从生活中来,到生活中去

击掌这个功能之所以有这个好的数据和用户认可度,有一个很重要的原因是因为本身这个行为和现实生活中的场景是相对应的,所以让用户能很快地理解和操作,符合用户真实场景的认知,所以学习成本比较低。我们在做设计的时候用生活场景挖掘产品,能达到事半功倍的效果。

欢迎关注「腾讯ISUX」的公众号:

优设大课堂

为什么越来越流行的酷炫动效,你不一定要学?

写这篇文章的起因是前段时间在 Meidum 上读到的一篇驳斥 Dribbble 发展现状的文章。文章发表在 16 年,其中提到:「我不认为 Dribbble 解决了什么问题,你期望在 400*300px 的矩形中解决多少现实中的问题?Dribbble 一直没有变化,但你可以有所变化,如果你更关心其他事情而不是新的 UI 趋势」。当然,他也提到,如果正在从事创意设计等领域的工作,他会很认可 Dribbble 能为他带来的灵感的价值。

我来解释下,作者 Tobias van Schneider 是以一名(UI/UX)体验设计师的从业者身份发表的观点,即 Dribbble 流行的 UI 趋势实则并不能解决用户体验相关的一些问题。我们回顾历史以来比较重要的体验交互领域的重大革新,实际上都是跟随硬件革新,由平台级团队研究并普及开来,而不是 Dribbble 之类的设计分享交流平台。

作为体验向 UI 设计师,我们应当花费更多精力在交互体验相关的技能构建上,而不是对于流行趋势的盲目跟随崇拜。趋势不能解决问题,用心研究探索解决方案才能解决你产品面临的问题,甚至很多人都不明白自己产品所面临的问题,更别提解决了。

确保自己有主见,能独立思考,然后再去看待目前的趋势及自身的职业生涯与当下的行业现状。

这个思考同时让我想起了近年流行起来的产品设计师、全链路设计师的概念。在阿里BBC UED总监汪方进口中的 UED 转 UXD,目的是解决阿里及各个公司内部存在的职能分工问题,实现设计师从产品修饰者到产品区分者乃至产品驱动者的转变,放大设计师的价值,且使设计工作成果可验证。

其愿景是好的,在阿里内部实施的成果应该也不错,但无数人趋之若鹜,跟随这股潮流却是错的,更多的人只看到了它的好,就像股票,听说能赚钱,就疯狂投入。殊不知,阿里 UXD 是从 P7 开始培养的。于是一批本该集中精力锻炼与沉淀自己核心竞争力的设计师,拖慢了自己的成长步伐,无形中反而削弱了个人竞争力。

问题在哪里?问题在于,你不是在 BAT 工作,你的产品主导者仍然是老板是产品经理,你认为你的战略思想拼得过老板?交互能力拼得过交互设计师?不存在的,职能并没有下放,你还是仅仅在做 UI 设计,你没有能力主导产品线,驱动产品也难。因此,趋势的产生有其生长的土壤,并不适合移植到所有地方。这一点所有人都应该谨记,在跟随潮流趋势时,反省一下这样做对我日常工作真的会起到帮助吗?

它使我开始辩证地看待我们当下的各种流行趋势,及这些新潮和看似繁荣的设计发展背后所呈现的一些较隐晦的问题。人类总是在繁荣中沉溺而自我满足,无法意识到甚至抗拒可能会出现的问题,职业也一样,设计师这种个人风格浓郁,个性支配力强的职业更是如此,我们沉迷、从众、自嗨、盲目,自以为是,投身于潮流浪潮,却不自知在裸泳。

这次我要讲的是关于流行动效的问题,就是我们每天在 Dribbble 浏览的精致动效。文章包括:

  • 对当前动效趋势的思考,存在什么问题?
  • 我们应当如何正确认识当下的流行动效?
  • 如何做出更实用优质的动效?

关于当下流行动效的问题

你是否会经常惊叹那些复杂炫酷的 UI 动效,优雅的转场,精致的交互细节,动感的节奏。很正常,我也会,以前我甚至会这样浏览一个小时,下载下来仔细研究临摹,当复原了这样一个高复杂度的动效,我也会有成就感。甚至到后来,当我上传自己产出的一些 UI 作品时,我会刻意使用一些 Dribbble 上流行的动效样式,并自得其乐。我相信很多人和我一样,但我们做出来美观的、酷炫的动效设计,它们真的是好设计吗?还是单纯的设计师自嗨型设计?

我们来看下面这两个案例,作为创意设计,或者说单纯看视觉效果,这两个作品无疑极为优秀。但他们其实应当归属于 UI/UX 体验设计,从这个角度来看,问题就有点多了。

下面我将指出目前以 Dribbble 平台为主的作品分享中曝露出的较典型的问题。

1. 太过强调展示,而忽略了核心内容

以 UI 为主的作品其重点展示的在于用户界面的视觉、交互等细节,但当下流行出一种通过过度丰富乃至复杂的背景、装饰元素,来提高整个作品图的设计感,参考上面第一个作品。因此,在本质上将一个体验类产品设计呈现出了平面创意类设计。所以,设计师想要传达什么呢?平面还是UI?浏览者从中学习了什么?对行业有什么影响有什么推动作用?

作为 UI/UX 的我们总是在强调体验,但我们并没有真正将其融入所有的设计产出,在做出这样一个重视觉呈现,而忽略了体验设计本质的作品时,设计师对自我的职能是一个自我否定的状态,只有同为设计师的我们沉迷其中,自嗨而不自知。这个设计是服务谁的?解决了一个什么关键问题?这才是我们应当思考,且呈现出来有利于同行进步的关键点。

2. 为了展示而展示,违背基础原则

我们遇到的很多酷炫的动效,为什么酷炫,为什么有那么多细节可以被感知到?因为设计者想要被你看到。而事实上,动效不应被清晰感知到,它只应该起到过渡作用,而不应该干扰用户的注意力。然而在 Dribbble 上百分之八十的作品都在刻意减缓转场动画的速度,延长动效的整体时长,以展示更多的设计细节,那么设计师需要问问自己,这些细节的展示,是否有必要,是否有意义?答案显而易见,如果你熟读谷歌动效规范,你会记得开篇第一句话是,动效使 UI 富有表现力且易于使用,表现力是锦上添花,而易于使用,体验度才是核心。

3. 发表作品的错误出发点

最后一点,也是最典型的一点,那就是设计师盲目沉迷于圈子内的消极心态,这一点真的相当典型且有害于行业和个人的发展。

我们都在讲用户,用户体验,以用户为中心。然而事实上呢?我们上传的作品,是为了呈现给谁?没错,是为了给同行看的。然而产品的使用者是谁?是用户而不是设计师,设计师自嗨、从众、盲目信奉趋势,群体无意识的沉溺于这个状态,这真的是很恐怖的现状。我们发表的 UX/UI 类作品是为了取悦设计师群体,而不是为用户解决问题,这就是起点的错误。

而如果一个设计师在作品中呈现他用一种独特的交互方式解决了一个什么问题,那社区氛围就是另一个样子。我们不否认通过更丰富的视觉效果来博眼球,但是一切都应当围绕着设计性质的核心来进行,而不是将一个体验设计丰富成一个平面设计。

我们应该意识到一些问题,对自己对行业有清晰的认知是未来能够变得更好的前提,但我们也应该理智的应对现状。设计师已经习惯了发表更加博眼球的作品来吸引关注,或者是为了创造更多私单和升职机会,这无可厚非。视觉上创造与升华明显易于一套优秀的用户体验的构建,然而构建体验解决问题却是我们职业生涯中更关键的部分,也是职能价值得以体现的部分。

因此,我的看法是,我们应当认清现状,尽量去选择正确的方向去提升成长,不要盲目被潮流趋势带偏。

正确认识当下的动效设计

UI 动画通常被认为能提升用户体验愉悦度,但事实上并没有增加太大价值,设计师应当避免代入职能偏好,而导致做出错误的判断。

设计师习惯于自动代入设计这一个岗位的特殊性,对动效有更敏感的感知,因过分关注从而产生动效有利于用户体验这样的错觉,但事实上用户处于非实时交互时核心诉求在于迅速完成界面的切换与过度,而不是欣赏你的动效细节。而当用户处于实时交互时,用户关注的也不是反馈的美观度,而是反馈的速度。这都是从用户使用产品的本质诉求为出发点的判断。

1. 动效的不同阶段

动效大致可以按照实时交互和非实时交互划分不同阶段。实时交互阶段即正在执行的交互操作与动效同时进行,如按下按钮时的状态变化,此类动效是与操作同时完成的。

非实时动效则是用户完成操作后紧跟着的转场或状态变化,如点击新的 tab 后的跳转转场,是由右侧进入或者底部划出。再例如一些加载效果,都是非实时进行的,它们与操作并不同时完成。

2. 动效的目的及意义

动效设计的目的和意义是什么?大致可以概括为以下几个方面。

反应元素界面的层级关系

通过动效,用户更易于理解界面的转场,能更轻松地定位到当前正在进行的工作,此类动效给用户传达出任务层级,及界面中各相关元素的关系,减少困扰从而提升体验。

提供交互反馈和状态

动效能够提供及时的反馈和交互状态。当用户完成具体的操作行为时,产品应当且必须给予用户反馈,以告知该操作是否生效,若无任何反馈则会导致用户对自己和产品产生怀疑,甚至产生挫败感。没有反馈用户也无法清楚产品是否还在工作。除此之外,动效也是表达状态的主要语言,如加载状态、选中状态等等。

引导用户

动效是进行用户教育的有力工具,大家最熟悉的莫过于苹果解锁屏幕的滑动手势引导。我们也会在一些需要新用户引导的场景下见到各种手势引导操作。使用动画进行引导的形式具有高效真实,易于交互的特性,用户可以瞬间心领神会,大大降低学习成本。如下图的 Material Design 官方案例,手势解锁引导(左图)及加入购物车的便捷操作引导(右图)。

个性化与情感化因素

个性化与情感化动效设计并不适用于所有场景,因为其动效复杂度和丰富度实际上与动效追求简洁的基本原则相违背,但在某些特殊场景,却往往能发挥奇效。例如加载页面来缓解用户疲劳感与等待焦虑(右图),强化品牌logo相关内容来达到占领用户心智的目的(左图)由此也可以看出,规则是严谨的但不是完美,理论存在盲区,可以适当打破。

当然,在做与情感化相关的动效设计时(UI设计领域而不是品牌设计领域),设计师最先要考虑的还是设计的目的、出发点。即我为什么要做这个设计,从体验角度还是从战略角度?为了提升等待期间的体验或者为了深化品牌影响力占领用户心智,又或者单纯为了酷炫?

3. 动效应该遵循的通用原则

动效应当具有阐释性

动效应当具有解释交互的能力,如元素的空间层次关系,传达操作的可用性和预期结果。

动效应当聚焦重点

动效在产品界面中位于层级的最高点,因为移动的事物天然更加聚焦注意力,我们应当正确的理解这一点及利用这一点,而不能滥用。动效只应当发生在用户发生交互,或用户视线聚焦的地点。即动效的展示应当与用户注意力关联,不应当产生干扰用户完成任务的情况,更不应该出现无意义的转移注意力性质的设计。但如果是商业化驱动的产品,这一规则可以无视,此类产品通常牺牲体验换取商业上的成功。

动效简洁程度与产品易用性成正相关

真正优秀的动效是不易被感知的,因其自然而简单。我们可以在一些重量级产品上验证这一点,微信、QQ、支付宝等等。最短的时间,最简单的过渡,快速响应,直达用户的目的地。近期 QQ 体验设计团队发表的一篇设计总结中对于动效的把握我认为可以作为一个典型案例,在后文会有展示。

动效应该有细节从而使过渡自然

我们追求简短简洁的动效是为了追求响应速度,提高用户使用效率及避免干扰,但这并不意味着动效应当简陋。恰当的使用缓动曲线,关注不同场景下的动效过渡时间、空间变化、透明度和大小比例等细节元素。

从设计和开发实现的角度,动效应当是复杂的,因为要综合各种变化,考虑各种细节。从用户使用和感知的角度,动效应该是简单的,用户不会发觉的动效才是过渡自然的动效。

动效的选取应当遵循一致性原则

同一个产品中相同性质的操作应当呈现出一致的视觉体验,如跳转下一层级为从右往左淡入页面,返回上一级从左往右淡入界面。遵循一致性原则能使 UI 作品中的视觉呈现更统一,而那些太过花哨的动效作品往往并不遵循这一原则。具有一致性的动效设计也是商业产品(上线产品)的基础要求。由于不同平台的差异,及一些产品追求个性化的需要,目前各平台各产品的转场动效并没有实现真正的一致性,但相信随着时间的推进,就像移动端的交互手势一样,最终会完成真正的统一。保留那些高效易用的,舍弃那些复杂低效率的。

4. 设计师产出的动效设计包括应用型和展示型

根据当下设计师的动效产出,我将动效设计分为应用型和展示型。

展示型动效

我们平时在设计分享网站浏览的酷炫或精致,乃至复杂的动效都属于展示型动效,或者是将应用型动效延长了几倍展示时间,或者刻意放慢动效速度以展示更多设计细节。该类动效设计的演示目标人群是设计师。

其设计目的从好的方面来说是演示设计细节,传道授业或者展示个人设计能力以获取一些工作或外包机会,经营个人设计品牌。从坏的角度讲就是炫技,博眼球。也正因此,总是有人调侃敢不敢拿真正上线的作品出来看看。当然这种讽刺也过分偏激,总要有人仰望星空,只是要谨记设计目的出发点,如果是处于同行交流的目的来设计一些展示类动效,传达一下设计技巧也是蛮不错的。唯一担心的是给新人错误的引导,使得失去体验设计的本真,一度沉溺于花哨的表面。

应用型动效

应用动效即应用在真实商业产品中的动效设计,其演示目标人群是开发人员和用户。首先动效设计作为产品设计中的一部分,服务目标肯定是用户,以辅助用户理解产品界面,理解交互流程为目的进行动效设计,才是真正为用户着想。另外考虑到动效的还原度,动效设计需要专门提供一个开发人员参考版本,涉及到预期效果演示、数值曲线演示等。

应用型动效是我们工作中的真实产出,和职能挂钩,更应该遵循动效设计的简洁易用的核心原则,进行相关设计时,应当查阅动效规范,多多参考成熟的上线产品。

很多人抱怨一些产品设计风格陈旧,不时尚不跟随潮流,那都是为了满足大体量用户的审美偏好及体验偏好,如果一直代入设计师的审美偏好及对流行趋势的推崇,那产品将很难取得成功。动效设计也一样,摒弃个人偏好,考虑真实用户。

应用型动效应该是不易被感知到的,当我们浏览到一些 UI 动效,能清晰地分辨出其过渡的细节,变化的手段,那它是无法被应用于真实的线上产品中的。

  • 动效过渡时间有要求(查看谷歌文档)
  • 较长的动画过渡产生加载缓慢假象
  • 能被感知的动效说明对用户视觉构成了干扰
5. 真实产品中UI动效是什么样的?遵循哪些规则?

以 qq 近期的一次改版为例子,避免复杂,避免亢长,对应上下文的简单映射(如右入左出)。

使用横向切换来表明层级间的变化

纵向滑动与弹出,开启一个分支任务

全屏缩放强调内容的来源

所以最理想的动效是不容易被感知的,这证明你的产品流畅度达标,能迅速做出反应,而用户能迅速抵达目的地。

打造优秀动效必不可少的细节

1. 时间与速度的设定

动效转换速度的设定应该恰当合理

动效应该能帮助用户跟踪 UI 的更改,即使用户易于理解从哪里来到哪里去或者执行了什么操作。过快会导致用户无法理解其操作导致的结果,过慢则显得冗余及加载缓慢等问题。因此转化的速度应该设定在能够辅助用户理解其执行的操作的最快速度。这能保证动效产生高效的引导作用,同时不会显得多余冗长。右侧为正常速度,左侧为过快与过慢的情况。

动效的持续时间根据动效复杂度而变化

简单的动画需要更短的时间就能完成,因为其变化较少,可以快速完成。而复杂的动画强制使用较短的时间,则会产生卡顿和模糊的情况。一般涉及到简单控件元素的动效都可以在 100ms 到 200ms 完成,特殊情况可以提高到 500ms。

一般一个完整的过渡动效可以在 300ms 内完成,如果你使用 Principle 来制作 UI 动效你会发现它默认的时间设定就是 0.3s,即300ms。而在一些过于花哨或为展示细节而设计的动效中你会发现转场时间要远远长于 300ms,这实际上并不合理。

退出操作的过渡动画可以在更短的时间来完成

关闭元素即传出元素所用时间应当更少,其原因是它们比用户的下一个任务要次要的多,因此并不需要转移用户过多注意力。

因此在我们为自家产品设计动效转场时,针对关闭和返回性质的转场,可以使用更短的过渡时间,如 200ms、250ms 等等。

大面积元素的变化应当花费更多的时间来完成

小面积元素的变化所花费的时间应该小于较大面积元素的变化。这一点与费茨定律保持一致,大面积的元素要更加吸引用户注意力,因此需要花费更多的时间来完成过渡。

合理利用easing曲线

说曲线是动效的灵魂都不为过,选择恰当的曲线可以使动效过渡更自然,有节奏从而产生美感。曲线主要分为缓入缓出和缓动三类,较常用的是缓动曲线,即中间快两头慢,更符合现实中的物理原则。

2. 为过渡动效「编舞」

首先我们应该理解,动效概括下来就是位移、透明度、比例的变化,万变不离其宗。而我们最主要研究的动效是过渡动效,它涵盖了产品设计中最主要的动效应用场景,即反应界面层级元素关系。我们希望过渡动效能实现这样的效果:使用户高效地完成界面跳转,同时轻松地理解跳转关系,期间没有卡顿,体验流畅。

而想要打造流畅的过渡动效,我们要为需要变化的所有元素进行「编舞」,使其符合逻辑且不会出现视觉混乱。如下图,是 Material Design 动效的编舞规则,它将我们动效过渡期间的不同元素分为三大类:传出元素、传入元素、持续性元素。

传入元素指即将进入新的结果页面的元素,传出元素则是要消失为后面的元素腾出位置的元素,持续性元素则是始终存在的容器类元素,如 bg(background)。

整体过渡顺序遵循此原则:首先传出元素消失,然后传入元素出现,在这期间持续性元素始终保持变化,且持续性元素的变化时长是此过渡动效的总时长。

下图中的橙色线框是传入和传出元素,紫色线框是持续性元素。

另外一个比较细节的设计点是峰值的连接点作用。持续性元素曲线的峰值应当在整个动效的 30% 节点处,即下图中的紫色曲线的峰值,以此时间点(X轴)为分界,衔接传入和传出元素,完成整个过渡。

如果不明白也没关系,我们学会怎么使用就可以了。我们需要确定整个过渡动效的总时长,然后乘以 30%,以此为节点,衔接传入元素和传出元素。

例如一个过渡动效总时长为 300ms,300*30%是 90ms,我们需要在 0~90ms 时让传出元素消失,在 90~300ms 时让传入动效出现。

上面这个案例是针对较复杂的动效,而对于一些简单动效的转场则无需太过复杂的编舞,各元素变化可以同步进行,如下图:

3. 使用组或容器的形式完成过渡

在复杂的布局中,存在元素过多的情况,我们不可能让每个元素都进行自己的动画,那样会使动效冗长复杂乃至混乱,应当避免过多元素争抢用户注意力的情况。因此我们需要将元素组合为单元组,以单元组的变化来呈现主要动效的视觉效果,针对更小的单位采用淡入淡出的处理手法,从而避免过多元素频繁变化争抢注意力的情况。如下图中,元素以组的形式进行变化,使动效过渡自然的同时,减少了单个元素的动画频率,其中所有小元素,如图片都采用了淡入淡出的处理手法。

再来看一下反面案例,为了追求所有元素的动画效果而导致整体臃肿复杂,适得其反。

除了成组的形式来解决这一问题,我们还可以使用容器来承载较复杂的一系列元素。我们通过主动定义一个明确的边界,例如一张卡片,使内部元素保持纵横比例,缩放以适应界面的大小,从而构成缩放容器的效果,与 iphone 打开 APP 的动效体验一致。

参考内容:

欢迎关注「EasonZhang」公众号:

优设大课堂