赞助商
立即赞助

7000多字,让你全面掌握交互设计输出文档的撰写方法

交互设计3年前 (2021)发布 流光
2.1K 0 0

交互输出文档的作用

文档这个东西,我们又爱又恨,爱是它能够记录并在工作让大家高效协调合作,恨是很多文档嗤以鼻常敷衍,以至于文档不没有起到它应有作用,反而成为了个不负责任借口。所以份合格或者优秀交互输出文档于个项目流转以及团队配合来说是至关要。交互文档主要利益相关者常是以下几个色:交互、品、开发、UI

交互

首先优秀交互文档必须在交互组内部进过审核,括致撰写标准和模使用,个比较规范交互设计组于交互撰写标准也是有严格规范,以及在什么情况使用什么交互模有组件库调用都会有详细说明,那么你交互输出文档必须满足团队设定规范。

其次对其他互设计师来说,你的设计方案中是否出现其他人负责的模块,么在评审的时需要同步,虽互输出文档对其他互来说不是直接受益人,但是在团同步程中也是非常重要的。

产品

每个司对文档的要求和规则不一样。小司能没有互设计个位,么能产品连prd文档也没有,仅仅只是一个简易的需求说明文档,就更不用说针对互规则的说明文档。

很多完善规模流程的团队不仅会详细的需求明文档也很完善的交互说明文档。我们首先要明确的一点是么文档最是给谁看的,一共在项目中有少文档产生。

通常产品理会项目初一份prd文档(Product-RequirementDocument,需求明文档),这prd文档主给业务方、交互发看的,这文档中需包含一些业务规则以及交互规则,所以交互的输出文档需产品的prd文档合并的。

当然如果你是一位有驱力的人,那你可以推进需求并落地,一个人就可以完成prd文档的撰写和需求的落地了。

开发

别想给各位提个醒,在开发需求评审的过程中,请一定记住你评审的目的,开发同学也要注,请把重点放在需求是否能实现以及开发相关的地方即可,请不要考虑为什要这做,或者你觉得应该怎计,一旦进入了开发对需求和计的评头论足那这个会议效率就相当低下。专业的事情就交给专业的人去做吧,可以私下讨论但不要在评审会上各抒见。

交互输档对于开发的作就是,开发可更好的还原该功中交互的跳转及逻辑,我们尽量把交互规则写明白写详细,如按钮在press和default时候是否样式会有变,或者页面转场的方向,这都是一些细节,减必要的低效沟通。你会发现有些时候为么开发总是来问一些规则,就是因为档中没有描述准确,开发和交互都需要时间同步这个细节。

7000多字,让你全面掌握交互设计输出文档的撰写方法

这个非考验交互设计师对需求档撰写的功,并是图片字随意摆放就可的。和开发合作时是一项的体验设计,你把档写好了,开发看起来舒,满意。如果是一堆案,连基本的对齐都没做到的话,谁来看都会看。

UI

交互输档对于UI来说,作就非简单了,但是这里会碰到问题,那就是交互同只需要把信息的层次表示来即可,千万要画到连视觉同都没有发挥余地的程。为么现在UXD体验设计那么火,就是因为交互和UI实重合是很的,只要有智组件库和工具做支撑,那么在交互和UI的设计流程中,时间就会大大降低。

交互输出文档的内容

在这里,我们就将整个prd档的容给大分享一,仅仅是交互需要输的分。因为一个阶的交互是需要够独自产prd档的。然后同的公司对与档的要求是同,大做参考即可。

份基础prd文档主要由这几部分组成(其实是这个需求来以及导过程和如何落地说明):

7000多字,让你全面掌握交互设计输出文档的撰写方法

  1. 项目概要

需求背景

这个是一个项目最重要的部,可以说背景没有搞清楚,后面都可以不用做。这个指的就是做这个需求的价值和因。比如app中业方(运营)需要做一个扫一扫功能,那这个功能首先就从业价值和用户价值个方面去评估,根据对业方的沟通之后发现扫一扫功能将会在周年庆的候通过物流包裹上的二维码,让用户进行扫码参活动这的玩法。

这个需求对于务方来说是一个转手,通过扫码参与-领券-消,确实是一个错的玩法,但是大如果只盯着眼前的问题或许就够了,如当周年庆结束之后这个功还有么,他在后的规划中的存在是怎样的。在有的包裹中印上的二维码这个时间周期和成本有多大。

其,于用户来说,扫扫并不是帮助他们解决了某个问题,而是我做了个东西,时搭配着这个功能让你们去使用,用户来说是个很可有可功能,如线下裹上维码破损了也是常影响体验并是不可控。那么综上所述,既然要做个临时活动用其他会不会更好?

