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

所以跟大家分享下，我的一些相关思考。

 1. “+”的运用场景 

我们常见的产品中，采用“+”功能的场景，大致分为两种：a.（上传）内容选项；b.（聚合）快捷功能。

a.（上传）内容选项

根据“+”的直观表意，大致也能猜到它的运用跟“添加”、“上传”某个东西相关。

比如：微博，点击“+”入口后，是选择所要上传的内容类型。（可以晒自己精修X小时后妈都认不出来的自拍、也可以晒逗比的小视频、或者老子就想搞一场直播）。

比如：下厨房左上角的“+”，点击后，是选择上传作品，或者创建菜谱的选项。

再比如：工具类产品：Google drive，dropbox、百度网盘、微云，点击“+”后，同样是选择上传不同文件的入口。 

可以看出，这种情况下的“+”功能，多指“添加”、“上传”的含义，所承载的内容，是同一纬度下的不同选项。

b.（聚合）快捷功能。

众所周知，产品为了节省界面空间，同时避免过多功能给用户不必要的干扰，会选择把一些不常用的快捷功能收到二级展示。常见的产品中，他们选择把这些快捷功能塞进“+”里。

那么，你是不是觉得“+”功能跟“…”功能承载的内容是一样的？比如：乐趣首页右上角“...”，同样是对频率较低的功能的集合。

那为什么有的产品不直接用“...”，还是选择用“+”呢？

通过分析发现，“+”虽然也是聚合快捷功能的入口，但承载的功能有一个共性：都是围绕着用户主动打开、发起、新建...等操作进行的，因此用“+”更贴切。

比如：微信里的“+”，包含着：“发起群聊”，“添加朋友”，“扫一扫”，“收付款”，其实都跟“添加”有关。 

比如：淘宝也是类似的处理方式。

再比如：爱奇艺的“+”，里面包含的也是跟“添加”，“上传”相关，像上传视频、扫一扫、我要直播….

反过来看“...”，它聚合的功能，大多是相互关联较弱，且没有主动添加、上传等含义的。因此，用一个相对模糊，没有指向性的符号诠释，更为合适。

由上可以看出，在这种情况下，“+”作为聚合快捷功能的入口，包含的是频率较低，且跟主动“新建”、“发起”、“扫描”等相关的功能。

 2. “+”的展开方式 

当用户触发界面中的“+”时，常见的展开方式有3种，分别是：a.气泡弹出框；b.动态栏；c.沉浸模式。

a.气泡弹出框

气泡弹出框，这个控件又常被称为Popover，一般是由一个矩形和三角箭头组成的弹出窗口，通过点击Popover内的按钮或者非Popover的屏幕其他区域可关闭。 

比如,以微信为代表的“+”的展开方式，采用的就是Popover。一般用于聚合快捷功能。优点是触发“+”到Popover的距离很近，操作顺手，效率高（更像是导航的延伸）。

b.动作栏

动作栏，这个控件官方称之为Action Sheet，是用户触发“+”后，出现的一种模态弹出框，里面包含一组与当前情景相关的选项，一般用于上传内容选项。 

在iPhone屏幕上，为了便于单手持握时操作，Action Sheet通常占据屏幕底部区域。

比如：以Google drive、Dropbox为代表的产品，需要选择上传文件类型的选项。

在这个部分，同事们讨论有些争议点，在于：google drive 和 Dropbox或者微博，它们的加号本来就在底部，所以弹窗让用户感觉视线统一。

而有的产品“+”在上面，弹窗从底部出来，担心注意力切换和手指移动的路径比较长，显得割裂。

带着这个问题，我调研了下有类似情况的产品，会不会让人觉得不舒服。

后来发现，不会的。原因在于我们常用的、拥有10亿+用户的微信，发朋友圈时操作就是这样，而我们并没有感觉很割裂，反而已经习惯。

同样，iPhone自带的“提醒事项”App，也是这样处理。

后来看了规范发现，iOS确实意识到在iPad上，如果继续将Action Sheet显示在屏幕底部，如果频繁操作使用会比较累。因此，做了特殊处理。而手机屏幕上以底部为主，同时点击空白区域取消的操作，也是系统用户所熟知的。

总的来说，操作栏适合承载同一纬度下的内容选项，同时，就算“+”在顶部，采用底部动态栏，体验上也是没问题的。

c.沉浸模式

沉浸模式，指的是当触发“+”时，用户在全局蒙层上进行功能操作，同样适用于上传内容选项。

优点是拓展性更强，体现在：1.提升收益；2.品牌认知；3.内容运营。

1.提升收益

比如：微博，采用沉浸模式，下面是上传不同状态类型的入口，上面可以增加广告收入。

再比如：微云，在沉浸模式下，可以植入自己的“会员”广告，从而提升会员转化。

2.品牌认知

比如：有道云笔记，在顶部的空间内，宣传自己的品牌slogn：“记录，成为更好的自己”，是一种品牌情感化的传递。  

3.内容运营

像“好好住”，它们在这个页面加入“话题”运营推广。从而给UGC内容模块带节奏。

大多数产品都想营造社区氛围，建立用户关系，从而增加用户粘性，提升产品留存。

但要想拥有浓厚的社区氛围，首先要有内容、才有人愿意看、才有人在里面互动。

现实问题是，有很多用户有想发状态的心，但不知道发啥，从而放弃。因此，我们应该作出相应的引导。

比如，“好好住”在发布环节，增加话题运营“#每天一张生活日常#”入口，就是解决刚才说的“用户不知道发什么”的问题。运营同学想点子、造话题、带节奏，从而提升用户的发布量。

因此可以看出，“沉浸模式”，对于那些有拓展需求（收益、品牌、运营）的产品更适用。

不知道你有没有发现，相比国外，国内采用这种“沉浸模式”的产品偏多。或许在中国这个互联网竞争如此激烈的大环境下，大家不愿意放弃任何一个能够运营或留住用户的机会。 

总结 

总的来说，在常见的产品中“+”功能的运用场景有：（上传）内容选项、（聚合）快捷功能；它的展开方式可分为：气泡弹出框（适合承载快捷功能）、操作栏（适合容纳内容选项）、沉浸模式（容纳内容选项的同时，拓展性更强）。其实，交互形式没有好坏之分，只有哪个更适合自己的内容需求和产品目标，正如Louis Sullivan所说：“形式追随功能”。

小tips：日常工作中有太多类似“+”这种，看似一个不起眼的小功能，被大家忽略。我们习惯性看一下竞品，拍脑袋决定方案。

但是，慢慢你会发现，只有深挖和分析这些所谓的“小细节”，才能知道别人这么做背后的原因、才能举一反三的去运用、才能更好的兼顾统一性和拓展性，而不是停留在浮于表面的模仿。

希望这篇文章对你有所帮助。 

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

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

这次的采访我们聊得很细，细到某一个交互的设计思路的变迁，以及为什么最终是以那种方式呈现在 MIUI 10 之上。我相信，无论你是对设计还是对手机系统存在好奇，一定都可以从这次访谈里得到一些有益的启发。因为我们没聊虚的。

△ MIUI设计团队

一、彻底干掉虚拟键的全面屏手势是不是太激进了？

△ 虚拟键不该存在

是不是太激进我们还是根据用户反馈来判断，这套手势因为没有任何虚拟键的提示，刚开始确实需要一两分钟来学习，但大部分的用户反馈是：用了就回不去了。目前从客观上来讲，安卓手机里的全面屏手势，MIUI 确实是最好用的，不是我们自己说，而是从各种用户反馈，包括微博上很多专业数码博主的反馈得来的结论，很多人在主动地说这件事。

但是在手势的设计上，我们是踩过很多坑的。

我们尝试过很多版本的全面屏手势，最初还没有大胆到想干掉所有虚拟键，而是想在虚拟键上做文章。开始我们觉得那个区域很多时候3个 button 可能用不上，比如看书的时候，你可能只需要一个返回键，所以我们考虑的是在某些特定的应用场景里把一些用不到的虚拟键收起来，这是做减法，减法做完之后，原来虚拟键的位置就空出来了，我们觉得这个空间是浪费的，又在想应该怎么利用起来，这是早期一个很复杂的思路。

△ 早期带横杆的产品

