原型设计规范网页规范用户体验规范交互规范.docx
- 文档编号:25430479
- 上传时间:2023-06-08
- 格式:DOCX
- 页数:33
- 大小:2.23MB
原型设计规范网页规范用户体验规范交互规范.docx
《原型设计规范网页规范用户体验规范交互规范.docx》由会员分享,可在线阅读,更多相关《原型设计规范网页规范用户体验规范交互规范.docx(33页珍藏版)》请在冰豆网上搜索。
原型设计规范网页规范用户体验规范交互规范
用户体验产品规范V1.0
1、概述
1.1规范目的
·在产品规划时,给部门内部的成员提供统一的规范和指导,有利于保证产品;
·解决公司产品的可用性问题,即使操作更加人性化,减轻用户认知负担,改善产品的用户体验,提升产品的市场竞争力;
·使产品在表现层面上达成界面外观与操作行为的一致。
1.2规范人群
参与产品规划的产品部成员。
1.3规范范围
所有互联网产品。
2、web架构
如果把一个网站比喻成一座建筑,那么这个建筑的结构就是这个网站的架构。
建筑的结构决定了人们对它的第一印象,也决定了它最凸出的个性。
建筑的结构可以从美的角度、实用的角度、个性的角度等方面分析。
web架构主要可以从四方面分析:
社会化框架、信息架构、业务架构、结构SEO。
考察这四个方面的都有各自的意义:
网站社会化框架,以提高用户粘度为中心;信息架构,以满足用户需求为中心;业务架构,以客户赚钱为中心;为web架构seo,以服务搜索引擎为中心。
其中社会化框架和信息架构二者可以相互促进;web架构seo相对独立,但它也跟信息架构的页面链接有很大的关系;信息架构和业务架构有时候会有冲突,这时取决于我们优先满足普通用户还是客户,或是当前产品的正处在的阶段决定它们的优先级。
2.1web社会化框架
什么是社会化框架?
社会化设计是对支持社会交往的网站或应用的构思、规划和构建的过程。
社会化框架即是社会化网站设计时形成的框架。
考察网站社会化框架,主要是以提高用户粘度为中心。
2.1.1AFO方法
Activity(活动)-专注首要活动。
Object(对象)-辨识交互对象
Feature(功能)-选择核心功能集。
首要活动
我们首先要解决(并伴随整个设计过程)的问题是——你的用户要用你的产品做什么?
首要活动只有一个
最能吸引人的应用,就是让人出色完成某个特定活动的应用
总结:
当我们在开发一个新产品时,我们要解决的最重要的问题不是“谁要用我的产品”,而是“用户要用我的产品来做什么”!
识别首要活动
用户的什么行为是网站获得成功的关键?
亚马逊回答是付款、淘宝呢?
微薄
目标:
用户希望达到的最终目标
购买日用品娱乐赚钱享受美食与家人保持联系……..
活动:
实现目标的一系列任务的组合
往往会专注于具体的任务,而忽略更宽泛的活动。
我们不能盯着付款这个具体操作,忽略购买这个活动
任务:
具体的某个功能
识别社会化交互对象
每一个活动都与特定对象相关,确定首要活动后的下一步是,用户进行这些活动时的交互对象。
模拟实物:
Facebook——在哈佛大学,facebook是一个真正的本子
亚马逊的礼物愿望单——原型是人们用纸写下并相互分享的礼物愿望单
Web应用中社交对象不一定要表现真实物品(视频、音乐、电子狗),他们有时候也是可以抽象的
社交对象设计成功的案例
照片书签博客商品职位电影视频新鲜事消息
演示文档…..
为社会化对象分配URL地址:
对象有了URL地址就可以被分享出去
对象有了URL地址就更容易被查找和寻回
URL让人可以直接链接对象
搜索引擎能利用URL更好工作
Feature(功能)-选择核心功能集
我们可以从首要活动及交互对象推导出核心功能集。
为此我们要解决这些问题:
1用户会对交互对象做哪些操作?
2有哪些功能足够重要,是web应用必须支持的?
寻找动词
留意任何的对象集合,它们通常会成为有价值的功能。
其中重要的集合方式是列表
下面是搜索对象的几种常见的来源:
礼物愿望单我的…(照片、评论、书签)
购物车好友的…
收藏夹项目
分享条目
AFO的方法指引来搜索亚马逊提供的社会化功能
商品评分加入礼物愿望单
分享个人商品图片新婚/新生儿礼物单
买了该产品的用户还买了…告诉朋友
…
2.2web信息架构
信息架构,一般认为是根据客户需求分析的结果,准确定位网站目标群体,设定网站整体架构,规划、设计网站栏目及其内容,制定网站页面操作流程及页面交互,以最大限度地符合用户的需求。
2.2.1web架构
架构的层级
架构的层级很大程度上决定了,用户通过首页需要点击多少次才可以到达自己想看的内容。
单纯考虑层级,层级越少越好,最佳状况是层级不超过三层。
如果能保证层级不超过三层,就差不多可以保证用户点击三次以内就可以看到自己想看的内容。
架构的宽度
用户可以见的第一层架构宽度主要是导航的链接数。
用户短时间的记忆力一般情况是7±2,因此每个层级下架构的宽度都不应该太宽,否则会考验用户的记忆力。
架构的平衡度
因为现在的大型网站,尤其是门户网站,它们的信息量非常的庞大,通过首页3次点击都能到达所有的内容已经完全无法实现。
一定的信息量,架构的层级和架构宽度是相互对立的,如果层级少则要求架构宽度增加,反之毅然。
架构可以给信息进行分类、组织,让用户更清晰地找到自己要找的内容,但是分类过多或是层级过深会增加用户的学习成本。
在信息量大的时候一定要综合考虑架构的层级和宽度平衡
2.2.2信息页面
页面是承载信息的载体。
2.2.2.1*用户视觉习惯
1、顺应用户基本的阅读习惯:
从左到右、从上到下
2、F型布局
.尼尔森眼动发现,大多数用户浏览页面时的视觉热点是”F”布局
他们记录了232位用户浏览上千个网页的方式,发现对于不同的站点和任务,用户的主要阅读行为是相当一致的。
这种F型的阅读模式有三个组成部分:
首先,用户横向运动阅读,通常是网页内容区域的上半部分;
接着,用户视线下移一点,开始第二次横向阅读,通常这一次涵盖的区域会比前一次短;
最后,用户会纵向滴浏览网页内容的左边部分
对产品设计的启发:
.用户不会从头到尾看完页面
.首页首屏的前面位置应该传达网站的重要的信息(同理其他页面的头两段应该传达重要的信息,尤其是第一段)
.用户从上到下浏览左侧的信息时,他们会注意标题、段落和要点信息,这些区块的头两个词要包含重要信息,因为用户可能很少看第三个词。
3、区块
人们天然就有将信息分类的认知需求。
网站信息以方块呈现的效率最高:
用户可以通过区块来分辨这个区域的信息是否是自己需要的,可以迅速缩缩小范围、进行仔细寻找或是浏览下一个区块
4、水平注意力
来自Nielson的报告:
.网络用户花69%的时间看左半部分,花30%的时间看右半部分,看左半部分的时间大概是右半部分时间的两倍。
剩下的时间花在需要水平滚动才能看到的页面部分,因此,绝对要避免水平滚动
5、垂直注意力
来自Nielson的报告:
垂直注意力大部分集中于一眼可见的页面内容:
.用户通常花80%的时间看页面上直接可见的内容,只花20%的时间去看需要滚动才能看到的部分
.“pagefold”概念,将最有价值的信息放在首屏
在网页设计最早的年代,用户根本不会滚动页面,他根据第一眼可以可见的信息判断是去还是留,但是很快,网络用户就适应了滚动,可用性原则也随之变化,但是,通常用户还是会依据自己可见的信息判断是滚动还是离开。
.不要设计太长的页面,用户的注意范围是有限的。
用户喜欢那些他们能迅速找到信息的网站,减少需要输入字数,减少滚动
.但是,滚动优于翻页,如果长篇幅的文字,还是设计成一个滚动页面更合适些
.首页的内容仍然很重要,因为用户依据在首页页面上看到的信息来判断页面下滚的信息是否有价值
.倒数第一行信息获得的注意力优于倒数第二行信息,近因效应
2.2.2.2*页面宽度
最新显示器分辨率比率调查结果:
目前主流分辨率1366*768在此状态下默认使用960的页面宽度,与腾讯网首页统一尺寸。
特殊情况:
1.信息量或是图片量过大的事情,可以考虑加宽承载,给出来年改革尺寸
985(paipai,Qbar)
1175(Qqshow游戏产品等)
2.搜索类信息页面,采用自适应屏幕方式(比如soso搜索产品)
不同浏览器,不同分辨率下网页第一屏最大可视区域:
说明:
比如1024*768下IE的可视面积是(1024-21)*(768-148)
1336*768在各个类浏览器
2.2.2.3*一致性
一致性的意义:
良好的一致性,可以减少用户学习成本,可以更快培养用户习惯,也可体现产品设计的严谨。
如果有不同,应作相应的区别处理,特别是视觉表现上要予以区分。
什么是一致性?
在相似的情景下,应在几个方面保持一致性:
视觉表现、交互行为、操作结果。
即同一元素在不同页面应尽量是一样的(换句话说用户在不同页面看到都知道这个元素代表同一种含义),如果因为其他因素导致很难一样,也应该最大程度保持它们的相似度。
同时也要求同一元素应该是代表一种或是一类含义,不可随意变更元素用途。
相同属性的元素保持统一,并且它们在不同页面都保持统一。
1.标识
同一种标识在不同页面必须保持完全一致(但尺寸可以放大或是缩小)
2.按钮
到达相同页面或是同一状态的按钮文字完全一样,如果因为视觉层次需要,形式可以不一样。
一个平台上的按钮依据重要程度,可以分出几个层级来,同一层级的按钮尺寸、形状一样。
4.文字
同一平台上的同一层级的信息的字体应尽量保持一致,如标题的字体大小、显示字数的长短都一定的规范,最好不要超过3种规格。
5.图片
同一类型的图片在不同的位置应保持长宽比率的一致,这样可以保持图片的美观性。
图片的上的alt标签的格式一致,来源一致。
6.提示信息
提示信息在摆放的大体方位(如:
都放在输入框的右侧、或是下方等);信息提示的形式:
如:
主体形式都是主题加关键字,以及提示信息的字体等都应该保持一致。
2.2.2.4*简洁性
少即是多,尽可能精简界面上的元素。
当设计出原型,先将元素减半,然后再看能否再简化。
保证主要任务流程顺利完成,消减其余不相关元素的干扰。
简洁体现在四个方面:
减轻视觉干扰、精简文字表述、简化操作步骤。
2.2.2.5*清晰
2.2.2.6*当前状态
2.2.2.7导航
1.字体一般用黑体或微软雅黑。
要斟酌全体用户不同情形都适应的字体,而不是只雅观。
2.对于主导航,要设置a标签,并且不同的属性要有不同的值,这样很明白能否点击。
3.从导航都必须是有效链接,链接后的页面一定要有基本的功能。
主导航一定不能有生链接(生链接指失效的链接)
4.主导不要用JS链接,因为搜索引擎是不读取的。
5.有些网站从用户体验角度考虑,用图片做导航链接,这样最好在图片的下方设放上文字链接,同时在图片上加上正文。
否则搜索引擎无法抓取。
2.2.2.8平面版式
版式的基本类型
网页版式的基本类型主要有骨骼型、满版型、分割型、中轴型、曲线型、倾斜型、对称型、焦点型、三角型、自由型十种。
1.骨骼型
网页版式的骨骼型是一种规范的、理性的分割方法,类似于报刊的版式。
常见的骨骼有竖向通栏、双栏、三栏、四栏和横向的通栏、双栏、三栏和四栏等。
一般以竖向分栏为多。
这种版式给人以和谐、理性的美。
几种分栏方式结合使用,既理性、条理,又活泼而富有弹性。
优点:
理性、条理、规范
2.满版型
页面以图像充满整版。
主要以图像为诉求点,也可将部分文字压置于图像之上。
视觉传达效果直观而强烈。
满版型给人以舒展、大方的感觉。
随着宽带的普及,这种版式在网页设计中的运用越来越多。
优点:
舒展、大方。
缺点:
网速加载会比较的慢。
网页例子:
3.分割型
把整个页面分成上下或左右两部分,分别安排图片和文案。
两个部分形成对比:
有图片的部分感性而具活力,文案部分则理性而平静。
可以调整图片和文案所占的面积,来调节对比的强弱。
例如:
如果图片所占比例过大,文案使用的字体过于纤细,字距、行距、段落的安排又很疏落,则造成视觉心理的不平衡,显得生硬。
倘若通过文字或图片将分割线虚化处理,就会产生自然和谐的效果
优点:
精致、简洁、明了
网页实例:
4.中轴型
沿浏览器窗口的中轴将图片或文字作水平或垂直方向的排列。
水平排列的页面给人稳定、平静、含蓄的感觉。
垂直排列的页面给人以舒畅的感觉。
优点:
稳定、平静、含蓄
网站实例:
5.曲线型
图片、文字在页面上作曲线的分割或编排构成,产生韵律与节奏。
优点:
平滑、柔和
网页实例:
6、倾斜型
特点:
页面主题形象或是多幅图片,文本内容倾斜编排,形成不稳定感或是强烈的动感,引人注目。
优点:
视觉冲击力强、个性突出
网页实例:
7、对称型
特点:
对称型的页面给人以稳定、严谨、理性、庄重的感觉。
对称分为绝对对称和相对对称,一般采用相对对称,可以避免呆板。
优点:
稳定、严谨、理性、庄重
网站实例:
8、焦点型:
特点:
焦点型的网页版式通过对视线的诱导,使页面具有强烈的视觉效果。
焦点型又分为三种类型:
①中心以对比强烈的图片或是文字置于页面的中心。
②向心视觉元素引导浏览者向页面中心聚拢,形成一个向心的版式。
③离心视觉元素引导浏览者视线向外辐射,形成一个离心的网页版式。
网站实例:
9、三角形
特点:
网页个视觉元素呈三角形,正三角最具稳定性,倒三角则产生动感,侧三角构成一种均衡的版式,既安定又具有动感。
优点:
稳定而不是动感
网站实例:
10、自由型
特点:
自由型的页面具有轻松活泼、轻快的风格。
优点:
自由、舒展
网站实例:
2.2.2.9栏目布局
.人们天然就有将信息分类的认知需求
.网页设计中的“方块“
.网站信息以方块呈现的效率最高,用户可以通过区块来分辨这个区域的信息是否是自己需要的,这样可以迅速缩小范围、进行细致寻找或是浏览下一个区域。
用户可以分辨出明显的4大区域,每个区域里又有小的区块
划分版式区块的原则:
同类合并原则
确定中心原则
临近原则
要点
方块感越强能给用户方向感
方块越少越好
尽量用留白做视觉区分
检查方法:
将网站的背景图片,线条全部去掉,看是否还能保持层级和区块感
2.2.2.10栏目
栏目的主要作用一般分两类:
1.推荐可见的内容或是功能;2.通过推荐可见的信息,引导用户点击更多>>浏览与推荐内容相关的信息。
通常一个栏目的推荐应是属于某一频道或是某一列表的内容,因此呈现在栏目的信息最好是最新、最吸引用户的内容。
2.2.2.11分页
.长文章分页呈现吗?
一般来说不要
简单地将一篇长文章分成1、2、3……页并不好,如果仅仅通过“继续”或“下一页”那么还不如用一页显示,用滚动来代替翻页。
.向导式的交互除外,比如电子商务的支付环节,分页是最好的呈现方式,因为每个步骤一个工作流程,必须完成上一步才能进入下一步
.分页后各个页面的内容从某个角度应该是属于同一类的
2.2.2.12搜索
1.基础规范
.文本框
a.搜索框文本框的长度应适中,至少应提供显示10个汉字字符的宽度;
b.搜索框组件中适应文本框必须为单行文本框;
c.文本框的长度不得少于130个像素高度不得低于18个像素;
.分类选择
分类标签提示一般放在搜索框的上方,或是搜索按钮的前面
.帮助信息
a.帮助信息一般包括三块内容:
分类标签提示、提示性文字、热门关键词提示等;
b.”提示性文字”可设置灰色(#cccccc)显示,点击输入框后提示文字消失。
提示文字应简明扼要,文字一般用于内容、用途、搜索范围等用户有真正帮助的提示。
“请输入关键字”这样的提示不应出现。
c.“热门关键词提示”一般放在搜索框下面
.搜索按钮
a.搜索按钮一般包含图标形式或者文字形式两种
b.使用图标形式时只能使用放大镜的图标,采用其他元素时需谨慎。
c.搜索按钮上的文字最好为搜索,避免其他描述。
d.图标形式(放大镜)和文字形式搭配使用,会出现如下三种情况:
2.应用场景
强表现方式:
.加大搜索框的显示,输入框内采用大字体(14号)
.突出搜索button的表现形式,更直观,更有点击欲
.位置放在页头的中间或是右侧比较好
2.2.2.13文字
总体原则:
提高文字的辨识性和页面的易读性
1.字体大小:
建议使用12号+14号字体的混合搭配,13号也可酌情考虑,因为13号字体的不对称性,目前非主流
.需突出的内容部分、新闻标题、栏目标题等多使用14号字体
.广告内容、辅助信息或是介绍性文字等多使用12号字体
.不要用太大的字。
因为版面是宝贵,有限的,粗陋的大字体不能带给访问者更多信息。
.避免大面积使用加粗字体
.不要使用不停闪烁的文字。
想让浏览者多停留一会儿的话,就不要使用闪烁的文字。
.原则上标题的字体较正文大,颜色也应有所区别。
2.中、英文标准字体:
中文标准字体为宋体,英文标准字体为arial或Verdana。
不要使用超过3种以上的字体。
字体太多则显得杂乱,没有主题。
3.文字语言:
除设计修饰、或是文章标题,其他地方均采用中文。
4.对齐和间距:
字距小于行距,行距小于段距,段距小于块距。
检查的方法:
将网站的背景图片,线条全部去掉,看是否还能保持层级和区块的感
5.文字的可读性:
呈现用户熟悉的简易、通俗的文字。
避免使用生僻或是拗口的文字。
另外:
可以因为用户的特殊打破这个常规,如老年用户、儿童用户、残障用户等
2.2.2.14图片
同一类型的图片保持一样的尺寸规格,页面上图片的像素依据显示区域的大小来定,像素太低影响视觉效果,太高视觉效果也不会提高,并且影响页面的加载速度。
同一图片在不同页面应保持宽/高的比例一致。
图片的信息都要带alt属性,并规定alt值,取自那里,以及他们的格式。
title属性为设置该属性的元素提供建议性的信息,非必需。
Alt属性为不能显示图像、窗体或applets的用户代理(UA),alt属性用来指定替换文字。
替换文字的语言由lang属性指定。
包含文字的图像图片设置替换文字是最简单的,图像中包含的文字一般来说就可以作为alt属性值。
Alt属性值得长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。
我把它理解为“尽可能短,尽需要长”。
title属性为设置该属性的元素提供建议性的信息。
title属性可以用在除了base,basefont,head,html,meta,param,script和title之外的所有标签。
使用title属性提供非本质的额外信息。
title是对图片的说明和额外补充,如果需要在鼠标经过图片时出现文字提示应该用属性title。
title属性有一个很好的用途,即为链接添加描述性文字,特别是当连接本身并不是十分清楚的表达了链接的目的。
这样就使得访问者知道那些链接将会带他们到什么地方,他们就不会加载一个可能完全不感兴趣的页面。
另外一个潜在的应用就是为图像提供额外的说明信息,比如日期或者其他非本质的信息。
title属性值可以比alt属性值设置的更长。
不过要注意的是,有些浏览器会截断过长的文字(比如工具提示或其他)。
比如Mozilla核心的浏览器只能显示最先的60个字符。
这被认为是一个Mozillabug,这是要注意的。
title属性的优先级高于alt。
但由于错误的引导,很多设计就在img标签内只加了alt属性。
1.alt和title对访问者都很重要(alt对搜索引擎会更重要一些),所以在定义img对象时,最好将alt和title属性都写全,保证在各种浏览器中都能正常使用。
2.在alt和title中包含关键字,并且二者内容最好不一样。
3.不要在alt和title中堆积关键字,否则可能会导致搜索引擎惩罚
举例:
I、
II、
III、
从这三个例子来看,III的描述是最好的。
I只是单纯的堆积关键词,而且会被搜索引擎认为是blackhat作弊,II只是一个关键词,对与型号、结构等未做描述,用户体验方面来说稍差一些。
通过正确的进行图片ALT代替属性的书写,可以帮助网站获得一个好的关键词排名,所以SEOer一定要重视这一点
2.2.2.15页脚信息
·页脚信息按照从上到下的排列次序为:
1.内部导航
2.外部导航
3.各类许可证、授权声明
4.英文版权信息“copyright”
5.中文版权信息
6.各类网络安全/工商证明/技术支持LOGO
·各链接间隔统一使用“|”:
·建议采用12号字,禁止使用加粗字体
2.2.3界面内部交互
界面内部的交互:
添加交互后还应保持页面的区块性,并且还要能体现主次关系。
即小区块的交互不能比它所属的大区块的交互还凸显。
2.2.3.1*用户的操作习惯
2.2.3.2*用户行为自由可控
用户的行为是可以按照自己的意愿控制的。
系统不得强迫用户执行任何操作。
1.如亮色按钮点击一定有响应,所有文字链接和图片链接都可用
2.任何一个页面都有清晰离开本页的按钮
3.不要欺骗用户,如:
明明是关闭按钮,点击后却是进入另一个页面
4.用户可以取消绝大部分操作:
如用户可以注销他的账号,删除上传的照片,编辑回复等等。
在设计功能的时候一定要考虑用户的删除功能。
2.2.3.3*容错性
用户在使用产品过程也是一个探索过程,产品应该允许用户犯错,而且必须给用户重新尝试的机会,让用户处于放松的心态。
设计过程中,首先要帮助用户避免出错,比如采用合适的控件(相同情况下选择控件比输入控件出错机会更小),给予输入帮助或启示。
用户出错后,需要提供撤销或返回功能,使用户返回到上一步操作重新探索。
出错反馈要亲和,避免责备用户或鲁莽的打断或推出产品,要礼貌的指出错误所在并提供有用的补救建议。
把用户经常容易犯的错都考虑到常规操作流程里,把可以确定的误操作,给其正确的操作结果。
让用户犯错不知不觉。
2.2.3.4*操作的灵活高效性
.优化操作流程:
依用户习惯的流程去设计操作流程,把相关的操作放在一起,不断优化操作流程,以主要任务为中心,围绕完成这个任务设置相应的操作,去掉多余或是无关操作
.减少误操作:
容易误操作的按钮尽量不要放在一起
.批量操作:
重复的操作可以考虑做成批量操作
.键盘操作:
如Enter,Esc等
.快捷按钮:
如返回顶部,返回底部,团购的浮动分类等
.简单的判断:
用户操作尽可能是不需要思考的,如果点击一个按钮需要思考3秒以上才确定则肯定不合格
.响应时间:
点击首页响应的时间不要超过5秒,其他页面的响应时间应短些。
有研究表明超过10秒绝大部分大部分用户会闪人的。
2.2.3.5*操作提示
1.预先信息提示
所有交互进行前需要提供给用户预先应该知道的提示信息。
a.表单提交类
表单提交的步骤,每个表单项的要求需要给出提示信息。
(如密码要多少多少位。
实时提示密码的强度等)
b.谨慎类操作
如果一个操作导致的结果会涉及到用户利益的,如扣除金币等。
都需要预先特别提示。
(如:
扣除金币的操作需要预先提示扣除金币数目,以及当前金币是否足够。
等等。
)
c.差异化规则
当一个功能的规则与用户习惯的规则具有一定的
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 原型 设计规范 网页 规范 用户 体验 交互
![提示](https://static.bdocx.com/images/bang_tan.gif)