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

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

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

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

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

分頁(yè)使用形態(tài)

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

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

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

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

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

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

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

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