（教育技术学专业论文）基于用户体验的标准化网站设计与开发流程研究.pdf

摘要 随着互联网技术的日趋成熟和各种网络产品在社会生活中的普及与应用，在 满足人们功能需求的同时用户对互联网产品提出了更高的精神需求，即在产品的 使用过程中能够让用户轻松自如、高效的完成任务、增加亲切感、舒适感和成就 感，提升用户的满意度，以使用户获得最佳的体验。 网站是人们使用最频繁的互联网产品类型之一。体验经济的到来使得用户体 验己成为商业成功的关键因素，因此在网站的设计与开发过程中能否将用户体验 和w r e b 标准设计两个关键因素考虑进来将会对一个网站的成败产生重要影响。 鉴于此，本文在通过深入了解国内外用户体验及w e b 标准设计相关研究的基 础之上，结合自己所参与的上海公共研发平台用户中心网站的设计与开发项目， 重点研究以下几个方面： 第一，用户体验的各要素及w e b 标准在网站设计开发过程中的应用。 第二，提出基于用户体验的标准化网站设计与开发流程。 第三，上海公共研发平台用户中心网站的设计与开发过程分析。 第四，总结基于用户体验的标准化网站在设计开发过程中应注意的问题。 关键词：用户体验，w e b 标准，开发流程，以用户为中心的设计 论文类型：应用研究 a b s t r a c t a si n t e m e tt e c h n o l o g ym a t u r e s ，t h ep o p u l a r i z a t i o na n du s eo fav a r i e t yo f n e t w o r k i n gp r o d u c t si ns o c i a ll i f e ，ah i g h e rs p r i t u a ln e e d sw a sp r o p o s e dw h i l e i n t e r n e tp r o d u c t sm e e t i n gt h en e e d so fu s e r sf u n c t i o n a lr e q u i r e m e n t s ，t h a tm e a n st h e p r o c e s so f u s et h ep r o d u c tc a l lp r o v i d et h eu s e r se a s ea n de f f i c i e n tc o m p l e t i o no f t a s k s ， a n di n c r e a s ei n t i m a c y , c o m f o r ta n das e n s eo fa c c o m p l i s h m e n t ，e n h a n c ec u s t o m e r s s a t i s f a c t i o n , s ot h a tu s e r sc a ng e tt h eb e s te x p e r i e n c e w e b s i t ei so n e t y p eo fi n t e r n e tp r o d u c t st h a tp e o p l eu s e dm o s tf r e q u e n t l y t h e a r r i v a lo ft h ee x p e r i e n c ee c o n o m ym a k e st h eu s e re x p e r i e n c eb e c a m eak e yf a c t o ro f b u s i n e s ss u c c e s s ，w h e t h e rt a k i n gu s e re x p e r i e n c ea n dw e bs t a n d a r dd e s i g nt h et w ok e y f a c t o r si n t oa c c o u n ti nw e b s f f ed e s i g na n dd e v e l o p m e n tp r o c e s sw i l lh a v eam a j o r i m p a c to nt h es u c c e s s o rf a i l u r eo faw e b s i t e i nv i e wo ft h i s ，o nt h eb a s i so fi n - d e p t hu n d e r s t a n d i n ga b o u tu s e re x p e r i e n c ea n d w e bs t a n d a r d sd e s i g nr e l a t e dr e s e a r c ha th o m ea n da b r o a d ，c o m b i n e dw i t hm y p a r t i c i p a t i o ni np u b l i cr dp l a t f o r mu s e rc e n t e rw e bs i t ed e s i g na n dd e v e l o p m e n t p r o j e c t s ，m yp a p e rf o c u so nt h ef o n o w i n ga s p e c t s ： f i r s t ，e l e m e n t so ft h eu $ e re x p e r i e n c ea n du t i l i z eo fw e bs t a n d a r d si nw e b s i t e d e s i g na n dd e v e l o p m e n tp r o c e s s s e c o n d ，p r o p o s e dt h ep r o c e s so f s t a n d a r d i z e dw e bd e s i g na n dd e v e l o p m e n tb a s e d o nt h eu s e re x p e r i e n c e t h i r d ，t h ep u b f i cr&dp l a t f o r mo fs h a n g h a iu s e rc e n t e rw e b s i t ed e s i g na n d d e v e l o p m e n tp r o c e s sa n a l y s i s f o u a ks u m m a r yo f p r o b l e m ss h o u l dp a ya t t e n t i o ni nt h ep r o c e s so fs t a n d a r d i z e d w e bd e s i g na n dd e v e l o p m e n tb a s e do nu s e re x p e r i e n c e k e yw o r d s ：u s e re x p e r i e n c e ，w e bs t a n d a r d s ，d e v e l o p m e n tp r o c e s s ，u s e rc e n t e r e d d e s i g n t y p e ：a p p l i c a t i o nr e s e a r c h 图表索引 图1 - 2 论文整体框架结构6 图2 - 1 用户体验要素层次模型9 图2 - 2 导航栏的表格布局代码1 7 图2 - 3 导航栏显示效果1 7 图2 - 4 采用标准布局的页面显示效果2 0 图2 - 5j q u e r y 选择器分类2 4 图2 - 6 用户体验研究方法的三个维度2 6 图2 - 7a x u p , e 操作界面3 l 图3 1 用户中心用户基本情况调查数据分析图表3 3 图4 - 1 网站架构层次图4 1 图4 - 2 网站低级原型1 4 2 图4 - 3 网站低级原型2 4 3 图4 - 4 用户中心首页4 4 图4 - 5 单位管理功能页4 5 图4 - 6 迭代设计的循环过程4 7 图4 - 7 标签导航4 8 图4 - 8 用户满意度调查数据分析图表5 0 表2 - 1j q u e w 与j v a s c r i p t 代码比较2 2 表3 - 1 初级原型和高级原型优缺点比较3 5 表4 - 1 用户分类及需求分析3 8 表4 - 2 单位信息管理模块功能介绍3 9 表4 - 3 仪器管理模块功能介绍3 9 表4 - 4 行业检测模块功能介绍4 0 表4 - 5c s s 通用文件中的一些样式4 6 v 上海师范大学硕士学位论文 第一章绪论 1 1 研究背景 第一章绪论 弟一旱硒化 1 1 1 用户对产品体验的的新需求 当前，互联网产业发展迅速，基于w e b 的互联网信息量每年成倍增加，特别 是伴随着w e b 2 0 时代的到来，每一个网络用户都从互联网信息的消费者转变成信 息的生产者，在很大程度上推动着我国互联网事业的发展与日趋走向成熟。为了 满足用户在使用网络产品时无时间空间限制的要求，如今大量的基于c s 架构的 软件产品也开始不断创新，突破原有发展模式，将其大部分功能搬上网页，成为 名副其实的在线产品。用户只需要一台联网并装有浏览器的计算机就能访问在线 应用程序使用以前需要安装软件才能使用的大量功能，我们甚至不用再把文件存 储在自己电脑的硬盘里，而直接存放在云端，随时要用，随时可取，比存放在自 己电脑硬盘里面更安全可靠，这都是互联网的发展给我们带来的便利。 我们的产品在不断的改进，每一个用户都在为我们产品的改进贡献自己的力 量。如今，用户在使用互联网产品过程中不仅仅满足于网站所提供的功能，而且 对产品使用过程中的体验越来越重视，包括产品的易用性、可用性、稳定性、效 率等方面提出了更高的要求，正是用户所提出的这些更高要求，推动了用户体验 行业的发展，引起了互联网运营商的关注和重视，成为互联网行业的热点问题。 1 1 2 用户体验的的发展现状 当前，w e b 开发人员对如何提升产品的用户体验越来越重视，其目标就是在 用户使用w e b 产品过程中获得良好的体验，尽可能的避免给用户在使用上带来困 难。 最近几年，是互联网发展最为迅速的几年。在这期间，可用性工程和用户体 验专业在国内开始受到了普遍的关注，像百度、谷歌、腾讯这些大型互联网公司 都已经组建了自己专门的用户体验团队。g o o g l e 是全世界使用人数最多的搜索引 擎，它提出从g 0 0 9 l e 到g 0 0 西e y 的十大用户体验准则：谷歌的用户体验团队创建 有用的、快速的、简单的、有吸引力的、创新的、适合大众的、有益的、漂亮的、 第一章绪论 上海师范大学硕士学位论文 值得信赖的、个性化的应用1 ，也正是基于此，g o o g l e 在用户体验上所下的大量 功夫得到了客户的回报，在与众多搜索引擎的激烈竞争中一跃成为搜索引擎行业 霸主。 用户体验这个词最早是在上世纪9 0 年代由用户体验设计师唐纳德诺曼提出 来的。唐纳德诺曼为美国著名认知心理学家、计算机工程师、工业设计家，认 知科学学会的发起人之一，关注人类社会学、行为学的研究，在其所著设计心 理学中，诺曼通过一个个贴近生活的生动例子将他的设计思想淋漓尽致的表现 出来，并把深奥的心理学知识和设计学理论融入其中，从而给设计人员带来很大 的启发。 国外对于用户体验的研究主要体现在理论和实践两个方面，其中用户体验定 义、研究内容、特征、模型及评价等属于理论层面的研究，在实践方面主要表现 为将上述理论成果成功运用于网站建设、电子商务开展、和软件设计开发等方面， 取得了惊人的效果并得到很多人的认同，为用户体验研究的深入发展打下坚实的 基础。 1 1 3 国内用户体验的研究现状和发展 用户体验的研究在国内的起步较晚，前期在国内也没有受到足够的重视。为 了更清楚的了解目前国内用户体验相关主题的研究热度和研究热点，我通过在学 术期刊数据中使用不同的关键词查找与用户体验研究相关的文章，得到下面的数 据：在中国知网学术文献总库中，按题名并以“用户体验”为关键字进行模糊检 索，共检索到相关文献9 9 2 篇；按题名并以“w e b ”和“用户体验”两个关键词 进行模糊检索，共检索到相关文献3 3 篇；按题名并以“w e b 用户体验”和“w e b 标准”两个关键词进行检索，共检索到1 5 篇文献。通过对文献库中相关部分论文 内容的研究，可以看到绝大部分文献所研究的用户体验都与工业产品的设计相 关，比如手机、电脑等电子设备的用户体验，而与w e b 相关的用户体验研究相对 较少，这与互联网技术在我国的兴起较晚有较大关系，而对于将用户体验和w e b 标准结合起来进行的研究更是少之又少，而且基本都是以介绍概念和相关理论性 知识为主，没有涉及到实际的项目案例。 1 g o o g l e 用户体验十大准则 d b o l h t t p ：| f 礞裥。g o o g l e c o m a b o u t c o r p o r a t e c o m p a n y u x h t m l 。2 0 1 1 1 0 2 上海师范大学硕士学位论文 第一章绪论 但是近几年用户体验在国内的研究和发展如火如荼的势头还是非常引人关 注的，并且各大型网站和w e b h 艮务提供商也都对网站的用户体验越来越重视。随 着生活水平的不断提高用户对产品的要求也在不断提高，提供个性化的产品和服 务成为迎合市场需求的一个重要砝码。用户对用户体验提升的要求推动了各行各 业对用户体验的关注和投入，尤其是交互活动中的体验，同时用户个性化意识增 强，在为用户提供服务的同时，能不能让用户充分发挥自己的主人翁地位参与到 网站信息的建构和信息表达上来也成为一个关键要素。 目前在中国也成立了多个专门研究用户体验的组织和社团，其中比较有名的 有u p a ( u s a b i l i t y p r o f e s s i o n a l s a s s o c i a t i o nc h i n a ) 中国，它成立于2 0 0 4 年4 月18 日， u p a 中国是国内第一个非赢利性的可用性组织，其目的就是为国内刚刚起步的用 户体验行业提供一个成熟的交流平台，通过自身作为媒介，将国外比较成熟的用 户体验思想和实践引入到国内，进而推动整个中国用户体验行业的良性发展。 国内用户体验逐渐受到重视还表现在以下几个方面： ( 1 ) 各大网络公司迫切成立用户体验部门 使同样或类似的一个产品( 服务) 在用户心里建立起来品牌知名度，对企业 来说是最重要的事情，用户体验部门在各大电子商务、门户网站企业急需建立。 目前像百度、新浪、搜狐等大型互联网企业都已经成立了自己的用户体验中心， 规模较小的互联网公司也开始对用户体验逐步重视起来，正不断加强自身用户体 验的团队建设。 ( 2 ) 网站优质的用户体验成为提高回访率的利剑 网站需要大批长期回访用户，提高网站回访率是网站生存的重要指标，让 用户信任、长期来访才能使网站生存。过去的买流量等作弊$ e o 手段已经被逐渐 替换，使网站不得不尽快提高自己用户体验水平。 ( 3 ) 行业内竞争激烈促使提高网站用户体验需求 企业对网站排名、点击率有了新的认识，排名高、点击率高不一定代表最 终客户的提高。回访率、用户在线时间长度等被重视。人们越来越认识到好的用 户体验胜过竞价排名，可以给企业带来资金上的节约。同行业网站数量剧增，在 这种情况下如何抢占市场，拥有更多的用户，成为企业最主要的工作任务。网站 用户体验开始升级。 ( 4 ) 用户体验人才需求量急剧增加 第一章绪论上海师范大学硕士学位论文 自2 0 0 8 年用户体验方面的工作在互联网开始逐渐升温，用户体验部、资深交 互设计师、u e ( 用户体验工程师) 这些不同职位名称在各大知名人才招聘网站 开始出现，一时间用户体验招聘人数逐月增加。下图为智联招聘与用户体验相关 职位数： 用户体验 甩户体验磷究 用户髂验设计师 用户体验工程师 用户体验研究工程师 用户体验分析师 麴2 3 4 9 个职发 缎6 补鼍； 缆 约镅晗职斑 麴l 盼职经 绦l 盼职寝 褥l 盼载波 1 2 研究内容及意义 图1 - 1 用户体验相关职位数量 1 2 1 研究内容 本文在通过深入了解国内外用户体验及w e b 标准设计相关研究的基础之上， 结合自己所参与的上海公共研发平台用户中心网站的设计与开发项目，本文的研 究重点包括以下几个方面： 第一，用户体验的各要素及w e b 标准在网站设计开发过程中的应用。 本文借助j e s s ej a m e sg a r r e t t 的用户体验要素模型，分析用户体验各要素 在网站设计与开发过程中对用户体验的影响和作用范围。w e b 标准是目前互 联网行业公认的标准，但是在对标准的理解上，多有不同，甚至有许多人 对标准的理解是错误的，如何正确的理解w e b 标准以及如何在网站的设计与 开发过程中正确的使用标准也是本文的研究内容之一。 第二，提出基于用户体验的标准化网站设计与开发流程。 通过实际的项目案例，分析总结设计开发过程，提出基于用户体验的标准化 网站设计与开发流程，以期对后来从事基于用户体验标准化网站设计与开发的工 作人员提供具有一定价值的参考。 第三，上海公共研发平台用户中心网站的设计与开发过程分析。 借助分析笔者所参与的上海公共研发平台用户中心网站的设计与开发过程， 4 上海师范大学硕士学位论文第一章绪论 系统展示基于用户体验的标准化网站建设流程各阶段及其各阶段主要完成的任 务，让读者对真实的项目开发流程有一个更清晰的认识。 第四，总结基于用户体验的标准化网站在设计开发过程中应注意的问题。 结合网站设计与开发项目中经常会出现的一些问题及自己的经验心得，总结 出基于用户体验的标准化网站在设计与开发过程中所应注意的普遍问题，以供读 者借鉴，从而尽量避免相关类似问题的出现。 1 2 2 研究的意义 通过对本文研究内容的分析，本论文具有以下意义： ( 1 ) 在深入理解j e s s ej a m e sg a r r e t t 的用户体验要素模型中各要素基础上， 明确模型各个层次在用户体验研究中的作用及其影响范围，使得在着手提 升用户体验的工作时能够有的放矢。纠正人们对w e b 标准理解的误区，帮助 开发者正确认识w e b 标准并在设计与开发过程中正确使用标准。 ( 2 ) 提出基于用户体验的标准化网站设计与开发流程，可以对后来从事基 于用户体验标准化网站设计与开发的工作人员提供具有一定价值的参考。 ( 3 ) 借助分析笔者所参与的上海公共研发平台用户中心网站的设计与开发 过程，系统展示基于用户体验的标准化网站建设流程各阶段及其每个阶段主要完 成的任务，使将要从事相关行业的读者对真实的项目开发流程有一个更清晰的认 识。 ( 4 ) 结合网站设计与开发项目中经常会出现的一些问题及自己的经验心得， 总结出基于用户体验的标准化网站在设计与开发过程中所应注意的普遍问题，以 供读者借鉴，从而尽量避免相关类似问题的出现。 1 3 论文框架及研究思路 本论文一共分为五章，论文框架结构如下图所示： 第一章绪论上海师范大学硕士学位论文 黼 戮戮黼+ 豳朦豳+ 戮翰缀嬲麟麟黝搦戮滋麟燃翩瓣缓缓黧+ 图1 - 1 论文整体框架结构 第1 章为绪论部分。主要介绍论文的研究背景、研究内容及意义以及论文的 整体框架和研究思路，同时还包括在论文研究中所使用的研究方法。 第2 章为研究基础部分。主要包括在基于用户体验的标准化网站设计与开发 过程中，涉及到的与用户体验和w e b 标准相关的理论知识，除此还包括网站开 发尤其是基于w e b 标准的网站开发所使用的主要技术以及用户体验研究相关的 研究方法。 第3 章为基于用户体验的标准化网站的开发流程。在本章概括并提出了基于 用户体验的标准化网站的开发流程，并总结了在每一阶段所要完成的任务。 第4 章为上海公共研发平台用户中心网站的设计与开发过程分析。在这一 章，将对上海公共研发平台用户中心网站的整个设计与开发流程进行系统分析， 分析设计与开发流程中各个环节在实际项目案例中的具体操作，使读者对真实项 目设计与开发流程有更深刻的认识。 第5 章为总结部分。笔者总结了本论文研究的重点内容和主要贡献，并分析 了当前研究所存在的一些不足，并对未来用户体验和w e b 标准的研究与发展趋 势进行了展望。 1 4 研究方法 本论所采用的主要研究方法有文献研究法、用户访谈法、问卷调查法等。 ( 1 ) 文献研究法。查阅当前与用户体验、标准化网站设计与制作相关的研 究文献，了解当前用户体验在标准化网站建设中的研究现状。通过文献的阅读和 研究能够更好的确定本文将要研究的方向和主题。 上海师范大学硕士学位论文 第一章绪论 ( 2 ) 访谈法。通过电话访谈和或面谈的方式，了解当前用户对产品的需求 或提出修改意见。在整个项目的设计与开发过程中，主要是使用电话对用户进行 的访谈。 ( 3 ) 问卷调查法。在上海公共研发平台用户中心建设的初始阶段，通过调 查问卷对用户进行调研，了解用户的需求，帮助设计开发人员更好的完成前期的 设计开发工作。 7 第二章论文研究基础 上海师范大学硕士学位论文 第二章论文研究基础 2 1 用户体验的要素研究 以用户为中心的设计( u s e rc e n t e r e dd e s i g n ) 必须把用户体验作为设计 决策的中心，强调用户优先的设计模式，即在产品的设计、开发、维护都 必须以用户的需求和用户的感受为出发点，以用户的利益为基础，围绕用 户为中心进行产品的设计、开发、维护，而不是让用户去适应产品1 。 用户体验的整个开发流程必须要以用户的需求为中心，目的就是在使 用产品的过程中能够为用户创造良好的主观感受，确保用户在使用产品的 过程中每一种体验，每一个步骤都在我们的意料之内，换句话说我们要考 虑到用户可能采取的每种行为及其可能性，对于每一种可能性我们都应该 尽可能做到满足用户的期望，不让用户失望。 目前对用户体验要素的研究最系统和权威的是j e s s ej a m e sg a r r e t t 的用 户体验模型，该模型将用户体验的要素分为5 个自下而上的相互联系的层面。 在j e s s ej a m e sg a r r e t t 的用户体验要素模型中，他又更细化的将网站按照其性 质分为功能型产品和信息型产品，解决了网页所具有的基本的双重性质。 如下图所示为j e s s ej a m e sg a r r e t t 用户体验要素模型中的自上而下建设 的五个层面：战略层、范围层、结构层、框架层和表现层2 ，基于该架构将 网站建设过程中用户体验的要素从抽象到具体、从宏观到微观清晰的解剖 出来，透过这些要素方便我们更好的讨论用户体验的问题以及解决与用户 体验相关问题所需要的工具和方法。 1 以用户为中心的设计【d b o l 】h t t p ：b a i k e b a i d u c o r n v i e w 9 1 6 8 1 4 h t m ，2 0 1 1 1 2 2 j e s s ej a m e sg a r r e t t 用户体验的要素一一以用户为中心的产品谢- i - m 北京：机械工业出版 社，2 0 11 2 1 - 2 2 上海师范大学硕士学位论文 第二章论文研究基础 功能酽昂| 信息型产品 具体 图2 - 1 用户体验要素层次模型 起初网页只是一种新的出版媒介，用来向用户呈现信息，但是随着w e b 相关技术的发展，越来越多的元素和功能被搬到了w e b 上，网页开始拥有了 更多的新能力，现在的w e b 应用程序像我们的桌面应用程序一样可以帮我们 完成很多复杂的功能，比如文档处理、图像处理、视频处理，这些功能的 加入促使网站在功能上具有了功能性和信息型产品的双重性质。在上面的用 户体验要素层次模型中，为了解决网页的这种基本的双重性，j e s s ej a m e s g a r r e t t 将用户体验要素的五个层面从中间分开，在左边，这些要素用来描述 功能型的平台类产品，对于功能型平台类的产品从传统的桌面和客户端软 件的角度来考虑解决方案；右侧的要素用来描述信息型的媒介类产品，对 于信息型的媒介类产品，从传统出版、媒体和信息技术的角度来考虑解决 方案。本章我们将从战略层、范围层、结构层、框架层和表现层这五个层 面研究用户体验所包括的内容以及用户体验要素各个层面的作用范围和内 容。 2 1 1 战略层 从用户体验的要素模型可以看出战略层主要是用来描述用户需求与产 品的目标。一个网站的的成败很多时候并不是由技术、好看的界面决定的， 当然好的技术、漂亮的界面可以在一定的程度上给用户带来更大的吸引力， 9 第二章论文研究基础上海师范大学硕士学位论文 但是更重要的是我们在建设网站之前能不能回答两个最基本的问题： 1 ) 我们自己通过网站能得到什么? 2 ) 我们的用户能够通过网站的到什么? 回答第一个问题可以让我们更好的明确产品的目标，回答第二个问题可 以让我们更好的了解用户需求。产品的目标和用户的需求构成了用户体验设 计最基础也是最抽象的层面一一战略层，战略层是用户体验设计过程做出 每一个决定的基础。 战略层所关注的重点不论是在功能型产品还是信息型产品中都是一样 的，即通过回答上面的问题而得到的两个方面：产品目标和用户需求。用 户需求是来自网站外部的目标，尤其是将要使用我们网站的潜在客户，我 们必须要站在客户的角度和立场来考虑他们来网站的目的是什么。 2 1 2 范围层 当我们所回答的问题从产品目标和用户需求转向了我们的网站应该为 用户提供什么样的内容和功能时我们就从战略层面转向了范围层。范围层 被分割成功能型产品和信息型产品，在功能型产品一侧我们用功能规格来 描述产品的特征，在信息型产品一侧我们使用内容需求来定义。在功能型 产品一侧，范围层所确定的是全部的功能需求或功能规格。功能需求和功 能规格两个词汇一般用在产品开发的不同阶段，在产品开发初期一般用功 能需求来描述所开发的产品用来做什么，在产品开发末期，一般用功能规 格来描述系统到底完成了哪些功能。 2 1 3 结构层 在战略层我们明确了产品的目标和用户的需求，并将抽象的产品目标 和用户需求在范围层具体的转化成网站所应完成的功能和所应向用户提供 的内容，然而这些分散的内容和功能具体应该以怎样的方式组织在一起， 为网站创建一个概念模型，这将是结构层应该完成的事情。概念模型是指 人们对于产品的工作原理以及如何使用所产生的想法，面对变化无常毫无 规律的产品用户很难找到正确使用某种产品的方法，但是如果产品在设计 的过程中能够提供一个很好的概念模式，那么用户在见到产品的第一时刻 1 0 上海师范大学硕士学位论文第二章论文研究基础 就会在已有知识的基础上对如何使用该产品形成自己的想法，因此概念模 型的设计是产品设计中的一个重要环节。 结构层是用户体验的要素模型五个层面中的第三层，在这一层它将我 们的关注点从抽象的决策与范围问题转向更具体的能影响用户体验的要素。 功能型产品产品一侧我们使用交互设计来描述结构层所应完成的工作，在 信息型产品一侧我们使用信息架构来描述。 在传统的软件开发行业，设计“为用户设计结构化体验”的方法被称 为交互设计；在内容建设方面，主要是通过信息架构来构建用户体验1 。交 互设计在用户体验设计过程中主要针对的是交互元素安排与呈现，关注与 描述用户在使用产品的过程中可能产生的行为以及与用户行为所产生的对 应的配合与响应。信息架构是为了更好的保证信息的传达和理解，从而按 照某种科学的方式对所要传达的信息进行组织和分类等操作，这是一个涉 及多学科的领域，包括信息的组织管理、顺序排列分类与内容呈现有关的： 图书管理、新闻学，和技术通信等其它学科2 。确定各个将要呈献给用户的 元素的“模式 和“顺序”是交互设计和信息架构都强调的一个重点，但 是交互设计主要关注于将影响用户执行和完成任务的一些元素，信息架构 关注信息的更有效表达与理解。 2 1 4 框架层 我们在结构层界定了产品将以怎样的方式来运作，框架层则用于处理 更精确的细节问题，用来确定用什么样的功能和形式来时实现。通过结构 层的设计，我们已经有了一个大体的架构和整体的交互设计，在框架层我 们将会把网页中各种元素独立出来，具体来确定网站页面的布局以及各个 元素控件的排列和位置关系。对于功能型产品我们通过界面设计来确定框 架，对于信息型产品我们会把更多的经历投入到导航的设计，通过导航的 设计，将网站所要传达给用户的信息按照特定的分类呈现给用户，信息设 计是功能型产品和信息型产品都要做的，它用于呈现有效的信息沟通。 1 j e s s ej a m e sg a r r e t t 用户体验的要素一一以用户为中心的产品设计【m 】北京：机械工业出版 社2 0 11 8 0 8 1 2 同上 第二章论文研究基础 上海师范大学硕士学位论文 2 1 5 表现层 表现层是网站建设最直观的层面，是用户打开网站在第一时间注意到 的地方，在表现层将完成其他四个层面所制定的目标，将内容、功能、艺 术视觉效果融为一体为用户提供最直观的视觉感受。 在框架层我们主要解决的是如何组织和放置页面元素，界面设计主要 考虑交互性元素的布局，导航设计主要考虑网站信息内容的分类和管理用来 更好的引导用户到达他们所想到达的地方去获取他们想要的内容，更好的 实现用户的目标。表现层将会按照其它层面设定的目标，严格按照事先确 定的页面布局方式，在合理安排页面各要素的前提下完成整个网站元素在 视觉上的呈现。表现层面是用户接触最多，最直观的层面，因为用户的所 有操作都是在可视化的网站界面上完成的，因此表现层能不能给用户带来 较好的感受，在很大程度上起了决定性的作用。尽管之前所设计到的四个 层面在用户体验设计的过程中是不可忽略的，但是相对于其他层面来说表 现层是最为具体的，也是能够凭借用户的自我感知能力来理解的，在这个 层面除了将先前四个层面所描述的目标和内容纳入考虑范围之内，还需要 完成所有元素的艺术性呈现。 2 2 相关技术和标准 互联网在不断的发展过程中为了能够更好的满足用户的个性化体验和 需求，一直在努力探索新的技术和方法，并且制定了一系列的标准，从而 为用户提供更优质和一致性的服务。从最初网站仅用静态页面呈现一些固 定的内容信息，到今天w e b 2 0 时代人人都成为信息的拥有者和发布者，这不 能不说是一次巨大的飞跃，也就是这样的环境下每一个人都成为互联网的 参与者和贡献者，使我们的互联网一直充满着活力飞速的向前发展。互联 网如今已经渗透到我们生活的方方面面，网上购物、买票、网上支付等等， 甚至我们的平常使用的很多应用软件所具有的功能都已经搬到了网上，没 有新技术的运用和支持不可能取得现有的成就。 上海师范大学硕士学位论文 第二章论文研究基础 2 2 1w e b 标准的概念 w e b 标准是由国际著名的标准化组织w 3 c ( w o r l dw i d ew e b c o n s o r t i u m ) $ 9 定的一系列标准的集合。w 3 c 且i 万维网组织， 它是在万维网 发明者蒂姆伯纳斯李( t i m eb e r n e r s l e e ) 领导下于1 9 9 4 年成立的。w 3 c 为 解决w e b 应用中不同平台、技术和开发者带来的不兼容问题，保障w e b 信息 的顺利和完整流通，万维网联盟制定了一系列标准并督促w e b 应用开发者和 内容提供者遵循这些标准。标准的内容包括使用语言的规范，开发中使用 的导则和解释引擎的行为等等。w 3 c 也制定了包括x m l 和c s s 等的众多影 响深远的标准规范1 。在互联网发展初期，w e b 领域中不同厂商的的浏览器对 网站的解析不同造成网站页面严重的不兼容现象，以当时最著名的两个浏 览器厂商微软和网景为例，为某一个浏览器编写的h t m l 代码在使用另一种 浏览器浏览时很难正常显示，因此网站开发者不得不针对不同的浏览器将 同一个网站开发多个版本以期能使用适合的浏览器查看适合的版本来达到 网页内容显示的一致性，这种做法将使网站的制作、管理和维护费用大幅 度提升。为了解决上述问题w 3 c 在二十世纪9 0 年代中期开始发布标准化 的h t m l ( h y p e r t e x tm a r k u pl a n g u a g e ) ，与此同时制定了一些相关的标准，推 荐w e b 开发者遵守和使用以期解决不同浏览器厂商浏览器之间不兼容的问 题。 w e b 标准不是某个单一的标准，而是一系列标准的集合。w e b 标准可以 分为三个方面：结构化标准语言( 主要包括x h t m l 和x m l ) 、表现标准语 言( 主要包括c s s ) 和行为标准( 主要包括文档对象模型、e c m a s c r i p t ) 2 。 自从互联网诞生以来，w e b 的每一步发展都离不开w 3 c ( w o r l dw i d ew e b c o n s o r t i u m 万维网联盟) 的努力。 1 、结构化标准语言 结构化标准语言包含x m l 和x h t m l 两个部分。其具体区别如下： x m l 是t h ee x t e n s i b l em a r k u pl a n g u e 的简写，是一种可扩展性标识语 言。x m l 的前身是s g m l ( t h es t a n d a r dg e n e r a l i z e dm a r k u pl a n g u a g e ) ，但是 1 万维网联盟【d b o l 】h t t p ：b a i k e b a i d u c o n f f v i e w 7 9 1 3 h t m , 2 0 1i - 1 2 2 崔琦基w e b 标准的网页设计【j 】农业网络信, 2 0 0 9 ，( 2 ) ：6 4 - 6 6 第二章论文研究基础 上海师范大学硕士学位论文 s g m l 是一种非常严谨的文件描述法，导致过于庞大复杂，难以理解和学习，进 而影响其推广与应用，为了解决以上问题，专家们使用s g m l 精简制作，并依照 h t m l 的发展经验，产生出一套使用上规则严谨，但是简单的描述数据语言： x m l ，而在1 9 9 8 - 月发布为w 3 c 的标准( x m l l 0 ) 。x m l 设计的目的是对h t m l 的补充，它具有强大的扩展性，可以用于网络数据的转换和描述。同时x m l 具有简洁有效、易学易用、具有开放的国际化标准、高效可扩充等特点，从而有 效解决了h t m l 所存在的一些不足：不能解决所有解释数据的问题、性能问题 需要下载整份文件，才能开始对文件做搜索、扩充性、弹性、易读性均不佳1 。x m l 除了具有自身所带的一些标记外，使用者还可以根据自己的需要来定义相关标 记，下面为用x m l 来描述的电子邮件信息： 郭文波 黎明 新年问候 一 2 0 1 2 ，万事如意 x h t m l 是t h ee x t e n s i b l eh y p e r t e x tm a r k u pl a n g u a g e 的缩写。x i - t t m l 是基 于x m l 的标识语言，是在h t m l4 0 1 的基础上，用x m l 的规则对其进行扩展建 立起来的，它是h t m l 向x m l 的过渡，在语法上x h t m l 比h t m l 更加严格。 h t m l 相对比较松散的语法对网页编写者来说，比较方便，但对于机器来说，语 言的语法越松散，处理起来就越困难2 。 至现时为止，x h t m l 共有以下几个版本： x h t m l1 0s t r i a ( 严格版) 是参照“h t m l 4 0 1s t r i c t ”改编，但不包括 被弃用的元素，使用该类型需要干净的标记，避免表现上的混乱，一般 都与层叠样式表配合使用 x h t m l1 0t r a n s i t i o n a l ( 过渡版) 是参照“h t 池4 0 1t r a n s i t i o n a l ”改 编，包括己于s t r i c t 版本被弃用的呈现性元素( 例如 ， 等) ， 1 x m l d b o l h t t p ：z h w i k i p e d i a o r g w i k i x m l ，2 0 11 - 12 2 x h t m l d b o l h t t p ：z h w i k i p e d i 乱o r g w i k i x h t m l ，2 0 1 2 - 1 1 4 上海师范大学硕士学位论文第二章论文研究基础 当需要利用h t m l 在表现上的特性时，并且当需要为那些不支持层叠样 式表的浏览器编写x h t m l 时使用此类型。 x h t m l1 0f r a m e s e t ( 框架版) 是参照“h t m l 4 0 1f r a m e s e t 改编， 并允许于网页中定义框架元素，在使用h t m l 框架将浏览器窗口分割为 多个框架是使用这种类型。 这三个版本中最普遍使用的是x h t m lt r a n s i t i o n a l ，一个最基本的x h t m l 页面结构的代码如下： 在上面的基本结构代码中，首先是对文档类型的声明，网页的所有内容都放 在封闭的h t m l 标签内，在成对的h e a d 标签内放置放置网页的标题t i t l e 元素和与页 面相关的描述信息。这里需要注意的是需要在网页中显示的内容必须都要放在 b o d y 标签之内。 2 、表现标准语言 。 表现标准语言主要是指c s s ，它是c a s c a d i n gs t y l es h e e t s 的缩写，它是由w 3 c 组织制定的用于控制网页样式的一种标记性语言。c s s 主要用来控制网页的页面 表现，有利于实现x h t m l 控制的结构和c s s 控制的表现相分离，改变了多年了 设计开发人员一直使用表格元素来实现页面布局的局面。 3 、行为标准 行为标准也分为两个部分：d o m 和e c m a s c r i p t ，两者区别如下： d o m 是d o c u m e n to b j e c tm o d e l ( 文档对象模型) 的缩写，d o m 模型的建立 为使j a v a s c r i p t 等相关的行为标准语言操作访问网站页面的内容提供了一种有 第二章论文研究基础上海师范大学硕士学位论文 效的方式。e c m a s c r i p t 是e c m a 指定的标准脚本语言。 现在越来越多的网站尤其是一些比较正规的大型门户网站都已经将其以前 使用表格布局，内容样式和脚本混在一起的网站改版成符合w e b 标准的版本， w e b 标准也逐渐被设计者所认可和了解。w e b 标准之得到业界广泛的任何和推崇， 主要原因是因为w e b 标准能给使用者和网站拥有者带来真正的好处。使用c s s 布 局的页面，页面大小明显降低，所以大大提高了显示速度，速度的提升大大提升 了用户的体验。同时由于标准布局的代码更加简洁，更有利于搜索引擎蜘蛛程序 在页面的爬行，增加网页被搜索引擎收录的几率。 2 2 2 表现标准语言c s s w e b 标准将一个网页的内容、结构、表现、行为分离开。其中内容是网站页 面所要传达的信息内容，表现是最后内容呈献给用户时的显示方式，而结构是内 容和表现之间的纽带，行为是对内容的交互及操作效果。 传统布局和c s s 标准布局的区别如下： 使用c s s 标准布局和使用t a b l e 表格布局有着截然不同的思考方式，在传统布 局中，页面的结构部分和表现部分混杂在一起，而在标准布局中，结构部分由 x h t m l 控制，表现部分由c s s 控制，实现了表现和结构的分离。 1 、传统的表格布局 在传统布局中主要使用表格来布局。一般用表格中的单元格将页面划分成几 个不同区域，然后在单元格中通过嵌套其它的表格来实现内容的分割和定位，通 常还会使用表格元素自带的一些控制表现样式的属性来达到页面的修饰效果。 1 6 上海师范大学硕士学位论文第二章论文研究基础 促进会首页 促避会章程 t 贵池联谊会 t da l i g n = 。c e n 乞e r ah r e f = 。z x j js c h r j a l 。c h 暑弘。s i i e 4 。舜冶联谊会 丑，c 龄 青聊医谊会 身谨蕨谊会 同乡教育基金 l a x l r 垃c , ( ，t a b l e ) - 图2 2 导航栏的表格布局代码 _ _ “一”一“1 一“1 “ 乙攀拿黧i 然彗曼腆御上獬麓生。跫塑篓。要字譬塑曼熙氅i 篓黧皇二髟 图2 - 3 导航栏显示效