如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

本篇文章分别从页面打开方式的类型、当前页打开&新开页面、弹出框三方面对页面链接打开方式进行了探讨，给大家提出一些意见以供参考。

页面打开方式作为链接产品路径的基础，在设计的过程中，或多或少都会遇到选择的困扰，尤其是产品功能复杂，层级较多时，如何让用户按照自己的意愿清晰的浏览信息，保持操作连贯性，是值得体验设计仔细思考与分析的。

近期在所负责的设计项目中，团队对链接操作的打开方式产生了分歧，借此机会整理了一些案例与资料，就这个问题进行分析探讨，也给遇到同样问题的同行一些参考意见。

一、页面打开方式的类型

网页中可操作的链接，主要有按钮、icon 以及文字链接，设计中常用的打开方式则主要有以下三种：

1. 当前页打开

点击操作链接后，在当前的浏览器页面中进行内容显示与操作。

2. 新开页面

点击操作链接后，在浏览器中新开一个独立的标签页面，进行内容显示与操作。

3. 弹出框

点击操作链接后，在当前的浏览器页面中，弹出一个小尺寸的对话框，进行内容显示与操作。

二、当前页打开 & 新开页面

首先来说说最具争议的新开页面&当前页打开。在 HTML语言中，target目标有「target=_blank」和「target=_self」两种属性，分别代表「新窗口打开」和「当前窗口打开」，下图是这两个参数的属性描述。

从这两个参数的属性上来看，「当前窗口打开」是系统默认的处理方式。这个打开方式在国外的网站中实现方式比较统一，用户也形成了一致的习惯，但国内的形式则不尽相同，以至于一直颇具争议，不同类型网站之间、同一网站不同场景之间也没有一个明确的规则标准可供大家学习和参照。

针对这个问题的讨论，可以听到两种不同的用户声音，并且都站在各自的角度阐述其道理。

举个例子，我们以同类型网站（淘宝和亚马逊）的打开处理方式进行对比，来看一下用户习惯、功能场景对链接打开方式选择的影响。

首先，我们确定一致的功能场景：用户从首页中根据各种筛选条件，查找到心仪的商品。来看一下两个网站的处理方式：

可以看出基本是两个极端，差异非常明显，再来看个有意思的现象，亚马逊中国的商品搜索方式竟然又和淘宝一致了，难道链接打开方式的差异竟是中外用户习惯的差异？

这确实占了很大一部分原因，那么造成这种差异的原因主要有：

• 早期的 W3C标准不支持 target=”_blank”（HTML语言中，在新窗口中打开链接）的属性，国外互联网普及也比国内早，于是用户慢慢养成了习惯。
• 默认当前页面打开让国外用户觉得更有「礼貌」。如果用户想新开页面，可以鼠标中键、按住ctrl点击链接或者右键新窗口打开，此时用户更有选择权，可以自己决定打开方式；如果默认新开页面，则让用户失去了选择权。
• 早期国内互联网发展较为浮躁，网站想通过新标签页打开方式，提高PV。
• 国内网络普及晚，部分用户尤其很多老年人不习惯甚至或许不知道，页中有个后退前进按钮、面包屑可用，新开页面便于他们的操作。

那么，淘宝中所有的页面打开方式都是新开吗？不是。像「我的收藏」、「已买到的商品」、「购物车」等功能页面就是当前页打开。

同一个产品内部，如此区别设计的原因我认为有：

• 用户的目的较为明确，查找对象确定。（用户想要查看的对象是确定的，如购物车中的产品，用户有明确的目标，找到链接打开页面即可，不像搜索查找商品，需要一步步缩小范围甚至比对查看）
• 链接入口常驻在网站的信息栏，用户可以随时切换，操作方便，且不存在重新输入的成本。

关于这两种打开方式，到底哪种操作更顺畅，确实难分高下，就跟「确定和取消哪个在左，哪个在右」是一种性质的问题，没有好坏之分，关键是要看在哪种场景下使用更合适。

新页面打开适用的场景：

• 页面内容没有关联性，且从逻辑上没有从属关系，相对独立。如：产品中的外链。
• 存在多页面「比较」的操作，需要经常切换。如：淘宝商品详情。
• 需要保留住前一页的操作不丢失。如：知乎上过滤出来的结果列表。
• 功能分支存在穿插，当路径发生交叉时，最好新开页面。如：产品内部的跳转链接，导致信息关联的层级发生改变。
• 具有辅助功能的操作。如：使用文档（PDF、图片等）需要来回参照。

当前页打开适用的场景：

• 流程性的功能页面，前后操作存在关联和影响。如：下单支付、按步骤新增。
• 同一层级内容间的操作。如：tab栏的切换。
• 同一路径中的操作，用户当前的操作会对主页的内容产生影响。如：编辑一个配置，用户操作完，会回到当前页查看结果。
• 用户具有明确目的性的操作，当前页有利于锁定用户注意力。如：淘宝中「我的收藏」。

以上是结合功能场景进行的选择侧重，如果就「用户体验」一定要分出个高下，我个人还是比较支持默认「当前页打开」，从体验角度分析，「当前页打开」略胜一筹的主要原因有以下两个：

• 尊重用户的决定。当前页打开，将更多选择机会留给用户（鼠标中键、按住ctrl点击链接或者可以右键新窗口打开），一个具有良好用户体验的产品，在用户做操作的时候，总是能让他们按自己的意志做出决定。网站对每个链接强制打开新页面则剥夺了用户的选择权，因为不同的人有不同的浏览习惯和使用需求。
• 体验一致。保持一致体验的设计才能让用户产生信任感与安全感。当用户在操作界面元素的时候，可以顺畅的知道、理解，并且能预料到将会发生什么，不会被分神，也不会被打断。任何违反这个原则的设计都将会演变成一种「以设计方意志为导向」的设计，而不是「以用户为中心」的设计。

小结

当我们不知道两种方式如何选择时，或许「不强制用户」才是最好的体验。因为我们面临的用户多样，电脑操作熟悉程度多样，因此不同用户对于打开方式的习惯也具有多样性，这个是设计者无法揣测和调查清楚的。

在「两害取其轻」的情况下，在当前窗口打开链接，不失为一个选择，尊重用户自己的决定，让用户对交互界面自主可控。

三、弹出框

弹出框（弹层）又叫模态对话框，是指在用户想要对当前对话框以外的应用程序或内容进行操作时的提示方式。它一般覆盖在整体页面之上，避免了页面跳转。

弹出框通常是为了显示一个单独的内容，在不离开整体页面的情况下有一些互动，提供信息和交互。

如下图知乎中的「写想法」，用户可以快速的在弹出框中记录个人想法，记录发布后，很顺畅的回到之前的路径上继续操作，便捷，操作思路清晰。

△ https://www.zhihu.com/

现在很多产品中的新增、创建，也都会采用弹出框的交互方式，当然前提是在弹出框中编辑的内容不是很多，此时弹出框不仅承载了信息编辑的功能，还可以作为上下文的跳转，帮助用户衔接路径。

如 iconfont 中的新建项目，用户新增后，页面会直接跳转到新的项目空间。

△ http://www.iconfont.cn

弹出框适用的场景：

• 内容简单，没有复杂的操作，且具有临时性。如：新增一个收货地址，进行简要的输入编辑。
• 更为详细的辅助说明，是对当前内容的快速扩展。如：缩略图，点击放大查看。

因此，弹出框可以较好的实现上下内容层叠的感知，不打扰用户的主路径，同时作为页面承载元素和用户操作的补充，起到承前启后的作用。

总结

