从小美工到一线大厂高级设计师,我如何用6年时间完成蜕变?

编者按:和每一个北漂的设计师一样,他经历了一段艰难但是无比重要的褪变。从生涩的美工,一路到一线大厂,成为负责某金融类产品的主力UI设计师。抽象的大道理谁都知道,但是每个人的故事都不尽相同,今天我们来看看 UI 设计师慕青的经历。

子木:从毕业到工作,如今成为一线大厂的一名UI设计师,你觉得自己身上最重要的东西是什么?

慕青:从老家到北京,从毕业到工作,从小团队到大公司,从为淘宝店修图一路到参与千万级别的 APP 产品设计,刨除外面的边角,审视我自己,最重要的还是四个字:「自我修正」。

从小到大我的经历按部就班,平平无奇。但是这不就是绝大多数人的经历和状态吗?但是我不知道别人是不是也会有这样的习惯,但是我总会在经历事情之后,静静琢磨,抽离出来重新审视,这件小事在过去6年甚至更长的时间里,给我极大的裨益。

就像在一条漫长时间线上的隐秘交互,一件事情反馈给我一个道理,我对自己的思考、行为和决策作出修正和调整,然后继续推进。在不断的反馈和修正中,成为今天的自己。

子木:有意思,那么要不我们就从你的第一份工作开始聊吧?

慕青:那就要从2013年说起。当时我大学毕业。

当时很多人可能都没意识到,那是怎样的一个快速增长的大时代。移动互联网,电商,都在以极度野蛮的方式快速成长起来。很多刚刚起步的初创小公司都隐藏在北京各个小区的居民楼里面,悄然生发,谁都不知道未来会成长为大鳄,还是散伙收场。

我找到的第一份工作,也是在一家藏在居民楼里的电商公司。做电商,在当时是最快速、成本低廉也能够快速撬动市场的一种创业方式。而我的工作就是美工。

当时我所在的公司,是自己做产品以及淘宝店,产品是类似日本旅行者日记那种手帐记事本,不过整体的设计、气质和定位都不太一样。而我的工作内容,则涵盖了店铺的设计和产品的摄影,和现在的很多电商设计师的工作非常相似。

直到现在,我也会偶尔在北京的大街小巷里,随便拍点什么。

子木:这么说你入行就是做电商的视觉设计?这份工作反馈给你的感觉是什么?

慕青:和现在不同,当年可供参考和学习的设计资源其实并不多,不过当时公司的老板在开始创业之前,就已经在之前的公司的营销岗位上做到比较高的位置,无论是对于设计、营销、用户还是文具相关的细分领域都有着相当深入的理解,虽然当时我仅仅只是一个美工,但是当时的老板没少给我指导,他给我了重要的第一课:以结果为导向来做设计。

手段和方法都服务于目标,盯着对的方向,才能做对事情。

当时我们会在详情页里面提供非常细致贴心的推荐,虽然淘宝本身会提供推荐模块,但是我们更多会借助文案和图片,在详情页比较靠上的位置,推荐相关或者互补的产品——竭尽全力留住原本要离开的用户。对于当时产品量不算太大的店铺而言,尤其是我们整体还比较懂得用户诉求的背景之下,这只推荐机制带来了相当不错的用户留存率。现在我们拥有了更加智能的推荐模块,但是很多时候做的依然是相同的事情。手段一直在变化,但是如果你盯着目标来看的时候会发现,其实最重要的目标,其实一直没有太大的变化。

即使我是美工,老板也会要求我去后台看数据,明白运营和设计之间的内在关联,会引导我们去注意到设计给结果带来的影响。这个时候我才开始有意识的在设计工作之外,去额外地去阅读关于消费者心理学、定价这类书。

这一课对我很重要。一方面是让我有意识地去探寻设计背后的逻辑,而不是单纯依靠感觉,另一方面,则是促使我去搭建自己的知识体系。

子木:很多人追求的更多的是一种立等可取的效果,希望去学一些学了之后立马见效的一些东西。那么这些书真的有这样的作用吗?

慕青:立刻见效的知识有多少呢?很多书是需要持续的阅读、反思和琢磨的。它给你的是一种长期的、持续的意识上的提升,而不是立刻见效的一种具体手段。

就像你在那些Dribbble的飞机稿一样,它们放在Dirbbble网站当中看,是漂亮的。可是真的去模仿它们,放到实际的作品当中,你会发现有很多问题,它不匹配需求。这个时候,它哪些地方不匹配,要怎么修改,做到什么程度,就取决于你积累的知识量,信息,以及视角是否丰富了。

你懂得消费者心理学,懂得产品定位,明白营销策略,你的设计注定是和只注重视觉美感的设计师,有着巨大差别的。而你对于这些问题的琢磨的深度,也决定了你在设计的的时候能够兼顾到的因素有多少,能做到什么程度。

每多读一本书,每多反思一次,再来回看设计和整个世界的时候,会发现一切又不一样了。

这种持续的改变一直在缓慢但是持续地影响着我。在这里工作没2年,我还是换工作了。2015年,我去了一家做B端产品的公司。

子木:从偏向视觉化话运营的电商设计,跳转到B端产品的UI设计,这种改变还挺大的,那么你适应吗?

