用户体验草图设计

时间：2023-09-28 09:30:02 | 来源：网站运营

时间：2023-09-28 09:30:02 来源：网站运营

用户体验草图设计：前言： 设计思维可以帮助我们创造出完美的用户体验，而草图则可以让我们开始像设计师一样思考，此书则一步步教您怎样将自己的idea落实到草图上，从而实现真正的设计。此篇文章将为你的草图为你的设计为更好的用户体验为更好的生活提供强有力的实战工具，请仔细阅读，哈哈~

为什么要设计草图——

《用户体验草图设计——正确地设计，设计得正确》概要

在介绍为什么要设计草图之前，首先给大家解释一下，草图、设计、绘画三者之间的区别：




草图和绘画其实没有任何的关系，一个不懂得绘画的人，同样可以运用草图来表达自己的想法，并与他人进行沟通表达自己的想法。

首先它是一种可以帮助设计师表达、发展及沟通设计想法的基础工具，对于想法的产生、设计的发展，到设计的选择，直到最终被开发都起到非常关键的作用。

同时草图运用的日常设计中时，可以使我们构思出更为开放更具有创造力的想法，产生大量想法之后不用顾忌想法的质量（成本很低），通过快速记录想法来创作探索概念，与他人讨论评估分享获取新的灵感，最重要的是可以让你在设计中获得乐趣。

正确地设计

正确地设计往往是从单一想法开始，通过持续发展，改进迭代，最后变成一个最优的想法（如下图）

但是，

这样往往就会存在一个不容忽视的问题：最优的设计往往就会被最初的想法所限制，如果最初的想法本身就存在问题，那么最后的设计何谈最优。这样就需要我们从多个角度，多个想法同时展开设计，也就是“局部爬山算法”（如下图），局部最大值可能比整体最大值小的多，这样我们就会得到相对比较好的想法。

设计得正确

要设计正确的草图需要考虑多种不同的想法，从中进行选择：




上图很好的介绍了这一过程：由最初通过各种方式来发散想法，到思考筛选对想法进行收敛，到最后多个方案同时展开设计。当然这期间会随时有新想法的产生加入，从而选择一个或多个值得深入的想法进行再次展开设计，进行多次迭代从而达到最优的设计。

这其中会涉及到一个“收敛设计漏斗”。收敛设计漏斗每个阶段都是一个迭代的过程，需要不断产生并减少想法直到最终方案的确定。其想法探索与发展的颗粒度会越来越细，考虑的越来越全面。

方法如下：

• 阐明你的设计挑战。
• 针对这个挑战，对此系统拓展出10个以上不同的设计概念。
• 减少设计概念的数量。
• 选择最优希望的设计概念，作为起始点。
• 对某设计概念创造出10个细节或衍生变化。
• 将你最好的想法向一组人陈述。
• 当你的想法改变的时候，将它们画出来。

“发散收敛”图中，“产生想法”为发散设计（产生方案，可能形成最好的idea），“思考筛选——展开设计”则为收敛设计（选择值得深入的一个或多个方案想法，进行展开设计）。

如何设计草图

收集想法

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

1、涂鸦式草图

快速画出想法——任何地点，任何时间——抓取想法的精髓，其是一种快速表达想法，和他人探讨交流的一种“手段”。

那么在画涂鸦式草图时，我们应该注意以下几点;

①包含哪些细节：包含的细节要突出主要概念，如何快速绘制某网页的草图时，那么主要概念为界面的结构、一定形式的几个关键按钮和域；

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

③什么可以忽略：不重要的细节

涂鸦式草图具有以下几个特点：

• 非常快速画出来的
• 一种在匆忙的时候快速抓取想法的方法
• 需要牺牲细节和高保证来换取速度
• 用过练习不用看也能画出来

2、相机取材

开始取材最简单的方法就是拍下你所讨厌的，抓取启示性的瞬间。

3、收集

收集一些图片或者简报等等，无论是好是坏都会有其作用。

4、分享

分享自己的收藏物，促进批次之间的交流，产生想法的碰撞与冲击，从而激发出更好的想法。

视觉化叙述

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

在介绍之前，先简单说下故事的重要性：

• 可视化程度更高，更容易理解
• 对用户来说印象更深刻
• 具有同理心和参与感：故事容易吸引注意力，当人们听到好故事时也容易反响激烈，我们的好奇心会使我们代入角色，而这会让我们感觉有意义，从而更多得参与

从而衍生出故事板在交互设计中的应用：

