当前位置: 首页 > 图文教程 > 网页制作 > 心得技巧 > 想偷懒的网页设计师应该准备的规范化和模版化

心得技巧
IE8 Beta 1两个地方需要大家注意
提高网站性能中内容有关的10条原则
网页设计者应该从三个方面优化网页
Web 设计 实现干净代码的12条定律[图文]
网页设计必备工具 firefox Web Developer插件 CSS工具组教程
UCenter Home 站点添加统计代码
9款很棒的网页绘制图表JavaScript框架脚本
提高网站可用性的10个小技巧
网站维护页面的列表制作技巧
B2C 网站用户体验细节设计参考
收集12个实用的网页在线工具
设计参考 漂亮和原创的博客设计
收集25个知名网站标志中使用的字体
极尽简约的网站设计实例
个性化创意鲜明的网站设计实例(30个)
水平滚动的网站设计 小结
更受欢迎 更具创造性的深底色网页设计实例
有创意的关于我们网页页面设计
整洁漂亮的网页设计的4项原则
设计参考 WordPress建站成功案例

心得技巧 中的 想偷懒的网页设计师应该准备的规范化和模版化


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-28   浏览: 176 ::
收藏到网摘: n/a

设计是简单的如果你知道要放的东西该放到哪。

曾经在某个电子杂志里看到一篇关于如何在平面设计中偷懒的文章,引发了我的一些思考,在平面设计中有这么多可以偷懒的方法,那在网页设计中是不是也有一些捷径可以探索?当然作为一个刚刚踏入网页设计领域的新兵来说,这样的标题对我来说显得有点“大逆不道”,但如果不写下去,又觉得可惜。于是,文章也就写下去了……

如果你刚打算从其他专业转到网页设计这个领域,那这篇文章是为你而写的,如果不是,那就当鉴赏一下精彩的图片吧。

如果准备好了?那就开始回归正题吧!……

世界上第一台电脑ENIAC的诞生是为什么?也许是那些研究员厌倦了周而复始的计算任务,想偷懒一下,所以造出了计算机以代替他们的机械劳动。网络出现是为了什么?也许是为了更好的接收外界最新鲜最劲爆的资讯,也许是为了能跟远方的亲朋通过网络来交流,也许是为了放松一下工作中紧绷的神经,也许是想足不出户就能得到天下万物,也许只是想知道自己不知道的问题。而这些也许都是因为人们太懒了,懒得去买报纸,看电视,懒得去跟朋友见面,懒得去运动放松,懒得去市场购物,懒得去查阅《十万个为什么》、《百科全书》。而网络的出现弥补了这些需求。难怪人越来越懒了……

偷懒对于设计师是奢侈的,但是这不能阻止我们偷懒,因为用户都这么懒,我们不懒怎么能知道他们的需求(有些牵强的理由)然而我不是鼓励我们与老板做“非暴力不抵抗”运动,而是要让我们的工作更加有效率,这样就可以多享受几天准时下班啦!

下面将要介绍的正是我为偷懒所做的努力。

一.网页模板化

图片

网页设计有先天的制约因素,硬件制造商只给我们生产了前后滚轮的鼠标,很少见过横向滚动的鼠标,所以我们的页面一般是长条状的,然后在浏览器右侧给我们按了个滚动条就算吧我们忽悠过去了,而我们却还用得不亦悦乎。而页面的大小又要跟着主流显示器的分辨率而确定。难怪有人称我们是戴着脚镣的舞蹈家,我更原意称我们是顶着饭碗的舞蹈家,伺候不好这饭碗,摔了可就没饭吃。所以,舞要跳,饭要吃。后来我学聪明了,从来都只做1280px以内的页面,这样你好,我好,大家好。

定好页面的大小后是不是迫不及待要爆发小宇宙了?爆发前,最好先确定好交互原型,因为设计师跟战士一个德性,打仗的时候不是有“一鼓作气,再而衰,三而竭”嘛,一但设计出一个“页面”(暂且称页面)发现脱离了交互原型,那返工可是既累又打击自尊的行为。

