建站常識
交互設計模式——分頁
2009-07-31 22:54:00
在模式庫里,我將列出所有電子商務網(wǎng)站需要的模式.以下將羅列出經(jīng)典常用的模式案例,我也試圖讓這些模式看起來更有趣味性與實用性。(Yahoo模式庫也有對Pattern的一種定義。)
模式歸屬類別為了方便調用和維護模式庫中的各種模式,首先將模式庫中的模式分成三大類:用戶需求,應用需求,語境下的設計.在用戶需求類別中,有一種類型叫基本交互。這里我將從這個緯度把基本交互中所涉及的模式一一羅列講解。
Pagination(分頁,標記頁數(shù))問題摘要用戶需要查看數(shù)據(jù)的一個子集,卻發(fā)現(xiàn)所有數(shù)據(jù)是顯示在一頁的,這時候查看變得非常不容易。
實例何時使用
- 當一個屏幕不能承載更多的數(shù)據(jù)時。
- 感興趣的項目通??梢栽谇皫醉撜业?。
- 需要深入探索數(shù)據(jù)項,而非考慮內容顯示在一個滾動區(qū)域。 解決辦法
綜述:打破完整數(shù)據(jù),分成更小的項目,順序顯示這些數(shù)據(jù)和單獨序列頁。提供分頁控制一頁一頁地瀏覽。提供鏈接讓用戶瀏覽網(wǎng)頁的前一頁和后一頁的這種行動。此外,提供連結到最開始和結束的資料組 (第一個和最后一個)。如果數(shù)據(jù)集是可預知數(shù)量,就顯示一個鏈接的最后一頁。如果數(shù)據(jù)集是不可預知數(shù)量或顯示有可能是不同規(guī)模的(例如,來自于搜索引擎的結果數(shù)據(jù)),請不用擔心要顯示鏈接到的最后一頁。
項目分頁
- 拆分項目列表成為一個序列的網(wǎng)頁。
- 提供可訪問前一頁和下一頁網(wǎng)頁信息的鏈接。
- 提供可跳轉到瀏覽第一頁和最后一個頁面的鏈接。
- 提供用戶正在瀏覽的什么類型的對象信息。
- 提供用戶正在瀏覽一套物體的有關信息.使用形式:”[$ObjectName]s [DisplayedItemRange] of [TotalItems]“
- 本環(huán)節(jié)的順序如下:第一頁,上一頁,下一頁,最后。
- 使用的圖形箭頭,以增加鏈接的目標大小。
- 顯示翻頁在不可用情況的管理顯示狀態(tài)。
搜索分頁
- 使信息轉化為按相關性分類排序的一系列網(wǎng)頁。
- 提供分頁控制來提供訪問分頁內容。
分頁控制
- 顯示導航控件作為一行鏈接。
- 本環(huán)節(jié)的順序如下: ‘前一頁’ ,網(wǎng)頁鏈接, ‘后一頁’。
- 在標簽’前一頁’后,顯示左箭頭。
- 在標簽’下一頁’前,顯示右箭頭。
- 使用可用鼠標點擊的箭頭。
- 網(wǎng)頁鏈接應設置包含最多10個網(wǎng)頁鏈接。如果有少頁的結果存在,只顯示網(wǎng)頁上提供的網(wǎng)頁鏈接。
- 當網(wǎng)頁在1-6頁中時,該網(wǎng)頁鏈接應始終從’1 ‘開始。
- 當在6 頁(7頁以后)的任意網(wǎng)頁上,該網(wǎng)頁鏈接起始應在當前頁面減去5 。例如,當?shù)?頁,第一頁將是2 ( 7-5= 2 )和最后一頁將11 (仍顯示10頁)。
- 第一頁的結果不會有顯示 ‘上一頁’的標簽或箭頭。
- 結果的最后一頁不會顯示’下一頁’的標簽或箭頭。
- 當前網(wǎng)頁的頁碼鏈接不顯示超鏈接。
- 最后在分頁控制區(qū)上方加個結果頁的標簽。
基本原理
項目分頁
- 顯示箭頭圖形有助于區(qū)分鏈接,并提供更大的點擊目標。
- 與搜索分頁不同,在任何時候,分頁控件都是可見的(即使禁用),當出現(xiàn)無法控制分頁時,這可以防止用戶分心。
搜索分頁
- 顯示箭頭圖形有助于區(qū)分聯(lián)系,并提供更大的點擊目標。
- 結合上下文背景,增加不可控狀態(tài)顯示箭頭價值不大原因有:
(1)這些顯示箭頭,經(jīng)常顯示可打開折疊層。
(2)當?shù)谝豁摰慕Y果已組合成絕大多數(shù)的綜合瀏覽量。展示不可用“前一頁”控制翻頁,這些是沒有什么附加價值的。 - 雖然“第一頁”鏈接很有價值,但也要與呈現(xiàn)在隨機訪問的鏈接功能競爭。
- “最后”鏈接是沒有什么價值的,因為結果是按相關性排序的,這也是問題,因為結果總數(shù)(因此,最后的結果)可能不知道。 同類模式圖片展示
原文:http://alite.aliued.cn/archives/750
近期更新
- [2023-06-25 23:22:29] 優(yōu)秀網(wǎng)站設計的五大特點
- [2023-04-27 14:05:55] Html 5 響應式網(wǎng)站設計制作
- [2023-04-10 11:07:30] 網(wǎng)站建設制作流程知多少
- [2022-10-14 10:11:30] 做網(wǎng)站設計應該更看重框架搭建還是視覺觀感?
- [2022-08-09 15:57:48] 以“產(chǎn)品”思維搭建網(wǎng)站!
- [2022-08-08 09:12:57] 一家公司的網(wǎng)站應該有哪些板塊內容?
- [2022-08-05 09:28:06] 企業(yè)網(wǎng)站建設為什么要設置新聞板塊?
- [2022-07-04 15:58:06] 網(wǎng)站首頁設計的好看,這個網(wǎng)站就成功了一大半!
- [2022-05-20 09:34:19] 網(wǎng)站后臺管理系統(tǒng)是什么?有什么作用?
- [2022-05-17 11:29:32] 作為消費者,應該如何選擇一家水平高的網(wǎng)站建設公司
- [2022-05-17 11:27:01] 高端網(wǎng)站定制與模板化網(wǎng)站應該怎么選擇?
- [2022-04-22 16:00:41] 現(xiàn)在高端的網(wǎng)站設計都有哪些新的趨勢?
延伸閱讀
- [2010-11-15 08:26:00] 讀設計看需求
- [2010-06-21 22:36:00] 可用性在于細節(jié)
- [2010-04-21 17:04:00] 交互設計(12)—避免出錯
- [2010-10-29 17:23:00] 設計模式-自動完成
- [2009-07-25 08:47:00] “反饋信息”的分類及交互設計原則(1/3)
- [2010-05-17 17:15:00] 為線框圖多留點時間
- [2010-08-24 17:38:00] 頭像web版交互設計總結
- [2010-12-15 08:37:00] 說說web標簽設計
- [2009-05-19 11:38:00] 淺談無結果頁面反饋提示交互設計
- [2006-04-04 16:21:00] 網(wǎng)站制作流程及界面交互設計研究探討
- [2010-05-18 11:33:00] 交互設計的出發(fā)點
- [2008-01-27 09:58:00] 交互設計中的視覺引導
解決方案
輪胎行業(yè)網(wǎng)站設計解決方案 機械行業(yè)網(wǎng)站設計解決方案 房地產(chǎn)行業(yè)網(wǎng)站設計解決方案 科技企業(yè)網(wǎng)站設計解決方案 電子家電網(wǎng)站設計解決方案 食品行業(yè)網(wǎng)站設計解決方案 集團公司網(wǎng)站設計解決方案 企事業(yè)單位網(wǎng)站設計解決方案 外貿行業(yè)網(wǎng)站設計解決方案 健身運動網(wǎng)站設計解決方案 美容與化妝品網(wǎng)站設計解決方案 建筑設計行業(yè)網(wǎng)站設計解決方案 物流行業(yè)網(wǎng)站設計解決方案
TAGS關鍵字
青島網(wǎng)站營銷 html和css 青島網(wǎng)站建設 網(wǎng)頁設計 青島網(wǎng)站設計哪家好 交互設計 用戶界面 青島輪胎網(wǎng)站設計 青島網(wǎng)站制作 審美 營銷型網(wǎng)站 青島開發(fā)區(qū)建站公司 青島網(wǎng)頁制作 青島高端網(wǎng)站設計公司哪家好 微信小程序 海信網(wǎng)絡科技 IT資訊 集團官網(wǎng) 青島flash網(wǎng)站 青島做網(wǎng)站多少錢 視覺靈感 robots 網(wǎng)站建設,手機網(wǎng)站 網(wǎng)站品牌 網(wǎng)站的速度 網(wǎng)站動畫 網(wǎng)站制作 插畫 互聯(lián)網(wǎng) 青島網(wǎng)頁設計