Tag Archives: 视觉

从需求到网站:(三)视觉设计

接前一篇:从需求到网站:(二)产品和原型

从前这个活叫美工,现在还是很多人这么称呼。很多人从骨子里就没把设计当回事,很多淘宝店主招了几个自学PS的“美工”就开始淘宝生涯了。所以淘宝的UED真心很不容易,天天看那些商品详情页面做的乱七八糟,自己也无力回天,只能尽量从自己可以控制的地方加以控制。

会PS跟会设计完全没关系,我认识的一个非常厉害的设计师就不用PS,直接用AI(Adobe Illustrator)。设计工具仅仅是工具,如果没有审美的天赋,又不学习着去遵循设计的原则,那只能做出来自我感觉良好的页面,用户一用就觉得没质感。

视觉设计大约有下面几个方面。

排版布局 (layout)

就是说文字和图片应该放哪,放多大,行距多大,段落间距多大。比如本文,被转载到人人上和qq空间里,就丑爆了,标题完全和正文没区分开。通过文末的链接点回我的博客网站,就看起来舒服多了(这不是骗PV啊喂!)。好友biaobiaoqi最近在博客里解说了一本设计书里提到的原则,对想了解设计的人还是很有用的,可以一看。

排版布局是看起来简单,但十分难做的一件事。很多人不屑一顾,校园内的很多海报就是因为layout太差而实在太丑,重点不突出,让读者不能简单明了的看清楚所呈递的信息。例子也一时不好举,凡是你一眼没看明白干嘛,看第二眼第三眼还没明白,只有集中精神去找上面的看不清的字(不一定是小字哦)的海报,基本就失败了。

在字节社买过电子书之后,就觉得,在手机/平板上看电子书原来也可以这么享受。再看其他的电子书软件,好容易买本书,跟网上下一txt没啥区别,排版就是一坨shit,标题跟正文就一个字号,连个加粗都没有,真是气不打一处来,买你何用!我才不付费呢。搞互联网的人以为把一行行的字放到屏幕上显示就叫电子书了。实体书的装帧、排版、精致的印刷你懂么?

配色(color scheme)

这玩意也是说起来容易做起来难。你说自然界那么多种颜色,要选出几种搭配起来看着顺眼的,多不容易啊。还好有很多傻瓜式的配色理论来帮助我们。比如在色轮上按一定规则选颜色。这有一系列文章介绍颜色,写的挺实用:color theory。还有色彩设计的原理这本书,也挺不错。顺便,他家的版面设计的原理也挺不错,讲layout。

字体 (typeface)

字体这玩意水也很深。这两年中文字体设计也渐渐重现光彩。英文字体理论、实践都相当完备,横扫天下的是Helvetica。也许你没听过这个名字,但是你觉得见过。这个字体牛逼到有一部纪录片专门讲这个字体的前世今生。

字体的复杂不光在字体本身,在web上,你还关注另一个问题:字体渲染。就是说字体设计成那样的了,但是操作系统跟浏览器怎么画这个字又是另外一回事了,windows在此事上又一次充当了被骂的角色(IE6这种就不提了,好歹也是开创一个时代的浏览器)。欢迎关注知乎的字体话题。

能用在web上的中文字体有限,原因有两个:一个是大家机器上都装了的字体不多;另一个是,如果打开网页的时候后台下载一个,中文字体数量多文件又太大。所以,一般就宋体/黑体/微软雅黑有限的几种选择。当然,网页中的字体是可以设置fallback的,就是前一种字体没有,自动使用后一种。想要各个操作系统下都好看,可以参考知乎的字体设置。

这样说来,其实我对设计也不是很懂,凯凯而谈没啥用啊。因为程序员最爱的还是命令行了。

而需求神话的视觉设计也出炉了!其实没画完了,折腾了一下午加一晚上,还是觉得丑。还是交给老婆大人吧。。。半成品先发出来,表示这是视觉稿alpha1。

update:妹子大人万岁!比我画的好看多啦!

============ 本文是一个系列,其他已经写好的文章: