提交需求
賽事與廣告咨詢(xún)合作,請(qǐng)?zhí)顚?xiě)需求表單,我們會(huì)在第一時(shí)間與您聯(lián)系!
設(shè)計(jì)師們?nèi)绾闻c前端工程師們密切配合,提升設(shè)計(jì)還原度...
根據(jù)之前項(xiàng)目經(jīng)驗(yàn)得出的一些淺見(jiàn)
希望大家喜歡~
新的一年里,重新整理了【修訂版】
在迅速發(fā)展與更新的時(shí)代,互聯(lián)網(wǎng)產(chǎn)品在追求高效的同時(shí),對(duì)用戶(hù)體驗(yàn)要求也越來(lái)越高,而產(chǎn)品設(shè)計(jì)還原成為了其中重要的一環(huán)。如何在緊張而有限的時(shí)間內(nèi),達(dá)到目標(biāo)要求?效率與方法至關(guān)重要。設(shè)計(jì)師們?nèi)绾闻c前端工程師們密切配合,提升設(shè)計(jì)還原度,成了設(shè)計(jì)師的主要工作之一。根據(jù)以往的工作經(jīng)驗(yàn),整理并分享給大家。
一、設(shè)計(jì)規(guī)范
設(shè)計(jì)規(guī)范對(duì)于設(shè)計(jì)師的重要性不言而喻,而對(duì)于前端工程師,他們又能直接吸收多少呢?根據(jù)溝通情況以及之前的項(xiàng)目經(jīng)驗(yàn),我們內(nèi)部的工程師在標(biāo)準(zhǔn)色、標(biāo)準(zhǔn)字、按鈕樣式等基礎(chǔ)元素方面基本沒(méi)問(wèn)題,然而在列表、輸入框、標(biāo)簽選項(xiàng)、彈窗等組件搭建還原就不是那么完美了。
其實(shí),這不能怪前端工程師們,因?yàn)橐?guī)范的內(nèi)容確實(shí)過(guò)多,短暫時(shí)間內(nèi)不可能完全消化,有時(shí)設(shè)計(jì)師自己也會(huì)有出錯(cuò)。因此,達(dá)到較為合理的設(shè)計(jì)還原,一個(gè)視覺(jué)設(shè)計(jì)規(guī)范遠(yuǎn)遠(yuǎn)不夠的。
此步驟作用:讓前端工程師對(duì)項(xiàng)目的設(shè)計(jì)樣式有整體了解,快速查找部分基礎(chǔ)元素(如標(biāo)準(zhǔn)色、標(biāo)準(zhǔn)字、按鈕等)。
二、設(shè)計(jì)輸出
關(guān)于設(shè)計(jì)輸出,我們常見(jiàn)是源文件、效果圖與切圖,而標(biāo)注可以往藍(lán)湖上傳設(shè)計(jì)稿查看,少數(shù)可以用Sketch measure或pxcook等工具查看標(biāo)注。
除此之外,我們會(huì)發(fā)現(xiàn)實(shí)際項(xiàng)目的數(shù)據(jù),大多數(shù)是后臺(tái)上傳的,包含圖片、文字等。文字要說(shuō)明最大值或多行展示等,個(gè)別需要設(shè)置最小值;圖片則需要確定后臺(tái)上傳的比例或大小。
如果是APP一級(jí)頁(yè)面,可以考慮預(yù)加載圖,我們常見(jiàn)的一些應(yīng)用天貓、ins、Facebook等都有,Web端界面也會(huì)存在占位符,所以需要輸出預(yù)加載圖的設(shè)計(jì)文檔。
此步驟作用:前端工程師可以通過(guò)藍(lán)湖等工具便捷查看設(shè)計(jì)稿,而預(yù)加載圖能讓界面用戶(hù)體驗(yàn)更佳。
三、設(shè)計(jì)宣講
如果產(chǎn)品設(shè)計(jì)的內(nèi)容比較容易理解,那么,這一步可以省略。否則,需要設(shè)計(jì)師們約個(gè)會(huì)議室,給前端工程師們講解一下規(guī)范和輸出的內(nèi)容,確保當(dāng)場(chǎng)能解決問(wèn)題。設(shè)計(jì)師做好 會(huì)議記錄(記錄問(wèn)題及解決方案,以及達(dá)成的共識(shí)),并且在會(huì)議結(jié)束后以郵件形式發(fā)送前端們,抄送產(chǎn)品和運(yùn)營(yíng),確保會(huì)議內(nèi)容的傳達(dá)到位。注意的是,該宣講會(huì)主要是解決問(wèn)題,提升效率以及提高質(zhì)量,而不是互相推諉??赡艽嬖诟玫亟鉀Q某個(gè)問(wèn)題,設(shè)計(jì)師需要適當(dāng)增加工作量。
此步驟作用:讓設(shè)計(jì)師與前端工程師相關(guān)界面交互視覺(jué)問(wèn)題達(dá)成一致,提升工作效率。
四、開(kāi)發(fā)跟進(jìn)
前端工程師們安排好自己的任務(wù),往往會(huì)有個(gè)開(kāi)發(fā)排期表,從開(kāi)始到結(jié)束,以及中間的相關(guān)時(shí)間細(xì)節(jié)。設(shè)計(jì)師們根據(jù)排期表,時(shí)刻關(guān)注進(jìn)度,需要每隔一段時(shí)間咨詢(xún)一下“XX項(xiàng)目有碰到什么問(wèn)題嗎?”“需要我協(xié)助什么嗎?”但同時(shí),建議千萬(wàn)不要這么問(wèn)的過(guò)于頻繁,對(duì)比自己設(shè)計(jì)時(shí)被催稿的畫(huà)面,你就會(huì)控制頻次了,也需要注意一些用語(yǔ)表達(dá)。同理,這個(gè)過(guò)程的溝通也是以解決實(shí)際問(wèn)題和提升效率為目的。
此步驟作用:主要是設(shè)計(jì)師主動(dòng)推進(jìn)項(xiàng)目發(fā)展,減少前端開(kāi)發(fā)過(guò)程中的不夠完美之處,同時(shí)也是為了加快工作效率。
五、測(cè)試驗(yàn)收
經(jīng)過(guò)了前面的四步,設(shè)計(jì)師們還是不能高枕無(wú)憂。為確保產(chǎn)品上線前的最后一步,設(shè)計(jì)師們?nèi)砸獏⑴c測(cè)試驗(yàn)收環(huán)節(jié)。測(cè)試環(huán)節(jié)一般有兩個(gè)大步驟,第一是產(chǎn)品功能測(cè)試,讓功能從頭到尾走一遍,直到第一步完成,設(shè)計(jì)師們才參與第二大步驟:交互與視覺(jué)驗(yàn)收。
校對(duì)設(shè)計(jì)稿。發(fā)現(xiàn)小問(wèn)題,可以直接發(fā)給前端工程師修改;若問(wèn)題較多,可以整理成一份文檔,郵件發(fā)送;但是發(fā)現(xiàn)問(wèn)題特別嚴(yán)重,則需要召開(kāi)會(huì)議,當(dāng)面再溝通。測(cè)試驗(yàn)收環(huán)節(jié),不同公司的流程可能會(huì)有不同。
此外,不同的機(jī)型(iPhone、小米、華為、vivo、三星、oppo等),不同的版本的系統(tǒng)(iOS、安卓各自不同版本),不同狀態(tài)的數(shù)據(jù)(字符的長(zhǎng)短、內(nèi)容的有無(wú)等)都需要設(shè)計(jì)師們過(guò)一遍,一有問(wèn)題及時(shí)提交,前端工程師們會(huì)根據(jù)問(wèn)題進(jìn)行修復(fù),直到驗(yàn)收通過(guò),應(yīng)用完成打包,等待上線。
此步驟作用:確保項(xiàng)目的交互與視覺(jué)能達(dá)到上線要求,并堅(jiān)守最后一關(guān),直至上線成功。
結(jié)語(yǔ)
那么,做到以上五步是否設(shè)計(jì)還原就能達(dá)到100%?答案是基本做不到,幾乎不存在100%還原的情況,除非是很簡(jiǎn)單的一些頁(yè)面。至于要還原到多少,90%?95%? 還是99%?……每個(gè)設(shè)計(jì)師心中都有一個(gè)標(biāo)準(zhǔn),項(xiàng)目時(shí)間不等人,有限的時(shí)間內(nèi)做到最好,我們希望是做到99.9999%。
如今設(shè)計(jì)還原已成為設(shè)計(jì)師日??己酥唬枰蠹抑匾?,提升效率和保證質(zhì)量。也相信大家會(huì)在工作中總結(jié)出更好的相關(guān)流程和經(jīng)驗(yàn),從而提升產(chǎn)品設(shè)計(jì)的還原度。
Powered by Froala Editor
密碼登錄
大牛,別默默的看了,快登錄幫我點(diǎn)評(píng)一下吧!:)
登錄 立即注冊(cè)