界面设计的广度与深度
界面设计

Category Archives:笔记

界面设计的广度与深度


在我作为UI设计师工作的第二年,有天下午,跟我一组的前端工程师Stern过来跟我说,让我跟他一起面试一个应聘前端的毕业生。我一边随他前往,一边想为什么要我跟他去面试?要面的话我也应当是面UI啊。

该应聘者是一个刚刚走出校门的、一心想扎进互联网行业的设计系学生。他给我看了他的作品集,排版整齐,打印精良,可以看得出这是一个在校期间非常努力和优秀的学生。他的项目范围非常广泛,虽然和我一样是工业设计出身,但不像我毕业才开始做UI设计。这个小弟在校期间除了工业设计的项目,已经接触了大量的交互和体验方面的实战项目,并且他在他的作品中表现出来的那种设计潜力值得赞赏,再加上我本科期间的几个老师都是出自他的母校,让我对此人印象颇佳。

我问他为什么要报前端职位啊?他说他觉得前端更有挑战,而且做前端可以顺带做设计。支撑这个小弟有信心以设计系背景来应聘工程职位的,只是他在做网页的时候习得了些许前端知识。

就像很多设计师的简历,在他的作品集首页也有一栏设计能力属性表。通常的设计师,PS和Ai自评相对都比较高,这个无可挑剔。但是这个小弟的能力表中,CSS3(注意,是CSS 三 )能力接近爆表。于是,我们的前端随便抛了几个问题给他,然后他就懵了。

最后,Stern以「能力不符」为由,拒掉了他。而我多少对他有点惋惜:如果他是来应聘设计岗位的,那么我真的非常欢迎。

现如今我不知道那个小弟在他的前端路上走的怎么样了。就最近这一年看到的景象来说,现在设计师会写代码已经不是什么新鲜事了。但是我想说,设计师千万别因为会写两行代码,就搞错了方向。我在豆瓣上见过有些初学者问道,设计和前端应该先学什么?我的回答是:

如果你的目标不是当程序员而是设计师,那么建议以UI为主。

前端涵盖非常广,如果你直接从前端切入,很容易在各种代码学习中迷失方向。

先从UI下手,懂了UI,才能有学前端的目标,才能知道可以怎样用前端来提高设计的边界。

做设计,最终还是落脚在设计能力上。前端技能只是加分项。

就我的理解来说,懂得前端知识,或者说大点,懂得开发知识,会对做设计有一个很好的帮助,会让你在设计领域驰骋的更远,但是懂得这些东西,不代表你就可以当一个Coder了。即使一个设计师代码写的再好,从底层架构到数据逻辑都不比一个标准的程序员差,我也不觉得你可以介绍你自己为「设计师/程序员」的组合。

除非你是百年难遇的大神。

字体设计巨匠Adrian Frutiger,据说年轻的时候对铅字打印机(此处可能有误,如有问题请指正)的工程原理了解的比公司里的工程师还透彻;苹果的设计总监Jony Ive也是常年跟工程师们在生产一线拼过的,对生产过程中的工程问题了如指掌。但是我们没人称他们为工程师,他们也不会以工程师自居。对他们来说,了解足够多的工程知识,是为了更好地做设计。

说道这篇文章的核心。我认为界面设计师,能力应该分为两个维度:分别是「广度」和「深度」。

「广度」代表所需要的知识范围、与其他学科之间的跨界关联,「深度」则表示这个职业所需要的思维纵深。

「广度」包含了那些硬性技能,包括使用绘图软件、手绘、动画,以及要理解基本的软件开发流程、前后台的连接原理、产品的交付实现过程,甚至是一些基本的前端、客户端代码等等。「深度」则指的是创作出上乘界面的软实力,那种让人看了就能用、看了就会用、看了就想用的界面创造能力。

「广度」描述了你的眼界,「深度」考验你的沉淀。

设计师,应当努力学习以具备深厚的工程知识,来扩宽自己的「广度」,但是,更多的时间和思考,应当花在如何提高自己的设计能力,也就是「深度」上面,因为你是「设计师」啊。

关于动效