后来我们又想是不是可以把3个键整合成一个虚拟键，当初做了一个 Demo，把3个键集合成一个横杆，那个时候还没有看到 iPhone 的模型，在 iOS 的全面屏手势出来之前，我们就做了一个横杆子，其实是受 Palm 的启发，这根杆子很早之前 Palm 就有了，苹果可能也是受 Palm 启发。我们设计的是在那个杆子上横滑返回，然后上滑回桌面，很接近苹果目前的处理方式。但最终还是把这个设计给放弃了，去掉的原因是：提示杆一开始是有比较好的引导操作作用，但一段时间后，用户就不需要了，另外就是视觉感官上横杆并不好看，工业设计上好不容易才能把手机下巴缩短几毫米，你一根横杆又全给它加回来了，这其实背离了「全面屏」的初衷，在设计上是一种不得已而为之的妥协。

否定横杆之后，我们才真正全心考虑干掉所有虚拟键的方案。但没有虚拟键，就对我们的交互设计提出了很高的要求，首先，这个手势的出发点一定得非常符合直觉，所以不管是返回上一级菜单也好，回到桌面也好，这必须是两个最基础的操作（横滑、上滑），在这两个基础操作上略做停顿，我们就可以进入应用间的快切和多任务管理，我们用一种非常轻的设计把它附着在两个基础交互上。彻底干掉虚拟键这件事最早我们没有太大的勇气去做，最后做出来反倒更贴近用户操作手机的直觉，有一种柳暗花明的感觉。

△ 简洁易用的MIUI全面屏手势

二、MIUI 10的整体视觉设计遵循了什么思路？

△ 为全面屏而重新设计

在天气、日历、安全中心等等 MIUI 10 的各个角落里，其实都把原来分段式的画面结构做了一个全面屏化的设计，让页面不要有很强的割裂感。让内容直接浮在屏幕上，用户第一时间得到信息，去掉干扰元素。

在非全面屏时代，手机有上下两个比较大的黑色边框，在视觉上天然是分段式的，之前屏幕内的多色块设计其实是对应了手机外观的这种「分段」，它还是和谐的，但原样搬到全面屏手机上，就显得是把一整块完整的屏幕生生分割成了几段。

另外就是原来有一些插画类型的风格和表达手法，想让整个画面有一些亲和力。但是因为我们的用户覆盖面很大，两三亿用户，会有一些年龄层的用户觉得原先插画形式有些稚嫩感。所以我们觉得到10这一代，整个系统应该更成熟、更普适一些，我们更倾向于做一个对任何人来说都很舒服的视觉设计。

三、这次整体视觉风格有比较大的变动，有没有什么地方特别花费精力的？

举个特别细节的例子。MIUI 10 的时钟，有一部分用户会有疑问：在 MIUI 10 里，可见的大多数页面是亮色，为什么进入时钟时却是黑色的？我们其实也在白色和黑色反复了很多次，调研也做了很多次。最终我们认为更重要的是时钟的使用场景问题，比如说你晚上在睡觉前拿起手机定个闹钟，在夜晚或者室内，从手机桌面进来打开时钟，如果进入一个很亮的页面，它即便是好看的，也可能会刺眼。所以我们还是选择了黑色，当然那个对比度到现在还在调整，我们想把视觉上的美观和使用的舒服统一进来。

四、MIUI 10的自然音效系统是发布会上的一个惊喜，你们为什么会想到去做音效？

我明白你这个问题的意思，大部分人的手机是长期静音的，音效这个东西，好像已经被完全忽略了。但是我们觉得，哪怕只有1%的用户打开了手机铃声，他也应该感受到悦耳而不是打扰和腻烦。如果我没记错的话，我们是手机厂商里第一个针对音效做系统性设计和优化的，我们从「百听不厌」的自然系音效出发，和得过格莱美奖的顶尖音乐人合作，还针对手机音腔的特性对音效做了特别的优化。

发布会上洪锋把自然音效系统作为一个彩蛋来讲，这是我们送给小米手机用户的一个礼物，是让我们骄傲的产品。我不确定有多少用户会发现这个产品，有些人可能因为长期静音他没有机会接触到这个新设计，但它是一个能带给人惊喜和温暖的东西。

五、MIUI的设计理念是什么？

有些人可能会觉得设计是一个偏感性的、依赖审美的东西，但是对于一个好的系统设计，我会从视觉、动效、交互、字体、音效，五个维度的去衡量它的完善程度。

我们用一个人来做类比。视觉，就是感官层面的，比如说你见到一个人会说：这个人很帅；第二就是交互层面的整体逻辑，就好比你跟他说话，发现他的脑子清楚；第三就是整个动效的层面，这个人的肢体语言很优雅；还有字体，我们是从 MIUI8 的时候就开始做了，为了让大家有更好的阅读体验，让人觉得你这个人很有涵养，这已经深入到非常细节的层面了；最后，我们加了一个声音的系统，就是你说话的时候，声音还要好听。MIUI 在设计上一直是往多个方面进化，我们并不满足于做出某个漂亮的页面或者交互，而是追求整个体验层面的饱满。

做设计过程中，我们可能会尝试各种各样的方案，也有灵光乍现的时刻，但我们会从多个维度完整地去考量这个设计成果，避免做出一些只是「看上去很美」的自嗨的东西。实际看起来、用起来、听起来怎么样，我们想从这几个大的感官维度上都能达到体验层面的满足。

举一个例子：比如说之前我们为了快去掉了一些解锁的动画，用户一按指纹解锁，直接进到桌面，这种确实是非常的快，但这种感觉就像什么呢？就像你一按电梯，门就消失了，你进了电梯，它咔一声又关上了，是很快，但是这种观感是不太好的。它没有一种欢迎的意识，就只是把东西呈现给你。这一次我们希望把这个东西改回来，当你进入手机桌面的时候，图标应该有个简短的优雅的动态，有一个进场亮相的过程。

△ MIUI动态图标

MIUI 其实已经非常流畅了，在这种地方去掉应有的动画，是可以快100毫秒，但这种快是没有意义的。让用户舒服的看到这个东西，这才是整个体验的核心。所以我们这次就定下一个目标，和工程团队一起，把这种为快而快的东西给它削弱，用户要的是更优雅的体验，而不是那种无感知的快100毫秒。

这个事情说起来不大，但其实是一种理念层面的进步，大家已经从那种无意义的纯数据比拼里解脱出来，更注意到整个体验层面。我们这次会把上面说的进场动画加进来，能让用户点亮屏幕的时候感觉到更加的舒服，能够感觉整个系统的「肢体语言」更加优雅。

六、对于MIUI 11的展望？

之前的非全面屏时代，手机屏幕在16:9的形态下，UX设计上其实已经极度成熟。手机的很多功能和设计的出新，很大程度上都是在迎合一些小众的需求，可能一部分人觉得很喜欢这个设计，但它并不普适。

全面屏手机的出现又将设计师的注意力从这些小众需求拉回到了一个大众需求：怎么在全面屏手机上做出更好的体验。因为智能手机用户迟早会将手中的设备换成全面屏设备，手机厂商如果只是简单地把原来16:9的画面改成18:9，而不根据硬件特点做真正的深度定制，那就会离用户体验越来越远。

手机系统的未来我们认为也会是这样的趋势，软硬件的结合会更加的紧密。在这一点上，MIUI 有这个意识，也有行动，目前是走在比较前面的。

MIUI10 落版后，我们也在考虑往这个方向去深化。我们不会特意去考虑11跟10之间非得做出什么大的区别来，相比这个，我们更关心的问题是：什么是用户真正需要的设计。

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

关于什么是好设计的问题的答案，定义了设计师。

“有什么好处，Phaedrus，还有什么不好 - 需要我们让任何人告诉我们这些事情吗？” Robert M. Pirsig，Zen和摩托车维修艺术：对价值观的探讨

上周，我的一位英雄（@johnmaeda）发推文说“设计一直是关于肤浅和实质的。”我认为这是一个很好的引用。出于某种原因，我们需要时刻提醒我们，设计不仅仅是花哨的造型。但为什么？为什么物质需要防御？如果你看看像Dribbble这样的网站，设计的表面看起来真的很吸引人。肤浅的品质不需要解释。但这不是设计。在他的“ 设计形状”一书中，交互设计师Frank Chimero正确地说“如果我们留在表面并且不深入研究为什么我们不是真正的设计”。如果问为什么是设计的本质，设计真的是哲学的一个分支。

清晰思考

