大部分新手設(shè)計(jì)師可能都會(huì)遇到一個(gè)問(wèn)題，設(shè)計(jì)效果很贊，為何還原效果那么差？是開(kāi)發(fā)不行？然后就吐槽開(kāi)發(fā)傻瓜，可很少有人想過(guò)是否是自自身的原因，在開(kāi)發(fā)過(guò)程中就不斷和開(kāi)發(fā)撕逼。今天我介紹一些關(guān)鍵點(diǎn)，通過(guò)這套系統(tǒng)的方法來(lái)解決你的視覺(jué)還原度，希望這篇文章能幫助到你。

五大核心關(guān)鍵因素

關(guān)于如何能讓設(shè)計(jì)稿還原度像我們?cè)嬉曈X(jué)一樣，這里我總結(jié)了幾大點(diǎn)，從我個(gè)人多次和開(kāi)發(fā)交流過(guò)程中所總結(jié)的一些經(jīng)驗(yàn)。

1. 定稿前的評(píng)審
2. 整理一份標(biāo)注文檔
3. 向開(kāi)發(fā)宣講標(biāo)注
4. 積極響應(yīng)開(kāi)發(fā)的每一個(gè)疑問(wèn)
5. 開(kāi)發(fā)還原度檢視

1. 定稿前的評(píng)審

和誰(shuí)評(píng)審？這里當(dāng)然是和產(chǎn)品經(jīng)理，設(shè)計(jì)領(lǐng)導(dǎo)，還有開(kāi)發(fā)同學(xué)，測(cè)試妹妹們（為什么沒(méi)有boss，因?yàn)閎oss你根本看不到啦）。

當(dāng)然在最開(kāi)始初期不需要叫這么多人，直接和設(shè)計(jì)領(lǐng)導(dǎo)就好了，因?yàn)榘媛涞卦O(shè)計(jì)，是需要多次評(píng)審的，所以前期這里我們就不談了，那么在設(shè)計(jì)中期評(píng)審就一定要拉上產(chǎn)品鏈中的關(guān)鍵角色。

首先評(píng)審的時(shí)候一定要把改版視覺(jué)變化最大的要和開(kāi)發(fā)說(shuō)明清楚，布局框架改變都會(huì)增加開(kāi)發(fā)工作量，能否實(shí)現(xiàn)或者實(shí)現(xiàn)是否功耗很高（一般有高級(jí)動(dòng)效就會(huì)有很大功耗），這時(shí)候開(kāi)發(fā)leader 就會(huì)在這里提前預(yù)估判斷下，因?yàn)檫@個(gè)環(huán)節(jié)如果不把握好，到后期如果出現(xiàn)意外，實(shí)現(xiàn)難度大，那么就又得重新修改視覺(jué)，那時(shí)候，時(shí)間是非常緊張的，所以一定要把握好各個(gè)關(guān)節(jié)環(huán)節(jié)

這里有人會(huì)問(wèn)，框架前期不是交互已經(jīng)和開(kāi)發(fā)評(píng)審了嗎？這個(gè)不一定的，因?yàn)槿绻覀冊(cè)谠O(shè)計(jì)過(guò)程中，靈感爆發(fā)，有些之前想的不到位的，這時(shí)候可能會(huì)做一些改動(dòng)啥的，搞不好就把局部框架改了一些，所以一定要注意這些細(xì)節(jié)點(diǎn)。

這個(gè)環(huán)節(jié)把握好了，那基本都能實(shí)現(xiàn)出來(lái)，特殊情況除外，比如前期忽略了一些后臺(tái)數(shù)據(jù)的問(wèn)題。

2. 整理一份標(biāo)注文檔

為什么要整理一份標(biāo)注文檔？

這里文檔不一定要十分嚴(yán)格的按照交互文檔或者視覺(jué)規(guī)范文檔來(lái)做，可以簡(jiǎn)易的做，關(guān)鍵是能讓開(kāi)發(fā)看得懂。

文檔里面放什么？是全部放？

如果是小版本迭代，那么相對(duì)簡(jiǎn)單一些，因?yàn)榍懊鎺妆究丶呀?jīng)有了，只要標(biāo)注里面寫(xiě)清楚了，可以不需要寫(xiě)文檔。

那如果是大版本迭代呢？比如7.0到8.0一個(gè)全新的視覺(jué)語(yǔ)言，那么這時(shí)候就必須整理一份文檔。

文檔里面就把這次更新迭代的共同的頁(yè)面整理出來(lái)，公共控件，整理出來(lái)標(biāo)注一份就好了，然后說(shuō)明細(xì)節(jié)處理問(wèn)題。

比如：

