天宇 移動(dòng)端UI設(shè)計(jì)文章及欣賞
天宇 移動(dòng)端UI設(shè)計(jì)文章及欣賞
作者：菜心輕量文
鏈接：https://www.zcool.com.cn/article/ZMTYyNjI2NA==.html
來(lái)源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
蘭亭妙微(www.gerard.com.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話(huà)：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
作者：大漠飛鷹CYSJ
鏈接：https://www.zcool.com.cn/article/ZMTY1MTk0NA==.html
來(lái)源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
掌握一些有效的技巧，有時(shí)能事半功倍。
由于識(shí)別性不高，手寫(xiě)的英文單詞最好是無(wú)關(guān)緊要的，主要是為了起裝飾作用。
怎么樣？以上的7個(gè)版式小技巧還不錯(cuò)吧，趕緊去試一試。你們可能也發(fā)現(xiàn)了，其實(shí)它們都是巧妙運(yùn)用了設(shè)計(jì)中的對(duì)比原則，比如大小對(duì)比、粗細(xì)對(duì)比、點(diǎn)線(xiàn)面、平面與立體對(duì)比、輪廓對(duì)比、虛實(shí)對(duì)比等等。所以熟練掌握對(duì)比非常重要，你也可以在對(duì)比的基礎(chǔ)上，嘗試出很多有趣、好看的排版技巧和設(shè)計(jì)形式。
蘭亭妙微(www.gerard.com.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話(huà)：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
今天給大家探討關(guān)于產(chǎn)品設(shè)計(jì)中的布局樣式分析，希望通過(guò)本文的梳理和大家一起做一次探索，解析優(yōu)秀案例的經(jīng)驗(yàn)。
Banner 對(duì)于設(shè)計(jì)師來(lái)說(shuō)并不陌生，更多的還是在于視覺(jué)表現(xiàn)的環(huán)節(jié)，作為視覺(jué)設(shè)計(jì)師來(lái)說(shuō)是重點(diǎn)培養(yǎng)的能力之一。今天給大家探討的關(guān)于 UI 場(chǎng)景中的 Banner 布局樣式，并非是視覺(jué)層面的探索，而是關(guān)于產(chǎn)品設(shè)計(jì)中的布局樣式分析。
在產(chǎn)品中出現(xiàn) Banner 圖是比較常見(jiàn)的基礎(chǔ)功能，除了在其視覺(jué)創(chuàng)意層面不斷探索精進(jìn)以外，UI 層面的樣式布局也在不斷嘗試更多不同的表現(xiàn)，希望通過(guò)本文的梳理和大家一起做一次探索，解析優(yōu)秀案例的經(jīng)驗(yàn)。
分享目錄
一、Banner 視覺(jué)層表現(xiàn)類(lèi)別
二、Banner 布局樣式分析
三、移動(dòng)端線(xiàn)上案例分析
四、總結(jié)
一、Banner 視覺(jué)層表現(xiàn)類(lèi)別
Banner 在 UI 場(chǎng)景中通常伴隨著輪播的形式展示，所以也經(jīng)常稱(chēng)之為輪播圖，這也是導(dǎo)航的一種形式之一，也有輪播導(dǎo)航的功能。在產(chǎn)品中出現(xiàn)可以帶給用戶(hù)平臺(tái)需要重點(diǎn)傳播的內(nèi)容，比如活動(dòng)信息和官宣咨詢(xún)等。
為了能引起用戶(hù)更高的關(guān)注度，Banner 在視覺(jué)層的表現(xiàn)上面也在不斷的創(chuàng)新。除了 Banner 設(shè)計(jì)創(chuàng)意、構(gòu)圖、配色等視覺(jué)層面發(fā)揮以外，在表現(xiàn)類(lèi)別上面我分為靜態(tài)、動(dòng)態(tài)、視頻、分層視差等。
1.1 靜態(tài) Banner 展示
靜態(tài)的輪播圖是最常見(jiàn)的，無(wú)論是設(shè)計(jì)效率還是技術(shù)落地都是最為便利的。Banner 畫(huà)面為靜態(tài)的圖片格式，在產(chǎn)品中分為單圖和多圖，單圖是靜態(tài)的展示形式，多圖可以自動(dòng)輪播和手動(dòng)滑動(dòng)切換。
1.2 動(dòng)態(tài) Banner 展示
動(dòng)態(tài)表現(xiàn)的 Banner 相較于靜態(tài)而言更能引起用戶(hù)的關(guān)注度，強(qiáng)化信息重點(diǎn)，在一些重點(diǎn)元素和行動(dòng)按鈕等地方實(shí)行動(dòng)態(tài)表現(xiàn)。
如果采用動(dòng)態(tài)的形式表現(xiàn)，通常為單圖的居多。動(dòng)態(tài)表現(xiàn)可以引起高關(guān)注度，但是如果過(guò)多也會(huì)形成互相干擾，反而削弱了關(guān)注度。
在這個(gè)信息爆炸的互聯(lián)網(wǎng)環(huán)境中，產(chǎn)品設(shè)計(jì)師都在不斷的嘗試如何更快、更準(zhǔn)地獲得用戶(hù)的關(guān)注度。微動(dòng)效無(wú)疑是一個(gè)不錯(cuò)的選擇，無(wú)論是在功能交互還是視覺(jué)表現(xiàn)層面，都隨處可見(jiàn)。
1.3 視頻嵌入展示
視頻廣告由來(lái)已久，隨著短視頻的走熱，視頻嵌入到輪播廣告中逐漸增多。較多的表現(xiàn)形式為默認(rèn)出現(xiàn)在首個(gè) Banner 中，伴隨著倒計(jì)時(shí)出現(xiàn)，也可以關(guān)閉播放。此類(lèi)廣告為了降低用戶(hù)在未知場(chǎng)景中的使用干擾，通常為靜音模式，帶給用戶(hù)更加友好的體驗(yàn)。
也有一些產(chǎn)品欄目采用多個(gè)視頻輪播的形式，這個(gè)應(yīng)用場(chǎng)景相對(duì)較少，一些影視產(chǎn)品偶爾運(yùn)用。
1.4 分層視差效果展示
為了帶給用戶(hù)不一樣的視覺(jué)呈現(xiàn)和互動(dòng)體驗(yàn)，也逐漸出現(xiàn)一些打破常規(guī)表現(xiàn)形式的輪播廣告。分層視差效果是其中變化較大的一種，有輪播疊加的視差、3D翻轉(zhuǎn)、元素和背景分離視差等。
元素或者背景之間的運(yùn)動(dòng)差異必將引起用戶(hù)高度的關(guān)注，帶來(lái)提高關(guān)注度的目的。產(chǎn)品設(shè)計(jì)師也在不斷嘗試更多分層視差的效果，帶給用戶(hù)不一樣的廣告體驗(yàn)。
小結(jié)
Banner 在視覺(jué)表現(xiàn)層的創(chuàng)新有助于提高用戶(hù)對(duì)內(nèi)容的關(guān)注度，作為產(chǎn)品設(shè)計(jì)師我們都在不斷的嘗試更多可能性，除了在創(chuàng)意布局和色彩構(gòu)成等方面發(fā)揮以外，表現(xiàn)形式的差異也是至關(guān)重要。
二、Banner 布局樣式分析
鎖定了 Banner 的視覺(jué)表現(xiàn)形式以后，我們來(lái)分析一下 Banner 在界面布局中的樣式。造成布局差異的因素較多，比如 Banner 比例、大小、通欄、分欄、孤立還是背景對(duì)比等。
首先我們來(lái)看看通欄和分欄的差別，這個(gè)因素會(huì)影響 Banner 所能呈現(xiàn)的大小。常規(guī)理解都覺(jué)得 Banner 越大越好，如果考慮到產(chǎn)品內(nèi)容布局和信息層級(jí)區(qū)分方面，也會(huì)注意到整個(gè)界面布局的舒適度。所以，界面整體的風(fēng)格和布局樣式也會(huì)影響 Banner 布局樣式，需要融合而非格格不入。
如果遇到一些界面布局頭部采用深色，在布局 Banner 的時(shí)候?yàn)榱俗尶臻g感更強(qiáng)，也會(huì)讓 Banner 布局于頭部背景上層。通常背景色為固定色值和變動(dòng)色值，變動(dòng)色值會(huì)根據(jù)輪播圖的色彩來(lái)定義背景色值，這樣的設(shè)計(jì)解決方案不僅融合度高且空間感強(qiáng)。
關(guān)于 Banner 的比例是很多產(chǎn)品設(shè)計(jì)師不斷探索的方向，比例影響高度值的控制。界面布局內(nèi)容量的不同影響高度值的不同，根據(jù)內(nèi)容自定義也是可行的方法之一。也有設(shè)計(jì)師會(huì)根據(jù)斐波那契數(shù)列計(jì)算，推薦出寬高比例有 8:5、8:3、8:2、8:1 等，在計(jì)算的過(guò)程中我們通常取能被 4 整除的數(shù)值。
我們將 Banner 的寬度值定義為：W，高度值定義為：H，比值關(guān)系用：Y（ Y 為 5/8、3/8、2/8、1/8 等）。得出計(jì)算公式：H=W*Y，得出來(lái)的值取能被 4 整數(shù)的數(shù)值即可。這只是其中一種計(jì)算形式，設(shè)計(jì)師也可以根據(jù)具體布局情況進(jìn)行自定義，設(shè)計(jì)不是一層不變的方法論，而是做適合具體情況的解決方案。
關(guān)于布局樣式的分析遠(yuǎn)不止此，拋磚引玉，經(jīng)驗(yàn)總結(jié)只是一個(gè)起步，探索與創(chuàng)新才能突破更多可能性。
三、移動(dòng)端線(xiàn)上案例分析
經(jīng)驗(yàn)總結(jié)很大程度上都會(huì)根據(jù)已有的優(yōu)秀案例進(jìn)行分析，立足于成功案例之上才能更切實(shí)際。通過(guò)大量的產(chǎn)品體驗(yàn)日記，梳理出同屬性的不同解決方案，下面便為大家推薦一些上線(xiàn)案例分析。
3.1 常規(guī)形式運(yùn)用最為普及
Banner 圖的運(yùn)用組合元素為圖片層和輪播點(diǎn)，通過(guò)不同的滑動(dòng)交互形式來(lái)形成不一樣的變化。常見(jiàn)的都是單純的 Banner 圖、輪播點(diǎn)、滑動(dòng)切換組合，圖片本身以直角或者圓角、通欄或者分欄來(lái)呈現(xiàn)，這個(gè)需要結(jié)合整體的風(fēng)格來(lái)定；輪播點(diǎn)的形式比較多樣，也有不顯示輪播點(diǎn)的形式，以顯示待輪播圖片來(lái)替代。
比如騰訊視頻、愛(ài)奇藝、優(yōu)酷、芒果TV等常用的影視類(lèi) App 中，就各自以不同的形式顯示輪播 Banner。騰訊視頻分欄顯示待輪播圖和直角風(fēng)格，愛(ài)奇藝通欄顯示和輪播點(diǎn)配合，優(yōu)酷圓角風(fēng)格配合輪播點(diǎn)，芒果TV通欄呈現(xiàn)融合背景且營(yíng)造前后空間感。
3.2 自然而流暢的縮放切換
除了在圖片層和輪播點(diǎn)進(jìn)行設(shè)計(jì)發(fā)揮以外，Banner 圖的切換交互也是一種探索的方向，自然而流暢的交互形式能帶給用戶(hù)舒適的體驗(yàn)。比如 MOO 音樂(lè)采用縮放過(guò)度的形式來(lái)進(jìn)行 Banner 輪播，這種自然而流暢的形式，給人一種非常舒適的操作體驗(yàn)。
3.3 背景色隨著 Banner 輪播而變化
界面頭部視覺(jué)表現(xiàn)為了提高用戶(hù)關(guān)注度，利用深色表現(xiàn)更能體現(xiàn)空間感和襯托 Banner 效果。通常為品牌色進(jìn)行襯托，也有很多產(chǎn)品會(huì)利用 Banner 進(jìn)行取色，作為背景色的選擇范圍，這樣更具融合性和視覺(jué)表現(xiàn)差異。背景色隨著 Banner 輪播而變化，是比較普遍的一種設(shè)計(jì)方案，視覺(jué)體驗(yàn)感很好。
3.4 以進(jìn)度條的形式表達(dá)輪播控制
Banner 圖的輪播控制常規(guī)的做法是以點(diǎn)的形式呈現(xiàn)或者左右兩側(cè)露出待輪播 Banner，最近在淘票票 App 中發(fā)現(xiàn)了一種新的表達(dá)，以進(jìn)度條的形式呈現(xiàn)，非常直觀的讓用戶(hù)可以判斷出還有多少 Banner 處于待輪播狀態(tài)。這樣的表現(xiàn)形式也和觀影時(shí)視頻的進(jìn)度一致，不僅匹配了產(chǎn)品屬性，也能更加直觀的呈現(xiàn)輪播效果，帶給用戶(hù)全新的體驗(yàn)。
3.5 模擬舞臺(tái)背景呈現(xiàn)輪播 Banner
在界面布局中空間感的營(yíng)造可以讓信息對(duì)比更加明顯，考拉海購(gòu)就將 Banner 作為背景來(lái)搭建一個(gè)具有空間感的舞臺(tái)，使得整個(gè)界面延伸出更強(qiáng)的深度空間感。Banner 輪播默認(rèn)以淡入淡出的形式，也可以手動(dòng)滑動(dòng)輪播，區(qū)別電商產(chǎn)品同質(zhì)化表現(xiàn)，帶給用戶(hù)不一樣的視覺(jué)感官體驗(yàn)。
3.6 異形廣告，打破常規(guī)視覺(jué)呈現(xiàn)
有時(shí)候方方正正的布局讓人感覺(jué)受到了一定的束縛，也有一些產(chǎn)品在 Banner 呈現(xiàn)的形式上面不斷打破邊界的束縛，異形廣告的運(yùn)用逐漸變得頻繁。最簡(jiǎn)單的異形廣告是在畫(huà)面本身突破束縛，整體的結(jié)構(gòu)布局還是在固定的造型里面，比如騰訊動(dòng)漫 App 推薦板塊的輪播 Banner。
除了在 Banner 設(shè)計(jì)本身進(jìn)行突破束縛以外，也有在造型上面進(jìn)行變化的，比如膠囊形狀，也稱(chēng)之為膠囊廣告；在邊界分割上面除了直線(xiàn)以外，也有采用弧形分割或者特殊形狀分割等。
3.7 微動(dòng)效增強(qiáng)用戶(hù)關(guān)注度
動(dòng)效在產(chǎn)品設(shè)計(jì)中已經(jīng)運(yùn)用非常頻繁，在 Banner 圖的設(shè)計(jì)中也會(huì)有所涉及，相較于靜態(tài)的呈現(xiàn)方式來(lái)說(shuō)更能引起用戶(hù)的關(guān)注度。為了不帶給用戶(hù)過(guò)多的信息干擾，通常都是單圖呈現(xiàn)，這樣也能將焦點(diǎn)強(qiáng)化。
通常都是個(gè)別元素進(jìn)行微動(dòng)效，來(lái)體現(xiàn)動(dòng)感效果，在主 Banner 中相對(duì)少見(jiàn)，次級(jí)和異形廣告中運(yùn)用廣泛。
3.8 視頻廣告嵌入，不破壞只融合
視頻廣告的運(yùn)用是比較常見(jiàn)的，在保持原有 Banner 布局不變的情況下嵌入到結(jié)構(gòu)中，引起用戶(hù)的關(guān)注度。通常為自動(dòng)播放的形式，為了降低用戶(hù)在未知場(chǎng)景中的使用干擾，默認(rèn)靜音模式。有倒計(jì)時(shí)的伴隨著關(guān)閉操作，也有一些提供重播的操作，播放結(jié)束自動(dòng)翻頁(yè)。
除了單個(gè)視頻嵌入以外，也有 Banner 全部采用短視頻的方式，不過(guò)相對(duì)較少。
3.9 卡片疊加滑動(dòng)提升輪播空間感
在探索手勢(shì)操作上面，便捷度、流暢度、體驗(yàn)感都是至關(guān)重要的?；瑒?dòng) Banner 過(guò)程中的體驗(yàn)感能帶給用戶(hù)對(duì)于當(dāng)前內(nèi)容的關(guān)注程度，便于操作的同時(shí)能引起用戶(hù)的好奇心更是重中之重。
蝦米音樂(lè)的樂(lè)庫(kù)便是結(jié)合了眾多設(shè)計(jì)思考，卡片疊加帶來(lái)視覺(jué)呈現(xiàn)的空間感，手勢(shì)滑動(dòng)流暢自然，主題文案隨著滑動(dòng)而變化顯示或者隱藏，帶給用戶(hù)更加友好的選擇體驗(yàn)。
3.10 主題元素分層視差帶來(lái)輪播新玩法
為了提高用戶(hù)對(duì)輪播廣告的關(guān)注度，突破已有的表現(xiàn)形式是設(shè)計(jì)師不斷思考的方向。
自如 App 端的做法引起了我的關(guān)注，將主題元素和背景層進(jìn)行分離，主題元素進(jìn)行輪播的同時(shí)背景層漸隱呈現(xiàn)。不一樣的視覺(jué)表現(xiàn)和輪播形式，帶來(lái)了 Banner 輪播形式的新玩法。
四、總結(jié)
Banner 在很多產(chǎn)品中是較為常見(jiàn)的元素存在，UI 場(chǎng)景中的 Banner 布局樣式探索是為了在進(jìn)行結(jié)構(gòu)布局的時(shí)候，我們可以嘗試出更多不一樣的解決方案。一個(gè)好的體驗(yàn)也許只是一個(gè)細(xì)節(jié)的探索，如果能在每一個(gè)功能設(shè)計(jì)的時(shí)候都能把控每一個(gè)細(xì)節(jié)，必能帶給用戶(hù)更好的使用體驗(yàn)。
本文雖然不是講解如何設(shè)計(jì) Banner 圖本身，但是關(guān)于 Banner 的布局形式、造型特征、內(nèi)容表達(dá)形式等在產(chǎn)品設(shè)計(jì)中的運(yùn)用，也是起到非常關(guān)鍵的因素。希望通過(guò)這種形式的梳理，可以帶給你更多的幫助。
文中案例來(lái)源于日常的產(chǎn)品體驗(yàn)日記整理，將具備同屬性的內(nèi)容進(jìn)行歸類(lèi)梳理，形成可指導(dǎo)的設(shè)計(jì)建議是一種探索思考的過(guò)程。希望這個(gè)思路可以?huà)伌u引玉，和大家一起探索產(chǎn)品設(shè)計(jì)中更多用戶(hù)體驗(yàn)和感官體驗(yàn)的設(shè)計(jì)解決方案。
蘭亭妙微(www.gerard.com.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話(huà)：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
研究主題：提升動(dòng)效可用性
研究對(duì)象：12條UX動(dòng)效應(yīng)用法則
“作為UX/UI設(shè)計(jì)師，我該如何適當(dāng)在UX設(shè)計(jì)中加入動(dòng)效？”，我總結(jié)了一些經(jīng)驗(yàn)法則，可以很好地回答這個(gè)問(wèn)題。在過(guò)去5年里，我的UI動(dòng)畫(huà)工作室發(fā)表的教程，非常幸運(yùn)可以在40多個(gè)國(guó)家/地區(qū)，以及數(shù)百個(gè)頂級(jí)品牌設(shè)計(jì)咨詢(xún)公司中指導(dǎo)UX/UI設(shè)計(jì)師們。
研究UX/UI動(dòng)效超過(guò)15年后，我得出了一個(gè)結(jié)論——其實(shí)有12個(gè)規(guī)律方法來(lái)幫助提升UX動(dòng)效設(shè)計(jì)。我將這些機(jī)會(huì)稱(chēng)為“ 12條UX動(dòng)效應(yīng)用法則”，它們可以通過(guò)多種創(chuàng)新方式進(jìn)行疊加和組合使用。
我將宣言分成5部分：
-強(qiáng)調(diào)動(dòng)效的主題；
-實(shí)時(shí)與非實(shí)時(shí)交互；
-提升動(dòng)效可用性的4種方法；
-原理，技術(shù)，特性和價(jià)值；
-12條UX動(dòng)效應(yīng)用法則。
設(shè)計(jì)人員通常將用戶(hù)界面中的運(yùn)動(dòng)主題理解為“ UI動(dòng)畫(huà)”（實(shí)際上不是），所以我覺(jué)得在開(kāi)始說(shuō)12條原則前，有必要為大家普及下基礎(chǔ)。
設(shè)計(jì)人員通常將“ UI動(dòng)畫(huà)”視為是讓用戶(hù)體驗(yàn)更愉悅的東西，實(shí)際上并沒(méi)有增加太多價(jià)值。因此，UI動(dòng)畫(huà)通常被視為UX的后兒子。另外，用戶(hù)界面動(dòng)效，它被認(rèn)為屬于迪士尼的12條動(dòng)畫(huà)原理范疇，我在自己的《UI Animation Principles — Disney is Dead》一文中進(jìn)行了反駁。
在我的宣言中，我將證明UI動(dòng)畫(huà)原則與“ 12 UX in Motion Principles”的關(guān)系，就像是建筑構(gòu)造和建筑風(fēng)格一樣，是各自獨(dú)立的?；蛘哌@樣理解，一個(gè)建筑結(jié)構(gòu)被物理建造后才會(huì)實(shí)際存在（施工后），但是原則理論卻能指導(dǎo)物理建造。
動(dòng)畫(huà)就是工具，而原則是用來(lái)指導(dǎo)工具使用的，因此，原則理論對(duì)設(shè)計(jì)師的影響力更大。實(shí)際上，多數(shù)設(shè)計(jì)師經(jīng)常在UX設(shè)計(jì)中，將“ UI動(dòng)畫(huà)”視為一種更高級(jí)的設(shè)計(jì)形式。
區(qū)分“狀態(tài)”和“作用”很重要，UX中的大多元素是靜態(tài)的，例如設(shè)計(jì)組件。用戶(hù)體驗(yàn)中的行為基本上是暫時(shí)的，是基于動(dòng)作的。一個(gè)元素是被隱藏的，或正在被隱藏。如果是后者，動(dòng)效的引入就可以很好地提升可用性。
另外，可以將交互的時(shí)間都視為實(shí)時(shí)或非實(shí)時(shí)發(fā)生。實(shí)時(shí)是指用戶(hù)直接與用戶(hù)界面中的對(duì)象進(jìn)行交互。非實(shí)時(shí)意味著對(duì)象行為是事后交互的：它在用戶(hù)操作之后發(fā)生，并且是過(guò)渡的。
這是一個(gè)重要的區(qū)別。實(shí)時(shí)交互也可以被認(rèn)為是“直接操縱”，因?yàn)橛脩?hù)正在直接和界面對(duì)象進(jìn)行交互。用戶(hù)使用界面時(shí)，界面行為正在發(fā)生。非實(shí)時(shí)交互僅在來(lái)自用戶(hù)的輸入之后發(fā)生，并且具有將用戶(hù)短暫鎖定在用戶(hù)體驗(yàn)之外的作用，直到轉(zhuǎn)換完成。認(rèn)知這些差異性，會(huì)在我們學(xué)習(xí)12項(xiàng)原則時(shí)發(fā)揮幫助作用。
這4點(diǎn)代表判斷用戶(hù)體驗(yàn)可用性時(shí)的依據(jù)：
-預(yù)期值
分兩個(gè)方面——設(shè)計(jì)為用戶(hù)帶來(lái)的感受，以及實(shí)際呈現(xiàn)效果。換句話(huà)說(shuō)，作為設(shè)計(jì)師，我們希望最大程度地減少用戶(hù)期望與他們體驗(yàn)之間的差距。
-連續(xù)性
既代表用戶(hù)流程，也代表用戶(hù)體驗(yàn)的“一致性”。可以從“內(nèi)部連續(xù)性”（場(chǎng)景內(nèi)的連續(xù)性）和“內(nèi)部連續(xù)性”（構(gòu)成整個(gè)用戶(hù)體驗(yàn)的一系列場(chǎng)景內(nèi)的連續(xù)性）的角度來(lái)考慮。
-敘述性
是用戶(hù)體驗(yàn)中事件的線(xiàn)性進(jìn)展，一系列微妙的變化和動(dòng)作串聯(lián)在一起是，就構(gòu)成了用戶(hù)體驗(yàn)流程。
-關(guān)聯(lián)性
指導(dǎo)用戶(hù)理解和決策界面中組件之間的關(guān)系。
泰勒·韋恩（Tyler Waye）寫(xiě)道：“原理……是產(chǎn)生各種技術(shù)的基本前提和功能規(guī)則。無(wú)論發(fā)生什么，這些要素都保持一致。”我們可以設(shè)想一個(gè)層次結(jié)構(gòu)，其中“原則”在頂部，“技術(shù)”在第二，接下來(lái)是“內(nèi)容”，“量值”在最底部?？梢詫⒓夹g(shù)視為把原則實(shí)際執(zhí)行的一種呈現(xiàn)手法，類(lèi)似于我們常說(shuō)的“設(shè)計(jì)風(fēng)格”。
“屬性”是特定對(duì)象的參數(shù)，這些參數(shù)會(huì)被動(dòng)畫(huà)化以創(chuàng)建該技術(shù)。這些包括（但不限于）位置，不透明度，比例，旋轉(zhuǎn)，錨點(diǎn)，顏色，筆劃寬度，形狀等。“量值”是實(shí)際的數(shù)字屬性值，它們會(huì)隨時(shí)間變化以創(chuàng)建所謂的“動(dòng)畫(huà)”。
比如，設(shè)計(jì)一個(gè)飛機(jī)降落的動(dòng)效，我們可以使用“模糊原理”，模糊和不透明度調(diào)至25px和70％?，F(xiàn)在我們有了一些可以使用的工具。更重要的是，這些語(yǔ)言工具與任何特定的原型工具無(wú)關(guān)。
緩動(dòng)，偏移和延遲與定時(shí)有關(guān)；處理與對(duì)象關(guān)系有關(guān)；變換，數(shù)值變化，遮罩，疊加和復(fù)制都與對(duì)象連續(xù)性有關(guān)；視差與時(shí)間層次有關(guān)。模糊度，維度和滑動(dòng)變焦都與空間連續(xù)性有關(guān)。
發(fā)生即時(shí)事件時(shí)，對(duì)象行為符合用戶(hù)期望。
所有（實(shí)時(shí)或非實(shí)時(shí)）的動(dòng)效都非常緩和。這種設(shè)計(jì)輕松搭建了一種自然舒適的氛圍，也有一種連續(xù)感。順便提一句，迪士尼將其稱(chēng)為“慢進(jìn)慢出”。
左側(cè)示例的線(xiàn)性運(yùn)動(dòng)，看起來(lái)很好像糟糕。第一個(gè)示例沒(méi)有很強(qiáng)的動(dòng)效，但呈現(xiàn)出來(lái)的也很流暢。以上三個(gè)示例都有確切的幀數(shù)，并且演示的時(shí)間相同，唯一的區(qū)別是動(dòng)效的緩和程度。
作為關(guān)注可用性的設(shè)計(jì)師，除了美學(xué)之外，我們還需要多提出質(zhì)疑，哪個(gè)示例更能提升可用性？我在這里介紹的情況是緩動(dòng)固有的特點(diǎn)。在適當(dāng)緩動(dòng)情況下，用戶(hù)會(huì)感覺(jué)動(dòng)作本身是無(wú)縫的并且在很大程度上是不可見(jiàn)的，這是一件好事，因?yàn)樗粫?huì)分散注意力。線(xiàn)性運(yùn)動(dòng)明顯可見(jiàn)，并且感覺(jué)不完整且分散注意力。
我們?cè)賮?lái)看右邊的示例，它也不并不是天衣無(wú)縫的。實(shí)際上，它具有明顯的“設(shè)計(jì)”感，我們會(huì)注意到物體是如何著陸的，但與左側(cè)線(xiàn)性運(yùn)動(dòng)示例相比，它仍然感覺(jué)“更正確”。
我想向您開(kāi)放的是一個(gè)輕松的運(yùn)動(dòng)世界。作為設(shè)計(jì)師，您實(shí)際上可以在項(xiàng)目中創(chuàng)建和實(shí)現(xiàn)無(wú)限的“緩動(dòng)”。所有這些放松都有自己的期望響應(yīng)，它們會(huì)在用戶(hù)中觸發(fā)。
引入新元素和場(chǎng)景時(shí)，定義對(duì)象關(guān)系和層次結(jié)構(gòu)。
“偏移與延遲”受迪斯尼動(dòng)畫(huà)原理影響，本例中為“跟隨并重疊動(dòng)作”。
但是，重要的是要注意，方法雖然類(lèi)似，但目的和結(jié)果卻不同。迪斯尼的《原理》可產(chǎn)生“更具吸引力的動(dòng)畫(huà)”，而《UI動(dòng)畫(huà)》的原理則可產(chǎn)生更多可用的體驗(yàn)。
這一原則的效用在于，它通過(guò)“告訴”用戶(hù)界面中對(duì)象的性質(zhì)，預(yù)先為用戶(hù)設(shè)置成功的條件。上面參考中的敘述是頂部的兩個(gè)對(duì)象是一組，而底部則是分開(kāi)的。頂部的兩個(gè)對(duì)象可以是非交互的圖像和文本，而底部的對(duì)象可以是按鈕。
甚至在用戶(hù)注冊(cè)這些對(duì)象是什么之前，設(shè)計(jì)人員就已經(jīng)通過(guò)運(yùn)動(dòng)告知這些對(duì)象是“分離的”。
Credit: InVision
在上圖示例中，懸浮按鈕（FAB）轉(zhuǎn)換成了包含三個(gè)按鈕的標(biāo)題導(dǎo)航元素。由于按鈕在時(shí)間上彼此“偏移”，因此最終通過(guò)“分離”來(lái)提升可用性。換句話(huà)說(shuō)，設(shè)計(jì)人員是在利用時(shí)間本身來(lái)說(shuō)（甚至在用戶(hù)注冊(cè)對(duì)象之前）對(duì)象是分開(kāi)的。這可以讓用戶(hù)完全獨(dú)立于視覺(jué)設(shè)計(jì)，了解界面中對(duì)象的特性。
以下是一個(gè)示例：
Credit: Jordi Verdu
在上面的例子中，靜態(tài)視覺(jué)設(shè)計(jì)告訴我們?cè)诒尘吧嫌袌D標(biāo)。假設(shè)這些圖標(biāo)都是彼此獨(dú)立的，并且做著不同的事情。
圖標(biāo)被分組為行，并且表現(xiàn)得像單個(gè)對(duì)象。它們的標(biāo)題同樣被分組為行，并且表現(xiàn)得像單個(gè)對(duì)象。動(dòng)效告訴用戶(hù)這些界面元素不是她的眼睛所看到的。在這種情況下，我們可以說(shuō)界面中對(duì)象的時(shí)間行為并沒(méi)有提升可用性。
與多個(gè)對(duì)象進(jìn)行交互時(shí)，創(chuàng)建空間和時(shí)間層次關(guān)系。
這是一項(xiàng)強(qiáng)大的原理，可“關(guān)聯(lián)”用戶(hù)界面中的對(duì)象。在上面的示例中，頂部或“子級(jí)”對(duì)象的“ scale”和“ position”屬性作為底部或“父級(jí)”對(duì)象的“ position”屬性的父級(jí)。
處理對(duì)象屬性與其他對(duì)象屬性的鏈接，創(chuàng)建對(duì)象關(guān)系和層次結(jié)構(gòu)。
還可以使設(shè)計(jì)人員更好地協(xié)調(diào)用戶(hù)界面中的時(shí)間，同時(shí)與用戶(hù)交流對(duì)象關(guān)系的本質(zhì)?；叵胍幌?，對(duì)象的“屬性”包括以下內(nèi)容：“比例”，“不透明度”，“位置”，“旋轉(zhuǎn)”，“形狀”，“顏色”，“值”等。這些屬性中的任何一個(gè)都可以鏈接到其他任何屬性，以在用戶(hù)體驗(yàn)中創(chuàng)造協(xié)同作用。
Credit: Andrew J Lee, Frank Rapacciuolo
在左側(cè)示例中，“表情”元素的“ y軸”是圓形指示器，也是“ x軸”的父級(jí)。當(dāng)圓形指示器元素沿水平軸移動(dòng)時(shí)，其“子級(jí)”元素沿水平和垂直方向移動(dòng)（同時(shí)被遮罩）。此功能最好可以“實(shí)時(shí)”互動(dòng)，當(dāng)用戶(hù)直接操作界面對(duì)象時(shí)，設(shè)計(jì)人員通過(guò)動(dòng)效與用戶(hù)溝通，將其聯(lián)系起來(lái)。
創(chuàng)建關(guān)聯(lián)有3種形式：“直接關(guān)聯(lián)”（請(qǐng)參見(jiàn)上面的兩個(gè)“延遲”示例，“反向”示例，請(qǐng)參見(jiàn)下文）。
延遲和反向
對(duì)象實(shí)用程序更改時(shí)，創(chuàng)建連續(xù)的敘述流狀態(tài)。
關(guān)于運(yùn)動(dòng)原理“轉(zhuǎn)換”中的UX的文章已經(jīng)很多。在某些方面，它是動(dòng)畫(huà)原理中最明顯和最深刻的部分。
轉(zhuǎn)換是最容易識(shí)別的，主要是因?yàn)樗Ч芡怀?。我們注意到?ldquo;提交”按鈕將形狀更改為徑向進(jìn)度條，最后再次將形狀更改為確認(rèn)復(fù)選標(biāo)記。它完整的展示了一個(gè)功能，并引起了用戶(hù)注意。
Credit: Colin Garven
變換所做的是無(wú)縫地將用戶(hù)轉(zhuǎn)換為不同的UX狀態(tài)或“是”（如這是一個(gè)按鈕，這是一個(gè)放射狀的進(jìn)度條，這是一個(gè)復(fù)選標(biāo)記），引導(dǎo)成所需的結(jié)果。通過(guò)這些功能空間將用戶(hù)吸引到了最終目的地。
轉(zhuǎn)換的作用是將用戶(hù)體驗(yàn)中的關(guān)鍵時(shí)刻從認(rèn)知上“分塊”為一系列無(wú)縫且連續(xù)的事件。這種無(wú)縫性可以提高用戶(hù)的感知度，留存率和任務(wù)成功率。
當(dāng)量值主體發(fā)生變化時(shí)，創(chuàng)建動(dòng)態(tài)且連續(xù)的敘事關(guān)系。
基于文本的界面對(duì)象（即數(shù)字和文本）可以更改其值。這是那些“難以捉摸的明顯”概念之一。
文本和數(shù)字更改非常常見(jiàn)，以至于它們繞過(guò)我們，而我們卻沒(méi)有給他們帶來(lái)區(qū)別和嚴(yán)謹(jǐn)性，以評(píng)估它們?cè)谔嵘捎眯苑矫娴淖饔谩?/p>
那么，當(dāng)值改變時(shí)用戶(hù)會(huì)經(jīng)歷什么？在用戶(hù)體驗(yàn)中，運(yùn)動(dòng)中的12個(gè)用戶(hù)體驗(yàn)原則是提升可用性的機(jī)會(huì)。這里的三個(gè)機(jī)會(huì)是將用戶(hù)與數(shù)據(jù)背后的現(xiàn)實(shí)，代理的概念以及價(jià)值本身的動(dòng)態(tài)性質(zhì)聯(lián)系起來(lái)。
讓我們看一下用戶(hù)儀表板的示例。
當(dāng)數(shù)字值未進(jìn)行加載時(shí)，用戶(hù)看到的數(shù)字對(duì)象是靜態(tài)的。它們就像涂漆的標(biāo)志，顯示時(shí)速限制為55英里/小時(shí)。
數(shù)字和值表示現(xiàn)實(shí)中正在發(fā)生的事情。現(xiàn)實(shí)可能是時(shí)間，收入，游戲得分，業(yè)務(wù)指標(biāo)，健身跟蹤等。我們通過(guò)運(yùn)動(dòng)來(lái)區(qū)分的是“量值主體”是動(dòng)態(tài)的，而這些量值反映的是該動(dòng)態(tài)價(jià)值集中的某些東西。
這種關(guān)系不僅會(huì)被視覺(jué)上包含價(jià)值的靜態(tài)對(duì)象所迷失，而且還會(huì)失去另一個(gè)更深層次的機(jī)會(huì)。
Credit: Barthelemy Chalvet, Gal Shir, Unknown
當(dāng)通過(guò)顯示或隱藏對(duì)象或組的哪一部分確定實(shí)用程序時(shí)，在接口對(duì)象或?qū)ο蠼M中創(chuàng)建連續(xù)性。
遮蓋對(duì)象的行為可以被認(rèn)為是遮蓋對(duì)象形狀與效果之間的關(guān)系。
因?yàn)樵O(shè)計(jì)師們熟悉靜態(tài)設(shè)計(jì)中的遮蓋，我們有必要同UX運(yùn)動(dòng)原理“屏蔽”做區(qū)分，因?yàn)樗且砸粋€(gè)行為動(dòng)作發(fā)生，而不是作為一個(gè)狀態(tài)。
通過(guò)暫時(shí)使用對(duì)象的顯示和隱藏區(qū)域，效用以連續(xù)和無(wú)縫的方式轉(zhuǎn)換。這也具有保留敘述流的效果。
Credit: Anish Chandran
在示例中，頁(yè)眉變成相冊(cè)時(shí)會(huì)更改邊界形狀和位置，但不會(huì)更改內(nèi)容。既改變了圖像的效果，同時(shí)將內(nèi)容保留在蒙版中——這是個(gè)相當(dāng)巧妙的技巧。這是非實(shí)時(shí)發(fā)生的，是一種過(guò)渡，在用戶(hù)執(zhí)行某個(gè)操作后即被激活。
請(qǐng)記住，UI動(dòng)畫(huà)原理是暫時(shí)出現(xiàn)的，并通過(guò)連續(xù)性、敘述、關(guān)系和期望來(lái)提升可用性。在上述參考中，對(duì)象本身不變，但也具有邊界和位置，這兩個(gè)因素最決定設(shè)計(jì)的樣子。
當(dāng)分層對(duì)象依賴(lài)于位置時(shí)，在視覺(jué)平地中創(chuàng)建與空間的關(guān)系。
疊加層通過(guò)允許用戶(hù)利用平地排序?qū)傩?，?lái)克服非空間層次結(jié)構(gòu)的缺乏，從而提升可用性。為了使飛機(jī)稍微降落，Overlay允許設(shè)計(jì)人員使用運(yùn)動(dòng)來(lái)傳達(dá)與位置有關(guān)的對(duì)象，這些對(duì)象存在于非3D空間中其他對(duì)象的后面或前面。
Credit: Bady, Javi Pérez
在左側(cè)的示例中，前景對(duì)象向右滑動(dòng)以顯示其他背景對(duì)象的位置。在右側(cè)的示例中，整個(gè)場(chǎng)景向下滑動(dòng)以顯示其他內(nèi)容和選項(xiàng)（同時(shí)使用“偏移與延遲原理”傳達(dá)對(duì)象的個(gè)性）。在一定程度上，作為設(shè)計(jì)師，“層次”的概念是如此明顯以至于不言而喻。
當(dāng)新對(duì)象出現(xiàn)和分開(kāi)時(shí)，創(chuàng)建連續(xù)性、關(guān)系和敘述。
在當(dāng)前場(chǎng)景中（以及從當(dāng)前對(duì)象中）創(chuàng)建新對(duì)象時(shí)，以敘述方式說(shuō)明它們的外觀非常重要。在此宣言中，我強(qiáng)烈主張為對(duì)象的起源和離開(kāi)創(chuàng)建敘事框架的重要性。
簡(jiǎn)單的不透明褪色往往無(wú)法達(dá)到此效果。遮罩，克隆和維度是三種基于可用性的方法，可以產(chǎn)生很棒的使用體驗(yàn)。
Credit: Jakub Antalík, Jakub Antalík, Unknown
允許用戶(hù)在空間上定位自己與對(duì)象或場(chǎng)景的關(guān)系，而非在視覺(jué)層次。
與“蒙版運(yùn)動(dòng)原理”中的UX相似，“模糊化”既作為靜態(tài)現(xiàn)象又作為暫時(shí)現(xiàn)象存在。這可能會(huì)使沒(méi)有時(shí)間思考經(jīng)驗(yàn)的設(shè)計(jì)師（即瞬間之間的瞬間）感到困惑。設(shè)計(jì)人員通常按屏幕設(shè)計(jì)或按任務(wù)設(shè)計(jì)。認(rèn)為遮蔽是被遮蓋的行為，而不是被遮蓋的狀態(tài)。靜態(tài)設(shè)計(jì)表示被遮蓋的狀態(tài)，引入時(shí)間可以使我們了解物體被遮擋的行為。
Credit: Virgil Pana, Apple
從以上兩個(gè)示例中，我們可以看到，看起來(lái)像透明對(duì)象或疊加層的遮擋也是一種涉及時(shí)間上多個(gè)屬性的交互。各種常見(jiàn)的技術(shù)包括模糊效果和降低整體對(duì)象透明度，使用戶(hù)知道她正在操作的其他非主要內(nèi)容，即在主要對(duì)象層次結(jié)構(gòu)“之后”存在的世界。
用戶(hù)滾動(dòng)時(shí)，在視覺(jué)平面中創(chuàng)建空間層次結(jié)構(gòu)。
作為運(yùn)動(dòng)原理中的UX，“視差”描述了以不同速率運(yùn)動(dòng)的不同界面對(duì)象。
使用視差，用戶(hù)可以在保持設(shè)計(jì)完整性的同時(shí)專(zhuān)注于主要?jiǎng)幼骱蛢?nèi)容。背景元素會(huì)為用戶(hù)在知覺(jué)和認(rèn)知上“消失”。
Credit: Austin Neill, Michael Sevilla
這對(duì)用戶(hù)的影響是，在使用期間清楚地定義各種對(duì)象關(guān)系。前景對(duì)象或移動(dòng)“快速”的對(duì)象在用戶(hù)面前顯示的“更近”。同樣，背景物體或“移動(dòng)較慢”的物體也被視為“離得更遠(yuǎn)”。
設(shè)計(jì)人員可以使用時(shí)間本身來(lái)創(chuàng)建這些關(guān)系，以告訴用戶(hù)界面中哪些對(duì)象具有更高的優(yōu)先級(jí)。因此，將背景或非交互式元素進(jìn)一步“推后”是有意義的。
當(dāng)新對(duì)象出現(xiàn)和離開(kāi)時(shí)，提供空間敘事框架。
對(duì)用戶(hù)體驗(yàn)至關(guān)重要的是連續(xù)性現(xiàn)象以及位置感。維度提供了一種強(qiáng)大的邏輯方式來(lái)克服用戶(hù)覺(jué)得平庸的體驗(yàn)。人類(lèi)非常善于使用空間框架在現(xiàn)實(shí)世界和數(shù)字體驗(yàn)中導(dǎo)航。提供空間維度的出現(xiàn)及消失的參考點(diǎn)，有助于增強(qiáng)用戶(hù)對(duì)于位置的感知。
此外，維度原則克服了視覺(jué)平面中的分層悖論，出現(xiàn)在其他對(duì)象的“前面”或“后面”。維度以三種方式呈現(xiàn)：折紙維度，浮動(dòng)維度和對(duì)象維度。折紙的維數(shù)可以用“折疊”或“鉸接”式的三維界面對(duì)象來(lái)考慮。
折紙維度示例
由于將多個(gè)對(duì)象組合為“折紙”結(jié)構(gòu)，因此即使看不見(jiàn)隱藏對(duì)象，在空間上仍可以說(shuō)它們“存在”。這有效地將用戶(hù)體驗(yàn)呈現(xiàn)為連續(xù)的空間事件，用戶(hù)可以在交互模型本身以及界面對(duì)象本身完成操作。
浮動(dòng)維度為接口對(duì)象提供了空間的起源和偏離，使交互模型直觀且具有很強(qiáng)的敘事性。
浮動(dòng)維數(shù)示例
在上面的示例中，維度是通過(guò)使用3D“卡片”來(lái)實(shí)現(xiàn)的。這提供了支持視覺(jué)設(shè)計(jì)的強(qiáng)大敘事框架。通過(guò)“翻轉(zhuǎn)”卡片來(lái)擴(kuò)展敘述，以訪(fǎng)問(wèn)其他內(nèi)容和交互性。
維度是一種強(qiáng)大的引入新元素的方法，可以最小地降低突發(fā)性。維度系數(shù)會(huì)讓交互對(duì)象具有更模擬真實(shí)感。
對(duì)象維數(shù)示例
多個(gè)2D層在3D空間中排列形成真實(shí)尺寸的對(duì)象，它們的維度是在實(shí)時(shí)和非實(shí)時(shí)過(guò)渡時(shí)刻顯示的。物體維數(shù)指使用者在不可見(jiàn)的空間位置上產(chǎn)生對(duì)物體效用的敏銳意識(shí)。
在導(dǎo)航界面對(duì)象和空間時(shí)保持連續(xù)性和空間敘述。
移動(dòng)（Dolly）和變焦（Zoom）是電影概念，指的是與相機(jī)有關(guān)的對(duì)象的運(yùn)動(dòng)，并且圖像本身在幀中的大小從遠(yuǎn)攝到近攝平滑地變化（反之亦然）。
在某些情況下，無(wú)法判斷對(duì)象是否正在縮放，它是否正在朝3D空間中的相機(jī)移動(dòng)或相機(jī)是否朝著3D空間中的對(duì)象移動(dòng)，以下三個(gè)示例說(shuō)明了可能的情況。
圖層是在搖動(dòng)，縮放還是在移動(dòng)相機(jī)？
將“移動(dòng)”和“縮放”的實(shí)例視為獨(dú)立的，因?yàn)樗鼈兩婕斑B續(xù)變換，并且滿(mǎn)足運(yùn)動(dòng)原理中用戶(hù)體驗(yàn)的要求：它們通過(guò)運(yùn)動(dòng)來(lái)提升可用性。
左邊的兩個(gè)圖像是鏡頭滑動(dòng)縮放，而右邊的圖像變焦縮放
多莉（Dolly）是一個(gè)電影術(shù)語(yǔ)，適用于推進(jìn)或遠(yuǎn)離對(duì)象的相機(jī)運(yùn)動(dòng)（它也適用于水平“跟蹤”運(yùn)動(dòng)，但在可用性方面不那么重要）。
Credit: Apple
在UX中，在空間上，此運(yùn)動(dòng)指的是觀察者視角的變化，也可能是指在對(duì)象更改位置時(shí)保持靜態(tài)的視角。多莉原理通過(guò)連續(xù)性和敘述性，來(lái)無(wú)縫過(guò)度對(duì)象目標(biāo)。多莉還可以結(jié)合“尺寸原則”，從而獲得更多空間體驗(yàn)和更多的深度，向用戶(hù)傳達(dá)當(dāng)前視圖“前”或“后”的其他區(qū)域。
縮放指的是既不是透視也不是物體在空間上的移動(dòng)，而是物體本身在縮放（或者我們的視野正在縮小，從而導(dǎo)致圖像放大）。這向用戶(hù)傳達(dá)對(duì)象所在“內(nèi)部”區(qū)域的信息。
蘭亭妙微(www.gerard.com.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話(huà)：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
作為 UI 設(shè)計(jì)師來(lái)說(shuō)，掌握產(chǎn)品設(shè)計(jì)中的每個(gè)組成要素是非常必要的，所謂精細(xì)化的設(shè)計(jì)就是把控好每一個(gè)細(xì)節(jié)的深入。隨著大屏手機(jī)的普及，在人機(jī)交互的探索上面設(shè)計(jì)師追求著更多提高用戶(hù)體驗(yàn)的設(shè)計(jì)方式，不過(guò)萬(wàn)變不離其宗，用戶(hù)體驗(yàn)沉淀下來(lái)的行為習(xí)慣依然影響著我們的設(shè)計(jì)。
就拿導(dǎo)航設(shè)計(jì)來(lái)深入探索，隨著產(chǎn)品設(shè)計(jì)的不斷推進(jìn)，很多新穎的設(shè)計(jì)呈現(xiàn)帶給用戶(hù)更多的操作體驗(yàn)。本文就以移動(dòng)端底部標(biāo)簽欄導(dǎo)航為案例分析，和大家一起探索一下底部標(biāo)簽欄導(dǎo)航設(shè)計(jì)的千奇百態(tài)。
分享目錄
一、關(guān)于底部標(biāo)簽導(dǎo)航
二、UI 設(shè)計(jì)注意事項(xiàng)
三、UI 表現(xiàn)層類(lèi)別分析
四、移動(dòng)端線(xiàn)上案例分析
五、總結(jié)
一、關(guān)于底部標(biāo)簽導(dǎo)航
移動(dòng)端導(dǎo)航欄設(shè)計(jì)相當(dāng)于自身的骨架，是支撐產(chǎn)品中功能交互和內(nèi)容傳播的血肉。導(dǎo)航系統(tǒng)指引著用戶(hù)的操作軌跡，引導(dǎo)用戶(hù)抵達(dá)目的地和進(jìn)行相關(guān)的操作，將零散的內(nèi)容和功能進(jìn)行組織形成結(jié)構(gòu)化的可視軌跡。導(dǎo)航的存在因此顯得格外重要，也是梳理功能結(jié)構(gòu)需要重點(diǎn)確定的內(nèi)容，以此來(lái)形成整個(gè)產(chǎn)品的脈絡(luò)。
移動(dòng)端導(dǎo)航欄比較常見(jiàn)的有：底部標(biāo)簽欄導(dǎo)航、舵式導(dǎo)航、頂部標(biāo)簽(Tab)導(dǎo)航、宮格式導(dǎo)航、輪播（平鋪）式導(dǎo)航、懸浮 icon 導(dǎo)航、列表式導(dǎo)航欄、抽屜式導(dǎo)航、下拉導(dǎo)航/菜單導(dǎo)航等等。我們比較常見(jiàn)的產(chǎn)品中采用底部標(biāo)簽欄導(dǎo)航的居多，便于用戶(hù)進(jìn)行頻繁的操作，這也是本文接下來(lái)重點(diǎn)和大家探索的話(huà)題方向。
在移動(dòng)端產(chǎn)品中底部標(biāo)簽欄導(dǎo)航是最常用的導(dǎo)航模式，常作為一級(jí)目錄的導(dǎo)航，位于產(chǎn)品界面底部。根據(jù)用戶(hù)對(duì)于界面的操作熱區(qū)來(lái)看，底部是用戶(hù)可以輕松點(diǎn)擊的區(qū)域，無(wú)論用戶(hù)單手還是雙手操作都十分便利。
在底部標(biāo)簽欄導(dǎo)航的基礎(chǔ)上進(jìn)行拓展欄設(shè)計(jì)也是比較常見(jiàn)的形式，也就是舵式導(dǎo)航。突出中間的功能強(qiáng)化用戶(hù)的關(guān)注度，引導(dǎo)用戶(hù)使用更多延展功能。底部標(biāo)簽欄導(dǎo)航和底部（舵式）拓展欄都屬于底部導(dǎo)航的范圍，本文將會(huì)重點(diǎn)以此類(lèi)型為主進(jìn)行梳理。
二、UI 設(shè)計(jì)注意事項(xiàng)
底部標(biāo)簽欄導(dǎo)航非常直觀的告訴用戶(hù)當(dāng)前的位置，也便于用戶(hù)進(jìn)行同一層級(jí)間的不同模塊切換。由于具有很強(qiáng)的包容性，不會(huì)與其他功能模塊形成干擾，也能與多種導(dǎo)航模式進(jìn)行組合使用。
底部標(biāo)簽欄導(dǎo)航在模塊的選擇上面通常是 3-5 個(gè)，比較常見(jiàn)的為 5 個(gè)，3 個(gè)模塊相對(duì)比較松散，運(yùn)用案例不是很多，除非業(yè)務(wù)功能較少。在設(shè)計(jì)表現(xiàn)形式上面有：icon + 文字、純 icon、純文字形式，比較主流的還是 icon + 文字的形式，可以降低用戶(hù)的理解成本和記憶負(fù)擔(dān)，提高用戶(hù)的操作體驗(yàn)。
底部（舵式）拓展欄是為了突出中間功能設(shè)計(jì)，吸引用戶(hù)關(guān)注度，提高更多隱藏功能的使用概率。這種導(dǎo)航模式較為常見(jiàn)，比如轉(zhuǎn)轉(zhuǎn)、抖音、馬蜂窩旅游、閑魚(yú)等等均有使用?？梢蕴岣邔?dǎo)航欄設(shè)計(jì)的趣味性和特征性，引導(dǎo)用戶(hù)操作更多功能和貢獻(xiàn)更多內(nèi)容。不過(guò)這樣的設(shè)計(jì)由于關(guān)注度被吸引，進(jìn)而影響其它一級(jí)模塊的關(guān)注度，由于隱藏的功能增加了用戶(hù)的記憶負(fù)擔(dān)和操作負(fù)擔(dān)，利弊權(quán)衡需要產(chǎn)品設(shè)計(jì)師進(jìn)行評(píng)估。
在進(jìn)行設(shè)計(jì)的過(guò)程中，功能模塊的確定需要起到牽引的重要作用，鏈接起整個(gè)產(chǎn)品的功能脈絡(luò)；設(shè)計(jì)表現(xiàn)上面需要區(qū)分默認(rèn)和點(diǎn)擊狀態(tài)，可以跳出規(guī)范的束縛，但是需要在不影響其它業(yè)務(wù)模塊的前提下進(jìn)行。
三、UI 表現(xiàn)層類(lèi)別分析
底部標(biāo)簽欄導(dǎo)航在 UI 表現(xiàn)層方面也是千奇百態(tài)，除了常規(guī)的置底形式，設(shè)計(jì)師也發(fā)散了更多新穎的表現(xiàn)。突破現(xiàn)有規(guī)范的束縛，不被固有化思維所限制，才能不斷的進(jìn)行設(shè)計(jì)創(chuàng)新。
3.1 最穩(wěn)定的常規(guī)設(shè)計(jì)形式
底部標(biāo)簽欄導(dǎo)航最常見(jiàn)的設(shè)計(jì)形式依然是置于底部的常規(guī)形式，通常是 3-5 個(gè)功能模塊為主，其中 5 個(gè)功能模塊是較為常見(jiàn)的。形成差異化的是在圖標(biāo)設(shè)計(jì)上面進(jìn)行發(fā)揮，難度較大的設(shè)計(jì)是結(jié)合品牌基因或者特征性元素表達(dá)，也有一些是純文字的設(shè)計(jì)形式。
除了圖標(biāo)上面進(jìn)行發(fā)揮以外，也有一些會(huì)在背景上面進(jìn)行裝飾，體現(xiàn)產(chǎn)品差異化。不過(guò)最常見(jiàn)的依然還是單色為主，或者根據(jù)模塊的需求在切換的過(guò)程中選擇使用不同的背景體現(xiàn)。雖然是最常規(guī)的導(dǎo)航模式，但是設(shè)計(jì)師依然可以在布局形式、圖標(biāo)風(fēng)格、配色關(guān)系、背景裝飾等方面進(jìn)行發(fā)揮。
3.2 動(dòng)靜結(jié)合的微動(dòng)效表現(xiàn)
微動(dòng)效在產(chǎn)品設(shè)計(jì)中的運(yùn)用逐漸變得頻繁，相較于靜態(tài)的表現(xiàn)更能引起用戶(hù)的關(guān)注度，也能帶來(lái)趣味性和互動(dòng)性。在底部標(biāo)簽欄導(dǎo)航中的圖標(biāo)設(shè)計(jì)上面，默認(rèn)的采用靜態(tài)展示，而點(diǎn)擊狀態(tài)以動(dòng)效的形式進(jìn)行演變過(guò)度也是非常常見(jiàn)的設(shè)計(jì)處理。
在進(jìn)行動(dòng)效設(shè)計(jì)的時(shí)候，可以采用整個(gè)圖標(biāo)位移形成動(dòng)效，這是最簡(jiǎn)單的動(dòng)效表現(xiàn)，通常是上下彈跳位移。比較復(fù)雜的是圖標(biāo)本身的結(jié)構(gòu)動(dòng)效，這也是圖標(biāo)動(dòng)效轉(zhuǎn)換比較連貫的形式。
3.3 突出規(guī)范框架的束縛表現(xiàn)
雖然大部分產(chǎn)品設(shè)計(jì)都會(huì)優(yōu)先采用官方的設(shè)計(jì)規(guī)范，但是為了突出設(shè)計(jì)的差異化，也會(huì)進(jìn)行一些突出規(guī)范框架的設(shè)計(jì)。在保持原有不變的導(dǎo)航設(shè)計(jì)中，我們可以針對(duì)局部功能模塊進(jìn)行突出表現(xiàn)（比如舵式導(dǎo)航），也可以將點(diǎn)擊狀態(tài)進(jìn)行突出表現(xiàn)。
3.4 懸浮層增強(qiáng)空間感
一些產(chǎn)品為了增強(qiáng)界面結(jié)構(gòu)的空間感，針對(duì)底部標(biāo)簽欄導(dǎo)航設(shè)計(jì)采用懸浮層的設(shè)計(jì)來(lái)進(jìn)行表現(xiàn)，使得界面的通透性和呼吸感更強(qiáng)。這種設(shè)計(jì)形式依然保留了原本的結(jié)構(gòu)，只是預(yù)留了左右和底部的間距，也有一些產(chǎn)品結(jié)合交互動(dòng)效的形式表達(dá)，滑動(dòng)過(guò)程中采用隱藏部分功能，增加瀏覽過(guò)程的內(nèi)容輸出面積。
3.5 底部拓展/隱藏式設(shè)計(jì)
隨著一些工具型產(chǎn)品的使用，功能模塊變得復(fù)雜而繁多，也有將更多功能隱藏在底部標(biāo)簽欄里面，上拉交互時(shí)顯示。這種設(shè)計(jì)形式將底部標(biāo)簽欄進(jìn)行了深度的開(kāi)發(fā)利用，但是功能隱藏比較深，曝光度受到了一定的影響，不適合較為重要的功能模塊設(shè)計(jì)。
3.6 小結(jié)
底部標(biāo)簽欄導(dǎo)航在 UI 表現(xiàn)層方面還有更多可以給予設(shè)計(jì)師發(fā)揮的空間，設(shè)計(jì)沒(méi)有固定不變的形式，在于不斷的發(fā)現(xiàn)、總結(jié)和創(chuàng)新。期待大家發(fā)現(xiàn)更多設(shè)計(jì)解決方案和進(jìn)行更多設(shè)計(jì)創(chuàng)新，下面將會(huì)為大家梳理線(xiàn)上的優(yōu)秀案例，讓我們可以站在巨人的肩膀上不斷超越。
四、移動(dòng)端線(xiàn)上案例分析
移動(dòng)端底部標(biāo)簽欄導(dǎo)航設(shè)計(jì)在眾多產(chǎn)品中浮現(xiàn)出很多優(yōu)秀的案例，對(duì)于線(xiàn)上案例的分析將有助于我們進(jìn)行落地性的思考，新穎的設(shè)計(jì)不再是飛機(jī)稿，而是可以實(shí)現(xiàn)的創(chuàng)意。創(chuàng)新是建立在不斷的發(fā)現(xiàn)、總結(jié)、分析和改變，希望這些案例可以帶給你點(diǎn)滴靈感。
4.1 背景結(jié)合特定節(jié)日增強(qiáng)氛圍
在大部分情況下底部標(biāo)簽欄導(dǎo)航的背景為單色的居多，不干擾信息的傳遞而保障用戶(hù)的瀏覽體驗(yàn)。也有在特定節(jié)日結(jié)合氛圍營(yíng)造對(duì)背景進(jìn)行簡(jiǎn)單的裝飾，可以在節(jié)假日或者特殊時(shí)期引起用戶(hù)的共勉，增強(qiáng)產(chǎn)品的情感化設(shè)計(jì)。
比如寶寶巴士?jī)焊?APP 的底部標(biāo)簽欄導(dǎo)航設(shè)計(jì)，在之前的一些版本迭代過(guò)程中，結(jié)合特定氛圍營(yíng)造進(jìn)行背景設(shè)計(jì)，也是一種非常不錯(cuò)的設(shè)計(jì)表達(dá)形式。由于屬于兒童類(lèi)產(chǎn)品，點(diǎn)擊功能模塊切換的過(guò)程中還伴隨著音樂(lè)，視聽(tīng)體驗(yàn)的結(jié)合使得操作體驗(yàn)備受關(guān)注。
4.2 強(qiáng)化消息提示的關(guān)注度
系統(tǒng)通知或者消息提示往往都會(huì)被用戶(hù)所忽略，盡管很多產(chǎn)品都會(huì)將消息作為單獨(dú)的功能模塊來(lái)設(shè)計(jì)，但是依然擺脫不了被忽略的問(wèn)題。微信讀書(shū)將通知和私信等消息提示結(jié)合在個(gè)人中心的設(shè)計(jì)中，以氣泡彈出的形式展示在圖標(biāo)紅點(diǎn)提示上方。以此來(lái)吸引用戶(hù)的關(guān)注度，增加消息閱讀率。
4.3 特異設(shè)計(jì)引導(dǎo)功能模塊關(guān)注度
在底部標(biāo)簽欄導(dǎo)航的多個(gè)功能模塊中，為了突出或者引導(dǎo)使用某個(gè)功能時(shí)，會(huì)采用特異構(gòu)成的設(shè)計(jì)做法，在原本的設(shè)計(jì)規(guī)范上面突出表現(xiàn)個(gè)例，以此來(lái)引起用戶(hù)的關(guān)注度。比如騰訊動(dòng)漫在第一次進(jìn)入 APP 時(shí)，圈子的圖標(biāo)設(shè)計(jì)會(huì)特意突出，點(diǎn)擊之后恢復(fù)原樣，以此吸引用戶(hù)對(duì)該欄目的關(guān)注，增強(qiáng)功能模塊的使用率。
4.4 圖標(biāo)設(shè)計(jì)的年輕化趨勢(shì)
隨著 95 后成為互聯(lián)網(wǎng)原住民，產(chǎn)品設(shè)計(jì)逐漸趨向于“年輕化”的探索和挖掘。優(yōu)酷 V9.0 升級(jí)后設(shè)計(jì)風(fēng)格更年輕化，底部標(biāo)簽欄圖標(biāo)設(shè)計(jì)采用低純度、高明度的多色漸變，結(jié)合微動(dòng)效使得風(fēng)格更加青春活潑，符合年輕一代的審美需求。年輕化的設(shè)計(jì)不僅提高感官體驗(yàn)，也拉近了產(chǎn)品與用戶(hù)之間的親和力。
4.5 趣味性的情感化設(shè)計(jì)融入
情感化的設(shè)計(jì)能夠拉近產(chǎn)品與用戶(hù)之間的親和力，這也是設(shè)計(jì)師在不斷探索并延展的設(shè)計(jì)方向。QQ 作為社交工具而言，如何更加符合年輕化的設(shè)計(jì)需求，在底部標(biāo)簽欄圖標(biāo)的設(shè)計(jì)上面也是用盡了心思。消息模塊的圖標(biāo)設(shè)計(jì)成各種搞怪的表情，在拖拽的時(shí)候會(huì)切換不同的表情，帶給用戶(hù)更加趣味性的體驗(yàn)，讓人會(huì)心一笑。
4.6 首頁(yè)圖標(biāo)強(qiáng)化品牌曝光
為了強(qiáng)化產(chǎn)品品牌的曝光度，在進(jìn)行底部標(biāo)簽欄圖標(biāo)設(shè)計(jì)的時(shí)候，會(huì)將首頁(yè)圖標(biāo)的點(diǎn)擊狀態(tài)切換為品牌 LOGO 的形式，以此來(lái)增加品牌的曝光度。設(shè)計(jì)上面的選擇有 LOGO 圖形、吉祥物、應(yīng)用圖標(biāo)、品牌局部圖形等，會(huì)根據(jù)品牌 LOGO 的造型靈活選擇。
4.7 舵式導(dǎo)航轉(zhuǎn)一轉(zhuǎn)增強(qiáng)關(guān)注度
底部（舵式）拓展欄導(dǎo)航是突出中間功能模塊設(shè)計(jì)來(lái)強(qiáng)化關(guān)注度，除了靜態(tài)的表達(dá)以外，結(jié)合微動(dòng)效更能起到強(qiáng)化突出的作用。轉(zhuǎn)轉(zhuǎn)結(jié)合吉祥物和微動(dòng)效運(yùn)用在舵式導(dǎo)航的設(shè)計(jì)中，不僅提高用戶(hù)的關(guān)注度，情感化的設(shè)計(jì)還能增強(qiáng)產(chǎn)品的親和力。
4.8 結(jié)合營(yíng)銷(xiāo)內(nèi)容多層共用
產(chǎn)品中的營(yíng)銷(xiāo)結(jié)合是最為常見(jiàn)的，產(chǎn)品設(shè)計(jì)師也在不斷地思考更多可結(jié)合的功能模塊，舵式導(dǎo)航的區(qū)域被充分利用是最為便利的。芒果 TV 將營(yíng)銷(xiāo)內(nèi)容與會(huì)員模塊圖標(biāo)進(jìn)行結(jié)合，在保持原有功能操作的基礎(chǔ)上強(qiáng)化營(yíng)銷(xiāo)活動(dòng)的曝光度，鼓勵(lì)更多用戶(hù)參與活動(dòng)。
4.9 微動(dòng)效結(jié)合多層功能運(yùn)用
微動(dòng)效運(yùn)用到底部標(biāo)簽欄導(dǎo)航圖標(biāo)動(dòng)效中較為常見(jiàn)，可以帶給用戶(hù)趣味性的點(diǎn)擊體驗(yàn)。對(duì)于一些首頁(yè)采用瀑布流設(shè)計(jì)的產(chǎn)品，也會(huì)在用戶(hù)上滑瀏覽內(nèi)容到一定量的時(shí)候?qū)⑹醉?yè)變化為“置頂”的操作，方便用戶(hù)快速置頂。比如愛(ài)奇藝 APP 將品牌色強(qiáng)化在圖標(biāo)的設(shè)計(jì)中，結(jié)合微動(dòng)效的變化帶給用戶(hù)趣味性和強(qiáng)化品牌記憶，在首頁(yè)圖標(biāo)和置頂圖標(biāo)切換的過(guò)程中也采用了微動(dòng)效的形式，過(guò)度更加自然流暢，也能更加醒目的提示用戶(hù)。
4.10 微動(dòng)效結(jié)合突出框架的束縛
一些尋求突破的產(chǎn)品，在設(shè)計(jì)的時(shí)候也嘗試了突出規(guī)范框架的束縛表現(xiàn)，點(diǎn)擊狀態(tài)會(huì)突出局部來(lái)強(qiáng)化。結(jié)合動(dòng)效的變化形成自然過(guò)度，突出的設(shè)計(jì)更能引起用戶(hù)的關(guān)注度，明確自己當(dāng)前所處的位置。這樣的表現(xiàn)形式不僅可以形成設(shè)計(jì)差異化，也能讓用戶(hù)操作路徑更加明顯，比如愛(ài)奇藝早期版本、美團(tuán)外賣(mài)等產(chǎn)品。
4.11 懸浮層設(shè)計(jì)突破底部標(biāo)簽欄常規(guī)表現(xiàn)
設(shè)計(jì)師都在不斷的探索設(shè)計(jì)的差異化，敢于創(chuàng)新才能尋求新的可能性。脈脈在最近的迭代中將底部標(biāo)簽欄的設(shè)計(jì)采用懸浮層的形式表現(xiàn)，使得界面內(nèi)容呈現(xiàn)的呼吸感更強(qiáng)，也增加了界面結(jié)構(gòu)的空間感。在保持基本設(shè)計(jì)規(guī)范的前提下進(jìn)行小小的變化，就能帶來(lái)設(shè)計(jì)的差異表現(xiàn)，也能帶給用戶(hù)較為新穎的感官體驗(yàn)。
4.12 懸浮層設(shè)計(jì)結(jié)合交互動(dòng)效的雙向運(yùn)用
交互動(dòng)效是 UI 設(shè)計(jì)師在靜態(tài)設(shè)計(jì)稿中要逐步突破的一種技能，交互動(dòng)效可以讓我們的設(shè)計(jì)表達(dá)更加直觀，提高產(chǎn)品的互動(dòng)性和趣味性。馬蜂窩旅游在進(jìn)行底部標(biāo)簽欄突破的過(guò)程中，除了采用新穎的懸浮層設(shè)計(jì)以外，在上滑瀏覽內(nèi)容時(shí)采用隱藏局部功能的處理方式，讓內(nèi)容的輸出面積更大。在下滑或者停頓的過(guò)程中恢復(fù)默認(rèn)導(dǎo)航，探知用戶(hù)行為習(xí)慣并給出不同的交互反饋，帶給用戶(hù)更高的操作體驗(yàn)和互動(dòng)趣味性。
4.13 底部拓展設(shè)計(jì)承載更多功能模塊
對(duì)于一些功能模塊較多的產(chǎn)品，產(chǎn)品設(shè)計(jì)師會(huì)盡可能的開(kāi)發(fā)每一個(gè)常規(guī)的功能，拓展出更多可以進(jìn)行設(shè)計(jì)延展的模塊。釘釘 APP 在進(jìn)行底部標(biāo)簽欄設(shè)計(jì)的時(shí)候，就將更多功能模塊隱藏在上拉展開(kāi)欄中，方便用戶(hù)進(jìn)行快捷操作。充分的對(duì)底部標(biāo)簽欄進(jìn)行了深度挖掘，利用手勢(shì)的變化實(shí)現(xiàn)更多功能模塊的切換，提高了用戶(hù)的操作體驗(yàn)。
關(guān)于移動(dòng)端底部標(biāo)簽欄導(dǎo)航設(shè)計(jì)還有很多非常不錯(cuò)的線(xiàn)上案例，這里就不一一列舉啦！優(yōu)秀的案例總結(jié)能夠帶給我們更多的靈感參考，基于優(yōu)秀之上我們才能設(shè)計(jì)出更新穎的作品，希望以此拋磚引玉，期待大家發(fā)現(xiàn)更多好玩的設(shè)計(jì)。
五、總結(jié)
對(duì)于 UI 設(shè)計(jì)師來(lái)說(shuō)，產(chǎn)品體驗(yàn)是一種習(xí)慣的養(yǎng)成，結(jié)合體驗(yàn)的日記化摘錄形成設(shè)計(jì)思路的總結(jié)?？偨Y(jié)是為了形成最終可供靈感借鑒的經(jīng)驗(yàn)，基于優(yōu)秀的案例分析才能形成更多的設(shè)計(jì)解決方案。
本文以移動(dòng)端底部標(biāo)簽欄導(dǎo)航設(shè)計(jì)的經(jīng)驗(yàn)分析為大家進(jìn)行梳理，任何的設(shè)計(jì)表達(dá)都不是不變的規(guī)律，掌握的是這種設(shè)計(jì)分析和總結(jié)的思路，以此反推出更多的設(shè)計(jì)總結(jié)。希望本文的思路作為拋磚引玉，帶給你更多的思路。
蘭亭妙微(www.gerard.com.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話(huà)：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
動(dòng)效在 UI 場(chǎng)景中的運(yùn)用已經(jīng)非常普遍，帶給用戶(hù)的體驗(yàn)升級(jí)也是很直觀的。無(wú)論是一個(gè)圖標(biāo)動(dòng)效到界面間的轉(zhuǎn)場(chǎng)動(dòng)效，還是聊天場(chǎng)景中的表情動(dòng)效等，都證明了動(dòng)效已經(jīng)是無(wú)處不在。
最近黑馬哥在體驗(yàn)產(chǎn)品的過(guò)程中，發(fā)現(xiàn)了很多優(yōu)秀的動(dòng)效案例，今天選擇其中的 10 個(gè)和大家一起交流學(xué)習(xí)，希望能夠帶給大家一些靈感啟發(fā)。
01. 動(dòng)效，讓點(diǎn)贊與眾不同
動(dòng)態(tài)表情為社交場(chǎng)景帶來(lái)更活躍的體驗(yàn)，使得交流過(guò)程變得更加趣味性。一個(gè)動(dòng)態(tài)的表情不僅活躍了氛圍，也使得通過(guò)簡(jiǎn)單的一個(gè)符號(hào)代表了千言萬(wàn)語(yǔ)。
最近在使用釘釘 APP 進(jìn)行聊天的過(guò)程中，發(fā)現(xiàn)輸入框的大拇指圖標(biāo)在長(zhǎng)按的時(shí)候結(jié)合了動(dòng)效的變化，對(duì)話(huà)場(chǎng)景中出現(xiàn)的大拇指表情會(huì)隨著長(zhǎng)按而增大。結(jié)合動(dòng)效和長(zhǎng)按手勢(shì)，為點(diǎn)贊的圖標(biāo)增加了不一樣的趣味性，帶給用戶(hù)不一樣的社交體驗(yàn)。
02. 動(dòng)態(tài)提醒，增強(qiáng)消息的關(guān)注度
各類(lèi)通知/消息在產(chǎn)品中隨處可見(jiàn)，紅點(diǎn)提示剛出現(xiàn)的時(shí)候還引起了用戶(hù)強(qiáng)迫癥，短時(shí)間內(nèi)也增強(qiáng)了消息的閱讀率。隨著紅點(diǎn)效應(yīng)逐漸淡化，未讀消息的點(diǎn)擊率逐漸降低，大家都在嘗試更多提高關(guān)注度的形式。
支付寶在消息模塊的服務(wù)提醒中，采用了動(dòng)態(tài)形式提高關(guān)注度。當(dāng)用戶(hù)點(diǎn)擊消息進(jìn)入界面時(shí)，小鈴鐺圖標(biāo)會(huì)左右晃動(dòng)，以此來(lái)吸引用戶(hù)的目光，達(dá)到增加關(guān)注度的目的。
03. 圖標(biāo)動(dòng)效，讓你脫穎而出
在金剛區(qū)眾多的業(yè)務(wù)模塊中，想要突出重點(diǎn)模塊的關(guān)注度，采用動(dòng)態(tài)圖標(biāo)是比較常用的方式。采用動(dòng)靜結(jié)合的形式，會(huì)讓動(dòng)態(tài)表達(dá)得到突出。
比如 Keep App 將活動(dòng)挑戰(zhàn)圖標(biāo)動(dòng)效化，在不改變配色規(guī)則和圖標(biāo)設(shè)計(jì)規(guī)范前提下，依然可以達(dá)到突出主題的作用。
04. 博人眼球的動(dòng)態(tài)懸浮廣告
在不破壞產(chǎn)品結(jié)構(gòu)的前提下，融入廣告的做法中，懸浮層廣告是較為明顯的形式。通常是靜態(tài)異形和動(dòng)態(tài)異形較多，而動(dòng)態(tài)的關(guān)注度相對(duì)更強(qiáng)一些。
比如 Keep App 將活動(dòng)的折扣信息以懸浮層的形式表達(dá)，既不會(huì)占用太多空間（隨著滑動(dòng)會(huì)隱藏顯示），又能吸引用戶(hù)的關(guān)注度。如果用戶(hù)覺(jué)得影響操作，也可以直接關(guān)閉，就不會(huì)反復(fù)提醒而形成干擾。
05. 內(nèi)容模塊結(jié)合動(dòng)效替換突出存在感
在一些內(nèi)容量比較多的產(chǎn)品中，比如電商產(chǎn)品，很多內(nèi)容模塊都是百花齊放。都想要突出自己模塊的存在感，帶來(lái)更好的流量引入。而動(dòng)效的結(jié)合也是不錯(cuò)的選擇，但是需要考慮動(dòng)效的干擾度。
當(dāng)當(dāng) App 在突出今日搶購(gòu)欄目時(shí)，為了不影響臨近板塊的干擾度，利用動(dòng)效轉(zhuǎn)場(chǎng)來(lái)替換展示的商品信息?？s放替換商品時(shí)的動(dòng)效既能達(dá)到差異化，也不會(huì)破壞整體的結(jié)構(gòu)，算是一舉兩得的設(shè)計(jì)解決方案。
06. 微弱的動(dòng)效也能呈現(xiàn)有溫度的設(shè)計(jì)
有時(shí)候在進(jìn)行產(chǎn)品設(shè)計(jì)的時(shí)候，動(dòng)效帶來(lái)的關(guān)注度并不是需要很強(qiáng)的表現(xiàn)力，一些微弱的動(dòng)效依然可以提升產(chǎn)品體驗(yàn)，帶給用戶(hù)更有溫度的設(shè)計(jì)。
自如 App 整體的設(shè)計(jì)都是做得非常不錯(cuò)的，在“我的”板塊頭部區(qū)域，結(jié)合背景插畫(huà)視覺(jué)感也是非常不錯(cuò)。插畫(huà)中部分元素的微動(dòng)效增強(qiáng)了生活氣息和真實(shí)感，讓用戶(hù)感受到這是一款有溫度的產(chǎn)品，提升用戶(hù)的好感度。
07. 動(dòng)態(tài)感十足的底部標(biāo)簽欄
圖標(biāo)動(dòng)效運(yùn)用到底部標(biāo)簽欄十分普遍，在這個(gè)頻繁切換的操作中，動(dòng)態(tài)的形式可以帶來(lái)更強(qiáng)的趣味性和關(guān)注度。
優(yōu)酷 App 底部標(biāo)簽欄采用多種顏色變化轉(zhuǎn)場(chǎng)，結(jié)合路徑動(dòng)效帶來(lái)動(dòng)感十足的體驗(yàn)。首頁(yè)圖標(biāo)還結(jié)合了刷新的功能，方便用戶(hù)進(jìn)行內(nèi)容的刷新，增強(qiáng)用戶(hù)體驗(yàn)感。
08. 拓展功能的動(dòng)態(tài)指引設(shè)計(jì)
針對(duì)一些功能體量較大的產(chǎn)品，會(huì)經(jīng)常結(jié)合一些隱藏式設(shè)計(jì)，拓展出更多功能操作。通常默認(rèn)為展開(kāi)狀態(tài)，在滑動(dòng)瀏覽內(nèi)容時(shí)隱藏，通過(guò)動(dòng)效吸引點(diǎn)擊展開(kāi)，不會(huì)造成主內(nèi)容的干擾。
比如平安口袋銀行底部標(biāo)簽欄上方的拓展功能區(qū)，動(dòng)態(tài)形式的展開(kāi)與隱藏方便用戶(hù)瀏覽主頁(yè)內(nèi)容。個(gè)別內(nèi)容采用動(dòng)態(tài)設(shè)計(jì)（點(diǎn)我抽獎(jiǎng)），突出其點(diǎn)擊欲望。動(dòng)態(tài)設(shè)計(jì)不僅提高了功能的曝光度，也能引導(dǎo)用戶(hù)操作，將繁瑣的操作變得更便利。
09. 結(jié)合動(dòng)態(tài) IP 的下拉刷新
針對(duì)下拉刷新這一常規(guī)操作，設(shè)計(jì)形式也是豐富多樣。結(jié)合 IP 形象進(jìn)行動(dòng)態(tài)演變完成刷新動(dòng)作，被很多產(chǎn)品設(shè)計(jì)師所采納。
美團(tuán)外賣(mài)就將品牌 IP 形象結(jié)合得恰到好處，下拉刷新時(shí)兩只耳朵搖擺非常俏皮可愛(ài)，松開(kāi)后 IP 形象露出，還配合眨眼睛等可愛(ài)的表情動(dòng)效。情感化設(shè)計(jì)結(jié)合動(dòng)態(tài)表現(xiàn)，拉近與用戶(hù)之間的親和力，帶給用戶(hù)更人性化的使用體驗(yàn)。
10. 圖標(biāo)動(dòng)效帶動(dòng)局部功能的關(guān)注度
對(duì)于一些局部功能或者模塊占比較小的欄目，為了提高曝光度，獲得用戶(hù)的關(guān)注度，動(dòng)態(tài)的形式是比較常用的方法。通常會(huì)在圖標(biāo)部分、文字部分、裝飾元素部分等進(jìn)行動(dòng)效設(shè)計(jì)，帶來(lái)的效果也是顯而易見(jiàn)。
比如 QQ 音樂(lè)在“我的”模塊中，將活動(dòng)中心、會(huì)員中心、每日簽到的圖標(biāo)采用動(dòng)態(tài)設(shè)計(jì)形式，雖然幾個(gè)模塊占比較小，但是依然能夠獲得用戶(hù)的關(guān)注度。
小結(jié)
動(dòng)效表達(dá)在產(chǎn)品設(shè)計(jì)中的應(yīng)用越發(fā)普及，不僅可以強(qiáng)化功能的關(guān)注度，也能帶給用戶(hù)感官體驗(yàn)上的升級(jí)。優(yōu)秀案例的積累和分析，有助于我們掌握更多的表現(xiàn)形式，靈活的運(yùn)用到項(xiàng)目設(shè)計(jì)中。
作者：黑馬青年（vx: heimaux）
本文由 @黑馬青年 原創(chuàng)發(fā)布。未經(jīng)許可，禁止轉(zhuǎn)載。
蘭亭妙微(www.gerard.com.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話(huà)：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.gerard.com.cn