一个完整的交互设计流程是怎么样的?

参考来源:知乎 庖丁开发整理编辑

维基百科是这么定义交互设计(Interaction Design)的:定义、设计人造系统的行为的设计领域。人造物,即人工制成物品,例如,软件、移动设备、人造环境、服务、可佩带装置以及系统的组织结构。交互设计在于定义人造物的行为方式(the interaction,即人工制品在特定场景下的反应方式)相关的界面。

交互设计是在近几年才慢慢被国人所熟知,目前只有一些较大规模的公司才会设有专门的交互设计职位,小公司一般是 UI 或者 PM 把交互设计的工作包了,那么交互设计职位的工作到底有哪些呢?今天丁丁就来跟大家谈谈交互设计的工作内容以及流程,需要说明的是其实并没有标准的交互设计流程,另外,这些步骤并不是每步都是必须的,要根据项目去分析你所使用的方法。

用户研究

交互设计的初衷就是解决用户的问题。不论设计什么产品,能够被用户认可的途径只有这个产品解决了他们生活中的一个问题。交互设计的第一步,不论是对成熟产品还是初创产品都一样,就是定义这个设计到底要解决用户的什么问题,这一步可以说至关重要。

用户研究就是围绕以用户为中心所进行的活动,使用户实际需求成为产品设计的导向,使产品更贴近用户。目的是为了定位产品的目标人群和用户需求,办法有用户访谈,实地考察,发放问卷等等。

不管你是以哪种形式做研究,在这个过程中,你需要了解:

  • 行为(Activities):例如用户多久用一次、一次用多久?

  • 态度(Attitudes):例如用户怎样看待这个产品?

  • 资质(Aptitudes):例如用户的学历怎样?

  • 动力(Motivation):例如用户为什么用?

  • 技能(Skills):例如用户对使用相关产品是否熟悉?

确定人物角色(Persona)并建模

如果第一步的用户研究有所成功,这时你应该对你的用户有所了解了。根据上面提到的五个方面,你需要挑拣出最典型的一个或几个形象建模。例如逛知乎的人物角色可能有:比较普通的求知者、特定领域的专家、到处灌水的……

你不但要确定这些人物角色(Persona)的主要特点,还要确定他们的需求和目的。为了增加真实性,可以给人物角色(Persona)取名字,选一张照片,细化他们的背景资料。

到这里,你已经对人物角色(Persona)非常理解了,可以设想出他们在使用产品中可能遇到的问题了。这时候为每一个人物角色列一个问题清单,也可以把它们整理到一个简短的故事里。

接下来就是为已列出的问题给出可能的解决方案,然后写一个简短的故事把这些解决方案囊括进去。写成故事的好处是代入感较强,对别人来说容易理解。国内比较推崇故事版,但是把所有情景画出来的效率是非常低的。

画线框图、制作原型

到了这里,你对你的交互方案已经有了一个很抽象的想法了,只需要把它具象化就可以了。这时候需要做的就是把流程图以及线框图画出来,它可以帮你把产品的逻辑理顺,同时也是跟PM以及程序员沟(si)通(bi)的利器,特别是对于比较复杂的产品来说,流程图、线框图显得尤为重要。

确认订单~

制作原型可以让团队对产品的理解无异议,对最终的产品有更直观的了解,同时对下一步的测试评估提供了便利,不然等出完视觉稿甚至产品开发出来再测试,出了问题改起来那就太麻烦,不仅浪费人力,更是把整个项目都耽搁了。

测试评估

丨专业人士测试评估
原型完成后召集两三个设计师或者对交互比较了解的人,使用并评测原型。你可以将原型所关注的几个任务列出来,以免专家不知道原型哪部分可交互哪部分不可交互。

比较常用的评测方法是启发式评估法,而这种方法比较常见的标准是尼尔森交互设计法则。以下是十条尼尔森交互设计法则:

  • 系统状态是否可见

  • 系统是否符合现实世界的习惯

  • 用户是否能自由地控制系统

  • 统一与标准

  • 错误防范

  • 减轻低用户的记忆负担

  • 灵活性和效率

  • 美观简洁

  • 帮助用户认知、了解错误,并从错误中恢复

  • 帮助文档

那么如何做启发式评估法呢?很简单,专家们各自将自己发现问题列出来,并将之与对应的法则相关联,或者根据法则来查找问题,然后专家们分别给自己的问题打分。专家们完成自己的问题列表后,一起讨论,将问题整合起来。
常用的打分方法如下:

  • 4分 – 问题太过严重,一旦发生用户的进程将会终止并且无法恢复
  • 3分 – 问题较为严重,很难能恢复
  • 2分 – 问题一般严重,但是用户能够自行恢复,或者问题只会出现一次
  • 1分 – 问题较小,偶尔发生,并且不会对用户的进程产生太大影响
  • 0分:不算问题
    记住:评测完后别忘记修改你的线框图和原型!

丨用户测试评估
原型通过专家评测后,你可以找一些典型用户使用原型。你可以把任务列给他们,让他们自己尝试完成任务。中间遇到的问题可以记录下来,设计师通过观察来进行评分。

比较常用的用户评测方法是让用户使用原型完成指定的几个任务,让他们在使用过程中将他们的每一步和心中的想法说出来。如果他们忘记说或者不知道该怎么说,你可以适当提问。与此同时,你要将屏幕和声音录下来,可以用录屏软件或摄像头。完成后,你回放这些视频,把观察到的问题和用户报告的问题全部记录下来,与交互法则关联并且打分。

改善设计,持续迭代

说到最后,交互设计的精髓不就是产品的迭代么,哪里没做好改哪里。对于开发周期很长的产品,互联网行业赋予设计师最大的自由度,就是随时没做好,咱就改呗具体步骤就是酌情重复前面四步啦


以上就是交互设计的工作内容以及工作流程,需要强调的是,上面的流程是理想状态下的流程,实际上每个公司、团队都有自己的工作方式。交互设计是一个涉及面很广的学科,但始终记住一点,你做的一切都是围绕用户为核心去优化的。

文章首发于「庖丁开发」公众号,公众号文章里有在文章内做左右滑动的交互图(简书里无法实现),想了解的朋友可以回复「庖丁开发」公众号「技能」俩字获取教程。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,716评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,558评论 1 294
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,431评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,127评论 0 209
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,511评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,692评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,915评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,664评论 0 202
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,412评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,616评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,105评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,424评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,098评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,096评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,869评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,748评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,641评论 2 271

推荐阅读更多精彩内容