發(fā)布時(shí)間:2022-03-17 08:39:59來(lái)源:魔方格
視覺(jué)還原
一個(gè)完整的app要經(jīng)過(guò)以下過(guò)程:項(xiàng)目啟動(dòng)→產(chǎn)品原型設(shè)計(jì)→設(shè)計(jì)效果圖→開(kāi)發(fā)階段→成功開(kāi)發(fā)后的測(cè)試階段→測(cè)試反饋給開(kāi)發(fā)人員進(jìn)行調(diào)試→多次測(cè)試以確認(rèn)沒(méi)有bug→提交給市場(chǎng)以及正式發(fā)布。
我們都知道,無(wú)論設(shè)計(jì)師的標(biāo)注稿有多準(zhǔn)確,開(kāi)發(fā)的產(chǎn)品或多或少都會(huì)有錯(cuò)誤。從技術(shù)上講,效果落地還原度,視覺(jué)還原度越高,與設(shè)計(jì)稿越接近,APP就越精細(xì);反之,就越差。
因此,我們有必要在這個(gè)時(shí)候配合開(kāi)發(fā)來(lái)調(diào)整ui,以便更接近我們所做的效果圖。
一、如何做視覺(jué)還原
1.設(shè)計(jì)視覺(jué)調(diào)整文檔
視覺(jué)調(diào)整優(yōu)化文檔應(yīng)該一目了然,需要指出效果圖的不同之處以及應(yīng)該改的地方,無(wú)論是iOS調(diào)整、Android調(diào)整還是h5調(diào)整,輸出都是png和jpg圖片格式,較好是PDF格式,開(kāi)發(fā)看起來(lái)也很方便。
2.和開(kāi)發(fā)一起調(diào)ui
這種方法非常適合3-4人的小團(tuán)隊(duì),親自參加戰(zhàn)斗并口訴問(wèn)題,效果還是不錯(cuò)滴。開(kāi)發(fā)后,需要準(zhǔn)備效果圖和開(kāi)發(fā)后的雛形,只有比較,才會(huì)知道哪里不好。
二、如何讓效果圖高還原度落地
1.規(guī)范的視覺(jué)界面設(shè)計(jì)
根據(jù)各個(gè)平臺(tái)的ui設(shè)計(jì)規(guī)范來(lái)規(guī)范設(shè)計(jì)界面,用設(shè)計(jì)規(guī)范去指導(dǎo)開(kāi)發(fā),才是提高視覺(jué)還原的基本前提。
2.視覺(jué)ui控件的規(guī)范輸出
在絕大多數(shù)情況下,為了跟上項(xiàng)目的進(jìn)度,都是界面先行,然后是設(shè)計(jì)規(guī)范,因此可以保持界面設(shè)計(jì)和規(guī)范同步。
可以先輸出基礎(chǔ)的控件元素規(guī)范,包括(顏色、文本、圖標(biāo)、蒙版、投影、按鈕、輸入框或個(gè)別控件)。規(guī)范是一項(xiàng)巨大而復(fù)雜的工作,需要極大的耐心,在此過(guò)程中,應(yīng)注意每個(gè)細(xì)節(jié)的準(zhǔn)確性和合理性。
3.規(guī)范的切圖與精確的標(biāo)注
切圖和標(biāo)注是否規(guī)范和精確,直接影響視覺(jué)效果的還原度,所以在切圖和標(biāo)注時(shí)必須小心,這更有利于提高還原度。