输出专业交互设计文档清单

原文转自:http://www.uisdc.com/export-professional-interactive-documents在项目设计中,交互设计师与上游的产品经理,下游的视觉设计师,开发工程师和测试等岗位的工作密不可分。不论是承上启下的工作沟通, 还是方案评审的设计讲解,专业的交互设计师应该具备优秀的表达能力,不仅是语言方面的表达,交互文档的表达也尤其重要。交互文档是对接上下游岗位,利于协同团队工作的重要输出件。(本文会以 ...

输出专业交互设计文档清单原文转自:http://www.uisdc.com/export-professional-interactive-documents

在项目设计中,交互设计师与上游的产品经理,下游的视觉设计师,开发工程师和测试等岗位的工作密不可分。不论是承上启下的工作沟通, 还是方案评审的设计讲解,专业的交互设计师应该具备优秀的表达能力,不仅是语言方面的表达,交互文档的表达也尤其重要。交互文档是对接上下游岗位,利于协同团队工作的重要输出件。(本文会以 Axure 软件输出形式举例说明)

输出专业交互设计文档清单

一、交互文档的输出原则

交互文档本身就相当于一个产品,我们要考虑到上下游不同岗位(目标用户)对交互文档的不同需求(用户目标)。交互文档输出原则(设计目标),在文档的结构,内容和形式上可总结为三大原则:

1. 逻辑严谨,文本简明

逻辑混乱的文字表达通常会显得比较啰嗦,甚至会让人不知道你要表达的是什么,降低了阅读效率,也增大了沟通成本。交互文档的整体内容结构与页面内容结构(文字关系)的书写要思路清晰,逻辑严谨,简明扼要,并尽可能的做到「不重复,不遗漏」将交互设计的思路和方案更好的可视化。当然,逻辑和文本的表达都是可以训练的,日常生活中我们也应该注意这方面的培养与提升。

2. 便于迭代,利于协同

刚入行的时候我是一名 UI 设计师,我的第一份交互文档是用 PS 做的,在 PS 里输出图片再粘贴到 Axure 上,首先是文档管理起来很麻烦,其次是编辑起来不方便,迭代修改都要找到对应页面的 PS 源文件修改后再转移到 Axure,工作效率大大降低。交互稿在方便别人的同时,也应该方便自己,而我却忘记了自己也是这个产品的用户。

文章开始说到交互文档是对接上下游利于协同团队工作的重要输出件,所以文档应该保证利于其他岗位人员的查看或编辑的。如在文档格式方面,如果你是用 Axure 做设计,发给对方源文件外也要生成一份 HTML 文件,这样就算对方没有 Axure 软件,也可以顺利打开。

3. 美即适用

美国心理学家丹尼尔·麦克尼尔提出美即好效应:「对一个外表英俊漂亮的人,人们很容易误认为他或她的其他方面也很不错。」

交互文档不仅要逻辑「美」,表现层面也要考虑视觉上的美,可以从图文排版、字体大小、明暗层次等方面去考虑。输出一份美的交互文档从视觉上来说还能潜移默化的促进人们形成正面积极的态度,积极的态度会使你的交互评审更高效,也会提升程序大哥们写代码过程中的愉悦感。当然,追求美的产出也应该是设计师的职业素养。

二、交互文档的结构与内容

下面我简单介绍下交互文档的输出思路,供大家学习参考。这里要注意的是,每位设计师要根据公司实际工作情况来定文档的样式,有针对性地进行设计输出。

文档的整体结构可以理解为图书中的目录部分,下图是我整理的一份文档结构模板,分为文档封面、更新日志、设计思路、需求表、交互稿、废纸篓六个部分。必要时,还可包含信息架构、交互规范说明、页面流程图等部分。

输出专业交互设计文档清单

1. 文档封面

这个部分呈现产品简介,包含版本信息、参与人员等基本信息。

输出专业交互设计文档清单

2. 更新日志

在项目中设计方案的修改和优化是不可避免的,方案有调整时更新日志就比较重要了。更新日志可以清晰记录新增或修改了哪个具体页面,新增或修改的内容是什么,日期、版本……这样项目成员就可以一目了然关注到重点修改的更新信息,提升了工作效率。

输出专业交互设计文档清单

3. 设计思路

这一部分在交互评审会中尤为重要,因为参加评审的人很可能还不了解这个项目,如果我们会上直接讲方案,忽略设计思路的讲解,评审的过程就很可能局限在了布局排版上,评审也就没有了意义。将设计过程更加结构化呈现出来,如概述项目背景、目标用户、产品目标、场景分析、用户目标 、设计目标与设计思路(如图),方便他人理解整个项目背景下的设计思路,也方便以后回溯总结项目设计。但没必要将全部的分析内容都放进来,毕竟这份文档不是需求分析文档,筛选放入重要且适当的内容展现即可。