本文结合这三种链接打开方式的页面交互关系，进行适用场景举例，并总结每种方式的优缺点，方便在设计中更好的根据不同的场景选择合适的页面打开方式。

当然，以上总结也是基于我个人的理解与经验，没有统一的用法和标准，在具体设计实践中，仍要靠设计者的直觉和经验来进行综合考量与判断。

作为体验设计师，如何规划用户浏览路径，是个需要严肃对待的命题。没有绝对的好与坏，但一定要结合产品类型、场景、目标用户等进行具体问题具体分析。

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

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

在设计环节中，对于视觉次序的营造是每个设计师所必须精通的，视觉次序也可以理解为视觉层次，它是设计中的必然，无论是海报设计还是页面设计，从整体来看总会有强弱、主次之分，因为有了视觉上的变化，才使得整体更富有层次感。从大体来说：当用户在浏览信息很多的网页时，作为设计师要做到，即使用户只是简单的浏览，也要有能在用户脑海中形成记忆的视觉元素，而这些元素就是视觉中的主，而当用户仔细阅读时才能记忆到的元素才是视觉上的次。从局部来说，要能在视觉上形成先后顺序。这期的内容就是设计中体现视觉次序手法有哪些？这些也是打破版式的常用手法。

一、大小对比

首先，每个人在浏览东西时都会有自己固有的习惯，比如：从上到下、从左到右，这叫常规方式，而作为设计师，不能仅仅局限于常规形式，完全的常规带来的是设计上的枯燥、乏味。要学会利用设计知识打造不同的视觉次序，营造出更强烈的设计感、层次感。

在众多营造视觉次序的手法中，大小对比几乎是每个人都能想到的一种形式，也是很多人认为的最简单的一种，比如：

通过大小对比的形式能直观营造出视觉焦点，这种形式在设计中也是最容易接受的一种。如果左侧放置的也是四块小的产品，给人的感觉就会显得枯燥、乏味，版式太过统一，而正是因为这种放大产品的处理手法，拉开了对比，才使得版式不显呆板。这种形式无论是在文字排版、海报、页面都是很实用的一种，合成设计中的近大远小也同样适用，只是在做对比效果时一定要大胆。

二、配色方式

通过改变不同的配色方式，也能在视觉上营造出视觉层次的变化，比如我们常见的通过有彩色与无彩色进行区分的手法：

在原本无彩色的排列方式中加入有彩色，在视觉上就形成了很强烈的差异化，而正是因为有了强烈的差异，使得存在差异的部分成为了更容易吸引用户的区域，所以就在视觉上形成了先后顺序，同时这种差异的形式也能起到一定打破版式、活跃版式的作用。而在有彩色之间，同样也能通过差异化形成视觉上的主次，比如：

第一行色块能最快引起注意的是第二个，通过色彩饱和度的不同，在视觉上形成了很明显的差异化，进一步改变了原本的做从左往右的习惯性视觉次序。而第二行色块中最快能引起注意的是红色，因为这里用到了改变色系的形式进行视觉上的次序划分。之所以在有彩色中也能很好的体现视觉层次最重要的一点是，他们之间形成的差异足够明显，而不是似有非有。

三、形态的不同

营造不同的视觉次序最重要的就是在正常人习惯的固有次序上寻找变化，那么我们同样可以以形态上的变化作为差异化的形式，比如：

在固有的形态中寻找其中可以引起差异化的元素，从视觉感受而言可以分为两种：第一，改变了原本的习惯性的阅读方式，也使得整体主次发生了变化；第二，原本枯燥、呆板的重复式的结构上因为元素形态的改变，也起到了打破整体版式的作用，使得整体版式变化更多，层次感更强且版式因此也变得更加活跃。形态上的变化还可以这么体现：

虽然都是矩形框，但是线框与色块形成了很明显的差异，同样也可以体现视觉层次，而这种形式在很多页面中也很常见：

这也是版式设计中很重要的一部分，也就是寻找可以打破版式且营造视觉层次的元素，正是因为这些手法，才使得版式更丰富、更富有多变性。

四、空间留白

当要求不能改变很多时，在原有的基础上只需要改变空间位置或者留白方式，也可以营造不同的视觉次序，比如：

在不改变其大小、颜色、形态的前提下，只是改变了空间留白，也能起到改变视觉次序的作用；而在编排或者标题设计中，通过空间留白的方式拉开层次、次序也很常见：

同样是重复的形式，左侧完全没有给人一种有层次、有次序的感觉，在用户眼中，这只不过是一团信息；而右侧通过改变留白的方式充分的体现出视觉上的层级关系，每一个独立存在的标题或者栏目之间都应该用留白的方式体现，这种留白要遵循的原则是：标题与文案的留白要小于栏目与栏目之间且大于说明性文字信息之间，只要这样才能真正意义上的将层次拉开。

五、投影的方式

投影在设计环节中是很常用的一种手法，通过投影可以体现出前后层次，也能改变视觉次序，比如页面设计中的：

这里只是在色块上添加了简单的投影效果，原本的视觉次序就瞬间被打破，而这种投影在海报设计中最常用的是打破前后关系，使得海报更有层次感：

这种大投影的方式，是很多海报以及页面中常用的手法之一，因为有了投影，使得画面整体形成了明显的层次关系，而投影对于用户来说也是很容易接受的，比如：按钮的投影、主体的投影等等，看似很小的改变，往往能给页面带来很明显的效果。这种形式也可以理解为形成遮挡关系，在一些小场景的设计中，一样很实用：

有了遮挡关系，就会形成视觉上的层次，这种看似简单的手法，最终所呈现的效果却是立竿见影的。

六、高斯模糊

拉开视觉次序的另一种手法：模糊，很多人对于 PS 里的模糊工具并不陌生，而通过将视觉元素模糊化处理，一样能起到营造视觉层次的效果，比如我们常见的电影海报中：

通过虚实对比，使得视觉层次变化更强，这也是合成设计中常用的手法之一，而在文字设计中，一样可以通过这样的手法来拉开视觉次序关系，比如：

通过模糊字体中某个笔画，在视觉上形成了一定的空间关系，也使得整体层次感更加丰富，这也是很多设计师喜欢在作品的最后环节加一些飘飞模糊的点状元素丰富整体的原因：

视觉层次的变化对于整体而言是不可缺少的一部分，有时只需要一点点的变化就可以带来意想不到的效果。

七、应用于版式中

这期所说的很多都属于细节上的变化，但是很多人对于细节并不重视，认为不重要，但其实优秀的版式设计基本上都是用不同的细节处理方式堆砌而成的，这期所说的这些形式用于版式设计中也同样很实用，如果你的版式太过呆板，可以通过考虑这些方面在适当的位置进行打破，打破的意思是：在原本很呆板的基础上寻找视觉上的层次变化，使得整体版式活跃起来且富有细节感，比如：

这是从一个页面中选取的一个局部信息，上侧版式给人的感觉毫无变化，如果页面中出现大面积这种形式的版式，会使得整体单调、枯燥，很容易形成视觉疲劳。而下侧区域则是为了避免这些，在形式上改变了许多：第一，颜色上有轻微的变化，这样做的目的是区分开每个栏目。第二，形式上第三个模块做了很明显的层次变化，颜色明显加深了，且投影效果加重，而且按钮区域也用色块的形式代替边框，使得整体层次感更强且有保持在一个很协调的范围内。这里用到的手法，正是这期所说的。

同样我们也可以在网上找一些版式感很强的页面进行分析，去理解这些手法是如何在版式中体现的，比如一些官网的设计，看似很简洁、元素很少，而往往这种页面对于版式的要求更高，因为要用极少的元素体现其版式变化、层次。

