編者按：今年iOS 7與Android L都將動效作為提升用戶體驗的利器，如果你還木有通讀整一篇設計指南，就先來了解一下阿里同學今天的分享吧，通過案例剖析，幫你了解動效與設計原則的關系，來學習咯。

想讀整個文檔的同學，你要的東西在這里！《騰訊力作！超贊的iOS 8人機界面指南(1)：UI設計基礎》

一個新的設計風格的確立一定會提出他特有的設計原則。而如今設計原則越來越多的關注到了動效的定義。甚至在Android L的Material Design中直接將動效寫入的設計原則中：Motion provides meaning （動畫表達含義）。這里我們就通過一些業(yè)界成熟案例來簡單說明下動效是怎么在設計原則的基礎上定義出來的。

首先，我們看下iOS 7上的案例。眾所周知，iOS 7相對于6設計更加的扁平，去掉了很多質(zhì)感，保留一些微弱的質(zhì)感，避免對內(nèi)容的干擾。這一點遵循了iOS 7最新的設計理念，內(nèi)容優(yōu)先（Defer to Content），透氣（Provide Clarity）?；趦?nèi)容優(yōu)先和透氣的原則，對之前繁復的UI進行減負，剔除多余元素，有主次的保留，并統(tǒng)一界面里的質(zhì)感。

iOS的6到7，外界都評價為設計由擬物到扁平，其實并不準確。iOS7還在延續(xù)擬物的設計，從界面到動效上有主次的保留了擬物的元素。

時間設置控件可以很清楚的說明這個問題，新舊兩版都是模擬波輪這個物體。只是新版為了更加突出內(nèi)容，放棄了多余的質(zhì)感，內(nèi)容的呈現(xiàn)依然用波輪的方式表現(xiàn)。甚至在你波動波輪時會發(fā)現(xiàn)，已選狀態(tài)上依然保留了玻璃的特性，在邊緣會有一個折射效果。由此可以看出，iOS 7的簡潔還是保留了相當多的擬物細節(jié)的。

另一個細節(jié)是在開關控件的設計上，新版同樣放棄了原有的光澤的材質(zhì)，而使用了更加柔和的材質(zhì)，讓界面更加的主次分明。如果說之前的材質(zhì)是金屬或者硬塑料的話，那新的材質(zhì)更加柔和，類似純色的橡膠，更軟，有韌性，可延展。由于材質(zhì)發(fā)生了根本的變化，那么所顯現(xiàn)的動態(tài)效果也將是不同的。

以上這些都是基于內(nèi)容優(yōu)先和透氣來做的。iOS 7還有一個設計原則是：有層次的表達（Use Depth to Communicate）。在ui界面上表現(xiàn)為前后層次的區(qū)分，通過縱深感表達內(nèi)容之間的關系。

在動效方面，動畫轉(zhuǎn)場是對內(nèi)容層次關系最好的詮釋。通過模擬的縱深效果，讓用戶清晰的知道頁面之間的從屬關系。

雖然iOS6也有類似功能的動畫效果，通過抽屜打開的形式表現(xiàn)層級不關系。但很顯然，新版的效果與確定的設計原則更吻合。

參考： iOS Human Interface Guidelines

說完iOS，說說Android。材料設計（Material Design）是google發(fā)布的系統(tǒng)Android L里提出的設計觀點。其核心設計原則是，材質(zhì)的隱喻（Material is the metaphor）。

關于材質(zhì)的隱喻，簡單一點說就是將物理界中不同的材質(zhì)特性提煉，再按需要結合在一起使用的方法。單從視覺上看，材質(zhì)的隱喻更多落在卡片式設計上。但材質(zhì)的特性更多需要通過行為上的互動才能體現(xiàn)出來。通過對象給出不同的反饋，可以了解到它的材質(zhì)特性。這就需要通過動效的手法來體現(xiàn)。

這里我們舉三個點擊反饋的案例，來說明Android是怎么詮釋材質(zhì)的隱喻這一設計原則的。

這三個效果都是點擊觸發(fā)的，彼此之間有共同點，但又都不完全相同。我們可以將反饋動畫分解，能更好的說明問題。

1. 漣漪效果＋區(qū)塊變暗
2. 漣漪效果＋陰影變大
3. 漣漪效果＋內(nèi)容閃白

這時，我們可以發(fā)現(xiàn)，反饋動效都用到了漣漪效果，同時它又是以手指的觸碰位置確定起始位置的。結合起來，很容易就可以想到，這是引用了水的特質(zhì)：手指觸碰平靜水面，產(chǎn)生圈狀漣漪。

除了漣漪，我們再來分析下另外三個不同的動效：

1. 區(qū)塊變暗 > 內(nèi)容下沉效果 > 按鈕按下
2. 陰影變大 > 區(qū)塊浮動效果 > 被磁力或意念之類的抓起
3. 內(nèi)容閃白 > 閃光照射效果 > 拍照時的閃光燈

同樣都是點擊，為什么要賦予內(nèi)容不同的材質(zhì)特性呢？這我們就要看下使用場景了。

1. wifi的選擇菜單，點擊結束后即關閉了；
2. 卡片式的內(nèi)容區(qū)塊，選擇后應該會展開更多內(nèi)容；
3. 相冊照片，與拍照的閃光燈可以自然的聯(lián)想到一塊。

所以，結論就是，點擊手勢賦予內(nèi)容水的材質(zhì)；而根據(jù)不同場景又分別賦予了內(nèi)容按鈕、懸浮、閃光燈的材質(zhì)。這就很好的詮釋了材質(zhì)的隱喻這一概念，根據(jù)不同需要將不同的材質(zhì)特性賦予一個對象。

ok，關于動效與設計原則之間的關系，我們先說到這里，下次我們將會結合自己的案例詳細說下怎么基于設計原則打造適合自己產(chǎn)品的動效。

畢業(yè)季快來咯，趕緊趁最后關頭補充點干貨！

心血合集！你的工作就它承包了！
《畢業(yè)生求職指南！手把手幫你從零開始找到工作！》

給自己打氣！來看看90后的大學生活！
《這才是大學生活！90后設計師的成長記事錄》

自學時刻到，我們一起來禱告！
《超贊！設計師完全自學指南》

原文地址：mux.alimama

【優(yōu)設網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關于優(yōu)設網(wǎng)================
"優(yōu)設網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設計師學習平臺，專注分享網(wǎng)頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量86萬的人氣微博@優(yōu)秀網(wǎng)頁設計 ，歡迎關注獲取網(wǎng)頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網(wǎng)站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經(jīng)驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設計 微信號：【youshege】優(yōu)設哥的全拼
您也可以通過掃描下方二維碼快速添加：