精巧的規(guī)劃離不開視覺規(guī)劃師的精雕細(xì)琢

在一個(gè)產(chǎn)品完好的規(guī)劃流程中，交互與視覺定稿后，后續(xù)視覺標(biāo)準(zhǔn)的輸出、UI控件的收拾與標(biāo)示、開發(fā)的高復(fù)原度，都會(huì)影響產(chǎn)品終究的用戶體會(huì)。作為視覺規(guī)劃師，在視覺規(guī)劃的最終階段則是繁瑣且像素等級(jí)的精雕細(xì)琢，開發(fā)出來的精巧頁面需求視覺規(guī)劃師做到以下幾點(diǎn)。

一、視覺與交互之間應(yīng)聯(lián)接無縫，即時(shí)改寫視覺頁面

一般產(chǎn)品規(guī)劃流程包含不同的階段，不同的階段其觸及的領(lǐng)域內(nèi)容不一樣，作為規(guī)劃師面臨一切進(jìn)程不能一蹴即至，而是墨守成規(guī)，計(jì)劃行事。

1.前期預(yù)備階段：斷定規(guī)劃需求的方針，競(jìng)品剖析，用戶研究，商場(chǎng)評(píng)價(jià)等；

2.規(guī)劃需求剖析階段：規(guī)劃需求的理清，事務(wù)邏輯的琢磨，產(chǎn)品的架構(gòu)的建立；

3.規(guī)劃履行階段：交互規(guī)劃原型的輸出，視覺規(guī)劃風(fēng)格與計(jì)劃斷定，開發(fā)履行與測(cè)試上線，這構(gòu)成一個(gè)不斷迭代改寫的流程；

在以上階段中，事務(wù)需求的改變與弄清，交互的迭代，視覺的改寫，是規(guī)劃進(jìn)程中最繁瑣的階段。規(guī)劃發(fā)動(dòng)前了解多端的適配狀況（分辨率／屏幕精度），綜合考慮優(yōu)先出什么分辨率；接著視覺規(guī)劃師需面臨巨大的頁面作業(yè)量，且常會(huì)遇到與交互原型不一致的問題，需及時(shí)反應(yīng)并拉通評(píng)論。這就需遵從一個(gè)清晰可見的迭代流程，對(duì)視覺規(guī)劃而言，需求的改變與弄清－交互的迭代－視覺的改寫－規(guī)劃的迭代構(gòu)成的是一個(gè)閉環(huán)無縫的道路，只要這樣才能為開發(fā)的發(fā)動(dòng)，打下扎實(shí)的根基。

當(dāng)然作為視覺規(guī)劃師，規(guī)劃進(jìn)程中自動(dòng)出ABC…計(jì)劃而不是只拿出一個(gè)僅有的計(jì)劃，只要將主意用畫面來表達(dá)，才是夠合格的規(guī)劃師，特別是視覺規(guī)劃師，優(yōu)點(diǎn)能夠訓(xùn)練自己的規(guī)劃表達(dá)力，便利評(píng)定定稿，防止重復(fù)修正被人牽著走。

二、適其時(shí)，為開發(fā)敞開更多的話語權(quán)，防止更多的無用功

視覺標(biāo)準(zhǔn)、視覺標(biāo)示、視覺控件庫的收拾與輸出目的只要一個(gè)：那就是輔導(dǎo)開發(fā)，讓規(guī)劃100％復(fù)原落地；回到項(xiàng)目中，關(guān)于規(guī)劃團(tuán)隊(duì)與開發(fā)團(tuán)隊(duì)通常會(huì)表現(xiàn)以下兩種狀況呈現(xiàn)：

• 開發(fā)團(tuán)隊(duì)對(duì)項(xiàng)目有豐厚經(jīng)歷，規(guī)劃團(tuán)隊(duì)對(duì)此項(xiàng)目經(jīng)歷少－開發(fā)話語權(quán)大于視覺
• 規(guī)劃團(tuán)隊(duì)具有屢次項(xiàng)目經(jīng)歷，并有必定的規(guī)劃沉積累積－規(guī)劃話語權(quán)大于開發(fā)

