网页设计现状以及实战技巧

（一）垃圾还是经典　　网页技术更新很快，一个网站的界面设计寿命仅仅2-3年而已。不管是垃圾还是精品，都没有所谓的经典。经典只存在于是哪个首次成功创新性的应用。一个闭门造车者做出的东西，是远远赶不上综合借鉴者的。网页设计不同于其他艺术，在模仿加创新的网页设计领域当中，即便是完全自己设计的，也是沿用了人们已经认同的大部分用户习惯，而且这种沿袭的痕迹时非常的明显！还有那个设计者敢腆着脸说，这都是我自己的原创设计？对于业界来说，经典只是个理念和象征！　　（二）国内网页设计环境　　不可否认，国内网页设计环境目前还停留在初级的认知阶段，也就是说，绝大多数人不知道网络的真正的可用之处，你去做一个业务的时候，不得不去做大量的说服教育工作。以乙方的身份去说服甲方，以专业角度去教育非专业认识，结果是可想而知的。也正是这种全体社会普遍的低认知水平，导致了大量网络垃圾的产生。　　举个简单的例子，看看“阿里巴巴”中文和英文两个版本的页面。中文版主色是橙色（与标志色统一），英文版是极不协调的蓝橙（具有很明显的生凑效果）。　　为啥中文版是橙色，呵呵，不要以为哪是为了和标志统一，其实那时国内最常用的商业色。橙色代表什么？肉色，淫欲。商业是性质？贪婪、拜金。对于社会主义初级阶段群众的普遍思想来说，橙色就是最突出的体现，它不仅仅是网页首选商业色，它还体现了当今社会经济发展条件下的“浮躁”和“糜烂”，它还说明了“低认知水平”的国人，需要用这个刺激的颜色，去宣教引领他们被动接受。　　为啥英文版是蓝橙？因为洋人已处于发达社会，他们首先需要的不是“宣教引领”，而是“功能”。一个弱化的界面更能强化显示功能，使人方便使用。较刺激热烈的颜色，会引起洋人的反感，所以用的浅蓝灰色。那么为什么又会出现极不协调的橙色捏？原因有二，一是要与标志颜色统一，二是中英文要有传承，所以出了这末个一半是火焰一半世海水的结果。　　（三）什么是好的网页设计　　（1）内容和功能决定表现形式和界面设计　　常常拿到的任务是一张小纸条，上面两句话，叫你去做一个网站设计。有的人看看纸条就去设计页面了凭，凭两句话，你就可以为客户做一个页面设计，以我7、8年的设计经验，我都不敢去做，你真是我的偶像阿！　　做网页设计，你需要了解客户的东西很多：　　1、建站目的　　2、栏目规划及每个栏目的表现形式及功能要求　　3、主色、客户性别喜好、联系方式、旧版网址、偏好网址　　4、根据行业和客户要求，那些要着重表现　　5、是否分期建设、考虑后期的兼容性　　6、客户是否有强烈的建站欲望　　7、你是否能在精神意识上控制住客户　　8、面对你未接触的技术知识，你有底吗？　　9. 网站类型　　等等…　　当你把这些内容都了解清除了时候，你的大脑中就已经给这个网站有个全面而形象的定位了，这时才是有的放矢去做界面设计的时候了。　　（2）界面弱化　　一个好的界面设计它的界面时弱化的，它突出的是功能，着重体现的是网站业提供给使用者是主要什么。这就涉及到浏览顺序、功能分区等等。　　要让访客在0.5内就能把握网站的行业性质，1秒内就知道该从哪个地方开始使用这个网站，能点一次的，绝不点第二次。当然上面说的是大多数功能性网站，对于宣战展示性网站，诸如加特效的或Flash网站，可能就不得不花哨一些，但不能太过分。网站不是动画片，在效率越来越高，社会心理越来越浮躁的中国，人们的耐心越来越小，心理承受能力越来越低。效果可以体现意境，点到为止。　　（3）模块化和可修改性强　　模块化不仅可以提高重用性，也能统一网站风格，还可以降低程序开发的强度。这里就设计一些尺寸、模数、宽容度、命名规范等等知识了，不再冗述。　　，无论是架构还是模块或图片，都要考虑可修改性强。举个简单的例子，logo、按钮等，很多人喜欢制作图片，N个按钮就是N张图片。如果只做3-5类按钮的背景图片，然后用在网页代码里打上文字，那么修改起来就简单了，让程序员自己改字就可以了。然而网页显示的字体是带有锯齿的，一般即能清晰又保证美观的字体字号有几类：　　宋体 12px | 宋体 12px 粗体 | 宋体 14px | 宋体 14px 粗体 | 黑体 20px | verdana 9px | Arial Black 12px+ |　　（4）创艺是可耻的，分析能力远比创艺来的重要　　设计界动辄就大谈什么“创意”，我要说的是，还没有搞清目的意义内容，还没在技术制作上臻于完善的基础上班，用创艺和特效来迷惑客户和访客是可耻的。一个网也设计者的分析能力远比创艺来的重要。　　（5）兼顾还是抛弃　　CSS、XHTML、web2.0、Ajax等等山雨欲来，学习先进技术固然是有好处的，但对于目前国内普遍的低认知水平，决定了客户的需求和价格也是相当低的。之前，说到经济决定网也设计，所以有的时候，是不允许你做出更多的兼顾的，抛弃和放弃也是无奈之举。　　（四）结尾，送上思洋广州的一些经验　　（一）网页配色基本概念　　（1）白纸黑字是永远的主题，谁都说不出不好来。　　（2）网页最常用流行色　　·兰色——蓝天白云，沉静整洁的颜色。　　·绿色——绿白相间，雅致而有生气。　　·橙色——活泼热烈，标准商业色调。　　·暗红——宁重、严肃、高贵，需要配黑和灰来压制刺激的红色，　　（3）颜色的忌讳　　·忌脏——背景与文字内容对比不强烈，灰暗的背景令人沮丧！　　·忌纯——艳丽的纯色对人的刺激太强烈抗议，缺乏内涵。　　·忌跳——再好看的颜色，也不能脱离整体。脱离群众是自取其辱！　　·忌花——要有一种主色贯穿其中，主色并不时面积最大的颜色，而是最重要，最能揭示和反映主题的颜色，就象领导者一样，虽然在人数上居少数，但起决定作用。　　·忌粉——颜色浅固然显的干净，但如果对比过弱，整得苍白无力了，就象病夫一样无可救药。　　·蓝色忌纯，绿色忌黄，红色忌艳。　　（4）几种固定搭配　　·蓝白橙——蓝为主调。白底，蓝标题栏，橙色按钮或ICON做点缀。　　·绿白兰——绿为主调。白底，绿标题栏，兰色或橙色按钮或ICON做点缀。　　·橙白红——橙为主调。白底，橙标题栏，暗红或桔红色按钮或ICON做点缀。　　·暗红黑——暗红主调。黑或灰底，暗红标题栏，文字内容背景为浅灰色。　　（二）网页设计理念　　（1）内容决定形式　　先把内容充实上，再分区块，再定色调，再处理细节。　　（2）先整体，后局部，最后回归到整体。　　全局考虑，把能填上的都填上，占位置。然后定基调，分模块设计。最后调整不满意的几个局部细节。　　（3）功能决定设计方向　　·看网站的用途，决定设计思路.商业性的就要突出赢利目的；政府型的就要突出形象和权威性的文章；教育性的，就要突出师资和课程。　　关于网页标题设计的原则　　　　在设计网页标题时，应注意同时兼顾对用户的注意力，以及对搜索引擎检索的需要。这一原则在实际操作中可通过下来三个方面来体现，这三个方面也可以被认为是网页标题设计的一般规律：　　（1）网页标题不宜过短或者多长。一般来说6－10个汉字比较理想，最好不好超过30个汉字。网页标题字数过少可能包含不了有效关键词，字数过多不仅搜索引擎无法正确识别标题中的核心关键词，而且也让用户难以对网页标题（尤其是首页标题，代表了网站名称）形成深刻印象，也不便于其他网站链接。　　（2）网页标题应概括网页的核心内容。当用户通过搜索引擎检索时，在检索结果页面中的内容一般是网页标题（加链接）和网页摘要信息，要引起用户的关注，网页标题发挥了很大的作用，如果网页标题和页面摘要信息有较大的相关性，摘要信息对网页标题将发挥进一步的补充作用，从而引起用户对该网页信息点击行为的发生（也就意味着搜索引擎推广发挥了作用）。另外，当网页标题被其他网站或者本网站其他栏目/网页链接时，一个概括了网页核心内容的标题有助于用户判断是否点击该网页标题链接。　　（3）网页标题中应含有丰富的关键词。考虑到搜索引擎营销的特点，搜索引擎对网页标题中所包含的关键词具有较高的权重，尽量让网页标题中含有用户检索所使用的关键词。以网站首页设计为例，一般来说首页标题就是网站的名称或者公司名称，但是考虑到有些名称中可能无法包含公司/网站的核心业务，也就是说没有核心关键词，这时通常采用“核心关键词＋公司名/品排名”的方式来作为网站首页标题。本文开头所列举的某网络营销服务商网站首页标题实例，其实也是采用这种方式来设计网页标题，只不过由于罗列了太多的“核心关键词”，反而没有了核心。　　上述几个方面其实都考虑了搜索引擎检索网页的特点，也就是说，网页标题设计都将有利于搜索引擎检索作为重要因素，即使如此，作者仍然建议，与网页内容写作一样，网页标题写作首先是给用户看的，在这个前提之上考虑对搜索引擎检索才有意义。可见网页标题设计并不是一件随意的事情，尤其对网站首页标题设计，不可不慎重。　　做美工看起来并不是一件容易的事情。首先，要对整个站点和企业有个大致的了解。例如：某些企业喜欢蓝色的主调，你不可能去做个红色的主调，这样完全违背客户的主要意愿，如果百度的标志改成五颜六色的，相信大家也不会认可的。站长的职责是规划网站结构。同样也需要有一定的审美观。下面介绍了几款常用的绘图工具和基本知识。　　1.源文件psd，ai，cdr的区别 　　psd文件就是用photoshop创建的，当然也必须用photoshop打开； 　　ai文件是Illustrator的。他们都是Adobe公司的。ai文件同样也可以用photoshop打开，但打开后会载入在同一层内。 　　cdr文件是CorelDRAW的。　　2.关于CMYK和RGB颜色模式　　CMYK是Cyan（青）、Mageata（品红）、Yellow（黄）、Black（黑），这是印刷上使用比较普遍的色彩模式。　　R、G、B就是Red、Green、Blue（红，绿，蓝）三种颜色，RGB模式就是由这三种颜色为基色进行叠加而模拟出大自然色彩的色彩组合模式。我们日常用的彩色电脑显示器、彩色电视机等的色彩都使用这种模式。 　　3.矢量图　　矢量图与位图最大的区别是,它不受分辨率的影响。因此在印刷时,可以任意放大或缩小图形而不会影响出图的清晰度 　　矢量图：是根据几何特性来绘制图形，矢量可以是一个点或一条线，矢量图只能靠软件生成，文件占用内在空间较小，因为这种类型的图像文件包含独立的分离图像，可以自由无限制的重新组合。它的特点是放大后图像不会失真，和分辨率无关，文件占用空间较小，适用于图形设计、文字设计和一些标志设计、版式设计等。　　ai cdr均为矢量图。　　4.图片文件jpg，gif，png，bmp的区别　　bmp：是未经过压缩的用点阵来表示的真彩图片,占用磁盘空间较大 　　gif：是经过压缩的,只能表示256种颜色,占用磁盘空间小,常用来演示色彩单一的成块的卡通图案,GIF还有一种可以表示连续的动画. 　　png：是fireworks的图片格式 　　jpg：也是有损压缩格式但是它表示的颜色比较丰富,一般用来显示真彩的照片或图案　　5.名片的尺寸问题 　　名片的标准尺寸：90mmX54mm。但是加上出血上下左右各2mm，所以在设计时　　制作尺寸必须设定为：94 x 58mm。　　6.源文件的提供问题　　作为设计者和客户（这里指各站长），如果事先没有明文协议的话　　设计者有权不提供源文件。　　7.什么是logo，ci，vi　　VI是Visual Identity的缩写，中文译为“企业视觉识别”。VI是CI计划的静态识别符号，是企业理念视觉化传达的载体，因此它项目最多，效果最为直接。VI作为视觉识别，它是外在表现，固然需要具有美感，但VI必须是MI的体现，直接反映企业的理念。因此VI设汁包含这样一些原则：即充分传达企业理念、人性原则、民族性原则、简洁抽象及动态原则、员工参与原则、法律原则、艺术性原则和个性原则。 　　CI是Corporate Identity的缩写，中文译为“企业形象”。CI计划，是指企业有目的、有计划、战略性地创造出所希望的自身形象，由此提高企业的社会知名度，最终得到自己最适合的经营环境。　　而logo只是网站或企业一个标志。　　8，关于logo设计的资费问题　　这个问题很不好说，如果是去找正规广告公司做的话，根据公司规模大小，500到5000的都是正常的，一般都附送半套VI（namecard等常用一些），大公司的服务态度和服务质量不一定比小公司好。现如今有些朋友在论坛上说50元做logo，个人认为还不如不收取费用来得好些。这样的恶性竞争下，设计业迟早会或者说已经被带入了“民工职业”的行列。　　还有一点，如果您喜欢拿很多方案去比稿的话，建议您去发布威客任务，那样价钱不会很贵，还可以得到很多得设计方案，一般400块钱的悬赏任务可以得到30份左右的初稿，还是很划算的。BTW：在威客发布悬赏任务是要给相关网站支付一定的任务管理金的，一般为20%。）　　最后说句，站长在设计之前请与设计师先进性良好沟通，不要撇下一句“你看着办吧，我相信你。”“你是专业的，你说怎么弄就怎么弄。”之类的话就不管了。自己对自己的站点不负责的话，设计师也一定不会对你的站点负责的。　　另外，一个设计可以大幅度改稿的次数一般在2–3次间（付费情况下），这不是一个规定，但是大多数设计在超过这个次数后会对业主产生一定的仇恨情绪……