网站模型设计中的内涵和重点

admin 网站优化 2022-02-12 01:41:44 重点内涵设计模型网站页面用户代码内容可以"

在网站设计系列中，笔者通过五个部分，对脱离最基础的美术设计的网站整体设计进行了探讨。设计其实是无标准、也无满分的，它存在于网站假设的各个环节之中，因篇幅所限，只能谈到一些常见的、容易表达和揣摩的内容。

如何搭建完整的网站架构并设计出一个出色的网站？关于这个问题，我们很难提出一个绝对权威和正确的设计思路，但任何网站的设计都需要遵循一个循序渐进的步骤。此次IT设计栏目特别邀请网站设计专业人士，自本期起进行为期5期的连载，分别从网站模型构建、审美与交互设计、风格设计、代码设计、可用性测试及对设计的折回补充等五方面，详细阐述如何设计一个优秀的网站，敬请读者关注。

网站设计是一门新兴的边缘性职业，既要从外观上进行创意，又要结合图形和版面设计，交互设计等诸多相关原理，这使得网站设计变成了一门独特的艺术。

良好的网站设计能使网站在同类站点中独具特色，优秀的创意和表现方式能给浏览者留下深刻的印象，使网站访问流量增加甚至直接增加网站收入。因此，在设计的初始阶段就规划好网站的设计步骤是非常重要的，通常情况下网站设计步骤分为模型构建、审美及交互设计、风格设计、代码设计、可用性测试等几大方面。首先我们由以下四个步骤来了解一下网站模型设计中的内涵与重点。

一、网站设计，不仅仅是美术设计

你的工作究竟属于设计师还是美工？那得看你做的活是真正的设计，还是点缀页面使之更好看的操作。设计师的工作是高屋建瓴的，而美工只是软件工具的使用者。

很多人把在网站中的设计定义为美术设计，认为设计师的工作任务就是使用Photoshop一类的绘图软件把需要展示的页面画出来，其实这是很狭义的理解。合格的设计师应该立足于整个网站的全局，在规划上对整个网站进行完整的设计，在宏观上把握设计风格导向，微观上再针对该网站的具体定位来决定如何对设计进行元素上的细化。当然，网站设计还包括了数据库设计及程序设计，在这里，我仅以我的从业经验，举例谈谈网站前端设计。

北京奥运会即将开幕，我们先来举两个奥运类型网站的例子：

奥运会官网：如图，这是一个设计得非常成功的例子，设计师并没有像一般涉及奥运主题的设计一样使用大量红色，而是把页面风格完全国际化，其中把各种资讯和功能模块都恰到好处地融合在一起，粗毛笔一般的元素设计使网站得到了丰富的整体效果。

新浪奥运频道：如图，我们可以看到设计师的创意仅仅被压缩在页面滚屏几次后看到的内容区块上，使用了奥运五环色彩来进行设计。页面头部基本是套在任何一个专题网站都能使用的结构素材，而新浪的资讯系统一定是能支持实现一个更脱离内容专题模板的好设计的，可见其并没有从网站设计的角度出发去处理这个项目。

二、设计人员在需求阶段介入，影响需求，而不干预需求

我们常听到有设计师抱怨：“这个设计让我改了十多遍怎么还不能定稿？”，也常听到产品经理说：“这个设计师怎么就是把握不住要点？”

不论设计在网站的实现过程中有多么重要，网站该是什么模样，还是必须由需求决定。所以网站项目的前期需求是至关重要的环节，也可以理解成房屋建筑的地基。需求也许是经过若干调查，将结果汇总后产生的报告，也可能是领导或老板的一时冲动而引发的大讨论。

在需求的确立过程中，遗憾的是，网站设计人员的分量是极其有限的，产品经理、频道主管、某级领导的想法往往直接决定着需求的最终形态。但是设计人员在需求阶段的介入还是很有必要的，设计师能以自己专业独到的眼光，提出科学合理的建议，影响需求的细节。这样做的结果是能在最大限度上取得需求方和设计方的思想一致，而不至于在设计过程中面对着有意见却不让更改的需求问题而大发牢骚。

