中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)讀：標(biāo)簽欄是移動(dòng)端應(yīng)用程序中最常用的UI元素之一，通常會(huì)出現(xiàn)在應(yīng)用程序屏幕的底部，可以讓用戶(hù)在應(yīng)用程序中的不同部分之間快速切換。本文作者從七個(gè)方面，對(duì)底部標(biāo)簽欄進(jìn)行了深入的分析，希望對(duì)你有幫助。

一、標(biāo)簽欄是什么？

標(biāo)簽欄也叫Tab Bar，是移動(dòng)端應(yīng)用程序中最常用的UI元素之一。標(biāo)簽欄出現(xiàn)在應(yīng)用程序屏幕的底部，可以讓用戶(hù)在應(yīng)用程序中的不同部分之間快速切換。標(biāo)簽欄可以是半透明的，也可以具有背景色，在所有屏幕方向上都保持相同的高度，并且在顯示鍵盤(pán)時(shí)被隱藏。標(biāo)簽欄可以包含任意數(shù)量的標(biāo)簽，但是可見(jiàn)標(biāo)簽的數(shù)量根據(jù)設(shè)備的大小和方向而變化。如果由于水平空間有限而無(wú)法顯示某些選項(xiàng)卡，則最終的可見(jiàn)選項(xiàng)卡將變?yōu)椤案唷边x項(xiàng)卡，該選項(xiàng)卡將在單獨(dú)屏幕上的列表中顯示其他選項(xiàng)卡。

標(biāo)簽欄在任何目標(biāo)頁(yè)面中的高度是不變的，iOS 規(guī)定它的高度為98px(iOS @2x)。但因?yàn)?iPhone X 之后的全面屏手機(jī)引入了 Home Bar ，所以在進(jìn)行界面適配的時(shí)候，請(qǐng)務(wù)必要加上 Home Bar 自身的68px高度。別讓Home Bar遮擋標(biāo)簽欄中標(biāo)簽的展示，這會(huì)讓兩個(gè)控件發(fā)生操作手勢(shì)沖突。

二、為什么標(biāo)簽欄要放于底部？

史蒂文·霍伯（Steven Hoober）在對(duì)移動(dòng)設(shè)備使用情況的研究中發(fā)現(xiàn)，人們會(huì)根據(jù)自己的設(shè)備，需求和背景以多種方式觸摸手機(jī)，觸摸手機(jī)屏幕或按鈕的用戶(hù)分三種基本方式：抱著手機(jī)的人占36%、兩只手使用手機(jī)的人占15%，而49％的人依靠一只手在手機(jī)上完成事情，除此之外75％的用戶(hù)僅用一個(gè)拇指觸摸屏幕。

在下圖中，出現(xiàn)在手機(jī)屏幕上的圖表是近似覆蓋圖，其中的顏色表示用戶(hù)的拇指可以接觸到哪些區(qū)域以與屏幕交互。綠色表示用戶(hù)可以輕松到達(dá)的區(qū)域；黃色，需要伸展的區(qū)域；紅色區(qū)域，要求用戶(hù)改變握持設(shè)備的方式。

這意味著：

將常用的“行為”放在屏幕底部很重要，因?yàn)橹恍枰绘I式的交互即可輕松到達(dá)這些“行為”。

三、標(biāo)簽欄的三大原則

底部標(biāo)簽欄設(shè)計(jì)應(yīng)當(dāng)遵循三大原則：結(jié)構(gòu)合理、位置清晰、可預(yù)測(cè)行為。

3.1 結(jié)構(gòu)合理

為了讓標(biāo)簽欄表現(xiàn)清晰，兩大平臺(tái)在規(guī)范里都對(duì)標(biāo)簽數(shù)量給出了相同的建議：建議標(biāo)簽欄內(nèi)的標(biāo)簽個(gè)數(shù)為3個(gè)至5個(gè)。因?yàn)闃?biāo)簽過(guò)多會(huì)使每一個(gè)單元標(biāo)簽的可觸空間降低，人們?cè)谖锢砩希ㄊ种福╇y以點(diǎn)擊或誤觸，除此之外還會(huì)增加應(yīng)用程序結(jié)構(gòu)的復(fù)雜性。

注：如果你因?yàn)楫a(chǎn)品結(jié)構(gòu)非常繁雜，標(biāo)簽數(shù)量想要達(dá)到更多，那么在 iOS 中就會(huì)給你強(qiáng)硬處理，iOS 人機(jī)交互規(guī)范告訴產(chǎn)品設(shè)計(jì)者們：標(biāo)簽欄雖然可以包含任意數(shù)量的標(biāo)簽，但可見(jiàn)標(biāo)簽的數(shù)量會(huì)根據(jù)設(shè)備的大小(平板或手機(jī))和方向(豎屏或橫屏)而自適應(yīng)變化。如果由于水平空間有限而無(wú)法顯示某些標(biāo)簽時(shí)，最后的一個(gè)可見(jiàn)標(biāo)簽將被會(huì)被系統(tǒng)強(qiáng)行轉(zhuǎn)換為“更多”選項(xiàng)，需要用戶(hù)點(diǎn)擊“更多”選項(xiàng)之后，系統(tǒng)才將在單獨(dú)屏幕上的列表中顯示其他被隱藏的標(biāo)簽。

3.2 位置清晰

“我在哪里？”?是用戶(hù)成功導(dǎo)航所需要回答的一個(gè)基本問(wèn)題，我們應(yīng)當(dāng)采用適當(dāng)?shù)囊曈X(jué)提示讓用戶(hù)知道目前所處的位置（選中狀態(tài)）。在APP應(yīng)用中我們常見(jiàn)的處理方式有4種：改變圖標(biāo)樣式、改變大小、改變顏色、改變展示樣式。它們并不一定是獨(dú)立存在的，可以同時(shí)作用于一個(gè)標(biāo)簽。