总结

视觉层次感是提升整体设计感很重要的一种形式，如何在固有的视觉基础上打破束缚，在形式上形成变化，对于每个设计师而言都是至关重要的；而很多设计手法都存在着共通性，只要学会灵活运用，那么我们的设计作品就不会显得平庸无常。当然这期所说的也并非全部，这些只是很常用的一些形式。

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

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

所以，视觉语言也是规范化的，标准化的，它足够自由，也保有约束。视觉语言本身也可以具备足够明显清晰的特色，就像每个人的表达方式和口音一样，这使得视觉语言本身可以强化和凸显品牌特色。那么想要创建一套属于自己的视觉语言，可以从下面的9个方面入手。

1. 构建品牌独有的配色方案

我们总是说，色彩和形体是用户第一眼最快注意到的东西。配色方案的视觉表现力最强，这使得配色方案成为视觉语言中辨识度最高的组成部分。配色方案本身需要具备一定的独特性，确保它整体上能够让人记住，区别于其他，品牌不至于在繁杂的互联网世界中迷失，也不会让用户无法记住。

另一方面，配色方案应该具备良好的兼容性，能够调和品牌不同模块，比如网站、APP、社交媒体、包装、名片等。

配色也应该体现品牌的价值。想想麦当劳的配色吧，黄色和红色为主。这两种色彩本身能够触发幸福（黄色）和饥饿（红色）的感觉，两者搭配加上经典的金拱门的LOGO，麦当劳的视觉识别度可以说是相当高的。此外，麦当劳旗下的许多其他的设计，也是在这个配色的基础上构建的。

2. 构建排版的层次结构

排版层次结构的构建，和选择字体同样重要。不同的排版层次，能够给人截然不同的感受，清晰还是粗糙，雅致还是有趣。在排版的层次结构上，并不存在对错，更多需要考虑的是合适不合适，风格和感受上的一致性。

当然，不同层级的信息，在排版层级上还是要有比较清晰的体现的，大小疏密对比度不足，会难以让用户感知到内容之间的重要性的差异。

以 Airbnb 为例，网站的排版有着清晰的层次结构，字体的大小、字重、间距和配色都已经标准化了。相应的，给人的体验也始终保持着应有的一贯性。

3. 建立栅格来规范内容之间的空间关系

视觉元素之间的位置关系，和它们本身的设计是同等重要的。如果你希望整个设计在细节上是清晰明确的，那么栅格会给你想要的。

FreeCodeCamp 对此有很明确的描述：

栅格赋予了UI界面元素以模块化的清晰结构，这使得整个设计团队能在此基础上更好地合作。这使得产品能够快速清晰地输出到不同的平台上。如果你是基于某个想法来构建概念设计，那么这种方法更加实用有效。

简而言之，栅格让视觉呈现的复杂度降低了。

4. 创建组件库

从按钮、图标再到卡片，你应当创建出一整套可用的、风格一致的UI组件库。

同样功能的控件，在页面不同的地方、或者不同的页面上有着截然不同的风格，是让人迷惑而糟心的。一个好的组件库，应当包含全部常用的UI组件，以及针对 iOS 和 Android 平台所适配之后的UI组件。虽然构建组件库本身的工作量并不小，但是在完成之后，能让后续的工作事半功倍。

5. 强调图片的风格和特征

在诸多图形化的元素当中，图片和插画是视觉性最突出的元素，这也是整个视觉语言当中最重要的因素之一，因为它从某种意义上是和品牌关系最紧密的素材。

构成视觉语言涉及到图片素材的方方面面，构图，色彩，滤镜，甚至相关动效的细节。

下面是 Smashmallow 中的网页设计，即使它们并不是同期设计也不是服务于相同的功能，但是很明显插画所采用的视觉风格是一致的，并且每幅插画当中都使用了共同的元素：热气球。这一元素和品牌本身是有着紧密关联的，而用户也可以从这些插画图片的内容，迅速意识到品牌本身的一些概念。

6. 为动效设定规则

动画效果同样是要遵循一些规则的。是快速移动还是慢速移动，是悬停触发还是自动运行？这些动效的运动规则其实是有着明显的视觉识别度的，就像日漫和美漫在视觉和运动规则上存在差别一样。

就像下面这个来自Dribbble 的动效，它大体上做着匀速的圆周运动，速度适中，其中有些元素并没有完全按照圆周运动。那么想想看，是否所有的做圆周运动的物体都和它一样呢？它们是否会带来不一样的视觉观感呢？

7. 让视觉和文本内容匹配起来

视觉语言并不是只涉及到视觉元素，文本并不是与之割裂的，在设计的时候，两者需要合理地配合，在体验上达成一致，传达一致的信息。

在下面的 Steffany 这个网站当中，整体设计呈现出非常明显的女性化的特征，文本内容在表达方式和调性上和整体的视觉语言保持着一致，并没有出现两者冲突或者竞争的状况。

8. 可信且可靠

视觉语言只有在用户接纳的情况下，才会地发挥作用，它要给人可靠的感觉。所以，整个视觉语言需要和你的品牌定位、气质表里合一，而不能让设计和产品、企业的气质割裂开来。

你能想象没有主角的芝麻街会是怎样的一种气场么？

整个品牌和视觉形象都是围绕着 Big Bird 和 Elmo 等角色建立起来的，每一个细节的设计都是围绕着这些角色来创建的。注意网站中角色和其他视觉元素之间的映射关系，它们让用户清晰地感知到角色和整体设计之间的关系是表里如一的，这使得整个网站的设计更容易为用户所接受，视觉语言在此发挥了作用。

9. 落实到具体标准文档当中

整个视觉语言在构建起来之后，需要保持各方面的一致性，在具体设计的时候，则得有一份详实具体的设计文档供整个设计团队和利益相关人员，作为参考。所以，完成整个设计之后，将整个视觉语言相关的内容和素材制作成设计风格指南，和整个品牌的设计规范统一到一起。

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

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

在数字化变革时代，更好地理解和分析数字消费者成为每个企业的核心要务。同时，如何将分析结果转化为创新的产品和服务——更是为决策者提出了新的挑战。“设计思维”作为一套完整的“以用户为中心”的方法论和工具包，为企业重塑“客户价值”、实现服务创新，提供了切实的方法指引，而这一切的终极目标是成就企业价值。

1、什么是设计思维？

简单来说，设计思维来自“设计师思维”，是一套基于“以用户为中心”的创新方法论。

在数字时代，消费者的使用动机和行为模式更复杂多样，企业竞争环境也更加复杂多变。对于决策者而言，客户体验、场景、触点、旅程优化等词汇已经不再新鲜。

摆在企业战略制定者们面前的问题是，如何以一种全局视角去理解客户，并让组织运作回归“创造客户价值”，不断创新。埃森哲《2017年技术展望》通过针对全球企业领袖的一项调研发现，79%的受访者认为，组织进化的目标就是——更好地研究消费者使用行为和动机，并提供行业领先的客户体验。

与此同时，面对产品服务创新面临的内外部不确定性，企业决策者往往陷入两难困境：即一方面，鼓励组织内部大胆试错、大胆创新；另一方面，又希望创新过程管理有序，并能量化创新结果。

于是诸多企业领导者重新思考创新模式，并在设计师们那里找到了创新灵感。

企业进一步把设计师的工作模式抽象提炼出来，逐步形成了设计思维——这套结构化地理解消费者习惯、行为、喜好和需求，并产生设计机会的方法论，希望从中找到在数字时代突围的机会。