目前我们有一位来自马斯特里赫特大学的教授，他们在我们的设计工作室中。他正在研究野外设计师，就像人类学家在非洲研究一个不知名的部落一样。他研究的主题之一是设计过程。我总是觉得这是一个有趣的话题，这就是我对Chimero的书的原因：它从设计师的角度讲述了设计过程。他的内部人士认为这是一场认可的盛宴。关于他对设计过程的描述最让我困惑的是清晰思考的想法。奇美罗对他的工作方式有一个有趣的描述：他只是“出现”并让“语境说出它需要的东西”。他说“设计师的工作就是找出一种方法让问题表明它是真实的自我，这样他才能回应已经出现的真相。

设计师通过询问原因来工作。问为什么“更高水平的研究，一个调查所使用的动机和思维过程，以便它们可以应用于我们自己的情况。”为什么看起来更深。它将目前的解决方案与用户的需求相结合，以设想更好的解决方案。

哲学

当我们开始问为什么并开始思考真理时，我们就进入了哲学领域。我一直将设计（和其他艺术）视为哲学的视觉形式。比传统哲学更精细的一个，因为它不仅通过文字而且通过图像进行思考。有些人可能会称这种特殊形式的哲学设计思维。当我们将设计定义为哲学的一个分支时，下一步就是质疑这个世界上一些伟大的思想家，看看他们对设计的看法。对我来说，Martin Heidegger有两个哲学文本定义了良好的设计。

关于您的客户和互联网的真相

第一部是Der Ursprung des Kunstwerkes（艺术作品的起源），其中海德格尔思考什么使艺术品成为艺术品。简而言之，他认为，为了使艺术作品成为一件好作品，它必须揭示我们存在的真相。他用梵高的一双农夫鞋作为例子。这幅画是一件艺术品，因为它向我们展示了鞋子，农业，生活的真相，也展示了梵高绘画时的绘画媒介和艺术现状。它很漂亮，根据海德格尔的说法，美丽是表达真相的最好方式。

如果我们将网页设计视为一门艺术，我们可以将海德格尔的艺术思想转化为网站，并得出一个有用的网站定义。首先（和Chimero在他的书中所说的相似），一个好的网站揭示了用户与您为其建立网站的组织的互动的真相。当然，美丽很重要，因为它是真相展示自己的最佳方式。Beauty以直接方式连接到用户。它比单词更快更有效。但海德格尔增加了另一个重要方面。一件好的艺术品，即一个网站也定义了媒体，即互联网。因此，良好网站的问题与互联网的问题紧密相关。一个好的网站向我们展示了互联网是什么或可以是什么。

与媒体的深层联系

因此，与您正在设计的介质建立深层连接至关重要。这是海德格尔第二篇文章的主题，它定义了良好的设计。在他的文本Bauen，wohnen，denken（建筑，生活，思考）他说，在你建造之前，你首先必须学会生活。在这篇关于建筑的文章中，他将设计与对人类基本条件的理解联系起来。他敦促设计师与他们的主题联系，实现他们的主题，而不是以抽象的方式看待它。对于建筑师来说，很容易爱上图纸，抽象概念和模型。但是如果没有与你设计的生活有真正的联系，它就会变得毫无用处。就像建筑一样，互联网也是人类的基本需求。我们将互联网视为能够让您做新事物的东西。但是人们只想做他们一直做的事情。 人们的经验和广泛的兴趣促进了设计师的理解和想象力。

通过哲学分析生活 - 问为什么 - 是良好设计的基础。哲学是生活与设计之间缺失的纽带。

一个好网站的定义

就像艺术一样，设计一直需要定义。我认为好的设计问题的答案定义了设计师。所以：
- 设计就是问为什么（所以它基本上是哲学）
- 网页设计的目的是找到关于客户，用户和互联网
的真相 - 真相最好通过美容传达
- 找到关于你的媒介的真相必须与之建立深厚的联系

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

1. 用气泡元素营造视觉焦点

在简约清爽的背景之下，使用色彩鲜艳，形体自然随性的气泡元素来创造视觉焦点，气泡和需要凸显的图片素材结合到一起，有目的地将用户的视线吸引到关键的元素上，最终起到提升转化率的目的。

2. 用简约线性的气泡动画来驱动交互

使用几何特征的简约气泡元素来构造动画，是一种成本比较低的做法，动画会随着用户滚动页面，而有趋向地发生转变，从而促使用户不断地滚动，向下浏览查看更多内容，这种设计同样能够提升网页的参与度。

3. 用不规则的涂鸦斑点强化品牌

斑斓的背景和强对比的涂鸦斑点，同样是一种引导视觉的策略，但是它更重要地是通过这种风格来营造狂野粗粝的品牌气质，帮助用户更快更直接地 Get 到品牌的独特氛围和神髓。

4. 用液态色块拼贴来传达时尚感

充满流动感的色块和斑点元素类似，同样充满了不受控制的自然气场，充满对比度的多彩配色则赋予了这些液态感十足的色彩拼贴以时尚的气质，从而营造出独树一帜的视觉体验。

5. 用渐变色气泡来营造立体感

微妙的渐变色常常能够赋予元素以一定的3D立体感，多变的气泡元素如果拥有渐变色会仿佛拥有景深和层次一般，让页面更加立体。当然，如果一开始使用动画软件来建模，渲染生成动画，那么就更加到位了。

6. 使用扁平化气泡元素渲染现代感

扁平化设计依然是目前的主流，在许多纯粹扁平化的页面中，气泡类的元素能够起到很好的点缀作用，让背景不再单调，几何感十足的气泡边缘和清爽的色彩，能够很好的赋予页面足够的现代感，干净而具有当下的时代感。

7. 作为图片载体给人独特的印象

气泡类元素本身的形体都是非常规的几何元素，因此它们相比于常见的圆形、矩形、三角形，出现的机率更低，当它作为图片的载体的时候，这种独特的视觉体验更容易给用户留下印象，四两拨千斤。

8. 用气泡动画来创造趣味性

气泡动画可以拥有冷淡的科技感，也可以软萌可爱充满趣味感，这取决于动画的设计者怎么做。在页面中使用有趣的气泡动画能够让页面更加令人亲近，让用户在加载和转场的时候会心一笑，记住你的设计。

9. 用气泡动画来构建品牌LOGO

这同样是一种巧妙地吸引用户同时宣传品牌的手法，当然，前提是你的品牌 LOGO 适合使用这样的表现方式。气泡动画富有活力，有生命力，这一点最终能够加持在品牌上，同时能够给用户留下更加深刻的记忆。

结语

有机感是近两年来比较热的一个设计方向，但是它的呈现方式并没有那么具体，而诸如斑点和气泡这样的元素是呈现有机感最常用的方式，加上新的设计工具的普及，设计师开始使用这些元素来创造富有有机感的设计。

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

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

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

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

有了这篇文章，你就不用在其他地方学习基本的动效设计规则了。

动效的持续时长和速度

当元素的位置和状态发生改变的时候，动效的速度应该足够慢，维持足够长的时间，让用户能够注意到变化，但是同时，又不能慢到需要用户去等待。

大量的研究表明，动效的最佳持续时长是200毫秒到500毫秒之间。这个研究数字是基于人脑的认知方式和信息消化速度得出来的。任何低于100毫秒的动效对于人的眼睛而言，几乎都是瞬间，很难被识别出来。而超过1秒的动效会让人有迟滞感。

△ 界面中动效持续时长

在手机这样的移动端设备上，按照 Material Design 的建议，动效时长应该控制在200~300毫秒之间，在平板电脑上，这个时长应该延长大概30%，也就是说，时长应该在400~450毫秒之间。原因很简单，屏幕尺寸越大，元素在发生位移的时候，跨越的距离越长，速度一定的情况下，时长自然越长。相应的，在可穿戴设备的小屏幕上，这个时长应该缩短30%，在150~200毫秒之间。

△ 移动端设备的屏幕尺寸影响动画的持续时长

网页动效的处理方式也不一样。由于我们习惯在浏览器中直接打开网页，考虑到浏览器性能和大家的使用习惯，用户对于浏览器中动效变化速率的预期还是比较快的。相比于移动端中的动效速度，网页中的速度会快上一倍，换句话说，就是动效的持续时长应该在150~200毫秒之间。如果持续时间太长，用户会忍不住觉得网页卡住了。

不过，如果你的网页中所用的动效并非功能性的，而是装饰用的，或者用来吸引用户的注意力，那么请忘记这个规则，在这种情况下，动效可以更长。

