利用透明元素設(shè)計(jì)網(wǎng)頁(yè) 讓網(wǎng)頁(yè)更加栩栩如生
網(wǎng)頁(yè)設(shè)計(jì)中使用透明元素,即美觀又棘手。為什么這么說(shuō)呢,當(dāng)你某個(gè)模塊的透明度沒(méi)有把握恰當(dāng)時(shí),可能難免造成體驗(yàn)失調(diào),字體信息不清晰,信息捕獲不明確,主次不分明,色調(diào)失調(diào)。所以一個(gè)透明度卻能造成這么多嚴(yán)重后果?當(dāng)然,細(xì)節(jié)成就美,但是我們只要主題運(yùn)用細(xì)節(jié),相信能發(fā)揮透明元素的作用,讓你的網(wǎng)頁(yè)更加栩栩如生。由于國(guó)外網(wǎng)站原創(chuàng)性比較高,下面中國(guó)品牌設(shè)計(jì)的小編將采用國(guó)外的一些案例來(lái)做一些研究探討。
1、內(nèi)容模塊和網(wǎng)站框架的對(duì)比
運(yùn)用透明圖層,不透明度在80%左右,讓字體清晰可見(jiàn),避免挫傷用戶(hù)體驗(yàn)。
2、半透明導(dǎo)航的跟蹤運(yùn)用
新浪微博,騰訊微博等等,都在頂部導(dǎo)航上做了半透明的處理,用于固定浮動(dòng)來(lái)跟蹤用戶(hù)頁(yè)面的瀏覽,方便用戶(hù)操作主導(dǎo)航。
3、使用較小的透明模塊來(lái)襯托網(wǎng)頁(yè)背景,有層級(jí)關(guān)系。
網(wǎng)站的封面有著至關(guān)重要的作用,因?yàn)橛脩?hù)在7秒(營(yíng)銷(xiāo)的用戶(hù)停留捕獲時(shí)間,有相應(yīng)的知識(shí))內(nèi)會(huì)做出對(duì)需求的反應(yīng),因此讓你的頁(yè)面不再單調(diào),使用合適的文字和透明模塊,進(jìn)一步突出重要信息,讓頁(yè)面層級(jí)分明。
4、采用透明為藝術(shù)方式進(jìn)行頁(yè)面設(shè)計(jì)
如何保證網(wǎng)站信息的可讀性?透明區(qū)和不透明區(qū)的空間比例,是信息展現(xiàn)的重要規(guī)劃。將透明作為一種藝術(shù)表現(xiàn),是值得借鑒的方式。
5、網(wǎng)頁(yè)元素(例如圖標(biāo)、背景圖片、產(chǎn)品圖片)千萬(wàn)要避免設(shè)置透明
透明的設(shè)計(jì),應(yīng)該在一個(gè)交互影響的范疇內(nèi)設(shè)計(jì),避免使用透明圖標(biāo),透明產(chǎn)品圖片等細(xì)節(jié)元素去做透明,這樣將大幅度降低用戶(hù)的信息可讀性,您可以運(yùn)用圖片倒影,圖標(biāo)陰影等手段進(jìn)行“美化設(shè)計(jì)”。
6、將背景設(shè)計(jì)成透明場(chǎng)景,適當(dāng)加上透明元素造成視差效果,學(xué)會(huì)創(chuàng)造網(wǎng)頁(yè)場(chǎng)景
生活中有很多有透明感的東西,玻璃,水,窗戶(hù),電腦屏幕等等,都可以利用它們的透明感,來(lái)進(jìn)行場(chǎng)景化的設(shè)計(jì)。這里設(shè)計(jì)者故意營(yíng)造視差效果,造成一種3D錯(cuò)覺(jué),可以讓網(wǎng)站更加富有質(zhì)感和活潑氣息
7、頁(yè)面中靜止或者有運(yùn)動(dòng)嫌疑的圖片,可以適當(dāng)采用透明度設(shè)計(jì),可以以此增加網(wǎng)站的交互性
比如活動(dòng)的炫麗圖標(biāo),活動(dòng)的可以旋轉(zhuǎn),緩動(dòng)的圖片導(dǎo)航菜單等等,讓整個(gè)網(wǎng)站跳出傳統(tǒng)布局,產(chǎn)生新穎感
8、鼠標(biāo)hover的友好交互透明體驗(yàn)
照片展示,導(dǎo)航等,都可以由設(shè)計(jì)者創(chuàng)造鼠標(biāo)hover的懸停體驗(yàn)效果,這樣利于信息主次的區(qū)分和捕捉
總結(jié):透明網(wǎng)頁(yè)的運(yùn)用,不僅僅只是在設(shè)計(jì)方式,表現(xiàn)方式上運(yùn)用,還可以用于交互性,3D,視差等效果的創(chuàng)意,可以運(yùn)用于現(xiàn)實(shí)生活,設(shè)計(jì)“抄現(xiàn)實(shí)”的頁(yè)面,透 明可以運(yùn)用于靜止,運(yùn)用于運(yùn)動(dòng),甚至運(yùn)用于給人感官造成的不存在的地方,更多的,是我們多研究,多借鑒,欣賞更多的優(yōu)秀網(wǎng)頁(yè),來(lái)尋找更適合自己的方式方法。
-
2021/12/28
-
2021/12/23
-
2021/12/17
- 愛(ài)華仕斬獲“2021年度中國(guó)廚衛(wèi)行業(yè)年度智能
- 回首2021,迎戰(zhàn)2022 彩虹線開(kāi)啟新征程!
- 福臨板材|福滿(mǎn)2021,圓夢(mèng)2022
- 美特照明:2022年照明新趨勢(shì),經(jīng)銷(xiāo)商如何做大
- 會(huì)自己“洗澡”的集成灶,帥康自動(dòng)清洗集成灶
- 帶你設(shè)計(jì)一款功能多變,簡(jiǎn)單實(shí)用的休閑露臺(tái)陽(yáng)
- 世紀(jì)豪門(mén)吊頂:破防了!原來(lái)顏值+實(shí)力=H20
- 裝修木門(mén)選的好,噪音統(tǒng)統(tǒng)沒(méi)煩惱
- 寒潮來(lái)了,有淋浴房洗澡更保暖舒服
- 元旦特輯:歐意電器述說(shuō)生活的點(diǎn)滴與美好
- “中國(guó)十大品牌”獲獎(jiǎng)名單出爐,賽戈水漆榮耀
- 2021值得消費(fèi)大賞 凱迪仕智能鎖榮摘兩項(xiàng)桂冠
- 益恩家居:新年新氣象,愛(ài)自己從好好睡覺(jué)開(kāi)始
- 元旦伊始:健康新生活,從精格管道直飲水開(kāi)始
- 喜迎元旦|新年新燈飾 箔晶智能照明讓酒店暖
- 吉美幫的2021 “專(zhuān)精特新” 深耕屋面防水體
- Aqara攜手京東成立燈光設(shè)計(jì)聯(lián)盟 打造燈飾照
- 年底廚房煥新顏,如何選擇廚電?好太太智能來(lái)
- 全鋁家具全屋莫蘭迪色系,這款美式輕奢范贏鄰
- 順趨勢(shì)·筑鳳巢·贏未來(lái) 鳳梧居門(mén)窗2021年會(huì)隆