嘗試運(yùn)用半透明 設(shè)計(jì)最美的網(wǎng)站
使用半透明元素來設(shè)計(jì)網(wǎng)頁很美觀也很需要技巧,半透明效果是指色塊、文字或圖片被“稀釋”或者沖淡,使得顏色減淡,并且透出后方內(nèi)容,執(zhí)行到位的話,這種效果會(huì)非常震撼,能劃出一塊絕佳的文字展示區(qū)域,或者作為吸引注意力至圖像某部分的手段,但是使用半透明時(shí),設(shè)計(jì)師必須小心謹(jǐn)慎,這種效果很難處理得當(dāng),因?yàn)槭玛P(guān)可讀性,透明度使用錯(cuò)誤的半透明塊和文字也會(huì)能散注意力,并且破壞整體設(shè)計(jì)效果。
接下來,就跟隨設(shè)計(jì)中國網(wǎng)的專業(yè)設(shè)計(jì)師看一套行為準(zhǔn)則。
1、通過半透明來形成對比
選用半透明設(shè)計(jì)技巧的最大好處,是創(chuàng)造對比。這種效果可以讓設(shè)計(jì)師通過色塊、圖片上的大字體或多種顏色層次來創(chuàng)造視覺焦點(diǎn),半透明也可以在背景圖不能很好展現(xiàn)上方文字時(shí),將文字分離開來,使用半透明設(shè)計(jì)時(shí)尤其需要考慮對比。只有圖片(或背景)和文字都可讀時(shí),半透明效果才是有意義的。當(dāng)你考慮使用半透明效果時(shí),問問自己:這是否有助于用戶對圖文的理解?
2、避免遮擋圖片的重要部分
半透明效果不應(yīng)該遮擋其下方背景或圖片的重要部分。決定半透明層位置的時(shí)候,要清楚你“犧牲”了什么內(nèi)容。
3、用不同的透明度
沒有完美的透明度值。對于某些項(xiàng)目,80%透明度比較理想;對于其他的也許15%才是最佳選擇。對每個(gè)項(xiàng)目采用不同的透明度。
4、不要覺得半透明就能讓文字更易讀
使用半透明色塊來襯托文字并不意味著文字會(huì)自動(dòng)變得易讀。要考慮對比——半透明色塊與文字、背景圖與半透明色塊兩方面都要考慮,
半透明效果用在圖片、色塊或文字上時(shí),考慮文字的可讀性至關(guān)重要。切記,如果設(shè)計(jì)效果致使文字難以辨認(rèn),你的信息將無從傳達(dá)。
5、在細(xì)節(jié)處使用半透明效果
半透明并非只適用于網(wǎng)站的主體部分。這種效果在細(xì)節(jié)處也能大放異彩。
可以考慮用半透明來展示導(dǎo)航工具欄,或者作為按鈕和可點(diǎn)擊元素的鼠標(biāo)懸停效果。多種透明度不要使用過度。選定一種元素和透明度樣式,然后使它貫穿整個(gè)網(wǎng)站的設(shè)計(jì)。
6、不要在對比強(qiáng)烈的圖片上放置半透明元素
處于可讀性考慮,最好避免在已經(jīng)包含強(qiáng)烈對比的元素上使用半透明效果——比如黑白對比或色盤上的互補(bǔ)色。
因?yàn)橐诒尘暗母鱾€(gè)部分都達(dá)到正確的效果很難,想在這類元素上使用半透明效果,除非強(qiáng)烈對比在你的設(shè)計(jì)中真的只起到負(fù)面作用??紤]用淺色塊代替吧。
7、將半透明作為一種藝術(shù)手法
半透明不只是次要效果??梢钥紤]用這個(gè)效果為你的網(wǎng)站設(shè)計(jì)主畫面。
大尺寸半透明創(chuàng)造的對比、強(qiáng)調(diào)和視覺吸引令人震撼。
8、不要將半透明作為裝飾物使用
半透明效果并非為了打破設(shè)計(jì)中的單調(diào)。把這種效果作為裝飾物使用,注定會(huì)導(dǎo)致糟糕的設(shè)計(jì)。
半透明效果的使用應(yīng)該事先考慮和規(guī)劃好。半透明不是加粗這類簡單效果,處理不當(dāng)看起來會(huì)很草率且不專業(yè)。
9、在背景中使用半透明
不只是設(shè)計(jì)前景元素時(shí)可用半透明效果,它也能用在背景圖上。有些非常棒的半透明元素精細(xì)微妙。
還有些半透明效果夾在圖像層之間。例如Tony Chester的網(wǎng)站,就用了絕妙的半透明分層技巧打造了一件多維度的設(shè)計(jì)。
10、不要同時(shí)運(yùn)用過多半透明效果
在每個(gè)項(xiàng)目中有節(jié)制地使用不同類型的半透明效果。透明度要能制造反差對比,產(chǎn)生視覺吸引力。這樣使用過多的差異化效果,會(huì)分散用戶注意力。
11、在輪播圖片上使用半透明元素
半透明的使用不限于單頁網(wǎng)站或靜止網(wǎng)站。它在變化的圖片和背景上也起作用。兩種方式都可以用上半透明效果。
在輪播圖片上使用半透明,是該效果最棘手的用法之一。卻也最令人印象深刻。慎重考慮多張背景圖的情況。選用顏色和對比搭配相近的圖片,這樣只需一種半透明效果即可應(yīng)對后方移動(dòng)變換的背景。
格外注意半透明效果與每張圖的匹配程度,才能保證每張圖的整體性,并創(chuàng)作出易辨認(rèn)的照片或其他背景與文字,保持視覺統(tǒng)一。
總之,嘗試半透明效果,是拓展設(shè)計(jì)技巧的一個(gè)絕妙方法。像很多其他效果一樣,要有節(jié)制地使用這個(gè)技巧,并且在多種環(huán)境下實(shí)驗(yàn)這種設(shè)計(jì),來確保它按你的意圖運(yùn)作和展現(xiàn)。
半透明設(shè)計(jì)的最大挑戰(zhàn),是在輪播圖片上使用時(shí)確保文字清晰可讀,和避免半透明元素錯(cuò)誤地遮擋下方圖片。
嘗試多種透明度和使用方式——用于圖片、背景、遮罩效果——來決定那種效果最適合某個(gè)項(xiàng)目。
-
2021/12/28
-
2021/12/23
-
2021/12/17
- 愛華仕斬獲“2021年度中國廚衛(wèi)行業(yè)年度智能
- 回首2021,迎戰(zhàn)2022 彩虹線開啟新征程!
- 福臨板材|福滿2021,圓夢2022
- 美特照明:2022年照明新趨勢,經(jīng)銷商如何做大
- 會(huì)自己“洗澡”的集成灶,帥康自動(dòng)清洗集成灶
- 帶你設(shè)計(jì)一款功能多變,簡單實(shí)用的休閑露臺陽
- 世紀(jì)豪門吊頂:破防了!原來顏值+實(shí)力=H20
- 裝修木門選的好,噪音統(tǒng)統(tǒng)沒煩惱
- 寒潮來了,有淋浴房洗澡更保暖舒服
- 元旦特輯:歐意電器述說生活的點(diǎn)滴與美好
- “中國十大品牌”獲獎(jiǎng)名單出爐,賽戈水漆榮耀
- 2021值得消費(fèi)大賞 凱迪仕智能鎖榮摘兩項(xiàng)桂冠
- 益恩家居:新年新氣象,愛自己從好好睡覺開始
- 元旦伊始:健康新生活,從精格管道直飲水開始
- 喜迎元旦|新年新燈飾 箔晶智能照明讓酒店暖
- 吉美幫的2021 “專精特新” 深耕屋面防水體
- Aqara攜手京東成立燈光設(shè)計(jì)聯(lián)盟 打造燈飾照
- 年底廚房煥新顏,如何選擇廚電?好太太智能來
- 全鋁家具全屋莫蘭迪色系,這款美式輕奢范贏鄰
- 順趨勢·筑鳳巢·贏未來 鳳梧居門窗2021年會(huì)隆