最近在看黎萬強的《參與感》，有個小段來描述如何他在招聘中是依靠什么來找的合適的設計，其中有一項按他的話叫做「深度閱讀的習慣」來判斷設計師的境界。境界靠深度閱讀來判斷不敢茍同，但舉證的例子卻不能贊同更多。
很多設計師僅僅喜歡網上看資料、找資料，但是碎片化的圖形、元素和某個作品本身，只能提供一些氣質和靈感，沒法基于系統性的知識。 ??? ? ? ? ? ? ? ? ? ? ? ??
點贊，為什么？因為有共鳴唄！看了很多資料依然做不好設計的大有人在，想一想為什么這個設計中他使用的是側滑菜單（Left Nav）而不是標簽欄（Tab Bar）？為什么這個banner的主標題他用的是藍色而不是紅色呢？
看的多想的少，做的時候依然費勁，應該算作是通病，得治！這次廢話這么多完全是因為看到大神的這段話產生的反省。
不嘮叨了，這次周結的主題是交互小動畫。redesign視覺稿是靠工作之余的時間進行設計，還好這周事情貌似還不多，應該可以火力猛攻的做完。動效呢，我是覺得是錦上添花的事情，當然在上篇文章我作為移動界面風格設計趨勢的一部分，在設計中當然一定一定不能少了，而且也是我的軟肋啊！（軟肋實在太多了，╮(╯▽╰)╭），所以這周除了做視覺稿，還會收集整理一下常見場景下的交互動畫，讓我們為視覺設計來添磚加瓦吧！
關鍵字：層級、空間、軟件邏輯、認知、隱喻、迪斯尼動畫12原則
按照一個不正宗的吃貨標準，如果UI設計是一份鋼嘣脆來又美味的炸雞，那動效設計就是香醇可口的一杯啤酒。單只吃炸雞當然行，但是大家不都會常說一句“炸雞與啤酒會更配哦”！嗯，就是這一樣的道理，UI設計作為一個基本的靜態頁面，由很多個頁面組成了一個合乎邏輯的一個app，在做靜態頁面的時候考慮更多會是邏輯層面的調整關系，而這之間該以一個怎樣的方式來切換考慮的是少之又少，有主張說，動效設計是錦上添花的事情，應該是在做完GUI工作后再添入進去動效，為app提升趣味性而博得好感。也有說，動效設計應該貫穿到視覺設計中的去，不說落實做但要考慮到動效特性來布局視覺設計的元素與排版。我覺得2種說法都好有道理，哎，就是這么沒有立場的人，沒轍。不過，列出觀點的目的更多是為了讓自己去思考更適合自己的方式，不管怎樣，我們還是需要了解一下動效設計的始末，不是嗎？
目的
產品設計師經常說的一個詞叫"情感化設計"，我們設計了漂亮的界面，整理了清晰的邏輯，除了這兩樣之外，我們還需要動效來把這些漂亮的設計銜接起來，界面、交互、動效構成了情感化設計的三大載體。
UI動效設計，最主要的目的就是為了幫助用戶更好的了解軟件各個頁面之間的邏輯、層級空間關系。讓動起來的視覺效果，在短時間內告訴用戶我應該怎么去操作。例如...又來到了百用不嫌其煩的iOS刪除app的效果栗子時間。刪除抖動和移動跟隨動效，馬上就能讓熊孩子擁有分分鐘刪除你app的能力對不對！好的動效設計就是這樣，具有環境意義的物理動效，在引導用戶進行操作這一項能力上還是優于靜態頁面的。
用處
按照目前所收集的一些資料來說，動效設計的用處大概有幾下幾點
1.表現層級關系
在上周視覺設計風格定義的周結中，提到了縱深（分層界面）這個新詞。溫習一下：利用Z軸也就是三維軸的分層幫助用戶理解不同條目之間的主次關系，將用戶的注意力集中到用戶需要關注的地方去。而在動效設計中，也出現了關于層級關系的這個詞，淺顯理解就應該是靜態視覺縱深設計的2.0加強版。所達成的目的都是一樣，為了表現層與層的關系，讓用戶明白我從哪里來，現在在哪里，可以到哪里去三個最基本的點。下面這個栗子找的不能更適合了，體會一下這種層級關系，不是簡單的元素之間的轉場，而是頁面層級之間的打開收起。還有漢堡菜單中的動效設計也算作比較典型的表現層級關系的案例
2.操作時提供反饋、引導用戶操作、減輕認知的負擔
及時反饋也就是的高響應度的表現，用戶在進行任何一個行為的時候都應該得到相應的回復，保持用戶對因果關系的感知就是保持對用戶所有操作中享有的知情權的尊重。比如用戶更新軟件后的進度顯示、喜歡一首歌后的收藏動作、刪除一條表單的動態效果...類似于這樣很多動效所提供的反饋能夠幫助用戶更好理解當前操作所代表的意義，減輕了很多認知的負擔
3.UI元素之間的相互轉換
轉場的流暢度和趣味性增加了界面的活力，生命力呢也頓時滿滿的。UI元素之間的相互轉換就是將物理世界中的運動融入到UI動效的轉換中的做法，縮短了用戶和軟件之間的距離，讓我們一起蕩起雙槳劃到理想的彼岸...
4.吸引用戶的注意力，提供超乎預期的驚喜
超乎預期的驚喜在現實生活中很好理解阿，我上網買了一個蘋果，居然到手的是一個蘋果手機！出乎意料的驚喜會開心到合不攏嘴。那在UI設計中，超乎預期不能像上面那個栗子那么癲狂，應該是在可感知范圍內的驚喜。就好像輸入密碼這個在現實中很隱私的情況，在動效設計中居然有人可以設計出賣萌蒙眼的小動物來表現這樣的隱私性，想想也是腦洞大開。
方法
找方法上知乎，果然，大神說，要會用動效設計的方法就得先理解迪斯尼動畫的十二原則法（12 basic principles of animation）。人工搬運來以后慢慢體會。
1.擠壓和伸展（Squash & Stretch）。想象貓和老鼠里面各種人物落地時候的樣子。
2，預備動作（Anticipation）。從一個動作到下一個動作之間，角色往往會做一些預備的動作。比如人在起跳前先要微微下蹲，要向前出拳時先要往后拉伸等等。
3，跟隨動作（Follow Through）。因為慣性，自然運動一般都不會驟然停止。
4，漸入漸出。也是類似前一點，自然的運動都是有過渡的。
5，弧線。生物移動的軌跡大多是帶弧線的，而很少有直線的機械軌跡。
6，附屬運動（Secondary Action）。比如跑步時候頭發和衣服也會跟著軀干擺動，而這些細節的缺失會讓主體的運動顯得僵硬。
7，時機控制（Timing）所有跟時間相關的媒體，Timing都是非常非常重要的。動作的先后順序，持續長短，差別零點幾秒就會造成非常大的感官差異。
總結
可以看出，動效設計的姿態是依賴于物理現實生活中的動作。恰當的動效設計能夠為軟件的使用提升愉悅感，發出“哇喔”的感嘆，反言之，不合適的動效，打比方場景不適宜、過度動效所帶來的結果，我猜可能還不如單純的靜態頁面了。軟件的使用是動效設計的基礎，雖然單這個門檻就不低了，但是我深信腦中的想法決定了你的動效之路能走多遠。站在前輩的肩膀上，多看多想多做。所以，加油吧，少年！我們還有很長的一段路要走.
咿，說好的redesign的效果圖先不貼了。在家和下雨是我碼字效率最大的敵人，這次選的主題寫的好費腦細胞，平時不積累的結果就是關鍵時刻得勁憋。
