产品设计交互规范Word文件下载.docx
《产品设计交互规范Word文件下载.docx》由会员分享，可在线阅读，更多相关《产品设计交互规范Word文件下载.docx（73页珍藏版）》请在冰点文库上搜索。
使用尽可能少的元素，不提供与当前任务无关的信息；
简明的文字表述：
文字表述必须简明扼要、清晰易明白，内涵丰富，并易于明白得和经历；
操作简单：
减少冗余的操作步骤。
幸免干扰和打断
幸免干扰：
明确用户在特定界面中的首要任务和目标，尽可能幸免该界面上的视觉噪声和其它干扰。
幸免打断：
让用户的操作连贯顺畅，幸免使用模态对话框（弹出的独占焦点的对话框）打断用户的工作。
减轻用户经历负担
认知明确：
产品中界面元素外观要明晰，易于辨不；
产品的逻辑意义要合理，导航要及时准确；
系统智能化：
提供默认值；
关心用户记住尽可能多的信息，最低限度地从用户那儿索取信息；
合理的隐喻和适应用法：
使用用户熟悉的，符合使用适应的隐喻，及通用的适应用法，为用户的任务提供直观易用的界面；
有效的启发：
提供具有明确引导性的启发来指导用户正确操作（启发：
某对象用来讲明自身能够如何使用的外观属性）。
及时有效的反馈
操作反馈：
对用户的每一步操作给出及时的反馈，告知用户成功做了某事；
受范性反馈：
界面对象的设计要在视觉上能提供即时响应鼠标操作行为的成效；
系统状态反馈：
系统需要用户等待或系统显现错误时，要及时让用户明白现状；
选择合适的反馈形式：
按照不同的情形，使用不同的反馈（如声音、触觉、语言、视觉反馈或是它们的组合）。
让用户放松心态，不怕犯错
承诺轻松的反向操作：
在适当的时候，尽量提供撤销功能，使用户能够返回到上一步操作并重新进行选择；
让用户能够重新开始：
提供“复原初始设置”选项，让用户敢于尝试；
幸免输入错误：
使用合适的选择控件（单选/多选/下拉列表/列表框等），提供最有代表性的默认选项，以及相应的输入关心，来方便用户准确输入信息；
提供校验等功能：
对用户的输入和选择等操作进行实时的判定，关心用户及时更正错误；
幸免埋怨：
当用户犯错时，幸免责备和鲁莽地打断与关闭，要礼貌地指出错误所在，并提供有用的复原建议。
交互通用规范
以下产品的交互设计通则，是所有的交互模式必须遵守的普遍规范，用以统一产品的交互行为。
（此部分规范将随着组件模式的持续扩充，进行逐步添加和完善。
）
受范性指示
受范性是指鼠标指针移过可点击区域时可点击区域的视觉变化，用以讲明该对象是可操作的以及何时能够进行操作。
对象对鼠标指针或手势滑动移动的响应必须即时有效；
响应形式必须明确清晰（如：
鼠标移过按钮或手势滑动，按钮有被按下的成效）；
受范性表现必须保持高度的一致：
同等功能和操作的元素受范性必须相同（如：
鼠标指向链接文字时都做同样的变化）；
在鼠标指针移或手势滑动时对象必须即时复原原先状态；
命令按钮也经常被显示为链接样式（文本+下划线），现在为了与一般的链接相区分，必须提供专门明显的不同于链接的受范性指示。
操作不可用状态
当用户在某些时候不能进行某些操作时，该命令按钮或命令文本（或其它的形式）在外观上应显示为不可用状态（如置灰），用来使界面稳固，使用户保持恒定和完整的思维模式，减少用户的认知负担。
显示为不可用状态的按钮或文本必须保持与可用状态的位置、大小、形状保持一致，仅色彩、灰度和立体成效等发生变化。
操作不可用的情形要紧包括：
菜单性质和导航性质的操作不可用时不能隐藏，应该显示为不可用状态，如下图所示：
图31菜单操作不可用
工具栏按钮不可用时不能隐藏，应该显示为不可用状态，如下图所示：
图32工具按钮不可用
当一个操作在用户进行了某行为（如填写或选择了某选项时）就变为可操作，则该操作不可用时不能隐藏，应该显示为不可用状态，如下图所示：
图33操作命令不可用
具体不可用状态成效见视觉规范。
有味高于功能
产品必须充满了趣味性，必须充满了COOL，才能形成良好的传播和口碑；
索然无趣的产品，最终由客户检验进而丢弃；
功能高于交互
明确的功能满足明确的需求，用户可不能在意炫酷的交互成效；
关键是功能是否能满足客户的潜在需求；
交互高于UI
设计的时候，第一追求便利、快速的特点；
然后要围绕具体的功能来实现UI，并不需要专门设置一个功能。
注意屏幕滚动
由于移动终端屏幕特性，尽可能减小单页面加载量，降低图片文件大小和数量，加快加载速度，方便用户体验。
尽可能减少垂直方向滚动，尽可能不超过两屏。
由于将导致专门恶劣的客户体验，尽可能禁止扫瞄器水平滚动操作。
尽能够隐藏不必要的按纽，突出重点，减少用户的摸索。
组件规范
表格
要紧应用于大批量数据的展现、查看、爱护等方面。
基础表格是表格本身最原始的一些属性集合，针对表格在不同场景下的状况，在扩展设计中会一一排列出来。
【设计意图】
合理有效的组织数据信息；
关心用户快速、有效的查看表格数据；
关心用户快速、准确的完成对表格的操作；
【应用条件】
适用于批量数据的展现和爱护；
【模式描述】
组成：
表格标题+表格表头+表格行间隔线+表格行
如下图所示：
图41基础表格
应用规范：
表格的标题：
标题文字要与其它文字有所区不，如：
加粗显示；
标题文字内容以“内容+操作”的形式描述，标题文字前需要有相应的标题图标，文字与图标之间间隔一定的距离，如：
一个半角空格；
具体视觉成效参见《界面视觉规范》。
表格的表头与表格主体在外观上要有区分；
表格行间隔线：
表格的主体内容用表格线区分；
表格线的粗细要适中，如1px。
【扩展描述】
按照顾用场景的不同，能够对基础表格进行扩展；
能够为表格增加数据选择区、命令按钮区、操作按钮区、表格主体区、翻页区、操作按钮区。
整体成效如下图所示：
图42表格操作区分布
1）标题列排序：
表格列标题能够排序时，表格的列标题要体现出当前排序状态，并要区分于其他列标题显示，如：
背景和图标高亮显示；
如下图所示：
图43标题列排序
表格列标题进行切换时，原列标题复原初始状态，切换到的列标题显示为排序状态；
2）表格行选中操作：
表格中的第一列，既可表示对行的选择如复选框；
同时还能够用图标标示数据状态；
当两者都有时，显示复选框在上，图标被覆盖；
在对表格行进行选中（点选行的任意位置即可选中）时，此行要高亮显示，同时此行前复选框为选中状态，同时还能够进行多行选择；
需要全选时，只需勾选列标题中的复选框即可选中当前列表的全部行数据。
3）数据选择区：
当数据内容能够明确的按其状态、类不进行划分时，能够应用页签的形式来进行设计；
页签总宽度在表格宽度的75%之内为佳，超出此范畴时，需应用其他设计形式如下拉框显示的形式等；
图44数据选择区
当前分类状态的的页签要高亮显示，要明显区不于其他页签；
页签内的文字，需要简单明了，相同内容的文字省略；
如上图中未处理（订单）、处理中（订单）、处理完成（订单）；
应用页签设计时，页签类不要划分明确合理；
如按照数据状态或分类进行划分。
4）命令按钮区：
针对整体页面进行操作或者对表格整体进行操作的按钮放置在此区域内；
如：
导入、导出、新增等；
按钮的其它细则参见《界面视觉规范》。
5）操作按钮区：
对表格主体的数据进行操作的按钮放置在此区域。
删除、公布、下架、上架、审核等；
当列表的数据超过一屏显示时，在列表上方也要显现操作按钮区，方便用户对列表进行操作；
图45操作按钮区
6）翻页区：
当列表中的数据量超过默认的数据显示条数时，应用翻页模式来处理多条数据的显示；
翻页在列表下方居中显示；
翻页的详细功能和模式参见“翻页模式组件规范”。
7）单条数据操作区：
对行数据进行操作的按钮要与操作按钮区的按钮视觉上要有所区分；
尽量不要在此处安排太多的操作，太多的操作给使用者过多的判定负担。
应考虑其他的界面布局方式。
8）表格列标题区：
当表格的数据列较多，屏幕显示差不多达到最大限度，而这些数据列又必不可少时，承诺通过鼠标拖动的方式来对数据列的宽度进行改变；
同时能够使用横向滚动条；
调整列宽度时，要在整体表格边线内进行，以免整体页面变形；
数据项内容显示部分太长时，省略余外部分并加省略号；
鼠标指针停靠时，全部详细内容显示；
9）数据条目设置区：
默认显示当前页面所能显示的最大数据条目数；
10条/页；
还要提供几个数值选项，供用户选择；
20、30、50；
单元格数据
单元格数据展现
以单元格为单位的数据展现是指应用表格的单元格来描述每个数据对象的展现形式。
让用户更加清晰的扫瞄信息；
方便查看选中单元格的信息。
适用于多数据的查看、扫瞄和操作；
例如：
如短信中的收信人、邮件中的收件人等。
图46单元格数据展现
鼠标通过或选中此类表格的单元格时，行或列的背景色高亮显示。
此类单元格请支持按“Shift”键进行连续选定，整行整列选定时要有箭头图标反馈给用户。
此类单元格请支持按“Ctrl”键进行间断选定。
注意事项：
数据类表格是指表格所描述内容是由多个数据或一组对象（每个对象至少包含两个数据项）组成，关于展现某些信息的表格不属于数据类表格。
【扩展描述】
通讯录
通讯录是以单元格数据展现形式为基础的，集添加删除修改等功能于一体的组件。
用户可不能再输入通讯录信息之间分隔符，更可不能显现由于分隔符输入不正确而导致的错误操作；
为用户显示人名，而不显示地址，方便了查看，同时增加了自动匹配，查找，将新信息增加到通讯录和导出通讯录的功能。
适用于需要用户多次填写同类信息的地点。
竞价通中的“关键词治理”；
日期格式中年份的展现方式；
邮件、短信产品的收信人列表。
组成：
图47通讯录1
a）通讯录中无此信息的高亮反馈
通讯录中存在姓名时表格内只显示姓名；
通讯录中没有姓名只有手机号码（或email地址）时则显示号码（或email地址）；
姓名、手机号码（或email地址）两者都无的单元格自动高亮反馈给用户。
b）默认显示
默认显示表格的一个空行；
图48通讯录2
整行单元格数据被填满时，表格自动增加一行；
图49通讯录3
增加至3行时，显现滚动条；
如下图：
图410通讯录4
c）自动匹配
支持手动输入，能够输入人名或地址；
输入地址时自动匹配通讯录中对应的人名；
d）快捷操作
为高级用户提供快捷操作,输入新人名或新地址时，能够将其添加到通讯录。
图411通讯录5
使用时遇到两个人同名时能够采纳“姓名（号码）”的方式显示。
无
信息列表
信息列表是显示单列信息集合的一种视图展现。
利于信息的展现，方便使用者检索信息；
快速定位信息条目。
单列信息集合；
索引类的信息列表；
信息列表多应用于索引类的信息列表，如：
新闻列表、名目等。
项目符号、列表行，如下图所示：
图412信息列表
项目符号能够是固定的符号，也能够是具有意义的图标；
项目符号如果是图标，图标必须与应用场景相符，尽量不使用无意义的仅为装饰作用的视觉成效明显的图标作为项目符号；
列表行的内容，能够为文字和图标，文字一样为简单的标题；
列表行的文字内容应该简单易明白，能够明确的反应所要讲明的信息。
列表行内容如果折行，行距必须小于两个记录行之间的段距；
由于信息列表多为展现信息的条目，因此信息列表的行间距要有一点留白，不要给使用者造成视觉上的负担。
列表标题、单选按钮、多选按钮、分隔线、翻页，如下图所示：
图413信息列表2
列表标题是对列表中的信息内容的概括性标题（标题的写法请参见“标题”控件的描述）；
单选按钮，多选按钮在需要时替换项目符号的位置；
分隔线：
在记录行太多时需要提供分隔线（请参见“分隔线”控件中的有关描述）；
翻页（请参见“翻页”组件中的有关描述）。
编号和序号
编号
用来标识某一个对象的唯独号码。
一个编号就代表着一个对象。
使用编号能够更好的关心用户经历和或治理对象。
图414编号示例
更好的方便用户经历和治理对象；
合理的使用编号，能方便用户更好的进行沟通；
需要用唯独号码来标识对象时；
具有真实、合理、有效的意义；
订单列表中订单的编号、酒店客房治理中客房的实际编号等等；
编号必需代表一个对象，不要让编号无意义的存在；
如果用户更关注编号，也确实是讲编号关于用户是第一位的，则必须提供编号。
例如，酒店系统中对房号的关注就比人名要重要，因此编号的视觉层次应该突出。
如果用户不常使用编号而通常更关注不的属性；
例如人名、物品名等，能够默认不显示编号，当用户需要时能够查到编号。
序号
序号是用来标识一组有序对象的数字，它具有先后顺序的含义。
图415序号示例
使用户更好了解对象的先后顺序或按一定的顺序去了解对象；
更好的展现有先后顺序的数据；
需要标识一组有序对象时；
如歌曲排行旁、热销商品排行、点击率排行等设计中；
序号必需代表一个对象在集体中的序列，不要让序号没有意义。
如果用户关注对象的排列顺序，则必须提供序号。
如果用户全然不关注对象的顺序，请不要使用序号，如此会混淆用户的注意。
图416错误示例
注册表单
注册表单应用于对用户的输入格式有一定的要求的设计中，关心用户更好的完成填写表单的操作。
快速高效的关心用户完成注册；
尽量减少用户犯错；
在用户出错后，友好的有效的告知错误，并提供解决方案；
给用户提供及时有效的反馈信息。
超过5项表单信息填写修改时；
用户出错的频率较高时；
系统对数据的要求比较严格时；
应用于填写注册信息、修改密码等设计中。
各输入控件+必填项指示+格式要求提示+对错判定反馈+提交按钮
图417注册表单
表单的设计应该遵循简洁的设计原则。
在注册填写时，尽可能的只提供必须填写的选项给用户，其他非必填项，能够通过选填或者在日后需要时再进行完善的方式来完成。
a）信息输入对错判定：
信息输入正确时，要给与填写正确的反馈；
信息输入错误的时候，要给出错误的反馈，并给出具体的错误缘故要高亮反馈，同时注释语位置整体给出反馈提示。
图418信息输入对错判定
用户在输入错误时，要针对不同的输入内容给出相应明确的错误提示，必要的时候要提出简要的解决方法提示。
在用户名填写时，可能显现的错误提示；
您输入的用户名过短！
您输入的用户名中不能包含字符“&
（等等）”！
你输入的用户名“xxx”差不多被占用,请重新输入！
b）输入格式约定（注释文本）：
当用户需要输入某一项时，相应注释文本才显示出来；
关于表单中的某些内容除了需要给予用户正确填写格式的提示外还需要简要讲明填写的必要性，如下图所示：
图419
3）验证码：
验证码中的图示字母是随机产生的，但要注意尽可能幸免显示一些不易区分的字母和数字，让用户难以辨不（如：
“0和o”），如下图所示：
图420验证码
验证码图示，要求相对清晰容易辨不，验证码的位数操纵在4位为最佳；
验证码由系统随机产生，在个不情形下字母和数字可能会难以辨不，现在用户能够点击链接文字（看不清，换一张）来更换验证码，如下图所示：
图421验证码示例
用户在输入框内输入验证码后，要及时给出反馈提示（不要到提交时才给出提示），如下图所示：
图422验证码错误判定
4）提交按钮：
存在验证或提交按钮时，只有所验证或提交的部分输入完毕同时正确后，按钮才能由置灰状态变为可用状态，如下图所示：
图423注册按钮
5）成功告知
表单最终填写提交完成后，要给出“提交成功或注册成功”的有关提示，明确告知用户此操作正确完成；
6）协议
单击“我同意”意味着：
您同意并同意服务协议和隐私声明。
密码强弱提示
当用户账号的保密性相对较高时，能够应用密码的强弱提示来保证密码的复杂度。
图424密码强弱
在输入密码时，旁边显示注释文本：
明确注明密码强弱的规则和提示，如下图所示：
图425密码强弱提示
当用户输入的内容错误或不完全正确时，要求提示的反馈信息必须提示明确，同时给出正确的解决方法，如下图所示：
图426密码强弱提示对比表
注册进度提示
按照产品的特性，要求用户填写的注册表单较长、步数较多时，需要给出注册的进度条提示，明确的告知当前注册的进度。
分组线
注册内容较长时，要用分组线，对要求用户输入的选项进行分类分隔显示（具体使用参见“分组线规则”）。
【注意事项】
例如婚介交友等场景当对用户信息要求严格时，能够应用注册向导引导注册过程。
如果表单中需要填写的数据项较多，页面较长，必填项又比较分散且数量较少时，必须使用行的背景颜色来区分必填项与非必填项。
联系方式
联系方式是对表单中提供给用户填写详细联系方式一种组件规定。
关心用户有效、快速的填写联系方式；
减少用户输入错误的几率。
需要用户填写详细联系方式时。
网上注册，网上购物填写发货地址。
各输入控件，包括：
“国家地区”、“省份”、“都市”、“联系电话”、“传真号码”、“手机号码”、“联系地址”、“邮政编码”等（按照具体需要再增加）。
图427联系方式
“国家地区”、“省份”和“都市”要有连动关系；
“国家地区”：
下拉列表选框；
“省份”：
下拉列表选框，与选择的国家连动（选择“国家地区”，“省份”下拉框中选项相应变化）；
如果在“省份”中差不多选择了直辖市，如“北京”，则后面的“都市”不用再选，自动置灰；
“都市”：
下拉列表选框，与选择的都市连动（选择“省份”，“都市”下拉框中选项相应变化）。
都市下拉列表选项的最后一项为“其他地区”，如下图所示：
图428其他地区
“联系电话”、“传真号码”和“手机号码”必须拆分成几个字段；
“联系电话”：
四个输入框字段，分不为：
国家代码（可选）—区号—电话号码—分机号；
“传真号码”：
三个输入框字段，分不为：
国家代码（可选）—区号—传真电话；
“手机号码”：
两个输入框字段，分不为：
国家代码（可选）—手机号；
“国家代码”此项可按照具体产品的销售人群不同自行选择是否保留；
图429正确示例图
图430错误示例图
各字段分不与上面的“国家地区”、“省份”、“都市”连动：
“国家地区”和“省份”、“都市”选择后，国家代码和区号自动显示，如下图所示：
图431联系方式标注
“联系地址”：
一个输入框，等待用户输入文本；
“邮政编码”：
一个输入框（6个字符），等待用户输入文本；
除“国家地区”、“省份”和“都市”是只能让用户选择外，其他的输入框均可手动输入和编辑，用户能够按照自己的需要进行修改。
邮政编码关心如下图所示：
图432邮政编码
用户手动输入邮政编码时，系统按照“省份”、“都市”给出一些不同地区邮政编码的关联提示，供用户参考，
用户选择邮政编码输入框后面“查询邮政编码”链接（如下图所示），可点击打开新窗口查看本市的邮政编码。
图433查询邮政编码
各输入项的先后顺序，按照各字段的逻辑顺序和参照关系排列的同时，要综合考虑用户的输入操作（尽量将数字输入的放在一起，将汉字输入的放在一起，以幸免用户在键盘上频繁切换输入位置）；
系统自动提供的电话区号和邮政编码等，必须保证是与国家、省、市相对应的最新的和准确的数据；
用户用tab键切换不同的输入区域时，输入区域中本来用的数据显示为选中状态（不清空）。
图片裁切
固定尺寸
要紧应用于需要用户上传固定图片尺寸的设计中，在上传时提供简单裁切的功能。
上传后能够让用户得到比较理想的图片成效。
能够进行简单图片裁切处理，而不需要使用其它的图片处理软件
快捷方便的裁切出用户想要的图片；
上传的图片限制固定尺寸时；
系统对图片大小的约束严格，在200k以内时；
上传用户头像、产品图片、信息图片等
预览区+裁切框+放大缩小提示标+滑杆+图片上传区域+清空按钮+数据约束如下图所示：
图434固定尺寸图片裁切
滑杆、缩放图标、清空按钮默认处于不可用状态；
扫瞄上传图片后，滑杆、缩放图标、清空按钮高亮显示；
扫瞄上传一张图片后，图片全部显示在预览区内；
当上传的图片尺寸小于裁切区尺寸时，系统自动按照裁切区的尺寸成比例的放大图片后显示在裁切区内；
鼠标向左拖动滑块缩小图片，当
升级会员 