ps教程_设计教程_ps素材_设计素材_小憩设计
  • 欢迎来到小憩设计!

如何输出一份专业优秀的交互文档?

时间:2020-12-14 18:51:45 作者:小憩设计 来源:网络

如何输出一份专业优秀的交互文档?

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

如何输出一份专业优秀的交互文档?

一、交互文档的输出原则

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

1. 逻辑严谨,文本简明

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

2. 便于迭代,利于协同

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

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

3. 美即适用

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

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

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

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

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

如何输出一份专业优秀的交互文档?

1. 文档封面

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

如何输出一份专业优秀的交互文档?

2. 更新日志

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

如何输出一份专业优秀的交互文档?

3. 设计思路

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

如何输出一份专业优秀的交互文档?

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

如何输出一份专业优秀的交互文档?

4. 需求表

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

如何输出一份专业优秀的交互文档?

5. 交互稿

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

如何输出一份专业优秀的交互文档?

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

  • 限制:包含极限值、范围值等,如:数值是否存在极值,最多显示多少字符,多出是否折行,如99+等。
  • 状态:包含默认状态、常见状态、特殊状态。
  • 操作:包含常见操作(正常操作得到的反馈)、特殊操作(极端情况操作)、误操作、手势操作(双击、长按、捏、伸、滑动)等。
  • 反馈:操作后得到的反馈动作(提示、跳转,动画语音等)。

如何输出一份专业优秀的交互文档?

6. 废纸篓

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

三、后记

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

「交互文档到底怎么写?」

  • 《做好这个交互文档细节,让你和工程师的合作效率提高50%》
  • 《超全面!教你打造美观清晰易使用的交互文档》
  • 《专业的交互输出文档应该怎么写?高级设计师来教你!》
  • 《专业干货!如何写一份全面易读的交互说明文档?》

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备: http://hao.uisdc.com

相关推荐

  • 动漫风格专题之标题设计
    动漫风格专题之标题设计
    想要做一个广告标题,尤其是动漫游戏类的,真的没想象中那么容易。当你在字体库里一个个切换,最终选择到了一款很合适的字体,你以为非常完美了!但其实,你与大师的距离还......下面我们就来看看动漫风格专题之标题设计的一些案...

  • 质感创作技巧制作毛衣,玩具熊或者更多萌哒小物件~!(AI+PS教程)
    为节日主题制作应景温馨萌哒的道具,少不了绒毛玩偶织线围脖之类小物件。运用好质感技巧能让它们拥有足够的真实感,更加能让小物件生动有趣使整个画面变得满满都是萌萌哒。此篇AI+PS教程提供制作思路,让大家可以了解到质...
  • edeea3ef944d349482de
    为什么又多了一個像素?(设计经验谈)
    对于平面设计师及插画工作者来说,Illustrator是再好用不过的工具了。Illustrator 最大的优点在于可以轻易将图形量化并修改、以及可以在完成制图后再来考虑大部分的「后端」问题,比如说图档输出尺寸、分辨率等等。 但是...
  • mobeimo1
    童趣大风车(ai教程)
    以下为童趣大风车ai教程。在本教程中,你将学习如何用ai创建一个丰富多彩的螺旋桨风车。 对于初学者,你将学习如何建立一个简单的网格,以及如何创建使用基本的工具和效果。同时你将学会如何使用混合模式和外观面板中的图...
  • 画一套亮闪闪的扁平风格宝石图标第2篇(AI教程)
    接上一篇继续教大家制作不同样式切面的宝石。不过因为此教程是由完整文章分三期为大家整理翻译,很有可能因此会让部分同学感觉内容上有一些断篇儿,所以建议大家在学习之前最好回顾一下教程一的内容。传送门由此去: 画...
  • mobeimo1
    AI画个简单贝壳(AI教程)
    夏天来了,暑假来了,大海我们来了。好吧,暂时到不了海边的,先来画个贝壳沾点海风的气息吧。 1.新建一个空白文档。然后去“编辑>首选项>常规>键盘增量设为1px”以及“单位”选项卡的单位如图所示。我通常会使用这些设置,因...
  • 撸友们,快来撸个LOL风格的字体图标吧~!COME ON!(PS+AI教程)
    撸友们,快来撸个LOL风格的字体图标吧~!COME ON!(PS+AI教程)
    暴雪公司的作品一直是游戏精品的代表,就算你不是撸粉儿,但也一定听过他们的大名。至少就连没玩过撸啊撸的小编也听说过很多因它而生的美好情缘的故事。嘿嘿,闲扯了这么多,不过今天的主题却不是撸LOL,而是仿照LOL的UI设计风...
  • 画一套亮闪闪的扁平风格宝石图标第1篇(AI教程)
    画一套亮闪闪的扁平风格宝石图标第1篇(AI教程)
    这是一篇来自于国外网站的教程,作者一次讲了6种扁平风格的宝石图标画法,绘图思路几乎相差不多。但因为原文篇幅较长,所以小编将准备分三期与大家分享。如果喜欢的话,可以随时关注我们后继的更新。 1. 制作一个漂亮的闪...

设计教程热门

mobeimo1

童趣大风车(ai教程)

edeea3ef944d349482de

为什么又多了一個像素?(设计经验谈)


质感创作技巧制作毛衣,玩具熊或者更多萌哒小物件~!(AI+PS教程)

动漫风格专题之标题设计

撸友们,快来撸个LOL风格的字体图标吧~!COME ON!(PS+AI教程)

热门文章

ps cs6怎么抠图覆盖?

" />

ps cs6怎么抠图覆盖

ps抠图后怎么拉出来

怎么用ps软件修图?

" />

怎么用ps软件修图

怎么ps腹肌?

观察原" />

怎么ps腹肌

ps怎么取消合并的图层?

<" />

ps怎么取消合并的图层

psd格式怎么改成jpg?

" />

psd格式怎么改成jpg

ps扣出来的图怎么缩小?

<" />

ps扣出来的图怎么缩小

ps软件怎么制作1寸照片?

" />

ps软件怎么制作1寸照片

ps软件怎么扣人像部分?

<" />

ps软件怎么扣人像部分

ps怎么p身份证号码数字?

" />

ps怎么p身份证号码数字