所以在个文档中的一步,首先就是要确定需求的背、价值,也就是说,你个需求是怎么来的,比来讲我们一个店铺的优化项目,在个项目中,首先我们必须在评审的时说清楚我们为什么要对其进行优化和改版,一定是出现或者我们定义到某个比严重的问题,边大家对我们app业务能不是很我就简单说,就是个人中心和店铺营销场重合,并且卖家的同时以买和卖两个场存在,所以店铺页通我们的数据分析和用户的访谈我们现一机点,以及我们必须突出一个核心场让用户有明确的分辨。

另外就背景的描述也可以的调研结果分析,比如之我们首页优化,我们观察了近5月的数据,都呈下降的趋势,所以之后行了一系列的访谈用户体验图分析了这需求的背景产。

7000多字,让你全面掌握交互设计输出文档的撰写方法

需求目标

目标很理,就是我们希望通次需求迭代达到一个什么成果,比我们之前做一次整的验优化改版,么我们的目标就是减少用户的流程跳失、提升整验满意度、提高用户的任务转化率,其中我们做一个品关注的功能,由是时特价品所以是量的,在规定时间进行抢购,为让用户的使用场统一我们打在应用内做一个品关注功能,所以在个需求的初期,我们对个功能的目标和预期是提升xx百分比的转化,提高x%比的gmv,提高用户对关注品下单的效率和满意度,之前很用户想要购买品需要自己在手机端设置闹钟,不方便。所以个功能的一个目标就是决用户场迁移的问题。设定目标之,就是为在上对其进行复盘和数据跟踪还有用户跟踪。

可以用一句话描述:针对什么用户什么场景下解决用户的什么问题,达到什么目的?

需求范围

需求范围也相当于范围层,指的就该需求中我们需哪些相关功能以及功能涉及面。举例子,之的扫一扫功能,不同的产品对于扫一扫功能的求也不同的,比如微信扫一扫功能中承载了:扫一扫、相册、封面、街景、翻译、手电筒诸多功能,再比如淘宝,扫一扫(ar、拍立淘)、相册、历史、帮、手电,这明了不同产品对扫一扫功能不一样的求,所以需求范围内我们需把本次需的功能行描述,并且该功能否影响其他功能的使用对整产品的影响范围。并且我们也会讲所需的功能行拆解优先级拆分,表格中编辑。

7000多字,让你全面掌握交互设计输出文档的撰写方法

研分析

研分析其就是为我们一步背和价值做准备,由汇报方案和评审,或者在项目推进时,我们需要有相应的论据来支撑我们方案的客观,所以在一板块中输出的结论就非常重要,比之前的首页改版,经用户研究小组的访谈和数据分析得出相关的结论,通埋点找到相应板块的点击数据和异常点,进行一系列的问卷和访谈研究,找到结果,是为辅助项目的背以及在评审中大家对需求价值的灵魂拷问。由数据和研结果比敏感就不放。

7000多字,让你全面掌握交互设计输出文档的撰写方法

7000多字,让你全面掌握交互设计输出文档的撰写方法

版本日志

日志是一个非重要的组成分,做过开发的同都知道log 的重要性,当我们跑通的时候我们都会检查log,然后多测试几遍可就到问题在了,实我们的版本日志的作是这样,但是一个是对自己来说可记录自己的工作过程,还有思路的变,第二就是对外,包括和需求方的讨论,会议的纪要等。

要注意是会议纪要在备注需要详细说明,以做证据。时也要邮件知相关员和负责。可能有些公司会放些评审记录,比如各部负责案和需求议,业务和技术负责些议也会放在项目概要,而这个prd文档也可过内部服务进实时更新和保存,如svn。便大家需求进度和迭代有个观追踪。

7000多字,让你全面掌握交互设计输出文档的撰写方法

项目成员

这个就多说了,产、营、交互、视觉、开发各司职,照相馆人员即可,就至于当项目开始进行了人员分配还没到位就尴尬了。

  2. 需求方案设计

业、任、界面流程图

有些同学不是别业流程图和任流程图的别,这边给大家简介绍一下

务流程图:

意思是在这个需求系统,相关利益者业务关系,任务信息流个图标。比如这个简单例子,用户在卖这个场景,相关利益者有用户、店家、卖员三者,那么用户开始触发流程后,这3者在这个流程会各司其职,而业务流程图也很明显告诉大家所有联动者指责和流程走。

7000多字,让你全面掌握交互设计输出文档的撰写方法

任务流程图:

