旗下產業: A產業/?A實習/?A計劃
沈陽區咨詢熱線:024-31048731
首頁 > 今日必讀 > UI高手的圖片不只好看,還有四個特殊作用
UI高手的圖片不只好看,還有四個特殊作用
時間:2018-01-25來源:www.aaa-cg.com.cn點擊量:
時間:2018-01-25點擊量:

「界面中存在的每一個元素,都是有意義的。」這是我進行產品設計時的一貫主張。

小到一個標點符號、一根分割線,大到一個圖標、一張圖片、一個字段,都要有其存在的理由。

那么在產品設計中出鏡率相當之高的圖標,有哪些真真切切存在的價值呢?

下面的幾點總結,是我在思考產品的視覺層面時關于圖標的幾個考察點:

  • 裝飾
  • 表意
  • 趣味
  • 品宣

一. 裝飾

裝飾,也可以稱作修飾,是指通過圖標對頁面進行潤色,使頁面看上去更加飽滿。同時,通過圖標增加頁面的層次感,使頁面各部分內容得以區分。

圖標的裝飾作用在我看來是圖標的基礎作用,絕大部分圖標都能起到裝飾的作用。

我們經常會聽到一些描述視覺效果的形容詞:「節奏感」、「層次感」、「呼吸感」等等。

要使一個頁面有節奏感、層次感,除了可以通過「留白」、「分割線」、「分割塊」、「對比」等手法,圖標也是一個常用的手段。

下面看幾個例子:

△ 知乎網頁版

上圖是知乎網頁版的側邊欄,灰色的圖標,既起到了裝飾的作用,又不會搶奪用戶的注意力,使得用戶的注意力可以聚焦在閱讀內容本身。

△ 東興198

上圖是東興198的交易首界面,通過圖標的「有無」、「強弱」,整個頁面被分為了三個部分。

頂部的「買、賣、撤、持、查」是股票交易中最常用的操作,所以用了文字性圖標。既起到了裝飾作用,且表意明確、直接,這也是很多股票類APP會用到的圖標風格,視覺上也能第一時間引起用戶的注意。

其次使用頻率相對較低的功能操作「新股申購、資管產品、港股通、國債逆回購」用了四種顏色填充、體量感較小的方塊狀圖標。

而最底部的列表項功能則未使用圖標,使得與上面的其他功能明顯區分開來。

整個頁面通過圖標與布局的變換,松弛有度,層次感強。用戶單純通過視覺引導就能很好的對各部分功能做出區分。

「凡事有度,過猶不及」

雖然圖標的裝飾作用可以讓頁面有節奏感和層次感,但是切忌過度使用。

比如頁面中已經使用留白和分割線等營造出了整個頁面的層次感,那么是否需要使用圖標進行裝飾就當兩說了。

如果使用圖標進行裝飾,如何使圖標和裝飾對象(通常是文字內容)之間達到最佳平衡,如何在起到裝飾作用的同時不會干擾用戶,是在進行圖標設計時要認真考量的地方。

二. 表意

「表意」,在我看來是圖標的第二個功能,在「裝飾」的基礎上有所升華。直白來說,圖標的表意體現在對于功能的解釋上。

互聯網經過這幾年的快速發展,用戶對于一些圖標形成了一些約定俗成的認知。我們在進行產品設計時要做到心中有數,使用的時候切忌打破常規。

下面是幾個常用的圖標:

△ 常用的圖標

對于這些在用戶心智中形成固有模式的圖標,我們使用的時候可以在此基礎上做變形、創新,但如果要打破用戶的習慣認知,一定要謹慎。

下面舉幾個我個人認為在表意性上做的比較好的例子:

△ QQ音樂

上圖是QQ音樂的下載icon,將「下載」和「金錢」相結合,一眼看上去就知道是「付費下載」,表意非常明確。


 

△ XMind Cloud

上圖是xmind手機版的編輯頁面以及底部的功能圖標。作為一款手機版的腦圖軟件,各種功能并不如社交類、電商類軟件的功能常見,所以如何進行功能圖標的設計就比較考驗人了,而且必須表意明確。我初次使用xmind手機APP的時候,看到這些圖標就很喜歡,因為它們表意非常直接明確,而且圖標并不復雜,簡潔、明晰結合的很好。

試想一下,如果把上圖中的圖標換成文字,底部的工具欄就會顯得非常擁擠,并且文字描述并不一定比圖標來的準確。

三. 趣味

趣味,也可以稱作愉悅,能帶給人愉悅感受的圖標可以稱得上很好的圖標了。

如果愉悅的同時有很好的表意性,無疑是一個極棒的圖標了。但話說回來,讓人困惑不解的圖標通常情況下也是不能帶給人愉悅感的。

下面看個例子,同樣是QQ家族:

 

 

△ QQ

上面三張圖是QQ底部的三個標簽在選中和未選中狀態下的表現,可以說非常可愛了。

注意消息icon和聯系人icon,它們的眼睛,可是會動的喲,跟著你的選擇而動,很好玩。雖然動態icon沒有眼睛,但是圖標的形態,是有傾向性的,當沒有被選中的時候,整個圖標在形態上是傾向被選中的圖標的,這就很好玩了。


 

四. 品宣

品宣,也叫品牌宣傳。

互聯網發展這么些年,市面上的產品真的太多了,同質化也相當嚴重,做的好的產品無不想著增加自家產品的曝光,增加用戶對產品的忠誠度。品牌塑造,品牌調性,品牌宣傳,品牌的價值越來越被各家企業所看重。作為一款產品中出鏡率相當高的圖標,也成了品宣的一部分。

這部分可以從以下兩個方面來看:

  • 將圖標和產品logo結合,增加產品logo的曝光率。
  • 通過圖標調性傳達產品調性,在用戶心智中塑造產品獨有的特點。

下面來看幾個例子:

△ 餓了么

△ 火辣健身

△ 支付寶

△ 淘寶

上圖中幾款APP直接將產品的logo用做了底部標簽的圖標。

△ 餓了么

△ 美團外賣

 

 

?2007-2019/北京漫動者教育科技有限公司版權所有
備案號:京ICP備12034770號

沈陽漫動者計算機培訓學校 備案號:遼ICP備14015306號-1郵箱:bjaaa@aaaedu.cc

芭比直播app_芭比barbie官网_芭比直播app官方下载地址ios