第九城市-通用交互规范1.2.doc

第九城市-通用交互规范 版本 1.2 版 本 历 史 日期 版本 说明 作者 2009-10-21 1.0 创建文档 刘恒茂 2010-01-04 1.1 俱乐部版本 刘恒茂 目录 1. 概述 4 2. 基础交互体验 4 2.1页面标题规则 4 2.2页面图片信息 4 2.3链接新窗口打开规则 5 3. 通用交互模型 5 3.1导航 5 3.2信息提示 5 3.2通用控件 6 4.可复用功能 6 4.1评论 6 4.2好友选择 6 4.3邀请 详见曦轶 的通用邀请原型 6 5.交互设计建议（UE使用） 6 5.1预先信息提示 6 5.2操作信息提示 7 5.2结果信息提示 7 概述 通用交互规范目的是保证整站的交互体验的一致性。并且保证一些体验较好的交互方式能在各个模块中得以使用。 基础交互体验：是针对单个页面交互信息的标准，包括页面title、页面图片alt、页面链接_blank。 可复用交互体验：是指一些可复用的交互模型标准。如导航、信息提示、通用控件等等。 每个模型应该对应具体的UI标准模型（由设计部完成）。 可复用功能：是指一些通用的能在各个模块中能复用的子功能，如评论、好友选择、邀请等。保持所有子功能的一致性和可复用性。 交互设计建议（UE使用）：是针对交互流程中的信息交互方式给出的规范，包括预先提示信息、操作提示信息、和结果信息提示。UE可参考此建议进行交互设计。 基础交互体验 2.1页面标题规则 模块名字 – 第九城市。 左右需空格 按照以上规则 举例如下 一.个人中心 相册 - 第九城市 二、个人空间 jason - 第九城市 三、公会 论坛 - LOST公会 - 第九城市 论坛管理 - LOST公会 - 第九城市 2.2页面图片信息 以下图片必须有ALT值 表意型图片 表达用户或系统状态的图片，如在线图标、应用图标。图片ALT为表达的含义。 按钮型图片 交互使用的按钮图片（不带文字）：如编辑、警告。图片ALT必须为交互操作的名称。 内容型图片 用户上传的内容型图片默认是文件名的标题。修改图片的标题后，跟着修改。 2.3链接新窗口打开规则 一、公会、活动、论坛等 聚合页的内容链接使用新窗口打开 二、其他 个人空间feed使用新窗口打开 其他都用本窗口打开 通用交互模型 详见交互规范模型 3.1导航 设置类 icon+一级标签+二级标签。 自己的应用列表显示态:icon+标签（对应标签激活） 内容显示态:icon+返回上一级导航+内容 操作显示态:icon+标签（当操作不属于任何标签时不激活任何标签）+操作标题 别人的应用 列表显示态:用户头像+标签 对应标签激活 内容显示态: 用户头像+返回上一级导航+内容 3.2信息提示 保存表单 错误：弹出窗。 成功：绿色块提示“保存成功”。并滚动到其位置。 提交表单 错误：弹出窗。 错误（即时类）：即时提示。 成功：发表的内容进入内容。附加的内容滚动到内容。 其他状态 空内容提示：列表无内容时。 过程提示：读取数据时。 预先提示：页面固定的提示信息。 注：所有信息提示弹出窗的标题都为”当前操作名称”。 最好支持焦点到确认按钮。Esc退出。 当弹窗上有错误信息提示的时候使用系统窗。 3.2通用控件 按钮：确定按钮 取消按钮 翻页： 4.可复用功能 4.1评论 1.统一支持ctrl+Enter 提交 2.统一的消息通知规则 发表评论的时候内容拥有者会收到消息通知。 回复评论的时候内容拥有者、评论拥有者、其他回复人会收到消息通知。 4.2好友选择 可直接输入名字下拉选择。可以点击下拉按钮使用弹出窗进行分组筛选选择。 4.3邀请详见曦轶 的通用邀请原型 5.交互设计建议（UE使用） 5.1预先信息提示 所有交互进行前需要提供充分的预先应该知道的交互提示信息。 1.表单提交类 表单提交的步骤，表单项的需要给出提示信息。（如密码要多少多少位。搜索框鼓励输入什么内容。）出现错误给出即时提示。 2.谨慎类操作 一个操作对用户来说需要慎重操作的。如扣除金币，转让公会等。需要预先提示。（如：扣除金币的操作需要预先提示扣除金币数目，以及当前金币是否足够。等等。） 3.差异化规则 当一个功能的规则具有一定的差异或复杂。需要给出提示。或者给出帮助链接。 如公会系统需要提示：一个人只能创建1个公会，加入3个公会的规则。经验等级需要链接到帮助的经验等级帮助页。 5.2操作信息提示 所有交互进行中需要提供操作相关的提示。 操作确认提示 一个操作涉及数据删除，等需要谨慎操作的操作需要给出删除确认提示框。（删除feed属于删除但是相对不需要谨慎操作） 操作错误提示 当用户的操作不符合操作的规则，需要给出操作提示。（如评论字数为0或超过限制字数，搜索框未输入内容时提交） 数据读