交互设计详细说明文档

时间:2012-08-01 来源:阿里巴巴良无限UPD团队  作者:阿里巴巴良无限UPD团

 现状分析

  目前交互设计师产出的原型图缺少详细的说明文档,易造成沟通成本大及质量风险,这也是我们去做这件事的初衷。

 目标及收益

  1.专业输出物,提升自身专业度

  2.与开发团队合作更默契,减少沟通成本且尽量避免信息遗漏与理解偏差,开发团队可共同参考

  3.界面验收时的清单(前端开发的demo评审\项目功能预演\项目测试)

  4.项目改版或换设计师时便于查阅

 说明具体内容?

  1 复杂页面间逻辑操作与复杂单页面的操作逻辑

  2 字符限制(必填选填 \ 字符显示数量)

  3 链接与按钮指向

  4 交互细节说明

  5 校验

  6 文案

  7 需求调整

 举例

  1 复杂页面间逻辑操作与复杂单页面的操作逻辑

  (1)复杂页面间的逻辑关系

  (2)复杂单独页面的逻辑

  2 字符限制

  (1)页面必填字段应标注说明,统一在字段前标注“*”,选填无需特别标注

  (2)为提高空间利用率,某些表格单元格内仅显示预览字段,更多信息需要滑过以tips的形式显示全。

  说明需传达清楚:1.是否做限制2.如果限制,多少字出现截断3.截断后是显示为省略号还是不显示

  3 链接与按钮指向

  (1)你需要将页面上的每个关键链接事件或每个按钮事件标识清楚。它们有的指向你安排的某个页面,有的操作产生了一个结果反馈……(page flow—页面流是交互设计师的职责)

  (2)注意操作有时受状态影响,也需要将其对应关系标注出来

  4 交互细节说明

  你可以在这里说明任何你想要的效果。你的合作者也只需用10分钟时间阅读完毕,标注出与他工作相关的重点。找不到你人时随时可做参考。(图片来源于hedi alibaba国际站交互说明图)

  5 校验

  表单或列表里常常会出现校验,它同样起到引导用户的作用,有没有特殊格式限制?字数限制?这里的触发需不需要联动校验?如“请输入正确的邮件格式“等

  6 文案

  (1)操作提示信息文案,如操作成功,弹出“选品表提交成功“;或引导提示类信息,如:

  (2)字段的名称需推敲,特别注意产品里相同释义字段需统一;但也不能一概而论,如何时叫“货品”,何时叫“商品”

  7 需求调整

  请标注修改提出人、修改原因、详细修改内容及波及到的相关所有页面,比如一个字段的调整可能会波及到相关很多页面的调整

  一些重要的事

  ●完美的标注文档,永远无法取代面对面的沟通

  ●文档是为解决问题

  ●标注形式大家看明白即可,或者你有什么更好的经验,记得分享

  ●小项目或小需求,针对交互交付物规范,个人觉得不能仅仅因为时间而折扣,敏捷永远不能以损失质量为前提

  两种解决方案:

  1.交互设计师评估更多时间用来个人完善说明文档

  2.与前端同学根据实际情况面对面沟通落地规范取代逐一标注

  ●两个角色,交互是主要撰写者及维护者;前端开发是意见提出者与修订者,能够有效解决设计和前端可行性的冲突

时间: 2024-11-05 13:31:26

交互设计详细说明文档的相关文章

Highcharts选项配置详细说明文档

Highcharts提供大量的选项配置参数,您可以轻松定制符合用户要求的图表,目前官网只提供英文版的开发配置说明文档,而中文版的文档网上甚少,且零散不全.这里,我把Highcharts常用的最核心的参数选项配置整理成文档,与大家分享. Chart:图表区选项 Chart图表区选项用于设置图表区相关属性. 参数 描述 默认值 backgroundColor 设置图表区背景色 #FFFFFF borderWidth 设置图表边框宽度 0 borderRadius 设置图表边框圆角角度 5 rende

Nginx配置文件nginx.conf详细说明文档

