企视觉策划该了解的网站设计知识

网站设计 ≠ 平面设计，有些"眉角"还是要了解一下

前端网站设计的技巧很杂，不过有很多问题其实在企划或视觉设计版面的阶段就要先沟通好，否则等到定稿了再来调整就肯定痛苦太多收获太少不然就是牵一发动全身叫人不想死也难....废话不多说，直接写心得：

1. HTML元素都是矩型：

首先建立一个我之前也提过的概念，HTML里的元素其实不管造型如何，都是正矩形，先有盒模型的概念，在设计时就比较不会出现天马行空的视觉飨宴了。

2.网站是活的：

网站设计和平面设计最大的差异是网站是活的，和平面不同，平面设计时你的元素是固定的，字型设什么样子就是那样，不会随着印刷品放置的时间和看的人不同字型忽大忽小，或是图片有时大有时小。但是很不幸的，网站会。各种造型除了各种版本的浏览器在解析时有机会出现完全不同的结果之外，还有语系差异、设备的屏幕大小、窗口大小、用户自设样式...许多不同的情况会造成网站的内容是随时会更动的，所以设计时要先考虑到各种兼容性，像是设计除了表头之外，中间内容可以重复延展的内容框，或是考虑按钮在放入不同字数的内容时，是否有办法延伸不会跑版等等。

3.网站是会被操作的：

绝大多数的网站都有其功能性，不管是展示、信息或是实际上要输入什么内容，网站不同于平面最明显的就是网站是要被操作的，使用要滚动滚动条、寻找内容、点击链接、输入内容...，所以注意你的设计是不是利于使用，也就是可使性、可用性(Usability)，一个过小的输入框或是怎么也点不到的链接，或者是根本看不出来可以按的设计，都是会逼疯使用者的。设计时至少要先考虑到：字数、大小、使用者习惯、颜色对比、不同的操作可能会造成的影响，像是被输入特殊符号时怎么处理? 或是字符串是否要限制长度，如果用户习惯按钮在右上角，是否该更动? 等等...

4.保持一致的设计很重要：

基于网站是被人使用着的，而人又习惯于熟悉的事物，所以一但设计了一个样式或是模式，就请保持下去，尽量不要在整个网站里每个区块都使用不同的样式或操作，这样可以减低使用者的学习时间，当一个使用者越容易学会怎么操作你的网站，他对你的网站就越有好感。所以视觉们虽然做出了许多美美的操作ICON，可是有时效果远不如系统默认的样式让用户更明白现在在做什么。

5. 网站速度及效率：

这虽然比较像前端或是工程师该负责的部分，不过企划或视觉也有机会在这里做一点贡献。像是内容在首页及分布上要有所取舍，一页放满了重点的文章等于没有重点，网站也是一样，一张大图配上少少的说明文章及参考更多的链接，会比你塞满了信息但是让用户不知如何取得进一步的数据要来的优秀且让人喜爱。视觉的部分则是可以偶尔参考一下最新的CSS3 及HTML5 发布的功能，你不需要学会怎么输入那些外星文来达成网站上的效果，但是你可以知道用CSS及HTML能做出什么效果，新的CSS3有许多特效像是 raba输入、多重背景、背景重复、渐层、内外阴影、iconfont等等...因为适当的内容阶层及减少图片的使用，可以大大的提升网站的速度及效率，有时候这些可以在企划及视觉设计的时候就先考虑进去，这样一来可以缩短所有人的工作时间，愉快的合作，准时的下班~~ (大概啦...)