网页前端用户体验实施规范.docx

1、网页前端用户体验实施规范 前端用户体验实施规范前言 用户体验一词在国际上更为通行的叫法是UX(User eXperience)，以用户至上的观点作为基石，由品牌印象(感官冲击)、功能性、可用性和内容等多个元素构成，相互依存且不可分割，共同形成了基本 的用户体验。本质上来说，体验并不能被设计，能被设计的只能是功能、流程与用户界面。在用户使用的过程中，感受到了主观的使用体验，可以看成是用户体验的 表现层面。但是在实践中，很多人往往把用户体验狭隘地理解成了UI，即界面的设计，这样的看法有失偏颇。用户体验应该是一种整体的感受，界面设计虽然是用户能最直接感知到的部分，但毕竟不是全部，这样的理解缩小了用户

2、主观感受的范围。要实现用户体验的优化，前提之一是必须对自己的客户群体了如指掌。因此，要有一个详细的背景调查，分析用户群体的属性，分析他们的需求和行为特征，这样才能有效的实现网站用户体验的目的。第一章、用户分析1.用户群体人群分类年龄段人群类型青年20-29岁白领中年30-39岁40-49岁老板白领专家老年50-60岁老板退休干部1)年龄分析：、20-29岁拥有20%， 30-39岁拥有50%， 40-49岁拥有,20%， 其他拥有10%。2)人群分析：建材公司人士、 行业企业人士、 专家、房产公司人士、金融行业人士、制造行业人士、能源/采矿、农林/化工、汽车等。3)20%的用户属于电脑初级使用

3、者！2.用户普遍行为第二章、感官体验呈现给用户视觉上的体验。1.用户的视觉感官 人的视觉通常不是先看中间，而是根据母语的读写习惯，经过大脑的指令，按照：从上到下，从左到右的路线进行查看。1)什么是“F现象”：图4.0.1为用户浏览网站时视线注意力“F现象”研究：注：绿色、黄色、红色关注度以此升高，这说明人喜欢第一眼看左上角的内容，这告诉我们，重点要在左边偏上的部位出现。图4.0.1从左上角的至右下角优先比重逐级递减2)视觉焦点：我们不可能满足每一用户对于色彩、页面设计的喜好，但是我们可以从另一个交互设计的角度来满足绝大多数的需求，这就是“视觉焦点”。视觉焦点就是在有限的视线范围内快速捕捉你自己

4、认为吸引你的区域。反映在互联网产品设计中，就是指设计的页面上最吸引人注意的地方，视线上集中交汇 的地方，这个位置就叫焦点。在网页设计中，引导用户集中在你想让他关注的区域，那样会让你的设计有重心和亮点，如图4.0.2所示。图4.0.2视觉焦点的处理方式人们用视觉获取环境中的信息，对你注意的周围都会是模糊的，你视线集中的中心点是最清晰的。图4.0.2第一张，视觉上呈现这样的状态是：视线上没有集中，整体模糊，是成方形的视觉框架。图4.0.2第二张和第三张，图中的两朵花在图形中是最漂亮的亮点，漂亮的东西会引人注意，你会注意到上一朵或则下一朵，注意任何一朵花的时候，眼球集中点会以圆的形状向外逐渐模糊，最

5、中心点就是焦点。3)视觉强弱：圆形作为设计中的元素的时候，自然更加的适应视觉上的感知如图4.0.3所示。图4.0.3视觉强弱：图4.0.3美女其实可以独立成为一个视觉焦点，但当我们给美女加了圆形边框后，视觉焦点就转移到圆形边框包括到的美女上，最后将圆形填充，视觉焦点就转移到填充色的圆形的美女上。所以根据内容和位置的不同要合理的为用的视觉感官设计。备注：2.设计风格 符合目标客户的审美习惯，并具有一定的引导性。以行业定位，应该从立体感、金属感、层次感出发，使网站能够突出钢铁行业的特色。1)网站LOGO：确保logo的保护空间，确保品牌的清晰展示而又不占据过分空间。2)页面色彩：与品牌整体形象相统

6、一，主色调+辅助色不能多种颜色。以恰当的色彩明度和亮度，确保浏览者的浏览舒适度。3)页面大小：自适应可以根据浏览器显示情况自动调整页面宽度，但是因为用户水平方向的聚焦范围有限，所以当页面过宽时，用户的浏览和操作成本会增加;而当页面过窄时 (如用户同时开启两个浏览器对比查看商品搜索结果)，自适应则会导致布局变形和内容错乱。给页面规定宽度可以避免这些问题。4)图片展示：根据板块需求设计位置大小，图片比例协调、不变形，图片清晰。图片排列既不过于密集，也不会过于疏远。5)图标使用：简洁、明了、易懂、准确，与页面整体风格统一。3.交易资讯交易资讯感官设计的时候通常要求要站在用户的角度来思考客户最喜欢什么

