設(shè)計(jì)還原度到底是態(tài)度問(wèn)題還是技術(shù)問(wèn)題？本文介紹幾個(gè)實(shí)用的提升設(shè)計(jì)還原度的方法。

如果你參與過(guò)實(shí)際的項(xiàng)目開(kāi)發(fā)上線，必然會(huì)遇到一個(gè)合作中的難題——設(shè)計(jì)的還原度。

完美的設(shè)計(jì)稿一經(jīng)開(kāi)發(fā)實(shí)現(xiàn)后效果慘不忍睹，怎樣才能減輕還原的痛苦且達(dá)到很好的實(shí)現(xiàn)效果呢？

第一步，也是最重要的一步，設(shè)計(jì)師需要針對(duì)還原的重要性與開(kāi)發(fā)達(dá)成共識(shí)。只有大家意識(shí)統(tǒng)一，才能共同解決問(wèn)題。

一般來(lái)說(shuō)還原度的重要性為：用戶產(chǎn)品>B端產(chǎn)品>后臺(tái)。對(duì)于用戶產(chǎn)品最好是能做到像素級(jí)。

然后開(kāi)始我們具體的操作，從設(shè)計(jì)、標(biāo)注、還原3個(gè)環(huán)節(jié)去提升設(shè)計(jì)的還原度。

一、優(yōu)化設(shè)計(jì)文件，避免給自己挖坑

1. 文字

在界面設(shè)計(jì)中，文字往往會(huì)占比較大的比重，也容易影響最終效果。

文字在效果圖中最好按照中英文最好是單獨(dú)設(shè)置文字，開(kāi)發(fā)還原度會(huì)更好。英文使用SF Pro 、中文使用PingFang SC。你也可以使用craft插件設(shè)置每個(gè)字體樣式或Text Style，這需要把行高調(diào)成和開(kāi)發(fā)使用的system字體行高。

2. 對(duì)齊

我們經(jīng)常會(huì)在設(shè)計(jì)中遇到圖文對(duì)齊的情況，如下圖，在設(shè)計(jì)邊緣對(duì)齊時(shí)，需要考慮到默認(rèn)的文字行高（默認(rèn)行高一般是字號(hào)的1.2倍）。如果需要強(qiáng)行對(duì)齊邊緣，可以文字往上移，因?yàn)橛行C(jī)型的字體無(wú)法更改行高。

3. 特殊情況一定不能忽略

在設(shè)計(jì)中先考慮到一些極端情況，比如內(nèi)容過(guò)長(zhǎng)或過(guò)短，并在圖中做出示意。

例如微信小程序的表單組件規(guī)范：

by 微信小程序規(guī)范1.0

二、怎么標(biāo)注才完美

很多設(shè)計(jì)師開(kāi)始用sketch了，可以利用各種插件輕松導(dǎo)出設(shè)計(jì)規(guī)范，但在實(shí)際項(xiàng)目中，偷懶往往會(huì)造成后期更大的麻煩，合理利用標(biāo)注工具，節(jié)約的時(shí)間可以把一些容易出錯(cuò)的部分詳盡標(biāo)出。

這里列舉2個(gè)非常常見(jiàn)的容易出錯(cuò)的地方：

1. 關(guān)于動(dòng)態(tài)內(nèi)容的標(biāo)注

如果內(nèi)容是后臺(tái)上傳的動(dòng)態(tài)數(shù)據(jù)，界面的內(nèi)容展現(xiàn)則會(huì)出現(xiàn)多種情況，最好再補(bǔ)充一份設(shè)計(jì)展現(xiàn)邏輯的標(biāo)注文檔。

舉個(gè)例子：

設(shè)計(jì)一套數(shù)據(jù)展現(xiàn)的卡片，我們需要提供的設(shè)計(jì)輸出包括：源文件、效果圖、切圖、Html的標(biāo)注、設(shè)計(jì)規(guī)則的標(biāo)注。

如下圖：

在這個(gè)圖示中，把卡片的功能區(qū)域進(jìn)行了劃分，且把數(shù)據(jù)的可展現(xiàn)區(qū)域和對(duì)齊方式都做了說(shuō)明，以保證數(shù)字變化時(shí)也能呈現(xiàn)比較好的視覺(jué)效果。（ps：為了更直觀此標(biāo)注的其他部分做了簡(jiǎn)化）

2. 展現(xiàn)邏輯的標(biāo)注

這里給大家舉個(gè)tab的例子，如下圖，tab作為通用的組件，可能會(huì)出現(xiàn)2-n個(gè)，如果全部標(biāo)注一遍，費(fèi)時(shí)又不直觀。如果梳理一個(gè)展現(xiàn)邏輯，則會(huì)簡(jiǎn)單易懂。

三、你好我好大家好的驗(yàn)收方法

1. 規(guī)范宣講

視覺(jué)發(fā)布和規(guī)范宣講可以一同舉行，溝通開(kāi)發(fā)需要注意的實(shí)現(xiàn)要點(diǎn)。設(shè)計(jì)過(guò)程中忽略的多狀態(tài)情況也可以通過(guò)宣講查缺補(bǔ)漏。會(huì)議中設(shè)計(jì)師做好紀(jì)要，已確保大家對(duì)于設(shè)計(jì)實(shí)現(xiàn)的達(dá)成一致。

2. 重疊還原法

顧名思義，就是把實(shí)現(xiàn)后的界面截圖與效果圖重疊在一起，進(jìn)行像素級(jí)還原。雖然開(kāi)發(fā)不太樂(lè)意，但是到底差在哪兒了，特別直觀。

3. 面對(duì)面聯(lián)調(diào)

設(shè)計(jì)規(guī)范做得再完善也難免會(huì)有欠缺，面對(duì)面調(diào)整效率是最高的。俗話說(shuō)見(jiàn)面3分親，通常不愿意調(diào)整像素的開(kāi)發(fā)，磨一磨也就同意了。

如果你有更好的還原方法，歡迎留言交流。

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

題圖來(lái)自 Unsplash，基于CC0協(xié)議。