输出专业交互设计文档清单

任务流程是用图形化的形式来表达产品逻辑关系的步骤和过程,指用户使用产品中操作后的各种结果反馈等。进行流程设计前提是完全了解需求,站在用户的角度去考虑引导用户完成用户目标,关注用户的操作不仅可以让你的思维更清晰,还可以避免有操作逻辑的遗漏。也能让其他人能快速地理解。

输出专业交互设计文档清单

4. 需求表

当交互设计中涉及到其他岗位的需求时(如动画、语音、音效等),可选择表格呈现,或是提供共享盘路径方便他人查看,但要记得在需求更改或更换路径要及时更新,这个部分可根据实际情况选择呈现。

输出专业交互设计文档清单

5. 交互稿

交互稿主体结构的功能层级要清晰,合理的命名,格式统一,新增/修改的内容以及日期要统一标识清晰,方便他人浏览查找。

输出专业交互设计文档清单

交互稿单页面包含界面图、设计说明。不要包含太多功能交叉,方便他人理解。交互说明可以通过文字,流程图配合方式呈现,比纯文字的说明更直观。还要注意不要遗漏异常、特殊情况说明,保证交互说明思路清晰而内容详尽,交互说明类型有以下几种:

  • 限制:包含极限值、范围值等,如:数值是否存在极值,最多显示多少字符,多出是否折行,如99+等。

  • 状态:包含默认状态、常见状态、特殊状态。

  • 操作:包含常见操作(正常操作得到的反馈)、特殊操作(极端情况操作)、误操作、手势操作(双击、长按、捏、伸、滑动)等。

  • 反馈:操作后得到的反馈动作(提示、跳转,动画语音等)。

输出专业交互设计文档清单

6. 废纸篓

交互文档中的回收站(后悔药),废弃的页面或过程方案稿别急着删除,方案在不断调整优化的过程,本以为没有用的页面,统统放这里,后期很可能用的到。

    三、后记

不同的公司会有不同的工作流程,根据项目、流程等实际情况来设计适合自己的交互设计文档。当然,最重要的还是对设计本身的多方面思考。在什么样的场景下,你通过什么方式解决了什么问题,还有没有更好的方式…… 细致去分析并权衡取舍,就可以做出一份逻辑清晰会表达的交互设计文档了。

少侠的个人微信,

很多人都加了。

输出专业交互设计文档清单

一个喜欢在朋友圈分享各种创意的老文

加我微信sezign04请注明你的职业或者专业


    -加入社群-  


设计侠行业社群,专注设计创作分享交流平台!

行业顶级大咖,免费大咖微课;

专属行业内参,翻译墙外干货。

版权声明:@少侠整理网络原创文章请署名出处,如有侵权请联系我们


输出专业交互设计文档清单

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/36066/

(0)
交互精选交互精选
上一篇 2018-03-25
下一篇 2018-03-25

