推薦60種分頁案例和好的實踐

來源:互聯網
上載者:User

結構和層次降低了複雜性並提高了可讀性。你的文章或網站組織的越深入,使用者就越容易理解你觀點和得到你想傳達的資訊。在網頁上,這點被通過多個方式做到。

在本文頭條和列舉被用做邏輯上獨立的資料區塊來呈現資訊。另一種解決方案是一種叫分頁的機制,它在給定文章的單一部分為使用者提供用於瀏覽的額外的導航選項。文章的這些地方除了“上一頁(previous)”和“下一頁(next)”按鈕外,還涉及到數字、提示和箭頭。

搜尋引擎幾乎總是使用分頁,報紙往往利用它來導航有幾部分的大文章。還有一些情形,分頁也是部落格(weblog)所需的。額外的導航能簡化一些網站頁面的訪問,例如讓使用者容易的通過網站的存檔進行瀏覽。

在大多數情況下,分頁優於傳統的“上一頁、下一頁”導航方式,它通過網站給訪問者提供更快更方便的導航。它不是必須的,但是一個有用的好特性。

讓我們來看一些好的分頁實踐,何時和如何執行分頁的一些例子。

分頁設計的好實踐(來自Faruk Ates的7個方面)
提供大面積的可點擊地區
別使用底線
標明當前頁面
隔開網頁連結
提供上一頁和下一頁連結
使用首頁和末頁連結(在能適用的地方)
把首頁和末頁放在外面
相關參考資料
Pagination 101,Faruk Ates已經完成關於分頁的終稿。
Some Styles For Your Pagination,可以隨意下載隨意適用的分頁樣式。
如果你的部落格是基於wordpress的,你可以安裝外掛程式WP-PageNavi來產生分頁。它非常容易安裝,但需要你修改一些你用主題的源碼。
錯誤#1:分頁選項不可見
因為分頁的是主要目的是充當一個改進後的導航,它必需讓訪問者清楚他們在哪兒、他們已經去了哪兒和他們下一步能去哪兒。這個三個事實讓使用者完整的理解這個系統如何的工作和這個導航應該如何被使用。

但最重要的是,導航選項應該是可見的。hugg.com不遵循這個方針。連結顏色和白色背景對比非常低。沒有提供滑鼠移至上方效果。

錯誤#2:分頁不直觀
如果你不得不在一個相當複雜(但漂亮)的導航和一個簡單但包含必要功能的導航間選擇,一直傾向簡單的方法。如果使用者不理解分頁背後的機制,他們將不能使用它,因此他們也不會使用你的網站。

Helium.com是這個錯誤的很好例子。看一下下面截圖:這些箭頭代表什嗎?代表你訪問過的那頁或代表你正在訪問的那頁?為什麼這個連結到第二頁有一個白色背景?為什麼箭頭有不同的顏色?這是不直觀的。

不直觀的設計源於結構、層次和深思熟慮後的設計決定的缺乏。空白導航像過度擁擠方案一樣不直觀。

沒有間隔的網頁連結難以掃描和瀏覽。Make-Believe.org是個這樣的例子,其設計是不直觀的。




相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

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 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。