《用户体验草图设计工具手册》丨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

相关推荐

  • 怎样做好汽车交互设计?

    文章来源:汽车造型设计编辑整理:IO酱车内交互系统看似只是整车的一小部分,但由于承担了车辆和用户的“交流”任务,因此里面涉及到的内容很多,每一项拿出来都需要巨幅讨论,今天我们就和大家概括谈谈这里面的几点。目前重点汽车交互设计是决定智能汽车发展水平的重要标志,现阶段智能汽车在此方面关注的主要一点是用户体验。设计流程汽车交互设计的一般流程包括:1. 需求沟通;2. 资料调研;3. 专家评估;4. 用户研究;5. 需求及信息架构梳理;6. 概...

    2018-03-15
  • 用户体验的创新设计和研究

    2018年全国两会期间,全国政协委员叶友达教授向大会提交了《关于鼓励基于用户体验的设计创新,加速科技创新成果转化的提案》,建议加大对基于用户体验的设计创新的宣传力度,建立全国或区域用户体验研究机构,促进科技创新成果快速、高效落地。长期以来,用户体验的“以用户为中心设计”(User-Centered Design, UCD)的理念一直冲击着传统的“以技术驱动设计”的理念。有研究表明,美国两个世纪以来著名的53位创新者的创新过程,从电话到互...

    微信热点 2018-03-27
  • 只会简单的Axure操作?6周5次实战,让你做出能拿去面试的原型

    昨天跟一位自学Axure、产品工作半年的朋友聊天,蛮感慨的。她遇到的问题,也是蛮多自学Axure的朋友遇到的问题。你是否也有同样的问题?除了原型图不标准不美观,还深受效率低、交互弱的困扰你也有这位同学的困扰,想快速提升axure能力,做出标准原型、高保真原型?推荐起点学院&腾讯课堂联合打造给产品经理的Axure课程已有2000多位同学学习,学习效果显著Axure零基础也能学,学完画出规范原型产品思维和交互贯穿全程,学完告别画图经理如果你...

    2018-05-07
  • UED建筑品谈 | 昭君博物馆:土木轮回

    📌编辑 | F.项目竣工的下午,一片低黑的云朵重重地飘盖过来,浓烈的阳光穿过云缝狠狠地砸在了和周围土地一样色质的“夯土”表面上,一派陌上苍歌的景象。新的“土木”谦虚地溶嵌在大地之上,迥异的材料体验感却反而没有让建筑消失,熟悉得甚至可以忘记的“土”和“木”。体验变得几分陌生,他们与大地一同构建了令人难忘的场所。这让我想到几米漫画书里的句子:“……看不见的,看见了;遗忘的,记住了。”——曹晓昕主创建筑师曹晓昕中国建筑设计院有限公司副总建筑师...

    2018-02-02
  • 交互设计前期分析(一)

    在以前还是交互设计师新手时,总会遇到这种情况,给出了一份方案,被产品经理驳回:“虽然能用,但是不够好,要不要参考其他竞品再想想。”接着再东看看西看看,接着给出第二版方案,仍然被说缺了点什么,于是一版接一版地改,最后勉强定了一个差不多的方案。为什么会导致这样的情况呢?今天我们来说第一个存在的原因。如果做交互设计,没有理解产品的业务需求,那么做出来的设计就算是美观、漂亮,也不能成为好的设计,因为没有实现业务诉求。而且,对业务诉求的分析,会影...

    2018-04-17
  • AxureUX后台业务管理系统原型模板发布

    这是一套基于电商产品的后台业务管理系统原型模板,包含了商品、订单、库存、用户、促销、运营、内容、统计、财务、设置、权限等十多个电商后台系统管理模块。模板中提供了多套登录界面和布局框架方案,同时整理出了后台系统中各类常用的交互元素及组件,可以方便快速的复用到任何中大型系统项目原型方案中。模板框架采用了自适应布局处理,可以在各种屏幕分辨率下达到最佳的兼容性和浏览效果,同时所有功能模块二级界面都是单独设计并使用内联框架嵌入,可极大的提升输出效...

    2018-03-06
  • 【交互设计】一门感性与理性相结合的专业

    交互设计Sheridan交互设计本科是安大略省唯一一所提供该专业的高等院校。专业强调学生的创造力和逻辑思维,并且会学习到创意过程中的各个阶段的实践经验,从研究和规划的设计与执行。第一次见到文俊同学是在今年国际部举办的春节联欢晚会上,他一直帮着学生会布置会场,忙前忙后,哪里需要帮忙,哪里就有文俊的身影。更令人印象深刻的是他非常标准的广东普通话,来自广东的中国学生并不少,但是他的“广普”着实令人印象深刻。文俊同学四年前来到Sheridan,...

    2018-04-07
  • 【用户体验】“跳一跳”游戏的体验

    伴随着微信的升级和重点推荐,小游戏“跳一跳”一夜成为中国互联网的全民爆款休闲游戏。不仅周围的同事、连身在老家七八线小县城的小学同学都在乐此不彼的刷屏和相互竞技。如此如火如荼的燎原之势,除了有微信这个强大的平台效应之外,当然也有一些“跳一跳”自有的吸引力蕴含其中。今天,就和大家一起来聊一聊“跳一跳”中的游戏心理学。第一,尝鲜心理。追求新鲜事物,是人类的天性。任何时候,人类都从未停止过尝试新鲜事物的脚步。而微信,作为一个8亿+的社交平台,“...

    2018-02-26
  • 看过英国院校的交互设计之后,你还想报国内的同专业吗?

    今天我们来聊一聊交英国的互设计专业。随着网络和新技术的发展,人们越来越重视交互的体验,许多公司、网站、APP都开始注意到交互设计在品牌的创建、客户回头率、客户满意度等方面的影响,交互设计师也越来越受到重视。因此,许多同学在高考填报志愿时,会选择交互设计专业。国内开设交互设计专业的院校较少,即便有,也是和工业设计剪不断理还乱,分为实体产品和互联网产品两种方向。国内交互专业普遍存在的问题是,学校教的知识过于浅显泛泛,教学内容与行业需求脱节。...

    2018-02-26
  • 三跨362分考取北邮交互设计,复习经验分享

    2018北京邮电大学交互设计- 连庆欣大家好,我是18年考上北邮艺术专硕的学姐,初试总分362分。回忆过去复习的日子,仿佛刚刚就在眼前。我本科是信息管理与信息系统专业,从一所二本学校三跨考研北邮艺术专硕。我是8月底9月初左右着手开始准备考研的,前后大约准备了4个多月。当时刚刚开始准备复习的时候,也思考了好一段时间,由于自己是跨考的,手绘能力实在太弱,找了好几个学校了解,都是比较偏重手绘能力的,直到我看到了北邮,找了它相关的真题,发现对手...

    2018-05-01