圖標是否就是我們認為的這麼重要?

不知從何時起,網頁設計流行起了圖標,即象形化某個功能,以圖形方式表達出來,如下:

知乎的輸入框工具欄,是沒有文字標註的,用圖標確實可以讓用戶一目了然的清楚它所代表的功能是什麼,即使沒看懂,滑鼠懸停上去後也會有提示文字。這樣的圖標,就是好圖標。

再比如這個:

以上的每句話左邊都有個圖標,如果沒有文字標註,用圖標還可以理解,可是在已經有文字標註的情況下,為什麼還要添加圖標?
還有很多地方,圖標與文字的搭配已經到了走火入魔的地步了,一些比較抽象的概念,用文字兩個字就足以說明了,可是還是非要在文字旁邊設計個圖標,而那個圖標單獨看的話根本就是不知所云,絲毫讓人聯想不到功能。

誰能在2秒內說出這個圖標的含義?
恐怕沒有人能夠,事實上,它就是上圖「邀請我回答的問題」左邊的圖標。
瞧,你都看過文字解釋了已經沒記住它,那麼它還有存在的必要嗎?


圖標的使用自從 Macintosh 1.0,甚至在更早的 Xerox 圖形界面開始就有了。

圖標的好處:

  • 全球通用,Windows,iOS, etc., 中文版和英文版甚至各種語言版本,在不打開菜單之前,基本上都長一樣。
  • 節約空間,如果在一個圖標能夠表述清楚含義的時候,比如用一個叉就可以不用寫「關閉」。
  • 快速定位,圖標可以用它獨特的形狀或者顏色讓人快速定位到一個功能,豌豆莢2.0左側的導航在「音樂/應用/視頻」分類加了簡單的小圖標之後,用戶的對應用管理功能的訪問量增加了約30%
  • 上下文的定位,比如小飛機的圖標單獨放出來不確定是什麼,但是在和收件箱在一起它就可以認為是發件箱了。所以原問題裡面單拿出來一個圖標不知道是什麼含義,我並不認為是錯的。

圖標不能解決的問題:

  • 不明確的圖標還不如文字,這一點從 Panic 關於清除列表的「Clear」圖標的設計一文就能看到。http://www.panic.com/blog/2010/02/clear/ 他們設計了種種圖標,實際上最後還是用了文字。
  • 圖標不能太「統一」,不知道是從什麼時候開始,很多國內的公司為了視覺的一致性,用了全是圓形,或者全是細線的圖標,比如QQ手機版,這其實對於可用性是有損害的,因為無法快速從形狀或者色彩定位到功能,就失去了圖標的意義。

如果從這樣的考慮,原問題提到的對知乎右側圖標的批評,我認為主要有以下的問題:

  • 風格太一致了,失去了快速定位的用處
  • 上下文定位的含義不明顯。

如果是我小改動一下的話:
Before

