Project Description

交互设计师产出物简介

看看IxD到底要交付一些什么

交互设计师关注的是产品的可用性和易用性,能够让用户感知到“Amazing ! 这个软件用起来好顺手,强烈安利!”。我们设计的整个交互机制都是为了让用户快速完成任务,并且达成商业目标。

我们需要让用户一眼看懂,无需思考就知道怎么操作,结构是关键。

我们需要引导用户不知道点了几下,就达到了他的目的,流程很重要。

我们需要在这个过程中,自然的接收我们的信息和目的,内容是核心。

交互设计稿,都是为了展现这些交互机制,也展现了我们的思考过程,如果每个产物都存在,一个交互方案就会很丰满与完整,且不会有太大漏洞存在。

交互稿能够帮助我们有效协同和沟通上下游,验证自己设计的产品考虑的是否完整。在之前的文章中(百科交互设计师的专业名词)我们介绍过,交互设计师是连接用户体验设计和UI视觉设计师的桥梁。在整个设计流程中,处于中上部分。整个设计过程如下图:

交互稿产出物 · 基础篇

基础篇的交互设计产出物,是交互设计师必要的产出物。UI视觉设计师、前端工程师、测试工程师接收到的交互稿就是这些。是最终用户看到的所在。

一般而言,交互设计师交付出的产出物应该包含应用流、信息框架、页面内容结构、组件状态、可交互原型(Demo)

· 应用流(流程)
Previous
Next
· 信息结构

信息结构有两个重要的核心,一是内容,信息结构永远和内容相关;二是层级关系。一句话说明就是:创建连贯、逻辑清晰、调理分明的内容

Previous
Next

 

·页面内容结构

信息结构有两个重要的核心,一是内容,信息结构永远和内容相关;二是层级关系。一句话说明就是创建连贯、逻辑清晰、调理分明的内容

通常情况下,一些常见易懂的页面不需要标出结构,如成功页面、404、加载过长等。

我的习惯是针对核心/重点/初次出现的页面进行结构标注说明。下图为一个Checkout页的结构图`

· 组件状态

同一个页面会有不同的状态,确切的说,是页面之中,某个组件的发生的不同状态。其情况是用户发起请求,数据产生变化的结果。

一般情况下,不会单独做稿,而是在流程或者页面结构中体现。

下图为一个页面下,多个状态。

Previous
Next
· 可交互原型(Demo)

交互原型有两个作用,一是用于可用性测试,二是展现细节

交互稿产出物 · 深入篇

深入篇是什么呢,就是下游执行的时候,其实他们并不关注这些,如视觉设计师/前端工程师/测试工程师会在意你的信息结构、页面关系、页面内容构架、组件状态这些,这些直接关系到他们的工作产出物。深入篇的这些产出物,是设计时候用来进行思考的产出物,评审会上用来说服的产出物。

以下产出物,在越靠前,越必要。

· 用户旅程
用户旅程是展现设计关键节点的重要要素,能够帮助你理清信息结构和应用流程。
· 用户画像

我们通过标准的用户访谈,归纳一些标准特征的用户画像。用户画像让我们使功能聚焦于核心客户。

Previous
Next
· 用户情境

信息结构有两个重要的核心,一是内容,信息结构永远和内容相关;二是层级关系。一句话说明就是:创建连贯、逻辑清晰、调理分明的内容

Previous
Next

 

·场景验证/可用性测试记录

我们设计完成之后,需要找用户验证,以保障主要场景能够实现。可以是录屏、摄影、或者一些数据。

结语

记住,任何产出物都是以实际结果为导向的,不是形式主义的需要。所以,产出物可能会随着自己项目进行变化,也可或简略、或复杂的进行产出。一些,以实战为主,客观科学的进行。

勾搭我们

探索更多

一些专业名词解释:情绪版、可用性....

先给大家来一段专业名词:可用性测试、人种志、情绪板、故事板、应用流、用户画像,是不是看到就很懵了。 让我给大家快速普及下这些知识。 设计调研、用户研究、可用性测试是啥? 任何设计,都离不开研究类的工作,让我们清晰方向、了解用户目标、做好用户画像和分析用户行为、做Demo进行可用性测试。很多人将这一切统称为用研。 实际上,这里有三个阶段:方向调研、用户研究、可用性测试。下图是三者之间的差异描述。 用户体验设计、交互设计、视觉UI设计如何区分? 想必这里很多人又模糊了,到底这些事什么设计??如果我们将设计岗位拆解的非常细的话,应该是这样的: · 用户体验设计师-做规划的人 UX负责调研和用研工作,同时也涵盖一部分可用性测试(主要是已有产品)。其产出物交付给交互设计师。 · 交互设计师-设计房子的人 IXD产出流程、框架、信息结构、制作demo进行可用性测试(主要是设计中的产品),其产出物交付给视觉设计,有时候也需要动效设计师参与。 · 视觉UI设计师-装饰房子的人 Visual/UI负责设计视觉画面,设计UI组件、颜色等美学性工作,其产出物交付给开发人员。

Read More »