守望者
摘:談圖標樣式的選擇,除了要考慮用戶,同時我們還需要考慮產品的需求,功能圖標多少等,只有經過綜合分析,我們才能得到一個合適的界面。
通過上篇文章發起的投票問題,和大家分享了,設計師不要站在設計的角度設計,而應該從用戶的角度出發,做出受用戶歡迎的界面。
上篇傳送門:→《這波投票,為什么設計師和普通用戶差異這么大(上)》
接下來的文章,我將繼續和大家分享該如何選擇合理的圖標樣式。?
?

一、公眾號投票回顧

首先先來回顧下上篇文章的投票結果,本次投票共417票,其中13%的人投了釘釘,36%的人投了企業微信,40%的人投了平安金管家,5%的人投飛書,4%的人投了泰康。PS:這里非常感謝各位小伙伴的參與,也感謝各位留言的小伙伴,因為有你們的參與,才讓我的投票樣本更多一點。
?
?
從投票結果看出,投企業微信和平安金管家的人較多。投企業微信的伙伴認為,雖然企業微信圖標設計中規中矩,但是和微信支付界面相似,用戶使用起來比較熟悉、排版清晰、能夠幫助用戶快速定位,識別性最高。
?
?
投平安金管的認為,界面干凈,圖標統一,一眼能找到目標,當數據量大也比較適合。
?
?
另外,還有些小伙伴說開始投平安金管家,但看過分析之后,確實認為企業微信說服力更高些;還有些同學認為,本次樣本太少,受個人喜好影響太大,同時圖標的辨識度和業務、界面排版、熟悉度等有很大的關系,如果拋開這些談辨識度很不公平。
?
?
通過公眾號的投票和留言大家可以發現,根據設計經驗不同,我們所作出的選擇也不同,每個人考慮到的點都不一樣,就像上面同學說的,影響因素這么多,如果拋開這些談辨識度很不公平。因此,既然本篇文章和大家談圖標樣式的選擇,除了要考慮用戶,同時我們還需要考慮產品的需求,功能圖標多少等,只有經過綜合分析,我們才能得到一個合適的界面。?
?
?

二、如何合理地選擇圖標樣式

以設計工作臺界面為例,當設計時我提出如何合理地選擇圖標樣式時,其深層的需求是我要選擇什么樣的圖標樣式用戶才更易識別呢。但是影響用戶識別的因素有很多,比如分割方式、排版疏密、圖標樣式、圖標大小、用戶個人認知等。因此在設計時,我們還需要一步步的從這幾個方面進行分析,進行合理的取舍,從而得到一個既滿足用戶又滿足產品的合適界面。

1、分割方式

在設計前我們首先來了解模塊的分割方式,以及他的優缺點和適用場景,從而在結合實際情況進行選擇。

1)界面的分割方式常見的有背景欄分割、線分割、留白分割、卡片分割這四種方式。

 

背景欄分割:分割感強、對用戶的干擾性大,容易分散用戶注意力,阻礙用戶快速查找,優勢是分割比較規整,適合功能模塊較多的情況。
?
線分割:分割感不強,對用戶干擾不大,瀏覽較為流暢,同時分割也比較規整,當功能多時也不會顯得太亂,比較中規中矩,適合功能模塊較多的情況。
?
留白分割:分割感弱,對用戶的干擾小,瀏覽較為流暢,界面風格簡潔。缺點是當功能圖標不足一排時,界面中會有大量的空白,視覺效果不太好;另外,留白分割比較浪費空間,適合功能模塊少的情況。
?
卡片分割:卡片分割感強,對用戶的干擾較大,同時占用的空間較多,優勢是分割清晰、視覺效果好,適合功能模塊少的情況。?
?
?
2)在設計時我到底該選擇哪種分割方式呢?
最直接的方式就是判斷功能模塊多少,如果少(2屏以下)那么我們根據既定的界面風格來設計即可。
?
比如汽車之家,他的整體界面風格就是大留白,他里面的全部功能界面也沿用了這種風格。因此如果你的界面是大留白風格、卡片風格,那么就繼續沿用即可;
?
不過,如果功能圖標多(3屏以上),那么建議采用背景欄或者線進行分割,其主要原因背景欄和線分割更清晰,便于用戶查找。
?

2、排版疏密

分割方式確定后,接下來就需要考慮模塊內的排版疏密了。疏密不同,給人的感受也不同,”疏”給人一種空間感、輕松感、秩序感;”密”給人一種緊張感、窒息感、厚度感。

 

 

這也是為什么大家投企業微信的原因,雖然他的圖標中規中矩,但是模塊內功能圖標的排版疏密對比相比其他界面大,分割更清晰,因此給人的感受會更舒服,用戶能夠更快的發現目標功能。
?
?
但是微信這種排版也是有缺點的,比如當功能過多,界面就會被拉得很長,用戶需要一屏屏的查找,反而會加重用戶的負擔。同時由于線的分割太強,它和目前很多產品用的大留白風格也不太融合,因此并不適合所有產品。
?
那么當功能多該如何設計呢?
上面分析出了原因,我們可以從排版的疏密出發,從而達到分割清晰的目的。
上面兩個圖大家可以對比,同樣的圖標,右圖我僅僅將圖標下移了4px,鼠標的疏密對比就發生了變化,功能和功能之間的分割更清晰,整個界面給人的感覺相對之前會輕松一些。
?

