網(wǎng)頁設(shè)計(jì)中透明效果的使用技巧
運(yùn)用好透明效果是提高網(wǎng)頁設(shè)計(jì)水準(zhǔn)的重要方法之一。如同使用其他方法一樣,設(shè)計(jì)師們有很多種手段將透明效果運(yùn)用到網(wǎng)頁中,今天這篇文章就來好好和您分享一下關(guān)于“透明”的實(shí)用小技巧喲:)
在網(wǎng)頁設(shè)計(jì)中使用透明效果是件既美觀又冒險(xiǎn)的事兒。透明效果的使用是把色塊,文本或圖像“變薄”或者降低飽和度,使顏色變淺透明,這樣下個(gè)圖層的內(nèi)容就能穿透顯示出來。這種方法如果用好了,效果將會(huì)特別棒——能突出顯示文本或者在圖像的特定區(qū)域形成焦點(diǎn)。但設(shè)計(jì)者在運(yùn)用透明效果時(shí)要特別小心,因?yàn)檫@么做可能會(huì)影響頁面的可讀性。要是框和文本的透明度不對(duì),更可能會(huì)影響到整體的設(shè)計(jì)。
下文是一些注意事項(xiàng)以及巧妙運(yùn)用透明效果的成功案例。
用“透明效果”來制造對(duì)比
使用透明效果最大的優(yōu)點(diǎn)是可以形成對(duì)比。設(shè)計(jì)者可以在圖像上打造出一個(gè)色塊或文本的焦點(diǎn),增添屏幕的色彩維度。透明效果還能使文本從不搶眼的背景上跳脫出來。在運(yùn)用透明效果時(shí)尤其要考慮對(duì)比度。只有圖像和文本都具備可視性時(shí),透明效果才算成功。所以采用透明效果時(shí),別忘了問問自己:這會(huì)使文本/圖像更容易理解么?
不要遮蓋圖片的關(guān)鍵部分
透明效果不能遮蓋傳遞信息的背景或圖片。當(dāng)決定采用透明效果為框架時(shí),要想想會(huì)不會(huì)少了什么。
要層次分明地運(yùn)用透明效果
透明效果的設(shè)置并沒有完美的參數(shù)。有些情況下,80%比較理想,而有些的話15%最好。這個(gè)要具體情況具體分析。
不要以為透明效果會(huì)增強(qiáng)文本可讀性
不要以為你用了透明框,文本就自然能讀了。要想想對(duì)比——不管是透明框之于文本還是背景圖片之于透明框架,一定要充分考慮到文字的可讀性。無論是處理透明圖片,色塊還是文本都要記住,如果視覺效果使字體很難辨認(rèn),那你想要表達(dá)的信息將會(huì)無法傳達(dá)。
小范圍的使用透明效果
不需大范圍的使用透明效果。小范圍的使用也能夠獲得很好的成效,比如可以用透明效果來做網(wǎng)頁導(dǎo)航或者按鈕的懸停效果等。別想著如何繁復(fù)地使用各種透明效果。選擇一種元素和透明樣式,并在網(wǎng)頁設(shè)計(jì)中貫穿始終。
不要在圖像上使用透明效果,形成強(qiáng)烈沖突
考慮到文本的可讀性,最好避免在已經(jīng)具有強(qiáng)烈視覺沖突的圖片上使用透明效果——腦補(bǔ)一下黑、白以及色輪上的各種互補(bǔ)色。如果使用后的融合感對(duì)設(shè)計(jì)有減分作用,就盡量不要采用透明效果了。因?yàn)檫@樣很難使每個(gè)部分在背景中都能獲得理想的效果。這時(shí)可以思考如何把顏色搭配的更好。
把透明效果藝術(shù)化
透明效果不是次發(fā)效應(yīng)。要運(yùn)用透明效果設(shè)計(jì)出有主導(dǎo)性的圖像。大面積的透明效果是制造對(duì)比,強(qiáng)調(diào)和視覺興奮的有力設(shè)計(jì)。
別把透明效果當(dāng)做裝飾
不能因?yàn)橛X得設(shè)計(jì)乏味就在后期隨便添加一個(gè)透明效果。如果只是把透明效果當(dāng)做裝飾來運(yùn)用的話會(huì)顯得雞肋,應(yīng)該提前計(jì)劃好如何應(yīng)用。透明效果可不像字體加粗那樣簡單。如果用不好,就會(huì)顯得草率,不專業(yè)。
在背景中運(yùn)用透明效果
透明效果不僅可以用在顯眼的設(shè)計(jì)元素中,也可以用在背景圖片上。一些很棒的透明效果都是很細(xì)微的,另一些透明設(shè)計(jì)則體現(xiàn)在圖層當(dāng)中。比如Tony Chester的網(wǎng)站就很好的運(yùn)用了透明效果的圖層技術(shù),使設(shè)計(jì)看起來更有維度。
不要同時(shí)使用太多透明效果
最好限制使用透明效果的數(shù)量。因?yàn)橥该餍Ч苤圃鞂?duì)比,強(qiáng)調(diào)和視覺興奮感。如果用得太多,會(huì)分散用戶的視覺注意力。
把透明效果運(yùn)用到靜止和(或)動(dòng)態(tài)圖片中
透明效果并不局限于單頁或靜態(tài)設(shè)計(jì)當(dāng)中,也可用到多種圖片和背景中,抑或兩者皆可。在動(dòng)態(tài)圖中運(yùn)用透明很討巧,也能讓人印象更深刻。仔細(xì)篩選多個(gè)圖片背景,盡量選擇顏色相近,內(nèi)容又有沖突的,這樣就能在變換圖片背景時(shí)使用同一種透明度了。仔細(xì)觀察透明效果如何作用于每張圖片,從而保證圖片透明度的完整一致性,使圖片,背景,文本變得可讀,形成視覺統(tǒng)一。
結(jié)語
學(xué)會(huì)運(yùn)用透明效果絕對(duì)是你增長設(shè)計(jì)經(jīng)驗(yàn)的捷徑。像運(yùn)用其他效果一樣,充分運(yùn)用這項(xiàng)技術(shù),并在不同的情境下檢驗(yàn),使其達(dá)到預(yù)期的效果。想要掌握它,最大的挑戰(zhàn)就是在圖文并茂的情況下確保文本的可讀性,并且透明的部分不會(huì)遮擋到下面的圖層。多去嘗試一些不同程度和形式的透明效果吧——在圖片處理時(shí),在創(chuàng)建背景時(shí)以及在制造懸停效果的時(shí)候。然后再對(duì)號(hào)入座,選擇最佳的方案。
本文地址:http://irelandcustomcontracting.com/tutorial/di1675.html
您可能還喜歡
- Macaron 馬卡龍系色譜 ;附HC(16進(jìn)制碼
- 7個(gè)手機(jī)版網(wǎng)頁設(shè)計(jì)的原則
- 折紙多邊形網(wǎng)頁背景效果制作教程
- 龐門正道:好好玩耍的點(diǎn)線面(上)
- 網(wǎng)頁設(shè)計(jì)中的常見頁面布局方式
- WAP APP的柵格設(shè)計(jì)
- 八種很漂亮的排版方法和技巧分享
- 網(wǎng)頁設(shè)計(jì)的首屏標(biāo)準(zhǔn)你了解多少?
- 字體大寶庫:40款為網(wǎng)頁設(shè)計(jì)師準(zhǔn)備的時(shí)
- 視覺設(shè)計(jì)分享—專題頁面設(shè)計(jì)篇
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問題
- 網(wǎng)頁設(shè)計(jì)精粹 網(wǎng)頁中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁UI - 原子設(shè)計(jì)理論(上)
- 如何通過設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺設(shè)計(jì)系列文章(二):全屏