动效已然烂大街了,但是好的动效却依然很少。
很多动效是为了动而动,很多动效是在炫技。
让原本固定的东西动起来,等于在二维的基础上加了时间维度。平白无故地高了一维,事情当然会变的更加复杂,需要考虑的也就更多。
看了GoogleMD动效设计师的追波作品,感慨一下,差距还是太大了。

关于UI设计的一些感想


这篇文章有点啰嗦,我想表达的观点其实是一句废话:UI设计是一门很深的学问。

几年前,刚开始做UI那会,iOS还是6.0时代,大家都在做拟物化的界面。

那个时候上Dribbble去看看,到处都是用PS勾的亮锃锃的单反镜头、炫炫的拉丝金属旋转按钮等等。大家用这种方式来彰显功力,并且以此来与新手设计师拉开距离。

后来iOS更新到7.0,满世界都平了。很多人忽然觉得好像UI没什么可做的了。因为扁平了的界面,没有什么技法可以炫了,没有那些高光阴影立体质感等等的东西,可以将我们的美术功底发挥出来,一时间不少人开始批评扁平化。但是更多的人还是非常理性的接受了扁平化。

相当长的一段时间,我自己也比较困惑,是不是UI设计已经到头了?后来发现,设计师们有玩出了新花样。

现在上Dribbble去看看,已经没人做拟物化的ICON了,大家都在做动效。各种各样的动效。

然而又出现了一种情况:一边是设计网站上面用C4D、AE、CSS3等等实现的丰富多彩的酷炫效果,另一边真实的互联网,那些网站和移动APP上面,似乎并没有看到那么多的动画。我们一边口诛笔伐地批评Dribbble,一边满怀好奇地看着别人的小创意。我们看了很多动画创意,然而在现实中,有几个能用上?

但是现在我已经不那么困惑了。

UI做的,是软件服务的一张脸皮。

拟物也好、扁平也好、动效也好、或者说各种各样的流行风格,都是在为了这张脸皮服务。拟物化的界面,就像一张浓妆艳抹的脸,别人打扮都很村炮的时候,你化了妆自然好看,等到大家都化了妆,那看多了就恶心了。扁平化不过是还原了本真而已。动效就好比给脸上增加点表情,你跟软件说句话,它给你个表情,反馈一下,让你知道它听到了,这就是动效的作用。

最最关键的是这张脸皮,它长什么样。都是两个眼睛一张嘴,为何有人好看、有人耐看、有人难看?

一张页面,文字的排布、字体家族和字号的选择、整体颜色和次级颜色的搭配、各个边距的比例等等等等,这些都是学问。扁平化的界面,反而要推敲很多东西,随随便便做了一张看起来不错的界面,可能没几天就看不下去了。想要做的比竞品好,还是要花一番功夫的。

设计取材于艺术而又不同于艺术,永远不可能像艺术那样一蹴而就。多少好的设计,是要经过很长时间的打磨才能完成。可能昨天还看着不错的页面,下周再看就不那么顺眼了。

可以用文章来做个比喻:为了说明白一件事,有的人倾向于写一篇长文,有的人会考虑写一部书,也有的人会尝试只用一首诗来表达。

好的广告文案,不是字数越少越好,也不是辞藻越华丽越好,而是这段文字是否能够直击人心产生共鸣。我想界面也是这样的吧,做成什么样的UI都有它的道理,看你想要达到什么。

这篇文章有点啰嗦,我想表达的观点其实是一句废话:UI设计是一门很深的学问。

怎样写出好文


直到现在,我这个博客的文章每天能有几十个访问的人。他们可能不是专门为了我的文章而来,但是既然有人读,我就有必要继续更新下去。

自己虽然不是很擅长写作,但是经常看网上的文章,也有自己一直喜爱了几年的专栏作家,所以对于在互联网上怎样写出一篇好文这件事,我还真有点自己的看法:

– 我觉得一篇好文,不能想到啥说啥,漫无目的没有主题。除非你是大V,人家就想看你唠叨。

