图标的秘密——锤子科技资深UI设计师李一奇分享

admin 2020-09-04 12:53 公司动态

  Image title

  UI中国UTalk第八期在北京服装学院的小剧场举行,活动邀请了锤子科技资深师李一奇与大家分享锤子科技图标的秘密。

  Image title

  ▲ UTalk现场的李一奇

  图标的定义什么是图标?

  广义来讲,图标的定义分为两种,一种用于生活中传达意义的图形符号,包括文字、讯号、密码、图腾、手语等,在日常生活中的运用常见于于公交站牌,卫生间导向或者前方急转弯的警示标志等;另一种是用于电子设备上表示命令或程序的符号。

  我们今天所讲的是后者,用于电子设备上表示命令或程序的符号。

  图标的产生以及历史由图标窗口和按钮等图形元素所组成的可视化操作区域,我们称它为Graphcal User Interface,也就是我们今天所说的GUI,图形用户界面。

  在最早的时候,GUI 你是没有图标的,它仅仅包含窗口按钮和信息内容。1973年的时候施乐公司的PARC研究所研发出地球上第一台带有 GUI 和鼠标的电脑Xerox Alto,他是后来所有个人电脑的原型。可惜最终这台电脑的商业命运是以失败告终的,它当时被认为是世界最伟大的失败产品。

  Image title

  ▲ Xerox Alto

  关于失败的原因,有些说法是因为当时施乐的董事会并没有看中这个商机,未能将这台电脑商品化,也有些说法是,产品上市后因为生意冷淡,导致了失败。不管怎样这不重要,重要的是它的出现在计算机领域确是一项伟大的创举。后来这个创举是被比尔盖茨和乔布斯发扬光大了。

  在网上关于施乐公司的一些记载称,1979年,乔布斯参观了施乐的PARC研究所,当他看到这台电脑时,他被这种超前的交互方式震撼到了,我想这种震撼程度不亚于07年的iPhone带给我们的惊喜,他惊叹到“哇!这就是未来。”,于是他回去后决定自己研发一台带有鼠标和GUI的个人电脑,那个时候乔布斯才24岁。

  之后苹果公司在1983年推出了Apple Lisa。

  这一套就是施乐之星 Xerox Star 的,据我所知这也是世界上第一套装在个人电脑里的图标,这是乔布斯的 Apple Lisa , 这是 Windows 1.0 和 Amiga Workbench 。大家可以纵观这个时期的,因为受到了显示技术的限制,设计师只能在有限的空间里面进行图标创作。几乎都是分辨率非常低的单色图标,而且没有 Alpha 通道。

  Image title

  ▲ 80年代的图标

  到了 90 年代,微软和苹果相继推出了新的系统界面,随着显示技术在分辨率和色域上的提高,设计师或艺术家有了更大的发挥空间,随之出现了更多颜色的运用以及更多透视效果的可能性。

  Image title

  ▲ 90年代的图标

  那么 2000 年的时候就出现了我们都非常熟悉的水晶质感和玻璃质感的图标风格。

  那其实移动设备上的 GUI 发展同样也经历了一番刚才所说的,由于技术的限制设计师的创作空间,刚开始只能设计单色的简单的图标,到后来可以执行各种创意,实现各种效果,一直到现在。

  Image title

  ▲ 2001年-2007年图标的发展

  2007年苹果公司就给了世界一个惊喜,第一代iPhone面世。那么最具特色的设计之一,就是圆角矩形的运用。毫无疑问,圆角矩形的设计是非常成功的,它有效保持了iOS系统的整洁和统一,也由于它的成功,很大程度影响了设计师们的设计趋向。随着时间推移,圆角矩形慢慢地变成了一种极端,随后几年,移动平台的设计风格严重趋同,什么都是方的。甚至在 上,我们可以看到很多设计师会下意识的将图标设计成圆角矩形,尽管这个设计可能并不用在iOS系统中。你们可以想象一下,在没有任何前提的情况下,你现在要画一个图标,例如说你现在要画一个凳子,你会刻意的把它画成三角形吗?你当然不会,除非你在从事艺术创作,正在完成一个天马行空的想法。除此之外,你不会把一个凳子画成三角形。

  在这里我想说明的一点是,在一个极度成功的人或事情面前,人们常常失去应有的思考和判断,不假思索地去模仿他的一切特征,以便寻求自身的进步。就像一个城市他非常的繁荣,在它周围落后的地方,就会容易去模仿这个城市的,包括经济模式,建筑风格,道路名称等等特征,尤其很多地方的人会模仿这个城市的居民说话的口音。因为他们相信这一切模仿,都是他们寻求进步的方式。回到设计上,它的质感好,我们可以学习,它的颜色运用协调我们可以学习,他的隐喻恰到好处我们举一反三,但它的造型如果毫无道理,我们就应该去避免。

  2013年,当我们在做Smartian OS的时候,在设计图标的过程中,我们经过不断的思考,坚持认为图标就应该是它应该有的样子。无论在手机还是电脑端。

  Image title

  当时我们试着把 OSX 里的图标放到手机里,出现的效果是虽然都很精美,但会显得乱,这样不适合长期使用也不方便查找,大家可以比较一下,桌面操作系统有足够的空间去容纳这些异形图标,所以看起来非常的舒服。那我们应该如何在一个小的空间里,既能摆满异形图标,又不显得乱呢?缩小一点看看,这是安卓的做法,那其实这样会削弱图标的精美程度,因为只要画的好看,图标就越大越好看,iPhone 是做一个统一的形状,让它们看起来不那么乱,但我们觉得这并不是最好的选择,只是妥协的结果。然而当时我们还考虑一个问题,为什么除了Dock 以外,其余一定要16个图标呢?不能更多也不能更少了么?其实通常我们一天,使用最频繁的App 一般不会超过12个。所以我们那时尝试了这个做法,减去几个图标把其余的放大些。这样就解决了刚所说的问题,既能在一个小的空间里摆满异形图标,又不显得乱。然后我们,再加一些线,让它看起来更整齐。

  那么确定的设计主张和方向了以后,我们应该如何制定规范呢?大家觉得全部都是异型图标,应该怎么规范?这是桌面上能显示的最大的图标尺寸,我们先定一个最常见的形状——圆形,大家可以看到,圆的上下左右各留了1到2个像素,你们知道是为什么吗?我们把它称作安全区域,是预留给描边或者阴影的。举个例子,因为当你画完了一个图标,它有可能会在白色或黑色上面出现,如果这个图标是白色,他在同样白色的界面时出现的时候,很有可能是这样的,那么这个时候,为了保证圆形大小与别的图标一致,我们必须给它加上一些描边或者阴影。那么定下了这个圆形的以后呢,别的形状就好办了。这是一个横长方,这是一个竖长方,你们知道为什么它的形状一定要是这样吗?其实答案很简单,它们与圆的面积是相等的,这样能使得它们看起来,视觉重量也是相等的。那么长方形其实是我们的保守方案,我们只会在不得不的时候才使用它。如果可能我们一般会选择图标本身该有的样子,规范异形的方法就是让它面积的计算结果尽可能地与圆形相近,这样看起来最终呈现的效果就会越发的平均。

  这里顺带提下我们的圆角,一般我们用Photoshop 拉出来的圆角是这样子的,这是苹果的圆角,这是我们的圆角。大家有发现什么区别吗?

  你们可以比较一下,这个地方看起来会不会生硬了一点。因为它的组成形式是这样子的。相当于我们驾车走在公路上,到了这个点,一下打死了方向盘,然后转弯,然后出弯立刻把方向盘打回来,再直走,结果就会呈现这个圆角的形状。那么苹果在圆角的设计上,是相应做了调整的,他们在入弯的时候,慢慢的把方向盘打到一个角度上定住,然后转弯,然后再快出弯道的时候,再慢慢把方向盘打回来。这是我们平时所说的曲率连续的那个概念。那大家再来看看我们的圆角,我们从进入弯道的那一刻就慢慢的转动方向盘,每经过的一个角度,方向盘转动的幅度就会更大一些,经过45度角我们再慢慢的再把方向盘打回来,全程是一个渐强渐弱的曲线。所以我们的圆角看起来是最柔顺的。

  Image title

  有了规范以后呢,就开始画图标了,我要制作一套好的系统图标。那么要搞清楚什么是好的系统图标之前,先搞清楚什么是好图标。

  好图标的特性包括三点,第一是好看,第二是识别性,第三是隐喻。

  那么什么是好的系统图标,好的系统图标是在这3点的基础上,再加上特征和品牌两个属性,那么特征又包括了它自身的统一性和在其他方面的拓展性。那么特征的把握是非常重要的,这边着重讲一下,大家都知道我们花了很多心血在第三方图标的重绘工作上,友商们也是这么做的,为的是让主界面的图标们看起来更加和谐,但是我们不可能吧世界上所有的 app 都重绘,在每个用户的手机里肯定还有原厂图标。出于这个考虑我做了这个实验,我找了两套我认为设计得非常不错的友商的一些图标,这一屏是Smartisan OS的系统图标。那么单纯从风格上看,它们有各自的设计语言,在造型的把握也非常好看,我相信它们的特征都足以让各位记得,甚至在一段时间以后,再次辨认,你们也不会出错。那么接下来我要开始做一个实验,我找了一些第三方应用的原厂图标,我把刚才一些系统图标混进去,大家有没有发现这些图标很容易被辨认出来?然后再换成我们的系统图标看看,打成一片了。原因很简单,在设计语言和风格都是非常统一的前提下,我们使用了很多不同的表现手法,有写实的,有抽象的,有画的,有照片,有极简的,有复杂的,使用这么多的表现形式,为的是看起来更加丰富,同时兼容第三方原厂图标的风格,使得摆在一起时显得更加平衡。

  以上就是我想着重强调的第四点特征以及对特征的把握。

  那么说到品牌,我认为是一个产品的设计和体验达到极致了以后,产品背后蕴含的一些故事。 像这张邮票,这是 Smartisan OS 的邮件图标,这是我们当初的一些方案,最后我们选的是鸽子,以邮票的形式出现。那么看到鸽子其实是比较容易联想到送信的,开始我们把它设计成这个样子,但后来因为感觉太调皮了,不够稳重,所以去掉了,然后很多朋友都关心这个章上面的内容,我们放大看一下,这一圈是我们公司的地址,望京东路一号。

  那么相机图标上的这个参数是我们后置镜头的焦距和光圈,是的,每一代手机都不一样,哎呀,我们是一家注重细节的公司,非常注重细节。

  这个是我们天气的图标,这是给大家展示我们的一些设计过程,其实这个天气图标本身和它的界面风格是高度匹配的,这个后面我会给大家讲到,这是相册图标的设计过程,其实我们最后选定这个图标是出于一个原因,大家可以看一下这是我们之前所有的系统图标,有没有发现少了一个比较重要的颜色?那么为了让这个橙黄色看起来,不显得那么的暮气沉沉,我们选择了一个小孩奔跑的照片。那么相对于前一版富士山来说,无论是颜色上还是情感上,这张照片看起来更有温度。

  那么刚才提了一下,图标和界面高度匹配的设计,我们家是做到了极致。甚至有些图标的设计是先有界面的,像便签的图标就是先有见面再有图标,然后高度匹配的还有商店,还有时钟,音乐,天气和计算器等等……

  大家关注我的新浪微博 @李一奇

  Image title

上一篇:Material Design交互设计四要点足以让用户惊喜
下一篇:教你如何诊断你的网站目录分类

猜你喜欢

手机扫一扫添加微信

0592-5969527