第08章 产品设计交互规范.doc

产品设计交互规范 常州广传网络技术有限公司 编写：王英 2013年11月 目录 目录 2 1 概述 3 1.1 规范的目的 4 1.2 规范适用的范围 4 1.3 规范适用的人群 4 2 基本原则 5 2.1 一致性 5 2.2 简洁性 5 2.3 避免干扰和打断 5 2.4 减轻用户记忆负担 5 2.5 及时有效的反馈 5 2.6 让用户放松心态，不怕犯错 6 3 产品交互通用规范 7 3.1 受范性指示 7 3.2 操作不可用状态 7 4 组件规范 9 4.1 表格 9 4.2 单元格数据 14 4.2.1 单元格数据展示 14 4.2.2 通讯录 15 4.3 信息列表 17 4.4 编号和序号 19 4.4.1 编号 19 4.4.2 序号 20 4.5 注册表单 22 4.6 联系方式 28 4.7 图片裁切 32 4.7.1 固定尺寸 32 4.7.2 自定义尺寸 34 4.8 翻页 35 4.9 日期输入 39 4.9.1 通过日历选择日期 39 4.9.2 年份跨度较大时的日期选择 43 4.9.3 等量条目分隔线 45 4.10 高级加密 48 4.11 进度条 51 4.12 图形化面包屑 53 4.13 星级评分 54 4.14 保留图标 57 4.15 弹出层 59 4.15.1 非独占焦点层 59 4.15.2 独占焦点层 60 4.15.3 局部独占焦点层 62 4.16 搜索 63 4.16.1 模糊搜索 63 4.16.2 精确搜索 65 4.17 数据添加 68 4.17.1 添加单个文件 68 4.17.2 添加多个文件 69 4.17.3 添加行 73 4.18 排序 73 概述 规范的制定采用UCD（以用户为中心的设计）方法，遵循ISO9241-11部分标准的要求。设计过程以用户的使用习惯和心理需求作为出发点，在认真研究并参考了国内外各种优秀设计的基础上，制定出了适合我集团应用服务产品的设计规范。此外，为保证规范具有良好的可用性和广泛的适用性，UE研究室对设计出的每个模式都进行了严格的用户测试，并对各组件采取了不同应用场景的测试。 该规范从产品交互的通用规则和具体组件的交互模式两个方面进行了规定。在每个组件规范中，给出了模式描述和扩展描述的规范描述，供不同的应用类型和使用场景选择、组合使用。 规范的目的 在产品开发过程中，给不同部门的相关人员提供统一的规范与指导，使沟通与合作顺利有效地进行，以保证产品界面的最终规范化实现； 从一点一滴入手解决公司产品的可用性问题：使操作更人性化的认知负担提升产品的市场竞争力 基本原则 以下原则主要用来说明此规范的指导思想与设计依据。简单描述如下，以供该文档的阅读者参考和使用。具体的原则描述请参见《界面设计指南》。 一致性 视觉一致：在同一产品内，所有的同类界面元素在相同的应用环境下，界面外观在视觉上应该保持一致；否则，界面外观要予以区分； 操作行为一致：类似场景的界面设计，其操作方式必须保持一致；当操作行为相同时要保持视觉上的一致；当操作行为不同时，在视觉上就一定要有所区别； 外观与使用者的预期一致：保持对象与其行为相符，保持不同作用的对象外观的不同；视觉元素的外观及其操作结果，必须与用户的心理认知相符。 简洁性 减轻视觉负担：使用尽可能少的元素，不提供与当前任务无关的信息； 简明的文字必须、清晰，内涵丰富，并易于理解和记忆隐喻启示反馈如声音、触觉、语言、视觉反馈或是它们的组合 图 31菜单操作不可用 工具栏按钮不可用时不能隐藏，应该显示为不可用状态，如下图所示： 图 32 工具按钮不可用 当一个操作在用户进行了某行为（如填写或选择了某选项时）就变为可操作，则该操作不可用时不能隐藏，应该显示为不可用状态，如下图所示： 图 33操作命令不可用 注：具体不可用状态效果见视觉规范。 有趣高于功能? 产品必须充满了趣味性，必须充满了COOL，才能形成良好的传播和口碑；索然无趣的产品，最终由客户检验进而丢弃； ?功能高于交互? 明确的功能满足明确的需求，用户不会在意炫酷的交互效果；关键是功能是否能满足客户的潜在需求； ?交互高于UI? 设计的时候，首先追求便捷、快速的特点；然后要围绕具体的功能来实现UI，并不需要专门设立一个功能。 注意屏幕滚动 ?由于移动终端屏幕特性，尽可能减小单页面加载量，降低图片文件大小和数量，加快加载速度，方便用户体验。尽可能减少垂直方向滚动，尽可能不超过两屏。由于将导致非常恶劣的客户体验，尽可能禁止浏览器水平滚动操作。尽可以隐藏不必要的按纽，突出重点，减少用户的思考。 组件规范 表格 主要应用于大批量数据的展示、查看、维护等方面。基础表格是表格本身最原始的一些属性集合，针对表