很多人考慮UI行業(yè)是否可以一條路走下去，有些朋友則一直在UI行業(yè)內(nèi)打拼,，從一臺(tái)幾噸重的電腦需要汽車托運(yùn)使用,，發(fā)展到現(xiàn)在幾千克不費(fèi)吹灰之力就能放入囊中的電腦,，從手寫筆設(shè)計(jì)發(fā)展到電腦UI設(shè)計(jì)布局頁面,，互聯(lián)網(wǎng)行業(yè)發(fā)展的速度大家有目共睹,，UI設(shè)計(jì)正在蓄勢待發(fā)沖擊整個(gè)行業(yè),。

　　一,、視覺UI設(shè)計(jì)與交互設(shè)計(jì)之間應(yīng)銜接無縫,，即時(shí)刷新視覺頁面

　　一般產(chǎn)品設(shè)計(jì)流程包括不同的階段,，不同的階段其涉及的范疇內(nèi)容不一樣，作為設(shè)計(jì)師面對所有步驟不能一蹴而就,，而是按部就班,，計(jì)劃行事。

　　前期準(zhǔn)備階段：確定設(shè)計(jì)需求的目標(biāo),，競品分析,，用戶研究，市場評(píng)估等; 設(shè)計(jì)需求分析階段：設(shè)計(jì)需求的理清,，業(yè)務(wù)邏輯的推敲,，產(chǎn)品的架構(gòu)的搭建; 設(shè)計(jì)執(zhí)行階段：交互設(shè)計(jì)原型的輸出,，視覺設(shè)計(jì)風(fēng)格與方案確定，開發(fā)落實(shí)與測試上線,，這構(gòu)成一個(gè)不斷迭代刷新的流程;

　　在以上階段中,，業(yè)務(wù)需求的變更與澄清，交互的迭代,，視覺的刷新,，是設(shè)計(jì)過程中最繁瑣的階段。設(shè)計(jì)啟動(dòng)前了解多端的適配情況(分辨率/屏幕精度),，綜合考慮優(yōu)先出什么分辨率;接著視覺設(shè)計(jì)師需面對龐大的頁面工作量,，且常會(huì)遇到與交互原型不一致的問題，需及時(shí)反饋并拉通討論,。這就需遵循一個(gè)清晰可見的迭代流程,，對視覺設(shè)計(jì)而言，需求的變更與澄清交互的迭代視覺的刷新設(shè)計(jì)的迭代構(gòu)成的是一個(gè)閉環(huán)無縫的路線,，只有這樣才能為開發(fā)的啟動(dòng),，打下扎實(shí)的根基。

　　當(dāng)然作為視覺設(shè)計(jì)師;設(shè)計(jì)過程中主動(dòng)出ABC…方案而不是只拿出一個(gè)唯一的方案,，只有將想法用畫面來表達(dá),，才是夠合格的設(shè)計(jì)師，特別是視覺設(shè)計(jì)師,，好處可以鍛煉自己的設(shè)計(jì)表達(dá)力,，方便評(píng)審定稿，避免反復(fù)修改被人牽著走,。

　　二,、適當(dāng)時(shí)，為開發(fā)開啟更多的話語權(quán),，避免更多的無用功

　　視覺規(guī)范,、視覺標(biāo)注、視覺控件庫的整理與輸出目的只有一個(gè)：那就是指導(dǎo)開發(fā),，讓設(shè)計(jì)100%還原落地;回到項(xiàng)目中,，對于設(shè)計(jì)團(tuán)隊(duì)與開發(fā)團(tuán)隊(duì)通常會(huì)體現(xiàn)以下兩種情況出現(xiàn)：

　　· 開發(fā)團(tuán)隊(duì)對項(xiàng)目有豐富經(jīng)驗(yàn)，設(shè)計(jì)團(tuán)隊(duì)對此項(xiàng)目經(jīng)驗(yàn)少開發(fā)話語權(quán)大于視覺

　　· 設(shè)計(jì)團(tuán)隊(duì)擁有多次項(xiàng)目經(jīng)驗(yàn),，并有一定的設(shè)計(jì)沉淀累積設(shè)計(jì)話語權(quán)大于開發(fā)

　　從視覺設(shè)計(jì)而言,，如果是設(shè)計(jì)團(tuán)隊(duì)擁有豐富的經(jīng)驗(yàn)這是最好的，用經(jīng)驗(yàn)累積設(shè)計(jì)沉淀與創(chuàng)造性指導(dǎo)項(xiàng)目,，話語權(quán)大,，反之亦然。

