DRD交互文档规范

《DRD交互文档规范》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

大智慧交互设计小组—DRD交互文档构成与规范制定人:陶亮协助:高乃波制定日期:2012.10.10 目录一.文档的目标二.输出形式三.阅读对象四.文档组成五.相关小组对二期项目交互的建议 一：DRD文档的目标梳理整站的逻辑结构页面跳转以及交互状态说明确保整站的交互体验的一致性和统一性。对整站公用模块的组成分析和整理 二:输出形式格式：以word文档的方式输出形式：文字配合图片清晰说明交互于逻辑行为 三:阅读对象前段开发人员程序开发人员视觉设计人员测试人员 四:文档的组成1.目录2.文档版本信息3.网站结构拓扑图4.复杂交互行为的逻辑设计图及说明5.公共模块的梳理及其说明7.部分单个主要页面或模块的交互行为说明6.对交互稿中不明显的交互动作或隐藏的设置项作说明8.测试人员可行性检测 1.目录2.文档版本信息包含版本号，更新时间，更新内容，以及更新人。需有清晰目录页方便各需求方的查阅。版本号更新人更新时间更新内容更新原因V1.0陶亮12.11.2初步提案V1.1陶亮12.12.315页共用模块产品方向和需求调整 3.网站结构拓扑图（产品的配合）整站结构的拓扑图部分主要页面的拓扑图工作圈个人微博首页个人信息粉丝数关注数微博数用户名部门用户图片我的粉丝列表页我的关注列表页我的微博数例:.......... 4.复杂交互行为逻辑设计图及说明主要针对逻辑较强的页面以图表化得方式来给与注解与说明角色：1.申请人2.被申请群群主行为：1.申请人通过搜索或公司群列表入口页发起申请加入群2.群主出现消息提示结果：1.群主同意2.申请人返回消息提醒，公司所有群中显示该群1.群主拒绝2.申请人返回消息提醒群主公司群列表搜索申请加入申请人同意消息提示消息提示拒绝消息提示例：申请加入群逻辑图 5.公共模块的梳理及其说明（重要）导航页脚文本框公用按钮微博回复框转发框等其他可能会公用到模块例：微博首页我要转发发送私信2者前端样式具有公用性后期可能会多次应用，注意扩张。我要转发多出回复给谁的复选以及选择群下了菜单（下拉内容为自己创建或加入的群）。权限：回复框选中原微博出现我的回复内容，下拉框默认状态“选择群”转发后只要互关注所有人可见下拉框选择后则只在选中的群中人可见状态：下拉框选中后状态为将默认“请选择”替换为您所选中群的名称如图：注：本例主要用于说明模块公用关系案例，与发布中的无关。 6.对交互稿中不明显的交互动作或隐藏的设置项作说明例：微博发布框隐藏动作微博发布框默认状态下外观微博发布框输入状态下外观隐藏的交互行为微博框在输入状态的情况下行为一：表情文件夹和谁分享出现行为二：发布按钮改为可用状态发布按钮成灰色为不可用状态 7.单个页面或主要的交互模块描述链接的指向链接的打开方式（本窗口或新窗口）那些地方是否需要做链接是否带aittitle信息极限状态所表现的方式操作时产生的信息的提示等激活标签与未激活的不同状态网页弹出浮动层的说明js效果的注解说明（如滚动点击按钮的div的展开和隐藏等）列表信息显示数量复杂不同场景的状态其实说明（必要的话配合场景图）权限限制、数据限制、字段限制、一般错误提示所有的交互细节都会以图片注解的形式出现，DRD文档目的是辅助图片注解加强表达交互。根据不同的交互行为思考参考方向 8.测试部门检测测试部门DRD所描叙的交互行为和逻辑设计等从测试的角度来给予检测并其提出修改建议。 五.相关小组对二期项目交互的建议前端小组：1.在不影响需求和用户体验的情况下，减少js特效（复杂js）特效使用。过多或不恰当的使用对用户体验十分不好。复杂的特效增加整个前端开发周期.2.做好公用模块的梳理，便与模块化地开发3.交互流程尽量跑通，不能缺少页面。程序小组：1.交互行为和逻辑需要理清（以为转发与@输入框弹出为例）2.在程序之前前端设计交互要深刻理解需求把html页面流程跑通 END很多同事问我DRD是什么？于是我问了下百度叔叔。他是这样告诉我的：DesignRequirementDrawing设计要求的图纸于是乎我也这样告诉电脑前帅气或靓丽的你！亲，Bye了～～