产品设计交互规范.doc
《产品设计交互规范.doc》由会员分享,可在线阅读,更多相关《产品设计交互规范.doc(77页珍藏版)》请在咨信网上搜索。
1、广传电子商务有限公司 文档密级:内部公开产品设计交互规范 1407H 盛腾飞目录目录21概述31.1规范的目的41.2规范适用的范围41.3规范适用的人群42基本原则52.1一致性52.2简洁性52.3避免干扰和打断52.4减轻用户记忆负担52.5及时有效的反馈52.6让用户放松心态,不怕犯错63产品交互通用规范73.1受范性指示73.2操作不可用状态74组件规范94.1表格94.2单元格数据144.2.1单元格数据展示144.2.2通讯录154.3信息列表174.4编号和序号194.4.1编号194.4.2序号204.5注册表单224.6联系方式284.7图片裁切324.7.1固定尺寸324
2、.7.2自定义尺寸344.8翻页354.9日期输入394.9.1通过日历选择日期394.9.2年份跨度较大时的日期选择434.9.3等量条目分隔线454.10高级加密484.11进度条514.12图形化面包屑534.13星级评分544.14保留图标574.15弹出层594.15.1非独占焦点层594.15.2独占焦点层604.15.3局部独占焦点层624.16搜索634.16.1模糊搜索634.16.2精确搜索654.17数据添加684.17.1添加单个文件684.17.2添加多个文件694.17.3添加行734.18排序731 概述规范的制定采用UCD(以用户为中心的设计)方法,遵循ISO9
3、241-11部分标准的要求。设计过程以用户的使用习惯和心理需求作为出发点,在认真研究并参考了国内外各种优秀设计的基础上,制定出了适合我集团应用服务产品的设计规范。此外,为保证规范具有良好的可用性和广泛的适用性,UE研究室对设计出的每个模式都进行了严格的用户测试,并对各组件采取了不同应用场景的测试。该规范从产品交互的通用规则和具体组件的交互模式两个方面进行了规定。在每个组件规范中,给出了模式描述和扩展描述的规范描述,供不同的应用类型和使用场景选择、组合使用。1.1 规范的目的 l 在产品开发过程中,给不同部门的相关人员提供统一的规范与指导,使沟通与合作顺利有效地进行,以保证产品界面的最终规范化实
4、现;l 从一点一滴入手解决公司产品的可用性问题:使操作更人性化,减轻用户的认知负担,改善产品的用户体验,提升产品的市场竞争力;l 使产品在界面外观和操作行为上形成一致,加强公司产品的品牌化特征。1.2 规范适用的范围广传项目部内的所有产品。1.3 规范适用的人群 参与产品设计的所有人员、前端开发人员及测试人员等。 注:从正式发文之日起属于新项目范畴的必须遵循此规范,对于已有项目进行重大版本升级的项目要遵循此规范。 772 基本原则以下原则主要用来说明此规范的指导思想与设计依据。简单描述如下,以供该文档的阅读者参考和使用。具体的原则描述请参见界面设计指南。2.1 一致性l 视觉一致:在同一产品内
5、,所有的同类界面元素在相同的应用环境下,界面外观在视觉上应该保持一致;否则,界面外观要予以区分;l 操作行为一致:类似场景的界面设计,其操作方式必须保持一致;当操作行为相同时要保持视觉上的一致;当操作行为不同时,在视觉上就一定要有所区别; l 外观与使用者的预期一致:保持对象与其行为相符,保持不同作用的对象外观的不同;视觉元素的外观及其操作结果,必须与用户的心理认知相符。2.2 简洁性l 减轻视觉负担:使用尽可能少的元素,不提供与当前任务无关的信息;l 简明的文字表述:文字表述必须简明扼要、清晰易懂,内涵丰富,并易于理解和记忆;l 操作简单:减少冗余的操作步骤。2.3 避免干扰和打断l 避免干
6、扰:明确用户在特定界面中的首要任务和目标,尽可能避免该界面上的视觉噪声和其它干扰。l 避免打断:让用户的操作连贯顺畅,避免使用模态对话框(弹出的独占焦点的对话框)打断用户的工作。2.4 减轻用户记忆负担l 认知明确:产品中界面元素外观要明晰,易于辨别;产品的逻辑意义要合理,导航要及时准确;l 系统智能化:提供默认值;帮助用户记住尽可能多的信息,最低限度地从用户那里索取信息;l 合理的隐喻和习惯用法:使用用户熟悉的,符合使用习惯的隐喻,及通用的习惯用法,为用户的任务提供直观易用的界面;l 有效的启示:提供具有明确引导性的启示来指导用户正确操作(启示:某对象用来说明自身可以如何使用的外观属性)。2
7、.5 及时有效的反馈l 操作反馈:对用户的每一步操作给出及时的反馈,告知用户成功做了某事;l 受范性反馈:界面对象的设计要在视觉上能提供即时响应鼠标操作行为的效果;l 系统状态反馈:系统需要用户等待或系统出现错误时,要及时让用户明白现状;l 选择合适的反馈形式:根据不同的情况,使用不同的反馈(如声音、触觉、语言、视觉反馈或是它们的组合)。2.6 让用户放松心态,不怕犯错 l 允许轻松的反向操作:在适当的时候,尽量提供撤销功能,使用户可以返回到上一步操作并重新进行选择;l 让用户可以重新开始:提供“恢复初始设置”选项,让用户敢于尝试;l 避免输入错误:使用合适的选择控件(单选/多选/下拉列表/列
8、表框等),提供最有代表性的默认选项,以及相应的输入帮助,来方便用户准确输入信息;l 提供校验等功能:对用户的输入和选择等操作进行实时的判断,帮助用户及时更正错误;l 避免埋怨:当用户犯错时,避免责怪和鲁莽地打断与关闭,要礼貌地指出错误所在,并提供有用的恢复建议。3 交互通用规范以下产品的交互设计通则,是所有的交互模式必须遵守的普遍规范,用以统一产品的交互行为。(此部分规范将随着组件模式的不断扩充,进行逐步添加和完善。)3.1 受范性指示受范性是指鼠标指针移过可点击区域时可点击区域的视觉变化,用以说明该对象是可操作的以及何时可以进行操作。l 对象对鼠标指针或手势滑动移动的响应必须即时有效;l 响
9、应形式必须明确清晰(如:鼠标移过按钮或手势滑动,按钮有被按下的效果);l 受范性表现必须保持高度的一致:同等功能和操作的元素受范性必须相同(如:鼠标指向链接文字时都做同样的变化);l 在鼠标指针移或手势滑动时对象必须即时恢复原来状态;l 命令按钮也经常被显示为链接样式(文本+下划线),此时为了与普通的链接相区分,必须提供非常明显的不同于链接的受范性指示。3.2 操作不可用状态当用户在某些时候不能进行某些操作时,该命令按钮或命令文本(或其它的形式)在外观上应显示为不可用状态(如置灰),用来使界面稳定,使用户保持恒定和完整的思维模式,减少用户的认知负担。l 显示为不可用状态的按钮或文本必须保持与可
10、用状态的位置、大小、形态保持一致,仅色彩、灰度和立体效果等发生变化。l 操作不可用的情况主要包括: 菜单性质和导航性质的操作不可用时不能隐藏,应该显示为不可用状态,如下图所示:图 31菜单操作不可用 工具栏按钮不可用时不能隐藏,应该显示为不可用状态,如下图所示: 图 32 工具按钮不可用 当一个操作在用户进行了某行为(如填写或选择了某选项时)就变为可操作,则该操作不可用时不能隐藏,应该显示为不可用状态,如下图所示:图 33操作命令不可用注:具体不可用状态效果见视觉规范。3.3 有趣高于功能产品必须充满了趣味性,必须充满了COOL,才能形成良好的传播和口碑;索然无趣的产品,最终由客户检验进而丢弃
11、;3.4 功能高于交互明确的功能满足明确的需求,用户不会在意炫酷的交互效果;关键是功能是否能满足客户的潜在需求;3.5 交互高于UI设计的时候,首先追求便捷、快速的特点;然后要围绕具体的功能来实现UI,并不需要专门设立一个功能。 3.6 注意屏幕滚动由于移动终端屏幕特性,尽可能减小单页面加载量,降低图片文件大小和数量,加快加载速度,方便用户体验。尽可能减少垂直方向滚动,尽可能不超过两屏。由于将导致非常恶劣的客户体验,尽可能禁止浏览器水平滚动操作。尽可以隐藏不必要的按纽,突出重点,减少用户的思考。4 组件规范4.1 表格主要应用于大批量数据的展示、查看、维护等方面。基础表格是表格本身最原始的一些
12、属性集合,针对表格在不同场景下的状况,在扩展设计中会一一罗列出来。【设计意图】 合理有效的组织数据信息; 帮助用户快速、有效的查看表格数据; 帮助用户快速、准确的完成对表格的操作;【应用条件】 适用于批量数据的展示和维护;【模式描述】组成: 表格标题 + 表格表头+ 表格行间隔线 + 表格行如下图所示:图 41 基础表格应用规范:l 表格的标题:标题文字要与其它文字有所区别,如:加粗显示;标题文字内容以“内容+操作”的形式描述,标题文字前需要有相应的标题图标,文字与图标之间间隔一定的距离,如:一个半角空格;具体视觉效果参见界面视觉规范。l 表格的表头与表格主体在外观上要有区分;l 表格行间隔线
13、:表格的主体内容用表格线区分;表格线的粗细要适中,如1px。 【扩展描述】 根据应用场景的不同,可以对基础表格进行扩展;可以为表格增加数据筛选区、命令按钮区、操作按钮区、表格主体区、翻页区、操作按钮区。整体效果如下图所示:图 42 表格操作区分布1)标题列排序: l 表格列标题可以排序时,表格的列标题要体现出当前排序状态,并要区分于其他列标题显示,如:背景和图标高亮显示; 如下图所示: 图 43 标题列排序l 表格列标题进行切换时,原列标题恢复初始状态,切换到的列标题显示为排序状态;2)表格行选中操作:l 表格中的第一列,既可表示对行的选择如复选框;同时还可以用图标标示数据状态;当两者都有时,
14、显示复选框在上,图标被覆盖;l 在对表格行进行选中(点选行的任意位置即可选中)时,此行要高亮显示,同时此行前复选框为选中状态,同时还可以进行多行选择;需要全选时,只需勾选列标题中的复选框即可选中当前列表的全部行数据。3)数据筛选区: l 当数据内容可以明确的按其状态、类别进行划分时,可以应用页签的形式来进行设计;l 页签总宽度在表格宽度的75%之内为佳,超出此范围时,需应用其他设计形式如下拉框显示的形式等; 如下图所示: 图 44 数据筛选区l 当前分类状态的的页签要高亮显示,要明显区别于其他页签;l 页签内的文字,需要简单明了,相同内容的文字省略;如上图中未处理(订单)、处理中(订单)、处理
15、完成(订单);l 应用页签设计时,页签类别要划分明确合理;如按照数据状态或分类进行划分。4)命令按钮区: l 针对整体页面进行操作或者对表格整体进行操作的按钮放置在此区域内;如:导入、导出、新增等;l 按钮的其它细则参见界面视觉规范。5)操作按钮区: l 对表格主体的数据进行操作的按钮放置在此区域。如:删除、发布、下架、上架、审核等;l 当列表的数据超过一屏显示时,在列表上方也要显现操作按钮区,方便用户对列表进行操作;如下图所示:图 45 操作按钮区6)翻页区: l 当列表中的数据量超过默认的数据显示条数时,应用翻页模式来处理多条数据的显示;l 翻页在列表下方居中显示;l 翻页的详细功能和模式
16、参见“翻页模式组件规范”。7)单条数据操作区: l 对行数据进行操作的按钮要与操作按钮区的按钮视觉上要有所区分; l 尽量不要在此处安排太多的操作,太多的操作给使用者过多的判断负担。应考虑其他的界面布局方式。8)表格列标题区: l 当表格的数据列较多,屏幕显示已经达到最大限度,而这些数据列又必不可少时,允许通过鼠标拖动的方式来对数据列的宽度进行改变;同时可以使用横向滚动条;l 调整列宽度时,要在整体表格边线内进行,以免整体页面变形;l 数据项内容显示部分太长时,省略多余部分并加省略号;鼠标指针停靠时,全部详细内容显示;9)数据条目设置区: l 默认显示当前页面所能显示的最大数据条目数;如:10
17、条/页;l 还要提供几个数值选项,供用户选择;如:20、30、50;4.2 单元格数据4.2.1 单元格数据展示以单元格为单位的数据展示是指应用表格的单元格来描述每个数据对象的展示形式。【设计意图】 让用户更加清晰的浏览信息; 方便查看选中单元格的信息。【应用条件】适用于多数据的查看、浏览和操作;例如:如短信中的收信人、邮件中的收件人等。【模式描述】组成:如下图所示:图 46 单元格数据展示应用规范:l 鼠标经过或选中此类表格的单元格时,行或列的背景色高亮显示。l 此类单元格请支持按“Shift”键进行连续选定,整行整列选定时要有箭头图标反馈给用户。l 此类单元格请支持按“Ctrl”键进行间断
18、选定。注意事项:数据类表格是指表格所描述内容是由多个数据或一组对象(每个对象至少包含两个数据项)组成,对于展示某些信息的表格不属于数据类表格。【扩展描述】 4.2.2 通讯录 通讯录是以单元格数据展示形式为基础的,集添加删除修改等功能于一体的组件。【设计意图】 用户不会再输入通讯录信息之间分隔符,更不会出现由于分隔符输入不正确而导致的错误操作; 为用户显示人名,而不显示地址,方便了查看,同时增加了自动匹配,查找,将新信息增加到通讯录和导出通讯录的功能。【应用条件】 适用于需要用户多次填写同类信息的地方。如:竞价通中的“关键词管理”;日期格式中年份的展现方式;邮件、短信产品的收信人列表。【模式描
19、述】 组成: 如下图所示:图 47 通讯录1应用规范:a)通讯录中无此信息的高亮反馈l 通讯录中存在姓名时表格内只显示姓名;l 通讯录中没有姓名只有手机号码(或email地址)时则显示号码(或email地址);l 姓名、手机号码(或email地址)两者都无的单元格自动高亮反馈给用户。 b)默认显示 默认显示表格的一个空行;如下图所示: 图 48 通讯录2 整行单元格数据被填满时,表格自动增加一行;如下图所示: 图 49 通讯录3 增加至3行时,出现滚动条;如下图: 图 410 通讯录4 c)自动匹配支持手动输入,可以输入人名或地址;输入地址时自动匹配通讯录中对应的人名; d)快捷操作为高级用户
20、提供快捷操作,输入新人名或新地址时,可以将其添加到通讯录。如下图:图 411通讯录5注意事项: 使用时遇到两个人同名时可以采用“姓名(号码)”的方式显示。【扩展描述】 无4.3 信息列表信息列表是显示单列信息集合的一种视图展示。 【设计意图】 利于信息的展示,方便使用者检索信息; 快速定位信息条目。【应用条件】 单列信息集合; 索引类的信息列表;例如:信息列表多应用于索引类的信息列表,如:新闻列表、目录等。【模式描述】组成:项目符号、列表行,如下图所示:图 412 信息列表应用规范:l 项目符号可以是固定的符号,也可以是具有意义的图标;l 项目符号如果是图标,图标必须与应用场景相符,尽量不使用
21、无意义的仅为装饰作用的视觉效果显著的图标作为项目符号;l 列表行的内容,可以为文字和图标,文字一般为简单的标题;l 列表行的文字内容应该简单易懂,能够明确的反应所要说明的信息。l 列表行内容如果折行,行距必须小于两个记录行之间的段距;l 由于信息列表多为展示信息的条目,因此信息列表的行间距要有一点留白,不要给使用者造成视觉上的负担。【扩展描述】组成:列表标题、单选按钮、多选按钮、分隔线、翻页,如下图所示:图 413 信息列表 2应用规范:l 列表标题是对列表中的信息内容的概括性标题(标题的写法请参见“标题”控件的描述);l 单选按钮,多选按钮在需要时替换项目符号的位置;l 分隔线:在记录行太多
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 产品设计 交互 规范
1、咨信平台为文档C2C交易模式,即用户上传的文档直接被用户下载,收益归上传人(含作者)所有;本站仅是提供信息存储空间和展示预览,仅对用户上传内容的表现方式做保护处理,对上载内容不做任何修改或编辑。所展示的作品文档包括内容和图片全部来源于网络用户和作者上传投稿,我们不确定上传用户享有完全著作权,根据《信息网络传播权保护条例》,如果侵犯了您的版权、权益或隐私,请联系我们,核实后会尽快下架及时删除,并可随时和客服了解处理情况,尊重保护知识产权我们共同努力。
2、文档的总页数、文档格式和文档大小以系统显示为准(内容中显示的页数不一定正确),网站客服只以系统显示的页数、文件格式、文档大小作为仲裁依据,平台无法对文档的真实性、完整性、权威性、准确性、专业性及其观点立场做任何保证或承诺,下载前须认真查看,确认无误后再购买,务必慎重购买;若有违法违纪将进行移交司法处理,若涉侵权平台将进行基本处罚并下架。
3、本站所有内容均由用户上传,付费前请自行鉴别,如您付费,意味着您已接受本站规则且自行承担风险,本站不进行额外附加服务,虚拟产品一经售出概不退款(未进行购买下载可退充值款),文档一经付费(服务费)、不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
4、如你看到网页展示的文档有www.zixin.com.cn水印,是因预览和防盗链等技术需要对页面进行转换压缩成图而已,我们并不对上传的文档进行任何编辑或修改,文档下载后都不会有水印标识(原文档上传前个别存留的除外),下载后原文更清晰;试题试卷类文档,如果标题没有明确说明有答案则都视为没有答案,请知晓;PPT和DOC文档可被视为“模板”,允许上传人保留章节、目录结构的情况下删减部份的内容;PDF文档不管是原文档转换或图片扫描而得,本站不作要求视为允许,下载前自行私信或留言给上传者【精****】。
5、本文档所展示的图片、画像、字体、音乐的版权可能需版权方额外授权,请谨慎使用;网站提供的党政主题相关内容(国旗、国徽、党徽--等)目的在于配合国家政策宣传,仅限个人学习分享使用,禁止用于任何广告和商用目的。
6、文档遇到问题,请及时私信或留言给本站上传会员【精****】,需本站解决可联系【 微信客服】、【 QQ客服】,若有其他问题请点击或扫码反馈【 服务填表】;文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“【 版权申诉】”(推荐),意见反馈和侵权处理邮箱:1219186828@qq.com;也可以拔打客服电话:4008-655-100;投诉/维权电话:4009-655-100。