设计是简单的如果你知道要放的东西该放到哪。
曾经在某个电子杂志里看到一篇关于如何在平面设计中偷懒的文章,引发了我的一些思考,在平面设计中有这么多可以偷懒的方法,那在网页设计中是不是也有一些捷径可以探索?当然作为一个刚刚踏入网页设计领域的新兵来说,这样的标题对我来说显得有点“大逆不道”,但如果不写下去,又觉得可惜。于是,文章也就写下去了……
如果你刚打算从其他专业转到网页设计这个领域,那这篇文章是为你而写的,如果不是,那就当鉴赏一下精彩的图片吧。
如果准备好了?那就开始回归正题吧!……
世界上第一台电脑ENIAC的诞生是为什么?也许是那些研究员厌倦了周而复始的计算任务,想偷懒一下,所以造出了计算机以代替他们的机械劳动。网络出现是为了什么?也许是为了更好的接收外界最新鲜最劲爆的资讯,也许是为了能跟远方的亲朋通过网络来交流,也许是为了放松一下工作中紧绷的神经,也许是想足不出户就能得到天下万物,也许只是想知道自己不知道的问题。而这些也许都是因为人们太懒了,懒得去买报纸,看电视,懒得去跟朋友见面,懒得去运动放松,懒得去市场购物,懒得去查阅《十万个为什么》、《百科全书》。而网络的出现弥补了这些需求。难怪人越来越懒了……
偷懒对于设计师是奢侈的,但是这不能阻止我们偷懒,因为用户都这么懒,我们不懒怎么能知道他们的需求(有些牵强的理由)然而我不是鼓励我们与老板做“非暴力不抵抗”运动,而是要让我们的工作更加有效率,这样就可以多享受几天准时下班啦!
下面将要介绍的正是我为偷懒所做的努力。
[Page: ]
一.网页模板化
网页设计有先天的制约因素,硬件制造商只给我们生产了前后滚轮的鼠标,很少见过横向滚动的鼠标,所以我们的页面一般是长条状的,然后在浏览器右侧给我们按了个滚动条就算吧我们忽悠过去了,而我们却还用得不亦悦乎。而页面的大小又要跟着主流显示器的分辨率而确定。难怪有人称我们是戴着脚镣的舞蹈家,我更原意称我们是顶着饭碗的舞蹈家,伺候不好这饭碗,摔了可就没饭吃。所以,舞要跳,饭要吃。后来我学聪明了,从来都只做1280px以内的页面,这样你好,我好,大家好。
定好页面的大小后是不是迫不及待要爆发小宇宙了?爆发前,最好先确定好交互原型,因为设计师跟战士一个德性,打仗的时候不是有“一鼓作气,再而衰,三而竭”嘛,一但设计出一个“页面”(暂且称页面)发现脱离了交互原型,那返工可是既累又打击自尊的行为。
在设计页面前我想跟大家分享一本“设计圣经”里的几句话“我们精心准备的页面在用户看来更像是‘以每小时100公里的速度驶过的广告牌’所以我们需要建立清楚的视觉层次,把页面划分为明确定义的区域”,把一些可以固定的模块都做模板化处理,对于有延续性的设计(如:绿钻有礼、绿钻音乐会)这样只要进行一次模块设计,后期可以不用经过设计环节,节约了大量的设计、制作、开发资源,也使得页面整洁,条理清晰。这样让我能在非模板区花更多的时间让页面变得更加精彩,多争取 “几秒”用户的时间。
看来我对偷懒所做的工作初见成效了!
[Page: ]
二.视觉规范化
“规范”一词最早被我接触应该是《小学生行为规范》的时候,从小我们都知道要爱祖国爱人民,为什么?因为他让我们的社会安详和谐,因为检查官懒得去解决这些小CASE,所以从娃娃抓起,从小培养我们做一个规范的好公民。
咱们设计界也有规范,大型企业品牌都有自己的一套VI系统,这些都是对于品牌所做的规范,规范能让一些原则问题得到解决,网页设计里的一些门户级页面特别需要注意的是规范,这样能让页面统一,比如网页设计里的间距,小到几个像素(虽然网页就这么点像素)也都要实行规范,规范做好了,就像一个人的仪表,端庄就会得到青睐,我们应该不会习惯一脚穿皮鞋一脚穿拖鞋走在大街上吧?所以为了不XX用户的眼球,我们需要做这些规范,要知道这些规范可是一劳永逸的美差呀,规范做好了,即使下回不是由我来操刀,其他设计师也能根据它来修改页面,免去了沟通成本,我还可以抽点时间打个小盹。
[Page: ]
三.随时保存您的风格
这玩意儿太重要了,别看一些页面设计得多好看,那全是站在“巨人”的肩膀上的啊。PHOTOSHOP(这里不敢简写PS,因为它我差点过不了毕业论文)强大的图形编辑功能是不言而喻的,但是其中一些自定义保存的部分据我观察不是十分受到关注,Photoshop中的批处理、action、预设管理器那可是偷懒的“利器”啊。发现一个好的样式、色彩或者配色可千万别忘了保存,这些为工作提供了巨大的便利,如果为找不到合适的样式而发愁,不如寻找一套样式,然后在这基础上修改,我经常这么干。这样更加节约您的宝贵时间,让你将偷懒进行到底……
四.善用填充图
设计活动页面就像在设计一张海报,需要给人丰富的视觉感受才能打动用户,然而比较偷懒的做法就是添加填充图,填充图就是以一个单一的小元素平铺成一个大的画面,设计填充图是一件有趣的事情,就几个像素的摆放能影响整个画面的效果,连续的图形在我看来会给人真实的材质感,让画面不再单调,使用恰当会让网页平面化,提升用户的视觉感受,这也是服装巨头们乐此不彼的手段,大家如果有兴趣可以设计不同的填充图。如果连这步都懒得去做的话,那还是去搜一下填充图制作网站吧,因为我懒得贴链接了。
[Page: ]
五.做立体效果
大学里老师总是跟我说“平面要不平那才有意思”我并不是要我们去把电脑屏幕给弄得跟哈哈镜一样。其实我们可以玩一些视错觉游戏,最近3D电影不是很流行么,我倒是期待有一天我们的广大网友能够戴着立体眼镜浏览网页,那是多大的欣慰啊……看来有点犯困才会想这么远,还是现实点,既然不能强迫用户去买立体眼镜那我们就直接做带点立体的设计吧,图个新鲜,网络嘛就图个新鲜。然而问题又来了,想做立体的东西但是苦于软件水平有限怎么办,那我就再向各位介绍一把PS的好兄弟Illustrator吧!Illustrator有一个滤镜可以实现3D效果,任意拖拽,任意透视角度,任意光源,总之太多任意了,加个贴图功能就是一个MINI 3DMAX拉!设置好参数然后导入PHOTOSHOP经过“大肆”渲染就可以上厅堂啦。立体设计使画面丰富,让人浮想联翩,方法挺简单