- 相關(guān)推薦
網(wǎng)頁(yè)設計中的半透明運用準則
引導語(yǔ):頁(yè)面的透明度是網(wǎng)頁(yè)設計的一個(gè)審美要點(diǎn),以下是小編整理的網(wǎng)頁(yè)設計中的半透明運用準則,歡迎參考閱讀!
通過(guò)半透明來(lái)形成對比
選用半透明設計技巧的最大好處,是創(chuàng )造對比。這種效果可以讓設計師通過(guò)色塊、圖片上的大字體或多種顏色層次來(lái)創(chuàng )造視覺(jué)焦點(diǎn)
半透明也可以在背景圖不能很好展現上方文字時(shí),將文字分離開(kāi)來(lái)
使用半透明設計時(shí)尤其需要考慮對比。只有圖片(或背景)和文字都可讀時(shí),半透明效果才是有意義的。當你考慮使用半透明效果時(shí),問(wèn)問(wèn)自己:這是否有助于用戶(hù)對圖文的理解?
避免遮擋圖片的重要部分
半透明效果不應該遮擋其下方背景或圖片的重要部分。決定半透明層位置的時(shí)候,要清楚你“犧牲”了什么內容
用不同的透明度
沒(méi)有完美的透明度值。
對于某些項目,80%透明度比較理想;對于其他的也許15%才是最佳選擇。對每個(gè)項目采用不同的透明度
不要覺(jué)得半透明就能讓文字更易讀
使用半透明色塊來(lái)襯托文字并不意味著(zhù)文字會(huì )自動(dòng)變得易讀。要考慮對比——半透明色塊與文字、背景圖與半透明色塊兩方面都要考慮
半透明效果用在圖片、色塊或文字上時(shí),考慮文字的可讀性至關(guān)重要。切記,如果設計效果致使文字難以辨認,你的信息將無(wú)從傳達
在細節處使用半透明效果
半透明并非只適用于網(wǎng)站的主體部分。這種效果在細節處也能大放異彩
可以考慮用半透明來(lái)展示導航工具欄,或者作為按鈕和可點(diǎn)擊元素的鼠標懸停效果。多種透明度不要使用過(guò)度。選定一種元素和透明度樣式,然后使它貫穿整個(gè)網(wǎng)站的設計
不要在對比強烈的圖片上放置半透明元素
處于可讀性考慮,最好避免在已經(jīng)包含強烈對比的元素上使用半透明效果——比如黑白對比或色盤(pán)上的互補色
因為要在背景的各個(gè)部分都達到正確的效果很難,想在這類(lèi)元素上使用半透明效果,除非強烈對比在你的設計中真的只起到負面作用?紤]用淺色塊代替吧
將半透明作為一種藝術(shù)手法
半透明不只是次要效果?梢钥紤]用這個(gè)效果為你的網(wǎng)站設計主畫(huà)面
大尺寸半透明創(chuàng )造的對比、強調和視覺(jué)吸引令人震撼
不要將半透明作為裝飾物使用
半透明效果并非為了打破設計中的單調。把這種效果作為裝飾物使用,注定會(huì )導致糟糕的設計
半透明效果的使用應該事先考慮和規劃好。半透明不是加粗這類(lèi)簡(jiǎn)單效果,處理不當看起來(lái)會(huì )很草率且不專(zhuān)業(yè)
在背景中使用半透明
不只是設計前景元素時(shí)可用半透明效果,它也能用在背景圖上。有些非常棒的半透明元素精細微妙
還有些半透明效果夾在圖像層之間。例如Tony Chester的網(wǎng)站,就用了絕妙的半透明分層技巧打造了一件多維度的設計
不要同時(shí)運用過(guò)多半透明效果
在每個(gè)項目中有節制地使用不同類(lèi)型的半透明效果。透明度要能制造反差對比,產(chǎn)生視覺(jué)吸引力。這樣使用過(guò)多的差異化效果,會(huì )分散用戶(hù)注意力
在輪播圖片上使用半透明元素
半透明的使用不限于單頁(yè)網(wǎng)站或靜止網(wǎng)站。它在變化的圖片和背景上也起作用。兩種方式都可以用上半透明效果
在輪播圖片上使用半透明,是該效果最棘手的用法之一。卻也最令人印象深刻。慎重考慮多張背景圖的情況。選用顏色和對比搭配相近的圖片,這樣只需一種半透明效果即可應對后方移動(dòng)變換的背景
格外注意半透明效果與每張圖的匹配程度,才能保證每張圖的整體性,并創(chuàng )作出易辨認的照片或其他背景與文字,保持視覺(jué)統一
小結
嘗試半透明效果,是拓展設計技巧的一個(gè)絕妙方法。像很多其他效果一樣,要有節制地使用這個(gè)技巧,并且在多種環(huán)境下實(shí)驗這種設計,來(lái)確保它按你的意圖運作和展現
半透明設計的最大挑戰,是在輪播圖片上使用時(shí)確保文字清晰可讀,和避免半透明元素錯誤地遮擋下方圖片
嘗試多種透明度和使用方式——用于圖片、背景、遮罩效果——來(lái)決定那種效果最適合某個(gè)項目
【網(wǎng)頁(yè)設計中的半透明運用準則】相關(guān)文章:
網(wǎng)頁(yè)設計中的文字運用07-09
網(wǎng)頁(yè)設計中色彩的運用07-10
網(wǎng)頁(yè)設計中插畫(huà)的運用及風(fēng)格07-14