2.1 全局考量

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

2.1.1 設(shè)計師和美工，僅一步之遙

“美工”和“設(shè)計師”這兩個稱呼在外行看來，更像是我們?yōu)榱司S護設(shè)計師行業(yè)那份難能可貴的尊嚴(yán)而強行區(qū)分開來的兩個詞語。在一般人眼里認(rèn)為只要能做LOGO的就是美工，且大多數(shù)人不喜歡別人稱呼自己為“美工”，并覺得這涉及“個人尊嚴(yán)”的問題。

那問題來了，設(shè)計師和美工的區(qū)別到底在哪里？

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

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

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

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

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

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

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

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

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

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

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

2.1.3 美觀，不代表一定優(yōu)質(zhì)

在我看來，一個優(yōu)秀的UI動畫效果應(yīng)該同時具備以下幾個特質(zhì)。

第一，具有較為統(tǒng)一的視覺引導(dǎo)性和品牌感。

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

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

第四，通過視覺動態(tài)化的方式向用戶呈現(xiàn)操作結(jié)果和反饋。

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

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

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

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

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

2.1.4 設(shè)計該有溫度

如今，我們一直談?wù)撝扒楦谢O(shè)計”這個話題，但真正做到在設(shè)計中體現(xiàn)情感的互聯(lián)網(wǎng)產(chǎn)品其實并不多，至少在中國市場目前還不多見。

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

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

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

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