《用户体验草图设计工具手册》丨NOTES

当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放HappyPharrell Williams - Happy [From "Despicable Me 2"]本书讲了什么本书将指导你如何一步一步地用草图来表达你的设计理念,并介绍了多种草图方法。适合于所有设计行业的从业人员参考阅读,设计组织的领导者也可以参考阅读,包括设计师、可用性专家、人机交互界人士、产品经理人及商业高管等。作者什么来头Bill Buxton,微软首席用户体验...

《用户体验草图设计工具手册》丨NOTES

当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放 《用户体验草图设计工具手册》丨NOTES 《用户体验草图设计工具手册》丨NOTES Happy Pharrell Williams - Happy [From "Despicable Me 2"] 《用户体验草图设计工具手册》丨NOTES


本书讲了什么

本书将指导你如何一步一步地用草图来表达你的设计理念,并介绍了多种草图方法。适合于所有设计行业的从业人员参考阅读,设计组织的领导者也可以参考阅读,包括设计师、可用性专家、人机交互界人士、产品经理人及商业高管等。

 

作者什么来头

Bill Buxton,微软首席用户体验设计专家。

 

1章 进入角色

1.1 介绍设计用户体验草图

通过草图,设计师能够遵循从想法的产生、完善直至选定的过程。也能通过使用草图来进行讨论、交流与评估他人的想法。用户体验设计师要专注于创建长时间使用的用户体验,所以设计草图需要包含动作、交互行为,以及随着时间发展而改变的体验。

 

1.2 为什么要设计草图

  • 草图是帮助设计师表达、发展及沟通设计想法的工具。

  • 设计流程是为了正确的设计,然后将设计做正确。

  • 想法发散与收敛的关系:产生并发散设计,选择并收敛设计。

 

1.3 绘画本

用来记录、演进、展示、收藏想法的基本材料。绘画本鼓励使用者收集和发展大量想法并进行选择,固定在单一思维上并非有用。在许多想法中提炼的过程是为了使我们正确的设计,而发展某一个想法的过程则是为了让设计做得正确。/*挑选本子和画笔内容略过*/

 

1.4 10 10:收敛设计漏斗

拓展10 种不同的想法,并对选出的想法进行改良。设计漏斗描述了作为一名交互设计师在思考问题时的习惯性运用的流程。1010方法内容如下:

  • 阐明你的设计挑战。

  • 针对这个挑战,对此系统拓展出10个以上不同的设计概念。

  • 减少设计概念的数量。

  • 选择最优希望的设计概念,作为起始点。

  • 对某设计概念创造出10个细节或衍生变化。

  • 将你最好的想法向一组人陈述。

  • 当你的想法改变的时候,将它们画出来。

 

2章 对现实世界进行取材

尽管大部分人认为草图是一种创建新想法的方法,然而草图的很大一部分其实是关于快速收集现有想法。从我们周围世界中进行取材是有巨大价值的。当你从他人处获得想法时,你可以使用那些想法作为起始点,来激发你产生不同的方向,进行头脑风暴,将现有想法发展为新想法,或对大量想法进行融合。你不必一个人做这件事情,有一些方法来记录这些获取的想法,使你可以与同事们进行分享和讨论。

 

2.1 涂鸦式草图

快速画出想法――任何地点,任何时候――抓取想法的精髓。涂鸦草图是非常快速的绘画,不去关注细节,具有非常低的保真度,关注关键思路来鼓励交流。

 

从现有系统中抓取想法,重点关注整体布局及各项目是什么。你所创建的涂鸦草图完全取决于你想要突出的重点是什么。要考虑:

  • 包含哪些细节?包含的细节要突出抓取的主要概念。

  • 哪些进行抽象表现?次要的部分可以某种方式弱化。

  • 什么可以忽略?不重要的细节完全可以忽略。

                           

《用户体验草图设计工具手册》丨NOTES

《用户体验草图设计工具手册》丨NOTES

涂鸦式草图:

  • 是非常快速的画出来的;

  • 一种在匆忙时快速抓取想法的方法;

  • 需要牺牲细节和保真来换取速度;

  • 通过练习,不用看也可以画出来。

 

2.2 用相机取材

抓取启发性的瞬间。开始取材的最简单方法是拍下你所讨厌的环境和物体,指出不恰当的设计,并解释为什么。发现差的设计意味着让自己对厌恶的设计物体变得敏感,并尝试理解为什么这个设计让你不快。对激发兴趣的设计进行取材,你也需要对优秀的设计敏感。要养成照片取材的习惯,最好做一个博客来存放自己所发现的设计。对启发你的事情进行取材,许多有用的想法和跨领域创意可能来自日常生活中激发你兴趣的事物。

 

