1、為什么要設(shè)計一套UKicon？

圖標(biāo)（icon）是具有明確指代含義的計算機圖形，一般來說，圖標(biāo)被定義為用于溝通用途的、具備高象征性意義的圖像。研究結(jié)果表明，大部分人感知圖像的速度比感知文字更快，所以使用易于識別的、清晰的圖標(biāo)能很大程度上增強界面導(dǎo)航的有效性，其在用戶界面中的作用無法估量，能幫助實現(xiàn)高效的人機交互流程。

優(yōu)麒麟設(shè)計團(tuán)隊為了給用戶提供一個更親切友好的人機交互環(huán)境，形成自己的系統(tǒng)風(fēng)格與視覺效果，主導(dǎo)設(shè)計和開發(fā)了UKUI桌面環(huán)境，而UKicon就是UKUI設(shè)計的重要組成部分。

2、設(shè)計圖標(biāo)需要注意些什么？

（1）圖標(biāo)設(shè)計的第一原則是要表意準(zhǔn)確、清晰，圖標(biāo)中不包含非必要的圖形元素，用戶能夠輕松理解圖標(biāo)的含義。

（2）在設(shè)計時還要考慮到圖標(biāo)符號認(rèn)知延續(xù)性，盡量不要去改變用戶常年積累的圖標(biāo)記憶。一些約定俗成的代指符號，符合所有用戶認(rèn)知與使用習(xí)慣：比如愛心代表喜歡；?代表確定。

（3）明確自身的用戶定位與用戶群體的使用習(xí)慣，不同人群對圖標(biāo)語言的識別能力是不一樣的。從普及和推廣操作系統(tǒng)的定位出發(fā)，優(yōu)麒麟系統(tǒng)的目標(biāo)用戶群體年齡層次跨度較大，人群職業(yè)分布廣，在設(shè)計圖標(biāo)時，比起新穎流行更注重傳統(tǒng)與延續(xù)。

（4）圖標(biāo)在不同的尺寸和分辨率下均能保持統(tǒng)一性、完整性。在不同的硬件設(shè)備上都能有較好的顯示效果。

（5）Icon設(shè)計風(fēng)格與UKUI系統(tǒng)整體的視覺效果要保持一致性，不能脫離UKUI的整體設(shè)計風(fēng)格。

3、圖標(biāo)在應(yīng)用中遇到的問題

優(yōu)麒麟系統(tǒng)從13年開始發(fā)布第一個版本Ubuntu Kylin 13.04到最新的優(yōu)麒麟 18.10，設(shè)計團(tuán)隊一直在尋找最合適的設(shè)計解決方案。系統(tǒng)icon經(jīng)過了幾個版本變化，由摸索階段的Ubuntu默認(rèn)圖標(biāo)結(jié)合擬物風(fēng)圖標(biāo)，到嘗試以自主設(shè)計扁平風(fēng)圖標(biāo)為主，以開源圖標(biāo)作為補充。在其中也遇到了不少問題：

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

（2）圖標(biāo)包含了自主設(shè)計圖標(biāo)、開源圖標(biāo)和軟件自帶啟動圖標(biāo)，猛一眼看過去風(fēng)格類似，并列擺放時區(qū)別就明顯了，大小、顏色、陰影、倒角都有細(xì)節(jié)差別。

（3）圖標(biāo)包包含圖標(biāo)數(shù)量少，無法滿足系統(tǒng)圖標(biāo)整體替換的需求，使用后界面反而出現(xiàn)多種不同風(fēng)格圖標(biāo)混雜的情況。

（4）個性化、極簡風(fēng)圖標(biāo)，過于追求設(shè)計性而弱化了icon的代指表意功能，導(dǎo)致圖標(biāo)的可讀性、實用性、功能性不足，在使用中造成誤讀，用戶的使用體驗不佳。

4、制定UKicon設(shè)計規(guī)范 

為了彌補以上缺陷，我們吸取、分析了各類圖標(biāo)的優(yōu)缺點，制定了一套統(tǒng)一風(fēng)格的設(shè)計規(guī)范： 

(1) UKicon設(shè)計用色色板：

UKicon圖標(biāo)用色色板規(guī)范用色共有16組主要用色、3組補充用色和黑白兩色，共計113種顏色。其中又分為主題色、描邊色和裝飾色。主題色為跨上下兩組色系的漸變色。

從色板展示可以看出，UKicon的用色選色明亮、色相跨度大，色彩組合效果多樣，整體亮眼醒目?？梢愿玫呐c桌面主題和壁紙相呼應(yīng)。 

(2) UKicon設(shè)計尺寸模板： 

UKicon圖標(biāo)的尺寸有16×16、22×22、24×24、32×32、48×48、 64×64、96×96、128×128、256×256、512×512。10個尺寸涵蓋了系統(tǒng)使用涉及到的全部尺寸。在使用不同分辨率顯示時都能保證圖標(biāo)清晰。

(3) UKicon設(shè)計視覺規(guī)范: 

基于視覺特性的分類

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

直角線性圖標(biāo)，通過粗細(xì)一致的線條繪制，直角畫型。高度概括出圖標(biāo)，主體單色，局部使用提示色點綴，直角往往給人以剛毅、果斷、準(zhǔn)確的感覺。

b. 直角輕擬物圖標(biāo)（devices、mimetypes、places文件夾）：主要應(yīng)用在PC端的系統(tǒng)圖標(biāo)。

輕擬物+漸變+直角風(fēng)格形成的風(fēng)格。保留擬物圖標(biāo)的“一看即知”圖形特點，減輕擬物風(fēng)的質(zhì)感、陰影、紋理，在此基礎(chǔ)上做直角畫型，加上顏色明亮的漸變。介于擬物圖形和扁平圖形之間，形成一種獨特又熟悉的視覺語言。

c. 半扁平圖標(biāo)（APP文件夾）：啟動類圖標(biāo)（APP）主要在優(yōu)麒麟系統(tǒng)pc端程序啟動項和移動端應(yīng)用。

設(shè)計上增加了一個漸變色圓角托底，打破了直角線條帶來的銳利感，顯得更圓潤。大色塊底色更適合移動端界面上陣列展示圖標(biāo)的顯示效果。顏色上，以不同色系為應(yīng)用分類，讓用戶使用體驗更友好。

5. 完成設(shè)計成果展示

（1）完成icon數(shù)量統(tǒng)計

UKicon最終完成圖標(biāo)分為9個文件夾，共計3530個圖標(biāo)，涵蓋了系統(tǒng)圖標(biāo)、提示性圖標(biāo)、軟件界面功能圖標(biāo)、常用軟件的啟動圖標(biāo)等?；緷M足優(yōu)麒麟系統(tǒng)的所有界面顯示需求，每個圖標(biāo)都有多種尺寸，png和svg兩種格式。

（2）設(shè)計成品圖展示 

桌面及開始菜單界面設(shè)計效果圖 

文件管理器界面設(shè)計效果圖 

控制面板界面設(shè)計效果圖

（3）Icon實裝圖 

優(yōu)麒麟18.10桌面及控制面板

怎么樣？通過小編的介紹，大家是否對系統(tǒng)圖標(biāo)有了更深刻的了解呢？沒想到這小小的圖標(biāo)，也有這么多講究，歡迎大家提出您寶貴的意見哦！