saber zou：這么多年以來(lái)，網(wǎng)頁(yè)似乎都停留在2D的世界。2012年末開(kāi)始到整個(gè)2013年，涌現出非常多采用CSS 3D變形和Parallax（視覺(jué)差，通過(guò)鼠標滑動(dòng)讓網(wǎng)頁(yè)上不同層次的內容以不同的速率位移而形成一種層次感）效果的網(wǎng)站，讓這個(gè)2D的網(wǎng)絡(luò )世界出現了豐富的層次和縱深感。但是真正的3D（除了flash實(shí)現的）似乎沒(méi)有成為網(wǎng)頁(yè)設計師的工具，不過(guò)這種情況應該會(huì )在2014年有所改變。
目前在HTML里實(shí)現無(wú)插件3D內容呈現的技術(shù)就是WebGL，這個(gè)技術(shù)其實(shí)并不復雜，但是之前由于缺乏瀏覽器的支持而一直沒(méi)能被廣發(fā)使用，這一切都可能改變，因為微軟發(fā)布的IE11已經(jīng)完美支持WebGL，加上Chrome和Firefox，可以說(shuō)現在是時(shí)候在網(wǎng)頁(yè)設計里加入3D元素了。
談到WebGL 3D，大家可能第一個(gè)想到的就是網(wǎng)頁(yè)游戲，但其實(shí)WebGL在網(wǎng)頁(yè)設計中也大有可為，我覺(jué)得WebGL不僅僅可以運用在大型的全屏體驗中，也完全可以作為頁(yè)面元素和其他內容融合在一起，給用戶(hù)一種新奇的酷炫的體驗，我們來(lái)看一些例子。
11月底微軟IE和亞洲動(dòng)物基金組織合作的公益網(wǎng)站”月熊志”就采用了WebGL的技術(shù)，來(lái)宣傳IE11在這方面的渲染能力。
這個(gè)由三本”書(shū)”組成的體驗，第一本書(shū)的第一頁(yè)就給大家呈現了一個(gè)3D的月熊世界，IE創(chuàng )造了一只動(dòng)態(tài)的3D熊，用戶(hù)可以拖動(dòng)、旋轉這個(gè)3D模型來(lái)了解更多關(guān)于這只熊的信息。這個(gè)3D的場(chǎng)景生動(dòng)有趣，一草一木活靈活現，熊那股可愛(ài)勁兒也通過(guò)動(dòng)作栩栩如生地反映出來(lái)，除了WebGL技術(shù)，很難通過(guò)別的方法實(shí)現這樣的交互效果。
微軟IE推出的另外一個(gè)WebGL體驗，和紅牛（RedBull）合作的網(wǎng)站Rampage對WebGL的運用也相當新穎。這是紅牛每年都舉辦的極限單車(chē)比賽，網(wǎng)站通過(guò)3D WebGL技術(shù)再現了比賽環(huán)境，用戶(hù)可以通過(guò)拖動(dòng)或者點(diǎn)擊3D環(huán)境上的節點(diǎn)來(lái)控制比賽視頻的播放。網(wǎng)站不僅僅利用WebGL，也運用了很多CSS 3D Transform來(lái)讓一些2D元素擁有立體的效果，比如視頻。
下面這個(gè)網(wǎng)站設計也很好的結合了WebGL，網(wǎng)頁(yè)設計師Steven Wittens在他的博客里加入了抽象的3D管道所組成的元素，當你打開(kāi)網(wǎng)頁(yè)的時(shí)候，這些管道會(huì )自動(dòng)交織在一起，形成ACKO幾個(gè)字母的形狀。你還可點(diǎn)擊右上方那個(gè)播放按鈕來(lái)看管道的延伸過(guò)程。網(wǎng)頁(yè)上的博文內容和3D的空間很好地結合在一起，充分展現了作者強大的設計開(kāi)發(fā)能力。
一位法國的前端設計師和開(kāi)發(fā)者Yann Kozon在他的個(gè)人作品網(wǎng)站中也加入WebGL的3D元素。首頁(yè)是立體的多面體，并隨著(zhù)音樂(lè )有韻律的上下抖動(dòng)，進(jìn)入他的作品頁(yè)你會(huì )發(fā)現左右作品都是一個(gè)個(gè)立體的金字塔，內容和立體效果很好地結合在一起。
為了說(shuō)明3D元素怎樣結合到平時(shí)的靜態(tài)頁(yè)面中，Web設計師GUILLAUME LECOLLINET（他的網(wǎng)站：http://littleworkshop.fr）做了一個(gè)WebGL的demo頁(yè)面。頁(yè)面上呈現了3個(gè)東西：第一個(gè)HTML5盾牌，鼠標懸停會(huì )進(jìn)行翻轉；第二個(gè)框線(xiàn)球會(huì )有落下彈起的重力效果；第三個(gè)就是美元符號，會(huì )跟隨鼠標懸停位置呈現不一樣角度的陰影。從這個(gè)demo當中我們可以看到簡(jiǎn)單的3D效果完全可以讓頁(yè)面變得生動(dòng)有趣。
(建議采用IE11或者Chrome查看）
試想一下，我們現在很多網(wǎng)頁(yè)的Logo都是圖片，但是如果帶有一些3D的效果，一定會(huì )特別有意思?？赡苣銜?huì )問(wèn)，這能給用戶(hù)帶來(lái)多大價(jià)值呢？可能實(shí)用性上確實(shí)沒(méi)有多少，但很多時(shí)候，我們也要討用戶(hù)歡心，讓用戶(hù)展現笑容，所謂的”delight”的作用，增加用戶(hù)好感度。同時(shí)，這也可以展現一個(gè)網(wǎng)頁(yè)的性格和技術(shù)的前瞻性，這方面是設計師和開(kāi)發(fā)者需要好好考慮的。
那怎么在頁(yè)面中運用3D元素呢？下面跟大家介紹三個(gè)好用的工具：
1. Three.js （http://threejs.org）
目前最好的WebGL library，也是瀏覽器支持最好最廣泛的類(lèi)庫，IE11和Chrome對它的支持都很不錯，上面介紹的案例都是運用ThreeJS創(chuàng )建的。
2. Blender （http://www.blender.org）
Blender是一個(gè)免費和開(kāi)源的3D建模編輯應用，可以直接導出ThreeJS可用的代碼。當然你也可以在其他3D建模工具如3DMax，然后導入到Blender從而生成ThreeJS可用的文件。
3. Voodoojs （http://www.voodoojs.com）
這是一個(gè)全新的JS library讓你創(chuàng )建2D和3D有機融合的網(wǎng)頁(yè)。
工具雖好，一個(gè)不可回避的問(wèn)題還是瀏覽器的支持，雖然IE都已經(jīng)開(kāi)始支持WebGL了，但很多用戶(hù)的瀏覽器可能還不支持。我建議開(kāi)發(fā)者采用漸進(jìn)式的支持方法，即給不同的瀏覽器不同的版本，以確保最先進(jìn)的瀏覽器用戶(hù)獲得最好體驗，而低版本瀏覽器用戶(hù)也能獲得良好的效果。以上介紹的網(wǎng)站均對不支持WebGL的瀏覽器做了適配，拿”月熊志”為例，這個(gè)網(wǎng)站的3D場(chǎng)景在不支持WebGL的瀏覽器變成了360度連續幀的png圖片，也能讓用戶(hù)左右滑動(dòng)來(lái)獲得模擬3D效果。
3D對于網(wǎng)頁(yè)來(lái)說(shuō)不再是高不可攀的技術(shù)，有了瀏覽器的支持和各種JS庫，相信2014年會(huì )有更多網(wǎng)站加入3D的元素來(lái)豐富用戶(hù)體驗，相信這也是未來(lái)網(wǎng)頁(yè)發(fā)展的新方向。
作者：saber zou
================關(guān)于優(yōu)設網(wǎng)================
“優(yōu)設網(wǎng)uisdc.com“是一個(gè)分享網(wǎng)頁(yè)設計、無(wú)線(xiàn)端設計以及PS教程的干貨網(wǎng)站。
【特色推薦】
PS禮儀手冊：網(wǎng)頁(yè)設計師必須修煉的內功技法，更是不可或缺的WEB設計指南http://hao.uisdc.com/ps/。
設計微博：擁有粉絲量61萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設計 ，歡迎關(guān)注獲取網(wǎng)頁(yè)設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網(wǎng)站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經(jīng)驗分享和各種意想不到的”福利”嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設計 微信號：【youshege】?jì)?yōu)設哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：
聯(lián)系客服
