設計完美的手風琴

有時我們甚至不考慮就使用這些模式，這是有充分理由的：每次遇到界面問題時都想出一個全新的解決方案既費時又冒險，因為我們只是不知道有多少實施一個新的解決方案需要時間，以及它在可用性測試中是順利成功還是慘敗。

設計模式非常有用，主要是因為它們可以節省時間並更快地為我們提供更好的結果。 我們不需要將它們完全按原樣應用於我們遇到的每個問題，但我們可以在它們之上構建，利用我們的經驗來指導我們的決策，因為我們知道它們在其他項目中工作得相當好。

在過去的幾年裡，我花了很多時間與多家公司合作，嘗試各種方法並在可用性測試中研究它們。 本系列文章是對自始至終所做的觀察和實驗的總結。 係好安全帶：在這個關於 SmashingMag 的新系列文章中，我們將研究從輪播到過濾器、計算器、圖表、時間線、地圖、多列表、全能定價計劃一直到座位選擇的所有示例在航空公司和電影院網站上。 但在我們開始處理複雜的界面問題之前，讓我們先從看似簡單明了的東西開始：手風琴。

手風琴的準系統

手風琴可能是響應式設計中最成熟的主力，這是有充分理由的。 對於漸進式披露來說，這是一種非常有用的模式——突出顯示某個部分的重要細節，並在必要時通過點擊或點擊來揭示更多細節。 因此，設計保持專注並首先顯示關鍵信息，而其他所有內容都可以輕鬆訪問。 事實上，如果您遇到任何類型的問題——太多的導航選項、太多的內容、太詳細的視圖——一個很好的起點是探索如何利用優秀的手風琴來解決這個問題。 通常情況下，它的效果出奇的好。

然而，即使是像手風琴一樣可預測和經常使用的組件也有很大的解釋和歧義空間。 現在，不要誤會我的意思：上下文很重要。 用於導航的手風琴將需要與問答部分不同的方法。 但是在所有不同的情況下，我們必須徹底考慮兩件事：手風琴的視覺設計和交互設計，以消除所有的混淆和誤解。

現在，如果我們更仔細地研究一下手風琴的準系統，就會不難看到它的所有原子元素。 手風琴始終包含類別標題、展開和折疊狀態、指示展開的圖標以及它們之間的間距。 類別展開後，圖標應更改以指示正在折疊。 但是，如果用戶在另一張卡片打開時點擊折疊的卡片怎麼辦？ 擴展卡是否應該自動關閉？ 如果不能顯示所有項目怎麼辦——用戶是否應該自動向上滾動？ 讓我們一一仔細研究這些以及相關問題。

選擇一個圖標來表示擴展

現在，讓我們開始吧。 我們知道什麼？ 好吧，顯然，在大多數從左到右的界面中，類別名稱也將左對齊。 假設像許多手風琴一樣，子項目將在兩個部分之間滑動，你會選擇什麼圖標來傳達這種行為？ 一個向下的箭頭，一個向右的箭頭，一個向下的 V 形，一個加號，一個帶圓圈的加號——也許完全不同？

根據我的經驗，圖標的選擇似乎並不重要，只要它在同一個 UI 中沒有過多的含義。 例如，您可能會使用帶圓圈的加號來表示定價計劃中的擴展、縮放和兩個項目的捆綁——這可能會引起混淆。 但是，在手風琴的上下文中，用戶似乎明白，如果某些導航項有圖標，而其他部分沒有，則表明單擊或點擊時可以使用更多內容。 我們沒有發現任何跡象表明一個圖標比其他圖標更容易識別。 但是，這並不意味著某些選項可能不會比其他選項引起更多的混亂。

例如，Slack 使用指向右側的箭頭，儘管手風琴項在類別標題之間垂直滑動，而不是從右側滑動。 現在，在這一點上值得問一下圖標的方向應該有什麼目的？ 它可能應該作為移動方向的指示器，或者更具體地說，一旦點擊或單擊圖標，用戶的視圖將被移動到哪裡。 例如，在 iOS 上的 Apple Mail 中，指向右側的 V 形表示用戶視圖從左到右的移動。

