在昆明做网站的设计师怎么写交互文档,才比较科学易读?

POST TIME: 2018-05-19 20:58:15

请点击此处输入图片描述

在经历了互联网行业飞速发展的今天,行业步伐逐步减慢,互联网公司的架构和开发流程也随之日益完善,产品开发工作也变得具有了中国IT行业的独有特色和特有流程。

从以前只有Leader+UI设计师+开发人员的扁平式开发流程,到现在的需求方+产品方+交互设计师(以下简称UX设计师)+UI设计师+运营/市场对接+开发人员的完整开发流程,这意味着一款产品的开发变得更加细腻,更加具体,也更加民主。

本文将着重介绍交互设计师的输出物--交互文档的相关细节,同时碍于UX设计师在今天看来,仍然算是一个新兴职位,所以将额外讲解UX设计师的职位背景和相关工作内容,作为本篇文章的背景。

一、交互设计师的工作内容

请点击此处输入图片描述

UX设计师的存在,使原本产品经理工作中的原型制作工作逐步转让给UX设计师,使产品经理更关注需求的战略层面,更能进行战略层面的设计。同时,UX设计师也分担了UI设计师的布局设计、跳转设计等非本职工作,使开发流程中的角色更加专注自己的工作。

交互设计师,UX设计师,有的公司也称之为UE设计师。具体的工作内容可以认为有:

  1. 需求消化,使其可实现化,并制作对应的交互原型;

  2. 规定数据格式、样式,规定数据的展示方式、字段限制;

  3. 规定控件的使用规范;

  4. 从功能流程的高度,梳理功能的页面层级;

  5. 规定数据的前后台交互;

  6. 规定临界状态;

  7. 页面切换动效的规定和模拟等等。

不同的公司对交互设计师的工作内容可能有不同的界定,但是一般情况下,上述是大部分交互设计师的主要工作内容。在这样一份工作中,交互设计师基本上是填补了从产品经理到UI设计师之间的空白,从开发角度和设计角度对一款产品的细节进行补完。

二、 交互设计师的输出物

作为交互设计师的输出物,交互文档是联系开发流程上下游的重要文件,它需要具备良好的可读性、唯一性和时效性。

本文着重介绍的即是交互文档的构成和它的写法(基于中国移动交互文档规范)。

三、交互文档的构成

综合国内IT行业的从业环境,基于Axure的原型制作可能更便于打通开发上下游。

大概碍于Axure做出来的原型不是那么美观和便捷,部分产品经理和UX设计师可能已经转战Sketch等交互设计软件,或者使用Flinto来模拟交互动效。但因为这些软件大多无法跨平台,考虑到很多公司并没有能力全面采用MAC办公,所以这里推荐使用Axure进行原型制作。

交互文档一般由以下部分构成:

1. 交互文档说明及日志

请点击此处输入图片描述

交互文档说明

交互文档说明示例

请点击此处输入图片描述

更新记录

交互文档更新记录/日志示例

2. 文档内容结构

大致包括模块名称、功能流程图、页面说明、页面跳转关系图等。

请点击此处输入图片描述

交互文档构成结构示例

在文档内容的结构中,必须保证交互文档的说明和日志是位于头部,便于随时查阅;

在正式内容中需要灵活运用Axure中的图层,如分组和页面图标等。一般我们认为将页面说明和页面跳转关系统一归到一个功能流程或者一个分组下,这样旣合乎逻辑也可以保证文档内容的层次感,便于查阅时的定位和展开;

始终坚持“一个页面只描述一个功能”的原则,这样可以保证单个文档页面中的内容量适当,便于查阅。

请点击此处输入图片描述

页面说明示例

在确定以上内容后,就可以保证这份交互文档结构是足够清晰的,是便于查阅的。接下来,我们将讲解交互文档的正式内容应该如何写。

四、交互文档该怎么写

当交互文档构成确定后,已经保证了描述对象的模块划分是清晰明确的,是不和其他模块有过多的重合的,是唯一的、最新的、具备开发执行力的。

