产品设计交互规范.docx

产品设计交互规X XX广传网络技术XX编写：王英 2013年11月 目录2 1柢述4 1.1规X的目的4 1.2规X适用的X围4 1.3规X适用的人群4 2基本原则5 2.1—致性5 2.2筒沽性5 2.3避免干扰和打断5 2.4减轻用户记忆负担5 2.5及时有效的反馈5 2.6让用户放松心态，不怕犯错G 3产品交互通用规X7 3.1受X性指示7 3.2操作不可用状态7 4组件規X9 4.1表格9 4.2单元格数据14 4.2.1单元格数据展示14 4.2.2通讯录15 4.3信息列表16 4.4编号和序号19 编号 19 序号 20 4.5注册表单22 4.6联系方式28 4.7图片裁切32 4.7.1固定尺寸32 4.7.2自定义尺寸34 4.8翻页35 4.9日期输入39 491通过日历选择日期39 4.9.2年份跨度较大时的日期选择41 4.9.3等童条目分隔线44 4.10高级加密46 4.11进度条49 4.12图形化面包脣51 4.13星级评分52 4.14保留图标55 4.15弹出层57 4.15.1非独占焦点层57 4.15.2独占焦点层58 4.15.3局部独占焦点层59 4.16搜索60 4.16.1模糊搜索60 4.16.2精确搜索62 4.17数据添加65 4.17.1添加单个文件65 4.17.2添加多个文件66 4.17.3添加行70 4.18排序70 1概述 规X的制定采用UCD （以用户为中心的设计）方法，遵循ISO9241-11部分标准的要求。 设计过程以用户的使用习惯和心理需求作为出发点，在认直研究并参考了国内外各种优秀设计的 基础上，制定出了适合我集团应用服务产品的设计规X。此外，为保证规X具有良好的可用性和 广泛的适用性，UE研究室对设计出的每个模式都进行了严格的用户测试，并对各组件采取了不 同应用场景的测试。 该规X从产品交互的通用规则和具体组件的交互模式两个方面进行了规定。在每个组件规X 中，给出了模式描述和扩展描述的规X描述，供不同的应用类型和使用场最选择、组合使用。 1?1规X的目的 在产品开发过程中，给不同部门的相关人员提供统一的规x与指导，使沟通与合作顺利 有效地进行，以保证产品界面的最终规X化实现； 从一点一滴入手解决公司产品的可用性问题：使操作更人性化，减轻用户的认知负担， 改善产品的用户体验，提升产品的市场竟争力； 使产品在界面外观和操作行为上形成一致，加强公司产品的品牌化特征。 1?2规 1?2规X适用的X 广传项目部内的所有产品。 1.3规X适用的人群 参与产品设计的所有人员、前端开发人员及测试人员等。 注：从正式发文之日起属于新项目x畴的必须遵循此规x,对于巳有项目进行重大版本升级的项 目要遵循此规X。 2基本原则 以下原则主要用来说明此规X的指导思想与设计依据。简单描述如下，以供该文档的阅读者 参考和使用。具体的原则描述请参见《界面设计指南》。 2?1_致性 视觉一致：在同一产品内，所有的同类界面元素在相同的应用环境下，界面外观在视 觉上应该保持一致；否则，界面外观要于以区分； 操作行为一致：类似场最的界面设计，其操作方式必须保持一致；当操作行为相同时 要保持视觉上的一致；当操作行为不同时，在视觉上就一定要有所区别； 外观与使用者的预期一致：保持对象与其行为相符，保持不同作用的对象外观的不同; 视觉元素的外观及其操作结果，必须与用户的心理认知相符。 2.2简洁性 减轻视觉负担：使用尽可能少的元素，不提供与当前任务无关的信息； 简明的文字表述：文字表述必须简明扼要、清晰易懂，内涵丰富，并易于理解和记忆; 操作简单：减少冗余的操作步骤。 2?3避免干扰和打断 避免干扰：明确用户在特定界面中的首要任务和目标，尽可能避免该界面上的视觉噪 声和其它干扰。 避免打断：让用户的操作连贯顺畅，避免使用模态对话框（弹出的独占焦点的对话框） 打断用户的工作。 2?4碱轻用户记忆负担 认知明确：产品中界面元素外观要明晰，易于辨别；产品的逻辑意义要合理，导航要 及时准确； 系统智能化：提供默认值；帮助用户记住尽可能多的信息，最低限度地从用户那里索 取信息； 合理的隐喻和习惯用法：便用用户熟悉的，符合使用习惯的隐喻，及通用的习惯用法, 为用户的任务提供直观易用的界面； 有效的启示：提供具有明确引导性的启示来指导用户正确操作（启示：某对象用来说 明自身可以如何使用的外观属性）。 2?5及时有效的反馈 操作反馈：对用户的每一步操作给出及时的反馈，告知用户成功做了某事； 受X性反馈：界面对象的设计要在视觉上能提供即时响应鼠标操作行为的效果； 系统状态反馈：系统需要用户等待或系统出现错误时，要及时让用户明白现状； 选择合适的反馈形式：根据不同的情况，使用不同的反馈（如声咅、触觉、语言、视 觉