使用者體驗設計:分組且可摺疊的面板

來源:互聯網
上載者:User

網頁製作Webjx文章簡介:探討分組且可摺疊的網頁面板.

Accordion(或Accordion菜單)指分組且可摺疊的面板集,能在有限的空間裡提供大量連結或是其它可選擇的內容供訪問。

每個內嵌式面板有可能單獨展開(這時往往其它面板都會閉合),通常滑鼠經過或是點擊特定面板的標題(或是面板上的展開/摺疊元素),就會展開一組子選項。



解決了什麼問題?

如果想在有限的空間裡塞入大量內容,或是當內容一次性全部展示時會導致使用者無所適從時,問題就來了,怎樣才能以易於使用者理解的方式,讓使用者同時訪問大量內容,又不需要滾動頁面。滾動頁面會讓使用者離開他們更喜歡的上下文環境或是頁面位置。


什麼時候使用該模式?

當可選項非常多,空間又有限,而且內容列表可以有邏輯地分組為規模更小且尺寸相當的塊狀內容時。


解決方案是什嗎?

提供兩級的選項集

Ÿ 第一級是分類或分組

Ÿ 第二級是各組內的選項列表

Accordion通常被設計為一些可摺疊的面板(不是那種有層次的樹狀結構),第一級分類通常被用作標籤。分類標籤通常用作全長度的控制項控點,或同時提供了相應的擴充/摺疊表徵圖。Accordion通常預設會顯示一個初始面板。



建議

Ÿ 預設開啟最重要的面板,這樣既是為了顯示最重要的選擇,同時也透露出這樣的一個事實,即每個摺疊著的列表都是可以開啟的。

Ÿ 高亮顯示當前開啟的面板,這樣使用者可以把已開啟面板的標題與關閉著的面板的標題區別開。

Ÿ 不要在Accordion裡再放置Accordion,如果你真的需要這樣做,考慮樹狀結構,或是其它更合適多級結構的元素更加合適。


選擇

Accordion可以配置為,要求至少開啟一個面板,或是允許其它更靈活的模式,比如允許關閉所有面板、允許開啟多個面板等。有些業內人士認為,只允許同時開啟一個面板是最佳實務,但也有不這樣認為。


Ÿ Accordion可以配置為一次只能開啟一個面板,但在許多例子裡,它支援同時開啟多個面板。

Ÿ 除非版面或是其它不可變更的設計限制要求Accordion保持大小一致,否則它應該可以改變尺寸以容納不同尺寸的面板。

Ÿ 在許多案例中,只有單擊才能開啟Accordion裡的面板,但在有些上下文環境中,比如在展示“高興”/有趣/“嘿,來看看”這樣的元素時,滑鼠經過時就展示面板也是可以的。


為什麼使用該模式?

首要原因是,使用Accordion元素可以在有限的空間裡塞入大量內容。


特殊用例

大多數Accordion是垂直排列的,但也有些是水平排列的。


可訪問性

對於鍵盤使用者來說,Accordion最後要麼像樹狀檢視要麼像標籤視圖。Accordion上有可能增加鍵盤導航,比如用Tab鍵控制標籤切換,上/下方向箭頭在不同的面板間切換。


如果JavaScript被禁用,那麼Accordion應該退而求其次作些有用的改變,比如同時展示所有面板。


完全不顯示任何面板並不可取,因為這有可能讓螢幕助讀程式找不到內容。因此不妨考慮設定高度為0.


申明:本文由Pmcaff.com翻譯

原文連結:http://developer.yahoo.com/ypatterns/navigation/accordion.html



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。