更多设计文章，设计交流，欢迎加入粉丝群 | 微信ddm7851

关注#公众号：SKY盖哥 ，第一时间获得设计干货和分享内容。

讲故事也是一种设计能力

作为设计师，经常需要和产品，技术，老板去沟通设计方案，每次都是向外发出声音表现你的的机会，很可惜，大多数设计师在表达时，对方还无法理解你的意思，更难理解你的设计概念和设计思路，很多设计师也因此害怕去说，其实设计师学会讲故事非常重要，也是专业能力的一种。今天这篇文章，希望可以帮助到你。

能把设计说成故事是一门艺术，作为设计师，我们必须借助讲故事的方式，将产品功能推导到用户价值层面，在大公司里面，设计师讲故事是一个越来越重要的技能，一个好的故事能够统一大家的建议，获得领导的认可，是将产品价值和功能流程和用户的情感联系在一起的关键！

看看别人怎么讲故事

韩国的设计，韩国很多潮流的娱乐视频都是围绕一个故事开始的，故事灵感也来源于大多数人生活，容易让观众引起共鸣。

 

▲这个MV是来自Zion.T的Eat，讲述了一个人在失落沮丧的时候，要照顾好自己，整个故事围绕着我们生活中各种失落，孤单的情节，再配合美妙的旋律，让观众感同深受。

▲K.will的Day也是运用电影短片讲述一个故事，讲述了一个单相思男生的故事，虽然故事很浅，但是每个故事的每一步都是来源于我们每个人生活当中的。

▲在Airbnb宣传页面，运用故事讲述了一家3口，为了女儿的生日，一同飞往洛杉矶，他们去了迪士尼乐园，在洛杉矶预订了房源，受到了房东的欢迎！这样宣传比广告更加真实打动人。

故事驱动的设计很容易入手，从情节提要开始，回归用户视角给出用户想要的体验。

▲allthatisshe一个英文网站，这个网站最初是在博主休产假期间创办的，它原本是一个很简单的时尚博客，但是博主异想天开的自我表达方案，以家庭小孩为主题的家庭故事，吸引了全世界的关注，在ins上关注度极高。

 

▲整个网站每篇文章都在描述博主和小朋友的生活故事，他们一家人相处的很多细节，这中间再推荐一些好用的商品，去旅行带着观众一起看风景等！整个网站的故事一般都是从生活细节出发，比如上班的路上，在品尝美食，听着喜欢的音乐时候，然后结合巧妙的内容，吸引用户。

讲好故事的5个步骤

 

那么，作为设计师，平时在述职，总结时候如何去讲故事呢？怎么去把一个合理的项目，通过叙事的方式，让它能和听众引起共鸣呢？

今天分享给你，一个讲故事的框架，一共有5步：

1.开始（背景）

2.冲突（问题）

3.情节（解决问题的过程）

4.高潮（设计策略）

5.行动和结果（问题如何解决的，解决过程中发生了什么）

我们来拆解下这个思路。

更多设计文章，设计交流，欢迎加入粉丝群 | 微信ddm7851

关注#公众号：SKY盖哥 ，第一时间获得设计干货和分享内容。

1.开始（背景）

这个项目是如何开始的，它的整个商业背景是什么，要解决用户的什么问题！在我们演讲或分享时候，尽量在140字以内描述清楚，整个项目的背景和简介，让听众记住你。

乔布斯著名的演讲家，他分享有个小技巧，就是可以先抛出问题和困惑！一次iPad2发布会时候，乔布斯一上台就抛出几个问题，大家对于iPad销量很担心，iPad被各种抄袭，苹果怎么办？在一开始就通过问题，吸引听众，然后引人入胜！

来看一个实际案例，来自Facebook相册一个设计改版，在项目开始，设计师就介绍了整个项目背景，Facebook Photos是让用户更方便的分享他们的故事，分享他们的图片，让用户生活丰富多彩！那么如何帮助用户更加便捷，更快的分享照片，是这个项目的设计重点。

2.冲突（问题）

讲一个好的故事很难，一定要有冲突和问题，就像看一部电影，一定要有反派存在，只有冲突明显，观众才会觉得更有趣。那这个环节就需要我们把这次产品改版，最重要几个问题给提炼出来。

以Facebook为例，Facebook相册遇见的问题是，通过数据研究发现，人们不愿意在Facebook中分享照片有以下几个原因：

1.大家手机中的照片很多，不是为了分享而拍摄的！

2.选择照片很难，比如自拍，一次拍了十几张，选出一个最好的很费时间

3.大家经常忘记了分享

所以，在这个环节，我们需要从生活场景去思考，用浅显易懂的语言去讲述当前产品遇见的问题！

3.情节（解决问题的过程）

针对这些问题，设计师怎么去解决呢，在这个环节，一定要充分把你整个设计过程的思考，详细描述，比如设计师常用的情绪版，竞品分析，设计的形色字构质的思考都可以在这个环节表达清楚。

▲Facebook团队，基于用户研究数据，和数据结果，决定先定出一些设计原则，通过设计原则和主张来解决之前发现的问题和冲突！于是这个过程和产品开发一起讨论出来，设计的原则和目标：

1.帮助人们记住他们可以分享的故事

2.轻松快速的分享

3.设计一种新的布局方式，让大家分享时候自豪，能够吸引人！

▲然后展示了他们做的竞品分析，情绪板，以及一些设计探索的方向！比如做了十几个原型图，对于相册的展示设计了很多概念方案，包括各个文件类型的展示方案（照片，文字，视频，地图）等等！