7、、最关注什么。这就涉及网站产品的展示方式。首先不同客户他的需求点是不相同的，比如采购用户关注的价格行情、库存等。但是部分比较急需 的用户先关注地区，再关注价格和库存，再关注里面的规格、材质、重量、厂家等。而有些用户会最先关注的是品种、图片、厂家。希望这些参数的展示能突出点。4.广告风格避免干扰视线，广告图片符合整体风格，避免喧宾夺主。广告图片文字正确，图片必须清晰！刚搞图片尺寸要警醒压缩，不能影响打开页面的速度。第三章、交互体验 呈现给用户操作上的体验，强调易用/可用性 交互设计主要分为两块：信息架构和操作细节。1)会员注册：流程清晰、简洁。我们的用户有部分都是电脑基础使用者，所以会员注册要简

8、单、快速，待会员注册成功后，再详细完善个人或公司资料。介绍清晰的会员权责，并提示用户确认已阅读条款。2)表单填写：尽量采用下拉选择，需填写部分需注明要填写内容，并对必填字段作出限制。（如电话位数、邮箱等，避免无效信息）3)表单提交：表单填写后需输入验证码，防止注水。提交成功后，应显示感谢提示。4)按钮设置：对于交互性的按钮必须清晰突出，以确保用户可以清楚地点击。5)点击提示：点击浏览过的信息颜色需要显示为不同的颜色，以区分于未阅读内容，避免重复阅读。6)错误提示：若表单填写错误，应指明填写错误之处，并保存原有填写内容，减少重复工作。7)意见反馈：当用户在使用中发生任何问题，都可随时提供反馈意见

9、。网站应提供一个反馈信息的接口。8)在线搜索：搜索提交后，显示清晰列表，并对该搜索结果中的相关字符以不同颜色加以区分。9)新开窗口：尽量减少新开的窗口，以避免开过多的无效窗口，设置弹出窗口的关闭功能。10)显示路径：无论用户浏览到哪一个层级，哪一个页面，都可以清楚知道看到该页面的路径。第四章、浏览体验给用户浏览上的体验，强调吸引性。1.网页布局 页面结构是衡量网站用户体验好坏的重要指示之一。 “布局”是指页面内容的尺寸、间距及位置。有效的布局对于帮助用户快速找到 他们想要的内容至关重要，并可以在结构外观上令用户感到舒服。1)布局思路:层次清楚，突出主题。理清网页内容及栏目结构的脉络，使链接结构

10、、导航线路层次清晰；内容与布局要突出主题。布局应当让页面各元素之间的关系和重要性一目了然。给用户不乱的感官体验。2)焦点：指用户首先关注的区域。形式上被赋予焦点属性的UI元素一定要表达重要的内容。3)视觉流：指用户关注区域的顺序。可以根据任务逻辑和用户的浏览习惯来设计恰当的视觉流。好的视觉流应该清晰、合理、顺畅、自然。4)对齐：使页面工整，信息呈现有序，便于用户扫视。没有对齐影响了页面效果且不便于用户扫视。不要因为功能需要和对极限情况的顾虑而轻易牺牲掉页面的视觉展现。5)强调：可以根据UI元素间的相对重要程度进行强调。6)布局设计优化页面如果最左边或者中间出现焦点图，可以用CSS浮动来控制图片

11、布局位置在最右边，视觉位置显示在左边或中间。不改变用户的视觉感官体验。7)合理利用页面空间：保持页面的视觉平衡。避免拥挤和对空间的浪费。确保关键数据没有被截断，除非数据特别长。8)保持视觉简洁：不要让布局本身成为突出的UI元素，减少内容和展现上的嵌套层级，减少控件不同尺寸的数量。9)文章的段落结构：这个我们也要重视，清晰的段落结构可以帮助用户更好、更方便、更舒适的阅读，并把重要的内容换成不同的颜色加以突出。2.导航体验 航条清晰明了、突出，层级分明。 提供一个完整的导航系统，其中包括全局导航、局部导航、辅助导航、上下文导航、远程导航等。1)全局导航：从网站的最终页面到达其他页面的一组关键点，无

12、论你想去哪里，都可以在全局导航中最终到达。2)局部导航：提供一个页面的父、兄、子级别的通路，是用户在网站信息空间中到附近地点的通路。局部导航的设计好坏会直接影响到整个导航系统的质量。例如：3)辅助导航：提供了全局导航和局部导航不能快速到达的相关内容的快捷途径。用户转移浏览方向，而不需要从头开始。例如 “首页 普钢频道 螺纹钢 全国价格汇总”4)上下文导航：用户在阅读文本的时候，恰恰是他们需要上下文辅助信息的时候。准确的理解用户的需求，在他们阅读的时候提供一些链接(例如：文字链接)，要比用户使用搜索和全局导航更高效。上下文导航的示意图与辅助导航类似。5)友好导航：一些用户通常不会使用的链接，确实