3.3 可預(yù)測(cè)行為

選取每個(gè)底部導(dǎo)航選項(xiàng)都有通向它的目的地，底部導(dǎo)航應(yīng)當(dāng)將用戶(hù)直接引導(dǎo)到相關(guān)頁(yè)面，不應(yīng)該打開(kāi)菜單或其他窗口。如果在某些情況下可以使用標(biāo)簽，但在其他情況下則無(wú)法使用，則應(yīng)用程序的界面將變得不穩(wěn)定且不可預(yù)測(cè)。我們要確保所有選項(xiàng)卡始終處于啟用狀態(tài)，并說(shuō)明為什么選項(xiàng)卡內(nèi)容不可用。例如造作新家APP，當(dāng)用戶(hù)處于未登錄狀態(tài)時(shí)，就不能查看底部標(biāo)簽“我的”信息，當(dāng)我點(diǎn)擊標(biāo)簽“我的”，就會(huì)彈出快捷登陸界面，這樣就能讓用戶(hù)明白不能使用的原因是賬號(hào)未登陸，從另一層面講也很好的引導(dǎo)了用戶(hù)注冊(cè)與登陸。

注：不要使用標(biāo)簽欄為用戶(hù)提供對(duì)當(dāng)前屏幕或應(yīng)用程序模式下的元素起作用的控件，如果需要提供控件，請(qǐng)使用工具欄。

四、標(biāo)簽欄的基礎(chǔ)規(guī)范

在設(shè)計(jì)標(biāo)簽欄前我們首先要了解它的基礎(chǔ)規(guī)范，在保證基礎(chǔ)規(guī)范合理的情況下再去進(jìn)行設(shè)計(jì)。

4.1 圖標(biāo)視覺(jué)大小

為了保證圖標(biāo)的尺寸大小一致性，我們往往會(huì)建立基礎(chǔ)的網(wǎng)格尺寸來(lái)進(jìn)行繪制圖標(biāo)，下面就以常用的24×24為大家舉例：

網(wǎng)格包含2px出血位。這樣可以確保圖標(biāo)在導(dǎo)出時(shí)將保留其所需的比例和周?chē)目瞻讌^(qū)域，同時(shí)還能夠很好的平衡圖標(biāo)的視覺(jué)重心。

最后加入圖標(biāo)的keyline，keyline由圓形，正方形，矩形，正交，三角形和對(duì)角線(xiàn)組成。它可以為您提供圖標(biāo)集中基本形狀或比例的一致大小。這使創(chuàng)建視覺(jué)上的穩(wěn)定變得更加容易，并有助于在設(shè)計(jì)相似比例的圖標(biāo)時(shí)有共同的參考準(zhǔn)則。

在24尺寸下的keyline構(gòu)成如下（24尺寸下的出血區(qū)域?yàn)?）：

當(dāng)把圖標(biāo)畫(huà)在網(wǎng)格上時(shí)可以很好的規(guī)范圖標(biāo)，讓它們從整體的視覺(jué)上看著統(tǒng)一規(guī)范。

4.2 標(biāo)簽欄布局

標(biāo)簽的數(shù)量以及標(biāo)簽的展示形式?jīng)Q定了標(biāo)簽的布局形式，標(biāo)簽的常見(jiàn)布局一共有2種：屏幕等分、圖標(biāo)左右間距相等。

4.2.1 屏幕等分

屏幕等分是最常見(jiàn)的標(biāo)簽布局形式，因?yàn)椴还芩嬖诙嗌賵D標(biāo)，都可以用它進(jìn)行屏幕劃分，計(jì)算方法也十分簡(jiǎn)單，屏幕的寬度除以標(biāo)簽個(gè)數(shù)就是每列寬度。采用此等劃分的案例有：懂車(chē)帝、今日頭條。

4.2.2 圖標(biāo)左右間距相等

圖標(biāo)左右距離相等多用在標(biāo)簽數(shù)量為3個(gè)的情況下，計(jì)算方法是先去除中間圖標(biāo)的尺寸，然后再左右平均劃分等距。相對(duì)于屏幕等分，圖標(biāo)左右間距相等劃分更為緊湊。

4.3 標(biāo)簽欄熱點(diǎn)區(qū)域

根據(jù)菲茲定律，使用指點(diǎn)設(shè)備到達(dá)一個(gè)目標(biāo)的時(shí)間，與當(dāng)前設(shè)備位置和目標(biāo)位置的距離（D）和目標(biāo)大?。⊿）有關(guān)。標(biāo)簽欄作為向用戶(hù)展現(xiàn)產(chǎn)品框架的關(guān)鍵控件，熱點(diǎn)區(qū)域（可點(diǎn)擊區(qū)域范圍）的設(shè)定一定要合理。底部圖標(biāo)尺寸較小，如果將圖標(biāo)作為熱點(diǎn)區(qū)域，那么可點(diǎn)擊區(qū)域就偏小，很可能出現(xiàn)用戶(hù)點(diǎn)擊不到的情況，正確的做法是以標(biāo)簽欄的布局作為基礎(chǔ)設(shè)定，在標(biāo)簽相鄰的部分劃出一定區(qū)域作為不可點(diǎn)擊區(qū)域，以免用戶(hù)誤操作，參考如下，紅色為可熱點(diǎn)區(qū)域，藍(lán)色為不可點(diǎn)擊區(qū)域：

五、標(biāo)簽欄的圖標(biāo)樣式

在產(chǎn)品設(shè)計(jì)中，不同樣式的圖標(biāo)會(huì)給人不同的感受，隨著APP風(fēng)格越來(lái)越簡(jiǎn)潔化，標(biāo)簽欄圖標(biāo)風(fēng)格緊緊地跟著界面的風(fēng)格而改變。經(jīng)過(guò)長(zhǎng)時(shí)間的沉淀，標(biāo)簽欄圖標(biāo)常見(jiàn)的默認(rèn)設(shè)計(jì)樣式一共可分為四類(lèi)：線(xiàn)性圖標(biāo)、面性圖標(biāo)、線(xiàn)性+面性圖標(biāo)、輕質(zhì)感圖標(biāo)。