4.高潮（设计决策）

基于以上设计过程，就可以得出对应的设计决策，再进行详细的方案设计展示。

▲重新设计了页面框架，用户的相册框架图来帮用户更好的分类相册，同时在布局上对各种文件类型进行分类，优化相册的浏览效率。

▲视觉设计时候，去掉不需要的设计元素，突出内容，确保每一步都能是一个最佳的解决方案！

▲同时在视觉设计上进行了很多创新探索，将相册故事以胶片的形式呈现在顶部，让用户更愿意去分享。

▲在设计时，考虑多端的统一性，针对不同端的展示效果，真正的保证设计的落地性！

Facebook这个设计环节就像我们电影的中间高潮部分，怎么去解决冲突的，如何定决策，并逐步去落地整个设计方案的！我们在工作中也需要在这个环节很好阐述你根据设计策略，在设计上怎么去落地的，设计方案是什么样的，最后上线是如何的。

5.行动和结果

这个环节需要把你故事中遇见的问题抛出来，以及这些问题你是怎么去沟通解决的。

比如Facebook相册问题，就遇见了新版本排期问题，无法一下子改完，那么设计师针对这个问题，设计了中间迭代的方案，一步一步迭代到最终，以及开发测试问题，担心用户情绪反弹比较大，分批次上线等等。

同时，做这个项目你得到了哪些启发和教训，后续如何去避免等，最后的结果和上线后数据可以帮助我们验证设计的正确与否。这些设计过程中的细节问题和决策，是帮助我们丰富故事很重要的因素。

掌握好了这个框架，生活中很多事情都可以运用这个框架去讲，比如你要去和别人分享【设计师如何做简历】就可以按照这个框架去讲：

1.开始（故事背景和简介）

很多设计师找工作比较难，作品集发出去无人问津，原因是什么？是找工作人太多，还是大环境不好，那么如何提升作品集呢，怎么才能更快的让你作品集脱颖而出。

2.冲突（问题）

通过查阅了几百份设计作品集，发现一些问题，比如：版式同质化，设计风格单一，文字太多，飞机稿太多，这些是影响作品集质量很大的问题，由于这些问题导致很多面试官看作品集时候看见类似基本都跳过了，所以才导致大家找工作难。

3.情节（解决问题的过程）

通过查看大公司的招聘信息，提取重要关键信息，比如设计趋势，数据研究，系统思考这些关键词出现的比较多，同时查看了全球顶级设计师和韩国设计师作品集，发现好的作品集都是简约的，排版舒服的，那针对这些，你决定从这几个问题去优化作品集：

版式上往苹果简约风格去靠。设计风格上贴近主流，优化作品使得作品手法丰富，同时针对飞机稿太多，优化线上案例，重新按照最新手法来做等。

4.高潮（设计策略）

花了一个月时间，去详细设计你的作品集，同时设计完成后对比之前作品发现明显的提升，同时设计的过程也掌握了一些设计趋势，再投递的时候发现获得面试的机会大于之前。

5.行动和结果

最后获得了一个大厂的offer，但是整个过程中是艰苦的，做作品集中间也遇见很多问题，比如没有人指导，不知道最新的趋势是什么，比较焦虑，针对这些现状当时自己是如何调整的。

运用这个框架简单的一个叙事，你会发现这样的体系化思考能让我们表达时候更上一层楼。

运用XYZ公式讲故事

 

当我们向别人介绍一个新产品时，无法切中要点，明确表达产品用户和概念，很多人会觉得「他们怎么听不懂，一定是他们理解有问题，不是我的问题」很不幸的是，问题就是在于我们的表达上，分享一个XYZ公式给大家。

分享给大家一个公式，掌握后，你就能轻松的给别人讲清楚：

X:产品功能

Y:使用产品的目标用户

Z:这个产品赋予用户的感受

这三个问题，与产品，开发的人都有关系，无论任何项目进展，团队都能想起这个产品愿景，从而让我们对产品轮廓更加清晰，同时这个公式的表达能让团队外的人听的懂。

举个例子

X：微信一款通讯工具，支持单人、多人参与，通过手机网络发送语音、图片、视频和文字；

Y：它的目标用户是使用手机的用户；

Z：这个产品希望链接用户生活方方面面，是一种新的生活方式。

X：支付宝一款支付工具，它融合了支付，生活服务，保险，理财公益的生活服务平台 ；

Y：它的目标用户是互联网用户；

Z：这个产品希望给人亲近、安全、可靠的感觉。

上述这个XYZ框架，能够很好帮助你表达一个产品功能和定位，希望在你下次晋升或者述职向别人介绍时，能够用上。

最后

 

回顾下今天所分享的知识点，如何很好的将你项目讲成故事的5个步骤:

1.开始（背景）

2.冲突（问题）

3.情节（解决问题的过程）

4.高潮（设计策略）

5.行动和结果（问题如何解决的，解决过程中发生了什么）

如何向别人准确表达产品功能和愿景，XYZ公式：

X:产品功能

Y:使用产品的目标用户

Z:这个产品赋予用户的感受。




蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：站酷  作者：我们的设计日记

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

量变引起质变的交互难题

作为唯物辩证法的基本规律之一，“量变引起质变”适用于很多事物的发展规律，而我最近在交互设计中，也发现了很多类似的问题。例如一些常见的控件或者交互方式，在数据量庞大或者层级过多的特殊场景下，就变成了一种“蹂躏用户”的存在。所以在一些特殊业务场景的B端产品中，当“Corner Case”变成一种常态，常见的控件就会开始因为“量变”而引发“质变”，一下子成为用户的困扰。

