项目展开的过程中,必然会产生一些输出物,以下是我们归纳出的输出产物以及可以同步的平台汇总。
越是高阶的交互设计师,越要有产品思维,越要从产品全局、产品源头去考虑用户的诉求。所以这个阶段虽然是产品经理、产品设计师更偏重的知识点,但作为交互设计师也应该逐步积累这方面的技能。
文档的价值与目的
为什么要进行这次调研?可以是为了确认产品功能是否好用,可以是了解用户喜好,可以是为了推广新产品。以这次调研为例,目的是通过用户调研,理性了解用户,根据他们的目的、行为和态度差异,将他们区分不同类型,然后从每种类型中抽取出典型特征,赋予人群画像,最终挖掘出不同人群对产品的偏好和潜在需求,以及对品牌的认知程度,从而指导市场推广和产品设计。
文档的目录结构
用户画像是在真实数据的基础上严格定义出的高保真虚拟用户,是真实用户的虚拟代表。用户画像不是真实用户,但是在设计过程中代表了真实用户,用户画像不是虚构的,是严格研究出来的。
此处需要区分人物角色和用户画像的概念,通常人物角色运用于产品概念早期,人物角色的信息通常是由我们编造的。我们希望人物角色与我们所收集了解到的内容保持一致,同时为了使人物角色更加栩栩如生,他们的一些具体细节可以是虚构的。用户画像则是群体定量统计分析,对用户进行标签处理,海量数据挖掘所得。需要特别指出的是,也有一部分人将角色和画像视为同一个概念,只是随着产品阶段不同处于不断变化的过程之中,功能作用也随之不同。
用户画像的目的
为保证产品是为有需求的人设计,同时为产品设计提供依据。有助于了解并定位目标用户,挖掘核心需求,丰富场景,进行趋势预测。
当需求分析、筛选和评定优先级之后得出结果,交互设计师需要把产品功能以列表的形式展现出来。这是需求分析之后,提出解决方案的第一步。
产品列表的价值
功能列表的内容:
故事板,起源于动画行业。在电影电视中,故事板的作用是来安排剧情中的重要镜头。他们相当于一个可视化的剧本,故事板展示了各个镜头之间的关系,以及他们是如何串联起来,给观众一个完整的体验。
现在,「故事板」在产品设计过程中也被广泛的采用,虽然产品设计故事板和动画、影视制作故事板都是用一系列的图片和语言组成的视觉表现形式,但是之间所表达的信息和目标用户却是不一样的。
故事板的价值
我们在做「产品设计故事板」的目的是让产品设计师在特定产品使用情境下,全面理解用户和产品之间的交互关系。
搞清了产品定位后,就到了原型设计阶段,这个阶段交互设计师需要撰写交互文档。交互文档,即交互设计说明文档。英文「DesignRequirementDocument」,缩写「DRD」。主要是用来承载设计思路、设计方案、信息架构、原型线框、交互说明等内容。
以下是DRD的目录结构:
因为是非必要环节,这里就不详细介绍了。
流程图由特定的图形构成,但具体样子由图本身的目的和阅读者的阅读习惯或约定来确定,所以使用的图形并不是固定的,形式并不是最重要的,达到描述效果且读者能读懂即可。
业务流程图,不是操作流程图也不是页面流程图。它是产品的整体业务流程,直接和业务挂钩,可以说是产品的核心流程。
作用
绘制规范/建议
功能结构图就是按照功能的从属关系画成的图表,在该图表中的每一个框都称为一个功能模块。功能模块可以根据具体情况分得大一点或小一点,分解得最小功能模块可以是一个程序中的每个处理过程,而较大的功能模块则可能是完成某一个任务的一组程序。用通俗的话来说,功能结构图就是以功能模块为类别,介绍模块下其各功能组成的图表。
信息架构属于用户体验的结构层,是产品的骨架。一般是由产品经理或者更高层的管理人员给出大框架。除非是大的产品迭代,否则不会大改。
信息结构图构成要素
任务流程图就是通过图形化的表达形式,阐述产品在功能层面的逻辑和信息。它能够更清晰、直观地展示用户在使用某个功能时,会产生的一系列操作和反馈的图标。
基于业务流程,进行任务流程梳理,阐述角色和程序发生交互的流程,你如何进行操作,系统如何进行反馈。
产品结构图是综合展示产品信息和功能逻辑的图表,简单说产品结构图就是产品原型的简化表达。
它能够在前期的需求评审中或其他类似场景中作为产品原型的替代,因为产品结构图相较于产品原型,其实现成本低,能够快速对产品功能结构进行增、删、改操作,减少PM在这个过程中的实现成本。
页面线框图,是通过图形化的表达形式,阐述产品在页面层面的信息。
构成要素
限制
限制,包含范围值、极限值等。
范围值主要指数据的取值范围。比如,当你的界面上出现了下拉菜单、筛选按钮、滑块等控件时,你必须标注清楚它们的选择范围,否则开发人员就不清楚该如何设定,如图所示。
极限值主要指数据的显示限制。比如,最多应该显示多少字数,过时如何显示,是否折行等,如图所示。
状态
包含默认状态、常见状态、特殊状态等。
默认状态主要指默认显示的文字、数据、选项等。这些内容需要注明,否则开发人员可能难以意识到这是用户填完的效果,还是默认就有的。
特殊状态一般指非正常情况下的样式、文案、说明等,如图所示。
操作
包含常见操作、特殊操作、误操作、手势操作等。
常见操作主要指正常操作时得到的反馈状态。比如一个普通的翻页控件,在经过不同操作后会立即出现如下的状态。
特殊操作主要指一些极端情况下的操作。一般,用户不会这么操作,但是-旦遇到极端情况,还是要想好应对措施,因为对于开发人员来说,不管是正常的还是极端的操作情况,他们都要去编写对应的代码。如下图,是填写用户信息的例子,当不写交互说明时,开放往往会遇到很多问题:如果已经勾选了2个人,再勾选第3个人,怎么办如果勾选了「张XX」,下面区块中会相应地出现张XX的信息,那么这时候允许修改张XX的身份证信息吗假如允许的话,修改后「张XX」还保持勾选状态吗表单提交后要新增一-个被保险人信息吗若修改的是除身份证号码以外的信息,「张XX」还保持勾选状态吗提交表单时是覆盖原存储信息吗若修改后出生日期、性别与身份证号码不吻合怎么办......
面对各种复杂的情况,一方面,要和开发人员积极探讨,看看有没有其他的解决方法可以简化各种逻辑判断;另一方面,在得出结论后,要把交互说明写清楚,避免出现让开发人员感到棘手的情况。
误操作主要指当用户操作错误时的情况。不过我们在设计时要尽量避免用户犯错的机会。如图所示,提示中已告诉用户「库存5件」,如果这个时候用户在「数量」一栏中输入「6」会怎么样呢系统会自动帮用户将其改为「5」省去用户手动修正。
手势操作主要指用户使用移动产品时的操作方式。常见的有点击双击、长按、捏、伸、滑动,等等。
反馈
用户操作后得到的反馈动作,包含提示、跳转、动画等。
提示主要指操作后,系统反馈给用户的文字说明等,如图所示。
跳转主要指点击某个链接后,页面跳转到哪里。设计师需要在原型;上注明跳转时是「原页面刷新」还是「新页面打开」。如果是做手机应用的话,需要注明跳转时的转场方式,如图所示。
动画主要指用户操作后,系统通过动画的方式反馈给用户。动画给人的感觉比较友好、趣味性较强,是非常常见的一种反馈形式。比如删除某条信息,该信息以渐变消失的形式告诉用户:这条信息已经被删除了。
在移动应用中,动画反馈的形式更为常见。因此设计师一定要在原型上表述清楚动画的形式,必要时可以制作-段动画演示效果给开发人员。
更多交互说明的内容可参阅《破茧成蝶-用户体验设计师》
全局通用说明,指整个产品可通用或者复用的元素。一般是边做文档边整理出来的,方便自己或者接手该项目的设计师直接调用。其次,对开发及时封装可复用控件也是有参考价值的。
常用控件
常用控件类似UIKit,通常将极具复用价值的控制整理在一起,方便及时调用。
复用界面
顾名思义就是全局可复用的一些内页,比如选择联系人、独立搜索页等。
缺省页汇总
缺省页一般包括加载失败、加载中、网络中断和无数据的空页面。为空页可以按照模块整理在一起,方便UI设计师最后一起设计缺省页,保持风格统一。
用户往往比我们预想中更能注意到页面中的细节,动效除了要帮助用户快速找到他想要的东西,达到他想完成的任务,也是一种可以给用户传递情感的交互元素。没有用户会拒绝任何产品的锦上添花,而功能性动效对于产品来讲,在满足功能效率的同时,能够带来更多额外的附加体验,是一种相对比较容易引发体验峰值的途径。好的交互设计师应当对这些功能动效有比较深刻的理解,在视觉设计阶段可配合视觉设计师给产品加上合理的功能动效。
定义:
功能性动效是一种嵌入UI设计中微妙的动画,有着明确、合理的目标
功能性动效的主要类型:
页面空间转换类动效
页面空间转换告诉用户对象和窗口的状态是如何变化的,防止页面转换视盲,在空间上也能营造更好的印象。
案例:轮播Banner中的空间转换动效
视觉信息反馈动效类型
具备良好用户体验的产品,都应该给用户的每一个操作提供反馈,无论成功与否,反馈会使用户觉得自己与屏幕上的元素进行真实互动。即便隔着屏幕,也能让用户看起来是在直接操作,增加操作的可控性真实自然的体感。
案例:操作结果反馈
功能操作引导
当用户第一次使用你的app的时候,如果没有帮助的话,他们可能会不知道如何操作。我们应该给用户提供一些视觉提示来告诉他们哪些操作是可行的。
案例:功能操作中的引导
品牌与趣味
为了避免与市场上很多app同质化,千篇一律的用户体验,品牌动画可以成为一个产品的营销工具,用来表现一家公司的品牌价值或者突出产品的优势,同时给用户一种愉快又难忘的用户体验。
1.验收的常规流程
2.验收的内容
想要收集用户反馈并不复杂。对于线上的产品,可以在界面上放置一个「用户反馈」入口,让用户在遇到问题时,直接填写反馈信息。对于新产品以及重大的改版,可以通过电子邮件、首页链接等方式主动发放调查问卷,收集用户意见。如果你的产品有在线客服或是产品论坛等功能,也可以让客服把每天咨询最多的问题收集汇总给你,或是直接「潜伏」到论坛中看看用户的吐槽,获取第一手反馈资料。
可用性测试(usabilitytesting)是一项通过用户的使用来评估产品的技术,因为它反应了用户的真实使用体验,所以可以视为一种不可或缺的可用性检验过程。也就是说,可用性测试是让用户使用产品的设计原型或成品。通过观察,来直观的记录用户的感受和体验,从而改善及提升产品可用性的方法。
可用性测试适用于产品发展的各个阶段,包括前期设计开发阶段到后期优化改进阶段。做可用性测试价值在于能够在不同的阶段更加高效的发现问题,从而提高问题解决效率。
注意android与ios平台交互差异
尊重不同平台的用户习惯,是交互设计师在工作中应该注意的环节。在产品设计中,遇到两大平台不同的交互时,交互设计应当:提升用户体验形成模式做成控件库,保持-致性差异不大的地方统一,减小研发和设计的成本。