So Cool！電商網頁設計最佳實踐：手風琴介面

「手風琴」在你腦中馬上想到李炳輝？這跟網頁設計有什麼關係呢？其實在網頁設計中的手風琴，所指的可能是你網頁中的可以摺疊的「選單」、「小工具」或是任何可擴展的內容區塊。這樣的介面隨著JavaScript和jQuery的流行在近年越來越火紅。

手風琴(折疊式)介面的火紅，是因為他允許開發人員將大量的內容塞進頁面中的一個小空間中。這些內容的顯示需要在頁面之間做動態的切換──這有利也有弊。而這篇文章，主旨就在於列出有關手風琴界面設計中的重要概念和主題，我將以一系列的例子涵蓋。當然，除了摺疊式介面，也可試著透過推薦的框架將整個網站更改。

為何使用摺疊式手風琴介面？

我喜歡把手風琴視為內容管理工具。當你有一個頁面，頁面被分成幾十個段落、鏈結、圖像，或眾多的內容區塊，手風琴介面將成為頁面的救星！

雖然並不是每個網站都需要一個摺疊式選單，但仍無法忽視這個概念。摺疊式選單的目的是透過動態切換，來管理過多的內容。基於不同的版面配置，每個介面產生的功用亦不相同。

手風琴介面最大的考量因素是：使用者的瀏覽器並不支援JavaScript。而在過去十年中越來越多使用者正在升級電腦，進而使問題數目降至相當低。這意味著你幾乎不必再擔心，因為現在即使是行動裝置的瀏覽器也都支援JavaScript。

當使用手風琴介面時產生哪些問題呢？

請確保每個摺疊組件的存在都要有真正的目的。在有些情況，例如常見問題頁面中，若使用摺疊式介面將內容縮起來，要迫使我點開每個問題，這樣的使用者體驗並不比直接列出來好。

何時才是使用手風琴介面的良機呢？

當有較大量的選單或想表現更簡潔的擴展區塊，以上可能是子標題或甚至多層次的標題。重點在於，要在內容組織上，比不止盡的滑鼠滾動來的簡單。以下介紹幾種常見手風琴介面的運用：

滑動選單效果

在你經驗中，其中一個最常見的介面：滑動選單效果。這通常是一選單，將子標題垂直隱藏起來。當點擊主鏈結，將會以一個滑動動畫展開子鏈結列表。有時一個網站整個導航選單，建立在這種摺疊效果上。

看看這個Designmodo教學，這對這了解摺疊選單一個很好的教程。請注意打開一個新的部分時，選單將自動關閉，因為只有一個主選單是在任何特定時間打開的。當然這不是強制性的，實際上，大多數的手風琴選單允許每個部分是展開的，如何選擇取決於網站本身以及內容如何表現。

CSS3標籤內容

利用標籤工具，這是摺疊式內容的另一個例子，不必垂直列出的鏈接，而是用標籤來管理移動內容。這是內容管理的另一種很受歡迎的方法，因為用JavaScript，讓撰寫過程超級簡單。因為大多數開發人員都已經熟悉JavaScript，我想以更進階的技術來作為例子。

替代JavaScript是使用CSS3的手風琴介面。當然支援CSS3的瀏覽器比JS少得多，但好處是，CSS3並不需要太多的代碼，並提供動畫的簡單方法。若你喜歡現代的CSS3動畫看看下面的免費教學。

例子中使用者可同時選擇打開多個項目，利用這種複選框(Checkbox)，可以同時打開不同的內容。當然也可使用單選按鈕(RadioButton)打開一個新的部分時關閉的部分。如何選擇，一樣取決於網站本身以及內容如何表現。

滑動組合

頁面內容透過變動網頁進行簡單方便的使用，使用者在頁面中透過延長的單頁設計，快速預覽不同內容，不須再跳轉至太多其他頁面。

圖庫

與滑動組合相似，是一可摺疊的圖庫。根據手風琴式風格的介面設計，可以採取很多種形式，垂直、水平、滑動或是標籤等。

這個例子這是透過CSS3製作的手風琴式圖庫。這效果真的非常驚豔。每張圖片被賦予標題文字。

這例子則以jQuery，來建設一個響應式手風琴圖庫。這例子所有動畫透過jQuery處理，另外，需要強調的是，任何例子中的效果都可交互運用，來達到更適合的效果。

我的觀點是要證明，CSS3和JavaScript皆可以被用來製作這些效果。然而較多舊版本瀏覽器不支持CSS3動畫，使用JavaScript仍是最安全的選擇。但隨著越來越多的人升級他們的網路瀏覽器，我們可以看到CSS3成為主流的未來。

免費程式碼

我想透過以下一系列免費程式碼作結，也展現出手風琴式內容在選單、問題詢問頁面、小工具等任何地方的有用之處。

你可以隨時拾起一個免費程式碼，試著使用，更改並重新構建。當然也可以選擇一切從頭開始打造。但是，如果時間是一個考慮因素，那麼我強烈建議試試這先範例，以確保更大的兼容性和更快的開發進度。以下是各類手風琴介面示範

3D Accordion

Material List

Animated Accordion

CSS3 Dark UI

Full-Width Content

Multi-Level Accordion

Responsive Content 

Dope Accordion Menu

Horizontal Radios

BEM Accordion

Blue Accordion

延伸閱讀：電商網頁設計不求人：編輯神器 Sublime Text

原文出處：授權轉載自合作媒體 人育資訊

嚴禁抄襲，若欲轉載，敬請註明出處「SmartM」並附上原文連結。

歡迎各大媒體交換文章連結。

圖片來源：主圖、縮圖:人育資訊

加入SmartM粉絲團，更多電商訊息等你關注 https://www.facebook.com/smartm.tw