看了以上两个案例，我们会发现，常规的控件和常用的交互方式在这些“难搞”的场景下，都不再好用了。那我们是否能另辟蹊径，利用一些其它的交互思维，来解决这些棘手的交互难题呢？

困难拆解法

其实一提到“棘手”，“困难”，大家可能多多少少，在网上听过这样的“鸡汤”：“别畏惧困难，困难是可以拆解的，当把一个困难拆解成一个一个小目标去完成时，我们离总目标就会越来越近了。”

这就是我今天想聊的——“困难拆解法”。说到困难拆解法，无论是网上火爆的各类成功学，还是一些成熟的项目管理理论（例如经典的Work Breakdown Structure）都对此有详细的、深层次的研究和实践。我们通常会把这个思维应用到复杂工作和项目的管理中去，但是我今天想做一个大胆的实验，把困难拆解法应用到交互设计中来，看看利用困难拆解法，能否解决我们上面提到的因为特殊业务场景而严重影响交互体验的问题。

既然要做困难拆解，我们总不能随意去拆解，总得有一些拆解的原则和方法论，以支撑行为的正确性。“成功学”中肯定很难找到详细的方法论，那就参考一下Work Breakdown Structure中的拆解原则，来看一看是否可以应用于交互设计的场景。

先一起来看下WBS中定义的分解原则：

1. 将主体目标逐步细化分解，最底层的日常活动可直接分派到个人完成；

2. 每个任务原则上要求分解到不能再细分为止；

3. 日常活动要对应到人、时间和资金投入；

4. 整体拆解的任务，最终可以支撑总任务的完成。

如果我们从中提取一下关键意义，就是：

1. 大目标拆解成小目标；

2. 拆分到最小颗粒度；

3. 每个小目标需要有对应成本的衡量；

4. 最终完成总目标。

最后，可以将原则的关键意义与交互设计做一个对应：

1. 将一个场景内的大的任务目标，逐步分解成一个个小的交互行为

2. 每个交互行为要尽可能的简单直接，只针对一个交互目的的达成；

3. 拆解的每一个小目标都要有对应的交互成本的计算；

4. 整体拆解出的小的交互行为，最终可以支撑总任务目标的完成。

分析到这里，我们大概总结出了一些拆解的原则，但是仔细看这四条原则，大家会发现，目前还少了一个概念的输入：那就是交互成本。如果没有交互成本的计量，那就没办法真正衡量出我们最后通过拆解制定出的方案，是否真正节省了用户的交互成本，提升了任务效率。

所以，在开始拆解之前，还需要先一起了解下交互成本。

交互成本

什么是交互成本呢？尼尔森·诺曼（Nielsen Norman）将“交互成本”定义为用户为实现其目标而必须付出的身心努力的总和。大多数初级设计人员都有这样的误解，即交互成本等于用户完成任务所需的点击次数。但是，它远不止于此。《Interaction design is more than just user flows and clicks》（作者Richard Yang）一文中讲到：交互成本可以分为物理交互成本（PIC）和心理交互成本（MIC）。

1. 心理交互成本（MIC)

• 心理交互成本（MIC）的两个最重要的组成部分是注意力和记忆力。当一项任务需要过多的注意力或记忆才能完成时，它将具有较高的心理交互成本（MIC），从而降低了可用性。

• 对于不同类型的记忆都有广泛的分类。最短的记忆类型称为工作记忆，通常在任务过程中仅持续几秒钟。换句话说，当我们参与其他认知过程时，我们的工作记忆负责我们可以掌握的信息。米勒定律指出，普通人一次只能在他们的工作记忆中保留5-11件物品。完成产品中的任务所需的工作记忆与强加给用户的心理互动成本（MIC）负担成正比。所以，任务不应要求用户随时在其工作记忆中保留七个以上的项目。在极少数情况下，如若必须要求用户在其记忆中保存11个以上的项目，请使用“区块”减轻其精神负担。“区块”指将信息分组。

• 与注意力和记忆有关的另一个考虑因素是“希克定律”。此条定律指出，“做出决定所需的时间会随着选择的数量和复杂性而增加”。

  
  

  
  

  

  
  

2. 物理交互成本（PIC）

• 常见的物理交互成本（PIC）因素包括到达距离和目标宽度，用户输入的数量以及完成任务所需的操作等。

• 费茨定律指出，点击目标的时间（例如，单击按钮）是距输入设备的距离和目标的击中框宽度的函数。例如，如果鼠标光标很远且按钮很小，则单击桌面上的按钮将花费更长的时间。

• 评估物理交互成本（PIC）的最佳方法是“任务分析”和检查可用性指标，例如“任务时间”。

  
  

  
  

  

  
  

3. 交互路径和动机
在某些情况下，用户可能采取多种路径来实现其目标。用户根据“预期效用”的概念来决定采用哪种路径。

• 用户权衡每个操作的收益和成本，然后选择收益与成本之间最佳平衡的路径。用户趋向于选择自己预期中交互成本更低的那条路径。如果操作路径不直观或不熟悉，即使物理操作成本很低，但由于心理交互成本（MIC）较高，他们最终也会选择他们更熟悉的路径。

