大多數(shù)新手設(shè)計(jì)師可能會(huì)遇到一個(gè)問(wèn)題。設(shè)計(jì)效果很好，為什么還原效果這么差？發(fā)展不好？然后他們抱怨愚蠢的發(fā)展，但很少有人思考這是否是他們自己的原因。在開(kāi)發(fā)過(guò)程中，不斷地與開(kāi)發(fā)斗爭(zhēng)。今天我將介紹一些關(guān)鍵點(diǎn)，通過(guò)這種系統(tǒng)的方法來(lái)解決你的視覺(jué)修復(fù)。我希望這篇文章可以幫助你。

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

關(guān)于如何將設(shè)計(jì)稿還原到和我們最初設(shè)想一樣的程度，這里總結(jié)了幾個(gè)要點(diǎn)，是我在多次和開(kāi)發(fā)交流過(guò)程中的親身經(jīng)歷。

1）組織一個(gè)注釋文檔

2) 對(duì)開(kāi)發(fā)進(jìn)行宣傳和標(biāo)記

3）積極回應(yīng)每一個(gè)發(fā)展問(wèn)題

4) 開(kāi)發(fā)減少檢查

5）定稿前審核

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

為什么要放在一起注釋文檔？

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

文件中要放什么？是全部嗎？

如果是小版本迭代，就比較簡(jiǎn)單了，因?yàn)橹暗膸讉€(gè)控件已經(jīng)存在了，只要把注解寫清楚，就不用寫文檔了。

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

文檔中整理了本次更新迭代的常用頁(yè)面和常用控件，整理后標(biāo)記一份就好了，再說(shuō)明細(xì)節(jié)處理問(wèn)題。

例如：

有幾種類型的列表，單行高和雙行高。如果是動(dòng)態(tài)列表，則指定字符截?cái)嘁?guī)則。如果允許換行，那就寫清楚最多改多少行，一般最多3行（多語(yǔ)言使用），超大模式怎么處理？一般列表文字的上下兩邊都會(huì)標(biāo)上高度，這樣即使在超大模式下，超大字體也不會(huì)造成控件穿插。

超大模式導(dǎo)航規(guī)則如何處理，多語(yǔ)言（如阿拉伯語(yǔ)）如何換行，換行規(guī)則有哪些？先縮小字體，再斷線？ ETC。

網(wǎng)格布局類型的圖片如何處理，顯示多少小屏和大屏（指phone和pad），橫豎屏的顯示規(guī)則是什么，如何實(shí)現(xiàn)自適應(yīng)布局等。

記住banner一定要給個(gè)比例，常用21:9、16:9、4:3

很重要的一點(diǎn)是設(shè)計(jì)者必須標(biāo)注點(diǎn)擊區(qū)域。如果不標(biāo)注，開(kāi)發(fā)會(huì)直接用你切好的圖填充，最終導(dǎo)致可用性非常差，最終導(dǎo)致來(lái)回調(diào)試。

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

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

為什么我們需要閱讀布局來(lái)開(kāi)發(fā)？因?yàn)橛行┘?xì)微的地方需要我們加深他們的形象，尤其是像開(kāi)發(fā)說(shuō)明，這樣才能減少實(shí)現(xiàn)時(shí)的失誤。我們每走一步，都是為了方便我們后期查看還原度，讓開(kāi)發(fā)更簡(jiǎn)單。比如前期基礎(chǔ)打不好，后期就很難深入。 （如果沒(méi)有還原好大的視覺(jué)，怎么能叫細(xì)節(jié)的開(kāi)發(fā)和打磨呢？）

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