三、学会掌控用户路径

用户从哪个页面来？他最有可能点哪个链接或者按钮？他使用了搜索框吗？他下一页去哪里？最后哪个页面会被他打印输出？

站在整个网站的角度出发，这些流程也许只是产品经理需要把握的，设计师拿到UE图只管一个接一个绘制页面就行。其实不然，好的设计师往往能承担一部分产品经理的职责，设计出一个典型的用户路径，这对网站页面流程有着很大的影响。

页面和页面之间有很多关联，成片的超链接把流程页面和外部页面混乱地串在一起，区域A的文字链接要链到页面2，区域B的图片链接是指向页面3，侧边的一个位置显著的大按钮其实是链接到网站X……页面和页面之间也是有继承关系的，继承的过程要让用户觉得理所当然，在视觉上实现平滑过渡，这就是设计师要考虑的具体问题。从一个页面到另一个页面的路径组成里，哪些模块要原样保留，哪些控件要发生变化？页面结构是否可以变动，页面色彩是否可以更换？这些都是需要参照用户路径进行设计的地方。把自己想象成为一个普通用户，一页一页地点进来，你就能明白用户需要的是什么样的合理设计。在此我们可以参考如图所示的网站设计流程图。

四、初步实现UE产品模型，并审核

设计师需要以什么作为参考来进行页面设计？所有的元素和流程都在脑子里，这个时候设计师需要稍加整理把它们简要地画出来，画出线框和注释就可以了。

我们可以把UE模型理解为设计草图，在UE阶段，设计师主要根据用户路径得来的线索，加上对用户交互习惯的探索，进而整理出一个大概的模型框架。这个框架里，要明确画出有几个关键页面，每个关键页面的关键元素和模块有哪些，这些关键元素和模块哪些是必须以某种特定位置排列或者是务必要强调突出的。

其中，网站的首页、最终页面是最重要的两级页面，首页会是用户使用网站的第一站，在首页的体验好坏，直接决定着他的去留；而最终页面是用户想要获得信息的具体页面，他会在这个页面停留最久，可能会进行仔细的阅读，或是打印出这一页备用。通常在绘制完UE模型之后，会有一个开发小组来讨论并且审核这个模型，这时候就需要着重确定首页和最终页的大概模样，每个讨论参与者对此都很关心。UE模型的绘制我们可以参考如图的某商城的UE图。UE模型通过之后，传统意义的设计终于派上用场，要进行具体的页面设计了。

链接1

网站设计中可能存在的误区〖EOF〗

误区一：设计师就是美工。
事实上，两者几乎完全不同，设计师存在主观因素上的设计，而美工很有可能只是被动执行。 误区二：用什么做图软件对设计师来说很重要。
其实设计师对做图软件没有什么严格要求，很多学习绘图软件很久的人习惯用photoshop来画页面，而更多专职面向网页设计的人习惯使用fireworks，因为其更偏网页化的操作能带来更高的效率。 误区三：做平面设计和网页设计其实是互通的。
虽然都是设计，但两者的很多设计规矩是不一样的，我认为两者最大的区别是思想上的区别：平面设计讲究留白和视觉冲击，而网页设计则寸土寸金，页面元素的整齐协调更是至关重要的。 误区四：我改变不了领导和用户的需求。
设计师要做的只是提出自己对于设计上的看法，决定权仍然在于领导。 误区五：我经验不足，提不了任何建议。
对设计师来说，了解需求也是很重要的，不光是需要读懂文档，更需要真正明白大家在做的是一个什么样的具体的东西，这样在动手操作的时候，才不会手足无措或者是理解偏差。 误区六：设计师直接出设计稿就行了，有问题就改。
设计师需要先搭建出UE模型，UE只需要以简单线框模式展现，效率高而且适合随时调整修改，往往在这个阶段需要修改的地方是很多的，如果直接就以设计稿来探讨，每修改一处都是一个工程，毫无效率可言。误区七: 每个页面都很重要，都要认真研究探讨。
其实大部分网站页面都是一样的框架，只是内容显示不同，同一个级别的页面基本都是一致的，除了关键页面之外，其他页面用户也许只是经过一次，停留时间甚至可以忽略，论优先级来说，同等效率下自然要保证关键页面。

