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

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

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

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

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

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

色彩

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

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

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

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

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

文字

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

而在落地移動(dòng)設(shè)備時(shí)，則有幾點(diǎn)需要注意：

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

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

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

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

icon

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

組件、模塊、頁面

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

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

UI Review

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

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

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

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

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

作者：就不，公眾號(hào)：豬三的日常

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

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