• list幾種類型，單雙行高度，如果是動(dòng)態(tài)list,那么寫(xiě)明字符截?cái)嘁?guī)則，如果可以允許換行，那么寫(xiě)清楚最多換幾行，一般最多3（多語(yǔ)言時(shí)候用），超大模式如何處理？一般list文字上下都會(huì)標(biāo)有一個(gè)高度，這樣即使是超大模式，超大字體也不會(huì)導(dǎo)致控件穿插。
• 導(dǎo)航在超大模式下處理規(guī)則如何，多語(yǔ)言如何換行（比如阿語(yǔ)），換行規(guī)則是什么？先縮小字體，在換行？等等
• 圖片宮格布局類型的如何處理，小屏和大屏顯示幾個(gè)（指的是phone和pad），橫豎屏顯示規(guī)則是什么，如何實(shí)現(xiàn)自適應(yīng)布局等
• 記住banner一定要給出比例，常用21:9，16:9，4:3
• 非常關(guān)鍵的一點(diǎn)，設(shè)計(jì)師標(biāo)注一定要把點(diǎn)擊區(qū)域標(biāo)注出來(lái)，如果你不標(biāo)注出來(lái)，開(kāi)發(fā)直接拿你切圖填充進(jìn)去，然后最后導(dǎo)致可用性非常差，最后導(dǎo)致來(lái)回調(diào)試。

這個(gè)環(huán)節(jié)是標(biāo)注的核心部分，非常細(xì)微的還原實(shí)現(xiàn)這步非常關(guān)鍵

3. 向開(kāi)發(fā)宣講標(biāo)注

為什么要向開(kāi)發(fā)走讀layout? 因?yàn)橛行┘?xì)微的地方需要我們特別像開(kāi)發(fā)說(shuō)明，也加深他們的映像，在實(shí)現(xiàn)時(shí)候就減少出錯(cuò)，像開(kāi)發(fā)走讀的時(shí)候，只把關(guān)鍵核心點(diǎn)，規(guī)則講清楚，我們前面每走一步，都是為了后面我們檢視還原度的時(shí)候要輕松一些，開(kāi)發(fā)也輕松一些，就比如前期基礎(chǔ)沒(méi)打好，后面深入很難。（如果大視覺(jué)沒(méi)還原好，如何叫開(kāi)發(fā)打磨細(xì)節(jié)？）

4. 積極響應(yīng)開(kāi)發(fā)的每一個(gè)疑問(wèn)

在開(kāi)發(fā)緊張環(huán)節(jié)中，即使我們前面所有工作都準(zhǔn)備好了，也很難避免開(kāi)發(fā)不找我溝通，這時(shí)候我們要積極回應(yīng)他們，并且和他們一起處理問(wèn)題，比如某些難度大一點(diǎn)的頁(yè)面，開(kāi)發(fā)實(shí)現(xiàn)效果和設(shè)計(jì)稿差異不小，那么這時(shí)候，開(kāi)發(fā)會(huì)截一張他們實(shí)現(xiàn)的效果圖給你看，這時(shí)你就要仔細(xì)去找問(wèn)題，不要一口咬定就是開(kāi)發(fā)的原因，先溝通具體原因，然后找出解決辦法，如果是標(biāo)注出現(xiàn)問(wèn)題，比如標(biāo)注標(biāo)死了，頁(yè)面不靈活，適配局限性很大。

那么你就要思考layout的問(wèn)題了，比如間距是否能標(biāo)成百分比關(guān)系等等

5. 開(kāi)發(fā)還原度檢視

經(jīng)過(guò)前面和開(kāi)發(fā)的各種協(xié)同作戰(zhàn)到最后一步驗(yàn)收環(huán)節(jié)了，還原度檢視，這時(shí)候你必須要有一雙火眼精金，那怎么檢視？

檢視是有一套科學(xué)方法的，部分同學(xué)，估計(jì)拿著手機(jī)就開(kāi)始看頁(yè)面的問(wèn)題了，這樣檢視是很容易漏掉場(chǎng)景的。

那么如何科學(xué)檢視還原度？

按場(chǎng)景檢視，我前面寫(xiě)了一篇文章，關(guān)于app 命名系統(tǒng)，這里就派上用場(chǎng)啦?。?b>歡迎有興趣的同學(xué)再去閱讀《App設(shè)計(jì)中，如何更專業(yè)管理設(shè)計(jì)命名系統(tǒng)？》）

比如，我可以就按我畫(huà)布上面這些順序來(lái)檢視，這樣就避免漏掉場(chǎng)景，異常場(chǎng)景等等。更高級(jí)的做法，可以做一個(gè)測(cè)試用列，這樣百分之百不漏掉場(chǎng)景。

總結(jié)

五大黃金步驟，如果每步把握好了，幾本能實(shí)現(xiàn)高還原度的開(kāi)發(fā)成果，這是一個(gè)細(xì)心的活，期待你們產(chǎn)品百分百還原。

1. 定稿前的評(píng)審
2. 整理一份標(biāo)注文檔
3. 向開(kāi)發(fā)宣講標(biāo)注
4. 積極響應(yīng)開(kāi)發(fā)的每一個(gè)疑問(wèn)
5. 開(kāi)發(fā)還原度檢視

【未完待續(xù)】

作者：Tony，微信公眾號(hào)：洞見(jiàn)設(shè)計(jì)，人人都是產(chǎn)品經(jīng)理專欄作家。百度設(shè)計(jì)師。很樂(lè)意幫助年輕設(shè)計(jì)師成長(zhǎng)，簡(jiǎn)歷指導(dǎo)，每周分享最有價(jià)值的設(shè)計(jì)經(jīng)驗(yàn)，擅長(zhǎng)產(chǎn)品體驗(yàn)設(shè)計(jì)，關(guān)注【洞見(jiàn)設(shè)計(jì)】后臺(tái)回復(fù)“彩蛋”領(lǐng)取設(shè)計(jì)資料。

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

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