轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(   sillybuy.com  )是一家專(zhuān)注而深入的設(shè)計(jì)機(jī)構(gòu) ，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的   BS界面設(shè)計(jì) 、  cs界面設(shè)計(jì) 、  ipad界面設(shè)計(jì)   、  包裝設(shè)計(jì) 、  圖標(biāo)定制 、  用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、   網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

來(lái)源： http://udc.weibo.com/2012/04/%e9%a1%b5%e9%9d%a2%e6%9e%84%e5%bb%ba%e7%9a%84%e5%ae%a1%e5%9b%be%e4%b8%8e%e7%bb%86%e8%8a%82/?utm_source=rss&utm_medium=rss&utm_campaign=%25e9%25a1%25b5%25e9%259d%25a2%25e6%259e%2584%25e5%25bb%25ba%25e7%259a%2584%25e5%25ae%25a1%

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中，            請(qǐng)點(diǎn)這里

作為專(zhuān)業(yè)的頁(yè)面構(gòu)建工程師，除了在專(zhuān)業(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)也更能夠滿(mǎn)足隨時(shí)更換文字的需求。萬(wàn)一以后再來(lái)個(gè)“驚爆”、“頭條”啥的呢？每張圖都重新切、重新拼么？

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

事例二：麻煩的CSS寫(xiě)法能換來(lái)更好的視覺(jué)效果

再舉另外一個(gè)例子，我們有這樣一個(gè)模塊。

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

頭像與名稱(chēng)頂端對(duì)齊，微群等級(jí)圖標(biāo)與微群名稱(chēng)底部對(duì)齊。

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

因?yàn)槲⑷旱燃?jí)圖標(biāo)的尺寸是16×16，高于文字本身的高度，為了在各瀏覽器下都保證這個(gè)對(duì)齊效果，我采用了這樣一種思路。

按視覺(jué)稿百分百還原，做出來(lái)左圖的效果，雖然css代碼看起來(lái)有點(diǎn)兒麻煩。但是如果怎么簡(jiǎn)單怎么寫(xiě)，做出來(lái)的頁(yè)面效果，卻沒(méi)有這樣做的實(shí)際效果好。

 

事例三：頁(yè)面構(gòu)建細(xì)節(jié)上多處理一點(diǎn)點(diǎn)，用戶(hù)體驗(yàn)提升一點(diǎn)點(diǎn)

還有這樣一個(gè)模塊：

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

通常遇到這樣子的模塊，我們會(huì)這么劃分結(jié)構(gòu)

由于用戶(hù)頭像只有30px正方的大小，所以算來(lái)用戶(hù)名稱(chēng)只能顯示2—3個(gè)漢字，其實(shí)很難讓用戶(hù)直觀的區(qū)分出這個(gè)人究竟是誰(shuí)。如果通過(guò)傳統(tǒng)的思路來(lái)做，產(chǎn)品和設(shè)計(jì)估計(jì)都不會(huì)滿(mǎn)意。那么，頁(yè)面構(gòu)建的過(guò)程中，我們就要想辦法擴(kuò)大用戶(hù)名稱(chēng)的顯示區(qū)域。

于是，我采用下面這個(gè)切圖思路，在不改變HTML結(jié)構(gòu)的情況下，只通過(guò)改變css，達(dá)到了擴(kuò)大用戶(hù)名稱(chēng)顯示區(qū)域的目的。

給用戶(hù)頭像名稱(chēng)模塊定寬，然后利用margin的負(fù)數(shù)值，讓vs向左偏移。蓋住部分頭像1的區(qū)域。最終效果，可以顯示4個(gè)漢字。

重構(gòu)組的實(shí)習(xí)生同學(xué)，由于沒(méi)有項(xiàng)目經(jīng)驗(yàn)，導(dǎo)師講什么就是什么，于是一聽(tīng)到導(dǎo)師說(shuō)“對(duì)像素”，就真的去專(zhuān)注于此，萬(wàn)一設(shè)計(jì)稿本身有些問(wèn)題，也不會(huì)判斷一下，結(jié)果把自己搞的挺為難。有時(shí)候，拍屏靜態(tài)頁(yè)面的呈現(xiàn)效果與設(shè)計(jì)稿去對(duì)像素，其實(shí)沒(méi)相差幾個(gè)像素，但靜態(tài)頁(yè)面看著就不跟設(shè)計(jì)稿感覺(jué)不一樣。這時(shí)候總是需要不斷的修改、截屏、對(duì)像素、再修改…這樣的重復(fù)勞動(dòng)，在快節(jié)奏的開(kāi)發(fā)中不但浪費(fèi)時(shí)間，更有可能由于不得要點(diǎn)，在數(shù)據(jù)的裝載后越發(fā)“不是那么回事兒”了。還不如靜下心來(lái)，先去細(xì)細(xì)的審圖，和設(shè)計(jì)師充分的溝通，有取有舍，聰明判斷，然后再去做具體開(kāi)發(fā)，出來(lái)的頁(yè)面不需要這么焦頭爛額的打補(bǔ)丁對(duì)像素，也許能更好得達(dá)到設(shè)計(jì)師設(shè)計(jì)的初衷呢。