基于用户体验的网站设计

【摘要】

用户是网站生存的意义所在，当用户在浏览和使用网站时，用户的体验好坏决定了网站的优劣。在网络普及的今天，基于用户体验的设计理念越来越受到网站开发人员的重视。设计出一个拥有优质用户体验的网站，可以起到扩大网站用户基数、增加网站流量并保留用户的良好作用，从而提高了网站的转化率，并为网站受益人带来了更多的利益。因此，提升网站的用户体验逐渐成为了提高网站核心竞争力的重要途径之一。为了实现网站给用户提供更便捷更优质的服务体验的研究目的，本文从用户体验的角度出发，通过研究用户体验的要素和用户体验要素在网站设计的实现，并得出有关提高网站用户体验的网站设计方法和原则，以此来为将来有关基于用户体验的网站设计的学术研究提供一定的参考作用。

【关键词】 网站设计；用户体验；用户体验设计

1 前 言

1.1 研究的背景

互联网的发展和普及使得人们随时随地依赖着互联网来完成工作、享受网上的娱乐项目和满足实时消费。中国互联网络信息中心（CNNIC）发布的《第44次中国互联网络发展状况统计报告》，显示在2019年6月我国的网民就已经有8.54亿人，通过科学地计算，我国的互联网普及率达到了61.2%。在我国互联网普及率高的情况下，人们使用互联网的日常使用率正在逐渐持续深化，越来越多的人已经离不开互联网给生活带来的乐趣和便利。在这样的大环境下，有关互联网的技术正在不断地创新，同时以人为本、以用户为中心的网站设计理念成为互联网XXX的重要创新设计理念之一。

对于网站来说，网站如果能够给用户带来良好的用户体验，使得用户的使用效率和感官体验得到提升，那么网站就可以获得竞争优势，同时是可持续发展的优势。因为每天都有数以千计的网民浏览各式各样的网站，他们通过短时间内的网站使用体验来加深对网站的整体印象，优质的用户体验可以使得网站给网民留下深刻的印象，从而与竞争对手区别开来，故通过基于用户体验的网站设计来优化网站的用户体验对企业建立网站来说十分必要。

1.2 研究的目的和意义

对于用户来说，网站相当于是自助式的产品，当用户浏览新网站时需要靠自己以往使用其他类似网站的经验去熟悉新网站的操作和使用，从而满足自身对新网站的需求。假若用户使用一个网站时，没有得到一次好的使用体验，那么他便不会考虑再次光临。即使体验尚好，但用户却觉得在竞争网站的体验更好，这时该网站便会流失一位潜在客户，致使网站转化率低下。针对由于网站用户体验的差强人意而可能导致种种问题的情况，本研究以探究出优化网站用户体验的设计方法为目的，通过结合与网站建设相关技术的方法，整理出基于用户体验的网站的设计思路，希望能起到为从事网站建设与设计的相关人员提供理论参考的作用。

1.3 研究方法

通过文献研究法，本文对基于用户体验的网站设计研究课题，进行了相关文献的分析和整理，以优化网站用户体验的研究目标对该课题的内容进行设计。通过跨学科研究法，本文结合运用用户体验和网站建设与设计相关的知识点来扩充本研究的内容范围，从而起到达到提高研究综合水平的作用。通过功能分析法，本文研究用户体验因素与网站设计部分之间的相互作用和影响。通过描述性研究法，本文对用户体验、网站建设的相关理论进行了叙述，通过引用论据的方法来论证论点的合理性，补充了一些对实际中可能存在的问题而进行的说明。

1.4 国内外研究现状及水平

1.4.1国外研究现状及水平

自唐纳德·诺曼（Donald Arthur Norman）提出用户体验的概念，用户体验设计在国外的发展已有很长一段时间的历程。Ajax之父杰西·加瑞特（Jesse James Garrett），于2000年发布了户体验要素的重要理论，这个理论仅在发布后的一年内，就被下载超过2万次，受到许多大小型网站开发团队的欢迎[1]。2005、2006年X的用户体验会议讨论和交流了用户体验设计的相关内容，如设计原则、相关研究实践和案例等，会议的目标在于寻求同时满足用户需求和实现商业目标的共赢方法。同时一些用户体验研究的专业机构也出现在世人眼中，知名的如X高明（Gomez）公司通过分析数据来提供优化用户体验的咨询服务。微软公司则成立了用户体验研究机构进行自主研发，将研究成果应用到产品中来提高企业的核心竞争力。

用户体验的发展历程从应用于传统工业设计到后来的协助开展电子商务。目前有不同的用户体验模型通过研究得以提出。由文献[2]可知,Sascha Mahlke提出了用户体验过程的基本内容，他认为用户体验受个人的认知能力和情感反应的影响。用户在与网站的交互过程中能够感受到网站的实用性和易用性，同时还能体会到网站带来的视觉享受和娱乐享受，这些感受的程度都将受用户个人认知能力的影响；情感反应是用户在使用网站的过程中和使用之后所直接或间接感受到的情绪。APEC模型把用户和体验分开研究，探讨用户与认知、情感、审美、实用四个方面的内容进行的交流，将体验作为“意思”来理解，得出通用户过网站完成交流产生相应行为的研究结果。Peter Morville的用户体验蜂窝模型以实现价值为核心，由有用性、可用性、满意度、可寻性、可接近性及可靠性六个用户体验特性构成。Robert Rubinoff的用户体验的量化模型将用户体验分为了品牌、功能性、可用性和内容。量化模型对单个元素进行研究，然后创建参数来衡量网站用户体验的优良程度，使得用户体验可以进行量化。经过实践证实，量化模型对改进网站用户体验起了一定的作用。

1.4.2国内研究现状及水平

相对于国外，国内对用户体验的研究起步较晚。自2004年成立的中国光华科技基金会用户体验研究中心提供了一个专业的用户体验学习与交流平台。2009年用户体验专业协会主办了国际用户体验创新大赛，促进了用户体验在中国的普及与推广。第一届中国用户体验发展论坛于2015年召开，会议内容就用户体验的价值和用户体验与创业创新、产品创新、服务创新等话题进行了讨论与交流。在同年9月份，由中国电子质量管理协会、中国电子技术标准化研究院和中国标准化研究院等28家机构共同组成了中国用户体验联盟。除此之外，国内也出现了一些较为知名的用户体验咨询公司，如唐硕（tang）、荷勒（holy）、IDEO、ARK、EICO等算是国内用户体验咨询行业的领先者。

自2001年开始，国内便开始出现关于用户体验的期刊文章和研究文献。直至今日，已有超过14万篇期刊文章或研究文献涉及了用户体验的相关内容，其中关于基于用户体验的网站设计的期刊文章和研究文献约有300篇。以本文章的参考文献为例，北方工业大学的赵培慧对以用户为中心的网站设计进行研究,为提高网站可用性和用户体验起到参考作用[3]。齐鲁工业大学的邴立杰结合交互设计、视觉设计、情感设计的理论知识开展影响网站界面用户体验的因素分析,得到基于用户体验的网站交互设计原则和设计方法[4]。上海大学数码艺术学院的袁淑洁对电商网站的用户体验设计进行了分析, 研究电商网站用户体验设计的特征和规律，提出实现网页视觉的科学性与有效性是未来网站信息传达领域发展的必然趋势。从用户使用网站流程的科学性、网页构成要素分布的有效性分析网页视觉的科学性与有效性[6]。湖南工业大学的冯志宾研究网页界面交互的用户体验设计,得到基于用户体验的网页界面交互设计原则和流程,认识到优化用户体验使网页界面保持统一性和简易性的作用[7]。鲁迅美术学院的史金玉研究网站界面设计中存在的与用户体验有关的细节问题, 提出从感官体验、交互体验、阅读体验、情感体验等方面进行优化网站用户体验的设计思想, 提供基于用户体验的网站界面设计方法[8]。天津市科学技术信息研究所的刘娜娜研究基于用户体验的响应式设计，以移动图书馆响应式设计为例，得出响应式设计的核心在于流式布局、媒体查询和图片的响应式设计的结论[9]。四川九州电子科技股份有限公司的庞立钰和庞立源阐述了B2C网站界面交互设计研究的必要性并简要说明了交互设计的具体原则, 从外观人性化、功能高效化与感性化交流的角度提出优化网站用户体验的网站界面交互设计[10]。

