分頁是那些經常被忽視的小設計需求之一。但對于博客和其他內容重網站,它提供了重要的導航手段。精心制作的菜單可以鼓勵用戶進一步探索您提供的內容。
信不信由你,有些設計師敢于把分頁提高到下一個層次。下面是一些非常有創意的代碼片段,可以用來改進自己的網站。
簡單直觀的懸停效果
我們的第一個例子展示了懸停效果可以極大地改進標準分頁。光標后面的超平滑下劃線使您獲得更直觀的體驗。另外,整個菜單很容易閱讀。這是一種幫助用戶的簡單方法。
實時計數
分頁最令人沮喪的部分之一是菜單如何處理大量頁面。此代碼段使用jQuery自動調整以在您單擊時顯示相鄰的頁碼。這是一個更容易深入網站的途徑。
廚房水槽
這是一個非常有趣的概念。設計成既能響應又能無障礙,此分頁UI包含多種導航方式–包括通過鍵盤。頂部類似時間軸的條形圖清楚地標記了當前頁面,并提供了所有可用內容的概述。
讓雪人來處理吧
他們說很難找到好的幫助。但是這個片段在點擊頁碼時提供了雪人的幫助(至少,雪人的手)。雖然Yetis可能不符合您的主題,但這是一個我們如何添加樂趣(和驚喜)元素的例子。
增強的移動屏幕
在較小的屏幕上,分頁可能很難使用。導航項目往往太小,太難閱讀。這個片段為移動設備提供了一個很好的替代方案。每一項都比較大,因為導航垂直延伸。結果是移動用戶不必瞇著眼睛也不需要放大就可以四處走動。
不需要數字
有時,我們不需要對分頁中的每個項目進行編號。這個例子使用了點,而不是數字,非常有吸引力。對于幻燈片或瀏覽多個內容面板來說,這是一個很好的解決方案。
觸感友好
移動用戶界面對用戶的觸摸做出反應時效果最好。這里我們有分頁,允許用戶刷到下一個或上一個項目。這種小小的便利會讓一切變得不同可用性 .
分頁/無限滾動組合框
設計師經常使用無限滾動到代替分頁。但這是一個很好的概念,可以將它們組合起來。無限卷軸的挫敗感在于,在一長串的列表中很難找到某一項。當您繼續向下滾動時,此腳本將向導航添加新的頁碼,使返回更容易一些。
向前移動分頁
一個好的網頁設計不會忽略組成網頁的各種元素。當你把更多的努力放在上面的文章中時,你會發現更多的優點。因此,從這些例子中獲得一些靈感,創建分頁菜單,使其看起來和功能都更好。