慕青:刚开始哪有那么快适应?但是学习新东西,总会有新收获。

当时这个团队是专门为诸如银行、航空公司这样的客户定制积分商城这样的产品。在之前做电商视觉设计所积累的一些经验,在这一份工作当中,开始逐渐的系统化,清晰化。我在这工作的一年多时间当中,原本对于UI界面的零散的认知,在此就被串到一起了。但更重要的地方在于,这份工作让我将更多的注意力集中到交互设计上了。

子木:不少人对于交互设计师的认知还停留在画线框图上,你觉得这种认知是不是太片面了?

慕青:交互设计师输出的东西可能是线框图和原型这类东西,但是它实际的工作量其实是非常大的,需要借助专业细致的设计思维和上下游所提供的内容以及数据,提供贴合场景,甚至去还原真实的场景,贴合用户的真实需求,提供轻量便捷的交互逻辑。这就是为什么说交互设计师需要有大量的经验,而不止是懂得相关的理论。

与其说,交互设计在考虑的是要做什么,不如说交互设计师得考虑清楚要排除掉了哪些不合理的设计。它有价值的地方,在于在纷繁杂乱的信息和线索中找出最适合用户场景的交互设计方案,明确哪些事情不要去做。

交互设计这个东西,有的时候并不在于人多。它的价值其实是在于想法,在于执行力和思维的深度。这就是为什么 Sketch 这样的产品,产品团队核心人并不多,而webOS 这样有前瞻性的操作系统,交互设计是由几个人来搞定的。

当时促使我关注交互,甚至有意识地去学习交互的原因有几个,一方面是交互设计师在当时的薪资更高,另一方面是它更高级,在产品中更为重要。当时我看了很多关于用户体验相关的书,包括《简约至上》。

这份工作过程中,我有机会来修正我的知识体系,而这个阶段最重要的修正,是将交互的思维纳入到设计的过程中来了。

子木:看来这份工作对你的整个设计体系起到了非常重要的作用啊!在此之后,你是不是就沿着交互和UI的框架来构建自己的体系了?

慕青:这么说也没错……但是我在之后的工作中学到了一个相当关键的东西。

子木:哦?什么东西值得你这么郑而重之地来强调?

慕青:两个字,场景。

我的第三份工作是在一家创业公司,在这家公司最重要的事情是让我真正意义上明白了场景这回事,用户到底想要什么,以及要如何去把控用户场景。

这大概是绝大多数做设计的设计师,所欠缺的一个东西。

当时我们做的是一个针对餐饮行业的B端产品。怎么样的设计算是接地气的设计?我听到过很多不同的解读方式。但是直到这一份工作,我才切身地体会到了接地气——你要沉到土里面去。

当时我们做的产品主要是给收银员使用的,而我们的团队中每一个人——从技术开发、运营到我们设计,都要到店里去当做收银员,去亲身体会自己的产品,在真实的场景当中,到底是怎样的。

原来我的设计,到底是给用户带来了方便,还是烦恼。开发能够在真实的压力之下,直到自己实现的功能,是不是还不够快,顾客会不会因为太慢了而抱怨,甚至离开。界面的交互逻辑是不是太复杂了,流程中是否有过多冗余的环节。厨房里面一刻不停地出餐,订单提交是否顺畅?餐饮区的配餐机制是否完善?结帐的过程是否顺畅自然?在实际场景的巨大压力之下,所有的问题都会清晰无比,你会清晰的感受到哪些需求是最为迫切的。

设计师坐在温度适宜的办公室里面,没有人生鼎沸和热火朝天氛围下大量订单的压力,在这样的情况下的「我以为」是缺乏语境的自我表达,怎么可能输出一个合乎真实场景的设计?

真实的餐饮场景中,和真实的用户——收银员,服务员、厨师去沟通接触的时候,我切身地的感知到了用户人群的实际状况,和真实诉求。他们来自天南海北,每个人都有截然不同的故事,专业词汇和复杂的逻辑,在躁动火热和订单不断的餐饮场景之下,是阻碍。我不能够选择用户也没法选择用户,身为设计师,我应该给他们更加便捷、直观、顺畅、合理的设计,去辅助他们更高效地完成。

我应该给他们这样的东西。所谓的设计师的「身份」、「清高」之类的情绪和想法,在那一刻都被打掉了。设计要落地,设计师要低到土里面去。你应该是那个抬头仰望,去托举用户的人。

子木:所以你们最后产品怎么样了?成功了嘛?

慕青:不是说创业公司90%以上的都会失败嘛?虽然我们在执行上并不差,但是公司高层在战略层面上做的并不够理想。在北京这样一个城市,做的又是针对餐饮行业的B端服务,不够快不够准,很快就会失败。

子木:这是不是意味着你在此之后又更换了一家公司?上一家公司教会你「场景」,那么第四份工作所又帮你补足了哪方面的技能?

慕青:对,接下来的这份工作其实我就进入了一家比较大的企业了。这次,我真正体会到团队协作的感觉了。这在之前较小的公司当中,感觉是没有那么明显清晰的:在这里,一群人拧成一股绳去迅速地合力完成一件事情。这种愉悦感和成就感,是之前没有体会过的。但是协作并不是我体会最深的事情。

