網頁設計 收合式選單
圖片來源:CNN.com

Problem

當大量資訊必須擠在有限畫面上時,如果這些資訊同時顯示出來時,可能會造成閱讀上的困擾。

Solution

以手風琴般收合的動作,在畫面上隱藏主要內容,當使用者點選標題時,才將內容展開。

Why

收合式選單適用在有大量內容的選單中,可將內容隱藏起來,只留下標題。

How

直式的收合式選單與橫式的收合式選單各有不同的運用方式。

直式的收合式選單:
一次只能打開一個選單。點選其中一個標題選單時,展開其下的區塊內容。區塊內容有可能是次選單、說明文或圖片。

Examples

網頁介面 直式選單收合

直式選單收合 (圖片來源:kksou.com )

 

直式圖文收合

直式圖文收合 (圖片來源:ytcvn.com )

 

網頁設計 橫式圖文收合選單

圖文收合式選單 (圖片來源:vtem.net )

 

網頁設計 圖片收合式選單

圖文收合式選單 (圖片來源:joommasters.com)

 

網頁設計 圖片收合式選單

圖片收合式選單 (圖片來源:cmsjunkie.com)

 

網頁設計 複合式收合選單

複合式收合選單 (圖片來源:pixelpointcreative.com)

 

References

ABOUT CADIIS

CADIIS凱士網頁設計公司專精於RWD網頁設計、形象網站設計、企業網站建置等各項網頁設計服務,提供台北、台中、台南、高雄、海外等地網站設計相關服務。

 

進一步了解