Yahoo!用戶界面博客（YUIBlog）

手風琴模式調查結果

幾個月前， 我們共享上的“手風琴”導航組件我們目前的想法 ，誰讀了這個博客採取的一項調查顯示，以幫助我們確定違約，目前的做法，和其他準則納入一個Web開發人員和設計師，並要求社會手風琴模式和提供手風琴YUI組件的輸入。

我已經有一段時間了審查和研究的結果和我想與社區分享他們為我們寫了一個“測試版”的格局和準備分享它，所以沒有進一步再見，這裡有結果（請注意，這一調查不應被視為嚴格的科學）。

誰回答

受訪者認同自己通過以下方式：

• 設計師21.4％
• 開發32.1％
• 混合（設計師和開發人員）42.3％
• 沒有上述4.2％

術語的區別

絕大多數在所有受訪者一致認為，

• 手風琴和手風琴菜單意味著同樣的事情（73％）
• 手風琴和樹控件是兩個不同的事情（89％）

許多評論者所描述的沿著這些路線手風琴和樹木之間的區別：“樹控制一般意味著一個層次的深度，這不是一般的手風琴。”

較小的多數說，手風琴和可折疊面板是指同樣的事情（60％）。

這些多數是跨角色一致。

介紹的手風琴

一個堅實的大部分（68％）表示，手風琴可以了水平，以及為垂直（和事實上的模式是在網絡上證明）。 有人建議，上水平的手風琴標籤應當書面垂直和/或旋轉。

一個更大的大部分（72％）表示，手風琴，只能有兩個水平（這與手風琴和樹木之間的區別對齊）：

一個微弱多數（53％）說，可以嵌套在其他手風琴手風琴。 書面意見建議，問題的措辭導致一些來回答，這是肯定，但並不一定可取的，如提出建議，“如果你充分排水溝他們，這將是可能的，但一般1可怕的想法 - 實物作者：喜歡使用太多的標籤和他們包裝成多行。“

這是自我描述的設計者和開發了對立雙方的問題之一。 57％的開發和雜交同意，手風琴，而64％的設計師說，他們未必可以嵌套。 （沒有Aboves分裂50/50！）

如果要我猜，我說，開發商（雜交），比的原因可能已經表達更多更密切地與如何連接“你可以做到這一點......”的觀點，而設計者可能已經表達更多的“......但你不應該”的觀點。

手風琴如何行為

一個微弱多數（54％）認為，手風琴應該允許同時打開多個面板。 雙方的行為，可以在網上找到，所以我們的印象是，這種行為可能取決於更多的設計空間和手風琴，比毯子規則的一種方式或其他目的的制約。

這個問題也分裂沿著身份線路，但曖昧的方式。 雜交傾向於通過一個微小的多數面板的時間規則，而設計和開發，並沒有Aboves一致認為，多個面板是由稍大的多數沒關係。

一個更大的多數（73％）認為，手風琴可以有一個完全封閉的狀態（即，它是沒有必要的，總是有一面板打開）。 只離群，沒有Aboves突破60％的位置，必須始終有一個面板打開。

一些評論者建議，這是一個很好的做法，有一個面板，默認情況下打開，該小組是第一個，一個最近使用過的。

另一大部分（76％）認為手風琴的整體大小可以根據需要進行更改，而不是限制大小一致。 （當然，也有，它可能是一個有效的選擇，甚至是一個設計約束，手風琴保持大小一致的情況下，如移動設備的屏幕）。

一個非常微弱多數（51％）認為，手風琴上點擊打開（而不是懸停）和幾乎一樣大的少數（45％）說，這取決於。 有趣的是，只有不到4％的人願意說出手風琴應該作為一項規則懸停打開。

在這個問題上的書面意見，為思想提供充足的好食物，如：

