大神專訪：我是如何為 Mac 應用 Flinto 設計 UI 圖標的？

這篇文章是 Flinto 設計團隊設計師 Peter Nowell 的專訪整理而成，采訪中 Peter 介紹了他是如何設計 Flinto 的圖標，以及一些經驗心得。

Flinto 團隊?最近采訪了我關于Flinto用戶界面圖標背后的設計流程。

你是怎么為Mac版本的Flinto貢獻自己的設計？

我參與了Flinto新的Mac版本的用戶界面部分和用戶體驗部分的設計，就在他發布之前的幾個月。但是因為Flinto是一個特殊的工具，我們越是深入思考每一部分的用戶體驗，我們越感覺到Flinto需要大量的定制icons。譬如說Flinto應用的列表（List），工具欄（Toolbar），動畫的設計面板（Transition Designer），下拉手勢（Gestures dropdown）都需要他們獨自的一套圖標。所以，如何快速的設計圖標變成了我的主要工作。

當設計大型應用的圖標和菜單的時候，你采用什么樣的設計策略？

設計總是情境驅動的。我驚奇的發現專業Mac應用的情境設計是最復雜的工作之一，就算你只是設計圖標。工具欄（Toolbar）的圖標大小必須一致，而且最好根據圖標知道用途。這與側邊欄的圖標和下拉菜單看到的圖標的設計原則上有所差異。 一些圖標會以不同的尺寸和不同的樣式重復出現在不同的地方。不是只要調整圖標尺寸或者樣式就能夠適用于每一個用戶界面的，所以我在設計圖標的時候需要考慮到圖標是否具有通用性以及不破壞用戶界面的整體一致性。

我都是在紙上開始設計圖標的，我一直堅信這個原則。我會在紙上畫下我想象中這個圖標的所有可能性，譬如設計的這個圖標包含了什么暗喻以及圖標可能需要/產生的變化。所以在概念設計的這個階段上，我盡量讓自己將所有的內容都寫在我的紙上，甚至是一些不相關的想法。下一步則分析概念設計中的內容如何能夠更好符合我們設計的目標，已有的限制以及這個圖標的情境聯系。

我發現將繪圖構思和評估這兩個過程分開進行是很至關重要的。前者的工作需要想象力，好奇心，而且持有自己主觀的判斷，是一個加法的過程，是心血來潮的創作。評估則需要批判性，實用性，以及需要考慮圖標背后一連串所延伸出來的隱喻，是一個做減法的過程。如果你嘗試同時做這兩件事情，那么你會考慮不過來從而得不到任何結果。

我最近還在網上授課講述我認為在設計圖標中最重要的原則。里面還包含了我是如何來評估我的想法和草稿的。

通常來說，只有一部分的設計想法會被保存到電腦里面。使用sketch可以提高我的生產效率并且在生產的過程中會有一些創造性的決定。但最主要的目的還是要完善和精煉圖標的形式，保證每一個圖標都是像素完美的。我對此具備相當大的熱情，我對其他忽視這個細節的人感到很煩惱。

能夠為我們再稍微解釋一下什么是“像素完美”和如何實現？

像素完美其實意味著很多東西，它更像是一個想法而不是一個能夠具體描述的特征。像“注意細節”一樣，當被忽視的時候我們能夠很容易的感覺出來。完美的像素對小圖標的可辨別度有巨大的影響。想要實現像素完美不僅僅是將設計元素的像素網格對齊（如下圖）。這基本上來說就是在和鋸齒做斗爭。使用抗鋸齒是很好的一件事情，但它會讓圖像一些地方產生模糊，尤其是在對角線和曲線中。

舉個例子，我們想在圖層列表中加上一些注釋來表明哪些層是被隱藏或者是被鎖住的。當然給圖層加上隱藏和鎖定是很簡單的事情，只需要點擊按鈕操作一下就好了。我們考慮的是我們有一個小的注釋，他會占用一小部分空間，來注釋兩個已經隱藏和鎖定圖標。為了完成這個目標，我們的圖標必須要做到像素完美。我對我設計的8x8大小的圖標感到非常的自豪。

對于使用retina顯示屏的讀者，我們顯示“一半尺寸”的位圖，如圖1x的全像素圖標。對于非retina顯示屏的讀者，則使用“雙倍尺寸”的位圖，如圖2x的全像素圖標。 請以橫向模式顯示上圖來獲得最好的顯示效果。在一個理想的世界中，一枚制作精良矢量圖標可以輕易地適應各種像素密度的輸出，并在所有對應尺寸中顯示效果良好。但是大部分時候，使用一倍大小的圖標并不能夠處理得到更高尺寸的圖標。你可能需要先做一個完美的兩倍尺寸的圖標，然后再調整成一倍尺寸來創建一個新的視覺滿意的圖標。在Flinto中至少一半的圖標都有其對應1倍和2倍尺寸，譬如貫穿整個過渡動畫設計面板的”概念圖層”圖標。