更大的屏幕=更慢的动效？绝不是如此！

请务必记住，无论是在什么平台上，动效的持续时长绝不是单纯取决于屏幕尺寸和运动距离，还取决于平台特征、元素大小、功能设定等等。较小的元素或者较小的变化，相应的动效应该更快一点。因此，大而复杂的元素动效持续时间更长，看起来也更舒服一点。

大小相同的元素，在移动的时候，移动距离最短的元素，是停止下来的。

与较大的元素相比，较小的元素运动速度应该更慢，因为相同的移动距离，对于小元素而言，位移距离和自身大小比例倍数更大，相对偏移更远。

△ 动效的持续时长还和元素大小、运动距离有关

动效的运动规律要符合物理规律，当元素运动到边界，发生碰撞的时候，碰撞的「能量」最终是要均匀分摊下来的，而弹跳的在多数情况下是不适合的，仅在特殊情况下适合使用。

△ 避免使用弹跳，它会分散用户的注意力

元素的运动过程应该是清晰的，尽量不要在运动中使用模糊的效果（是的，说的就是 AE 的模糊动效爱好者们），模糊的动效不适合在 UI界面中使用。

△ 不要在动效中使用模糊效果

列表项（新闻列表、邮件列表等）所使用的动效，在实际运动的过程中，项和项之间应该有轻微的延迟，元素之间的延迟应该控制在20~25毫秒之间，如果持续时间再长，可能会给人一种迟滞的观感。

△ 列表项之间的延迟应该在20~25毫秒

缓动

缓动指的是物体在物理规则下，渐进加速或减速的现象。在动效中加入缓动的效果能够让运动显得更加自然，这是运动的基本原则之一。对于缓动，迪士尼的两位关键性的动画大师 Ollie Johnston 和 Frank Thomas 在他们的著作《The Illusion of Life: Disney Animation》中有过非常详尽的描述。

为了不让动效看起来机械或者人工痕迹太明显，元素的运动应该有渐进加速和渐进减速的特征，就像物理世界当中其他的物体这样。

匀速直线运动

不受任何物理力量的影响，匀速直线运动看起来是非常不自然的，尤其是对于人眼而言。

所有用来设计动画的应用都会使用坐标轴和曲线来阐述动效的运动特征，我将尝试阐述它们的含义，以及如何使用。坐标轴的 X轴是实现，而 Y轴则表示的唯一，换句话来说，如同我们在初中物理中所学到的，坐标轴上的线条描述的是速度和加速度的特征。下面所示的直线，表示速度是均匀的，也就是匀速直线运动，物体在相同时间内运动的距离是不变的。

△ 匀速直线运动的座标图

均匀的变化通常只会用在色彩的改变或者透明的改变上，一般来说，我们也可以让背景元素均匀运动，而前景元素保持不变，来呈现它的状态，就像上图一样。

缓动加速曲线

通过曲线我们可以看到，物体开始时候的初速度比较低，运动缓慢，随后速度逐渐增加，这意味着物体在加速运动。

△ 加速曲线

当物体加速飞出屏幕的时候，可以使用这种加速曲线，比如界面中被用户使用滑动手势甩出去的卡片。但是请记住，只有当运动对象需要完全离开界面的时候才会这么使用，如果它还需要再回来的话，则不行。

△ 以加速运动将卡片扔出屏幕

动画曲线有助于正确传达讯息，甚至表达情绪和感觉。在下面的案例当中，我们可以看每个元素的运动位移是完全一样的，所消耗的总时长也是一样的，但是运动的速率变化是不同的，这一点也体现在曲线上，所表现出来的情绪也不同。当然，通过调整曲线，你能够让物体的运动轨迹尽可能接近现实世界。

缓动减速曲线

当元素从屏幕外运动到屏幕内的时候，动效应该遵循这类曲线的运动特征。从全速进入屏幕开始，速度降低，直到完全停止。

△ 减速曲线

减速曲线可以适用于多种不同的 UI控件和元素，包括从屏幕外进入屏幕内的的卡片、条目等。

△ 减速曲线案例

缓动标准曲线

在这种曲线之下，物体从静止开始加速，到达速度最高点之后开始减速直到静止。这种类型的元素在 UI界面中最为常见，每当你不知道要在动效中使用哪种运动方式的时候，可以试试标准曲线。

△ 标准曲线

根据 Material Design 的规范，最好使用不那么对称的增速和减速的过程，让动效看起来更加真实。同时大家会更加在意运动的结果，曲线的末端，也就是运动结束的过程最好进行适当的强调，换句话说就是减速过程持续的时长最好超过开始加速的时长，用户将会更加清楚地观察到运动的最终结果，从而更好地明白运动的终止状态。

△ 对称和非对称运动的差异

当元素从屏幕的一个位置移动到另外一个位置的时候，最好使用这种标准的缓动曲线，这个过程中，尽量不要让动画效果引人注意，不要使用戏剧化的效果。

△ 卡片元素从屏幕上运动的时候，不对称的缓动曲线

当元素从屏幕上消失的时候，采用了相同的不对称缓动曲线，用户同样可以通过滑动回到之前的位置。这个环节使用了抽屉式导航控件。

△ 抽屉式导航随着缓动曲线从屏幕上隐藏

从这些案例当中，可以看出许多动效的初学者对于运动规则的了解还不足。比如下面的这个动效，元素随着减速曲线出现，然后使用标准缓动曲线消失。根据 Material Design 的标准，新出现的元素持续的时间应该更长，因为需要吸引更多的注意力。

△ 导航菜单的出现和消失

贝赛尔曲线函数 cubic-bezier（）是用来描述曲线的，它的名字前面之所以带有 Cubic 是因为每个贝赛尔曲线的描述都是基于四个不同的参数来确定的。曲线的起点（0，0）和终点（1，1）在坐标轴上的位置是已经事先确定的。

为了简化你对于贝赛尔曲线的理解，我们推荐两个网站，分别是 easings.net 和 cubic-bezier.com ，前者包含了最常见的曲线的列表，你可以将他们复制到你的原型工具中，第二个网站为你提供了不同曲线的参数，你可以直接在其中查看各种对象的移动方式。

△ 不同类型的 cubic-bezier（）的曲线和参数

界面动效的编排

就像芭蕾舞的舞蹈编排一样，动画效果也是需要编排的，它的主要目的是让元素从一个状态切换到下一个状态，自然过渡，让用户的注意力自然地被引导过去。

编排有两种不同的方式，一种是均等交互，另一种是从属交互。

均等交互

均等交互意味着所有的元素和对象都遵循一个特定的编排的规则。

在这个实例当中，所有的卡片都遵循着一个方向来引导用户的注意力，自上到下地次第加载。相反，没有按照这样清晰的规则来加载，用户的注意力会被分散，元素的外观排布也会显得比较糟糕。

△ 用户的注意力应该沿着一个流向来引导

至于表格式的布局，它相对就复杂一点。在这里，用户的视线流向应该是清晰的对角线方向，因此，逐个区块次第出现是一个糟糕的设计。这样的逐个显示，一方面耗时太长，另一方面会让用户觉得元素的加载方式是锯齿状的，这种方式并不合理。

△ 沿着对角线加载

从属交互

从属交互指的是使用一个中心对象作为主体，来吸引用户的注意力，而其他的元素从属于它来逐步呈现。这样的动画设计能够创造更强的秩序感，让主要的内容更容易引起用户的注意。

在其他的设计当中，用户很难搞清楚哪个才是主要的，因为注意力被分散了。因此，如果要设置多个动画元素，应该定义清楚谁为主，谁是中心，并且尽量按照从属关系来次第呈现不同的子元素。

如果只有一个中心对象，那么其他的对象的运动方式都要受它制约，否则用户分不清楚主次。

根据 Material Design 的规定，当元素不成比例地变幻尺寸的时候，它应该沿着弧线运动，而不是直线运动，这样有助于让它看起来更加自然。所谓「不成比例」地变化指的是元素的长和宽的变化并不是按照相同比例来缩放或者变化的，换句话来说，变化的速度也不一样。（比如，方形变成矩形）

△ 不成比例地改变对象外观的时候，运动轨迹应该是弧线的

相反，如果元素是按照比例改变大小的时候，应该沿着直线移动，这样不仅操作更加方便，而且更符合均匀变化的特征。看一下真实的案例，你会发现直线的运动轨迹会更加合理。

△ 成比例变化大小的时候，应该沿着直线运动

