UKUI桌面環境之UKicon

一、爲何要設計一套UKicon？

圖標（icon）是具備明確指代含義的計算機圖形，通常來講，圖標被定義爲用於溝通用途的、具有高象徵性意義的圖像。研究結果代表，大部分人感知圖像的速度比感知文字更快，因此使用易於識別的、清晰的圖標能很大程度上加強界面導航的有效性，其在用戶界面中的做用沒法估量，能幫助實現高效的人機交互流程。

優麒麟設計團隊爲了給用戶提供一個更親切友好的人機交互環境，造成本身的系統風格與視覺效果，主導設計和開發了UKUI桌面環境，而UKicon就是UKUI設計的重要組成部分。

二、設計圖標須要注意些什麼？

（1）圖標設計的第一原則是要表意準確、清晰，圖標中不包含非必要的圖形元素，用戶可以輕鬆理解圖標的含義。

（2）在設計時還要考慮到圖標符號認知延續性，儘可能不要去改變用戶常年積累的圖標記憶。一些約定俗成的代指符號，符合全部用戶認知與使用習慣：好比愛心表明喜歡；✓表明肯定。

（3）明確自身的用戶定位與用戶羣體的使用習慣，不一樣人羣對圖標語言的識別能力是不同的。從普及和推廣操做系統的定位出發，優麒麟系統的目標用戶羣體年齡層次跨度較大，人羣職業分佈廣，在設計圖標時，比起新穎流行更注重傳統與延續。

（4）圖標在不一樣的尺寸和分辨率下均能保持統一性、完整性。在不一樣的硬件設備上都能有較好的顯示效果。

（5）Icon設計風格與UKUI系統總體的視覺效果要保持一致性，不能脫離UKUI的總體設計風格。

三、圖標在應用中遇到的問題

優麒麟系統從13年開始發佈第一個版本Ubuntu Kylin 13.04到最新的優麒麟 18.10，設計團隊一直在尋找最合適的設計解決方案。系統icon通過了幾個版本變化，由摸索階段的Ubuntu默認圖標結合擬物風圖標，到嘗試以自主設計扁平風圖標爲主，以開源圖標做爲補充。在其中也遇到了很多問題：

（1）部分圖標代指含義存在時代滯後性，如iPhone圖標仍是用固定電話圖案；電腦顯示器仍是用笨重的顯像管顯示器圖案；

（2）圖標包含了自主設計圖標、開源圖標和軟件自帶啓動圖標，猛一眼看過去風格相似，並列擺放時區別就明顯了，大小、顏色、陰影、倒角都有細節差異。

（3）圖標包包含圖標數量少，沒法知足系統圖標總體替換的需求，使用後界面反而出現多種不一樣風格圖標混雜的狀況。

（4）個性化、極簡風圖標，過於追求設計性而弱化了icon的代指表意功能，致使圖標的可讀性、實用性、功能性不足，在使用中形成誤讀，用戶的使用體驗不佳。

四、制定UKicon設計規範 

爲了彌補以上缺陷，咱們吸收、分析了各種圖標的優缺點，制定了一套統一風格的設計規範： 

(1) UKicon設計用色色板：

UKicon圖標用色色板規範用色共有16組主要用色、3組補充用色和黑白兩色，共計113種顏色。其中又分爲主題色、描邊色和裝飾色。主題色爲跨上下兩組色系的漸變色。
從色板展現能夠看出，UKicon的用色選色明亮、色相跨度大，色彩組合效果多樣，總體亮眼醒目。能夠更好的與桌面主題和壁紙相呼應。 

(2) UKicon設計尺寸模板： 

UKicon圖標的尺寸有16×1六、22×2二、24×2四、32×3二、48×4八、 64×6四、96×9六、128×12八、256×25六、512×512。10個尺寸涵蓋了系統使用涉及到的所有尺寸。在使用不一樣分辨率顯示時都能保證圖標清晰。

(3) UKicon設計視覺規範: 

基於視覺特性的分類

a. 直角線性圖標（action、animations、emblems、panel、status文件夾）：主要應用在提示性圖標和功能性圖標中。

直角線性圖標，經過粗細一致的線條繪製，直角畫型。高度歸納出圖標，主體單色，局部使用提示色點綴，直角每每給人以剛毅、果斷、準確的感受。

b. 直角輕擬物圖標（devices、mimetypes、places文件夾）：主要應用在PC端的系統圖標。

輕擬物+漸變+直角風格造成的風格。保留擬物圖標的「一看即知」圖形特色，減輕擬物風的質感、陰影、紋理，在此基礎上作直角畫型，加上顏色明亮的漸變。介於擬物圖形和扁平圖形之間，造成一種獨特又熟悉的視覺語言。

c. 半扁平圖標（APP文件夾）：啓動類圖標（APP）主要在優麒麟系統pc端程序啓動項和移動端應用。

設計上增長了一個漸變色圓角託底，打破了直角線條帶來的銳利感，顯得更圓潤。大色塊底色更適合移動端界面上陣列展現圖標的顯示效果。顏色上，以不一樣色系爲應用分類，讓用戶使用體驗更友好。

5. 完成設計成果展現

（1）完成icon數量統計

UKicon最終完成圖標分爲9個文件夾，共計3530個圖標，涵蓋了系統圖標、提示性圖標、軟件界面功能圖標、經常使用軟件的啓動圖標等。基本知足優麒麟系統的全部界面顯示需求，每一個圖標都有多種尺寸，png和svg兩種格式。

文件夾	個數	尺寸
action	673	14x1四、16x1六、22x2二、24x2四、32x3二、48x4八、64x6四、96x9六、128x12八、256x25六、512x512
animations	72	16x1六、22x2二、24x2四、32x3二、48x48
apps	731	16x1六、22x2二、24x2四、32x3二、48x4八、64x6四、96x9六、128x12八、256x25六、512x512
devices	243	16x1六、22x2二、24x2四、32x3二、48x4八、64x6四、96x9六、128x12八、256x25六、512x512
emblems	63	8x八、16x1六、22x2二、24x2四、32x3二、48x4八、64x6四、96x9六、128x12八、256x256
mimetypes	625	16x1六、22x2二、24x2四、32x3二、48x4八、64x6四、96x9六、128x12八、256x25六、512x512
panel	285	16x1六、22x2二、24x2四、32x3二、48x4八、64x6四、96x9六、128x12八、256x25六、512x512
places	164	16x1六、22x2二、24x2四、32x3二、48x4八、64x6四、96x9六、128x12八、256x25六、512x512
status	674	16x1六、22x2二、24x2四、32x3二、48x4八、64x6四、96x9六、128x12八、256x25六、512x512
合計	3530

（2）設計成品圖展現 

桌面及開始菜單界面設計效果圖 

文件管理器界面設計效果圖 

控制面板界面設計效果圖

（3）Icon實裝圖 

優麒麟18.10桌面及控制面板

怎麼樣？經過小編的介紹，你們是否對系統圖標有了更深入的瞭解呢？沒想到這小小的圖標，也有這麼多講究，歡迎你們提出您寶貴的意見哦！