2 用户体验概述

2.1 用户体验的定义

用户体验贯穿于用户使用产品或系统的整个过程，涵盖了用户生理和心理等方面的体验反应。ISO9241-210标准将用户体验定义为“人们对于针对使用或期望使用的产品、系统或者服务的认知印象和回应”。网站所带来的用户体验是不同用户在使用网站时的产生的统一感受，容易受各种因素的影响，故而单个用户在使用网站时的真实感受是无法模拟或再现的。但对于界定明确的用户群体来说，用户在使用网站时的真实感受和需求是可以能够通过良好的设计得到的，如高校网站在进行用户体验相关的设计时，可以研究得到该网站的用户群体希望通过网站便捷地了解学校相关信息的用户需求。

2.2 用户体验的重要性

在面向知识型社会对创新进行探索的大环境下，用户体验作为创新机制之首，为网站的优化和创新带来新的机遇。对于一个企业网站来说，持续化的竞争优势可以通过优化网站用户体验实现，这种优势体现于用户由于优质的网站用户体验对企业和网站留下良好的整体印象，增大了客户再次使用企业网站的机率，从而增加用户转化率和提高用户忠诚度。企业通过转化率还可以了解到企业在网站的投资回报率。对于商务网站来说，网站的浏览者远远多于下单用户，一次良好的用户体验可以将更多的网站浏览者转化为实际购买人，随着转化率的上升，企业从网站获得的收入将不断飙升，即使提高了1%的转化率也能使企业收入增加10%甚至更多。除此之外，任何在优化用户体验上所做的努力都可以提高用户的使用效率。好的网站可以帮助人们提供工作效率并减少出错率，例如当企业内部网站的用户体验得到优化之后，网站的易用性可以减轻员工在使用过程中的焦虑感，从而提高员工的工作效率，同时也使员工对其工作成果感到满足。综上所述，优质的用户体验可以为网站带来可持续的竞争优势、提高客户忠诚度、增大用户转化率和提高使用效率等优势，帮助网站在业务层面加深与用户的互动，在技术层面显示网站的可靠性和稳定性从而赢得用户的信赖。

2.3 用户体验要素

为了确保用户在网站上的所有体验尽可能在网站开发者的意料之中，整个开发流程需要考虑到用户浏览网站时的行为模式。将用户体验分为表现层（surface）、框架层（skeleton）、结构层（structure）、范围层（scope）和战略层（strategy）五个组成要素，如图1。五个层面自下而上地建设，帮助设计者更好地了解整个设计过程中用户的行为和处理可能发生的问题[1]。

　　图2-1 用户体验的五个组成要素

　　表现层：网站展示给用户的一系列网页，是网站的最终外观。框架层：网页的基本框架和布局，是表现层的基本结构。结构层：网站的组成结构，包括网页与网页之间的链接结构。范围层：确定网站的特性和功能，是战略层的具体实现。战略层：确定网站的战略目标，包括企业的战略目标和满足用户需求的网站目标。

五大用户体验要素之间的关系及相互作用：

在战略层，设计者需要关心网站如何满足企业的战略目标和用户需求，完全不用考虑网站的最终外观。在表现层，设计者只需要关心网站呈现的所有细节。从战略层到表现层，设计者做的决策随着层面的上升会变得越来越明确细致，解决的问题也变得越来越精确具体。从战略层到表现层，每一层面都影响着下一层面的设计。表现层的网页外观离不开框架层的网页布局，结构层的网站结构影响着框架层的布局内容，范围层的对网站功能的定义影响着结构层的结构设计，战略层则为范围层定义目标，各层面之间环环相扣、相辅相成。由此我们可以看出战略层作为最底层，战略层的决策对向上层面具有连锁反应，即每个层面中的决策都受到下层决策的约束。同时连锁反应是双方向的，当上层决策在约束之外则需要重新做出下层中相关的决策。不过，凡事皆有两面性，并不是每个下层上的决策都必须在上层的决策做出之前确定下来，有时会上层的决策反而会促成对下层决策的重新评估，所以更好的方法是在上层任务完成之前确定下层的所有选择和决策[1]。

3 网站设计概述

3.1 网站设计的定义

通过网站，人们发布和接收信息，提供和享用网络服务。所以说，网站是人们的一种通讯工具，是用来交换信息和产生活动的平台。网站设计则是将人们的各种需求通过网站实现的过程，可以通过使用Dreamweaver、Photoshop等工具设计网页。网站设计的流程主要包括了网站规划、系统设计和网站实现这三个步骤。

3.2 网站规划

网站的设计开发是一个复杂的系统工程，所涉及的内容很多并且环环相扣，所以需要在网站规划的基础上进行。网站规划决定了网站未来在网络环境下所起到的作用，是网站的基本定义和成长的“引路人”。网站规划包括在建站前分析市场，确定网站目的和功能，规划网站建设中的设备、人员、费用等。

3.2.1 网站的市场分析

网站市场分析的内容包括通过市场调查和供求预测，对市场的规模、特点、容量等内容进行分析，判断网站运行后所带来的流量和经济效益。对网站进行市场分析可以先从目标用户的调查分析开始，通过用户细分的方法来细分用户群体，从而进一步了解网站的用户需求。使网站能够最大化地实现可持续发展，需要关注到正确的用户群体的需求，从而获得用户对网站的忠诚，通过用户细分找到有价值的用户是用户细分的意义所在。用户细分分析用户的外在属性、内在属性和消费行为。其中，用户的外在属性包括了年龄、性别、教育背景、经济收入等，内在属性包括了浏览习惯、上网频率、技术操作水平等。依据以上属性可以按照不同的划分标准来细分用户群体，如根据用户的消费水平和对网站的忠诚程度，可以将一个用户群体划分为VIP用户、主要用户、普通用户和游客。在对网站的用户细分之后，需要研究竞争对手的优势，通过了解竞争对手开展的网上业务和网站结构、网页布局与运行状况等，学习借鉴他人优点，逐渐拉近与竞争对手之间的差距。

3.2.2 网站的功能定位

在网站规划阶段必须根据网站自身的实际情况对网站的功能进行全方位的准确定位。首先应该确定构建网站的目标，列出该阶段要解决的问题，如网站的近期目标和远期目标。一般来说，构建网站的目标各式各样，有实现电子商务的目标，有宣传企业与推广产品的目标，有实现与用户进行线上交流和解决问题的目标，有提高企业对内外部业务流程的信息化水平的目标，还有提供在线信息咨询和技术支持的目标。网站发展的每个阶段的目标也不尽相同，例如淘宝网的短期目标是建立用户线上购物的行为模式，通过推行免费线上商家注册政策，增加人们线上开店的数量，扩大商城商品类目，吸引购买者并为他们提供更多的购买选择，从而培养出更多忠实的用户；中期目标是逐步落实淘宝网的前期规划，改善线上商城的商品质量和售后服务，解决买卖双方的抵赖性交易等安全方面的问题；长期目标则是以阿里巴巴为平台打造服务于中小型企业的销售中心，发展B2B、B2C及C2C等类型的线上商务活动。

在确定构建了网站的目标和网站的各阶段目标之后还需要对网站进行市场定位分析，如对竞争者的竞争优势进行分析。比如，淘宝网在建站前对中国C2C网站的利润前景进行了分析，发现线上商城用户的需求还不能得到充分的满足。在对用户网上购物的行为进行了分析之后，了解到大多数网民为了节省时间、节约费用、寻找稀有商品以及出于好奇而进行网上购物，还发现用户对于线上商城的商品质量良莠不齐、商家售后服务不完善和线上的交易安全得不到保障等问题比较在意。经过这一系列的研究，淘宝网从重视消费者的购买习惯的角度出发进行网站设计，提高了用户访问率及线上交易达成率，培育了一大批在淘宝网上进行线上购物的忠诚用户。

