- 相關(guān)推薦
ICON設(shè)計(jì)中六個(gè)最基本的原則
導(dǎo)語(yǔ)：發(fā)現(xiàn)一些新同學(xué)在icon設(shè)計(jì)中，非常的沒(méi)有重點(diǎn)，這個(gè)簡(jiǎn)單說(shuō)下ICON設(shè)計(jì)的基本原則，一起來(lái)學(xué)習(xí)下吧;
1.定義準(zhǔn)確形象
icon也是一種交互模塊，只不過(guò)通常以分割突出界面和互動(dòng)的形式來(lái)呈現(xiàn)的。其中以交互式為主要運(yùn)用手段。而icon對(duì)于一般起是充當(dāng)指示、提醒、概括、表述等作用，所以在icon定義的時(shí)候一定要準(zhǔn)確，非但不能模糊反而比logo的定義還要清晰。
比如：新建，添加，刪除，搜索等都要遵循簡(jiǎn)潔通用這個(gè)一個(gè)基本的原則。否則用戶辨識(shí)度上會(huì)導(dǎo)致操作成本上升的結(jié)果。通常也會(huì)造成閱讀和操作的障礙。
那么，第一種是放大鏡，這個(gè)通常我們可以用在系統(tǒng)設(shè)置上，由于傳統(tǒng)原因，我們會(huì)約定俗成的把它和相關(guān)設(shè)置放在一起。第二種，由于社交化的催生，肢體語(yǔ)言可以概括出生動(dòng)的圖形，首先我們想到的是眼睛。第三種查看是閱讀類情況，APP應(yīng)用居多，這個(gè)就可以用書(shū)本的輪廓來(lái)進(jìn)行定義。
這三種情況是根據(jù)情況來(lái)設(shè)定，如果互換勢(shì)必會(huì)帶來(lái)定義不準(zhǔn)的問(wèn)題。
2.造型完整簡(jiǎn)明
造型是icon設(shè)計(jì)的筋骨，就好象一個(gè)人是健康的還是有缺陷的。一個(gè)icon有沒(méi)有美感很大程度就取決于造型是否優(yōu)美和諧。
在基本外形里，通常是矩形或圓形，我們會(huì)給予它們不同的設(shè)計(jì)感覺(jué)來(lái)定義它們能表達(dá)什么。
如：在大幅空白的區(qū)域，圓形icon會(huì)更適合留白排版。當(dāng)大幅文字段落或執(zhí)行按鈕的時(shí)候，矩形icon會(huì)更合適排版。
3.表達(dá)符合的行為習(xí)慣
在表達(dá)定義的時(shí)候，首頁(yè)要符合一般使用的行為習(xí)慣，UI本身的意義就在于附加到“功能”上的一個(gè)表現(xiàn)層，具備最直接的操作和交互的功能。我們首先不要著重華麗和精妙上面，為了icon而做icon。而往往一些產(chǎn)品部門相關(guān)的人員并不會(huì)在乎華麗和精美。功能性是最重要的因素。而個(gè)性色彩比較濃的游戲類或教育類界面，一般都配有文字或歸屬感比較強(qiáng)的元素來(lái)進(jìn)行設(shè)計(jì)。
4.風(fēng)格表現(xiàn)統(tǒng)一
風(fēng)格是一種具備獨(dú)有特點(diǎn)的形態(tài)，具備差異化的思路和個(gè)性。在UI中通過(guò)表現(xiàn)不那么特立獨(dú)行也是因?yàn)樾袨榱?xí)慣問(wèn)題，這也解釋了想微軟、蘋(píng)果、谷歌可以顛覆設(shè)計(jì)原則的原因，通常一個(gè)公司或一個(gè)組織沒(méi)辦法去改變?cè)O(shè)計(jì)規(guī)則。
這通常取決于先入為主和影響力所決定的�，F(xiàn)在的UI界面中的icon更稱得上風(fēng)格化，而非百花齊放，林林種種。我們?cè)诙x和風(fēng)格上只能限制于目前的標(biāo)準(zhǔn)框架來(lái)設(shè)計(jì)，而應(yīng)用設(shè)計(jì)的靈魂就在于“功能”，所有應(yīng)用設(shè)計(jì)都要依附和順從于這樣的一個(gè)標(biāo)準(zhǔn)里。
引申一點(diǎn)，就是要融入到整個(gè)的產(chǎn)品設(shè)計(jì)中，這包括用戶體驗(yàn)和協(xié)助工程師把功能完整起來(lái)。
使得不因視覺(jué)原因而達(dá)不到產(chǎn)品設(shè)計(jì)的預(yù)期。
風(fēng)格的統(tǒng)一包括：造型的輪廓粗細(xì)的統(tǒng)一，顏色色調(diào)與調(diào)和的統(tǒng)一，材質(zhì)與紋理(肌理)的統(tǒng)一;當(dāng)然也包括用詞的風(fēng)格，比如：我的文件夾或者這個(gè)文件夾，是有許多區(qū)別的。
當(dāng)我們?cè)O(shè)計(jì)icon時(shí)，可以使用一些柵格來(lái)完成結(jié)構(gòu)，結(jié)構(gòu)就是造型是否準(zhǔn)確的基礎(chǔ)。先有自由的設(shè)計(jì)思路，在進(jìn)行柵格或者所謂的幾何化的規(guī)范，最終完成設(shè)計(jì)。
5.排版循序與位置的調(diào)整
完成基本的icon設(shè)計(jì)后，還有根據(jù)UI界面布局來(lái)進(jìn)行調(diào)整icon在整個(gè)布局中的位置。這個(gè)相當(dāng)重要，而對(duì)于有經(jīng)驗(yàn)的工作人員來(lái)說(shuō)，一般icon的造型，復(fù)雜程度，基本外型都會(huì)進(jìn)行調(diào)整;如簡(jiǎn)單相對(duì)復(fù)雜，圓形一列中會(huì)有重疊元素，也可以會(huì)有矩形來(lái)調(diào)和。對(duì)比調(diào)和后使得icon更加易讀和方便識(shí)別。切忌糊涂一片，錯(cuò)亂反復(fù)。
但icon在重要或突出功能的位置上，必須首先進(jìn)行調(diào)整造型和位置，因?yàn)樵谝话鉛I界面里靠上的位置或者特定位置的功能相對(duì)固定，不能簡(jiǎn)單的刪除更改。否則整個(gè)功能方向就會(huì)失調(diào)，使得網(wǎng)站或APP像另外一個(gè)方向去發(fā)展，得不償失。
6.使用配色的協(xié)調(diào)
給icon添加顏色是解決視覺(jué)沖擊力的一種表現(xiàn)手段。一般賦予icon什么樣的個(gè)性和使得突出重點(diǎn)，一般都會(huì)添加顏色。在添加顏色時(shí)首先我們可以用感覺(jué)來(lái)進(jìn)行設(shè)計(jì)，思路對(duì)想法可以就行了。
這時(shí)在整體界面中一般有背景色和主導(dǎo)色，那么一般我們選擇的icon顏色要側(cè)重于點(diǎn)綴色或者著重色，而其他不太重要的icon顏色盡量選擇中性的顏色，想低純度的藍(lán)色，因?yàn)樵赨I界面設(shè)計(jì)中，藍(lán)色幾乎和黑白灰并稱萬(wàn)用色。有時(shí)候UI界面或icon整體偏暖和冷就是因?yàn)檠a(bǔ)色沒(méi)有運(yùn)用好。導(dǎo)致很刺激人的感官，這里有個(gè)小技巧，就是運(yùn)用補(bǔ)色。
補(bǔ)色通俗點(diǎn)說(shuō)就是把三原色補(bǔ)齊，重點(diǎn)：不是要補(bǔ)充純度高明度高的其他三原色，這個(gè)還是要看具體的環(huán)境和條件，且不要下死定義，形而上學(xué)。
【ICON設(shè)計(jì)中六個(gè)最基本的原則】相關(guān)文章：
平面設(shè)計(jì)中設(shè)計(jì)原則06-25
環(huán)境設(shè)計(jì)中的通用設(shè)計(jì)原則10-12
城市景觀中的樹(shù)木設(shè)計(jì)的原則08-27
環(huán)境設(shè)計(jì)中的色彩原則10-17
室內(nèi)設(shè)計(jì)中的生態(tài)設(shè)計(jì)原則09-26
公共環(huán)境設(shè)計(jì)中通用設(shè)計(jì)的原則06-07