網(wǎng)頁設(shè)計(jì)中標(biāo)記頁碼的再思考

這是一篇關(guān)于頁碼設(shè)計(jì)細(xì)節(jié)的文章。在頁面停留的時(shí)候，頁面的數(shù)字在下方全部羅列，這樣就可以看到頁數(shù)。這樣的UI要素被叫做頁碼。就像是這個(gè)博客文章的檢索目錄一樣，資料太多的話很難一次呈現(xiàn)，因此頁面單位的按照大板塊劃分，這是為了更加易于讀者閱讀，便于讀者在頁面間移動(dòng)的UI模式。

這里有更多的一些在smashing magazine上的頁碼設(shè)計(jì)，整理得很完整。

這樣熟悉的UI也許是不夠好的

這樣的頁面數(shù)字和之前羅列出來的形態(tài)是被用得很多的的UI。僅僅是這樣的UI元素是不能從側(cè)面反映使用者使用形態(tài)的，因此個(gè)人覺得不能說是好的設(shè)計(jì)。

分頁使用形態(tài)

實(shí)際分頁的使用形態(tài)，使用者會(huì)優(yōu)先按照目錄順序頻繁瀏覽，跳到特定頁面的情況是相對(duì)來說比較少的。大部分情況下因?yàn)椴荒茴A(yù)想到什么項(xiàng)目里面會(huì)有什么樣的文章，會(huì)跟著目錄的順序一致瀏覽下去?；蚴菑哪夸涢_頭到目錄結(jié)尾移動(dòng)，或是為了看新的文章直接到最后一頁，或是為了閱讀以前看過的文章，跳過不關(guān)心的文章，通過相關(guān)的日期快速瀏覽，還有只在某些預(yù)測(cè)到的可能境況里，跳轉(zhuǎn)到特定頁面。這樣就是產(chǎn)品的所有使用流程了嗎?

除了以上這樣的使用行為外，剩下的行為的使用頻度差異很大，這些情況里有一種叫做主要行為的使用模式。經(jīng)常使用的就被著重強(qiáng)調(diào)，不經(jīng)常使用的就弱化表示，這樣看著方便，操作也更加簡(jiǎn)單。

上面提到被稱為強(qiáng)調(diào)的東西，相對(duì)來說，因?yàn)楸绕鹬匾臇|西重要度要小一點(diǎn)，注意也會(huì)小一點(diǎn)，干擾減少一點(diǎn)的話會(huì)更有效果。如果不能下決定選擇的話，用戶反應(yīng)時(shí)間(可參照Hick法則)會(huì)減慢。

頁碼真的有必要完全展現(xiàn)嗎?

如果考慮這樣的使用形態(tài)的話，取消頁碼羅列形式是比較好的。頁碼羅列出來的大部分情況，都帶來了不必要的干擾。因?yàn)闄z索結(jié)果如果頻繁更新的話，就會(huì)成為像SNS時(shí)間線那樣，很難預(yù)測(cè)的頁面，因此在特定頁面的跳轉(zhuǎn)功能取消，使其功能更加單純，這樣UI的使用會(huì)更加提升。Naver博客和TSTORY博客移動(dòng)端頁面都是使用了這樣的模式。但是同樣地，這樣也是有著不合適的地方。因?yàn)镹aver檢索的時(shí)間線與前者特性不同，如果極端地移去分頁的話，可能會(huì)有更多的不便。因?yàn)樗阉鞯慕Y(jié)果是通過接近性羅列的，與目錄那種按時(shí)間的排序不一樣，如果搜素之后不能隨意移動(dòng)到想要的搜索頁，便會(huì)令使用者覺得煩躁。

嘗試將理論聯(lián)系起來設(shè)計(jì)

另外一個(gè)羅列頁碼的缺點(diǎn)是，如果將大塊的頁碼區(qū)域以每十項(xiàng)來劃分，如果只想在鄰接領(lǐng)域移動(dòng)的話，便有可能誤觸到下方按鈕，造成麻煩。向特定頁面移動(dòng)的情況，不是要設(shè)計(jì)復(fù)雜的構(gòu)造，只要設(shè)計(jì)簡(jiǎn)單的途徑，使得全體頁面的鏈接都可以展現(xiàn)就好了。用圖表形態(tài)(例如3/24表現(xiàn)第三頁)把全體頁面的現(xiàn)有位置表現(xiàn)出來，簡(jiǎn)單而確切。當(dāng)然全體的頁面的鏈接如果經(jīng)常展現(xiàn)，會(huì)有點(diǎn)復(fù)雜，因此一開始就要考慮頁面隱藏與展開的情況。IOS列表里也有關(guān)于primary action的項(xiàng)目，通過點(diǎn)擊，隱藏在detail disclosure按鈕后面的secondary action便會(huì)被觸發(fā)展現(xiàn)，按下波浪箭頭，便可以看到詳情頁面。

下面一起來看看實(shí)際應(yīng)用，手機(jī)在以前的頁面下端繼續(xù)追加了“查看全部頁碼“的選項(xiàng)，使得使用更加便利。