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

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

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

前期準備階段：確定設計需求的目標，競品分析，用戶(hù)研究，市場(chǎng)評估等；

設計需求分析階段：設計需求的理清，業(yè)務(wù)邏輯的推敲，產(chǎn)品的架構的搭建；

設計執行階段：交互設計原型的輸出，視覺(jué)設計風(fēng)格與方案確定，開(kāi)發(fā)落實(shí)與測試上線(xiàn)，這構成一個(gè)不斷迭代刷新的流程；

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

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

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

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

開(kāi)發(fā)團隊對項目有豐富經(jīng)驗，設計團隊對此項目經(jīng)驗少－開(kāi)發(fā)話(huà)語(yǔ)權大于視覺(jué)

設計團隊擁有多次項目經(jīng)驗，并有一定的設計沉淀累積－設計話(huà)語(yǔ)權大于開(kāi)發(fā)

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

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

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

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

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

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

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

根據項目經(jīng)驗是，在視覺(jué)迭代中期時(shí)，先輸出基礎控件元素規范，包括（顏色／文字／圖標／蒙板／投影／按鈕／輸入框／或個(gè)別控件）約占控件規范30％，與開(kāi)發(fā)進(jìn)行第一次規范評審，確定規范輸出的正確性與專(zhuān)業(yè)性。

讓開(kāi)發(fā)選取所有視覺(jué)頁(yè)面中需要標注的UI控件，因為開(kāi)發(fā)選擇的UI控件也為通用樣式，開(kāi)發(fā)代碼寫(xiě)成UI控件庫（可以對應視覺(jué)的控件列表）并由其它分模塊統一調用；且所有UI控件必須基于最終視覺(jué)效果進(jìn)行控件抽取與迭代輸出。最后，layout用文檔（pdf）的方式總結，避免單獨模塊單獨頁(yè)面傳遞，更能將規則一目了然；規范是一個(gè)龐大而繁瑣，極需耐心的工作；過(guò)程中注重每一個(gè)細節的精準與合理性。

3. 切圖與整理

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

4. 標注

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

5. 規范宣講

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

　　以上內容是由寶雞網(wǎng)站建設、寶雞網(wǎng)絡(luò )公司，寶雞世紀網(wǎng)絡(luò )為您編輯整理的“華為干貨！視覺(jué)設計師如何讓設計效果高還原度落地？” 的相關(guān)內容。我公司是在寶雞市工商局注冊的專(zhuān)業(yè)提供網(wǎng)站建設、網(wǎng)站優(yōu)化、網(wǎng)站推廣，軟件開(kāi)發(fā)的網(wǎng)絡(luò )技術(shù)企業(yè)，一直致力于面向寶雞地區黨政機關(guān)、企事業(yè)單位提供大中型門(mén)戶(hù)網(wǎng)站解決方案、移動(dòng)互聯(lián)網(wǎng)開(kāi)發(fā)（WAP手機門(mén)戶(hù)網(wǎng)站、微信開(kāi)發(fā)），以及中小型應用軟件開(kāi)發(fā)及其它信息化外包業(yè)務(wù)。目前已承建寶雞地區近760多家黨政機關(guān)及企業(yè)門(mén)戶(hù)網(wǎng)站，是寶雞網(wǎng)站建設行業(yè)有影響力的寶雞網(wǎng)絡(luò )公司。歡迎您來(lái)電咨詢(xún)。

　　電話(huà)：0917-3535180

　　業(yè)務(wù)咨詢(xún)QQ：422627074 397676352 362028197

　　地址：寶雞市東高新區高新大道20號(新寶中對面)山水文苑1號樓2單元1903