比起科学研究人员或者销售人员，“设计师”面临的问题、合作对象和产出方式有不同特点，甚至更加复杂。不论什么类型的产品，设计师的思考模式往往是，从不断变化的用户或者市场需要开始，兼顾生产水平和工艺限制，以可执行的产品方案结束。设计过程通常都会融入反复的内部讨论、看似混乱的草图、无情的推翻和修改和某个必要的“灵感爆发”时刻。

创新思维本身也是在不断迭代，我们姑且将其定义为1.0、2.0和3.0版本（见图一）。

2、当设计思维遇到传统企业

对于传统企业而言，创新更是当务之急。而设计思维的成功运用，无疑能够为传统企业插上创新的翅膀。

《哈佛商业评论》就曾以百事公司为例，分析这家传统快消业巨头，如何通过设立首席设计官，将设计思维融入公司文化，并在做任何重要决定时都要考虑设计的因素，完成从新产品、包装、陈列到品牌体验的成功创新。随着诸多传统企业将创新思维应用在各自的创新领域，“设计思维”已经在过去的十几年，从产品规划方法，发展成为了一套系统化的创新方法论。

在新的语境下，设计思维已经发展成为一系列“以用户为中心”的工具和方法集合，这里既包含产品设计模式，也包含组织协作模式；不仅从内涵上，在外延上，这种思维方式也从产品优化，进一步拓展到服务重构、流程设计，乃至实现突破性的商业模式创新。

设计思维3.0作为系统化的创新方法体系（见图二）可以看做以下三项模式及其工具方法的合集：

1. 以用户需求导向的分析模式：倡导从市场和消费者的需求中挖掘尚未被满足的服务机会，通过调研真实用户获得设计洞察，寻找弥补需求断层的机会；
2. 创新式的组织内协作模式：设计过程应由跨团队共同碰撞、讨论完成；过程中采取共创（Co-creation）模式，鼓励引入专家用户直接参与设计。
3. 产品化的问题解决模式：设计过程的实质是解决问题，而交付的结果应是可不断迭代的产品。

3、像设计师那样工作

要实现“设计思维”：

第一步需要转换思考角度，理解分析“用户是谁”、“用户想要什么”，发现有价值的设计机会在哪里；

第二步结合技术的可实现性，筛选可以被技术解决的机会，并拼搭出未来的产品蓝图；

第三步基于实现的需求，做出分步规划，从框架到细节逐步交付。

从产品蓝图来看，前面一个阶段属于需求的汇集；后一个阶段属于需求的延展（见图三）。

以下按照三个步骤，列举设计思维倡导的核心方法：

第一步 理解发现：基于用户需求的分析模式

成功的产品始于对用户需求的发现和理解（见图四）。

颠覆了酒店住宿行业的Airbnb在创立初期，新用户和预定量增长停滞不前，创始人之一同时也是设计师背景的布赖恩·切斯科（Brian Chesky）通过深入对种子用户的理解，发现这些尝试租赁共享房屋的用户最为关心房源状态和特色。

基于这一认知，切斯科和创始团队做出了可能是Airbnb初创期最重要的决定，将最后的预算用于租赁专业摄影设备，并按照用户关注的维度去重新拍摄房源照片，从色彩、角度和细节等方面，去强化共享房屋和酒店的差异，最终这批照片上线后为Airbnb带来了100%的预定量增长。而Airbnb更强化了图片优先的整体策略，时刻关注用户体验，成为这家估值超过300亿美元的共享经济巨头持续增长的基石之一。

设计思维强调把消费者当做立体的“人”来看，了解“人”的习惯经验如何对其购买、使用产品产生影响，分析其在服务各阶段的感受是什么，情绪如何变化。那么，如何了解如此复杂的“人”呢？

设计师们从心理学和人类学家那里借鉴了一些常用的方法，如采取实地观察、跟踪和访谈等方式，记录用户行为的“人种志”研究；又比如场景分析，提倡对产品的使用环境（自然与社会环境）进行记录和分析。

第二步 蓝图定义：创新式的组织内协作模式

面对数字时代消费者不断变化的需求，面对数字化触点大爆炸的现状，在规划设计的初始阶段，企业迫切需要对用户场景进行梳理，采取全局视角去发现待满足的创新机会点（见图五）。

从组织内部看，也需要更为有效的沟通和协作方式。设计思维倡导通过系统化的方式去寻找这些创新机会，其核心思想是：对全局信息的可视化表达，以及跨领域的相互激发。

设计思维鼓励在团队协作中使用创新手法，如头脑风暴进行穷举（Brainstorming）、可视化的方式表现、角色转换（Body Storming）以体会用户感受等，甚至在蓝图规划过程中直接邀请客户或者最终用户参与，以共同设计的方式充分交流和激发，目的是打破团队壁垒，共同以用户视角进行问题定义和讨论，形成统一认识。

埃森哲在帮助某国有银行进行数字化体验再造项目时，发现由传统的业务部门“提出需求”到技术部门“执行需求”的工作模式不仅没有提升效率，反而由于高昂的沟通成本，减少了各方对创新的意愿和投入。

在埃森哲的建议下，将传统的单向需求汇报模式，改为周期性设计创新工作坊。通过系统化的梳理金融类消费者的使用习惯和需求，将未来蓝图的规划与企业整体目标有机结合，找到了适合该企业的创新设计方向。而持续的跨部门合作，也提前统一了创新方向并确保结果落地。

第三步 迭代交付：产品化的问题解决模式

有一种理解认为，设计思维中对于结果的迭代交付诉求是“提早犯错（Fail Early）”，然而更完整的说法应该是“提早评估”。设计思维中使用大量工具从用户角度描述需求，或者搭建原型，这一过程更多是描绘“产品的中间态”，即产品概念由抽象到具体，核心目的是更早完成评估和修正（见图六）。

通过搭建原型并测试的方法，不仅限应用于手机或者网站，也包括线下服务。一个著名的案例喜达屋集团旗下雅乐轩（Aloft）酒店。

作为面向20-30岁年轻人群的品牌，雅乐轩酒店的设计团队在规划阶段，就将真实的设计方案制作成3D模型放置在虚拟线上游戏中，以测试目标用户的反应，整个测试过程持续9个月，并包括了多次基于用户意见的修改。

最终，大量基于“虚拟模型”的测试结果，如酒店大堂色彩选择、屋内布局、影音设备位置等，被有选择地应用在实际酒店设计中。《商业周刊》评论喜达屋这种模型测试，不论从速度或者成本来讲，都非常有参考价值。

4、如何扩大设计思维的价值？

领先的企业决策者们已经认识到，设计不仅仅停留在产品的 “外在美”，而应该聚焦在更具商业价值的“内在美”。那么，如何实现通过“内在美”创造价值呢？答案在于如何利用“设计思维”让内部组织和员工重新回到 “客户价值” 思维方式上去，并密切协作。这里有四条建议：

4.1 让设计思维常态化

首先应在新产品设计研发团队中，将设计思维方法常态化、步骤流程完整化。可考虑通过设立标杆项目、打造标杆产品的形式，完整地应用设计思维方法，在若干轮反复应用之后找到适合本企业的流程方法。

同时，借鉴互联网企业的方式，周期性组织一日黑客马拉松（Hackathon） 类活动，在组织内部扩大影响。

4.2 基于用户需求划分MVP模式路标

MVP即Minimum Viable Product（最小可行产品），是与敏捷产品开发模式密切相关的产品交付模式，由埃里克·莱斯（Eric Ries）在《精益创业》中提出，核心原则是，首先聚焦在满足用户单一需求的功能（所谓“最小可行”），之后不断迭代增加功能，最终形成完整的产品或系统。对待企业核心服务的数字化提升乃至变革时，MVP是一种行之有效的产品交付理念。