在设计页面前我想跟大家分享一本“设计圣经”里的几句话“我们精心准备的页面在用户看来更像是‘以每小时100公里的速度驶过的广告牌’所以我们需要建立清楚的视觉层次,把页面划分为明确定义的区域”,把一些可以固定的模块都做模板化处理,对于有延续性的设计(如:绿钻有礼、绿钻音乐会)这样只要进行一次模块设计,后期可以不用经过设计环节,节约了大量的设计、制作、开发资源,也使得页面整洁,条理清晰。这样让我能在非模板区花更多的时间让页面变得更加精彩,多争取 “几秒”用户的时间。

看来我对偷懒所做的工作初见成效了!

二.视觉规范化

图片

“规范”一词最早被我接触应该是《小学生行为规范》的时候,从小我们都知道要爱祖国爱人民,为什么?因为他让我们的社会安详和谐,因为检查官懒得去解决这些小CASE,所以从娃娃抓起,从小培养我们做一个规范的好公民。

咱们设计界也有规范,大型企业品牌都有自己的一套VI系统,这些都是对于品牌所做的规范,规范能让一些原则问题得到解决,网页设计里的一些门户级页面特别需要注意的是规范,这样能让页面统一,比如网页设计里的间距,小到几个像素(虽然网页就这么点像素)也都要实行规范,规范做好了,就像一个人的仪表,端庄就会得到青睐,我们应该不会习惯一脚穿皮鞋一脚穿拖鞋走在大街上吧?所以为了不XX用户的眼球,我们需要做这些规范,要知道这些规范可是一劳永逸的美差呀,规范做好了,即使下回不是由我来操刀,其他设计师也能根据它来修改页面,免去了沟通成本,我还可以抽点时间打个小盹。

三.随时保存您的风格

图片

这玩意儿太重要了,别看一些页面设计得多好看,那全是站在“巨人”的肩膀上的啊。PHOTOSHOP(这里不敢简写PS,因为它我差点过不了毕业论文)强大的图形编辑功能是不言而喻的,但是其中一些自定义保存的部分据我观察不是十分受到关注,Photoshop中的批处理、action、预设管理器那可是偷懒的“利器”啊。发现一个好的样式、色彩或者配色可千万别忘了保存,这些为工作提供了巨大的便利,如果为找不到合适的样式而发愁,不如寻找一套样式,然后在这基础上修改,我经常这么干。这样更加节约您的宝贵时间,让你将偷懒进行到底……

四.善用填充图

图片

图片

图片

设计活动页面就像在设计一张海报,需要给人丰富的视觉感受才能打动用户,然而比较偷懒的做法就是添加填充图,填充图就是以一个单一的小元素平铺成一个大的画面,设计填充图是一件有趣的事情,就几个像素的摆放能影响整个画面的效果,连续的图形在我看来会给人真实的材质感,让画面不再单调,使用恰当会让网页平面化,提升用户的视觉感受,这也是服装巨头们乐此不彼的手段,大家如果有兴趣可以设计不同的填充图。如果连这步都懒得去做的话,那还是去搜一下填充图制作网站吧,因为我懒得贴链接了。

五.做立体效果

图片

图片


图片

大学里老师总是跟我说“平面要不平那才有意思”我并不是要我们去把电脑屏幕给弄得跟哈哈镜一样。其实我们可以玩一些视错觉游戏,最近3D电影不是很流行么,我倒是期待有一天我们的广大网友能够戴着立体眼镜浏览网页,那是多大的欣慰啊……看来有点犯困才会想这么远,还是现实点,既然不能强迫用户去买立体眼镜那我们就直接做带点立体的设计吧,图个新鲜,网络嘛就图个新鲜。然而问题又来了,想做立体的东西但是苦于软件水平有限怎么办,那我就再向各位介绍一把PS的好兄弟Illustrator吧!Illustrator有一个滤镜可以实现3D效果,任意拖拽,任意透视角度,任意光源,总之太多任意了,加个贴图功能就是一个MINI 3DMAX拉!设置好参数然后导入PHOTOSHOP经过“大肆”渲染就可以上厅堂啦。立体设计使画面丰富,让人浮想联翩,方法挺简单,想偷懒的同学都尝试下吧!

总结了自己这么多偷懒的办法,也希望对大家有点帮助,想偷点懒,早点结束这篇文章,祝看到这行的同学身体健康!万事如意!感谢!