相关推荐

  • 你的网站用户体验为什么比竞争对手差

    网站SEO优化用户体验,又是用户体验!总是有一些站长弄不明白他的网站到底哪里做的不好,明明也做了蛮多的网站优化工作,但是与竞争对手的网站相比的时候,优化数据始终差一截。总是有窗口自动弹出不管是广告窗口,还是在线咨询窗口,如果不是用户主动点开,就自动频繁的弹出来,用户关掉一遍两遍,还是弹出来,那么这种设置明显是在撵用户离开你的网站。存在死链或错误链接第一种情况是用户通过搜索目标关键词找到你的网站,想点击进入却发现是无法打开的;第二种情况是...

    2018-02-16
  • 知识分享直播——用户体验招募

    如果你曾经沉迷直播,为喜欢的主播刷飞机火箭;如果你曾经将直播当作你学习的途径,获取信息;如果你对当下的直播平台设计有想法和建议;如果你希望在看直播的同时,不用送礼物,还能赚些小钱;如果。。。其实,没有这么多如果,只要你想参与到影响直播平台的用户体验设计的活动中,只要你不是直播的小白,那么请毫不犹豫地来参与我们的用户体验实验。我们会提供不低于50元人民币的报酬。01—研究课题在现行的直播用户界面的基础上,我们设计了一个辅助知识分享型主播及...

    2018-04-08
  • 「抖音」用户体验分析

    和大部分人想的不一样,我是抖音和快手的忠实用户,每天都会在上面花不少时间。在玩抖音几个月后,我开始思考和分析这两款APP的设计和技术,发现其实其中充满了很多“精巧”的设置。抛开APP的针对群体和社会影响不谈,只想说作为一个普通用户的感受。抖音的交互设计是沉浸式的。在推荐页面,你每次只能看到一个视频,系统默认自动播放。因为没有给你反应时间,我们会不由自主的盯着屏幕看,而人的注意力很容易就被当前的视频(视觉和听觉)吸引。这样的交互好处是人的...

    2018-04-02
  • 交互设计申请关注度最高的5个问题,第一个就头疼.. | 大咖说

    说到交互设计很多同学的第一反应就交互思维、交互体验...准备申请交互专业的同学也是非常心焦!说起来容易做起来难,我们还是多和专业老师取取经。伦艺学姐回答的5个交互专业问题,收好哦~Q1:转专业学生申请应该注意什么?我觉得需要看这个问题怎么定义转专业,因为在一个设计类的学科,很多设计的思维方式和实践能力是共同的,我们可以通过设计的方式去解决问题。如果想要转到交互或者用户体验的专业,其实提供的是一种用交互的方式和研究结果解决现有用户的问题。...

    2018-04-26
  • 网站分页导航对用户体验和优化的影响几何?

    欢迎点击上方蓝字免费订阅温馨提示:请点击上面的蓝色字体,再点击“关注”,这样您就可以继续免费收到精彩的内容了。在博客、杂志甚至是大多数站点中,分页的点击次数可能比搜索还要多,因为在很多时候,访客并没有明确自己的需求,只是在网页中一页接着一页的浏览信息,如果在分页上有良好的用户体验同时又能引导访客进行浏览,就能大大增加网站的黏性。但在很多站点中,分页并没有得到足够多的重视,即便是花时间来制作分页也不过是基于图标的样式和设计,对分页组件的整...

    2018-02-01
  • 移动端图片阅读—交互设计分析

    ↑点击上方蓝字,加个关注吧~↑今天老冰给大家分享一个移动端图片浏览的交互方式这个APP的阅读教程中,一共介绍了四种交互方式,左右滑动翻页浏览,上下滑动阅读更多,下拉放大图片,侧划查看时间线以往资讯。在这里并没有介绍左滑,有人问,左右滑动不就是左滑吗?其实,并不是,当你位于第一张图片时,也就是现在左滑已经没有内容了,此时你的左滑便有了刷新的作用,不同于其他(很多app刷新都是下拉刷新),这也是值得称赞的地方,它通过自己的交互思维,产生了自...

    2018-01-30
  • 新知 | 在打造用户体验上,连雷军都要向这家企业学习

    在我们之前发布过的一篇文章《小米八周年:雷军揭秘四大成功之道》中提到过,雷军在创建小米时受到了美国零售连锁超市好市多(Costco)的启发,从价值体系上来看,小米与好市多相同,都是希望用户能以可承受得起的价格享用更好的产品。好市多以优质、低价出名,在全球拥有700多个分店。从2006年到2016年,好市多的市值增长了五倍,如今的市值约为670亿美元。好市多亚洲区总裁张嗣汉在2018零售业年会上分享了好市多的运营模式、会员制度,以及管理层...

    2018-05-04
  • 如何在Sketch中快速创建调色板?

    今天我将会教你如何在Sketch中快色的创建调色板。这是个很棒的技巧,是年前我从Marc Edwards那里学到的。首先我们先创建三个正方形,它们是可以被三整除。在我们的例子中,我们将先创建一个240pt高和240pt宽的正方形。我们将重命名这些图层为红色、绿色和蓝色。让我们将红色图层的填充改为#FF6161,绿色图层为#4F953B和蓝色的图层为#0076FF。选中这3个图层,然后按“A”快捷键来选择画板工具。我们现在从右边的检查器上...

    2018-04-17
  • Axure RP软件

    长按链接复制链接到浏览器打开Axure RP 7.0软件及安装教程下载地址:链接:https://pan.baidu.com/s/1mkqu1Ws密码:467u长按链接复制链接到浏览器打开Axure RP 8.0软件及安装教程下载地址:链接:https://pan.baidu.com/s/1c3h7c1i密码:esqr给大狮兄一个赞赏大狮兄想生存下去,我还想以后给你更多好用的软件赞赏的狮粉记得备注名字,大狮兄想记得你的名字大狮兄资源吧专...

    2018-03-04
  • 中国手机行业患上焦虑症,良药便是“用户体验”!

    可以说,2017到2018年中国手机市场震荡不断。首先经历了乐视手机的倒台,接着HTC也逐渐淡出市场,而巨头之一的LG也选择了退出中国市场。除了传统行业老大苹果和三星的地位稳固外,国内众多厂商皆陷于焦灼之中,绞尽脑汁想要提升出货量排行。但可惜的是,众多厂商的动作却创新乏力,同质化严重的案例屡见不鲜。一个最明显的例子,iPhone发布“刘海屏”,许多厂商亦步亦趋,甚至模仿到了正面难辨的地步。中国手机厂商陷入鏖战,行业趋势多为盲目跟风,试图...

    2018-04-28