网页美工学习设计经验分享.pdf

网页美工学习设计经验分享

网页美工是精通美学，photoshop（PS），FLASH，dreamwaver

（DW）等一网站制作软件的网络人员。小编整理了相关的内容，欢迎

欣赏与借鉴。

 一、配色

 其实对色彩的感觉是设计师应具备的最基本素质，其作品不管是

对网页界面、系统界面、还是产品包装等等都有广泛应用。基本的一些

理论，什么冷暖色、对比色/补色、色彩心理、搭配原则等等，满大街

都是，有意者随便搜一两篇看看就行。色彩对于美工设计师来说，更重

要的是一种感觉，就像打篮球投篮的手感一样，多看，多练，这种感觉

是可以后天练出来的。Mars刚接触设计时，连坐公交车时也会注意路

边某GS、饭店的招牌是如何配色，处处留意生活中色彩搭配的美，关

于色彩截图就更记不清有多少张了。

 设计师对颜色的运用一般有这么几个阶段：

 初级阶段：用自己首映感觉最好的1~2种颜色，不考虑其他因

素、他人感觉；

 过度阶段：开始感觉一两种颜色单调，尽量多尝试不同色彩，该

阶段极容易出现没目的的乱搭现象；

 成熟阶段：该阶段了解了大众对色彩的审美，开始理性的用1~2

种色系搭配，能体会到同种颜色不同色值的细微差别，大多设计师都在

这个阶段；

 终极阶段：把一种色彩用至极致，甚至只用黑白灰，完全沉浸某

种颜色，甚至有点变态，但其创作效果让处于第三阶段的设计师一看就

是大师所为。

 其实这也是个不断练习积累的过程，这样色彩的感觉才会提升。

 二、布局

 美工设计师除了对色彩要有好的感觉外，对布局也要有很好的把

握，组合的好坏直接影响作品的效果。

 其实做好布局设计也不是很难，无非就以下几步：

 布局准备：明确你表达内容的主体部分需要哪些必要的文字和图

片。不要考虑太多细节。

 布局版式：关于布局的版式多种多样，在将重点内容放在最显眼

的前提下，可自由选择版式。对于网页来讲，根据大多数人从上到下、

从左到右的浏览顺序来考虑，应该将最主要的内容、图片等放在页面的

左边和上边。

 精细布局：整体配色、字体、各模块的间距、插图、增减内容等

各个方面的推敲。这一步是细活。

 Mars觉得最锻炼布局的方法是制作PPT。想把PPT制作美观、

精简并不是件容易的事。对于软件行业的售前来说，如何制作漂亮的

PPT应该是他们自我内修的一门必修课。PPT的布局做好了，其他网

页、宣传册等平面布局应该都信手捏来。

 三、细节

 至理名言“细节决定成败”，在设计领域了这句话更显得重要。很

多细节可能会被浏览者忽略，但对设计师来说绝不可放过，比如背景

色、色彩渐变、各组件间间距、标题样式、高亮样式、字体/大小/颜

色、行/段间距、插图位置/边缘处理、输入框宽高/边框色/背景色、按钮

的位置等等太多了。还是之前的话，只有你看得多了，比较得多了，才

能看得出这些细节。有人觉得这些细节没有什么大碍，但多个细节组合

在一起就和让人觉得不舒服。

 举例说一下，以下是某系统里一篇文章下面的添加批注表单。上

半部分是没有经过美化、由程序员直接写的程序（上图），下半部分是

有设计师协助设计美化完成的表单界面（下图）。

 一般正常审美的人肯定觉得下面的好看，但却不知好在哪？听

Mars从各个角度详解一下：

 配色：字体颜色像是直接从32色板上取的，没经过考究；表单

边框色太重；表单背景与页面背景相同，没突出层次。

 布局版式：此组件又没有多行操作，无需使用列表形式；上图保

存按钮在该组件标题之上俨然不合理；组件的标题的位置大小不够醒

目。

 用户体验：明确这是一个系统里的界面组件，所以这个人既然都

登进来了，还用填记录人吗？时间也肯定就是提交时间啊；提交人主要

是提交自己的批注，所以给他提供大片的提交内容的输入框即可，简单

明了；提交按钮，上图需要再填完批注内容后折回到左上角“保存”显然

不合理，下图的界面大大方方右手边一个按钮，看起来明显，操作起来

舒服。

 以上几方面都是关于个人审美观方面的提升，如果你不是打算进

行美学研究，我觉得过多的纯理论学习不会对你的审美观有太多提高。

所以我的建议就是：多看，多模仿，多做，多比。切忌自己没有什么审

美观就盲目创作，其实模仿没什么可耻的，是学习的毕竟阶段。好比有

人模仿MJ跳舞，尽管不是很像，但最少会得到一小部分人的喜爱和追

捧，比如在某校/班的圣诞晚会上；而如果不了解大众审美，就很可能

像芙蓉姐姐