在此记录下Nginx服务器nginx.conf的配置文件说明, 部分注释收集于网络. user    www-data;                        #运行用户 worker_processes  1;                  #启动进程,通常设置成和cpu的数量相等 error_log  /var/log/nginx/error.log;   #全局错误日志及PID文件pid        /var/run/nginx.pid; events {   use   e

玩法详细说明文档

文档型信息交互设计及相关技术实现

本文信息交互是指办公和经营管理活动中所产生的公众或定向业务信息,以及在信息共享过程中,以业务规则形式衍生出的评论.评价.回复.转发等业务信息延续. 信息交互设计目标 共享业务信息,并支持限定范围 共享的业务信息,可以通过评论.评价.回复.转发等方式进行业务信息延续和推广 把发布信息.延续信息功能设计为通用功能 以信息实例为基本文档单元,衍生信息为其子文档,存储在文档型数据库中(MongoDB) 信息展现形式灵活多样,以模板形式为用提供应用选择 发布信息支持带格式文档,统一采用MarkDown编辑

【第五组】交互设计文档Hunger Killer

[第五组]交互设计文档Hunger Killer 整体流程 主页面 登录注册小弹窗 点击主页用户头像区可以进入登录注册页面,未注册用户选择注册按钮,链接到注册页面. 登录用户名和密码不为空,记住密码和自动登录可选,已注册用户在在登录注册页面直接输入账号信息,点击登录按钮,核验通过即登录成功,显示登录成功消息提示框:若已在另外设备登录,用户名或密码错误,未连接到服务器都提示相应消息提示框,登录失败. 点击关闭按钮退出登录注册小弹窗.页面跳转至主页面. 注册页面 用户名不少于四个字符且唯一,密码不少

H3 BPM接口说明文档

H3 BPM接口说明文档 二〇一七年四月 目 录 1 引擎接口唯一入口:OThinker.H3.IEngine 3 1.1 构造Engine对象 3 1.2 属性 4 2 类:OThinker.H3.Acl.IBizRuleAclManager 6 3 类:OThinker.H3.Acl.IFunctionAclManager 8 4 类:OThinker.H3.Acl.ISystemOrgAclManager 12 5 类:OThinker.H3.Acl.ISystemAclManager 1

体育馆团体预约系统软件需求规格说明文档

体育馆团体预约系统 软件需求规格说明文档 UML软件工程1班第六组 June,13th,2019 目录 1. 引言1 1.1. 目的 1 1.2. 项目范围 1 1.3. 背景 2 2. 总体描述2 2.1. 产品前景 2 2.2. 产品功能 2 2.3. 用户类及其特征 3 2.4. 运行环境 3 2.5. 设计和实现上的约束 3 2.6. 假设和依赖 4 3. 详细需求描述4 3.1. 对外接口需求 4 3.2. 功能需求 6 3.3. 其他非功能需求 8 附录:分析模型8 1. 引言 1.

ICE中间件说明文档

1       ICE中间件简介 2       平台核心功能 2.1        接口描述语言(Slice) 2.2        ICE运行时 2.2.1         通信器 2.2.2         对象适配器 2.2.3         位置透明性 2.3        异步编程模型 2.3.1         异步方法调用 2.3.2         异步方法分派 2.4        订阅/发布编程模型 2.5        动态服务管理(IceBox) 2.6       

详细设计说明文档

1引言 1.1编写目的 本文档为软件<自习任我行>的详细设计说明书,向阅读人员介绍本软件的整体框架和详细设计. 1.2背景 说明: 项目名称:自习任我行 开发人员:杨波.崔海营.周亚豪.闵芮.高琪.张丹丹.蔡容玉 用户:铁道大学全体学生 运行:安卓手机 系统描述:自习任我行软件为铁道大学的学生提供了一个方便查询自习室上自习的快速平台.该软件分为查询自习室模块和安排自习室模块.自习任我行软件是一套功能简单实用的的专门用于学生自习的软件,具有操作方便高效迅速等特点.该软件采用eclipse开发工具