在UI設計師的開發流程中，UI設計就是在和細節計較，不斷重復從討論初稿到最終上線的過程，給用戶帶來更好的體驗。

在UI設計師的開發流程中，UI設計就是在和細節計較，不斷重復從討論初稿到最終上線的過程，給用戶帶來更好的體驗。

如圖所示，UI設計師在APP開發過程中最常見的一個問題：

“你只設計了一套基于iOS的設計稿（375X667px），但是安卓開發之后于設計圖相去甚遠，甚至iOS開發也有一定差異性，這是為什么呢？”

“你只設計了一套基于iOS的設計稿（375X667px），但是安卓開發之后于設計圖相去甚遠，甚至iOS開發也有一定差異性，這是為什么呢？”

市面上現有iOS和安卓的手機的尺寸

在做適配頁面的時候，不同移動設備有不同的尺寸，安卓陣營和iOS陣營的手機尺寸千千萬，設計師雙全難敵四手，更何況這么多尺寸和各種不同環境。

我們可以先從設計規范的幾個元素：色彩、文字、icon、組件、模塊、頁面和落地頁面進行一遍落地頁面的由點到面的復盤，找出影響設計落地的各方面因素，從源頭上解決我們在設計到開發落地過程中遇到的問題，最大程度上去避免它。

色彩

色彩上，包含主視覺色、輔助色、操作色、警告色，還有一些應用常用的同色系漸變色。

單色色彩問題不大，在一些主色點綴等的地方注意即可。

漸變色則需要注意，設計可能會采用兩用方式：

• 直接切圖，切圖的話沒啥問題，不會變化太多，注意適配問題即可。
• 讓開發直接讀取數據來開發，主要是開發直接用數據做漸變會有一點問題，設計會采用從左到右，或者從左上到右下等等，總之就是漸變的角度會有不同的變化；而開發卻在固定的開發程序里輸入漸變數據，且為了應用的穩定性，一般就是兩組色值；如果有三組或以上則一般采取切圖的方式，這里就會造成一定的差異性。

而且不同移動設備色彩顯示差異，各個設備屏幕色域色準不同，也是影響落地效果的一個因素。

文字

文字上，規范里常規的規定是包含字體大小和對應層級文字的顏色灰度。

而在落地移動設備時，則有幾點需要注意：

• 安卓與iOS字體大小的單位有所不同，會影響顯示效果，需與開發協調對應字符的層級比例關系。
• 字體不同，安卓是黑體、iOS系統是蘋方，字體會影響文字顯示觀感，影響落地效果。
• 字體默認顯示的排序有所不同，我的Mac上谷歌瀏覽器的默認中文字體排序是蘋方，朗廷黑，微軟雅黑；而火狐瀏覽器的默認中文字體排序則是蘋方，冬青黑體，微軟雅黑，文泉驛微米黑；使用者電腦里下載的字體也會影響瀏覽器默認字體排序。此外，還有Windows電腦及不同瀏覽器，手機的各種瀏覽器，有不同的默認默認字體排序。

• 字體字重，在設計軟件上與實際開發環境的不同，設計稿可以顯示常規的集中字重，Regular、UItralight、Thin、Light、Medium、Semibold、Bold、Heavy、Black等。如下圖所示，不同字體在PS或sketch中有不同的字重，設計的時候我們可以選擇細微差別的字體字重如Regular（常規）和Medium（中等）來做文字層級區分，

但是開發在編程的時候，字重顯示是用數字0-900來表示，且大致分為1-400（對應normal）、500- 700（對應bold）、800-900（對應bolder）這三個層級，在同層級里調整字重數值變化不大，只有跨層級才有明顯變化。

• 字體行高顯示，不同瀏覽器、不同字體，文字行高不同，例如宋體的文章行高>黑體的行高，因此行間距也會不同，段間距也會發生變化，也是導致設計稿落地差的一個原因。我們需要與開發核對字符、行高、行間距，確保在對應模塊差異性達到最小。
• 若是涉及H5，則還有一層瀏覽器的適配因素需要考慮。

icon的差異性體現在切圖適配、還有設備色差、icon視覺平衡這幾點上，設計的時候注意同模塊的icon線條粗細一致，色塊顏色飽和度一致，

組件、模塊、頁面

組件、模塊和頁面都由上述色彩、文字、icon等組成，影響是面性的，一個元素出現問題，會影響整個模塊甚至是頁面。

我們從細節處調整，由點及面，這樣可以避免大部分頁面落地差異性問題。

UI Review

只要思想不滑坡，辦法總比困難多。在規避了上述列舉的種種問題，我們可以避免90%左右落地稿與設計稿差異性的問題。

最后，還有一個方式來做彌補，那就是在開發完成之后上線測試之前，我們還可以在核對一遍落地稿與設計稿之間的區別做一個頁面的UI Review，對照設計稿與落地頁面，檢查一遍落地效果。有差異的標明并記錄下來，將最終的表格上交開發修改，并在開發修改后再次核對，以確保提出的問題在合理范圍內都被調整或改正。完成落地驗收，復查也可以再一次檢驗交互以及交互改進。

記得剛入行時，我的老大跟我說過一句話，讓我至今印象深刻：“UI設計就是在和細節計較，不然我們是在和別人比誰畫的圓形更好看，誰畫的方形更突出么？”。

設計一定要抱有敬畏之心，對產品負責，對自己的設計負責。我們的目標就是完善設計，給用戶帶來視覺上的舒適體驗。

我們不斷重復“討論-初稿-設計-開發-落地頁UI Review-修改-定稿-上線”的流程，從熟悉流程，到展現自己的創意，再到解決各種開發中實際遇到的問題，在工作中不斷學習和沉淀，成為更好的自己。

作者：就不，公眾號：豬三的日常

本文由 @就不 原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash， 基于CC0協議