《一款A(yù)PP設(shè)計(jì)的從0到1》這是一篇系列文章干貨筹裕,上次U妹講的是關(guān)于切圖標(biāo)注篇发钝,今天U妹來說一下潦牛,視覺還原殴瘦。
往期回顧:
《一款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妹接著上次的茬繼續(xù),繼續(xù)之前先來看看整個(gè)目錄(滿滿的干貨)
U妹列了一個(gè)小小的目錄:
1改淑、 項(xiàng)目立項(xiàng)
2碍岔、 項(xiàng)目預(yù)估時(shí)間
3、 界面設(shè)計(jì)
4朵夏、 切圖標(biāo)注
5蔼啦、 視覺還原
6、 上線準(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妹留言,我們下期再見官份!