從視覺規(guī)劃而言，如果是規(guī)劃團(tuán)隊(duì)具有豐厚的經(jīng)歷這是最好的，用經(jīng)歷累積規(guī)劃沉積與創(chuàng)造性輔導(dǎo)項(xiàng)目，話語權(quán)大，反之亦然。

在這里結(jié)合最近參與的項(xiàng)目，狀況為第一種來進(jìn)行考慮；交互視覺規(guī)劃進(jìn)程與標(biāo)準(zhǔn)輸出中，讓開發(fā)供給更多正確的方向引導(dǎo)，學(xué)習(xí)開發(fā)團(tuán)隊(duì)以往的名貴經(jīng)歷，如：規(guī)劃文檔的同享與即時(shí)性、規(guī)劃標(biāo)準(zhǔn)的專業(yè)性，開發(fā)認(rèn)同的規(guī)劃標(biāo)準(zhǔn)去輔導(dǎo)開發(fā)、規(guī)劃相關(guān)問題單的及時(shí)盯梢與處理、規(guī)劃需求改變流程（改變流程包含：改變需求提出人－交互－視覺－開發(fā)－產(chǎn)品司理（SE or PM）敲定－履行改變－封閉問題單－改變完結(jié)）等，都能有效輔導(dǎo)開發(fā)，進(jìn)步產(chǎn)品開發(fā)落地的高復(fù)原性。

三、用80%場(chǎng)景的視覺規(guī)劃＋視覺控件標(biāo)準(zhǔn)＋切圖＋標(biāo)示＋宣講來輔導(dǎo)開發(fā)

1. 視覺規(guī)劃的場(chǎng)景

由交互供給詳細(xì)場(chǎng)景的典型頁面，視覺稿進(jìn)行輸出，屢次迭代評(píng)定敲定后，再由開發(fā)提出缺失場(chǎng)景的視覺規(guī)劃，視覺進(jìn)行場(chǎng)景彌補(bǔ)；

2. 視覺UI控件標(biāo)準(zhǔn)的輸出

有必要是通過屢次評(píng)定與迭代的終究視覺稿；但通常狀況下，為了趕進(jìn)展視覺規(guī)劃與標(biāo)準(zhǔn)是同步進(jìn)行，這導(dǎo)致標(biāo)準(zhǔn)重復(fù)修正的問題。

• 依據(jù)項(xiàng)目經(jīng)歷是，在視覺迭代中期時(shí)，先輸出根底控件元素標(biāo)準(zhǔn)，包含（色彩／文字／圖標(biāo)／蒙板／投影／按鈕／輸入框／或單個(gè)控件）約占控件標(biāo)準(zhǔn)30％，與開發(fā)進(jìn)行第一次標(biāo)準(zhǔn)評(píng)定，斷定標(biāo)準(zhǔn)輸出的正確性與專業(yè)性。
• 讓開發(fā)選取一切視覺頁面中需求標(biāo)示的UI控件，由于開發(fā)挑選的UI控件也為通用款式，開發(fā)代碼寫成UI控件庫（能夠?qū)��?yīng)視覺的控件列表）并由其它分模塊一致調(diào)用；且一切UI控件有必要依據(jù)終究視覺效果進(jìn)行控件抽取與迭代輸出。最終，layout用文檔（pdf）的辦法總結(jié)，防止獨(dú)自模塊獨(dú)自頁面?zhèn)鬟f，更能將規(guī)矩一望而知；標(biāo)準(zhǔn)是一個(gè)巨大而繁瑣，極需耐性的作業(yè)；進(jìn)程中重視每一個(gè)細(xì)節(jié)的精準(zhǔn)與合理性。

3. 切圖與收拾

切出一切視覺頁面中觸及到的圖標(biāo)與輔佐圖形；圖標(biāo)巨細(xì)如：24px/ 32px/48px/72px/128px等，依據(jù)圖標(biāo)詳細(xì)場(chǎng)景中的巨細(xì)、色彩、狀況來切。換句話說，每一個(gè)圖標(biāo)都有它對(duì)應(yīng)的詳細(xì)場(chǎng)景，特定的尺度、色彩和狀況；記住曾與開發(fā)gg對(duì)標(biāo)準(zhǔn)與切圖的時(shí)分，他說：頁面的圖標(biāo)切圖，需求的是一個(gè)詳細(xì)的拿來就用的，我們不會(huì)去畫一個(gè)圖標(biāo)或去特定寫一個(gè)圖標(biāo)的色彩。