3.2.3 网站的可行性分析

根据网站整体的定位和规划之后还要做好可行性分析：若可行，则继续下一步工作；若不可行，则修改或放弃该方案。网站的可行性分析主要从技术和经济两大方面进行分析。网站的经济可行性分析是根据企业的实际经济情况和网络信息技术的先进程度，规划网站的软件平台和硬件平台的分析方法。技术可行性分析的主要内容有对竞争对手和网站优势进行分析的市场需求概述，有关于服务器和互联网接入方式的网站硬件需求概述，也有关于服务器系统和网站安全问题的网站软件需求概述。

网站的经济可行性分析主要从成本和收益两个角度来进行分析，其中网站成本包括了开发成本和运行管理成本两大部分。开发成本包括了规划成本和构建费用，其中规划成本主要来自于网站前期规划的用户调查研究和市场分析，构建费用主要来自于网站的软硬件平台搭建、购买域名、主机托管等方面。运行管理成本包括了运行费用、维护费用和管理费用。其中，运行费用主要来自于网站的实施与推广、网站设备的折旧、网站推行的咨询服务等方面，维护费用来自于系统维护、数据维护和网站的运行与安全维护，管理费用来自于人员管理、设备管理等方面。网站收益则包括了直接收益、间接收益和品牌收益三大部分。

3.2.4 网站的资源和进度规划

网站的资源规划主要包括了人力调配和费用预算两方面。按照工作性质可以将在网站工作的人员大致分为技术性人员、商业人员和其他人员。其中，技术性人员包括网页设计人员、系统技术人员和网站开发人员等；商业人员包括销售人员和客户服务人员等；其他人员包括了项目管理人员和后台操作人员等。网站需要投入的费用一般有域名费用、系统软件费用、服务器硬件设备费用、主机托管费用等。

在进行网站的规划时还需要对网站的实施进行进度规划，保证网站可以在一定的时间范围内搭建成功，同时规划好时间和成本的关系。网站规划的内容需要贯彻网站设计的整个流程，主要包括了工作内容及时间的安排和工作人员讨论交流会的时间安排等，一般可以通过甘特图或网络图的形式来制作时间安排表。通过甘特图能够直观地看到任务的计划日期和实际进展，管理者还可以便利地进行工作进度的评估。

3.3 网站的系统设计

网站的系统设计从网站的战略目标出发，根据网站规划阶段产生的方案和计划，确定网站的总体结构，同时考虑经济、技术、内外部环境和主客观等方面的条件选择计算机和软件、硬件设备以实现网站的战略目标。网站的系统设计可以分为系统总体结构设计、系统运行平台设计、系统中间件设计、应用系统设计和系统接口设计。

3.3.1 系统总体结构设计

系统总体结构设计是在网站规划的基础上，确定网站的总体组成结构。一般来说，网站系统的组成结构包括应用层、服务层和基础层三个组成部分。应用层是实现网站业务功能的核心层，主要负责具体的业务逻辑处理，包括了网站的应用系统和支付系统的功能实现。服务层提供可复用的应用服务平台和管理平台的服务，如提供CA认证中心和支付网关的服务。基础层运用网络平台和系统平台支撑起了整个网站系统。通过分析，划分网站内外部环境的边界使得网站系统的总体结构设计有一个明确的范围。网站系统的外部接口包括：

（1）与企业合作伙伴之间的接口；

（2）与企业内部既有信息系统的接口；

（3）与交易相关的公共信息基础设施之间的接口；

（4）其他接口，如企业与XX或其他机构之间的接口。

3.3.2 系统运行平台设计

网站的系统运行平台对应网站系统体系结构中的基础层，主要由网络通信平台、软件平台和硬件平台及相关设备构成。系统运行平台设计包括网络通信平台设计、计算机硬件设计和应用软件设计。

网络通信平台设计对局域网、Internet、Intranet和Extranet分别进行设计。在网站的网络通信平台设计中，企业网站的网络环境可以通过企业自行建立，也可以外包给网络运营服务商。现实中，大多数企业网站采用外包的方式实现企业网站的网络环境，主要通过使用网络运营服务商提供的主机托管或数据中心模式来实现。

计算机硬件设计通过对网络设备和服务器的选择进行设计。网络设备是局域网的组成部分之一，负责网站与网络的连接，基本的网络设备有计算机、交换机、路由器、无线接入点、打印机和调制解调器等。选择网络设备首先要考虑其能否满足网站的用户需求，其次要遵循安全稳定、技术先进、便于扩展、服务支持、经济合理等原则。服务器负责侦听客户机提交的服务请求并提供相应的服务。在选择服务器时可以从可扩展性、易使用性、稳定性、易管理性等方面考虑。

应用软件设计是对网络操作系统、Web服务器软件、应用服务器软件、数据库管理系统和开发语言及工具的选择。选择网络操作系统需要从安全性、可靠性、可集成性、可扩展性等方面入手并使其具备对应用程序的开发支持的能力，同时又具备易于管理和维护的优点。Web服务器是向客户端提供文档的程序。选择Web服务器需要考虑其与网络操作系统的配合程度，从安全性、稳定可靠性、响应能力、管理的难易程度和技术支持等方面，实现支持标准应用和后端服务器的功能。应用服务器通过各种协议提供访问途径运行于浏览器和数据资源之间，是为客户端应用程序提供使用服务的应用程序的集合，通常可以参考性能、独立性和价格等因素来选择应用服务器。数据库管理系统为管理员提供管理数据库的方法，为用户提供访问数据库的途径，同时多个使用对象和应用程序可以互不影响地建立、修改和询问数据库。选择数据库管理系统可以从其构造的难易程度、系统的成熟度和先进性、可移植性、可扩展性、并发控制能力、容错能力等方面去考虑，同时实现对分布式应用的支持、对多媒体的支持和对全文检索的支持。开发语言是由计算机发出的定义程序标准化的指令。程序员通过开发语言准确定义计算机的响应措施，记录计算机的数据。开发语言的选择需要结合自身的特点和开发团队的需求、经济能力，尽可能达到标准并独立于系统平台和数据库。

3.3.3系统中间件设计

中间件是网站系统体系结构中的服务层的组成要件，为处于上层的应用软件提供运行与开发的环境，具有强大的网络通信功能。系统中间件设计指的是对位于网站系统的服务层中的中间件进行选择。在网站的系统中间件设计中，中间件需要在通讯、核心部件、应用系统开发和管理等方面起到作用。具体来说，中间件支持各种通讯协议，具备数据的加密、压缩和传输以及翻译数据格式等功能。在应用系统开发方面，中间件基于支持不同平台的开发工具和接口标准。在管理方面，中间件对本身的配置进行监控和协调，为系统的易用易管理提供保证。总的来说，中间件具有可成长性、适应性、可管理性、高可信性和负载均衡的特点。一般情况下，中间件支持分布式计算和标准的协议、接口，为跨网络平台的应用提供交互。在应用软件的开发中，将中间件升级更新并保持对外的接口定义不变则不需修改应用软件。中间件提供了一个相对稳定的高层应用环境，节约了企业在应用软件开发和维护中的投资成本。

3.3.4 应用系统设计

应用层是网站系统的核心部分，负责实现用户对网站系统的功能需求。应用系统设计一般包括了应用系统体系结构设计、应用程序模块设计、系统数据库设计、网站网页设计和网站安全系统设计。

3.3.4.1应用系统体系结构设计

