特定场景下，产品交互设计的注意点

时间：2019-08-29 12:03:14 来源：作者：网络

原标题：特定场景下，产品交互设计的注意点

本文会从场景的定义和分析、场景分析对于交互设计两个方面，详细说一下笔者对于特定场景下设计的理解和感受。

上周在公司内部做了一次关于交互和UI设计的演讲，整理完之后发现还有一些东西值得留下来。也算是把当时的逐字稿分享给大家，当然会稍微有些不同，逐字稿也是写得惨不忍睹。闲言少叙，我们开始。

相信大家都在网上看过老罗（罗永浩）在星巴克打脸的视频，这个视频每次在老罗有什么新闻的时候都会被挖出来发一遍，我们在这个视频中还是可以看出很多东西的。包括用户体验、营销方法、甚至文化差异等等。真的很有意思。

首先我们要肯定星巴克这样杯型的命名是有着他一套营销逻辑的。星巴克的点单环节，可以说是一次游戏、一次社交行为及表演，客户在此也得到了某种程度上的满足。

但确实对于点单的客户最初会造成很大困惑，这就和页面一样，如果没有对场景进行分析，设计就会给用户带来困扰和一些非常不适的心里感受。那么设计出的输出物也可能是一次交互设计和UI设计的失败。

（图一：失败的设计）

我们首先来看这个界面（图一），真的很好看很漂亮，按钮的质感和配色都无可挑剔，但是大家有没有注意到，这个管理上传文件的弹窗在功能操作上的感受会让人有和老罗一样的感受。

它的界面有上传、删除、和取消功能，但我们看这张图片，我们真的无法去判断如何操作，它功能按钮做的虽然很精致，但是配色方面让用户觉得无从下手——我们经常作为警示的红色用到了取消，我们最常用的上传功能用到了灰色，按照普通用户的操作习惯来说，最长按的就是删除的按钮，显然这是让人崩溃的设计。我很难去快速地识别和操作。

看这些非常精美的按钮，可以说UI做到了极致，那你可以说这是个好设计吗？

显然不是，他错在哪里？

错在他脱离了场景，表意的换乱造成操作的不确定性和糟糕的用户体验。

（图二：合格的设计）

我们在看下图二显然它是合格的，为什么呢？

场景对了！

蓝色代表功能，灰色代表取消功能，红色代表删除并有提示作用。在上传文件管理的操作场景下，这样的表达就符合了这个场景的功能特点。

我在接下来的文章中会从场景的定义和分析、场景分析对于交互设计详细展开来说一下自己对于特定场景下设计的理解和感受。

一、场景的定义和分析

（图三：需求场景）

在设计中很多需求是针对场景来提出的，有计时的需求、有对比的需求、有需要浏览的需求。

（图四：把需求转化成页面）

转化成页面的话，就是这样，每一个需求都会有他的场景，所以我们需要知道什么叫场景，场景的定义有很多每一个资料或者文献都有不同的定义，但让我觉得总结下来，场景不会离开这些：

谁（who）
在什么时候(when)
在什么地方(where)
做了什么事情(do)
周围环境怎么样(how)

用微信和好友聊天时一种场景。记录工作时间是一种场景，记录工时的同时我继续工作又是一种场景，场景的应用真的是无处不在。

比如一个计时功能的应用，他可能的场景就是，一名律师，在下午的星巴克接待了他的委托人。这个就是场景。

在了解了场景后，我们要继续认识场景的类型。看下如何利用场景的不同来捋清设计的思路：

场景类型一基于目标或者任务的场景

要描述的是用户想做什么，不是如何去做。这种类型的场景是大面积的场景，用途在确定网站架构和内容的时候作用较大。

比如：一名律师想要记录和客户谈话的时间，并很快记录下来。

场景类型二精细化的场景

掌握用户的细节，了解更深的用户信息和习惯。这些细节能帮助我们更深入的理解用户特征及行为。知道了这些信息，我们更容易设计出让用户更舒服、更易操作的产品。

就像刚才的例子，如果我们把它精细化，一名律师，在周六下午2点和客户约在了他住宿楼下的星巴克见面，在他座位周围的人都在安静的学习或休息，所以他和客户说话的声音很小，也不希望被任何声音打扰。

场景类型三全面的测试场景

站在用户的角度呈现用户完成任务的每一步操作除了背景信息之外，还包含了用户完成任务的所有操作步骤。它可以用来完整地呈现用户完成某个任务的所有操作步骤，它很好的解释了用户是如何利用你的产品一步步操作完成自己的目标。

