皇小喂

从你出场开始,我就知道你不会说不、

回到顶部

如何写一份交互文档(笔记总结)

Part.1

       交互文档一般包括3个部分:用户需求文档、商业战略文档、设计文档

       用户需求文档包括用户需求分析、用户群分析等内容,主要解决产品为谁服务,用户是谁等问题。商业战略文档包括产品概念模型、市场分析、竞品分析、市场前景、应用领域等分析。作为交互设计师的主要产出物,设计文档的书写则是重中之重。

      设计文档 主要包括以下四部分的内容:

          1.站点地图(site maps)

          2.流程图(flow charts)

          3.线框图(wireframes)

          4.视觉样式(screen designs)

       1.站点地图,即用视觉方式表达出应用的层级结构,主要是采用树来

                           表达。站点地图可以直观地向技术人员反馈产品信息结

                            构。


       2.流程图,即表达用户或系统对某项任务执行的流程。用以让技术人员                         快速了解某一任务的执行过程。


       

       3.线框图,即通常所说的低保真原形,指抛去配色、字体样式、图片等的原型设计,其主要意义在于准确地描述应用的内容布局、位置等基本信息。

       4.视觉原型,产品最终呈现的形态,及高保真原型,包括对尺寸和CSS等定义。


Part.2

交互文档具体描述的内容包括:

1.初始状态说明。包含页面初始载入及页面元素的初始状态。页面初始状态,及打开应用,应该停留在哪个导航上,是否有提示信息等,具体根据产品实际功能来描述。页面元素初始状态,即无触发情况下,是如何呈现的,例如轮播图片的指示状态等。观察新版微博移动客户端初始页面的呈现过程。

2.文本限制。包括字符限制及极限值(字号)。对于字符限制,1)是否有限制,2)如有限制,是否需要截断,3)如需截断,截断的字符数是多少,溢出的部分是否显示,4)如果显示溢出部分,如何显示溢出部分,5)如果不显示溢出部分,应当如何表示;并且字符控制会同时出现英文、中文同时存在的情况,也需详细描述说明。对于极限值,主要指最大数值,作为字符限制的补充,例如最多输入2个字符,最大数值为32.由此可能触发的异常情况,参考提示性反馈。

3.指向性说明包括按钮或文本超链接指向某个位置/页面。可能指向单个页面,也可能指向单个页面内某个位置,还可能指向某个页面内的某个位置。

4.提示性反馈。包括异常提示和非异常提示。异常提示有系统及错误、网络错误、输入错误(邮箱、账号、手机等)、字符溢出错误等等;非异常提示主要是指示性信息,引导用户完成某一活动行为或者等待信息的传递,例如输入信息、空白页提示、家在提示等等。

5.联动式说明。包括页面及页面元素的关联逻辑。这部分设计到taskflow,其中页面间的关联逻辑就是pageflow。较为常见的有注册流程、购物流程、登录流程等;页面元素间的关联逻辑,常见的有面包屑、表单校验(注册、登录、筛选等)。

6.动效说明。包括页面及页面元素的动作效果。如果从特性来分,可以定义为常规动效和特殊动效。常规特效是不加特殊修饰的动作效果,例如鼠标悬停、移入、按下时按钮的不同显示状态,图片的轮播,页面切换(关门、开门、放大、缩小等);而特殊动效是进行了动画演示的效果,例如刷新动画、加载动画、添加/删除、新项目动画等。

7.系统级交互说明。包括系统级错误、网络错误/连接等。这部分涉及平台规范的内容,当调用或触发所引起的系统级的内容反馈。

8.角色状态说明。这部分作为以上内容的补充,尤其是涉及到多种用户角色存在,而又拥有不同权限的时候。如在CMS系统中,可能存在管理员、审核人员、回复人员三种角色,他们在执行三种不同的任务时,必须向下一级或上一级反馈任务结果,例如已回复、已审核、已发布、已更新等。


Part.3

怎么描述以上内容?

1.概述交互状态,简要说明发生了什么。

2.说明产生条件,表明引起交互行为的前提条件。如果是多条件,必须说明条件满足的情况是任意一条还是全部。在具体撰写的时候可以使用or和and,分类目列举。

3.明确引发动作,是左键单击、还是右键单击等等,尤其在移动平台端要具体说明手势行为。

4.阐述发生条件,具体描述交互状态的变化,包括大小、速度、时间、参照物、位移5个维度,分条目列举。如果有多重非并发事件,应作独立交互事件单独说明。

5.配上对应图片,帮助产品相关人员理解说明文档。

来源:邓帅丶Aaron

评论
热度(20)
  1. 庄汪汪Aaron 转载了此文字
  2. 皇小喂Aaron 转载了此文字
©皇小喂 | Powered by LOFTER