5.1 線(xiàn)性圖標(biāo)

線(xiàn)性圖標(biāo)通過(guò)線(xiàn)來(lái)塑造輪廓，在圖標(biāo)設(shè)計(jì)中使用的線(xiàn)有粗細(xì)之分，常用的App圖標(biāo)設(shè)計(jì)線(xiàn)的粗細(xì)一般有2PX、3PX、4px，不同的線(xiàn)條粗細(xì)所帶來(lái)的視覺(jué)感受也不同，我在“如何讓你的圖標(biāo)具有說(shuō)服力”文章中提到過(guò)，線(xiàn)條越粗那么圖標(biāo)的性格就越活潑、粗曠，線(xiàn)條越細(xì)圖標(biāo)性格就越精致、商務(wù)，圖標(biāo)使用描邊的粗細(xì)可以根據(jù)產(chǎn)品的氣質(zhì)來(lái)決定。

選中狀態(tài)：當(dāng)選中狀態(tài)為高亮線(xiàn)性圖標(biāo)時(shí)，選中狀態(tài)的圖標(biāo)顏色會(huì)與默認(rèn)狀態(tài)的圖標(biāo)顏色形成較強(qiáng)的反差，但由于線(xiàn)和線(xiàn)的差異性并不強(qiáng)，線(xiàn)性圖標(biāo)沒(méi)有面性圖標(biāo)更具吸引力（引導(dǎo)性），即使加入了高亮色識(shí)別度也不及面性強(qiáng)。airbnb在處理線(xiàn)性圖標(biāo)選中狀態(tài)時(shí)就考慮到了這一點(diǎn)，選中狀態(tài)下不僅對(duì)圖標(biāo)的顏色做了較大變化，還加大了圖標(biāo)及文字的描邊粗細(xì)，從一定程度上加強(qiáng)了圖標(biāo)的引導(dǎo)性。（注：線(xiàn)性狀態(tài)的圖標(biāo)選中狀態(tài)也可以變?yōu)槊嫘詧D標(biāo)或線(xiàn)性+面性圖標(biāo)）

5.2 面性圖標(biāo)

面性圖標(biāo)是通過(guò)面來(lái)塑造形體的圖標(biāo)，采用了剪影的設(shè)計(jì)形式，通過(guò)線(xiàn)或者面去切割基礎(chǔ)輪廓面，通過(guò)分型來(lái)塑造圖標(biāo)的體積感，面性圖標(biāo)的承載信息相對(duì)與線(xiàn)性圖標(biāo)來(lái)說(shuō)更重，更具有引導(dǎo)性。

選中狀態(tài)：面性圖標(biāo)的選中狀態(tài)為高亮面性圖標(biāo)，顏色可以為純色、也可以為漸變、透明。愛(ài)奇藝的選中狀態(tài)就采用了高亮面性圖標(biāo)的展現(xiàn)方式，除了把圖標(biāo)底色及文字的顏色加深以外，還加入了品牌色，甚至為了讓“會(huì)員”標(biāo)簽更加突出，還單獨(dú)對(duì)“會(huì)員”標(biāo)簽的顏色進(jìn)行了修改。

5.3 線(xiàn)性+面性圖標(biāo)

線(xiàn)面結(jié)合圖標(biāo)相較單一的線(xiàn)性圖標(biāo)或單一的面性圖標(biāo)樣式更加豐富、也更富有趣味性。從設(shè)計(jì)的角度上說(shuō)，由于元素的多樣化，設(shè)計(jì)更容易獲得好的效果。相反，如果運(yùn)用不當(dāng)會(huì)顯得圖標(biāo)非常雜亂，如何有效的把控好兩者之間的過(guò)度是關(guān)鍵。

選中狀態(tài)：線(xiàn)性圖標(biāo)的選中狀可以為高亮的線(xiàn)性+面性圖標(biāo)。懂車(chē)帝在處理標(biāo)簽選中狀態(tài)時(shí)就把圖標(biāo)底部加入了高亮黃色圓形塊狀，即保存了線(xiàn)性也添加了面，加深了選中狀態(tài)的視覺(jué)重量，更加明確的讓用戶(hù)感知自己所處的位置。

5.4 輕質(zhì)感圖標(biāo)

輕質(zhì)感圖標(biāo)層次簡(jiǎn)單，用色素雅干凈，采用輕投影、輕漸變的方法設(shè)計(jì)，這類(lèi)圖標(biāo)具有一定的立體感，能給人輕盈、簡(jiǎn)潔、精致的感覺(jué)。輕質(zhì)感圖標(biāo)在標(biāo)簽欄中運(yùn)用的較少，在特殊情況下才會(huì)使用，例如盒馬，就把輕質(zhì)感圖標(biāo)用在了首頁(yè)標(biāo)簽與盒馬小鎮(zhèn)標(biāo)簽，首頁(yè)標(biāo)簽的引入是為了讓用戶(hù)加強(qiáng)對(duì)品牌形象的認(rèn)知，而盒馬小鎮(zhèn)標(biāo)簽的引入則是為了加強(qiáng)圖標(biāo)的引導(dǎo)性。

5.5 圖標(biāo)樣式的常用變化（選中與未選中）

在我調(diào)研上百種應(yīng)用程序中，發(fā)現(xiàn)主流的APP標(biāo)簽欄樣式變化大致分為六種：線(xiàn)性-線(xiàn)性、線(xiàn)性-面性、線(xiàn)性-線(xiàn)+面、面性-面性、面性-線(xiàn)+面、線(xiàn)+面-線(xiàn)+面。雖然標(biāo)簽的樣式變化繁多，但是使用率最多的是“由線(xiàn)性轉(zhuǎn)面性”標(biāo)簽。