比如说：根据上面律师会客户的分析，我们会做一款计时器放到手机端产品中，并且是不打扰他其他工作，也不会出现任何声音，停止计时后我们会让他直接录入记录文字。

在了解了一些场景的概念后，我们简单了解下什么叫场景设计：

场景设计，即一系列场景的判断与分析，理解用户每一场景的痛点及需求，结合上文场景，预期用户下一步的目标及意图，通过设计缩短关键流程，辅助用户提高操作效率。

场景设计分为四点，首先我们要把这些场景列举出来，形成一个流程图，找出其中最关键的场景。

通过关键的场景，我们要找到用户当前的痛点和需求，并且结合场景预期用户的需求和行为。

我们了解了场景和需求之后，我们的设计要、贴心、高效、富有情感的细节表达。我们的产品则是要更具有易用性。

为了检测我们通过上一步设计策略产出的方案是否符合标准，这一步我们需要对方案进行衡量判断，结合设计目标，我们设定了四个衡量标准：效率、惊喜、感动、期待。总结起来就是简单和高效。

（图五：场景设计）二、场景分析对于交互设计

我们刚刚了解了场景和场景分析，我们继续今天第二个题目：场景分析对于交互设计。

那么交互设计师要如何设计页面呢？

如果是我我会了解用户的目标，继续刚才的例子，用户的目标就是想要计时。

用户进入界面的场景，直接进入、上次计时后忘记停止再次进入、在PC端计时后忘记结束后再进入。这些都是可能的进入方式，我们要针对每一种场景设计不同的任务流程。

我们详细列举出每一个环节的流程之后我们分析他记入页面的预期，计时功能，可以编辑内容。

了解并分析了这些之后，我们就可以开始完整他的所有信息，设计她的细节并开始交互。

这样的方法就是场景化的交互设计。

站在用户的角度去思考问题，为用户所处的场景，提供相应的解决方案，做好信息的整理与分类，引导每一类用户能够准确快速的找到相应的功能。

他总结起来可以分为三大部分：需求分析、场景分析、原型设计。

要求分析阶段，我们要分析各种的需求，我们设定的场景不是在想当然中完成的，而是通过对调查研究用户现场，并从中获取有效信息和经验等方式来进行的。

场景分析，是设计的核心阶段，这个阶段是情景设定过程中的核心阶段，可以细分为用户调研、分析和模拟流程。

通过用户的研究，并分析用户的具体行为和对产品的具体要求；场景分析是将获取到的信息进行结构化及视觉化分析环境，载体（pc 手机触屏等）；模拟产品被使用的全过程，这些模拟的过程必须反应用户对产品的要求，能够充分地描述用户在产品使用过程中遇到的问题，并进一步提出解决问题的方案，通过这个阶段，设计师可以清楚地观察到用户在产品使用中呈现出怎样的形态。

制作我们的demo原型，可以对原型进行测试和易用性的评价，可以让设计师进一步了解用户需求、了解用户和产品之间的关系，为最终产品方案提供最有力的价值。

原型设计阶段，在原型制作过程中可以生成形式多样的模型，我们可以通过直接使用这些模型来进行产品的测试及适用性评价。通过这个评价过程，设计师可以进一步观察用户和产品之间存在其他关系，并未产品最终设计方案提供参考价值。

我们可以给以上交互的场景总结做一个总结——需求场景、环境场景、具体应用场景。

需求来源于用户在现实生活中遇见的问题，用户需要一种有效解决问题的措施，这个措施就是交互设计提供的方案。也就是说，用户的需求就是做设计最根本的依据，可以把需求当做一个场景。
场景的第二部分我归结为环境场景，环境场景包括用户使用应用时的时空状态以及人体的肢体动作状态。
应用场景，我们可以总结为，应用产品的系统、应用产品时系统状态、产品目前的运行状态。

最后我们总结一下今天的内容，我们首先知道了场景的概念谁（who），在什么时候(when)，在什么地方(where)，做了什么事情(do)，周围环境怎么样(how)。我们还了解了交互需要在场景中考虑什么，了解了场景化的交互设计。

最后想和大家说的是，设计有很多种方法，每一种方法都可以帮助我们输出好的设计，我今天说的只是我这些年工作的一个总结和心得，通过一些文献和资料摆在了这里，分享给大家，希望我们可以互相交流沟通，输出更好的设计。

本文由 @Derek 原创发布于人人都是产品经理，未经作者许可，禁止转载。

题图来自Unsplash，基于CC0协议。游戏网

责任编辑：