让我印象最深刻的,并且让我真正坚定下做设计师决心的,其实是因为我在这里真真正正感受到了设计对于产品价值上的真实提升。我们现在经常会听到设计赋能的说法,但是其实少有人真正明白甚至真实体会到设计对于产品的提升——在数据上有直接的反馈。

如果一个公司的设计和设计师处于边缘,用来配合的,并没有参与到真实具体的决策当中,设计赋能就很难了。如果设计是作为核心主力部门,它有话语权,在这家公司,设计甚至会冲在产品前面去推动产品前进,而不是被动去倾听产品的需求。

在这里,设计师主动去向领导提案,去主导,去完成。

另外,我也是在这份工作的时候,遇到了我的真爱。

子木:那么在你看来,设计赋能产品是对于所有产品都有效的么?

慕青:我不敢说所有,但是绝大多数时候,其实是可以的。其实这要看你对于设计的定义是什么。如果你认为一个设计师仅仅只是出图,那么能做的事情确实不多。但是,如今的设计师,尤其是在大厂和比较前沿的设计团队当中,设计师的角色早就不仅仅是出张图这么简单,设计师需要具备有有深入的交互思维,需要去洞见用户和事情背后的逻辑,把这些东西放到产品和设计当中来,你所「设计」的东西,其实是截然不同的。

走到今天,我对于设计这个东西的理解其实和当初已经截然不同了。无论是设计,技术还是产品,对于用户和产品本身的理解,决定了最终产物的好坏和高度。你理解的不够透彻,产品所做的规划,开发所输出的代码,设计师所输出的设计稿,会千差万别,不够好甚至做不好,都是理所当然的。

我们曾经看到过很多视觉上让人觉得非常愉悦的设计稿,但是你总会觉得差点意思。它差在哪?很简单,给真实的用户,放到实际的产品当中,你就会看到查的东西在哪里。

子木:那么设计师做图好看这件事情不重要吗?或者说,没有那么重要吗?

慕青: 确保视觉上的协调,一致和愉悦,是一个设计师的下限你明白吗?就是做到好看,是一个设计师的基本。另一方面,能够为产品赋能的设计,通常它已经不止是停留在视觉层了,它需要向上,上探到交互层,范围层,甚至战略层去看待问题和解决问题。

产品或者交互设计师所提交过来的,很多时候仅仅是一个方案,这个方案不一定是最优的。你如果是不懂背后逻辑以及用户的设计师,大概率只能照着别人的东西去画了。但是如果你懂得,其实是能够做好的。

不过考虑到之前和公司之间有保密协议存在,我无法向你透露太多的细节。

子木:其实我很羡慕你,在这样的几份工作当中,能够用设计来推动产品,能够获得正反馈,这种感受是难能可贵的。

慕青:如今我在一家极为重视数据驱动的公司里面工作。

从入行到现在,我听到了太多的「我以为」和「我觉得」了。设计是一定要讲求逻辑的,如果你觉得数据无法驱动,有很大的可能性是你没有用对数据。很多基础的理论和方法是拥有巨大能量的,设计师的「我以为」,很多时候仅仅只是一个个人感受,它无法真正改变用户。

一路走到现在,我从一个野路子设计师逐渐成长一个时刻都注重产品逻辑和交互场景的UI设计师,就像从一个新兵蛋子进入了正规军,再到王牌部队的过程。如今我知道什么是极致,什么是好的设计。

我的同事里全都是牛人。我们常说设计师有像素眼,但是实际上很多前端、产品也一样。

「我不能接受我的代码里面有一像素没有对齐。」

每一个小点都会有很多人会在意,其实谁都没法完全确保前面的一个小错误,在后面会不会产生额外的影响。你会发现,认真的力量是如此的真实而巨大,因为每个人都会借助认真,不断的修正设计,修正代码,修正产品,甚至修正事情的走向。你把一件事情做到极致,然后让他变成标准。等你下一次来做的时候,会自然愕然形成一个习惯。你会逐渐学会去审视自己的设计,去用更高的标准来执行和影响。

在一个顶尖的设计团队当中,你会发现周围的人都是见多识广的。可能给你提供一些交互上的想法和灵感的人,可能是一个后端开发。

子木:那么,这样的文化是怎么产生的?你有思考过吗?

慕青:其实公司会刻意抹掉职级上的差异,去模糊资历上的差异,这样的氛围才有可能不会因为这种位置上的高下而产生隔膜,这才有可能生发出一种真正开放的环境,才会让人去畅所欲言。「开放」这件事情真的不止是一句口号,它需要整个公司和团队竭尽全力去维持,它才能艰难地生长出来。而影响也只能是一点一点潜移默化地逐渐弥漫开。

众人拾柴火焰高,这句话很简单,但是当你真正碰到这样的团队,你才明白这样的力量有多大。

在我看来,前面设计的道路还在延伸,我还在不断修正,我应该还可以作出更好的设计。

子木:从视觉设计师一路成长为一名高级UI设计师,你觉得最值得分享的内容是什么?