• 具有较高动力（例如，由于品牌运营）的用户更有可能承担较高的互动成本以实现其目标。假如消费者是某品牌的忠粉，那即使这个网站的交互成本很高，那么用户可能仍有足够的动力去完成他们的任务。然而，如果用户购买常规产品时付款流程的交互成本很高的话，那么他们很可能去其它网站购买。

从以上具体理论的阐述中我们可以看出，在评估交互成本的时候，步骤数，点击次数以及操作路径长短这些我们日常最关注的几个维度，并不能完全评判交互行为的好坏。而注意力成本和记忆力成本，以及预期效用，往往也会成为决定一种交互行为成败的关键，而对于上面提到的“困难场景”，也正是因为数据量过大和层级过深致使用户的注意力和记忆力成本阶梯式增加，从而导致常规组件体验感崩塌。
下图中，我具体整理了各个交互成本组成的因素，以及会导致的结果。

如何拆解？案例一

我们详细聊了困难拆解法的基本原则和交互成本的主要概念之后。接下来开始进入正题，我们通过困难拆解法和交互成本计算的逻辑，来解决上面提到的两个案例的问题。

首先，我们先拆解一个简单的案例。

拆解困难法的核心是将一个大的难以达成的目标拆成各个小目标，所以我们需要先确定这个案例的核心困难点。
第一步，分析问题：
这个方案的优点就在于：在物理交互成本上，省了一步点击，将信息直接po到定位的周围，根据格式塔的接近原则，用户可以很容易的寻找和查看相应定位对象的详情。但是这些优点只限于在定位对象少，展示的详情信息数据量小的场景内。一旦处于数据量庞大的场景下，就会产生大量的信息杂揉。定位与详情相互交织、覆盖，非常混乱。如果用户想在这种界面去寻找信息的话，将需要付出非常大的注意力成本，大大加长了用户选择信息的时间。心理交互成本的增加，对于用户的使用情绪，也会产生消极的影响。
所以，此案例的核心问题就是：移动端屏幕很小，在有限的展示范围内，无法容纳大量的数据，所以导致信息杂糅在一起，对用户使用造成了极大的干扰。

那怎么去解决这个核心问题呢？让我们开始进行第二步：拆解方案的主体。
通过分析可知，这个案例最小颗粒度的两个交互主体为：

1. 在地图上找到关注区域的定位标记；

2. 查看定位标记相对应的详情数据。

那么现在，根据上面提到的拆解原则，我们要将本来一步到位的交互行为，拆分成两个最小颗粒度的交互行为，然后分成两步来达成同样的任务目标。
第一步，在地图上只留下定位标记的显示，这样的目的主要在于让用户只专注于寻找相应区域的定位标记。在去掉了了大量数据信息之后，页面就一下会清爽许多；

而第二步就是将查看详细数据拆分成一个操作，即点击某一个定位标记时，详情数据通过弹出卡片，或者弹出弹窗的形式，去陈列详细数据。（如果详情数据少，就可以使用卡片的形式，这样不会打断当前操作；如果详情数据量很大，并且需要足够的拓展性以便后期增加详情，则可以使用弹窗的形式。）这么做则是为了让用户更专注于查看他所关注的详情信息。

阐述完解决方案，根据原则的3，4条，我们一起衡量下方案对交互体验和任务效率是否有提升。
首先从成本角度来衡量方案：

1.物理交互成本：

• 多增加了一个点击步骤。

2.心理交互成本：

• 去除了界面中大量杂糅的信息，让用户可以清晰、迅速地查看地图位置，并高效的寻找用户所关注的区域定位；

• 让用户只专注于查看他所关注的定位信息，避免了其它大量信息的干扰。即使通过粗略的估算，也可以算出来，这多点击一下的交互时间，要比在大量信息中去检索信息的时间要小得多。

其次从任务目标角度来衡量方案：
1.达成了与原方案相同的目的，即可以寻找某个区域内的定位标记，并可以查看对应的详情。
2.解决了信息杂糅在一起，对用户使用造成极大干扰的交互难题。
所以，综合成本和目标来看结果，这“多一步”的代价，实际大大提高了用户的检索效率。

如何拆解？案例二

当然，上面这个例子过于简单，第一交互路径短，第二也属于比较常规的交互解决方案。那接下来，我们一起来分析一个稍微复杂点的案例，看一看，当“海量数据”再加上“深层级”时，我们用这种方式是否还能解决。

首先呢，还是老套路，先一起来确定一下我们要核心解决的问题：

首先总结这个案例的优点：可以将操作在一个页面内全部铺开，并且通过点击快速打开下级页面，然后在一个页面里对多层数据进行查看和操作。这种交互在数据较少的场景里，是没有问题的。
但是，在移动端场景中，因为屏幕大小有限，一直存在着数据展示条目十分局限的问题，而当层级过深甚至数据条目过多时，这种问题就会愈加愈烈。所以，如果生产环境中长期处于数据量非常庞大的状态，就会引出以下问题：

1. 在一条完整的下拉控件中，只有第一层级的数量是恒定为1的，而二三四层的数据量都有可能为多个，尤其第四层的详情部分，数据条目会更多。所以在一个下拉控件中，假设每一层级都有数据的话，用户至少会看到4条信息。而如果二级信息大于两条的话，在全展开的情况下，就已经占据了一整屏的位置（场景三），从而导致用户在一屏下，至少要去看10-12行（数量随着层级4数据条目的变化有所增减）的信息。假设我们再划一屏，用户就至少需要阅读和记忆20-24行信息。前面的米勒定律也提到，普通人一次只能在他们的工作记忆中保留5-11条信息。完成产品中的任务所需的工作记忆与强加给用户的心理互动成本（MIC）负担成正比。用户在这个过程中面对海量数据，以及繁复的层级，会付出大量的注意力和记忆力成本，导致用户在使用产品的过程中，心理交互成本呈阶梯式增长。

