点赞:542

一个完整的交互设计流程

2021-03-28 01:40:36

分类:UI/UX设计标签:UI设计浏览:2895

针对这个问题,从交互设计师本身的角度可能会较好的回答这个问题。首先,我们看看在国内大厂产品设计流程中,交互设计师承担的职责。

产品设计流程:

一个完整的交互设计流程


从上图可以看出,按照职责划分,交互设计师提供的交付物为交互设计稿,这也是体现交互设计师能力的核心要素。接下来我们看看交互设计稿可以包含哪些内容。

  • 交互设计稿

  • 用户场景描述

  • 用户画像

  • 产品功能列表

  • 场景故事板

  • 逻辑流程图

  • 信息架构图

  • 页面流程图

一个完整的交互设计流程


实际情况来讲,交互设计师只提供页面流程图一项、做好充分的绘制及标注也是可以的,但是一个优秀的交互设计师定不止如此,全方位提升自己的知识技能的广度和深度才该是常态。

1.用户场景描述

优秀的设计师不会等到产品经理交付需求文档才开始交互设计工作,而是从最开始就主动参与到需求调研与采集中去。在这一部分最考验的是需求分析能力。

角色、场景、目标、任务——用客观的合适的交互语言去描绘需求,是交互设计师所应该具备的技能。其中角色、场景是进行用户研究时重点关注的元素,目标是用户价值,任务则是交互设计完成的工作。

一个完整的交互设计流程


产出物:用户研究报告文档、需求描述文档。

2.用户画像

用户画像是在真实数据的基础上严格定义出的高保真虚拟用户,是真实用户的虚拟代表;用户画像不是真实用户,但是在设计过程中代表了真实用户,用户画像不是虚构的,是严格研究出来的。

此处需要区分人物角色和用户画像的概念,通常人物角色运用于产品概念早期,人物角色的信息通常是由我们编造的。我们希望人物角色与我们所收集了解到的内容保持一致,同时为了使人物角色更加栩栩如生,他们的一些具体细节可以是虚构的。用户画像则是群体定量统计分析,对用户进行标签处理,海量数据挖掘所得。需要特别指出的是,也有一部分人将角色和画像视为同一个概念,只是随着产品阶段不同处于不断变化的过程之中,功能作用也随之不同。

一个完整的交互设计流程


产出物:用户画像

3.产品功能列表

产品功能列表是将用户需求转化为产品需求的产物,由产品经理提供,但是产品经理提供的通常是初版本的功能框架,交互设计师可以对功能列表(产品需求)进行复盘,通过沟通进行优化调整,选择更优的产品方案。

一个完整的交互设计流程


产出物:功能列表

4.场景故事板

故事板是传统交互设计的重要补充工具,平时我们的原型设计紧紧局限于屏幕环境的设计,忽略了屏幕之外的使用情境,通过故事板绘制的关键使用场景有利于我们理解屏幕之外的用户目标和动机。故事板五步法

第一步:确定你要解决问题的范围

第二步:把白板和墙上写的点子记在自己的纸上,这是把混乱的信息和点子结合的好机会

第三步:不限形式,可以采用思维脑图,连线等方式,将你脑中的某些想法串联、结合起来

第四步:将一张白纸对折四次,就会得到八个小方格。用5分钟,在每一个小格里面画一个草稿

第五步:把第四步的创意画成具体的界面或者场景——点击哪个按钮,输入什么,当时在想什么,展现一个流程——先做这个,再做那个。

一个完整的交互设计流程


产出物:故事板

5.逻辑流程图

流程图是交互设计师必须掌握的技能,一张流程图可以省去需求文档和交互文档的很多文字描述,让技术人员一目了然的明白设计意图,便于组织程序的逻辑顺序。

产出物:逻辑流程图

6.信息架构图

信息架构图描述产品中的信息的组织结构。

《用户体验要素》的作者Jesse James Garrett 提出一个观点,现在的互联网产品具有基本的双重性:功能型的平台产品和信息型的媒介产品。对于偏功能属性的产品,我们主要关注的是任务,所有用户操作都被纳入一个过程,这是功能型产品的信息架构的核心;对于偏信息属性的产品,我们主要关注的是信息,关注的是信息分类,呈现形式,这是区别所在,不同类型产品体现的信息架构不同。

一个完整的交互设计流程


产出物:信息架构图

7.页面流程图

页面流程图包含了产品所有页面且不重复,采用连接线基于交互逻辑一一串联。页面流程图是交互设计师最核心的产出物,关键点在于逻辑清晰不遗漏,关于这一点,交互设计师可以整理自己的自查清单,包括功能清单,异常情况,逻辑判断等。

一个完整的交互设计流程


产出物:页面流程图

从最开始的交互设计师角度出发,全局的看待产品设计流程,再到局部了解交互稿内容涵盖,有这些基础后我们回来再看,回到题主问题:一个完整的交互设计流程是怎样。针对于此,每个公司都有属于自己的流程规范,比如阿里旺旺UED流程、腾讯CDC用户体验部设计流程,微软研究院设计工作流程等,基本大同小异。熟练掌握交互设计基本步骤后,每个人也可以建立专属于自己的特定流程,我比较推崇卡内基梅隆大学设计学院John Zimmerman等人提出的流程框架。该框架包含六个有序组建,依次为:define(定义)、discover(发现)、synthesize(综合)、construct(建构)、refine(精华)、reflect(反思)

交互设计流程

一个完整的交互设计流程



评论留言:
验证码:
换一个?