你必須知道的8種金剛區設計樣式
姜正?MicroUX??今天
前言
當我們設計一款 App 的時候，大家在考慮頁面布局和設計細節的時候可能最頭疼的就是金剛區的設計，金剛區作為頁面的核心功能，承擔著產品功能導航和業務導流的任務。所以今天要和大家分享的內容是關于金剛區設計樣式的匯總，以及它們的優缺點。
目錄
1.金剛區的定義
2.金剛區的作用
3.金剛區設計樣式匯總
4.如何選擇金剛區的樣式
5.總結
1.金剛區的定義
金剛區一般位于首圖 Banner 之下的，屬于頁面的核心功能區域，多以宮格的形式排列展現的圖標，一般情況一屏5~10個。
2.金剛區的作用
金剛區主要負責著業務導流和功能選擇的作用。
3.金剛區設計樣式匯總
a.面性圖標
設計樣式：面性圖標是我們最常見的圖標之一，一般有外輪廓圖形和內部的圖形（icon）組成；外輪廓一般選用圓形或者大圓角的圖形，色彩一般選用鄰近色或同類色，細節的處理一般選用具有質感的微漸變。
優點：外輪廓選用了圓形和大圓角的圖形，具有親和力，容易吸引人的目光；色彩飽滿具有質感，視覺沖擊力強；內部圖形（icon）與外輪廓組合方式多樣化，能更好的適應業務變化。
缺點：對于類似的業務，圖形相似，視覺辨識度低；對于復雜的業務，圖形無法表達明確，需要使用文字代替圖形，容易造成設計風格不統一。
b.圖形圖標
設計樣式：純圖形設計，不需要外輪廓的襯托。
優點：設計細節豐富，富有創意，能營造小的場景插畫；設計樣式多樣化，扁平化、2.5D等設計樣式。
缺點：對文字信息的依賴性強；圖形色彩等細節容易設計過度，例如復雜的圖形和大彌散的投影。
c.線性圖標
設計樣式：主要利用圖形的結構線進行設計，色彩上基本上以單色為主。
優點：設計上簡潔干凈，視覺上安靜沉穩。
缺點：視覺沖擊力較弱；視覺層級不夠突出；色彩單調。
d.線面結合
設計樣式：由線和面組成，通過面的輪廓線加強視覺沖擊力。
優點：輪廓清晰，視覺沖擊力較強；設計細節豐富，富有創意。
缺點：視覺層級繁瑣，視覺效果不易把握；視覺效果復雜，不夠簡潔。
e.商品展示
設計樣式：以當季具有代表性的商品為圖例，單獨展示或配有背景輪廓。
優點：主題明確，簡單粗暴；使用圖片，具有感染力。
缺點：缺乏設計感；商品圖展示，容易誤導用戶，讓用戶感覺只是單純的商品展示；極其依賴文字注釋；商品圖經常變動，增加用戶對于金剛區模塊認知的學習成本。
f.節日&主題
設計樣式：以當時節日主題設計為主，貼近自身的品牌屬性，多以面性圖標為主。
優點：設計風格節日氣氛濃重；設計細節精致，富有創意；視覺沖擊力強；圖標風格貼近頁面主題，視覺上更統一。
缺點：品類的辨識度較低，比較依賴文字注釋；時效性強，只針對較短的時間段內具有價值。
g.混合搭配
設計樣式：圖標&圖片混合搭配。
優點：以運營為主，能夠突出最近主推的運營活動。
缺點：視覺不統一；頻繁更換運營主體，增加了用戶的學習成本。
h.文案運營
設計樣式：以當前運營活動的文案為主。
優點：突出當前的運營主題；運營活動性強，例如之前的貓狗文案大戰；設計風格新穎，通常結合設計主題；設計細節豐富，可發揮的創意點多。
缺點：品類的辨識度極低，用戶需要仔細閱讀底部文字信息；時效性強，只限用于短期活動。
4.如何選擇金剛區的樣式
現在主流的金剛區的設計圖標設計主要分為兩種：線性圖標和面性圖標。
對于金剛區的設計樣式選擇，我們可以根據產品的特性來進行選擇，簡單點可以劃分為功能型和業務型。
功能型的產品用戶的自主性較強，圖標較多，所以更加適用于線性圖標，因為線性圖標視覺上更加安靜沉穩，使頁面更加統一整體，用戶可以根據自己的實際需求對功能進行點擊操作；業務型的產品更加適用于面性圖標，因為面性圖標視覺沖擊力很強，能夠快速引導用戶點擊，完成業務導流的作用。
我們以支付寶和淘寶為例：
支付寶的金剛區的功能較多，選用線性圖標能使整個模塊更加統一，用戶可以根據自己的需求進行點擊；而淘寶一個資源品類豐富的電商平臺，金剛區需要擔任倒流的作用，選用具有較強視覺沖擊面性圖標能更好的引導用戶點擊選擇。
5.總結
1.金剛區是頁面的核心功能區域，負責為各個業務導流，并起到運營的作用。
2.金剛區的圖標設計廣義上包括：線性圖標和面性圖標。
3.金剛區的設計形式的不同，利弊也各有所不同，我們在選擇金剛區的設計形式的時候要根據實際自身的產品屬性進行分析判斷，從而更好的服務產品。