链接２

相关名词

MRD（Market Requirements Document），
是指市场需求文档。MRD文档主要侧重于市场机会的分析，得出类似于 “就当前市场情况而言，我们可以做什么”的结论； PRD（Product Requirements Document），
是指产品需求文档。PRD侧重于整个产品的规划，比 MRD文档要细化一些； UI（User Interface）设计，
用户界面设计，用户界面设计的三大原则是: 置界面于用户的控制之下、减少用户的记忆负担、保持界面的一致性； UE（User Experience），
用户体验，成形的用户体验可表示为框架化的页面草图，有些人习惯用纸笔画UE，有些人习惯用word或其他行业软件，总之能展现页面概要示例即可。

网页设计的规范

理解并遵循网页设计的规范是网页界面设计的基础，网页设计的规范在行业中通常被称为设计的“一贯性”。一个优秀的、有经验的设计师能把网页设计的基本规范自然而本能地融入作品中。在显示器的方寸显示空间里，用户需要以被限定的分辨率来浏览页面、以键盘和鼠标来交互控制界面、继而在有限的网络传输速度下一个个层级地浏览整个站点，可想而知其中有多少要素需要规范化。

形象标志(LOGO)、导航、搜索、内容区块、页面长度、字体字号等元素是这些规范中至关重要的部分。这些元素中大部分都表现在网站的头部或者是第一屏能显示的区域内：一般的网站通常会在头部显著位置显示网站LOGO，以合理的层级关系及最普通的字体字号来展现导航以及设计合理的搜索功能块。

在这里我们需要注意的是除非非常必要，网站的LOGO尽量不要以flash动画展示，同时导航也尽量不要以flash动画或图片来表现，因为浏览器有拦截flash的可能；同时，不同终端设备上浏览器对flash和图片的不支持也可能造成网站无法继续访问或者根本无法识别。

我们可以通过以下几个例子对比一下网页设计规范在实际应用中的效果：图1，汽车之家的导航设计，图文结合，非常出色；图2，贵州省人民政府网站，网站标题和LOGO全部制作到flash动画中，当浏览器屏蔽flash的时候，网站将无法识别；图3，伊利集团网站，导航flash也很漂亮，同样的，当浏览器屏蔽flash的时候，导航将不可见，网站无法被继续访问；图4，广东省人民政府网站，非常优秀的设计，导航栏全部以非图片形式制作，既保证了美观，又体现了实用性。

除此之外，网站的各内容区块应切割明显，让用户能很容易地判断内容块的起始。如果不是门户类型网站，网站页面长度尽量不要超过三屏（因为不同显示器分辨率参数不同，三屏的说法不一定适用于所有设计），即不要让用户在同一页面上过多滚动鼠标滚轮。中文网站设计时应注意内容区域文字尽量使用12像素、14像素等偶数字号，以准确表达中文字体的整齐切割，正文汉字部分应严格使用宋体，保证用户最好的阅读感受。标题部分可以稍微增大字号，页面上除装饰性图片或广告之外的地方最多使用两种字体。如图5所示的方正字库网站，就是一个很好的例子，左侧列表使用13像素宋体，右侧列表使用12像素宋体，同时除广告外还出现了黑体和行楷等数种字体。

遵循简洁为美原则

网页设计不是仅仅使用户在显示器上看到漂亮的装饰性画面那么简单。比起华丽的画面装饰，网页设计应该在更有效地传达信息方面多下些工夫。这必须有对布局设计和色彩的正确理解和相关知识，要熟知网页物理系统的特性，并具备应对各种情况的能力。在具备人性化界面的网站设计中，我们不难发现其表现出来的功能性和自然美。多数设计得比较好的网站，都考虑了多媒体的特性，色彩设计和信息按照一定秩序排列，能更有效地向用户传达内容。