2. 当一个下拉控件二三四层的数据量过大时(图示场景二、三)，除了会增加用户的注意力和记忆力成本，还会增加反复操作的频次以及用户的错误成本，一旦操作错误或者看错数据，重新找到这条数据的成本会变的很高。如果滑动一下的物理交互成本为1，那么在多次滑动的情况下，我们滑动的成本就会变为1*X，这个X变量会随着数据量的增大而成正比的不断增加。

   
   

根据希克定律我们可知：决策所需要花费的时间随着选择的数量和复杂性增加而增加。
所以改进方案的核心点就是：减少页面内的层级和数据量，降低用户选择的复杂性。
但是从业务上来说，肯定不能直接去减少数据的总量，所以我们必须从交互的角度，去制定出可以减少用户选择的方案。找到了要核心解决的问题，接下来我们就开始“拆解”。
那么从哪个角度开始拆解呢？目前的状态是：随着每个层级的不断铺开，用户查看的数据就会不断增加。那既然数据总量上我们无法动刀，那我们就从层级入手，把每个层级单独拆出来，根据拆分原则的最小颗粒度原则，给用户每一屏提供最少层级的选项，让用户专注于最少数据的筛选。具体怎么做呢？一起来看看下面的解决方案。

首先，我们先来拆分第一层级。第一层级是展开后面层级的前提，所以我将第一层级，设计成了一个顶部切换。点开切换后，会跳出弹窗，这个弹窗中会包含所有的第一层级的选项。随着弹窗中不同选项的切换，我们会立马回到列表页面，而页面下方的数据也会刷新为此一级选项下的所有数据。因为第一层级的数据量，相比其它层级，在常规情况下是最少的，所以面对更少的选择，用户便可更专注、更迅速、更便捷的锁定任务目标。

其次，我们将二层与三层，作为展开式的卡片，形成一个卡片式列表。（这里将二三层放在一个页面内，没有拆到最小颗粒度让其形成两个页面，主要是为了控制跳转次数。）列表中的数据只包含对应的第一层级内的数据，所以这个页面中展示的数据比起之前场景中的“大而全”，已经得到一个非常明显的过滤。下拉层级，也减少为两层，层级复杂度相比之前简单了许多。另一方面，每条二层的数据都形成了一个独立的卡片，这样在视觉上，会有一个明显的区分。无论是数据量上的选择复杂度，还是视觉上对于层级的区分度，都大幅度缩小了用户的辨别成本。

最后，因为第四层经常会囊括大量数据，我们将第四层单独提出来作为一个独立页面（或弹窗），通过点击第三层的条目进入。独立的页面第一可以大大提升用户对于场景的专注性，第二有利于数据的拓展性，即使再多的信息列入，也不会影响其它层级的展示效果。而如果这些详情信息还分为不同类别的话，我们甚至还可以加入TAB筛选，这样就可以更加快速的通过类别筛选过滤出用户想查看的信息。

老规矩，在阐述完方案后，我们依旧根据原则的3，4条，对方案进行各角度的衡量。

成本角度：

• 物理交互成本：点击数有小幅度增加，而因为屏幕内数据量减少，下划数得到了锐减，另外跳转步骤增多。页面的数据量越大，增幅的物理交互成本越少。

• 心理交互成本：用户在每一个页面所需要做出的信息筛选得到了大幅的减少，每一步足够直观。因为层级页面拆分，而导致的数据大量过滤可以帮助用户完成快速决策。而信息筛选节省出来的时间成本，大大高于因点击而增加的时间成本。低量心理成本的付出，也会提升用户的预期效用，从而使用户忽略一定程度的物理交互成本。

任务目标角度：
这个方案，把选择和查看多层数据条目，拆解成了多步操作，让用户在完成每一个层级内的查看和筛选中，去逐步完成对所有层级的查看和筛选。

拆解之后，每个层级页面中为用户减少了大量的选择和干扰，降低了用户选择的复杂性，帮助用户节省更多的选择任务时间。解决了用户在大量信息中去海选的痛点。
所以从结果来看，通过拆解，既完成了场景下的任务目标、解决了之前存在的交互难题，也节省了大量的心理交互成本，提高了用户的预期效用。

困难拆解等于绕圈子？

看到这里，也许有人会说，感觉所谓的“拆解”，都是在“绕圈子”。其实没错，我们以上的两个方案都多绕了一步。但是交互中本就没有最完美的方案，只有最适合场景的方案。如果可以解决核心的场景问题，对于低幅度的交互成本的增加是可以接受的。
另外，我们有时候在设计交互方案时，经常会过于计较物理交互成本，将“省一步”封为了交互设计的“金科玉律”，从而忽略心理交互成本和预期效用对用户体验的影响，结果导致用户对于产品的选择性和体验感一起降低。
所以当用户面对高额心理交互成本的困境时，不妨付出一些“提升物理交互成本”的代价，也许这多绕的一圈，或者多走的一步，反而会让用户更快的通往“罗马”。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：站酷  作者：回去干活

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

量变引起质变的交互难题