处理构件、数据构件和连接构件等具有一定形式的结构化元素集合成应用系统的体系结构，其中处理构件对数据构件进行加工，连接构件把其他类型的构件连接起来。常见的应用系统体系结构一般有客户/服务器体系结构、三层体系结构、多层体系结构和MVC体系结构。

客户/服务器体系结构（Client/Server）简称C/S结构，客户部分由用户通过客户机连接应用系统，服务器部分由企业选择并应用。客户机程序处理网站使用过程中产生的数据并显示结果，为用户提供了浏览网站的接口，它将用户对网页的请求提交到服务器程序，并将服务器程序返回的结果以网页的形式反馈给用户。服务器程序存储和管理网站使用过程中产生的数据，它接收用户在客户机程序提出的服务请求，并对其进行相应的处理，再处理结果返还给客户机程序。浏览器/服务器体系结构（Browser/Server）简称B/S结构，是三层或多层C/S结构的一种实现方式。Web浏览器负责处理网站系统的绝大多数的请求，包括应用系统对数据库的访问请求。数据库服务器负责存储大量的数据信息和数据逻辑。多层体系结构由客户机、Web服务器、应用服务器、数据库服务器构成。MVC体系结构包含模型层、视图层和控制层三个层面。其中模型层保存和访问系统数据库中的商业数据，执行网站功能的逻辑和操作，视图层以特定的形式展示模型层的数据、功能之间的逻辑关系。控制层控制业务流程，负责接收用户的请求并调用模型层和视图层去完成用户的需求。

3.3.4.2应用程序模块设计

应用程序模块设计的主要工作是找出系统中的应用程序，可以通过画顺序图或协作图来实现。顺序图的纵向是时间轴，横向是在协作中各独立对象的类元角色，将交互关系表示为一个二维图，见图2。

　　图3-1 图书销售网站关于下新订单的用例顺序图

　　协作图是发送和接收消息的对象之间的组织结构的交互图，由活动者、对象、连接和消息这几个基本元素组成，见图3。在UML中，协作图用实线标记对象和对象之间的联系，用矩形标记对象之间发送和接收的消息。协作图说明了系统的动态情况，使复杂的程序逻辑或多个平行事务的描述变得容易。

　　图3-2 图书销售网站关于下新订单的用例协作图

　　3.3.4.3系统数据库设计

数据库存储各类数据。数据库设计从用户对数据的需求出发，构造数据库结构和研究存储数据的方式。系统数据库设计根据设计方法的不同分为结构化系统数据库设计和面向对象系统数据库设计。

结构化系统数据库设计包括识别、建立表。从用户角度建立概念模型描述各表间的联系，建立数据模型描述各表的内容。建立概念模型需要运用实体－联系法来描述某一组织的信息模型，如E-R图。E-R图中用实体来表示现实存在的对象，用属性表示实体的特性，用联系表示实体之间的数量对应关系，如图4。绘制E-R图首先需要识别目标数据库中的实体，找出各实体本身的属性，再确定实体之间的联系，最后进行绘制。

　　图3-3 某仓库管理系统E-R图

　　数据模型是客观事物及其联系的数据化描述。关系模型是最重要的数据模型，用“关系名（属性1，属性2，……，属性n）”来表示。其中关系名为二维表名，关系表示二维表，列表示二维表中的属性，值域表示二维表中属性的取值范围；元组表示二维表中的行，其中分量表示元组中的属性值；主关键字用来标识唯一元组的属性。根据联系的不同，概念模型中的实体和联系可以转换为不同类型的关系表。一对一与多对多联系中，实体和联系全部转换为关系表；一对多联系中，联系不转换为关系表，实体全部转换为关系表。

面向对象系统数据库设计包括识别表、建立UML实体类图和状态图。UML实体类图用来表达系统数据库的结构，指明数据库中有哪些表、各表的结构以及各表间的联系，如图5。

　　图3-4 仓库管理系统实体类图

　　UML状态图对数据库中相关表的属性及属性值作补充设计，如图6。

　　图3-5 仓库管理系统中仓库对象状态图

　　3.3.4.4网站网页设计

网站网页设计主要从网站功能和内容、网站页面结构、网站页面可视化这几个方面进行，可以分为网站内容与功能设计、网站风格与布局设计、网站目录结构与链接结构设计这三大设计内容,由文献[11]可知。

3.3.4.4.1网站内容与功能设计

网站内容与功能设计分为内容分类和栏目设计、前台功能设计和后台功能设计三个部分。内容分类是指通过前期规划中的网站市场需求分析，得到用户对网站的内容需求，再对内容进行分类和重组。栏目设计的基本任务是建立网站内容展示的框架，确定必需栏目和重点栏目并建立栏目的层次结构，方便用户浏览、交互和查询。其中重点栏目用于展示网站中最有价值的内容，突出最直接的网站主题。

网站的前台设计内容通常包括了导航与信息展示、用户注册与登陆、最新公告等。除此之外，电子商务网站的前台设计还包括了商品购买流程、付款方式说明和售后服务等内容。对于电子商务网站来说，网站的核心功能是为用户提供商品并使用户方便迅速地找到心仪商品，同时方便用户查看商品的详细信息。因此，在电子商务网站的商品导航上应该提供商品分类、热卖商品、最新商品、单个商品的详细展示等多种方式，此外还应该提供商品按关键词搜索的功能，这样如果当前页面没有用户确定要买的商品，又无法通过目录轻松找到，用户可以通过关键字直接搜索这一类的商品。具体来说，网站可以将所有产品按大类区分，再具体分为各种小类，提高用户在查询所需商品的使用效率。网站还可以让商品按照时间排序，用户就可以找到最新商品，按销量或者口碑排序则可以找到热卖商品。当用户找到商品并查看时，网站需要把详细且有价值的商品信息以网页的形式提供给用户。除此之外，网站还需要提供用户注册及登陆渠道。用户登陆后，网站可以对用户进行追踪并获得大数据；用户成为会员后，网站可以通过提供优惠来吸引用户，还可以实现积分查询与兑换、订单查询等功能。网站可以将最新上市商品、促销等各类信息以公告的形式即时通知用户。在用户浏览网站的过程中，用户可以将商品加入购物车，一方面方便了用户同时购买多种商品，另一方面还让用户直观地查看商品信息和购物金额，更新商品数量或删除商品，还可以防止用户因掉线而丢失购物车的商品信息。之后，用户可以在购物车界面结算商品，生成订单信息，完成地址选择、送货方式选择及支付等一系列操作之后生成了订单。最后，用户可以在个人中心查看订单信息、确认收货或者进行退换货的售后服务操作。

网站的后台功能设计通常包括了信息的发布与更新和用户管理，在电子商务网站中还包括了商品维护、评价管理和订单处理等功能，这些都是由管理员在后台完成的操作。对于电子商务网站来说，商品信息管理和订单信息管理是重要的部分。商品信息管理包括了商品分类管理、商品图片管理和商品价格管理等内容，订单信息管理则包括订单审核、收款确认及配货等内容。

3.3.4.4.2网站风格与布局设计

一个好的网站应该要体现出自身的风格，通过网站的整体风格设计和版面布局可以体现出与企业相符的网站风格。网页上的视觉元素组合在一起形成了网站风格，体现着企业文化、产品或服务特点等。好的网站风格帮助用户了解企业，使企业通过自身网站提高辨识度，在众多网站中脱颖而出。除此之外，设计者必须具有良好的网站设计理念才能创造出优秀的网站。网站的整体风格是网站给用户带来的综合感受，设计者可以从色彩、LOGO、版面、文字、背景等方面进行创意设计，展现网站的风格特色。除此之外，我们还需要考虑网页内容便于阅读、设计合适网页长度、图片尺寸及格式、协调浏览器与分辨率等。