慕青:之前我在优设私房课里,有针对性地分享过UI设计师的简历&面试秘籍,这是专门现在、此刻的UI设计师所制作的一份指南。因为我身为UI设计师被面试过,在如今的岗位上,也面试过不少UI设计师,我很清楚如今 UI 设计师求职面试包括简历上应当注意的问题,这并不是每个人都清楚的事情。

而另一个值得分享内容,就是 UI 设计师成长进阶的内容。很多表层的硬知识,其实只要你一直跟着学习都能学到,但是在2019年此刻,在当下这个互联网环境之下,UI 设计师从初级进阶到高级,靠的更多的是一些软性的技能,并不是一句简单的要懂交互、懂产品就可以简单概括的,有机会我会详细规划一下,分享出来 ~

子木:那我们就拭目以待吧~

目前 UI 设计师慕青在优设私房课中开设了针对 UI设计师的专项课程《UI设计师直通大厂的简历&面试秘籍》,在桌面端访问的同学可以直接戳链接进入课程。

也可以使用微信直接扫描下面的二维码进入课程:

优设大课堂

阿里新开发了一款神器,零基础也能轻松做出酷炫动效!

阿里作为中国互联网企业的标杆,不仅一直在为广大人民群众提供快捷便利的服务。也不断引领行业,在各个专业领域,给专业人员提供了优质的工具与服务。对设计师而言,无论是每年一度的 UCAN大会,还是 Kitchen、语雀、Ant Design 等设计开发工具,都给广大设计师带来很大的便利。

而最近,阿里又推出了一款基于 Lottie 的动效设计平台 ── 犸良。能够快速生成设计师想要的动态效果,并交付给开发,极大地提高了设计效率和设计还原度。

犸良是什么?

它是一个积累了很多通用动效素材的平台,让不会动效的同学们也能基于动效库和素材库快速生成一个通用动效创意,你只需要简单地编辑图片、颜色或者文字即可。同时平台集成了以 Lottie 为代表的动效技术,让曾经令人苦恼的安装包大小和性能问题一并解决。

△ 官网:https://design.alipay.com/emotion

犸良的应用场景

犸良支持全平台 iOS、Android、H5、小程序。无论是营销展位、活动页面、空状态还是产品icon。犸良编辑器对接投放平台,一站式完成动效创意制作和投放。

丰富的动效素材能够满足多种场景需要。

犸良怎么用?

方式一:基于模版直接制作(适用于设计师进行动态banner制作)

  1. 选择模版
  2. 从动画仓库选择动画进行当前动画的替换
  3. 通过替换图片或修改颜色来自定义动画
  4. 自定义模板文字内容
  5. 选择模板背景图片
  6. 完成编辑选择是否带背景(banner模版默认带背景)
  7. 导出成功下载 json

方式二:自定义画布制作(适用于设计师进行模板覆盖不到的动效应用场景)

使用犸良一分钟做出来的效果,大家感受下:

体验感受

综合体验了一下犸良,相对于鹿班人工智能随意撸图。猛良其实是一款基于人工的动效模板网站。所有的动态效果都是设计师提前做好的。基于 Lottie 的特性,将可编辑的属性进行模块化。

说到这里有些设计师可能有疑问了,Lottie 究竟是什么?在优设已经有相关文章介绍的比较全面了,这里就不赘述了,阅读链接:http://www.uisdc.com/tag/lottie/

简言之 Lottie 就是一个快速将 AE 中设计的动效快速调出,并且开发可以直接调用的动效库。

Lottie 的原理是将矢量图形和动态效果通过代码实现,复杂的图形导出图片资源。最终生成 json 文件+图片资源。犸良所做的就是,将 json 里的颜色属性提取出来,用户可以从外部修改。同样只需要替换图片资源,就可以让用户自己设计的图形根据 json 写好的运动方式来展示。如果你把一只移动的猪替换成猫了,那么你看到的效果就是一只移动的猫。

而它的文字编辑功能,我觉得就比较神奇了。因为 Lottie 貌似不能从外部修改字体,应该是阿里自己写的。如果有知道的同学也欢迎解惑。因为我们在实际工作中经常遇到这样的问题,就是如果动效包含文本了,需要适配国际化,就没法从外部修改语言。如果能解决这个问题,将会减少很多麻烦。

从现有的素材来看,其主要应用场景还是电商和运营方面。相信未来会增加更多的素材和应用场景。希望以后能够开放出让设计师可以将自己做的动效分享出来供大家使用,或者提供优质付费内容也是不错的选择。

就个人的工作经验来看,Lottie 还是有丰富的应用场景的。比如可以做动态图标、动态闪屏页、表情贴纸、直播礼物、空白页、动态banner……

其实 Lottie 官方社区也有很多的动效资源,都是来自全世界的设计师上传的,大家可以去下载参考,如果要商用,可能需要联系作者。

△ 附上链接:https://lottiefiles.com/popular

本文资料,很多都是来自语雀的分享。再次感谢相关人员的辛勤付出。大家可以在此处查看犸良的完整介绍:https://www.yuque.com/dapolloali/news/ui43vg

再次附上官网:https://design.alipay.com/emotion

因为犸良是基于 Lottie 的工具,所以有相关基础的设计师很容易上手。还不了解的同学也可以在各大设计网站搜索到。

