如期而至，这是标签栏控件总结的第二期。

 

 

这一期我们来聊一聊标签栏中的关键元素——图标。在此之前，如果你还没有了解标签栏的平台规范，可以回顾：《没弄懂标签栏之前，先不谈用户体验》

 

图标其实存在于界面中的许多地方，但因为这一期主要分析标签栏，所以我会借标签栏中较主流的图标样式，总结一套图标制作与落地方法。这些方法在图标制作过程中都是相通的，大家可以举一反三。

 

 

一、标签栏图标规范

 

1.1 图标样式

 

图标具体样式风格的定义是非常主观的，网络上也流传着许多的教程教大家如何设计五花八门的图标，所以在这里我就不再赘述了。我主要来总结一下基础的标签栏图标一般有哪些样式变化。

 

我调研了诸多的应用程序，发现主流的APP标签栏样式变化，大致分为以下五种。其中最占比最多的是“由线型转面型”。

 

 

调研的应用程序中，所有使用到线性图标的应用程序，都将描边粗细限制在1pt-2pt之间。

 

 

1.2 图标视觉大小

 

上一期我们讲到，iOS定义了一套标签栏图标的尺寸规范。

 

 

iOS在这里所定义的尺寸并不是图标文件最后输出的尺寸，而是给设计师作图时，针对不同图标形状的参考尺寸，目的是为了让图标的视觉大小看上去一致。

 

那么为什么iOS会根据不同的图标形状给出不同的图标尺寸呢？因为50px*50px的正方形比50px*50px的圆形面积更大，所以正方形的视觉大小也会大于圆形。为了统一图标的视觉大小，正方形要做适当的面积收缩处理。（矩形同理）

 

 

于是我们看到许多平台都推出了图标辅助网格规范。其实如果遵从“面积相等”原理，理论上所有的图标网格都应该由下面这一套推理公式得出（以Material Design 标准图标网格为例）：

 

 

但实际情况是，不同平台的图标辅助网格规范建议尺寸都有一定的差异。原因就在于，虽然有时候我们参考“面积相等”原则对图标视觉尺寸进行了规范，但项目落地后发现视觉上可能还是有一些不协调，所以最终设计师还是会凭借自己的主观判断再进行微调。

 
记住：好的设计作品是理性的设计理论与设计师本身感性的碰撞结果，二者缺一不可。

 

1.3 图标输出尺寸

 

iOS规定标签栏图标的输出尺寸统一为31pt*28pt；Material Design规定标签栏图标的输出尺寸统一为24dp*24dp。

 

但我们发现，在借助了图标网格解决了图标视觉大小的问题之后，每一个不同形状的图标，尺寸其实是不同的。为了方便前端落地，我们在输出切图文件时，要保持每一个图标文件的输出尺寸是相同的。该怎么办呢？

 

于是我们将一组图标都放置在一个比图标本身略大的相同尺寸容器中。而图标与这个容器之间的空白像素，正好也帮助我们规避了图标落地后，切图边缘像素可能被截断的现象发生，所以我们称这个区域为“安全边距”。

 

 

对于安全边距的规定：Material Design全平台规定图标的安全间距统一2dp；iOS则根据不同的图标使用场景给出的不同的图标网格和图标安全间距。

二、静态图标

标签栏的图标一般分为静态图标和动态图标两种。

静态图标的实现方法相对容易，可以与前端沟通确定本次项目交付的标签栏图标文件是采用位图还是矢量图。如果是位图建议交付.png格式文件；如果是矢量图建议交付.svg格式文件。

2.1 位图图标

 

使用位图时请注意以下两点：

 

1）不同项目环境输出的切图套数不同

 

· 交付iOS原生的标签栏图标切图需要 @1x/@2x/@3x 三种倍率的切图文件；

· 交付Android原生的标签栏图标切图需要 @1.5x/@2x/@3x/@4x 四种倍率的切图文件（@0.75x和@1x切图层分别用于ldpi和mdpi分辨率设备，但这些设备现在几乎已退出市场，所以可不考虑，但最终视项目真实需求确定。）；

