什么是品牌的基因

打開(kāi)一些App，我們會(huì)發(fā)現(xiàn)App的圖標(biāo)設(shè)計(jì)的非常普通，沒(méi)有任何特色，在素材網(wǎng)站上都可以下載到這樣的圖標(biāo)貼合上去。例如微信的底部導(dǎo)航欄圖標(biāo)（圖1-1），對(duì)于超級(jí)App的圖標(biāo)，因?yàn)楸旧硪呀?jīng)具有足夠的用戶(hù)量，已經(jīng)不需要通過(guò)特別的視覺(jué)設(shè)計(jì)手段去提升用戶(hù)的認(rèn)知度。另外微信需要面對(duì)的人群更加廣泛，此時(shí)圖標(biāo)設(shè)計(jì)功能識(shí)別性是更加重要，所以采取保守了設(shè)計(jì)策略，圖標(biāo)設(shè)計(jì)看起來(lái)普適性，缺乏個(gè)性的設(shè)計(jì)。但一般的App的圖標(biāo)設(shè)計(jì)如果也采用這種普適性設(shè)計(jì)策略，那么界面設(shè)計(jì)將缺乏特色，看起來(lái)非常的普通。那么如何設(shè)計(jì)非常有特色的圖標(biāo)設(shè)計(jì)了？這時(shí)候我們需要引入品牌設(shè)計(jì)的理念。

（圖1-1）微信主界面

通常意義的品牌包括了理念、視覺(jué)、行為三個(gè)部分，而我這里所講的品牌只是視覺(jué)表現(xiàn)層面的。品牌基因是一個(gè)圖形符號(hào)，在界面設(shè)計(jì)中，我們需要將這些基因、靈感可視化，提取出一個(gè)或者多個(gè)視覺(jué)符號(hào)傳達(dá)給用戶(hù)。

圖標(biāo)的屬性構(gòu)成

圖標(biāo)設(shè)計(jì)視覺(jué)形式多樣，新人經(jīng)常陷入臨摹各種海量圖標(biāo)中。事實(shí)上這是沒(méi)有必要的，我們只需要總結(jié)好圖標(biāo)的屬性規(guī)則，通過(guò)組合每個(gè)屬性的變化，就可以構(gòu)成無(wú)數(shù)種風(fēng)格組合，也就可以得到無(wú)數(shù)種圖標(biāo)視覺(jué)風(fēng)格。下面是我歸納構(gòu)成圖標(biāo)的一些屬性。每個(gè)屬性可以有多種變化方法。

元素的設(shè)計(jì)

元素（單元素）

圖標(biāo)設(shè)計(jì)用一種事物暗喻另一種事物。例如用“相機(jī)”表達(dá)照相功能，構(gòu)成圖標(biāo)的寓意一般使用單一元素去表達(dá)一個(gè)功能，這也是主流的圖標(biāo)設(shè)計(jì)形式。例如ENJOY（圖1-2）的個(gè)人中心功能圖標(biāo)，全部使用了單一元素去表達(dá)相應(yīng)的功能。

（圖1-2）單元素圖標(biāo)

元素（雙元素）

有時(shí)候?yàn)榱送M圖形有所區(qū)分，會(huì)增加一個(gè)元素，用雙元素構(gòu)成新一個(gè)圖標(biāo)圖形。雙元素會(huì)顯得圖標(biāo)表達(dá)拖沓，屬于一組圖標(biāo)，圖形之間單一元素?zé)o法區(qū)分，才會(huì)使用的設(shè)計(jì)策略。例如最美有物的（圖1-3）個(gè)人中心的表單功能圖標(biāo)，“我的畫(huà)報(bào)”和“心愿清單”使用矩形框只能表達(dá)一個(gè)紙質(zhì)讀物的含義，必須附加另外的圖形，才能讓這兩個(gè)圖標(biāo)有所區(qū)分。

（圖1-3）雙元素圖標(biāo)

面的設(shè)計(jì)

面（剪影）

