網(wǎng)頁設(shè)計(jì)中,內(nèi)容組織恐怕是最至關(guān)重要、最影響設(shè)計(jì)品質(zhì)的方面了。如何將信息組織到好的布局中,是一個(gè)網(wǎng)站的基礎(chǔ),并且應(yīng)該在考慮外觀之前就決定好。沒有好的布局,網(wǎng)頁信息流就不能正確傳遞,所有東西都不能建立起合理的聯(lián)系。
在這篇文章中,我們將討論八個(gè)布局解決方案/技巧,這些方案和技巧將有助于你創(chuàng)建整潔有序的內(nèi)容布局。這八個(gè)技巧包括:滑門(sliders)、標(biāo)簽式、漸進(jìn)布局(progressive layouts)、結(jié)構(gòu)網(wǎng)格、模態(tài)窗口(modal window)、翻轉(zhuǎn)元素、手風(fēng)琴效果(accordions)以及超大下拉菜單(mega drop-down-menus)。
1. 滑動(dòng)樣式與傳送帶(Sliders and Carousels)
滑門(Sliders),也可稱為傳送帶(carousels),是一種有序的、交互性強(qiáng)、十分平滑地展示內(nèi)容的方式;T樣式是一個(gè)非常流行的技巧,大家都覺得它很好用,能讓你在固定的區(qū)塊內(nèi)填充上大量內(nèi)容。沒有滑門的幫助,這些內(nèi)容可能就要分開放到頁面中的各個(gè)地方。而大多數(shù)時(shí)候,你在使用頁面空間時(shí)總是捉襟見肘;蛘撸行﹥(nèi)容是你希望“用戶要求”后才出現(xiàn)。這有助于讓用戶一次只關(guān)注一個(gè)內(nèi)容區(qū)塊,也符合他們自己的便利需求。
滑門樣式的實(shí)例
導(dǎo)航區(qū)提供縮略圖與圖標(biāo)
運(yùn)用滑門和幻燈樣式時(shí),最好在導(dǎo)航區(qū)提供圖標(biāo)或縮略圖,以便使導(dǎo)航更加簡單直觀?s略圖和圖標(biāo)給用戶指出明路,向他們解釋當(dāng)前所在位置,以及有哪些瀏覽選項(xiàng)可供選擇(比如說幻燈片的導(dǎo)航可以是水平的,也可以是垂直的)。另外,還能方便他們快速選擇特定滑門頁。
Coda網(wǎng)站的滑門頂部設(shè)計(jì)了標(biāo)簽卡,他們使用的是“滑動(dòng)門+標(biāo)簽卡”的混合樣式。這個(gè)主意絕頂聰明,因?yàn)橥ㄟ^看縮略圖,用戶就能快速得知特定滑門頁的內(nèi)容。而且,這些圖標(biāo)也提供了強(qiáng)大的、令人印象深刻的、干凈整潔的視覺支持。除了圖標(biāo)和標(biāo)簽?zāi)阋部梢栽跇?biāo)題前加上小圖片, 或者只用數(shù)字也行。
用于展示產(chǎn)品的滑門樣式
與上面的例子對應(yīng),滑門不僅能用于大容量信息的組織,也能為用戶瀏覽大量產(chǎn)品條目提供方便。 SourceBits (見下圖)使用了多層滑門(一個(gè)水平的,一個(gè)垂直的),用唱片封面作為導(dǎo)航條目。
水平滑門兩端都有大的圓形箭頭圖標(biāo),實(shí)時(shí)反映左右導(dǎo)航的可用性;瑒(dòng)的時(shí)候有平滑的動(dòng)畫,用起來非常舒服。同時(shí),你也能看到,各個(gè)元素間距都精心設(shè)計(jì)過,這有助于內(nèi)容組織,也提升了可用性。鼠標(biāo)滑過時(shí),每個(gè)條目還有漂亮的聚光燈效果。
垂直滑動(dòng)的內(nèi)容以及超大的水平“點(diǎn)擊條”
接下來看看 QuickSnapper 的滑門。這是一個(gè)完美融入頁面整體布局的十分好用的垂直滑門;T內(nèi)容中有大量截屏圖,內(nèi)容被有序地組織起來。這個(gè)滑門最贊的地方就是上下方的按鈕導(dǎo)航。按鈕寬及整個(gè)滑門,大的按鈕讓“推拉”滑門更加容易。
還有,這些按鈕的:active和:focus效果也很漂亮。
滑門腳本
你可以參考下面的腳本、技巧和教程制作你自己的滑門:
出處:笨活兒
責(zé)任編輯:moby
上一頁 下一頁 提升設(shè)計(jì)品質(zhì)的8個(gè)布局方案 [2]
|