当元素不成比例放大的时候，运动轨迹是弧线，而这种弧线运动轨迹有两种不同的呈现一种，一种轨迹是初始方向为垂直方向而运动结束时瞬间运动方向是水平的（Horizontal out），另外一种初始方向是水平方向而运动结束时瞬间运动方向是垂直的（Vertical out）。

那么怎么选取这个方向呢？很简单，元素运动曲线的方向，应该是要向界面的主要运动方向的主轴靠拢重合。举个例子，在下面的动效当中，整个界面的滚动方向是上下滚动，主轴是纵向的，因此，当卡片点击之后被展开的时候，会先向右水平移动，并最终以垂直运动结束，运动的最终方向，切线是垂直的，也就和垂直方向的主轴重合了。

△ 元素按照弧线展开的时候，最终方向应该和主轴重合

如果几个不同的元素的运动轨迹相交，那么他们不能彼此穿越。如果每个元素都必须通过某个交点，抵达另外一个位置，那么应该次第减速，依次通过这个点，给彼此留出足够的空间。另外一种选择，是元素不相交，而是像实体一样在靠近的时候，彼此推开。为什么？因为我们通常假定界面中所有的元素都位于同一个平面当中。

在运动过程中，元素不应彼此穿越，而应该互相留出空间。

但是这一点也不是一成不变的。在比较拥挤的界面当中，某个元素可以「越过」其他的元素，它同样没有穿过其他的元素消失，而是单纯的移动。这一点从某种意义上也是延续自我们日常的物理规律，只不过我们会默认界面中的元素在这个情况下拥有了高度这样的属性。

△ 元素可以越过其他的元素运动

结语

我们总结了这么多动效运动的规则和原则，从某种意义上还是延续自我们对于物理世界的认知，摩擦力和加速度在虚拟界面中以另外的方式续存着。模仿现实世界的界面让我们对于界面的秩序有更清晰的认知，允许我们更轻松的了解和访问界面的内容。

如果动效按照正确的方式来设计，它应该是不显著，且不会分散用户注意力的。如果不是这样，那么你需要让动效更微妙一点，实在不行甚至需要将它移除。动效不应该成为影响用户操控界面的障碍，或者转移注意力的存在。

当然，即使是遵循这么多规律，动效的设计依然是一门艺术，而非单纯的科学，多做测试多摸索总是有必要的。

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

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

筛选组件概述

筛选组件的作用是帮助人们在面对大量信息时，通过更的筛选方式提升决策效率。广义的筛选组件还包括搜索栏及Tab栏，本文暂不分析。

组件包括筛选按钮与筛选器，筛选器包含类别及各类别下的筛选项。使用频次高低、筛选条件的数量都是决定筛选组件样式的因素。

01

位于 Tab 栏的筛选组件

组件样式

筛选按钮位置：一般位于Tab栏最右侧视觉薄弱区域。

筛选器形式：点击按钮，筛选器以抽屉形式从Tab栏底部向下展开筛选条件，或以浮层形式从屏幕最右侧向左滑出筛选条件。

样式分析

当界面使用Tab栏时，已为内容做了第一层筛选，多数情况下已满足用户对内容的筛选需求。

当筛选类别较多且复杂时，就需要在Tab栏增加筛选组件来提供更详细的筛选能力。而这里的筛选组件较于Tab栏其他条件优先级较低，屏幕右侧为视觉薄弱区域，这也解释了为什么大多数Tab栏的筛选组件都位于最右侧。

案例一

案例来源于美团App

此页是对美食品类的选择，这里的筛选组件在Tab中是最常见的样式。对于用户而言，选择商家店铺优先考虑地域、美食类别、价格及综合评价，而用餐人数与餐厅服务等只是辅助选择条件。

筛选器使用了抽屉形式，如要选择此样式，建议在筛选条件不多且不超过一屏的场景使用。

案例二

案例来源于淘宝App

当用户从首页全局搜索后，出现此页。筛选按钮位于二级Tab栏。点击筛选按钮后，由于筛选条件较多，很难一页展示完，用户往往需要上下滑动屏幕查看全部，因此使用右侧浮层展开的形式较适合。

案例三

案例来源于哔哩哔哩App

全局搜索后，Tab栏默认展开综合tab内容，用户对排序、时长、分区的筛选需求较高，因此直接把筛选类别放在了二级Tab栏，相比通过点击筛选按钮再展开类别的交互方式更简单直白。

点击筛选类别后，筛选器使用抽屉式。此种筛选组件样式一般用于筛选类别较少（不超过4项），筛选项数量不多的场景。

02

底部按钮型筛选组件

组件样式

筛选按钮位置：以按钮或浮层形式固定在界面底部，便于用户操作。

筛选器形式：点击按钮，筛选器以抽屉形式从按钮底部向上展开筛选条件，或以界面浮层形式从底部向上展开筛选条件。

样式分析

使用底部筛选按钮的界面，内容区类别相对单一，通过筛选组件就能满足筛选需求，并对筛选的需求较大。而底部按钮作为常见的按钮形式，用户点击更方便，因此承载筛选组件较合适。

若使用此样式，点击筛选按钮后，筛选器的出现优先考虑从底部向上出现的抽屉式浮层。

案例一

案例来源于旅游类App Expedia

输入旅游目的地后进入此列表页，用户目的性明确，就是要查看结果。底部的筛选按钮是为了帮助用户更快的筛选结果，方便用户触达。并且筛选条件较多，无法一页展示完，使用了界面浮层的形式。

这里还有2个细节：

1、由于筛选类别较多，手动清除单个筛选条件太过繁琐，于是筛选器底部增加了清除按钮，操作更简便。但底部按钮一般为“确定”操作，“清除”放在底部样式上没有做误操作提示，可能会增加误操作机率。

2、筛选后，筛选按钮处会显示已选择的筛选类别数量，给用户带来良好的使用反馈。

案例二

案例来源于dribbble

当前页为地点搜索。需要先进行筛选操作，内容区再出现结果。筛选按钮位于底部浮层，筛选类别代替筛选按钮平铺展现，筛选器使用抽屉式从浮层底部向上展开。

此样式一般适合筛选类别较少，并且每个类别的筛选项不多的场景。优点是减少操作步骤，提高用户操作效率。并且可以学习一些体验细节：在筛选器中选择一个选项后，在其筛选类别处同步修改为该选项；筛选项与筛选类别选中状态一致，增加关联度。

03

浮层按钮型筛选组件

组件样式

筛选按钮位置：以浮层按钮的形式位于界面右下方，占用空间较少。

筛选器形式：点击按钮，筛选器以浮层形式为主，或在筛选按钮下方展开筛选条件。

样式分析

浮层型筛选按钮的优点是增大内容区的纵向空间，比底部按钮型筛选组件的层级要弱一些。但当用户需要操作时，它的位置也便于用户点击。

设计时按钮用色需要区别于内容区，内容形式尽量精简直观。若使用案例3中的扇形筛选器，则要求筛选类别为1-2类，筛选项数量少切文案精简。

案例一

案例来源于dribbble

筛选按钮位于界面右下方紧贴于右侧屏边，浮于被筛选内容上层，滑动屏幕时消失。点击筛选按钮后，从屏幕右侧展开筛选浮层，原筛选按钮变为确认按钮。

此按钮形式最大限度的让出空间留给内容区，且右下角为用户关注薄弱区，这样的位置关系可让用户按需操作。关于筛选器使用右侧浮层前面的案例也提到过，适用于筛选条件较多的场景。并且使用侧边栏形式的浮层与筛选按钮关联性较高，相对符合用户认知。体验细节上可学习的点还有按钮功能的改变，使得体验更便捷。

案例二

案例来源于dribbble

筛选按钮位于界面右下方但没有贴屏边，筛选器以底部分层形式从底部向上展开。这里的筛选条件不多，因此使用了底部分层形式。

案例三

案例来源于dribbble

筛选按钮形式与上一案例相似，不同的是筛选按钮处直接显示筛选条件，可得知此内容区目前被筛选维度为“30M”。此样式适用于筛选条件为同一维度的场景。

点击按钮后，从按钮下层展开扇形筛选器，滑动选择筛选条件。此种筛选器样式使用场景较局限，多为选择时长或数量，并且单选居多。因此筛选器不需要“确定按钮”，只需放“关闭按钮”即可。这里的筛选器也可根据不同的场景选择其他的形式。

04

举一反三