4.3 形成创新机制

创新并不意味着一味鼓励犯错，也不意味着无法量化评估。

围绕用户进行产品和服务优化，是一个循序渐进的螺旋式上升过程，这要求对设计结果的评判机制能有效适应这种敏捷迭代。如，将销售结果导向的KPI要求，拆解为若干可以测量的用户行为的KPI。

同时，在定义阶段，将这些用户行为KPI用到产品设计的输入中，聚焦在提升这些用户KPI上，后续不断优化提升。在方案设计中考虑，如何形成反馈机制，预设用户行为的KPI和监测方法，在下一轮优化中不断迭代。

4.4 创新需要融合设计与技术

“技术实验室”是诸多领先企业在进行研发领域创新，特别是构建前沿领域技术创新能力时，常常考虑的战略举措。同样，要进一步推进数字化领域的客户导向创新，建立“创新设计中心”可以从战略的高度推进“设计思维”在数字化转型中的作用。

ERP领域的巨头SAP公司也在持续增加其对设计团队的投入，在2012年就开始着手组建新的设计中心；素以创新和多元化产品著称的3M公司，在2016年将总部设计中心扩容了四倍面积，可容纳150名设计师工作，并在其中进行协作创新、产品展示和客户洽淡。埃森哲大中华区也于2016年底，在香港构建了“设计工作室”，作为分布全球的设计网络的一环，在这个超过3700平米的空间中，集中不同专长的数字化设计能力，与客户共同创新。

可以预见，“创新设计中心”将会越来越多地出现，成为从市场端洞察用户需求、挖掘商业机会的强大双擎之一。

结语

设计思维3.0作为一种全局化的创新方法论，能带给企业一种全新视角，即如何围绕客户价值，构建可持续的产品和服务？

在数字时代，企业需要两手抓：一方面，能够从用户视角分析梳理需求断层和服务机会；从另一个方面，能够为组织的协作方式找到新的模式，以强化效率和有效性。如同设计结果需要渐进式上升，工作方法和协作形式都需要不断进化迭代，才能最终寻找到适合发展阶段的转型切入点，支撑企业数字化时代实现全面创新。

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

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

当我们每周深入探讨一个问题时，可以向这二十位经验丰富的设计师学习。本周，设计师们讲述了从他们设计过的一款失败产品中学到了什么。

Simon Pan（谷歌高级交互设计师 ，美国三藩市，国籍：澳大利亚）

2000年在美国佛罗里达州棕榈滩县的总统选举中，蝶形选票就是一个凶残设计的突出代表。

蝶形选票的设计将候选人与中间一列打孔交织排列在一起。这种设计让很多选民感到困惑，结果使他们不小心将本想投给阿尔·戈尔(Al Gore)的选票错投给了帕特里克·布坎南(Patrick Buchanan)，或戈尔(Gore)与布坎南(Buchanan)两个人。“棕榈滩邮报”的一项研究推测，被蝴蝶选票搞糊涂的选民，让阿尔·戈尔(AlGore)失去了总统职位。

之所以称这是一个失败的设计并不是因为其结果导致乔治·布什(George Bush)赢得了选举，而是因为许多选民在投票后的当天认为自己投给了阿尔·戈尔(Al Gore)。更糟糕的是，因同样原因导致的一模一样的问题早在1996年棕榈滩县的选举中就已经发生过了。任何有能力的设计师只要看一看选票表格，就会发现这当中的可用性问题。任何业余的设计师，都本可以让用户提前测试选票表格的设计并指出问题。

相比选票的设计，当今的设计挑战与实际生活联系更加紧密、更加复杂和全球化。看上去大大小小的决定在我们的世界中承担着重要的结果，我认为，现在是时候让设计成为一个执证上岗的职业了。（阅读 Mike Monteiro的《Designs lost generation》）。

Andrew Doherty（Another.ai的CEO，德国柏林；前谷歌产品设计经理；国籍：澳大利亚）

老实讲，我们所做的几乎每个项目都以这样或那样的方式失败了。每次让我失望的是时间本身时间有限，我们的动作太慢了。我们必须砍掉一些需求和基本功能以满足商业上的诉求。我在媒体上写了一篇关于这件事的文章，结果在当时的设计圈中迅速传播开来。因为我认为在我们的整个职业生涯中，大家都感受到了这种痛苦：即优秀的UX设计师必须是战士，妥协的设计不是好的设计。

“我觉得设计是探索发现，而不是创造。可能因为我之前是考古学家的原因，我认为设计像是恐龙，掩埋在地下的遗迹。作为设计师，我们的任务是仔细清除污垢和粪便，使遗迹被发现，复原，可重新被使用，然后把它们在博物馆展出供人们体验。”(Andrew)

作为设计师，我们也必须用我们的想象力和想法来填补空白和缺失的部分。但业务目标，研发资源，时间和资金总会与我们的理想情况产生矛盾。如果我们不注意的话，他们会试图改变恐龙的本质，把它的骨头碾碎成粉末，而之后他们会奇怪为什么人们不想参观博物馆展出的遗迹了。最好的设计师是那些在限制下沟通，争取，并协调所有不断变化的（通常也存在相互矛盾的）各方利益，来主张设计使命的初衷的设计师。但设计永远不会是完美的。完美的设计不是设计，是艺术。而我们不是艺术家，我们是沟通者。而沟通者总面临沟通失败。但这就是沟通。不断失败，但不断尝试，永远尝试去赢。

Adham Dannaway（高级UI/UX设计师，合同/自由职业，澳大利亚悉尼，国籍：澳大利亚）

当我刚从事设计工作时，我为一家面向小型企业，提供DIY建站工具的初创公司工作（是的，又是一款建站工具）。这款产品最酷的地方在于：一个业主只需输入他的企业名称、行业和品牌色，一个充满相关内容和图片的网站就会在他的眼前自动生成。可以说是真正的一键生成网站。

我负责设计和构建网站的框架模板，使以后的网站可自动生成。我需要找到一个基于企业名称，所在行业和品牌色就可自动创建出一个像样的网站的方法。我接受了这个挑战。经过大量的摸索和研究，我决定用一个简单的属性列表来代表每一个网站，包括：模板（定义网站布局）、内容模块（内容类型包括图像、文本和视频的内容类型）、品牌色（最多2种）和主题（字体和样式）。我设置了多种可替换的属性以确保可建网站类型的多种多样。不幸的是，公司在我们完成产品开发之前就倒闭了。这是一个非常有趣且富有挑战性的项目，我学到了很多关于如何分解一个网站架构的知识。如果你在一件失败的事情中学到点什么，那说明还不算完全失败。

Ben Huggins（YouTube高级交互设计师，美国三藩市，国籍：美国）

我的一部分愿意去相信，精心打造的产品将永远是最成功的产品。这想法很好，但随着我在一路跌打碰撞中的学习，我意识到，这部分的我需要闭嘴了。

在我读研时，我和朋友Noah合作开发了一款应用，名为“捕捉亮点 ”，——一个帮助人们在他们的视频片段中找到并分享那些亮点时刻的应用。我们知道对于任何一个从GoPro相机，孩子的体育运动，家庭活动等场合中留下数小时未观看视频的人来说，这是一个巨大的难题。

因为我们做了一个可靠的应用来帮助解决这个问题，于是我确信用户们会发现这个应用的。

但他们没有。后来我们的钱都花光了，最终决定开放应用的源代码。我意识到，即使人们被某个问题所困扰，想出解决方案仅仅是个开始。引导人们使用解决方案仍需要做大量的工作，更别说让人们为之付费了。

