首先捫心自問下是否清楚在設計中什么時候用圖標? 什么時候用文字?什么時候用圖標+文字?你是否能清晰的分辨他們分別在什么場景下使用呢?
前言
之所以要寫一篇這樣的文章是因為最近有很多的設計小伙伴反復在爭論一個觀點 圖標配上文字是否有必要?
舉個栗子:
如下圖一位設計同學覺得右上角紅圈里面只需要圖標就好了不需要文字的存在,并且節省屏幕空間,可是公司的開發和測試同學一臉懵,這個操作覺得不夠清晰,識別性較差嚴重影響用戶體驗,當前視覺層面和功能層面產生了強烈的撞擊。帶著這個問題我們從圖標的定義,圖標變遷史,圖標的優劣勢來講述今天的文章,相信文末你會有自己的答案。
圖標定義
廣義
圖標是指代意義的圖形符號,具有高度濃縮并快捷傳達信息、便于記憶的特性。應用范圍很廣,軟硬件網頁社交場所公共場合無所不在,例如:男女廁所標志和各種交通標志等。
狹義
應用于計算機軟件方面,包括:程序標識、數據標識、命令選擇、模式信號或切換開關、狀態指示等。
圖標變遷
圖標是具有指代意義的具有標識性質的圖形,它不僅是一種圖形,更是一種標識,它具有高度濃縮并快捷傳達信息、便于記憶的特性。它不僅歷史久遠,從上古時代的圖騰,到20、21世紀具有更多含義和功能的各種圖標,而且應用范圍極為廣泛,可以說它無所不在。一個國家的圖標就是國旗;一件商品的圖標是注冊商標;軍隊的圖標是軍旗;學校的圖標是?;?。
我們通過圖標看到的不僅僅是圖標本身,而是它所代表的內在含義。
而在計算設備上,圖標隨著時代的發展而迅速流行。從最早的計算機GUI(施樂之星Xerox Star)再到之后的喬布斯Apple lisa,Windows1.0,Amiga Workbench,從最初的黑白到隨著顯示技術在分辨率和色域上的提高出現的彩色圖標,設計師漸漸的有了更大的發揮空間。
圖標的優勢
1.節省屏幕空間
圖標可以替代文字,相對于長文字來說只需要占用一個圖標的位置如:worktile移動端新建聊天操作四個文字如果用圖標來代替的話只需要占用一個文字的文字,并且把干巴巴的文字變為圖形符號,用戶對于圖形的識別速度對于文字來說更快。
2.沒有地域語言限制,針對國際通用圖標。
國際上通用的圖標對于每個人來說都能很快的識別處理,比如同樣一個“放大鏡”圖標經過長期許多不同的網站、應用程序和操作系統的用戶培養,讓放大鏡圖標作為搜索的操作代表符號變得越來越流行,不論任何國家任務種族,用戶很清楚這是搜索操作,相對于文字來說圖形識別大大減少的用戶識別的時間,用戶也可以花更多的時間去做他真正要去做的事情,從而提升工作效率
3.圖標可以提供視覺引導,迅速識別減少用戶思考時間
人腦處理圖形圖像的速度是處理文字的60萬倍,人會記住80%看過的東西,20%閱讀過的東西,和10%聽到過的東西,所以在我們發朋友圈或者寫文章的時候避免干巴巴的文字描述,勁量配上相關圖片,提升整體的圖版率,俗話說看圖說話不是沒有道理。
4.提升整體視覺體驗
好的一套圖標能夠從圖標的獨特性、象征性、記憶性、應用性、組合性、變化性上打動人心,激發人們的點擊欲望。這樣才能使圖標設計達到上乘水準,從而提升整體的視覺水準
圖標不適用場景
1.表達含義復雜,難以揣測
圖標的目的就是快速識別并引導用戶,用戶如果無法快速識別通常會下意識的回避掉無法識別的界面元素,這是人類的天性,反而logo的設計更加適合深層次的寓意。之前喬布斯做的一個實驗,他拿著蘋果設備到一個智障兒童福利院讓兒童們把玩,每個小朋友都認識那些圖標的含義,當時的寫實圖標都是來源于生活,對于來源于生活而設計的圖標對于孩子們來說識別效率更高花費的識別成本更低。
2.圖標存在多重含義
如果圖標不能言簡意賅的表達出寓意,并且存在爭議的請避免使用,如果非要使用請采用圖標+文字的形式。比如appstore側邊導航第一個你覺得是什么?收藏?標記?錯!他是探索,如果我不告訴你可能每個人猜的含義都不同。所以我們在設計圖標的時候要勁量去避免多重含義的圖標。
3.專業性過強很難作為通用圖標
圖標如果專業性過強,而沒有辦法簡化為一個很直觀通用符號時,二八原則我們只能考慮80%的人,而20%的人需要付出學習成本,,比如下面的這個圖標,如果用它來代表“研發”,我相信會有很大一部分人沒法識別代表什么意思。但是對于開發人員就是一個很通用的圖標,在這種情況下,只能是允許20%人員付出學習成本來解決這個問題,除非你配上文字。
小結
1.為了提升產品視覺體驗,圖標設計一定要極簡,如果使用圖標能夠百分百表達其含義時,請優先使用
2.針對國際上面通用的有大眾認知的如:搜索、wifi、設置、藍牙等圖標無需配上文字,除非做視覺引導為了保持一致而統一添加文字的列表
3.禁止使用多意圖標(不讓用戶思考,如果用戶不能在5s內很快識別出圖標的意思,那這個圖標的設計是失敗的)
4.針對專業性很強的并且局限于空間的采用文字形式,或者二八原則只要考慮80%的人員無識別壓力,而20%的人付出學習成本。
5.我們不討厭圖標加文字的形式,前提為圖標要足夠簡化表達其含義(如文章開始的案例,圖標簡化為加號并且加文字放到商品2做一個通欄操作就好了,這樣更加符合用戶操作的視線流,這樣做的還有釘釘的報銷審批界面)








