APP中圖標的類型那么多,到底該怎么準確運用?

不懂技術怎么做產品?15天在線學習,補齊產品經理必備技術知識,再也不被開發忽悠。了解一下>

圖標做為頁面中最重要的元素之一,合理的運用與設計,是UI設計師必備的技能。設計與運用圖標是兩回事,很多設計師都能夠設計出漂亮的圖標,卻不能準確的運用到頁面當中去。所以,今天這篇文章不講圖標的設計,只探討各種類別的圖標在app頁面中的準確用法。

圖標的風格類別有很多種,設計的技法也是千千萬,總的來說常用的圖標可以分為三大類:

  1. 面性圖標
  2. 異形圖標
  3. 線性圖標

APP中圖標的類型那么多,到底該怎么準確運用?

案例解析

1. 面性圖標特征與運用

APP中圖標的類型那么多,到底該怎么準確運用?

面性圖標

面性圖標視覺表現力強,在頁面當中是視覺擔當,能有效的強調頁面的視覺重心,能更好的突出主要業務重心,所以常常用在首頁一級頁面做為主要流量分發。

1)面性圖標不建議用在哪些區域?

APP中圖標的類型那么多,到底該怎么準確運用?

列表流不建議用面性圖標,原因是形式與功能之間的關系,面性圖標的特點是視覺表現力強,相對其他類型的圖標不具備高效的識別性,對于功能分類的頁面,沒有起到一個很好的高度概括性與高效引導的作用。

2)面性圖標一般不在頁面中大量的出現。

APP中圖標的類型那么多,到底該怎么準確運用?

右圖在藝APP頁面中大量運用面性圖標,雖然顏色明度上做了弱化,但依舊不能起到對功能的快速引導,第一視覺看上去是一個個小色塊。

做為不是引流的入口和不需要過重強調色彩表現的頁面,應該落實到信息引導上,運用具備高效識別性的圖標更為合適。例如:左圖”國美APP”異形圖標或線性圖標,這樣的圖標形式更符合功能模塊的入口,甚至很多產品的列表流去掉圖標,也是很不錯的選擇!

3)面性圖標更容易營造氛圍

APP中圖標的類型那么多,到底該怎么準確運用?

很多產品在節日或活動中,常常改變面性圖標來營造氣氛,原因是面性的圖標有很強的視覺表現力。右圖的面性圖標不建議在平常狀態下運用,因為圖標的意義還是要具有功能的外在表現,要具有功能的識別性。

2. 面性圖標與異形圖標的分析運用

APP中圖標的類型那么多,到底該怎么準確運用?

面性圖標的第一視覺是一個色塊,異形圖標第一視覺是個形狀,所以面性圖標視覺表現力強,異形圖標識別效率高,通過二者的這一特征,淘寶和美團外賣的圖標做了這樣的設計。

APP中圖標的類型那么多,到底該怎么準確運用?

淘寶首頁的面性圖標,在圖標上面加了文字注釋,即有了視覺表現,又提高了識別性,同樣的美團外賣也是同樣的表現形式。而且,不難發現,第一排的面性圖標都是用戶的高頻使用的業務板塊,視覺上強引導為用戶優先做出選擇,這就是一種高級的設計手法!

上面說了面性圖標不適合在頁面中大量出現,那么哪種類型的圖標適合呢?看下支付寶頁面:

APP中圖標的類型那么多,到底該怎么準確運用?

右圖支付寶“更多”頁面,整體看起來亂亂的,層級區分不突出,有待優化。但這不是重點,重點看圖標,如果“更多”頁面使用面性圖標,那么用戶在找某個功能時就會有意識的去看文字。因為第一視覺都是一個個同樣的色塊,沒有起到很好的識別作用,用戶視覺會有意的避開色塊,然后去看文字,但是有著較強的視覺表現的色塊,一次次拉扯你的視線,這樣的感受雖然很微妙,但是體驗上也是極大的損失!

不同的特征圖標會影響其它元素的調整:

APP中圖標的類型那么多,到底該怎么準確運用?

前不久微信7.0的升級,圖標有了很大的變化,隨之頁面中的分割線也由之前的對齊圖標,改為了對齊文字。

APP中圖標的類型那么多,到底該怎么準確運用?

看上圖,如果把改版前的頁面,分割線由對齊圖標改為對齊文字,右圖對齊到字的頁面,看上去整個畫面向左傾斜。可能這么微妙的變化對于很多用戶并沒有什么感知,但也有一大批用戶,會覺得有問題,但他們也不知道問題出在哪里,我們作為UI設計師,一定要練就這樣的視覺感,一眼就知道問題所在!(相信認真看文章的你是可以的)

當改為線性圖標后,分割線如果對齊圖標,因為都是細線看上去就會稍顯層次過多,線性圖標也就不能更好的表現出應有的輕盈與透氣。線性圖標沒有過重的視覺表現,頁面也就降低甚至不存在畫面左傾斜的感受。