用户在具执行某一个任务时的工流程,以及其核心任务的操步骤,比在登录注册个任务中,用户需要进行一系列的操,在个流程中用户的操引的系统判断需要详细说明。

7000多字,让你全面掌握交互设计输出文档的撰写方法

界面流程图:

界面之间的跳转关系径,这流程图中,我们不需吧详细的明写,只需将需求中涉及到的页面跳转行叙述即可。

7000多字,让你全面掌握交互设计输出文档的撰写方法

相关说明和规则

接下来就要开始我们互文档最为关键的部分,何书写互说明,以及互说明应该包含的内容。

如何书写交互说明及包含内容

1. 全局思考

在做交互案也是我们画原型时候会思考些问题:

体思考

  • 息架构是否容易理解,息类是否理,比如的息架构是否采用了用户容易理解的,市面上常用的息架构。
  • 信息层级和路径是否合,一定要最简,但是要效,信息的优先级是否放置准确,信息组织是否具有相性、逻辑性。
  • 主题是否晰,3秒内告诉「我」在哪里,并可以做什么
  • 方案的延展和续功能规划的扩展

户权限

根据同户的权限对该需求进行检查,如普通户、vip户、外户、游客户,在登录未登录时候对需求功的使是否有影响

登录方式

户登录和注册、终端的兼容,同方式注册的户是否需要补填相信息等等

流程

  • 该需求中的功能流程否其他类似或者相同功能流程保持一致性;
  • 逆向流程和非正常流程的思考有没有完全;
  • 流程的闭环有没有做好;页面跳转的方式是否合;
  • 断后恢复状态如何呈现;
  • 是否留原信息等等
2. 内容、状态和显示

内容的获取来源

例如下方的图片为例,banner的图片来源和发现feed流的图片来源肯定是不同的,那就要写清楚,图片或者数据的来源是来于用户的上传还是系统后的配置获取;并且获取的方式是如何的,是需要动下刷新还是切换页面动刷新,还是定间动刷新。

字、图标是从接口获取还是前端写死,及气泡展示的规则等等。另外一张图片可在多个地方,而可呈现的尺寸同,在涉及到相图片使时要注意剪裁规则和图片的来源。

7000多字,让你全面掌握交互设计输出文档的撰写方法

缓存机制

图片以及一些资源通常需要对其进行缓存,有些同学不清楚什是缓存,缓存是在计算机上的一个始数据的复制集,一来说需要缓存的内容是通过浏览产生的,包括图片以及cookie等,浏览过的视频和广告也会被缓存。同在不同的网络环下缓存的间标准也不同,无网络那肯定只能读取缓存文件,wifi环下缓存间可置的短一些,而流量环下间就可以置的偏长。

状

状大家都应该都会写,主要包含的就是初始状(冷启动无缓存第一次进入)、空状(无任何内容比如空的购物车)、常规状、异常状(网络中断、报错)还有过期状等。

7000多字,让你全面掌握交互设计输出文档的撰写方法

显示

数据内的极限,小,比如粉丝关注的数,小于1万人则显示完整的数,于于1万小于11000则显示1万,于11000小于12000则显示1.1万,这样的方式。另外包括标题极限一行显示,超过部分的显示规则。敏感信息、错误提示以及超时的信息提示。金额的格式使用¥xxx还xxx元,小数点保留的规则。日的显示格式xxxxxx月xx日还xxxx-xx-xx还xxxx/xx/xx。

7000多字,让你全面掌握交互设计输出文档的撰写方法

3. 反馈、提示、手势

反馈和提示的样式有很种,一般反馈指的是用户对某一个控件进行触获得的反馈,比按钮按下的反馈,以及之收到的反馈,是进行跳转还是给用户提示,采用的是模态还是非模态的提示。比点击关注某个人的按钮提示关注成功,比退出某个图文编辑二次确认是否退出,比抖音长按出现的3个操反馈,还有支付成功的动效提示、恶意次操的提示等等

如果手势交互也需明,比如滑动后内置顶、拖拽、左右轻扫的tab滑动、重按的3dtouch。

7000多字,让你全面掌握交互设计输出文档的撰写方法

4. 加载

使用模态还是非模态,果是模态加载请尽量使用情感化设计来减少用户焦虑。果是非模态,根据信息呈现和验采用分步加载还是预加载还是智能加载。果是分加载就选择先加载资源小的内容,加载图,以先将图模糊化粗渲染给用户呈现,包括在浏览信息流的时的分页加载也是以的。果更智能化一也以预判用户的行为进行内容加载,例当用户在某个图文前停留时间达到某个值就预先给用户加载里面的内容。

7000多字,让你全面掌握交互设计输出文档的撰写方法

