欧美乱伦图片区,国产日韩欧美一区二区三区四区五区,欧美性色爽,乱伦小说网站免费观看视频,啊用力啊好深啊H在线观看,男女做哎爱过程图片

信息動(dòng)態(tài)

網(wǎng)站設(shè)計(jì)是技術(shù)與創(chuàng)意的完美融合!

技術(shù)資訊

如何處理和把握網(wǎng)頁設(shè)計(jì)中的細(xì)節(jié)

2011-11-14 17:50:09

本文主要講青島網(wǎng)頁設(shè)計(jì)中一些細(xì)節(jié)把握,包括圖片處理與背景處理等,都十分微小的地方,對(duì)于追求細(xì)節(jié)完美的設(shè)計(jì)師很有幫助,通過放大數(shù)倍可以看到雖然看上去相似,但細(xì)節(jié)上卻有差別的設(shè)計(jì)處理。
這篇文章說實(shí)際問題的,所以不多強(qiáng)調(diào),下面是我總結(jié)的一些比較突出的細(xì)節(jié)問題,而且我一直認(rèn)為這些問題比較嚴(yán)重,正因?yàn)檫@些都是基本問題,很容易解決的,但把這種忽略養(yǎng)成一種習(xí)慣性的“經(jīng)驗(yàn)”那就“杯具”了,然而這些細(xì)節(jié)問題也不同程度的代表了你的工作態(tài)度??春?,也許能對(duì)大家在青島網(wǎng)站設(shè)計(jì)方面有所幫助。
1)調(diào)整后的毛邊
當(dāng)對(duì)一個(gè)位圖的大小進(jìn)行調(diào)整后,正常情況下會(huì)留下1px的毛邊(如果你注意的話),邊界會(huì)變得模糊,如果繼續(xù)調(diào)整模糊度會(huì)加大,這個(gè)問題太不起眼了,以至于你無法用肉眼來理繪,我們先用商品圖片舉例子:

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

放大2倍后對(duì)比

放大2倍后對(duì)比

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

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è)例子來說一下:

文字邊框背景:

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


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

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

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

如果邊框是用CSS定義的,而且是圖列,比喻說是產(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è)過程中會(huì)出現(xiàn)有與“經(jīng)驗(yàn)”掛鉤的細(xì)小漏洞,例如:

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

 

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

在看下面的例子:

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

在來看一組給圖片加框的效果:

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

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


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

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

理論上講,將一個(gè)沒有質(zhì)感的元素進(jìn)行投影或加陰影是不現(xiàn)實(shí)的!前面講的一些陰影效果,元素本身沒有任何質(zhì)感。看下面的例子:

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

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

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

0532-85810878 473587358 掃碼添加微信

掃碼添加微信

掃碼關(guān)注公眾號(hào)

官方公眾號(hào)

2054585360
乡城县| 宁德市| 日照市| 大庆市| 黄山市| 青龙| 漳州市| 迁安市| 临夏市| 仙居县| 丘北县| 兴隆县| 中超| 花垣县| 遵义市| 衡阳市| 玛纳斯县| 古丈县| 景宁| 封开县| 温宿县| 宁远县| 比如县| 井研县| 东明县| 哈巴河县| 龙川县| 玉山县| 富阳市| 汨罗市| 永昌县| 莱西市| 建水县| 如皋市| 闻喜县| 柯坪县| 兴国县| 南岸区| 聊城市| 辽源市| 涟源市|