关于UI设计的一些感想
界面设计

Category Archives:笔记

关于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的显示

项目回顾


上个星期,公司内部的信息管理系统第一版算是完工了。有点经验教训得及时记录一下。

1. 系统刚刚登陆的时候,程序员们没有任何操作,也不一定有人把他拉到某个项目下面,所以这时需要一个默认的页面,类似于欢迎、或者暖场,但是做交互设计的时候没有考虑到。等到系统上线了才发现并没有这个默认的页面。
2. 由于该系统是Web的,后面我会参与到CSS的调整修改,因此在UI设计的早期环节,或者说交互设计的后期,应该考虑一下信息的架构。或者说,在着手绘制设计稿的时候,最好就一并思考一下组件的分布。比如哪些属于titlebar,哪些属于featurebar,container和table表等等的布局关系。
3. 之前一直秉持的态度是让工程师先开发吧,后面再改样式表,但是后来发现,很多DOM层面的嵌套已经被写死了,修改起来虽然并不困难,但是总是需要一遍遍地找程序改,归结起来,可能还是自己的经验不足。

先写这么多,其实不止这些。

论动力


天气炎热,人心难免浮躁。

来到招行信用卡中心上班后,由于公司对上网的种种限制,导致一直没怎么光顾以前经常上的设计网站。周末在家,终于有时间可以好好地畅游一下这些老地方。

现在的用户体验设计圈有点像地理大发现的时期,各种各样的新鲜设计工具层出不穷,各种各样的设计规范、设计理论应接不暇;从国外的设计博客到国内的设计网站大家都在谈论动效设计并争相上传自己的作品,设计圈的大街小巷里都在谈论如何创造牛逼的交互、精致的产品。同时,人们还依然为交互、视觉这样概念化的职能范畴辩论不休。

我想在这个设计的大发展时期,对于年纪不大但是也上了点年纪的用户体验设计从业者来说,是有些难熬的。

Read More

文章归档