网站的版面布局需要实用且美观。从实用的角度讲，网页内容的主次分明和重点内容突出是最基本的要求，除此之外网页的导航一定要清晰，布局要合理且逻辑性强。从美观的角度来说，网页的版式要同时具备整体性和一致性，划分合理且通过对比使画面丰富多彩。在进行版面设计时，设计者可以先使用草案构图，再进行粗略布局，遵循突出重点、平衡协调的原则放置功能模块。常见的设计方法有：运用正常平衡强调秩序，如按照匀称的上下或左右对照形式设计来达到平衡的效果；运用异常平衡强调突出，如按照不均整的非对照形式设计来达到平衡的效果；运用色彩、色调的对比丰富网页效果；运用适当的留白提升网站格调，改善页面布局。

3.3.4.4.3网站目录结构与链接结构设计

建立网站时所创建的目录简称网站目录，其结构包括了物理结构和逻辑结构。网站拥有较多网页时，构建合理的网站结构可以保证搜索引擎的有效性。网站的物理结构由网站目录及文件的存储位置构成，常见的有扁平式结构和树型结构。在扁平式结构中，所有网页都保存在网站的根目录下的。使用扁平式结构网站的搜索引擎可以一次搜索就访问所有网页，缺点是文件太多使得网站的维护变得比较麻烦。扁平式结构一般用于小型网站，而对于较大规模的网站而言，多层级子目录可以正常存储网站文件，这种多层级目录构成了树型结构。在树型结构中，根目录下拥有多个子目录，这种层次分明的结构使得网站的维护变得容易，但不利于使用搜索引擎的效率提高。网站中的文件往往数量庞大，虽说网站目录结构的好坏并不直接影响用户的浏览体验，但对于网站的长期维护、内容的扩充和转移却有着十分重要影响。在设计中我们需要注意的地方有很多：

不要将所有文件都存放在根目录下；按照主菜单栏目内容建立子目录；根据更新要求管理次要栏目；每个目录下建立独立的images目录；目录的层次建议不要超过三层；不使用中文目录。与网站的物理结构不同，网站的逻辑结构是由网页形成的链接结构，注重用最少的链接使用户浏览变得最有效率。通过一对一或一对多两种基本方式，网站的链接结构可以建立为树状链接结构或星状链接结构。设计者需要根据网站的自身需求来建立网站的链接结构。经过一系列的研究和实践，首页与一级页面之间用星状链接结构链接，一级和二级页面之间用树状链接结构链接是最好的设计方法。

3.3.4.5网站安全系统设计

网站的安全系统是网站的重要组成部分，关系着网站的存亡，故而网站的安全系统设计成为必不可少的重要设计环节。通过构建安全系统结构（如图7）和应用安全技术（图8）可以使网站安全系统实现系统可用性、交易真实性、交易保密性、交易完整性和不可抵赖性。

　　图3-6 安全系统的基本结构

　　（1）应用防火墙、入侵检测和病毒防治实现系统可用性。

防火墙由软件和硬件设备组合而成，是位于内外部网络之间的网络安全系统，起着充当保护屏障角色的作用。防火墙主要作用于网络安全、数据库安全这两个方面。

入侵检测通过收集分析计算机网络和网站系统中的信息，检测是否存在违反安全策略的事件和攻击迹象，联系安全管理员阻止试图破坏计算机保密性、完整性、可用性或可控性的一系列活动，如非授权用户存取数据、处理数据等危险性活动。

计算机病毒是通过破坏计算机功能和数据来影响计算机的使用并且能够进行自我复制的程序代码或计算机指令，具有非授权可执行性、隐蔽性、破坏性、传染性、可触发性的特点。预防计算机病毒需要加强内部网络管理使用人员的安全意识并用口令来控制对系统资源的访问。另外，安装杀毒软件并定期更新也是预防病毒的重要手段。

（2）应用加密技术实现交易保密性。

加密技术是采用数字公式对信息进行加密和解密的技术，常见的有对称加密技术、非对称加密技术和数字信封技术。在对称加密技术中，发送方使用的加密密钥和接收方使用的解密密钥是相同，同时作为秘密密钥使用。对称加密技术具有很强的保密强度，使用方便、加密效率高，但密钥传递过程中有可能会丢失密钥而造成信息泄漏，密钥管理维护着系统的安全。在非对称加密技术中发送方和接收方的密钥是不同的，且几乎不可能根据加密密钥推导出解密密钥。非对称加密技术通常采用公开密钥体制来管理密钥，交易双方各有一对私有和公开密钥且双方都拥有对方的公开密钥，其中一个作为加密密钥而另一个作为解密密钥。数字信封技术是将两种加密技术结合在一起形成的技术，它的原理是用对称加密技术加密信息，用非对称加密技术加密秘密密钥。

（3）应用数字签名、数字摘要和数字时间戳实现交易完整性和不可抵赖性。

数字签名类似于物理签名，由信息发送者对原信息进行密码变换产生，以电子签章的形式，附加在原信息后面一同发送给接收者。数字签名的作用在于验证发送者的身份的真实性、信息传输的完整性并防止交易中的抵赖发生。数字摘要技术用算法将需要加密的信息转变成一串固定长度的密文，密文形成的数字摘要具有唯一性，每一份加密信息对应唯一的数字摘要。数字时间戳技术用于给需要签署日期的交易信息加上时间标记，包括添加文件摘要、交易时间和数字签名。

（4）应用电子认证技术实现交易真实性。

一般应用数字证书来进行电子认证，数字证书是由认证中心颁发的证明网上交易各方身份信息的数据证书，相当于个人在网络上的身份证。数字证书由证书所有者信息、公开密钥和证书颁发机构的签名等内容构成，故而数字证书在网上交易中不仅可以用于验证交易双方的身份，还可以传递公开密钥。

　　图3-7 应用安全技术对网站安全系统的实现

　　3.3.5系统接口设计

系统接口设计包括对系统内部接口和外部接口的设计。企业开展电子商务的前提条件是网站系统内部接口与企业内部信息系统相连，网站系统外部接口和外部环境进行信息沟通。通过系统内部接口的设计步骤，可以明确系统接口设计的实施方法：

分析企业内部信息系统的作用明确网站的内部信息资源界定企业内部系统与网站系统之间的界限归纳内部系统和网站系统间的信息需求分析内部系统与网站系统间的数据交换及接口关系

3.4网站实现

网站的系统分析和设计阶段完成了网站的逻辑功能和物理结构的相关描述，然后将网站的物理模型进一步转化为现实的物理系统，经过测试后投入实际运行中实现网站的运行。网站的实现包括了网站开发、网站测试和网站发布这几大部分。

网站开发主要是完成网站的编码与调试，以及网站与企业既有信息资源的集成。网站编码涉及到网页编码和程序编码两个部分，一般在整个网站系统的编写中应该注意页面设计、系统命名、文件内容样式、代码和性能等方面的编码规范。

网站测试是对网站系统的进行各种测试并确认测试的有效性，发现网站的系统与用户需求不符或相矛盾的地方。网站测试以找错为目的，细心找出易于出错的测试数据然后证明程序出错。通常出现的错误可能有功能错误、系统错误、过程错误和数据错误。测试的基本原则主要有：

1.程序员应避免测试自己的程序

2.确定预期输出

3.彻查测试结果

4.设计非法和非预期的输入情况

5.检查程序的合法性

6.保留测试数据和测试结果

常见的网站测试方法有黑盒测试、白盒测试和灰盒测试三种。黑盒测试指的是把网站看成不可视的黑色盒子，检查网站的实际运行结果是否与期望相同。白盒测试指的是把网站看成透明的白色盒子，检测网站中的每一部分是否都能按要求正常运作。灰盒测试是介于白盒测试与黑盒测试之间的测试。