· 交付web项目的切图需要试情况而定，一般常用 @2x 切图，因为@2x向下适配@1x、向上适配@3x，都不会产生太大的图片失真。但有时候前端小哥会要求用到其他倍率切图，所以最终以具体需求而定。

 

请注意：这里我所提到的倍率全都是“绝对倍率”，这个概念非常关键。

 

“绝对倍率”指的是：以上所有的倍率都是针对 @1x 设计稿下的输出倍率尺寸。而当你使用@2x作图时，为了保证“绝对倍率”不变，你的切图输出倍率就应该设置为 @0.5x/@1x/@1.5x 。

 

如果你在@2x下作图，却依然保持输出 @1x/@2x/@3x 的切图，那你输出的文件尺寸最终其实是 @2x/@4x/@6x。

 

有一点绕的话，我们以Sketch导出位图切图为例：

 

 

所以如果你日常使用的是Sketch，也是用Sketch原生导出工具，那你的切图预设应该根据你的作图尺寸而定，见下表：

 

 

如果你日常使用的是PS，用Cutterman切图，那么Cutterman会自动识别你当前的画板，然后根据它的宽（横屏情况下是高）来设定它的基准分辨率。那么你在任何情况下输出 @1x/@2x/@3x 的切图，其实都是“绝对倍率”，不用像Sketch当中一样换算。前提是“设置当前画布为：Auto（自动识别）”。

 

 

假设你在@2x下作图，执意不管不顾“绝对倍率”，又忘了交代前端人员手动处理切图尺寸的话，那你所有的切图尺寸实际都是设计稿所需图标尺寸的2倍。就算前端小哥帮你手动处理了切图尺寸，每一张切图所包含的像素信息，都比项目真实所需的要多很多，完全就是在徒增所需切图文件的大小。

 

2）注意切图文件大小

 

切记，公司的线上项目中，用户从服务器下载的每一单位的流量都是要公司花钱的，所以许多项目管理者都是很在意控制线上文件大小的。于是压缩切图是UI必备的技能之一。

 

虽然图标的文件大小一般只有几KB，但是项目大了难免积少成多，所以在真实项目中，不管任何切图我都会手动压缩一次。

 

这里推荐一个压缩.png文件大小，但几乎不会产生失真的免费网站 tinypng。

 

 

2.2 矢量图

 

位图切图会面临交付的倍率图过多、容易失真、文件大小难控制等问题，但对于矢量图，这些问题都得到了解决。目前.svg矢量图落地也在项目中越来越流行了。UI可以在Sketch或Ai中制作。

 

一般与前端人员对接有在线图标库对接与本地文件对接两种。

 

在线矢量图标库有很多，国内比较流行的是阿里巴巴矢量图标库-iconfont；本地对接就是直接将文件发送给前端人员，他们会自行进行项目文件的管理与调用。

 

如果.svg切图输出后，与设计稿中样式不符，请注意排查以下三点：

 

1、svg不支持渐变颜色填充；

2、svg不支持描边，请将所有的描边轮廓化。Sketch中可通过“图层-轮廓化”（快捷键⌥⌘O）；Ai中可通过“对象－路径－轮廓化描边”；

3、要确保一组图标的文件尺寸一致，需在图标下方增加一个透明方形，和图标一同导出。

 

  

三、动态图标

 

为了提升用户体验和产品趣味性，动效微交互的标签栏图标也越来越流行了。

 

 

动效在前端落地的方法其实有很多：

 

· 前端代码直接实现：代码是很强大的，但通常用代码直接写复杂动效会很浪费项目时间。简单维度的动效如位移、透明度、大小变化等可以借助代码，但复杂动效就不要去打扰前端小哥了；

· 直接刚gif：这已经是老旧技术时代的动画解决方案了，文件大且请求文件也需要时间，有时候无法给用户及时的触控反馈。再者它是位图的原因，在高分辨率屏幕上缩放容易失真。

· png序列帧：我们知道，动画是一张一张的静态图交替变化形成的。如果将每一帧动画都拆分成一张图片，就有了png序列帧。所以一套动画的png序列帧往往非常多，文件大小自然就变大了。所以后来也有团队引进了雪碧图的方式，但文件大小依然不乐观。并且同样是位图的原因，高分辨率屏幕容易失真。

