在這個快速發(fā)展履恩、迭代、更新的時代暇屋，互聯(lián)網(wǎng)產(chǎn)品的用戶體驗(yàn)重視度越來越高似袁，而其中的產(chǎn)品設(shè)計(jì)還原也成為了重要的一環(huán)洞辣。在緊張而有限的時間內(nèi)咐刨，效率與方法得到了考驗(yàn)，設(shè)計(jì)師們?nèi)绾闻c前端工程師們密切配合扬霜，提升設(shè)計(jì)還原度定鸟，成了設(shè)計(jì)師的主要工作之一。本人根據(jù)自己過往的幾次實(shí)戰(zhàn)項(xiàng)目經(jīng)驗(yàn)著瓶，整理并與大家交流一番联予。

一、設(shè)計(jì)規(guī)范

設(shè)計(jì)規(guī)范對于設(shè)計(jì)師的重要性不言而喻材原，那么對于前端工程師又能直接吸收多少呢沸久？經(jīng)溝通以及之前的設(shè)計(jì)驗(yàn)收來看，我們內(nèi)部的工程師在標(biāo)準(zhǔn)色余蟹、標(biāo)準(zhǔn)字卷胯、布局間距、按鈕樣式方面基本沒什么大問題威酒，然而列表窑睁、輸入框、標(biāo)簽選項(xiàng)葵孤、彈窗等(以上每個類別展現(xiàn)形式不止一種)還原就不是那么完美了担钮。其實(shí)，這不能怪前端工程師們尤仍，規(guī)范的內(nèi)容確實(shí)過多箫津，短暫時間內(nèi)不可能完全消化，有時設(shè)計(jì)師自己也會有出錯宰啦。那么可見苏遥，一個視覺設(shè)計(jì)規(guī)范遠(yuǎn)遠(yuǎn)不夠的。

至于設(shè)計(jì)規(guī)范的具體內(nèi)容绑莺，網(wǎng)上發(fā)布的有很多暖眼，大家請自行搜索查看。

提供一個規(guī)范集合纺裁，涵蓋眾多應(yīng)用诫肠。

此步驟作用：讓前端工程師對項(xiàng)目的前端樣式有個整體了解司澎，快速查找部分基礎(chǔ)樣式(如標(biāo)準(zhǔn)色、標(biāo)準(zhǔn)字栋豫、按鈕等)挤安。

二、設(shè)計(jì)輸出

關(guān)于設(shè)計(jì)輸出丧鸯，我們常見是源文件蛤铜、效果圖、切圖丛肢，之前常見的人工標(biāo)注減少了(因?yàn)楝F(xiàn)在插件工具marketch围肥、pxcook等都能讓工程師們很方便看到標(biāo)注)。?

不過我們還是有標(biāo)注蜂怎，因?yàn)楹芏鄶?shù)據(jù)是后臺傳輸?shù)角岸四驴蹋袌D片、有文字杠步，每個內(nèi)容都需要給運(yùn)營設(shè)置一個上傳標(biāo)準(zhǔn)(如圖所示)氢伟。

除了額外的一些標(biāo)注，我們還需要寫一些重要部分設(shè)計(jì)說明幽歼，例如模塊區(qū)分朵锣、局部特殊設(shè)計(jì)(該內(nèi)容根據(jù)自身產(chǎn)品而確定)。

此外甸私，如果是APP一級頁面诚些，可以考慮預(yù)加載圖，我們常見的一些應(yīng)用天貓颠蕴、ins泣刹、Facebook等都有，所以需要輸出預(yù)加載圖的源文件犀被。

此步驟作用：讓前端工程師快速查找所需文件椅您，源文件用于標(biāo)注查詢尺寸，效果圖用于查看整體效果寡键，切圖用于頁面搭建掀泳，重點(diǎn)內(nèi)容標(biāo)注能讓界面減少誤差，而預(yù)加載圖能讓界面用戶體驗(yàn)更佳西轩。

三员舵、設(shè)計(jì)宣講