7000多字,让你全面掌握交互设计输出文档的撰写方法

7000多字,让你全面掌握交互设计输出文档的撰写方法

载的全方式在方案中需要考虑,页面载、啦刷等等,需要统一。

5. 环境、设备与场景

不同备、厂商的不同版本

都会响方案的落地和用户体验这个要非常注。比如一些交互控件在6、iphonex和大屏幕尺寸上使用起来效果好,但是屏幕的候这个交互控件显得就难受,所以需要仔细斟酌用户的使用情况。另外还有横竖凭情况的交互方案是否兼容、是否需要其硬件进行兼容。

白天和晚上是否需要做同的格设计,及在是否需要给户遮挡隐私的功。

6. 文案

案这点很多设计师都忽略了,你们有没有听说过一个叫案设计师的岗位。实案在我们产设计中是非重要的。首先一个产的案对应的语气和产调性是相的,就好我们说产有它自己的性格一样,另外案的使直接就影响户对该信息的解,如一个对话框的案是:确定退吗?面会有两种同的择,一个确定,一个是退,大觉得哪个较好?还有就是「吗」,就变成了:确定退?这样描述来的语言给人感觉很冰冷,甚至有一些威胁。

7000多字,让你全面掌握交互设计输出文档的撰写方法

首先我们的案是否有温,和产的个性是否相匹配。次案的表述是否准确和通俗易懂,如你告诉程序员一句话,帮我菜场西瓜,如果有西红柿,帮我两个,你会带么东西?程序员版:if(看到西红柿)西瓜等于2;else 西瓜=1。buy 西瓜。条件:看见西红柿 执行命令:两个西瓜一语道破版:实,看到西红柿呢是卖两个西瓜的触发条件…没看到就一个西瓜,看到就两个西瓜。这里现的仅仅是程序员的思维和我们的差异,说明了一句话没有表述清楚带来的问题是很大的。

另是文案用语致性,在个品样场景,我们需要统文案用语。

7. 常见控件

具体见下列表

7000多字,让你全面掌握交互设计输出文档的撰写方法

8. 撰写方式

作为一个设计师,管是否在做视觉,我们都需要对档有一个美意识,如果你的档非凌乱,那么在别人眼里就会觉得你是一个较粗心大意,够负责任的人,我们尽量在做交互输档的时候画的美观一些。

目录

首先在目录的撰写时候要进行分类,通我做的时候会对该需求页面父子集系进行创建,父集为核心页面,子集为的相子页面,这样页面的流转和归属系就会搞错。

说明

在撰写规则与说明时可通过标签法进行标签说明的撰写方式,同样在视觉上保持美观,对与对齐的,具体该写么东西上面已经说明就赘述了。除了交互规则外,阶的交互设计或者产经还需要补充务规则,如序、商抓规则、权重、算法、规则等等这里就展开说了。

7000多字,让你全面掌握交互设计输出文档的撰写方法

总结

文档的形式有非常多种,针对不同的公和产品也需要作出相应的调整,能够足需求和方便协作,目的就达了,并不希望过多的间花在文档的撰写上,而是希望大家在做计多思考业,本次享就这~

注作者的微信公众号:「应谋鬼计」

7000多字,让你全面掌握交互设计输出文档的撰写方法

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

在项目设计中,交互设计师与上游的产品经理,下游的视觉设计师,开发工程师和测试等岗位的工作密不可分。不论是承上启下的工...
交互文档
UI 设计师在做需求的时候,经常会接到以提升点击率为目标的需求。 提升点击率,设计师朋友第一反应就是提升操作功能的视觉抢...
交互设计
随着促销活动日益增多,相继对应的促销手段也逐渐变的丰富起来。拼购、秒杀、预售、好友助力砍价相继的诞生,让普普通通的单...
交互设计
上一篇《用我搭建的 PST 框架,帮你系统掌握产品的信息引导设计方法》讲了信息引导的策略层:可切入的场景和机制。这篇就总结...
交互设计
文章是关于设计研究中的定性与定量研究方法、步骤,用户访谈的一些思考。 一、设计研究的方法 现在关于用户研究的书特别多,...
交互设计
前言 最近半年,一直有设计师请教我如何培养交互思维,在行业日渐饱和的情况下,设计师们也意识到了「交互思维」的重要性,不...
交互作品集
王M争:前几天在 b 站上看郭德纲的相声,在下面看到一个推荐视频就点了进去,看完之后点「返回」想继续看之前的相声,结果发...
交互控件
本小结围绕口语表达习惯,提出了几点建议,包括简洁、有信息含量的表达,提供示例性的引导、只在需要的时候引导等等。 对话U...
用户体验