談?wù)劸W(wǎng)頁設(shè)計(jì)中信息分頁的設(shè)計(jì)

當(dāng)一個(gè)網(wǎng)頁有太多信息要顯示。為了請求速度、美觀以及其他的各種理由，分頁就會被我們請過來。讓我們的用戶可以選擇是否繼續(xù)前行或者后退，去找到他想要的東西。比如我們在淘寶搜索“襯衣”，這時(shí)通常會有 100 頁的信息（當(dāng)然不止 100 頁，只是其實(shí)用戶通常不需要那么多東西）。如下：

一、小型分頁的原始設(shè)計(jì)方案
    網(wǎng)頁設(shè)計(jì)中分頁的作用說起來有很多，特別是從性能的優(yōu)化上，但最重要的原因是，讓用戶可以找到自己想要的東西。這點(diǎn)頁面比較多的分頁上，淘寶已經(jīng)做得很好。但在小分頁上，上次和一幫設(shè)計(jì)師在評審一個(gè)小分布設(shè)計(jì)方式的時(shí)候，有了一些不同的意見。先看一下這個(gè)小型分頁（這里定義的是頁面小于或等于5頁的分頁設(shè)計(jì)）的原始設(shè)計(jì)（交互白板，非視覺終稿）方案：

    看起來挺熟悉的？是的，很多網(wǎng)站其實(shí)都采用了這種類型的顯示方式。這里有設(shè)計(jì)師說，會不會把“上一頁”和“下一頁”放在一起，用用戶按起來比較方便。就像這樣：

    確實(shí)，這樣比原來的好挺多的。至少用戶可以更省力去翻頁。這是有另外一個(gè)設(shè)計(jì)師就跳出來了，說，我們是不是還可以做進(jìn)一步的優(yōu)化？因?yàn)橥ǔ碚f，我們按“下一頁”的情況會比較多，“上一頁”這些歷史會比較少見。這時(shí)他提出的方案是：

    當(dāng)然，這樣也挺好的，理由也說得過去。就是有一種說不清的東西在里面，類似于技術(shù)和藝術(shù)究竟那種更重要，懂得的漢字和能寫出好文章之間的關(guān)系。其實(shí)問題就出在，一是用戶需要去做一個(gè)“猜”的過程，猜這個(gè)左向的指示符究竟是不是代表向上翻頁；一是設(shè)計(jì)的不一致讓心理有不和諧的感覺。特別是在中國在種“好事成雙”，什么都要成一對的文化下，更明顯。
二、方案
    不過，對于個(gè)人來說，我并不贊同上面的這些做法。既然這個(gè)分頁是小型的，一個(gè)小位置就能全列在上面的，那我們?yōu)槭裁催€要去復(fù)雜化這個(gè)用戶去選擇的過程，而不直接提供一種更便捷的達(dá)到目的的方式？我的想法是小分頁就應(yīng)該把他們?nèi)@示出來，讓用戶操作更方便。如下：

    這種展開式的分頁設(shè)計(jì)與原始方案的對比：
從空間上
    展開式顯示更省像素。有很多好的設(shè)計(jì)師會考慮留白，更會考慮如果去合理地利用這些寶貴的空間，省像素。
從實(shí)用性上
    如果看到第3頁，突然想回到第1頁，按照原來的設(shè)計(jì)，是不是得按兩次“上一頁”？如果有5頁呢？我如何保證更快地在各頁之間切換？展開式的設(shè)計(jì)可以更好地解決這樣的問題。
三、結(jié)語
    當(dāng)然，并不是說這樣的展開式分頁就是更好的。還有可能要結(jié)合場景，比如像微博這些允許隨時(shí)間線無限下拉的地方，我們完全可以讓用戶忽略“分頁”這樣的概念，只要用戶向下拉，我們就提供信息的自動加載，以更方便用戶的查閱。應(yīng)用場景總是在變，但不變的是，我想自己應(yīng)該繼續(xù)這樣：
一、去積累。
    有時(shí)候總有這樣的小糾結(jié)，也可以說是一種小潔癖，像代碼總追求最優(yōu)的解決方案。   雖然這樣的糾結(jié)并不會對用戶有多大的影響 ，但當(dāng)你在一個(gè)項(xiàng)目中有10個(gè)，30個(gè)，100個(gè)這樣的優(yōu)化時(shí)，相信網(wǎng)站的體驗(yàn)將會超出用戶的預(yù)期。當(dāng)然，對于自己在這方面的能力，也將會有質(zhì)的提升。所以，去積累吧。
二、超出設(shè)計(jì)去思考。
    對于交互，其實(shí)我們的最終目標(biāo)是用戶的使用方便與否（不是用戶，有時(shí)候用戶他可能需要的只是很簡單的東西，比如一輛更快的馬車，但如果你給他一輛福特汽車呢？），所以，應(yīng)該跳出設(shè)計(jì)本身去思考，才更有可能得到滿意的結(jié)果。(轉(zhuǎn)于站長之家)