在一個產品完整的設計流程中，視覺定稿后，后續視覺規范的輸出、開發的高還原度，都會影響產品最終的用戶體驗。作為視覺設計師，在視覺設計的最后階段則是繁瑣且像素級別的精雕細琢，開發出來的精美頁面需要視覺設計師做到以下幾點。

一、視覺與交互之間應銜接無縫，即時刷新視覺頁面

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

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

設計需求分析階段：設計需求的理清，業務邏輯的推敲，產品的架構的搭建；

設計執行階段：交互設計原型的輸出，視覺設計風格與方案確定，開發落實與測試上線，這構成一個不斷迭代刷新的流程；

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

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

二、適當時，為開發開啟更多的話語權，避免更多的無用功

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

開發團隊對項目有豐富經驗，設計團隊對此項目經驗少－開發話語權大于視覺

設計團隊擁有多次項目經驗，并有一定的設計沉淀累積－設計話語權大于開發

從視覺設計而言，如果是設計團隊擁有豐富的經驗這是最好的，用經驗累積設計沉淀與創造性指導項目，話語權大，反之亦然。

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

三、用80%場景的視覺設計＋視覺控件規范＋切圖＋標注＋宣講來指導開發

1. 視覺設計的場景

由交互提供具體場景的典型頁面，視覺稿進行輸出，多次迭代評審敲定后，再由開發提出缺失場景的視覺設計，視覺進行場景補充；

2. 視覺UI控件規范的輸出

必須是經過多次評審與迭代的最終視覺稿；但通常情況下，為了趕進度視覺設計與規范是同步進行，這導致規范反復修改的問題。

根據項目經驗是，在視覺迭代中期時，先輸出基礎控件元素規范，包括（顏色／文字／圖標／蒙板／投影／按鈕／輸入框／或個別控件）約占控件規范30％，與開發進行第一次規范評審，確定規范輸出的正確性與專業性。

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

3. 切圖與整理

切出所有視覺頁面中涉及到的圖標與輔助圖形；圖標大小如：24px/ 32px/48px/72px/128px等，根據圖標具體場景中的大小、顏色、狀態來切。換句話說，每一個圖標都有它對應的具體場景，特定的尺寸、顏色和狀態；記得曾與開發gg對規范與切圖的時候，他說：頁面的圖標切圖，需要的是一個具體的拿來就用的，我們不會去畫一個圖標或去特定寫一個圖標的顏色。

4. 標注

視覺頁面的標注基于UI控件規范的基礎上進行，拋棄以往每個頁面細無巨細的具體尺寸／色值／大小的標注。其實每一個視覺頁面皆由不同的UI控件組成，在頁面中將對應控件用UI控件規范中的編號來標注，開發gg拿著視覺頁面標注去敲寫代碼時，再在UI控件規范文檔中尋找相對應的控件規范細節；這樣，視覺設計師避免在視覺頁面中做那密密麻麻的尺寸標注，而開發gg拿到標注清爽的視覺頁面也不會產生視覺疲勞。

5. 規范宣講

以上4步完成后項目開發啟動前，用視覺規范對開發做統一的宣講，避免遺漏造成規則傳達不一致；這樣，還設計原度還是問題么？（后續會有一篇文章專門分享大司項目經驗是如何做標注的。）

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

　　電話：0917-3535180

　　業務咨詢QQ：422627074 397676352 362028197

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