在圖標的方向和用戶視圖的移動之間進行映射似乎是合理的，但由於不同的界面表現不同（神秘的圖標經常與用戶玩心理遊戲）並不是每個人都會期待這種行為。 所以最後，作為設計師，你做什麼並不重要：無論如何，你將無法滿足某些用戶的期望。 在設計時，我們傾向於專注於我們正在設計的內容，但即使我們的 UI 非常一致，我們的用戶也會受到他們在我們從未見過的網站上的體驗的影響而產生期望。 因此，關鍵是盡可能保持彈性，並在未達到預期的情況下提供簡單、直接的恢復。

因此，回顧一下圖標的選擇，如果手風琴項目垂直滑入，直覺上使用上面列出的任何圖標似乎都是安全的，除了指向右側的圖標。 此處要考慮的唯一問題是，如果您選擇的圖標在不同的上下文中已經具有其他含義，例如，如果您使用加號圖標突出顯示定價計劃中捆綁交易的部分（其中加號不可點擊），然後使用完全相同的加號圖標用於手風琴。 在這種情況下，最好避免將完全相同的圖標用於不同的目的，因為這可能會引起混淆。

那麼這一切都清楚了嗎？ 嗯，不是真的。

讓我們考慮一下預期的交互。 雖然箭頭和 V 形通常用作指示方向變化的提示，但加號表示添加和擴展。 在這兩種情況下，更改可能以多種方式發生：點擊圖標會導致內容上方出現導航項目的覆蓋，或者項目垂直（而不是水平）滑入。 到目前為止，一切都很好。

然而，當用戶登陸一個頁面時，最初他們不知道他們是否登陸了一個帶有跳轉到頁面某些部分的鏈接的長滾動頁面，或者只是一個“常規”網站，其部分單獨存在頁。 很多時候，向下的箭頭會觸發跳轉到頁面內的部分，而不是擴展導航選項。 用戶可能在過去迷失了方向，被帶到長頁面的一部分，然後返回到頁面頂部，並從那裡繼續。

因此，如果您選擇使用箭頭，您最終可能會看到一些用戶希望向下滾動到頁面的該部分，而不是看到子項在類別之間滑動。 因此，雪佛龍似乎是一種更安全、更可預測的選擇。 如果您選擇使用它，則在折疊狀態下將其指向下方，並在展開時將其指向上方。 對於加號圖標，您可以在減號圖標或關閉圖標之間進行選擇。

那麼，作為設計師，這一切對我們意味著什麼？ 首先，如果手風琴項目應該從左到右水平滑入，則使用指向右側的箭頭是安全的。 其次，如果手風琴項目應該從上到下垂直滑入，則 V 形向下（不是箭頭！）或加號圖標可能會很好用。

考慮到這一點，圖標的選擇應該是一個非常簡單的決定。 但根據該圖標與類別標題的接近程度，它也可能會引起混淆。 現在，在選擇該圖標的位置時，我們需要考慮哪些選項？

選擇圖標的位置

選項！ 不管您選擇了哪個圖標，您可以選擇將其放置在 a) 類別名稱的左側或 b) 其右側，或 c) 將圖標沿整個導航項欄的右邊緣對齊，間距出圖標和類別名稱。

職位重要嗎？ 實際上確實如此。 根據 Viget 的“Testing Accordion Menu Designs and Iconography”，一些用戶傾向於專注於點擊圖標，而不是整個導航欄。 發生這種情況的原因很簡單：在過去，一些用戶可能已經被手風琴的替代實現“燒死”了。 在某些網站上，類別標題不會觸發擴展，而是直接進入類別。 在其他實現中，點擊導航欄不會導致擴展，也不會跳轉到類別——它絕對什麼都不做。

雖然我們當然會將整個區域設計為命中目標，但由於並非每個導航都有這種行為，一些用戶在實際點擊之前不會知道您的導航是“壞的”還是“好的”之一在它上面（或懸停在它上面）。 由於懸停並不總是可用，點擊圖標似乎是一個更安全的選擇——點擊圖標幾乎總是會觸發預期的行為。 這是設計手風琴時需要了解的重要細節。

在各種界面和實現中，似乎將圖標放在類別標題的右側，用戶選擇關注圖標的頻率高於將圖標放在左側（用戶單擊類別的標題或空白處）酒吧）。 但是，一些用戶仍然傾向於選擇圖標。 因此，為了以防萬一——至少 44×44 像素大小，讓圖標足夠大以方便點擊是一個不錯的決定。

