<strike id="cy2gs"><menu id="cy2gs"></menu></strike>
  • <del id="cy2gs"><dfn id="cy2gs"></dfn></del>
  • 網頁設計中透明效果的使用技巧

    2015-11-2    博博

    藍藍設計www.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供有效的UI界面設計BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

    如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

    來源:優設網

    Using Transparency in Web Design: Dos and Don’ts

     

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

    網頁設計中使用透明效果是件既美觀又冒險的事兒。透明效果的使用是把色塊,文本或圖像“變薄”或者降低飽和度,使顏色變淺透明,這樣下個圖層的內容就能穿透顯示出來。這種方法如果用好了,效果將會特別棒——能突出顯示文本或者在圖像的特定區域形成焦點。但設計者在運用透明效果時要特別小心,因為這么做可能會影響頁面的可讀性。要是框和文本的透明度不對,更可能會影響到整體的設計。

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

    用“透明效果”來制造對比

     

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

    不要遮蓋圖片的關鍵部分

    透明效果不能遮蓋傳遞信息的背景或圖片。當決定采用透明效果為框架時,要想想會不會少了什么。

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

     

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

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

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

    小范圍的使用透明效果

     

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

    不要在圖像上使用透明效果,形成強烈沖突

    考慮到文本的可讀性,最好避免在已經具有強烈視覺沖突的圖片上使用透明效果——腦補一下黑、白以及色輪上的各種互補色。如果使用后的融合感對設計有減分作用,就盡量不要采用透明效果了。因為這樣很難使每個部分在背景中都能獲得理想的效果。這時可以思考如何把顏色搭配的更好。

    把透明效果藝術化

     

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

    別把透明效果當做裝飾

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

    在背景中運用透明效果

     

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

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

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

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

     

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

    結語

    學會運用透明效果絕對是你增長設計經驗的捷徑。像運用其他效果一樣,充分運用這項技術,并在不同的情境下檢驗,使其達到預期的效果。想要掌握它,最大的挑戰就是在圖文并茂的情況下確保文本的可讀性,并且透明的部分不會遮擋到下面的圖層。多去嘗試一些不同程度和形式的透明效果吧——在圖片處理時,在創建背景時以及在制造懸停效果的時候。然后再對號入座,選擇最佳的方案。

     

    日歷

    鏈接

    個人資料

    藍藍設計的小編 http://www.skdbbs.com

    存檔

    主站蜘蛛池模板: 最新国产精品亚洲| 蜜臀精品国产高清在线观看| 9999国产精品欧美久久久久久| 亚洲精品白浆高清久久久久久| 精品一区二区无码AV| 国产女人精品视频国产灰线| 精品国产不卡一区二区三区| 国产精品久久国产精品99盘 | 国产精品三级在线观看无码| 久久久久国产精品熟女影院| 国产精品视频色视频| 华人在线精品免费观看| 亚洲一区精品中文字幕| 久久99精品久久久久久久不卡 | 国产成人精品亚洲日本在线| 亚洲国产一二三精品无码| 久久精品无码av| 精品国产毛片一区二区无码| 欧美日韩精品在线| 3D动漫精品啪啪一区二区下载 | 国产线视频精品免费观看视频| 久久99精品综合国产首页| 国产成人精品白浆久久69| 亚洲国模精品一区| 国产精品免费久久| 亚洲国产精品无码专区| 国产精品免费一区二区三区四区 | 国语自产少妇精品视频| 亚洲av午夜福利精品一区| 黑人巨大精品欧美一区二区| 精品一卡2卡三卡4卡免费视频| 精品欧洲av无码一区二区| 久久香蕉国产线看观看精品yw | 99久久www免费人成精品| 亚洲国产精品国自产电影| 久久九九亚洲精品| 日韩精品久久久久久| 国产vA免费精品高清在线观看| 成人国产精品秘 果冻传媒在线| 8050免费午夜一级国产精品| 成人一区二区三区精品|