掌握一些有效的技巧，有時能事半功倍。
由于識別性不高，手寫的英文單詞最好是無關(guān)緊要的，主要是為了起裝飾作用。
怎么樣？以上的7個版式小技巧還不錯吧，趕緊去試一試。你們可能也發(fā)現(xiàn)了，其實它們都是巧妙運用了設(shè)計中的對比原則，比如大小對比、粗細對比、點線面、平面與立體對比、輪廓對比、虛實對比等等。所以熟練掌握對比非常重要，你也可以在對比的基礎(chǔ)上，嘗試出很多有趣、好看的排版技巧和設(shè)計形式。
蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進群請加藍小助微信ben_lanlan。
今天給大家探討關(guān)于產(chǎn)品設(shè)計中的布局樣式分析，希望通過本文的梳理和大家一起做一次探索，解析優(yōu)秀案例的經(jīng)驗。
Banner 對于設(shè)計師來說并不陌生，更多的還是在于視覺表現(xiàn)的環(huán)節(jié)，作為視覺設(shè)計師來說是重點培養(yǎng)的能力之一。今天給大家探討的關(guān)于 UI 場景中的 Banner 布局樣式，并非是視覺層面的探索，而是關(guān)于產(chǎn)品設(shè)計中的布局樣式分析。
在產(chǎn)品中出現(xiàn) Banner 圖是比較常見的基礎(chǔ)功能，除了在其視覺創(chuàng)意層面不斷探索精進以外，UI 層面的樣式布局也在不斷嘗試更多不同的表現(xiàn)，希望通過本文的梳理和大家一起做一次探索，解析優(yōu)秀案例的經(jīng)驗。
分享目錄
一、Banner 視覺層表現(xiàn)類別
二、Banner 布局樣式分析
三、移動端線上案例分析
四、總結(jié)
一、Banner 視覺層表現(xiàn)類別
Banner 在 UI 場景中通常伴隨著輪播的形式展示，所以也經(jīng)常稱之為輪播圖，這也是導(dǎo)航的一種形式之一，也有輪播導(dǎo)航的功能。在產(chǎn)品中出現(xiàn)可以帶給用戶平臺需要重點傳播的內(nèi)容，比如活動信息和官宣咨詢等。
為了能引起用戶更高的關(guān)注度，Banner 在視覺層的表現(xiàn)上面也在不斷的創(chuàng)新。除了 Banner 設(shè)計創(chuàng)意、構(gòu)圖、配色等視覺層面發(fā)揮以外，在表現(xiàn)類別上面我分為靜態(tài)、動態(tài)、視頻、分層視差等。
1.1 靜態(tài) Banner 展示
靜態(tài)的輪播圖是最常見的，無論是設(shè)計效率還是技術(shù)落地都是最為便利的。Banner 畫面為靜態(tài)的圖片格式，在產(chǎn)品中分為單圖和多圖，單圖是靜態(tài)的展示形式，多圖可以自動輪播和手動滑動切換。
1.2 動態(tài) Banner 展示
動態(tài)表現(xiàn)的 Banner 相較于靜態(tài)而言更能引起用戶的關(guān)注度，強化信息重點，在一些重點元素和行動按鈕等地方實行動態(tài)表現(xiàn)。
如果采用動態(tài)的形式表現(xiàn)，通常為單圖的居多。動態(tài)表現(xiàn)可以引起高關(guān)注度，但是如果過多也會形成互相干擾，反而削弱了關(guān)注度。
在這個信息爆炸的互聯(lián)網(wǎng)環(huán)境中，產(chǎn)品設(shè)計師都在不斷的嘗試如何更快、更準(zhǔn)地獲得用戶的關(guān)注度。微動效無疑是一個不錯的選擇，無論是在功能交互還是視覺表現(xiàn)層面，都隨處可見。
1.3 視頻嵌入展示
視頻廣告由來已久，隨著短視頻的走熱，視頻嵌入到輪播廣告中逐漸增多。較多的表現(xiàn)形式為默認出現(xiàn)在首個 Banner 中，伴隨著倒計時出現(xiàn)，也可以關(guān)閉播放。此類廣告為了降低用戶在未知場景中的使用干擾，通常為靜音模式，帶給用戶更加友好的體驗。
也有一些產(chǎn)品欄目采用多個視頻輪播的形式，這個應(yīng)用場景相對較少，一些影視產(chǎn)品偶爾運用。
1.4 分層視差效果展示
為了帶給用戶不一樣的視覺呈現(xiàn)和互動體驗，也逐漸出現(xiàn)一些打破常規(guī)表現(xiàn)形式的輪播廣告。分層視差效果是其中變化較大的一種，有輪播疊加的視差、3D翻轉(zhuǎn)、元素和背景分離視差等。
元素或者背景之間的運動差異必將引起用戶高度的關(guān)注，帶來提高關(guān)注度的目的。產(chǎn)品設(shè)計師也在不斷嘗試更多分層視差的效果，帶給用戶不一樣的廣告體驗。
小結(jié)
Banner 在視覺表現(xiàn)層的創(chuàng)新有助于提高用戶對內(nèi)容的關(guān)注度，作為產(chǎn)品設(shè)計師我們都在不斷的嘗試更多可能性，除了在創(chuàng)意布局和色彩構(gòu)成等方面發(fā)揮以外，表現(xiàn)形式的差異也是至關(guān)重要。
二、Banner 布局樣式分析
鎖定了 Banner 的視覺表現(xiàn)形式以后，我們來分析一下 Banner 在界面布局中的樣式。造成布局差異的因素較多，比如 Banner 比例、大小、通欄、分欄、孤立還是背景對比等。
首先我們來看看通欄和分欄的差別，這個因素會影響 Banner 所能呈現(xiàn)的大小。常規(guī)理解都覺得 Banner 越大越好，如果考慮到產(chǎn)品內(nèi)容布局和信息層級區(qū)分方面，也會注意到整個界面布局的舒適度。所以，界面整體的風(fēng)格和布局樣式也會影響 Banner 布局樣式，需要融合而非格格不入。
如果遇到一些界面布局頭部采用深色，在布局 Banner 的時候為了讓空間感更強，也會讓 Banner 布局于頭部背景上層。通常背景色為固定色值和變動色值，變動色值會根據(jù)輪播圖的色彩來定義背景色值，這樣的設(shè)計解決方案不僅融合度高且空間感強。
關(guān)于 Banner 的比例是很多產(chǎn)品設(shè)計師不斷探索的方向，比例影響高度值的控制。界面布局內(nèi)容量的不同影響高度值的不同，根據(jù)內(nèi)容自定義也是可行的方法之一。也有設(shè)計師會根據(jù)斐波那契數(shù)列計算，推薦出寬高比例有 8:5、8:3、8:2、8:1 等，在計算的過程中我們通常取能被 4 整除的數(shù)值。
我們將 Banner 的寬度值定義為：W，高度值定義為：H，比值關(guān)系用：Y（ Y 為 5/8、3/8、2/8、1/8 等）。得出計算公式：H=W*Y，得出來的值取能被 4 整數(shù)的數(shù)值即可。這只是其中一種計算形式，設(shè)計師也可以根據(jù)具體布局情況進行自定義，設(shè)計不是一層不變的方法論，而是做適合具體情況的解決方案。
關(guān)于布局樣式的分析遠不止此，拋磚引玉，經(jīng)驗總結(jié)只是一個起步，探索與創(chuàng)新才能突破更多可能性。
三、移動端線上案例分析
經(jīng)驗總結(jié)很大程度上都會根據(jù)已有的優(yōu)秀案例進行分析，立足于成功案例之上才能更切實際。通過大量的產(chǎn)品體驗日記，梳理出同屬性的不同解決方案，下面便為大家推薦一些上線案例分析。
3.1 常規(guī)形式運用最為普及
Banner 圖的運用組合元素為圖片層和輪播點，通過不同的滑動交互形式來形成不一樣的變化。常見的都是單純的 Banner 圖、輪播點、滑動切換組合，圖片本身以直角或者圓角、通欄或者分欄來呈現(xiàn)，這個需要結(jié)合整體的風(fēng)格來定；輪播點的形式比較多樣，也有不顯示輪播點的形式，以顯示待輪播圖片來替代。
比如騰訊視頻、愛奇藝、優(yōu)酷、芒果TV等常用的影視類 App 中，就各自以不同的形式顯示輪播 Banner。騰訊視頻分欄顯示待輪播圖和直角風(fēng)格，愛奇藝通欄顯示和輪播點配合，優(yōu)酷圓角風(fēng)格配合輪播點，芒果TV通欄呈現(xiàn)融合背景且營造前后空間感。
3.2 自然而流暢的縮放切換
除了在圖片層和輪播點進行設(shè)計發(fā)揮以外，Banner 圖的切換交互也是一種探索的方向，自然而流暢的交互形式能帶給用戶舒適的體驗。比如 MOO 音樂采用縮放過度的形式來進行 Banner 輪播，這種自然而流暢的形式，給人一種非常舒適的操作體驗。
3.3 背景色隨著 Banner 輪播而變化
界面頭部視覺表現(xiàn)為了提高用戶關(guān)注度，利用深色表現(xiàn)更能體現(xiàn)空間感和襯托 Banner 效果。通常為品牌色進行襯托，也有很多產(chǎn)品會利用 Banner 進行取色，作為背景色的選擇范圍，這樣更具融合性和視覺表現(xiàn)差異。背景色隨著 Banner 輪播而變化，是比較普遍的一種設(shè)計方案，視覺體驗感很好。
3.4 以進度條的形式表達輪播控制
Banner 圖的輪播控制常規(guī)的做法是以點的形式呈現(xiàn)或者左右兩側(cè)露出待輪播 Banner，最近在淘票票 App 中發(fā)現(xiàn)了一種新的表達，以進度條的形式呈現(xiàn)，非常直觀的讓用戶可以判斷出還有多少 Banner 處于待輪播狀態(tài)。這樣的表現(xiàn)形式也和觀影時視頻的進度一致，不僅匹配了產(chǎn)品屬性，也能更加直觀的呈現(xiàn)輪播效果，帶給用戶全新的體驗。
3.5 模擬舞臺背景呈現(xiàn)輪播 Banner
在界面布局中空間感的營造可以讓信息對比更加明顯，考拉海購就將 Banner 作為背景來搭建一個具有空間感的舞臺，使得整個界面延伸出更強的深度空間感。Banner 輪播默認以淡入淡出的形式，也可以手動滑動輪播，區(qū)別電商產(chǎn)品同質(zhì)化表現(xiàn)，帶給用戶不一樣的視覺感官體驗。
3.6 異形廣告，打破常規(guī)視覺呈現(xiàn)
有時候方方正正的布局讓人感覺受到了一定的束縛，也有一些產(chǎn)品在 Banner 呈現(xiàn)的形式上面不斷打破邊界的束縛，異形廣告的運用逐漸變得頻繁。最簡單的異形廣告是在畫面本身突破束縛，整體的結(jié)構(gòu)布局還是在固定的造型里面，比如騰訊動漫 App 推薦板塊的輪播 Banner。
除了在 Banner 設(shè)計本身進行突破束縛以外，也有在造型上面進行變化的，比如膠囊形狀，也稱之為膠囊廣告；在邊界分割上面除了直線以外，也有采用弧形分割或者特殊形狀分割等。
3.7 微動效增強用戶關(guān)注度
動效在產(chǎn)品設(shè)計中已經(jīng)運用非常頻繁，在 Banner 圖的設(shè)計中也會有所涉及，相較于靜態(tài)的呈現(xiàn)方式來說更能引起用戶的關(guān)注度。為了不帶給用戶過多的信息干擾，通常都是單圖呈現(xiàn)，這樣也能將焦點強化。
通常都是個別元素進行微動效，來體現(xiàn)動感效果，在主 Banner 中相對少見，次級和異形廣告中運用廣泛。
3.8 視頻廣告嵌入，不破壞只融合
視頻廣告的運用是比較常見的，在保持原有 Banner 布局不變的情況下嵌入到結(jié)構(gòu)中，引起用戶的關(guān)注度。通常為自動播放的形式，為了降低用戶在未知場景中的使用干擾，默認靜音模式。有倒計時的伴隨著關(guān)閉操作，也有一些提供重播的操作，播放結(jié)束自動翻頁。
除了單個視頻嵌入以外，也有 Banner 全部采用短視頻的方式，不過相對較少。
3.9 卡片疊加滑動提升輪播空間感
在探索手勢操作上面，便捷度、流暢度、體驗感都是至關(guān)重要的?；瑒?Banner 過程中的體驗感能帶給用戶對于當(dāng)前內(nèi)容的關(guān)注程度，便于操作的同時能引起用戶的好奇心更是重中之重。
蝦米音樂的樂庫便是結(jié)合了眾多設(shè)計思考，卡片疊加帶來視覺呈現(xiàn)的空間感，手勢滑動流暢自然，主題文案隨著滑動而變化顯示或者隱藏，帶給用戶更加友好的選擇體驗。
3.10 主題元素分層視差帶來輪播新玩法
為了提高用戶對輪播廣告的關(guān)注度，突破已有的表現(xiàn)形式是設(shè)計師不斷思考的方向。
自如 App 端的做法引起了我的關(guān)注，將主題元素和背景層進行分離，主題元素進行輪播的同時背景層漸隱呈現(xiàn)。不一樣的視覺表現(xiàn)和輪播形式，帶來了 Banner 輪播形式的新玩法。
四、總結(jié)
Banner 在很多產(chǎn)品中是較為常見的元素存在，UI 場景中的 Banner 布局樣式探索是為了在進行結(jié)構(gòu)布局的時候，我們可以嘗試出更多不一樣的解決方案。一個好的體驗也許只是一個細節(jié)的探索，如果能在每一個功能設(shè)計的時候都能把控每一個細節(jié)，必能帶給用戶更好的使用體驗。
本文雖然不是講解如何設(shè)計 Banner 圖本身，但是關(guān)于 Banner 的布局形式、造型特征、內(nèi)容表達形式等在產(chǎn)品設(shè)計中的運用，也是起到非常關(guān)鍵的因素。希望通過這種形式的梳理，可以帶給你更多的幫助。
文中案例來源于日常的產(chǎn)品體驗日記整理，將具備同屬性的內(nèi)容進行歸類梳理，形成可指導(dǎo)的設(shè)計建議是一種探索思考的過程。希望這個思路可以拋磚引玉，和大家一起探索產(chǎn)品設(shè)計中更多用戶體驗和感官體驗的設(shè)計解決方案。
蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進群請加藍小助微信ben_lanlan。
研究主題：提升動效可用性
研究對象：12條UX動效應(yīng)用法則
“作為UX/UI設(shè)計師，我該如何適當(dāng)在UX設(shè)計中加入動效？”，我總結(jié)了一些經(jīng)驗法則，可以很好地回答這個問題。在過去5年里，我的UI動畫工作室發(fā)表的教程，非常幸運可以在40多個國家/地區(qū)，以及數(shù)百個頂級品牌設(shè)計咨詢公司中指導(dǎo)UX/UI設(shè)計師們。
研究UX/UI動效超過15年后，我得出了一個結(jié)論——其實有12個規(guī)律方法來幫助提升UX動效設(shè)計。我將這些機會稱為“ 12條UX動效應(yīng)用法則”，它們可以通過多種創(chuàng)新方式進行疊加和組合使用。
我將宣言分成5部分：
-強調(diào)動效的主題；
-實時與非實時交互；
-提升動效可用性的4種方法；
-原理，技術(shù)，特性和價值；
-12條UX動效應(yīng)用法則。
設(shè)計人員通常將用戶界面中的運動主題理解為“ UI動畫”（實際上不是），所以我覺得在開始說12條原則前，有必要為大家普及下基礎(chǔ)。
設(shè)計人員通常將“ UI動畫”視為是讓用戶體驗更愉悅的東西，實際上并沒有增加太多價值。因此，UI動畫通常被視為UX的后兒子。另外，用戶界面動效，它被認為屬于迪士尼的12條動畫原理范疇，我在自己的《UI Animation Principles — Disney is Dead》一文中進行了反駁。
在我的宣言中，我將證明UI動畫原則與“ 12 UX in Motion Principles”的關(guān)系，就像是建筑構(gòu)造和建筑風(fēng)格一樣，是各自獨立的?；蛘哌@樣理解，一個建筑結(jié)構(gòu)被物理建造后才會實際存在（施工后），但是原則理論卻能指導(dǎo)物理建造。
動畫就是工具，而原則是用來指導(dǎo)工具使用的，因此，原則理論對設(shè)計師的影響力更大。實際上，多數(shù)設(shè)計師經(jīng)常在UX設(shè)計中，將“ UI動畫”視為一種更高級的設(shè)計形式。
區(qū)分“狀態(tài)”和“作用”很重要，UX中的大多元素是靜態(tài)的，例如設(shè)計組件。用戶體驗中的行為基本上是暫時的，是基于動作的。一個元素是被隱藏的，或正在被隱藏。如果是后者，動效的引入就可以很好地提升可用性。
另外，可以將交互的時間都視為實時或非實時發(fā)生。實時是指用戶直接與用戶界面中的對象進行交互。非實時意味著對象行為是事后交互的：它在用戶操作之后發(fā)生，并且是過渡的。
這是一個重要的區(qū)別。實時交互也可以被認為是“直接操縱”，因為用戶正在直接和界面對象進行交互。用戶使用界面時，界面行為正在發(fā)生。非實時交互僅在來自用戶的輸入之后發(fā)生，并且具有將用戶短暫鎖定在用戶體驗之外的作用，直到轉(zhuǎn)換完成。認知這些差異性，會在我們學(xué)習(xí)12項原則時發(fā)揮幫助作用。
這4點代表判斷用戶體驗可用性時的依據(jù)：
-預(yù)期值
分兩個方面——設(shè)計為用戶帶來的感受，以及實際呈現(xiàn)效果。換句話說，作為設(shè)計師，我們希望最大程度地減少用戶期望與他們體驗之間的差距。
-連續(xù)性
既代表用戶流程，也代表用戶體驗的“一致性”?？梢詮?ldquo;內(nèi)部連續(xù)性”（場景內(nèi)的連續(xù)性）和“內(nèi)部連續(xù)性”（構(gòu)成整個用戶體驗的一系列場景內(nèi)的連續(xù)性）的角度來考慮。
-敘述性
是用戶體驗中事件的線性進展，一系列微妙的變化和動作串聯(lián)在一起是，就構(gòu)成了用戶體驗流程。
-關(guān)聯(lián)性
指導(dǎo)用戶理解和決策界面中組件之間的關(guān)系。
泰勒·韋恩（Tyler Waye）寫道：“原理……是產(chǎn)生各種技術(shù)的基本前提和功能規(guī)則。無論發(fā)生什么，這些要素都保持一致。”我們可以設(shè)想一個層次結(jié)構(gòu)，其中“原則”在頂部，“技術(shù)”在第二，接下來是“內(nèi)容”，“量值”在最底部?？梢詫⒓夹g(shù)視為把原則實際執(zhí)行的一種呈現(xiàn)手法，類似于我們常說的“設(shè)計風(fēng)格”。
“屬性”是特定對象的參數(shù)，這些參數(shù)會被動畫化以創(chuàng)建該技術(shù)。這些包括（但不限于）位置，不透明度，比例，旋轉(zhuǎn)，錨點，顏色，筆劃寬度，形狀等。“量值”是實際的數(shù)字屬性值，它們會隨時間變化以創(chuàng)建所謂的“動畫”。
比如，設(shè)計一個飛機降落的動效，我們可以使用“模糊原理”，模糊和不透明度調(diào)至25px和70％?，F(xiàn)在我們有了一些可以使用的工具。更重要的是，這些語言工具與任何特定的原型工具無關(guān)。
緩動，偏移和延遲與定時有關(guān)；處理與對象關(guān)系有關(guān)；變換，數(shù)值變化，遮罩，疊加和復(fù)制都與對象連續(xù)性有關(guān)；視差與時間層次有關(guān)。模糊度，維度和滑動變焦都與空間連續(xù)性有關(guān)。
發(fā)生即時事件時，對象行為符合用戶期望。
所有（實時或非實時）的動效都非常緩和。這種設(shè)計輕松搭建了一種自然舒適的氛圍，也有一種連續(xù)感。順便提一句，迪士尼將其稱為“慢進慢出”。
左側(cè)示例的線性運動，看起來很好像糟糕。第一個示例沒有很強的動效，但呈現(xiàn)出來的也很流暢。以上三個示例都有確切的幀數(shù)，并且演示的時間相同，唯一的區(qū)別是動效的緩和程度。
作為關(guān)注可用性的設(shè)計師，除了美學(xué)之外，我們還需要多提出質(zhì)疑，哪個示例更能提升可用性？我在這里介紹的情況是緩動固有的特點。在適當(dāng)緩動情況下，用戶會感覺動作本身是無縫的并且在很大程度上是不可見的，這是一件好事，因為它不會分散注意力。線性運動明顯可見，并且感覺不完整且分散注意力。
我們再來看右邊的示例，它也不并不是天衣無縫的。實際上，它具有明顯的“設(shè)計”感，我們會注意到物體是如何著陸的，但與左側(cè)線性運動示例相比，它仍然感覺“更正確”。
我想向您開放的是一個輕松的運動世界。作為設(shè)計師，您實際上可以在項目中創(chuàng)建和實現(xiàn)無限的“緩動”。所有這些放松都有自己的期望響應(yīng)，它們會在用戶中觸發(fā)。
引入新元素和場景時，定義對象關(guān)系和層次結(jié)構(gòu)。
“偏移與延遲”受迪斯尼動畫原理影響，本例中為“跟隨并重疊動作”。
但是，重要的是要注意，方法雖然類似，但目的和結(jié)果卻不同。迪斯尼的《原理》可產(chǎn)生“更具吸引力的動畫”，而《UI動畫》的原理則可產(chǎn)生更多可用的體驗。
這一原則的效用在于，它通過“告訴”用戶界面中對象的性質(zhì)，預(yù)先為用戶設(shè)置成功的條件。上面參考中的敘述是頂部的兩個對象是一組，而底部則是分開的。頂部的兩個對象可以是非交互的圖像和文本，而底部的對象可以是按鈕。
甚至在用戶注冊這些對象是什么之前，設(shè)計人員就已經(jīng)通過運動告知這些對象是“分離的”。
Credit: InVision
在上圖示例中，懸浮按鈕（FAB）轉(zhuǎn)換成了包含三個按鈕的標(biāo)題導(dǎo)航元素。由于按鈕在時間上彼此“偏移”，因此最終通過“分離”來提升可用性。換句話說，設(shè)計人員是在利用時間本身來說（甚至在用戶注冊對象之前）對象是分開的。這可以讓用戶完全獨立于視覺設(shè)計，了解界面中對象的特性。
以下是一個示例：
Credit: Jordi Verdu
在上面的例子中，靜態(tài)視覺設(shè)計告訴我們在背景上有圖標(biāo)。假設(shè)這些圖標(biāo)都是彼此獨立的，并且做著不同的事情。
圖標(biāo)被分組為行，并且表現(xiàn)得像單個對象。它們的標(biāo)題同樣被分組為行，并且表現(xiàn)得像單個對象。動效告訴用戶這些界面元素不是她的眼睛所看到的。在這種情況下，我們可以說界面中對象的時間行為并沒有提升可用性。
與多個對象進行交互時，創(chuàng)建空間和時間層次關(guān)系。
這是一項強大的原理，可“關(guān)聯(lián)”用戶界面中的對象。在上面的示例中，頂部或“子級”對象的“ scale”和“ position”屬性作為底部或“父級”對象的“ position”屬性的父級。
處理對象屬性與其他對象屬性的鏈接，創(chuàng)建對象關(guān)系和層次結(jié)構(gòu)。
還可以使設(shè)計人員更好地協(xié)調(diào)用戶界面中的時間，同時與用戶交流對象關(guān)系的本質(zhì)?；叵胍幌拢瑢ο蟮?ldquo;屬性”包括以下內(nèi)容：“比例”，“不透明度”，“位置”，“旋轉(zhuǎn)”，“形狀”，“顏色”，“值”等。這些屬性中的任何一個都可以鏈接到其他任何屬性，以在用戶體驗中創(chuàng)造協(xié)同作用。
Credit: Andrew J Lee, Frank Rapacciuolo
在左側(cè)示例中，“表情”元素的“ y軸”是圓形指示器，也是“ x軸”的父級。當(dāng)圓形指示器元素沿水平軸移動時，其“子級”元素沿水平和垂直方向移動（同時被遮罩）。此功能最好可以“實時”互動，當(dāng)用戶直接操作界面對象時，設(shè)計人員通過動效與用戶溝通，將其聯(lián)系起來。
創(chuàng)建關(guān)聯(lián)有3種形式：“直接關(guān)聯(lián)”（請參見上面的兩個“延遲”示例，“反向”示例，請參見下文）。
延遲和反向
對象實用程序更改時，創(chuàng)建連續(xù)的敘述流狀態(tài)。
關(guān)于運動原理“轉(zhuǎn)換”中的UX的文章已經(jīng)很多。在某些方面，它是動畫原理中最明顯和最深刻的部分。
轉(zhuǎn)換是最容易識別的，主要是因為它效果很突出。我們注意到，“提交”按鈕將形狀更改為徑向進度條，最后再次將形狀更改為確認復(fù)選標(biāo)記。它完整的展示了一個功能，并引起了用戶注意。
Credit: Colin Garven
變換所做的是無縫地將用戶轉(zhuǎn)換為不同的UX狀態(tài)或“是”（如這是一個按鈕，這是一個放射狀的進度條，這是一個復(fù)選標(biāo)記），引導(dǎo)成所需的結(jié)果。通過這些功能空間將用戶吸引到了最終目的地。
轉(zhuǎn)換的作用是將用戶體驗中的關(guān)鍵時刻從認知上“分塊”為一系列無縫且連續(xù)的事件。這種無縫性可以提高用戶的感知度，留存率和任務(wù)成功率。
當(dāng)量值主體發(fā)生變化時，創(chuàng)建動態(tài)且連續(xù)的敘事關(guān)系。
基于文本的界面對象（即數(shù)字和文本）可以更改其值。這是那些“難以捉摸的明顯”概念之一。
文本和數(shù)字更改非常常見，以至于它們繞過我們，而我們卻沒有給他們帶來區(qū)別和嚴(yán)謹(jǐn)性，以評估它們在提升可用性方面的作用。
那么，當(dāng)值改變時用戶會經(jīng)歷什么？在用戶體驗中，運動中的12個用戶體驗原則是提升可用性的機會。這里的三個機會是將用戶與數(shù)據(jù)背后的現(xiàn)實，代理的概念以及價值本身的動態(tài)性質(zhì)聯(lián)系起來。
讓我們看一下用戶儀表板的示例。
當(dāng)數(shù)字值未進行加載時，用戶看到的數(shù)字對象是靜態(tài)的。它們就像涂漆的標(biāo)志，顯示時速限制為55英里/小時。
數(shù)字和值表示現(xiàn)實中正在發(fā)生的事情?，F(xiàn)實可能是時間，收入，游戲得分，業(yè)務(wù)指標(biāo)，健身跟蹤等。我們通過運動來區(qū)分的是“量值主體”是動態(tài)的，而這些量值反映的是該動態(tài)價值集中的某些東西。
這種關(guān)系不僅會被視覺上包含價值的靜態(tài)對象所迷失，而且還會失去另一個更深層次的機會。
Credit: Barthelemy Chalvet, Gal Shir, Unknown
當(dāng)通過顯示或隱藏對象或組的哪一部分確定實用程序時，在接口對象或?qū)ο蠼M中創(chuàng)建連續(xù)性。
遮蓋對象的行為可以被認為是遮蓋對象形狀與效果之間的關(guān)系。
因為設(shè)計師們熟悉靜態(tài)設(shè)計中的遮蓋，我們有必要同UX運動原理“屏蔽”做區(qū)分，因為它是以一個行為動作發(fā)生，而不是作為一個狀態(tài)。
通過暫時使用對象的顯示和隱藏區(qū)域，效用以連續(xù)和無縫的方式轉(zhuǎn)換。這也具有保留敘述流的效果。
Credit: Anish Chandran
在示例中，頁眉變成相冊時會更改邊界形狀和位置，但不會更改內(nèi)容。既改變了圖像的效果，同時將內(nèi)容保留在蒙版中——這是個相當(dāng)巧妙的技巧。這是非實時發(fā)生的，是一種過渡，在用戶執(zhí)行某個操作后即被激活。
請記住，UI動畫原理是暫時出現(xiàn)的，并通過連續(xù)性、敘述、關(guān)系和期望來提升可用性。在上述參考中，對象本身不變，但也具有邊界和位置，這兩個因素最決定設(shè)計的樣子。
當(dāng)分層對象依賴于位置時，在視覺平地中創(chuàng)建與空間的關(guān)系。
疊加層通過允許用戶利用平地排序?qū)傩?，來克服非空間層次結(jié)構(gòu)的缺乏，從而提升可用性。為了使飛機稍微降落，Overlay允許設(shè)計人員使用運動來傳達與位置有關(guān)的對象，這些對象存在于非3D空間中其他對象的后面或前面。
Credit: Bady, Javi Pérez
在左側(cè)的示例中，前景對象向右滑動以顯示其他背景對象的位置。在右側(cè)的示例中，整個場景向下滑動以顯示其他內(nèi)容和選項（同時使用“偏移與延遲原理”傳達對象的個性）。在一定程度上，作為設(shè)計師，“層次”的概念是如此明顯以至于不言而喻。
當(dāng)新對象出現(xiàn)和分開時，創(chuàng)建連續(xù)性、關(guān)系和敘述。
在當(dāng)前場景中（以及從當(dāng)前對象中）創(chuàng)建新對象時，以敘述方式說明它們的外觀非常重要。在此宣言中，我強烈主張為對象的起源和離開創(chuàng)建敘事框架的重要性。
簡單的不透明褪色往往無法達到此效果。遮罩，克隆和維度是三種基于可用性的方法，可以產(chǎn)生很棒的使用體驗。
Credit: Jakub Antalík, Jakub Antalík, Unknown
允許用戶在空間上定位自己與對象或場景的關(guān)系，而非在視覺層次。
與“蒙版運動原理”中的UX相似，“模糊化”既作為靜態(tài)現(xiàn)象又作為暫時現(xiàn)象存在。這可能會使沒有時間思考經(jīng)驗的設(shè)計師（即瞬間之間的瞬間）感到困惑。設(shè)計人員通常按屏幕設(shè)計或按任務(wù)設(shè)計。認為遮蔽是被遮蓋的行為，而不是被遮蓋的狀態(tài)。靜態(tài)設(shè)計表示被遮蓋的狀態(tài)，引入時間可以使我們了解物體被遮擋的行為。
Credit: Virgil Pana, Apple
從以上兩個示例中，我們可以看到，看起來像透明對象或疊加層的遮擋也是一種涉及時間上多個屬性的交互。各種常見的技術(shù)包括模糊效果和降低整體對象透明度，使用戶知道她正在操作的其他非主要內(nèi)容，即在主要對象層次結(jié)構(gòu)“之后”存在的世界。
用戶滾動時，在視覺平面中創(chuàng)建空間層次結(jié)構(gòu)。
作為運動原理中的UX，“視差”描述了以不同速率運動的不同界面對象。
使用視差，用戶可以在保持設(shè)計完整性的同時專注于主要動作和內(nèi)容。背景元素會為用戶在知覺和認知上“消失”。
Credit: Austin Neill, Michael Sevilla
這對用戶的影響是，在使用期間清楚地定義各種對象關(guān)系。前景對象或移動“快速”的對象在用戶面前顯示的“更近”。同樣，背景物體或“移動較慢”的物體也被視為“離得更遠”。
設(shè)計人員可以使用時間本身來創(chuàng)建這些關(guān)系，以告訴用戶界面中哪些對象具有更高的優(yōu)先級。因此，將背景或非交互式元素進一步“推后”是有意義的。
當(dāng)新對象出現(xiàn)和離開時，提供空間敘事框架。
對用戶體驗至關(guān)重要的是連續(xù)性現(xiàn)象以及位置感。維度提供了一種強大的邏輯方式來克服用戶覺得平庸的體驗。人類非常善于使用空間框架在現(xiàn)實世界和數(shù)字體驗中導(dǎo)航。提供空間維度的出現(xiàn)及消失的參考點，有助于增強用戶對于位置的感知。
此外，維度原則克服了視覺平面中的分層悖論，出現(xiàn)在其他對象的“前面”或“后面”。維度以三種方式呈現(xiàn)：折紙維度，浮動維度和對象維度。折紙的維數(shù)可以用“折疊”或“鉸接”式的三維界面對象來考慮。
折紙維度示例
由于將多個對象組合為“折紙”結(jié)構(gòu)，因此即使看不見隱藏對象，在空間上仍可以說它們“存在”。這有效地將用戶體驗呈現(xiàn)為連續(xù)的空間事件，用戶可以在交互模型本身以及界面對象本身完成操作。
浮動維度為接口對象提供了空間的起源和偏離，使交互模型直觀且具有很強的敘事性。
浮動維數(shù)示例
在上面的示例中，維度是通過使用3D“卡片”來實現(xiàn)的。這提供了支持視覺設(shè)計的強大敘事框架。通過“翻轉(zhuǎn)”卡片來擴展敘述，以訪問其他內(nèi)容和交互性。
維度是一種強大的引入新元素的方法，可以最小地降低突發(fā)性。維度系數(shù)會讓交互對象具有更模擬真實感。
對象維數(shù)示例
多個2D層在3D空間中排列形成真實尺寸的對象，它們的維度是在實時和非實時過渡時刻顯示的。物體維數(shù)指使用者在不可見的空間位置上產(chǎn)生對物體效用的敏銳意識。
在導(dǎo)航界面對象和空間時保持連續(xù)性和空間敘述。
移動（Dolly）和變焦（Zoom）是電影概念，指的是與相機有關(guān)的對象的運動，并且圖像本身在幀中的大小從遠攝到近攝平滑地變化（反之亦然）。
在某些情況下，無法判斷對象是否正在縮放，它是否正在朝3D空間中的相機移動或相機是否朝著3D空間中的對象移動，以下三個示例說明了可能的情況。
圖層是在搖動，縮放還是在移動相機？
將“移動”和“縮放”的實例視為獨立的，因為它們涉及連續(xù)變換，并且滿足運動原理中用戶體驗的要求：它們通過運動來提升可用性。
左邊的兩個圖像是鏡頭滑動縮放，而右邊的圖像變焦縮放
多莉（Dolly）是一個電影術(shù)語，適用于推進或遠離對象的相機運動（它也適用于水平“跟蹤”運動，但在可用性方面不那么重要）。
Credit: Apple
在UX中，在空間上，此運動指的是觀察者視角的變化，也可能是指在對象更改位置時保持靜態(tài)的視角。多莉原理通過連續(xù)性和敘述性，來無縫過度對象目標(biāo)。多莉還可以結(jié)合“尺寸原則”，從而獲得更多空間體驗和更多的深度，向用戶傳達當(dāng)前視圖“前”或“后”的其他區(qū)域。
縮放指的是既不是透視也不是物體在空間上的移動，而是物體本身在縮放（或者我們的視野正在縮小，從而導(dǎo)致圖像放大）。這向用戶傳達對象所在“內(nèi)部”區(qū)域的信息。
蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進群請加藍小助微信ben_lanlan。
作為 UI 設(shè)計師來說，掌握產(chǎn)品設(shè)計中的每個組成要素是非常必要的，所謂精細化的設(shè)計就是把控好每一個細節(jié)的深入。隨著大屏手機的普及，在人機交互的探索上面設(shè)計師追求著更多提高用戶體驗的設(shè)計方式，不過萬變不離其宗，用戶體驗沉淀下來的行為習(xí)慣依然影響著我們的設(shè)計。
就拿導(dǎo)航設(shè)計來深入探索，隨著產(chǎn)品設(shè)計的不斷推進，很多新穎的設(shè)計呈現(xiàn)帶給用戶更多的操作體驗。本文就以移動端底部標(biāo)簽欄導(dǎo)航為案例分析，和大家一起探索一下底部標(biāo)簽欄導(dǎo)航設(shè)計的千奇百態(tài)。
分享目錄
一、關(guān)于底部標(biāo)簽導(dǎo)航
二、UI 設(shè)計注意事項
三、UI 表現(xiàn)層類別分析
四、移動端線上案例分析
五、總結(jié)
一、關(guān)于底部標(biāo)簽導(dǎo)航
移動端導(dǎo)航欄設(shè)計相當(dāng)于自身的骨架，是支撐產(chǎn)品中功能交互和內(nèi)容傳播的血肉。導(dǎo)航系統(tǒng)指引著用戶的操作軌跡，引導(dǎo)用戶抵達目的地和進行相關(guān)的操作，將零散的內(nèi)容和功能進行組織形成結(jié)構(gòu)化的可視軌跡。導(dǎo)航的存在因此顯得格外重要，也是梳理功能結(jié)構(gòu)需要重點確定的內(nèi)容，以此來形成整個產(chǎn)品的脈絡(luò)。
移動端導(dǎo)航欄比較常見的有：底部標(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)航等等。我們比較常見的產(chǎn)品中采用底部標(biāo)簽欄導(dǎo)航的居多，便于用戶進行頻繁的操作，這也是本文接下來重點和大家探索的話題方向。
在移動端產(chǎn)品中底部標(biāo)簽欄導(dǎo)航是最常用的導(dǎo)航模式，常作為一級目錄的導(dǎo)航，位于產(chǎn)品界面底部。根據(jù)用戶對于界面的操作熱區(qū)來看，底部是用戶可以輕松點擊的區(qū)域，無論用戶單手還是雙手操作都十分便利。
在底部標(biāo)簽欄導(dǎo)航的基礎(chǔ)上進行拓展欄設(shè)計也是比較常見的形式，也就是舵式導(dǎo)航。突出中間的功能強化用戶的關(guān)注度，引導(dǎo)用戶使用更多延展功能。底部標(biāo)簽欄導(dǎo)航和底部（舵式）拓展欄都屬于底部導(dǎo)航的范圍，本文將會重點以此類型為主進行梳理。
二、UI 設(shè)計注意事項
底部標(biāo)簽欄導(dǎo)航非常直觀的告訴用戶當(dāng)前的位置，也便于用戶進行同一層級間的不同模塊切換。由于具有很強的包容性，不會與其他功能模塊形成干擾，也能與多種導(dǎo)航模式進行組合使用。
底部標(biāo)簽欄導(dǎo)航在模塊的選擇上面通常是 3-5 個，比較常見的為 5 個，3 個模塊相對比較松散，運用案例不是很多，除非業(yè)務(wù)功能較少。在設(shè)計表現(xiàn)形式上面有：icon + 文字、純 icon、純文字形式，比較主流的還是 icon + 文字的形式，可以降低用戶的理解成本和記憶負擔(dān)，提高用戶的操作體驗。
底部（舵式）拓展欄是為了突出中間功能設(shè)計，吸引用戶關(guān)注度，提高更多隱藏功能的使用概率。這種導(dǎo)航模式較為常見，比如轉(zhuǎn)轉(zhuǎn)、抖音、馬蜂窩旅游、閑魚等等均有使用。可以提高導(dǎo)航欄設(shè)計的趣味性和特征性，引導(dǎo)用戶操作更多功能和貢獻更多內(nèi)容。不過這樣的設(shè)計由于關(guān)注度被吸引，進而影響其它一級模塊的關(guān)注度，由于隱藏的功能增加了用戶的記憶負擔(dān)和操作負擔(dān)，利弊權(quán)衡需要產(chǎn)品設(shè)計師進行評估。
在進行設(shè)計的過程中，功能模塊的確定需要起到牽引的重要作用，鏈接起整個產(chǎn)品的功能脈絡(luò)；設(shè)計表現(xiàn)上面需要區(qū)分默認和點擊狀態(tài)，可以跳出規(guī)范的束縛，但是需要在不影響其它業(yè)務(wù)模塊的前提下進行。
三、UI 表現(xiàn)層類別分析
底部標(biāo)簽欄導(dǎo)航在 UI 表現(xiàn)層方面也是千奇百態(tài)，除了常規(guī)的置底形式，設(shè)計師也發(fā)散了更多新穎的表現(xiàn)。突破現(xiàn)有規(guī)范的束縛，不被固有化思維所限制，才能不斷的進行設(shè)計創(chuàng)新。
3.1 最穩(wěn)定的常規(guī)設(shè)計形式
底部標(biāo)簽欄導(dǎo)航最常見的設(shè)計形式依然是置于底部的常規(guī)形式，通常是 3-5 個功能模塊為主，其中 5 個功能模塊是較為常見的。形成差異化的是在圖標(biāo)設(shè)計上面進行發(fā)揮，難度較大的設(shè)計是結(jié)合品牌基因或者特征性元素表達，也有一些是純文字的設(shè)計形式。
除了圖標(biāo)上面進行發(fā)揮以外，也有一些會在背景上面進行裝飾，體現(xiàn)產(chǎn)品差異化。不過最常見的依然還是單色為主，或者根據(jù)模塊的需求在切換的過程中選擇使用不同的背景體現(xiàn)。雖然是最常規(guī)的導(dǎo)航模式，但是設(shè)計師依然可以在布局形式、圖標(biāo)風(fēng)格、配色關(guān)系、背景裝飾等方面進行發(fā)揮。
3.2 動靜結(jié)合的微動效表現(xiàn)
微動效在產(chǎn)品設(shè)計中的運用逐漸變得頻繁，相較于靜態(tài)的表現(xiàn)更能引起用戶的關(guān)注度，也能帶來趣味性和互動性。在底部標(biāo)簽欄導(dǎo)航中的圖標(biāo)設(shè)計上面，默認的采用靜態(tài)展示，而點擊狀態(tài)以動效的形式進行演變過度也是非常常見的設(shè)計處理。
在進行動效設(shè)計的時候，可以采用整個圖標(biāo)位移形成動效，這是最簡單的動效表現(xiàn)，通常是上下彈跳位移。比較復(fù)雜的是圖標(biāo)本身的結(jié)構(gòu)動效，這也是圖標(biāo)動效轉(zhuǎn)換比較連貫的形式。
3.3 突出規(guī)范框架的束縛表現(xiàn)
雖然大部分產(chǎn)品設(shè)計都會優(yōu)先采用官方的設(shè)計規(guī)范，但是為了突出設(shè)計的差異化，也會進行一些突出規(guī)范框架的設(shè)計。在保持原有不變的導(dǎo)航設(shè)計中，我們可以針對局部功能模塊進行突出表現(xiàn)（比如舵式導(dǎo)航），也可以將點擊狀態(tài)進行突出表現(xiàn)。
3.4 懸浮層增強空間感
一些產(chǎn)品為了增強界面結(jié)構(gòu)的空間感，針對底部標(biāo)簽欄導(dǎo)航設(shè)計采用懸浮層的設(shè)計來進行表現(xiàn)，使得界面的通透性和呼吸感更強。這種設(shè)計形式依然保留了原本的結(jié)構(gòu)，只是預(yù)留了左右和底部的間距，也有一些產(chǎn)品結(jié)合交互動效的形式表達，滑動過程中采用隱藏部分功能，增加瀏覽過程的內(nèi)容輸出面積。
3.5 底部拓展/隱藏式設(shè)計
隨著一些工具型產(chǎn)品的使用，功能模塊變得復(fù)雜而繁多，也有將更多功能隱藏在底部標(biāo)簽欄里面，上拉交互時顯示。這種設(shè)計形式將底部標(biāo)簽欄進行了深度的開發(fā)利用，但是功能隱藏比較深，曝光度受到了一定的影響，不適合較為重要的功能模塊設(shè)計。
3.6 小結(jié)
底部標(biāo)簽欄導(dǎo)航在 UI 表現(xiàn)層方面還有更多可以給予設(shè)計師發(fā)揮的空間，設(shè)計沒有固定不變的形式，在于不斷的發(fā)現(xiàn)、總結(jié)和創(chuàng)新。期待大家發(fā)現(xiàn)更多設(shè)計解決方案和進行更多設(shè)計創(chuàng)新，下面將會為大家梳理線上的優(yōu)秀案例，讓我們可以站在巨人的肩膀上不斷超越。
四、移動端線上案例分析
移動端底部標(biāo)簽欄導(dǎo)航設(shè)計在眾多產(chǎn)品中浮現(xiàn)出很多優(yōu)秀的案例，對于線上案例的分析將有助于我們進行落地性的思考，新穎的設(shè)計不再是飛機稿，而是可以實現(xiàn)的創(chuàng)意。創(chuàng)新是建立在不斷的發(fā)現(xiàn)、總結(jié)、分析和改變，希望這些案例可以帶給你點滴靈感。
4.1 背景結(jié)合特定節(jié)日增強氛圍
在大部分情況下底部標(biāo)簽欄導(dǎo)航的背景為單色的居多，不干擾信息的傳遞而保障用戶的瀏覽體驗。也有在特定節(jié)日結(jié)合氛圍營造對背景進行簡單的裝飾，可以在節(jié)假日或者特殊時期引起用戶的共勉，增強產(chǎn)品的情感化設(shè)計。
比如寶寶巴士兒歌 APP 的底部標(biāo)簽欄導(dǎo)航設(shè)計，在之前的一些版本迭代過程中，結(jié)合特定氛圍營造進行背景設(shè)計，也是一種非常不錯的設(shè)計表達形式。由于屬于兒童類產(chǎn)品，點擊功能模塊切換的過程中還伴隨著音樂，視聽體驗的結(jié)合使得操作體驗備受關(guān)注。
4.2 強化消息提示的關(guān)注度
系統(tǒng)通知或者消息提示往往都會被用戶所忽略，盡管很多產(chǎn)品都會將消息作為單獨的功能模塊來設(shè)計，但是依然擺脫不了被忽略的問題。微信讀書將通知和私信等消息提示結(jié)合在個人中心的設(shè)計中，以氣泡彈出的形式展示在圖標(biāo)紅點提示上方。以此來吸引用戶的關(guān)注度，增加消息閱讀率。
4.3 特異設(shè)計引導(dǎo)功能模塊關(guān)注度
在底部標(biāo)簽欄導(dǎo)航的多個功能模塊中，為了突出或者引導(dǎo)使用某個功能時，會采用特異構(gòu)成的設(shè)計做法，在原本的設(shè)計規(guī)范上面突出表現(xiàn)個例，以此來引起用戶的關(guān)注度。比如騰訊動漫在第一次進入 APP 時，圈子的圖標(biāo)設(shè)計會特意突出，點擊之后恢復(fù)原樣，以此吸引用戶對該欄目的關(guān)注，增強功能模塊的使用率。
4.4 圖標(biāo)設(shè)計的年輕化趨勢
隨著 95 后成為互聯(lián)網(wǎng)原住民，產(chǎn)品設(shè)計逐漸趨向于“年輕化”的探索和挖掘。優(yōu)酷 V9.0 升級后設(shè)計風(fēng)格更年輕化，底部標(biāo)簽欄圖標(biāo)設(shè)計采用低純度、高明度的多色漸變，結(jié)合微動效使得風(fēng)格更加青春活潑，符合年輕一代的審美需求。年輕化的設(shè)計不僅提高感官體驗，也拉近了產(chǎn)品與用戶之間的親和力。
4.5 趣味性的情感化設(shè)計融入
情感化的設(shè)計能夠拉近產(chǎn)品與用戶之間的親和力，這也是設(shè)計師在不斷探索并延展的設(shè)計方向。QQ 作為社交工具而言，如何更加符合年輕化的設(shè)計需求，在底部標(biāo)簽欄圖標(biāo)的設(shè)計上面也是用盡了心思。消息模塊的圖標(biāo)設(shè)計成各種搞怪的表情，在拖拽的時候會切換不同的表情，帶給用戶更加趣味性的體驗，讓人會心一笑。
4.6 首頁圖標(biāo)強化品牌曝光
為了強化產(chǎn)品品牌的曝光度，在進行底部標(biāo)簽欄圖標(biāo)設(shè)計的時候，會將首頁圖標(biāo)的點擊狀態(tài)切換為品牌 LOGO 的形式，以此來增加品牌的曝光度。設(shè)計上面的選擇有 LOGO 圖形、吉祥物、應(yīng)用圖標(biāo)、品牌局部圖形等，會根據(jù)品牌 LOGO 的造型靈活選擇。
4.7 舵式導(dǎo)航轉(zhuǎn)一轉(zhuǎn)增強關(guān)注度
底部（舵式）拓展欄導(dǎo)航是突出中間功能模塊設(shè)計來強化關(guān)注度，除了靜態(tài)的表達以外，結(jié)合微動效更能起到強化突出的作用。轉(zhuǎn)轉(zhuǎn)結(jié)合吉祥物和微動效運用在舵式導(dǎo)航的設(shè)計中，不僅提高用戶的關(guān)注度，情感化的設(shè)計還能增強產(chǎn)品的親和力。
4.8 結(jié)合營銷內(nèi)容多層共用
產(chǎn)品中的營銷結(jié)合是最為常見的，產(chǎn)品設(shè)計師也在不斷地思考更多可結(jié)合的功能模塊，舵式導(dǎo)航的區(qū)域被充分利用是最為便利的。芒果 TV 將營銷內(nèi)容與會員模塊圖標(biāo)進行結(jié)合，在保持原有功能操作的基礎(chǔ)上強化營銷活動的曝光度，鼓勵更多用戶參與活動。
4.9 微動效結(jié)合多層功能運用
微動效運用到底部標(biāo)簽欄導(dǎo)航圖標(biāo)動效中較為常見，可以帶給用戶趣味性的點擊體驗。對于一些首頁采用瀑布流設(shè)計的產(chǎn)品，也會在用戶上滑瀏覽內(nèi)容到一定量的時候?qū)⑹醉撟兓癁?ldquo;置頂”的操作，方便用戶快速置頂。比如愛奇藝 APP 將品牌色強化在圖標(biāo)的設(shè)計中，結(jié)合微動效的變化帶給用戶趣味性和強化品牌記憶，在首頁圖標(biāo)和置頂圖標(biāo)切換的過程中也采用了微動效的形式，過度更加自然流暢，也能更加醒目的提示用戶。
4.10 微動效結(jié)合突出框架的束縛
一些尋求突破的產(chǎn)品，在設(shè)計的時候也嘗試了突出規(guī)范框架的束縛表現(xiàn)，點擊狀態(tài)會突出局部來強化。結(jié)合動效的變化形成自然過度，突出的設(shè)計更能引起用戶的關(guān)注度，明確自己當(dāng)前所處的位置。這樣的表現(xiàn)形式不僅可以形成設(shè)計差異化，也能讓用戶操作路徑更加明顯，比如愛奇藝早期版本、美團外賣等產(chǎn)品。
4.11 懸浮層設(shè)計突破底部標(biāo)簽欄常規(guī)表現(xiàn)
設(shè)計師都在不斷的探索設(shè)計的差異化，敢于創(chuàng)新才能尋求新的可能性。脈脈在最近的迭代中將底部標(biāo)簽欄的設(shè)計采用懸浮層的形式表現(xiàn)，使得界面內(nèi)容呈現(xiàn)的呼吸感更強，也增加了界面結(jié)構(gòu)的空間感。在保持基本設(shè)計規(guī)范的前提下進行小小的變化，就能帶來設(shè)計的差異表現(xiàn)，也能帶給用戶較為新穎的感官體驗。
4.12 懸浮層設(shè)計結(jié)合交互動效的雙向運用
交互動效是 UI 設(shè)計師在靜態(tài)設(shè)計稿中要逐步突破的一種技能，交互動效可以讓我們的設(shè)計表達更加直觀，提高產(chǎn)品的互動性和趣味性。馬蜂窩旅游在進行底部標(biāo)簽欄突破的過程中，除了采用新穎的懸浮層設(shè)計以外，在上滑瀏覽內(nèi)容時采用隱藏局部功能的處理方式，讓內(nèi)容的輸出面積更大。在下滑或者停頓的過程中恢復(fù)默認導(dǎo)航，探知用戶行為習(xí)慣并給出不同的交互反饋，帶給用戶更高的操作體驗和互動趣味性。
4.13 底部拓展設(shè)計承載更多功能模塊
對于一些功能模塊較多的產(chǎn)品，產(chǎn)品設(shè)計師會盡可能的開發(fā)每一個常規(guī)的功能，拓展出更多可以進行設(shè)計延展的模塊。釘釘 APP 在進行底部標(biāo)簽欄設(shè)計的時候，就將更多功能模塊隱藏在上拉展開欄中，方便用戶進行快捷操作。充分的對底部標(biāo)簽欄進行了深度挖掘，利用手勢的變化實現(xiàn)更多功能模塊的切換，提高了用戶的操作體驗。
關(guān)于移動端底部標(biāo)簽欄導(dǎo)航設(shè)計還有很多非常不錯的線上案例，這里就不一一列舉啦！優(yōu)秀的案例總結(jié)能夠帶給我們更多的靈感參考，基于優(yōu)秀之上我們才能設(shè)計出更新穎的作品，希望以此拋磚引玉，期待大家發(fā)現(xiàn)更多好玩的設(shè)計。
五、總結(jié)
對于 UI 設(shè)計師來說，產(chǎn)品體驗是一種習(xí)慣的養(yǎng)成，結(jié)合體驗的日記化摘錄形成設(shè)計思路的總結(jié)?？偨Y(jié)是為了形成最終可供靈感借鑒的經(jīng)驗，基于優(yōu)秀的案例分析才能形成更多的設(shè)計解決方案。
本文以移動端底部標(biāo)簽欄導(dǎo)航設(shè)計的經(jīng)驗分析為大家進行梳理，任何的設(shè)計表達都不是不變的規(guī)律，掌握的是這種設(shè)計分析和總結(jié)的思路，以此反推出更多的設(shè)計總結(jié)。希望本文的思路作為拋磚引玉，帶給你更多的思路。
蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進群請加藍小助微信ben_lanlan。
動效在 UI 場景中的運用已經(jīng)非常普遍，帶給用戶的體驗升級也是很直觀的。無論是一個圖標(biāo)動效到界面間的轉(zhuǎn)場動效，還是聊天場景中的表情動效等，都證明了動效已經(jīng)是無處不在。
最近黑馬哥在體驗產(chǎn)品的過程中，發(fā)現(xiàn)了很多優(yōu)秀的動效案例，今天選擇其中的 10 個和大家一起交流學(xué)習(xí)，希望能夠帶給大家一些靈感啟發(fā)。
01. 動效，讓點贊與眾不同
動態(tài)表情為社交場景帶來更活躍的體驗，使得交流過程變得更加趣味性。一個動態(tài)的表情不僅活躍了氛圍，也使得通過簡單的一個符號代表了千言萬語。
最近在使用釘釘 APP 進行聊天的過程中，發(fā)現(xiàn)輸入框的大拇指圖標(biāo)在長按的時候結(jié)合了動效的變化，對話場景中出現(xiàn)的大拇指表情會隨著長按而增大。結(jié)合動效和長按手勢，為點贊的圖標(biāo)增加了不一樣的趣味性，帶給用戶不一樣的社交體驗。
02. 動態(tài)提醒，增強消息的關(guān)注度
各類通知/消息在產(chǎn)品中隨處可見，紅點提示剛出現(xiàn)的時候還引起了用戶強迫癥，短時間內(nèi)也增強了消息的閱讀率。隨著紅點效應(yīng)逐漸淡化，未讀消息的點擊率逐漸降低，大家都在嘗試更多提高關(guān)注度的形式。
支付寶在消息模塊的服務(wù)提醒中，采用了動態(tài)形式提高關(guān)注度。當(dāng)用戶點擊消息進入界面時，小鈴鐺圖標(biāo)會左右晃動，以此來吸引用戶的目光，達到增加關(guān)注度的目的。
03. 圖標(biāo)動效，讓你脫穎而出
在金剛區(qū)眾多的業(yè)務(wù)模塊中，想要突出重點模塊的關(guān)注度，采用動態(tài)圖標(biāo)是比較常用的方式。采用動靜結(jié)合的形式，會讓動態(tài)表達得到突出。
比如 Keep App 將活動挑戰(zhàn)圖標(biāo)動效化，在不改變配色規(guī)則和圖標(biāo)設(shè)計規(guī)范前提下，依然可以達到突出主題的作用。
04. 博人眼球的動態(tài)懸浮廣告
在不破壞產(chǎn)品結(jié)構(gòu)的前提下，融入廣告的做法中，懸浮層廣告是較為明顯的形式。通常是靜態(tài)異形和動態(tài)異形較多，而動態(tài)的關(guān)注度相對更強一些。
比如 Keep App 將活動的折扣信息以懸浮層的形式表達，既不會占用太多空間（隨著滑動會隱藏顯示），又能吸引用戶的關(guān)注度。如果用戶覺得影響操作，也可以直接關(guān)閉，就不會反復(fù)提醒而形成干擾。
05. 內(nèi)容模塊結(jié)合動效替換突出存在感
在一些內(nèi)容量比較多的產(chǎn)品中，比如電商產(chǎn)品，很多內(nèi)容模塊都是百花齊放。都想要突出自己模塊的存在感，帶來更好的流量引入。而動效的結(jié)合也是不錯的選擇，但是需要考慮動效的干擾度。
當(dāng)當(dāng) App 在突出今日搶購欄目時，為了不影響臨近板塊的干擾度，利用動效轉(zhuǎn)場來替換展示的商品信息。縮放替換商品時的動效既能達到差異化，也不會破壞整體的結(jié)構(gòu)，算是一舉兩得的設(shè)計解決方案。
06. 微弱的動效也能呈現(xiàn)有溫度的設(shè)計
有時候在進行產(chǎn)品設(shè)計的時候，動效帶來的關(guān)注度并不是需要很強的表現(xiàn)力，一些微弱的動效依然可以提升產(chǎn)品體驗，帶給用戶更有溫度的設(shè)計。
自如 App 整體的設(shè)計都是做得非常不錯的，在“我的”板塊頭部區(qū)域，結(jié)合背景插畫視覺感也是非常不錯。插畫中部分元素的微動效增強了生活氣息和真實感，讓用戶感受到這是一款有溫度的產(chǎn)品，提升用戶的好感度。
07. 動態(tài)感十足的底部標(biāo)簽欄
圖標(biāo)動效運用到底部標(biāo)簽欄十分普遍，在這個頻繁切換的操作中，動態(tài)的形式可以帶來更強的趣味性和關(guān)注度。
優(yōu)酷 App 底部標(biāo)簽欄采用多種顏色變化轉(zhuǎn)場，結(jié)合路徑動效帶來動感十足的體驗。首頁圖標(biāo)還結(jié)合了刷新的功能，方便用戶進行內(nèi)容的刷新，增強用戶體驗感。
08. 拓展功能的動態(tài)指引設(shè)計
針對一些功能體量較大的產(chǎn)品，會經(jīng)常結(jié)合一些隱藏式設(shè)計，拓展出更多功能操作。通常默認為展開狀態(tài)，在滑動瀏覽內(nèi)容時隱藏，通過動效吸引點擊展開，不會造成主內(nèi)容的干擾。
比如平安口袋銀行底部標(biāo)簽欄上方的拓展功能區(qū)，動態(tài)形式的展開與隱藏方便用戶瀏覽主頁內(nèi)容。個別內(nèi)容采用動態(tài)設(shè)計（點我抽獎），突出其點擊欲望。動態(tài)設(shè)計不僅提高了功能的曝光度，也能引導(dǎo)用戶操作，將繁瑣的操作變得更便利。
09. 結(jié)合動態(tài) IP 的下拉刷新
針對下拉刷新這一常規(guī)操作，設(shè)計形式也是豐富多樣。結(jié)合 IP 形象進行動態(tài)演變完成刷新動作，被很多產(chǎn)品設(shè)計師所采納。
美團外賣就將品牌 IP 形象結(jié)合得恰到好處，下拉刷新時兩只耳朵搖擺非常俏皮可愛，松開后 IP 形象露出，還配合眨眼睛等可愛的表情動效。情感化設(shè)計結(jié)合動態(tài)表現(xiàn)，拉近與用戶之間的親和力，帶給用戶更人性化的使用體驗。
10. 圖標(biāo)動效帶動局部功能的關(guān)注度
對于一些局部功能或者模塊占比較小的欄目，為了提高曝光度，獲得用戶的關(guān)注度，動態(tài)的形式是比較常用的方法。通常會在圖標(biāo)部分、文字部分、裝飾元素部分等進行動效設(shè)計，帶來的效果也是顯而易見。
比如 QQ 音樂在“我的”模塊中，將活動中心、會員中心、每日簽到的圖標(biāo)采用動態(tài)設(shè)計形式，雖然幾個模塊占比較小，但是依然能夠獲得用戶的關(guān)注度。
小結(jié)
動效表達在產(chǎn)品設(shè)計中的應(yīng)用越發(fā)普及，不僅可以強化功能的關(guān)注度，也能帶給用戶感官體驗上的升級。優(yōu)秀案例的積累和分析，有助于我們掌握更多的表現(xiàn)形式，靈活的運用到項目設(shè)計中。
作者：黑馬青年（vx: heimaux）
本文由 @黑馬青年 原創(chuàng)發(fā)布。未經(jīng)許可，禁止轉(zhuǎn)載。
蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進群請加藍小助微信ben_lanlan。
當(dāng)你為你的項目創(chuàng)建有效的，可訪問的，漂亮的ui時，只需要最小的調(diào)整來幫助快速改善你的設(shè)計。 努力創(chuàng)造。在這篇簡短且易于理解的指南中，我收集了一些容易放置的內(nèi)容。在實踐中，這些小技巧可以毫不費力地幫助你改善你的設(shè)計，還有用戶體驗。
希望你喜歡！
用微妙的邊界定義。
使用多重陰影或非常微妙的邊界（只是一個陰影比你的實際影子）周圍的某些元素可以使這些元素出現(xiàn)
更清晰，更清晰，幫助你避免那些看起來泥濘的陰影。
標(biāo)題給一個更好的光學(xué)范圍。減少長格式正文的字母間距？這是一個大大的“不”。但對于標(biāo)題……我要說“是”!
你的標(biāo)題很可能會比他們的標(biāo)題更大，更重。相比于正文，字母之間的間距有時會出現(xiàn)視覺上更大，這并不是你想要的。減少字母間距，只是少量，可以使你的標(biāo)題視覺平衡，更易于閱讀，通常更賞心悅目。
為了一致性，確保你的圖標(biāo)具有相同的視覺風(fēng)格。確保它們擁有相同的視覺風(fēng)格;同樣的重量，要么填滿，要么秒變了。不要混搭。
只使用一種字體就很好。在設(shè)計時，使用單一字體是絕對沒問題的，這樣做實際上可以幫你產(chǎn)生更強、更持久的結(jié)果。忽略“總是使用兩種字體”最小值的人群。使用以下組合重量，大小和顏色，你仍然可以產(chǎn)生完美的可接受的結(jié)果。雖然只有一個單獨的字體。
留白是UI設(shè)計朋友。大膽的使用。適度的留白，即使是少量的白色物質(zhì)，但要使用得當(dāng)。能讓你的設(shè)計透氣，而且看起來更光亮。
創(chuàng)建長篇內(nèi)容？給20 pt試試。對于長形式的內(nèi)容（即微博文章，項目描述等等），試著這樣做20pt(甚至更多一點)為你的文本字號。當(dāng)然，這取決于所選擇的字體，但大多數(shù)流行的字體在20pt時效果得很好，并帶來更好的閱讀體驗當(dāng)你的用戶面對一堵文字墻的時候。18pt太過時了。
使用字體比例定義一個適合的字體大小集。使用字體比例可以幫助您輕松、實用地定義一組字體大小。顧名思義，Type Scale基于一個比例因子(比如1.25)工作的。從一個基本字體大小(18px)和乘(或除)它與縮放因子得到的字體大小要么更高(即;H?，H?等)，或較低層次(即;標(biāo)題、按鈕等)字體比例將幫助你產(chǎn)生看起來和諧的文本字號集。因為他們的大小根據(jù)設(shè)定的固定比例增加和減少。
選擇一個基本顏色，然后使用色彩和色調(diào)增加均勻性。你猜怎么著?你不必總是用大量的顏色填充你的設(shè)計。如果項目允許，簡單地使用一個有限的調(diào)色板選擇一個基地顏色，然后使用你選擇的顏色的色調(diào)和陰影可以增加一致性以最簡單的方式來改變你的設(shè)計。
改善用戶登錄的體驗。記住拇指規(guī)則。允許用戶在任何時候跳過您的移動應(yīng)用程序上線序列，并且放置跳過鏈接在拇指容易觸及的位置。只是一個簡單的調(diào)整，可以為你的用戶提供更好的體驗……
記住，拇指仍然是主宰！
你的影子來自其中一個光源對吧？確保你的影子總是來自一個光源。這是一個簡單的錯誤，但它可以讓你的設(shè)計看起來更拋光且統(tǒng)一。記住，我們不是生活在一個擁有一千個太陽的國度里。
使用更好的字體組合，效率會很很快。當(dāng)你想要提高你的字體組合技巧的時候，當(dāng)面對1000個字體選擇，只是去尋找對應(yīng)的自己集合，效率會快很多。
文字和圖像與一個微妙的覆蓋。根據(jù)文本可能放置在圖像上方的位置，您可以選擇嘗試，并測試完整的圖像覆蓋，或更微妙的(從下到上，或從上到下)漸變疊加，以實現(xiàn)兩者之間的簡單對比。為了在你的文本之間形成良好的對比，不要太復(fù)雜的內(nèi)容和圖片。
太多就會導(dǎo)致用戶體驗不合格。盡量只在標(biāo)題和小段落中使用中心文字。對于幾乎所有其他內(nèi)容，保持文本左對齊。你的用戶會感謝你的你。
當(dāng)選擇一個多用途的文字，盡量找一個大量權(quán)重。你搜索的字體有很多選擇嗎？重量、風(fēng)格？如果你打算在你的一些項目中使用它，請嘗試并確保它是這樣做的。只有一種重量或樣式。不行的。如果可以的話，我建議你避開這些。當(dāng)然也有例外，某些項目會要求“只有一種風(fēng)格”
更精致的字體，但對于絕大多數(shù)項目，你想要的字體再多一點就能…嗯…選擇。即使你決定只使用兩種或三種重量或風(fēng)格，希望你在設(shè)計過程的后期需要更多的空間。
想要創(chuàng)造更容易理解的界面，對吧？把你的文字調(diào)暗在光亮的背景上。在淺色背景下工作時，不要讓你的文本太亮。
當(dāng)涉及到長形式的內(nèi)容時，某些常規(guī)的粗細字體仍然可以看。但太重了，在屏幕上會很僵硬。你可以很容易地解決這個問題，選擇一些像深灰色（即#4F4F4F）的基調(diào)，把文字往下寫，讓眼睛更容易看。
總是通過icon最突出的內(nèi)容。你認為這是常識，對嗎？我并不覺得。通過使用色彩對比度做區(qū)分，尺寸和標(biāo)簽，確保盡可能突出。如果可以的話，不要總是只依賴圖標(biāo)。如果可以使用文本標(biāo)簽，那就使用它們，讓用戶更好地理解。
當(dāng)你的字體變小時，請增加行高，以達到更好的通用性。這同樣適用于當(dāng)你的字體大小增加。簡單地降低行高。
使用x-height來測試字體的可讀性?；旧?，x-height是一個小寫字母' x '相對于大寫字母高度 (T)的相同字體。如果你的字體有一個大的x高，通常有助于更好地閱讀，特別是在使用長形式的正文文本。另一種確定字體可讀性，并縮小范圍的方法如果你有一些無法選擇的字體，可以做這個測試，比較來自特定字體的三個字符：大寫字母I，小寫的L和數(shù)字1。
當(dāng)設(shè)計一個在應(yīng)用程序內(nèi)部使用的菜單時，確保提供最多經(jīng)常使用的動作（例如：上傳圖像，添加文件等)最突出的屏幕上。
顏色-從你的圖像中選擇，會給你的產(chǎn)品帶來生命。簡單地從你的產(chǎn)品圖片中選擇顏色，然后應(yīng)用各種色調(diào)。你選擇的顏色陰影到你的背景，文字，圖標(biāo)或更多，可以添加。你的設(shè)計具有豐富的視覺趣味和個性。
基于字體的x坐標(biāo)，設(shè)置您的線高度。不同x高的字體需要不同的行高測量，實現(xiàn)文本行之間的正確分隔。即使你可能有兩種字體相同的字體大小(即：18px)它們的x的高度可以有很大的不同，這在選擇正確的線的種類起著很大的作用高度來實現(xiàn)。
突出最重要的元素。通過使用字體大小，權(quán)重，顏色和布局的組合，可以很輕松的突出UI中最重要的元素。只是很簡單，但微妙的調(diào)整，讓用戶體驗更好一點。
操作錯誤的時候，添加一個額外的視覺輔助。在用戶剛剛采取的操作附近添加一個錯誤消息可以是簡單的形式，但很有幫助，當(dāng)他們填寫任何形式的表格時額外的視覺輔助。
嘗試在移動端創(chuàng)建慷慨的熱區(qū)。當(dāng)為移動設(shè)備設(shè)計時，嘗試創(chuàng)建足夠大的可點擊區(qū)域，是好的。對于只包含文本的按鈕和鏈接來說，這是很有挑戰(zhàn)性的，盡可能使用帶有標(biāo)簽的圖標(biāo)。
以下是iOS和Android的最小推薦點擊區(qū)域：
44 x 44pt用于iOS
48x48dp用于Android
在短標(biāo)題上盡量使用全大寫。如果你想在標(biāo)題上使用全大寫，請確保它們在任何時候都很短。有可能，最好是一行。將它們用于較長的文本是不好的。和之前的技巧一樣，在標(biāo)題中添加少量的字母間距。能讓他們呼吸順暢，而且視覺效果更好。
在輕文本和圖像之間，保持可接受的對比度。一定要確保淺色的文字在淺色的背景下是清晰的。簡單地應(yīng)用一個稍微不透明的背景在你的文本后面將保持這些元素之間的對比度很好。
看看這些很棒的字體，用在標(biāo)題非常好的。發(fā)現(xiàn)他們真的很適合標(biāo)題，設(shè)計感很強。（我沒有推廣費用，請放心用）
看看這些很棒的字體，用于長文本是非常好的，強烈推薦使用。（我仍然沒有任何推廣費）。
標(biāo)題和正文。當(dāng)你想實現(xiàn)一個好的垂直節(jié)奏，以及一個強大的視覺之間，需要對文本元素排版、間距作設(shè)計。我見過許多設(shè)計，最常見的是在文章列表中，它們已經(jīng)被應(yīng)用標(biāo)題的上下空白相等，這樣就失去了這種聯(lián)系在它下面有正文。在這種情況下，我總是會給我的標(biāo)題更多的頂部邊距，而在底部，標(biāo)題和下面的內(nèi)容之間的連接是更強，有良好的垂直節(jié)奏，視覺層次保留在所有的文章之間。
對于下載指標(biāo)，試著去做盡可能提供信息。對于用戶，嘗試使具有信息性的下載指示符對用戶很友好。你可以通過使用顏色來實現(xiàn)這一點，用百分?jǐn)?shù)來顯示當(dāng)前進度，一個簡單的圖標(biāo)，讓他們可以在任何地方取消下載時間。
如果你能保持標(biāo)題簡短，簡潔……“想做就做”。
如果可以，如果合適的話，保持標(biāo)題簡短，時髦，切中要點。而不是“這是你的風(fēng)格，你的方式”，簡單地使用像這樣的“你的風(fēng)格。你的方式。”人們會瀏覽，保持這些標(biāo)題簡短有力有助于他們更快地消化中的信息。
記住，這種方式可能會讓人感覺很突然，你需要考慮一下你所從事的項目類型，以及目標(biāo)受眾來決定方法是合適的，相對于更標(biāo)準(zhǔn)的格式。
正確的設(shè)計“聲音”。在項目中處理文本時，選擇正確的字體將影響就像你說話的聲音一樣。要大聲，要柔和，要友好，要正式，要有趣。每一種字體都有自己獨特的聲音，關(guān)鍵在于找到合適的字體你正在做的項目的聲音。當(dāng)你剛接觸字體時，這似乎是一項艱巨的任務(wù)，所以不要害怕從類似的項目中獲得靈感，并從這些項目中汲取靈感它們有助于影響你的決定，并提高你的理解什么是合適的。
你的正文，并提高可讀性處理正文文本，并試圖找到合適的行長度可能有點平衡。對于一個單獨的列頁面，45到75個字符被普遍認為是滿意的行長度，而行長度為66個字符(包括字母和空格)被發(fā)現(xiàn)是最佳位置。當(dāng)然，字體大小和行高在決定可讀性時也起著重要作用，但是對于行長，保持在45到75個字符之間，就會更好了。
偶爾使用純裝飾的幽靈文字也可以，但要保留閱讀的問題。屏幕上的大部分文本內(nèi)容應(yīng)該堅持可用性最佳的做法是沒有問題的。但有時，希望添加純出于裝飾目的的文本，我們不希望所有的設(shè)計都落入乏味。如果沒有元素會以任何方式影響用戶體驗，那么出于裝飾的原因，插入奇怪的元素是可以的。
使用戶界面中的元素彼此區(qū)分。按鈕、通知，ui中兩個獨立但重要的元素。如果可以的話，總是試著確保你的用戶能夠快速地將它們區(qū)分開來，輕松掃描您的網(wǎng)站或應(yīng)用程序。按鈕，在大多數(shù)情況下，將優(yōu)先，所以確保他們是最突出的。項目在屏幕上，并很容易區(qū)分其他元素。
只是一些細微的陰影，你所需要的。我們都喜歡陰影，對吧？它們可以作為微妙又很強大的視覺線索，在您的設(shè)計中使用要適度?，F(xiàn)實世界中的陰影，在大多數(shù)情況下幾乎是不可察覺的，而且所以你應(yīng)該在ui中模仿這種行為。放下沉重和黑暗的陰影并降低不透明度，以實現(xiàn)一些的東西更微妙和栩栩如生。
使用全部大寫？選擇適合的字體，能夠達到光學(xué)清晰度。在你的設(shè)計中適度使用“全部大寫”是很好的。選擇一個合適的字體與行高和較重的字重，使用戶的光學(xué)清晰度。
讓面包屑脫穎而出，易于為用戶解釋。面包屑無處不在，經(jīng)常用于內(nèi)容豐富的網(wǎng)站，通過最小的調(diào)整，你可以確保用戶能夠快速定位他們在一個網(wǎng)站上的位置以及他們可能需要去的其他地方。如果用戶已經(jīng)通過使用跳轉(zhuǎn)到網(wǎng)站的某個深度，這一點尤其有用。
使用高度飽和的顏色?試一試用淺色調(diào)來緩和氣氛或者陰涼處。高度飽和的顏色(明亮的藍色、紅色、綠色等)可以讓網(wǎng)站看起來很棒，但是當(dāng)過度使用時，它們會使使用者的眼睛疲勞，主要是在使用的時候的文字內(nèi)容。盡可能使用時要適度，并盡量與柔和的顏色搭配顏色或色調(diào)變化)的飽和顏色，以避免可怕的眼睛疲勞。使用這種方法還可以直接注意到飽和的色彩和使最重要的內(nèi)容前面和中心，與更柔和的顏色采取較少突出角色，讓用戶的眼睛休息一下。記住，在選擇顏色時，可讀性和可訪問性應(yīng)該是最優(yōu)先的。
在ui中使用已建立的圖標(biāo)，為了避免給用戶造成混淆。在你的設(shè)計中添加圖標(biāo)時，試著選擇一個有代表性的已建立的圖標(biāo)。不要選擇一個能傳達正確含義和功能的圖標(biāo)否則會引起困惑，成為用戶的認知障礙。不要在這些圖標(biāo)上過于叛逆。
在眾多經(jīng)過嘗試和測試的設(shè)計原則中，這里有一個是幫助您為用戶生成更清晰的ui的關(guān)鍵。接近只是確保相關(guān)設(shè)計元素放置在一起的過程，表明彼此之間的關(guān)系，這有助于加快用戶的認知。
4pt基線網(wǎng)格+ 8pt網(wǎng)格=單一網(wǎng)格。當(dāng)使用類型時，8點網(wǎng)格旁邊使用4點基線
可以為你的設(shè)計帶來更和諧的垂直節(jié)奏。您需要對齊您的類型到基線網(wǎng)格4，使用的行高值為4的倍數(shù)（16、20、24、28等）
為什么4？我發(fā)現(xiàn)在過去使用特定的文本大小時，按8的倍數(shù)縮放是不太合適。
減少標(biāo)題上的行高是很好的。與長形式的主體文本不同，它需要足夠的行高，以便折行易讀。標(biāo)題的推薦行高通常約為1至1.3倍。
選顏色有困難計劃嗎？在顏色上進行類比論。類似的顏色，也被稱為相鄰或相鄰的色調(diào)，是其中之一最和諧的配色方案，可以大大幫助你，如果你有很難挑選出搭配得很好的顏色。由三原色、二原色和三原色組成的一組相鄰的色調(diào)幫助您創(chuàng)建一個簡單的，顏色方案快速。當(dāng)你需要快速將顏色調(diào)和到混合中時，可以使用類似的方法。
在你的設(shè)計中盡量提高信噪比。你可以在你的設(shè)計中通過最大化信號來實現(xiàn)清晰和可用性最小化噪聲，從而產(chǎn)生高信噪比。您可以通過確保提供相關(guān)信息(信號)來實現(xiàn)這一點有效，不相關(guān)的信息(噪聲)被減少或完全刪除。事情更加清晰。提高你的信噪比。
我想用更非正式的方式說話。語氣嗎？嘗試所有小寫字母。使用較重的字體和大寫會顯得有點正式和夸張。試著選擇全小寫和較輕的字體。在處理特定項目時，使用類似全小寫的拷貝可以呈現(xiàn)更非正式的、可接觸的信息。記住要在圖像之間使用某種顏色疊加與文字達到較強的對比。
當(dāng)使用類型時，元素不需要尖叫“看看我!”一直如此但他們確實需要一個平衡的等級制度。只需通過重量、大小和顏色進行細微的調(diào)整就可以實現(xiàn)這一點。這樣做可以讓用戶掃描并找到必要的元素，避免在過程中產(chǎn)生任何混淆。
養(yǎng)肥了，字體大小為最佳易讀性。當(dāng)設(shè)置暗色文字與淺色背景，選擇一個更輕的粗細。但是…反過來說:淺色文字>深色背景。最好是看一下增加一點字體重量，特別是對于長表單副本。以最佳的易讀性為目標(biāo)，避免讓用戶的眼睛疲勞。
試著為你要呈現(xiàn)的內(nèi)容選擇合適的字體。用戶是精明的，有一種直觀的感覺，當(dāng)內(nèi)容與他們交談當(dāng)它不是。正確的字體選擇是至關(guān)重要的，使您的內(nèi)容講給他們直率和情感的水平。
你是否使用全大寫的短行文本？嗯…這是一個好主意，增加這些字母之間的間距，以達到更好的用戶的易讀性。這樣做使單詞更容易閱讀和處理，因為字母更多彼此區(qū)分。字母之間的間距只要稍微增加一點就可以。
打開這些錯誤消息，您的表格有幫助。在使用表單時，請嘗試并確保錯誤消息得到解釋。出了什么問題，如何補救?？偸亲層脩袅私馇闆r，即使是像常規(guī)一樣常見的事情的形式。讓這些錯誤消息有用，不要讓您的用戶蒙昧。
試著向用戶保證在加載過程中會發(fā)生一些的事情你的應(yīng)用程序。顯示應(yīng)用程序元素的框架可以幫助你快速溝通布局和確保用戶正在發(fā)生一些事情。系統(tǒng)狀態(tài)可見性是一個重要的原則要遵循，并允許用戶知道發(fā)生了什么。不要讓用戶從一開始玩猜謎游戲。
告訴用戶將要做什么如果他們應(yīng)用了某個動作。在應(yīng)用特定的操作之前，總是嘗試并詳細地告知用戶可以有結(jié)果。這尤其適用于具有不可逆轉(zhuǎn)后果的行為，如刪除某些東西。讓用戶知道將要發(fā)生什么，并在此之前要求他們進行確認。他們就會按下那個標(biāo)有“刪除”的紅色大按鈕。
參考文獻《UI & UX Micro Tips - The Ultimate Collection》
蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進群請加藍小助微信ben_lanlan。
在設(shè)計的創(chuàng)作重，很多設(shè)計師都喜歡追求軟件技法帶來的炫酷感，而忽略了構(gòu)圖理論知識帶來的重要性，這篇文章就是為了解決這個問題
海報設(shè)計對于初學(xué)者而言，是一個簡單入門，又容易出作品集的類目。在剛開始練習(xí)時不要天馬星空的去想象，最好的練習(xí)就是根據(jù)一定的構(gòu)圖規(guī)范，嘗試尋找規(guī)律，建立可行的秩序，讓版面具有一定的閱讀性。
-
只有在版面具有基礎(chǔ)的閱讀性，才可以根據(jù)想法思路進行創(chuàng)意性的表現(xiàn)，而建立持續(xù)最簡單的方式之一就是運用構(gòu)圖。當(dāng)下主流的常用構(gòu)圖，我大概總結(jié)整理有七種形式，下面我們一起來了解一下，附帶案例演示。
第一種：四周壓角構(gòu)圖→
四周壓角構(gòu)圖指的是將標(biāo)題或者重要信息放置在版面的四個邊角處,可以是圖形或者文字，其余信息元素等則放置在畫面中間區(qū)域，使其整個版面嚴(yán)謹(jǐn)有序,平衡且具有視覺的張力。壓住四角一般會結(jié)合居中式構(gòu)圖來呈現(xiàn)版面,可以產(chǎn)生視覺聚焦。
①
將信息壓在四個角之內(nèi)
②
將信息超出頁面四角一部分
③
將信息沿四周環(huán)繞排版
第二種：對稱式構(gòu)圖→
對稱式構(gòu)圖指的是將版面分成上下或者左右兩個部分,上下或左右兩部分比重相同,排版相似,對稱式構(gòu)圖可以使版面更加有秩序感,適合處理信息較多,層級較為復(fù)雜的內(nèi)容。對稱式構(gòu)圖可以很快速的塑造出版面的平衡，視覺上的平衡幾乎就等于完成了版面的50%設(shè)計目的。是初學(xué)者中最為常見的形式之一，對稱之間互相呼應(yīng)，信息處理可以從中快速打破呆板狀態(tài)，讓版面具有靈活性。
①
上下對稱式構(gòu)圖
②
左右對稱式構(gòu)圖
第三種：居中式構(gòu)圖→
居中式構(gòu)圖也叫中心式構(gòu)圖，是指把主體信息放在版心中間,這樣容易產(chǎn)生視覺聚焦,其他信息圍繞版面中心來進行排版設(shè)計,放在版面中心的可以是文字、圖片、圖形或者文字等。使用居中式構(gòu)圖，需要多注意畫面整體的平衡和元素之間的留白關(guān)系，讓元素組合之間留有足夠的對比與閱讀性。
第四種：S型式構(gòu)圖→
S型式構(gòu)圖,將主要元素按照S型排版,版面更加的自由生動,非常具有表現(xiàn)力,是一種很常見的靈活構(gòu)圖手法,主要元素可以是圖像、圖形、標(biāo)題文字、slogan等。S型式構(gòu)圖是講曲線與版面進行結(jié)合，可以快速的創(chuàng)造出靈活的版面視覺以及節(jié)奏感，可以很好的提高版面的形式感，同時也可以有效的引導(dǎo)觀眾讀者的視線。
第五種：三分式構(gòu)圖→
三分式構(gòu)圖是指將版面分割成相等或不等的三塊區(qū)域,每個區(qū)域放置相應(yīng)的信息,三分式構(gòu)圖分垂直三分法和水平三分法,三分之后版面更有秩序感,適合處理文案較多,層級較為復(fù)雜的內(nèi)容。難度較高，同時容易讓版面連貫性斷層，所以在運用當(dāng)中需要額外留意元素與空間之間的融合表現(xiàn)。
①
水平三分式構(gòu)圖
②
垂直三分式構(gòu)圖
第六種：傾斜式構(gòu)圖→
傾斜式構(gòu)圖,是指將版面整體或者主要元素作傾斜處理,也可做透視處理或?qū)翘幚?這種構(gòu)圖使版面更靈活,更加的具有形式感，作傾斜處理的元素可以是主題、圖片等元素。傾斜與對角可以提高文字或圖片的表現(xiàn)力，能很快速的塑造整體的空間感。
第七種：散點式構(gòu)圖→
散點式構(gòu)圖,是指將元素按照規(guī)律或者不按照規(guī)律自由的放置在版面的區(qū)域,散點放置的內(nèi)容通常有文字,圖片等,通常散點式構(gòu)圖都會結(jié)合S型式構(gòu)圖搭配使用,這種構(gòu)圖形式感強,更具有畫面表現(xiàn)力.在運用的時候，需要特別注意文字或標(biāo)題的閱讀性，過于搶鏡會讓版面丟失主題。
光說不練假把戲，實操案例來一個，這一個案例是圍繞四周壓角構(gòu)圖來分享海報的制作操作技巧。
涉及到的知識點有:
①四周壓角構(gòu)圖的技巧;
②文字編排;
③利用文字的局部輪廓化使版面更具有形式感。
我們先來看看最終的海報效果先。
第一步：→
所選的文案是一個攝影展，所以我們找了一張具有故事性的圖片作為底圖,新建文檔,背景填充為黑色，置入圖片,確定圖片在版面中的位置，因為我們準(zhǔn)備做四周壓角構(gòu)圖型的海報，所以我們與居中式構(gòu)圖相結(jié)合,這樣能使版面的視覺聚焦。
第二步：→
根據(jù)圖片的構(gòu)圖，我們來確定整體版面的構(gòu)圖形式,由于圖片是居中偏右的，所以我們用居中式構(gòu)圖加上四周壓角構(gòu)圖來進行整體版面的風(fēng)格呈現(xiàn)。
第三步：→
將主題文案“無限的山峰”以四周壓角構(gòu)圖的方式放置在版面的四個角上,我們使用的是壓在版面以內(nèi)的壓角構(gòu)圖,并結(jié)合居中構(gòu)圖的方式，這樣能使版面更加的規(guī)整有序,而且具有視覺張力,注意圖片和文字的聯(lián)系。
第四步：→
現(xiàn)在我們來進一步進行處理，由于主題文案相離較遠，接下來就是增強主題文字之間的聯(lián)系，我們嘗試用線來處理,線的作用就是連接與分割,我們用線將主題文字連接起來,并加上一些漢語拼音元素,使線條不會那么單調(diào)，并且更具有形式感。
第五步：→
先不急著下一步，我們先來觀察下版面，現(xiàn)在的版面被我們分割成了四份,我們把剩下的信息分別在指定的區(qū)域內(nèi)進行排版。
第六步：→
我們將剩下的文案分別進行排版，重要的信息我們需要放大處理,不重要的信息可以偏小一些,重要的信息比如:參展藝術(shù)家、日期、地址等,這里要注意層級之間的劃分,要使版面顯得井然有序。
第七步：→
其實版面到這里已經(jīng)處理的差不多了,但是主標(biāo)題看起來稍顯平凡,跟內(nèi)文的文字一樣，沒有什么特征特色，所以我們可以做更多的變化,拆分主題文字的一些筆畫,并使其輪廓化,我們還可以傾斜或放大一些筆畫，或者局部模糊，打散等等眾多效果都可以嘗試。
第八步：→
其最后把整體的細節(jié)稍微調(diào)整下,這樣，一張具有形式感的海報就形成了,這張海報用到了四周壓角構(gòu)圖，居中式構(gòu)圖,所以可得出結(jié)論,七種構(gòu)圖方式之間是可以交叉使用的,只要能使版面更加的好看,更具有形式感就行。
→ 完成??！
蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進群請加藍小助微信ben_lanlan。
隨著新的一年緩緩拉開序幕，UI設(shè)計領(lǐng)域也迎來了新的變革與挑戰(zhàn)。蘭亭妙微設(shè)計團隊，作為行業(yè)內(nèi)的佼佼者，始終站在設(shè)計前沿，不斷探索與創(chuàng)新。今天，我們將與您一同解鎖2025年UI設(shè)計的新趨勢，特別是色彩與布局方面的秘籍，為您的設(shè)計之旅提供靈感與指導(dǎo)。
一、色彩趨勢：回歸自然，擁抱溫暖
在2025年，色彩選擇將更加傾向于自然與溫暖。這反映了人們對和諧共生、心靈慰藉的渴望。以下是我們預(yù)測的幾個熱門色彩趨勢：
1. 大地色系：從沙漠的金色到森林的綠色，大地色系以其沉穩(wěn)、質(zhì)樸的特點，成為營造溫馨氛圍的首選。這些色彩不僅能夠激發(fā)用戶的舒適感，還能與多種設(shè)計風(fēng)格相融合，展現(xiàn)出獨特的韻味。
2. 柔和粉色：粉色作為近年來備受追捧的色彩之一，其柔和的色調(diào)在2025年將繼續(xù)占據(jù)重要地位。無論是淺粉色還是略帶灰調(diào)的煙粉色，都能為用戶帶來溫馨、浪漫的感受，非常適合用于女性用戶或情感類產(chǎn)品的設(shè)計中。
3. 活力橙色：在追求舒適與溫暖的同時，活力橙色以其鮮明的個性和積極向上的態(tài)度，成為打破沉悶、增添活力的不二之選。在需要強調(diào)重點或激發(fā)用戶行動力時，橙色能夠發(fā)揮重要作用。
二、布局趨勢：簡潔明了，注重交互
在布局方面，2025年的UI設(shè)計將更加注重簡潔性與交互性。以下是我們總結(jié)的幾點布局趨勢：
1. 極簡主義：隨著信息量的爆炸式增長，用戶對于簡潔、清晰的設(shè)計需求愈發(fā)強烈。因此，極簡主義在2025年將更加盛行。設(shè)計師們將通過精簡元素、優(yōu)化排版、使用留白等手段，打造更加舒適、易用的界面。
2. 卡片式設(shè)計：卡片式設(shè)計以其直觀、易讀的特點，成為近年來備受青睞的布局方式。在2025年，卡片式設(shè)計將繼續(xù)發(fā)展，不僅限于信息展示，還將更多地應(yīng)用于交互設(shè)計中，如滑動切換、點擊展開等。
3. 動態(tài)布局：隨著響應(yīng)式設(shè)計的普及，動態(tài)布局在2025年將更加成熟。設(shè)計師們將更加注重界面在不同設(shè)備、不同屏幕尺寸下的適應(yīng)性，確保用戶在不同場景下都能獲得良好的使用體驗。
結(jié)語
色彩與布局作為UI設(shè)計的兩大核心要素，對于提升產(chǎn)品的吸引力與用戶體驗至關(guān)重要。蘭亭妙微設(shè)計團隊將繼續(xù)關(guān)注設(shè)計趨勢的發(fā)展變化，不斷探索與創(chuàng)新。我們相信，通過巧妙地運用色彩與布局技巧，我們能夠為用戶帶來更加美好的使用體驗。讓我們攜手共進，共同迎接UI設(shè)計的新篇章！
蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進群請加藍小助微信ben_lanlan。
作者：彩云Sky
鏈接：https://www.zcool.com.cn/article/ZMTU5NDg1Mg==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進群請加藍小助微信ben_lanlan。
蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進群請加藍小助微信ben_lanlan。
藍藍設(shè)計的小編 http://www.yvirxh.cn