網(wǎng)頁(yè)設(shè)計(jì)中的那些不容忽視的細(xì)節(jié)

    之前圖趣跟大家分享過(guò)《設(shè)計(jì)應(yīng)注意的細(xì)節(jié)》、《網(wǎng)頁(yè)設(shè)計(jì)細(xì)節(jié)，虛線框算不算》，本篇文章將著重從圖片邊框一像素偏移所帶來(lái)的問(wèn)題，給大家詳細(xì)講解下細(xì)節(jié)的處理。 

1)調(diào)整后的毛邊
當(dāng)對(duì)一個(gè)位圖的大小進(jìn)行調(diào)整后，正常情況下會(huì)留下1px的毛邊（如果你注意的話），邊界會(huì)變得模糊，如果繼續(xù)調(diào)整模糊度會(huì)加大，這個(gè)問(wèn)題太不起眼了，以至于你無(wú)法用肉眼來(lái)理繪，我們先用商品圖片舉例子：

    也許單張小圖還不夠顯注，下面對(duì)比一個(gè)列表圖和大圖，當(dāng)然了除非你故意想要這種效果。

    放大2倍后對(duì)比

    放大2倍后對(duì)比

    另外不要試者調(diào)整帶有邊框的圖片，最好是自己繪制，這個(gè)面兩張對(duì)比圖不用放大就能全面看到問(wèn)題:

2)關(guān)于邊框和背景
有些區(qū)塊需要用邊框裝飾點(diǎn)綴得醒目一點(diǎn),有文字區(qū)塊圖片區(qū)塊等,文字區(qū)塊加邊框的建議使用同基色的背景色填充區(qū)塊,不然內(nèi)容會(huì)很空洞，圖片加邊框的話,如果是CSS定義的邊框最好是加上間隔距離,因?yàn)閳D片不是固定的,所以可能會(huì)出現(xiàn)底色與邊框不協(xié)調(diào),嚴(yán)重的會(huì)造成毛邊效果，下面用幾個(gè)例子來(lái)說(shuō)一下：

    文字邊框背景：

    因?yàn)閰^(qū)塊加了邊框后背景與邊框之外的背景顏色相同，所以感覺空洞，所以最好是區(qū)塊加上背景，而且背景色與邊框最好是同一個(gè)基色。

    白色背景下，背景不要比邊框太深，再努力的調(diào)整區(qū)塊內(nèi)容的顏色能與背景融合也于事無(wú)補(bǔ)，邊框成了毛邊。

    在深色背景下，才使用加亮邊框。

    關(guān)于圖片邊框，圖片本身就有背景，而且色彩是多樣的，在給圖片加邊框時(shí)也最好是與圖片背景同一個(gè)基色的背景，而且最好是取與圖片最邊上的色彩的深基色，如果是邊上有多種顏色，取最多的那顏色，例：

    如果邊框是用CSS定義的，而且是圖列，比喻說(shuō)是產(chǎn)品列表，而列表中的產(chǎn)品類別和背景色都不一致，就會(huì)出現(xiàn)邊框與背景同色或不協(xié)調(diào)的情況，例如：

    上圖中間一排圖片邊框的色彩就不協(xié)調(diào)了，如果在圖片是不確定的情況下，加邊框時(shí)最好是給圖片與邊框之間加上邊框距。

    在看看在深色背景下的效果，深色背景下可以有兩種方案，一是去掉外框，以白色間距邊框，二是加亮外框，留出與背景相同顏色的間距。如下圖：

3)關(guān)于邊距與對(duì)齊
設(shè)計(jì)師尋找靈感時(shí)，偶爾會(huì)隨意、自由的拖拉擺放區(qū)塊、填色、繪制等，直到滿意才會(huì)停下，在這個(gè)過(guò)程中會(huì)出現(xiàn)有與”經(jīng)驗(yàn)”掛鉤的細(xì)小漏洞，例如：

    下圖表面看上去沒問(wèn)題,細(xì)看之下有點(diǎn)小別扭,放大后就可以看清楚了,導(dǎo)航文字偏高,搜索框與導(dǎo)航?jīng)]有對(duì)齊,搜索框中Button圖標(biāo)距離也有問(wèn)題。

    調(diào)整之后如下圖：

    在看下面的例子：

    上圖中區(qū)塊上下間距與左右間距不勻稱，和前幾的列子一樣，文字與區(qū)塊上下垂直間距不協(xié)調(diào)，下圖是修正后的結(jié)果。

    在來(lái)看一組給圖片加框的效果：

    在來(lái)看圖列間距：
下面這個(gè)列圖看似沒問(wèn)題，其實(shí)有兩個(gè)細(xì)節(jié)問(wèn)題（其中一個(gè)應(yīng)該算是用戶體驗(yàn)的問(wèn)題）。首先第一列與第二列的間距要比第二列與第三列的距離要小2px，對(duì)于這個(gè)問(wèn)題，有人會(huì)說(shuō)這個(gè)間距用CSS定義就統(tǒng)一了，不會(huì)存在差異！注意了，我們討論的是視覺設(shè)計(jì)，不能把這個(gè)問(wèn)題丟給前端，否則你后面丟過(guò)去的更多（相信我），其次縱間距太小排的過(guò)于緊密。

    調(diào)整過(guò)后如下圖:

4)關(guān)于陰影與質(zhì)感：
在設(shè)計(jì)點(diǎn)綴版面時(shí)需要有深度和3D質(zhì)感的時(shí)候，可能就會(huì)用到投影、陰影、光線感等效果。但web設(shè)計(jì)和平面廣告不同，太強(qiáng)、太硬的質(zhì)感只會(huì)讓頁(yè)面顯得粗糙，web頁(yè)面是個(gè)很細(xì)致的活，還是那句話，這里只說(shuō)細(xì)節(jié)，先看圖：

    陰影要小一點(diǎn)、顏色要淺一點(diǎn),另外這里面其實(shí)還有一個(gè)問(wèn)題，和前面講的邊框一樣，如果圖片是的投影顏色與圖片顏色（或背景顏色）相同，效果會(huì)很尷尬，所以要邊框一樣給圖片加一個(gè)間隔距離：

    理論上講，將一個(gè)沒有質(zhì)感的元素進(jìn)行投影或加陰影是不現(xiàn)實(shí)的！前面講的一些陰影效果，元素本身沒有任何質(zhì)感?？聪旅娴睦樱?/p>

    上圖Button和價(jià)格區(qū)塊的投影沒有質(zhì)量,修改后如下圖:

    其實(shí)陰影和質(zhì)感是隨網(wǎng)站整體風(fēng)格相關(guān)聯(lián)的,某種情況下還不如不加上去。

    關(guān)于深色背景下的質(zhì)感，陰影和投影是不現(xiàn)實(shí)的，所以只能用發(fā)光或光線質(zhì)感來(lái)實(shí)現(xiàn)。

    就說(shuō)到這里了，沒時(shí)間往下說(shuō)了，我要整理東走了，上面都只是你可能不注意的小小細(xì)節(jié)問(wèn)題，你注意到的我也不會(huì)說(shuō)了。