有无数名言强调过，未曾实践过的想法毫无价值。但即使是实践过的想法也仍需能触及分发到用户。所以是的，我们学到了很多（像Noah写的那样），但不得不停止开发。那还有一线希吗？现在GoPro相机上有个叫做“HilightTag”的按钮。这让我们受宠若惊。

Nick Babich（Ring Central开发团队经理，俄罗斯，国籍：俄罗斯）

我要给你们讲个十多年前的故事，是我做过的第一个真正的项目。任务是建立一套控制船只进出的系统。我们的客户是一个港口运输公司，他们想在自己的网站上使用这个系统。

我为正在开发的系统感到兴奋，因为这个系统将使数百人的生活变得更好，所以我决定做一个拥有进技术和丰富的视觉体验的系统。我试着尽可能多地增加功能。例如，为管理员提供了一个强大的界面，允许从多个数据库直接导入和导出数据，同步事项，监控及修改重复的信息。

经过一个月的紧锣密鼓的设计、编码和调试工作之后，我向客户演示了该系统。这是一个功能齐全的系统，随时可以上线。。。至少我觉得是这样。但演示不太顺利，我受到了很多批评。

主要问题是：我所做的系统并不是我的客户想要的。他们需要的是一个带有WYSIWYG编辑器的简单表格，以便于即使是不太熟练计算机技术的管理员也可以学会添加新事项或更改表中的现有事项。这和我最初的设想（一个熟练的管理员将使用的系统）相去甚远。

但我学到了一些重要的东西：

1. 明确目标。
   你应该永远非常清楚地知道你要解决的是什么问题，以及你的客户对即将搭建的系统有哪些期望。
2. 你不是用户/客户。
   不要在没有任何研究或者需求说明的情况下去假设人们将如何使用你的产品。
3. 功能不等于价值。
   更多的功能不会自动转化为更多的价值。最好的产品是那些能满足用户需求的产品。
4. 迭代，迭代，再迭代。
   不要试图一次性做出一个完整的产品，要永远不断地在每次迭代之后在进行迭代和测试

Kymberlee Ide （副总裁，FCV交互体验设计师，加拿大人）

(*Kymberlee刚从McCann的体验设计副总监岗位辞职)。

回想我当乙方的时候，我在加拿大一家很大的银行带领团队负责一个数百万美元项目的数字化战略及部署。我是在项目进行到中途加入的，当时的项目进度有点曲折（项目缺乏原型，只用线框图）。

当我们终于要去做这个网站的主要（且非常复杂）的部分时，发现网站流程的设计真的非常差。

我记得当时我指出了这一点并建议团队不能再继续使用这样的方法和设计。老板对我说，如果我在领导团队和督导委员会中提出这个建议的话我将是自毁前程。但现实是，无论我怎样选择都是在赌上自己的一切。

最后发现结果还不错。我做了正确的事，在委员会中提出了建议，并申请项目排期延长5个月来修正这一部分的问题。讲这个故事的寓意是：做正确的事。

Alessandro Floridi （德勤公司UX经理，目前在澳大利亚悉尼，意大利人）

“没有失败，只有反馈”——Richard Bandler

我每天都收到“反馈”，但这仍是不愉快的体验。我最大的失败，即使发生在十多年前，仍如昨日般记忆犹新。我当时住在中国并经常和科技打交道。一位客户曾像我咨询关于数字广告系统的解觉方案，我想到了一个让我非常自豪的想法，利用一个我朋友正在开发的软件来监测观看者的性别，并针对性地播放广告。

你可能能猜到后面故事的发展了，而我曾认为我曾有过的最好的想法就是它了。这个产品很棒，很简单。大型显示器、照相机和实验软件，基本上就是在这里等着事故的发生。灾难发生在当产品被投放到一个法国的著名机场之后。在那之后不久，很快我收到一个精美的文件夹，里面是来自一个著名律师的关于隐私问题的300页来信。我没想过会是这样的结果！我应该提前测试产品，不应该盲目爱上我的想法。这就是我在这个项目中得到的教训。

Leslie Chicoine（体验设计及产品管理顾问，目前在美国丹佛，美国人）

我很早就了解到测试的价值，所以我还没有经历过那么多产品的失败。当然，不排除有些产品在测试或原型设计中表现得并不好，但我把这称为学习，而不是失败。我所看到的真正失败是发生在团队氛围中的。因此，在团队内部建立良好的沟通模式和共同创造出色的产品同样重要。

Buzz Usborne （Help Scout的 产品设计师，目前在澳大利亚悉尼，英国人）

很多事情都没有按照我的计划进行，而这正是重点，不是吗？失败使我成为一个更好的人和更好的设计师。不过我想到一个特别的失败案例，，那是我为自己的产品prevue.it所做的事情。在Prevue的内部有一个文件夹库，每个文件夹都包含你与客户共享的设计工作。有一天，一位朋友建议，如果我让用户把他们的资料库公之于众，Prevue就可以作为一个制作作品集的工具。主意听起来不错，所以我去做这件事情。

在几个月的时间里，成千上万的人因为这个特别的功能成为了注册用户。事实证明，投资工具的主意，作品集工具服务是门大生意！但这些新用户中没有一个愿意付费的，他们还要求额外增加一些我们的竞品所提供的功能。与此同时，现有的用户被“新”的产品方向搞糊涂了，感到困惑。可以说，我制造了一个烂摊子，花了好几年的时间才恢复，这过程中损失了大量的客户。

我在挫折与失败中，

1. 我明白了，一件事情很容易做或看起来很有趣，并不意味着它是值得做的。
2. 我明白了，新功能需要适应现有客户的需求，以及长期秉持的商业策略，而不仅仅是让产品看起来更好，或者更容易使用。
3. 我明白了，通过简单地与客户交谈，我能更好地了解哪些功能应该优先考虑，哪些功能不能真正解决任何现有的痛点。
4. 我明白了，有时候，成千上万的新用户并不总是一件好事。

Kylie Timpani （Humaan高级设计师，目前在澳大利亚珀斯，澳大利亚人）

实际上我没有机会足够深入地参与到一个产品中直至需要判断成功与否的阶段，更不用说我也没有参与过重要到需要一个成功/失败矩阵来衡量是否成功的产品了。我所设计的，大多是面向公众的网站，这其中的很多设计都经历过一些严重的失败。最常出现的失败，特别是在我早期职业生涯中出现的，是当我交付设计方案时，发现方案在很多方面都完全没有达到预期目标。也许风格不对，也许用户体验不好，也许页面布局没有与用户习惯相匹配，也许没有体现出品牌，也许用户就是不喜欢。

要克服这些失败是很难的，因为这意味着你在这个过程中漏掉了一些东西，或更糟的是，你忽视或省略了重要的信息。这种失败有点像炸弹可能随时引爆。但也意味着还有很大的成长空间。成长就在于我们从失败中学到的东西。我学到三种简单且快速的方法来帮助项目取得成功，也减少了出现失败设计的概率：

1. 关注和我所设计的主题相关的所有信息和我要解决的问题。
2. 如果有不确定的或需要更多详情时，尽可能多地问问题。我不担心这样显得无知或愚蠢。我告诉自己，我是用心投入的。
3. 尽量摒弃个人偏见，从而尽可能多地考虑项目的问题和背景。

我发现采用以上方法，会让工作更有效，更深思熟虑，同时失败的可能性更少。最重要的是，客户会看到，你在努力理解他们的项目和使命，因此能培养双方的信任和健康的合作，免于项目中的阻挠和意料之外的反馈。

