1.2 网站与用户体验设计
网站的用户体验是指，由于网站的作用、品牌形象、操作的便利性、网速的流畅性以及细节设计等综合因素，最终影响到用户访问网站时的主观体验，包括用户是否能成功完成任务，是否喜欢网站，是否还想再来。随着互联网的迅猛发展，用户体验也成为影响网站竞争力的一个越来越重要的因素，也逐渐被越来越多的网站所重视。
1.2.1 网站结构
一个网站往往包含了很多的元素，对网站的结构需要从整体入手，并逐渐细化到各个细节元素。从整体来看，网站最重要的就是信息架构、内容安排和视觉设计。信息架构作为网站最核心的骨架，代表了产品内容的组织形式，表现为产品功能信息分类、分层的关系。在设计上主要体现为界面布局和导航，在视觉上体现为网站的配色方案。
网站功能区是网站除了整体布局外，组成页面的主要区域，通常按照其功能来进行划分，主要包括头部区、页尾区、导航区、搜索区、用户登录区、主要信息展示区、广告区等功能区域。
虽然所有网站都会包括以上所描述的各个模块和元素，但不同类型的网站，不同设计师设计的网站，所展现出的形式是不同的。在符合设计原则和满足用户体验需求的基础上，网站的形式可以是多种多样的。
1.2.2 网站页面的构成元素
与传统媒体不同，网站界面除了文字和图像以外，还包含动画、声音和视频等新兴多媒体元素，更有由代码语言编程实现的各种交互式效果。这些极大地增加了网站界面的生动性和复杂性，同时也使得网页设计者需要考虑更多的页面元素的布局和优化。
1.文字
文字元素是信息传达的主体部分，从网页最初的纯文字界面发展至今，文字仍是其他任何元素所无法取代的重要构成。这首先是因为文字信息符合人类的阅读习惯，其次是因为文字所占存储空间很少，节省了下载和浏览的时间。
该网站页面中的文字内容较多，整个页面中的图像修饰较少，但是文字内容的分类很有条理，内容清晰，并没有单调的感觉。通过字体大小、粗细以及小段落的设置，使得页面中的文字内容非常易读。可见，合理的文字排版，同样可以使网站页面具有生动、清晰的视觉效果。
网站页面中的文字主要包括标题、信息、文字链接等几种主要形式。标题是内容的简要说明，一般比较醒目，应该优先编排。文字作为占据页面重要比率的元素，是信息的重要载体，它的字体、大小、颜色和排列对页面整体设计影响极大，应该多花心思去处理。
2.图形符号
图形符号是视觉信息的载体，通过精练的形象代表或表现某一事物，表达一定的含义。图形符号在网站界面设计中可以有多种表现形式，可以是点，也可以是线、色块或是页面中的一个圆角处理等。
在该企业网站的设计中，为了能够有效区分导航菜单中的各个菜单选项，为各导航菜单选项设计了一系列风格相同的简洁图形符号。在页面中一些主要选项的表现上，不仅使用了不同的背景色块加以区别，并且搭配了能够表现该选项内容的图形符号。这比单纯的文字介绍更加能够吸引用户的关注，也在一定程度上丰富了网站页面的视觉效果。
3.图片
图片几乎是每个网站页面中都不可或缺的重要元素之一。通过图片的设计处理，可以有效地突出网站页面视觉效果的表现。图片在网站页面设计中有多种形式，图片具有比文字和图形符号都要强烈和直观的视觉表现效果。图片受指定信息传达内容与目的约束，但在表现手法、工具和技巧方面具有比较高的自由度，从而也可以产生无限的可能性。网站设计中的图片处理往往是网页创意的集中体现，图片的选择应该根据传达的信息和受众群体来决定。
在该汽车品牌的宣传网站中，页面的布局非常简洁、直观，几乎没有什么文字内容，而是使用大幅展示该汽车产品的创意海报，从而有效地吸引用户的关注。通过对产品图片的创意设计，整个网站页面表现出很强的立体空间感，给用户带来视觉上的冲击和享受。
在该图片摄影网站的设计中，使用高清晰的时尚人物摄影图片作为整个页面的背景，给人很强的视觉冲击力与感染力；搭配简洁的细线条以及简洁的文字内容，使网站页面整体给人一种美感，达到传递摄影之美的目的。
4.多媒体
网站界面构成中的多媒体元素主要包括动画、声音和视频。这些都是网站界面构成中最吸引人的元素。但是网站界面还是应该坚持以内容为主，任何技术和应用都应该以信息的更好传达为中心，不能一味地追求视觉化的效果。
在与滑雪运动相关的网站页面设计中，直接以刺激的滑雪视频作为整个页面的背景，在页面中搭配简洁的主题文字和相关图片，使得用户进入网站就能够感受到滑雪运动带给人们的刺激与激情，从而更有效地吸引浏览者。
5.色彩
网站页面中的配色可以为浏览者带来不同的视觉和心理感受。它不像文字、图像和多媒体等元素那样直观、形象，它需要设计师凭借良好的色彩基础，根据一定的配色标准，反复试验、感受之后才能够确定。有时候，一个好的网站界面往往因为选择了错误的配色而影响到整个网站的设计效果；而如果色彩使用得恰到好处，就会有意想不到的效果。
色彩的选择取决于“视觉感受”，例如，与儿童相关的网站可以使用绿色、黄色或蓝色等一些鲜亮的颜色，让人感觉活泼、快乐、有趣、生机勃勃；与爱情交友相关的网站可以使用粉红色、淡紫色和桃红色等，让人感觉柔和、典雅；与手机数码相关的网站可以使用蓝色、紫色、灰色等体现时尚感的颜色，让人感觉时尚、大方、具有时代感。
当用户在浏览网站页面时，首先给用户留下印象的一定是网站页面的配色，不同的色彩能够给用户带来不同的心理感受。该网站页面使用了黄色、绿色和蓝色等多种鲜艳的色彩进行搭配，重点突出的是黄色和蓝色。多种鲜艳色彩的搭配给人一种活泼、快乐、生机勃勃的感受，非常适合儿童教育网站的特点。
专家提示
要想使网站拥有好的用户体验，不仅需要有更快的访问速度，更好的网站内容，还需要从细节入手，设身处地从用户的角度来思考问题，体现出网站对用户的尊重和体贴，避免给用户带来沮丧感。
1.2.3 网站页面的视觉层次
要想设计出好的网页作品，需要考虑很多东西。视觉层次就是网页设计背后最重要的原则之一。通过合理设计，网页各部分内容层次分明，用户可以在众多信息中快速找到自己需要的信息。
1.通过元素尺寸表现视觉层次
设计中，可以通过调整对象的大小来突出重点，可以引导用户的视觉到页面的重点位置。通过调整页面中不同元素的大小，可以很好地组织页面，达到预期效果。页面中最大的部分或最小的部分是最重要的部分。
该沙发产品的宣传销售网站使用无彩色搭配，给人一种高贵的印象。页面采用了极简的设计风格，在网站页面中沙发图片占据了页面中较大的范围，非常显眼，很好地突出了产品外形。在沙发图片中使用半透明黑色与较大的折扣信息文字，很好地突出了该产品的促销信息，从而刺激用户购买。
2.通过丰富的色彩划分层次
颜色是一个非常有趣的工具，它既可以作为组织层工具，也可以是实现极富个性的页面效果的工具。颜色可以影响网站品牌的象征意义，例如百事可乐的网站采用了代表清凉、清爽的蓝色。
这是百事可乐系列饮料产品在移动端的网站页面设计，运用了其企业的标准色——蓝色作为页面的主色调，与其企业品牌形象一致，并且与其竞争对手的色彩印象完全不同，实现品牌的差异化。
大胆地使用对比强烈的颜色，可以增强页面中特定元素的关注度，例如按钮、错误提示和链接。当作为个性的工具使用时，颜色可以使层次延伸出更丰富的情感类型。例如使用充满生机的颜色，可以给浏览者带来轻松愉悦的感受，甚至可以通过颜色将各种信息进行分类。
这是某图片摄影网站的页面设计。其设计风格模仿了Windows 8系统的磁贴设计风格，使用明度较低的纯色作为页面背景，与页面中高明度的色块以及白色的文字形成强烈的对比，有效突出页面内容。在页面中通过多种不同颜色的矩形色块来划分不同的内容，使得页面内容的层次表现非常清晰、明确。
3.通过应用对比增加层次
在页面中合理地应用对比，可以增强页面的层次感。对比具体包括对象大小的对比和颜色的对比。页面中采用不同大小的文字和不同的颜色，传递给用户的信息也都是不同的。
除了可以通过对比提高用户对页面某一部分的关注度外，使用对比还可以将页面信息很好地分类，方便用户阅读。在表现页面的主体和版底时，可以采用从浅颜色过渡到深颜色的方式。
该汽车宣传网站页面使用黄色作为页面的背景主色调，在页面中通过对文字大小、粗细对比的设置，很好地体现出文字内容的层次，使内容部分清晰、易读。版底信息部分则使用了与整体背景不同的黑色背景，有效地区分了页面中不同的信息区域。
4.通过对齐页面实现层次
对齐页面中的元素可以实现不同位置的层次感，可以让用户很好地区分页面中的“内容栏”和“侧边栏”，从而选择阅读的页面内容。
比较常见的网页对齐方式是三栏排列，也有一些网站采用了特殊的对齐方式，页面效果更加独特。这样既可方便用户浏览，又可刺激了用户的好奇心。
在该网站页面的内容区域采用了一种独特的极富灵感的网格对齐方式，图片与文字色块相结合，增强了用户浏览的视觉层次，给用户一种新鲜感。页面中无论是网格色块还是文字内容，都进行了对齐处理，使得页面内容整齐、统一。
5.通过重复分配元素凸显层次
在处理页面中的对象时，例如页面中多段的文本时，用户会由于内容的重复出现而觉得所有文本在讲解同样一个问题，这样就有可能忽略了文本段落中较为重要的部分。通过为重复的段落中的某一段指定不同的颜色或为其添加不同颜色的链接，将文本的这种重复性打破，凸显某一段文本内容。
设计网页时，经常会应用重复排列。但在众多排列的对象中，总有最新发布的、最多访问的和最受欢迎的对象。通过对它们采用不同的表现手法，增加用户视觉上的层次感，获得更好的用户体验。
该网站页面的设计非常简洁，在页面中间位置使用大小不一的菱形图片进行重复组合排列，展示其设计的不同细节，给人一种新颖的图片表现效果，并且能够增强视觉层次。
6.注意元素的分开与接近
将页面中类似的内容整齐地排列在一起，这就是页面元素的接近。这是处理内容相似的元素并将它们相关联的最快方式。元素的分开指的是页面中有些内容是相互分离的，在这些分离的对象中有单独的标题、副标题和一个新的层次结构。
在该活动促销页面的设计中，采用了多个商品图像的组合排版。浏览者首先会被页面顶部的广告图片以及图片中的主题文字所吸引，因为其在页面中所占面积较大，并且位于页面顶部。然后视线向下移动到文字描述内容以及相关的商品列表部分，这些元素的亲密与对比形成一种平衡，视觉层次清晰，给人一种舒适感。
7.合理安排页面密度和空白
页面中的元素如果紧密地排列在一起，那整个页面就会感觉“重”且杂乱；当页面中的元素间距太大时，又有可能显得散漫，彼此之间失去联系。只有“恰到好处”地运用密度和空白，才可以获得良好的视觉效果，用户可以很容易地识别相关的元素。
该网站页面的内容区域划分非常明确，使用不同的背景色块在垂直方向上将页面划分为3个部分。在页面中运用了大量的空白区域来突显页面的内容，不同功能区域的内容又聚集在一起，使用户很容易识别和操作。
8.巧用样式和纹理
通过为对象设置不同的样式和纹理，可以形成更为明显的层次感。在众多平淡页面中，富有质感的页面通常会引起人们的注意。例如，为汽车网站添加金属质感，为建筑网站添加沥青质感。
在页面中适当添加纹理特效可以增加页面的感染力。但是过度地使用会误导用户，使用户的注意力被特效所吸引，而忽略了网站真正想要表现的东西。所以在设计页面时，要将样式和纹理应用到网站的局部元素中，例如字体、按钮和标签等；还要注意页面元素效果的平衡。
在该产品的宣传网站中使用了皮质的纹理与木纹背景相结合，使页面表现出很强的质感，并且能够与该企业所生产的皮质产品形成良好的呼应，也表现出了产品的质感。
专家提示
如果网站中包含了很多Flash 动画、弹出广告和闪闪发光的横幅，虽然这些广告可以成功地吸引用户的注意，但是却不能打动用户。如果设计师创建网站的视觉层次，但是用户却不能在页面中找到他们需要的任何信息，那这个设计方案是完全失败的。一个具有良好视觉层次的页面，应该是一个实用、方便、合理组织信息、具有逻辑性的页面。
1.2.4 基于用户体验的网站设计原则
基于网站的特点，结合用户体验的要求，在网站设计开发过程中需要注意以下的设计原则，从而为用户提供一个良好的网站用户体验。
1.高质量的内容
网站最为关键的是内容，如果不能提供用户所需要的信息和功能，那么这些用户可能不会再次访问你的网站。如果你的网站是一个销售网站，但网站上连商品的价格、商品参数、可供选择的型号和送货时间这些关键的信息都没有，那么潜在的消费者就会感到失望，并转而寻找其他网站进行购买。
“站酷网”是一个专注设计文章与设计资源的网站。进入该网站的“文章”频道中，在“类别”分类中“原创/自译教程”“站酷专访”“站酷设计公开课”这几个分类中的内容都是高质量的原创内容。这些原创内容有许多都是该网站的注册会员整理上传再通过网站审核的，这样就能够保证网站中源源不断的原创内容。在“类别”分类下方的“子类别”中，可以看到每个子类别都是与设计相关的，网站中所有的内容都是围绕着设计展开，这样也显得更加专业。
2.经常更新的内容
大部分网站都是需要经常更新内容的，更新的频率取决于网站的性质。例如，新闻类网站可能需要一天更新几次；小型商品销售类网站，一般只需要在有价格变动或有新产品加入的时候进行更新，每周更新一次就足够了；个人网站只需要在网站管理者认为有必要的时候进行更新即可。
对于综合性新闻门户网站来说，新闻内容的实时更新就显得更加重要。用户每天都希望通过新闻网站来获得最新的新闻资讯，所以新闻网站的内容每天都需要更新，甚至一天都会更新几次。如果发生什么重大事件，甚至会开辟专题页面，实时更新事件的最新进展，时刻保持新闻资讯的新鲜度。
技巧点拨
更新对于用户的重要性取决于网站的性质。例如，网上百科全书的内容就应该保持相对固定，因为更新并不是大多数用户访问这类网站的主要原因。相反，新闻类网站则是靠它的即时更新来吸引用户的。
3.快速的页面加载
浏览者倾向于认为，打开速度较快的网站质量更高，更可信，也更有趣。相应地，网页打开速度越慢，访问者的心理挫折感越强，就会对网站的可信性和质量产生怀疑。在这种情况下，用户会觉得网站的后台可能出现了一种错误，因为在很长一段时间内，他没有得到任何提示。而且，缓慢的网页打开速度会让用户忘了下一步要做什么，不得不重新回忆，这会进一步恶化用户的使用体验。
专家提示
网站页面的打开速度对于电子商务网站来说尤其重要，页面载入的速度越快，就越容易使访问者变成你的客户，降低客户选择商品后，最后却放弃结账的比例。
4.更易使用的网站
用户在访问网站时，需要能够快速、轻松地找到自己所需要的信息或者服务。如果在一个电商网站中，面对成千上万的商品，用户忽然发现，网站并没有为用户提供详细的商品分类导航，或者没有站内搜索功能，这将是怎样的一种灾难。
“天猫”是一个大型综合电商网站，其网站中拥有上千种商品，并且需要面对各种不同层次的用户。所以在其网站中为不同层次的用户提供了各种查找商品的方式，包括非常详细、清晰的商品分类导航，以及为高级用户提供的站内商品搜索功能。使不同操作水平的用户都能够轻松地在网站中找到所需要的商品。
5.与用户的需求密切相关
除了有好的内容以外，网站还必须帮助用户完成他们想要完成的任务。例如，如果用户正在网站中选购一台计算机，那么我们应该让用户可以轻松地在同一个屏幕中比较不同计算机的配置情况。在设想用户希望使用网站信息的方式时需要充满想象力。
例如“苏宁易购”网站的商品页面中，不仅为用户提供了商品分享、商品收藏、用户评论、在线咨询等交互操作，还为用户提供了商品对比的功能，单击商品名称右侧的“对比”按钮，即可将该商品加入到页面右侧的对比栏中，充分满足用户各方面的需求。
6.独特的在线媒体
为什么很多企业都需要创建网站？网站不仅是企业宣传的窗口，更应该发挥很多其他的作用，在网站背后的企业需要把网站置于多方面运营之首。口头上热衷于技术是不够的，在现在竞争激烈的国际环境下，网站的优秀与否决定着企业的成败。
例如该餐厅网站，其不仅仅是餐厅对外宣传的窗口，更重要的功能是在网站中实现在线订餐。这样就能够充分发挥网站作为在线媒体的优势，将品牌宣传与商品销售结合在一起，实现企业利润的最大化。
7.良好的可用性
拥有良好的可用性，是提升网站用户体验的重要原则。网站良好的可用性主要表现在以下多个方面。
（1）系统状态可见性
网站应该让用户了解正在发生的事情，在用户对网站操作的过程中应该即时地为用户提供合理的反馈信息。
（2）系统与真实世界的关联性
网站应该遵循真实世界的转换，将信息内容以自然并具有逻辑的方式呈现给用户，并且需要以用户所熟悉的语言、文字、词汇和概念来呈现，而不是使用系统导向。
（3）用户的控制度及自由度
网站应该给用户提供充分的自由度和控制权，当操作出错时，网站应该提供能自由离开的“出口”，支持返回与撤销等操作。
（4）一致性和标准
同一产品或同类产品中，对于相同的内容、操作等应该采用一致的名称和交互方式，用户不应该猜测同一动作是否使用不同的词汇、状态或动作。保持一致性能够使用户利用已有的知识来执行新的操作任务，并可以预期操作结果，增加用户学习和理解操作界面的速度。除此之外，还要考虑到浏览器的兼容性，使内容能够对全部或尽可能多的用户正确显示。
（5）错误预防
第一时间预防错误发生的谨慎设计比显示错误信息更好，可以使用消除式检查有错误倾向的状态，然后在用户提交前提供确认的选择。
（6）识别，而非回忆
尽量减少用户需要记忆的内容，在网站表单填写过程中，系统应该在合适的位置进行提示，或者直接提供相应的选项，让用户可以直接识别并进行选择，而不需要记忆太多的信息和操作步骤。
（7）使用的灵活性与高效性
网站需要迎合有经验的用户和经验不足的新用户，提供一些高级功能，以加速高级用户和网站之间的交流互动。网站也应该允许用户调整其常用的动作和操作。
（8）视觉美化与简化设计
视觉美化不仅可以给用户带来视觉的享受，也可以提高网站的可用性。对于不必要的或者优先级别低的信息和功能，操作应该尽量简化。
（9）帮助用户诊断并从错误中恢复
错误信息应该以清晰易懂的叙述文字呈现，而不是错误代码，并且精确地指出问题以及提出建设性的解决方案，帮助用户从错误中恢复。
（10）帮助与说明文件
即使是最好的网站系统，也需要为用户提借助必要的帮助和说明文件，并且这些信息应该很容易被用户找到，以协助用户完成任务。