六、標(biāo)簽欄的展示形式

標(biāo)簽欄的不同展示形式會(huì)給用戶(hù)帶來(lái)不同的使用習(xí)慣和使用感受，常見(jiàn)的標(biāo)簽展示形式有四種：圖標(biāo)+文字、純圖標(biāo)、純文字、舵式。

6.1 圖標(biāo)+文字

圖標(biāo)+文字是最常見(jiàn)的標(biāo)簽展示形式，為了讓用戶(hù)能夠很好的明白圖標(biāo)的意圖，所以在圖標(biāo)下方會(huì)配有文字提示，這樣就能大大的降低誤讀的可能性。正因?yàn)橛形淖痔崾?，所以沒(méi)有必要過(guò)于擔(dān)心圖標(biāo)的識(shí)別性問(wèn)題，那么圖標(biāo)就可以得到更深的延展，可以做的更有趣，更具有產(chǎn)品氣質(zhì)，甚至可以代入更深層次的動(dòng)效。

例如東家·守藝人APP，專(zhuān)門(mén)售賣(mài)各種手藝人的親手制作的各種藝術(shù)品，面向的對(duì)象是喜歡傳統(tǒng)文化的人群，在這樣的背景下東家結(jié)合宋體的筆畫(huà)（筆畫(huà)拆分）把圖標(biāo)設(shè)計(jì)的更加傳統(tǒng)、古樸，創(chuàng)造出具有東方韻味且極具形式感的圖標(biāo)設(shè)計(jì)。

6.2 純圖標(biāo)

采用純圖標(biāo)展示形式的產(chǎn)品比較少見(jiàn)，純圖標(biāo)樣式的最大缺點(diǎn)就是識(shí)別性低，沒(méi)有文字說(shuō)明會(huì)導(dǎo)致用戶(hù)很難找到自己想要去的位置，也不明確自己所處的狀態(tài)。所以我們?nèi)绻O(shè)計(jì)純圖標(biāo)形式，那么必須要考慮到圖標(biāo)的識(shí)別性問(wèn)題，間接的舍棄掉圖標(biāo)更多的延展性，讓圖標(biāo)變得更規(guī)矩。（識(shí)別性的提升我之前寫(xiě)的圖標(biāo)文章中提到過(guò)，主要可以從大眾認(rèn)知隱喻與真實(shí)世界映射兩個(gè)方向出發(fā)去提升）

使用純圖標(biāo)樣式的產(chǎn)品特征：產(chǎn)品單一、領(lǐng)域垂直、小眾化、用戶(hù)群體接受度高。即使?jié)M足這些條件下產(chǎn)品使用純圖標(biāo)標(biāo)簽，用戶(hù)第一次使用往往也是比較迷茫，需要等用戶(hù)熟悉后才會(huì)得到好轉(zhuǎn)，所以一定要慎用。除此之外不太建議用于電商、視頻、學(xué)習(xí)、社交等領(lǐng)域。

對(duì)于我們?cè)O(shè)計(jì)師來(lái)說(shuō)使用純圖標(biāo)樣式的產(chǎn)品中最為熟悉的就是花瓣了，不過(guò)當(dāng)我第一次使用花瓣時(shí)也是比較懵的，特別是對(duì)于首頁(yè)標(biāo)簽與發(fā)現(xiàn)標(biāo)簽，在首頁(yè)頁(yè)面里可以在搜索后選擇分類(lèi)，而在發(fā)現(xiàn)頁(yè)可以直接選擇分類(lèi)但是不能搜索。最開(kāi)始我不了解發(fā)現(xiàn)圖標(biāo)的定義，自己把它認(rèn)定為了分類(lèi)圖標(biāo)，認(rèn)為用戶(hù)可以在里面進(jìn)行分類(lèi)查找想要的圖片，結(jié)果我錯(cuò)了，它僅僅只是具備一級(jí)分類(lèi)，想要精準(zhǔn)找到自己想要的圖片，就必須去首頁(yè)搜索，這時(shí)我才明白這不是分類(lèi)圖標(biāo)這是發(fā)現(xiàn)圖標(biāo)。為此我還去查看了花瓣以前的版本，在以前的版本中“發(fā)現(xiàn)”這一板塊也是可以進(jìn)行搜索的，只是現(xiàn)版本取消了搜索功能，所以這真的是讓我有點(diǎn)迷糊，個(gè)人認(rèn)為合成一塊也是不錯(cuò)，畢竟首頁(yè)與發(fā)現(xiàn)兩者極為相似。

6.3 純文字（部分含標(biāo)識(shí)）

采用純文字展示形式能夠更直觀的讓用戶(hù)進(jìn)行操作，遵循簡(jiǎn)單易用的原則。適合用戶(hù)群體跨度較大的產(chǎn)品，多用于直播類(lèi)、內(nèi)容類(lèi)、簡(jiǎn)單工具類(lèi)APP中。缺點(diǎn)也顯而易見(jiàn)，圖標(biāo)樣式比較單一，沒(méi)法加入更多趣味化、具有產(chǎn)品特性的元素到標(biāo)簽中。

采用純文字展示形式的產(chǎn)品有很多，最熟悉不過(guò)的就是抖音，抖音的標(biāo)簽?zāi)J(rèn)狀態(tài)下采用了純文字形式，選中狀態(tài)則把文字高亮顯示，并且底部加入了圓角矩形，對(duì)于用戶(hù)群體跨度較大的產(chǎn)品，這樣的展現(xiàn)形式再好不過(guò)了。

6.4 舵式

