模式庫

在模式庫裡,我將列出所有電子商務網站需要的模式.以下將羅列出經典常用的模式案例,我也試圖讓這些模式看起來更有趣味性與實用性。(Yahoo模式庫也有對Pattern的一種定義。)

模式歸屬類別

為了方便調用和維護模式庫中的各種模式,首先將模式庫中的模式分成三大類:用戶需求,應用需求,語境下的設計.在用戶需求類別中,有一種類型叫基本交互。這裡我將從這個緯度把基本交互中所涉及的模式一一羅列講解。

Pagination(分頁,標記頁數)問題摘要

使用者需要查看資料的一個子集,卻發現所有資料是顯示在一頁的,這時候查看變得非常不容易。

實例

何時使用

• 當一個螢幕不能承載更多的資料時。
• 感興趣的項目通常可以在前幾頁找到。
• 需要深入探索資料項目,而非考慮內容顯示在一個滾動區域。 解決辦法

綜述:打破完整資料,分成更小的專案,順序顯示這些資料和單獨序列頁。提供分頁控制一頁一頁地流覽。提供連結讓使用者流覽網頁的前一頁和後一頁的這種行動。此外，提供連結到最開始和結束的資料組（第一個和最後一個)。如果資料集是可預知數量，就顯示一個連結的最後一頁。如果資料集是不可預知數量或顯示有可能是不同規模的（例如，來自於搜尋引擎的結果資料)，請不用擔心要顯示連結到的最後一頁。

項目分頁

• 拆分項目列表成為一個序列的網頁。
• 提供可訪問前一頁和下一頁網頁資訊的連結。
• 提供可跳轉到流覽第一頁和最後一個頁面的連結。
• 提供使用者正在流覽的什麼類型的物件資訊。 
• 提供使用者正在流覽一套物體的有關資訊.使用形式:”[$ObjectName]s [DisplayedItemRange] of [TotalItems]“
• 本環節的順序如下：第一頁，上一頁，下一頁，最後。
• 使用的圖形箭頭，以增加連結的目標大小。
• 顯示翻頁在不可用情況的管理顯示狀態。

搜索分頁

• 使資訊轉化為按相關性分類排序的一系列網頁。
• 提供分頁控制來提供訪問分頁內容。

分頁控制

• 顯示導航控制項作為一行連結。
• 本環節的順序如下： ‘前一頁’ ，網頁連結， ‘後一頁’。
• 在標籤’前一頁’後,顯示左箭頭。
• 在標籤’下一頁’前,顯示右箭頭。
• 使用可用滑鼠點擊的箭頭。
• 網頁連結應設置包含最多10個網頁連結。如果有少頁的結果存在，只顯示網頁上提供的網頁連結。
• 當網頁在1-6頁中時,該網頁連結應始終從’1 ‘開始。
• 當在6 頁(7頁以後)的任意網頁上，該網頁連結起始應在當前頁面減去5 。例如，當第7頁，第一頁將是2 （ 7-5= 2 ）和最後一頁將11 （仍顯示10頁)。  
• 第一頁的結果不會有顯示 ‘上一頁’的標籤或箭頭。
• 結果的最後一頁不會顯示’下一頁’的標籤或箭頭。
• 當前網頁的頁碼連結不顯示超連結。
• 最後在分頁控制區上方加個結果頁的標籤。 
  

基本原理

項目分頁

• 顯示箭頭圖形有助於區分連結，並提供更大的點擊目標。
• 與搜索分頁不同，在任何時候,分頁控制項都是可見的（即使禁用),當出現無法控制分頁時,這可以防止用戶分心。

搜索分頁

• 顯示箭頭圖形有助於區分聯繫，並提供更大的點擊目標。
• 結合上下文背景,增加不可控狀態顯示箭頭價值不大原因有:
  (1)這些顯示箭頭,經常顯示可打開折疊層。
  (2)當第一頁的結果已組合成絕大多數的綜合流覽量。展示不可用“前一頁”控制翻頁,這些是沒有什麼附加價值的。
• 雖然“第一頁”連結很有價值,但也要與呈現在隨機訪問的連結功能競爭。
• “最後”連結是沒有什麼價值的,因為結果是按相關性排序的,這也是問題，因為結果總數（因此，最後的結果）可能不知道。 同類模式圖片展示

原文：http://alite.aliued.cn/archives/750

文章提供BAYSTARS DESIGN網頁設計公司