設(shè)計(jì)一款 App 的頁(yè)面布局和設(shè)計(jì)細(xì)節(jié)的時(shí)候最頭疼的可能就是金剛區(qū)的設(shè)計(jì)了，所以今天要和大家分享的內(nèi)容是關(guān)于金剛區(qū)設(shè)計(jì)樣式的匯總，以及它們的優(yōu)缺點(diǎn)。

目錄

1. 金剛區(qū)的定義
2. 金剛區(qū)的作用
3. 金剛區(qū)設(shè)計(jì)樣式匯總
4. 如何選擇金剛區(qū)的樣式
5. 總結(jié)

一、金剛區(qū)的定義

金剛區(qū)一般位于首圖 Banner 之下的，屬于頁(yè)面的核心功能區(qū)域，多以宮格的形式排列展現(xiàn)的圖標(biāo)，一般情況一屏5~10個(gè)。

二、金剛區(qū)的作用

金剛區(qū)主要負(fù)責(zé)著業(yè)務(wù)導(dǎo)流和功能選擇的作用。

三、金剛區(qū)設(shè)計(jì)樣式匯總

1. 面性圖標(biāo)

設(shè)計(jì)樣式：面性圖標(biāo)是我們最常見(jiàn)的圖標(biāo)之一，一般有外輪廓圖形和內(nèi)部的圖形（icon）組成；外輪廓一般選用圓形或者大圓角的圖形，色彩一般選用鄰近色或同類(lèi)色，細(xì)節(jié)的處理一般選用具有質(zhì)感的微漸變。

優(yōu)點(diǎn)：外輪廓選用了圓形和大圓角的圖形，具有親和力，容易吸引人的目光；色彩飽滿(mǎn)具有質(zhì)感，視覺(jué)沖擊力強(qiáng)；內(nèi)部圖形（icon）與外輪廓組合方式多樣化，能更好的適應(yīng)業(yè)務(wù)變化。

缺點(diǎn)：對(duì)于類(lèi)似的業(yè)務(wù)，圖形相似，視覺(jué)辨識(shí)度低；對(duì)于復(fù)雜的業(yè)務(wù)，圖形無(wú)法表達(dá)明確，需要使用文字代替圖形，容易造成設(shè)計(jì)風(fēng)格不統(tǒng)一。

2. 圖形圖標(biāo)

設(shè)計(jì)樣式：純圖形設(shè)計(jì)，不需要外輪廓的襯托。

優(yōu)點(diǎn)：設(shè)計(jì)細(xì)節(jié)豐富，富有創(chuàng)意，能營(yíng)造小的場(chǎng)景插畫(huà)；設(shè)計(jì)樣式多樣化，扁平化、2.5D等設(shè)計(jì)樣式。

缺點(diǎn)：對(duì)文字信息的依賴(lài)性強(qiáng)；圖形色彩等細(xì)節(jié)容易設(shè)計(jì)過(guò)度，例如復(fù)雜的圖形和大彌散的投影。

3. 線性圖標(biāo)

設(shè)計(jì)樣式：主要利用圖形的結(jié)構(gòu)線進(jìn)行設(shè)計(jì)，色彩上基本上以單色為主。

優(yōu)點(diǎn)：設(shè)計(jì)上簡(jiǎn)潔干凈，視覺(jué)上安靜沉穩(wěn)。

缺點(diǎn)：視覺(jué)沖擊力較弱；視覺(jué)層級(jí)不夠突出；色彩單調(diào)。

4. 線面結(jié)合

設(shè)計(jì)樣式：由線和面組成，通過(guò)面的輪廓線加強(qiáng)視覺(jué)沖擊力。

優(yōu)點(diǎn)：輪廓清晰，視覺(jué)沖擊力較強(qiáng)；設(shè)計(jì)細(xì)節(jié)豐富，富有創(chuàng)意。

缺點(diǎn)：視覺(jué)層級(jí)繁瑣，視覺(jué)效果不易把握；視覺(jué)效果復(fù)雜，不夠簡(jiǎn)潔。

5. 商品展示

設(shè)計(jì)樣式：以當(dāng)季具有代表性的商品為圖例，單獨(dú)展示或配有背景輪廓。

優(yōu)點(diǎn)：主題明確，簡(jiǎn)單粗暴；使用圖片，具有感染力。

缺點(diǎn)：缺乏設(shè)計(jì)感；商品圖展示，容易誤導(dǎo)用戶(hù)，讓用戶(hù)感覺(jué)只是單純的商品展示；極其依賴(lài)文字注釋?zhuān)簧唐穲D經(jīng)常變動(dòng)，增加用戶(hù)對(duì)于金剛區(qū)模塊認(rèn)知的學(xué)習(xí)成本。