1. 功能流程图

功能流程图用以厘清功能逻辑,对开发人员来说是必需品。功能流程图的绘制应只针对文档中某个模块的功能,而并非针对整个交互文档描述对象。如果流程图过大,会直接导致可阅读性下降。因此,切忌好大喜功,将某个功能描述清楚即即可。

譬如描述一个网站整站的交互文档中,有多个功能模块需要描述,如登录/注册、用户手机号绑定、下单/支付等等,我们应该清晰地描述每个功能各自的功能流程,而非将之串联起来。

这里不再详细介绍流程图的画法,可参考来自

白三的《关于流程图元素定义、结构分类;以及,我有一些技巧告诉你》

请点击此处输入图片描述

流程图示例

2. 页面说明图

页面说明图可以详细说明界面中元素的来源,控件的交互方式,数据的样式,字段的长度规定,页面元素的状态变化等。

请点击此处输入图片描述

该页面只做参考,实际工作中可不用这么细致

另,我个人其实不建议在交互稿的页面制作中采用各种Icon,一方面是装饰过度,另一方面各类Icon风格不一,直接降低了交互稿的美观度。交互稿件的美观体现在统一和素净,重点信息永远是对功能的描述和对各类情况的规定。

在页面说明部分中,必须保证一个交互页面中,针对的只有一个功能。比如注册登录,由注册和登录构成,页面说明页中必须分开,注册页面说明图只罗列注册功能相关页面,登录页面说明图只罗列登录功能相关页面。

请点击此处输入图片描述

页面说明页示例

3. 页面跳转关系图

页面跳转关系图是串连起页面说明图的重要核心,说明页面和页面之间的跳转关系。也是功能流程图的具象表现。这里的规则也和功能流程图一致,只针对某个模块,不针对整个交互文档的描述对象。一方面是防止单页交互页面内容过多,不利于观看,另一方面,如果单页内容过多,也会导致Axure的运行缓慢。

请点击此处输入图片描述

页面跳转关系图示例

在页面跳转关系图中,必须注明页面名称。尤其注意的是页面连接线不可过多重合,避免造成阅读的不顺畅。

请点击此处输入图片描述

错误示例

4. 页面备注

页面备注应注明于当页下方,用红色字体标注。如页面内容过多,可考虑单独开辟一页进行说明。

五、总结

直到今天为止,仍然有很多人认为交互设计师的工作重点是设计动效或者页面跳转效果,其实交互设计师更多的工作内容仍然侧重于更加逻辑化的部分,动效、页面跳转甚至是页面元素的变化等设计,只是交互设计师工作中一个极小的部分。

所谓的人机交互,在主观层面可能只是人为的Input和机器的Output的交互,其实这比较狭义。人机交互的内容其实就是交互设计师的工作内容,这包含的更多的是:信息设计、功能设计、界面布局设计、机器反馈方式的设计和页面效果的模拟等。

偏重视觉的部分,交互设计师和UI设计师进行配合。偏重功能的部分,交互设计师需要和产品经理进行配合。而偏重实现的部分,交互设计师需要及时和开发进行配合。

回到最开始的那句话,交互设计师是沟通开发流程上下游的重要角色,而非狭义的只盯着动效或者手势的“UX设计师”。





文章转载请注明出处:https://ynxy999.com/Article/view/id/3834.shtml

分享到:
在云南用户网站建设体验设计和界面设计的差别 抖音起诉腾讯微视?遭到马化腾公司11字霸气回应!

告诉我们您的需求

  我们将在一个工作日之内回复您
昆明地址:新闻路429号文化空间25层1055711410
安宁地址:安宁市县街镇麒麟路17号云南经济管理学院图书馆406室、305室ynxy999_com
免费热线:15287195860
售前热线:0871-68034467-999

Copyright 2011-2018,All Rights Reserved ynxy999.com co.ltd.云南炫烨科技有限公司 Powered by ynxy999.com 滇公网安备 53010202000225号  滇ICP备15002943号  [技术支持昆明锦华科技]