用靈魂感悟設(shè)計 · 用設(shè)計創(chuàng)造價值
WITH SOUL FEELING DESIGN WITH DESIGN TO CREATE VALUE
您當(dāng)前位置:  設(shè)計中國    ⁄    熱門文章    ⁄ 資訊內(nèi)容

視覺設(shè)計師如何讓設(shè)計效果高還原度落地

作者:admin      來源:互聯(lián)網(wǎng)      發(fā)布時間: 2016/4/20 16:27:31     瀏覽:
一個產(chǎn)品完整的設(shè)計流程中,交互與視覺定稿后,后續(xù)視覺規(guī)范的輸出、UI控件的整理與標(biāo)注、開發(fā)的高還原度,都會影響產(chǎn)品最終的用戶體驗。作為視覺設(shè)計師,在視覺設(shè)計的最后階段則是繁瑣且像素級別的精雕細琢,設(shè)計講究的不僅是美感還有嚴(yán)謹(jǐn)態(tài)度與邏輯。

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

  視覺設(shè)計師如何讓設(shè)計效果高還原度落地

  最近半年在大司(華為)參與一個重點項目,且將會上線到全球各個局點(本司專稱,指某個國家)中,涉及多端多屏協(xié)同問題。臨時組成的設(shè)計作戰(zhàn)團隊,人員投入少、時間緊迫、任務(wù)量大高強度的狀態(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控件的整理與標(biāo)注、開發(fā)的高還原度,都會影響產(chǎn)品最終的用戶體驗。作為視覺設(shè)計師,在視覺設(shè)計的最后階段則是繁瑣且像素級別的精雕細琢,開發(fā)出來的精美頁面需要視覺設(shè)計師做到以下幾點。

  一、視覺與交互之間應(yīng)銜接無縫,即時刷新視覺頁面

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

  前期準(zhǔn)備階段:確定設(shè)計需求的目標(biāo),競品分析,用戶研究,市場評估等;

  設(shè)計需求分析階段:設(shè)計需求的理清,業(yè)務(wù)邏輯的推敲,產(chǎn)品的架構(gòu)的搭建;

  設(shè)計執(zhí)行階段:交互設(shè)計原型的輸出,視覺設(shè)計風(fēng)格與方案確定,開發(fā)落實與測試上線,這構(gòu)成一個不斷迭代刷新的流程;

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

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

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

  視覺規(guī)范、視覺標(biāo)注、視覺控件庫的整理與輸出目的只有一個:那就是指導(dǎo)開發(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)造性指導(dǎo)項目,話語權(quán)大,反之亦然。

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

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

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

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

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

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

  根據(jù)項目經(jīng)驗是,在視覺迭代中期時,先輸出基礎(chǔ)控件元素規(guī)范,包括(顏色/文字/圖標(biāo)/蒙板/投影/按鈕/輸入框/或個別控件)約占控件規(guī)范30%,與開發(fā)進行第一次規(guī)范評審,確定規(guī)范輸出的正確性與專業(yè)性。

  讓開發(fā)選取所有視覺頁面中需要標(biāo)注的UI控件,因為開發(fā)選擇的UI控件也為通用樣式,開發(fā)代碼寫成UI控件庫(可以對應(yīng)視覺的控件列表)并由其它分模塊統(tǒng)一調(diào)用;且所有UI控件必須基于最終視覺效果進行控件抽取與迭代輸出。最后,layout用文檔(pdf)的方式總結(jié),避免單獨模塊單獨頁面?zhèn)鬟f,更能將規(guī)則一目了然;規(guī)范是一個龐大而繁瑣,極需耐心的工作;過程中注重每一個細節(jié)的精準(zhǔn)與合理性。

  3、切圖與整理

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

  4、標(biāo)注

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

  5、規(guī)范宣講

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

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

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

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

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

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

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

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