亚洲av无码成人专区片在线观看,亚洲av岛国动作片在线观看,少妇,喷水,亚洲av成人无遮挡网站在线观看,天堂网www资源在线

為什么視覺還原很重要？

在我們工作的實際項目中，直至開發(fā)扣完最后一行代碼之前，UI所輸出的視覺稿其實并不算是產(chǎn)品的最終形態(tài)。一個設(shè)計師輸出90分的視覺稿，如果視覺僅僅還原了60%，即使設(shè)計師的能力再牛X，在用戶甚至是面試官的眼里，54分就是這位設(shè)計師的最高水準(zhǔn)了。視覺還原，不僅僅直接影響著產(chǎn)品本身的“面子”，更影響著設(shè)計師的“里子”。

那么，在實際項目中到底該怎么保證視覺的完美落地呢？下面我基于目前的項目經(jīng)驗，簡單談?wù)勅齻€老生常談、卻極為重要的核心步驟——規(guī)范、標(biāo)注和走查。

規(guī)范

視覺規(guī)范的制定一般出現(xiàn)在設(shè)計前期（卻影響著整個項目周期），在完成一些關(guān)鍵頁面的視覺后，將已有的或者提前定下的顏色、字體、組件等內(nèi)容制定成規(guī)范，不僅僅保證了視覺的一致性，也極大得方便了樣式、組件的復(fù)用，提高了設(shè)計效率。

統(tǒng)一的規(guī)范對于視覺還原是極具保障的。缺失規(guī)范時，開發(fā)僅憑肉眼基本沒辦法知道這個顏色、字體是之前頁面所出現(xiàn)過的，還是新增的，過多無法公用的樣式將會大幅增加開發(fā)的工作量，視覺還原也將無從保證。尤其是在一個迭代周期長達(dá)一年甚至好幾年的項目中，沒有規(guī)范所帶來的后果是毀滅性的。

而有了一份詳盡的視覺規(guī)范，開發(fā)就可以提前單獨寫好公用的樣式表，通過link標(biāo)簽在html頭部引入，“分離”式的coding一方面可以大幅減少代碼的冗余，進(jìn)而提升網(wǎng)頁加載速度以提高SEO，另一方面也利于今后代碼的維護(hù)及迭代，后期樣式的改變只需要修改樣式表便可以實現(xiàn)全局替換。

一份設(shè)計規(guī)范應(yīng)至少包含顏色、字體、圖標(biāo)、排版以及諸如按鈕、表單、彈窗等方面的組件，并且你需要盡可能考慮到它們的所有狀態(tài)。在定制好規(guī)范后統(tǒng)一上傳到藍(lán)湖等協(xié)同軟件（盡可能避免本地協(xié)作），方便開發(fā)一鍵查看和復(fù)制。后期一旦有新增或者修改，立刻通知所有參與的開發(fā)進(jìn)行修改，減少后期的走查次數(shù)和溝通成本。

組件的制定規(guī)則比較特殊。它不像顏色、字體這些元素一樣簡單加入樣式表就行，大多數(shù)組件會有著各種各樣的規(guī)則和交互態(tài)。并且基于交互的屬性，開發(fā)得花費較多的成本去結(jié)合基JS的框架去Coding和封裝。因此組件在制定規(guī)范前。

請務(wù)必拉上開發(fā)！

因為只有開發(fā)自己知道，目前庫里有哪些封裝好的組件，樣式根據(jù)視覺調(diào)整下可以直接使用，而不是你哼哧哼哧得搞完一套全新的組件庫讓開發(fā)埋頭Coding，開發(fā)會磨刀霍霍向“牛羊”的。。。

一般我會從以下三個方向確立組件的定制計劃：

1.自有組件

檢查開發(fā)手頭有哪些之前項目就寫好的組件，全不全？是否需要新增？樣式和現(xiàn)有項目是否匹配？好不好修改？因為畢竟很多老組件按今天的眼光看已經(jīng)過時了，這些都需要我們視覺來審核。

2.第三方組件庫

如果自由組件你嫌它太丑、覺得即使改也要花費很多時間，那就可以考慮第三方組件——Ant、Element或者iView。作為設(shè)計師，個人比較喜歡使用Ant design資源很全，下載的sketch源文件基本能滿足大部分通用功能，很多控件（比如：各類選擇器、穿梭框等）的視覺與交互體驗也相對較好，可直接復(fù)制組件粘貼至設(shè)計稿中。但前端同學(xué)更傾向于【Element】組件封裝簡單容易修改，對于沒接觸過框架的同學(xué)也方便上手無障礙?！緄View】的組件封裝過于嚴(yán)密，且收費，不太喜歡用。

3.DIY

如果你是比較倔強的設(shè)計師，并且開發(fā)沒有帶刀的習(xí)慣，那你可以選擇自己用設(shè)計軟件去DIY一套組件庫讓開發(fā)Coding并封裝。具體的樣式、規(guī)范可以參考Ant這種優(yōu)秀的語言。當(dāng)然，在時間不是非常充裕的情況下，我不會這么建議。因為在實際項目中，即使你成功做了一套相對完善的組件庫，開發(fā)、測試那邊也需要花費龐大的時間成本來Coding和解決Bug（鍵盤下面的大刀止不住啦，時間緊湊的情況下一旦沒有順利推動，很容易淪為死項目?，F(xiàn)有的第三方組件它不香嗎？當(dāng)然，如果你有幸碰到了愿意給排期的產(chǎn)品小姐姐，和愿意配合你的開發(fā)小哥哥，在Coding完之后請務(wù)必讓他進(jìn)行封裝以保證組件的順利落地！

標(biāo)柱