接下来我们拿个案例练练手。

下图界面中内容区为概览与各监控数据图表，需要设计一个筛选组件对内容区进行不同时段的筛选。

在设计之前需要确定几个需求：筛选组件的使用频次、筛选类别的数量、筛选项的数量，单复选关系、筛选条件之间的优先级。

进一步明确需求

筛选类别只有时间段1项，筛选数量不固定，为多项，单选关系。当用户进入此页，根据用户使用需求判断“1小时”基本满足用户查看数据的需求，默认展示“1小时”的筛选。因此筛选组件此场景使用“1小时”时段基本满足用户查看数据的需求，可判断用户使用筛选组件的频次不高。

方案解析

方案一，Tab栏形式

Tab是对整页的筛选，多为不同维度，而这里只有时段一个维度。

Tab所处位置为视觉热点区域附近，但用户对筛选组件的需求并不高，放在此位置占用了概览区空间。

方案二，底部按钮形式

底部按钮位于用户的习惯操作区，放这里使用层级略高，并且会使内容区的整体高度减少。

方案三，浮层按钮形式

位于右下角的浮层按钮在页面中属于视觉薄弱区域，可以使用户浏览时不受按钮影响；但按钮拥有强对比色，在有筛选需求时满足使用需求。

筛选器以时间选择器形式出现，可满足筛选项数量较多的场景。

05

小结

以上内容是我对常见筛选组件的思考，每一种样式都有其优缺点。但我们设计筛选组件的最终目的是帮助用户筛选信息，决策。这就需要设计师根据筛选需求、用户习惯等设计符合用户使用场景的操作体验。

本文作者：TXD技术体验团队-喻杰（阿里巴巴视觉设计师）

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

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

令人上瘾的数字内容，让我们一刻都离不开智能手机，从某种意义上，它彻底改变了我们的生活，工作，甚至思考的方式。现如今，越来越多的人开始尝试戒除令人上瘾的智能手机，寻找更加健康自由的人机关系。根据今天的调研，过度使用智能手机，确实会有一定机率带来心理健康的问题。从 iPhone 诞生之初，直到10年后的现在，在数字产品上瘾和用户注意力的控制这件事情上，开发团队本身就没有放松过。这次，Fast Company 专访了前苹果设计师 Imran Chaudhri。

Imran Chaudhri 早在 1995 年就加入了苹果公司，并且很快就出任了公司的人机交互界面组的设计总监，在2006年前后，他也是作为 iPhone 项目核心的6人团的一员，加入到项目当中来。

待在苹果的20多年时间里，他参与了 iPod、iPad、 Apple Watch、Apple TV 以及 iPhone 等几乎全部主要产品的用户界面的设计，直到他开始追求创造属于自己的公司和事业，才正式从苹果离职。也正是因为这样的契机，才使得 Fast Company 有机会能和他面对面地一起聊一聊他的过去，以及他留给苹果的那些遗产。

和许多设计师一样，他们对于产品的想法和企业的定位或多或少有一些错位。和苹果产品相关的很多信息，他现在依然还不能透露，但是他依然提到了很重要的事情：即使是在iPhone的原型设计阶段，他就已经意识到了，这款产品最大的缺陷之一，就是它注定会分散甚至垄断用户的注意力。而与此同时，苹果也有意识的没有给予用户，对于iPhone 完全的控制权。下面，是访谈中能够对外公布的几个重要的内容摘录：

设计「请勿打扰」的功能

「我认为，从某种意义上来说，真正洞悉设计的设计师，大都能够预见到手机对于注意力的影响。在使用手机的时候，我们总会碰到被各种各样的信息和通知打扰到。」

「早些时候，当我刚刚开始制作 iPhone 的原型之时，管束还不是那么多，我们当中有几个人还有幸把原型机带回家，这样就可以每天工作生活都使用它。那个时候我全世界各地的朋友都和我保持着联系，iPhone 几乎隔一会儿就会亮一下，显示有新消息，叮叮咚咚响个不停，于是我意识到，和我们朝夕相处的手机需要一个管控功能。所以，在很早的阶段，我就开始设计请勿打扰这个功能了。」

对于谁来掌控手机设备这个事，苹果的内部产生了分歧

「其实，在苹果公司内部，想要大家都理解分心是一个影响用户生活的问题，还挺难的。乔布斯倒是很能理解的，但是公司内其他的同事，对于用户对于手机的控制权多少，其实大家还存在不少争议。我和一部分同事倡议给用户更多的掌控权，不过这个事情对产品的营销和市场运作是有影响的。所以，当时内部也有声音说，如果真的给用户太多的控制权，那么这款手机就不酷了。」

「其实直到今天，iPhone 当中绝大多数的功能都是可控的，但是其中很多功能隐藏的比较深，彻底的掌控它们是比较困难的，如果你真得想让那些整天都在轰炸你的信息彻底远离，你需要花费很长的时间来摸索，用独特的方式逐个调整或者关闭才行。因此，对于那些熟练使用iPhone 的重度用户而言，确实是可以如臂使指地掌控这台设备，但是对于更换壁纸都不太会的用户，想要搞清楚iPhone ，让它如意随心，真的是难如登天。他们没有这样的控制能力。」

关于 iPhone 是否有可能更智能地预测通知

「你可能会在一个下午安装十几个不同的新应用，然后你不停地会收到提醒和通知，是否要授权使用相机，是否要授权获取你的位置，是否允许它给你发送通知，每个都要做决定。稍后，你可能会发现，Facebook 一直在后台给你推送信息。再之后你就会发现你有睡眠障碍了，总会有信息大半夜地推送到你的眼前，让你无法安生地休息。实际上，借助请勿打扰的功能，你可以一早上再查看它们。这套系统足够智能，能够判断出哪些应用之前就已经获得了许可，哪些仍然在后台获取数据，哪些通知实际上你并不关心。所以，这套系统其实是会选择更加恰当的时机和正确的方式来建立用户和手机之间的对话和关系，手机会询问用户，你真的需要这些通知吗？或者是，你真的需要Facebook 使用你的电话簿的信息吗（因为你已经很久没有登录了）？等等。正确地设计了这套系统之后，提醒用户的方式也非常的多。」

为什么苹果最后还是开始关注分心这个事情？

「iOS 12 中内置的这套防干扰的控制系统可以更加系统地监控手机各方面的功能和用量，它实际上是从iOS 6 时代的请勿打扰的功能拓展而来的。但是它在现在被推出来真正的原因是有太多的用户为此而抱怨，而媒体和用户都发文吐槽，在呼声和压力之下，它们最终在iOS 12 中呈现了出来。这个局面之下，苹果没有选择的余地，必须对于舆论有回应。这对于每个人都是好事，因为用户和他们的孩子都因此能够获得更好的产品。但是这是否是最好的产品？当然算不上，因为现在的iOS系统是为了应对舆论和负面新闻而设计的，设计的意图并不对。如果是苹果主动作出这样的决策，才算得上是好产品。」

「对于苹果这种体量的大公司而言，产品设计其实复杂性非常的高。真的是这样。作为设计师，你需要服务于你的用户，你还得和公司的利益保持一致，同时，还需要对得起自己的底线和道德。服务于一个大型的企业，确实非常的难做抉择。对于用户而言，可以很轻松的直接怼苹果，说它没有做对的事情。但是身为其中的设计师，要平衡各方面的需求也压力，经常会进退维谷。有些用户因为iPhone 的一些功能，受到了负面的影响，有些人受到的影响比另一部分人更多。但是身为设计师，一个受到各方面制衡的设计师，即使是作出了改变，在很多时候也远远不够。至少在我看来，现在的改变还不够大。」

管理数字化的生活，就像管理健康一样重要

「我和数字设备之间的关系非常简单。我不希望被它所控制。从使用 iPhone 的第一天起，我就用着黑色的壁纸。我不会将一大堆的东西塞进手机，减少被分心的可能性。我的手机第一屏上的应用程序非常少。」

「我的意思并不是说这样做很重要，或者说我推荐这么做，对于人和手机之间的关系，每个人都不一样，处理方式也都很个人。对于如何处理自己和手机之间的关系，有人让我提一些建议，我觉得没有必要，因为我的办法并不适合所有人。一天喝多少咖啡，抽几包烟，每个人的情况都不一样，没法一概而论。不过，心理健康是一件大事，你和你的智能设备之间，应该保持着平等的关系。这至少是一个大的设计趋势，是设计师需要关注的焦点。就像可持续性发展已经成为时代的主流诉求一样，你无法忽视认知压力的存在，认知设计也势在必行。」

