作為專業(yè)的頁面構(gòu)建工程師，除了在專業(yè)手藝上有很高的要求以外，還需要具有必然的對(duì)設(shè)計(jì)圖的審稿能力。審圖，并非是意味著追求跟PSD一模一樣，甚至破耗年夜量侍舊素屏跟PSD去“對(duì)像素”。在我的理解中，審圖是經(jīng)由過程對(duì)UI設(shè)計(jì)稿的剖析，充實(shí)理解UI設(shè)計(jì)師的意圖，再連系UE的交互狀況，年夜中做到真正的“還原設(shè)計(jì)稿”。
事例一：有取有舍，方是貫通
好比，在這樣一張?jiān)O(shè)計(jì)稿中
設(shè)計(jì)師的意圖：
這個(gè)話題列表的行高19px，每個(gè)單條話題下面是有4px邊距的。而話題問題與其自身的描述文字之間沒有間距。
頁面構(gòu)建工程師的剖析過程：
因?yàn)樵撃K對(duì)行高的重置，已經(jīng)“商定”好了，文本規(guī)范的行高是18px。經(jīng)由過程溝通，設(shè)計(jì)師認(rèn)可將本段落的行高由19px改為18px。但這僅限于問題與描述文字之間的行距。而問題與問題之間4像素下邊距，年夜構(gòu)圖上說了然單條話題之間的段落關(guān)系，不能一味的用18px行高解決。因?yàn)榻?jīng)由過程我們對(duì)設(shè)計(jì)稿的理解，設(shè)計(jì)師用這4像素，拉年夜了問題之間的間距，年夜視覺上形成了段落感。所以對(duì)于重構(gòu)來講，這4像素萬萬不能忽略，否則年夜視覺呈現(xiàn)的角度，設(shè)計(jì)師就不能容忍了。所以，有取有舍，方是貫通。
在這個(gè)模塊的建造中，還發(fā)生了一個(gè)小插曲。如下圖：
設(shè)計(jì)師的意圖：
這是11號(hào)的細(xì)明體，因?yàn)槭屈c(diǎn)綴，又是提醒性圖片，所以小于前面問題的宋體12號(hào)字。
頁面構(gòu)建工程師的剖析過程：
開初，重構(gòu)組的同窗在談判設(shè)計(jì)稿時(shí)，都提議把它們做成活文字，就是宋體12號(hào)。彩色圓角塊用CSS3寫，擴(kuò)展性特好。因?yàn)檫@個(gè)模塊是運(yùn)營團(tuán)隊(duì)負(fù)責(zé)，在未來也更能夠知足隨時(shí)改換文字的需求。萬一往后再來個(gè)“驚爆”、“頭條”啥的呢?每張圖都年夜頭切、年夜頭拼么?
可是，站在理解視覺設(shè)計(jì)的角度，這種小tag講究的就是美麗。如不美觀做成文本文字，雖然面臨未來的需求變換時(shí)，會(huì)有必然水平上的成本，可是與正文區(qū)別太小，就凸起不了小tag的感受，也顯得沒有那么美麗了。所以在各類糾結(jié)權(quán)衡下，我最終選擇把它們做成了圖片。
事例二：麻煩的CSS寫法能換來更好的視覺效不美觀
再行動(dòng)吐矣閩例子，我們有這樣一個(gè)模塊。
設(shè)計(jì)師的意圖：
頭像與名稱頂端對(duì)齊，微群品級(jí)停筆與微群名稱底部對(duì)齊。
頁面構(gòu)建工程師的剖析過程：
因?yàn)槲⑷浩芳?jí)停筆的尺寸是16×16，高于文字自己的高度，為了在各瀏覽器下都保證這個(gè)對(duì)齊效不美觀，我采用了這樣一種思緒。
按視覺稿百分百還原，做出來左圖的效不美觀，雖然css代碼看起濫暌剮點(diǎn)兒麻煩。可是如不美觀怎么簡(jiǎn)單怎么寫，做出來的頁面效不美觀，卻沒有這樣做的現(xiàn)實(shí)效不美觀好。
事例三：頁面構(gòu)建細(xì)節(jié)上多措置一點(diǎn)點(diǎn)，用戶體驗(yàn)晉升一點(diǎn)點(diǎn)
還有這樣一個(gè)模塊：
頁面構(gòu)建工程師的剖析過程：
凡是碰著這樣子的模塊，我們會(huì)這么劃分結(jié)構(gòu)
因?yàn)橛脩纛^像只有30px正方的巨細(xì)，所以算濫暌姑戶名稱只能顯示2—3個(gè)漢字，其實(shí)很難讓用戶直不美觀的區(qū)扶持這小我事實(shí)是誰。如不美觀經(jīng)由過程傳統(tǒng)的思緒來做，產(chǎn)物和設(shè)計(jì)估量都不會(huì)對(duì)勁。那么，頁面構(gòu)建的過程中，我們就要設(shè)法子擴(kuò)年夜用戶名稱的顯示區(qū)域。
于是，我采用下面這個(gè)切圖思緒，在不改變HTML結(jié)構(gòu)的情形下，只經(jīng)由過程改變css，達(dá)到了擴(kuò)年夜用戶名稱顯示區(qū)域的目的。
給用戶頭像名稱模塊定寬，然后操作margin的負(fù)數(shù)值，讓vs向左偏移。蓋住部門頭像1的區(qū)域。最終效不美觀，可以顯示4個(gè)漢字。
重構(gòu)組的實(shí)習(xí)生同窗，因?yàn)闆]有項(xiàng)目經(jīng)驗(yàn)，導(dǎo)師講什么就是什么，于是一聽到導(dǎo)師說“對(duì)像素”，就真的去專注于此，萬一設(shè)計(jì)稿自己有些問題，也不會(huì)判定一下，結(jié)不美觀把自己搞的挺為難。有時(shí)辰，拍屏靜態(tài)頁面的呈現(xiàn)效不美觀與設(shè)計(jì)稿去對(duì)像素，其實(shí)沒相差幾個(gè)像素，但靜態(tài)頁面看著就不跟設(shè)計(jì)稿感受紛歧樣。這時(shí)辰老是需要不竭的改削、截屏、對(duì)像素、再改削…這樣的一再勞動(dòng)，在快節(jié)奏的開發(fā)中不單華侈時(shí)刻，更有可能因?yàn)椴坏靡c(diǎn)，在數(shù)據(jù)的裝載后加倍“不是那么回事兒”了。還不如靜下心來，先去細(xì)細(xì)的審圖，和設(shè)計(jì)師充實(shí)的溝通，有取有舍，聰明判定，然后再去做具體開發(fā)，出來的頁面不需要這么焦頭爛額的打補(bǔ)丁對(duì)像素，也許能更好得達(dá)到設(shè)計(jì)師設(shè)計(jì)的初衷呢。
(微博UDC原創(chuàng)博文，接待轉(zhuǎn)載并注明出處，接待訂閱 )
網(wǎng)友點(diǎn)評(píng)
精彩導(dǎo)讀
科技快報(bào)
品牌展示