<b>本文講的是我是如何為 Mac 應用 Flinto 設計 UI 圖示的，</b>
<b></b>
設計總是情境驅動的。我驚奇的發現專業Mac應用的情境設計是最複雜的工作之一，就算你隻是設計圖示。工具欄（Toolbar）的圖示大小必須一緻，而且最好根據圖示知道用途。這與側邊欄的圖示和下拉菜單看到的圖示的設計原則上有所差異。 一些圖示會以不同的尺寸和不同的樣式重複出現在不同的地方。不是隻要調整圖示尺寸或者樣式就能夠适用于每一個使用者界面的，是以我在設計圖示的時候需要考慮到圖示是否具有通用性以及不破壞使用者界面的整體一緻性。
我都是在紙上開始設計圖示的，我一直堅信這個原則。我會在紙上畫下我想象中這個圖示的所有可能性，譬如設計的這個圖示包含了什麼暗喻以及圖示可能需要/産生的變化。是以在概念設計的這個階段上，我盡量讓自己将所有的内容都寫在我的紙上，甚至是一些不相關的想法。下一步則分析概念設計中的内容如何能夠更好符合我們設計的目标，已有的限制以及這個圖示的情境聯系。
我發現将繪圖構思和評估這兩個過程分開進行是很至關重要的。前者的工作需要想象力，好奇心，而且持有自己主觀的判斷，是一個加法的過程，是心血來潮的創作。評估則需要批判性，實用性，以及需要考慮圖示背後一連串所延伸出來的隐喻，是一個做減法的過程。如果你嘗試同時做這兩件事情，那麼你會考慮不過來進而得不到任何結果。
通常來說，隻有一部分的設計想法會被儲存到電腦裡面。使用sketch可以提高我的生産效率并且在生産的過程中會有一些創造性的決定。但最主要的目的還是要完善和精煉圖示的形式，保證每一個圖示都是像素完美的。我對此具備相當大的熱情，我對其他忽視這個細節的人感到很煩惱。
像素完美其實意味着很多東西，它更像是一個想法而不是一個能夠具體描述的特征。像“注意細節”一樣，當被忽視的時候我們能夠很容易的感覺出來。完美的像素對小圖示的可辨識度有巨大的影響。想要實作像素完美不僅僅是将設計元素的像素網格對齊（如下圖）。這基本上來說就是在和鋸齒做鬥争。使用抗鋸齒是很好的一件事情，但它會讓圖像一些地方産生模糊，尤其是在對角線和曲線中。
舉個例子，我們想在圖層清單中加上一些注釋來表明哪些層是被隐藏或者是被鎖住的。當然給圖層加上隐藏和鎖定是很簡單的事情，隻需要點選按鈕操作一下就好了。我們考慮的是我們有一個小的注釋，他會占用一小部分空間，來注釋兩個已經隐藏和鎖定圖示。為了完成這個目标，我們的圖示必須要做到像素完美。我對我設計的8x8大小的圖示感到非常的自豪。
<a href="https://camo.githubusercontent.com/5bdfac36e99c2d8a7c3909c47a8505ea529a49fe/687474703a2f2f7777332e73696e61696d672e636e2f6c617267652f61343930313437666a773166326d306b30736c696b6a32306d383037786a737a2e6a7067" target="_blank"></a>
對于使用retina顯示屏的讀者，我們顯示**“一半尺寸”**的位圖，如圖1x的全像素圖示。對于非retina顯示屏的讀者，則使用**“雙倍尺寸”**的位圖，如圖2x的全像素圖示。 請以橫向模式顯示上圖來獲得最好的顯示效果。
在一個理想的世界中，一枚制作精良矢量圖示可以輕易地适應各種像素密度的輸出，并在所有對應尺寸中顯示效果良好。但是大部分時候，使用一倍大小的圖示并不能夠處理得到更高尺寸的圖示。你可能需要先做一個完美的兩倍尺寸的圖示，然後再調整成一倍尺寸來建立一個新的視覺滿意的圖示。在Flinto中至少一半的圖示都有其對應1倍和2倍尺寸，譬如貫穿整個過渡動畫設計面闆的"概念圖層"圖示。
針對于這塊感興趣的讀者，這裡有我是如何對Flinto圖示的抗鋸齒進行細調的技術細節。
重新調整和重新定位圖形來獲得看上去視覺舒服的圖形，盡管這樣處理後位置或者像素值會有小數點，但在這個階段視覺是重點。
隻使用曲線或者圓角時，至少要使用2px來渲染 90° 角的半徑圓，或者使用3px渲染180°角的半徑圓，來作為圓的線段末尾（如下圖）。1pt大小線的線段的圓角線帽的效果是很糟糕的，至少我們使用的螢幕都會将其放大三倍來顯示。
<a href="https://camo.githubusercontent.com/8e4c36fd9f1e76f82f581925f4c66cb281ba70c1/687474703a2f2f7777342e73696e61696d672e636e2f6c617267652f61343930313437666a773166326d306c61637a37786a32306d3830626d6468612e6a7067" target="_blank"></a>
沒有人想要模糊的線帽！隻有三倍大小（或者更大）的顯示器才能夠對1pt大小的線條渲染清晰可見的圓角線帽。
為了讓線條粗細更加一緻，調整邊框寬度/粗細來達到稍寬或者稍厚會比使用1pt的細曲線或者斜線更好。
消除不必要的模糊像素。這在你需要使用圖形自身标記自己的時候将會很有效。
通過複制圖形或者邊框（同一方向）來輕微調整圖形的粗細。
如果圖示可以有小模糊鋸齒能夠為圖示的其他部分提供一定幫助，這也是可以的。
當然還有其他有關于如何平滑抗鋸齒的技巧，但是我剛才所說的是我從中獲益最大的。
艾西勒的中世紀現代建築的住宅給了我們靈感去探索設計一個獨特的“home”圖示。
我們認為這個想法很酷而且内森也買了一套使用這種設計元素的房子，是以我們對這個想法很有熱情。我做了很多個home圖示的概念設計，嘗試着将艾西勒住宅的特點萃取到一個16*16正方形的圖示裡面，而且在圖示不添加色彩和透明度效果。我們發現這些看似巧妙的圖示并沒有很好展現圖示本身的職責而且作為home圖示也不夠顯眼。于是我們決定做一個直覺并且能夠表達艾西勒住宅不對稱特點而且對其他使用者而言有高辨識度的圖示。
直覺勝過巧妙，我們選擇了底部中間圖示作為home鍵。
另外評價一個好圖示的原則是他是否能夠與周圍的元素看上去融洽。這些元素包括圖示周圍的UI，鄰接文本的大小和字重，作業系統的習慣（譬如說，在mac os下cmd+s是儲存，而在win下則是ctrl + s），以及其他圖示的集合。
是以盡管home圖示基本上是單獨存在的，但是工具圖示，手勢圖示，排版圖示都是集合方式存在的。設計圖示的集合的挑戰是很大的。你會在設計一個圖示集合設計到一半的時候發現你所使用的視覺隐喻不能夠适應每一個這個集合裡面需要的圖示，這意味着你需要重新做一遍。
這種情況通常發生在手勢圖示上（上圖是以200%比例顯示）現在這些圖示看上去很簡單和直覺，然而我們在設計他時是有很多限制條件的，并且還要考慮未來的相容性。一些我們在這裡展示的圖示還沒有出現在Flinto中...但很重要的一點是，在遇到有需要的時候，我們設計的圖示集能夠擴充并且容納它們。
<b>原文釋出時間為：2016年05月11日</b>
<b>本文來自雲栖社群合作夥伴掘金，了解相關資訊可以關注掘金網站。</b>