欢迎关注作者的微信公众号:「懿凡设计」

优设大课堂

壹周速读:插画图库 / 新零售5要素 / CMYK配色法 / IP设计玩法

壹周速读,每周一早上更新!

上周文章里面好货不少哦,不仅有免费商用插画图库,还有Dribbble创始人的访谈,超好用的 CMYK 配色法也一定能让你眼前一亮 ~

访谈 | 他是真正站在 Dribbble 背后的男人,听听他的肺腑之言

他和你一样焦虑,但是他敢于直面自己和问题本身。在面对新鲜事物的时候,有时候比你还固执,但是事后他认怂。他对于改变非常谨慎,但是干货邀请自己的邻居做创业合伙人并且毫不后悔。他乐于分享,坦诚对待每一个朋友,同时他对于自己也非常坦诚。开办Dribbble ,他自嘲开发过很多沙雕的功能,走过弯路,做过错事,但是他珍视每一段经历,并不后悔。这就是 Dribbble 的创始人 Dan Cederholm。他即将离开 Dribbble,这篇文章,是他临别之际的分享:

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

访谈 | 世界上最早的UI设计师,他们是怎么做设计的?

UX 设计师 Geoff Alday 在追溯汉堡图标的诞生源头时,发现它们早在第一个图形化界面上就出现了,于是催生了这个访谈。Norm Cox、David Canfield Smith 以及 Ralph Kimball 是最早拥有图形化界面电脑背后的主设计师,某种意义上,他们是 UI 设计这个行业的开创者和最早的践行者,如果你对于设计史感兴趣,他们聊的内容也许正是你想知道的事情:

→《今天我们来聊聊世界上最早的 UI 设计师》

图库 | 免费可商用的艺术插画图库 Mixkit Art ,赶紧收藏!

Mixkit Art 收录的是很好看的艺术图案和插画,这些图案都有着非常强烈的配色,加上简单、舒服的构图设计。依照网站授权说明,网站上所有插图皆能免费下载、自由使用,无论是商业或非商业用途,亦可复制、修改或公开播放等等,没有规定必须标注来源,欢迎将 Mixkit 多多推广让更多人知道,一句话,赶紧收藏赶紧用!

→《免费可商用!超多高质量的插画素材都在这个网站了!》

UX | 灵活机变的新视角!新零售类的产品要注重这5个用户体验要素!

做产品和交互的同学应该早就知道经典的5大用户要素吧?那么对于「盒马鲜生」这样更为独特的新零售类的产品,在分析、拆解学习的时候,是否必须完全遵循原始的这5大要素来拆解看待呢?王晗陵今天的这篇分析文章,就换了一种方式来分析产品,也许你也会喜欢这个略有不同的切入方式:

→《从用户体验 5 要素,分析「盒马鲜生」是如何收获百万好评的!》

成长 | 那些每天都在变强的高手,他们都是只学习不睡觉的吗?

他们当然也要睡觉。但是他们的成长也非常讲究方法。这次的《为什么有人工作才两年,能力就远超过五年的设计师?》系列文章,远哥邀请来了「彩云译设计」背后的主理人,目前供职于腾讯的 彩云Sky,在快速成长、专注学习这件事情上,他有哪些独属于他自己的领悟和经验。和自己的状态互相对比,也许答案就在这篇文章里:

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

职场 | 门槛越来越高的招聘需求,到底给设计师提出了哪些新要求?

可能很多同学都在求职过程中碰过壁。到底是企业要求太高了,还是我们自身在能力上确实有明显的缺憾,有待弥补?作品集真的不足以反映设计能力吗?今天这篇文章,详细盘点了企业招聘对于设计师可能存在的新要求,正在寻找工作的同学不要错过了:

→《找工作越来越难?现在招人不止看设计作品,还关注这 10 个技能》

职场 | 毕业之后你一直在小公司,最本质的原因到底是什么?

@做设计的面条 面条姐的文章一如既往的尖锐而精准。很多在职场浮沉的朋友都遭遇的痛点:毕业几年,依然还在小公司打转。到底是技能打磨不到位,还是魄力不足,勇气不够?如果机会青睐做好准备的人,那么换成是你,你需要做什么准备?面条姐这次的稿子,并不只是给你讲方法谈道理,她自己的故事和经历,应该会给你更为直观清晰的感知和启示:

→《毕业3年,一直都只能在小公司打转的原因是什么?》

UI | 想搞定深色模式?这份鞭辟入里的文章告诉你要注意什么问题!

有没有觉得刚刚更新的 iOS13 的深色模式设计指南有点简单粗陋,而 Android Q 的深色模式和其他的深色模式规范也略有差异?确实如此!阿里巴巴国际UED 团队的设计师王羽枫帮你整理了一份深色模式设计指南,有分析有对比有案例,连深色模式中可能存在的坑都帮你一一拆解出来,快看看吧:

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

配色 | 拯救暗沉配色的 CMYK 配色法,一定要学!

这是一套几经验证的配色方法,它并不是单纯的依靠简单的逻辑和主观感受来进行配色!水手哥的这套名为 CMYK配色法的方法,具有极强的可执行性,多的不说,你一定要学习收藏!

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