13、需要时又能快速有效的帮助用户例如：联系信息、招贤纳士和服务条款等。6)远程导航：独立方式存在的导航。如，网站地图：简明的、单页网站整体结构展示。在用户被你的其他导航搞得晕头转向时，很多时候他会选择网站地图。7)栏目的命名：栏目内容准确相关，简洁清晰，不宜过于深奥。8)栏目的层级：最多不超过三层，导航清晰，运用JAVAscrip等技术使得层级之间伸缩便利。9)内容的分类：同一栏目下，不同分类区隔清晰，不要互相包含或混淆。10)内容的丰富性：每一个栏目应确保足够的信息量，避免栏目无内容情况出现。11)网站LOGO链接：每一个出现的网站LOGO都要加上回到网站首页的链接，用户已经习惯了点击网站LOG

14、O作为回到网站首页的方法。12)导航条的位置：主导航条的位置应该在接近顶部或网页左侧的位置，如果因为内容过多需要子导航时，要让用户容易地分辨出哪个是主导航条，哪个是某主题的子导航条。13)导航使用的简单性：导航的使用必须得尽可能的简单，避免使用下拉或弹出式菜单导航。14)已浏览网页的指示：最简单地可以通过已点击超链后的变色，如果不在同一网页的超链接网页，可以在其它位置显示用户已浏览过的内容。15)登录会员导航：登录入口和退出登录出口要在全网站的每一个网页都可以找到，让用户进入任一网页都可以登录和退出。16)导航的链接：必须全是有效链接，无论是一般导航还是有下拉菜单的导航，里面的所有文字都应该是

15、有效的链接。17)准确的导航文字描述：用户在点击导航链接前对他们所找的东西有一个大概的了解，链接上的文字必须能准确描述链接所到达的网页内容。18)搜索导航结果：搜索的结果一定不要出现“无法找到”的结果，这是很让用户失望的，如果无法精确找出结果，搜索功能应该实现对错字，类似产品或相关产品给出一个相近的模糊结果。3.内容板块的浏览体验1)内容的原创性：尽量多采用原创性内容，以确保内容的可读性。2)信息的编写方式：段落标题加粗，以区别于内文。采用倒金字塔结构。3)新文章的标记：为新文章提供不同标识(如new)，吸引浏览者查看。4)文章导读：为重要内容在首页设立导读，使得浏览者可以了解到所需信息。文字

16、截取字数准确，避免断章取义。5)精彩内容的推荐：在频道首页或文章左右侧，提供精彩内容推荐，吸引浏览者浏览。6)相关内容的推荐：在用户浏览文章的左右侧或下部，提供相关内容推荐，吸引浏览者浏览。7)信息的搜索：在页面的醒目位置，提供信息搜索框，便于查找到所需内容。8)文字排列：标题与正文明显区隔，段落清晰。9)文字字体：采用易于阅读的字体，避免文字过小或过密造成的阅读障碍。可对字体进行大中小设置，以满足不同的浏览习惯。10)页面底色：不能干扰主体页面的阅读。11)页面的长度：设置一定的页面长度，避免页面过长而影响阅读。12)分页浏览：对于长篇文章 进行分页浏览。13)快速通道：为有明确目的的用户提

17、供快速入口。4.浏览器兼容网站要适合多个主流浏览器，用户在浏览当中不能在其中一个浏览器正常，另一个却错位。兼容的浏览器有：火狐、IE等常用浏览器。第五章、情感体验呈现给用户心理上的体验，强调友好性。1)客户分类：将不同的浏览者进行划分(如专家、经销商、生产商、采购商等)，为客户提供不同的服务。2)友好提示：对于每一个操作进行友好提示，以增加浏览者的亲和度。3)会员交流：提供便利的会员交流功能(如论坛)，增进会员感情。4)售后反馈：定期进行售后的反馈跟踪，提高客户满意度。5)会员优惠：定期举办会员优惠活动，让会员感觉到实实在在的利益。6)会员推荐：根据会员资料及习惯，通过会员中心为其推荐适合的供

