網(wǎng)頁(yè)設計中關(guān)于透明元素的使用心得發(fā)布者：本站     時(shí)間：2021-12-08 13:12:12

每隔一段時(shí)間我都要在網(wǎng)頁(yè)設計的各個(gè)方面做一個(gè)研究探討，以提升網(wǎng)頁(yè)設計水平?；ハ鄬W(xué)習交流!

網(wǎng)頁(yè)設計中使用透明元素，即美觀(guān)又棘手。為什么這么說(shuō)呢，當你某個(gè)模塊的透明度沒(méi)有把握恰當時(shí)，可能難免造成體驗失調，字體信息不清晰，信息捕獲不明確，主次不分明，色調失調。所以一個(gè)透明度卻能造成這么多嚴重后果?當然，細節成就美，但是我們只要主題運用細節，相信能發(fā)揮透明元素的作用，讓你的網(wǎng)頁(yè)更加栩栩如生。由于國外網(wǎng)站原創(chuàng )性比較高，下面我將采用國外的一些案例來(lái)做一些研究探討。(當然不是說(shuō)國內網(wǎng)頁(yè)不好哦，但是國內和國外還是有一定差距的，我們是不斷學(xué)習，不斷借鑒，不斷創(chuàng )新的，國外的設計師，可能時(shí)時(shí)都會(huì )比我們快一步，我們怎樣比國外設計師快?這個(gè)，我將在以后進(jìn)行對自己的一個(gè)分析，來(lái)進(jìn)行一個(gè)探索。)

1.內容模塊和網(wǎng)站框架的對比

運用透明圖層，不透明度在80%左右，讓字體清晰可見(jiàn)，避免挫傷用戶(hù)體驗。

下面的例子是創(chuàng )建對比度，區分內容模塊的運用

網(wǎng)頁(yè)設計中關(guān)于透明元素的使用心得,PS教程,

大家常見(jiàn)的燈箱效果，就是一個(gè)透明度和背景造成對比的運用，讓用戶(hù)很容易區分。

網(wǎng)頁(yè)設計中關(guān)于透明元素的使用心得,PS教程,

2.半透明導航的跟蹤運用

新浪微博，騰訊微博等等，都在頂部導航上做了半透明的處理，用于固定浮動(dòng)來(lái)跟蹤用戶(hù)頁(yè)面的瀏覽，方便用戶(hù)操作主導航。這樣的運用很常見(jiàn)

網(wǎng)頁(yè)設計中關(guān)于透明元素的使用心得,PS教程,

3.使用較小的透明模塊來(lái)襯托網(wǎng)頁(yè)背景，有層級關(guān)系

網(wǎng)站的封面有著(zhù)至關(guān)重要的作用，因為用戶(hù)在7秒(營(yíng)銷(xiāo)的用戶(hù)停留捕獲時(shí)間，有相應的知識)內會(huì )做出對需求的反應，因此讓你的頁(yè)面不再單調，使用合適的文字和透明模塊，進(jìn)一步突出重要信息，讓頁(yè)面層級分明

網(wǎng)頁(yè)設計中關(guān)于透明元素的使用心得,PS教程,

網(wǎng)頁(yè)設計中關(guān)于透明元素的使用心得,PS教程,

4.采用透明為藝術(shù)方式進(jìn)行頁(yè)面設計

如何保證網(wǎng)站信息的可讀性?透明區和不透明區的空間比例，是信息展現的重要規劃。將透明作為一種藝術(shù)表現，是值得借鑒的方式

下面的例子是將透明區塊做主導空間展示的規劃。網(wǎng)站整體信息都在透明區域顯示

網(wǎng)頁(yè)設計中關(guān)于透明元素的使用心得,PS教程,

網(wǎng)頁(yè)設計中關(guān)于透明元素的使用心得,PS教程,

5.網(wǎng)頁(yè)元素(例如圖標、背景圖片、產(chǎn)品圖片)千萬(wàn)要避免設置透明

透明的設計，應該在一個(gè)交互影響的范疇內設計，避免使用透明圖標，透明產(chǎn)品圖片等細節元素去做透明，這樣將大幅度降低用戶(hù)的信息可讀性，您可以運用圖片倒影，圖標陰影等手段進(jìn)行“美化設計”