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

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

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

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

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

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

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