作為專業(yè)的頁(yè)面構(gòu)建工程師，除了在專業(yè)技能上有很高的要求以外，還需要具有一定的對(duì)設(shè)計(jì)圖的審稿能力。審圖，并非是意味著追求跟PSD一模一樣，甚至耗費(fèi)大量時(shí)間截屏跟PSD去“對(duì)像素”。在我的理解中，審圖是通過(guò)對(duì)UI設(shè)計(jì)稿的分析，充分理解UI設(shè)計(jì)師的意圖，再結(jié)合UE的交互狀態(tài)，從中做到真正的“還原設(shè)計(jì)稿”。

事例一：有取有舍，方是領(lǐng)悟

比如，在這樣一張?jiān)O(shè)計(jì)稿中

設(shè)計(jì)師的意圖：

這個(gè)話題列表的行高19px，每個(gè)單條話題下面是有4px邊距的。而話題標(biāo)題與其自身的描述文字之間沒(méi)有間距。

頁(yè)面構(gòu)建工程師的分析過(guò)程：

由于該模塊對(duì)行高的重置，已經(jīng)“約定”好了，文本規(guī)范的行高是18px。通過(guò)溝通，設(shè)計(jì)師認(rèn)可將本段落的行高由19px改為18px。但這僅限于標(biāo)題與描述文字之間的行距。而標(biāo)題與標(biāo)題之間4像素下邊距，從構(gòu)圖上說(shuō)明了單條話題之間的段落關(guān)系，不能一味的用18px行高解決。因?yàn)橥ㄟ^(guò)我們對(duì)設(shè)計(jì)稿的理解，設(shè)計(jì)師用這4像素，拉大了標(biāo)題之間的間距，從視覺(jué)上形成了段落感。所以對(duì)于重構(gòu)來(lái)講，這4像素萬(wàn)萬(wàn)不能忽略，不然從視覺(jué)呈現(xiàn)的角度，設(shè)計(jì)師就不能容忍了。所以，有取有舍，方是領(lǐng)悟。

在這個(gè)模塊的制作中，還發(fā)生了一個(gè)小插曲。如下圖：

設(shè)計(jì)師的意圖：

這是11號(hào)的細(xì)明體，因?yàn)槭屈c(diǎn)綴，又是提示性圖片，所以小于前面標(biāo)題的宋體12號(hào)字。

頁(yè)面構(gòu)建工程師的分析過(guò)程：

起初，重構(gòu)組的同學(xué)在討論設(shè)計(jì)稿時(shí)，都提議把它們做成活文字，就是宋體12號(hào)。彩色圓角塊用CSS3寫(xiě)，擴(kuò)展性特好。因?yàn)檫@個(gè)模塊是運(yùn)營(yíng)團(tuán)隊(duì)負(fù)責(zé)，在未來(lái)也更能夠滿足隨時(shí)更換文字的需求。萬(wàn)一以后再來(lái)個(gè)“驚爆”、“頭條”啥的呢？每張圖都重新切、重新拼么？

但是，站在理解視覺(jué)設(shè)計(jì)的角度，這種小tag講究的就是精致。如果做成文本文字，雖然面臨將來(lái)的需求變更時(shí)，會(huì)有一定程度上的成本，但是與正文區(qū)別太小，就突出不了小tag的感覺(jué)，也顯得沒(méi)有那么精致了。所以在各種糾結(jié)權(quán)衡下，我最終選擇把它們做成了圖片。

標(biāo)簽： 頁(yè)面構(gòu)建 設(shè)計(jì)稿分析 對(duì)像素 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。