6. 節(jié)日&主題

設(shè)計(jì)樣式：以當(dāng)時(shí)節(jié)日主題設(shè)計(jì)為主，貼近自身的品牌屬性，多以面性圖標(biāo)為主。

優(yōu)點(diǎn)：設(shè)計(jì)風(fēng)格節(jié)日氣氛濃重；設(shè)計(jì)細(xì)節(jié)精致，富有創(chuàng)意；視覺(jué)沖擊力強(qiáng)；圖標(biāo)風(fēng)格貼近頁(yè)面主題，視覺(jué)上更統(tǒng)一。

缺點(diǎn)：品類(lèi)的辨識(shí)度較低，比較依賴(lài)文字注釋?zhuān)粫r(shí)效性強(qiáng)，只針對(duì)較短的時(shí)間段內(nèi)具有價(jià)值。

7. 混合搭配

設(shè)計(jì)樣式：圖標(biāo)&圖片混合搭配。

優(yōu)點(diǎn)：以運(yùn)營(yíng)為主，能夠突出最近主推的運(yùn)營(yíng)活動(dòng)。

缺點(diǎn)：視覺(jué)不統(tǒng)一；頻繁更換運(yùn)營(yíng)主體，增加了用戶(hù)的學(xué)習(xí)成本。

8. 文案運(yùn)營(yíng)

設(shè)計(jì)樣式：以當(dāng)前運(yùn)營(yíng)活動(dòng)的文案為主。

優(yōu)點(diǎn)：突出當(dāng)前的運(yùn)營(yíng)主題；運(yùn)營(yíng)活動(dòng)性強(qiáng)，例如之前的貓狗文案大戰(zhàn)；設(shè)計(jì)風(fēng)格新穎，通常結(jié)合設(shè)計(jì)主題；設(shè)計(jì)細(xì)節(jié)豐富，可發(fā)揮的創(chuàng)意點(diǎn)多。

缺點(diǎn)：品類(lèi)的辨識(shí)度極低，用戶(hù)需要仔細(xì)閱讀底部文字信息；時(shí)效性強(qiáng)，只限用于短期活動(dòng)。

四、如何選擇金剛區(qū)的樣式

現(xiàn)在主流的金剛區(qū)的設(shè)計(jì)圖標(biāo)設(shè)計(jì)主要分為兩種：線性圖標(biāo)和面性圖標(biāo)。

對(duì)于金剛區(qū)的設(shè)計(jì)樣式選擇，我們可以根據(jù)產(chǎn)品的特性來(lái)進(jìn)行選擇，簡(jiǎn)單點(diǎn)可以劃分為功能型和業(yè)務(wù)型。

功能型的產(chǎn)品用戶(hù)的自主性較強(qiáng)，圖標(biāo)較多，所以更加適用于線性圖標(biāo)，因?yàn)榫€性圖標(biāo)視覺(jué)上更加安靜沉穩(wěn)，使頁(yè)面更加統(tǒng)一整體，用戶(hù)可以根據(jù)自己的實(shí)際需求對(duì)功能進(jìn)行點(diǎn)擊操作。

業(yè)務(wù)型的產(chǎn)品更加適用于面性圖標(biāo)，因?yàn)槊嫘詧D標(biāo)視覺(jué)沖擊力很強(qiáng)，能夠快速引導(dǎo)用戶(hù)點(diǎn)擊，完成業(yè)務(wù)導(dǎo)流的作用。

我們以支付寶和淘寶為例：

支付寶的金剛區(qū)的功能較多，選用線性圖標(biāo)能使整個(gè)模塊更加統(tǒng)一，用戶(hù)可以根據(jù)自己的需求進(jìn)行點(diǎn)擊；而淘寶一個(gè)資源品類(lèi)豐富的電商平臺(tái)，金剛區(qū)需要擔(dān)任倒流的作用，選用具有較強(qiáng)視覺(jué)沖擊面性圖標(biāo)能更好的引導(dǎo)用戶(hù)點(diǎn)擊選擇。

五、總結(jié)

1. 金剛區(qū)是頁(yè)面的核心功能區(qū)域，負(fù)責(zé)為各個(gè)業(yè)務(wù)導(dǎo)流，并起到運(yùn)營(yíng)的作用。
2. 金剛區(qū)的圖標(biāo)設(shè)計(jì)廣義上包括：線性圖標(biāo)和面性圖標(biāo)。
3. 金剛區(qū)的設(shè)計(jì)形式的不同，利弊也各有所不同，我們?cè)谶x擇金剛區(qū)的設(shè)計(jì)形式的時(shí)候要根據(jù)實(shí)際自身的產(chǎn)品屬性進(jìn)行分析判斷，從而更好地服務(wù)產(chǎn)品。

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

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