在UI 設計中圖標應用的示例分析

小編給大家分享一下在UI 設計中圖標應用的示例分析，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

在 UI  設計中，圖標不是孤立存在的。我們學習圖標的設計，不是為了畫一組套圖，然后上傳到設計平臺中分享或求贊，而是要在真實的項目中發(fā)揮作用。如果不了解圖標應用到項目中的知識點，那么真實的圖標設計水平就會在項目設計過程中被損耗。

一套應用中的圖標規(guī)格

圖標是一個應用不可或缺的組成元素，在應用的界面中隨處可見。也因為圖標的常見性，我們往往需要在一個應用中應用多套圖標，這和崇尚簡約的印象是有背離的。

很多新手，都以為我們只要設計一套大而全的圖標，在項目中對應提取即可。但有很多場景，如果只使用一種圖標類型，那么效果會非常差勁。比如，我們看看下面的淘寶設置頁，前后包含了  6 種以上的圖標。是太復雜了沒錯，但如果我們把圖標都替換成同一套呢?

可以看見，右側替換后的案例，效果非常的不理想。交互規(guī)則中說：如無必要，勿增實體，但對于圖標的使用來說，這就是必要。

應用內的圖標規(guī)格不同，可以用兩個屬性來劃分，大小和風格。

1. 圖標的尺寸

大小就是圖標的尺寸規(guī)格，有些界面的元素權重低，圖標的尺寸就小，有些權重高的則反之。比如在 Apple Music  的播放界面，播放快進等按鈕，作為頁面最重要的按鈕，尺寸非常大，其它可以點擊的圖標次之，而表示音量的兩個按鈕則最小。

確定圖標尺寸，是我們在項目中進行圖標設計的一件事。但尺寸的確定，不是我們憑空制定出來的，我們要先構建出實際的「場景」進行分析，即先完成了界面的高保真原型或交互原型。

下方是我自己做的原型演示，在構建了這樣的頁面以后，我會在原型中檢查，我總共用了多少種圖標的尺寸，它們分別會應用在哪些場景中，然后整理出來。如果出現(xiàn)了一些覺得沒有必要的，可以將它們進行調整合并成一種尺寸。

所以，在這個案例中，我整理出了 4 種圖標的尺寸：

• 48pt：分類、快速入口大圖標

• 32pt：底部 TabBar 圖標

• 24pt：常規(guī)工具圖標

• 16pt：小型提示圖標

定好了這 4 種規(guī)格，我們在后續(xù)的設計上才有明確的設計方向。再復習一遍，為什么我們需要先定尺寸再設計，而不是統(tǒng)一設計一套很大的圖標進行縮小。

因為圖標要盡可能滿足像素對齊的要求，通過縮小的圖標往往在細節(jié)上會發(fā)生錯位、模糊、丟失等問題。且在大畫布上設計圖標和一開始就在小畫布中設計，兩者在過程中得到的視覺反饋是完全不一樣的，先在大畫布畫完，再縮小到  16pt、12pt 的規(guī)格時往往會顯得太復雜，或描邊太粗。

2. 圖標的風格

圖標尺寸確認完以后，下面就是確認圖標的風格了，和尺寸一樣，我們要應用什么風格的圖標，是需要在已經(jīng)具備視覺雛形的頁面中對比確定的，而不能提前開始設計。

在我的設計流程中，通常會將圖標放在項目結束時再開始設計，原因就是圖標的視覺樣式風格是取決于所處位置和環(huán)境的，是「先有界面樣式，再有圖標風格」的。

在常規(guī)情況下，如果一個應用中有多套圖標，那么普通的中小尺寸圖標使用一般的線性或面性風格即可。而在分類、快速入口這些具備裝飾性、大尺寸的類型中，就應該使用一些更激進的設計風格。比如下圖是  58 同城客戶端應用圖標案例：

通常，一種風格會應用在一種「類別」的圖標中。上方案例屬于比較理想的狀態(tài)，一種類別的圖標對應一種尺寸，但是在一些更復雜的環(huán)境中，往往同一種尺寸下還會包括不同類別的圖標。

圖標的不同狀態(tài)

圖標在一個產品中，除了充當裝飾以外，往往也可以作為按鈕來使用。每個應用中都有大量的圖標可以進行點擊和交互，比如底部導航欄，頭部的消息圖標、發(fā)布圖標等等。

當一個圖標能被操作后，那么我們就要注意到它的狀態(tài)變化。從導航欄圖標舉例，常規(guī)的選中狀態(tài)是更換色彩，但也有越來越多的應用會在選中狀態(tài)采取不同的設計風格，通過更豐富的樣式表現(xiàn)來提升可看性。比如淘寶、QQ  的底部導航欄。

還有，一些包含在控件內的圖標，也會跟隨控件狀態(tài)的變更發(fā)生變更。例如在賬號輸入框中，如果選中了輸入框，那么圖標的色彩也得到改變。如果輸入框目前處于不可輸入狀態(tài)，那么圖標也會對應置灰。

合格的 UI 設計師會充分考慮到圖標所變換的各種狀態(tài)，并在提交給開發(fā)的過程中會進行詳細的說明、歸類。以及，充分運用 Sketch  等軟件中的組件功能，提升項目的效率和產出成果。

圖標的標注和切圖

