全局于网站整体的网页设计(4)

我们可以通过以下几个例子具体了解一下线条和形状的实际应用，图3是功能型网站校内网，直线为主的同时应用了不对称形状;图4是专业类网站蓝色理想，全站都采用了直线设计；图5是保加利亚知名珠宝网站，曲线的使用达到淋漓尽致。

均衡的分割版式：

在网页设计中，页面因为内容元素的需要被分割成很多区块，区块之间的均衡就是版式设计上需要着重考虑的问题。均衡并非简单理性的等量不等形的计算，一幅好的、均衡的网页版面设计，是布局、重心、对比等多种形式原理创造性全面应用的结果，是对设计师的艺术修养、艺术感受力的一种检验。在面积对比强烈(不等形)而又均衡(等量)的设计中，我们可以看到对比法则的成功参与；而在一些对比不十分强烈、典雅的不对称设计中，我们则可感受到设计者儒雅的学者风范。

需要注意的是，传统网页设计的版式控制都是在不超越大众显示器分辨率宽度的前提下，依照内容多少纵向延展设计。而如今流行的产品型网站，更倾向于在一屏内表达最主要的东西，尤其是首页，尽量不出现滚动条。这里我们可以参考两个例子：图6，中国同学录5460主页面分割，虽缺乏均衡，但还算易用；图7，国外橄榄球俱乐部网站，少见的中央分割设计。

强调UI统筹：

除开宏观的色彩版面设计，页面设计里还有一个很重要的环节UI元素的设计。在设计人员的理解层面上，所有界面上可视范围内的东西，都可以并入UI里，但是单说UI设计，则更侧重于Tab标签、小图标、按钮、控件等。这些细节的优化，通过使用元素来影响整站风格，制造整体性及连续性，能统一整个站点的形象，并且在精致中表达网站的整体格调。具体的UI元素设计是见仁见智的，这里推荐一些优秀的作品给大家参考学习。图8，银华基金网站的icon(小图标)细节；图9，开心网的icon设计细节。

适当美化 去除冗余

在必要的元素都设计完成之后，回顾整个页面，根据整站的风格需要，也许你会觉得设计得过于复杂了，或者是设计得不够完美，不能突出想要的风格。这个时候就需要适当调整对页面的美化控制。

简洁的往往是美的，而美的东西不一定简洁。尤其在网页设计上，对于内容很多的门户网站，任何多余的修饰都会加重浏览者眼睛的负担，所以可以看到门户的设计往往特别简单；而某些专业型网站，就首页来说确实没有什么东西可以展示，那么则需要刻意增加一些点缀而不显得特别空洞。当然，这也不是定理，针对行业不同或者突发性事件，适当地对设计进行调整也能够起到很好的效果。这里我们就举两个门户网站的例子: 图10是奥运版的搜狐首页，门户也设计得美观大方；图11是网易的经典首页，简洁大方堪为业内典范。

如何进行规范的代码设计

相信很少有人会在网页设计的过程中把代码设计单独拿出来说，虽然在软件设计中代码设计很受重视，但在web设计里，大家更关心网站结构设计、数据库设计、页面视觉设计，很少有人会真正关心前端代码设计。这恰恰是因为代码设计的优劣不是一般用户所能感觉出来的，设计得差的前端代码，在用户使用过程中也许毫无影响，却能将前端工程师和web程序员弄得一塌糊涂。

p的规范及科学统筹

说到前端代码，不能不说p架构。目前主流的网站页面架构方式已经转向p+CSS的结构层和表现层脱离的方式，这个过程也叫做网站的标准化。这与以往的利用表格定位的方式完全不同，更加强调了界面元素的模块化定位，由p确定模块的界限，再由CSS代码表现该p元素的表现形式。

在p的布局方式中，我们更多强调的是规范，因为p的ID名称和CLASS类名称是能够由代码编写者自行定义的，所以有明确规范的p设计是前端代码设计的前提。如今的web工作往往牵涉到一个团队中的多人进行协作开发，代码被阅读和被修改的次数远远多于它被编写的次数，而保持代码易读、易修改的关键，就在于在代码编写前期确定能被认同的代码规范。

首先我们先了解p架构中的命名规则，p的许多规范要点体现在ID或者CLASS的命名中，绝大多数设计师习惯使用属性命名方式：即显示绿色14号字的类就命名为green14，蓝色背景区域的类就命名为blueBg。这样命名也未尝不可，但是这样的命名方式对于合作的其他职能部门的同事来说，是毫无意义的。PHP程序员不会关心这个类的字是什么颜色，他只管这块区域应该和哪个程序模块接口；模板编辑也不会关心背景究竟该是什么颜色，他只管哪个区域是用来显示头图、哪个区域显示全站导航和全站通用底部。所以我们比较倡导表意命名方式和接口命名方式，比如pageHead和loginArea这样的命名，pageHead明确表示了这块区域的意思，而loginArea指代了这是个登录区域的接口。不管这两个类里的字号颜色等将来因为改版发生了什么改变，它们起到的作用和所定义的固定区域是不会改变的。