image.png

問題場景

用戶想通過導航找到某個項目

解決方法

使用手風琴導航，將多個面板垂直或者水平疊加到一起，展開其中一個面板，縮起其他面板；

適用場景

• 常做為主導航或者次級導航；
• 本質上類似標簽導航；可做為導航樹的替代方案；
• 經常有人在操作向導中使用手風琴，但其實并不合適；
• 用在FAQ非常合適；
• 如果設置項目不多的話（少于10個），用來管理設置項也不錯；

設計要點

• 一次只展開一個面板（如果可以展開多個，則叫做導航樹或可關閉面板）；
• 通過點擊面板頭部來切換不同的面板；
• 垂直手風琴展開后，一般展示次級項目；水平手風琴則可以放置大段內容；

注意事項

• 適當的動畫效果，以便讓用戶知道發生了什么事情（動畫時間少于250ms）
• 支持鍵盤上下方向鍵；
• 展開的面板應高亮顯示，以便與縮起的面板進行區分；
• 確保面板尺寸能夠根據內容自適應，因為如果高度固定，當內容項很少于，會導致面板很空；

利弊分析

• 優點：可以將大量元素壓縮在有限的空間內進行展示；元素包括：次級項目、問題、屬性；
• 缺點：做為主導航時，大部分元素被隱藏，可見性較弱

其他

垂直排列的方式很常見，但動畫效果經常做得不好；水平式很少見，但可以帶來一些樂趣；