互联网网站交互设计规范.docVIP

界面交互设计规范 —— IT应用服务产品界面组件级交互规范 V1.0 目录 1 概述 5 1.1 规范的目的 5 1.2 规范适用的范围 5 1.3 规范适用的人群 5 2 基本原则 6 2.1 一致性 6 2.2 简洁性 6 2.3 避免干扰和打断 6 2.4 减轻用户记忆负担 6 2.5 及时有效的反馈 6 2.6 让用户放松心态，不怕犯错 7 3 产品交互通用规范 8 3.1 受范性指示 8 3.2 操作不可用状态 8 4 组件规范 10 4.1 表格 10 4.2 单元格数据 15 4.2.1 单元格数据展示 15 4.2.2 通讯录 17 4.3 信息列表 20 4.4 编号和序号 23 4.4.1 编号 23 4.4.2 序号 25 4.5 注册表单 27 4.6 联系方式 33 4.7 图片裁切 37 4.7.1 固定尺寸图片裁切 37 4.7.2 自定义尺寸图片裁切 39 4.8 翻页 42 4.9 日期输入 45 4.9.1 通过日历选择日期 45 4.9.2 年份跨度较大时的日期选择 49 4.10 分隔 52 4.10.1 等量条目分隔线 52 4.11 高级加密 55 4.12 进度条 58 4.13 面包屑 60 4.14 星级评分 62 4.15 保留图标 65 4.16 弹出层 67 4.16.1 非独占焦点层 67 4.16.2 独占焦点层 68 4.16.3 局部独占焦点层 70 4.17 搜索 72 4.17.1 模糊搜索 72 4.17.2 精确搜索 74 4.18 数据添加 78 4.18.1 添加单个文件 78 4.18.2 添加多个文件 80 4.18.3 添加行 83 4.19 排序 85 修订记录 修订人 日期 版本 修订内容 概述 规范的目的 在产品开发过程中，给不同部门的相关人员提供统一的规范与指导，使沟通与合作顺利有效地进行，以保证产品界面的最终规范化实现； 从一点一滴入手解决公司产品的可用性问题：使操作更人性化的认知负担提升产品的市场竞争力字必须、清晰，内涵丰富，并易于理解和记忆隐喻启示反馈如声音、触觉、语言、视觉反馈或是它们的组合 图 31菜单操作不可用 工具栏按钮不可用时不能隐藏，应该显示为不可用状态，如下图所示： 图 32 工具按钮不可用 当一个操作在用户进行了某行为（如填写或选择了某选项时）就变为可操作，则该操作不可用时不能隐藏，应该显示为不可用状态，如下图所示： 图 33操作命令不可用 注：具体不可用状态效果见视觉规范。 名称规范 常用名称 个人中心：指用户登录后显示的首页面 个人首页：指展示给好友的用户信息首页面 全局导航：指应用于整个网站的导航，主要用于频道指引及登录注册等基本使用。 SNS导航：指用户登录SNS平台后基本服务导航，显示在页面的最上方。 组件导航：指用户登录SNS平台后，应用组件的导航。 企业首页：指用于企业信息展示的页面。 企业首页组件：指认证企业可使用的组件，可进行添加删除及内容管理。 专家专栏：指用于专家进行信息对外展示的页面。 专家专栏组件：指认证专家可以使用的组件，可进行添加删除及内容管理。 常用规范 用户身份 【设计意图】 用以区分用户对不同服务及组件的使用需求，在进行某些组件使用时，需要进行不同级别身份的验证。 【描述】 游客（只能浏览）：企业首页、产品列表页、产品详细页、新闻列表页、新闻详细页 注册用户：可使用基础组件 认证企业：可使用基础组件、企业首页组件、产品组件 认证网店：可使用基础组件、网店推广组件 认证专家：可使用基础组件、专家组件 框架 【设计意图】 用以规范网站的主体结构及各个页面遵从的结构及呈现方式。 【描述】 主框架：以个人中心呈现为网站的主框架，其他组件及页面均遵从此框架的相关规范，结构如下 个人首页：呈现在主框架内，显示组件导航。 企业首页：企业首页展示页独立使用，不受主框架制约。 企业首页组件：企业首页组件管理显示在主框架内。 新闻推广组件：企业首页组件管理显示在主框架内。 专家相关组件：企业首页组件管理显示在主框架内。 表单类提示 表单输入提示 信息输入时，要给与信息填写的提示，让用户了解信息填写规则；信息输入错误的时候，要给出错误的反馈，并给出具体的错误原因要高亮反馈，同时注释语位置整体给出反馈提示。如下图所示： 场景 表现 未输入 输入错误 输入正确 注册表单类的信息提示，输入正确可以不进行信息提示。 规则： 提示位置：提示信息正常显示在输入框的右侧，如果字数超过页面的宽度，则显示在输入框下方。 验证码 验证码中的图示字母是随机产生的