– 在网上写文章,不能太学究气。很多作者、评论者为了让自己的文章显得有干货而大加运用各种专有名词,实际上读者阅读起来十分拗口,而且有生搬硬套的感觉。

– 少用网络流行语,看起来就跌价。接地气的文章从来都是内容符合读者口味,解读者之渴,而不是用一堆拼凑流行词汇来显得自己与时俱进。想想春晚的三流相声,就是那种让人尴尬的感觉。

– 不能指望满足所有人,那样根本写不出任何东西。

– 立场要鲜明,结论要精简。现在的读者耐心只有半分钟,这已经很乐观了吧。

– 尽量别用长难句。很多大长句子,虽然逻辑上很连贯,但是让人读起来颇为费尽。读者体验其实并不好。

说了一些关于好文章的看法,但是自己不太打算将大部分精力打理博客。不过万一以后有一天需要了呢。

从优秀到极致 从努力到意识


曾看到一篇讲授学习方法的文章中写道:很多技能,只需要用30%的时间便可习得其70%的要领。因此很多牛人看似掌握不少技能,其实是学习方法有窍门,善于用短时间来掌握其大概,这样在很多领域即使算不上高手但也能略通一二,让人感觉此人多才多艺。

设计也是这样。现在互联网这么发达,基本上在网上随便搜搜都能找到一堆手绘、摄影、PS的教程,花上一个星期的业余时间学习一下,基本上都能够从菜鸟步入初学者。比如花上两晚上时间研究研究色彩搭配、流行风格,便可以在布置家装摆设的时候不再出现西北农村或东北土炕风格。如果能够用心花上半把个月的时间每天练练手绘,基本上画出来的人物头像也不再是牛头马面,可以在年底制作贺卡的时候好好秀一下。如果能够坚持每个月都能抽出两天时间手捧着单反相机出去拍两张,两年下来你的摄影作品一定会非常带感。

——————————————前面啰嗦了那么多,下面是我真正想说的内容——————————————

从事一个职业,从0到1非常简单,从1到70需要一些努力和时间的堆积,从70到80、90,需要的不仅仅是努力,还需要感悟和思考。再往上,想要达到超过90%的同行从业者,那就需要勤奋努力、天赋和机遇了。我不想谈天赋和机遇,这些东西我们掌握不了。

我想谈谈两个话题,「努力的方式」和「思维的方式」。

围绕设计师这个工种,努力的方式有很多。

初入行的设计师(以下均以互联网行业设计师为例),最想习得的技能一定是各种软件技能,因为他们看到老手设计师在做设计的时候各种快捷键弹指如飞,没几下就把自己吭哧瘪肚弄半天也弄不出来的效果给做出来了,心想这才是高级设计师。于是奋力学习PS、AI、3Dmax等软件不舍昼夜。

中级的设计师,已经能够快速地做出想要表达的东西,能够很快地应对各种外部需求比如为了春节的宣传banner做出红底黄字配上灯笼鞭炮横挂条幅大写新春促销等等,这时想的就是怎么进阶「设计的感觉」,因为发现同样是节日banner,同样是红底金字挂灯笼,为啥有些厂商做的就那么高大上带逼格,为啥我做的就满满的土炮感?然而设计这个东西,跟写程序也不太一样,很多东西不是写在书本上的算法语法,就算你看自己的作品感觉不如人家,但也一时半会说不出个所以然来。这时一般都会每天猛刷Dribbble、behance,关注了一大堆的设计牛人,日益习得他们的创作要领,同样也是奋力不舍昼夜。

高级的设计师,通常已经能够做出让人满意的东西来,由于对几年下来对业务也日渐了解,因此能够快速地从需求中抽离出问题本质,无论是做交互还是视觉,大家对他的设计都比较信任。这个时候,他需要怎么进阶、怎么提高,说实话我也不知道。因为我还没有达到这样的状态,还算不上一个高级的设计师。

好几年前,我在网上搜设计教程,手绘一类的。当时美国有一套教程非常著名,叫Gnomon worshop,请了很多大牛级设计师做视频教程。我当时偶然下了其中一套教程,是讲怎样用ps精修一只好莱坞电影中的怪物。非常专业,在牙齿的唾液上怎样涂上高光看起来有水滴感、在怪物的脸上怎样布置褶皱线等等。视频从一开始怪物就画好了,整个视频的目的就是怎样让这个怪物能够更加精致。