舵式標(biāo)簽可以看為底部標(biāo)簽式導(dǎo)航的一種變體。它在后者的基礎(chǔ)上，突出強(qiáng)調(diào)了一個(gè)標(biāo)簽并且放在中間的位置，樣子看起來(lái)像攢了一個(gè)舵，所以取名為舵式標(biāo)簽。一般舵式標(biāo)簽的顏色、大小等視覺(jué)表現(xiàn)會(huì)被設(shè)計(jì)得和其他普通標(biāo)簽有所差異，通過(guò)視覺(jué)對(duì)比的方式吸引用戶(hù)關(guān)注。舵式標(biāo)簽通常和產(chǎn)品框架體現(xiàn)無(wú)關(guān)，大多數(shù)應(yīng)用程序使用舵式標(biāo)簽是用來(lái)承載系統(tǒng)功能。起初是因?yàn)樯鐓^(qū)類(lèi)APP為了激勵(lì)和方便用戶(hù)隨時(shí)隨地地輸出UGC內(nèi)容，所以把觸發(fā)用戶(hù)創(chuàng)作/發(fā)布的功能按鈕放置在標(biāo)簽欄中。

因?yàn)槎媸綐?biāo)簽可以很好地承載產(chǎn)品的重要功能，而被許多的應(yīng)用程序設(shè)計(jì)所采用，經(jīng)過(guò)越來(lái)越多的應(yīng)用采用舵式標(biāo)簽，使用的形式也越來(lái)越多樣，它現(xiàn)在并不再單一地用于承載產(chǎn)品功能，而是配合營(yíng)銷(xiāo)場(chǎng)景、付費(fèi)場(chǎng)景，給產(chǎn)品的變現(xiàn)、拉新賦能。拼多多就把它拉新的主要入口作用到了舵式圖標(biāo)上，并且為了讓圖標(biāo)更加顯目，甚至把圖標(biāo)做成了輕質(zhì)感的形式體現(xiàn)，同時(shí)也通過(guò)2像素的線(xiàn)性圖標(biāo)減弱其他4個(gè)標(biāo)簽的引導(dǎo)性。

七、賦予標(biāo)簽更多內(nèi)容

標(biāo)簽欄不僅是向用戶(hù)展現(xiàn)產(chǎn)品框架的關(guān)鍵控件，還可以貫穿整個(gè)產(chǎn)品的商業(yè)價(jià)值的體現(xiàn)，它是連接著整個(gè)產(chǎn)品最重要的頂層信息。如果想要讓標(biāo)簽變得更加豐富，想要標(biāo)簽內(nèi)容中含有更多的情感需求、 商業(yè)需求、運(yùn)營(yíng)需求，那么我們可以重點(diǎn)從這兩個(gè)層面考慮：視覺(jué)層面、交互層面。

7.1 視覺(jué)層面

在視覺(jué)層面上我們可以迎合用戶(hù)的偏好與期望，通過(guò)豐富視覺(jué)體驗(yàn)的方法來(lái)增加內(nèi)容的觀賞性，這樣不僅能夠很好的向用戶(hù)傳遞著產(chǎn)品調(diào)性還能吸引用戶(hù)關(guān)注以及引導(dǎo)用戶(hù)進(jìn)行操作。

7.1.1 設(shè)計(jì)裝飾性圖標(biāo)

裝飾性圖標(biāo)僅僅是用來(lái)提升整個(gè)界面的視覺(jué)體驗(yàn)，通過(guò)豐富視覺(jué)體驗(yàn)的方法來(lái)增加內(nèi)容的觀賞性，這樣不僅可以吸引并留住用戶(hù)，還可以讓整個(gè)用戶(hù)體驗(yàn)更加積極。

7.1.1.1 整體裝飾圖標(biāo)

整體裝飾性圖標(biāo)的出現(xiàn)往往是為了滿(mǎn)足情感需求與商業(yè)需求，整體裝飾圖標(biāo)并不是一直存在的，它的特點(diǎn)是季節(jié)性與周期性，并且它并不具備任何功能性。

從情感需求出發(fā)設(shè)計(jì)裝飾圖標(biāo)：例如世界杯火熱進(jìn)行時(shí)，優(yōu)酷為了滿(mǎn)足用戶(hù)的情感需求，就把標(biāo)簽欄的圖標(biāo)全部替換為帶有世界杯元素的圖案，讓用戶(hù)與其產(chǎn)生情感的共鳴。

從商業(yè)需求出發(fā)設(shè)計(jì)裝飾圖標(biāo)：現(xiàn)在的年貨節(jié)，之前的雙十二、雙十一、618等，每到節(jié)日促銷(xiāo)活動(dòng)的時(shí)候，很多電商應(yīng)用都會(huì)換上裝飾性圖標(biāo)，例如一號(hào)店，在過(guò)年前就把標(biāo)簽欄圖標(biāo)全部改為含帶過(guò)年氣息的元素，提前來(lái)預(yù)熱活動(dòng)，引導(dǎo)用戶(hù)消費(fèi)。

7.1.1.2 單個(gè)裝飾性圖標(biāo)

單個(gè)裝飾性圖標(biāo)的出現(xiàn)大部分都是為了滿(mǎn)足運(yùn)營(yíng)需求，運(yùn)營(yíng)為了推出某個(gè)活動(dòng)或功能，往往會(huì)單獨(dú)裝飾某個(gè)圖標(biāo)的設(shè)計(jì)視覺(jué)，以便于提高圖標(biāo)的引導(dǎo)性，最直接的例子就是我剛才提到過(guò)的拼多多。

7.1.2 加入品牌基因

我們可以在標(biāo)簽中加入更多的品牌基因，讓其與品牌產(chǎn)生聯(lián)動(dòng)性，這一形式是大部分應(yīng)用程序都在做的，我們可以從這6個(gè)層面加入品牌基因：品牌顏色、品牌LOGO、品牌元素、品牌名稱(chēng)、品牌性格、品牌吉祥物。

7.1.2.1 品牌顏色