· Facebook Pop/Rebound/Keyframes：Facebook Pop/Rebound是Facebook给iOS和Android提供的常用动画预设，是较早将动效代码化的开源技术方案，但动画效果预设只有弹簧/衰减等一些简单样式。后来Facebook又推出了Keyframes，允许设计师自己在Ae中自定义动画并导出，然后交付给前端人员。

· Lottie动画：和Facebook Keyframes相同，都是结合Ae输出动画代码。但是Lottie更厉害的地方在于，它比起Facebook Keyframes来支持的Ae样式更多，例如蒙版、遮罩、修剪路径等等。

 

所以综上所述，落地标签栏动态图标，目前最可行的还是Lottie动画。

 

3.1 Lottie的背景

 

Lottie是Airbnb开源的一个跨平台动画库。表现层面它是一张图片，但实现的方式是通过代码，所以它是矢量的。很花式的动画也可以把文件大小做到非常小。

 

UI与前端对接是通过交付一个json代码文件。

 

如果这是你第一次接触Lottie，再好不过的体验方法就是玩一玩阿里提供的一站式动画平台：犸良动画 。它最底层采用的技术就是Lottie，只是被阿里二次封装了许多预设的动画效果，你可以自定义其中的元素与参数，然后试着导出你的第一个json文件~

 

3.2 Lottie如何上手

 

接下来是简单粗暴的UI与前端对接实现Lottie动画落地的全步骤参考。在此之前，想要全方位了解Lottie的相关信息，请参阅Lottie官方说明文档。

 

· 步骤一：安装Ae和bodymovin

 

制作Lottie动画，首先你必需两个工具：Ae和bodymovin插件。

 

Ae版本要求为Ae CC2014。又因为据很多设计师反馈，目前bodymovin在汉化后的Ae中使用会出现诸多问题，所以后面的教程都是基于Ae英文版。如果你汉化了Ae，最好在需要制作Lottie动画时取消汉化。

 

然后获取bodymovin。bodymovin插件更新至今，版本已非常多，并不一定版就适用于你当前的项目，因为前端使用的bodymovin解析包可能无法解析你用版bodymovin插件输出的json文件。

 

 

一旦确定使用Lottie，前端人员会在GitHub查询Lottie相关文档的，所以UI只需要配合前端确定一下合适的bodymovin插件版本就可以了。最终走查时，一定要确保当前bodymovin输出的动画在项目所需要运行的所有环境中可运行，才说明UI使用的bodymovin插件和前端使用的bodymovin解析包版本是兼容的。

 

获取了bodymovin后，将bodymovin拖入到ZXP Installer中，ZXP Installer会自动识别插件安装到Ae。

 

 

安装完成后，就可以在AE的“窗口-扩展”中看到bodymovin啦~

 

 

· 步骤二：将Sketch或Ai中的文件导入Ae

 

如果你技术娴熟，当然也可以直接在Ae中绘制图案动画。但如果你还是习惯先在其他软件中绘制好基础图案，再到Ae中制作动画，那你需要了解如何将图案导入Ae。

 

Ai和Ae都是Adobe旗下的工具，所以Ae是可以完美解析.ai文件的，如果你是使用Ai作图，可直接存储为.ai文件，再在Ae中打开。

 

 

如果你使用的是Sketch，可以先导出为.svg，再用Ai打开该.svg文件，转换存储格式为.ai，最后到Ae中打开。

 

当然，Sketch还有直接和Ae对接的插件，AEUX（前身Sketch2AE）。需要在Sketch和Ae中同时安装AEUX插件，Sketch负责传送，Ae负责接收。具体的使用方法可以在官网教程中查看，我就不再赘述了。

 

 

·步骤三：制作动效并输出

 

和静态图标同理，为了保证落地时图标视觉大小一致，一组动效图标输出的文件尺寸应该是相同的。所以在你制作动画之前需要确定合成文件的尺寸。Lottie官方建议：因为Lottie输出的是矢量动画，所以建议以@1x输出动效，前端人员在任何屏幕上放大并不会失真。

 

 

在制作之前请务必详细阅读Lottie所支持的Ae参数文档，以免辛苦做出的动效，前端无法解析。特别提醒：原生环境中bodymovin是不支持解析Ae表达式的。

 

