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

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

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

市面上現(xiàn)有iOS和安卓的手機的尺寸

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

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

色彩

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

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

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

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

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

文字

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

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

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

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

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

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

icon

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

組件、模塊、頁面

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

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

UI Review

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

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

記得剛?cè)胄袝r，我的老大跟我說過一句話，讓我至今印象深刻：“UI設(shè)計就是在和細節(jié)計較，不然我們是在和別人比誰畫的圓形更好看，誰畫的方形更突出么？”。

設(shè)計一定要抱有敬畏之心，對產(chǎn)品負責(zé)，對自己的設(shè)計負責(zé)。我們的目標(biāo)就是完善設(shè)計，給用戶帶來視覺上的舒適體驗。

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

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

本文由 @就不 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash， 基于CC0協(xié)議