色彩是圖標(biāo)設(shè)計(jì)中重要的構(gòu)成元素之一，我們可以直接提取品牌色作為圖標(biāo)設(shè)計(jì)視覺(jué)元素。例如站酷，站酷的品牌色是黃色，標(biāo)簽欄的圖標(biāo)（選中狀態(tài)）就提取了品牌的黃色，讓其與品牌調(diào)性高度一致。

當(dāng)然品牌顏色除了可以直接用外，還可以在提取時(shí)適當(dāng)調(diào)整色彩的飽和度、明度，做更多的形式變化。例如懂車(chē)帝，就在原有的黃色基礎(chǔ)上做了些許調(diào)整，圖標(biāo)采用黃色透明漸變的處理方式，在與品牌顏色呼應(yīng)的同時(shí)，使得整個(gè)圖標(biāo)更加精致、有活力。

7.1.2.2 品牌LOGO

提取品牌LOGO是最常用的使用方式，我們從品牌中提取出來(lái)的圖標(biāo)一般運(yùn)用在APP首頁(yè)標(biāo)簽。因?yàn)槭醉?yè)是APP中最重要的頁(yè)面，也是進(jìn)入APP默認(rèn)的頁(yè)面，把首頁(yè)圖標(biāo)替換成品牌LOGO，能反復(fù)加強(qiáng)了用戶(hù)對(duì)App的LOGO印象，這樣不但使App內(nèi)外形成了視覺(jué)聯(lián)系，同時(shí)也二次傳遞了品牌形象。例如大眾點(diǎn)評(píng)，它的首頁(yè)標(biāo)簽就用了品牌LOGO，同時(shí)也使用了品牌顏色。

7.1.2.3 品牌元素

我們可以在品牌中提取它識(shí)別性較強(qiáng)的局部元素作為圖標(biāo)。例如虎牙直播，它就提取了品牌卡通形象的外輪廓作為首頁(yè)圖標(biāo)。

品牌提取的元素并不只是所見(jiàn)到的品牌視覺(jué)形象，還可以提取與品牌內(nèi)容強(qiáng)相關(guān)的元素。例如QQ音樂(lè)，它并沒(méi)有把它的品牌LOGO直接放于其中，而是通過(guò)大眾所熟知的音符作為首頁(yè)圖標(biāo)。

7.1.2.4 品牌名稱(chēng)

如果你的品牌還不為大眾所熟知，那么為了強(qiáng)化用戶(hù)對(duì)品牌名稱(chēng)的認(rèn)知，可以把品牌名稱(chēng)直接放入標(biāo)簽欄中。例如MONO，就把它的名稱(chēng)分為四個(gè)字母分別放在了4個(gè)標(biāo)簽內(nèi)，需要注意的是這類(lèi)圖標(biāo)不能單獨(dú)出現(xiàn)，因?yàn)樗旧聿痪邆渥R(shí)別性與引導(dǎo)性，必須配合文字一起出現(xiàn)，這樣才能讓用戶(hù)理解標(biāo)簽的真正功能，我們不能為了設(shè)計(jì)而設(shè)計(jì)。

7.1.2.5 品牌性格

圖標(biāo)風(fēng)格可以與品牌性格保持一致，一套帶有濃厚品牌感的圖標(biāo)，會(huì)讓人記憶猶新。例如：每日故宮，它的圖標(biāo)就非常具有特色，結(jié)合了品牌的性格以及定位，加入了眾多的古代中國(guó)元素，整體看起來(lái)有股濃濃的古韻之風(fēng)。

7.1.2.6 品牌吉祥物

現(xiàn)在大部分品牌都會(huì)含帶吉祥物，我們可以在設(shè)計(jì)圖標(biāo)時(shí)提取吉祥物的外形，把它用于產(chǎn)品的標(biāo)簽中。例如盒馬，它就把吉祥物做為了底部標(biāo)簽，不過(guò)需要我們注意的是如果吉祥物的風(fēng)格與我們的圖標(biāo)風(fēng)格差別較大，我們就需要對(duì)它做風(fēng)格化的處理，不然看起來(lái)就十分突兀。（盒馬對(duì)吉祥物做了輕質(zhì)感的風(fēng)格化處理）

7.1.3 讓用戶(hù)自定義

讓用戶(hù)自定義的標(biāo)簽現(xiàn)在越來(lái)越常見(jiàn)，而每個(gè)產(chǎn)品對(duì)其思考的層面也都有所不同。自定義標(biāo)簽往往出現(xiàn)在個(gè)人中心，它會(huì)根據(jù)用戶(hù)上傳的頭像或用戶(hù)的捏臉生成圖標(biāo)。

7.1.3.1 用戶(hù)頭像

目前市面上很多APP都把用戶(hù)上傳的頭像作為了個(gè)人中心標(biāo)簽展示，例如我們常用的百度網(wǎng)盤(pán)就采用了此方案，當(dāng)用戶(hù)注冊(cè)未上傳用戶(hù)頭像時(shí)，會(huì)默認(rèn)顯示系統(tǒng)標(biāo)簽，當(dāng)用戶(hù)上傳完后就會(huì)顯示用戶(hù)頭像，并且如果你是會(huì)員，還會(huì)把會(huì)員標(biāo)示顯示在標(biāo)簽的右上方，彰顯會(huì)員用戶(hù)的尊貴性。

我們可以很明顯的發(fā)現(xiàn)百度網(wǎng)盤(pán)的底部標(biāo)簽?zāi)J(rèn)狀態(tài)為線(xiàn)性圖標(biāo)，而個(gè)人中心不管默認(rèn)狀態(tài)還是選擇狀態(tài)都為面性圖標(biāo)，所以如果你想要加強(qiáng)個(gè)人中心的引導(dǎo)性，那么可以采取此方案。

7.1.3.2 捏臉

捏臉功能作為SOUL的一大特色，捏臉的虛擬形象賦予了真實(shí)人格屬性，加強(qiáng)了社交的傳播性，為此用戶(hù)對(duì)它的滿(mǎn)意度也是非常高。所以SOUL做了一次大膽的改變，決定把用戶(hù)自定義的捏臉?lè)庞趥€(gè)人中心標(biāo)簽中。