完成制作动效后，就可以通过bodymovin导出动效了。

 

  

·步骤四：预览与交付

 

导出完成后在你的目的地文件夹中将存在一个.json文档，如果你的动效中还使用了位图，系统还会自动生成一个images文件夹。这些都是你需要交付给与你对接的前端开发人员的文件。

 

 

.json文件中记录的动效代码UI不需要过多关心，但是其中两个信息你是一定要了解的。它们是你与前端对接沟通和获悉文件信息的一些关键参数。

 

 

UI自检动效或其他相关人员需要预览动效的时候，可以用LottieFiles，拖入.json文件即可预览。iOS和Android还可以下载LottieFiles APP，扫描预览页中的二维码即可在移动端预览。

 

四、总结

 

整个制作图标的流程我已经全部整理出来了。首先要注意图标的规范，然后制作位图、矢量、动效图标时的注意点，我几乎把我在真实项目中踩过的坑都告诉大家了。剩下的创造性的环节就交给你了！

 转自：站酷-UCD耍家 

上一篇，探讨了如何做到品质。这一篇，探讨下如何做到惊喜。

一家之言，未必全面，甚至未必正确。欢迎交流探讨。

01

交互设计的惊喜，是什么？

之前的文章，有简单定义过交互设计的“惊喜”，即为：超出用户预期，并让用户开心。

具体而言有两类，分别是：小惊喜、大惊喜。

1 小惊喜

所谓小惊喜，是指一些颇具趣味性或人文属性的交互设计小细节。

先说趣味性。常见的有两类，第一类是比较好玩的动效，第二类是一些小功能。第二类有时也会包含第一类。

动效这块，大家比较熟悉的，有 iPhone 上删除应用前图标的抖动，仿佛是吓的发抖，也可能是在摇头求饶；还有移动端登录 B 站、输入密码时，动画人物的捂眼捂脸动作。

(B 站登录页面)

小功能这块，也可以分成两类。一类是隐藏的小功能，一类是有趣的小功能。

很多隐藏功能，头几次用的时候，多少会有一些惊喜之感。

比如在订阅号消息列表页，某个公众号你已经几个月没看过，对它失去了兴趣和信任。这时，尝试长按这个公众号的头像或名称，会呼出一个包含“删除消息”和“取关”功能的弹窗。

(订阅号消息列表)

还有些隐藏功能，既能让用户觉得惊喜和方便，又能引发用户思考。这种思考，可能会让用户感叹设计之妙，也可能也会给用户一种猜对谜语的欣喜之感。

比如用墨刀的时候，尝试按数字键 1，会呼出“内置组件”这个使用频率非常高的功能，会让人觉得墨刀很聪明。

如果再仔细看一下，会发现，“内置组件”的缩略图标，和其他 4 个诸如“我的组件”、“图标”等功能的缩略图标，并成一列。这 5 个缩略图标的排列顺序（上到下），和它们快捷键（"、"键和数字键1、2、3、4）的排列顺序（左到右），是完全一致的。不得不说，这是一个简单又巧妙的设计。

再比如朋友圈里，某个不熟的好友每天都发集赞的小广告，搞的我们不胜其烦。长按其头像，会呼出设置权限（屏蔽等）的功能。

有意思的是，长按好友名字，则不会呼出这个功能。要知道点击头像或名字是都能进入好友主页的；另外刚才那个例子，长按公众号头像或名字，也都能呼出取关的弹窗。

个人的理解，生活中，我们用力长按一个人，通常是表达强烈不满，比如打架时。比起长按名字，长按头像更像是长按真人，所以也更能表达我们的不满。

说完隐藏的小功能，再说下有趣的小功能。比如微信聊天里的扔骰子、石头剪刀布，微信给朋友发生日快乐后漫天飘落的蛋糕，拍照软件里的贴纸，等等。

最后说下带有人文属性的交互设计小细节。常见的有如下类型：帮助弱势、关照情绪、表达情感、保护隐私。

帮助弱势这块，比如 iPhone 的辅助功能，里面有针对视力障碍的放大镜功能、有针对不识字群体的旁白功能。