在A(yíng)pp中使用的圖標(biāo)常見(jiàn)的兩種風(fēng)格就是剪影和線(xiàn)性風(fēng)格，剪影圖標(biāo)通過(guò)面來(lái)塑造形體的圖標(biāo)，例如良倉(cāng)（圖1-4）的底部標(biāo)簽欄圖標(biāo)采用了剪影的設(shè)計(jì)形式，通過(guò)線(xiàn)或者面去切割基礎(chǔ)輪廓面，通過(guò)分型來(lái)塑造圖標(biāo)的體積感。不同的切割手法造成了剪影圖標(biāo)設(shè)計(jì)感的差別。

（圖1-4）剪影圖標(biāo)

面（線(xiàn)性）

線(xiàn)性圖標(biāo)與剪影圖標(biāo)不同的是，線(xiàn)性圖標(biāo)通過(guò)線(xiàn)來(lái)塑造形體的輪廓。線(xiàn)也是一種面，只不過(guò)線(xiàn)是比較細(xì)的面。例如落網(wǎng)（圖1-5）底部標(biāo)簽欄圖標(biāo)采用了線(xiàn)性設(shè)計(jì)。App的圖標(biāo)尺寸并不大，所以如果線(xiàn)過(guò)于復(fù)雜，在小面積中過(guò)多的線(xiàn)會(huì)對(duì)識(shí)別性產(chǎn)生較大的困擾。另外最新的蘋(píng)果iOS11系統(tǒng)傾向于使用剪影圖標(biāo)，所以線(xiàn)性圖標(biāo)風(fēng)格可能會(huì)使用越來(lái)越少。

（圖1-5）線(xiàn)性圖標(biāo)

面（混合）

在A(yíng)pp中如個(gè)人中心的表單欄，可能使用的風(fēng)格不限于剪影或者線(xiàn)性，而是兩種風(fēng)格混合在一起使用。例如良倉(cāng)（圖1-6）首頁(yè)的功能圖標(biāo)采用剪影線(xiàn)性混合設(shè)計(jì)形式，面一般選擇整個(gè)圖形的陰影面填充。

（圖1-6）填充陰影面剪影線(xiàn)性混合圖標(biāo)

除了填充陰影面外，還可以線(xiàn)框內(nèi)再尋找一個(gè)面填充，如男衣邦首頁(yè)的功能圖標(biāo)（圖1-7）。因?yàn)橥饷柽吘€(xiàn)+圖標(biāo)中間填色的做法很像卡通漫畫(huà)，所以此類(lèi)風(fēng)格如果搭配大圓角，會(huì)顯得圖標(biāo)非常的卡通化。

（圖1-7）剪影線(xiàn)性混合圖標(biāo)

線(xiàn)的設(shè)計(jì)

線(xiàn)（粗、細(xì)）

圖標(biāo)設(shè)計(jì)中使用的線(xiàn)有粗細(xì)之分，常用的App圖標(biāo)設(shè)計(jì)線(xiàn)的粗細(xì)一般有2PX或者3PX兩種。線(xiàn)條的粗細(xì)可以帶來(lái)不一樣的視覺(jué)效果。例如淘寶（圖1-8）采用了2PX的細(xì)線(xiàn)設(shè)計(jì)，而京東（圖1-9）采用了3PX的粗線(xiàn)設(shè)計(jì)。

（圖1-8）2PX細(xì)線(xiàn)圖標(biāo)

 （圖1-9）3PX粗線(xiàn)圖標(biāo)

細(xì)線(xiàn)顯得精致，粗線(xiàn)視覺(jué)面積大，顯得厚重敦實(shí)。最美有物（圖1-10）的底部標(biāo)簽欄圖標(biāo)采用粗線(xiàn)條設(shè)計(jì)，線(xiàn)條使用了夸張的5PX，這個(gè)必須圖形極簡(jiǎn)才適合使用。

（圖1-10）最美有物粗線(xiàn)圖標(biāo)

有一種特殊做法（圖1-11）為了增加圖標(biāo)的設(shè)計(jì)豐富度，可以采用外粗內(nèi)細(xì)的手法取得不一樣的視覺(jué)效果。由于這種特殊的紋理感，適合風(fēng)格特立獨(dú)行的應(yīng)用。需要注意的是由于采用雙線(xiàn)設(shè)計(jì)，如果圖標(biāo)的圖形本身線(xiàn)條比較多，那么會(huì)顯得圖標(biāo)設(shè)計(jì)非常的復(fù)雜拖沓。