在開(kāi)發(fā)緊張的階段，即使前面的工作都準(zhǔn)備好了，不和我溝通也很難避免開(kāi)發(fā)。這個(gè)時(shí)候我們就要積極響應(yīng)他們，和他們一起處理問(wèn)題，比如一些比較難的頁(yè)面。開(kāi)發(fā)實(shí)現(xiàn)效果和設(shè)計(jì)稿差距不小，所以這個(gè)時(shí)候開(kāi)發(fā)就把他們的實(shí)現(xiàn)截圖給大家看看。這時(shí)候，你要仔細(xì)尋找問(wèn)題所在。不要硬說(shuō)是開(kāi)發(fā)的原因，先溝通具體原因。然后尋找解決方案。如果標(biāo)簽有問(wèn)題，比如標(biāo)簽死了，頁(yè)面不靈活，適配很有限。

然后你要考慮布局問(wèn)題，比如間距能不能標(biāo)注成百分比關(guān)系等等。

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

經(jīng)過(guò)以往的各種合作和開(kāi)發(fā)，就是最后一步的驗(yàn)收，恢復(fù)驗(yàn)收。這時(shí)候你一定有一雙火眼金睛，那么如何檢驗(yàn)?zāi)兀?

有一套科學(xué)的檢查方法。有些同學(xué)可能會(huì)開(kāi)始用手機(jī)看頁(yè)面。這次檢查很容易漏掉現(xiàn)場(chǎng)。

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

和誰(shuí)一起復(fù)習(xí)？當(dāng)然，這里有產(chǎn)品經(jīng)理，設(shè)計(jì)負(fù)責(zé)人，還有開(kāi)發(fā)同學(xué)，測(cè)試姐姐（為什么沒(méi)有老板，因?yàn)槟愀究床坏嚼习澹?

當(dāng)然一開(kāi)始沒(méi)必要叫那么多人，直接和設(shè)計(jì)負(fù)責(zé)人說(shuō)就可以了，因?yàn)榘姹韭涞氐脑O(shè)計(jì)需要多次review，前期這里就不說(shuō)了，所以在設(shè)計(jì)的中期回顧中，一定要拉動(dòng)產(chǎn)品鏈的關(guān)鍵作用。

首先，在review的時(shí)候，一定要清楚的把revision中最大的視覺(jué)變化解釋給development。布局框架的變化會(huì)增加開(kāi)發(fā)的工作量。能不能實(shí)現(xiàn)或者功耗是否高（一般如果有高級(jí)動(dòng)畫(huà)效果，功耗會(huì)很大。），這時(shí)候開(kāi)發(fā)負(fù)責(zé)人會(huì)在這里提前預(yù)估判斷，因?yàn)槿绻@個(gè)環(huán)節(jié)把握不好，如果后期出現(xiàn)意外，實(shí)現(xiàn)起來(lái)會(huì)很困難，那么愿景就要重新修改，到時(shí)候時(shí)間會(huì)很緊，所以一定要把握好所有聯(lián)合鏈接

這里可能有人會(huì)問(wèn)，框架在前期不是和開(kāi)發(fā)評(píng)審有交互嗎？這也不一定，因?yàn)槿绻覀冊(cè)谠O(shè)計(jì)的過(guò)程中，如果靈感迸發(fā)，之前的一些想法沒(méi)有到位，這時(shí)候可能會(huì)做出一些改變。可能局部框架會(huì)發(fā)生一點(diǎn)變化，所以我們必須注意這些細(xì)節(jié)。

如果這個(gè)環(huán)節(jié)把握好，基本可以實(shí)現(xiàn)，除非有特殊情況，比如前期忽略的一些后臺(tái)數(shù)據(jù)問(wèn)題。

本文來(lái)自：朝陽(yáng)網(wǎng)站建設(shè)

我們專注高端建站，小程序開(kāi)發(fā)、軟件系統(tǒng)定制開(kāi)發(fā)、BUG修復(fù)、物聯(lián)網(wǎng)開(kāi)發(fā)、各類API接口對(duì)接開(kāi)發(fā)等。十余年開(kāi)發(fā)經(jīng)驗(yàn)，每一個(gè)項(xiàng)目承諾做到滿意為止，多一次對(duì)比，一定讓您多一份收獲！