关照情绪这块，很重要的一点，就是避免引起用户的负面情绪。比如微信的删好友是单方面删除，被删时我们很难察觉到，而且微信也不会通知我们。个人觉得，微信之所以不通知我们，其中一点，就是不给我们添堵。类似的还有，微信消息没有“已读”功能，这就大大减轻了接收者的回复压力。

表达情感这块，比较为人所知的例子，5 月 20 号这天，微信红包的限额，从 200 元升到了 520 元。还有一个例子，在微信聊天里发一个“ohh”，长按并点翻译，结果也是一个惊喜。

保护隐私这块，比如借助 iPhone 的“引导式访问”功能，可以让小朋友只能访问你的某个视频应用来看动画片。再比如别人用你电脑的时候，如果你不想让对方看到你的微信，就可以通过手机微信来锁定或退出电脑版微信。

2 大惊喜

所谓大惊喜，是指那些系统性大创新，并且能够引领潮流、代表未来的交互设计。通常而言，这些大惊喜，最开始给用户的感觉，就是酷。

iPhone 就是典型例子之一 。

2007 年的初代 iPhone，带来了当时的大屏幕：3.5 寸屏幕，以及纯触摸屏，和极为灵敏的触控体验。

2011 年，Siri 同 iPhone 4S 一起问世，为我们带来了语音交互。如今，在 100 元就能买到品牌类智能音响的情况下，依靠语音交互的智能音响也在慢慢走入寻常百姓家。

也许后乔布斯时代的 iPhone 创新不如以前，但不可否认的是，时至今日，iPhone 依然在引领潮流，在给我们大惊喜。比如这几年流行的手机无线充电和以 AirPods 为代表的极简的无线耳机。

以上是比较广为人知的交互设计，还有一些不太为人所知的设计。比如在家里网购一条床单，但是不知道床的尺寸，家里又没有尺子。这时，打开 iPhone 里的测距仪这款 App，就可以量出床的尺寸，会不会觉得有点酷。

(测距仪 App)

微信在引领潮流方面也有一些建树，比如极大的普及了二维码和扫一扫。小程序作为一种体验接近原生 App、同时又不用下载的产品，也正在引领新一轮的潮流。

还有一个比较酷的功能，就是以图搜图。笔者最早用过百度和谷歌的相关功能，主要是在电脑上搜索相似的图片，使用频率极低。

假设一个场景，比如在路上看到一个陌生人的外套很好看，但又不好意思上前问，就可以拿起手机，利用淘宝的拍立淘功能，拍张照就能马上看到相同或相似的商品。

如果淘宝上没有搜到类似商品，还可以用微信的扫一扫识物。和拍立淘相比，区别之处有两点。第一，不用拍，直接能识别，不过通常得等 1-3 秒；第二，识物结果里面，除了商品，可能还会有百科词条和资讯。

02

交互设计：如何做到惊喜？

个人觉得，有 4 个要点：既要有好奇心，又要有卓越心；既要天马行空，又要保持自然。

听起来可能有点乱，且听笔者一一道来。

1 保持好奇心

笔者观察身边读小学的小孩，发现，当大人聊天时，特别是谈正事时，小孩特别喜欢坐在旁边听，而且听的很认真。小孩有时也会说两句，或是问问题，或是发表自己的看法。

看得出来，小孩对成年人的世界，怀有极大的好奇心。实际上，不止于成年人的世界，小孩对周遭世界都有比较强烈的好奇心。

整体而言，成年人对周遭世界的好奇心，远不如小孩。我们互联网从业者也不例外。

好奇心和交互设计，有什么关系？

交互设计，某种程度上，也是一种创作。好的创作，一定来自生活。这就需要我们去观察生活。

观察生活，非常重要的一点，就是好奇心，对周遭人、事、物要有足够的好奇心。

比如上文提到的例子，在 iPhone 上删除应用前，应用图标会抖。这种抖是一种趣味隐喻，既可以理解成吓的发抖，也可以理解成摇头求生。如果对生活没有足够的好奇心，是很难留意到这种生活细节，并把它们作为一种隐喻运用到交互设计中的。

以上是关于好奇心，还有一种特质，也是在小孩身上表现突出，同时也和本文主题有关，那就是：童趣。