（圖1-11）粗細(xì)線(xiàn)圖標(biāo)

線(xiàn)（連續(xù)、斷開(kāi)）

常見(jiàn)的圖標(biāo)使用線(xiàn)的設(shè)計(jì)形式，線(xiàn)是連續(xù)的。為了追求設(shè)計(jì)形式感的不一樣，圖標(biāo)設(shè)計(jì)中使用的線(xiàn)可以是斷開(kāi)的。例如ONE（圖1-12）的底部標(biāo)簽欄圖標(biāo)，采用了斷線(xiàn)風(fēng)格。斷開(kāi)線(xiàn)后的圖標(biāo)設(shè)計(jì)很像我們小時(shí)候畫(huà)的一筆簡(jiǎn)筆畫(huà)。

（圖1-12）斷線(xiàn)圖標(biāo)

當(dāng)你決定界面的圖標(biāo)使用斷線(xiàn)風(fēng)格的時(shí)候，那么這個(gè)斷線(xiàn)就是你界面的獨(dú)特設(shè)計(jì)語(yǔ)言，那么就需要把這個(gè)設(shè)計(jì)語(yǔ)言貫穿在整個(gè)界面中。界面內(nèi)所有的圖標(biāo)都需要繼續(xù)使用斷線(xiàn)風(fēng)格。例如ONE的標(biāo)簽欄使用了斷線(xiàn)風(fēng)格，個(gè)人中心的功能圖標(biāo)（圖1-13）也繼續(xù)使用了斷線(xiàn)的設(shè)計(jì)風(fēng)格。

（圖1-13）ONE個(gè)人中心斷線(xiàn)圖標(biāo)

圓角和直角設(shè)計(jì)

圓角：（直角或者圓角）

圖標(biāo)的線(xiàn)或者面轉(zhuǎn)折的地方采用直接或者圓角直接影響圖標(biāo)的風(fēng)格，直角的風(fēng)格更加硬朗，充滿(mǎn)了力量感，例如男衣邦（圖1-14）的底部標(biāo)簽欄圖標(biāo)采用的全直角設(shè)計(jì)，彰顯男士硬朗的風(fēng)格。

（圖1-14）直角圖標(biāo)

圓角的圖標(biāo)顯得風(fēng)格溫潤(rùn)爾雅，例如好物（圖1-15）的而圓角底部標(biāo)簽欄圖標(biāo)采用的小圓角設(shè)計(jì)，顯得整體風(fēng)格柔和，這與應(yīng)用的定位非常符合。如果圓角非常大，會(huì)顯得圖標(biāo)偏卡通感覺(jué)。需要注意的是使用圓角，那么每個(gè)圓角的弧度盡可能保持一致。

（圖1-15）圓角圖標(biāo)

填色設(shè)計(jì)

填色：（單色、雙色、多色）

圖標(biāo)面的填充方式最常見(jiàn)的是單色，顏色選擇灰色或者品牌色。而雙色和多色略少。雙色圖標(biāo)可能是兩種顏色，例如陌陌（圖1-16）的個(gè)人中心頁(yè)的功能圖標(biāo)采用了雙色填充設(shè)計(jì)形式，顏色使用了鄰近色搭配，這樣顏色搭配柔和不突兀。

（圖1-16）雙色圖標(biāo)

多色的圖標(biāo)使用比較少，ENJOY（圖1-17）的首頁(yè)功能圖標(biāo)使用了三色搭配的設(shè)計(jì)形式。這三種顏色互為臨近色。

（圖1-17）多色圖標(biāo)

漸變?cè)O(shè)計(jì)

漸變（線(xiàn)性漸變、角度漸變）

圖標(biāo)面的填充方式如果選擇漸變，可以有線(xiàn)性漸變和角度漸變兩種方式。線(xiàn)性的漸變使用的比較多。例如優(yōu)酷（圖1-18）的個(gè)人中心頁(yè)的功能圖標(biāo)，采用了線(xiàn)性漸變填充的方式。在使用線(xiàn)性漸變，我比較推崇微漸變方式，這樣的設(shè)計(jì)風(fēng)格柔和，也是當(dāng)前非常流行的設(shè)計(jì)風(fēng)格。

