2019-6-6 資深UI設計者
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
視覺設計師作為展示產品最終形態的執行層，產品上線前走查視覺與交互還原是必經環節，而留給設計師走查修改的時間其實非常少，有時候為了配合產品上線時間，通常只能犧牲一些細節，在下一次迭代進行優化。為了每一次上線的產品都能夠得到更好地還原，這就需要設計師去了解開發到底是根據哪些規則還原我們的設計稿，以及在每一次制作和交付設計稿的時候，我們應如何設定好每一個細節的規則。我們經常會聽到身邊的設計師與開發小哥的一些對話，關于對齊、大小、間距等設計還原問題經常會討論很久，有時甚至會覺得，幾個像素的間距是不是沒有必要這么糾結。以我較常接觸的云產品官網為例，云產品官網體量龐大，單個頁面或信息模塊的樣式復用可高達上百個子產品頁面，此時第一個模塊設計的規范性、擴展性、復用性則變得尤為重要，所以為了讓設計方案更加合理，為了讓合作更加，這里總結一些設計經驗，與大家一起探討。
本文將從以下三個方面，思考作為視覺設計師，應當如何讓設計更加合理有效：
1. 字體結構
網頁設計中，我們總避免不了與字體打交道，字體也是我們在設計中經常容易忽視的部分，而經常出錯的原因往往是因為我們對文字的理解不夠清晰。相比西文字體，中文字體結構復雜，字庫龐大，網頁的渲染效果會比西文字體艱難很多。
但無論是中文還是西文，我們經常需要用到的無非是字體大小、字重、字色，還有就是經常被我們忽視的行高和行寬，我們從西文字體提取三個最主要的因素，即字高、行高、行寬?；谖魑淖煮w的結構轉換為中文，我們可以理解為，字高指的就是我們肉眼所能看到的字體的實際高度，而行高指的是字高+上邊距＋下邊距，反過來說，行高減去字高除以 2 就能得到我們的上下邊距，行寬指的就是整個文本的寬度。
舉一個圖文模塊的例子，圖（1）中我們肉眼所看到間距，在我們做標注時，看到的其實是圖（2）中的三個色塊，我們實際給到開發的標注，是色塊的尺寸和色塊之間的間距，以及詳細的文本屬性。
2. 文字行寬
關于行寬，以設計 banner 的標題及描述文字為例，定義行寬是為了讓文本在極限寬度的時候進行換行，再固定好配圖的尺寸，從而得到文本與配圖之間的間距，定義行寬、行數、字數，能夠更好地為運營人員規范輸出的文案，避免因字數過多或過少所造成的視覺不平衡。
當我們處理無序列表時，四個短句文本，長短不一，同樣我們需要限制一行文本寬度，定義一行能承載的最多字數，以及跟產品確認可能出現的最多字數的情況，確認模塊設計的可行性，保證后續運營人員在替換文案的時候不會出錯。
以上兩個例子都是我們設計文字經常出錯的地方，正確的定義規范，無論是交付開發或者其他下游，都能保證模塊設計的可擴展性及規范化，保證最終上線質量。
3. 圖標視錯覺
關于圖標，這里提到一個幾何學錯覺的概念，視覺上的大小、長度、面積、方向、角度等幾何構成，和實際上測得的數字有明顯差別的錯覺，稱為幾何學錯覺。人眼所接受的視覺平衡，往往不是設計軟件上精準的對齊，我們總是會通過調整間距、大小或角度來補齊一些負空間，讓畫面保持視覺平衡。
以客戶案例的卡片樣式為例，客戶案例在 to B 產品中是必不可少的模塊，我們的客戶 logo 有的圓形，有的長方形，有的純文字，尺寸差距比較懸殊，這種情況下我們需要給他限制一個高度，在這個高度以內，再根據 logo 本身的體量來調整圖形的大小，處理好 logo 的視覺平衡，最后紅色區域是 logo 的實際尺寸，藍色區域則是我們實際給到開發的尺寸，從開發的角度來看其實就是占位符，而規范的作圖則是把占位符的透明度調整為 0，以占位符為實際有效作圖區。
UI 設計中通常以「向右箭頭」來表示當前鏈接可跳轉，使用箭頭作圖時，當我們把箭頭和文字右對齊，箭頭其實會更加的往外突出，這時候我們會人為的往里邊推 1 至 2 像素，最后實際給到開發的也應該是紅框的尺寸，也就是 16×16 的占位圖尺寸。
「按鈕」也是 UI 設計中常用的組件，當我們在按鈕里使用圖標加文字時，由于文字的體量更大，整體重心會往右偏，所以我們通常會認為讓圖標和文字整體往左偏移，使整體的視覺更加平衡，實際給到開發的，也是兩個不同等的邊距。
1. 理性的設計
在 iOS 和 Android 的設計規范中，都有提到過使用「8點柵格」的概念，即建議使用 8×8 的網格系統進行設計，我們都知道 0.5px 的渲染在屏幕上會變模糊，之所以使用 8 的倍數是因為市場上主流的屏幕都能被 8 整除，使用 8 點柵格能夠的讓我們所設計的內容樣式在屏幕上保持高清顯示，而在日常的網頁設計中，我其實更加傾向使用 4 點柵格系統。
我們以下圖 4 組數列為例，大家可能都曾使用過上面三組藍色數列中的數值應用到設計中，或以 5 為倍數，或以 10 為倍數、或以偶數為設計邏輯，而實際上以 5 為倍數則會包含奇數，奇數會導致控件文字對不齊，當 5 的倍數和偶數同時使用時，則會出現類似 14、15、16 這種相差為 1 的相鄰數，這樣會導致我們的尺寸規范不好定義規則，難以形成邏輯，而使用 4 的倍數，他們的公差為 4，不會出現奇數，也不會出現相鄰數。
我們再看看一些通用的尺寸定義，例如常見的 icon 設計尺寸都是以 4 為倍數。
常見的網頁柵格及其所均分的卡片和間距，也都是 4 的倍數，如果我們的控件尺寸，圖標尺寸和間距都使用 4 的倍數來定義，那所有的信息模塊自然都能更好的相互適應，層層遞進的邏輯關系也會更加明顯。
我們把 4 點柵格的設計邏輯套用到卡片設計上，第一眼我們可能比較難去評判兩者的好壞，但仔細看，我們就會發現第一個卡片的按鈕沒有水平對齊，相互之間的間距尺寸也是沒什么邏輯性。假如今天調整一個 8px 的間距，明天調一個 10px 的間距，設計師走查起來也很難發現有問題，對接的開發也難以有一個可以參考的規范標準。而相對的，以 4 為倍數，我們會發現所有的信息都會完美對齊，而且倍數為 4 的每個數值之間公差為 4，即使設計稿微調了 1px 我們都能很快發現，開發在還原設計稿時也會有一個衡量標準。
網格設計在報紙、雜志、海報等平面設計領域中也是十分常見的設計手法，通過建立網格，考究每一個信息模塊在頁面中的擺放位置，大小占比，顏色占比，從而使得頁面信息保持秩序、均衡。
使用 4 點柵格系統，通過理性、秩序、邏輯的設計方式賦予畫面秩序感以及閱讀體驗，而以 4 為倍數，每個數字之間都相差為 4，不會太大，也不會太小，同時保持著秩序，讓設計更加理性。對于團隊合作，設計師與開發也將更有默契，不必再為不清不楚的間距浪費時間。
1. 有效切圖
關于切圖，切圖之前應跟開發確定好輸出的格式和尺寸，確定應該用 SVG，一倍圖或是兩倍圖。SVG 體量小渲染質量好，單色使用時還能替換顏色，PNG 則通常用在實景圖，一倍圖和二倍圖則根據實際需要進行輸出。
如果要做分層動畫，那我們就需要分層切圖，如果桌面端和手機端樣式差別較大，那我們需要和開發溝通好如何實現，是否需要特殊切圖，所有的特殊切圖和特殊樣式，我們都應該提前跟開發溝通好。
2. 交互細節
如果某個控件或信息模塊交互樣式較多，那我們可以有一個空白畫板來清晰地標注這些狀態和樣式，很多開發在還原過程中都是一手視覺稿一手交互稿，但視覺設計師作為展示產品最終形態的執行層，很多情況下，視覺階段依然會有很多需要跟交互和產品溝通修改的地方，所以為了避免遺漏修改點，視覺稿應該呈現最完整的設計細節，這樣也會很大程度上節省開發的時間，減少出錯的幾率。
當頁面內容有一定的更新頻率，我們則需要標明視覺樣式規范，以及后續的運營規則，完整的收尾，可以避免產品經常過來尋求上線素材和規范。有些需要隔三個月或半年才上線的需求，清晰的標注也能幫助我們快速回憶起需求背景，讓我們在日常工作中保持頭腦清晰，有條不紊，這其實也是在給我們自己節省時間。
3. 重構稿走查
走查還原的時候，在 Chrome 瀏覽器的空白處右鍵點擊檢查，找到里面的 Computed 窗口，我們可以找到具體的文字、間距、投影等屬性，有時候一些比較細微的調整，我們可以雙擊具體的數值進行調整，調整到自己滿意之后再把具體的數值給到開發，這樣就不用在我們搖擺不定的情況下，造成雙方的困擾。
最后，在預發布的時候，我們可以利用 SwitchHosts 的客戶端來配置開發環境進行體驗，保證最終上線的效果。
藍藍設計( m.ssll180.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。