① 分頁導航 分頁導航幾乎在哪個網站都可見.好的分頁導航能給用戶
在瀏覽網頁時，經常會遇到分頁導航的情況。分頁導航主要有四個作用：告訴用戶要瀏覽的信息量;讓用戶快速跳過一些不想看的信息;便於定位和查找;減少頁面大小，提高載入速度。此外，分頁導航實際上還給了瀏覽網頁的用戶一定的停頓，可以讓產品“更有節奏感”，減少用戶瀏覽的疲勞感。 下面圖趣網以國內外常見的幾個網站(主要為搜索引擎和電子商務網站)為例，分別從幾個方面來談一下分頁導航的設計。 1：分頁導航的長度 分頁導航既不可過長，又不可過短。過長的分頁導航，加重了用戶的負擔;過短的分頁導航，不能很好地起到導航的作用。 淘寶和京東的分頁導航頁碼數量為6，Google、Bing 和 Yahoo 是10。網路和亞馬遜採用了可變長度的形式。網路的起始長度為10，隨著頁面的下翻，分頁頁數逐漸增加，最終保持20頁的長度;而 Amazon 最初只有4頁，最後維持在5頁的數量上。 Google的分頁導航 Bing的分頁導航 Yahoo的分頁導航 網路的分頁導航 Amazon的分頁導航 淘寶的分頁導航 京東的分頁導航 可以看出，電子商務網站的分頁導航頁碼數量普遍少於搜索引擎。最主要的原因當然是電商網站的搜索結果數量遠遠不及搜索引擎。其次，因為電商網站主要是賣東西的，相對於以把信息呈現給用戶為目標的搜索引擎來說，它們更願意讓用戶仔細地瀏覽前面幾頁的商品，而不是引導用戶隨意地點擊任意一個頁面去查看商品。 2：是否需要首末頁導航鏈接 Google、Bing、Yahoo、Amazon、網路、淘寶、京東這幾個網站的分頁導航中都沒有首頁和末頁的鏈接。 Google、Bing、Yahoo 和網路這些搜索引擎沒有首頁和末頁，我們可以理解，因為搜索結果數量太大，頁數太多，所以提供末頁沒有太大的意義。並且他們的分頁導航長度都在10頁以上，而用戶很有可能在10頁以內就能夠找到自己想要的信息，即使找不到，也可以通過點擊第1頁方便地回到首頁，所以“首頁”的鏈接用處不大。 而 Amazon、淘寶和京東這種電商網站，用戶的商品信息需求更加個性化，對搜索准確性的要求不如搜索引擎那麼高。所以電商網站的用戶所需要的商品信息更接近於平均分布到各個檢索結果頁中，而不是像搜索引擎那樣集中在首頁。另外，還有一種可能是，如果用戶翻到一定頁數時，發現結果越來越背離自己的需求，通常會修改搜索條件(如限定男裝、女裝、品牌等)，或者重新搜索。 此外，以上兩類網站的共同點是，搜索結果裡面的鏈接默認會在新窗口中打開，所以，如果用戶瀏覽到後面的頁面時，又想再瀏覽首頁中的商品信息或搜索結果，可以通過切換窗口來實現(前提是你沒有關閉窗口的強迫症)。 3：是否需要自定義頁碼 自定義頁面對選項數目有限的分頁來說是很常見的。淘寶和京東都提供了這種導航方式。但是，我覺得，在這種信息量很大的頁面上，用戶往往不知道具體頁碼上的具體內容，所以不太可能自定義某個頁碼去查看。我們可以把淘寶和京東提供的這種功能理解為對沒有在導航頁碼中放“首頁”鏈接的一種補充。另外，電商網站提供這種自定義頁碼功能，也可以提高排名靠後的商品的曝光度，從電商平台的角度出發，這也是一種需要。 4：頁碼數字的間距 頁碼數字間距太小，用戶容易誤點擊;間距太大，會增加滑鼠。在這一點上，Google 似乎做得有些欠佳。出現雙位數的頁碼後，Google 的分頁導航顯得有些擁擠。我們姑且可以將這理解成是 Google 為了保證每個頁碼數字都和分頁導航上方的字母o對齊。 出現兩位數頁碼後，Google 的頁碼數字間距太小 5：滑鼠響應 理想狀況下，滑鼠劃過或者點擊頁碼時，頁碼應該有響應。這樣能夠提醒用戶滑鼠當前所劃過或點擊的頁碼。當滑鼠劃過頁碼時，淘寶是將對應的小方框加上橘黃色 border，京東是將對應的小方框變成藍色，網路和 Bing 是將對應的小方框變成灰色，而谷歌是將對應的頁碼數字加上下劃線。當滑鼠點擊時，網路和 Google 會將對應的頁碼數字變為紅色。 以上處理方法應該都是正確的，但 Google 的處理方式有點讓人不解。給鏈接加上下劃線，本來是 HTML 的默認處理方式，以此來提醒用戶這是一個鏈接，這種方式貌似是萬維網之父 Tim Berners Lee 所定義的。但是，隨著用戶對網頁的熟悉，很多時候即使不加下劃線，用戶也知道那是個鏈接。我記得6月份的時候，新浪就去除了其首頁所有鏈接的下劃線，那時我還真感覺頁面清爽了許多，可沒過多久，它又給加上了。再回過頭來，看 Google 的導航鏈接，滑鼠放上去的時候會出現下劃線，就連“上一頁”和“下一頁”這兩個鏈接也有下劃線。我個人覺得，這可能是沒有必要的，因為絕大多數的用戶其實已經知道那是一個可以點擊的鏈接了。也許 Google 又是在用這種復古的風格來彰顯與眾不同吧。反正復古和屌絲就一步之遙。 6：“上一頁”和“下一頁” “上一頁”和“下一頁”一般分別放在頁碼導航的左端和右端，並且通常會有向左和向右的箭頭來形象化地指引用戶，如 Yahoo、Amazon、網路、淘寶和京東。 “上一頁”和“下一頁”的位置也很重要。位置最好相對固定，讓用戶可以很方便地使用上一頁和下一頁來進行頁面切換。在這一點上，上述幾個網站都做得不錯。而網路的前 20 頁分頁頁碼會隨著頁碼的下翻而向右移動，這一點體驗並不是太好。可能網路的出發點是想讓用戶在20頁之內方便地進行頁面的切換。 另外，淘寶和京東還在頁面的右上角提供了簡單的上翻和下翻功能。下面是完整的分頁功能，上面是簡化功能。產品頁下面需要完整的分頁功能很好理解，因為用戶都是瀏覽完該頁產品再翻頁，所以把完整功能置於底部。那什麼時候用戶需要在產品頁上面使用分頁功能呢?可能是在用戶不想看產品頁內容就翻頁的時候，可能是在用戶想了解自己所處位置的時候。另外由於產品頁上部的分頁模塊常常和產品篩選條件模塊放於一處，所以這里的功能需要盡量簡化、節約空間。此外，淘寶和京東還在此處顯示了搜索結果的總頁數，可能是為用戶提供是否重新輸入檢索詞或者修改搜索條件的決策支持信息。 淘寶頁面右上角的簡單翻頁功能 京東頁面右上角的簡單翻頁功能 7：當前所在頁 用戶當前所在頁的頁碼應該與其它頁碼的樣式有所區別，以此來提示用戶當前所在的位置，便於導航。Google、Bing、Yahoo 和網路都使用了黑色的字體來表示用戶當前所在頁的頁碼，京東用了橘黃色的字體來表示，而淘寶將當前所在頁的小方框背景設置為黃色。 另外，當前頁應該是不可鏈接的，所以滑鼠放上去之後，應該不會變成 hover 狀態。而在京東的網頁上，滑鼠放到當前頁上面時，當前頁會像其它頁碼一樣，背景變成藍色，滑鼠也會變成手指的形狀，這樣會誤導用戶，以為當前頁是可以鏈接的。 值得一提的是新浪微博。新浪微博的默認方式是，隨著用戶向下瀏覽，自動載入兩次，之後再出現分頁。對於大多數用戶，在閑暇時瀏覽微博，載入兩次的內容已經能夠滿足他們，對於需要瀏覽更多信息的用戶，也讓他們知道自己到底瀏覽了多少。這種方式無疑更加靈活，既保證了用戶瀏覽信息的連續性，又提供了快速導航和預估信息量的作用。 新浪微博信息流中的頁碼導航 8：區分訪問過/未訪問過的頁碼 按照 HTML 的默認設置，訪問過和未訪問過的鏈接顏色是不同的。但是，上述網站中，只有網路和 Bing 將訪問過和未訪問過的頁碼導航鏈接用顏色區分出來了。我個人認為做這一區分是有必要的，尤其是當我用搜索引擎搜索信息的時候。 9：導航頁碼中的品牌宣傳 前面提到過，Google 的導航頁碼上方是一個變形的 Google Logo，每個頁碼都對應 Logo 裡面的一個字母o。用戶甚至可以通過點擊這些o來跳轉到其對應的導航頁碼所在的頁面上去。 另外，配色也可以和品牌宣傳結合起來。Google 的導航頁碼的藍色和其Logo 中的G和g的顏色很相近，網路的導航頁碼上方顯示的是網路的Logo，京東的導航頁碼中使用的橘黃色和藍色是其 Logo 的主要顏色，淘寶的導航頁碼中使用的橘黃色也是其 Logo 以及網站的主要顏色。 10：其它 在進行產品設計的時候，我們一切都是從用戶需求的角度出發來進行思考和設計的。但是，產品是同時滿足用戶需求和公司需求(通常是盈利)的東西，所以，有時候，不得不考慮其它的一些東西。比如，在你瀏覽某些新聞資訊類網站的時候，你會發現，每一頁的內容只有可憐的一兩段，然後就又得翻頁，一篇不長的文章，被分割成了十幾頁。這種為了增加網站 PV 而故意分割文章增加頁數吸引用戶點擊的行為真的是令人發指。