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

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

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

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

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

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

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

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

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

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

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

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

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

三、用80%場景的視覺設(shè)計＋視覺控件規(guī)范＋切圖＋標注＋宣講來指導開發(fā)

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

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

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

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

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

3. 切圖與整理

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

4. 標注

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

5. 規(guī)范宣講

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

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

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

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

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

2. 視覺設(shè)計師直接進組到開發(fā)團隊中

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

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

標題名稱：如何讓設(shè)計效果高還原度落地？
標題來源：http://jinyejixie.com/news34/173534.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應式網(wǎng)站、ChatGPT、網(wǎng)站改版、營銷型網(wǎng)站建設(shè)、電子商務、網(wǎng)頁設(shè)計公司

廣告

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