18、应信息或 报价。7)鼓励用户参与：提供用户评论、投票等功能，让会员更多地参与进来。8)会员活动：定期举办网上会员活动，提供会员与厂商交流机会。9)专家答疑：为用户提出的疑问进行专业解答。10)会员休闲：为用户提供适当的游戏或其他娱乐项目，是会员可以放松和休闲。11)邮件/短信问候：针对不同客户，为客户定期提供邮件/短信问候，增进与客户间感情。12)好友推荐：提供邮件推荐功能13)网站地图：为用户提供清晰的网站指引。第六章、信任体验呈现给用户的信任体验，强调可靠性。1)搜索引擎：查找相关内容可以显示在搜索引擎前列。2)公司介绍：真实可靠的信息发布，包括公司文化、发展状况、公司资质等。3)服务保障

19、：将公司的服务保障、条款清晰列出，增强客户信任。4)页面标题：准确地描述公司名称及相关内容。5)文章来源：为摘引的文章标注摘引来源，避免版权纠纷。6)文章编辑作者：为原创性文章注明编辑或作者，以提高文章的可信度。7)服务热线：公司组织服务部门、技术咨询等部门，并在网站特定的区域列出，便于客户查找咨询。8)有效的投诉途径：为客户提供投诉或建议邮箱或在线反馈。9)安全及隐私条款：对于交互式网站，注明安全及隐私条款可以减少客户顾虑，避免纠纷。10)法律声明：对于网站法律条款的声明可以避免企业陷入不必要的纠纷中。11)网站备案：让浏览者确认网站的合法性。12)相关链接：对于集团企业及相关企业的链接，应

20、该具有相关性。13)帮助中心：对于流程较复杂的服务，必须具备帮助中心进行服务介绍。14)网站身份：包括基本的联系信息如地址、电话号码、电子邮件、网站的所有者、目的和使命等；15)广告和内容：广告或者赞助应该通过标签或者其他可视的标识与新闻和信息明确区分开来；16)个人信息保护：应该用尽量明白、简短的语言陈述个人信息保护政策。第七章、文案措辞1.说明性：简介、联系等说明性内容一定要精确、简短、通顺，如果文字表达不是很清楚可以一图片标示。1)公司介绍：真实可靠的信息发布，包括公司规模、发展状况、公司资质等。2)联系信息：地址、电话号码、电子邮件、网站的所有者、目的和使命等。3)服务条款：免费服务的

21、条款。4)帮助信息规范：帮助文档中的性能介绍与说明要与系统性能配套一致。在界面上调用帮助时应该能够及时定位到与该操作相对的帮助位置。也就是说帮助要有即时针对性。用户可以用关键词在帮助索引中搜索所要的帮助，当然也应该提供帮助主题词。在帮助中应该提供我们的技术支持方式，一旦用户难以自己解决可以方便的寻求新的帮助方式。2.描述性：商品简介1)商品的简介：设计美观、清晰、适度，用户只需拖动一屏即可看到商品主体信息，既达到了关联营销的目的，又不会对用户的预览造成影响。通过优化商品设计的视觉层次感、韵律感，能减少用户在浏览商品过程中的视觉疲劳，从而相应地增加页面停留时间。2)新闻信息的描述：要突出新闻内容

22、的核心和特色点。3.提示性：1)对于每一个操作进行友好提示，以增加浏览者的亲和度。提示举例：“欢迎您访问免费 信息平台！”、“登录注册会员会有更多免费”。2)设计过程中，首先要帮助用户避免出错，比如采用合适的控件（相同情况下选择控件比输入控件出错机会更小），给予输入帮助或提示。用户出错后，需要提供撤销或返回功能，使用户返回到上一步操作重新探索。出错反馈内容要亲和，避免责备用户或鲁莽的打断或回到首页，要礼貌提示用户错误所在并提供有用的补救建议。4.关于SEO1)什么是SEO搜索引擎优化简称SEO（search engine optimization），指遵循搜索引擎的搜索原理，对网站结构、网页文

23、本语言和站点间互动链接等进行合理规划部署，以改善网站在搜索引擎的排名，增加访问量的过程。2)SEO关键词和描述关键词优化也叫SEO是一种利用长期总结出的搜索引擎收录和排名规则，网站关键词密度对于搜索引擎专区有一定的影响，对于网站排名特别是长尾词都有很大影响。所以一个网站的关键词密度应该控制在2%-8%之间比较合适。 网站描述也就是我们所说的description，它在网站SEO设置起着十分重要的作用，因为网站描述不光是给搜索引擎看的，更大的作用是给用户看的，因为它能更明确告诉用户这个网站是否是自己想要的信息，对整个网站的内容和定位有了比较全面的概述。3)SEO与网站用户体验的概念SEO是搜索引擎优化，是面向搜索引擎的。网站用户体验是指网站的可用性。根据用户的习惯，感官、情感、交互、心理等等设计的，符合人体工程学的网站是用户体验好的网站。网站用户体验是面向用户的。