它動了！它動了！

一個小球,只要設定好它在不同時間所處的位置 就完成了一個基礎的位移動效,這很簡單 而真正困難的是如何讓它變得像這樣絲滑流暢 這就要提到動畫創作十二法則 它源自於迪士尼設計師數十年的動畫製作經驗 且對其他各種動態設計也都適用 比如長安視頻下方的大拇指出現了一系列動畫 就符合其中的佈局原則 目的是突出重要操作引導視線 順帶反饋信息,大家不相信的話不妨試一下 再比如我手中搭載了小米澎湃OS的這臺小米14 Pro 在退出APP時,圖標歸位後會有一個慣性效果 這符合跟隨動作原則,能帶來更真實的感受 對比之前的MIUI14,只是普通的減速歸位 其實一點點改變就有很大的差別 而吸引力原則告訴我們,圖形本身與動效一樣重要 澎湃OS的系統圖標也進行了全新的升級 相較於MIUI14,可以觀察到色彩變得更加細膩鮮活了 而且整個外形好像也更加的光滑流暢 放大後我們會發現,新版本使用了全新的平滑圓角 與之前的普通圓角對比,可以明顯感覺到線條的優化 其實這次澎湃OS的全局,都統一採用了新的平滑圓角容器 比如最常見的控制中心、通知中心、-1屏 還有天氣的信息模塊、日曆的選中狀態 以及鬧鐘裡的卡片與通知等等 消息提醒與彈窗也全都進行了修改 很明顯這種圓角的設計,繼承自價值200萬 且由圓圓仔親自設計的小米新LOGO 還記得在當時大師就提出了Alive的設計概念 現在看來,這種形狀確實更具生命感與靈活性 靜態圖形的設計升級,也讓對應的圖標動畫變得更加生動細膩 尤其是相冊和相機,光影與立體感做得非常精緻 雖然只有關閉APP時能夠看到,但根據次要動作原則 它們能夠支持主要動作,使其更加鮮活、自然 在控制中心調整亮度與音量時,也會有細膩的次要動畫 然而在這裡我還發現了更細的 眾所周知,在手機上點按某個模塊時 會有縮放反饋,這是基礎操作 而當我在控制中心長按卡片時發現 它竟然會向你手指觸及的方向傾斜 右上角、左下角或者右下角 長按Wi-Fi彈出的新設置窗口 也會從相應的傾斜變化中展開 起碼太細了,打在公屏上 這讓我聯想到立體造型原則 它通過對現實世界的模擬 讓用戶更好的理解交互動作 感官上也會更加和諧、舒適 澎湃OS新增的全局毛玻璃效果 以及精緻的浮窗投影 都對此起到了很大幫助 值得一提的還有預備動作原則 就像出拳之前要先縮手 澎湃OS在打開APP或者點擊展開文件夾時 它會先有一個被按下的縮小動畫,再放大彈開 我們對比iPhone上的這一操作 觸擊後只有簡單的明暗變化,然後直接彈出 你覺得哪種效果更好一點呢? 還有一些較為特殊的,例如誇張性原則 當應用在人機交互動畫上時 我們反而要注意它的邏輯性 澎湃OS下拉控制中心 狀態欄會跟隨移動到新的位置 下拉通知中心,時間也會隨之移動 這讓不同頁面間的邏輯關係更一目瞭然 現在回看MIUI14,直接在上層顯現的方式 確實有點粗糙了 西屏與亮屏切換時,時間也會連貫地移動 而且澎湃OS新推出的藝術鎖屏 全都支持這樣絲滑的變換 這其中有很多極具設計感的時間排版風格 比如塗鴉風格、黑白大字風格 以及這種非常獨特的菱形樣式 它同時也考慮到了人類從左上到右下的閱讀習慣 所以並不會對識別性有很大的影響 焦點通知的邏輯同樣進行了優化 例如錄音時上滑回到桌面 介面會直接縮小飛到左上角 變化成實時的通知氣泡 這個動畫讓視覺引導變得更加流暢、合理 而在MIUI14上 APP的關閉和左上角氣泡的出現 就缺乏必要的關聯 最後我們再看看澎湃OS應用小窗的全新動效和交互方式 這大概是我用過的最高效的分屏操作之一了 拖動角落的圓弧 能夠準確地調整窗口大小 圓弧的跟隨動作也非常細節 在上方可以快速選擇分屏的模式 如果選擇了上下分屏 介面會自動避讓 等待我們打開另一個軟件 不同模式之間的切換也很流暢 當我們將浮窗拉到最小時 它的周圍就會出現邊框 這可以確保上下層級的區分 與此同時 由於介面太小導致難以辨識和操作的按鈕 也會隨之消失 一個字 周到 當然得益於全新的基礎架構 澎湃OS中最基礎的軟件開關 打斷 滑動效果 都有了非常明顯的進步 強烈推薦同學們去體驗一下 我也非常期待手上的小米Max Fold3折疊屏 能早點升級到澎湃OS系統 它應該能夠補足小米衝擊高端產品的最後一塊短板 手指觸擊屏幕引發的動效 就像水滴濺起的漣漪 正是它們的匯聚累積 才最終形成了如此澎湃的使用體驗 感謝大家看到這裡 更多實機內容歡迎關注設計師深海 不要忘記一鍵三連 我們下期再見