SOUl在默認(rèn)狀態(tài)的個(gè)人標(biāo)簽引導(dǎo)性同樣大于其他三個(gè)標(biāo)簽，更能引起用戶(hù)的關(guān)注。不僅如此，用戶(hù)的捏臉?lè)庞趥€(gè)人標(biāo)簽中，還可以進(jìn)一步引導(dǎo)用戶(hù)進(jìn)行捏臉行為，間接的提升產(chǎn)品的用戶(hù)活躍度。（捏臉需要金幣，金幣可以每天登陸領(lǐng)取，也可以進(jìn)行充值，對(duì)于白嫖黨來(lái)說(shuō)當(dāng)然是每天領(lǐng)取了，而用戶(hù)每天的領(lǐng)取行為給產(chǎn)品帶來(lái)的收益就是用戶(hù)活躍度）

7.2 交互層面

除了對(duì)標(biāo)簽做視覺(jué)的提升外，我們還可以對(duì)其加入合理的交互效果，一方面可以提升用戶(hù)在使用產(chǎn)品過(guò)程中的樂(lè)趣，另一方面還可以為用戶(hù)提供更多便利，從而增強(qiáng)用戶(hù)體驗(yàn)。

7.2.1 標(biāo)簽功能切換

在不同的狀態(tài)下點(diǎn)擊標(biāo)簽的功能也不一樣，一個(gè)標(biāo)簽可承載2到3個(gè)功能，可以滿(mǎn)足不同狀態(tài)下的用戶(hù)需求。

7.2.1.1 承載2個(gè)功能案例

SOUL的廣場(chǎng)標(biāo)簽（進(jìn)入選取頁(yè)+刷新）

SOUL的廣告標(biāo)簽承載了2個(gè)功能，當(dāng)你處于其他標(biāo)簽時(shí)，點(diǎn)擊廣場(chǎng)標(biāo)簽則直接進(jìn)入到廣場(chǎng)頁(yè)面；當(dāng)你處于廣場(chǎng)頁(yè)面中時(shí)，再次點(diǎn)擊標(biāo)簽則會(huì)刷新整個(gè)頁(yè)面。

有貨的發(fā)現(xiàn)標(biāo)簽（進(jìn)入選取頁(yè)+上傳圖片）

有貨的發(fā)現(xiàn)標(biāo)簽也承載了2個(gè)功能，在設(shè)計(jì)上運(yùn)用的非常巧妙，當(dāng)你處于其他標(biāo)簽時(shí)，點(diǎn)擊發(fā)現(xiàn)標(biāo)簽則進(jìn)入到發(fā)現(xiàn)頁(yè)面；當(dāng)你在發(fā)現(xiàn)頁(yè)面時(shí)你的發(fā)現(xiàn)標(biāo)簽則變?yōu)榱松蟼鲌D片標(biāo)簽，可以點(diǎn)擊上傳圖片。

7.2.1.2? 承載3個(gè)功能案例

淘寶首頁(yè)標(biāo)簽（進(jìn)入選取頁(yè)+刷新+置頂）

淘寶的首頁(yè)標(biāo)簽同時(shí)承載了3個(gè)功能，當(dāng)你處于其他標(biāo)簽中，點(diǎn)擊首頁(yè)標(biāo)簽則直接進(jìn)入到首頁(yè)頁(yè)面；當(dāng)你在首頁(yè)頁(yè)面第一屏?xí)r，你點(diǎn)擊首頁(yè)標(biāo)簽則會(huì)刷新整個(gè)頁(yè)面；當(dāng)你滑過(guò)3分之1屏?xí)r，首頁(yè)標(biāo)簽的功能則變?yōu)橹庙?。所以在不同狀態(tài)下首頁(yè)標(biāo)簽也會(huì)具備不同的功能，并且每種狀態(tài)下的標(biāo)簽樣式也是不同。

愛(ài)奇藝首頁(yè)標(biāo)簽（進(jìn)入選取頁(yè)+到達(dá)指定位置+置頂）

愛(ài)奇藝的首頁(yè)標(biāo)簽也是同時(shí)承載了3個(gè)功能，不過(guò)它與淘寶有些許不同，愛(ài)奇藝并不能刷新頁(yè)面，而作為替換的功能是直接到達(dá)指定位置“猜你喜歡”。

7.2.2 觸覺(jué)與聽(tīng)覺(jué)

我們做的設(shè)計(jì)不要僅限于視覺(jué)所看到的，還要考慮到所觸摸的、所聽(tīng)到的，我們可以利用觸覺(jué)與聽(tīng)覺(jué)去輔助用戶(hù)確認(rèn)自己的選擇，當(dāng)然我們一定要合理利用，反之則會(huì)讓用戶(hù)感到十分反感。

7.2.2.1 觸覺(jué)

西瓜視頻與今日頭條在點(diǎn)擊標(biāo)簽欄圖標(biāo)時(shí)手機(jī)就會(huì)發(fā)出輕微的震動(dòng)，給予了用戶(hù)很好的點(diǎn)擊反饋，不過(guò)現(xiàn)在市面上大部分APP并沒(méi)有采取此方案，所以我對(duì)齊進(jìn)行了一些思考，原因有兩點(diǎn)，第一它們的圖標(biāo)默認(rèn)狀態(tài)為線(xiàn)性圖標(biāo)，選擇狀態(tài)為面性圖標(biāo)，沒(méi)有做太多的修飾，所以用簡(jiǎn)單視覺(jué)體現(xiàn)+震動(dòng)觸覺(jué)的方式提示用戶(hù)已經(jīng)來(lái)到新的目的地。第二是因?yàn)檫@兩個(gè)APP標(biāo)簽欄的功能跨度較大、內(nèi)容相對(duì)獨(dú)立，想用微弱震動(dòng)作加強(qiáng)提示，所以才采取了此方案。