Graeme Fulton— riter的程序员和设计师，目前在英国直布罗陀，英国人）

我有过很多失败的产品和想法，举两个例子：

1.Lostgrad社区

在我毕业那时，每个人都在为寻找工作而烦恼，所以我想，应该建立一个社区网站来帮助他们：

（http://graemefulton.com/projects/post/lostgrad-jobs-website）

几年前，我在这里写下了关于整个项目的失败历程，这是早期快速失败教会我的最好的一课。

2. Slappy Face

我真的想不通这个项目为什么没有成功：

你可以在这里体验。

从这次的经验中学习到（创造这个产品很有趣！），你不可能单靠优秀的设计来获得产品成功。尽管它可能是世界上最好的产品，但如果你不把它拿出来，围绕它建立社区，打造优秀的销售团队，你就不会收获太大的成功。

现在，我正在开发一款关于电子邮件模板的应用，名为Tamarin Templates。

Kaiting Huang （谷歌交互设计师，目前在美国西雅图，中国台湾人）

要回答这个问题，我们首先要定义成功的标准。谷歌有一套易于操作的评判标准，称为HEARTS。可以用来衡量产品的用户体验：

• 好感度：用户满意度。
• 参与度：使用频率。
• 接受度：新用户对产品或功能的接受程度或者意愿。
• 留存：在一定时间内再次使用产品或功能的用户。
• 任务成功率：完成某一任务的时间和达成率。

老实讲，在加入谷歌前，我不清楚我的大部分设计是成功的还是糟糕的，因为设计公司的项目效果并不能被长期跟踪。如果用“HEARTS”来衡量的话，我的大多数项目可能是“失败的”，因为根本没有资源或计划来继续跟进、迭代和优化。在没有测试的情况下，是不可能第一次就把一切都设计好的。但对我而言，只要能从项目中学到一些新的东西，就是取得了小小的胜利。无论是了解一个新的行业，例如设计运河调度的应用；学习如何与开发人员合作，例如学习编码和用开发语言进行交流；掌握一款设计工具，例如如何在Sketch中使用“符号”功能，还是结识有趣的同事，等等。

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

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

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

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

用户体验一直是我们在产品设计中反复强调的问题，那么我们应该怎样提升用户体验呢？

经过项目中不断的探索与研究，结合几个方法论，我们整合出了一套用户体验提升的方法流程——用户体验提升模型。下面就来详细的介绍一下，希望能给大家帮助和启发。

先问几个问题？

• 你知道你所负责的产品/设计方案的用户体验好还是不好？
• 产品/设计方案体验不好时应该怎么做？
• 这个产品/设计方案的体验具体有哪些问题？
• 怎么优化出现的体验问题？
• 哪些模块或页面的问题最迫切需要解决？先优化哪些？后优化哪些？

用户体验提升模型能很好的帮我们解决以上问题。

先介绍一下用户体验提升模型的流程：线上版本调研 – 协作启发式评估 – 问题分析整理 – 优化方案。

这篇文章也会以这个流程一一介绍。

一、线上版本调研

也可以是设计方案，我们采用了 SUS系统可用性量表进行调研，SUS 是评估产品可用性的一个花费少，但十分有效的工具。该量表包含了10条定向问题，每个问题均为5分，按强烈反对（1分）到非常同意（5分）评分。（各位小伙伴可自行网上查询系统可用性量表，有很详细的介绍，在这里不赘述了。）

最佳的方式是在线上直接上一个问卷调研来收集真实用户的反馈，然后对收集到的结果做如下算法：

• 对于奇数序号的问题，将其得分减1；
• 对于偶数序号的问题，将其得分被5减去；
• 将所有问题的减法后得分加在一起，然后乘以2.5；
• 计算出的结果即为我们产品可用性的得分。

1. 那么如何通过评分看出一个产品的好坏？

上图是一个评分参考，通过数据得出，系统可用性量表最终算出的评分达到70分左右，就可以比市面上一半产品可用性要好，也就是说这个产品的用户体验算是合格了。

但是系统可用性量表的评分结果是抽象的，这个分数只能让我们大概了解产品用户体验的好坏，在具体问题上却是缺失的，那我们知道产品评分较低时我们如何聚焦产品的优化方向呢？

二、协作启发式评估

1. 为什么是协作启发式评估而不是启发式评估？

因为启发式评估主要由几名交互专家以角色扮演的方式来完成设置的任务给出评估结果。优点是成本低、快捷，缺点也显而易见，一是交互专家团队中不一定有或者很少，二是可用性问题意见一致率很低，并不能很明确的指出为什么这是一个体验问题，有很多个人因素的主观见解。

因此我们决定用协作的形式来进行评估，而且不需要交互专家，可以是用户、测试、设计、产品、运营、商务等等，只要愿意参与测试，就可以。协作启发式评估以小组为单位，能够很好的整合出更多的问题，而且更准确。你说他们也不是交互专家，能起到好的结果吗？竟然都整理出方法了，那答案当然是能啊。

为什么能，因为整个评估过程中，我们是有的可用性原则来给予启发的，有了这套可用性原则，一秒变专家。

说到可用性原则，了解用户体验的都知道尼尔森的十大可用性原则，但是从1995年提出到现在，已经过去了二十多年，互联网世界已经发生了巨大的变化。在这样的情况下，尼尔森的十大可用性原则明显有些不那么符合或者说不能给出针对现今产品太全面的启发，所以，我们重新整理了一套可用性原则，这套可用性原则更针对现今互联网产品，基本可以覆盖到所有出现的用户体验问题。

我们称之为21条可用性原则。

有了这21条，可以让任何没有用户体验知识的人参与到协作启发式评估中来了，一秒变专家了。当然，这21条可用性原则我们也会迭代优化，目的是做到更符合现今产品、更全面的可用性原则。

2. 通过什么来确定的这21条可用性原则？

首先，我们都知道用户体验五要素，这已经是做产品设计的基本常识了。我们来看这五个层级对用户体验能产生影响的有哪些？战略层一定不会，如果一个产品立项了、已经上线了，一定是战略层成立了，如果战略层出现了问题那就要重新考虑产品要不要做或者是改变方向了。那么剩下的4个层级呢？范围层、结构层、框架层、表现层，其实都会出现用户体验的问题。那我们看看这几个层级所包含的内容，视觉呈现、界面设计、导航设计、信息设计、交互设计、信息架构、功能规格、内容需求，这样的话就有8个大类，然后我们通过多年的经验和对尼尔森可用性原则的理解，把可用性原则对应到这8个大类中，最后得到了这分类明确的21条可用性原则。

但是分了这8个类有什么用呢？读下去，你就会知道。

3. 具体方法

先说说调研的具体方法。我们以协作启发式评估的方法，组织好调研小组（8人以上，样本越多越好，反正最后还要去重），宣讲完流程方法和操作任务，就可以开始进行评估了。我们一般为了省时间，宣讲完就把表格发下去，让他们自己找时间完成表格，然后再收回来。

这个表格就是用户体验问题记录表。包括问题所在位置、对应的21条可用性原则、严重程度等级、问题描述。

三、问题分析整理

1. 收集了一堆问题之后应该怎么做呢？

通过小组会议讨论，把相同、相近的问题统一成一个，可优化的问题保留下来，不是体验问题的去掉，然后整理到一起，这就是整个产品存在的大大小小、各种各样的问题了。

接下来，我们引入另一个方法，就是用户体验八阵图。