网站发布之前需要申请域名和选择Web服务器。首先企业需要准备一个网站域名，选择域名注册网站，然后输入域名查询得出结果，点击显示可注册的域名则可提交正式申请。在企业注册完网站域名后，需要将网站发布在web服务器上运行，目前常用的建立web服务器的方式有使用虚拟服务器、租用服务器、托管服务器和自建服务器这几种方法。虚拟服务器是采用特殊的软硬件技术把一台完整的服务器主机分成的若干个主机租给不同用户。每一台被分割的主机都具有独立的域名和IP地址。虚拟服务器具有投资小、建站速度快、安全可靠等特点，适用于中小型企业或初次建立网站的企业。服务器租用是由服务器租用公司提供服务器，采取租用的方式享用服务器资源的方法。用户在安装相应的系统软件及应用软件后就可运行其自行开发的程序。租用服务器的方法适用于资金不足、缺乏技术力量、但又急于实现信息化的中小企业。服务器托管是将服务器托管到高级网络数据中心中的方法，适用于大中型企业和新兴企业。网络数据中心需要具备优秀的条件来满足服务器的正常运行，如完善的机房设施、高品质的网络环境等。自建服务器是指企业自购主机、自建机房、自搭专用通信线路使网站运行的方法，适用于具有一定的经济能力并需要安全稳定高效的网站运行环境的企业。对于没有独立服务器的中小型网站，需要使用类似CuteFTP的工具将网站文件上传到所申请的服务器空间；对于具有独立服务器的中大型网站，可以直接把网站文件复制到服务器上，然后使用IIS等同类工具来架设服务器。

4 用户体验在网站设计的实现

当网站刚刚兴起时，它只是一种超级文本，人们可以在网站中新建文档并使其与其他文档链接起来。随着网页浏览器和服务器不断引进和应用先进的技术和新的特性，网站开始拥有更多的新能力使网站传达、收集和控制信息。网站上的出现的这些功能使得商业利益在更大的商业范围得到应用，如电子商务、网上银行等。在开始运用用户体验的理念进行网站设计时，一些设计者从传统的客户端软件的角度来考虑问题的解决方案；另一些设计者则从传统出版的角度来考虑问题的解决方案。为了解决两种类型的网站给人们带来的沟通障碍，杰西·加瑞特（Jesse James Garrett）将用户体验要素分为了两部分[1]，一部分用于描述软件的功能型网站，另一部分应用于超文本信息的信息型网站，如图9。在功能型网站中，所有的设计都将着重于思考人们使用网站完成任务的过程，关注点在于任务的完成程度和操作流程，此时网站成为了用户用于完成一个或多个任务的工具。在信息型网站中则关注于用户在网站上的信息交流，此时网站是用户传播和接收信息的工具。

　　图4-1 功能型和信息型网站下的用户体验五要素

　　表现层：不论是功能型网站还是信息型网站通过视觉设计打造网站的最终外观。框架层：信息设计使用户有效理解网站中的重要信息，界面设计使用户通过网页中的界面元素与系统的功能进行交互，导航设计使得用户可以在网站信息架构中快速浏览各网页。结构层：交互设计定义网站响应用户的请求的途径，信息架构用于网站内容分布的设计。范围层：功能规格是对网站功能组合的详细描述，内容需求是对各种内容元素需求的详细描述。战略层：决定网站的战略目标，包括满足用户需求的网站目标，企业希望通过网站实现的商业目标和其他类型的目标。每个层面中的设计共同协作完成每个层面的目标，如信息设计、界面设计和导航设计共同设计了网站的框架层。除此之外，内容和技术也是影响网站用户体验的重要因素。大多数网站能提供给用户的最重要的东西就是用户认为有价值的内容，决定内容的呈现方式也是用户体验设计中要考虑的问题之一，如网上书店决定让用户看到所有书的封面，如果可以实现的话要怎么分类？如何跟踪封面的变化？怎样保持更新？如果拿不到封面的话，应该怎样处理？以上种种问题的解决，在某种程度上对用户在网上书店的最终体验非常重要。提高技术能够为用户提供更好的体验效果。在网页刚出现时，把网站和数据库连接起来的工具相当原始有限，随着技术的发展，数据库被广泛用于网站的驱动和控制，使得精细的用户体验方法变为可能，如动态的导航系统，它可以根据用户在网站中的位置移动来改变导航。总的来说，网站的建设与设计可以在战略层上从深入了解客户需求和企业目标入手，将需求和目标转化为网站内容或功能的范围层；在结构层上，根据范围层设计清晰的信息结构或业务流程；在框架层上，根据客户和业务需求，以最佳方式组织界面布局、导航和信息；最后，在表现层上进行视觉设计，从人体感官的角度将关键信息传递给客户[12]。

4.1 战略层中的网站目标和用户需求

战略层决定了网站的范围，设计者在战略层中提出的战略需要使网站目标和用户需求得到明确。网站设计只有明确了网站目标和用户需求才变得有章可循，不容易背道而行。在实际工作中，战略文档用来记录网站目标和用户需求，用户需求也可以另外单独记录在用户调研报告中。当战略文档被修改时也可以快速应用于后续的网站设计当中。

4.1.1 战略层中的网站目标

网站目标一般有两种，提高品牌影响力或者达到一定的成功标准。品牌识别是能引起人们对品牌美好印象的联想物，网站作为企业的品牌识别，使得用户在网站上的浏览体验影响着用户改变对网站的品牌认知与态度。设计者把体现品牌形象具体且明确作为战略层的目标，可以提高网站的品牌影响力。用户体验是否有效地满足了网站目标和用户需求是网站的成功标准，一般可以通过可追踪的指标来衡量，例如用户的访问次数可以作为可追踪的指标来衡量网站对用户的价值。通过采取相对应的措施可以使得网站的成功标准间接达标，例如网站为用户提供疑难解答则可以减少用户拨打网站客服专线的数量，此时电话拨打数量的减少就是该网站可衡量的成功标准。

4.1.2 战略层中的用户需求

确认用户需求可以通过用户细分和对可用性和用户的研究来实现。用户细分把具有共同的关键特征的用户分在比用户总体更小的群组中。用户细分的方法在第三章的网站市场分析有简单的说明。除此之外，还可以依据用户对技术的熟悉或适应程度来细分用户，如厌恶操作技术的用户和高级用户在使用网站时的需求完全不一样；也可以依据用户对网站的了解程度来细分用户，如一般用户和服装设计师在使用网站购买服装时的需求不一样；还可以依据用户的社会角色不同来细分用户，如家长和学生在使用学校网站时的需求不一样。用户细分后有时也需要对细分用户群进行二次调整。若两个用户群的需求相似则合并，一个用户群中的需求差异明显则细分。有时用户群之间的需求互相矛盾，可以针对单一用户群去设计网站或同时为他们提供不同的设计方案。

网站的可用性使的得用户更容易进行网站的熟悉和操作。对用户进行研究可以更好的提高网站的可用性,通过问卷调查、用户访谈、焦点小组等方式收集用户的基本信息和使用感受。用户测试、现场调查等方法有利于设计者了解用户的行为模式。

4.2 范围层中的功能规格和内容需求

当设计者开始设计网站的内容和功能，并把用户需求和网站目标具体落实到内容和功能中来，战略层的问题就变成了范围层的问题。在网站的范围层中，有价值的使用过程导致形成了有价值的网站。过程的价值在于，在网站构架的初期，它能迫使设计者去发现一些潜在的良好设计和未确定的问题。网站的价值在于，被定义好的网站可以给设计团队提供一个参考点并明确网站设计要完成的全部工作。

范围层按照网站的性质分成了两部分内容。在功能型的网站范围层中，设计者主要考虑的是网站的功能规格，设计出网页界面的功能模块；在信息型网站的范围层中，设计者主要考虑的是网站的网页内容。因为对于作为信息传播媒介的传统型网站而言，内容是网站的根本。

4.2.1 范围层中的内容需求

网站的内容是通过内容管理系统（CMS）来进行管理的，系统的大小根据网站的内容需求来决定，其功能也有所不同。大的系统能根据众多不同的数据来源动态生成页面，小的系统可以是一个轻巧的工具，能以最高效的方式来优化某种类型的专题内容的管理。