还是上文的例子，在 B 站 App 上输入登录密码时，动画人物会捂眼睛。这个设计，可能不会打动所有用户，但至少一部分用户会觉得比较有趣。如果我们内心没有一点童趣，可能也会觉得，这个设计，没啥意思。

玩是人的天性。对于比较好玩的交互设计，大部分人是比较容易产生共鸣的。实际上，据笔者观察，我们大部分从业者是有童趣的。我们比较缺的，是好奇心。

那么，怎样判断自己是否拥有足够的好奇心，其标志是什么？

个人观点，有两个标志。第一，是对与个人利益无关的生活小事的关注，远多于对个人利益本身的关注。第二，观察和思考，远多于评价和自大；追本和溯源，远多于偏见和傲慢。

为什么会提到个人利益？

因为，通常而言，个人利益，尤其是短期利益(比如少花时间设计和修改原型)，往往会和用户体验存在一个此消彼长的关系。

如果过于关注个人利益，不仅很难照顾到用户体验，甚至会伤害用户体验。至于给用户带来惊喜，就更无从谈起了。

回到现实当中。在时代洪流面前，好奇心的两个标志，显得很难，该如何实现？

关键在于找到背后的源动力。这个源动力，在笔者看来，有两点，分别是：求知若渴、淡泊宁静。

求知若渴，可以源源不断的驱动我们去观察、去思考万事万物的规律和联系。

淡泊宁静，正如诸葛亮在《诫子书》中所说，“非淡泊无以明志，非宁静无以致远”。人的心力和精力终归是有限的，如果我们沉迷名利、物欲、享乐，就难有兴趣和精力去琢磨万事万物了。

所以，只要找回自己童年的那种求知若渴，同时修身养性到淡泊宁静，这份好奇心，就会回来。

2 巧妙融合

某种程度上，很多带给我们惊喜的交互设计，都是一种巧妙融合。

笔者把这种巧妙融合，初步分成了三类，分别是：简单融合、直接融合、委婉融合。

简单融合，最常见的就是隐藏功能。把一个较为简单的操作动作，比如长按、双击、下拉、左滑等，和一个合适的功能，融合在一起。用电脑时我们常说的快捷键，也属于这一类。

通常而言，操作对应什么功能，讲究的是合适，并无固定章法束缚。比如在微信朋友圈，发表文字的功能可以靠长按（相机图标）唤起，设置权限的功能也可以靠长按（好友头像）唤起。所以，简单融合这块，可供我们发挥的空间很大。

另外，简单融合最常见的形式——隐藏功能，既实现了界面的简洁，又带来了一定惊喜。

简单融合，既简单，又实用。建议大家充分开发这一块。

直接融合，是指将生活中的趣味性，直接搬到软件中，搬到交互设计中。比如微信聊天中的扔骰子、石头剪刀布，以及漂流瓶、抽奖等。

这一类融合，有点像商场里的电玩城，虽然我们不会经常去玩，但确实比较好玩。

委婉融合，是指用明喻或隐喻的手法，将生活中微不足道的一些细节，移植到交互设计中。

这种移植，有时是直白的。比如 Mac 上打开应用时，其图标会在 dock 栏里有规律的弹跳，这会让我们联想到皮球的弹跳。

这种移植，有时是隐晦的。比如 iPhone 上删除应用前，其图标会抖。这种抖，是害怕还是求饶，任凭我们想象。

这种移植，有时是无声的。比如在朋友圈，要想呼出隐藏的设置权限功能，只能长按头像，长按名字则不行。这个设计，不乏想象空间。如果不尝试长按名字，则不会发现这个细节。

委婉融合，有时会带一些趣味性。更为重要的是，它能够引发我们的思考和想象，所以是一种很出彩的融合。这种融合，也会赋予交互设计，一种禅的味道。

整体而言，笔者非常推荐委婉融合。

3 追求卓越

如果目标是小惊喜，则保持好奇心、并做到巧妙融合，基本足矣。

如果目标是大惊喜，则需要雄心壮志，需要舍我其谁，需要追求卓越。

日常工作中，可能会有这样的对话。“这个动效/功能，实现不了”。