界面设计的未来，以及不可避免的问题

「我观察到，界面设计在很自然地进化和发展着，从按钮到旋钮，从点击到手势操作，从语音交互到情感化设计，均是如此。无论是考虑到用户的情感诉求，还是进入语音交互的领域，都一定会遭遇一大堆的问题。按钮和旋钮的设计是需要考虑到人体工程学的问题，点击和手势的交互则牵涉到更具体的压感和硬件上问题。任何人和机器之间的交互，都一定都会遭遇不自然的状况和问题，就这么简单。身为设计师，需要足够的预见性，才能真正领先于用户，预测到可能会遭遇的问题。」

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

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

在 Sarah 给 Jimmy 讲完了她在设计上的一些原则之后，Jimmy 就准备开始重新设计那个客户等着要的新的仪表盘界面了。与此同时，他所在的公司 Shmuckle 准备设置一个新的产品经理的职位，并且将会在公司内部选择合适的人员来任职。Jimmy 对此非常有兴趣，实际上，在当前的架构下， Jimmy 是一个非常合适的候选人。但是要担任这个职位，他必须证明自己能够胜任这个职位，证明自己知道如何管理项目和团队。

对于他正在做的这个控制面板的设计项目，他也正在挑选合适的产出流程。用敏捷（Agile）开发流程更好，还是应该用瀑布模型（Waterfall Model）？又或者是循环式开发流程？他觉得跟开发部的同事聊一聊会是更好的选择。

当他找到工程部的 Boris 的时候，他正在楼道里刷推特摸鱼。「用什么流程？那还用问，当然是敏捷啦。这个最好，过程清晰简单，现在没有什么办法比敏捷更好处理各种数字产品的设计和开发啦。」接着，Boris 去隔壁会议室拖出一个白板，并且说道：「给我一个小时，我告诉你关于敏捷开发的一切。接着还能捎带计划一下每周的工作内容，这样你就能完全明白要干啥了。哦，差点忘了，还有几个播客和视频可以帮你更加深入地了解敏捷。」

敏捷开发以用户的需求进化为核心，采用迭代、循序渐进的方法进行软件开发。在敏捷开发中，软件项目在构建初期被切分成多个子项目，各个子项目的成果都经过测试，具备可视、可集成和可运行使用的特征。换言之，就是把一个大项目分为多个相互联系，但也可独立运行的小项目，并分别完成，在此过程中软件一直处于可使用状态。

絮絮叨叨的 Boris 终于找到一个倾诉的对象，Jimmy 一时之间感到颇为尴尬，不知道如何回应。好在这个时候，开发部另外一个部门的 Floris 从门口路过，Jimmy 赶紧喊住他「Floris 我到处在找你，你怎么在这儿啊」说着就拉住 Floris 的手，窜进了另外一个办公室，远离了热情的 Boris。

「干啥？你俩在聊啥？」

「Boris在跟我说敏捷开发……」

「啥玩意儿？他跟你讲敏捷开发？快拉倒吧，他们部门里面唯一敏捷的就手头上的 Macbook。我们这边都用瀑布模型来作为产品开发的流程，因为它是线性的，有着更简单的结构，操作起来也简单，很少会发生混乱。」说着，Floris 从办公室的书架上摸出一堆文档压到 Jimmy 手上。「你要的东西都在里面，祝你好运。如果你需要任何帮助，请在公共的平台上跟我约时间，我们可以开个小会解决一下问题~」说着 Floris 回到自己的桌子边，开始继续干活儿。

瀑布模型（Waterfall Model） 是一个项目开发架构，开发过程是通过设计一系列阶段顺序展开的，从系统需求分析开始直到产品发布和维护，每个阶段都会产生循环反馈，因此，如果有信息未被覆盖或者发现了问题，那么最好「返回」上一个阶段并进行适当的修改，项目开发进程从一个阶段「流动」到下一个阶段，这也是瀑布模型名称的由来。包括软件工程开发、企业项目开发、产品生产以及市场销售等构造瀑布模型。

拿着一堆资料，回到自己的工位前，整个人都要陷入到怠惰的情绪里面，瘫坐在电脑椅上纠结了起来。信息太多了，不知道从何做起。在网上一搜也是成堆的内容，根本不知道从何入手。懵逼了。

Jimmy 决定采用最终的备用方案——万事不决问 Sarah。在 Jimmy 的工作经验当中，老领导 Sarah 总能给他靠谱的建议和可行的方案。

出问题的时候，先后退一步

Sarah 办公室的门从来都是敞开的。当 Jimmy 来找她的时候，Sarah 正在阅读一些有意思的东西。她的办公室里面有很多的书和绿植，漂亮的色彩让 Sarah 的整个工作区域仿佛能够唤起人的创造力和想象力，桌上打开的书页散发着油墨的味道，闻起来让人很有安全感，像家里的书房。「Hey，Sarah，我又有问题来麻烦你啦，你有空么？」

「我的门永远敞开着。这次有啥问题，看看我能怎么帮到你。」Sarah 听到声音就知道是谁，一边放下手头的文档，一边抬头笑着看到略显局促的 Jimmy 。说话间，Jimmy 非常熟悉地跑到办公桌另外一边的椅子上瘫坐下来，Sarah 笑着摇头，拿起咖啡壶给 Jimmy 倒上一杯咖啡。

回到自己椅子上的 Sarah 没有看自己的电脑，而是像心理咨询师一样，盯着 JImmy ，进入了等他倾诉的状态。而 Jimmy 此刻也惊讶于 Sarah 如此洒脱迅速地放下手头的工作，并专注地帮助自己，于是也不再放飞地瘫坐着，直起腰身，开始认真地陈述自己的问题：

「实际上，你之前跟我说的设计原则，让我获益匪浅。我按照你告诉我的方法，找到了症结，解决了问题。但是我现在不仅仅是要设计这个仪表盘界面，我需要开发和实现。有人说敏捷开发比较好，有人说瀑布模型很给力，这些开发方式到底有啥差别，优势具体在哪我并没有搞清楚。有人说我需要的是敏捷开发里面 Scrum，还有人说，它实际上是 shmum，也有人称之为 Bshmum，结果还有朋友告诉我说 Google 的 Design Sprint 才能帮我解决问题。我感觉脑子快要炸了。所以……Sarah 你明白么，我需要帮助了。 」

听到 Jimmy 说到后面，Sarah 就明白了他碰到什么问题了。「Jimmy，没事儿，我们总会在某些时候碰到问题，别人的指导总会派上用场。」

「我可以理解，如果在网上搜索这些相关的信息，会有太多杂乱的内容让你感到信息过载。幸运的是，如果你理解这些东西背后的基本原理，就可以相对轻松地梳理清楚所有的内容了。」

「早知道我应该一开始就来找 Sarah 问问。」Jimmy 不由得对自己抱怨了一句。说着，他在摸起咖啡杯旁边的纸和笔，准备做笔记，就像上次那样。Sarah 看穿了他的小心思，笑道：「不用记。」说着，喝了一口咖啡，然后继续道：「先想想看，我们为什么会有敏捷、瀑布模型、冲刺模型，为什么要用循环工作法呢？」

「为了？」Jimmy 下意识挠头。

「是的，但也不完全是这样。总的来说，我们需要一个过程来呈现产品，因为人类的思维是没有办法直接掌控混乱的事物。此外，一个清晰的、可遵循可记录的流程，能够确保你在完成后，确保产品的整个开发过程是可交付的，细节也是可回溯的。这就是为什么，我们需要这些流程。」

「最首要的问题，不是选择哪个流程，而是要了解这些流程为什么而存在，以及我们可能会碰到什么样的问题。无论你选择哪一个。」Sarah 看了一眼窗外，继续说道：「你有问过公司的其他的同事，他们都遵循什么样的流程么？」Sarah 问道。

「问过了，绝大多数都采用的敏捷和瀑布模型。」Jimmy 说到。

承诺是关键

「首先要告诉你的是，两种方法都很棒。但是绝大多数的公司只会在两种方法当中选择一种。因此，当人们采用敏捷或者瀑布的时候，我们更多看到的是他们所做的设计或者开发的小冲刺。以往，我们会看到团队会在3个月或者半年这样的时间尺度当中，一直保持着高强度冲刺的状态的。在旁观者眼中，会看到一个清晰的故事，或者说整个产品逐渐设计或者开发出来的景象。如今流行的做法是将冲刺划分为很多不同的阶段，这也是为什么如今被称为小冲刺。不过本质上，做的事情和内容并没有改变。」

