圖標(biāo)的ui設(shè)計(jì)是非常具有專業(yè)性和技巧性的,所以,很多人在剛接觸圖標(biāo)的ui設(shè)計(jì)時(shí)會(huì)不知道應(yīng)該如何下手設(shè)計(jì),下面我們跟隨小編一起來了解一下圖標(biāo)ui設(shè)計(jì)的相關(guān)資料吧。
圖標(biāo)ui設(shè)計(jì)之循序漸進(jìn)地設(shè)計(jì)圖標(biāo)
ui設(shè)計(jì)流程是最重要的事情,所有的設(shè)計(jì)工作在繪制流程在圖標(biāo)繪制之前,就已經(jīng)開始了。
1、了解你要?jiǎng)?chuàng)建的圖標(biāo)的含義。明白不同圖標(biāo)的使用場景,不同的圖標(biāo)分別代表著什么,了解哪些圖標(biāo)需要使用隱喻,哪些圖標(biāo)使用現(xiàn)實(shí)世界中真實(shí)的形象。
2、梳理出圖標(biāo)正確的隱喻,腦暴出可能的符號(hào)和形象。記住圖標(biāo)的含義和形象之間的關(guān)聯(lián),以最佳的形式呈現(xiàn)圖標(biāo),直指本質(zhì)。借助詞典和單詞集來獲取圖標(biāo)相關(guān)的概念的關(guān)鍵詞,同義詞和定義。簡化和抽象你的想法,你會(huì)找到一個(gè)抽象概念「翻譯」出來的對(duì)象。
3、不要拘泥于現(xiàn)在當(dāng)前的任務(wù)和狀態(tài),盡量進(jìn)行徹底的調(diào)研,盡可能地搜集相關(guān)參考資料??赡苡腥艘呀?jīng)為這一主題設(shè)計(jì)了很不錯(cuò)的圖標(biāo)版本,可以參考已有的設(shè)計(jì),獲取靈感。
4、確定圖標(biāo)的樣式。圖標(biāo)應(yīng)該是扁平的,線性的,Material Design,是用符號(hào)還是借助手繪來呈現(xiàn)。有的 UI界面有很清晰的要求,比如 iOS 平臺(tái)和 Material Design,如果 UI 有非常清晰固定的設(shè)計(jì)風(fēng)格,那么圖標(biāo)的設(shè)計(jì)需要盡量貼近。
5、按照選定的方式來呈現(xiàn)設(shè)計(jì),看看它最終呈現(xiàn)是否正確。保持整體設(shè)計(jì)的一致性。
6、注意圖標(biāo)要矢量化,連基本的草圖都應(yīng)該是矢量化的。
7、在 UI 布局中測試圖標(biāo)的設(shè)計(jì)。
(圖片來自網(wǎng)絡(luò))
圖標(biāo)ui設(shè)計(jì)之注意事項(xiàng)
其中最重要的是下面的注意事項(xiàng)清單,它們能夠確保我們不同的人在不同的時(shí)期不同狀態(tài)下,設(shè)計(jì)出來的圖標(biāo)能夠協(xié)調(diào)到一個(gè)主題、一個(gè)系統(tǒng)當(dāng)中。如果你也要設(shè)計(jì)圖標(biāo)的話,可以將下面的清單打印出來,貼在自己的桌子旁邊作為參考。
1、 像素完美。讓圖標(biāo)踩在每個(gè)像素點(diǎn)上,確保清晰不模糊。
2、 視覺重量。用斜視的方法來感知圖標(biāo),看看成套的圖標(biāo)是否都具有相同的大小。斜視、調(diào)整、再看、再調(diào)整,直至均勻理想。為了保持總體視覺重量的一致性,我們會(huì)使用「完美的圓形和正方形」來和所有的新圖標(biāo)進(jìn)行對(duì)比。
3、 幾何圖形。盡量使用簡單堅(jiān)實(shí)的幾何形狀來繪制所有必要的線條,它們會(huì)讓你的圖標(biāo)顯得更加牢固可靠,具有吸引力和說服力。
4、 清晰簡潔。刪除所有無法傳達(dá)圖標(biāo)概念的細(xì)節(jié),避免讓圖標(biāo)顯得沉重而復(fù)雜。
5、 足夠的空間。確保圖標(biāo)內(nèi)每個(gè)細(xì)節(jié)和元素都有足夠的空間,不會(huì)顯得過于擁擠或者空曠。
6、 對(duì)比度。在黑色和白色的背景上檢查圖標(biāo)的全部細(xì)節(jié),看看是否其中的每種顏色都是可見的,以及元素之間的對(duì)比是否足夠。
7、 視覺統(tǒng)一。檢查線條的粗細(xì)重量,邊角的大小,配色方案,細(xì)節(jié)層次和設(shè)計(jì)元素在整個(gè)合集中是否是不變且一致的。
8、 圖層排序。確保圖標(biāo)中圖層順序清晰而規(guī)整。這是一種良好的習(xí)慣和專業(yè)的精神。
(圖片來自網(wǎng)絡(luò))
對(duì)于所有ui設(shè)計(jì)來說圖標(biāo)ui設(shè)計(jì)都是非常重要的,因?yàn)楹玫膱D標(biāo)設(shè)計(jì)可以讓客戶更直觀的了解按鈕所蘊(yùn)含的含義,以便用戶更高效的操作。