相机取材:

  • 可以提供丰富的想法来源;

  • 想法会留下设计需要避免的线索;

  • 想法会带来设计启发的来源;

  • 养成习惯,照片取材是观察世界的最佳实践。

 

2.3 收集图片和简报

成为半组织性的搜寻者/收集者。收集图片和简报是你可以利用周边世界来获取想法和设计过程的另一种方法。简言之,就是收集他人创建的界面、视觉或数字传达内容、收集你所喜欢的与不喜欢的,收集他人的反应。无论好的坏的都是有用的。

 

收集图片和简报:

  • 搜寻和收集是一项持续性活动;

  • 在任何场景所遇到的图片都可能有帮助;

  • 培养自己收集和组织的习惯。

 

2.4 玩具箱和物理收集

收集实体物品。收集的物品分为两部分:被拆分的和重建的。将一件物品拆成不同的部件可以教会你它的设计过程,手把手教你完成构建的思考过程。拆分物品还能让你用新的方法来进行组装。/*收集过程与方法略*

 

玩具箱和物理收集:

  • 收藏是设计流程的基础;

  • 收藏实物可以出发想法和讨论;

  • 实物可以被拆开并成为新物品的一部分;

  • 随着藏品增加,积极展览可以拓展它的作用。

 

2.5 分享发现的物品

分享是丰富想法的极好来源,不要因为不想分享而不画草图。为了分享而重画具有很多好处。

 

3章 单一图像

典型的草图将能及时捕捉一个单一瞬间,通常是你设想的用户体验中的单一场景。然而我们不会教你如何成为艺术家,我们会向你展示可以用来创造草图的不同方法。

 

3.1 草图前的热身

通过听一段故事,用一只笔不离纸的划线来表达故事,然后让大家来评论。你会发现:

一根简单的线条也能千变万化;

  • 绘图者的意图未必会和观看者的理解相匹配;

  • 评论是发现的过程;

  • 评论需要认真的观察。

 

3.2 画出你所见

绘画精确性的练习。首先根据你的想象来画出一个人。然后找一张人物画进行临摹。最后画出你实际看到的,将之前临摹的图片旋转一百八十度,不要看成人物,而是一堆抽象线条。现在把三张画放在一起对比,你会发现旋转一百八十度之后的临摹画在精确度和细节上有很大进步。你现在掌握了:

  • 绘画的一大部分是基于精确的观察;

  • 假设实物看上去什么样子会让绘画变得困难;

  • 观察和绘画是你可以练习的技能。

 

3.3 草图词汇表

画物体、人和他们的行动。草图词汇表中的元素有:

  • 基本草图元素,线条、矩形、三角形、圆形等。

  • 组合物体,通过将基本草图元素组合而成的物体。

  • 人,火柴人或漫画式的草图,或抽象形状都可以代表人物。

  • 活动,通过区别人的姿势,可以表达出人的不同活动。

  • 身体与情感,不同姿势可以表达情感,可以在头上加符号说明。

  • 脸和表情,通过眉毛与嘴的组合就能表达表情。

  • 组合姿势和脸,在人脸上加以匹配的姿势。

  • 组合不同草图元素来表达状态,将人的姿势与简单物件组合,来组成描述具体情况的简单草图。

 

3.4 普通草图

草图的基本元素:绘画、注释、箭头和备注。草图不仅是绘画,还包含有空间关联性的文字注释,或独立的文字备注。箭头是一种特殊的注释方式,它能起到很大的说明作用。

 

3.4合作式草图

用草图来进行头脑风暴,表达想法,促进交互。必须考虑参与者如何触碰到绘画区域并在上面添加标记(最好同时进行),并且可以对草图进行指点。

 

3.6 绘图软件

用常见的数码呈现工具来画草图。

 

3.7 用办公用品进行草图绘制

使用常见办公用品来创建可编辑草图。

 

3.8 模板

预先画好草图中固定、不变的部分,作为使用及重用的模板。模板可以是照片、描图、数码或纸张形式。

 

3.9 照片描图

创建草图轮廓集,以建立草图构成基础。有些实物很难画,通过照片描图,可以快速创建并使草图变好看的不同组件。首先拍好一张照片,对照片进行描图,保存描图作为草图元素,然后复制并在你的草图中使用。

《用户体验草图设计工具手册》丨NOTES

《用户体验草图设计工具手册》丨NOTES

3.10 混合草图

合并草图与照片。它可以让你在草图上添加位置的环境信息。通过这种方式还可以强调注释可能被人忽视的交互行为。还可以用来突出新设计会如何区别于当前的设计。


《用户体验草图设计工具手册》丨NOTES

3.11 用塑料泡沫设计草图

在物理介质上设计草图。纸笔故事板和草图可以和模型配合来模拟与该设备的交互过程。


《用户体验草图设计工具手册》丨NOTES

《用户体验草图设计工具手册》丨NOTES


4章 及时抓拍:视觉化叙述

想象一个人与系统一段时间内的交互行为是交互设计的特别之处。故事板用一系列独立的图像来捕捉这些时间元素,这些图像一屏接一屏地描述发生了什么。

 

4.1 顺序故事板

视觉化说明一段时间内的交互顺序。顺序故事板用来讲述一段时间内所展现的用户体验顺序的视觉化故事。故事板的难点在于决定哪些草图作为关键帧,观看者是否可以脑补这些帧之间的转变空间。对故事板进行注释可以起到帮助作用,特别是用来解释转变中用户的交互行为。关键决策:要在场景中画出用户吗?应该使用哪些帧来表现顺序?应该展现哪些关键转变?

 

《用户体验草图设计工具手册》丨NOTES

4.2 状态转变图

一种视觉化描述一段时间内状态、转变及决策路径的方法,与顺序故事板类似。

 

4.3 分支故事板

视觉化说明一段时间内的交互决策。


《用户体验草图设计工具手册》丨NOTES

4.4 叙述性故事板

讲述一段时间内关于使用情境的故事。故事板草图可以是手绘的也可以是照片组成的。手绘故事板的步骤:

  • 画出故事板没帧的轮廓;

  • 设计故事线;

  • 画出定场镜头(介绍);

  • 通过合适的照片继续故事线草图的绘制;

  • 突出动作和行动;

  • 向他人迭代说明。

 

《用户体验草图设计工具手册》丨NOTES

5章 让用户体验活灵活现

如果故事板中的每幅草图间都已经有了良好的起承转合,那么你就可以将这个故事板升级成为一个可互动的视频。这些视频可以通过回放这些故事,展示故事的分支剧情来进行可视化的叙述。将交互流程制作成一个图像配准的动画。将故事草图中的每一帧放到PPT的每一页就行了,还可以通过超链接来展示分支故事。

 

6章 邀请他人参与草图设计

动画原型可以通过回放故事或是呈现故事不同的分支剧情对交互流程提供可视化的叙述。其另外一种用途是引领目标用户进入这种可视化叙述,让用户进行真实的行为操作并获得自己真实的感受,产生真正的用户体验。然后你可以探寻用户对于这个动画原型的真实感受。或者你还可以向他人展示你的工作,然后请他们为你提出建议。

 

6.1 探寻原始的心智模型

系统中视觉元素会向用户传达很多信息,然后用户会以此为依据去解释整个系统的工作原理,最终形成关于此系统的心智模型。你可以让用户看着系统原型草图并解释这些元素,来简单快速的发现他们的心智模型,通过对比用户与系统实际存在的心智模型间的差异及不匹配,你可以迅速找出系统的可用性问题,为你的设计迭代提供线索。

 

6.2 绿野仙踪

草图在人的操纵下对人们的操作进行反馈。你自己扮演系统后台,接受并分析用户的操作行为,然后人为的做出相对应的反馈。

 

6.3 发声思考

让用户一边使用界面草图,一边描述自己的想法和动机。通过聆听用户的想法及操作计划,你能了解到他们的意图以及解决问题的策略,然后你可以根据这些进一步检验产品是否满足了用户期望。

 

6.4 草图板

将草图张贴到布告栏与同事进行分享,一旦画出项目原型就应晒出来,向别人讲述草图的过程可以帮你理清思路,回答他人的质疑会让你得到新视角。

 

6.5 审查

把你的草图创意呈现出来,请大家提建议。


《用户体验草图设计工具手册》丨NOTES

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/37057/

(0)
交互精选交互精选
上一篇 2018-05-08
下一篇 2018-05-08

相关推荐

  • 19.怎样绘制用户体验的地图 | 打造产品思维30讲

    19.怎样绘制用户体验地图来自时间前哨00:0015:06这一节讲用户体验地图和用户故事。用户体验地图就是通过画一张图,用一种讲故事的方式,从一个特定用户的角度出发,记录下他与产品或者服务进行接触、进入、互动的完整过程。开始做产品经理的人容易犯的错误,就是用管理员的视角来规划产品。我经常看到这种全局型的产品设计图,复杂、全面、没重点,这肯定是错的。我一般会告诉这种产品经理,请按照一个用户使用的路径,把这个产品设计图再画一遍。从一开始用户...

    2018-03-20
  • 纽约大学交互设计研究生

    恭喜马同学收到纽约大学(NYU)Interactive Telecommunications 研究生offerOFFER展示:学生作品展示:作品集要求:CREATIVE PORTFOLIOSubmission of a creative portfolio is optional due to the diversity of applicant backgrounds. Portfolio materials need not be ...

    2018-03-09
  • 【干货】在考虑入行交互设计之前,你必须搞清楚这些

    本篇文章来自知乎专栏:设计史论与设计哲学https://zhuanlan.zhihu.com/sheji-history-theory作者:乐可柯产品与交互设计师,设计史论学者现任阿里巴巴集团交互设计师毕业于同济大学设计创意学院设计学硕德国奥芬巴赫设计学院交换生今年,O’REILLY公司对全球范围内的“交互设计行业”做了一次调研,收集到了来自25个国家、1000多名设计师的反馈,虽然量不大,但其数据显示的结果可以作为参考,一窥整个交互设...

    2018-01-31
  • 王者荣耀 安卓用户体验服礼包第二波 疯狂放送中

    王者荣耀武则天夺宝多少必出?在游戏中武则天是通过夺宝才能获得的,属于稀有英雄。不过武则天也确实强大,今天小编就为大家带来武则天的解析攻略,告诉大家武则天怎么才能获得,武则天的实战技巧有哪些,快一起来看看吧!武则天详解攻略:1、获取途径:抽奖这个是靠运气,但是抽取次数越多中奖概率会越大,根据土豪玩家反映,夺宝100次左右能获得英雄,100次到200次获得稀有英雄概率很大,所以一般在200次以内就可以抽到武则天。2、技能介绍:【女帝辉光】武...

    2018-04-09
  • sketch都能设计海报了?PS爸爸慌了...

    sketch只能做界面设计?曾经我也这么觉得,自从我知道了他的这款插件——looper惊!呆!了!大写的“服”,sketch你越来越接地气了,废话不多说了,让我们先欣赏一张我用这款插件做的一张海报:不得不说,他打破了我对sketch的偏见,对线条的处理过渡很自然到位,我做的时候只花了5分钟,没错!5分钟搞定!所以重点来了:如何用looper做到这张海报的效果呢?第①步1.下载安装包2.双击  looper.sketchplugin完成安...

    2018-03-09
  • 奥斯陆建筑学院国际建造课程招募!| 2018楼纳教育启航

    📌 编辑 | YHz奥斯陆建筑与设计学院(AHO)位于挪威首都奥斯陆,是挪威顶尖的建筑学院,也是挪威研究型大学系统中的自治机构。学院提供建筑与工业设计领域的教育,在建筑教育领域有很大影响力。- 课程背景 -2018年4月,奥斯陆建筑与设计学院(AHO)将首次在中国楼纳开设建造课程——“传统木构节点的数字化演绎”工作坊,将由于2012年在奥斯陆建筑与设计学院成立的Scarcity and Creativity Studio(以下简称“SC...

    2018-03-13
  • 【求职招聘】绝对干货

    阿里巴巴1招聘岗位1.数据研发工程师2.java研发工程师3.机器学习算法工程师(研究生及以上)4.客户端开发工程师5.前端开发工程师6.产品经理(对候选人要求高,应聘人数多,淘汰率高,投递前望客观自我评估)7.运营等(对候选人要求高,应聘人数多,淘汰率高,投递前望客观自我评估)2岗位要求计算机与理工科等相关专业,本硕博皆可3岗位说明1.申请过内推、网申、被拒绝过的无法再次内推,请勿投递2.理论上官网上面的实习岗位都可,阿里集团及下属公...

    2018-03-26
  • 交互设计牛校排行榜 | 纽约大学 ITP研究生项目

    Create Your Difference. by CYDWHO ARE YOU?Do you love biology but also love your art classes你是否热爱生物,也沉醉于艺术and want to merge the two所以想把这两者融入Do you love programming but also like to make things你是否能编程序,也想做出真实的东西Are you int...

    2018-05-05
  • 产品原型设计(2):母板的创建和使用

    Axure母板:可以将一些页面中的共同之处,比如导航、背景部分等,提取出来,制作为母板。将母板应用于某个页面,则该页 面相当于将模板的内容复制过来。如果有很多页面具有相同的内容,这些页面如果需要修改这些相同的内容时,仅需要在模板中即可完成所有页面的修改。方式一:直接创建母板步骤一:创建Axure母板:在“母板”区直接创建母板里创建了一个名称为“Axure学习平台”的模板步骤二:使用母板选中“Axure学习平台”母板,邮件选择“添加到页面...

    2018-04-08
  • 阿里巴巴UED的设计团队究竟为双11贡献了什么?

    在11月11日这个日子的前后一段时间,当你发现如下症状之一:当你被机场、地铁、公交站牌和网页里频繁出现的双11提醒,感觉重要的时刻就要来临;当你心跳加速,不管什么都先放到购物车里再说;当你最终等待在11号这天的凌晨用风一样的速度支付成功,并长吁一口气;当你认为一切都那么的简单、自然、纯粹,不过是一场轻松的购物。只能说你Too young,Too simple。你的一举一动已经被一个神秘的组织所引导,它让你下单时够快、够准、够狠,并且你毫...

    2018-02-01