最近在看黎萬強(qiáng)的《參與感》，有個小段來描述如何他在招聘中是依靠什么來找的合適的設(shè)計蚓庭，其中有一項(xiàng)按他的話叫做「深度閱讀的習(xí)慣」來判斷設(shè)計師的境界娇跟。境界靠深度閱讀來判斷不敢茍同僻爽，但舉證的例子卻不能贊同更多春弥。
很多設(shè)計師僅僅喜歡網(wǎng)上看資料呛哟、找資料，但是碎片化的圖形匿沛、元素和某個作品本身扫责，只能提供一些氣質(zhì)和靈感，沒法基于系統(tǒng)性的知識俺祠。 ??? ? ? ? ? ? ? ? ? ? ? ??
點(diǎn)贊，為什么借帘？因?yàn)橛泄缠Q唄蜘渣！看了很多資料依然做不好設(shè)計的大有人在，想一想為什么這個設(shè)計中他使用的是側(cè)滑菜單（Left Nav）而不是標(biāo)簽欄（Tab Bar）肺然？為什么這個banner的主標(biāo)題他用的是藍(lán)色而不是紅色呢蔫缸？
看的多想的少，做的時候依然費(fèi)勁际起，應(yīng)該算作是通病拾碌，得治！這次廢話這么多完全是因?yàn)榭吹酱笊竦倪@段話產(chǎn)生的反省街望。
不嘮叨了校翔，這次周結(jié)的主題是交互小動畫。redesign視覺稿是靠工作之余的時間進(jìn)行設(shè)計灾前，還好這周事情貌似還不多防症，應(yīng)該可以火力猛攻的做完。動效呢，我是覺得是錦上添花的事情蔫敲，當(dāng)然在上篇文章我作為移動界面風(fēng)格設(shè)計趨勢的一部分饲嗽，在設(shè)計中當(dāng)然一定一定不能少了，而且也是我的軟肋澳魏佟Ｃ蚕骸（軟肋實(shí)在太多了，╮(╯▽╰)╭）裙犹，所以這周除了做視覺稿尽狠，還會收集整理一下常見場景下的交互動畫，讓我們?yōu)橐曈X設(shè)計來添磚加瓦吧伯诬！
關(guān)鍵字：層級晚唇、空間、軟件邏輯盗似、認(rèn)知哩陕、隱喻、迪斯尼動畫12原則
按照一個不正宗的吃貨標(biāo)準(zhǔn)赫舒，如果UI設(shè)計是一份鋼嘣脆來又美味的炸雞悍及，那動效設(shè)計就是香醇可口的一杯啤酒。單只吃炸雞當(dāng)然行接癌，但是大家不都會常說一句“炸雞與啤酒會更配哦”心赶！嗯，就是這一樣的道理缺猛，UI設(shè)計作為一個基本的靜態(tài)頁面缨叫，由很多個頁面組成了一個合乎邏輯的一個app，在做靜態(tài)頁面的時候考慮更多會是邏輯層面的調(diào)整關(guān)系荔燎，而這之間該以一個怎樣的方式來切換考慮的是少之又少耻姥，有主張說，動效設(shè)計是錦上添花的事情有咨，應(yīng)該是在做完GUI工作后再添入進(jìn)去動效琐簇，為app提升趣味性而博得好感。也有說座享，動效設(shè)計應(yīng)該貫穿到視覺設(shè)計中的去婉商，不說落實(shí)做但要考慮到動效特性來布局視覺設(shè)計的元素與排版。我覺得2種說法都好有道理渣叛，哎丈秩，就是這么沒有立場的人，沒轍淳衙。不過癣籽，列出觀點(diǎn)的目的更多是為了讓自己去思考更適合自己的方式挽唉，不管怎樣，我們還是需要了解一下動效設(shè)計的始末筷狼，不是嗎瓶籽？
目的
產(chǎn)品設(shè)計師經(jīng)常說的一個詞叫"情感化設(shè)計"，我們設(shè)計了漂亮的界面埂材，整理了清晰的邏輯塑顺，除了這兩樣之外，我們還需要動效來把這些漂亮的設(shè)計銜接起來俏险，界面严拒、交互、動效構(gòu)成了情感化設(shè)計的三大載體竖独。
UI動效設(shè)計裤唠，最主要的目的就是為了幫助用戶更好的了解軟件各個頁面之間的邏輯、層級空間關(guān)系莹痢。讓動起來的視覺效果种蘸，在短時間內(nèi)告訴用戶我應(yīng)該怎么去操作。例如...又來到了百用不嫌其煩的iOS刪除app的效果栗子時間竞膳。刪除抖動和移動跟隨動效航瞭，馬上就能讓熊孩子擁有分分鐘刪除你app的能力對不對！好的動效設(shè)計就是這樣坦辟，具有環(huán)境意義的物理動效刊侯，在引導(dǎo)用戶進(jìn)行操作這一項(xiàng)能力上還是優(yōu)于靜態(tài)頁面的。
用處
按照目前所收集的一些資料來說锉走，動效設(shè)計的用處大概有幾下幾點(diǎn)
1.表現(xiàn)層級關(guān)系
在上周視覺設(shè)計風(fēng)格定義的周結(jié)中滨彻，提到了縱深（分層界面）這個新詞。溫習(xí)一下：利用Z軸也就是三維軸的分層幫助用戶理解不同條目之間的主次關(guān)系挪蹭，將用戶的注意力集中到用戶需要關(guān)注的地方去亭饵。而在動效設(shè)計中，也出現(xiàn)了關(guān)于層級關(guān)系的這個詞嚣潜，淺顯理解就應(yīng)該是靜態(tài)視覺縱深設(shè)計的2.0加強(qiáng)版冬骚。所達(dá)成的目的都是一樣椅贱，為了表現(xiàn)層與層的關(guān)系懂算，讓用戶明白我從哪里來，現(xiàn)在在哪里庇麦，可以到哪里去三個最基本的點(diǎn)计技。下面這個栗子找的不能更適合了，體會一下這種層級關(guān)系山橄，不是簡單的元素之間的轉(zhuǎn)場垮媒，而是頁面層級之間的打開收起。還有漢堡菜單中的動效設(shè)計也算作比較典型的表現(xiàn)層級關(guān)系的案例
2.操作時提供反饋、引導(dǎo)用戶操作睡雇、減輕認(rèn)知的負(fù)擔(dān)
及時反饋也就是的高響應(yīng)度的表現(xiàn)萌衬，用戶在進(jìn)行任何一個行為的時候都應(yīng)該得到相應(yīng)的回復(fù)，保持用戶對因果關(guān)系的感知就是保持對用戶所有操作中享有的知情權(quán)的尊重它抱。比如用戶更新軟件后的進(jìn)度顯示秕豫、喜歡一首歌后的收藏動作、刪除一條表單的動態(tài)效果...類似于這樣很多動效所提供的反饋能夠幫助用戶更好理解當(dāng)前操作所代表的意義观蓄，減輕了很多認(rèn)知的負(fù)擔(dān)
3.UI元素之間的相互轉(zhuǎn)換
轉(zhuǎn)場的流暢度和趣味性增加了界面的活力混移，生命力呢也頓時滿滿的。UI元素之間的相互轉(zhuǎn)換就是將物理世界中的運(yùn)動融入到UI動效的轉(zhuǎn)換中的做法侮穿，縮短了用戶和軟件之間的距離歌径，讓我們一起蕩起雙槳劃到理想的彼岸...
4.吸引用戶的注意力亲茅，提供超乎預(yù)期的驚喜
超乎預(yù)期的驚喜在現(xiàn)實(shí)生活中很好理解阿回铛，我上網(wǎng)買了一個蘋果，居然到手的是一個蘋果手機(jī)芯急！出乎意料的驚喜會開心到合不攏嘴勺届。那在UI設(shè)計中，超乎預(yù)期不能像上面那個栗子那么癲狂娶耍，應(yīng)該是在可感知范圍內(nèi)的驚喜免姿。就好像輸入密碼這個在現(xiàn)實(shí)中很隱私的情況，在動效設(shè)計中居然有人可以設(shè)計出賣萌蒙眼的小動物來表現(xiàn)這樣的隱私性榕酒，想想也是腦洞大開胚膊。
方法
找方法上知乎，果然想鹰，大神說紊婉，要會用動效設(shè)計的方法就得先理解迪斯尼動畫的十二原則法（12 basic principles of animation）。人工搬運(yùn)來以后慢慢體會辑舷。
1.擠壓和伸展（Squash & Stretch）喻犁。想象貓和老鼠里面各種人物落地時候的樣子。
2何缓，預(yù)備動作（Anticipation）肢础。從一個動作到下一個動作之間，角色往往會做一些預(yù)備的動作碌廓。比如人在起跳前先要微微下蹲传轰，要向前出拳時先要往后拉伸等等。
3谷婆，跟隨動作（Follow Through）慨蛙。因?yàn)閼T性辽聊，自然運(yùn)動一般都不會驟然停止。
4期贫，漸入漸出跟匆。也是類似前一點(diǎn)，自然的運(yùn)動都是有過渡的通砍。
5贾铝，弧線。生物移動的軌跡大多是帶弧線的埠帕，而很少有直線的機(jī)械軌跡垢揩。
6，附屬運(yùn)動（Secondary Action）敛瓷。比如跑步時候頭發(fā)和衣服也會跟著軀干擺動叁巨，而這些細(xì)節(jié)的缺失會讓主體的運(yùn)動顯得僵硬。
7呐籽，時機(jī)控制（Timing）所有跟時間相關(guān)的媒體锋勺，Timing都是非常非常重要的。動作的先后順序狡蝶，持續(xù)長短庶橱，差別零點(diǎn)幾秒就會造成非常大的感官差異。
總結(jié)
可以看出贪惹，動效設(shè)計的姿態(tài)是依賴于物理現(xiàn)實(shí)生活中的動作苏章。恰當(dāng)?shù)膭有гO(shè)計能夠?yàn)檐浖氖褂锰嵘鋹偢校l(fā)出“哇喔”的感嘆奏瞬，反言之枫绅，不合適的動效，打比方場景不適宜硼端、過度動效所帶來的結(jié)果并淋，我猜可能還不如單純的靜態(tài)頁面了。軟件的使用是動效設(shè)計的基礎(chǔ)珍昨，雖然單這個門檻就不低了县耽，但是我深信腦中的想法決定了你的動效之路能走多遠(yuǎn)。站在前輩的肩膀上镣典，多看多想多做兔毙。所以，加油吧骆撇，少年瞒御！我們還有很長的一段路要走.
咿父叙，說好的redesign的效果圖先不貼了神郊。在家和下雨是我碼字效率最大的敵人肴裙，這次選的主題寫的好費(fèi)腦細(xì)胞，平時不積累的結(jié)果就是關(guān)鍵時刻得勁憋涌乳。