大惊喜里的几个例子，比如初代 iPhone 的触控体验，iPhone 里的测距仪，微信的扫一扫识物。这种设计，意味着要修一条最好的长城，背后往往有很多技术难题要攻克，有很多脏活累活要做。

如果团队文化就是做出最优秀的交互设计，那么，“实现不了”这句话，估计就听不到了。取而代之的，可能是：“还在研究中”，“下个大版本能上”。

4 自然而然

提到惊喜，还有一款值得研究和学习的产品，那就是锤子手机的 Smartisan OS。

个人观点，在小惊喜方面，Smartisan OS 颇有建树。在大惊喜方面，Smartisan OS 也进行了一些值得学习的探索。

先说小惊喜，比如华丽而细腻的桌面翻页动画，比如四指横划桌面可以切换桌面背景。还有一些贴心的小功能，比如静音可以设置时间，比如方便的长截屏。

(静音可设置时间)

(长截屏)

再说大惊喜。2016 年 10 月发布的一步和大爆炸，是比较大比较系统的功能，在当时也很新。锤子公司也一直有宣传这两个功能。所以相对而言，这两个功能是 Smartisan OS 的大惊喜。

笔者的备用机是锤子手机，身边也有朋友在用锤子手机。以一步为例，这个功能，笔者体验过很多次。但平常很少用，身边朋友的情况也类似。

(一步)

根据使用情况和主观感受，个人觉得，一步这个大惊喜，还存在进步空间，主要有两个方面。

第一，宏观层面。一步作为新生事物，好比一颗新种子。种子破土而出时，是一颗嫩芽，而不是一棵大树。新生的一步功能繁多，犹如一棵破土而出的大树，一方面有违自然规律，另一面因为功能繁多，很多用户无法一下子看懂，看不懂可能就不想用了。

第二，微观层面。一步这棵新大树，结了很多不同的果子，比如拖拽图片到其他应用、切换后台应用、展示最近图片/文件等。这些果子，是用户真正需要的吗？这个是要存疑的。

比如拖拽图片到朋友圈就能发朋友圈这个设计。通常而言，我们发到朋友圈的图片都是精挑细选的，会占用一定量的时间，比如旅游或聚会结束后发的照片。一步解决的是效率问题。发朋友圈的时候，少点几下这种效率问题，优先级是比较靠后的，我们没那么在乎。

还有拖拽图片/文件这个交互动作，大家通常在电脑上用的比较多，在手机上是没有这个习惯的，实际上应用场景也少。在手机上，大家一般只习惯拖拽应用图标。

还有切换后台应用这块，大家第一个想到的，一定是系统自带的，已经用惯了。而且唤起速度比一步快，点击面积也比一步大。

总的来说，微观层面上，比较缺让大家能马上想到一步的功能点。

最后，总结一下。对于领先时代、引领潮流的交互设计，需要做到自然。

具体而言，就是，大惊喜是一种系统性的大功能，好比一棵大树。这棵大树，最好有一个从种子到果子的生长过程，这样最自然，生命力也会最旺盛。

因为，从破土而出的嫩芽阶段，就可以通过用户反馈和数据来检验，这种嫩芽，是不是真的对用户有价值。如果价值不大或没有价值，还可以再调整。如果长成大树结满果子，再去调整，就很难了。

结语

交互设计小细节，如果有一定的趣味性或人文属性，则是小惊喜。

系统性工程的交互设计，如果最初感觉很酷，而且能引领潮流、代表未来，则是大惊喜。

始终保持孩童身上那种非功利的好奇心，用心观察并思考生活中的小事；

将生活小事和交互设计巧妙融合起来；

以上两点，可以帮我们做出小惊喜类的交互设计。

追求卓越，独立思考，做最酷最好的交互设计；

酷是结果也好，是目标也好，都不是最重要的。最重要的是，避免刻意和心切。酝酿大惊喜，犹如培养一个新生的孩子，需要投入极大耐心和精力，需要让孩子自然成长。没有家长会教半岁的孩子唱歌、把 3 岁的孩子送到高中念书。

再加上以上两点，可以帮我们做出大惊喜类的交互设计。

最后，用爱因斯坦的一句话来共勉。

想象力比知识更重要。