8種提升網頁設計品質的布局方案

來源:互聯網
上載者:User

網頁設計中,內容組織恐怕是最至關重要、最影響設計品質的方面了。如何將資訊組織到好的布局中,是一個網站的基礎,並且應該在考慮外觀之前就決定好。沒有好的布局,網頁資訊流就不能正確傳遞,所有東西都不能建立起合理的聯絡。

在這篇文章中,我們將討論八個布局解決方案/技巧,這些方案和技巧將有助於你建立整潔有序的內容布局。

這八個技巧包括滑門 (sliders)、標籤式、漸進布局(progressive layouts)、結構網格、模態視窗(modal window)、翻轉元素、手風琴效果(accordions)以及超大下拉式功能表(mega drop-down-menus)。

1. 滑動樣式與傳送帶(Sliders and Carousels)

滑門(Sliders),也可稱為傳送帶(carousels),是一種有序的、互動性強、十分平滑地展示內容的方式。滑門樣式是一個非常流行的技 巧,大家都覺得它很好用,能讓你在固定的區塊內填充上大量內容。沒有滑門的協助,這些內容可能就要分開放到頁面中的各個地方。而大多數時候,你在使用頁面 空間時總是捉襟見肘。或者,有些內容是你希望“使用者要求”後才出現。這有助於讓使用者一次只關注一個內容區塊,也符合他們自己的便利需求。

滑門樣式的執行個體

導航區提供縮圖與表徵圖
運用滑門和幻燈樣式時,最好在導航區提供表徵圖或縮圖,以便使導航更加簡單直觀。縮圖和表徵圖給使用者指出明路,向他們解釋當前所在位置,以及有哪些瀏覽選項可供選擇(比如說投影片的導航可以是水平的,也可以是垂直的)。另外,還能方便他們快速選擇特定滑門頁。

Coda網站的 滑門頂部設計了標籤卡,他們使用的是“滑動門+標籤卡”的混合樣式。這個主意絕頂聰明,因為通過看縮圖,使用者就能快速得知特定滑門頁的內容。而且,這些 表徵圖也提供了強大的、令人印象深刻的、乾淨整潔的視覺支援。除了表徵圖和標籤你也可以在標題前加上小圖片, 或者只用數字也行。

用於展示產品的滑門樣式
與上面的例子對應,滑門不僅能用於大容量資訊的組織,也能為使用者瀏覽大量產品條目提供方便。 SourceBits (見下圖)使用了多層滑門(一個水平的,一個垂直的),用唱片封面作為導航條目。

水平滑門兩端都有大的圓形箭頭表徵圖,即時反映左右導航的可用性。滑動的時候有平滑的動畫,用起來非常舒服。同時,你也能看到,各個元素間距都精心設計過,這有助於內容組織,也提升了可用性。滑鼠滑過時,每個條目還有漂亮的聚光燈效果。

垂直滑動的內容以及超大的水平“點擊條”
接下來看看 QuickSnapper 的滑門。這是一個完美融入頁面整體布局的十分好用的垂直滑門。滑門內容中有大量截屏圖,內容被有序地組織起來。這個滑門最贊的地方就是上下方的按鈕導航。按鈕寬及整個滑門,大的按鈕讓“推拉”滑門更加容易。

還有,這些按鈕的:active和:focus效果也很漂亮。

滑門指令碼

你可以參考下面的指令碼、技巧和教程製作你自己的滑門:

  • Slick Accessible Slideshow using jQuery
  • Coda-Slider 1.1.1
  • jquery.scrollable 1.0.2
  • Create an Amazon Books Widget with jQuery and XML
  • Agile Carousel
  • Easy Image or Content Slider
  • Slider Gallery
  • Coda Slider Effect
  • iCarousel

[1] [2] [3] [4] [5] [6] [7] [8]  下一頁



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。