|
滑塊菜單
《寓言3》出了，其身臨其境的菜單系統(tǒng)與《寓言2》截然不同，如上圖。但《寓言2》中美麗的滑塊菜單，我們也把它列了出來。
滑動(dòng)滑塊，內(nèi)容在右側(cè)屏幕中隨之變化。按鈕下面還有相應(yīng)的下拉菜單。不可用的內(nèi)容會(huì)暗掉。上面那張圖是頂級(jí)分類“服裝”。接下來的內(nèi)容顯示為“大衣”，然后是特定的衣物。這是在給你的電子商務(wù)網(wǎng)站提供靈感嗎？
Web設(shè)計(jì)師能從中獲得什么：
你的網(wǎng)站上曾出現(xiàn)過一個(gè)菜單飛出來占滿整個(gè)屏幕的情況嗎？然后當(dāng)你在上面劃過時(shí)，還能在展出子菜單……還TM四級(jí)！看到這么驚悚的菜單，誰不想馬上離開啊。把菜單設(shè)計(jì)的小一點(diǎn)，在容易看到的范圍內(nèi)，而且便于操作，這是讓用戶不會(huì)遠(yuǎn)離你的王道啊。
現(xiàn)在已經(jīng)有一些能在任何div容器里自定義滾動(dòng)條的滑塊腳本了。 為什么不把按鈕放到div里？因?yàn)榭赡苣承╊愋偷牟藛卧O(shè)置（如娛樂或時(shí)尚網(wǎng)站中的），可用性和可擴(kuò)展性要比下拉或彈出菜單更強(qiáng)。為onClick事件加一 個(gè)AJAX loader，你會(huì)得到一個(gè)用戶更容易識(shí)別的界面。目標(biāo)就是當(dāng)菜單展開時(shí)，用戶能夠在一屏里對(duì)它們進(jìn)行操作。既然有必要往菜單里加?xùn)|西，就別讓它們看起來很笨拙。
屏幕透視
必須承認(rèn)，當(dāng)?shù)谝谎劭吹健禜alo Reach》屏幕時(shí)我心跳不已。當(dāng)你進(jìn)入主菜單時(shí)，會(huì)發(fā)現(xiàn)文字都是斜的�！禜alo Reach》整個(gè)游戲使用的都是菜單屏幕右邊緣透視的角度。這是一種視覺暗示。當(dāng)你把控制器往右推會(huì)發(fā)生什么呢？屏幕跳動(dòng)、橫滾、模糊，然后切換到下一 屏，這時(shí)內(nèi)容和圖像看上去就是向左傾斜的了。在一個(gè)tab下就是你的角色了，在那動(dòng)來動(dòng)去的。棒極了，對(duì)嗎。我坐在那玩了一會(huì)兒。當(dāng)然，我的直覺告訴我， 我想這么做。
Web設(shè)計(jì)師能從中獲得什么：
其實(shí)在Photoshop里很容易就能模仿出這樣的菜單效果。準(zhǔn)備一張足夠大的、能涵蓋兩屏的全景背景圖片，利用傾斜的CSS3版式，再搞一個(gè)處理快速水平滾動(dòng)的JavaScript腳本的水平滾動(dòng)，你就可以擁有像游戲中一樣的效果了。
把它放在一個(gè)更小的屏幕里，使用在一個(gè)兩幀動(dòng)畫的banner或按鈕上，你會(huì)得到驚喜的（你的客戶也會(huì)哦）。我從沒見人在Web上使用它，但我做了一個(gè)小示例，希望能成為你實(shí)現(xiàn)它的起點(diǎn)。
此外，注意到了嗎，在《Halo Reach》里，它將很平凡的菜單屏幕與游戲世界中的景觀巧妙地結(jié)合在一起。帥呆了。它傳遞了一種感受方式，就像飛機(jī)降落前透過窗戶看城市一樣。刺激并誘 惑著你成為更深層次互動(dòng)和行動(dòng)的一部分。這種集成方式并不適合所有網(wǎng)站的體驗(yàn)，但它有存在的意義，在適當(dāng)?shù)臅r(shí)候，值得去嘗試。千萬不要低估了喜悅的力量。
出處：藍(lán)色理想
責(zé)任編輯：moby
上一頁 Web設(shè)計(jì)師能從游戲中學(xué)到些什么 [6] 下一頁 Web設(shè)計(jì)師能從游戲中學(xué)到些什么 [8]
|
第 1 頁 
第 7 頁 Web設(shè)計(jì)師能從游戲中學(xué)到些什么 [7]