• 以人为中心的设计方法：站在用户立场去审视设计，更了解使用场景
• “批判”技巧：故事板是团队全员参与，每个人随时都可以对每个场景进行“批改”
• 迭代法：有任何新的想法，都可以随时加入故事板，因为故事板本身制作简单、快速、成本低

那么，我们如何将草图转化为故事板，如何创建故事板呢？

首先故事板要包含角色、场景、情节三方面主要因素。首先说下角色，即涉及你故事的具体角色。他们的行为、外表和期望，以及他们在操作过程总做出的任何决定都是非常重要的。其次是场景，即用户的使用场景。最后是情节，创建一个故事构架，确定故事的主线剧情，通常会包含起因，经过和结果，即用户目标、触发事件、行为流程、行为结果等，并围绕用户的目标进行展开。除了以上三方面基本因素，还要考虑到故事板本身的真实（主要是让角色、他们的目标、以及他们的体验尽可能清晰地呈现，用户会感同身受）、简单（跟主要目标无关的都是耍流氓）和具有情感（用过角色的经历来传递情感）。

视觉化叙述包含顺序故事板、状态转变图、分支故事板、叙述性故事板。

• 顺序故事板：说明的是一段时间内的交互顺序

• 状态转变图：确定故事板之间的关系，通过故事板展现出交互状态、交互所引发的转变，以及多决策路径

• 分支故事板：一段时间内所发生的交互决策

• 叙述性故事板：一段时间内关于使用情景的故事，包含物理环境、人的行为、一段时间发生的事情。它们展现出了所发生的事，因此需要补充界面故事板来突出界面上发生了什么，抓取每个活动所需要表现的细节，使用箭头来说明运动的方向，添加注释以突出发生了什么，并在每一草图下面加上简短的说明语句。

用户体验活灵活现

当故事板中的每幅草图之间已经有了良好的起承转合，那么你就可以将这些故事板升级成为一个可互动的视频。这些视频可以通过回放这些故事，展示故事的分支剧情来进行可视化的叙述。

邀请他人参与草图设计

心智模型

一个人对某事物运作方式的思维过程，即一个人对周遭世界的理解。——Susan Carey

通俗的来说，就是得知用户看到草图时，是如何通过其表面呈现的视觉元素来解决它（或者不理解）

在设计一款产品时，首先要对用户的心智模型有一定的了解和认知，产品的使用方式要契合用户的心智模型。比如微信的红包，形态“红色长方形、上面有黄色的封口”并且可以在屏幕上展示出来。人们看到都懂这是红包，习惯性地要去点击。

而微信红包的功能也的确满足了用户的心理需求和使用方式：一是它符合用户操作习惯，收红包的过程是发--接--拆；二是保障了用户的控制权，红包拆还是不拆用户都有自主选择的决定权。好奇心、期待感、惊喜、趣味等人类基本的情感要素就都体现在打开红包那一刻。

产品界面设计同样也要符合用户的心智模型，这样用户才能快速了解每个界面按钮图标等的含义所在，快速上手。

一款好的产品是最大程度上满足用户的需求，并且好的用户体验。那么我们如何探索解决用户的需求并将其转化成产品分案，并且具有良好的用户体验。首先在“用户为中心的设计”理念下，通过对用户的心智模型的研究理解产品的用户，从而设计出更适合用户的产品。在探索用户心智模型时，会无形之中提升产品的创新度和用户体验，研究和精通了产品所面向的用户群体的心智模型，就更容易让产品交互、可视化效果体验等与用户产生情感上的互动和共鸣。即最终成就的是优秀的情感化设计，也是一个好的产品。

绿野仙踪

名称起源：1939年同名电影，男主角出场周边总围着烟雾和火焰，并伴随着剧烈的声响。托托推翻屏风之后，发现魔法师是个“骗子”，他只不过是能够控制舞台效果和音效的普通人而已。







绿野仙踪就是草图在人的操纵下对用户的操作进行反馈。你自己扮演系统后台，接受并分析用户的操作行为，接着像魔法师一样人为的做出相应的系统反馈。反馈的过程中要尽可能逼真。

发声思考

揭露的是用户在使用草图原型时的真实感受与想法。花费很少的时间，却能带来丰富的可用性信息。

草图板

将草图贴到公告栏上与同事分享，对同事讲解的过程，其实就是对草图原型逻辑等的再次梳理，对草图的组织和归类，最终将收获更多新的视角。

审查

把草图呈现出来，获取他人的反馈，是设计中比较重要的一环。