7.2.2.2 聽(tīng)覺(jué)

SOUL點(diǎn)擊星球標(biāo)簽時(shí)手機(jī)就會(huì)發(fā)出戀愛(ài)鈴聲，這樣的交互方式的確比較罕見(jiàn)，對(duì)此我去查看了SOUL的產(chǎn)品報(bào)告，SOUL主要面對(duì)女性用戶(hù)，女性用戶(hù)約為男性用戶(hù)的2.4倍（女人更偏感性），并且它的主要需求是滿(mǎn)足測(cè)試、匹配、交友，所以戀愛(ài)鈴聲能夠很好的引起用戶(hù)的情感共鳴。不過(guò)鈴聲有利有弊，當(dāng)你在特定場(chǎng)景下使用SOUL時(shí)，點(diǎn)擊到星球標(biāo)簽周?chē)艘捕寄苈?tīng)到戀愛(ài)鈴聲，實(shí)屬尷尬，所以我在特定場(chǎng)景下使用SOUL時(shí)都會(huì)默默的關(guān)掉聲音。SOUL為了規(guī)避這樣的尷尬，應(yīng)用剛打開(kāi)時(shí)來(lái)到的是廣場(chǎng)頁(yè)面，而不是星球頁(yè)面。

7.2.3 標(biāo)簽動(dòng)畫(huà)

精彩的圖標(biāo)動(dòng)畫(huà)，對(duì)整體的設(shè)計(jì)具有畫(huà)龍點(diǎn)睛的作用，降低標(biāo)簽切換時(shí)的枯燥感，提升操作的愉悅度和期待感。甚至可以通過(guò) tab 的動(dòng)畫(huà)設(shè)計(jì)給用戶(hù)傳達(dá)出整個(gè) APP 設(shè)計(jì)的品牌及理念。標(biāo)簽動(dòng)畫(huà)往往都比較簡(jiǎn)單，主要有：縮放、旋轉(zhuǎn)、顏色過(guò)渡、位移、抖動(dòng)、填充、線(xiàn)性軌跡、結(jié)合容器、元素介質(zhì)等。接下來(lái)我們來(lái)看看SOUl、虎牙、汽車(chē)之家是怎么做的。

7.2.3.1 SOUL（彈性縮放+結(jié)合容器+線(xiàn)性軌跡）

SOUL的底部標(biāo)簽欄運(yùn)用到了彈性動(dòng)畫(huà)、結(jié)合容器以及線(xiàn)性軌跡。帶有彈性縮放的標(biāo)簽反饋，讓整體的設(shè)計(jì)更加具有趣味性，相比線(xiàn)性縮放也更有視覺(jué)沖擊力。圖標(biāo)的運(yùn)動(dòng)規(guī)則：先從 0 放大到最大（數(shù)值根據(jù)實(shí)際情況設(shè)定），然后再回彈至正常大小。除了彈性動(dòng)畫(huà)外，它還結(jié)合了容器的元素對(duì)內(nèi)部進(jìn)行了顏色的替換以及單線(xiàn)條的軌跡動(dòng)畫(huà)。這樣的處理不僅趣味性十足，還強(qiáng)化了選中當(dāng)前狀態(tài)，整體標(biāo)簽切換的一致性也較高。

7.2.3.2 虎牙（抖動(dòng)+趣味表達(dá)）

虎牙一直是我比較喜歡的直播平臺(tái)，它的底部標(biāo)簽動(dòng)畫(huà)也是非常值得借鑒，運(yùn)用到的動(dòng)畫(huà)形式是抖動(dòng)與趣味表達(dá)。抖動(dòng)是通過(guò)圖標(biāo)的左右、上下快速位移或旋轉(zhuǎn)形成，整體的動(dòng)畫(huà)效果節(jié)奏較快，具有一定的速度感，使整個(gè)標(biāo)簽切換的情緒表達(dá)較為俏皮、可愛(ài)。除了抖動(dòng)外還在切換過(guò)程中代入了更多小元素的趣味表達(dá)，賦予了圖標(biāo)更多的性格，對(duì)我們的設(shè)計(jì)進(jìn)行再升華，從而提高整體設(shè)計(jì)的質(zhì)感和趣味。

7.2.3.3 汽車(chē)之家（結(jié)合容器+細(xì)節(jié)晃動(dòng)）

因?yàn)橛脩?hù)群體的不同，汽車(chē)之家在標(biāo)簽動(dòng)畫(huà)的設(shè)計(jì)上也相對(duì)簡(jiǎn)單、嚴(yán)謹(jǐn)，它的動(dòng)畫(huà)形式主要是結(jié)合容器與細(xì)節(jié)晃動(dòng)。選中效果由線(xiàn)切換為面，并加入了品牌底色，這樣能夠清晰的給用戶(hù)傳達(dá)當(dāng)前頁(yè)面。并且為了不使整體的切換效果變得生硬，在切換過(guò)程中采用了透明度與彈性縮放，讓其過(guò)渡的相對(duì)柔和。在細(xì)節(jié)的處理上也是非常用心，每個(gè)圖標(biāo)都帶有笑臉的形狀，間接的給用戶(hù)傳達(dá)“笑臉”信息，在選取標(biāo)簽時(shí)內(nèi)部形狀會(huì)輕微晃動(dòng)。整體來(lái)看汽車(chē)之家的標(biāo)簽動(dòng)效雖然偏向嚴(yán)謹(jǐn)，但是在細(xì)節(jié)上也給予用戶(hù)傳達(dá)了更多的情感。

八、總結(jié)

以上就是我對(duì)底部標(biāo)簽欄的設(shè)計(jì)與思考，喜歡可以點(diǎn)個(gè)小贊，拜了個(gè)拜～

本文由 @黑獅力 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自?Unsplash，基于 CC0 協(xié)議