《一款A(yù)PP設(shè)計(jì)的從0到1》這是一篇系列文章干貨，上次U妹講的是關(guān)于切圖標(biāo)注篇，今天U妹來說一下，視覺還原。

這次U妹接著上次的茬繼續(xù)，繼續(xù)之前先來看看整個(gè)目錄（滿滿的干貨）

U妹列了一個(gè)小小的目錄：

一、項(xiàng)目立項(xiàng)（點(diǎn)擊查看）

二、項(xiàng)目預(yù)估時(shí)間（點(diǎn)擊查看）

三、界面設(shè)計(jì)

四、切圖標(biāo)注

五、視覺還原

六、上線準(zhǔn)備

一款完整的APP，經(jīng)過這樣的一個(gè)流程：項(xiàng)目立項(xiàng)啟動(dòng)→設(shè)計(jì)產(chǎn)品原型→設(shè)計(jì)效果圖→進(jìn)入開發(fā)階段→開發(fā)成功后進(jìn)入測(cè)試階段→測(cè)試將問題反饋給開發(fā)人員進(jìn)行調(diào)試→多次測(cè)試確認(rèn)沒有bug→提交市場(chǎng)、正式上線。

我們都知道，無論設(shè)計(jì)師的標(biāo)注稿多精確，開發(fā)出來的產(chǎn)品，多多少少都會(huì)有誤差，專業(yè)來說就是視覺效果落地還原度，視覺還原度越高，與設(shè)計(jì)稿越接近，APP就越精細(xì)；反之，就越差。

所以，就需要我們?cè)谶@個(gè)時(shí)候，去配合開發(fā)對(duì)UI進(jìn)行調(diào)整，來更加的接近我們做的效果圖了（簡(jiǎn)單了說，就是給開發(fā)挑毛病，指出和效果圖不一致的地方，是不是很開心哈）

差1px，我也要挑出來（像素眼就是這樣煉成的）

一、設(shè)計(jì)師如何做視覺還原？

1. 設(shè)計(jì)視覺調(diào)整文檔

團(tuán)隊(duì)較大，建議設(shè)計(jì)一份視覺調(diào)整文章，這樣對(duì)整個(gè)開發(fā)進(jìn)度和效率都是比較高的，因?yàn)閳F(tuán)隊(duì)人數(shù)多，你不可能跑到iOS開發(fā)哥哥那里說一次要調(diào)整的地方，然后再去跟Android哥哥再說一次，你有時(shí)間，人家不一定有時(shí)間，所以設(shè)計(jì)視覺調(diào)整優(yōu)化文檔是很有必要的。

視覺調(diào)整優(yōu)化文檔，要一目了然，需要注明和效果圖不一樣的地方是哪里，應(yīng)該改成什么樣，是iOS調(diào)整、Android調(diào)整還是h5調(diào)整等，輸出為png和jpg圖片格式，最好輸出為PDF格式，開發(fā)看起來也方便，比如你寫了一個(gè)顏色值，開發(fā)就可以直接復(fù)制了。

2. 帶上你的板凳，過去和開發(fā)一起調(diào)UI

這種方法很適合3-4人的小團(tuán)隊(duì)，親自上陣，口述問題，效率也是比較高的，你需要備好你的效果圖和開發(fā)后的雛形，有對(duì)比才有傷害（有圖有真相，不一樣的地方就得讓開發(fā)改）

二、如何讓效果圖高還原度落地？

1、規(guī)范的視覺界面設(shè)計(jì)

必須按照各平臺(tái)的UI設(shè)計(jì)規(guī)范去規(guī)范的設(shè)計(jì)界面，用設(shè)計(jì)規(guī)范去知道開發(fā)，才是提高視覺還原的的基本前提。

2、視覺UI控件的規(guī)范輸出

在絕大多數(shù)的情況下，為了趕項(xiàng)目進(jìn)度，都是界面先行，設(shè)計(jì)規(guī)范后出，所以要竟可能的保持界面設(shè)計(jì)和規(guī)范是同步進(jìn)行。

以u(píng)妹目前的項(xiàng)目經(jīng)驗(yàn)，可以先輸出基礎(chǔ)控件元素規(guī)范，包括（顏色、文字、圖標(biāo)、蒙板、投影、按鈕、輸入框、或個(gè)別控件），規(guī)范是一個(gè)龐大而繁瑣，極需耐心的工作；過程中注重每一個(gè)細(xì)節(jié)的精準(zhǔn)與合理性。

3、規(guī)范的切圖與精確的標(biāo)注

我們的切圖和標(biāo)注，是否規(guī)范和精確，直接影響視覺效果的還原度，所以切圖和標(biāo)注一定要做的細(xì)致，這樣更加有利于提升還原度

4、多和開發(fā)溝通交流

U妹一直說的一句話：溝通是解決問題的最有效方法，所以多和開發(fā)哥哥接觸溝通交流，如果有條件允許的話，請(qǐng)與開發(fā)坐一起；遇到問題及時(shí)面對(duì)面協(xié)商解決、達(dá)成共識(shí)、修改、敲定、解決。

關(guān)于視覺還原篇就說到這里，U妹這里說的只是一種工作方法，好的工作方法才能自己事半功倍，在具體工作中也要靈活擁有，一定要多和開發(fā)溝通交流，良好的溝通才是解決問題的唯一方法，有疑問題也可給U妹留言，我們下期再見！

相關(guān)閱讀

系列｜一款A(yù)PP設(shè)計(jì)的從0到1：項(xiàng)目立項(xiàng)篇

系列｜一款A(yù)PP設(shè)計(jì)的從0到1：項(xiàng)目預(yù)估時(shí)間篇

系列｜一款A(yù)PP設(shè)計(jì)的從0到1：界面設(shè)計(jì)篇

系列｜一款A(yù)PP設(shè)計(jì)的從0到1：切圖標(biāo)注篇

作者：U妹，一個(gè)不要命的UI設(shè)計(jì)師，等你，來撩妹喲。微信公眾號(hào)“UI妹兒”（ID：UIfaner）

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

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