2022-5-20 純純
01. 在工作中遇到的狀況
設(shè)計(jì)師常常會(huì)遇到這樣的問(wèn)題，在新產(chǎn)品發(fā)布之前，都會(huì)做一遍線上的UI視覺(jué)校驗(yàn)，在這個(gè)過(guò)程中，前端開(kāi)發(fā)工程師所寫(xiě)的界面總會(huì)發(fā)生圖片變形，文字字號(hào)不對(duì)，元素與元素之間不對(duì)齊的事情發(fā)生。
設(shè)計(jì)師給前端開(kāi)發(fā)工程師標(biāo)記了頁(yè)面中錯(cuò)誤的地方，但是多數(shù)前端開(kāi)發(fā)工程師一聽(tīng)那么多頭都大了，在緊張的上線日期限制下更有甚者不予理睬直接上線，用戶吐槽設(shè)計(jì)不嚴(yán)謹(jǐn)，導(dǎo)致設(shè)計(jì)背鍋。
就好比下面這個(gè)例子，為什么老板會(huì)覺(jué)得不好呢？其實(shí)是產(chǎn)品在用戶體驗(yàn)的本能層次出現(xiàn)的不好的體驗(yàn)。
02. 好產(chǎn)品具備的特征
互聯(lián)網(wǎng)產(chǎn)品可以利用產(chǎn)品五要素把產(chǎn)品劃分為5個(gè)層次。全球的認(rèn)知心理學(xué)家（美）諾曼在《情感化設(shè)計(jì)》這本書(shū)中講產(chǎn)品本能水平的設(shè)計(jì)——本能層；行為水平的設(shè)計(jì)——行為層；反思水平的設(shè)計(jì)——反思層。
互聯(lián)網(wǎng)產(chǎn)品可以用諾曼教授提出的感情感化設(shè)計(jì)的3個(gè)層次聯(lián)系起來(lái)，并把這些情感分為5個(gè)緯度進(jìn)行考察，就可以得到下面這張知識(shí)網(wǎng)絡(luò)圖。
從上面這張圖我們可以看出用戶評(píng)判一個(gè)產(chǎn)品好壞的標(biāo)準(zhǔn)還是來(lái)自產(chǎn)品的表現(xiàn)層、框架層、結(jié)構(gòu)層中的直觀體驗(yàn)也就本能層次和行為層次的感受，如果產(chǎn)品的吸引度、完成度、滿意度、忠誠(chéng)度、推薦度的數(shù)據(jù)很高也就證明產(chǎn)品很好，如果數(shù)據(jù)表現(xiàn)不好那可以判斷產(chǎn)品還是有需要提升的地方。
回到第一張圖片，老板覺(jué)得有問(wèn)題的原因就在于產(chǎn)品在本能層次的不合格，那重點(diǎn)來(lái)了有什么設(shè)計(jì)方法可以避免本能層出現(xiàn)問(wèn)題的情況嗎？答案是毋庸置疑的，那就是“設(shè)計(jì)走查?！?
03. 設(shè)計(jì)走查的意義
一名專(zhuān)業(yè)的B端設(shè)計(jì)師，并不是說(shuō)你把設(shè)計(jì)稿做得很完美，把標(biāo)注和切圖完整地交給開(kāi)發(fā)小哥哥之后就完事了，其實(shí)在這個(gè)階段設(shè)計(jì)只是完成設(shè)計(jì)工作中產(chǎn)出效果圖的工作，并沒(méi)有進(jìn)行最后驗(yàn)收的環(huán)節(jié)，如果開(kāi)發(fā)還原出來(lái)的產(chǎn)品跟設(shè)計(jì)稿差距較大的話，設(shè)計(jì)其實(shí)也是要負(fù)很大責(zé)任的。
就好比工廠的流水線中一臺(tái)電腦的生產(chǎn)，把電腦從工廠搬到運(yùn)輸車(chē)上也算是電腦生產(chǎn)完畢，但是必須要送到客戶手里，客戶簽字確認(rèn)，工廠才能算是電腦賣(mài)出去了，由此可見(jiàn)設(shè)計(jì)走查是保證用戶有高質(zhì)量體驗(yàn)的不可缺少的一個(gè)環(huán)節(jié)。
設(shè)計(jì)走查的意義在于3點(diǎn)：
1、確保產(chǎn)品的設(shè)計(jì)細(xì)節(jié)的還原度合格，從而保證產(chǎn)品的視覺(jué)效果和交互體驗(yàn)?zāi)軡M足用戶需求。
2、是衡量設(shè)計(jì)師是否是一個(gè)合格設(shè)計(jì)師的重要指標(biāo)。
3、通過(guò)細(xì)致入微的專(zhuān)業(yè)設(shè)計(jì)素質(zhì)贏得公司團(tuán)隊(duì)內(nèi)部設(shè)計(jì)話語(yǔ)權(quán)的提升。
既然設(shè)計(jì)走查這么重要為什么大家還會(huì)忽視呢？其實(shí)大家對(duì)設(shè)計(jì)走查的看法有一個(gè)誤區(qū)，如果你想成為一名專(zhuān)業(yè)的B端設(shè)計(jì)師，一定要改變以上的錯(cuò)誤觀念，擺正一個(gè)正確的設(shè)計(jì)觀念。
設(shè)計(jì)師在公司代表著視覺(jué)上的最高水準(zhǔn)，設(shè)計(jì)稿則是設(shè)計(jì)師專(zhuān)業(yè)能力的體現(xiàn)，如果一個(gè)設(shè)計(jì)師的能力是100分，設(shè)計(jì)稿的分值90分，開(kāi)發(fā)實(shí)現(xiàn)后的產(chǎn)品分值為50分，在沒(méi)有進(jìn)行設(shè)計(jì)校驗(yàn)的情況下，這時(shí)候?qū)a(chǎn)品發(fā)布出去，用戶或者老板只知道該公司的產(chǎn)品設(shè)計(jì)只有50分，而不會(huì)知道背后設(shè)計(jì)師最高的水準(zhǔn)是100分。
慢慢地設(shè)計(jì)師就會(huì)在開(kāi)發(fā)團(tuán)隊(duì)中做設(shè)計(jì)變得很被動(dòng)，越被動(dòng)就會(huì)越?jīng)]有話語(yǔ)權(quán)，所以對(duì)一名專(zhuān)業(yè)的B端設(shè)計(jì)師來(lái)說(shuō)，除了擁有很強(qiáng)大的效果圖設(shè)計(jì)能力之外，還需要有保證效果圖落地能力。
01. 設(shè)計(jì)走查的種類(lèi)
設(shè)計(jì)走查是一種設(shè)計(jì)層面找尋問(wèn)題的方法，多數(shù)應(yīng)用在找尋產(chǎn)品問(wèn)題或者是對(duì)項(xiàng)目開(kāi)發(fā)過(guò)程中的測(cè)試環(huán)節(jié)。具體的方式歸類(lèi)為3種：
1）體驗(yàn)設(shè)計(jì)走查：是指人機(jī)交互之間的細(xì)節(jié)體驗(yàn)、比如非力度測(cè)試、滿意度測(cè)試。可用性測(cè)試的調(diào)查這些方法都是體驗(yàn)走查的一部分。
2）交互設(shè)計(jì)走查：是指針對(duì)產(chǎn)品場(chǎng)景與場(chǎng)景之間的動(dòng)態(tài)交互效果進(jìn)行走查。
3）視覺(jué)設(shè)計(jì)走查：是指前端開(kāi)發(fā)出來(lái)的靜態(tài)頁(yè)跟設(shè)計(jì)師出的效果進(jìn)行視覺(jué)細(xì)節(jié)的校對(duì)和檢查，確保開(kāi)發(fā)出來(lái)的視覺(jué)和設(shè)計(jì)圖保持一致。
02. 制作走查表的三種方法
很多人會(huì)納悶了，公司要是沒(méi)有這種走查表，那怎么進(jìn)行這三種設(shè)計(jì)走查呢？這里告訴大家我的一個(gè)工作辦法，總共分為3個(gè)階段“尋找·借鑒”——“思考·定制”——“優(yōu)化·完善”。
a.尋找·借鑒
當(dāng)大家有一個(gè)知識(shí)的概念，如果想更深入了解這個(gè)概念就需要在網(wǎng)上找一些關(guān)于這個(gè)概念的信息，這個(gè)過(guò)程就是尋找。如果大家沒(méi)有做過(guò)類(lèi)似這種設(shè)計(jì)走查的經(jīng)驗(yàn)，那第一時(shí)間也是去尋找，尋找設(shè)計(jì)走差的概念，甚至是做好了的走查表。
可能還會(huì)有人問(wèn)，別的公司和我們公司做的行業(yè)不同，那別人公司的走差表我們公司能用嗎？大家可以復(fù)用70%左右的，那剩下的30%就需要進(jìn)入下一個(gè)步驟“思考·定制”階段了。
b.思考·定制
當(dāng)我們完成第一步之后，就需要對(duì)自己所處的行業(yè)或者產(chǎn)品有一個(gè)認(rèn)知，思考我們的用戶類(lèi)型是什么，他們的使用場(chǎng)景是什么，他們最需要解決的需求是什么等等問(wèn)題，然后再根據(jù)這些問(wèn)題定制一系列體驗(yàn)、交互、設(shè)計(jì)的問(wèn)題，那就成為了自己產(chǎn)品定制的一份設(shè)計(jì)走查表了。
c.優(yōu)化·完善
任何工作為了更好地適應(yīng)當(dāng)前的工作，都需要持續(xù)迭代。假設(shè)，在第二階段定制的問(wèn)題有些微交互動(dòng)效果的問(wèn)題，但是這是前年用戶比較在意的，現(xiàn)在很多產(chǎn)品都有了微交互動(dòng)效了，所以現(xiàn)在、意義就沒(méi)有那么大了，我們的設(shè)計(jì)走查表也要根據(jù)互聯(lián)網(wǎng)的大環(huán)境不斷地進(jìn)行優(yōu)化和完善。
03. 產(chǎn)品表現(xiàn)層——視覺(jué)校驗(yàn)
設(shè)計(jì)走查和設(shè)計(jì)校驗(yàn)并沒(méi)有大的區(qū)分，但是我理解設(shè)計(jì)走查是一個(gè)比較新型的詞，設(shè)計(jì)走查的范圍要比設(shè)計(jì)校驗(yàn)的范圍大一些。
有些公司會(huì)把設(shè)計(jì)走查應(yīng)用于改版之前，當(dāng)作找尋產(chǎn)品問(wèn)題的一種方法，也有一些公司會(huì)把設(shè)計(jì)走查應(yīng)用于項(xiàng)目做完開(kāi)發(fā)在測(cè)試環(huán)節(jié)做測(cè)試的一種方法。比如在啟動(dòng)產(chǎn)品改版前可以通過(guò)“視覺(jué)設(shè)計(jì)基礎(chǔ)自查表”來(lái)收集產(chǎn)品目前的視覺(jué)體驗(yàn)問(wèn)題。
04. 視覺(jué)校驗(yàn)需要審查哪些緯度
設(shè)計(jì)校驗(yàn)驗(yàn)收表可以簡(jiǎn)單地理解為是用于審查產(chǎn)品表現(xiàn)層的形狀、色彩、字體、構(gòu)成、質(zhì)感、動(dòng)效這六點(diǎn)問(wèn)題的記錄的表格。其實(shí)這六點(diǎn)也是諾曼教授提出的感情感化設(shè)計(jì)中本能層次和行為層次審查的六點(diǎn)。
再講如何做之前，大家還是要先了解一下驗(yàn)收流程中的步驟。
01. 視覺(jué)校驗(yàn)做什么
這里描述兩點(diǎn)，一個(gè)是開(kāi)發(fā)階段，另一個(gè)是測(cè)試階段的流程。
在公司的項(xiàng)目開(kāi)發(fā)階段：是設(shè)計(jì)師設(shè)計(jì)完效果圖，進(jìn)行標(biāo)注（現(xiàn)在大家都是使用第三方標(biāo)注軟件比如藍(lán)湖、摹客、Sketch Measure 等），在交付開(kāi)發(fā)。
在項(xiàng)目測(cè)試階段：一般都是產(chǎn)品經(jīng)理發(fā)起一個(gè)項(xiàng)目進(jìn)入測(cè)試階段的通知把設(shè)計(jì)師、開(kāi)發(fā)、測(cè)試、和產(chǎn)品經(jīng)理都設(shè)置為參與者，之后由測(cè)試人員進(jìn)行產(chǎn)品功能邏輯的測(cè)試、設(shè)計(jì)師進(jìn)行視覺(jué)驗(yàn)收；驗(yàn)收完成后產(chǎn)品經(jīng)理驗(yàn)收測(cè)試結(jié)果，如有問(wèn)題找開(kāi)發(fā)進(jìn)行修改；修改完畢再找測(cè)試、設(shè)計(jì)、產(chǎn)品進(jìn)行確認(rèn)，沒(méi)問(wèn)題就封版了，產(chǎn)品經(jīng)理確認(rèn)發(fā)版日期，如果還有問(wèn)題就再修改。
02. 視覺(jué)校驗(yàn)的驗(yàn)收標(biāo)準(zhǔn)
很多剛?cè)胄械脑O(shè)計(jì)新手，在校驗(yàn)階段不知道檢驗(yàn)?zāi)男┚S度信息，以至于很多視覺(jué)元素都需要查看，對(duì)于c端來(lái)說(shuō)界面的場(chǎng)景、交互比較簡(jiǎn)單還能應(yīng)付。
但是對(duì)于模塊功能復(fù)雜、交互場(chǎng)景眾多的B端產(chǎn)品來(lái)說(shuō)每個(gè)場(chǎng)景都要查看很耗費(fèi)精力工作效率也不高。
所以我總結(jié)以下幾個(gè)高頻出現(xiàn)問(wèn)題的點(diǎn)供大家參考，大家可以按照以下幾個(gè)緯度進(jìn)行視覺(jué)走查，提高自己在工作中的效率。
a.檢查設(shè)計(jì)稿的可行性
人無(wú)完人，再專(zhuān)業(yè)的設(shè)計(jì)師，也不可能100%保證自己的設(shè)計(jì)方案就是最好的設(shè)計(jì)方案，在交付設(shè)計(jì)稿前期設(shè)計(jì)師應(yīng)該自我檢查自己的設(shè)計(jì)稿是否能清晰地傳遞信息，對(duì)于一些重要的模塊是否能凸顯出來(lái)，對(duì)于一些比較復(fù)雜的交互場(chǎng)景開(kāi)發(fā)是否能夠?qū)崿F(xiàn)，市場(chǎng)上眾多的屏幕尺寸，這樣的布局方式是否是最為合理的等這些緯度進(jìn)行思考做設(shè)計(jì)，保證設(shè)計(jì)方案的可行性。
這里我舉一個(gè)我真實(shí)的案例，起初我接到的需求就是設(shè)計(jì)一個(gè)模塊里面信息排版，如果我采用第一個(gè)方案那肯定是不行，因?yàn)樾畔蛹?jí)區(qū)分不夠明顯，第二個(gè)方案把數(shù)字標(biāo)簽用顏色進(jìn)行了區(qū)分，但是我又想如果出現(xiàn)文案比較多的場(chǎng)景，對(duì)齊方式都是左對(duì)齊，那“指標(biāo)值”的信息就不可能保持左對(duì)齊，所以我又出了第四個(gè)方案，目前來(lái)看第四個(gè)方案算是最佳方案。
假設(shè)當(dāng)時(shí)我就交付前端開(kāi)發(fā)第一種方案，上線后出現(xiàn)問(wèn)題，還需要調(diào)整到第四種方案，慢慢的前端開(kāi)發(fā)就會(huì)質(zhì)疑設(shè)計(jì)的專(zhuān)業(yè)能力，后續(xù)合作也會(huì)難以推進(jìn)了。
b.組件調(diào)用是否正確
B端產(chǎn)品的業(yè)務(wù)復(fù)雜，模塊交叉設(shè)計(jì)數(shù)量多，所以在設(shè)計(jì)b端產(chǎn)品起初都是用原子化的思維搭建一個(gè)組件庫(kù)。前端是開(kāi)發(fā)階段在樣式庫(kù)中寫(xiě)一個(gè)標(biāo)準(zhǔn)的控件樣式，然后在不同的頁(yè)面場(chǎng)景中調(diào)用公共樣式，原理類(lèi)似于我們?cè)?Sketch 中搭建 Symbol。我們要從兩個(gè)方面看組件是否調(diào)用正確。
1）公共組件是否正確
公共組件調(diào)用正確，好處就是公共產(chǎn)品的整體視覺(jué)風(fēng)格是一致的，比如頁(yè)面的側(cè)邊導(dǎo)航，搜索場(chǎng)景、詳情頁(yè)場(chǎng)景布局是否一致，在斷網(wǎng)或者報(bào)錯(cuò)的場(chǎng)景中出現(xiàn)提醒條樣式是否一致?？蛇M(jìn)行交互的按鈕樣式、交互狀態(tài)的按鈕是否一致等等。
2）業(yè)務(wù)組件是否正確
在真實(shí)開(kāi)發(fā)場(chǎng)景中，有一些前端開(kāi)發(fā)雖然調(diào)用一個(gè)樣式，但是在設(shè)計(jì)規(guī)范中一個(gè)樣式可能會(huì)有多個(gè)尺寸，比如這個(gè)按鈕，在開(kāi)發(fā)階段避免不了出現(xiàn)樣式雖然是對(duì)的，但是尺寸調(diào)用錯(cuò)誤的情況出現(xiàn)，所以要查看一下組件的樣式和尺寸前端開(kāi)發(fā)是否調(diào)用正確。
按照這個(gè)思路去設(shè)計(jì)最為重要的就是要檢查開(kāi)發(fā)人員調(diào)用的組件庫(kù)的規(guī)格是否是我們?cè)O(shè)計(jì)稿的規(guī)格，以此類(lèi)推檢查整體的布局、按鈕樣式，報(bào)錯(cuò)樣式。
這里需要描述的內(nèi)容相對(duì)較多，以后有機(jī)會(huì)我可以再補(bǔ)充一份關(guān)于《如何搭B端建組件庫(kù)》的文章，咱們?cè)敿?xì)聊一聊。
c.空間關(guān)系是否一致
空間關(guān)系可以簡(jiǎn)單地理解為模塊與模塊之間的“間距”關(guān)系和組件與組件之間“間距”的關(guān)系。
1）模塊與模塊之間——間距
所有模塊（卡片）之間的間距，這里具體指的頁(yè)面布局包括橫向間距和縱向間距，大家可以采用4px（或者8px）的倍數(shù)進(jìn)行刪格布局，把刪格布局的基礎(chǔ)規(guī)范梳理出來(lái)，以這個(gè)規(guī)范當(dāng)作標(biāo)注來(lái)審查橫向間距和縱向間距。
2）組件與組件之間——間距
另外一點(diǎn)就是我們?cè)诖罱ńM件階段，組件與組件之間的間距關(guān)系是否一致，不要出現(xiàn)不對(duì)齊的情況出現(xiàn)。
3）為什么要用統(tǒng)一間距
大家了解空間關(guān)系都要看哪些緯度后，我們?cè)賮?lái)解答一下大家心中的疑惑，為什么要保持間距一致呢？主要原因有以下三點(diǎn)：
對(duì)于如何使用間距，我建議大家可以看一看《寫(xiě)給大家看的設(shè)計(jì)書(shū)》里面關(guān)于版式設(shè)計(jì)四大原則的講解和有關(guān)格式塔原理的文章。
d.文案的顯示是否清晰
在UI設(shè)計(jì)中，我們總避免不了與字體打交道，字體也經(jīng)常是我們?cè)谠O(shè)計(jì)中容易忽視的部分，影響字體的清晰度無(wú)非是字體、字號(hào)，字重，段間距這幾個(gè)參數(shù)的設(shè)計(jì)。
1）字體
字體的實(shí)現(xiàn)其實(shí)是電腦渲染的一個(gè)過(guò)程，Mac電腦默認(rèn)字體是蘋(píng)方，Wids電腦默認(rèn)字體是微軟雅黑。在字體的選擇里面行業(yè)里是有標(biāo)準(zhǔn)的規(guī)范的，比如ont-family：serif、sans-serif、monospace、cursive和fantasy這五種字體，前端在編寫(xiě)代碼時(shí)候會(huì)把這種多個(gè)字體名稱(chēng)保存為“字體的回退機(jī)制”來(lái)定義，意思就是如果展示的設(shè)備（瀏覽器）檢索時(shí)沒(méi)有第一款字體就依次順延使用下一款字體，這個(gè)大家只需要了解就好，在字體選擇中使用頻次最多的還是對(duì)數(shù)字字體的選擇。
對(duì)于數(shù)字的字體設(shè)計(jì)要提前查看是否字體有版權(quán)。這里分享一個(gè)可以免費(fèi)查詢(xún)字體的網(wǎng)站：
不同的網(wǎng)站對(duì)字體排序的方式可能不一樣，有興趣的小伙伴可以用下面的這個(gè)方法進(jìn)行查看。
2）字號(hào)/行高
對(duì)字體的字號(hào)也要進(jìn)行走查，因?yàn)樵陂_(kāi)發(fā)階段在不同的瀏覽器中顯示的字號(hào)會(huì)有變形的情況出現(xiàn)。
另外考慮各個(gè)瀏覽器的兼容問(wèn)題，PC端建議使用最好的字號(hào)是12PT，因?yàn)?2PT可以保證在現(xiàn)在市面上的瀏覽器中是可以清晰顯示的，如果有特殊場(chǎng)景需要用到12PT以下的字號(hào)，需要和開(kāi)發(fā)說(shuō)明并且標(biāo)注出來(lái)。
3）字重
設(shè)計(jì)區(qū)分文案層級(jí)的場(chǎng)景使用頻率最高、視覺(jué)效果最好的設(shè)計(jì)方法就是給字體加粗的字體樣式了。
這里要注意的是初級(jí)設(shè)計(jì)師的眼力可能還沒(méi)有達(dá)到很高的水平，尤其是最小的字體顯示加粗或者不加粗的效果視覺(jué)在電腦那么大的屏幕上感官并不是很明顯，所以最好可以通過(guò)從代碼的層面進(jìn)行核對(duì)，具體方式可以看圖：
e.顏色的選擇是否科學(xué)
顏色是給用戶呈現(xiàn)面積最大的一個(gè)元素，對(duì)用戶來(lái)說(shuō)感官層里表現(xiàn)最為明顯的一個(gè)元素，所以在校驗(yàn)中“顏色”是最容易造成落地頁(yè)面與設(shè)計(jì)稿視覺(jué)差異的一個(gè)因素。
1）色差
因?yàn)榇蠹沂謾C(jī)屏幕的技術(shù)一般是LG屏幕（屏幕的使用時(shí)間越長(zhǎng)色彩的還原度越低）。
雖然有的時(shí)候在查看代碼時(shí)候色值設(shè)置是正確的，但是也要根據(jù)具體的場(chǎng)景進(jìn)行分析。這里建議大家不要使用具有不透明度的色值（雖然在c端中經(jīng)常會(huì)使用，有不透明度會(huì)使顏色比較透亮但是在B端產(chǎn)品中定位是工具，工具就要以效率在第一位，美觀在第二位，所以這個(gè)場(chǎng)景的顏色使用盡量以清晰展示為第一準(zhǔn)則。）
2）顏色種類(lèi)
b端產(chǎn)品中，柱狀圖、折線圖的樣式比較多，在設(shè)計(jì)這類(lèi)圖標(biāo)時(shí)候盡量避免多種顏色的出現(xiàn)，還是因?yàn)锽端產(chǎn)品定位的原因，太多的顏色設(shè)計(jì)勢(shì)必會(huì)干擾用戶進(jìn)行判斷。
f.圖標(biāo)的尺寸是否合理
不管是在C端產(chǎn)品還是B端產(chǎn)品中圖標(biāo)都是高頻出現(xiàn)的一個(gè)元素，圖標(biāo)本身的意思就是簡(jiǎn)化文字信息，通過(guò)圖形去高效地傳達(dá)文案信息。
對(duì)于圖標(biāo)的設(shè)計(jì)走查分為兩點(diǎn)：
1）大小
我們?cè)谠O(shè)計(jì)圖標(biāo)時(shí)候，會(huì)根據(jù)不同的場(chǎng)景進(jìn)行圖標(biāo)尺寸的規(guī)范輸出，但是在真實(shí)的開(kāi)發(fā)環(huán)境當(dāng)中，開(kāi)發(fā)在使用我們提供的插件（藍(lán)湖）進(jìn)行icon下載時(shí)候，會(huì)提供3種icon的尺寸下載，前端開(kāi)發(fā)在使用切圖時(shí)候往往會(huì)忽視掉圖標(biāo)的尺寸問(wèn)題，對(duì)于圖標(biāo)的設(shè)計(jì)走查，是否圖標(biāo)使用的尺寸是我們?cè)O(shè)計(jì)使用的規(guī)范，所以第一個(gè)就要看大小是否能清晰的展示。
2）SVG格式開(kāi)發(fā)
因?yàn)镻C電腦的屏幕尺寸、分辨率往往是高于移動(dòng)端的屏幕尺寸、分辨率，圖標(biāo)的切片做得太小上傳到屏幕上會(huì)出現(xiàn)模糊的展示效果，如果圖標(biāo)不能清晰地展示圖標(biāo)所呈現(xiàn)的圖形，那就會(huì)造成用戶一定的識(shí)別障礙，所以一定要保證圖標(biāo)不要有模糊的情況出現(xiàn)，盡量使用SVG格式圖標(biāo)切片給到開(kāi)發(fā)。
設(shè)計(jì)校驗(yàn)工作不能說(shuō)難，有耐心有細(xì)心的設(shè)計(jì)師都可以完成的，一次視覺(jué)校驗(yàn)需要1——2天的時(shí)間，相對(duì)來(lái)說(shuō)比較耗費(fèi)精力。
換個(gè)角度思考，如果我們從項(xiàng)目開(kāi)發(fā)的前期就控制設(shè)計(jì)走查的工作量，那我們可能會(huì)減少了走查的工作量。接下來(lái)我們就聊一聊怎么減少設(shè)計(jì)校驗(yàn)的工作量。
01. 了解需要視覺(jué)校驗(yàn)的原因
前面我們一直講的是做視覺(jué)校驗(yàn)需要校驗(yàn)的維度，我相信更多的設(shè)計(jì)師還是希望把精力放在做設(shè)計(jì)效果圖階段，畢竟知道從哪些維度做只能單純地提高我們的校驗(yàn)的效率，想要在開(kāi)發(fā)過(guò)程中減少對(duì)項(xiàng)目的設(shè)計(jì)校驗(yàn)的工作量 ，就需要我們清楚兩個(gè)答案，一個(gè)是“在開(kāi)發(fā)過(guò)程中為啥需要設(shè)計(jì)走查”和“開(kāi)發(fā)不愿意修改的原因”。
a.誰(shuí)負(fù)責(zé)實(shí)現(xiàn)樣式
開(kāi)篇我已經(jīng)講了設(shè)計(jì)走查的意義（原因），現(xiàn)在我想從開(kāi)發(fā)流程再聊一聊。
在一個(gè)產(chǎn)品開(kāi)發(fā)中，設(shè)計(jì)師下游需要對(duì)接人的人員角色統(tǒng)稱(chēng)為開(kāi)發(fā)工程師。但是在這類(lèi)角色中其實(shí)也是會(huì)細(xì)分為三種角色：前端工程師、后端工程師、測(cè)試工程師。因?yàn)樽鲰?xiàng)目多數(shù)情況是多人協(xié)作共同完成的工作，前端工程師是實(shí)現(xiàn)我們效果圖樣式的主要人員，也是我們主要對(duì)接工作內(nèi)容的對(duì)象。
b.前端工程師心里所想
前端工程師的工作內(nèi)容需要一一查看設(shè)計(jì)師提供的標(biāo)注，然后再一一去實(shí)現(xiàn)，所以難免不了心里會(huì)這樣想：好麻煩，不如我自己按照感覺(jué)寫(xiě)。
在真實(shí)的工作中，前端開(kāi)發(fā)按照規(guī)范進(jìn)行項(xiàng)目開(kāi)發(fā)這種思路是對(duì)的，但是設(shè)計(jì)師強(qiáng)硬地要求前端開(kāi)發(fā)工程師，按照規(guī)范進(jìn)行開(kāi)發(fā)是過(guò)于“理想化”的一種表現(xiàn)。
所以我們還是要先從自身出發(fā)，循循漸進(jìn)地要求前端工程師按照我們的設(shè)計(jì)規(guī)范進(jìn)行開(kāi)發(fā)，這就來(lái)到我們下一個(gè)話題。
02. 如何避免呢
那么接下來(lái)我們來(lái)聊一聊身為設(shè)計(jì)師我們要怎么做，才能避免進(jìn)入過(guò)多的設(shè)計(jì)校驗(yàn)?zāi)亍?
a.了解開(kāi)發(fā)實(shí)現(xiàn)原理
如果想成為一個(gè)高端進(jìn)階的設(shè)計(jì)師，我們要給自己增加籌碼，那最為直接增加籌碼的方式就是——站在開(kāi)發(fā)者的角度看待問(wèn)題，了解開(kāi)發(fā)思維。
國(guó)內(nèi)前端寫(xiě)樣式的代碼基本上是HTML+CSS，Jacascript，注意這不算是編程，只是一個(gè)寫(xiě)樣式的語(yǔ)言，簡(jiǎn)單地理解就是盒子模型（CSS語(yǔ)言）
1）盒子模型
CSS盒子模型又稱(chēng)框模型 (Box Model) ，包含了元素內(nèi)容（content）、內(nèi)邊距（padding）、邊框（border）、外邊距（margin）幾個(gè)要素。如圖：
舉一個(gè)圖文模塊的例子：圖（1）是設(shè)計(jì)師輸出的設(shè)計(jì)稿，圖（2）是開(kāi)發(fā)需要的標(biāo)注信息（我們實(shí)際給到開(kāi)發(fā)的標(biāo)注）開(kāi)發(fā)需要查看的就是色塊的尺寸和色塊之間的間距。
2）用框架化思維做設(shè)計(jì)稿
了解完前端制作咱們效果圖的原理后，我們就要用這個(gè)盒子模型的概念，像是搭建房子的原理去制作效果圖，所有的組件之間都是有理有據(jù)的，那這個(gè)專(zhuān)業(yè)術(shù)語(yǔ)就叫做框架化UI。
前端開(kāi)發(fā)工程師通過(guò)一個(gè)個(gè)盒子填充來(lái)將我們的組件元素放入其中，最終形成前端展示的頁(yè)面。注意：標(biāo)準(zhǔn)的框架化就像前面的盒子模型是一塊一塊制作的，考慮到開(kāi)發(fā)同學(xué)開(kāi)發(fā)階段組件的嵌套邏輯。
3）開(kāi)發(fā)者模式
如果還是不太了解盒子模型具體是什么的同學(xué)可以在線上使用下圖的方法自己去查看。
設(shè)計(jì)師在視覺(jué)校驗(yàn)時(shí)使用瀏覽器就可以看到開(kāi)發(fā)寫(xiě)的盒子，了解盒子也可以方便我們走查時(shí)知道問(wèn)題在哪。具體操作步驟：
b.檢查自己的設(shè)計(jì)稿
在給前端開(kāi)發(fā)工程師提供設(shè)計(jì)標(biāo)注階段需要提前保證自己出的效果圖是有效的設(shè)計(jì)方案，符合基礎(chǔ)的視覺(jué)需求，都能保證模塊設(shè)計(jì)的可擴(kuò)展性及規(guī)范化，避免定稿后再反復(fù)修改設(shè)計(jì)方案。
比如，當(dāng)我們?cè)O(shè)計(jì)B端產(chǎn)品中的搜索條件模塊時(shí)候，應(yīng)提前需要考慮，在一行展示3個(gè)搜索條件、一行展示4個(gè)搜索條件、一行展示6個(gè)搜索條件等場(chǎng)景。
我們?cè)O(shè)計(jì)完一個(gè)場(chǎng)景的設(shè)計(jì)稿之后，還要考慮不同屏幕尺寸下這套效果圖的布局是否能滿足產(chǎn)品需求，如果不滿足那設(shè)計(jì)稿需要調(diào)整成什么樣式的設(shè)計(jì)稿。
03. 做好標(biāo)注文檔
除了確保設(shè)計(jì)稿的可行性之外，還要做好設(shè)計(jì)稿的標(biāo)準(zhǔn)文檔。如果項(xiàng)目是小版本的迭代就只需要進(jìn)行簡(jiǎn)單的描述即可，如果是組件庫(kù)升級(jí)，那就需要給前端工程師的標(biāo)注文檔，盡量是詳細(xì)的、準(zhǔn)確的。
其中包括設(shè)計(jì)稿、切圖（規(guī)范的切圖命名、壓縮好的圖片文件）標(biāo)注、設(shè)計(jì)規(guī)范以及交互文檔（包含字體標(biāo)注）。
a.描述到什么程度
那細(xì)致描述到什么程度呢？這里我簡(jiǎn)單地說(shuō)幾個(gè)點(diǎn)：
·側(cè)邊導(dǎo)航欄在正常模式下、縮緊模式下，導(dǎo)航欄的寬度是如何變化的。
·如有圖片信息的上傳的場(chǎng)景，考慮圖片比例是什么，是21:9、16:9、4:3還是1:1。
·如果出現(xiàn)文案超長(zhǎng)的場(chǎng)景，不可展示的文案信息用什么樣子展示，是文案后面用省略號(hào)展示？還是鼠標(biāo)滑上去有氣泡彈窗的樣式。
b.圖標(biāo)命名的規(guī)范
隨著業(yè)務(wù)增多，團(tuán)隊(duì)內(nèi)對(duì)圖標(biāo)的隨意命名的習(xí)慣也開(kāi)始凸顯出弊端，這種不好的習(xí)慣會(huì)造成同一類(lèi)功能的圖標(biāo)會(huì)出現(xiàn)不同樣式尺寸，所以我們?cè)诖罱▓D標(biāo)規(guī)范時(shí)候，就可以把切片的命名規(guī)范好。
在圖標(biāo)規(guī)范中，圖標(biāo)需要有著單獨(dú)的后綴，這樣可以讓公用圖標(biāo)與業(yè)務(wù)圖標(biāo)更方便地進(jìn)行溯源。SVG格式的圖標(biāo)可以不用寫(xiě)切片的尺寸，而PNG的圖標(biāo)我建議寫(xiě)上切片的尺寸。
有些公司習(xí)慣用icon進(jìn)行英文的格式命名，左側(cè)是我整理的比較高頻使用的命名，文章末尾我會(huì)分享出來(lái)文字格式，供大家使用。
c.圖標(biāo)的上傳
可以在開(kāi)發(fā)前在與前端開(kāi)發(fā)溝通達(dá)成共識(shí)、圖標(biāo)制作完成確認(rèn)后，將圖標(biāo)上傳到阿里巴巴圖標(biāo)庫(kù)中，更方便前端調(diào)用圖標(biāo)大小和調(diào)整顏色。
如果開(kāi)發(fā)需要自己去找到相關(guān)圖標(biāo)，也可以給予權(quán)限讓開(kāi)發(fā)從藍(lán)湖上傳圖標(biāo)（前提是得整理好圖標(biāo)到藍(lán)湖上）。
04. 和前端開(kāi)發(fā)工程師的溝通
雖然很多時(shí)候項(xiàng)目在發(fā)版本時(shí)間、驗(yàn)收標(biāo)準(zhǔn)，在團(tuán)隊(duì)內(nèi)部都是有明確的規(guī)劃和標(biāo)準(zhǔn)，但是有些問(wèn)題還需要特別分析、特別對(duì)待，這里我就列舉幾點(diǎn)我在項(xiàng)目中幾個(gè)比較重要的點(diǎn)。
a.進(jìn)行設(shè)計(jì)宣講
設(shè)計(jì)宣講最大的意義就是加深大家的印象，提前給大家一個(gè)心理預(yù)估，把一些容易忽略的問(wèn)題暴露出來(lái)，把關(guān)鍵核心點(diǎn)和規(guī)則講清楚，后面可以減輕設(shè)計(jì)走查的工作量，開(kāi)發(fā)也輕松一些。
1）用認(rèn)知對(duì)齊，目標(biāo)一致
如果團(tuán)隊(duì)內(nèi)部四個(gè)角色成員大家的認(rèn)知都是一致的——提升用戶體驗(yàn)是我們公共目標(biāo)。
如果不一致，那就要說(shuō)服其中一個(gè)角色，最好是項(xiàng)目負(fù)責(zé)人，說(shuō)明校驗(yàn)影響發(fā)版時(shí)間，如果大家都按照規(guī)范去完成自己工作內(nèi)容，可提高效率。確保大家理解一致：設(shè)計(jì)師要和開(kāi)發(fā)、測(cè)試確認(rèn)視覺(jué)表現(xiàn)層的驗(yàn)收內(nèi)容、確保內(nèi)容大家理解一致。
2）做有效的溝通
認(rèn)真是前提、尊重是法寶。在部分開(kāi)發(fā)團(tuán)隊(duì)中，設(shè)計(jì)師也不能太過(guò)于教條地要求開(kāi)發(fā)還原自己的設(shè)計(jì)稿，畢竟開(kāi)發(fā)生氣、請(qǐng)假了，那就真的沒(méi)有人可以進(jìn)行代碼的修改了。
所以在開(kāi)發(fā)之前，就要和開(kāi)發(fā)溝通，目前這些界面的效果在技術(shù)層面上是否能實(shí)現(xiàn)，針對(duì)比較復(fù)雜的界面場(chǎng)景，實(shí)現(xiàn)出來(lái)的代價(jià)有多少，權(quán)衡利弊后再確定是否按照效果圖進(jìn)行開(kāi)發(fā)。
針對(duì)復(fù)雜的頁(yè)面需要把標(biāo)注標(biāo)記得更加詳細(xì)，并且明確告知他們，我的刪格在哪里說(shuō)明，布局規(guī)范在哪里說(shuō)明，在這個(gè)交涉過(guò)程中設(shè)計(jì)師就需要尊重他人工作成果，明確自己的需要做的事情，把問(wèn)題描述清楚就好，不可要求開(kāi)發(fā)同學(xué)100%還原設(shè)計(jì)稿、過(guò)多地干預(yù)別的開(kāi)發(fā)團(tuán)隊(duì)的開(kāi)發(fā)步驟和內(nèi)容。
3）不必焦慮
前端開(kāi)發(fā)工程師找我們溝通他們的疑問(wèn)點(diǎn)時(shí)候我們要積極回應(yīng)他們，并且和他們一起處理問(wèn)題，比如某些復(fù)雜的頁(yè)面，避免不了實(shí)現(xiàn)效果圖不好的情況出現(xiàn)，這時(shí)候不要一口咬定就是開(kāi)發(fā)的原因，先溝通具體原因，然后找出解決辦法。
開(kāi)發(fā)人員在修改代碼的階段，開(kāi)發(fā)人員的效率是有限的，而且大家都是身兼多條業(yè)務(wù)線，在這種開(kāi)發(fā)的場(chǎng)景中可以在不影響正常發(fā)版日期的階段，把不太重要的視覺(jué)問(wèn)題，放到下一個(gè)版本中再進(jìn)行修改。
4）規(guī)劃時(shí)間節(jié)點(diǎn)
在工作項(xiàng)目中也要注意分配自己的精力，可以把重要的界面優(yōu)先處理，也可以定期跟程序員溝通，跟他一起制定解決方案和時(shí)間。如果時(shí)間允許的話，也可以慢一點(diǎn)修改，只要改對(duì)了就可以，畢竟完成比完美更加重要。
對(duì)于設(shè)計(jì)校驗(yàn)的工具有一個(gè)原則，就是提高設(shè)計(jì)師在設(shè)計(jì)走查中的工作效率。對(duì)于用什么工具并沒(méi)有限制，只要順手就好，工具的最大作用就是提升工作效率，只要你覺(jué)得能提升你工作效率，你喜歡用啥就用啥。
我把我使用的工具主要分為兩類(lèi)工具，第一類(lèi)是發(fā)現(xiàn)開(kāi)發(fā)問(wèn)題和效果圖的不符合的工具；第二類(lèi)是針對(duì)問(wèn)題高效記錄、追蹤問(wèn)題的工具。
01. 四款發(fā)現(xiàn)問(wèn)題的工具
我在工作中發(fā)現(xiàn)很多時(shí)候開(kāi)發(fā)不愿意檢查自己代碼樣式的一個(gè)原因就是不知道以下四種工具，在很多公司里面前端開(kāi)發(fā)工程師都是多條業(yè)務(wù)線并行開(kāi)發(fā)的局面，沒(méi)有更多的工作時(shí)間自己做設(shè)計(jì)審查。這時(shí)候我們可以提供工具給予開(kāi)發(fā)，幫助他們提高工作效率。
設(shè)計(jì)師同學(xué)也可以借助以下4款工具進(jìn)行校驗(yàn)：
前三款都是Google Chrome瀏覽器的具體操作步驟可以看下面的圖片，如果還有不懂的地方可以在評(píng)論區(qū)給我留言，我看到后會(huì)為大家一一解答。
至于“他山石”這款軟件大家有興趣的話可以在網(wǎng)上直接打名稱(chēng)就會(huì)出來(lái)軟件信息，大家下載后自行體驗(yàn)吧。
02. 記錄追蹤問(wèn)題的工具
介紹完發(fā)現(xiàn)問(wèn)題的工具后，咱們?cè)倭囊涣挠涗涀粉檰?wèn)題的工具，有的人會(huì)問(wèn)了，你前面講了視覺(jué)校驗(yàn)都要看哪里，又推薦了視覺(jué)校驗(yàn)的工具，我直接把需要修改的地方告訴前端開(kāi)發(fā)工程師不就可以了嗎？為什么還要知道這個(gè)記錄追蹤問(wèn)題的工具呢？
a.進(jìn)為什么要使用記錄追蹤問(wèn)題的工具
在一些設(shè)計(jì)團(tuán)隊(duì)稍微成熟的公司里面由于項(xiàng)目的規(guī)模比較大，涉獵的模塊多，參與的人員相對(duì)也多。
面對(duì)這種體量的項(xiàng)目如果不進(jìn)行問(wèn)題的記錄的話，這周做項(xiàng)目里面的1號(hào)模塊，下周做項(xiàng)目里面的2號(hào)模塊，過(guò)了幾周再對(duì)項(xiàng)目里面的1號(hào)模塊進(jìn)行修改，然后自己就會(huì)發(fā)現(xiàn)1號(hào)模塊當(dāng)初的修改問(wèn)題是什么忘記了，更有甚者都忘記一起協(xié)同工作前端開(kāi)發(fā)工程師的名字了。
這時(shí)“記錄追蹤問(wèn)題的工具”就顯得尤其重要了，因?yàn)檫@種工具的出現(xiàn)可以幫助我們回憶起當(dāng)初具體的修改問(wèn)題和修改的進(jìn)度，從而降低上線安全性的風(fēng)險(xiǎn)度。
b.TO DO LIST 思維模式
to do list是一種實(shí)際走查階段使用的一種走查模式。
在設(shè)計(jì)走查階段，主要由設(shè)計(jì)師發(fā)現(xiàn)問(wèn)題、記錄匯總遞交到前端工程師這里進(jìn)行修改和跟進(jìn)，主要的優(yōu)勢(shì)是在于協(xié)助走查可以順利地開(kāi)展，不遺漏掉任何信息。
在制作表格時(shí)候，可以關(guān)注這三點(diǎn)3點(diǎn)“1、問(wèn)題需要逐條記錄。2、需要截取問(wèn)題圖片及描述修改正確內(nèi)容。3、相關(guān)對(duì)接人員的名稱(chēng)和處理進(jìn)度?！?
一個(gè)優(yōu)質(zhì)的項(xiàng)目落地是各部門(mén)協(xié)同合作的成果，視覺(jué)校驗(yàn)是設(shè)計(jì)師必須掌握一項(xiàng)技能，我們本著“認(rèn)真是前提、尊重是法寶”十字真言去校驗(yàn)開(kāi)發(fā)輸出的真實(shí)頁(yè)面，希望這篇1萬(wàn)多字的文章可以幫助到你在校驗(yàn)的工作上少走彎路。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.bouu.cn