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