作为唯物辩证法的基本规律之一，“量变引起质变”适用于很多事物的发展规律，而我最近在交互设计中，也发现了很多类似的问题。例如一些常见的控件或者交互方式，在数据量庞大或者层级过多的特殊场景下，就变成了一种“蹂躏用户”的存在。所以在一些特殊业务场景的B端产品中，当“Corner Case”变成一种常态，常见的控件就会开始因为“量变”而引发“质变”，一下子成为用户的困扰。

看了以上两个案例，我们会发现，常规的控件和常用的交互方式在这些“难搞”的场景下，都不再好用了。那我们是否能另辟蹊径，利用一些其它的交互思维，来解决这些棘手的交互难题呢？

困难拆解法

其实一提到“棘手”，“困难”，大家可能多多少少，在网上听过这样的“鸡汤”：“别畏惧困难，困难是可以拆解的，当把一个困难拆解成一个一个小目标去完成时，我们离总目标就会越来越近了。”

这就是我今天想聊的——“困难拆解法”。说到困难拆解法，无论是网上火爆的各类成功学，还是一些成熟的项目管理理论（例如经典的Work Breakdown Structure）都对此有详细的、深层次的研究和实践。我们通常会把这个思维应用到复杂工作和项目的管理中去，但是我今天想做一个大胆的实验，把困难拆解法应用到交互设计中来，看看利用困难拆解法，能否解决我们上面提到的因为特殊业务场景而严重影响交互体验的问题。

既然要做困难拆解，我们总不能随意去拆解，总得有一些拆解的原则和方法论，以支撑行为的正确性。“成功学”中肯定很难找到详细的方法论，那就参考一下Work Breakdown Structure中的拆解原则，来看一看是否可以应用于交互设计的场景。

先一起来看下WBS中定义的分解原则：

1. 将主体目标逐步细化分解，最底层的日常活动可直接分派到个人完成；

2. 每个任务原则上要求分解到不能再细分为止；

3. 日常活动要对应到人、时间和资金投入；

4. 整体拆解的任务，最终可以支撑总任务的完成。

如果我们从中提取一下关键意义，就是：

1. 大目标拆解成小目标；

2. 拆分到最小颗粒度；

3. 每个小目标需要有对应成本的衡量；

4. 最终完成总目标。

最后，可以将原则的关键意义与交互设计做一个对应：

1. 将一个场景内的大的任务目标，逐步分解成一个个小的交互行为

2. 每个交互行为要尽可能的简单直接，只针对一个交互目的的达成；

3. 拆解的每一个小目标都要有对应的交互成本的计算；

4. 整体拆解出的小的交互行为，最终可以支撑总任务目标的完成。

分析到这里，我们大概总结出了一些拆解的原则，但是仔细看这四条原则，大家会发现，目前还少了一个概念的输入：那就是交互成本。如果没有交互成本的计量，那就没办法真正衡量出我们最后通过拆解制定出的方案，是否真正节省了用户的交互成本，提升了任务效率。

所以，在开始拆解之前，还需要先一起了解下交互成本。

交互成本

什么是交互成本呢？尼尔森·诺曼（Nielsen Norman）将“交互成本”定义为用户为实现其目标而必须付出的身心努力的总和。大多数初级设计人员都有这样的误解，即交互成本等于用户完成任务所需的点击次数。但是，它远不止于此。《Interaction design is more than just user flows and clicks》（作者Richard Yang）一文中讲到：交互成本可以分为物理交互成本（PIC）和心理交互成本（MIC）。

1. 心理交互成本（MIC)

• 心理交互成本（MIC）的两个最重要的组成部分是注意力和记忆力。当一项任务需要过多的注意力或记忆才能完成时，它将具有较高的心理交互成本（MIC），从而降低了可用性。

• 对于不同类型的记忆都有广泛的分类。最短的记忆类型称为工作记忆，通常在任务过程中仅持续几秒钟。换句话说，当我们参与其他认知过程时，我们的工作记忆负责我们可以掌握的信息。米勒定律指出，普通人一次只能在他们的工作记忆中保留5-11件物品。完成产品中的任务所需的工作记忆与强加给用户的心理互动成本（MIC）负担成正比。所以，任务不应要求用户随时在其工作记忆中保留七个以上的项目。在极少数情况下，如若必须要求用户在其记忆中保存11个以上的项目，请使用“区块”减轻其精神负担。“区块”指将信息分组。

• 与注意力和记忆有关的另一个考虑因素是“希克定律”。此条定律指出，“做出决定所需的时间会随着选择的数量和复杂性而增加”。

  
  

  
  

  

  
  

2. 物理交互成本（PIC）

• 常见的物理交互成本（PIC）因素包括到达距离和目标宽度，用户输入的数量以及完成任务所需的操作等。

• 费茨定律指出，点击目标的时间（例如，单击按钮）是距输入设备的距离和目标的击中框宽度的函数。例如，如果鼠标光标很远且按钮很小，则单击桌面上的按钮将花费更长的时间。

• 评估物理交互成本（PIC）的最佳方法是“任务分析”和检查可用性指标，例如“任务时间”。

  
  

  
  

  

  
  

3. 交互路径和动机
在某些情况下，用户可能采取多种路径来实现其目标。用户根据“预期效用”的概念来决定采用哪种路径。

• 用户权衡每个操作的收益和成本，然后选择收益与成本之间最佳平衡的路径。用户趋向于选择自己预期中交互成本更低的那条路径。如果操作路径不直观或不熟悉，即使物理操作成本很低，但由于心理交互成本（MIC）较高，他们最终也会选择他们更熟悉的路径。