网站中的需求主要有三种：人们表述的需求、人们实际的需求和人们潜在的需求。通过研究得到用户需求，再将用户模型放置于一些自定义场景中来描述用户使用网站时的用户需求，并以此得到一些潜在需求。除此之外，设计者还可以从研究竞争对手的途径得到关于用户需求的启示。

在收集完用户需求之后便可以确定网站的内容需求，设计者还需要安排负责人负责网站内容需求的更新，更新的频率应该介于用户期望值和网站有效资源之间。在确定网站的内容之后，需要对内容进行分类和重组，并通过网站的栏目设计建立好网站内容展示的框架。由于实现网站内容需求的可行性会受到技术、时间等方面的影响，设计者还需要确定这些内容需求的优先级并以此确定必需栏目和重点栏目，建立栏目的层次结构。除此之外，通过量化的术语定义内容需求可以避免主观性和帮助设计者了解自己的设计是否满足了网站内容需求。

4.2.2 范围层中的功能规格

在功能型网站的范围层中，设计者对网站的功能需求或功能规格进行设计。在设计一个有价值的网站操作过程时，设计者需要去考虑一些潜在的功能冲突，以此来尽可能得到较完善的网站功能规格。具体来说，当设计者在进行网站的前台和后台设计时，需要针对网站的特性来进行网站的功能设计，完善网站的前台和后台功能模块。除此之外，网站中的功能需求常常伴随着内容需求，如网站中的提示语句，使用说明语句等。好的提示语句和使用说明语句能大大提高网站的形象和优化网站的用户体验。

功能规格说明书是描述功能需求或功能规格的文档，记录在网站设计或者开发过程中有可能出现的容易混淆的功能定义来对功能规格进行说明。在完善网站功能规格的初期，设计者可能有许多关于网站功能的设计想法，这些功能可能看上去有一定的可行性但对网站目标来说并不是必需的。当这些功能设计想法出现的时候，设计者可以用一个文档来记录它们并提供一个评估这些功能设计想法的架构来帮助设计者了解这些功能是如何满足网站目标和用户需求。

4.3 结构层中的交互设计与信息架构

从用户体验的角度来说，交互设计是一种让网站变得可用易用有用的技术，通过了解用户在网站交互过程中的行为模式和实时感受，建立有效的交互方式使得网站的用户体验得以优化。通过对网站进行交互设计，使得网站与用户之间有着良好的联系与互动，有效满足了用户的需求。架构（information architecture）建设网站的内容信息,使用户能够更有效的搜索和运用信息，使信息能提供更好的表达方法，其中涉及到组织管理、分类、顺序排序、技术通信等多个学科。交互设计和信息架构的共同点在于用户喜爱的交互与交流方式，对理解用户以及用户的工作和思考方式都十分关心。不同的是，交互设计关注于用户完成任务的行为模式，信息架构则关注于用户接收信息的行为模式。

4.3.1 结构层中的交互设计

交互设计描述用户使用网站过程中可能发生的操作流程，并定义网站对用户的配合方式。概念模型（conceptual model）是用户对于网站交互设计结果的观点集合。概念模型的作用在于能使设计者做出与用户期望一致的设计决定，使用户在熟悉的概念模型下快速地适应陌生的网站。交互设计通过设计有效的错误信息提示和完善的界面来帮助用户在操作错误发生后纠正操作错误，使得用户拥有更高比例的积极的网站使用体验。对于网站无法及时纠错的错误，网站需要提供其他恢复错误的方式，如重做（undo）功能。对于那些无法补救的错误，提供大量的警告是系统唯一的预防方法，但大量的警告会使得用户得到不好的网站使用体验，这点需要设计者去衡量利弊。

4.3.2 结构层中的信息架构

为了使用户快速浏览得到有用的网站内容，信息架构着重于设计网站内容的分类。信息结构与信息检索密切相关，设计出高效易用的导航结构可以提升网站的用户体验。创建信息架构的分类体系可以使结构层中的设计符合网站目标、满足用户需求和内容需求。我们可以采用两种方式来建立分类体系：

从上到下（top-down approach）的信息架构方法：先分析得出所有潜在的网站内容与功能，再依据逻辑细分出主要分类和次级分类，最后将内容和功能按顺序置入主要分类与次级分类当中。从下到上（bottom-up approach）的信息架构方法：根据对网站内容和功能需求的分析将已有的内容和功能置于次级分类中，再归属至主要分类中，逐步构建出总体结构。从上到下的信息架构方法不容易发现网站内容的一些细节问题，而从下到上的信息架构方法可能导致架构不能灵活更改网站内容，这点需要设计者去衡量利弊。网页中的信息片段或组合表示为节点（node），是信息架构的基本单位。设计者通过调整节点来调整网站的结构，常见的网站信息结构有层级结构、矩阵结构、自然结构和线性结构。在构建信息架构的过程中，使用元数据可以帮助设计者运用已知内容创造出适应用户需求的新部分，此时设计者对网站的内容信息掌握得越详细，建设时网站信息架构的灵活性就越高。不仅如此，好的元数据可以帮助用户在网站中更快速地找到信息，比基本的全文搜索引擎更能提供可靠的搜索结果。搜索引擎结合类词词典和元数据优化搜索结果，具体可以通过使用类词词典来识别禁用词和首选词，再从元数据中提取与首选词有关的信息，使搜索结果变得更加准确有效。

4.4 框架层中的界面设计、导航设计和信息设计

设计者在网站框架层需要设计网站中网页的具体结构，包括确定网页的基本框架，设计网页中导航作用的位置。在功能型的网站框架层中，设计者通过界面设计来确定网页的基本框架；在信息型的网站框架层中，设计者通过导航设计来确定网站信息的呈现方法。信息设计需要同时涉及到两种类型的网站当中用于信息沟通。

4.4.1 框架层中的界面设计

成功的界面设计能让用户一眼就看到网站中的重要内容，而不重要的内容需要减少其可视性甚至被排除出去。设计网站的网页界面就是将用户想选择的界面元素放置到页面上，使得网站信息得以迅速理解，网站操作得以易于使用。用户在网站中执行的任务通常需要涉及多个页面的使用，每个页面都包含不同的界面元素，交互设计的主要工作就是确定页面中可以存在的所有功能，界面设计则是确定功能在网页中的实现方法。

4.4.2 框架层中的导航设计

导航设计有关于设计方便用户浏览整个网站的链接。不同类型的导航在网站中的作用不一样，它们总是相辅相成，相互链接。例如，总是存在的全局导航可以很容易地让用户跳转到不同网站的次级页面；对于访问产品信息的用户，网站左侧的局部导航可以使他们轻松切换不同的产品系列；产品列表右上角的面包屑导航可以让用户清楚地了解他们的访问路径。虽然不同类型的导航作用不同，但是任何一个网站的导航设计都必须同时完成以下三个目标：

给用户真实有效的网页跳转链接。体现网页内容，根据链接的异同来设计出对用户有效的导航。体现链接与当前浏览页的关系，使用户选择出时下对用户最有用的链接。完成以上目标就可以使用户在浏览网站时清晰地知道当前的浏览位置和可以跳转浏览的其他页面位置。多重的导航系统（navigation system）可以指导用户在网站中完成各种情形中的任务。常见的导航系统有全局导航、局部导航、辅助导航、上下文导航和友好导航等。全局导航又称“主导航”，它不做任何变化地出现在网站各页面上方，是网站中通用的主导航，起着对用户使用网站的基本指引作用。对于电商网站来说，全局导航中需要提供搜索导航和购物车导航，这样可以方便用户在任意页面查找商品并下单。一般网站的全局导航必须包括站点Logo、全站基础栏目和回首页的提示及链接。局部导航是用于访问次级页面的导航，作为全局导航的次级导航使用。与全局导航和局部导航不同，辅助导航通过图标显现在网页中，点击图标可以跳转至特定网页。上下文导航是在网页中文章、段落或者标题关联网页链接的一种导航，如点击标题链接跳转至相关内容的网页。友好导航是是用户潜在需要的网页链接，一般在网页底部放置。