很多设计师认为画出美妙绝伦的页面才是设计，其实不然，要在有限的元素和色彩里表达出风格才是更有难度也更有层次的设计。经过严谨的思考和漫长的推敲，最终只花几分钟为页面画下一个简单的圆角框或者一条两像素的实线，其效果也许比涂满了色彩和组合了数十个分层的画面更好。设计最终将上升到思想的层面，而不是仅仅停留在工具和素材的使用。

简单就是美的设计理念使得Web设计中的简约风格意向逐步明朗，在体验了复杂烦琐的颜色和图片堆砌之后，主流设计开始返璞归真。毕竟网站是给用户使用的，而不是光用来看的，简约的设计能给人以轻松的视觉体验，更好的突出网站功能主题，更适用于网站文字内容的资料表达。

通过以下几个例子我们可以很好地对比简单和复杂的网页设计所体现的不同效果：如图6，互联网上最著名的相册Flickr，采用了最简约的设计；图7，中国SNS的典型代表校内网，以色块和线条构成主体，网站结构上极少使用图片；图8，安徽省政府网站，首页使用了极少见的纵向4栏分割设计，极其烦琐。

重视交互性和用户体验

在界面设计方面，很重要的一点就是要站在用户的立场去进行设计。如果网站的画面既不美观大方，使用起来也不方便，那么这个网页的界面设计是失败的。既能给用户带来方便，又兼备视觉的冲击力的网页界面设计，才是每个网页设计人员应该思考并追求的东西。

在网页界面设计方面，设计师尤其应该考虑使用的便利性和视觉效果这两方面的问题。在使用方法方面，可能的话应该遵循网站设计的普遍规律，界面的构成不能太复杂，主要内容应该设计在引人注目的地方，所有操作性按钮位置应该科学，让用户容易适应；同时，要考虑符合网站主体的色彩系统，去除不必要的内容，把信息块分类设计得成体系，让用户很容易就能找到想要的内容。

如果不是追求艺术美感和试验性的特殊网站，无论设计师想表达的东西是多么新颖多么富有创意，假如把网站头部设计得很复杂很难以理解，进而影响了用户的操作，那么它就很难成为一个优秀的网站。例如以下几个网页，在设计中就存在着一些因为不够重视交互性和用户体验而存在的问题：如图9，湖南省人民政府网站，所有同级内容无区分重复堆砌，容易让人视觉疲劳；图10，知名女性用品网站果皮网，右侧列表过于冗长，用户体验极差；图11，Sandisk中国总代宏衢网站，在简单的页面上采用了过多的烦琐的图片设计。

重视交互性和用户体验

适当选择线条和形状：

文字、标题、图片等的组合，会在页面上形成各种各样的线条和形状。这些线条与形状的组合，构成了主页的总体艺术效果。必须注意艺术地搭配好这些线条和形状，才能增强页面的艺术魅力。以下我们来探讨一下几种不同线条和形状的使用方法。

直线（矩形）的应用。直线条的艺术效果是流畅、挺拔、规矩、整齐的，也就是所谓的有轮有廓。直线和矩形在页面上的重复组合可以呈现井井有条、泾渭分明的视觉效果。一般应用于比较庄重、严肃的主页题材。曲线（弧形）的应用。曲线的效果是流动、活跃，具有动感的，曲线和弧形在页面上的重复组合可以呈现流畅、轻快、富有活力的视觉效果。一般应用于青春、活泼的主页题材。曲、直线（矩形、弧形）的综合应用。把以上两种线条和形状结合起来运用，可以大大丰富主页的表现力，使页面呈现更加丰富多彩的艺术效果。这种形式的主页，适应的范围更大，各种主题的主页都可以应用。但是，在页面的编排处理上，难度也会相应大一些，处理得不好会产生凌乱的效果。最简单的途径是，在一个页面上以一种线条（形状）为主，只在局部的范围内适当用一些其他线条（形状）。

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

均衡的分割版式：

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

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

强调UI统筹：

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

适当美化去除冗余

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

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