• 具有较高动力（例如，由于品牌运营）的用户更有可能承担较高的互动成本以实现其目标。假如消费者是某品牌的忠粉，那即使这个网站的交互成本很高，那么用户可能仍有足够的动力去完成他们的任务。然而，如果用户购买常规产品时付款流程的交互成本很高的话，那么他们很可能去其它网站购买。

从以上具体理论的阐述中我们可以看出，在评估交互成本的时候，步骤数，点击次数以及操作路径长短这些我们日常最关注的几个维度，并不能完全评判交互行为的好坏。而注意力成本和记忆力成本，以及预期效用，往往也会成为决定一种交互行为成败的关键，而对于上面提到的“困难场景”，也正是因为数据量过大和层级过深致使用户的注意力和记忆力成本阶梯式增加，从而导致常规组件体验感崩塌。
下图中，我具体整理了各个交互成本组成的因素，以及会导致的结果。

如何拆解？案例一

我们详细聊了困难拆解法的基本原则和交互成本的主要概念之后。接下来开始进入正题，我们通过困难拆解法和交互成本计算的逻辑，来解决上面提到的两个案例的问题。

首先，我们先拆解一个简单的案例。

拆解困难法的核心是将一个大的难以达成的目标拆成各个小目标，所以我们需要先确定这个案例的核心困难点。
第一步，分析问题：
这个方案的优点就在于：在物理交互成本上，省了一步点击，将信息直接po到定位的周围，根据格式塔的接近原则，用户可以很容易的寻找和查看相应定位对象的详情。但是这些优点只限于在定位对象少，展示的详情信息数据量小的场景内。一旦处于数据量庞大的场景下，就会产生大量的信息杂揉。定位与详情相互交织、覆盖，非常混乱。如果用户想在这种界面去寻找信息的话，将需要付出非常大的注意力成本，大大加长了用户选择信息的时间。心理交互成本的增加，对于用户的使用情绪，也会产生消极的影响。
所以，此案例的核心问题就是：移动端屏幕很小，在有限的展示范围内，无法容纳大量的数据，所以导致信息杂糅在一起，对用户使用造成了极大的干扰。

那怎么去解决这个核心问题呢？让我们开始进行第二步：拆解方案的主体。
通过分析可知，这个案例最小颗粒度的两个交互主体为：

1. 在地图上找到关注区域的定位标记；

2. 查看定位标记相对应的详情数据。

那么现在，根据上面提到的拆解原则，我们要将本来一步到位的交互行为，拆分成两个最小颗粒度的交互行为，然后分成两步来达成同样的任务目标。
第一步，在地图上只留下定位标记的显示，这样的目的主要在于让用户只专注于寻找相应区域的定位标记。在去掉了了大量数据信息之后，页面就一下会清爽许多；

而第二步就是将查看详细数据拆分成一个操作，即点击某一个定位标记时，详情数据通过弹出卡片，或者弹出弹窗的形式，去陈列详细数据。（如果详情数据少，就可以使用卡片的形式，这样不会打断当前操作；如果详情数据量很大，并且需要足够的拓展性以便后期增加详情，则可以使用弹窗的形式。）这么做则是为了让用户更专注于查看他所关注的详情信息。

阐述完解决方案，根据原则的3，4条，我们一起衡量下方案对交互体验和任务效率是否有提升。
首先从成本角度来衡量方案：

1.物理交互成本：

• 多增加了一个点击步骤。

2.心理交互成本：

• 去除了界面中大量杂糅的信息，让用户可以清晰、迅速地查看地图位置，并高效的寻找用户所关注的区域定位；

• 让用户只专注于查看他所关注的定位信息，避免了其它大量信息的干扰。即使通过粗略的估算，也可以算出来，这多点击一下的交互时间，要比在大量信息中去检索信息的时间要小得多。

其次从任务目标角度来衡量方案：
1.达成了与原方案相同的目的，即可以寻找某个区域内的定位标记，并可以查看对应的详情。
2.解决了信息杂糅在一起，对用户使用造成极大干扰的交互难题。
所以，综合成本和目标来看结果，这“多一步”的代价，实际大大提高了用户的检索效率。

如何拆解？案例二

当然，上面这个例子过于简单，第一交互路径短，第二也属于比较常规的交互解决方案。那接下来，我们一起来分析一个稍微复杂点的案例，看一看，当“海量数据”再加上“深层级”时，我们用这种方式是否还能解决。

首先呢，还是老套路，先一起来确定一下我们要核心解决的问题：

首先总结这个案例的优点：可以将操作在一个页面内全部铺开，并且通过点击快速打开下级页面，然后在一个页面里对多层数据进行查看和操作。这种交互在数据较少的场景里，是没有问题的。
但是，在移动端场景中，因为屏幕大小有限，一直存在着数据展示条目十分局限的问题，而当层级过深甚至数据条目过多时，这种问题就会愈加愈烈。所以，如果生产环境中长期处于数据量非常庞大的状态，就会引出以下问题：

