Icon Design Workshop 會後紀錄（同場加映：用 Sketch 設計 Icon 時的超實作的秘訣）
感謝廣大的設計師朋友的意見！我更新了內容，將用遮色片的方式改採 layer style 的方式實現！檔案也一併做了更新
Hi Everyone ～又是一個好久不見，先祝大家新年快樂好了。
在這 2018 年的 12 月年末時節，老實說一無所成的我（唯一成就應該就是，去看布袋戲ㄅ）翻開我的 2018 New Year Resolution。
驚覺我他媽居然達成率很低 ^^
於是趕緊來趕進度，其中一項就是：實作在設計領域目前不擅長的事情。
老實說這件事情早已達成，今年我自己自學了 HTML 與 CSS，勉強學了一點點 JS 跟 React，其實也是有擴展到自己的技能樹。
不過下半年其實根本就是渾渾噩噩，所以就決定來開辦一次 offline 的 Icon Design Workshop。
然而，你知道的，一個人實在太懶了，有了其他人會是一個督促自己非常好的方式。所以我就很認真的思考了實作方式後，發了文找幾個小夥伴們。
於是就真的有人來惹～來惹來惹～像東風一樣來惹～（痛哭流涕）
在這次主辦中，難免還是有很多失誤的地方，譬如說時間抓不夠，以及實作部分有點無法確實應用本此選用文章裡面提到的方式。
不過我本人還是收穫非常多。因為人數很少，所以有辦法達成所謂的密集交流與更近一步的討論，所以討論到很多超乎原本文章的內容。
譬如說：
- 一個產品底下設計多個 Icon set 的可能考量
- 為了設計 tab icon 時針對挑選出來的品牌來運用個中品牌的元素來設計，所討論出來的要點
- 從文章提到的部分衍生實際的實例，以及自己在設計這些元素時會有的習慣
此外，還有每個人設計的思考邏輯，以及設計的習慣等等，都是令我覺得有拓展新世界的感覺。
總之，非常謝謝這次素昧平生的朋友來參與這次的 Workshop，未來我想我依然會想舉辦這種實驗性的 Workshop，讓大家可以一起彼此督促學習。
而透過這次的 Workshop，我想也記錄一下幾個用 Sketch 設計 Icon 的秘訣，未來在設計 Icon 時可以注意的部分。
1 - 畫板（Artboard）& 輔助線（Grid）設定
Google Material Design 萬歲！設計 Icon 的尺寸可用 8 倍數來設計，我固定使用 24*24 px。
並且使用參考線來設計 icon，參考線的設定則是 2*2 px 隔線來輔助。
2 - 確認 Icon 的視覺重量
在 Workshop 導讀的文章中，有提到避免視覺上的不平衡，可以將 Icon 模糊化，來確認重量上是否平等。
如果你是 Design Nerd，想確認視覺重量是否平衡，可直接利用 Sketch 實現：
- 將所有 Icon export 成 png 檔
- 將 png 檔丟到 sketch 上，利用右手邊的 blur 效果便可達成糊化效果
3 - 將線條轉換成方塊（Convert to Outlines），並且合併（Union） Icon
如果設計的 Icon 屬於線條型，並使用線條來設計，記得要將之轉成方塊，並且合併他。然後利用右上方的合併圖形將你設計的一個小 Icon 合併起來。
4 - 多多善用巢狀結構（Nested Overrides）、 Symbol 以及 layer style
Nested Overrides、symbol 與 layer style 的活用以及 sketch 的命名原則絕對是史上最讚的功能沒有之一。熟悉的人應該都知道：
- 只要元素會重複一次以上，就該設定成 symbol
- 命名一定要注意，將相同結構的東西分類起來，並且用 / 來區隔。Sketch 會自動照你的結構來分。
而在設計 Icon 前，最好先將品牌基準色製作成 layer style。
這麼做的原因當然是因為在運用到介面上時，要考慮為了呈現不同種狀態，可能會使用到不同種顏色來表示，或者是其他方式。
像上面這個 tab bar，我為了提示目前在 Main 主頁，採 Icon 顏色上的變更來告訴使用者。這時候若使用 Nested Symbol 的話就不用設計同一種樣式不同種顏色的 Icon 來表示，減少人力成本。
至於如何實現，整體步驟是這樣：
- 先將品牌色設定 layer style
- 設計好 icon 造型
- 將 layer style 的顏色套入 icon
- 將 icon 製作成 symbol
之後使用 icon 時，就只需要點一點即可。
5 - 將每個 Icon 加上 24*24 透明區塊
基本上雖然你在設計時是以 24*24 px 的畫板為基準來設計，但因為圖形可能有長、有寬，直接匯出出來使用會導致你的 Icon 有大有小。而在排版的時候，也會發現怎麼有胖有瘦的 Icon 導致你難以對齊，而工程師到時候開發也會增加人力成本。
所以這層透明方框原意就是讓你可以保持所有 Icon 大小都維持在 24*24 px 裡面。
開源分享：我的實作最後成品
非常不要臉的來分享自己的實作作品 — — 本次我用來實作的 Icon Sketch 檔案，讓大家可以觀察一下我的實作方式。
點此下載
此份檔案主要是拿來實作用 Netflix 的品牌元素來設計底下的 Tab icon。在討論後，汲取標準字的粗細、細長感來做。
這次實作並沒有說是因為覺得 Netflix 的 Icon 設計不好或什麼的，純粹是因為想借一個品牌來運用品牌元素設計 Icon。
在設計上也許還是有很多不足，大家看看笑笑就好。（掩面）
會開放給大家，也只是單純想說讓一些人可以更了解我在說什麼。如果你想分享，此份 Sketch 檔採 CC BY-NC-ND 3.0 TW，只要標注姓名、非商用、不改動，都可以和其他人分享。
對我而言，這次是非常好的練習，讓我更加知道這些技巧如何幫助我在未來設計介面時如何提升自己的工作效率。
把時間浪費在更好的事情上，這件事情是很有價值的。
填問卷，一起精進
最後，未來我還是會再舉辦多種不同的 Workshop 來跟大家交流。有興趣的朋友，不妨填一下下面的問卷，讓我知道大家對怎麼樣的主題有興趣。
或點此填寫：https://venetia8.typeform.com/to/SrDZW3
大家新的一年有什麼新年新希望嗎？希望不要像我一樣總是拖到最後一刻才面對喔 ^^!