我当时不太感兴趣,因为我更想看到的是怪物是怎么从无到有画出来的。现在回想起来,人家这套视频其实就是从70到90的过程,我处在0到70中,自然不会感兴趣。

再来聊聊从90到90+所需要的「思维意识」。当然这是我意淫的,因为我本身没到高手级别,只能妄自揣测。

以前玩游戏,跟朋友联机打魔兽三对战。那时候我们总是比拼APM,也就是一场比赛下来平均每分钟做了多少操作。我们当时看国际比赛的高手录像,他们的APM能达到200以上,也就是单位分钟内对战局的操作达到了不下200次,要知道一分钟干点鼠标都不一定能点到200次,因此一定是快捷键加上鼠标的共同操作。当时我们都感叹高手的手速就是快、眼神就是准,也相信一定就是如此之快的手速和眼神才能让他们变得这么厉害,于是我们跑到网吧里面,学着高手的样子,有事没事就多点点鼠标多敲敲快捷键,感觉自己也大为长进。

这种提升方式有用吗?有用。因为确实手速快了之后原本就比较弱的我们瞬间可以做出很多原来做不到的操作。比如快速地操作两个小队的小兵分头作战等等。但是,我们其实误解了一个事情。

真正的打魔兽、打星际、打Dota的高手,手速快、操作多,这是他们比赛中意识超前、反应机敏的结果,而不是他们打的好的原因。真正的高手,会非常在意对方出了什么兵、出了什么装备、对方这一局想打什么战术,我又要怎么应对,这些才是一场比赛能否致胜的关键,而由于他们想快速地知道对方的一举一动,想要更快地做出反应,所以才会不知不觉地手速变得飞快。

古代的时候,有过不少出奇制胜的将军,本身并不是行伍出身,可能是临危受命,从文官变成武官,皇帝本身也没寄托多大希望,就是希望你去扛一下,结果到了战场,突然身体中的潜意识爆发,仿佛瞬间就看明白了场上的局势,怎么布兵、怎么排阵其实都有副官来做,本身只要看懂了「势」,就能做出正确的战略决断引导胜利。

上面这两个例子,这就是我想说的思维意识。这就是区别顶尖选手和高水平选手、区别剑圣和剑侠、区别学神和学霸的关键所在。一个正确的思维意识、可能比努力了很多年都有用。而这种思维意识,其实不是天赋,或者不仅仅是天赋,而是「你愿意用怎样的方式去思考」。

关于思维意识这东西,我还需要再想想,现在也没太理顺。

那么回到刚才的话题,假入我有幸做到了高级设计师,我应该接下来朝什么方向去前进?

我觉得,就是提升自己的「思维意识」,去尝试看清事物的「核心」。先说到这,我还要再想想。

做好一件事需要多大代价


我们的年度账单终于开始内测了,为了这个项目我花了很多工夫,早在视觉风格的定稿时,我就出了三个样稿让业务和组内来评判。设计期间也是不断修改,只要是自己或同事又觉得粗糙不好的地方,我都重做了设计。

出来后,感觉效果距离自己所想差的太远了。

前两天滴滴和支付宝、微信的年度账单陆续上线,仿佛两周之间互联网企业间开始了设计水准的高下一拼。再看看我自己的作品,真是失望。

我不想做蹩脚的事情

平面设计史中的重要设计师 持续更新


A.M.Cassandre 卡桑德拉,后立体主义图画现代主义平面设计家

http://www.cassandre-france.com/

Laszlo Moholy Nagy 莫霍利·纳吉,包豪斯平面设计家
moholy-nagy.org/

Herbert Bayer 赫尔伯特·拜耶,包豪斯平面设计家
www.herbert-bayer.com/

Saul Bass 索尔·巴斯,二战后纽约平面设计派的重要大师,众多美国企业的形象设计者

http://www.saulbassposterarchive.com/

