8種金剛區設計樣式,產品設計必備

19 評論 44995 瀏覽 451 收藏 9 分鐘

設計一款 App 的頁面布局和設計細節的時候最頭疼的可能就是金剛區的設計了,所以今天要和大家分享的內容是關于金剛區設計樣式的匯總,以及它們的優缺點。

目錄

  1. 金剛區的定義
  2. 金剛區的作用
  3. 金剛區設計樣式匯總
  4. 如何選擇金剛區的樣式
  5. 總結

一、金剛區的定義

金剛區一般位于首圖 Banner 之下的,屬于頁面的核心功能區域,多以宮格的形式排列展現的圖標,一般情況一屏5~10個。

你必須知道的8種金剛區設計樣式

二、金剛區的作用

金剛區主要負責著業務導流和功能選擇的作用。

你必須知道的8種金剛區設計樣式

三、金剛區設計樣式匯總

1. 面性圖標

設計樣式:面性圖標是我們最常見的圖標之一,一般有外輪廓圖形和內部的圖形(icon)組成;外輪廓一般選用圓形或者大圓角的圖形,色彩一般選用鄰近色或同類色,細節的處理一般選用具有質感的微漸變。

優點:外輪廓選用了圓形和大圓角的圖形,具有親和力,容易吸引人的目光;色彩飽滿具有質感,視覺沖擊力強;內部圖形(icon)與外輪廓組合方式多樣化,能更好的適應業務變化。

缺點:對于類似的業務,圖形相似,視覺辨識度低;對于復雜的業務,圖形無法表達明確,需要使用文字代替圖形,容易造成設計風格不統一。

你必須知道的8種金剛區設計樣式

2. 圖形圖標

設計樣式:純圖形設計,不需要外輪廓的襯托。

優點:設計細節豐富,富有創意,能營造小的場景插畫;設計樣式多樣化,扁平化、2.5D等設計樣式。

缺點:對文字信息的依賴性強;圖形色彩等細節容易設計過度,例如復雜的圖形和大彌散的投影。

你必須知道的8種金剛區設計樣式

3. 線性圖標

設計樣式:主要利用圖形的結構線進行設計,色彩上基本上以單色為主。

優點:設計上簡潔干凈,視覺上安靜沉穩。

缺點:視覺沖擊力較弱;視覺層級不夠突出;色彩單調。

你必須知道的8種金剛區設計樣式

4. 線面結合

設計樣式:由線和面組成,通過面的輪廓線加強視覺沖擊力。

優點:輪廓清晰,視覺沖擊力較強;設計細節豐富,富有創意。

缺點:視覺層級繁瑣,視覺效果不易把握;視覺效果復雜,不夠簡潔。

你必須知道的8種金剛區設計樣式

5. 商品展示

設計樣式:以當季具有代表性的商品為圖例,單獨展示或配有背景輪廓。

優點:主題明確,簡單粗暴;使用圖片,具有感染力。

缺點:缺乏設計感;商品圖展示,容易誤導用戶,讓用戶感覺只是單純的商品展示;極其依賴文字注釋;商品圖經常變動,增加用戶對于金剛區模塊認知的學習成本。

你必須知道的8種金剛區設計樣式

6. 節日&主題

設計樣式:以當時節日主題設計為主,貼近自身的品牌屬性,多以面性圖標為主。

優點:設計風格節日氣氛濃重;設計細節精致,富有創意;視覺沖擊力強;圖標風格貼近頁面主題,視覺上更統一。

缺點:品類的辨識度較低,比較依賴文字注釋;時效性強,只針對較短的時間段內具有價值。

你必須知道的8種金剛區設計樣式

7. 混合搭配

設計樣式:圖標&圖片混合搭配。

優點:以運營為主,能夠突出最近主推的運營活動。

缺點:視覺不統一;頻繁更換運營主體,增加了用戶的學習成本。

你必須知道的8種金剛區設計樣式

8. 文案運營

設計樣式:以當前運營活動的文案為主。

優點:突出當前的運營主題;運營活動性強,例如之前的貓狗文案大戰;設計風格新穎,通常結合設計主題;設計細節豐富,可發揮的創意點多。

缺點:品類的辨識度極低,用戶需要仔細閱讀底部文字信息;時效性強,只限用于短期活動。

你必須知道的8種金剛區設計樣式

四、如何選擇金剛區的樣式

現在主流的金剛區的設計圖標設計主要分為兩種:線性圖標和面性圖標。

你必須知道的8種金剛區設計樣式

對于金剛區的設計樣式選擇,我們可以根據產品的特性來進行選擇,簡單點可以劃分為功能型和業務型。

你必須知道的8種金剛區設計樣式

功能型的產品用戶的自主性較強,圖標較多,所以更加適用于線性圖標,因為線性圖標視覺上更加安靜沉穩,使頁面更加統一整體,用戶可以根據自己的實際需求對功能進行點擊操作。

業務型的產品更加適用于面性圖標,因為面性圖標視覺沖擊力很強,能夠快速引導用戶點擊,完成業務導流的作用。

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

你必須知道的8種金剛區設計樣式

支付寶的金剛區的功能較多,選用線性圖標能使整個模塊更加統一,用戶可以根據自己的需求進行點擊;而淘寶一個資源品類豐富的電商平臺,金剛區需要擔任倒流的作用,選用具有較強視覺沖擊面性圖標能更好的引導用戶點擊選擇。

五、總結

  1. 金剛區是頁面的核心功能區域,負責為各個業務導流,并起到運營的作用。
  2. 金剛區的圖標設計廣義上包括:線性圖標和面性圖標。
  3. 金剛區的設計形式的不同,利弊也各有所不同,我們在選擇金剛區的設計形式的時候要根據實際自身的產品屬性進行分析判斷,從而更好地服務產品。

 

本文由 @?姜正 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 大彌散是個啥?自己創造的詞匯嗎?

    來自廣東 回復
  2. 其實我很不明白某網站為什么要把這個地方叫金剛區?金剛????卐?

    拼多多淘寶等都是不注解直接用recyclerView閑魚則是加了個list_,京東取名百寶箱newappcenter,美團外賣用grid view major category,直譯主分類網格視圖,華為叫列表容器項目直接叫lantern燈籠??……

    so?燈籠區\百寶箱\主列表\都可以,誰發明了金剛區這種稱呼?

    來自福建 回復
    1. 百變金剛喔 想啥呢你

      回復
    2. 哈哈哈原來不只有我有這個疑問

      來自廣東 回復
  3. 來自北京 回復
  4. 手動贊

    來自廣東 回復
  5. 6的配圖應該是狗東不是當當吧

    來自上海 回復
  6. 京東是不是線性

    回復
  7. 支付寶不是線性

    回復
  8. 文章提到的多種類型圖標的優缺點還是值得商榷的,主觀性有點強。

    回復
  9. 非常詳細,再也不用擔心以后的金剛區設計了

    回復
  10. 看完很好奇金剛區的這個名字是誰取的?

    來自北京 回復
    1. 四大金剛

      回復
    2. 美團的人好像這么說。

      回復
    3. 感謝

      來自北京 回復
    4. 估計是前美團設計師 張雙

      來自北京 回復
    5. 感謝

      來自北京 回復
  11. 分析得很好??

    回復
  12. 資料豐富,內容簡潔,觀點明確。贊

    來自河南 回復