4.4.3 框架层中的信息设计

信息设计具有把各种设计元素聚合到一起的粘合剂作用，最关键的是，按照用户的思路来排列网站的信息可以使得信息设计起作用。当信息设计和导航设计结合时是使指示标识发挥重要功能的设计方法，此时指示标识能指引着用户快速熟悉网站的操作。除此之外，指示标识通过图标、标签和排版等界面设计元素来加强对用户的指引。对于网站的页面布局，通常用线框图来展现。线框图作为网站页面的最终视觉效果的参考，包含了框架层中对网页布局的所有决策。

4.5 表现层中的视觉设计

表现层是网站的最终外观。在网站表现层中，设计者运用视觉设计解决网站页面布局的视觉呈现问题。一般来说，人们在网页上的视线移动轨迹遵循着一定的浏览习惯和行为模式。在拥有良好视觉设计的网站上，用户视线的移动轨迹是流畅的，并且在用户忽略细节的前提下，网站还能为用户提供有效的视觉引导。运用网站的整体风格设计和版面布局的方法和原则可以帮助设计者设计出一个具有良好视觉效果和独特风格的优秀网站。

在视觉设计中，通过对比（contrast）的手法吸引用户视线，没有对比的设计容易导致用户难以快速找到关键信息，容易使用户丧失耐心。除此之外，在设计中保持一致性（uniformity）使网站科学合理地传达网站内容，用户在初次使用时也能快速浏览获取资讯，同时享受网页一致性带来的良好阅读体验并保持心情愉快。通过将视觉元素保持大小一致的尺寸还可以重新组合成一个新的视觉设计效果。通过创建网格的方式，可以使得网页界面保证一致性而不会牺牲统一性。

色彩是能够以最直接、最持久的方式，为用户提供网站形象的视觉因素，直接影响着浏览者的观赏兴趣。从色彩规律和用户体验的角度出发，网站页面中一般只能呈现一种主题色彩，它代表了网站的形象，在网页中起主导作用。在网站的色彩设计中，根据网站的性质来选择代表网站的一种颜色或一组颜色构成的主题色彩。除此之外，我们还需要使用其他颜色来增加网页的颜色水平或帮助实现一些功能。相对于主题颜色，其他颜色除了主题颜色之外，在网站上都可以归类为客体颜色。客体颜色与主题颜色相配，起到增加网站页面的色彩层次感、丰富网站页面的视觉效果色彩的作用。选择客体颜色应该基于与主体颜色的内在规律相关的原则，它们互补且互不冲突，更亮更醒目的主体色彩可以用来设计前景色，更暗的客体颜色可以用来设计背景，需要注意的是，在使用不同色度的同一颜色时，要确保色度之间的差异足够使得用户将其区分开来。主题颜色和客体颜色共同构成网页的标准颜色，根据网站目标用户的喜好对网站的整体色彩风格进行了定位，以达到促进网站与浏览用户之间的良性互动和交流的效果[13]。

创建特殊的字体样式对企业的品牌识别起到重要的作用，如苹果电脑自创的拥有23款变化字型的San Francisco字体在2014年开始推行。字体的选择同样也很重要，有些字体由于分辨率的问题，在网站上无法显示清楚，为用户的阅读带来了很大的障碍。选择能在电脑显示屏上显示清晰并易于浏览的字体是更好的选择。除此之外，不要使用风格迥异或极其相似的字体，在需要传达不同信息时可以使用有足够的对比度来吸引用户的不同的字体，但不要使用过多的风格。

5 结论

整篇文章围绕使网站用户体验方面得到优化的中心思想，先是针对用户体验的五要素进行了研究分析，并结合了一定的网站建设方法和相关理论补充网站设计的内容，最后研究用户体验五大要素与网站设计理论的关联性。面对目前互联网还存在的一些网站设计问题，在此针对这些问题运用本文的研究成果给出相对应的解决方案：

针对网站显示信息量大导致排列混杂、视觉感受差的问题，设计者需要针对框架层中的信息设计进行优化，按照用户的思路来分类和排列网站的信息元素，分清这些信息模块的主次关系，运用网站栏目设计的方法建立网站内容展示的框架，确定必需栏目和重点栏目并建立栏目的层次结构，最后运用版面布局的方法进行设计，增加适当的留白以此来改善页面布局。针对网站页面与显示屏尺寸不符，以至于需要用户按动滚动条来浏览网页，导致网站用户体验差的问题，设计者需要针对框架层中结合界面设计、导航设计和信息设计三者的页面布局做响应式网页设计。具体来说，在响应式网页设计下，网页可以改变分辨率大小来适应显示屏大小不同的设备。针对网站缺乏辨识度，给用户印象不深的问题，设计者首先需要针对战略层中的用户需求来进行用户研究，其次可以运用网站风格与布局设计的方法设计出别具一格的网站风格，以此来提高网站的辨识度，同时还要避免过渡依赖网上的一些网站模板的套用。以上仅针对一些普遍存在的现象来进行讨论，更多的网站问题得到解决还需要设计者针对不同用户需求的网站来进行个性化的网站设计，进而优化网站用户体验。除此之外，本文也有许多不足之处，仅仅是运用了用户体验要素和网站建设与设计的理论知识来进行分析，而对于更有实操意义的网站开发和运行等技术方面并没有进行研究分析。

参考文献

Jesse James Garrett（著）,范晓燕（译）. 用户体验的要素：以用户为中心的Web设计[M]. 北京：机械工业出版社, 2007.邓胜利. 国外用户体验研究进展[J]. 图书情报工作, 2008(03):43-45.[3] 赵培慧. 基于用户体验的Web设计研究[D].北京：北方工业大学, 2017.

[4] 邴立杰. 基于用户体验的网站交互设计研究[D]. 济南：齐鲁工业大学, 2017.

[5] 袁淑洁. 电商网站的用户体验设计研究[J]. 今传媒, 2017,25(09):118-119.

[6] 张婷. 网页设计中视觉信息传达的科学性与有效性研究[D]. 陕西：西北大学, 2019.

[7] 冯志兵. 基于用户体验的网页界面交互设计研究[D]. 湖南：湖南工业大学, 2018.

[8] 史金玉. 网站界面设计用户体验优化[A].中共沈阳市委、沈阳市人民XX、国际生产工程院、中国机械工程学会.第十六届沈阳科学学术年会论文集（经管社科）[C]. 中共沈阳市委、沈阳市人民XX、国际生产工程院、中国机械工程学会:沈阳市科学技术协会, 2019:552-555.

[9] 刘娜娜. 基于用户体验的响应式网站的设计与实现[J]. 电子技术与软件工程, 2018(08):18.

[10] 庞立钰,庞力源. 基于互联网用户体验的B2C网站界面交互设计研究[J]. 数字通信世界, 2018(12):146.

[11] 李建忠. 电子商务网站建设与管理[M]. 北京：清华大学出版社,2012.

[12]Fei Wang. Research on Color Design Content of Digital Website Based on User Experience[C]. Information Technology & Industrial Engineering Research Center.Results of 2016 International Conference on Architectural Design and Art Design (Architectural Design and Art Design).Information Technology & Industrial Engineering Research Center:武汉博宏会展服务有限公司, 2016:95-104.

[13]Ping Song. Study on B2B Cross-border E-commerce Website Design based on User Experience Element[C]. Institute of Management Science and Industrial Engineering.Proceedings of 2019 9th International Conference on Management and Computer Science(ICMCS 2019).Institute of Management Science and Industrial Engineering:计算机科学与电子技术国际学会(Computer Science and Electronic Technology International Society), 2019:117-123.

基于用户体验的网站设计

价格 ¥9.90 发布时间 2023年2月3日

下载查看全文内容

已付费？登录 或 刷新