chermayeff & geismar 契马耶夫与盖思马设计事务所,纽约平面设计派的重要设计师X2

http://www.cgstudionyc.com/

这个网站包含了很多重要的设计作品和设计大师

http://www.designishistory.com/

别被自己感动到


平时喜欢上Dribbble、Behance等等作品集网站闲逛,看看别人的作品,尤其是那些大神的作品,每每看到都会惊叹他们技法的纯熟以及想法的独特。国内的网站如站酷和UI.cn我也是常客,确实也看到不少圈内牛人。
但是我经常会有这种感觉,就是设计师会很容易在无形中陷入一种“自赏”的情节。这种自赏不仅仅是欣赏自己,而是欣赏自己所从事的这个工作。这种情节的具体表现体现在:
· 好像一个产品的好坏,我们设计师的成果是直接原因,设计的好、漂亮、酷炫,产品才能成功。土掉渣的设计,肯定没戏。
这一点的反例很好找,上9158看一眼那种滥俗的页面,你真觉得设计很重要吗?
· 好像整个世界都在关注设计。我自身的体会是,关注设计的人、重视设计价值的人确实照比几年前越来越多了,但是其实世界还是那个世界。

年初的时候,买来了英文版的《乔纳森艾维》,看完以后我会有种感觉或者叫错觉,就是苹果是应为重视设计才有今天的成功。后来我看了《乔布斯》,我会感觉,设计是很重要,但是同样重要的东西也有很多,对于工业设计来说,如果光有设计,没有下一个环节在大批量生产上的良好支持,那设计也就仅仅是设计而已。对于用户体验来说,设计的作用跟运营是平起平坐的,甚至产品到了后面,运营的作用比设计的作用要大得多。

好的设计会让人产生心灵震慑。我相信这是真的,很多不做设计的人也都热情地表示过他们对某某设计的独到喜爱。罗永浩曾经说过一段话,好像意思是,看到那些美好的设计,你会感叹自己为什么不是这个东西的设计师。但是设计师千万别被这些东西所误导。我们必须放平心态,在当今的时代,设计的价值只有与其他环节比如运营、比如统计分析、比如整体服务供应这些岗位充分结合才能发挥价值。否则,你做的东西只不过是你喜欢的一幅画而已。

别为薪酬烦恼


今天看到一篇网文,提到互联网各个行当工种的薪资,感觉有些失落。
根据拉勾网的统计来看,设计师整体上照技术、产品还有差距,而且随着工作年限的增加,也会被运营人员轻松超过。
谁不想多挣点呢?

但是我想,也不能这么悲观。
目前互联网这块的平均设计水平整体确实还不够好。虽然互联网目前是我朝最欣欣向荣的产业,但是毕竟照国外有差距,哦我指的主要就是美国。经常上behance、thefwa等等就会发现,国外的高手们,还是能碾压我们大多数人的。
只要自己还不是那种高手,只要自身还有能力上的差距,我觉得就没必要抱怨设计师薪资低。毕竟任何一个行当都是个金字塔,爬上塔顶是理所应当的追求。为了薪资的事儿烦恼丝毫不能对自己往金字塔上攀登产生任何有利的影响。

Github上的PS标注插件Size Marks


发现了一个Github上的好用的ps标注插件:
Size-Marks-PS

安装方法:
1.将下载后的插件置入以下位置:
OS X: /Applications/[Photoshop]/Presets/Scripts/
Windows: C:\[Program Files]\Adobe\[Photoshop]\Presets\Scripts
2.重新启动Photoshop,应该可以看到 File ▸ Scripts ▸ Size Marks
3.设定快捷键,位置在:Edit ▸ Keyboard Shortcuts 打开“文件”标签,滚动到“Scripts”,选择并设置快捷键(官方推荐Cmd+Shift+P,不知道这个是什么的快捷键,但应该不常用,可以替换)

使用方法:
用矩形选区工具,选择任意一个框,按下快捷键,就可以看到标注。
标注的结果为pt/pixel的双显示,不过我看了作者的源代码,应该可以通过修改自行去掉pt的显示

文章归档