左對齊、右對齊還是右對齊？ 好像沒那麼重要。 但是，如果您有一組手風琴（可能生活在導航菜單中），類別標題的長度變化很大，那麼在許多部分切換手風琴狀態將需要比從上到下沿著導航欄運行稍微更多的關注. 只是鼠標指針或手指必須一直重新定位才能點擊那個花哨的圖標！ 此外，如果圖標是右內聯的，則在窄屏幕上，手指需要穿過導航區域，從而混淆視圖。 圖標位於欄的右邊緣，此問題將得到解決。

但如果圖標與欄的右邊緣對齊，我們仍然需要注意不要將其放置在離類別名稱太遠的位置。 在視覺上，擴展與類別相關應該是顯而易見的； 因此，在不同的視口中，圖標的位置可以改變以保持視覺連接明顯。 此外，在更寬的屏幕上，圖標可能會稍微變大。 對於一組手風琴來說，這個選項似乎更可取，但對於單個手風琴來說並沒有太大的不同——好吧，除非你的數據證明不是這樣。

為手風琴設計交互

然而，即使所有這些細節都被排除在外，這種互動仍然會引發一些問題。 假設類別標題左對齊，圖標與欄的右邊緣對齊。 繼續上面的討論，當用戶點擊類別名稱或圖標或兩者之間的空白區域時會發生什麼？ 他們應該都觸發擴張還是應該服務於不同的目的？

好吧，我們可以確定一件事：當用戶點擊圖標時，他們可能期待某種擴展，因此點擊圖標肯定會提示擴展。 但是，可以單擊類別標題以直接跳轉到類別或以擴展為目的。

如果類別標題觸發了擴展，我們肯定需要在子下拉菜單中提供指向該類別的鏈接，讓用戶直接跳轉到該部分（例如“所有項目”）。 這意味著用戶從首頁到某個類別的旅程可能會引起混淆，因為他們不希望在單擊類別標題時需要額外點擊。 但是，這種情況下的恢復是顯而易見的，並且不會真正強制用戶恢復以前的狀態，因為他們可以立即繼續。

如果手風琴中指向類別的鏈接很明顯，則不會造成乾擾，而跳轉到類別而不是展開導航項然後返回可能會造成乾擾。 這就是為什麼同時讓圖標和類別標題觸發擴展可能更合理的原因。 這種方式不那麼突兀。 這種交互是否也應該發生在類別標題和圖標之間？ 一些設計師可能會爭辯說，當用戶在瀏覽網站時點擊該區域時，他們可能不希望擴展，而是希望“錨定”鼠標指針以開始在頁面上滾動，因此感覺很混亂。 當然，這是可能的，但如果用戶選擇打開導航菜單來探索導航選項，這不太可能發生。

手風琴通常用於卡片，並且根據視口的寬度，卡片可能會很寬，因此雖然有些用戶會拼命嘗試點擊圖標，但您的一些用戶會習慣於通過點擊空白區域來折疊和展開卡片在酒吧。 其他用戶將習慣於完全沒有任何用途的空白區域，並且會忽略它。 只有少數人會期望該欄用作該類別的鏈接。 在我們的測試中，事實證明，讓空白空間觸發擴展並不那麼令人困惑，而不是 - 好吧，坦率地說，其他任何東西，所以這也是我們選擇使用的。

但是，如果您確實希望類別標題直接鏈接到類別怎麼辦？ 一個想法是通過使用兩個視覺上獨特的元素來“暗示”元素的邊界來提高清晰度——例如，圖標和類別標題的背景顏色不同（參見上面的示例）。 在我們的實驗中，我們沒有註意到行為和期望的任何變化——有些人仍然會點擊該類別並想知道發生了什麼。 同樣，在擴展的手風琴中鏈接該部分似乎是一個更安全的選擇。

夠好了？ 好吧，我們還沒有到那裡。 如果用戶點擊圖標進行擴展但屏幕上沒有足夠的空間來顯示所有子項怎麼辦？ 您團隊中的某個人可能會建議自動向上滾動頁面，以確保擴展區域顯示在屏幕的最頂部。 這是個好主意嗎？

每當我們試圖從用戶手中奪走控制權時，都必須對這個決定進行徹底的測試和考慮。 也許用戶有興趣一次查看多個部分，並希望在這些部分的內容之間快速跳轉。 與其讓用戶對自動滾動或跳躍行為感到疑惑，然後回滾以恢復之前的狀態，不如讓事情保持原樣，讓用戶做出決定，因為他們可以向下滾動如有必要。 沒有多少用戶會期望跳轉到頂部——不中斷流程或者可能有一個永久鏈接到該部分（如果它真的很長）似乎是一個更好的選擇。