4. 標(biāo)示

視覺頁面的標(biāo)示依據(jù)UI控件標(biāo)準(zhǔn)的根底上進(jìn)行，拋棄以往每個(gè)頁面細(xì)無巨細(xì)的詳細(xì)尺度／色值／巨細(xì)的標(biāo)示。其實(shí)每一個(gè)視覺頁面皆由不同的UI控件組成，在頁面中將對(duì)應(yīng)控件用UI控件標(biāo)準(zhǔn)中的編號(hào)來標(biāo)示，開發(fā)gg拿著視覺頁面標(biāo)示去敲寫代碼時(shí)，再在UI控件標(biāo)準(zhǔn)文檔中尋覓相對(duì)應(yīng)的控件標(biāo)準(zhǔn)細(xì)節(jié)；這樣，視覺規(guī)劃師防止在視覺頁面中做那鱗次櫛比的尺度標(biāo)示，而開發(fā)gg拿到標(biāo)示清爽的視覺頁面也不會(huì)產(chǎn)生視覺疲憊。

5. 標(biāo)準(zhǔn)宣講

以上4步完結(jié)后項(xiàng)目開發(fā)發(fā)動(dòng)前，用視覺標(biāo)準(zhǔn)對(duì)開發(fā)做一致的宣講，防止遺失造成規(guī)矩傳達(dá)不一致；這樣，還規(guī)劃原度仍是問題么？

四、與開發(fā)近距離觸摸，面臨面處理問題

最終一個(gè)辦法是與開發(fā)來個(gè)密切觸摸，即如果有條件答應(yīng)的話，請(qǐng)與開發(fā)坐一同；遇到問題及時(shí)面臨面弄清、拉通輔導(dǎo)、達(dá)到一致、修正、敲定、處理。

1. 規(guī)劃標(biāo)準(zhǔn)做得再完善，開發(fā)問題仍然存在

試想一下，如果不和開發(fā)坐在一同，即使開發(fā)面臨再完善的規(guī)劃標(biāo)準(zhǔn)，依據(jù)開發(fā)自身對(duì)規(guī)劃美感的短缺，開發(fā)進(jìn)程多多少少都會(huì)產(chǎn)生了解誤差。開發(fā)進(jìn)程每遇到一個(gè)細(xì)節(jié)問題，開發(fā)gg都得拉著視覺問：這個(gè)按鈕上的左右箭頭是無限循環(huán)嗎？圖標(biāo)缺少了一個(gè)狀況，那個(gè)狀況是什么等；發(fā)個(gè)信息問拉會(huì)或許電話評(píng)論，有時(shí)分還解說不清楚，功率低且事倍功半。

2. 視覺規(guī)劃師直接進(jìn)組到開發(fā)團(tuán)隊(duì)中

結(jié)合當(dāng)時(shí)項(xiàng)目的做法是視覺規(guī)劃師直接進(jìn)駐到開發(fā)團(tuán)隊(duì)中，與開發(fā)團(tuán)隊(duì)坐在一同，舉個(gè)例子此項(xiàng)目視覺在深圳，開發(fā)在異省南京或是異國(guó)，視覺也出差飛過去長(zhǎng)時(shí)刻進(jìn)駐，遇到問題面臨面協(xié)商處理；大大進(jìn)步了開發(fā)的進(jìn)展與也節(jié)約了時(shí)刻，視覺復(fù)原度仍是問題么？當(dāng)然，如果規(guī)劃與開發(fā)本來就鄰近工作，則不需無休止的出差，項(xiàng)目本錢節(jié)約不少。

規(guī)劃進(jìn)程仍是和開發(fā)gg們來一個(gè)“密切觸摸”吧，永久不要把開發(fā)拒之門外；覺得交互與視覺完結(jié)后則就萬事大吉。規(guī)劃考究的不僅是規(guī)劃美感還有謹(jǐn)慎的情緒合理的邏輯，要想一個(gè)產(chǎn)品始終保持是那個(gè)細(xì)節(jié)精致，構(gòu)思精彩，且用戶體會(huì)好；需求的是交互－視覺－開發(fā)三者之間是無縫協(xié)作，各個(gè)環(huán)節(jié)的周全考慮。