第三节网站页面设计
设计页面的第一步是设计版面布局。我们要确定需要放置的网站内容、搜索、主菜单、导航等功能模块并进行合理布局，设计师需利用不同的版面结构展现出最符合用户体验并达成网站目标的页面。
一、版式设计
版面指的是浏览器所看到的完整页面(包含框架和层)。与传统的报刊杂志编辑一样，我们可以将网页看作一张报纸、一本杂志来进行排版布局，在网页设计中，版面大小由用户屏幕分辨率来决定，因而用户端的屏幕大小直接决定网站以何种分辨率来呈现内容及取舍内容。
随着电脑更新换代的加速，显示器分辨率已经提高，电脑屏幕能够提供的面积越来越大，而这种难得的资源恰恰是进行网页设计时要充分利用的：平媒“小报”改“大报”要增加一倍的纸张成本，而网站改“宽版”则无需增加任何成本。
1.屏幕分辨率
浏览者电脑或浏览设备的桌面尺寸，是浏览者在首屏看到多少内容最主要的影响因素，屏幕大小几乎等同于浏览器首屏大小。通过检测网站的浏览数据可以统计出几百种屏幕尺寸，远超出一般人的想象，因此，首屏实际上是个在一定范围内变化的概念，并且随着硬件发展具有向大面积、宽屏化发展的趋势。
国内浏览器的主要尺寸包括：1024x768pixels（17英寸4：3显示器），1280x1024pixels（19英寸4：3显示器），1280x800pixels（14.1或17英寸16：10显示器），1440x900pixels（16.1或19英寸16：10显示器）和1680x1050pixels（22英寸16：10显示器）。
每个用户的显示器分辨率不同，所看到的信息内容有所偏差，我们应该做多少像素的页面宽度更符合主流用户的需要？下面一组来自SohTanaka.com的研究数据显示出大型网站对屏幕分辨率的兼容情况。由此看出，大部分网站的页面设计均以使用1024×768或更高分辨率的用户为主要考虑对象。
调查中涉及到的所有网站，都完成了华丽大变身。即使是最大的互联网公司，也都确定他们的主要受众是拥有较大屏幕分辨率的用户。
再看一组来自2008年8月中国四大网站部分频道以及文章最终页宽度的研究分析对比数据。搜狐、新浪主要频道页面宽度比较统一，基本在950像素左右，四大网站中Web2.0页面宽度各不相同。
以上是针对网站的页面分析，下面的数据则是从用户的显示器屏幕使用情况来分析。
根据监测统计显示，86.8%的用户屏幕分辨率在1024×768及以上，而13.2%其他项中除了包含800像素宽的用户也包含1660像素宽的用户。1024×768屏幕分辨率使用率为47.1%，相比前三季度，此比例呈继续下降态势，下降比例为5.5%，但是目前仍然占主流；其次为宽频显示器分辨率1280×800和1440×900，所占比例分别为14.5%、12.9%，根据前三季度统计，此比例呈稳步上升趋势。伴随着1024×768分辨率市场占有率的逐渐下降，可以看出4∶3的普通屏幕显示器在向16∶9、16∶10宽屏显示器逐步过渡，宽屏显示器将成为显示器的主流，会取代普通屏幕显示器。
设计师在以1024宽度为主流用户的同时，需要考虑1024以上的用户看到的更多留白问题，因此在设计时需适当考虑背景色等细节以兼顾到其他用户的体验。
了解用户的屏幕分辨率以后，我们再针对网站的用户群特点来决定使用何种分辨率。例如，视频分享类网站的主要用户群体通常机器配置较高，网站的页面多以宽频为主。门户类网站的用户量大，为保证各用户群体都能看到完整的页面，仍需以主流用户分辨率为主。设计分享类平台，主要用户则应以设计师为主，那么网页设计就应该以更大分辨率来展现。
2.版式结构布局
按照一定的形式美的法则，遵循一定的视觉规律，将文字、图形、动画等进行合理的布局，使页面成为一个有机的整体，展示给广大的浏览者，这就是版式结构布局。页面的布局应该给人以独特的视觉艺术感受，创造出具有美感的信息传达形式，从而引起浏览者的共鸣。
网页常见的布局结构通常可分为“T”型布局、“口”型布局、“川”型布局、“三”型布局、“门”型布局等。
（1）“T”型布局
在版式结构布局时，通常将页面分成三部分——导航区、子菜单、主内容区，通过色彩以及板块的划分，形成水平以及两个垂直板块的结构，此布局整体效果类似英文字母“T”，所以称之为“T”型布局。这是网页设计中使用最广泛的一种布局方式，优点是页面结构清晰，主次分明。
（2）“口”型布局
用色彩和线条将内容、导航等信息集中在页面的中心区域，四边留出空白，看上去类似“口”字，因此称为“口”型布局。也有将广告、导航等信息将四周填满，而中心区域用简单的内容填充的“口”型布局。
（3）“川”型布局
在布局中强调垂直分割，弱化水平方向的内容展示，整个页面在垂直方向分为三列，网站的内容按栏目分布在这三列中，最大限度地突出主页的索引功能，一般适用在栏目较多的网站中。
（4）“三”型布局
此布局国外网站运用较多，其特点是将页面分割成三个水平板块，每个板块中展现的信息内容简洁，中间部分以内容为主，一般应用在简洁明快的艺术性网页布局中，采用简单的图片和线条代替拥挤的文字，给浏览者以强烈的视觉冲击。“三”型布局在Flash网站上应用较多。
（5）“门”型布局
这种布局结构，通常将导航、导读区、焦点图、推荐内容四大区域，通过色彩和线条来区分，形成水平板块与三个垂直板块组合的格局，整体布局类似“门”字，所以称为“门”型布局。
以上总结了目前网络上常见的版式结构布局，事实上还有许多版式结构布局形式同样能起到很好的效果，关键在于创意和设计。在实际设计中绝不应该只局限于以上几种布局格式，有时候适当变化会收到意想不到的效果，平时在浏览网页时多留心，遇到好的布局形式认真揣摩，可以作为设计布局的参考。
3.版式类型
在网页上将有限的视觉元素进行有机的排列组合，将理性思维个性化地表现出来，使其呈现具有个人风格和艺术特色的视觉传达方式，在传达信息的同时，给观者留下感官上的美感。
网页版式类型主要有分栏型、满版型、分割型、中轴型、曲线型、倾斜型、焦点型等多种类型。
（1）分栏型
网页的分栏型版式是一种规范的、理性的分割方法，这种版式在网络上最为常见，类似于报刊的版式，所容纳的信息量最大。分栏型版式有竖向通栏、双栏、三栏、四栏和横向通栏、双栏、三栏和四栏等，一般以竖向分栏为多。在图片和文字的编排上则严格按照比例进行编排配置，给人以严谨、和谐、理性的美感。与其他版式结合，既有条理，又比较活泼。此类版式在门户、新闻媒体类网站中多有采用。
（2）满版型
这类版型的特点是页面以图像充满整版，主要以图像为诉求点，视觉传达效果直观而强烈。满版型给人以舒展、大方的感觉，通常为以产品展示为主的厂商所采纳。随着网速的提高，在FLASH网站设计中满版版式的运用也比较多，页面整体充实而饱满。比如联想电脑网站选择的是主推产品的满版型版式，这能最大限度地通过高分辨率来为用户带来较好的体验，即使是最大分辨率也不会留白，整体画面突出了产品的特点，表现力丰富。
（3）分割型
把整个页面分成上下或左右两部分，分别安排图片和文案。两个部分形成对比：有图片的部分感性而具活力，文案部分则理性而平静。通过调整图片及文案所占的面积，来调节对比的强弱。
分割型版面可以分为：上下分割型、左右分割型两类。
联想ThinkPad网站设计将整个版面分割为左右两部分，左侧男人脸与右侧女人脸图片的对接形成强烈对比，视觉冲击力大，突破常规的分割方式给人印象深刻。
（4）中轴型
将主视觉沿浏览器窗口的中间轴心位置呈水平、垂直方向排列的设计方式，文案等其他信息分布其中。沿中轴水平方向排列的版面给人稳定、安静、和平与含蓄之感；沿中轴垂直方向排列的版面给人强烈的动感。
采用这种版式设计的网页比较适合做活动网站首页。中轴型的网页往往会使人们的视觉中心比较容易集中在网页的中心，有利于突出重点内容，有很好的视觉导向作用。
既具备视觉效果功能，同时具有导航功能。整个页面干净、简洁，浏览者的目光集中在位于分割线上的这张图片上，起到了很好的视觉导向作用。
（5）曲线型
汽车网站设计通常很少采用曲线版式，画面中的汽车在曲线的贯穿下，车的跃动性能以及针对女性用户的特征通过画面直接表达，是比较成功的设计曲线型版式设计是指图片和文字在页面上作曲线的分割或编排，能产生韵律与节奏的版式类型。采用曲线型版式设计可以形成流畅、潇洒、活泼的设计风格，突出网站的个性和魅力。曲线型版式是表现情感的最佳造型手段，灵活地运用自由曲线，可以打破水平线庄重和单调的感觉，给网页增加丰富、流畅、活泼的气氛。
（6）倾斜型
倾斜型版式是指页面的主体形象或多幅图片、文字作倾斜编排，用户的视线便会沿斜线方向移动，产生强烈的动荡、不稳定的态势，引人注目，有很强的视觉感染力。
（7）焦点型
焦点型设计直接以独立而轮廓分明的形象占据版面中心，视觉元素向版面中心做聚拢式的向心运动。
二、导航图标设计
研究表明，用户会花费大量时间察看按钮和导航菜单，因此，优秀的图标设计能起到吸引用户眼球的作用。导航图标设计是网站设计的重要组成要素之一。
随着电脑的更新换代，运行速度越来越快，在用户界面的设计上有了更大的发挥空间。很多页面导航增加了细节，运用了3D效果、阴影、透明甚至一些物理特性来修饰界面。其中有些效果能显著改善可用性，比如阴影能够更好地帮助用户区分激活与非激活状态的窗口，系统中的丰富但有效的动画效果能大大减少用户的学习成本，提高用户的点击欲望。
1.写实图标的细节提炼
有的网站图标在设计中出现过多的细节和极高的写实性，让用户的关注焦点脱离这些图标所表达的概念。而作为设计师需要从中学会提炼使图标具备最基本的概念。
Lukas Mathis在Realism in UI Design一文中针对图标设计方面提出很多建议，这些对我们有很大的启发。
（1）卡通形象的普适性体现在卡通程度越高，所能代表的物体就越多
从如下案例可以看出，如果为了表达一个概念而使用隐喻，视觉上的细节就必须减少。事实上，实际应用中我们所使用的界面控件一般不会去指代一个特定的东西。当然，细节也不能太少，保证必要的识别性是前提，至少要让用户看得出这是什么东西。
（2）经过细节提炼的图标能准确地表达概念
什么样的细节是比较恰当的，什么样的细节是会让用户分心的呢？从如下的示例中得出的答案，即合理地运用阴影、渐变等细节，让用户既能分辨得出这个元素，又能不分心于图形上的效果，才能够帮助我们打造美观而又可识别的界面。
再看下面这两组图标设计的对比，图片中的物品都是数码相机，而它们给用户带来的是两个完全不同的概念。
也有一种特殊情况，在其他程序图标中比较特别，它只用来指代某种程序软件：
腾讯的QQ聊天软件图标使用的企鹅不是指代动物企鹅，而是用丰富的细节、形状和颜色特征让用户一眼就看出这是某款软件的图标；而Lingoes这个词霸翻译软件也正如它的图标所表现的，使用了一只鹦鹉来作为程序图标，使人联想到鹦鹉学舌从而判断这是与语言相关的软件；瑞星杀毒软件的小狮子卡卡图标非常成功，很多人虽然叫不出瑞星的名字，但都不会忘了有个狮子杀毒软件，而图标在这里表现的是软件的功能。在这种场合，我们需要表现的只是一个特定程序而不是广义的概念，最终目的就是把图标和软件的品牌、价值直接联系起来，让用户一看就知道。所以，程序图标可供设计师发挥的空间还是很大的。
2.图标切换设计
切换不同效果的图标设计，在网站的设计中被大量应用，并且逐渐成为一种趋势。并非所有的网站使用效果都好，在多数情况下，适当的应用图标切换按钮是相当有效的。例如，门户网站导航图标通常使用色彩、线条等简洁的图标切换效果，这些效果对于信息量大的网站来说，既满足了浏览者的认知需求，也与网站追求的海量信息、快速下载目标相吻合。
新浪导航的切换效果是鼠标切换后“娱乐”由黑色变成红色；搜狐导航的切换效果是鼠标切换后“娱乐”变成有下划线的图标
活动类型的网站以及商业型产品推广网站的导航更多的是突出个性以及视觉效果。以搜狐汽车旗舰店为例，采用了业界最流行的快捷功能区设计，即底边+大图标设计，这种设置的方式符合用户在浏览完内容后鼠标在最短距离内的响应，便于用户的认知理解和记忆，而图形化设计则能提高用户的点击意愿。
总之，图形用户界面就是一堆符号，而符号的精髓就是简洁，让用户快速准确地读懂符号及其背后的含义是设计师的重要责任，过多华而不实的写实性则可能带来可用性的问题。在设计中增加细节的目的不是让界面和图标看起来像照片那样真实，而是提高识别性，帮助用户更好地和各种控件进行交互操作。