（圖1-18）線(xiàn)性漸變圖標(biāo)

角度漸變填充，有一種強(qiáng)烈的棱角感，強(qiáng)調(diào)的是一種力量的感覺(jué)。適合游戲類(lèi)類(lèi)應(yīng)用（圖1-19），或者戶(hù)外運(yùn)用之類(lèi)的應(yīng)用。

圖標(biāo)的氣質(zhì)

每個(gè)App應(yīng)該有自己獨(dú)特的產(chǎn)品氣質(zhì)，比如金融商務(wù)工具類(lèi)的應(yīng)用肯定是應(yīng)該嚴(yán)謹(jǐn)?shù)?，讓人覺(jué)得這是一個(gè)值得信賴(lài)的工具。而社交類(lèi)、圖形類(lèi)的應(yīng)用應(yīng)該給人輕松愉悅的感覺(jué)。而不是一個(gè)刻板保守的形象。這種氣質(zhì)是產(chǎn)品與身俱來(lái)的。這種氣質(zhì)應(yīng)該融入界面和圖標(biāo)設(shè)計(jì)中。

氣質(zhì)1：活潑的氣質(zhì)

大多數(shù)應(yīng)用都屬于這個(gè)類(lèi)型，比如常見(jiàn)的社交、娛樂(lè)、直播、美食，塑造都是積極向上的活潑感覺(jué)，所以圖標(biāo)都會(huì)采用圓角設(shè)計(jì)。

Same應(yīng)用的品牌圖形中的文字，是非常圓潤(rùn)的小寫(xiě)西文字母設(shè)計(jì)。字母的圓角非常大（圖1-20），給人一種活潑動(dòng)感的感覺(jué)。所以Same內(nèi)的圖標(biāo)，也應(yīng)該是符合這個(gè)品牌的氣質(zhì)的。那么應(yīng)用的圖標(biāo)設(shè)計(jì)一定會(huì)選擇圓角設(shè)計(jì)（圖1-21）。

（圖1-20）Same應(yīng)用品牌的西文字母

（圖1-21）Same應(yīng)用的底部標(biāo)題欄圖標(biāo)

氣質(zhì)2硬朗氣質(zhì)

一些格調(diào)應(yīng)用或者偏男性的應(yīng)用會(huì)刻意塑造一種不一樣的棱角感。所以會(huì)采用直角設(shè)計(jì)。另外一些偏B類(lèi)的商務(wù)工具應(yīng)用也會(huì)采用直角設(shè)計(jì)，塑造一種嚴(yán)謹(jǐn)安全的感覺(jué)。

ENJOY的品牌圖形使用了大寫(xiě)的西文字母設(shè)計(jì)（圖1-22），從“E”和“N”這兩個(gè)字母。我們可以看到字母折角處沒(méi)有額外的圓角過(guò)渡，非常直接的轉(zhuǎn)折過(guò)渡。所以這從品牌圖形來(lái)看是非常硬朗的設(shè)計(jì)。那么在他的圖標(biāo)設(shè)計(jì)也應(yīng)該延續(xù)這個(gè)硬朗的風(fēng)格。所以ENJOY的底部標(biāo)簽欄圖標(biāo)（圖1-23）采用了全直角設(shè)計(jì)，線(xiàn)與線(xiàn)的轉(zhuǎn)折用了90度直角。

（圖1-22）ENJOY應(yīng)用品牌的西文字母

（圖1-23）ENJOY底部標(biāo)簽欄圖標(biāo)

氣質(zhì)3：復(fù)古文藝氣質(zhì)

