交互设计作品集完整十流程

—Pngtree—smart technology drone selfie stick 4208112

交互设计作品集的创作主要有十个步骤,分别为“灵感来源”、“作品立意”、“前期调研”、“总结需求”、“确立概念方向”、“概念设计”、“可用性测试”、“方案评估与调整”、“制作高保真模型”、“排版”。其中,“作品立意”“前期调研”相互影响,并会根据创作的流程推进进行调整。“概念设计”会根据“可用性测试”的结果与反馈进行“方案评估与调整”。十个主要步骤的关系如下图所示。

v2 5598be0a023a3ff4c712d8bd2f2d322a 720w

一个交互设计项目的创作灵感除了给定的设计命题之外,大多会来源于个人对某一领域的兴趣或社会热点问题

v2 0e8545437169c4a0b93d43953f806f44 720w

因为交互设计作品集,注重的是思维逻辑,将自己项目作品以相同方式罗列显然是不明智的做法。同时,同学们需要根据作品的主题和自身想法选择想要展现的专业能力专业知识,每一个作品重点突出你的某一项能力,然后整个作品集是你的综合体现

v2 d3d2beca56d2f6f857c34a8e3675f46a 720w

有了灵感之外,前期调研是必不可少的一部分,同学们要根据作品立意来选择适合的研究方向调研方式。同时,调研的结果调研过程中出现的问题也会影响到作品的立意,需要有策略的进行修改巩固

v2 24d983850553e646091d2633ef7bc67f 720w

调研的过程

在进行概念设计之前,需要总结调研中的市场及用户需求,并确立概念设计的具体方向。概念设计产出的低保真模型则需对用户进行可用性测试,其中发现的问题和得到的反馈有利于方案的评估调整,最终确定方案并制作高保真模型。到这一步,一个交互设计项目作品基本完成。

v2 d0d96f0688ee0550fde0877e63b24c84 720w

低保真原型图

最后,排版的时候注意整体风格要有一致性,但需分清主次,明白这个作品想要突出的重点是什么,使每个作品能综合体现你各方面的交互设计能力,不让观众在翻阅过程中产生视觉疲劳。

v2 07d3811c1b3823188ddcd7a7aeae590e 720w

优秀排版作品实例

看完交互设计流程的一个总结,可能此时会有一点懵,为了更加便于梳理交互设计项目的流程,三儿特别为大家准备了一张交互设计设计过程中的注意事项图,我把每一个步骤的重点都做了概括,大家可以保存,并且牢记每一个步骤的重点

v2 5598be0a023a3ff4c712d8bd2f2d322a 720w

交互设计注意事项图

下面让我来为大家详细解析交互设计项目制作的每一个过程,我们都需要做一些什么!

一.灵感来源

交互设计的灵感来源和艺术设计有很大区别,艺术设计的很多灵感可能是脑中突然闪现的火花,你捕捉到了也许就是一个作品成功的开端交互设计更看中的是逻辑思维,它的灵感来源和主题确定分为命题设计和自命题设计

v2 72332c88407ecb70ccd5936ae548f0aa 720w

自命题设计项目

相较于命题设计老师给定的设计要求或者设计方向之外,自命题的自由度就相对更大一些。除了根据自身的兴趣点之外,一些社会热点问题最新技术的应用也可以作为设计的灵感来源

v2 4aa9d7fc0d5b8396230a68cf9bd7c12b 720w
灵感来源及调研

某种程度上来说,通过设计来解决社会问题,也更加容易提高设计的立意思想境界的表达。很多时候,设计的灵感来自生活。因此,设计师的平常的生活中要注意观察记录身边的问题和社会的关注点,尽可能汲取更多的信息,谁知道什么时候就成就了一个成功的设计作品了呢?

二.作品立意

在捕捉灵感并确定了总的主题之后,要确定作品的立意,这样也让之后的调研有更细致的调查方式更明确的研究方向

v2 ee792c8b579dd2a20f19426b9139378d 720w

比如我们要出一个以运动健康为主题的APP,那么,我们就要结合运动健康这个主题来出设计。一般来说,设计总是在某种指令的驱使下才进行的。

v2 0644d287dd2e22c61f1acc5c9e80e48b 720w

设计的指令是指规定性和指示性相结合的设计要求,也称设计任务设计立意。设计立意是设计过程中的首要环节,立意的成败直接影响作品的好坏。立意是前期很重要的一步,需要同学们考虑可以表达主题的所有因素。交互设计必须紧扣立意,以完善但富有表现力的设计语言以达到别出心裁、与众不同的风格。

v2 278500fc5728ea9ae5e48eb75bc38207 720w