針對于這塊感興趣的讀者，這里有我是如何對Flinto圖標的抗鋸齒進行細調的技術細節。

• 重新調整和重新定位圖形來獲得看上去視覺舒服的圖形，盡管這樣處理后位置或者像素值會有小數點，但在這個階段視覺是重點。
• 只使用曲線或者圓角時，至少要使用2px來渲染 90° 角的半徑圓，或者使用3px渲染180°角的半徑圓，來作為圓的線段末尾（如下圖）。1pt大小線的線段的圓角線帽的效果是很糟糕的，至少我們使用的屏幕都會將其放大三倍來顯示。

沒有人想要模糊的線帽！只有三倍大小（或者更大）的顯示器才能夠對1pt大小的線條渲染清晰可見的圓角線帽。

• 為了讓線條粗細更加一致，調整邊框寬度/粗細來達到稍寬或者稍厚會比使用1pt的細曲線或者斜線更好。
• 消除不必要的模糊像素。這在你需要使用圖形自身標記自己的時候將會很有效。
• 通過復制圖形或者邊框（同一方向）來輕微調整圖形的粗細。
• 如果圖標可以有小模糊鋸齒能夠為圖標的其他部分提供一定幫助，這也是可以的。

當然還有其他有關于如何平滑抗鋸齒的技巧，但是我剛才所說的是我從中獲益最大的。

什么造就了一枚好圖標？

這是個問題！尤其是當圖標包含了很多設計原則的時候。我在我的圖標設計課程里面通過講我在Flinto工作遇到的一些故事來描述我是如何造就一枚好圖標的。

其中的一個原則就是使用熟悉的符號并且讓他顯眼。當我們開始為Flinto的主頁面的畫布設計圖標的時候，內森有一個想法，我們可以設計一個圖標讓我們回憶起艾西勒的住宅。艾西勒是一位建筑師，他設計了中世紀現代建筑的住宅，這種風格的住宅在加州很流行。

艾西勒的中世紀現代建筑的住宅給了我們靈感去探索設計一個獨特的“home”圖標。我們認為這個想法很酷而且內森也買了一套使用這種設計元素的房子，所以我們對這個想法很有熱情。我做了很多個home圖標的概念設計，嘗試著將艾西勒住宅的特點萃取到一個16*16正方形的圖標里面，而且在圖標不添加色彩和透明度效果。我們發現這些看似巧妙的圖標并沒有很好展現圖標本身的職責而且作為home圖標也不夠顯眼。于是我們決定做一個直觀并且能夠表達艾西勒住宅不對稱特點而且對其他用戶而言有高辨別度的圖標。

直觀勝過巧妙，我們選擇了底部中間圖標作為home鍵。另外評價一個好圖標的原則是他是否能夠與周圍的元素看上去融洽。這些元素包括圖標周圍的UI，鄰接文本的大小和字重，操作系統的習慣（譬如說，在mac os下cmd+s是保存，而在win下則是ctrl + s），以及其他圖標的集合。

所以盡管home圖標基本上是單獨存在的，但是工具圖標，手勢圖標，排版圖標都是集合方式存在的。設計圖標的集合的挑戰是很大的。你會在設計一個圖標集合設計到一半的時候發現你所使用的視覺隱喻不能夠適應每一個這個集合里面需要的圖標，這意味著你需要重新做一遍。

這種情況通常發生在手勢圖標上（上圖是以200%比例顯示）現在這些圖標看上去很簡單和直觀，然而我們在設計他時是有很多限制條件的，并且還要考慮未來的兼容性。一些我們在這里展示的圖標還沒有出現在Flinto中…但很重要的一點是，在遇到有需要的時候，我們設計的圖標集能夠擴展并且容納它們。

「超實用的中文字體打包下載」

1. 《中文字體來咯！12款懷舊風格的字體免費打包下載（個人非商用）》
2. 《中文字體第二彈！12款手寫風格的字體免費打包下載（個人非商用）》
3. 《吸睛利器！20款適合作為標題的字體免費打包下載（個人非商用）》
4. 《27款張力十足的中文書法字體免費打包下載（個人非商用》

原文鏈接:?Designing the Icons for Flinto’s UI
譯文出自 :?掘金翻譯計劃
譯者 :?edvardhua
校對者 :?Ruixi,?CoderBOBO