東家App作為匠人聚集的地方，專(zhuān)門(mén)售賣(mài)各種手藝人的親手制作的各種藝術(shù)品，面向的對(duì)象是喜歡傳統(tǒng)文化的人群。所以圖標(biāo)設(shè)計(jì)的要有傳統(tǒng)韻味才行。宋體是為適應(yīng)印刷術(shù)而出現(xiàn)的一種漢字字體（圖1-24），。筆畫(huà)有粗細(xì)變化，而且一般是橫細(xì)豎粗，末端有裝飾部分（即「字腳」或「襯線(xiàn)」），點(diǎn)、撇、捺、鉤等筆畫(huà)有尖端，屬于襯線(xiàn)字體（serif），常用于書(shū)籍、雜志、報(bào)紙印刷的正文排版。宋體是生而具來(lái)的印刷體，產(chǎn)生于雕版，成型于明朝。

（圖1-24）宋體字的基本筆畫(huà)

宋體是中國(guó)非常代表性的傳統(tǒng)襯線(xiàn)體。所以東家的App圖標(biāo)吸收了宋體的特點(diǎn)（圖1-25），圖標(biāo)的橫線(xiàn)細(xì)，豎線(xiàn)粗，線(xiàn)的邊角都有相應(yīng)的尖端裝飾。

（圖1-25）東家App標(biāo)簽欄圖標(biāo)

借用宋體筆畫(huà)運(yùn)用在西文設(shè)計(jì)也是一個(gè)非常有意思的做法，傳統(tǒng)的宋體筆畫(huà)和西文羅馬字母結(jié)合，有一種獨(dú)特的中西結(jié)合設(shè)計(jì)韻味。這里我推薦“張曉明纖體宋”和“左佐之宋體西文”這兩款西文字體（圖1-26）。

（圖1-26）張曉明纖體宋與左佐之宋體西文預(yù)覽效果

品牌基因在圖標(biāo)設(shè)計(jì)中的運(yùn)用

方法一、品牌圖形整體應(yīng)用

首頁(yè)最常見(jiàn)使用的圖標(biāo)是一個(gè)房子的圖形，這個(gè)圖形來(lái)源于PC時(shí)代的面包屑結(jié)構(gòu)，Home的圖形代表家，代表不管你在網(wǎng)站哪個(gè)層級(jí)，點(diǎn)擊Home圖標(biāo)像回家一樣可以回到起始的位置。很多應(yīng)用的圖標(biāo)上的logo，都是一個(gè)讓人印象深刻的主圖形，那么我們可以直接把這個(gè)logo圖形做為應(yīng)用的首頁(yè)模塊圖標(biāo)使用。這樣的好處很明顯，每次用戶(hù)打開(kāi)應(yīng)用后，都會(huì)看到這個(gè)圖形，反復(fù)加強(qiáng)了用戶(hù)對(duì)App的logo的印象。例如大眾點(diǎn)評(píng)、餓了么、花瓣、貓途鷹、網(wǎng)易云音樂(lè)提取各自品牌圖形（圖1-27），應(yīng)用在了App底部導(dǎo)航欄首頁(yè)模塊上

（圖1-27）品牌圖形

方法二、提取品牌圖形的局部元素

毒物App的logo是一個(gè)經(jīng)過(guò)設(shè)計(jì)的文字+三角形組成（圖1-28），這個(gè)三角形做為logo典型元素抽象出來(lái)，在毒物的界面中使用貫穿。App底部標(biāo)簽欄（圖1-29）的首頁(yè)模塊圖標(biāo)用了這個(gè)三角圖形來(lái)表達(dá)。當(dāng)用戶(hù)向上滑動(dòng)頁(yè)面，這個(gè)三角形的圖形會(huì)有一個(gè)翻轉(zhuǎn)動(dòng)畫(huà)，點(diǎn)擊可以快速回頂部。因?yàn)榈谝粋€(gè)圖標(biāo)采用了這樣的極簡(jiǎn)風(fēng)格的圖標(biāo)，后面3個(gè)也采用了極簡(jiǎn)風(fēng)格的幾何線(xiàn)條圖標(biāo)

（圖1-28）毒物App圖標(biāo)

（圖1-29）毒物App標(biāo)簽欄圖標(biāo)

Logo局部的圖形不僅可以運(yùn)用在底部標(biāo)簽欄，也可以運(yùn)用在界面設(shè)計(jì)中，做為界面獨(dú)特的設(shè)計(jì)語(yǔ)言。例如LIFE的logo由西文字母和指紋圖形構(gòu)成（圖1-30）。

