使用 8px 做隔線佈局
講述設計系統文件的重要性，以使用 8px 作為隔線佈局為例
意識問題
不管在哪個領域，如果能在任何混雜的環境中，建立一套共通的語言，都是一件令人振奮且值得追求的事。身為介面設計師，在創造產品與外部客戶溝通的唯一橋樑前，我們總要經過內部團隊的溝通、整合、重組各方觀點的過程，以利最後達成共識往下一步前進，但這以往都伴隨著龐大的溝通成本和資訊重建困難，或是更多的隱性成本，像是常常遇到這幾種狀況，例如：
- 請問一下，這個按鈕能不能過去一點？（但你永遠都不知道一點到底是幾點）
- 工程師拿著你的設計稿問：「這個如果螢幕寬度是320px、360px、720px、1024px、1440px 、1920px，螢幕解析度是……這按鈕、選單、輸入框……的推擠距離是多少呢？對了還有圖片的高度 ?」（滿頭黑人問號）
- 老闆：「怎麼做可以讓客戶對我們的產品更有信心？」（你乾脆問我人生意義何在好了）
除了這些溝通的問題，好讓畫面的呈現得到內部的共識外，要如何讓一個產品能令外部用戶提高信任感，並兼具易用性、美感的需求，是介面設計師的基本責任。在我們不能完全決定專案的方向時，我們首先能做的，就是完善自己的設計系統。
顧好自己，然後呢
當你以為將自己的系統完整後就能十分順暢，卻沒有意識到整個公司內部，還有其他多個團隊也在進行設計作業，每個專案性質都略有差異。在專案中，只要有多個設計人員團隊共同合作，若沒有一個既定的規則文件，也不免會遇到每個人使用設計習慣不同，而讓每個設計成果不好管理的狀況 — — 這也是我開始思考要如何使用一個系統，去解決這種模糊不清所造成的隱性成本。
那我們開始吧
如果能找到一種系統化的方式，讓介面能兼具美感、佈局、一致性，是一件非常令人興奮的事情。當我發現 8px 的網格系統，除了整個佈局精美流暢外，也找到了在每個元件的間距和大小的系統性規則，能達到內、外部整體的一致，還能套用在網頁、行動裝置等多個領域，便讓我深以為然，決定以這樣的方向鑽研下去。
一致性的介紹
一致性的好處甚多，使它成了許多不同設計領域中的大原則；至於美感上的好處，在這邊就不贅述。我想強調的是，所謂在開發上的一致性問題，也就是我們常稱作的內部一致性和外部一致性。
內部一致性
泛指你目前可能正在設計的功能和平台，讓他的整體視覺、圖標、互動模式能夠一致，這樣可以避免使用者在觀看的不同頁面的時候，因為介面的「不一致」進而導致使用者的疑慮，無法符合使用者在視覺上的期待，嚴重時會間接的影響介面上的轉換率。
外部一致性
在大系統的設計中，會特別強調這個問題，特別是對於有多個產品線的公司，每個設計團隊在各自開發時，會更難達成這樣的一致。這時候，會需要時常召開跨部門的設計會議，目的就是分享各個工作上設計的困難，與大家在每一次的會議中，都能不斷的達成對各產品的認識見解，並且規劃出共同的設計規範，如此你能有效減少用戶的學習成本，因為當他在使用你的產品時，他相對的也在熟悉你其它的產品性質，像是Adobe、蘋果系列的產品。
不使用現成的模板(framework)？
一個系統除了美感之外，若沒有背後一個可靠的思想，是無法持久的。當我們已經有了Bootstrap、Pure 、Foundation、Semantic ，為什麼我們不使用他現成的佈局方式呢？
大部分的模板(framework)提供了易維護的框架，多個現成的元件，提高大部分的網站的基本素質，但沒有提供進一步標準的測量單位，而沒有這樣一致的測量單位，也容易讓不同頁面之間的佈局略有差異，當發現同一個網站的跳轉畫面缺少一制性時，便使用者預期頁面顯示的結果不一，降低使用者對產品信任。另一方面，在大多使用者不經思考理解的直接套用下，反而讓每個網站的結構大同小異，形成了另一種對框架的既有印象「套版」，卻遺忘了原本利於開發維護的初衷，好的精神是該被保存，而進一步的去優化細節則是開發者的責任。我們現在使用這8為單位的測量系統，去進化除了佈局以外每個元件的細節，我們選擇這樣的方向，去努力達到整體一致性，當然嚴謹的規範有好也有壞，完全會取決專案真實的狀況做選擇。
選用 8 為增量的單位
致力達到最好的畫面視覺感受，是在設計上一個明確的方向。不過在目前流行響應式設計開發的網頁下，如何在每個裝置中並且畫面都可以自由拖拉的狀況下，都達到最好的畫面佈局，成了開發上的一大難題。不過，8的增量來新增元件可以讓大部份設備中的佈局與元件的關係，達成一致的比例，較不容易受到裝置尺寸的影響，而讓元件的比例變形，導致長寬的尺寸進入小數點的狀態，此時就會造成像素無法佔滿整個單位，會以比較弱的光去顯示一個像素。以下舉個例子，當將 4px 與 5px 的網格乘以 1.5 倍時，5px所得到的成像為小數點，而出現像素點不滿 1px 且為小數點的情形，就會看起來比較模糊，如下圖。
小數點的影響
在向量圖成像的過程中，會先繪製向量圖的邊界，在各邊界中包住幾個像素點，就用幾個像素點顯示（如下圖），你會發現有鋸齒狀，畢竟螢幕並不是完美的，是由肉眼辨別不出的一個個像素點構成，即便是用數學算出來的向量圖，也沒辦法完美的顯示。
所以接下來為了優化圖像，在顯示設備上做了抗鋸齒的處理(anti-aliasing)，透過這個信號處理的步驟，在邊緣的部分加入強度比較弱的像素（如下圖），這樣一來，就可以騙過使用者的眼睛，如果螢幕夠好，你可以看到一個接近完美的向量圖示。但這個抗鋸齒的過程與前面提及的小數點狀況是一樣的，在你縮小圖片的時候，抗鋸齒的部分就讓你的圖片看起來模糊，你可以在設計時，透過顯示像素點的工具，試著去做調整，讓水平及垂直線的抗鋸齒看起來理想，或者是在整體設計時遵循著 8px 原則，這樣在顯示器計算時就比較不會出現小數點情形，或因為增加抗鋸齒的處理看起來變模糊。
為什麼一定要是8為單位呢？
以較常見的裝置尺寸為例，都是能用 8 整除的，這樣我們就能確保在該裝置，圖片和素材的質量可以達到最佳的狀態，而不是其他像是6或10的單位是不整除的，我們可以從下圖中來表述這點，以市佔率最高的裝置排序。
數據參考：http://gs.statcounter.com/screen-resolution-stats/all/taiwan#monthly-201605-201705
iPhone的手機螢幕無法遵守8px的規範？
是的，375x667的螢幕尺寸是iPhone常見的螢幕大小，而他無法整除於8px，Apple本身的產品也未遵守此規範，反之Material design(google近期提出的規範)則是完全遵守，但Ｍateral design並未對其他相關平台硬性規定需遵守。而他們的差異性，筆者自身認為這與他們本身定位規範的用途和環境背景有很大的關係，對於Apple來說他們有強大的顯示器，對於這樣解析度失真的風險極小，甚至正常人是無法察覺的，所以他們能夠不完全去著重在這方面的問題。但Material design是一個針對開源跨平台和大型系統嚴謹的設計規範，甚至每家在開發他們系統的公司也有自己對於此系統的詮釋，變數較多，所以他們必須在此做出這樣的建議和規範，而這也是對於網頁或是Andriod這樣的開源平台很友善的做法，一樣能達到良好的外部一性致，也是不少的大企業採用的方式。
Airbnb的網站也是採用此方式: https://www.airbnb.com.tw/
那4不行嗎？
是可以的，使用4也更能符合iOS元件的單位，若你的設計系統是偏向iOS的那可能會比較適合。但為什麼我今天選擇8呢？文章頭也有提到，這個設計系統是為了有效降低溝通成本，且能保證產品元件的質量，以8來說的話他更能凸顯出元件距離的差異性，也就是任何人都可以用肉眼輕易辨識此段距離，更能讓一致性的優點讓更多人感受到，此外這樣的缺點在iOS中的影響也不大。當然最後必須對你的團隊，產品，平台和受眾群體做出合適的決定。
優點
有了這樣的系統，在團隊上對工程師來說，將前端程式視覺化就會非常方便，不僅降低了維護成本，也大幅提升設計師和工程師的溝通效率。擁有對於共同基本單位的認知，管理層也不敢僅憑自己的喜好指使破壞畫面結構，因此可說是大幅減低整體團隊的溝通成本。以設計師來說，能建立不只是大概的格線佈局，對於每個元件間能找到更嚴謹的一致性，並提高整體設計的質量。
缺點
若使用此觀念設計網頁時，雖然8px的整體佈局能讓圖片質量和素材發揮到最好的視覺效果，但在實作前需要對前端頁面一定的理解，特別是響應式設計以百分比做思考的切版原則，像是圖片框使用padding(內距)%數做推擠，需團隊對此有一定的熟悉度與堅持，接下來若有時間會整理網頁實踐8px設計的過程，再請大家多交流。
另外探討並遵循著這些設計規範，能夠幫助我們在工作中做出不會出錯的設計，同時提升工作效率和說服力。但是隨著自身經驗的累積和成長，需要對此產生警惕，如果只侷限在別人制定的規範裡而不反思，很容易陷入既定工作狀態中，很難做出創新的設計。
參考資料
https://material.io/guidelines/layout/metrics-keylines.html#metrics-keylines-keylines-spacing
https://builttoadapt.io/intro-to-the-8-point-grid-system-d2573cde8632
談論到這邊，算是自己對這樣設計系統的探索告了一段落，也請大家如果有想補充的或是觀點上的其他想法都能留言讓我知道。一方面也想到庫克在MIT演講談論到AI的一段話，庫克說，他並不擔心人工智慧會讓電腦擁有像人類那樣的思維能力，相反，他擔心的是，人類像電腦那樣思考問題 — — 摒棄同情心和價值觀，並且不計後果。
