2.1 全局考量

善于思考，永遠是設計師最核心的競爭力。

2.1.1 設計師和美工，僅一步之遙

“美工”和“設計師”這兩個稱呼在外行看來，更像是我們為了維護設計師行業那份難能可貴的尊嚴而強行區分開來的兩個詞語。在一般人眼里認為只要能做LOGO的就是美工，且大多數人不喜歡別人稱呼自己為“美工”，并覺得這涉及“個人尊嚴”的問題。

那問題來了，設計師和美工的區別到底在哪里？

如果非要來概括的話，我只能想到一個詞，那便是“創造力”。

這里所指的創造力，肯定不是單純理解上的動手能力，更多指的是用腦能力。無論你的軟件功底和技術能力有多么厲害，但設計這個東西，歸根到底還是需要想象力和創意的驅動才能完成。要知道，世界上大多頂尖的設計師，往往對于所謂的軟件一知半解，甚至一竅不通，他們依靠杰出的溝通能力和創造力把自己的想法傳達給“美工”，并通過“美工”的雙手來進行操作，最終實現自己腦海中的創意。但是到最后，大家記住的，依然是這個用“腦”的人，而不是那個“動手”的人。

當然，這里我們并非說軟件的駕馭能力不重要，畢竟對于設計師來說，軟件是讓你實現自身設計想法的工具。但如果是僅僅依賴工具完成設計，那工具僅僅是工具而已了。因此，希望大家不要過分地去強調自己的軟件使用能力，而忽視了設計師本身的創造力。我從來不太看好單純的所謂“炫技派”。舉個例子，你兩年前需要花很久時間才能完成的一個效果，可能在今天，隨便一個軟件就可以輕松完成。特別是對于動畫來說，相信很多同學都深有感觸吧。

坦白說，UI動效對于設計師的技能要求不是太高，一個動效方案是否有“靈魂”，關鍵看設計師賦予這個動畫的創造力有多少。如果你是一個不精通軟件，但是愿意動腦子去思考的人，別擔心，你早晚會“功成名就”的，因為軟件操作能力相比創造力來說，確實太容易了。可是如果你只知道鉆研軟件技術，而根本不關心創意和作品本身要傳達的內容的話，那么，你就是一個美工。

這里，我們以Mastercard（萬事達卡）的LOGO（見圖2-1）為例進行介紹。曾經，網絡驚爆其設計費用價值800萬元。但請你告訴我，這個東西如果單從技術角度來講，難在哪里？并且相信很多美工看到這個LOGO時必然也會拍著胸脯說：“就這？我也行！”，而設計師們則可能會陷入沉思。而這些設計師所思考的，不是為什么它會價值800萬元，而是背后的設計意義，以及這個LOGO所蘊藏的“靈魂”。

2.1.2 “先整體后局部”的思考程序

在素描學習初期，老師可能會告訴我們要堅持“先整體、后局部”的原則。而對于UI動效來說，其實道理是完全一樣的。沒有整體的全局思考，那么在設計中你可能會遇到很多的問題，諸如如何復用元素、如何規范定義、如何延續品牌的DNA以及使用的場景如何定義等。

其實留心觀察國內的App等互聯網產品，對于UI動效的設計并沒有一個完善的規范體系。盡管很多的設計公司或設計團隊都曾經嘗試希望能夠把動畫規范化處理，以便最終能夠將自身的產品融合進“視覺大規范”框架內。但是受限于系統平臺差異或者實現難度，做到完全統一，幾乎不太可能。所以目前我們能做的，除了定義與視覺規范相統一的動畫元素（這里主要指造型和色彩風格）以外，就是盡可能地把相類似的一些場景和動畫表現形式（軌跡、入畫和出畫順序、帶有標志性的動態方式等）進行關聯和歸納。

針對相類似的一些場景和動畫表現形式，這里舉一個最簡單的例子。在實際運用中，當頁面進入下一層級時，新頁面從右至左進入屏幕，當用戶單擊左上角返回時，頁面從左往右退回上一級頁面（效果詳見第4章中有關于Material Design動畫效果的知識點）。

那么依照上面的例子描述，如何看出這個動效是不是符合規范？很簡單，如果你的頁面出入順序弄反了，那么就是與規范相違背，就意味著不符合設計規范。

不過從全局角度來說，UI動效設計根本沒有統一性和復用性可言！要知道，設計規范存在的價值，就是要便捷高效地被他人理解并且快速正確地得到復用。這也就意味著在設計過程中，首先我們需要考慮到視覺規范和品牌DNA的統一性和延續性，然后在此基礎之上進行動畫的細節構思和創意。

2.1.3 美觀，不代表一定優質

在我看來，一個優秀的UI動畫效果應該同時具備以下幾個特質。