（圖1-30）LIFE App圖標(biāo)

在列表頁(yè)的BANNER右上角抽象使用了這個(gè)指紋的元素（圖1-31），代表閱讀量。而不是經(jīng)常看到的眼睛圖形。這個(gè)獨(dú)特的品牌圖形融入到界面設(shè)計(jì)中，使界面有了自己獨(dú)特的設(shè)計(jì)語(yǔ)言。

（圖1-31）LIFE列表頁(yè)

方法三、品牌名稱(chēng)的使用

一些應(yīng)用的名稱(chēng)是字母構(gòu)成，為了強(qiáng)化用戶(hù)對(duì)于應(yīng)用名稱(chēng)的認(rèn)知，直接把名稱(chēng)做為標(biāo)簽欄的圖標(biāo)。例如MONO（圖1-32）應(yīng)用的標(biāo)簽欄圖標(biāo)，設(shè)計(jì)的非常大膽，提取logo上面的4個(gè)字母M、O、N、O后，直接將其作為圖標(biāo)。但是這種設(shè)計(jì)策略的缺陷也很大，每個(gè)字母和功能模塊本身的含義并沒(méi)有直接聯(lián)系，對(duì)用戶(hù)幫助理解模塊有一定的困難。

（圖1-32）MONO的品牌圖標(biāo)和底部標(biāo)簽欄

站酷也采用了提取字母的手法（圖1-33），ZCOL四個(gè)字母做為子模塊的圖標(biāo)設(shè)計(jì)。中間的發(fā)布與圓形的字母O正好吻合，設(shè)計(jì)的非常巧妙。

（圖1-33）站酷的底部標(biāo)簽欄

方法四、品牌顏色的使用

每個(gè)應(yīng)用都應(yīng)該有自己獨(dú)特的品牌色，直接提取品牌色作為圖標(biāo)設(shè)計(jì)視覺(jué)元素，閑魚(yú)圖標(biāo)圖的品牌色是黃色（圖1-34），個(gè)人中心的圖標(biāo)提取了品牌的黃色，進(jìn)行了圖標(biāo)設(shè)計(jì)（圖1-35）。

（圖1-34）閑魚(yú) App圖標(biāo)

（圖1-35）閑魚(yú)的個(gè)人中心圖標(biāo)設(shè)計(jì)

APP底部標(biāo)簽欄圖標(biāo)設(shè)計(jì)

App底部標(biāo)簽欄起到一個(gè)全局導(dǎo)航的作用，用一個(gè)圖標(biāo)代表當(dāng)前模塊。圖標(biāo)一般會(huì)設(shè)計(jì)兩種狀態(tài)。點(diǎn)擊激活當(dāng)前模塊的狀態(tài)圖標(biāo)，未點(diǎn)擊激活狀態(tài)的圖標(biāo)。

方法一、 顏色的變換

圖標(biāo)選擇剪影或者線(xiàn)性的設(shè)計(jì)形式，圖標(biāo)激活狀態(tài)為一種顏色，這個(gè)顏色一般選擇使用這個(gè)App的品牌色，其它的圖標(biāo)為灰色。圖標(biāo)的設(shè)計(jì)形式不做任何變化，例如網(wǎng)易嚴(yán)選（圖1-36）的激活和非激活都是線(xiàn)性圖標(biāo)，只有顏色的變化。設(shè)計(jì)的形式?jīng)]有任何變化。有一些格調(diào)App喜歡使用黑白色做為激活色。例如良倉(cāng)App（圖1-37）,使用了白色為激活色。

（圖1-37）良倉(cāng)底部標(biāo)簽欄

方法二、設(shè)計(jì)形式+顏色的變換

激活的圖標(biāo)設(shè)計(jì)為剪影的形式，未激活的圖標(biāo)設(shè)計(jì)為線(xiàn)性的形式。這樣點(diǎn)擊和未點(diǎn)擊的圖標(biāo)除了有顏色的變化，還有設(shè)計(jì)形式的變化。例如京東（圖1-38）使用了紅色剪影圖標(biāo)為激活狀態(tài)。未激活的圖標(biāo)是線(xiàn)性灰色設(shè)計(jì)形式。