实战 | 开发一款微信小程序,腾讯的高级设计师是怎么做设计的?

项目复盘常常能够折射出完整设计项目背后的亮点和宝贵经验。这次的项目复盘,所针对的是一款出自腾讯的小程序,飞线巴士。相比于普通的乘车类的应用服务,飞线巴士所针对的设计对象和服务是截然不同的:定制化的巴士拼团服务。从需求到具体的产品框架逻辑,再到设计落地,整个复盘看点非常多:

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

品牌 | 用天猫和百度的案例,教你正确玩转品牌 IP 形象设计!

都在提品牌IP形象设计,可是品牌 IP 形象在整个品牌设计体系当中,到底所处的是哪个部分、那个阶段、涵盖了哪些内容?IP 形象到底会在哪些方面发挥作用?还有哪些细致入微的玩法是设计品牌 IP 的时候值得注意的?这篇文章会给你答案。文中使用了天猫和百度两家科技大厂的 IP 形象作为案例,细致地为你展示了整个过程。干货满满,不要错过~

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

优设大课堂

腾讯案例复盘!20 天如何设计出一款裂变小游戏?

为了迎接六一鹅童节的到来,「ABCmouse 如何在众多教育竞品及各类节日广告中脱颖而出?」成为了近一个月团队最关切和热门的探讨点。团队在成本有限的情况下,高效执行,终于如期上线,接下来就跟大家分享下,我们是如何在众多推广模式中,聚力打磨出一款 H5 小游戏「ABC狂奔曲」的。

设计目标

节日运营是产品运营推广中必不可少的途径,也是产生爆点的契机。我们预测到这个以「鹅童」为核心的节日里,社交圈必将充斥各类竞品广告,甚至部分产品将抓住「大儿童」、「回忆杀」等用户敏感心理,占据朋友圈大量广告位。

有一个思考点:在产品常规推广模式基础上,是否可以另辟蹊径,以「自传播」来补充自然流量运营模式?毕竟常规推广渠道和资源是有限且匮乏的,持续运营并非长久之计,虽无法确保能带来直接营收转化,但至少可以强化品牌宣传,扩大品牌受众范围,挖掘更多潜在用户。

前期定位

在设计开始前,我们就明确了这次传播的活动目标为「品牌传播」,执行目标是「裂变转发」,并且确定了主要的传播平台及场景为「公众号/朋友圈」,从这三点出发,逐一推导出传播核心受众、受众心理、游戏特征以及游戏形式。

通过上面的思维金字塔,我们着重分析了活跃在朋友圈「大儿童」的游戏场景及游戏心理,并总结以往转发率较高的小游戏特征。其鲜明突出的特征,可以快速帮助我们定位游戏核心要点,结合 ABCmouse 产品属性及节日相关视觉元素,希望能让用户进入游戏之初,便能直接受氛围影响快速理解产品属性,并充满成就感,进而提升点击欲与分享欲。

通过这些关键词帮助我们继续拓展思路,驱导我们更加明确游戏内容设计,思考过程中尝试串联出的各种方案方向:

  • 回忆杀:李雷与韩梅梅的英语时光再现;
  • 冷知识王:对错答题比拼;
  • 超级手速比拼:字母点点乐……

时间计划

自项目发起到执行、发布,时间非常紧张,只有一个月不到,团队需要提前预估好活动上线总时长,以及策划、设计、开发各环节所需时间,才能更有效把控项目进度、节奏及风险预估,达到更紧凑有序的团队合作。

游戏策划/交互/设计雏形

通过以上关键词的串联,最终敲定出以九宫格为原型的「字母点点乐」方案:通过满足用户的超快点击感,让用户在游戏中充分释放大脑、无需思考纯比手速,踩着欢快节奏的魔性音效,让用户在充满紧张刺激的氛围中,和 26 个字母进行短、频、快的接触与互动。

初期也测试了多种找不同的内容形式,连线找单词、寻找不同字母、寻找唯一小字母等,并对几种形式模拟测试了用时及难易度,为搭配完整的 26 个字母,保证语音与画面高统一与和谐性,最终敲定了方案「寻找唯一小字母」。同时对游戏的入口、流程、关卡设置、结果展示以及评分排名机制也进行了初步的游戏策划。

游戏设计:场景/角色设计

普通的九宫格并不是最理想的视觉体验,它缺乏活力与创新性,难免让用户玩的时候丧失耐心、倍感枯燥。我们从游戏属性出发,将「游戏设计」落实为三方面思考:

  • 超速感体现;
  • 游戏场景;
  • 角色化设计。

六一正逢酷暑,充满速度感、紧张感及激情氛围的「运动会」成为了我们创意的出发点,而「奔跑」十分契合体现拼手速,希望传达给用户视觉联动体验,同时也寓意着 ABCmouse 将一路向前冲的美好愿景。

我们尝试赋予 26 个字母生命力,像是 ABCmouse 衍生出来的字母小人,一个个整装待发的「运动健儿」,搭配随机切换的场景设计,便有了现在大家看到的基础画面。