第一，具有較為統一的視覺引導性和品牌感。

第二，清晰高效地傳達信息。

第三，增強用戶在交互時對于直接操作的狀態感知。

第四，通過視覺動態化的方式向用戶呈現操作結果和反饋。

第五，綜合以上情況，審視設計效果的美觀性。

大約在2012年，我就曾想象過，假如把一些比較炫的動畫效果放在手機里面，那一定會大大地提升UI的視覺效果，可是事與愿違。每當我把做好的效果切圖和視頻輸出之后，看到開發部門的同事辛苦地實現出來，由于硬件性能的限制，在播放時總會出現各種各樣的問題，如播放卡頓、視頻加載時間過長，甚至無法加載視頻等，導致最終的效果不是很理想。而且由于在開發還原的過程中，受限于版本發布的節奏，可能會出現因為一個動畫效果而耽誤整個版本發布的時間點，所以在動效方案推動的過程中經常會收到各種各樣的來自老板或者程序員小哥的“挑戰”。對于用戶來說，可能覺得根本不需要讓一個動畫持續時間過長，種種欠缺考慮做法造成設計效率低下，設計的體驗效果也很差。幾次失敗之后，我開始反思到底應不應該在UI中加入過多的動畫，現在在我看來，單純為了視覺效果來犧牲體驗，是最吃力不討好的一件事情。盡管這個問題現在依然存在，但是長期積累的項目經驗使得我對它的認識已經遠遠超過了視覺和美觀這個范疇。性能、引導、功能性以及實現成本都是我們需要考慮的，而好看和美觀在這個時候似乎變成了最后考慮的一步。

舉個例子，有一次，某位同學給我展示了一個手機界面中下拉刷新的動畫效果。對于他的努力，我很欣賞，但是作為刷新動畫來說，整個動畫從下拉刷新激活開始，持續了將近7s才播放完畢，這讓我有些愕然。

首先對于一個下拉刷新效果來說，當處于網絡情況一般的情況下，最多300～500ms就完成整個刷新動畫過程是比較合適的。而要在這種情況下面對一個7s刷新播放效果，無疑是一場“災難”。要知道，即便是在網絡環境較好的情況下，一個頁面的切換和加載的時間加在一起也最好不要超過5s，在我看來這是用戶在觀看該類效果時的一個耐心極限。一旦超過這個極限，用戶對于設計就會產生反感，此時就算你的動畫效果做得再好，也會影響用戶的流暢度體驗。

因此，在保證動效視覺效果美觀的同時，請不要忽視諸如引導或者關鍵信息承載的功能，要學會取舍，時時刻刻以“功能和性能優先”的原則來做動效，才能做出真正讓用戶感覺到舒心的設計。畢竟美觀并不一定就是優質。

2.1.4 設計該有溫度

如今，我們一直談論著“情感化設計”這個話題，但真正做到在設計中體現情感的互聯網產品其實并不多，至少在中國市場目前還不多見。

先不說這純粹是互聯網設計行業的一個噱頭，但它確實有存在的意義和價值。人機交互行為中作為信息載體的終端設備所承載的除了信息部分之外，同時也承載了用戶的情感投入。這里引用一句唐納德·A·諾曼（Donald Arthur Norman，《情感化設計》一書的原作者）先生的話：“產品必須是吸引人的、有效的、可理解的，并且令人快樂和有趣的。”

這里所謂的“有趣”和我想說的“有溫度”相似。有趣不光是看到喜愛的東西會覺得有趣，當一個冷冰冰的機器或者互聯網產品突然間和你的互動變得像個淘氣的孩子，我想，你依然會覺得很有趣。即便他偶爾跟你“開玩笑”，也絲毫不會影響你對他的喜愛。

所以我認為，對于設計而言，它必須是有“溫度”的。并且要強調的是，這里所指的“溫度”不光是正面的，可能偶爾也是負面的。在日常生活中，當用戶的內心受到任何外界情感沖擊的時候往往會用到“真貼心”“真殘忍”“我受不了”“喜歡”“討厭”“好用”“無感”等形容詞。當你玩游戲獲得優秀名次的時候，“它”（指設計）會鼓勵你；當你進行錯誤操作的時候，“它”會提示甚至是警告你。當你覺得一個冷冰冰的終端設備或者是互聯網產品變得越來越懂你，那么對你來說，“它”便有了溫度。

UI動效，便是在人機交互過程中讓體驗操作變得有“溫度”的情感催化劑之一。這讓我想起了老羅（國內某手機品牌的創始人）在發布會現場時候，對著某品牌的手機重復地去體驗一個小動畫的場景。就UI動效吸引用戶參與這一點來說，這款動畫做到了。