（圖1-38）京東底部標(biāo)簽欄

常見(jiàn)的線(xiàn)性變換為剪影的方法是，例如京東的APP底部標(biāo)簽欄，線(xiàn)性圖形外輪廓填充為面，在面中運(yùn)用正負(fù)形的設(shè)計(jì)手法，構(gòu)成細(xì)節(jié)豐富的面。

有一些應(yīng)用的線(xiàn)性圖形本身比較簡(jiǎn)單，所以這種方法不適用。而是在線(xiàn)的基礎(chǔ)上，填充面構(gòu)成細(xì)節(jié)豐富的剪影圖標(biāo)。例如每日開(kāi)眼App的標(biāo)簽欄圖標(biāo)（圖1-39），線(xiàn)性圖標(biāo)是極簡(jiǎn)的幾何圖形設(shè)計(jì)。在基本的三角、圓形、方塊添加了更多的小的塊面構(gòu)成剪影圖標(biāo)。

（圖1-39）每日開(kāi)眼底部標(biāo)簽欄

方法三、剪影圖標(biāo)顏色的變換

第三種做法，從iOS11開(kāi)始，蘋(píng)果系統(tǒng)的內(nèi)置App的底部標(biāo)簽欄圖標(biāo)，開(kāi)始傾向于全部設(shè)計(jì)為剪影圖標(biāo)，激活與未激活的圖標(biāo)只有顏色的變化。例如iOS11的AppStore（圖1-40）使用了藍(lán)色剪影圖標(biāo)代表激活狀態(tài)，灰色剪影圖標(biāo)代表未激活狀態(tài)。

（圖1-40）iOS11的AppStore底部標(biāo)簽欄

方法四、動(dòng)畫(huà)切換

一些應(yīng)用的標(biāo)簽欄圖標(biāo)會(huì)帶上一些動(dòng)效，使設(shè)計(jì)更加具有趣味性。例如飛豬App（圖1-41）采用的就是最常見(jiàn)的動(dòng)效，點(diǎn)擊圖標(biāo)，圖標(biāo)會(huì)有一個(gè)小放大的抖動(dòng)效果。

（圖1-41）飛豬底部標(biāo)簽欄

另外一些App采用更加復(fù)雜的設(shè)計(jì)效果，例如優(yōu)酷的App（圖1-42）底部標(biāo)簽欄的圖標(biāo)，除了基本的大小抖動(dòng)之外，每個(gè)圖標(biāo)的內(nèi)部填充元素會(huì)有一個(gè)動(dòng)效。例如發(fā)現(xiàn)圖標(biāo)除了填充外，會(huì)有一個(gè)旋轉(zhuǎn)效果。而星球圖標(biāo)，內(nèi)部的填充線(xiàn)會(huì)有一個(gè)由左到右填充效果。

（圖1-42）優(yōu)酷底部標(biāo)簽欄

方法五、超出標(biāo)簽欄

App的圖標(biāo)的變化范圍不只在標(biāo)簽欄區(qū)域，也可以延伸出標(biāo)簽欄的背景外。例如毒蛇電影App（圖1-43）的底部標(biāo)簽欄圖標(biāo)的點(diǎn)擊激活效果是一個(gè)圓形背景圖，這個(gè)背景圖超出了底部標(biāo)簽欄的高度。

（圖1-43）毒蛇電影底部標(biāo)簽欄

方法六、 節(jié)日?qǐng)D標(biāo)

在一些節(jié)日的時(shí)候，圖標(biāo)會(huì)做一些特別的設(shè)計(jì)，這時(shí)候的激活形式可能運(yùn)用獨(dú)特的品牌設(shè)計(jì)圖形。例如淘寶的雙12界面（圖1-44）

（圖1-44）雙12淘寶底部標(biāo)簽欄

學(xué)生作業(yè)

這是我指導(dǎo)的近期竹筍班的一些學(xué)生作業(yè)，希望通過(guò)學(xué)生作業(yè)中實(shí)際的界面設(shè)計(jì)案例，給大家一些啟發(fā)。

案例1流螢淺宿