交互设计的设计立意包括:

  • 确定需要解决的具体问题(个人兴趣、社会热点问题等)
  • 设计的机会点
  • 设计想要达成的目标
  • 目标用户等

三.前期调研

没有人是万事通,设计师不可能什么都懂。但是没关系,调研的能力是可以通过学习调研过程方法提高的。

v2 1e8ad4aed3fcdb31b9075952ad999ac1 720w

用户调研

调研的目的是同学们在确立了自己相对熟悉但仍不够了解的设计主题后,能够充分地了解这个主题的方方面面。目标用户是谁,用户群体是怎样的,他们面临问题时的交互与沟通形式是如何表达的,这其中是否有值得深入运营的市场,是否有同类的产品,这些竞品又做的如何是否有提高的空间等。

v2 485c40ddc72a771766dd2909e97aaf57 720w

对调研的数据进行分析

调研的方式有很多,同学们要根据主题选择适合的调研方案严格执行,过程中也需根据反馈不断调整才能事半功倍。

四.总结需求

但是交互设计作品调研的重点,还是应该集中在目标用户身上(这并不是单纯指用户提出的要求和喜好)。用户是怎样的人,有着怎样的行为,有着怎样的成长经历文化背景,内心渴望却又无法轻易表达出的需求等,都远比用户单纯提出来的要求重要的多。

v2 35d10bc3dbfaef094f7817859d91c7cb 720w

相较于其他设计,交互设计的核心是人,是以人为中心的设计。因此,在前期调研之后,同学们需要对用户需求进行总结,并绘制相应的用户画像和用户行为地图,这步对之后的确立概念方向起到指导作用。

v2 0f10820adce3accfbd96e9adbe6c61de 720w

用户画像

五.概念设计

确立概念方向后,同学们可以围绕不同的功能方向,生成数个初步设计概念,并通过不同的设计想法和方式来寻求解决问题的最优方案

v2 0d4f3704e244abdc6b3711ce4376f5ba 720w

设计概念

在此时,同学们需要注意的一点是,我们需要依据项目主题以及设计问题讨论解决问题的手段,而非直接选择设计个漂亮的界面图标

例如,针对运动健康类问题,我们可能需要的是设计可支持智能可穿戴硬件操作逻辑界面,人除了视觉还有听觉、嗅觉、味觉和触觉,同学们不用将思维局限于视觉所传达的交互形式

v2 5258b66ea4c066ab74b1a13cd09ccac7 720w

可穿戴设备项目

对于初步的设计概念,同学们可以通过故事板交互信息架构任务流程图线框图草模制作等可视化方式辅助方案呈现,并推敲设计可行性

v2 d177e816db4f2a233e4aa7d8ea8a5d2a 720w

线框图制作

六.可用性测试&方案评估与调整

在故事版、草图、草模、初步推敲设计概念可行性之后,同学们可以通过征求相关专家意见、目标用户意见焦点小组讨论等获得反馈意见,以此评估设计方案

v2 813e287067b705641a2b4b0a2e6cb655 720w

需要得到各方面的反馈意见

结合交互方式的安排是否合理、用户是否能够迅速的理解设计师所设计的交互行为等反馈信息,同学们可以将多个初步方案经过数次优化,整合为一个最优方案,并开始将行为语意图像化(可参考经典理论符号学),并统一视觉风格。

七.制作高保真模型

现在市面上有很多软件可以制作交互设计的高保真模型,根据作品想要呈现的方式有不同的搭配组合方式。

v2 4941fff0ded0805aeb39eaa2f37acd70 720w

使用invision制作的高保真原型图

举个例子,笔者现在常用的制作高保真原型的流程是这样的:

  1. 用Axure/Sketch绘制UE图,导出成手机尺寸图片;
  2. 导入Marvel或者Invision,加入交互,体验一下;
  3. 把UI图转成黑白,在Axure里标注,写文档,生成html;
  4. UI定稿再导入Invision,高保真体验。

八.排版(Optional)

如果是为留学求职面试做准备,项目的排版就是必不可少的了,交互设计作品集的排版,需要整合全部的设计过程,将背景调研记录市场研究的数据结果用户研究记录,整个设计方案的过程及最终方案以最恰当的形式予以展示。

v2 9810e5d6e8abf6dceeb7bf1314ffe33c 720w

排版需要把整个过程及数据都加入

相较国内最为看重将最终结果美化到极致,国外的院校考官更希望看到完整的设计过程,以及所有调研内容尽可能以图表可视化的形式简明扼要进行展示。对于交互设计作品而言,能用图像视觉语言呈现的内容远比长篇大论更有效,更能打动考官,切记能用图的地方,绝不废话