如果產(chǎn)品設(shè)計(jì)的內(nèi)容比較容易理解，那么藕畔，這一步可以省略马僻。否則，需要設(shè)計(jì)師們約個會議室注服，與前端工程師們講解一下規(guī)范和輸出的內(nèi)容韭邓，確保當(dāng)場能解決問題措近。設(shè)計(jì)師做好會議記錄(記錄問題及解決方案，以及達(dá)成的共識)女淑，并且在會議結(jié)束后以郵件形式發(fā)送前端們瞭郑，抄送產(chǎn)品和運(yùn)營，確保會議內(nèi)容的傳達(dá)到位鸭你。值得注意的是屈张，該宣講主要是解決問題，提升效率袱巨，提高質(zhì)量阁谆，而不是劃清某種責(zé)任界限，因?yàn)榭赡艽嬖跒榱烁玫慕鉀Q某個問題瓣窄，增加設(shè)計(jì)師們的些許工作量笛厦。

此步驟作用：讓設(shè)計(jì)師與前端工程師相關(guān)問題達(dá)成一致纳鼎，提升工作效率俺夕。

四、開發(fā)溝通

?前端工程師們安排好自己的任務(wù)贱鄙，往往會有個開發(fā)排期表劝贸，從開始到結(jié)束，以及中間的相關(guān)時間細(xì)節(jié)逗宁。設(shè)計(jì)師們根據(jù)排期表映九，時刻關(guān)注進(jìn)度，需要每隔一段時間咨詢一下“XX項(xiàng)目有碰到什么問題嗎瞎颗？需要我?guī)褪裁磫峒俊钡c此同時，建議千萬不要這么問的過于頻繁哼拔，對比自己設(shè)計(jì)時被催盡快完成的畫面引有，你就會控制頻次，也會注意一些用語表達(dá)倦逐。同理譬正，這個過程的溝通也是以解決實(shí)際問題和提升效率為目的。

此步驟作用：主要是設(shè)計(jì)師主動推進(jìn)項(xiàng)目發(fā)展檬姥，減少前端開發(fā)過程中的不夠完美之處曾我，同時也是為了加快工作效率。

五健民、測試驗(yàn)收

經(jīng)過了前面的四步抒巢，設(shè)計(jì)師們還是不能高枕無憂。為確保產(chǎn)品上線前的最后一步秉犹，設(shè)計(jì)師們?nèi)砸獏⑴c測試驗(yàn)收環(huán)節(jié)蛉谜。測試環(huán)節(jié)一般有兩個大步驟平酿，第一是產(chǎn)品功能測試，讓功能從頭到尾走一遍悦陋，直到第一步完成蜈彼，設(shè)計(jì)師們才參與第二大步驟：交互與視覺驗(yàn)收。

不同的機(jī)型(iPhone俺驶、小米幸逆、華為、vivo暮现、三星还绘、oppo等)，不同的版本的系統(tǒng)(iOS栖袋、安卓各自不同版本)拍顷，不同狀態(tài)的數(shù)據(jù)(字符的長短、內(nèi)容的有無等)都需要設(shè)計(jì)師們過一遍塘幅，一有問題及時提交昔案，前端工程師們會根據(jù)問題進(jìn)行修復(fù)，直到驗(yàn)收通過电媳，應(yīng)用完成打包踏揣，等待上線。

此步驟作用：確保項(xiàng)目的交互與視覺能達(dá)到上線要求匾乓，并堅(jiān)守最后一關(guān)捞稿，直至上線成功。

結(jié)語

那么拼缝，做到以上五步是否設(shè)計(jì)還原就能達(dá)到100%娱局？答案是基本做不到，幾乎不存在100%還原的情況咧七，除非是很簡單的一些頁面衰齐。至于要還原到多少，90%猪叙？95%娇斩？99%？……每個設(shè)計(jì)師心中都有一個標(biāo)準(zhǔn)穴翩，項(xiàng)目時間不等人犬第，有限的時間內(nèi)做到最好，我們希望是做到99.9999%芒帕。

如今設(shè)計(jì)還原已成為設(shè)計(jì)師日城干ぃ考核之一，需要大家重視背蟆，也相信大家會在工作中總結(jié)出更好的相關(guān)流程和經(jīng)驗(yàn)鉴分，從而提升產(chǎn)品設(shè)計(jì)的還原度哮幢。