視覺設計師作為展示產品最終形態的執行層，產品上線前走查視覺與交互還原是必經環節，而留給設計師走查修改的時間其實非常少。有時候為了配合產品上線時間，通常只能犧牲一些細節，在下一次迭代進行優化。
為了每一次上線的產品都能夠得到更好的還原，這就需要設計師去了解開發到底是根據哪些規則還原我們的設計稿，以及在每一次製作和交付設計稿的時候，我們應如何設定好每一個細節的規則。
開發：這裡已經完全對齊了。
視覺：看起來還沒完全對齊，我的圖也沒有切錯吧？
開發：字體大小和間距都是按照視覺稿來的。
視覺：這裡間距偏差這麼大，為什麼不按照視覺稿？
開發：視覺樣式好多，每個設計師的間距好像也都不一樣。
視覺：……
我們經常會聽到身邊的設計師與開發哥的一些對話，關於對齊，大小，間距等設計還原問題經常會討論很久。甚至有時會覺得，幾個像素的間距是不是有必要這麼糾結？
以我較常接觸的雲產品官網為例，雲產品官網體量龐大，單個頁面或信息模塊的樣式複用可高達上百個子產品頁面，此時第一個模塊設計的規範性，擴展性，複用性則變得尤為重要。
所以為了讓設計方案更加合理，為了讓合作更加高效，這裡總結一些設計經驗，與大家一起探討～如有錯誤，歡迎指正～
本文將從以下三個方面，思考作為視覺設計師，應當如何讓設計更加合理有效：
- 視覺處理（設計）
- 設計邏輯（方法）
- 交付走查（合作）
一、視覺處理
1. 字體結構
網頁設計中，我們總避免不了與字體打交道，字體也經常是我們在設計中容易忽視的部分，而經常出錯的原因往往是因為我們對文字的理解不夠清晰。相比西文字體，中文字體結構複雜，字庫龐大，網頁的渲染效果會比西文字體艱難很多。
但無論是中文還是西文，我們經常需要用到的無非是字體大小，字重，字色，還有就是經常被我們忽視的行高和行寬，我們從西文字體提取三個最主要的因素，即字高、行高、行寬。
基於西文字體的結構轉換為中文，我們可以理解為，字高指的就是我們肉眼所能看到的字體的實際高度，而行高指的是字高+上邊距和下邊距。反過來說，行高減去字高除以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，不會太大，也不會太小，同時保持著秩序，讓設計更加理性。對於團隊合作，設計師與開發也將更有默契，不必再為不清不楚的間距浪費時間。
2. 有效切圖
關於切圖，切圖之前應跟開發確定好輸出的格式和尺寸，確定應該用 SVG，一倍圖或是兩倍圖，SVG體量小渲染質量好，單色使時還能替換顏色，PNG則通常用在實景圖，一倍圖和二倍圖則根據實際需要進行輸出。
如果要做分層動畫，那我們就需要分層切圖，如果桌面端和手機端樣式差別較大，那我們需要和開發溝通好如何實現，是否需要特殊切圖，所有的特殊切圖合特殊樣式，我們都應該提前跟開發溝通好。
交付走查
1. 交互細節
如果某個控件或信息模塊交互樣式較多，那我們可以有一個空白畫板來清晰的標註這些狀態和樣式。很多開發在還原過程中都是一手視覺稿一手交互稿，但視覺設計師作為展示產品最終形態的執行層。
很多情況下，視覺階段依然會有很多需要跟交互和產品溝通修改的地方。所以為了避免遺漏修改點，視覺稿應該呈現最完整的設計細節，這樣也會很大程度上節省開發的時間，減少出錯的機率。
當頁面內容有一定的更新頻率，我們則需要標明視覺樣式規範，以及後續的運營規則，完整的收尾，可以避免產品經常過來尋求上線素材和規範。有些需要隔三個月或半年才上線的需求，清晰的標註也能幫助我們快速回憶起需求背景，讓我們在日常工作中保持頭腦清晰，有條不紊，這其實也是在給我們自己節省時間。
2. 重構稿走查
走查還原的時候，在Chrome瀏覽器的空白處右鍵點擊檢查，找到裡面的Computed窗口，我們可以找到具體的文字、間距、投影等屬性。有時候一些比較細微的調整，我們可以雙擊具體的數值進行調整，調整到自己滿意之後再給到具體的數值給開發，這樣就不用在我們搖擺不定的情況下，造成雙方的困擾。
最後，在預發佈的時候，我們可以利用SwitchHosts的客戶端來配置開發環境進行體驗，保證最終上線的效果。
作者：李煜煌，公眾號：超煩蜘蛛俠
來源：https://mp.weixin.qq.com/s/3Q1njIc8-d3Cm_hmFv_S8Q
本文由 @李煜煌 授權發佈於人人都是產品經理，未經作者許可，禁止轉載
題圖來自Unsplash，基於CC0協議