3. 用圖標區別視覺層級、業務板塊

APP中圖標的類型那么多,到底該怎么準確運用?

同樣的個人中心,鏈家APP視覺表現要高于得到APP很多,左圖鏈家的圖標有主有次,有視覺層級,強化用戶常用的或者產品主推的業務,為用戶做選擇。鏈家“其他服務”的線性圖標一般強調功能性的圖標,通常不用于主要流量的入口。

得到APP不同的板塊圖標樣式一樣,不能有效的區分主次,沒有為用戶做選擇,用戶面對數量多,同樣類型的圖標很難形成記憶。

豎線色塊的合理運用:

APP中圖標的類型那么多,到底該怎么準確運用?

這個頁面是不建議有豎線色塊這樣的元素的,這個要重點說一下為什么。首頁要知道,標題旁邊加豎線色塊為了牽引視覺,這個頁面是不用牽引視覺的,因為標題數量太少,這個頁面直接把標題文字加大列出來就很好。

類似這種小色塊是比較適合頁面流,有較多數量的標題板塊頁面,當我們滑動頁面,或者快速滑動頁面,小色塊會很好的牽引用戶的視覺,找到用戶關注的標題板塊。

不同的功能板塊用圖標類別區分:

APP中圖標的類型那么多,到底該怎么準確運用?

上面微信頁面,自己的服務跟第三方服務,業務都是服務,所以圖標類型一樣。安居客不同的功能板塊用不同類型的圖標表現,即有了視覺層次,又能讓用戶快速對功能模塊建立良好的認知!而且標題沒加豎線色塊,層級處理的也相當到位!

4. 圖標用色原則

APP中圖標的類型那么多,到底該怎么準確運用?

上圖的圖標用色能夠看出,都運用了四色系原則。一般多色的圖標表現形式,保證四個色系是比較合理的,紅、黃、藍、綠四個色系也能夠映射大多數業務的屬性。例如上圖面性圖標的“果蔬”運用了綠色,給人一種新鮮健康的感受,“鮮花”運用紅色系體現鮮花原本的特征,以及人對“鮮花”顏色通常的認知。

當然四色系原則也不是絕對的,只要視覺上舒適,業務上符合,是可以突破四色系的,一般情況下四色系能夠保證圖標用色的合理性和的。

純黑色的線性圖標:

我常常能聽到很多人有這樣的認識,自然界不存在純黑色的東西,所以設計中不應該出現純黑色,顯然這種理解是把美術知識強加給設計,這是行不通的。

其實純黑色用好了很高級有逼格,用不好確實死黑死黑的很難接受。

APP中圖標的類型那么多,到底該怎么準確運用?

看下微信、汽車之家、寺庫奢侈品等產品,都運用了純黑色的圖標,而且看起來都很不錯。

黑色的象征與寓意?

——黑色象征著高貴、穩重、科技

黑色是一個很強大的色彩。它可以很莊重、高雅,而且可以讓其它顏色(亮色)突顯出來。在只使用黑色而不用其它顏色的時候,會有一種沉重的感覺。

黑色可以流露出高雅、剛毅、信心、神秘、權力和力量。可以想到一些黑色的正面印象:某些精美的東西可以被描述為黑色領帶,或者一個高手(不只是在武術方面) 可以被說成黑帶。

——來自百度百科

從上面的解釋不難理解,汽車之家為什么運用了純黑色圖標,因為汽車之家用戶男性居多,又是關于車的業務,所以完全迎合產品的業務屬性和目標人群。

再者就是奢侈品的產品,常常用純黑色,能夠很好的傳遞神秘、高貴、價值的感受。

微信為什么運用了純黑色Tab圖標?

——因為更適合,微信的品牌色為綠色,頁面中的占比少之又少,大量的是灰白顏色,所以要讓頁面有所表現,純黑色無疑在視覺上最舒適。

為什么支付寶的Tab導航不是純黑色的圖標?

——因為頁面中大量的色彩元素,所以弱化該弱化的,不然視覺上所有的元素都在向你招手,“來了,老妹!”

5. 總結

1)面性圖標

特點:可有效強調頁面視覺重心,視覺表現力強。

2)異形圖標

特點:識別性較強,功能引導性較強,區分業務模塊和視覺層級。

3)線性圖標

特點:輕盈有引導性,強調功能性,視覺力度較弱,不干擾重要內容。

最后

圖標的表現形式有很多種,以上所探討的是對圖標運用的一種思考方式。所以,都不是絕對的說法,無論哪種類型的圖標,只要讓產品有一個好的表現形式都是好的。

 

作者:吳星辰,微信公眾號:互聯網設計幫

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

題圖來自Unspalsh, 基于CC0協議

給作者打賞,鼓勵TA抓緊創作!
評論
歡迎留言討論~!
  1. 倒數圖丟失了。作者寫得思路非常好。

    回復
黑龙江11选5冷热号