「另外，很多人会使用敏捷的方法来做项目，过程中会不断的迭代修改。他们希望通过这样的方法来获得更好的结果。实际上，很多团队会持续不断地、长期地坚持这么做，几个月甚至一年半载都没有发布任何东西。如果你在这种情况下，会问自己，到底出了什么问题？我会告诉你，原因在于没有清晰的承诺，以及太多的事情让人分心。大家都不会承诺在一段时间内交付一些东西，使用各种借口不按时、按预算来完成项目。」

「如果这个时间只是一两周，一个月，好吧，或者说一年，这个周期并不重要。重要的是，你不需要拥有一个清晰的过程，并且承诺提供一些东西。当然，这是很有挑战性的。这意味着，在这个情况下，你必须作出一些选择，来完成任务。」Sarah 总结道。

阻碍前进的东西

「到底使用哪种敏捷的方法，采取多少个步骤，或者使用经典的瀑布模型，借助谷歌的设计冲刺，都可以，都没有问题。大家总会认为，采用哪种过程是关键，但是现实是，这个过程始终都只是达成目的一个手段而已。」

「真正的问题在于，人的天性是懒惰的，没有按照承诺交付东西。总是忍不住的拖延，膨胀的自我，办公室政治，爱来事儿的甲方，喜欢变卦的客户，它们还都会像拦路虎一样进入产品和设计的流程。无休止的辩论，不断改变的策略，不断膨胀来回拉锯的会议，最后你只能呆滞地坐在办公室当中，想想自己的生活到底出了什么问题。最后，我想说一下多年前，我自己所经历的一个项目。」Sarah 觉得她应该从具体案例上来说说这个事儿了。

「所以，首先你应该清楚，在一个特定的时间段内，交付一些东西出来。你要保证你的团队不会跳票和拖延，也不会让预算超出计划。你将要在约束中工作。约束其实是一种隐藏的优点，也许并不是每个人都明白。你需要完全保持专注，除了你的和参评之外，不会被其他的任何东西分心。就你的情况而言，你需要专注于这个仪表盘界面的设计和实现。」Sarah 说道。

「团队的规模很重要。不过那是后话，后面咱们再仔细聊。」

「假设，你有一个三个人组成的团队，他们共同负责开发并发布你的产品的下一个功能。具体到你的头上，就是为你开发并实现这个重设计的仪表盘。你需要确保公司的其他人不会前来干涉他们的工作，不会来和他们讨论这个项目以外的任何事情。」

「这一点极为重要。他们必须保持专注。减少被打扰的机率——或者说不被打扰是最好的事情，他们能够专注而清晰的思考问题。除了手头的任务之外，他们不会需要去做其他的任何事情，不会被其他的工作内容所分心。对于如何做手头的工作，什么时候做，具体做什么，他们应当有足够的控制权和自主权。最后，请记住这一点：

团队必须足够小。如果太大，沟通问题一定会成为主要的障碍。每增加一个人，想让大家信息和想法保持一致的成本，就会成倍增加。如果你拥有太多的自由，太多的资源以及大量的人员，你不仅会得到过度的设计，超出常规的工作，需要超出计划的预算，以及一个没有重点，不够出彩的产品。」

问题总是会出现的

「如果你像我说的一样，后退一步来看问题，就会意识到，流程背后所存在的问题，并不是流程本身的优劣，也不关乎公司、人员、国家、文化或者其他。这是关于纪律和约束。不仅是团队本身需要纪律，负责人要有纪律感，业务也需要有纪律约束。如同我们所知道的，团队也好，产品也好，公司也好，它都是自上而下的，顶部的纪律、约束和眼界，决定了底部的纪律、调性和产出。」

「现在，你可能会问自己，如果你的项目出现了问题，会怎么办？那么首先，对于你想要达成的目标，需要一个清晰的愿景或者想法。除非你的愿景和目标足够清晰，否则你是没有办法来提供承诺的。在项目开始之前，这个愿景/目标必须有足够清晰的定义，是否能够达成，难度高低，是否具备可执行性，否则在过程中一定会有所偏离。在这里，给你几个小贴士，务必要记住：

不要自欺欺人，你需要提前计划好整个项目，避免出错。很多事情都会出错，所以你需要有目标有愿景，你需要向着目标前进，并且随时做好解决问题、纠偏的准备。一旦你被其他的因素影响，就很容易增加开发时间、增加预算、招募更多的人手。不要相信所谓的规划和蓝图，那什么都不是。问题是一定会出现的，出错了，就专注于最终目标，抓紧手头的项目，别无其他。」

Sarah 说道这里，Jimmy 已经开始有所思考了。「所以，在我告诉你这些事情以后，对于你你手头的这个仪表盘的项目，你打算下一步要怎么做？」

需要始终牢记的事情

Jimmy 的脑中仍然在反思 Sarah 刚刚说过的话，下意识回复道：「要有远见，目标清晰，为即将出现的错误与问题做好准备，组建一个足够独立的小团队，和公司其他的团队和部门隔离开来，这样可以在不被打断的情况下聚焦于当前的任务，最重要的是，要在承诺的日期前交付承诺的产品。但是我不知道团队要有多小，我应该带多少人？」Jimmy 问道。

「如果我说我知道你要带几个，那么我一定是在骗你。不过，通常而言，你这种规模不算太大的产品，我建议控制在3人以内。你是这个项目的主管设计师，也是产品经理，在设计上已经没有大的问题，你还需要两个开发人员，一个负责前端，一个负责后端，这样足矣。」Sarah 回答道。

「那么我应该花费多少人在这个上面呢？」Jimmy 又问道。

「这个是你的项目，时间应该由你来衡量。不过，你需要一开始就清楚你手头有多少资源，你有多少时间来投入这个项目，有多少可供调用的预算，以及管理团队的耐心达到了什么程度。而且，这个事情最关键的并不是时间，而是你的承诺，以及到达约定时间之后要交付的东西。这不仅是对上层的责任，对于你和你的项目而言，也是一个可供奋斗的目标和清晰的边界。你的项目看起来并不算小，这个人员工作量之下，可能需要花费一个月的时间来进行开发。但是请记住，在一个月的时间内，你必须提交出一个可用的产品出来。从我的角度上来看，我是不允许增加预算和时间的。约束对双方其实都是有利的。」Sarah 说道。

「那么我还是想问最开始的那个问题，到底应该使用敏捷还是瀑布模型？」Jimmy 还是忍不住问道。

「我不知道。」Sarah 坦言道：「你的项目应该由你来决定。对我而言，选择哪个流程其实并不算最重要的问题，相反我刚刚说道的，流程之前的种种问题才是最重要的，关于承诺，团队的构建和管理，这些因素产生的影响更为深远。如果你清楚的知道最终要产出的产品，流程就仅仅只是手段了。」Sarah 笑着总结道。说话间，她伸手去拿之前没看完的文档。「谢谢，Sarah，」Jimmy 笑道：「你好像又救了我一次。」说着 Jimmy 走出了Sarah 的办公室。

「我的门一直都敞开着。」Sarah 低声说道，走远了 Jimmy 大概并没有听到这句低语。

结语

在设计和开发数字产品的时候，每个团队的负责人可以选择自己习惯的或者自己青睐的流程和方法。使用什么样的方法无关紧要，在未来10年，我们可能还会碰到更多的新方法，新的策略。而唯一不变的，始终还是最基本的问题，团队，承诺和交付。

我注意到，有人把产品所使用的敏捷和瀑布模型这类流程称为「项目的上帝」。但是实际上，不管哪种流程，依然会陷入无休止的扯皮会议和无意义的辩论，出现了问题之后，开始修改时间表。「我们无法按时完成功能A，因此我们无法开发模块B，开发人员又需要参与下一个项目，因此我们资源是不够用的，所以呢，这个项目不得不停一个月。」这情况很常见，也是典型的反面案例。

我相信，产品团队应该高度专注于当前的产品，和其他产品的需求、各种无关的事务隔离开来。「Hey，Angela，我们的大客户要求这个今天上线，能不能把你的项目放一边，帮我们把这个产品弄上线？」这也是一个反面案例。拒绝。

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