我们经过对字母小人造型的测试,从拥有手、脚、眼睛和嘴巴,简化为凸显奔跑的手脚,来适应彩色的场景地图,既可以展示有趣的姿态,又不至于繁琐累赘。而地图插画则故意弱化于角色一个层级,让游戏界面丰富化同时,不影响用户识别和操作。

难易程度/关卡设计

字母小人已经 stand by,但如何让它们在界面中给用户传达出递增的难易度呢?我们认为游戏之所以持续吸引用户继续玩下去,要的就是「紧张感」和「刺激感」,只有这种感觉愈发强烈,游戏才能刺激用户挑战「高速」极限,激发用户的好胜欲以及成就感。我们将难易程度体现在以下四个方面的叠加组合:

  • 颜色搭配变化;
  • 数量阶梯式递增;
  • 字母跑速递增;
  • 音乐音效速度递增;
  • 随机进入的地图主题。

同时我们在界面右侧,加入了游戏进度,让用户更明确且视觉化感知到整体的游戏时长,并且加入了三个「陪跑」头像,让用户在奔跑时不会感觉太寂寞,也起到竞争刺激作用。

音效录制及设计

一首能够唤起大儿童共鸣的「ABC字母歌」,非常符合「六一儿童节」欢快纯真的气氛,我们期盼在这一天,ABCmouse 能带给用户充满儿时回忆的旋律。同时考虑增添用户游戏过程的趣味性,提前为 26 个字母录制极具魔性的字母音效,并将字母音效处理得更接近孩童声音,Q 萌可爱的字母最终将结合背景乐,贯彻在整个游戏环节。

ABCmouse 带给大家的惊喜,远不止这些,我们通过对每一位用户点击速度进行记录和判断,那首最终生成的字母歌,将是为你量身打造的「专属字母歌」,快去听听朋友们的歌,你会发现,每个人的节奏都不同哦。

点击查看游戏视频

越是紧张刺激的游戏关卡,越是离不开及时有效的激励。我们为用户提供不同等级的「鼓励语」,轻松愉悦的「赞美」穿插在用户每一次的正确选择反馈上,无形中加强了游戏与用户的亲密感,并提高用户参与热情。鼓励语分为三个等级(prefect、good job、nice),这个分级同时也是在暗示用户,此局的总成绩将会如何「优秀」。反之错误的选择,字母小人也会给予视觉与音效上的反馈,无时无刻都与用户紧密互动。

用户粘性:计分机制/排行榜

计分(计时)是为了让用户拥有排名,拥有荣誉感,同时也有刺激和动力,保证一定的持续性和留存率,但因为游戏设计得非常简单,可能会有千万种「神操作」来获得好成绩,为了保证公平性,以及拉开成绩差异,所以除了完成游戏时间计时以外,特别加入两个扣分项,分别是错抓数和漏抓数,错抓数用来防止用户利用多手多指盲点,漏抓用来激励用户不要轻易放弃。

有趣的文案

一开始便设定了是以年轻人为主要目标受众群,所以我们第一时间就否掉了各种走鸡汤、煽情路线的文案风格,采用最接地气并能够触动朋友圈年轻人心理的语气,利用网络流行语,吐槽式逆向打动用户。希望能够像同龄人,像身边朋友的口吻一样,挑起年轻人的挑衅心理、好胜心。

3D风格首页设计

首页是用户进入游戏后所看到的第一个画面,精美度和氛围上我们绝不疏忽,通过植入与配合 ABCmouse 3D小老鼠的形象,我们配合输出了同样 3D 效果的首页场景图,让整个画面更显丰富和视觉冲击力,并在成绩展示页面突出强调用户的成绩和成就感,满足用户的荣耀心理,增强用户寻找好友 PK 的欲望。

扫码体验「ABC狂奔曲」

非常开心这次通过团队的力量,在极其有限的时间内,大家齐心协力让 ABCmouse 第一款自研小游戏如期上线了!我们经历了内部自我怀疑、自我挑战、甚至对想法实施的动摇,到最后得到团队所有人的理解和支持,这是一次挑战不可能任务非常难得的实践。

希望可以通过这次活动,探索出一条运营推广自传播方式,后续逐步验证营收转化方式,第一步,非常艰难但意义非凡。活动现已发布,大家可以通过 ABCmouse-Tencent 公众号推文、公众号地步菜单栏入口、微信朋友圈以及扫描二维码,进行体验。

ABCmouse 第一款100%自研小游戏,期待大家的热烈刷榜与优化建议!

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

优设大课堂

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

我之前在网上看到一个用动态数据图展现近 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
优设编译:@陈子木

优设大课堂

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

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

往期回顾:

灰昼 – 亚实验室首席美术总监

优设:

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

灰昼:

出现新灵感,及时记录

多浏览设计网站这里就不提了,艺术的灵感并非只是从电脑上获取,传统文化中也有一些比较有趣的地方。每次产生的新灵感都会立即做下记录。记录包括笔记、照片或者涂鸦,比如有一段时间特别喜欢阿拉伯风格建筑的马赛克纹饰,后来去摩洛哥时特意拿相机记录下了这些纹饰。发现从宗教建筑甚至到皇家陵园,都用了马赛克作为主要装饰形式。

△ 清真寺图样

△ 皇家陵园

△ 根据灵感而进行艺术创作

