前言
當(dāng)我們?cè)O(shè)計(jì)一款 App 的時(shí)候原茅，大家在考慮頁(yè)面布局和設(shè)計(jì)細(xì)節(jié)的時(shí)候可能最頭疼的就是金剛區(qū)的設(shè)計(jì)，金剛區(qū)作為頁(yè)面的核心功能，承擔(dān)著產(chǎn)品功能導(dǎo)航和業(yè)務(wù)導(dǎo)流的任務(wù)。所以今天要和大家分享的內(nèi)容是關(guān)于金剛區(qū)設(shè)計(jì)樣式的匯總投储，以及它們的優(yōu)缺點(diǎn)。
目錄
1.金剛區(qū)的定義
2.金剛區(qū)的作用
3.金剛區(qū)設(shè)計(jì)樣式匯總
4.如何選擇金剛區(qū)的樣式
5.總結(jié)
1.金剛區(qū)的定義
金剛區(qū)一般位于首圖 Banner 之下的阔馋，屬于頁(yè)面的核心功能區(qū)域玛荞，多以宮格的形式排列展現(xiàn)的圖標(biāo)，一般情況一屏5~10個(gè)呕寝。
2.金剛區(qū)的作用
金剛區(qū)主要負(fù)責(zé)著業(yè)務(wù)導(dǎo)流和功能選擇的作用勋眯。
3.金剛區(qū)設(shè)計(jì)樣式匯總
a.面性圖標(biāo)
設(shè)計(jì)樣式：面性圖標(biāo)是我們最常見的圖標(biāo)之一，一般有外輪廓圖形和內(nèi)部的圖形（icon）組成下梢；外輪廓一般選用圓形或者大圓角的圖形客蹋，色彩一般選用鄰近色或同類色，細(xì)節(jié)的處理一般選用具有質(zhì)感的微漸變孽江。
優(yōu)點(diǎn)：外輪廓選用了圓形和大圓角的圖形讶坯，具有親和力，容易吸引人的目光岗屏；色彩飽滿具有質(zhì)感闽巩，視覺(jué)沖擊力強(qiáng)钧舌；內(nèi)部圖形（icon）與外輪廓組合方式多樣化，能更好的適應(yīng)業(yè)務(wù)變化涎跨。
缺點(diǎn)：對(duì)于類似的業(yè)務(wù)，圖形相似崭歧，視覺(jué)辨識(shí)度低隅很；對(duì)于復(fù)雜的業(yè)務(wù)，圖形無(wú)法表達(dá)明確率碾，需要使用文字代替圖形叔营，容易造成設(shè)計(jì)風(fēng)格不統(tǒng)一。
b.圖形圖標(biāo)
設(shè)計(jì)樣式：純圖形設(shè)計(jì)所宰，不需要外輪廓的襯托绒尊。
優(yōu)點(diǎn)：設(shè)計(jì)細(xì)節(jié)豐富，富有創(chuàng)意仔粥，能營(yíng)造小的場(chǎng)景插畫婴谱；設(shè)計(jì)樣式多樣化，扁平化躯泰、2.5D等設(shè)計(jì)樣式谭羔。
缺點(diǎn)：對(duì)文字信息的依賴性強(qiáng)；圖形色彩等細(xì)節(jié)容易設(shè)計(jì)過(guò)度麦向，例如復(fù)雜的圖形和大彌散的投影瘟裸。
c.線性圖標(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)。
d.線面結(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)潔罢荡。
e.商品展示
設(shè)計(jì)樣式：以當(dāng)季具有代表性的商品為圖例赡突，單獨(dú)展示或配有背景輪廓对扶。
優(yōu)點(diǎn)：主題明確，簡(jiǎn)單粗暴惭缰；使用圖片浪南，具有感染力。
缺點(diǎn)：缺乏設(shè)計(jì)感漱受；商品圖展示络凿，容易誤導(dǎo)用戶，讓用戶感覺(jué)只是單純的商品展示昂羡；極其依賴文字注釋絮记；商品圖經(jīng)常變動(dòng)，增加用戶對(duì)于金剛區(qū)模塊認(rèn)知的學(xué)習(xí)成本虐先。
f.節(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)：品類的辨識(shí)度較低柿汛，比較依賴文字注釋；時(shí)效性強(qiáng)埠对，只針對(duì)較短的時(shí)間段內(nèi)具有價(jià)值络断。
g.混合搭配
設(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)主體襟沮，增加了用戶的學(xué)習(xí)成本锥惋。
h.文案運(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)：品類的辨識(shí)度極低丛忆，用戶需要仔細(xì)閱讀底部文字信息祠汇；時(shí)效性強(qiáng)，只限用于短期活動(dòng)熄诡。
4.如何選擇金剛區(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)品用戶的自主性較強(qiáng)，圖標(biāo)較多导坟，所以更加適用于線性圖標(biāo)，因?yàn)榫€性圖標(biāo)視覺(jué)上更加安靜沉穩(wěn)圈澈，使頁(yè)面更加統(tǒng)一整體惫周，用戶可以根據(jù)自己的實(shí)際需求對(duì)功能進(jìn)行點(diǎn)擊操作；業(yè)務(wù)型的產(chǎn)品更加適用于面性圖標(biāo)康栈，因?yàn)槊嫘詧D標(biāo)視覺(jué)沖擊力很強(qiáng)递递，能夠快速引導(dǎo)用戶點(diǎn)擊，完成業(yè)務(wù)導(dǎo)流的作用啥么。
我們以支付寶和淘寶為例：
支付寶的金剛區(qū)的功能較多，選用線性圖標(biāo)能使整個(gè)模塊更加統(tǒng)一菠秒，用戶可以根據(jù)自己的需求進(jìn)行點(diǎn)擊践叠；而淘寶一個(gè)資源品類豐富的電商平臺(tái)，金剛區(qū)需要擔(dān)任倒流的作用禁灼，選用具有較強(qiáng)視覺(jué)沖擊面性圖標(biāo)能更好的引導(dǎo)用戶點(diǎn)擊選擇。
5.總結(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)品。
