觀察|今天你瞭解icon設計嗎?它就在我們身邊

比起文字,圖片更能引起人們的注意。

因此,icon的首要功能就是代替文字,用圖形化的語言來傳達信息。

觀察|今天你瞭解icon設計嗎?它就在我們身邊

相信大家都在電視上看過這麼一則廣告:洗了一輩子頭髮,你洗過頭皮嗎?也是因為這個廣告,讓無硅油洗髮水的概念來到人們身邊。那麼,用了一輩子的智能手機,你又知道什麼叫icon嗎?今天我們就來聊聊關於icon的那些事兒。

何為icon

icon,中文譯為圖標。圖標又可拆分成圖案與標記。

早在遠古時期,人們就知道用圖案和標記來傳遞和記錄信息。如中國的“甲骨文”,古埃及的“象形文字”,都是原始人民模擬原始社會生活所描繪的圖案和標記。

又比如滄源巖畫中的《舞蹈牧放戰爭圖》,上半段描繪的是群舞場景,中間是氏族生活中的放牧場景,下半段是戰爭圖。這幅巖畫將氏族生活中所有重要的事件全部描繪在同一幅畫面中,也是原始人民用圖案來傳達和記錄信息的一大佐證——在文字還沒有產生的時候,我們的祖先就知道用圖案來傳遞和記錄信息了。

隨著科技的發展,智能手機

的使用率越來越高,人們每天都要通過智能手機來進行各種操作、獲得各種信息,因此信息的準確傳達與接收變得非常重要。

研究表明,大腦處理視覺內容的速度比處理文字的速度快6萬倍。比起文字,圖片更能引起人們的注意。因此,icon的首要功能就是代替文字,用圖形化的語言來傳達信息。

觀察|今天你瞭解icon設計嗎?它就在我們身邊

早在遠古時期,人們就知道用圖案和標記來傳遞和記錄信息。

相對於icon,可能人們更加熟悉的是logo。Logo同樣是一種圖形視覺語言,用圖形來傳達信息,那麼icon和logo有什麼不同之處呢?

我認為,icon重在展示功能,是功能識別圖標。比如:當你看到安全出口這個icon的時候,它主要想傳達的是前方是安全出口。而Logo是一種身份識別圖標,主要想傳達的是身份信息。比如:當你看見可口可樂的logo時,你就知道它是可口可樂公司生產的飲料,它主要傳達的就是可口可樂公司這個品牌身份。

在我們的日常生活中,icon的應用隨處可見。我們可以籠統地將其應用場景分為三大類:智能界面、產品的說明書及表面、交通指示類。智能界面就是指我們的智能手機界面以及網頁界面;產品表面及說明書中也有很多配合文字講解功能的icon;交通指示類的圖標包括:安全出口、方向指示、衛生間圖標等等。

想象一下,不管你去哪個國家旅行,哪怕你看不懂那個國家的文字,但是你也不會上錯廁所,因為一般的公共廁所都會貼有代表男女的icon,雖然語言不同,但是我們可以通過圖片進行交流。其實,icon的應用就在我們身邊,與每個人都息息相關,本文主要為大家介紹的是智能界面圖標,也就是icon在智能界面中的應用。

icon在智能界面中的應用

智能界面中的icon主要分為三大類:

第一種是“解釋說明型”圖標。顧名思義,這一類的圖標主要承載的就是解釋說明特定的功能,它不一定是可以操作的元素,有時僅僅只是靜態的圖標,起到對文字說明的輔助作用。一般這種圖標會配有一些簡單的小文本來增強其信息傳達的識別性和準確度。這種圖標一般都出現在界面的導航欄、標籤欄、以及首頁的核心功能區域(如圖一)。

觀察|今天你瞭解icon設計嗎?它就在我們身邊

圖一

第二種是“交互可操作型”圖標,這種圖標主要參與到用戶的交互過程裡。當用戶按下這種圖標之後,它給予回應,觸發相應的功能,在它的幫助下用戶完成一個交互過程,是此過程中不可或缺的組成部分。最典型的就是“點贊”的操作了(如圖二)。

觀察|今天你瞭解icon設計嗎?它就在我們身邊

圖二

第三種是裝飾性圖標。這種圖標不一定具有什麼功能性,不一定要解釋說明特定的內容,也不一定會觸發什麼程序,僅僅只是起著提高界面的整體美感和視覺效果的作用,可以給用戶帶來更好的體驗感(如圖三)。

觀察|今天你瞭解icon設計嗎?它就在我們身邊

圖三

設計風格總是在不斷演進的,icon的設計風格也一樣。不知道你有沒有發現,手機系統過一段時間就要更新一次,其實每次更新之後除了系統修復一些bug之外,icon的風格也會有所變化。

人們總是用已知的思維邏輯去認識未知,對待icon也一樣。

所以當用戶界面剛出現的時候,第一代的設計師採用的是擬物風格。擬物風格的精髓就是模擬現實物品,包括光影、細節、投影等等,模擬得越真實越有利於用戶的理解和操作。但是隨著icon的發展,擬物化風格也帶來了一些問題。因為用戶

關注的是信息本身,華麗的裝飾、真實的模擬,或許在設計前期受到用戶的青睞,但久而久之,過多的裝飾、紋理等會對用戶信息的讀取產生一種干擾。

2013年,蘋果推出了iOS7,掀起了擬物化向扁平化發展的風潮。

扁平化在擬物化的基礎上發展而來,它去掉了多餘的裝飾、紋理、漸變、投影等,只保留最顯著的信息特徵。提倡的是:“簡約”“抽象”“符號化”的特徵。相比於擬物化,扁平化風格可以使用戶更加快速、準確地接受到信息。但是扁平化的設計也有一些弊端,比如過於抽象簡約,令用戶沒有得到很好的情感體驗。這也表明Ui設計的趨勢再一步向“突出內容”的本質靠攏,即“認知簡約”。

觀察|今天你瞭解icon設計嗎?它就在我們身邊

消除原有的擬物化、變成扁平化成為了新的iOS7的主要風格體現。

icon設計發展至今,開始向“微扁平、輕擬物”的方向發展。“微扁平、輕擬物”的設計風格相較於擬物化風格更加簡約、信息更加突出,它相較於扁平化風格有了豐富的情感內容。所以,我們現在經常看到手機裡有一些增加了漸變、輕質感的icon。

未來的icon在向“動態icon”的方向發展,動態icon相較於靜態icon更加具有趣味性、互動性、情感性,越來越多的設計者開始熱衷於讓手機裡的icon動起來。

icon的設計道路從未到達高潮,一直在發展的路上。由於智能手機的發展、交互方式的不斷更新,以及人們不斷變化的需求和情感的需要,icon的設計風格也會一直隨之改變。但是“以人為本”,是icon設計不變的設計原則。

作者簡介

劉俊卿

北京交通大學視覺傳達專業碩士在讀,主要研究方向為UI設計,曾參與北京大學人工智能團隊“aiXcoder”的網頁界面設計,對UI設計尤其是icon設計具有大量豐富的經驗以及獨特的理解。

觀察|今天你瞭解icon設計嗎?它就在我們身邊

以上為內容精選,

完整版見雜誌2019年第9期~

觀察|今天你瞭解icon設計嗎?它就在我們身邊

即可網購。

觀察|今天你瞭解icon設計嗎?它就在我們身邊


分享到:


相關文章: