2016-12-7 資深UI設(shè)計(jì)者
如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點(diǎn)這里
@十圓QCee :以前在團(tuán)隊(duì)內(nèi)部做過一個(gè)關(guān)于動效的分享,當(dāng)時(shí),是從現(xiàn)實(shí)參照、功能性、品牌,等維度進(jìn)行分析。這次為了更全面的了解界面動效,我參考了5W2H分析法。5W2H又稱七何分析法,分別是:What、Why、Who、When、Where、How、How much。
什么是界面動效?大家對其的理解大致是,用戶界面上所有運(yùn)動的效果,也可以視其為界面設(shè)計(jì)(UI design)與動態(tài)設(shè)計(jì)(motion design)的交集。
具體可以參考下圖:The Disciplines of User Experience Design
作為多學(xué)科交集的界面動效,其設(shè)計(jì)者可以交互,也可以是UI,甚至很多時(shí)候是前端開發(fā)直接完成的。而我碰到的很多比較完整的設(shè)計(jì)團(tuán)隊(duì),專門招的動效設(shè)計(jì)師,除了做界面動效外,還會做與產(chǎn)品推廣相關(guān)的motion graphic。
而我們所要講解的界面動效(UI motion)區(qū)別于motion graphic 最大的差別,就是界面動效需要以用戶體驗(yàn)與界面設(shè)計(jì)為大前提,來進(jìn)行動效設(shè)計(jì)。所以下面很多觀點(diǎn)也是基于此來進(jìn)行說明的。
另一個(gè)值得注意的是,界面動效在設(shè)計(jì)師設(shè)計(jì)完成后,需要開發(fā)實(shí)現(xiàn)才能與用戶見面。而不像MG動畫,直接由設(shè)計(jì)師輸出。
為什么需要界面動效?在我的理解里這是5W里最重要的一點(diǎn)。設(shè)計(jì)交流網(wǎng)站上有很多純粹追求酷炫,或?yàn)榱藙悠饋矶龅膭有?。他們?nèi)绻皇菫榱苏故驹O(shè)計(jì)技術(shù),或者博得關(guān)注自然無妨。但是,界面動效畢竟要在真實(shí)產(chǎn)品中展示的,其目的自然需要符合產(chǎn)品的整體訴求。這里的目的,我總結(jié)了兩方面:
1,保證產(chǎn)品的流暢體驗(yàn)。產(chǎn)品只要跟用戶有互動,就會有狀態(tài)的變化,而絕大多數(shù)的變化都是由界面視覺展示的。這時(shí),界面上的狀態(tài)變化,是否有過渡,過渡的是否流暢,就直接的影響著用戶的感受。
2.傳遞產(chǎn)品信息。動效其實(shí)跟交互,跟UI一樣,都是傳遞產(chǎn)品信息的一種渠道。而這里的信息會有很多可能,可以是:趨勢、來源、去向、結(jié)構(gòu)、情感、屬性,等。運(yùn)用合理的動效傳遞信息,能大大增強(qiáng)產(chǎn)品的表現(xiàn)力,同時(shí)也能減少用戶的理解成本。
這里的Who,不是指的人,而是表示的動效的對象。這個(gè)對象又是一個(gè)或多個(gè)界面元素組成。單個(gè)元素,大家比較好理解。多個(gè)元素的動效,除了表現(xiàn)元素屬性變化以外,還會將這些元素之前的關(guān)系傳遞出來:譬如:主次、聯(lián)動、并列先后、因果,等。
使用動效的時(shí)機(jī),對于動效來說,是非?;A(chǔ)的存在。用的好或不好,直接決定用戶體驗(yàn)的感受。首先是實(shí)時(shí)性,動效作為人機(jī)交互反饋過程中的重要表現(xiàn)方式,必須做到快速,明確的表達(dá)當(dāng)前的狀態(tài)。這就類似,你跟人交談,對方對你所說,完全沒有回應(yīng),無動于衷。這會讓你感到不確定,不認(rèn)同甚至是疏遠(yuǎn)。
其次是動效過載,動效與界面視覺一樣,當(dāng)出現(xiàn)大量過于復(fù)雜或者重復(fù)的效果時(shí),都會讓人視覺疲勞,抓不住要點(diǎn)。而且動態(tài)的畫面會讓這種感受更加強(qiáng)烈。
動效用在哪里?根據(jù)“WHY”里所說,所有的元素只要狀態(tài)發(fā)生變化,就可以用動效來過渡。那么這些位置都把動效用起來就可以了嗎?然而事實(shí)是,很多時(shí)候動效并不是產(chǎn)品設(shè)計(jì)的必選項(xiàng),其對可用性幾乎沒有影響,對于易用性有一定的影響。所以,資源有限的團(tuán)隊(duì)把動效的優(yōu)先級放到很靠后的位置。那么,有沒有哪兒的動效是必須的?哪兒的動效優(yōu)先級比較高呢?同樣可以從“WHY”中的兩點(diǎn)目的來入手。
首先,是流暢度。其影響因素主要是,畫面切換時(shí)變化太大,視覺的割裂讓用戶產(chǎn)出跳脫感。所以,當(dāng)狀態(tài)變化前后差異很大時(shí),如:元素大小、顏色、明暗、位置等,就需要做適當(dāng)?shù)倪^渡來改善這種割裂感。
另一個(gè),是信息傳遞,功能說明。動效是產(chǎn)品信息傳遞的方式之一,除此還有:文字,圖形、音效,音頻,視頻等。在信息傳遞過程中,動效的是否必要取決于信息本身的重要性,以及動效是否比其他傳遞方式更。最常見的例子就是上文多次提到的加載,不管是文字,還是圖形,都很難達(dá)到類似“轉(zhuǎn)菊花”動效的詮釋效率。
終于來到了HOW,之前的5W大家大致知道了界面動效的目的和使用尺度,都是相對基礎(chǔ)的。接下來的HOW會講它的運(yùn)動過程該如何表現(xiàn)。這個(gè)過程在設(shè)計(jì)時(shí),需要具備兩大特征:自然、統(tǒng)一。
先說自然,在宏觀物理世界(人類可觀測)的所有的運(yùn)動,都是符合經(jīng)典物理定律的,它反映的是運(yùn)動相關(guān)對象的質(zhì)量、密度、質(zhì)地、阻力,等。然后這些運(yùn)動又是通過物體狀態(tài)、時(shí)間、緩動,等讓我們感受到周圍的世界。動效的不自然感受,也就是源自運(yùn)動方式并不是人們?nèi)粘I钪谐S^察到的,大家無法從運(yùn)動想象其背后的物體屬性及關(guān)系。
在界面動效中來表現(xiàn)自然,我們主要通過形變、運(yùn)動時(shí)間及緩動曲線來體現(xiàn)。形變表現(xiàn)的是運(yùn)動對象自身的質(zhì)地,而運(yùn)動時(shí)間及緩動曲線則是表現(xiàn)運(yùn)動對象周圍的環(huán)境。
至于,如何設(shè)置緩動曲線與時(shí)間讓動效更加自然,可以看下面的一些總結(jié),或許有些幫助。
1.linear曲線(勻速運(yùn)動)除了一些特殊場景如加載、星空背景外,很少被使用。
2.easeIn(先緩后快)使用場景較少,主要在掉落、toWhere的動畫中使用。
3.easeInOut(頭尾緩、中間快)通常在輪轉(zhuǎn)切換的動畫中使用(One Out One In),這類動畫的觸發(fā)對象與運(yùn)動對象并不是同一個(gè)元素。
4.easeOut(先快后緩)最常見的效果,其觸發(fā)對象與運(yùn)動對象往往是同一個(gè)。主要用在展開、收起、出現(xiàn)、移動等動畫中。當(dāng)不知道用哪個(gè)緩動曲線時(shí),用這個(gè)一般不會錯(cuò)。
5.曲度主要表現(xiàn)運(yùn)動過程的力的大小,曲度越大,啟示力或阻力越大。
6.回彈則表現(xiàn)的是運(yùn)動的劇烈程度及對象的質(zhì)地。
7.運(yùn)動時(shí)間一般都控制在0.3s-0.8s之間,過長的時(shí)間會讓人感覺拖沓,不自然。
常見的緩動曲線類型:http://easings.net/zh-cn
自定義緩動曲線,可參考:https://matthewlein.com/ceaser/
統(tǒng)一,是界面動效需要具備的除自然外另一個(gè)重要指標(biāo)。表現(xiàn)主要包括空間與環(huán)境質(zhì)地這兩方面。同時(shí),整個(gè)產(chǎn)品設(shè)計(jì)的品牌特性也需要通過統(tǒng)一才能得以體現(xiàn)。
動效的空間表意需要我們構(gòu)建一個(gè)由頁面與元素組成的虛擬空間關(guān)系,以此來表達(dá)各元素的結(jié)構(gòu)關(guān)系及功能。
環(huán)境質(zhì)地在動效中主要需要通過緩動曲線、元素形變等來實(shí)現(xiàn)。他們與界面視覺所表現(xiàn)出的環(huán)境質(zhì)地也需要統(tǒng)一。舉個(gè)簡單的例子,一個(gè)金屬質(zhì)感的控件,動效出現(xiàn)彈性形變,肯定是不合適的。
品牌特性的提煉。好的產(chǎn)品在設(shè)計(jì)之初都會基于自身的特色、目標(biāo)人群及競品等,確立自身的品牌特性。這些特性又需要具備可認(rèn)知、有價(jià)值、特有性、長期性、規(guī)律性的特征。簡單說就是界面元素、交互行為以及動效的符號化。讓這些符號在產(chǎn)品中反復(fù)出現(xiàn),加深用戶的認(rèn)知記憶。隨著現(xiàn)在技術(shù)的提升,通過動效表達(dá)品牌特質(zhì)的案例月來越多。
iOS的品牌特性透過三大設(shè)計(jì)原則來體現(xiàn):Deference(遵從)、Clarity(清晰)、Depth(深度)。其中的深度完整的表述是Use Depth to Communicate(有層次的表達(dá))。這正是在空間表意這個(gè)場景中,iOS找了深度這種方式來作為其設(shè)計(jì)原則。
Android的品牌特性表現(xiàn)在其的設(shè)計(jì)語言Material design中。其核心觀點(diǎn)Material is the metaphor(材料的隱喻)所講的就是將不同的物品屬性按照不同的場景賦予到界面元素中,讓用戶有親切的感受。Andriod挖掘品牌特質(zhì)的場景,恰恰是通過動效來表現(xiàn)的元素質(zhì)地。
綜上,界面動效需要具備自然和統(tǒng)一這兩點(diǎn)。結(jié)合前面所提到的流暢、信息說明、對象關(guān)系、實(shí)時(shí)性、防止過載、必要性,等幾個(gè)方面,我們可以對界面動效該如何呈現(xiàn),有大致的了解。而關(guān)于動效如何實(shí)現(xiàn),平時(shí)如何提高動效設(shè)計(jì)的能力,動效設(shè)計(jì)時(shí)有哪些技巧等,后續(xù)看時(shí)間,可以繼續(xù)補(bǔ)充。
最后,我們要講下界面動效的投入產(chǎn)出比,也就是性價(jià)比的問題。在Where我們提到,動效并不是產(chǎn)品界面設(shè)計(jì)中必不可少的部分,產(chǎn)品規(guī)劃也往往會把其放到優(yōu)先級比較低的位置,最關(guān)鍵的是,你設(shè)計(jì)出來動效,要在用戶面前展現(xiàn),實(shí)現(xiàn)其價(jià)值,需要通過前端編碼這一必不可少的環(huán)節(jié)。很多設(shè)計(jì)同學(xué)會為此郁悶和糾結(jié),我們不妨對比下不同狀況下界面動效的投入與產(chǎn)出,看看如何處理更為合理。
我們先看下界面動效的成本,這里的成本主要的就是設(shè)計(jì)與開發(fā)的時(shí)間。動效的難易度與動效 使用的多少直接決定了所需的時(shí)間。
難易程度方面,較常見的大小、位移、旋轉(zhuǎn)、透明度等的變化,是最常見的屬性,實(shí)現(xiàn)起來也是比較方便的。
非常見屬性的動畫類型,如:SVG路徑動畫,濾鏡動畫,動畫等,對于一般開發(fā)人員還是有一定成本的。首先,你要將你要的效果準(zhǔn)確的表述給開發(fā)人員。同時(shí),他們還要查閱相關(guān)的案例,來實(shí)現(xiàn)方案并優(yōu)化性能。這時(shí)作為一個(gè)設(shè)計(jì)者要做的,除了做動效demo外,還要將相關(guān)的屬性及變化信息告訴開發(fā)人員,最好還能提供類似案例的源碼。很多設(shè)計(jì)同學(xué)會覺得,沒有必要,覺得將動效demo做出來就ok了。但是,在實(shí)際工作中,你做的動效,開發(fā)需要分解,反編譯,同時(shí)量化后再以其代碼表現(xiàn)出來。這個(gè)過程很容易產(chǎn)生彼此認(rèn)知的偏差,然后開發(fā)產(chǎn)出的不是你想要的,你是讓他改呢?還是改呢?改呢…所以,動畫信息的量化表述,可以減少很多“我認(rèn)為”的空間,同時(shí)提供案例源碼,可以給開發(fā)提供參考,以免被一句“沒法實(shí)現(xiàn)”給打發(fā)回來。
關(guān)于動效的量,在“where”中有提到,界面動效如果做足做全,將是相對巨大的工作量。面對這樣的成本,我們要怎樣解決呢?答案是,規(guī)范與組件化。在前期設(shè)計(jì)時(shí),與產(chǎn)品充分討論,考慮組控件各種使用場景,制定相應(yīng)的規(guī)范;同時(shí),前端以組件化的方式開發(fā),類似的效果只寫一次,其他都通過組件復(fù)用。當(dāng)然,要做到這些,需要各崗位的同學(xué)有很強(qiáng)的專業(yè)能力,同時(shí)團(tuán)隊(duì)的溝通協(xié)作又很順暢。而對于,資源緊張,業(yè)務(wù)變化大的團(tuán)隊(duì),產(chǎn)品中動效的運(yùn)用就需要收斂在必要的環(huán)節(jié)上了。
說完成本,我們看看動效的產(chǎn)出價(jià)值。前面說了很多,包括:信息表述的功能價(jià)值以及流暢,自然,品牌這些體驗(yàn)價(jià)值,這里就不再贅述。我們說說動效的場景價(jià)值。
首先是業(yè)務(wù)場景。在不同業(yè)務(wù)場景下,對動效的需求是不同的。譬如,一個(gè)后臺產(chǎn)品和一個(gè)前臺產(chǎn)品,前臺產(chǎn)品會更注重體驗(yàn)的順暢性,后臺產(chǎn)品更強(qiáng)調(diào)產(chǎn)品的穩(wěn)定性(只是相對來說,在同質(zhì)化嚴(yán)重的情況下也越來越強(qiáng)調(diào)體驗(yàn))。所以前臺的產(chǎn)品更需要通過動效來打差異,增加自身的附加值。
同時(shí),不同功能場景下,動效也發(fā)揮著不同程度的價(jià)值。產(chǎn)品介紹頁,往往會通過動效強(qiáng)化品牌質(zhì)感,如蘋果的新品介紹頁?;顒禹?,則會用動效來強(qiáng)化活動氛圍?;觽鞑ロ撁?,動效除了渲染氛圍,同時(shí)還有講故事的作用。因?yàn)樵谶@些頁面里體驗(yàn)、設(shè)計(jì)、動效相對于產(chǎn)品功能,更能吸引用戶關(guān)注,價(jià)值也被放的更大。
在不同平臺場景下,動效會受到不同的技術(shù)限制。最常見的就是通過Native與H5來實(shí)現(xiàn)動效,性能和展現(xiàn)效果都會有所差異。一般來說,動效在系統(tǒng)層優(yōu)于應(yīng)用層優(yōu)于web層。當(dāng)然這里面的差距會隨時(shí)間越來越小,現(xiàn)在很多簡單的動效已經(jīng)可以做到無差異了。
最后,將上述的相關(guān)內(nèi)容整理了一張圖片,如果不足之處歡迎大家補(bǔ)充。
原文地址:zhuanlan.zhihu
藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.sillybuy.com