　　在這里結(jié)合最近參與的項(xiàng)目，情況為第一種來進(jìn)行思考;交互視覺設(shè)計(jì)過程與規(guī)范輸出中,，讓開發(fā)提供更多正確的方向引導(dǎo),，借鑒開發(fā)團(tuán)隊(duì)以往的寶貴經(jīng)驗(yàn)，如：設(shè)計(jì)文檔的共享與即時(shí)性,、設(shè)計(jì)規(guī)范的專業(yè)性,，開發(fā)認(rèn)同的設(shè)計(jì)規(guī)范去指導(dǎo)開發(fā)、設(shè)計(jì)相關(guān)問題單的及時(shí)跟蹤與解決,、設(shè)計(jì)需求變更流程(變更流程包括：變更需求提出人交互視覺開發(fā)產(chǎn)品經(jīng)理(SE or PM)敲定執(zhí)行變更關(guān)閉問題單變更完成)等,，都能有效指導(dǎo)開發(fā)，提高產(chǎn)品開發(fā)落地的高還原性,。

　　三,、用80%場景的視覺設(shè)計(jì)+視覺控件規(guī)范+切圖+標(biāo)注+宣講來指導(dǎo)開發(fā);

　　1.視覺設(shè)計(jì)的場景

　　由交互提供具體場景的典型頁面，視覺稿進(jìn)行輸出,，多次迭代評(píng)審敲定后,，再由開發(fā)提出缺失場景的視覺設(shè)計(jì)，視覺進(jìn)行場景補(bǔ)充;

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

　　必須是經(jīng)過多次評(píng)審與迭代的最終視覺稿;但通常情況下,，為了趕進(jìn)度視覺設(shè)計(jì)與規(guī)范是同步進(jìn)行,，這導(dǎo)致規(guī)范反復(fù)修改的問題。

　　根據(jù)項(xiàng)目經(jīng)驗(yàn)是,，在視覺迭代中期時(shí),，先輸出基礎(chǔ)控件元素規(guī)范，包括(顏色/文字/圖標(biāo)/蒙板/投影/按鈕/輸入框/或個(gè)別控件)約占控件規(guī)范30%,，與開發(fā)進(jìn)行第一次規(guī)范評(píng)審,，確定規(guī)范輸出的正確性與專業(yè)性。 讓開發(fā)選取所有視覺頁面中需要標(biāo)注的UI控件,，因?yàn)殚_發(fā)選擇的UI控件也為通用樣式,，開發(fā)代碼寫成UI控件庫(可以對應(yīng)視覺的控件列表)并由其它分模塊統(tǒng)一調(diào)用;且所有UI控件必須基于最終視覺效果進(jìn)行控件抽取與迭代輸出。最后,，layout用文檔(pdf)的方式總結(jié),，避免單獨(dú)模塊單獨(dú)頁面?zhèn)鬟f，更能將規(guī)則一目了然;規(guī)范是一個(gè)龐大而繁瑣,，極需耐心的工作;過程中注重每一個(gè)細(xì)節(jié)的精準(zhǔn)與合理性,。

　　3.切圖與整理

　　切出所有視覺頁面中涉及到的圖標(biāo)與輔助圖形;圖標(biāo)大小如：24px/ 32px/48px/72px/128px等，根據(jù)圖標(biāo)具體場景中的大小,、顏色,、狀態(tài)來切,。換句話說,，每一個(gè)圖標(biāo)都有它對應(yīng)的具體場景，特定的尺寸、顏色和狀態(tài);記得曾與開發(fā)gg對規(guī)范與切圖的時(shí)候,，他說：頁面的圖標(biāo)切圖,，需要的是一個(gè)具體的拿來就用的，我們不會(huì)去畫一個(gè)圖標(biāo)或去特定寫一個(gè)圖標(biāo)的顏色,。

　　4.標(biāo)注

