赞不绝口的MIUI10，背后的设计故事揭秘

@MIUI ： MIUI 10 的测反馈中，设计上的耳目一是众口称的分。日，MIUI设计总监 Gary 和几位核心设计师一起接受了我们的采访，开布公地介绍了 MIUI10 设计背后的故事。

这次的采访我们聊得很细，细到某一交互的设思的变迁，以及什么终以那种方式呈 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之间非得出什么的区别，相比这，我们关的问题：什么用户真需的设。

欢迎关注MIUI微信公众号：「MIUIROM」