難忘的旅程從流螢淺宿開(kāi)始（圖1-45）。不論出門(mén)在外或在家附近都能找到探險(xiǎn)之旅。獲取世界各地獨(dú)特的房源、體驗(yàn)及好去處的信息，預(yù)訂旅程所需的一切，或者開(kāi)始當(dāng)房東賺錢(qián)。

（圖1-45）流螢淺宿logo

首頁(yè)的底部標(biāo)簽欄圖標(biāo)（圖1-46）選擇了logo圖形進(jìn)行了2次設(shè)計(jì)。整個(gè)界面與品牌個(gè)輕飄格調(diào)個(gè)取得了一致。

（圖1-46）流螢淺宿首頁(yè)

案例2螞蟻家

螞蟻是一個(gè)愛(ài)捯飭家的群體動(dòng)物，用“螞蟻”旨在象征APP所針對(duì)的使用人群。螞蟻的家即蟻巢，因?yàn)橄伋卜帜緱?、地下巢、地上巢等多種類(lèi)型，所以“螞蟻家” APP（圖1-47）也寓意創(chuàng)造一個(gè)豐富多彩、形式多樣的家居生活。首頁(yè)的標(biāo)簽欄圖標(biāo)根據(jù)logo圖形體現(xiàn)的棱角感，設(shè)計(jì)了全直角風(fēng)格的圖標(biāo)（圖1-48）。

（圖1-47）螞蟻家logo

（圖1-48）螞蟻家首頁(yè)

案例3湊湊

湊湊將現(xiàn)下人類(lèi)生活習(xí)慣與商家促銷(xiāo)活動(dòng)相結(jié)合，充分利用了用戶(hù)的獵奇心理，吸引他們組團(tuán)共享折扣，在參與的過(guò)程中自然的達(dá)到聚會(huì)目的。首頁(yè)采用了無(wú)底部標(biāo)簽欄設(shè)計(jì)（圖1-49）。界面上的模塊分類(lèi)圖標(biāo)（圖1-50）采用了線(xiàn)色混合的手法。

（圖1-49）湊湊首頁(yè)

（圖1-50）湊湊模塊分類(lèi)頁(yè)

案例4 六十六號(hào)公路

公路66號(hào)是一款關(guān)于公路旅行的APP，為所有熱愛(ài)公路旅行的人們提供一個(gè)交流的圈子。同時(shí)向人們宣揚(yáng)Road trip文化。所以logo采用了非常粗獷的 線(xiàn)條（圖1-51）。界面設(shè)計(jì)需要符合產(chǎn)品的氣質(zhì)，所以整個(gè)界面的圖標(biāo)和圖形元素（圖1-52）都才用了全直角設(shè)計(jì)。

（圖1-51）66號(hào)公路logo

（圖1-56）66號(hào)公路logo個(gè)人中心頁(yè)

設(shè)計(jì)結(jié)語(yǔ)

圖標(biāo)設(shè)計(jì)是一個(gè)非常基礎(chǔ)的技能，很多UI設(shè)計(jì)師都是從圖標(biāo)設(shè)計(jì)開(kāi)始學(xué)習(xí)，但我們不需要盲目的臨摹或者學(xué)習(xí)各種復(fù)雜的技法。而是嘗試著學(xué)以致用。界面設(shè)計(jì)中用到各種圖標(biāo)，拒絕使用乏味而沒(méi)有特色的圖標(biāo)庫(kù)素材。我們要試著從品牌設(shè)計(jì)的角度去理解，尋找自己產(chǎn)品獨(dú)特的品牌氣質(zhì)，挑選合適的技法。然后把這些元素具象化，融入在界面設(shè)計(jì)中。

App系列設(shè)計(jì)文章寫(xiě)的很慢，我希望保證每篇是精品，下一篇《品牌設(shè)計(jì)在啟動(dòng)頁(yè)設(shè)計(jì)中的運(yùn)用》。我的微信是booui2017,可以加我交流。加我請(qǐng)注明站酷，不要加我一句話(huà)不說(shuō)，我會(huì)刪人的。因?yàn)槲⑿诺娜藬?shù)有限，5000人很容易加滿(mǎn)。