在练习中培养风格

这一项和上面的是分不开的,记录灵感的下一步就是需要找可以试验你的灵感的地方。这是一个反复锤炼的过程。虽然商业项目和艺术项目不同,但是大抵都会符合设计师的整体风格调性。

△ 灰昼作品,更多请查看他的Behance:https://www.behance.net/NoirChen

优设:

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

灰昼:

作品的美观或者好看与否对一个设计师至关重要。但学会从客户角度思考问题,以及沟通,是让这些作品得到认可的关键。

天马行空的设计反而好做,在框架下的设计,怎么能做到这个限制下最好,并且得到客户认可,这个就不仅仅是设计本身的功底了,而需要增强沟通和思考。

很多设计师可能会有这样的困扰,我就做设计还不行吗,非要和别人沟通吗?不沟通只能成为单纯的执行者,而沟通会和需求方建立一座桥梁。可以大大减少设计的反复修改和过稿的成功率。

优设:

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

灰昼:

不要拿到项目先做。首先要思考这个项目本身的需求。

客观总结项目反复修改的原因,如果自己的问题,从哪里改正?如果需求方的问题?是不是没有沟通清楚或者表达不清楚?

所谓成长,就是要总结每次项目遇到的问题,比如商业设计中可能做到 70% 就已经达到客户满意的程度,但是自己又花了很多时间做到了 90%,那么这中间差距的 20% 客户是感知不到的(审美限制)。那你需要告诉客户这 20% 的设计具体体现在哪里。写一个 PPT 阐述一下这些东西,这会让客户觉得,你比他们考虑的更多,你的建议会更有价值。长期以来就可以建立一个信任的合作关系。反之,你觉得你可能花了很多精力在这个项目上,但客户又觉得好像只是他说什么你做什么。这样两边都会觉得对方没有用心。

审美的建立需要长期的积累,每天都要去看些好的设计。所以从现在开始吧。

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

太注重技法表现而忽略对设计本身的思考,

太注重视觉表现而忽视对根本需求的思考。

行行珂 – 拉勾设计总监、知名字体设计师

优设:

您有哪些坚持了三年以上的工作和生活习惯?对你职业生涯帮助最大的习惯是什么?

行行珂:

要说坚持三年以上的习惯的话,我觉得应该是「年终总结」。不管是否在职,每年年末我都会做一份「简历」以此来回顾这一年的得失,如果提笔忘字不知道该写点什么,那么也证明了这一年的虚度。可能是「危机感」在作祟吧,虽然设计行业并不像外面商业战场那样天翻地覆日新月异,但是时刻提醒自己保持「危机感」,以「变化迎接变化」推着自己往前走,始终是成长的最佳途径。

优设:

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

行行珂:

动手。

互联网的发展除了带来的便利和全球视野外,同时也加剧了这个时代的浮躁。以往信息不通畅的年代,大家会认为学有所成是需要经过一段漫长的取经之路,「十年寒窗苦读」、「台上一分钟台下十年功」是不变的真理。而现在,审美是在提高,但都习惯于找捷径,大家更愿意相信「一夜暴富」而不愿意去正视背后的努力。

我认为,沉下心,关掉那些「一夜成名」,然后动手去做,这才是最快速的成长之路。

优设:

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

行行珂:

其实和第二个问题吻合,除了「浮躁」之外,「跟风学习」也不是一个好习惯。

活到老学到老没错,但「盲目跟风」只会被贩卖焦虑者钻空子,这个学完学那个,慢慢你会发现「学习」这件事成了你的主业,而「学完之后要干嘛」却少有思考,本末倒置。学,以致用。

优设:

你是如何学习一个新事物的?

行行珂:

学习的动力来自兴趣。

在之前我也学过很多好玩的东西,既然在讨论设计,那还是拿设计举例。在 C4D 还没有如今天风靡的前几年我就开始学习,无论是跟老师上课还是和身边玩 C4D 厉害的朋友交流,都没什么进展,一直处于「C4D启动」的入门状态。「什么火学什么」,学而不思这个过程真的很痛苦。

相反,我在做动态汉字的时候,则没有这个「痛苦」的过程。其实这种形式一直也有人在做,只是不多,汉字通过动态流畅地演绎起来非常酷,我只是跟随者。

△ 行行珂动态字体作品,更多作品关注他的Behance:https://www.behance.net/gallery/77209661/Animated-Chinese-characters

一直以来我就想做一套和汉字相关的成体量的「大型项目」,只是起初苦于不会「工具」,就一直搁置。直到有一天突发奇想:如果能做一套「动态汉字字典」会是什么样呢?汉字本就由象形演化至今,虽已过千年,但字里行间依然还能窥见其韵味,而图形和动画不分国界,全世界的人类都能看得懂。至此,兴趣便来了,「去呈现脑中的想法」,然后针对性去解决具体表现层的问题就好办多了。

前后差不多一个半月完成了目前大家能看到的这些「小样」。虽然和「汉字动态字典」的宏伟蓝图相比不值一提,至少算是开了个头,同时也打开了今后在字体方面新的表现形式。

 

 

优设大课堂

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

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

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

优设大课堂

用阿里巴巴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」公众号:

优设大课堂