小紐扣

當我們在設計首頁的時候,大家考慮頁面布局設計細節的時候,可能最讓人頭疼就是金剛區的圖標設計!在設計金剛區的時候往往不知道采取那種設計樣式能夠更好的服務產品,面對這個頭疼的問題,那么我們就結合一下實際上線的產品中金剛區設計進行一下歸納總結,并分析一下它們的設計樣式以及優缺點。

 

1.金剛區的定義

金剛區是指頁面頂部 banner 之下的核心功能區,金剛區會根據產品的業務目標的變更進行靈活的調整,就像百變金剛一樣靈活,所以叫做金剛區。金剛區多以宮格的形式排列展現的圖標,一般情況一屏展示5~10個圖標。

 

2.金剛區的作用

金剛區服務于整體產品,屬于頁面的核心功能區,金剛區主要作用有兩點:一是業務導流,為不同的業務模塊進行引流;二是功能選擇,為用戶提供不同功能的服務。

 

3.金剛區設計形式&優缺點

金剛區的設計形式一般是由:“圖標+文字”組成。我們以線上實際的產品為例簡單的歸納總結一下當前主流的金剛區樣式。

 

A.面性圖標

設計樣式:面性圖標是由外部輪廓和內部的 icon 圖形組成,外輪廓的圖形一般選用圓形或者超橢圓作為背景圖形,色彩上多會選用同類色處理成微漸變的形式。

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

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

 

B.圖形圖標

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

優點:設計細節豐富,處理樣式較多,例如漸變、圖案紋理等等;富有創意,能營造小的場景插畫;設計樣式多樣化,扁平化、2.5D等設計樣式。

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

 

C.線性圖標

設計樣式:主要利用圖形的結構線進行設計,色彩上基本上以純色為主,或者添加品牌色作為輔助色。

優點:設計上簡潔干練,不易干擾用戶進行其他操作。

缺點:在內容復雜的頁面中視覺沖擊力較弱;相比于面性圖標色彩較為單調。

 

D.線面結合

設計樣式:在圖形化的基礎上添加輪廓結構線,色彩上簡練干凈,一般不會超過三種顏色。

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

缺點:視覺層級繁瑣,視覺效果不易把握;視覺效果復雜,不夠簡潔;圖形不統一,增加識別難度,較為依賴文字注釋。

 

E.實物展示

設計樣式:多以當前主營業務具有代表性的商品為例,單獨展示或者配合遮罩圖形進行展示。

優點:主題明確,簡單粗暴;直接使用商品展示,具有感染力。

缺點:純商品圖片展示,缺乏設計感且視覺重量不易把控和統一;商品圖展示,容易誤導用戶,讓用戶感覺只是單一商品的售賣;商品展示立意單一,極其依賴文字注釋;如果頻繁更換商品圖,增加用戶對于金剛區模塊認知的學習成本。

 

設計樣式:主要汲取當前的節日文化元素為基礎進行設計,貼合節日氛圍和自身的品牌屬性。
優點:設計風格節日氣氛濃重,滿足用戶當前的情感需求;設計細節精致,富有創意;視覺沖擊力強;視覺上與當前運營主題設計風格統一,使整個界面在視覺上看起來更加融合。
缺點:圖形設計上更加貼近節日活動的主題,以渲染氣氛為主,圖形設計較為復雜,功能的識別性較弱;由于圖形設計主要以渲染氣氛為主,所以圖標極其依賴文字注釋;時效性強,只針對節日活動的時間階段。

 

F.混合搭配

設計樣式:主要以圖形 icon 和圖片展示進行混合排布,圖片一般都會進行圖形遮罩處理,使其與其它圖標在視覺上相對統一。

優點:能夠有效幫助產品推動當前的運營活動點擊率。

缺點:圖形和圖片混搭容易造成視覺不統一;如果頻繁更換運營活動,增加了用戶的學習成本。

 

G.運營文字

設計樣式:以運營文案為主,會結合當前的活動主題進行主題性的視覺創意設計。

優點:突出當前的運營活動主題,滿足用戶情感化的設計;運營活動的針對性強,能夠直接突出主題,例如之前的貓狗文案大戰;設計風格新穎,通常結合當前活動主題進行創意設計;設計細節豐富,視覺沖擊力強。

缺點:品類功能的辨識度極低,對底部的文案;時效性強,只限用于當前活動期間使用。

 

4.如何選擇金剛區的樣式

我們設計中主流的金剛區的圖標設計主要分為兩種:線性圖標和面性圖標。兩者的優勢各不相同,這個時候我們往往要結合自己的實際需求來選擇使用那種設計樣式。
通過歸納總結我們發現大多數的金剛區可以分為兩種,一種是功能性的金剛區,主要以產品的核心功能為主,為用戶提供功能型的服務;另一種屬于業務性的金剛區,主要以為各個業務導流為主。
在實際的設計工作當中,你可以根據實際的需求選擇使用那種設計樣式,在這里我們可以參考所設計的金剛區的功能類型和功能數量兩個參考維度。如果產品是功能性的且數量偏多,建議使用線性圖標,因為線性圖標視覺上更加安靜沉穩,不會過多的干擾用戶,使頁面更加統一整體。例如支付寶的首頁,支付寶的金剛區的功能較多,選用線性圖標能使整個模塊更加統一,用戶可以根據自己的需求進行點擊。
如果是業務性的產品更加適用于面性圖標,因為面性圖標視覺沖擊力強,能夠快速引導用戶點擊,完成業務導流的作用。常見的使用場景有淘寶、京東等電商平臺。如下圖:
淘寶、京東等電商平臺資源品類豐富,金剛區需要擔任為其他業務導流的作用,選擇視覺沖擊力較強的面形圖標能夠更好的吸引用戶的注意力,引導用戶點擊選擇。?

 

5.畫重點

  • 1.金剛區是頁面的核心功能區,會根據產品的業務目標的變更進行靈活的調整。
  • 2.金剛區的主要作用是為產品的主營業務導流和輔助運營,已經為用戶提供核心的功能服務。
  • 3.在選用金剛區設計樣式的時候,我們主要參考的是功能類型和功能數量的兩個維度,產品偏重功能性且數量多的時候更加偏向于線性圖標,產品偏重業務性的話更加偏向于面性圖標。

 

參考鏈接

金剛區,瓷片區的叫法是怎么來的?

https://dwz.cn/kYrJejYF

 

原文地址:海鹽社(公眾號)

作者:姜正

轉載請注明:學UI網 » 你必須知道的8種金剛區的設計樣式

登錄收藏
 
你可能喜歡的:
設計沉思錄丨如何搭建一份高質量的設計規范設計沉思錄丨如何搭建一份高質量的設計規范
體驗設計的容錯性體驗設計的容錯性
兒童產品中的色彩使用(下)兒童產品中的色彩使用(下)
iOS13 的設計趨勢及思考分享iOS13 的設計趨勢及思考分享
聽說你們設計稿里的控件總是亂糟糟的?聽說你們設計稿里的控件總是亂糟糟的?
電商活動卡片式設計思考電商活動卡片式設計思考
被你忽略的投影,實用性竟有這么大!被你忽略的投影,實用性竟有這么大!
了解圖標落地,讓前端再愛你一次了解圖標落地,讓前端再愛你一次
交互設計七大定律在設計中的運用交互設計七大定律在設計中的運用
看起來很美的數據在騙人看起來很美的數據在騙人
?
类似钱咖的高额赚钱