　　視覺頁面的標(biāo)注基于UI控件規(guī)范的基礎(chǔ)上進(jìn)行,，拋棄以往每個(gè)頁面細(xì)無巨細(xì)的具體尺寸/色值/大小的標(biāo)注。其實(shí)每一個(gè)視覺頁面皆由不同的UI控件組成,，在頁面中將對應(yīng)控件用UI控件規(guī)范中的編號(hào)來標(biāo)注,，開發(fā)gg拿著視覺頁面標(biāo)注去敲寫代碼時(shí)，再在UI控件規(guī)范文檔中尋找相對應(yīng)的控件規(guī)范細(xì)節(jié);這樣,，視覺設(shè)計(jì)師避免在視覺頁面中做那密密麻麻的尺寸標(biāo)注,，而開發(fā)gg拿到標(biāo)注清爽的視覺頁面也不會(huì)產(chǎn)生視覺疲勞。

　　5.規(guī)范宣講

　　以上4步完成后項(xiàng)目開發(fā)啟動(dòng)前,，用視覺規(guī)范對開發(fā)做統(tǒng)一的宣講,，避免遺漏造成規(guī)則傳達(dá)不一致;這樣，還設(shè)計(jì)原度還是問題么?(后續(xù)會(huì)有一篇文章專門分享是如何做設(shè)計(jì)規(guī)范和標(biāo)注的,。)

　　四,、與開發(fā)近距離接觸，面對面解決問題

　　最后一個(gè)方法是與開發(fā)來個(gè)親密接觸,，即如果有條件允許的話,，請與開發(fā)坐一起;遇到問題及時(shí)面對面澄清、拉通指導(dǎo),、達(dá)成共識(shí),、修改、敲定,、解決,。

　　1.設(shè)計(jì)規(guī)范做得再完善，開發(fā)問題依然存在

　　試想一下,，如果不和開發(fā)坐在一起,，即使開發(fā)面對再完善的設(shè)計(jì)規(guī)范，基于開發(fā)本身對設(shè)計(jì)美感的欠缺,，開發(fā)過程多多少少都會(huì)產(chǎn)生理解偏差,。開發(fā)過程每遇到一個(gè)細(xì)節(jié)問題，開發(fā)gg都得拉著視覺問：這個(gè)按鈕上的左右箭頭是無限循環(huán)嗎?圖標(biāo)缺少了一個(gè)狀態(tài),，那個(gè)狀態(tài)是什么等;發(fā)個(gè)信息問拉會(huì)或者電話討論,，有時(shí)候還解釋不清楚，效率低且事倍功半,。

　　2.視覺UI設(shè)計(jì)師直接進(jìn)組到開發(fā)團(tuán)隊(duì)中

　　結(jié)合當(dāng)前項(xiàng)目的做法是視覺設(shè)計(jì)師直接進(jìn)駐到開發(fā)團(tuán)隊(duì)中,，與開發(fā)團(tuán)隊(duì)坐在一起,，舉個(gè)例子此項(xiàng)目視覺在深圳，開發(fā)在異省南京或是異國,，視覺也出差飛過去長期進(jìn)駐,，遇到問題面對面商議解決;大大提高了開發(fā)的進(jìn)度與也節(jié)約了時(shí)間，視覺還原度還是問題么?當(dāng)然,，如果設(shè)計(jì)與開發(fā)本來就附近辦公,，則不需無休止的出差，項(xiàng)目成本節(jié)省不少,。

　　設(shè)計(jì)過程還是和開發(fā)gg們來一個(gè)“親密接觸”吧,，永遠(yuǎn)不要把開發(fā)拒之門外;覺得交互與視覺完成后則就萬事大吉。設(shè)計(jì)講究的不僅是設(shè)計(jì)美感還有嚴(yán)謹(jǐn)?shù)膽B(tài)度合理的邏輯,，要想一個(gè)產(chǎn)品始終保持是那個(gè)細(xì)節(jié)精致,，創(chuàng)意精彩，且用戶體驗(yàn)好;需要的是交互視覺開發(fā)三者之間是無縫合作,，各個(gè)環(huán)節(jié)的周全考慮,。

　　此外，北京云風(fēng)啟志UI設(shè)計(jì)培訓(xùn)機(jī)構(gòu)擁有成熟的學(xué)員就業(yè)服務(wù)體系,，不僅幫助學(xué)員解決就業(yè)問題,，更關(guān)已工作的學(xué)員們工作近況，針對不同學(xué)員有針對性的輔導(dǎo)就業(yè),，想讓自己職場足夠精彩,，就要全力以赴，想成為一名高端UI設(shè)計(jì)師,，讓云風(fēng)助你職場翱翔,。

　　更多UI設(shè)計(jì)：http://ukong.cn/free_course.html?MDAwMDAwMDAwMJiKoG4=04163