打開面板，應規定明確的行動。 手風琴如果有多個面板，懸停開放可能是一個不和諧的經驗。 相反，使用工具提示來傳達面板的詳細總結，並有用戶明確“點擊”打開該面板。

取決於每個手風琴的配置。

我把這些例子[ 多個 ， 翻轉 ]，因此開發人員可以使用“最佳”為每個用例。

此外，應選擇使用不同的規則過渡：（最開放）或（元素應只在鼠標懸停打開）。

對於先進的慣例，手風琴應該打開懸停在拖放操作。 在任何其他情況下，你可以不相信，懸停是故意的。

無障礙

最後，我們提出一個開放式的問題，漁業，任何已知的可訪問性問題與手風琴，並得到了很多偉大的答案。 （對於我們的例子中的問題，大多數人一致認為，重要的是使整個標籤的點擊，不只是一個小圖標。）

這裡是一個其他的洞察力有關獲取與手風琴的取樣：

我認為這是安全的假設，手風琴的相互作用是一個先進的互動。 可以產生大量的可訪問性問題。

1. 背後隱藏的面板，所以人們可能無法找到它的內容。
2. 根據可點擊區域的大小或觸發打開/關閉面板上可能有需要的手工靈巧的問題。

如果JavaScript不可用的（雖然這可能會產生“閃爍”與JavaScript），手風琴，應打開所有面板。

這取決於是否隱藏面板中的內容是在DOM中存在或打開面板時檢索。 如果被檢索，重點必須放在新開的面板上。

好吧，我真的相信冠軍應該是可點擊的元素的內容，特別是如果使用AJAX（就像tabview方式），將被載入，但現實情況是，有時開發人員（應該有）/（想）控制自定義該行為。 這裡是清單的例子 ，我手風琴部件實現基於YUI的2.x的創建，它可能是最常用從冒泡YUI的擴展的組件之一。

我們已經有這樣的情況“標籤”的手風琴是一個完整的博客文章的鏈接，所以不能手風琴點擊。 在這種情況下，我們寫了一個圖標源到用js做的工作。 提供圖標是足夠大的和/或與accesskey的，我沒有看到一個主要的困難......

手風琴控制服務器更少的空間裝修的內容很多目的。 由於這是一個視覺的關注，這將是一個屏幕閱讀器的罰款簡單地讀取所有的內容，而忽略的事實，它是作為一個手風琴視覺顯示。 這是足夠的圖標，點擊展開面板。 可能有一個配置選項，使整個標籤，以擴大面板，或可以留到實施開發附加監聽到的標籤，呼籲公眾“開放”或“擴​​大”的功能，添加功能。

試想想，一個手風琴作為一個選項卡式視圖。 整個面板標籤區應該點擊，但如果它包含其他控件（如“罷免”或“關閉”按鈕），我認為只有標籤（文字），點擊，或至少clikable面積只擴大到互動對照組（即包含一個按鈕，上面的面積，下面的標題和“後”按鈕點擊）。

草案釋放模式

一位評論者質疑調查的人為限制（一個公平的警察，如果你問我）：

我不喜歡這個調查。 不夠靈活的問題。 作為一個設計師/開發人員，我相信所有的界面元素需要針對特定的網站或Web應用程序。 詢問黑色和白色的問題，不留房項目之間的明顯差異。 有些項目需要一個硬性規定，而同樣的規則可能是完全不為另一個應用程序。 在大多數情況下，我可以回答每一個問題，與“依賴”的結果。

放心模式只會輕輕建議和YUI的代碼將是靈活和強大。 該調查旨在限制人民的選擇，而是收集意見和喜好，所以即使不硬和快速規則的反饋是非常有用的。

我們已經發布了beta版本的雅虎設計模式庫中的手風琴模式 。 如果你想上的圖案，一種形式自由的方式，給予進一步的反饋，請刪除或訪問相關論壇討論。

找到的談話： bloglines technorati

共享和擴展： 書籤del.icio.us Digg它！ | reddit！