1. 在一条完整的下拉控件中，只有第一层级的数量是恒定为1的，而二三四层的数据量都有可能为多个，尤其第四层的详情部分，数据条目会更多。所以在一个下拉控件中，假设每一层级都有数据的话，用户至少会看到4条信息。而如果二级信息大于两条的话，在全展开的情况下，就已经占据了一整屏的位置（场景三），从而导致用户在一屏下，至少要去看10-12行（数量随着层级4数据条目的变化有所增减）的信息。假设我们再划一屏，用户就至少需要阅读和记忆20-24行信息。前面的米勒定律也提到，普通人一次只能在他们的工作记忆中保留5-11条信息。完成产品中的任务所需的工作记忆与强加给用户的心理互动成本（MIC）负担成正比。用户在这个过程中面对海量数据，以及繁复的层级，会付出大量的注意力和记忆力成本，导致用户在使用产品的过程中，心理交互成本呈阶梯式增长。

2. 当一个下拉控件二三四层的数据量过大时(图示场景二、三)，除了会增加用户的注意力和记忆力成本，还会增加反复操作的频次以及用户的错误成本，一旦操作错误或者看错数据，重新找到这条数据的成本会变的很高。如果滑动一下的物理交互成本为1，那么在多次滑动的情况下，我们滑动的成本就会变为1*X，这个X变量会随着数据量的增大而成正比的不断增加。

   
   

根据希克定律我们可知：决策所需要花费的时间随着选择的数量和复杂性增加而增加。
所以改进方案的核心点就是：减少页面内的层级和数据量，降低用户选择的复杂性。
但是从业务上来说，肯定不能直接去减少数据的总量，所以我们必须从交互的角度，去制定出可以减少用户选择的方案。找到了要核心解决的问题，接下来我们就开始“拆解”。
那么从哪个角度开始拆解呢？目前的状态是：随着每个层级的不断铺开，用户查看的数据就会不断增加。那既然数据总量上我们无法动刀，那我们就从层级入手，把每个层级单独拆出来，根据拆分原则的最小颗粒度原则，给用户每一屏提供最少层级的选项，让用户专注于最少数据的筛选。具体怎么做呢？一起来看看下面的解决方案。

首先，我们先来拆分第一层级。第一层级是展开后面层级的前提，所以我将第一层级，设计成了一个顶部切换。点开切换后，会跳出弹窗，这个弹窗中会包含所有的第一层级的选项。随着弹窗中不同选项的切换，我们会立马回到列表页面，而页面下方的数据也会刷新为此一级选项下的所有数据。因为第一层级的数据量，相比其它层级，在常规情况下是最少的，所以面对更少的选择，用户便可更专注、更迅速、更便捷的锁定任务目标。

其次，我们将二层与三层，作为展开式的卡片，形成一个卡片式列表。（这里将二三层放在一个页面内，没有拆到最小颗粒度让其形成两个页面，主要是为了控制跳转次数。）列表中的数据只包含对应的第一层级内的数据，所以这个页面中展示的数据比起之前场景中的“大而全”，已经得到一个非常明显的过滤。下拉层级，也减少为两层，层级复杂度相比之前简单了许多。另一方面，每条二层的数据都形成了一个独立的卡片，这样在视觉上，会有一个明显的区分。无论是数据量上的选择复杂度，还是视觉上对于层级的区分度，都大幅度缩小了用户的辨别成本。

最后，因为第四层经常会囊括大量数据，我们将第四层单独提出来作为一个独立页面（或弹窗），通过点击第三层的条目进入。独立的页面第一可以大大提升用户对于场景的专注性，第二有利于数据的拓展性，即使再多的信息列入，也不会影响其它层级的展示效果。而如果这些详情信息还分为不同类别的话，我们甚至还可以加入TAB筛选，这样就可以更加快速的通过类别筛选过滤出用户想查看的信息。

老规矩，在阐述完方案后，我们依旧根据原则的3，4条，对方案进行各角度的衡量。

成本角度：

• 物理交互成本：点击数有小幅度增加，而因为屏幕内数据量减少，下划数得到了锐减，另外跳转步骤增多。页面的数据量越大，增幅的物理交互成本越少。

• 心理交互成本：用户在每一个页面所需要做出的信息筛选得到了大幅的减少，每一步足够直观。因为层级页面拆分，而导致的数据大量过滤可以帮助用户完成快速决策。而信息筛选节省出来的时间成本，大大高于因点击而增加的时间成本。低量心理成本的付出，也会提升用户的预期效用，从而使用户忽略一定程度的物理交互成本。

任务目标角度：
这个方案，把选择和查看多层数据条目，拆解成了多步操作，让用户在完成每一个层级内的查看和筛选中，去逐步完成对所有层级的查看和筛选。

拆解之后，每个层级页面中为用户减少了大量的选择和干扰，降低了用户选择的复杂性，帮助用户节省更多的选择任务时间。解决了用户在大量信息中去海选的痛点。
所以从结果来看，通过拆解，既完成了场景下的任务目标、解决了之前存在的交互难题，也节省了大量的心理交互成本，提高了用户的预期效用。

困难拆解等于绕圈子？

看到这里，也许有人会说，感觉所谓的“拆解”，都是在“绕圈子”。其实没错，我们以上的两个方案都多绕了一步。但是交互中本就没有最完美的方案，只有最适合场景的方案。如果可以解决核心的场景问题，对于低幅度的交互成本的增加是可以接受的。
另外，我们有时候在设计交互方案时，经常会过于计较物理交互成本，将“省一步”封为了交互设计的“金科玉律”，从而忽略心理交互成本和预期效用对用户体验的影响，结果导致用户对于产品的选择性和体验感一起降低。
所以当用户面对高额心理交互成本的困境时，不妨付出一些“提升物理交互成本”的代价，也许这多绕的一圈，或者多走的一步，反而会让用户更快的通往“罗马”。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：站酷  作者：回去干活

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务