然後另一個問題出現了：如果一個部分已經展開，並且用戶點擊另一個部分，第一個部分應該折疊還是保持原樣？ 如果第一部分自動折疊，但它不是用戶所希望的，他們總是可以再次打開它，但他們將無法同時掃描或比較這兩個類別。 如果該部分保持擴展，他們將不得不主動關閉他們不需要的類別。 這兩種選擇似乎都有合理的用例。

手風琴的性質要求自動折疊，但就可用性而言，它可能不是最佳選擇。 對於有許多項目的手風琴，我們傾向於將部分擴大，因為面板同時關閉和打開而發生的跳躍太吵了。 因此，或者您可以提供“全部折疊”/“全部展開”按鈕，這在設計日程表或詳細表格時非常有用。 如果沒有那麼多項目，則默認情況下可以折疊該部分，因為跳轉將是最小的。 （請注意，對於水平手風琴，該部分肯定會折疊 - 保持它打開是沒有意義的。）

然後還有別的東西。 不管圖標的選擇還是它的位置，當手風琴展開時，應該很容易立即折疊它。 這種交互不需要鼠標光標或手指的任何額外移動——就像任何其他隱藏和顯示交互一樣。 這意味著折疊和展開的圖標在激活時當然應該改變，但它的位置應該保持完全相同，允許即時切換手風琴的狀態。

包起來

唷，這是對一個看似明顯的設計模式的冗長檢查。 那麼，我們如何設計出完美的手風琴呢？ 我們選擇一個表示擴展的圖標（V 形向下或加號圖標），使其足夠大以便舒適地點擊並將其放置在欄的右邊緣。 整個導航欄觸發擴展——在欄周圍有足夠的填充來切換狀態和到手風琴類別中類別主頁的鏈接。

如果我們確實選擇使用 V 形，點擊時方向應該會改變，如果它是加號圖標，它可以很容易地轉換為“-”或“x”來表示折疊。 為了使交互更加清晰，我們可以使用微妙的過渡或動畫來滑入和滑出類別項目。

當然，您的解決方案可能非常不同，因為您的上下文也可能非常不同，因此，如果您正在尋找替代解決方案，您會在下面找到我們在設計手風琴時經常提出的一些問題。

手風琴設計清單

1. 你會選擇什麼圖標來表示擴展？
2. 你會選擇哪個圖標來表示折疊？
3. 你將把圖標放在哪裡？
4. 您如何設計類別標題？
5. 您如何指示折疊和展開狀態（在圖標之外）？
6. 如果用戶點擊類別會發生什麼？
7. 手風琴是否應該包含指向該類別主頁的鏈接？
8. 如果用戶點擊空白區域會發生什麼？
9. 選擇另一個部分時，展開的部分是否應該自動折疊？
10. 如果沒有足夠的空間來顯示所有項目怎麼辦？
11. 你應該有一個“全部折疊/全部打開”鏈接或按鈕嗎？

像手風琴一樣看似成熟且可預測的組件所需的考慮水平結果證明是設計實驗和可用性會議幾乎永無止境的故事，因為該組件的外觀和交互只有少數既定準則。 雖然製作一個易於使用的手風琴並不難，但設計一個普遍理解的手風琴卻不是那麼容易。 因此，用戶經常會因為他們的期望不匹配或者因為交互打斷了他們的流程而感到迷茫。 我們的工作是減少摩擦並確保它盡可能少地發生。 通過寬容和有彈性的設計，我們可以做到這一點。

也許您的經歷與文章中提到的經歷截然不同？ 在本文的評論中讓我們知道！ 此外，如果您有其他想要了解的組件，也請告訴我們——我們會看看我們能做些什麼！

敬請關注！

這篇文章是關於響應式設計模式的新系列的一部分，在你真正的 Smashing Magazine 上。 我們將每兩週在該系列中發布一篇文章。 不要錯過下一個 - 在花哨（或不那麼花哨）的日期選擇器上！ 啊，對涵蓋所有模式（包括上述模式）的（印刷）書感興趣？ 在評論中也讓我們知道——也許我們可以考慮將所有這些模式組合成一本書並在 Smashing Magazine 上發布。 繼續搖滾！