这张用户体验八阵图的8个点是不是有些眼熟？没错，就是21条可用性原则里的8大分类，这就是上文为什么分为8个类的原因。中心向外为问题严重等级，依次为：小问题（1）、次要问题（2）、主要问题（3）、灾难性问题（4），一一应对到「用户体验问题记录表」中的「问题严重等级」。

2. 怎么使用呢？

首先，对记录表里的「问题位置」进行归类，以模块化区分，比如把登录注册流程做为一个模块，用一张八阵图来表示，最终把产品的每个模块都用一张八阵图来承载所对应的体验问题。

然后，把收集到的问题以「点」的形式点到对应模块的八阵图当中。

哪个模块问题最多？问题出现在哪个方向上？是视觉？还是交互？还是内容？哪些问题很严重需要迫切解决？一目了然。

四、优化方案

• 通过 SUS系统可用性量表知道了产品的整体体验处于什么水平。
• 通过协作启发式评估知道了产品的用户体验到底有哪些问题。
• 通过21条可用性原则知道了如何避免出现体验问题。
• 通过用户体验八阵图知道了哪些模块最迫切需要优化。

知道了这些，我们进行产品优化的时候还会不知道如何下手吗？接下来就要靠你自己了，你一定会做的更好。

当然，这套模型只能对线上产品的用户体验提升起到一定帮助，一个产品真的厉害还要从战略层一步步做起，我们需要去清楚的知道产品的目标是什么，我们能提供什么，我们想要去得到什么。对于产品的迭代，我们可以从使用人群（目标客户），主要功能（产品的服务方向），产品特色（与竞品的差异化），商业价值（盈利模式）上深入研究。

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

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

前几天我在体验一款产品注册输入验证码的时候发现，键盘能够自动获取到手机的短信，这真的是解救我这种每次输入验证码要记两遍的人。后来通过了解才知道是 iPhone手机更新 iOS12以后，系统键盘增加的提醒功能。

于是我又去研究了经常使用的京东金融，首先我测试了忘记密码页面，输入验证码时他采用的系统键盘样式，同样系统键盘获取到了短信验证码，直接点击验证码即可输入，简单快捷。

同时我又测试了支付界面的短信验证，京东金融为了安全考虑，并没有采用系统键盘而是自己开发的安全键盘，并没有获取短信验证码信息，但是作为用户的我并没有感到不好用，毕竟以安全为主。

我想这个例子就可以回答我上面问的几个问题。什么是用户体验？对于一个成熟的产品来说，你的用户爱用、经常用就可以说他用户体验做得比较好。

如何才能让用户爱用呢？首先需要保证基本功能满足；其次交互流程合理、最后在前两个都做好的情况下，我们还可以从交互的小细节来提升产品体验，从而让用户爱用。以下是我整理的8大交互小细节：

• 小操作也要及时反馈
• 让用户操作更方便
• 强调产品希望用户注意的地方
• 激励用户进行下一步操作
• 新功能，引导用户关注点
• 加入品牌基因
• 不经意时制造惊喜
• 点赞状态跟随

一、小操作也要及时反馈

反馈不单单是在大的功能页面才用，小操作也需要提供及时反馈，让用户知道正在发生什么，从而有掌控感。这个反馈可以是听觉、触觉、视觉。

以爱奇艺安卓版V9.9.5视频详情页为例，它就是加入了触感反馈，当你点击点赞或收藏时，手机会进行震动（目前iPhone版还未更新），当我发现这个小交互的时候就被吸引到了。当你点赞的时候，就像你刚恋爱时，你男朋友牵你手触电的感觉，加入触感之后让整个交互更加情感化了。同时当你点赞或收藏成功之后，也会及时反馈当前所处的状态，提示成功，从而增强用户的把控感。

二、让用户操作更方便

让用户操作更方便，这也是我们在做交互细节时需要考虑的，这样可以尽可能的缩短用户操作时间，同时也可以减轻用户的认知负担，促进用户下单。

以天猫购物车为例，购物车单个列表可以左滑进行发现、移入收藏夹、删除等功能，而我们长按列表，同样可以展示这三个操作。

我们知道侧滑操作是 iOS 才有的，而安卓版大多数编辑操作都是采用长按，天猫 iPhone版2种方式都有加入，可以照顾到更多人的习惯。

三、强调产品希望用户注意点

产品不单单只是为了用户体验，其最终目的也是为了盈利，因此通过一些小交互也可强调产品希望用户注意的地方。

左图：以大众点评为例，大众点评详情页不断上滑时，顶部会将个人信息和关注按钮进行置顶操作，这样就可方便用户在浏览过程中随时进行关注操作。

右图：以掌上生活为例，在精选栏目界面向下滑动过程中，底部会出现一个产品的气泡提示，点击气泡会下滑至相关位置的产品。

四、激励用户进行下一步操作

激励用户进行下一步操作，在一定诱因趋势下，让用户自愿做产品期望他们做的事情，从而激励用户进行下一步操作。

以天猫双11活动为例，从天猫首页界面加入抢666红包为诱导，作为用户看到这样的内容还是很想点进去看看的，当然进入之后也不负众望确实让我抢了红包，领取到了80块的福利，同时下方还有各种任务列表，一步步引导用户去操作，从而达到产品想让用户操作的目的。

五、新功能，引导用户关注

引导用户关注，通过外力引导可以引导用户做产品想让他们做的事情，虽然我们说好的产品会自己说话，但是对于某些新操作，是有必要提醒用户的。

以爱奇艺为例，在首页你看到有一个长按试试的手型引导，这个是新加的操作，在初期长按操作优先在安卓版才有，但是很多人都不知道这个功能，我也是无意中发现的。在 iPhone版上线后，他们在第一张视频图上加入引导，可以更明确的让用户知道有该功能，长按封面后可对视频进行预览、收藏、直接看正片等操作。

六、加入品牌基因

在产品中合理的加入品牌基因，可以让用户一眼看出这是你的产品，从而提升产品的识别度。下面我找了两款交互小细节中运用品牌基因的案例。如下图：

以转转为例，它在底部标签栏舵峰发布按钮处，刚进页面加载时，会有一个装有发条的小熊在那转啊转，在如今趋同的产品中，很容易就能够知道是转转的吉祥物。

以美团外卖为例，下拉刷新时，显示一个袋鼠快递员送餐的小动画，看到它我们很容易就能够知道是美团外卖。

七、不经意时，制造惊喜

不经意时，在一些小细节处制造惊喜，从功能上来说并没有什么帮助，但是这个惊喜提供了超出了用户预期的体验，就会让用户对产品产生好感。

以腾讯视频为例，在 doki明星详情中，为明星打榜后可以继续冲榜，点击冲榜就有很多小爱心从天而降，为用户营造浪漫温馨的氛围，提高用户的幸福感。

八、点赞状态跟随

当某个功能比较重要时，可能会在多个地方出现，这时候就需要做好状态的数据跟随了，如下图:

以腾讯视频为例，腾讯doki详情页面在文章底部有一个大的点赞按钮，提示用户看完内容后进行点赞操作，但是如果用户并没有滑动到底部想点赞怎么办，所以腾讯在详情页的底部固定有评论和点赞，在交互上就需要做到，点击其中一个，另外一个效果要进行跟随。

总结

作为设计师，我们在设计时除了考虑实现基本功能外，同时还可以考虑如何设计才能够抓住用户，让用户为你的产品买单。以上八个交互小细节其实仔细看，你会发现总结起来就是反馈、提醒、引导、激励这些交互方式，在做交互设计时需要我们落实到细节，加强产品与用户之间的互动，从而提升产品体验的交互细节。

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

提高落地页转化的技巧，运营与美工各自要做些什么