3、圖標樣式

圖標樣式一般有線性、面型、面+背板、線+面這四種樣式,對于大多數圖標其識別性的排列為面型>面+背板>線+面>線性。

線型圖標:設計一般以單色為主,簡潔干凈,給人的感受比較安靜沉穩,一般在保險、金融類產品運用較多,缺點是視覺沖擊力較弱,識別性較差。
?
面型圖標:面型圖標相比帶背板圖標更加精致,富有變化;相比線型圖標又可以設計豐富的色彩,因此在金剛區、功能圖標界面都經常使用,識別性較高,缺點是對設計的要求較高,對于功底不深厚的設計來說,很容易將圖標的缺點暴露出來。
?
面+背板圖標:背板的形狀一般為圓形、圓角矩形、正橢圓形等,其圖標的統一性較線型和面型高,對圖標設計的好壞容忍度高,識別性僅次于面型圖標。
?
線+面型圖標:主要由線和面組成,其輪廓清晰、細節豐富、給人年輕活潑的感受,缺點是對設計的要求較高,視覺層級較為復雜,識別性相對面型較低。?
??
了解圖標樣式之后,在實際工作中又該如何選擇呢?
首先,我們需要確定界面中圖標是否有固定的風格,比如汽車之家的圖標整體風格感比較強,他的金剛區、功能等圖標均采用這種風格,這時候我們可直接沿用。?
其次,需要判斷我們的功能圖標是否是大眾熟知(圖標語義是否明確),比如電商類直接用實物圖或者用戶熟知的圖標,用戶就能通過圖標輕松找到目標。
?
?
但是對于功能性的APP來說,一般功能都比較接近,同時圖標語義并不被大眾熟知,因此如果為了用戶能夠更快的找到功能圖標,我們可選擇面型、面+背板這種識別性較高的樣式。
?

4、圖標大小

圖標大小對識別性也有所影響,圖標大占用的面積大,單叢圖標來說用戶更易識別,同時也便于操作。

?
比如平安金管家和京東金融的圖標樣式、分割都類似,同時平安金管家的圖標相比京東更加統一,同時疏密對比也比京東大,但是從識別性來說卻弱于京東,其主要區別就是京東的圖標和文字相比平安要大,同時其圖標樣式相對平安差異性較大,因此識別性較高。需要注意的是,圖標越大,功能圖標之間的疏密對比將會變小,就容易給人密集擁擠的感覺、從而識別性也會下降。
??
?
比如釘釘和飛書,當功能圖標較多時,很難快速的定位到目標功能。因此在設計時,圖標的大小也要合適,一般來說如果你的圖標語義弱,圖標差異小,那么圖標僅僅起到視覺引導的作用,這時候圖標可以不用太大,主要突出文字,從而提高整體識別性。除此之外,如果界面的功能圖標較少,為了讓整個界面協調,這時候我們也會考慮將圖標設計大一點,從而平衡界面,提高整體識別性。?
?
?

三、劃重點

以上主要從分割方式、排版疏密、圖標樣式、圖標大小這四個方面和大家分享了,如何綜合用戶、產品需求進行選擇合適的樣式。
?
當然做完之后,如果有條件的,可以拿出你的ABC版本,給真實用戶進行測試,看他們是否能夠快速的找到指定目標。
?
如果沒有真實用戶,我們也可以小范圍的找一些同事進行測試,看看他們是否能快速定位目標,聽聽他們的建議,這樣可以幫我們設計出更接近真實用戶愛用的樣式。

 

原文地址:海鹽社(公眾號)
作者:風箏KK

轉載請注明:學UI網 » 這波投票,如何合理地選擇圖標樣式 (下)

登錄收藏
 
你可能喜歡的:
UI組件-滑塊 用戶超愛的選擇小助手UI組件-滑塊 用戶超愛的選擇小助手
啥?你說我不懂如何設計消息中心?啥?你說我不懂如何設計消息中心?
界面布局| 移動端常見8種界面布局的分析與運用界面布局| 移動端常見8種界面布局的分析與運用
砂之船奧萊數字化零售項目砂之船奧萊數字化零售項目
Material Design Shape and motion 形狀與動效Material Design Shape and motion 形狀與動效
Material Design Shape as expression 形狀表達Material Design Shape as expression 形狀表達
細說控件| Button按鈕的不同樣式與狀態細說控件| Button按鈕的不同樣式與狀態
Material Design Shape and hierarchy 形狀與層級Material Design Shape and hierarchy 形狀與層級
聊聊加載等待的那些事之“進度指示器”(原則篇)聊聊加載等待的那些事之“進度指示器”(原則篇)
Material Design About shape 形狀指南Material Design About shape 形狀指南
?
街机捕鱼城金库券