UI界面設(shè)計(jì)

UI界面圖標(biāo)設(shè)計(jì)終極指南

2651

今天看到了一篇非常棒的問(wèn)題，詳細(xì)闡釋了圖標(biāo)設(shè)計(jì)過(guò)程中方方面面的知識(shí)點(diǎn)，今天，咱們就來(lái)看看設(shè)計(jì)師Slava Shestopalov的文章：

1 使用光柵來(lái)更好的設(shè)計(jì)圖標(biāo)

UI界面的圖標(biāo)通?？梢越频目醋鲆韵碌幕靖袷街唬簷M向矩形，縱向矩形，對(duì)角矩形，圓形，三角形，正方形。如果把它們做成高斯模糊效果，你就會(huì)發(fā)現(xiàn)它們具有相同的視覺(jué)重量，因?yàn)樗鼈冏兂苫蚨嗷蛏傧嗤陌唿c(diǎn)效果。

根據(jù)圖標(biāo)形狀，將它們放在相應(yīng)的框架中。你就會(huì)發(fā)現(xiàn)，方形圖標(biāo)比三角形或細(xì)長(zhǎng)圖標(biāo)更緊湊。

圖標(biāo)越緊湊，所需空間就越小。圖標(biāo)的邊緣越銳利，細(xì)節(jié)越多，它們占據(jù)的畫(huà)板空間就越多。

請(qǐng)注意，不要過(guò)分的依賴于網(wǎng)格來(lái)設(shè)計(jì)圖標(biāo)。它們是用來(lái)幫你而不是限制你的。如果一個(gè)圖標(biāo)的某些元素伸展出來(lái)更好看，那就順其自然讓它們伸出來(lái)。

2注意像素網(wǎng)格的重要性

在非視網(wǎng)膜屏幕上設(shè)計(jì)圖形的時(shí)候，要特別遵循使用像素網(wǎng)格，并優(yōu)先選用2像素的邊框作為圖標(biāo)的線條。因?yàn)樗梢宰寛D標(biāo)在這些顯示屏上更加清晰。

如果為圖標(biāo)設(shè)置1像素的邊框，這個(gè)時(shí)候，這些邊框應(yīng)該使用外部或內(nèi)部的描邊樣式，但不建議是居中的。如下圖，你可以看到他們的區(qū)別。

居中描邊的一像素邊框，雖然在放大它們的時(shí)候，它們看起來(lái)很清晰。但在100%比例大小顯示的時(shí)候，它們會(huì)模糊掉。所以，慎用~下面兩張圖是圖標(biāo)在居中描邊的時(shí)候所產(chǎn)生的效果：

根據(jù)像素的網(wǎng)格線來(lái)設(shè)置一條線的起點(diǎn)和終點(diǎn)，會(huì)讓你的圖標(biāo)看起來(lái)更清晰。通常情況下，線的傾斜角度在45°，30°，60°的時(shí)候，清晰度會(huì)比一些不常見(jiàn)的角度效果會(huì)更好，比如13.7°，81°等等。所以，盡量避免用這樣的數(shù)值。

3保持一定的圖標(biāo)細(xì)節(jié)

從一套圖標(biāo)中最復(fù)雜的那個(gè)開(kāi)始來(lái)設(shè)計(jì)通常是最有效的，因?yàn)樗鼤?huì)幫助我們定義相同的視覺(jué)重量，讓所有的圖標(biāo)視覺(jué)重量保持一致。

當(dāng)圖標(biāo)具有不同的細(xì)節(jié)層次時(shí)，更復(fù)雜的圖標(biāo)會(huì)吸引用戶更多的注意力，而且視覺(jué)上看上去更重。

4控制最小的間隙尺寸

圖標(biāo)的相鄰元素之間空間在整個(gè)圖標(biāo)集中不應(yīng)太小或不一致。在任何情況下，都要定義最小間隙，以避免輪廓“粘滯”。比如下方的圖標(biāo)，太小的間隙，所產(chǎn)生的粘滯感要特別注意：

下面這個(gè)則是調(diào)整后的效果，是不是好多了？

對(duì)于線性圖標(biāo)來(lái)說(shuō)，圖標(biāo)線段的最小間隙應(yīng)該等于線的粗度。另外，線條應(yīng)該明確的分開(kāi)或者準(zhǔn)確的閉合連接。下圖是從錯(cuò)誤的例子：

下面這個(gè)則是修改后的效果，是不是好多了？

5去除重復(fù)部分

在一套圖標(biāo)集中，你很可能會(huì)重復(fù)一些細(xì)節(jié)，比如下圖這樣。但是盡量不要這么做，讓觀眾的注意力集中在不同的東西上。這就像數(shù)學(xué)中的分?jǐn)?shù)簡(jiǎn)化一樣。您看到的圖形噪聲越少，用戶的理解就越清晰。

比如下方這個(gè)郵件收發(fā)主題的圖標(biāo)，當(dāng)用戶已經(jīng)非常熟知自己的具體操作，比如收郵件，發(fā)郵件，回復(fù)等等。那就不要在設(shè)計(jì)圖標(biāo)的時(shí)候反復(fù)強(qiáng)調(diào)“信封”這個(gè)圖形了。將它們簡(jiǎn)化，效果反而更好。

此規(guī)則還涉及圖標(biāo)周圍的各種裝飾，框架，背景。如果它們沒(méi)有幫助幫助更好的閱讀圖標(biāo)，就讓它們更加簡(jiǎn)化一點(diǎn)比較好。

6保持圖標(biāo)風(fēng)格統(tǒng)一

下面的兩幅圖可以很好的展示正確的和錯(cuò)誤的例子，比如一套家具的圖標(biāo)，如果一個(gè)圖標(biāo)的繪制角度是斜45°，那么其他的圖標(biāo)也盡量保持這樣的角度。而不能一個(gè)是正視，一個(gè)是斜視。看看下面兩幅圖，哪幅圖是正確的呢？

相同的原理適用于線性圖標(biāo)和填充圖標(biāo)。如果你把它們混為一談，人們可能會(huì)認(rèn)為它們具有不同的重要性或地位。當(dāng)然，除非你刻意想要那個(gè)。例如，填充圖標(biāo)用于鍵命令，線圖標(biāo)用于其他命令。

當(dāng)然，我們可以用填充圖標(biāo)表示當(dāng)前態(tài)，線性圖標(biāo)代表非選中狀態(tài)，這樣也是不錯(cuò)的選擇。

7基于二倍數(shù)的度量系統(tǒng)來(lái)設(shè)計(jì)

與基于十進(jìn)制的大小調(diào)整相比，8像素網(wǎng)格和12列布局用于許多接口更靈活。 12可以分為2,3,4和6。因此，24或48像素圖標(biāo)區(qū)域已成為標(biāo)準(zhǔn)。如果需要更大的尺寸，可以縮放這些圖標(biāo)。是時(shí)候補(bǔ)習(xí)下數(shù)學(xué)啦！

8保持輪廓的干凈和準(zhǔn)確

對(duì)于完美主義，設(shè)計(jì)師不能鉆牛角尖，因?yàn)闆](méi)有完美的事物。但是在你的最終設(shè)計(jì)稿里邊，正確的，不扭曲的圖標(biāo)設(shè)計(jì)還是非常重要的。特別要注意，確保相鄰的節(jié)點(diǎn)和相鄰的元素是完全對(duì)齊或者沒(méi)有間隙的。