其中,右側的參數調整又分為“格式”、“動畫效果”和“文稿”三個Tab。當選中左側導航中的幻燈片或舞臺中的某個元素時,對應的參數調整面板是不同的。


其次,編輯母版。母版有點類似于Sketch中的Symbol,改變了其中的某個元素,所有使用這個母版的幻燈片都會出現相應的改變。不同的是,母版的對象是整張幻燈片,而不是其中的某幾個元素組合,也就是說,一張幻燈片只能選擇一種母版。如果你的所有幻燈片都需要加上logo或者水印,使用母版就很方便了。母版的編輯以及調用在右側的“格式”Tab中(選中幻燈片的情況下)。
最后,將你需要用到的圖片元素,按幻燈片順序整理好命名,以便于在后續調整構件順序時使用(命名混亂會對調整構件順序造成很大的干擾,在稍后構件順序的時候會講到)。

這里重點要介紹的是神奇移動。它的原理是為兩張幻燈片中的同一個元素添加補間動畫,通過這個元素在兩張幻燈片中的位置、大小、形狀、顏色、旋轉角度、透明度這些屬性差異來實現過渡動畫。當然,還可以選擇抹入抹出來使其過渡更自然。
動作,主要是移動、縮放、透明度、旋轉這些基本的屬性變化。大部分的動效都是通過這些基本屬性的變化組合來產生的。
消失,顧名思義與出現相反,是一個從有到無的過程。
其中,打字效果和跟蹤這兩個動效只針對文本才會有效果。

當然,我們還可以設置延遲時間,讓構件交替動作。

前面我們提到過,要為圖片元素整理命名,其目的就是在構件順序列表中便于查看。如果我們沒有整理命名,那一張幻燈片中的構件順序列表可能就是如下圖這樣:
圖中在第2張幻燈片與第3張幻燈片之間選擇“無過渡效果”,且開始過渡設置為“自動”,延遲“0秒”,那么第2張幻燈片播放完,就自動無縫進入第3張幻燈片了。
添加完成的注釋我們可以在演講者模式中看到。
演講者模式中,我們還可以看到當前幻燈片、下一張幻燈片以及還有多少個構件動效沒有播放。在頂部,靠左的是當前時間,靠右的則是定時器,可以設置成計時器或者倒計時來幫助我們控制演講時間。
最后,如果你不在電腦邊上而又不想別人幫你控制幻燈片播放時,可以利用iPhone來遙控播放。打開iPhone上的Keynote,點擊右上角的遙控模式進入如下圖左側的界面,然后前往Mac端的Keynote,進入偏好設置,選擇遙控器,然后連接上你的iPhone(需要在同一WiFi下),iPhone上的界面就會提示你開始播放幻燈片。
這時,你的iPhone就變身為一個遙控器了,并且點擊右上角的菜單還有激光筆功能,便于你在演講過程中做臨時批注。