After: ( 改動的圖標來自 Glyphish: http://www.glyphish.com )

肯定還有更好的解決方案,我做出改動的主要考慮是:

  1. 每個圖標的形狀區分度更明顯(方,星,圓 vs 方x4 ),
  2. 收藏和關注有了更明顯的區分(收藏表示質量好,關注表示先看看)

但是修改的話還需要考慮其它地方的統一,比如添加關注和添加收藏時,用這樣的圖標是否還能夠保證上下文和識別度,還是要繼續考慮的了。


首先我很同意題主的觀點,很多地方對圖標的使用已經走火入魔了。

但是圖標依然重要

因為圖標的功能不僅僅只是「在沒有文字表達的時候依然讓用戶一眼看清含義」,除此之外還有以下一些功能:

1. 增加識別和認知的冗餘度,比如圖標的顏色、形狀可以明顯區分不同項,我教我老爸電腦的時候可以明確地告訴他點那個紅色的大叉,而不是說點那個「以後不再顯示」的文字。其他時候圖標也能以另一個緯度加快我們對界面元素的學習過程和識別速度

2. 突出重點、增加界面的韻律,聽起來很玄,但是在一些複雜界面里用圖標破開一堆對齊的視覺參考線有時候是很有效的。

3. 強化品牌形象,比如騰訊的很多網頁,哪怕 Banner 上也會放不少圖標,雖然你會覺得俗,但是看一眼他們家標誌性的糖果色高質感圖標你就知道你上的是騰訊而不是谷歌

4. 好看,不解釋。。。。

5. 養活一幫 GUI 設計師,繼續不解釋。。。

其實圖標濫用的地方很多,但是題主的這個例子舉得不好,因為圖標在這裡完全起到效果了:

那個「邀請我回答的問題」圖標你哪怕給我 20 秒我也沒法直接看出含義,但他們的作用遠不在於此,上面 4 個圖標做了輕量化的處理,與下方三個圖標有著明顯的區別。如果去掉了圖標哪怕還是保留細線那上下依然區分不開,視覺上會有些混亂不知道這兩塊到底是不是一起,或者到底為啥不在一起:

再放到完整的界面來看:

直接粗暴地去掉圖標之後右側會很空,而側欄目前的消息承載量又比較大,直接減小側欄寬度不太可能。那為了彌補這邊的空隙、增加右上方那些列表和其他文字的區別,需要付出的額外代價相信會遠遠超過增加那幾個小圖標的。

當然,沒有參與過知乎界面的設計,以上純屬無責任個人推測~


我同意三樓的說法,圖標還有一個重要功能就是快速定位,假如只用文字來說明,你可能每次去點擊都要看一下文字,避免點錯,但是如果有圖標,特別是顏色和形狀鮮明的圖標,這樣可能你掃一眼就直接定位到位置了。你可以模擬一下,把圖片輕度模糊,文字不清楚了,但是根據圖標的形狀和顏色依然可以判斷出來是哪個位置。


剛才有個同學打了半天稿子程序強退了。她找不到自動備份的在哪裡,好憂傷。然後我就看了下:

也許在我點明的前提下尋找不難,但當時在屏幕當中這一塊真的很難找,她是瞪著眼睛也找不到:

這裡雖然有圖標,但依然不足夠醒目以造成一下就能看到的效果。應該用不同顏色的色塊(比如淺黃色)提醒這裡有未處理的信息。不過,有些時候到處都是強調信息的話會顯得頁面花哨,在這時候選擇圖標是不刺眼又足夠醒目的好辦法。要說圖標的用途,應該就是在醒目的同時保持視覺上的基本一致。


貌似半年前提過類似問題,連選擇的例子都一樣,提問後我想了一下這個問題:

除了快速定位之外,圖形是一種有趣的東西。

人會自然而然地去注意一些有趣的東西,譬如當本題目的關注名單列表有一個美女頭像,我鷹一般的眼睛一定會注意到。

同時,人希望看一些輕鬆的東西。

在正式閱讀之前,人們總會潛意識地判斷 「一些更有趣的東西」,譬如人們不喜歡看大段落的文字、表單、即使他們還不知道這些文字表單裡面會是什麼東西。

相比而言,圖形暗示「豐富」、「有趣」的東西。如果沒有這些圖形,文字顯得單調、乏味。


事實上,圖標作為信息傳達的工具比文字更受歡迎,通常能用圖標有效傳達信息的地方,人們更喜歡用圖標表示,比如瀏覽器的這些按鈕,不用說也知道是返回,刷新,撤回及收藏

而對於僅用圖標難以準確傳達全部信息的地方,則不得已添加上文字說明,但是,此處的文字主要用作信息而已,無法替代圖形產生的視覺路徑,全部用文字按鈕會使整個頁面顯得非常緊張.而當文字的意義不再是解釋說明信息的時候,文字則演變成了一個視覺符號,就像返回知乎主頁的按鈕,對我而言就完全看作是一個符號,而沒有"知乎"信息的含義


圖標重不重要是看其用途。簡單碼些看法,歡迎交流。
暫時分為以下幾種,可能還有很多。
1.事物圖形化,結合視知覺的方式進行信息的傳遞和認知。
此類圖標是在同一認知文化下的視覺符號,代表某種事物,承載信息。如國旗的圖形、國徽;例如電梯的上下、關閉按鈕圖形;以及電源開關按鈕圖形等。此類圖形有很多,通過簡單的圖形符合,傳遞信息,而且可以跨種族、國際、甚至宗教。
另外圖形化在還可以根據文化差異,改變其表現方式,不同民俗、宗教,國家、甚至地域也有不同的符號文化,例如圖騰、歷史雕刻、吉祥符。而此類從屬於文化,跨文化的信息符號,其目的為傳遞信息,象徵等等。那麼其重要性不言而喻。
且說樓主的例子:
如下面的:「B」「I」「U」以及圖形等都是在統一文化認知範圍內信息傳遞。即使不是重要的但也是必要的。

2:裝飾、修飾,視覺區分等
裝飾性的圖形符號有很多,傳統紋樣,四方連續、二方連續等 。例如你家裡門把手的刻花,衣服上的裝飾圖樣,此類圖標圖形看個人喜好,其重要不重要與個人美觀感受不同而不同。

3:信息圖形化,停頓,強調,突出。
圖形在日常生活中很常見,簡單舉例冒號:逗號,引號「」。視覺設計師在設計時會對很多信息進行整理,在設計,例如逗號變換成空格同樣可以表示斷句,引號變化背景色塊也能強調,大段文本中增加圖形色彩就能做到強調。

樓主下面的這個圖形,其中「1」包含是具有強調的含義。每個list前面的list-style-image是結合信息傳達、裝飾、視覺區分三種目的的結合。分析下
1:此處已經具有的文字描述,切圖形化信息傳遞不明確,其信息傳達的目的就很弱。
2:做視覺區分,又因為表現形式雷同而無法形成有效區分。
3:視覺強調,全都都是圖形化,其強調也就沒有意義。

那麼這裡就簡單看為裝飾,那麼裝飾可以使用簡單的list-style,或者不要裝飾也可以。所以重要不重要也簡單明了了。


滾來滾去……~(~o ̄▽ ̄)~o 。。。滾來滾去……o~(_△_o~) ~。
======
其實作為一隻非專業小PSer,是完全不能理解「只是為了版式設計更好看,就沒必要使用圖標」的。
「版式設計很重要很重要」。起碼對我來說,根深蒂固啦。
為了版式設計更好看,多鼓搗上幾個小時也在所不惜的。

而過多圖標會導致花俏和累贅等問題,一個好美工他自己會衡量清楚。
其實好的版式設計也是排除了過於花俏累贅的設計的。
要求簡潔好不累贅的界面並不意味著圖標不重要不要用了。

【一般情況下】:沒有一點圖標,只有文字,[或是]沒有文字,只有圖標,都是很噁心的……
所以需要圖標與文字的結合,
單單說圖標很重要,文字不重要,當然是不對的,
題目若是對圖標的意思是抱著不友好(從單獨拿出草稿箱圖標讓我們辨認的例子來看),我認為題目是對「圖標很重要」斷章取義了。
【一般】:都要與文字結合,圖標才會顯示它的可愛。


你的問題問在圖標上"但是根源在版式上。之所以記不住圖標的意思是源於圖標與文字的貼合度不高,應該是設計師過度模仿其他產品的後果。這個都是小問題"不作討論。
你所說的圖標的重要性"我可以明確的說它很重要"但是它如果是個體存在的話"它的重要性為零。所以圖標的存在是為了整個版式的可觀度。
一個比較容易的理解:國畫的構成"有畫"有字"有印。為什麼國畫看起來這麼舒服"這麼有格調。這就是三者結合的重要性。
不要孤立的看圖標"也不要孤立的看文字"你會發現什麼都豁然開朗。圖文結合就是最好的記憶方式。


很簡單,一些圖標真的只是為了看著舒服一點,就像你舉的例子


先來一句高深莫測的話吧
圖標不是一個圖形而是一個符號
一個符號必然同時包含「圖形」和"含義",而「圖形」和"含義"共同實現的目的就是識別和表義。符號可以說是文字尤其是象形文字的雛形,所以說文字來源於符號(圖形),文字也是一種符號(圖形)。大多數地區的文字發展到今天已經非常成熟,不僅表意豐富,對習慣性使用者來說更是具有圖形無可比擬的可識別性。從這個角度說,無論多麼通用且易區分的圖標也絕對比不上文字,圖標也就真的可有可無了。
但是,圖標據說還有別的作用:
1.接上文,雖說文字表義更豐富更準確,但很多研究表明大腦對圖形更敏感。
2.無論桌面端還是移動端,啟動圖標和應用內圖標的作用是不盡相同的,啟動圖標更側重識別和吸引,而應用內圖標更側重識別和引導,以幫助用戶更好的完成任務。這就出現了兩個詞「吸引」和「引導」,如果說「吸引」是一種膚淺的視覺誘惑,是可有可無的表面文章;「引導」不能說不是一門值得研究的深刻的學問,無論分割和定位空間布局,強調內容主次關係,還是表達時間順序和任務狀態,使用圖標或許更容易且有效。
此外還有:為了節約空間、為了全人類的通用、為了傳遞企業文化、為了趣味、、、看起來哪一項是挺重要的。
當然,單純的為了美而存在的圖標確實存在,但誰又能說美不是一種作用或者不重要呢。


就是這麼重要,如果轉換成現實領域,你在生活中見到的每張臉其實都是圖標。


上面的大牛們說了很多,這裡只說我自己的一點理解
1.圖標和文字都可以看成一種符號,是可以傳遞信息的。但是在複雜的上下文環境下,他們傳遞的信息都具有一定的歧義性,在考慮空間和美觀的情況下,將兩者結合起來一起表現,是可以幫助觀察者快速識別和理解的。
2.圖標是更加接近我們人腦的記憶「格式」的。雖然我沒有查閱相關的專業研究文獻。但是從一些記憶和學習方法的書和相關文章中。可以看出人腦對圖片和運動的圖片——視頻,是有較高的敏感性。我的結論是,人腦的主要信息存貯「格式」就是我們生活的世界的影像,就像是存貯了一部部的電影。如果使用其他更為抽象的信息文件(例如文字),是需要大量學習和訓練的。在使用過程中也有一些局限性。但圖標可以看出是抽象的圖片,靜態的視頻。是更加接近人腦信息的存貯「格式」的。


識別性高"能代替文字傳達信息的圖標就是好圖標


圖形和文字在人腦中的投射模式是不一樣的,一種是感性,一種是理性。

在界面設計時,雖然純理性的文字也可以完成界面的基本功能需求,甚至通過優秀的排版技巧也可以做到「好看」,但感性的圖形引導模式卻是用純文字難以實現的,所以圖標的存在是非常重要的,但有沒有必要,就要看具體不同的應用了。

文中所舉例,的確可以通過合理排版來避免使用圖標,但目前用圖標美化的方式,顯然大大降低了界面設計的難度。


對於我來說,圖標確實很重要。
就拿AppStore上面的應用來說,圖標看不順眼的評價再怎麼好,我也沒有購買的慾望。
本人平時喜歡關注限免的apps,第一就是看圖標,圖標很醜,完全沒有下載的慾望...即使它是免費。


好的圖標之於文字,就像語文之於說話。


LZ提的很贊同。
Windows Phone 8的大字體無圖標設計、還有微軟新版主頁就足以說明此問題。
如果只是為了版式設計更好看,而對文字沒有更多幫助,確實沒必要使用圖標。


簡單的說,好的設計的圖標很重要,一個失敗的圖標還不如沒有。


如果有更多可供選擇的中文字體,而他們的商業授權也不是那麼貴,瀏覽器對他們的渲染也表現得更好時,通過控制好字型大小、顏色、間距,的確可以不用圖標解決問題


推薦閱讀:

繪製 iOS 7 風格的 glyph 細線圖標有何技巧?
如何製作出 Webshocker 那樣風格獨特的寫實應用圖標?
為什麼災害預警會以顏色表示等級?
怎樣直觀地告訴用戶「該圖標需要長按才能出現效果」?

TAG:圖標設計 | 用戶界面設計 |