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

原文转自: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

相关推荐

  • UI设计、交互、产品、都应该具有这十种思维模式!!

    注:文章由 集创堂联合创始人CEO纯色老师和设计帮联合出品!这篇文章从十个维度深入挖掘交互设计的思维模式,如果你是UI设计师、初级交互设计师、产品经理、那么这篇文章很值得你学习。笔者在和纯色老师探讨交互设计思维时,老师说“不管你是UI、交互、产品,在团队中都不能是孤立单一的技能,要用联系的观点去看设计,不能分裂来看”。老师说的很对,做UI设计到最后是离不开交互知识支撑的,同样交互、产品也应该具备对设计的审美,这样每一个角色再探讨产品时才...

    2018-01-30
  • 基于交互体验下的包装视觉传达设计研究

    红河学院美术学院 文俊鸿摘要:包装视觉传达设计中交互体验的表现成为其设计重点,消费者与包装产品设计的关系更加紧密,让消费者在包装设计使用过程中感受到包装设计与消费者的情感交流互动,增强消费者视觉感官交互体验。采取理论研究和案例研究相结合的研究方法,对现代交互设计在包装视觉传达设计应用进行研究,让产品包装与消费者的联系更加紧密,让消费者的心理情感和视觉感官获得更具冲击力的体验,更为有效地实现包装设计与消费者的情感交流互动和传达。关键词:交...

    2018-01-30
  • 用户体验给一百分的应用啊!

    “没想到的是,装了这个桌面应用,可以让手机好玩那么多。”这篇推送,小7就个人使用感受来跟你们聊聊,这个桌面应用给我带来的非一般感受吧。这款桌面应用给我的印象就是:它在尽可能地给你的生活做减法。一、将联系人直接生成桌面图标,点击就能直接拨号,这比将数字键设置为紧要联系人来得更加方便快捷吧。我这部手机大部分都用于工作联系,联系得最多的是我的拍档,这里我可以直接她的联系方式设置为图标,将图标放置于第一页,非常方便。二、底部导航栏可以上滑,惊喜...

    2018-03-24
  • 【科普】给想学交互设计的同学的一些建议

    最近在知乎上,有很多人问我,交互设计有什么好的学校?出国读研和在国内读研应该怎么选择?就业怎么样?其实在行业内和行业外,信息存在大量的不对称,很多同学都不太清楚怎么入门和学习交互,我觉得有必要专门开个文章聊下这个话题,算是一个有工作经验的人给新入行或者将要入行的同学的建议。1. 交互设计是否需要读研?我的答案是:看你的情况。每个人情况不同,自然对应不同的选择。情况A:如果本科就受过交互设计方面系统的训练(学校课程、实习等),有一定天赋和...

    2018-02-11
  • 用户体验与故事大王的创新火花

    嗨,亲爱的小伙伴们,2018年4月25日,我们又一同相约创新的周三,每周一次的创新工程实践如期而至。此次见面课主场是北京大学,由黄文彬老师主讲的《用户体验创新》。首先带大家了解一下黄老师。来自北京大学、南开大学、北京科技大学、西安电子科技大学、新疆大学、暨南大学、西北农林科技大学、西安交通大学、南昌大学、东北农业大学、哈尔滨工程大学等全国285所高校、九万六千多名师生共同收看了此次课程直播,其中江苏工程职业技术学院和山东财经大学参加了本...

    2018-04-25
  • 解密 Facebook 广告业务:用户体验与商业价值的双赢靠什么?

    本文经授权转载自极客公园(id:geekpark)文:宋德胜责任编辑:克里斯「把核心的事情做好,用户增长、收入增加会随之而来」,Facebook 近期在产品上的一些调整恰恰体现了这一想法。当地时间 1 月 19 日下午,扎克伯格在个人的 Facebook 账号上宣布,Facebook将对媒体机构进行评级,并在算法上提高优质媒体的内容在信息流中出现的优先级。公告刚刚发布,《纽约时报》等权威媒体机构的股票应声上涨。无独有偶,扎克伯格发出公告...

    2018-01-30
  • Axure RP软件安装教程

    Axure RP各种版本软件安装教程及下载地址:链接:https://pan.baidu.com/s/1AUHDQmeQejc9OMg7t2gmzQ密码:n29o

    2018-04-29
  • 产品经理如何有效学习产品课程?

    很多想要成为或者刚刚成为互联网产品经理的人会自己学习一些大牛分享的课程,阅读一些推荐书籍,但是学完之后经常会有好像很有收获但是却又不知道收获了什么的感觉,产品经理如何有效学习产品课程呢?以下是我自己在进行产品学习时的一些经验。1、多体验产品一个好的产品经理首先自己一定是一个好的用户,只有多体验产品,多思考产品背后的设计理念和价值,自己才能设计出优秀的产品。我们公司有个资深产品经理,他设计的产品日活已经上亿,公司当时还奖励公司员工每日一盒...

    微信热点 2018-03-06
  • 聊聊Axure RP 8 的动态面板(文末赠书)

    点击上方“蓝字”关注本公众号《Axure RP 8入门手册》本书的写作初衷是面向初学者,由浅至深地引导读者学习Axure RP 8.0的使用方法,从而实现最终的学习目标。本书不但适合初学者学习,在知识结构与案例的安排上,也非常适合工作中的查阅与参考。初学者只需要按照从前至后的顺序进行学习,就能够迅速、全面地掌握原型开发技能。具备一定原型开发基础的读者,也能够在本书的大量案例之中,获得各种实战的参考。书中的案例均为网站或App中采用的一些...

    2018-04-09
  • 艺术留学新宠—交互设计选"综合类"院校和"艺术类"院校有何差别?

    在当下这个数字智能急速发展的时代,交互设计成为了热门探索领域,同时它也是当下最受欢迎的留学专业之一。相较国外,国内开设交互设计专业的院校较少,即便有,也是和工业设计专业剪不断理还乱。而真正的交互设计包含的范畴更广,这一点从国外不同院校的交互类专业方向上可以看出,其教育框架完全在APP这一分支之上,而表现形式也不局限于媒体、数字、艺术、装置等。对于想要申请国外顶级交互专业院校的同学来说,确定好自己想要探究的专业领域是选校时的重要参考标准。...

    2018-05-07