網頁設計中 透明效果的使用技巧

2022-07-01 07:12:11 字數 2987 閱讀 5065

運用好透明效果是提高網頁設計水準的重要方法之一。如同使用其他方法一樣,設計師們有很多種手段將透明效果運用到網頁中,今天這篇文章就來好好和您分享一下關於「透明」的實用小技巧喲:)

在網頁設計中使用透明效果是件既美觀又冒險的事兒。透明效果的使用是把色塊,文字或影象「變薄」或者降低飽和度,使顏色變淺透明,這樣下個圖層的內容就能穿

透顯示出來。這種方法如果用好了,效果將會特別棒——能突出顯示文字或者在影象的特定區域形成焦點。但設計者在運用透明效果時要特別小心,因為這麼做可能

會影響頁面的可讀性。要是框和文字的透明度不對,更可能會影響到整體的設計。

下文是一些注意事項以及巧妙運用透明效果的成功案例。

用「透明效果」來製造對比

使用透明效果最大的優點是可以形成對比。設計者可以在影象上打造出乙個色塊或文字的焦點,增添螢幕的色彩維度。透明效果還能使文字從不搶眼的背景上跳脫出 來。在運用透明效果時尤其要考慮對比度。只有影象和文字都具備可視性時,透明效果才算成功。所以採用透明效果時,別忘了問問自己:這會使文字/影象更容易 理解麼?

不要遮蓋的關鍵部分

透明效果不能遮蓋傳遞資訊的背景或。當決定採用透明效果為框架時,要想想會不會少了什麼。

要層次分明地運用透明效果

透明效果的設定並沒有完美的引數。有些情況下,80%比較理想,而有些的話15%最好。這個要具體情況具體分析。

不要以為透明效果會增強文字可讀性

不要以為你用了透明框,文字就自然能讀了。要想想對比——不管是透明框之於文字還是背景之於透明框架,一定要充分考慮到文字的可讀性。無論是處理透明,色塊還是文字都要記住,如果視覺效果使字型很難辨認,那你想要表達的資訊將會無法傳達。

小範圍的使用透明效果

不需大範圍的使用透明效果。小範圍的使用也能夠獲得很好的成效,比如可以用透明效果來做網頁導航或者按鈕的懸停效果等。別想著如何繁複地使用各種透明效果。選擇一種元素和透明樣式,並在網頁設計中貫穿始終。

不要在影象上使用透明效果,形成強烈衝突

考慮到文字的可讀性,最好避免在已經具有強烈視覺衝突的上使用透明效果——腦補一下黑、白以及色輪上的各種互補色。如果使用後的融合感對設計有減分作

用,就盡量不要採用透明效果了。因為這樣很難使每個部分在背景中都能獲得理想的效果。這時可以思考如何把顏色搭配的更好。

把透明效果藝術化

透明效果不是次發效應。要運用透明效果設計出有主導性的影象。大面積的透明效果是製造對比,強調和視覺興奮的有力設計。

別把透明效果當做裝飾

不能因為覺得設計乏味就在後期隨便新增乙個透明效果。如果只是把透明效果當做裝飾來運用的話會顯得雞肋,應該提前計畫好如何應用。透明效果可不像字型加粗那樣簡單。如果用不好,就會顯得草率,不專業。

在背景中運用透明效果

透明效果不僅可以用在顯眼的設計元素中,也可以用在背景上。一些很棒的透明效果都是很細微的,另一些透明設計則體現在圖層當中。比如tony chester的**就很好的運用了透明效果的圖層技術,使設計看起來更有維度。

不要同時使用太多透明效果

最好限制使用透明效果的數量。因為透明效果能製造對比,強調和視覺興奮感。如果用得太多,會分散使用者的視覺注意力。

把透明效果運用到靜止和(或)動態中

透明效果並不侷限於單頁或靜態設計當中,也可用到多種和背景中,抑或兩者皆可。在動態圖中運用透明很討巧,也能讓人印象更深刻。仔細篩選多個背 景,盡量選擇顏色相近,內容又有衝突的,這樣就能在變換背景時使用同一種透明度了。仔細觀察透明效果如何作用於每張,從而保證透明度的完整一 致性,使,背景,文字變得可讀,形成視覺統一。

結語

學會運用透明效果絕對是你增長設計經驗的捷徑。像運用其他效果一樣,充分運用這項技術,並在不同的情境下檢驗,使其達到預期的效果。想要掌握它,最

大的挑戰就是在**並茂的情況下確保文字的可讀性,並且透明的部分不會遮擋到下面的圖層。多去嘗試一些不同程度和形式的透明效果吧——在處理時,在創

建背景時以及在製造懸停效果的時候。然後再對號入座,選擇最佳的方案。

網頁設計中透明效果的使用技巧

運用好透明效果是提高網頁設計水準的重要方法之一。如同使用其他方法一樣,設計師們有很多種手段將透明效果運用到網頁中,今天這篇文章就來好好和您分享一下關於 透明 的實用小技巧喲 在網頁設計中使用透明效果是件既美觀又冒險的事兒。透明效果的使用是把色塊,文字或影象 變薄 或者降低飽和度,使顏色變淺透明,這樣...

網頁設計中的「骨骼」運用技巧

今天我們接著來談談有關網頁設計的事,只是因為網際網路時代,網頁設計實在是成為了一種潮流。必不可少。1 設計的骨架 視覺解剖。隨著網頁設計的發展,其骨架也慢慢漸隱,但它依然發揮著支撐起整個視線框架。這裡,有人會與柵格系統聯絡起來。網頁的柵格系統更多發揮的是對齊元素的作用,而骨架的功能會更加籠統。頁面設...

網頁設計中的常用表單設計技巧

輸入框 input 應當符合邏輯地劃分為小組,這樣大腦就可以很好的處理大堆區域間的關係。html權威指南 web應用程式總是利用表單來處理資料錄入和配置,但並不是所有的表單都保持一致。輸入區域的對齊方式,各自的標籤 label 操作方式,以及周圍的視覺元素都會或多或少影響使用者的行為。表單布局 考慮...