|
Full-Page Carousels
像《龍騰世紀(jì)：起源》里的選項(xiàng)卡式的屏幕淡出效果，應(yīng)用已經(jīng)有段時(shí)間了：
在下面《Halo Reach》中的“屠殺報(bào)告”中，這種思路到達(dá)了一個(gè)新的水平。屏幕水平滾動(dòng)，每個(gè)頁(yè)面上都有多個(gè)選項(xiàng)卡。游戲中，玩家可以接受這樣的界面，但要是放在Web上，人們非瘋了不可。
你得為這種界面設(shè)計(jì)合理的交互。
Jax Vineyards 采用了一種相似結(jié)構(gòu)的布局，不用選項(xiàng)卡：
為每個(gè)輪換的屏幕加上選項(xiàng)卡，你的網(wǎng)站就又上了一個(gè)臺(tái)階。
Magento 在這個(gè)思路上提供了另一種簡(jiǎn)單的方式：
如今我們?cè)谑謾C(jī)和平板電腦中也能看到這種類型的界面，它們有很多的背景圖。在各式各樣的游戲中也不難找到。這種方式不是單純的選項(xiàng)卡和簡(jiǎn)單的橫滾：想想iPad中切換多個(gè)桌面時(shí)的情景。Think for a Living 在頁(yè)面右上角提供了一個(gè)地圖（非常游戲化的做法），旨在把用戶傳送到一個(gè)不尋常的頁(yè)面。
Web設(shè)計(jì)師能從中獲得什么：
如果你有大量的內(nèi)容，那這個(gè)大膽的想法可以幫助提升友好性，增進(jìn)了解。還記得老式單頁(yè)面網(wǎng)站中的錨點(diǎn)嗎？這只不過(guò)是老酒裝新瓶。通過(guò)觸摸屏，很容易完成一個(gè)屏幕的移入，這是一個(gè)重要的因素。
由于屏幕尺寸不同，這種布局需要仔細(xì)規(guī)劃，可以到CSS3 media queries進(jìn)行查詢，以確保內(nèi)容可以適應(yīng)不同的屏幕尺寸。你需要讓你的布局易響應(yīng)。你可以用一個(gè)屏幕大小的div，將overflow設(shè)置成hidden，然后把各個(gè)屏幕放置在一個(gè)定寬的無(wú)序列表中（<ul>）
隨著用戶對(duì)平板電腦的使用，會(huì)越來(lái)越熟悉這種界面。采用簡(jiǎn)單的橫滾屏設(shè)計(jì)，會(huì)讓你的客戶端脫穎而出哦。
出處：藍(lán)色理想
責(zé)任編輯：moby
上一頁(yè) Web設(shè)計(jì)師能從游戲中學(xué)到些什么 [5] 下一頁(yè) Web設(shè)計(jì)師能從游戲中學(xué)到些什么 [7]
|
第 1 頁(yè) 
第 6 頁(yè) Web設(shè)計(jì)師能從游戲中學(xué)到些什么 [6]