我知道藍(lán)湖、Pxcooker、Zeplin這類堪稱神器的標(biāo)注軟件，的確將我們廣大設(shè)計師從手動標(biāo)注和切圖的水深火熱當(dāng)中解救出來。但是，我們?nèi)绻麅H僅將視覺稿往藍(lán)湖上一扔了事，那么無疑增加了視覺還原度下降的風(fēng)險。因為，標(biāo)注軟件只負(fù)責(zé)自動生成所有元素的尺寸、樣式，但是開發(fā)不知道應(yīng)該看哪個，尤其是toB項目中一些涉及到表單填寫的復(fù)雜頁面，即使在你已經(jīng)將所有字段長度設(shè)置好足夠空間，每一處間距都用規(guī)律的4倍、8倍去進(jìn)行規(guī)范，開發(fā)仍然可能漏掉一些關(guān)鍵尺寸，OR沒有足夠耐心查看每一處的尺寸，寫完div后用“差不多”的感覺去搭建元素。最后粗看之下還行，但是一旦上了測試環(huán)境，很有可能就出現(xiàn)視覺災(zāi)難。因此，一些復(fù)雜的關(guān)鍵頁面我依然建議做些額外的手動標(biāo)注，主動告訴開發(fā)：哥們這個地方很重要麻煩按這個來。而且這個過程對于設(shè)計師來說也是個回頭審查自己視覺稿的好時機。

走查

我們并非在完成視覺稿的交付后就可以拍拍屁股走人，即使你的視覺規(guī)范、標(biāo)注多么完善詳盡，開發(fā)的Coding過程依然會出現(xiàn)很多不確定性。而設(shè)計師所要做的就是積極得跟進(jìn)走查，主動推進(jìn)項目的順利進(jìn)行。

我根據(jù)以往的經(jīng)驗，將走查分為三種辦法：

（1）即時軟件溝通法

一種很方便但不適合長期使用的辦法。雖說可以在截圖中做標(biāo)記幫助開發(fā)理解，但是很多時候開發(fā)忙著Coding，來不及進(jìn)行回復(fù)，而且這種本地化傳輸式的走查也很容易被聊天記錄所淹沒。

（2）小板凳大法

直接拉個小板凳坐在開發(fā)旁邊盯著改。這是當(dāng)之無愧最為高效的走查辦法，不過這個辦法也有弊端，一來很多地方并不是改margin、padding那么簡單，涉及到一些底層邏輯、bug問題時往往要花費很長，我們就很難一直坐在旁邊暗中觀察；二來給予開發(fā)過多的心理壓力，很容易引來開發(fā)鍵盤下的4 米長大刀。當(dāng)然，如果是緊急需求或者多次溝通仍未修改的情況下，大膽得去使用這個方法吧！

（3）記錄文檔法

根據(jù)開發(fā)同事的反饋，他們其實相當(dāng)不太喜歡那種間斷式的走查，一會改下這個一會改下那個。因為開發(fā)在寫代碼時需要高度集中注意力，一旦多次被打斷要求修改很容易降低Coding效率。因此，將頁面中所有問題羅列到一個文檔中是他們樂于接受的辦法，他們可以暫時放下，找一段時間集中進(jìn)行修改。

一般我目前的走查流就是：標(biāo)記-羅列-交付-復(fù)查

1.標(biāo)記

在開發(fā)寫出的頁面中，將出現(xiàn)的問題用單個序號標(biāo)記在對應(yīng)的位置上并共享到藍(lán)湖。因為僅僅局部截圖說明的話，開發(fā)并不能立刻找到問題在頁面中的精確位置。而如果將所有問題詳細(xì)羅列到頁面對應(yīng)位置的話，就會造成可讀性的嚴(yán)重降低。

2.羅列

將單個頁面的所有問題按照標(biāo)記序號，依次羅列到一個文件中。如果一些位置光憑標(biāo)記不便于理解，完全可以再進(jìn)行局部截圖（比如序號4的彈出氣泡）另外，根據(jù)開發(fā)習(xí)慣將樣式設(shè)置為最低優(yōu)先級，因此我會將涉及底層邏輯、功能類的bug問題標(biāo)紅，讓開發(fā)一眼就能看到并優(yōu)先處理這些問題，最后進(jìn)行樣式的修改。

承載問題的文件可以是Sketch等設(shè)計工具的畫布，也可以是語雀、騰訊文檔這類的共享文檔。前者直接上傳到藍(lán)湖的項目中，方便開發(fā)直接對接視覺稿，但是視覺會有較多的排版工作量，后者免去了上傳這個步驟，團隊每個人都可以方便得添加走查意見以及批注，只是開發(fā)需要較頻繁切換界面，文件的選擇看每個人的習(xí)慣，但是多設(shè)計師的情況下需要盡量保持統(tǒng)一。

3.交付

將問題共享給開發(fā)，并且主動告知，如果有任何疑點、或者難以實現(xiàn)的地方，可以直接在標(biāo)記氣泡旁進(jìn)行批注。另外，我們不一定將所有頁面驗收完再交付，完全可以先將一倆個頁面問題交付給開發(fā)后，我們這邊在同步進(jìn)行其他頁面的走查，以此主動推進(jìn)項目的進(jìn)度。（我一般是按人頭對接，走查完開發(fā)A的頁面交付給A，再走查開發(fā)B的頁面B）。

4.復(fù)查

開發(fā)完成修改之后再進(jìn)行第二次走查，并根據(jù)之前所羅列問題的修改程度進(jìn)行標(biāo)記狀態(tài)的更改。盡量在第三次走查時讓標(biāo)記們?nèi)肯?，否則就放心的使用“小板凳大法”讓開發(fā)修改吧！

最后

雖然是三個老生常談的東西，但是一定程度上的確能夠有效保證我們的視覺還原度！但愿不成熟的分享可以幫助到你~

Powered by Froala Editor