技術(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)。
近期更新
- [2023-07-26 14:17:28] 為品牌賦能,海外官網(wǎng)品牌數(shù)字化
- [2023-05-06 10:32:26] 青島網(wǎng)站建設(shè)公司,高端網(wǎng)站定制,一站式網(wǎng)站服務(wù)——力圖數(shù)字科技
- [2023-04-27 13:47:54] 高端定制網(wǎng)站建設(shè)——從滿足預(yù)期到走向卓越
- [2023-04-11 09:17:49] H5頁面設(shè)計(jì)開發(fā)——移動(dòng)端傳播利器
- [2022-11-16 10:11:43] windows2012程序在哪
- [2022-04-14 11:01:47] 力圖數(shù)字科技配套網(wǎng)站服務(wù)支持
- [2021-05-18 10:14:11] 青島網(wǎng)站建設(shè)的流程
- [2021-04-29 10:14:38] 企業(yè)定制化官網(wǎng)建設(shè)項(xiàng)目
- [2021-03-05 10:34:45] 移動(dòng)互聯(lián)時(shí)代房地產(chǎn)行業(yè)的微信小程序解決方案
- [2021-01-22 17:29:38] 微信小程序有哪些優(yōu)勢?為什么要開發(fā)微信小程序?
- [2021-01-08 17:28:04] 網(wǎng)站建設(shè)最容易忽略的人性化設(shè)計(jì)
- [2020-12-16 16:55:32] 建設(shè)一個(gè)常規(guī)的公司網(wǎng)站建設(shè)成本大概是多少?
延伸閱讀
- [2011-11-10 00:29:06] 青島網(wǎng)站設(shè)計(jì)中如何增強(qiáng)網(wǎng)站的SEO優(yōu)化 提高排名
- [2014-12-20 11:23:04] 響應(yīng)式網(wǎng)頁你了解嗎?
- [2012-03-22 13:26:41] pr值不長了-原因分析
- [2016-09-11 13:47:00] 有趣且相當(dāng)實(shí)用的Photoshop圖層教程
- [2014-12-24 18:52:00] 優(yōu)秀的字體能讓你的網(wǎng)站瞬間提升訪問量
- [2011-11-14 09:24:58] 如何做好網(wǎng)站內(nèi)鏈優(yōu)化 讓網(wǎng)站權(quán)重飛起來
- [2013-02-24 16:26:49] 如何做出創(chuàng)意設(shè)計(jì)的網(wǎng)站
- [2011-11-21 22:44:41] 網(wǎng)站404報(bào)錯(cuò)頁面模板(匯總13個(gè))
- [2015-03-21 18:30:06] 如何做好企業(yè)網(wǎng)站優(yōu)化才是關(guān)鍵?
- [2014-09-29 11:06:49] 非常具有創(chuàng)造意識(shí)的傾斜式網(wǎng)站設(shè)計(jì)
- [2015-02-07 16:39:56] 如何提高網(wǎng)頁關(guān)鍵詞也是優(yōu)化網(wǎng)頁細(xì)節(jié)?
- [2014-07-09 21:06:43] 網(wǎng)站建設(shè)和品牌包裝的核心
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計(jì)解決方案 機(jī)械行業(yè)網(wǎng)站設(shè)計(jì)解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 科技企業(yè)網(wǎng)站設(shè)計(jì)解決方案 電子家電網(wǎng)站設(shè)計(jì)解決方案 食品行業(yè)網(wǎng)站設(shè)計(jì)解決方案 集團(tuán)公司網(wǎng)站設(shè)計(jì)解決方案 企事業(yè)單位網(wǎng)站設(shè)計(jì)解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 健身運(yùn)動(dòng)網(wǎng)站設(shè)計(jì)解決方案 美容與化妝品網(wǎng)站設(shè)計(jì)解決方案 建筑設(shè)計(jì)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 物流行業(yè)網(wǎng)站設(shè)計(jì)解決方案
TAGS關(guān)鍵字
良好的導(dǎo)航 robots 平面設(shè)計(jì) 網(wǎng)站改版 官網(wǎng)建設(shè) 網(wǎng)站的速度 SEO優(yōu)化 手機(jī)網(wǎng)站建設(shè) 青島高端網(wǎng)站建設(shè) php程序 扁平化設(shè)計(jì) 青島網(wǎng)站設(shè)計(jì)哪家好 海信網(wǎng)絡(luò)科技 青島網(wǎng)站營銷 網(wǎng)站設(shè)計(jì)趨勢 頁面設(shè)計(jì) 網(wǎng)站設(shè)計(jì)資訊 營銷型網(wǎng)站 搜索引擎蜘蛛 審美 力圖數(shù)字科技 微官網(wǎng) 青島輪胎網(wǎng)站設(shè)計(jì)公司 青島高端網(wǎng)站設(shè)計(jì)公司哪家好 外貿(mào)網(wǎng)站設(shè)計(jì) 企業(yè)網(wǎng)站為什么要備案 如何做網(wǎng)站優(yōu)化 青島做網(wǎng)站多少錢 企業(yè)網(wǎng)站建設(shè) 集團(tuán)公司網(wǎng)站建設(shè)