![]() Path那篇文章在虎嗅发表后,害得嗅哥陪俺一起被骂了无数次,听到的最多的一句是“你丫才美工,你们全家都是美工!”。要不说咱们挨踢人都比较文明呢,当年在天涯房产观澜里挨骂的时候,那可是祖宗十八代都被骂进去了,现在的这种骂法我听着几乎跟夸奖差不多。 在这里特别说明一下,我真不是美工,我们全家也没一个美工(我倒是真心希望能有个美工亲戚,那能帮我们这个小小的创业团队多大忙啊)。 美工=美术工程师,在我眼里一直都是一个非常中性的词汇,说Path是美工Team,其实是在美术方面表扬Path,Path的美术工程师水准高是褒义,Path的产品水准低是贬义。 写Path的时候就想好了要连续写几篇关于用户体验的文章,上一篇写的动画,今天以一个外行人的身份说说美术,既然只聊美术,我会继续沿用美工这个简称,请多包涵。 作为一个初创团队,我们没有美工(这其实一点儿也不丢人,您看看Instagram第一版图标就知道了,估计他们当时也没有)。 抠图、找朋友们改图,在那段时间里真没少干这类的活儿。朋友很讲义气,身怀六甲还帮着作图,人家够意思,咱也不能老是不要脸的麻烦人家啊! 所以,很多时候,我和小宋会自己纠结着弄图(我也算是Dribbble和Iconfans的常客了)。幸好小宋有点儿小文艺,会点儿最基本PS操作(据说是大学的时候为了把自己P好看点儿泡妞使),那段时间里,我们俩真没少一个像素一个像素的修图,像素看多了,我又是个好问自己问题的人,就琢磨出了一些道道来,今天聊聊,请多指教。 1、与现实世界中几十上百种美术流派不同,UI设计的好坏其实只有一个标准,就是让人在潜意识里的感觉是舒服的还是不舒服的。就像在动画那篇文章里提到的一样,自然的UI最舒服。 专业人士们每天争论着苹果的“拟物”、微软的“扁平”和谷歌的“没准儿”(谷歌自己做的东西还是偏“小清新”的)这些流派到底哪种更好,强纳森代替了福斯特尔之后更是传出了未来iOS会逐渐“扁平化”的小道消息,难道市场杯具的Metro UI反倒是未来的发展方向? 其实想明白这事儿,无关美学,无关技术,它就像是一层窗户纸,只待我们轻轻捅破。 在这件事情上,过去做的最正确的还是苹果(虽不完美,但还是比另外两头猪强多了)。如果用动画那篇文章里的观点来类比的话,苹果的UI设计方式就好比是动画效果里的非匀速运动,谷歌是匀速的,微软没动画,所有认为Metro UI是未来可以洗洗睡了。 现在让我们来思考一个场景: 每天起床睁开眼,您看到了雪白的墙,透过洁净的窗望向窗外,蓝天白云,神清气爽,一切都是那么的惬意。 等等,您觉得墙很白,蓝天很蓝,玻璃很透亮。其实,在您视网膜里的光学影像以及传送给您大脑后续处理的图片资料中,并不是纯白的墙、纯蓝的天、纯透明的玻璃,对您这位观察者来说,这个世界没有纯色。 不仅不是纯色,墙的颜色还是渐变的(而且不是匀速直线的渐变)。墙上还会有窗户的影子,白云看着也像是大号的棉花糖一般的立体、饱满、有质感。 现实世界里,没有纯色,一切都有质感、有阴影,没有质感、没有阴影的是“鬼”。 从出生开始,我们就在努力适应的这个世界,我们的认知越来越习惯于周遭的环境,如果将我们放在一个纯色的、无质感的、无阴影的世界里,就好像在没有动画的世界里一样,我们将无所适从。 看出来了吧?Windows Phone的Metro UI风格其实就是个渣,Metro UI完全算不上设计流派,以自然的标准来看,Metro UI的差已是极致。 估计有人该跟我抬杠了,据说微软的灵感来自巴士站的站牌和地铁的指示牌,为什么站牌和指示牌没让我们不舒服呢? 昨天在公司里小宋又问了我一个问题,“听说强纳森以前是设计马桶的,洁白简约的马桶设计,或者纯白(黑)的iPhone外观,都没有让我们不舒服啊!” 这些说的都没错,但仍然不影响“Metro UI是个渣,谷歌的小清新只比渣好了那么一点点”这个事实。 因为,当我们看到洁白简约的马桶、纯白(黑)的iPhone、公交地铁的牌子时,进入我们眼睛的是反射光。而当我们看手机、平板、电脑屏幕的App界面时,进入眼睛的是屏幕本身发出的光线。就这么一点点不同(反射光与屏幕发光),却已是本质。 无论多么简约、多么洁白的马桶,通过反射光进入我们视网膜的影像都不是纯色的,它立体、有质感、有阴影,如果进入我们视网膜的影像是纯色、扁平、无阴影的马桶,虽然不会像纯色、扁平、无阴影的人(鬼)一样吓我们一大跳,却仍会导致我们潜意识里的不舒服,说不出来,但就是不舒服。 与其说消费者购买Windows Phone的时候是在用脚投票,还不如说是在用潜意识投票。 想明白这个道理之后,我就特同情那些高价购买“撸妹”的群体,唉,花了那么多钱之后,每天还要在潜意识里不舒服那么多次,多可怜啊。 当然如果看了我这篇文章之后,他们就更可怜了,因为会从潜意识里的不舒服升级为意识里的不舒服的。 记住这句话,UI设计可以拟物、也可以扁平,可以清新、也可以简约,但好的UI设计一定是符合自然的,自然的最舒服。 即便是Metro UI,正确的努力方向应该是把磁贴作得让人看着有真实的公交地铁牌子的感觉,而不是傻了吧唧的弄个完全纯色、无阴影、无质感方块放在那里,“鬼”啊! 在这里提前做个预测,以微软官僚们的智商来看,等到Windows Phone彻底消亡那天,估计他们也想不明白这个道理的。 2、只显示局部界面的设计不是符合自然的UI设计,在这一点上错的App很多。 在现实生活中,人们在看到任何局部的、不完整的东西时,或多或少都会有点儿不舒服,差别仅在于有的人不舒服的多些,有的人少些。 比如说,拉开一半的抽屉,半开半掩的柜门,我凑合还能忍,老婆大人一般是会逼着我赶紧把它弄好。 局部的、不完整的UI其实或多或少也会给人的潜意识里带来不舒服,因此这种UI不是符合自然的UI,这种设计也不是好设计。 在这一点上最2的还是Windows Phone。 记得在一些低分辨率的Windows Phone上,貌似连主界面都是不完整的,右边一列的磁贴只显示了一半。 那个微软引以为傲的全景视图,就更牛逼了,让您的界面永远都不可能完整,关于这事儿您就想想一个永远无法关上的柜门吧。 Path的抽屉式菜单其实也一般,这种设计用来做Setting还凑合,毕竟基本上不用,主界面之类的大家就别玩儿“残缺之美”了。 特别说明,这里说的局部的、不完整的指的是界面要素,而非内容,List View滚动加载更多不再此范围内,滚动加载更多就像是从纸筒里拽出更多手纸一样,没什么不自然的。 3、效果图不等于实景图。 在这一点上,原本重灾区是房地产,现在变成了UI设计。 我见过的最明显的例子是乐Phone和它那奇葩的四叶草界面。 两年前我给岳父买过一台乐Phone,给长辈买手机,俺当然都得负责弄好(刷机、升级、装软件),把玩了一个礼拜后,我的最终评价是:不好用加不好看。暗自庆幸,亏得岳父原来用的是诺基亚,要是iPhone俺可就惨了。 去年小米大张旗鼓为MIUI征求设计时,听说最终中标的是RIGO,google了一下,吃惊的发现乐Phone居然是RIGO的设计,效果图几乎美得让俺也飙泪了。 正如老罗所说,RIGO的确称得上是国内最好的设计团队,Dribbble我上得也不少,即便在Dribbble上,RIGO的很多设计图给我的感觉也是出类拔萃的。 一边是RIGO那精美的设计,一边是使用过乐Phone那真实的糟烂感受,这tmd都让我有点儿认知失调了...... 后来是通过Instagram的图标(参见文章配图)才想明白了这个道理。 据说美工界有一句经典的话“Every designer should draw a camera icon”,果不其然,Dribbble上最多的就是相机图标,很多相机图标在细节、质感、光影效果上比Instagram的要好得多,很可惜,当做成图标大小放到iPhone真机上时,均被Instagram秒杀,惨不忍睹。 在相机图标上,Instagram基本上是无敌的,原因就在于,即便是缩小到一定的尺寸,放到iPhone真机上时,通过肉眼,我们仍能看得到Instagram团队想向我们表达的细节,高档的镜头(哪怕是右上角的取景器的玻璃也比大部分相机图标的镜头优秀),柔和的机身,有质感的Insta铜片和4色挂带。 也就是说,作为一款相机应用,Instagram想通过图标来告诉您“我是一款很有品质的相机”,它做到了。 有兴趣不妨在手机上装上一屏幕的相机应用,跟Instagram对比一下,全秒,无例外。 自从明白了这个道理之后,即便是看到一些感觉很好、认为很适合的图,宋还是会加到app里在真机上跑下看看,效果图我俩可是真心信不过了。 本以为在小尺寸上展现细节是美工们的基本功(我和小宋这么两个棒槌都懂了,更何况美术界的专业人士们啊),可惜,翻遍了Dribbble,很多人似乎更热衷于秀美术技巧,大图精致、小图杯具,害得俺俩“想找个图改吧改吧的就当成早期版本的图标”这个比较猥琐的目标都没能得逞,唉,点儿背真是不能赖社会啊! 4、从App可以看出,相比起国外的几个好Team,国内Team无论大小,在美术基本功上有不足的实在不少。 我从未接受过任何美术方面的训练,属于连猪头都画不出来的那种,可能是因为眼睛还算毒辣,在做App的过程中居然也看出了不少问题,改进了不少细节。搞明白一些东西后(当然这些对于专业人士来说,应该只能算是常识),很吃惊的发现,很多国内大大小小的流行应用(应该都有不少美术工作者吧?),居然也在这些方面杯具,让俺是百思不得姐啊! 随便举几个例子(我在美术方面的用词不准,请大家多包涵): 例:整数倍缩图。 因为很喜欢Pinterest下拉刷新时的那个转动的圆圈,我让小宋把圈圈抠下来用在我们的下拉刷新上,一日,当我下拉刷新时,偶然发现圆形的上下左右有点儿毛边(要不是在转动,估计就看不出来了),再看看Pinterest,很干净,赶紧给宋打电话,把这个给弄好了,经这一次,俺也总算是明白了缩图得按整数倍。 后来想想,这应该算是美工界最基本的概念了吧?不过我很奇怪的发现一些应用在此类问题上居然跟俺们犯了一样的错误,竟然还有某大牌和美相关的App,令人吃惊,这个就不晒App名了,实在太丢人。我们没有美工还好,厚着脸皮对外讲讲还能忍,人家还要在美术界混下去的不是? 例:阴影。 按理说,阴影应该是另一个最基本的美术技能了吧?很奇怪的是,国内应用在这一点上大部分做的都很一般,大公司的大牌应用也不例外,难道很多“设计师”做不好阴影? 这个得表扬下老罗锤子Team的美术功力,以我外行的眼光都能看出锤子做的那些图标阴影水平很高。 例:xdpi。 这一点国内App厂商基本上全线杯具,随便扒开一个apk的资源文件看看,您都会发现xdpi目录下空空如也。微博上有位童鞋专门纠正我的“美工”这个词儿的时候,告诉我应该称呼他“视觉设计师”,我差点儿忍不住回他“安卓上720P的手机都主流了快tmd一年了,您的视觉还看不出图标模糊?” 这个也不用举例,俺扒过的apk的实在是太多,老外的好team一年前就都做了xdpi的图,国内的全无,这一条实在不能忍。 关于xdpi这个问题,宋曾经很认真的问我“为啥国内软件都不做xdpi的图呢?”,我的回答是“咱国内貌似都流行每几个月升个大版本号,然后再换上整套界面之类的,可能都忙着设计五套新版界面让老板挑着爽吧?”。 例:重心。 我对重心的理解纯靠感觉,对于宋和我来说,完全缺乏使用工具来确定各个图标重心的能力。俺就一招,靠肉眼,觉得偏了就挪几个像素,直到满意了为止。 重心对于美术界来说应该也算是个基本功了吧? 关于重心,我得说下老罗的锤子Logo。且不论锤子的美丑,连我的眼神居然都能看出其重心不稳,后来外面套了个圈就好多了。这个我挺不能理解的,锤子Team不是都拿着放大镜看图标吗?难道重心是稳的?我看错了? 锤子Team的重心问题貌似不少,发布会之前几天发的那几幅倒计时的图也是一水儿的番茄偏左,很奇怪,幸好宣传图是一次性的。 上面提到的那些细节,国外的如Instagram、Pinterest、Tumblr、甚至连Path都能做的很好(要不我说Path是美工Team呢)。 问下国内的一些“设计师”们,您在美术方面真的做的很好吗? 因为没有美工,对于我和小宋来说,上面提到的一些想法实在是我俩现在无法达到的高度,只能时不时的努努力稍加改进。 每次打开自己的应用,放眼望去尽是缺陷,阴影不对、毛边、图标难看,唉,慢慢改吧。 一般连续用一段时间自己的应用后,俺都得打开微信的朋友圈来回滚动一下缓缓,平复俺郁闷的心情,还好有更难看啊,:P 因我完全没有理论基础,这篇关于美术的文章写得实在是又臭又长且缺乏条理,文中也很难举出一些合适的例子,见谅。 未来几天,我会陆续在微博上举几个实例(剧透一下,包括这两天大热的锤子哦),欢迎拍砖。如果嗅哥觉得有道理的,也可以考虑转转,能帮一个Team改好一点儿细节不也算是件好事儿吗? |
联系客服