如何讓設(shè)計(jì)效果高還原度落地？

一個(gè)產(chǎn)品完整的設(shè)計(jì)流程中，交互與視覺(jué)定稿后，后續(xù)視覺(jué)規(guī)范的輸出、UI控件的整理與標(biāo)注、開(kāi)發(fā)的高還原度，都會(huì)影響產(chǎn)品最終的用戶(hù)體驗(yàn)。作為視覺(jué)設(shè)計(jì)師，在視覺(jué)設(shè)計(jì)的最后階段則是繁瑣且像素級(jí)別的精雕細(xì)琢，設(shè)計(jì)講究的不僅是美感還有嚴(yán)謹(jǐn)態(tài)度與邏輯。

最近半年在大司（華為）參與一個(gè)重點(diǎn)項(xiàng)目，且將會(huì)上線到全球各個(gè)局點(diǎn)（本司專(zhuān)稱(chēng)，指某個(gè)國(guó)家）中，涉及多端多屏協(xié)同問(wèn)題。臨時(shí)組成的設(shè)計(jì)作戰(zhàn)團(tuán)隊(duì)， 人員投入少、時(shí)間緊迫、任務(wù)量大高強(qiáng)度的狀態(tài)下摸索前行。為時(shí)五個(gè)月過(guò)去了，項(xiàng)目推進(jìn)良好Phone端ios與Android也到測(cè)試階段，“大視頻”端 的開(kāi)發(fā)工作也即將開(kāi)始。五個(gè)月的時(shí)間，與優(yōu)秀的同事一起協(xié)力合作，參與Phone端“大視頻”端的視覺(jué)與多端規(guī)范輸出。這里分享一下這幾個(gè)月的累積與沉淀 －－視覺(jué)設(shè)計(jì)師, 如何讓設(shè)計(jì)效果保持高還原度的開(kāi)發(fā)落地？給用戶(hù)呈現(xiàn)一個(gè)設(shè)計(jì)精致與體驗(yàn)良好的產(chǎn)品？

在一個(gè)產(chǎn)品完整的設(shè)計(jì)流程中，交互與視覺(jué)定稿后，后續(xù)視覺(jué)規(guī)范的輸出、UI控件的整理與標(biāo)注、開(kāi)發(fā)的高還原度，都會(huì)影響產(chǎn)品最終的用戶(hù)體驗(yàn)。作為視覺(jué)設(shè)計(jì)師，在視覺(jué)設(shè)計(jì)的最后階段則是繁瑣且像素級(jí)別的精雕細(xì)琢，開(kāi)發(fā)出來(lái)的精美頁(yè)面需要視覺(jué)設(shè)計(jì)師做到以下幾點(diǎn)。

一、視覺(jué)與交互之間應(yīng)銜接無(wú)縫，即時(shí)刷新視覺(jué)頁(yè)面

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

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

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

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

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

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

• 開(kāi)發(fā)團(tuán)隊(duì)對(duì)項(xiàng)目有豐富經(jīng)驗(yàn)，設(shè)計(jì)團(tuán)隊(duì)對(duì)此項(xiàng)目經(jīng)驗(yàn)少－開(kāi)發(fā)話語(yǔ)權(quán)大于視覺(jué)
• 設(shè)計(jì)團(tuán)隊(duì)擁有多次項(xiàng)目經(jīng)驗(yàn)，并有一定的設(shè)計(jì)沉淀累積－設(shè)計(jì)話語(yǔ)權(quán)大于開(kāi)發(fā)

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

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

三、用80%場(chǎng)景的視覺(jué)設(shè)計(jì)＋視覺(jué)控件規(guī)范＋切圖＋標(biāo)注＋宣講來(lái)指導(dǎo)開(kāi)發(fā)

1. 視覺(jué)設(shè)計(jì)的場(chǎng)景

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

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

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

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

3. 切圖與整理

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

4. 標(biāo)注

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

5. 規(guī)范宣講

以上4步完成后項(xiàng)目開(kāi)發(fā)啟動(dòng)前，用視覺(jué)規(guī)范對(duì)開(kāi)發(fā)做統(tǒng)一的宣講，避免遺漏造成規(guī)則傳達(dá)不一致；這樣，還設(shè)計(jì)原度還是問(wèn)題么？（后續(xù)會(huì)有一篇文章專(zhuān)門(mén)分享大司項(xiàng)目經(jīng)驗(yàn)是如何做標(biāo)注的。）

四、與開(kāi)發(fā)近距離接觸，面對(duì)面解決問(wèn)題

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

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

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

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

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

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

分享文章：如何讓設(shè)計(jì)效果高還原度落地？
URL分享：http://www.bm7419.com/news/173534.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、網(wǎng)站營(yíng)銷(xiāo)、網(wǎng)頁(yè)設(shè)計(jì)公司、手機(jī)網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)