第93期：用时约3分985字

【设计思路】MIUI12设计原理阐述

问题正在变得细腻。点击，划动，按压，松开……每天我们会无数次操作手机，每一次操作的反馈都由系统动画衔接。就像电影里的镜头，如果衔接得不自然，人们就会出戏，觉得哪

里不对劲。流畅且一致的系统动画，是用户体验的源头。

一套全新的动画技术，命名为“光锥动效架构”。把我们以往的动画逻辑推翻，再回炉重造，它是一场“革命”。光锥动效架构中最重要的概念有两个，一是渲染引擎，二是物理引擎。

渲染引擎：拥有还原设计的能力而光锥架构渲染出来的圆角，则是曲率连续的完美圆角，严丝合缝地贴合硬件，让破坏美感的、逼疯强迫症的锯齿全部消失它提出的理念是，让手机的交互和物理世界的法则一致，做到绝对的真实和自由，我们不再提前预设某种单一固定的动画效果，而是遵循低速物理世界的实感。

物理引擎：将牛顿力学法则引入物理引擎算法中。你每一次操作所得到的效果，都是根据你的实时动作计算而成，并随时可打断。我们将光锥动效架构形成统一的规范，并实现了技术落地，让系统的每个部分都能够智能化自动配置这些动效逻辑。光锥架构不仅让用户体验更舒适，还极大程度上打通了交互设计师与工程师的沟通壁垒，就像是让建造“巴别塔”的人们重新获得了一套共同语言，动效制作的效率前所未有地提升了。

01人类世界是一个三维空间，长久的习惯让我们认为三维体验更接近真实世界，也更容易被感知。这次我们在系统的二维动画设计中，引入了“三维空间”的概念。

02全面屏手势中那个回到桌面的手势，肉眼看上去像是一个缩放的效果，实际上我们把它模拟成了一条物理抛物线，这条线让返回的动作更加优雅、流畅，并可随时打断

03系统天气，依然模拟了自然世界的空间变化城市之间的天气切换，不是二维卡片式的，而是具有了三维空间压缩感，有高速瞬移的效果

04在系统里埋彩蛋是我们的传统节目了。用户发现它们，在微博或论坛上晒出，我们开心回应。它处于实用之外，是一种情感联结，美妙，无可替代。

05我们应用了全新的动态分层技术，1个图标分解为5层，每一层都会因为你的触控而产生不同的响应手机的存储空间不再是死板的数字，它成为你可以自己管理的小水库。用可流动的水量代表储存量，晃动手机，水位线也晃动起来了。

人在现实世界的行为，得到了符合预期的反馈，会产生习惯性的安心感，这也是我们想在操作体验上提供的感觉。不刻意创造新的轨迹，而是还原已有的现实法则，还原人类的共情体验，是MIUI12系统动画设计的核心理念。

Powered by Froala Editor