- 原文作者 : Peter Nowell
- 譯者 : edvardhua
- 校對(duì)者 : Ruixi, CoderBOBO
Flinto 團(tuán)隊(duì) 最近采訪了我關(guān)于Flinto用戶界面圖標(biāo)背后的設(shè)計(jì)流程。
你是怎么為Mac版本的Flinto貢獻(xiàn)自己的設(shè)計(jì)？
我參與了Flinto新的Mac版本的用戶界面部分和用戶體驗(yàn)部分的設(shè)計(jì)，就在他發(fā)布之前的幾個(gè)月。但是因?yàn)镕linto是一個(gè)特殊的工具，我們?cè)绞巧钊胨伎济恳徊糠值挠脩趔w驗(yàn)，我們?cè)礁杏X(jué)到Flinto需要大量的定制icons。譬如說(shuō)Flinto應(yīng)用的列表（List），工具欄（Toolbar），動(dòng)畫(huà)的設(shè)計(jì)面板（Transition Designer），下拉手勢(shì)（Gestures dropdown）都需要他們獨(dú)自的一套圖標(biāo)。所以，如何快速的設(shè)計(jì)圖標(biāo)變成了我的主要工作。
當(dāng)設(shè)計(jì)大型應(yīng)用的圖標(biāo)和菜單的時(shí)候，你采用什么樣的設(shè)計(jì)策略？
設(shè)計(jì)總是情境驅(qū)動(dòng)的。我驚奇的發(fā)現(xiàn)專業(yè)Mac應(yīng)用的情境設(shè)計(jì)是最復(fù)雜的工作之一，就算你只是設(shè)計(jì)圖標(biāo)。工具欄（Toolbar）的圖標(biāo)大小必須一致，而且最好根據(jù)圖標(biāo)知道用途。這與側(cè)邊欄的圖標(biāo)和下拉菜單看到的圖標(biāo)的設(shè)計(jì)原則上有所差異。 一些圖標(biāo)會(huì)以不同的尺寸和不同的樣式重復(fù)出現(xiàn)在不同的地方。不是只要調(diào)整圖標(biāo)尺寸或者樣式就能夠適用于每一個(gè)用戶界面的，所以我在設(shè)計(jì)圖標(biāo)的時(shí)候需要考慮到圖標(biāo)是否具有通用性以及不破壞用戶界面的整體一致性。
我都是在紙上開(kāi)始設(shè)計(jì)圖標(biāo)的，我一直堅(jiān)信這個(gè)原則。我會(huì)在紙上畫(huà)下我想象中這個(gè)圖標(biāo)的所有可能性，譬如設(shè)計(jì)的這個(gè)圖標(biāo)包含了什么暗喻以及圖標(biāo)可能需要/產(chǎn)生的變化。所以在概念設(shè)計(jì)的這個(gè)階段上，我盡量讓自己將所有的內(nèi)容都寫在我的紙上，甚至是一些不相關(guān)的想法。下一步則分析概念設(shè)計(jì)中的內(nèi)容如何能夠更好符合我們?cè)O(shè)計(jì)的目標(biāo)，已有的限制以及這個(gè)圖標(biāo)的情境聯(lián)系。
我發(fā)現(xiàn)將繪圖構(gòu)思和評(píng)估這兩個(gè)過(guò)程分開(kāi)進(jìn)行是很至關(guān)重要的。前者的工作需要想象力，好奇心，而且持有自己主觀的判斷，是一個(gè)加法的過(guò)程，是心血來(lái)潮的創(chuàng)作。評(píng)估則需要批判性，實(shí)用性，以及需要考慮圖標(biāo)背后一連串所延伸出來(lái)的隱喻，是一個(gè)做減法的過(guò)程。如果你嘗試同時(shí)做這兩件事情，那么你會(huì)考慮不過(guò)來(lái)從而得不到任何結(jié)果。
我最近還在網(wǎng)上授課講述我認(rèn)為在設(shè)計(jì)圖標(biāo)中最重要的原則。里面還包含了我是如何來(lái)評(píng)估我的想法和草稿的。
通常來(lái)說(shuō)，只有一部分的設(shè)計(jì)想法會(huì)被保存到電腦里面。使用sketch可以提高我的生產(chǎn)效率并且在生產(chǎn)的過(guò)程中會(huì)有一些創(chuàng)造性的決定。但最主要的目的還是要完善和精煉圖標(biāo)的形式，保證每一個(gè)圖標(biāo)都是像素完美的。我對(duì)此具備相當(dāng)大的熱情，我對(duì)其他忽視這個(gè)細(xì)節(jié)的人感到很煩惱。
能夠?yàn)槲覀冊(cè)偕晕⒔忉屢幌率裁词恰跋袼赝昝馈焙腿绾螌?shí)現(xiàn)？
像素完美其實(shí)意味著很多東西，它更像是一個(gè)想法而不是一個(gè)能夠具體描述的特征。像“注意細(xì)節(jié)”一樣，當(dāng)被忽視的時(shí)候我們能夠很容易的感覺(jué)出來(lái)。完美的像素對(duì)小圖標(biāo)的可辨別度有巨大的影響。想要實(shí)現(xiàn)像素完美不僅僅是將設(shè)計(jì)元素的像素網(wǎng)格對(duì)齊（如下圖）。這基本上來(lái)說(shuō)就是在和鋸齒做斗爭(zhēng)。使用抗鋸齒是很好的一件事情，但它會(huì)讓圖像一些地方產(chǎn)生模糊，尤其是在對(duì)角線和曲線中。
舉個(gè)例子，我們想在圖層列表中加上一些注釋來(lái)表明哪些層是被隱藏或者是被鎖住的。當(dāng)然給圖層加上隱藏和鎖定是很簡(jiǎn)單的事情，只需要點(diǎn)擊按鈕操作一下就好了。我們考慮的是我們有一個(gè)小的注釋，他會(huì)占用一小部分空間，來(lái)注釋兩個(gè)已經(jīng)隱藏和鎖定圖標(biāo)。為了完成這個(gè)目標(biāo)，我們的圖標(biāo)必須要做到像素完美。我對(duì)我設(shè)計(jì)的8x8大小的圖標(biāo)感到非常的自豪。
對(duì)于使用retina顯示屏的讀者，我們顯示“一半尺寸”的位圖，如圖1x的全像素圖標(biāo)。對(duì)于非retina顯示屏的讀者，則使用“雙倍尺寸”的位圖，如圖2x的全像素圖標(biāo)。 請(qǐng)以橫向模式顯示上圖來(lái)獲得最好的顯示效果。
在一個(gè)理想的世界中，一枚制作精良矢量圖標(biāo)可以輕易地適應(yīng)各種像素密度的輸出，并在所有對(duì)應(yīng)尺寸中顯示效果良好。但是大部分時(shí)候，使用一倍大小的圖標(biāo)并不能夠處理得到更高尺寸的圖標(biāo)。你可能需要先做一個(gè)完美的兩倍尺寸的圖標(biāo)，然后再調(diào)整成一倍尺寸來(lái)創(chuàng)建一個(gè)新的視覺(jué)滿意的圖標(biāo)。在Flinto中至少一半的圖標(biāo)都有其對(duì)應(yīng)1倍和2倍尺寸，譬如貫穿整個(gè)過(guò)渡動(dòng)畫(huà)設(shè)計(jì)面板的"概念圖層"圖標(biāo)。
針對(duì)于這塊感興趣的讀者，這里有我是如何對(duì)Flinto圖標(biāo)的抗鋸齒進(jìn)行細(xì)調(diào)的技術(shù)細(xì)節(jié)。
- 重新調(diào)整和重新定位圖形來(lái)獲得看上去視覺(jué)舒服的圖形，盡管這樣處理后位置或者像素值會(huì)有小數(shù)點(diǎn)，但在這個(gè)階段視覺(jué)是重點(diǎn)。
- 只使用曲線或者圓角時(shí)，至少要使用2px來(lái)渲染 90° 角的半徑圓，或者使用3px渲染180°角的半徑圓，來(lái)作為圓的線段末尾（如下圖）。1pt大小線的線段的圓角線帽的效果是很糟糕的，至少我們使用的屏幕都會(huì)將其放大三倍來(lái)顯示。
沒(méi)有人想要模糊的線帽！只有三倍大小（或者更大）的顯示器才能夠?qū)?pt大小的線條渲染清晰可見(jiàn)的圓角線帽。
- 為了讓線條粗細(xì)更加一致，調(diào)整邊框?qū)挾?粗細(xì)來(lái)達(dá)到稍寬或者稍厚會(huì)比使用1pt的細(xì)曲線或者斜線更好。
- 消除不必要的模糊像素。這在你需要使用圖形自身標(biāo)記自己的時(shí)候?qū)?huì)很有效。
- 通過(guò)復(fù)制圖形或者邊框（同一方向）來(lái)輕微調(diào)整圖形的粗細(xì)。
- 如果圖標(biāo)可以有小模糊鋸齒能夠?yàn)閳D標(biāo)的其他部分提供一定幫助，這也是可以的。
當(dāng)然還有其他有關(guān)于如何平滑抗鋸齒的技巧，但是我剛才所說(shuō)的是我從中獲益最大的。
什么造就了一枚好圖標(biāo)？
這是個(gè)問(wèn)題！尤其是當(dāng)圖標(biāo)包含了很多設(shè)計(jì)原則的時(shí)候。我在我的圖標(biāo)設(shè)計(jì)課程里面通過(guò)講我在Flinto工作遇到的一些故事來(lái)描述我是如何造就一枚好圖標(biāo)的。
其中的一個(gè)原則就是使用熟悉的符號(hào)并且讓他顯眼。當(dāng)我們開(kāi)始為Flinto的主頁(yè)面的畫(huà)布設(shè)計(jì)圖標(biāo)的時(shí)候，內(nèi)森有一個(gè)想法，我們可以設(shè)計(jì)一個(gè)圖標(biāo)讓我們回憶起艾西勒的住宅。艾西勒是一位建筑師，他設(shè)計(jì)了中世紀(jì)現(xiàn)代建筑的住宅，這種風(fēng)格的住宅在加州很流行。
<figcaption>艾西勒的中世紀(jì)現(xiàn)代建筑的住宅給了我們靈感去探索設(shè)計(jì)一個(gè)獨(dú)特的“home”圖標(biāo)。</figcaption>
我們認(rèn)為這個(gè)想法很酷而且內(nèi)森也買了一套使用這種設(shè)計(jì)元素的房子，所以我們對(duì)這個(gè)想法很有熱情。我做了很多個(gè)home圖標(biāo)的概念設(shè)計(jì)，嘗試著將艾西勒住宅的特點(diǎn)萃取到一個(gè)16*16正方形的圖標(biāo)里面，而且在圖標(biāo)不添加色彩和透明度效果。我們發(fā)現(xiàn)這些看似巧妙的圖標(biāo)并沒(méi)有很好展現(xiàn)圖標(biāo)本身的職責(zé)而且作為home圖標(biāo)也不夠顯眼。于是我們決定做一個(gè)直觀并且能夠表達(dá)艾西勒住宅不對(duì)稱特點(diǎn)而且對(duì)其他用戶而言有高辨別度的圖標(biāo)。
直觀勝過(guò)巧妙，我們選擇了底部中間圖標(biāo)作為home鍵。
另外評(píng)價(jià)一個(gè)好圖標(biāo)的原則是他是否能夠與周圍的元素看上去融洽。這些元素包括圖標(biāo)周圍的UI，鄰接文本的大小和 權(quán)重，操作系統(tǒng)的約定（譬如說(shuō)，在mac os下cmd+s是保存，而在win下則是ctrl + s），以及其他圖標(biāo)的集合。
所以盡管home圖標(biāo)基本上是單獨(dú)存在的，但是工具圖標(biāo)，手勢(shì)圖標(biāo)，排版圖標(biāo)都是集合方式存在的。設(shè)計(jì)圖標(biāo)的集合的挑戰(zhàn)是很大的。你會(huì)在設(shè)計(jì)一個(gè)圖標(biāo)集合設(shè)計(jì)到一半的時(shí)候發(fā)現(xiàn)你所使用的視覺(jué)隱喻不能夠適應(yīng)每一個(gè)這個(gè)集合里面需要的圖標(biāo)，這意味著你需要重新做一遍。 ??
這種情況通常發(fā)生在手勢(shì)圖標(biāo)上（上圖是以200%比例顯示）現(xiàn)在這些圖標(biāo)看上去很簡(jiǎn)單和直觀，然而我們?cè)谠O(shè)計(jì)他時(shí)是有很多限制條件的，并且還要考慮未來(lái)的兼容性。一些我們?cè)谶@里展示的圖標(biāo)還沒(méi)有出現(xiàn)在Flinto中...但很重要的一點(diǎn)是，在遇到有需要的時(shí)候，我們?cè)O(shè)計(jì)的圖標(biāo)集能夠擴(kuò)展并且容納它們。