在我們完成了界面和圖標的設計以后，要提交我們的設計給開發(fā)人員。其中，包含我們的標注和切圖。拋開其它設計元素不談，我們就講講圖標的切圖需要遵循哪些規(guī)范，它和字體都是在這個過程中最容易出錯的地方。

應用圖標的導出我們已經(jīng)在上一章提到過，所以下面還是以工具圖標的說明為主。

1. 圖標的邊界

我們要回到第二章工具圖標的規(guī)范中，當我們確定出圖標的尺寸時，不是要把圖形設計得正好撐滿這個尺寸，而是利用格線系統(tǒng)來定義它們的大小。

很多新人會在這個過程中產生疑惑，那么在標注的過程中，我們標注的到底是圖形到其它元素的距離，還是圖標外輪廓到別的圖形的距離。

其實，圖標的距離是根據(jù)外部輪廓進行計算的。雖然這個輪廓我們肉眼不可見，但它包含的內在規(guī)律可以幫助我們忽略一些不必要的小問題。

所以，要讓標注有效，就一定不要偷懶只把圖標置入畫布中，而沒有透明矩形背景。

2. 圖標的畫布

現(xiàn)在有很多幫助我們進行標注和切圖的協(xié)作工具，比如藍湖、Zeplin 等。我們只要將設計稿上傳，程序員可以自行獲取圖標對應的切圖。

在裁切一些特定元素時很好用，但通過線上頁面導出圖標的方法，是非常不牢靠的。我們說過，一個應用中可能出現(xiàn)多種規(guī)格的圖標，所以合理的圖標切圖，要根據(jù)不同的規(guī)格進行導出和整理(如下圖)，而不是讓程序員自己在線上工具中下載，這樣不僅操作起來困難，而且圖標間不同的狀態(tài)難以被輕易獲取。

所以，要在項目設計過程中，創(chuàng)建不同規(guī)格的畫布(Symbol)并將它們分類排列，不僅利于我們對以后圖標的調用，也方便在批量導出切圖到對應文件夾中。

3. 圖標的命名

涉及到切圖的導出，我們也就不得不提圖標命名的規(guī)范了，我之前寫過一篇關于命名相關的文章中有比較詳細的提到圖標命名的方法，大家可以擴展閱讀：《萬字干貨!可能是最全面的UI  設計師文件命名規(guī)范》。

下面我們簡單講講圖標的命名規(guī)則。有很多新手和剛入職場的 UI  設計師會不明就里的強調圖標一定要用英文命名，并且各種收集常見的英文命名詞匯，我首先要指出這種做法是錯誤的。

因為涉及到整個應用的圖標系統(tǒng)時，會出現(xiàn)大量寓意「抽象」的圖標。比如在我上方案例中，有一個啟動圖標的中文名是「中二」，那么這個詞應該如何翻譯?即使不受制于英文水平的發(fā)揮，但是你寫的英文不代表開發(fā)人員能看得懂，而大量抽象詞匯的堆積導致命名無法成為有效的索引條件，因為沒人看得懂，開發(fā)需要查找一個圖標的時候依舊是通過縮略圖而不是命名。

所以，在內部沒有具體的命名規(guī)范，亦或是程序員沒有特殊要求的情況下，我更建議使用中文命名系統(tǒng)，因為國內多數(shù)程序員的習慣會將獲取的圖標進行二次命名。

命名的格式可以分成 3 級，格式大致為：「模塊_名稱_狀態(tài)@1x」，比如下面的案例：

• 設置_錢包_高亮@1x.png

• 動態(tài)_評論_默認@1x.png

• 登錄_按鈕_點擊@2x.png

當然，我們可以根據(jù)實際場景自由調整，但大家要牢記，圖標的命名是為了方便我們查找、檢索。

圖標 Symbol 的命名，要和圖標的命名保持一致，這樣才能起到事半功倍的效果。

4. 圖標的格式

上一章啟動圖標的導出格式，會根據(jù)不同設備、場景導出不同的尺寸，并且使用 PNG  的格式。不要擔心，工具圖標雖然也面臨設備不同的問題，但不需要導出這么多的規(guī)格。下面講講兩種圖標的導出類型。

位圖格式

最常用的導出格式就是位圖 PNG 格式，因為顯示器顯示倍率的不同，所以我們要導出 1x、2x、3x 三種倍率規(guī)格的圖片，即設計了 16pt  的圖標的話，我們需要導出 16pt、32pt、48pt 三種尺寸。并在導出的文件名后綴上標有 @1x、@2x、@3x 的標注。

這個規(guī)格對于 iOS 還是 Android 都是通用的，雖然還有 3x 以上的設備，但是那些設備只要調用 3x 的規(guī)格即可。

雖然后面會提圖標可以使用矢量格式導出，但對于使用了漸變、投影或者擬物風格的圖標，必須使用位圖的格式，否則無法完整記錄圖形的細節(jié)元素。

矢量格式

導出 3 種規(guī)格的圖標很麻煩，而且位圖占用的空間往往較大。所以，iOS 和 Android  為了優(yōu)化這個問題，在之前的系統(tǒng)更新中都默認支持了矢量格式的切圖文件：

• iOS 使用 PDF 的 1x 切圖

• Android 使用 SVG 的 1x 切圖

當然，如果使用矢量格式導出，那么切記在分類文件夾的時候，要將 iOS 和 Android 分開保存，而不是混合在一起。

看完了這篇文章，相信你對“在UI 設計中圖標應用的示例分析”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業(yè)資訊頻道，感謝各位的閱讀！