網站設計大學問：垂直選單列表如何呈現

無論在網頁設計中是新手或老手，垂直選單列表都是一個值得討論的話題。垂直的選單設計似乎破壞了設計的基本規則，但實際上卻經常有令人驚豔的運用。

人育資訊將Jake Rocheleau 文章中整理出擁有垂直選單列表的網站例子，提出一些建議，希望你能從中獲得超越這些網站的力量。

當然並不是每個網站都需要這樣的設計，也可以看看五個網頁設計建議，來增加網站吸引力！

單頁版面

每個網頁都需有個導航選單，幫助使用者導向內容。單頁版面可說是最靈活的，因為不需一籮筐的連結，也不需要大量的下拉選單和滑動面板。

Jorge Rigabert 是很棒的網站範例。網站以大膽的用色，切割區塊來代表呈現不同的訊息，同時左側的垂直選單永遠在你的滑鼠滾輪滾動時跟隨在旁邊，十分方便。

Silly Poems是另一個很棒的單頁網站範例，使用更具創意的設計風格，同時享受許多圖形分散在整個頁面。但是網站內容緊湊，垂直的選單在手機上是否需要不同的呈現方式呢？並沒有絕對的答案。

單欄選單

不是所有網站都是單頁版面，慶幸的是有許多其他方法建構一個垂直選單列表。有時設計師仍會選擇隨滾動的選單，這在無論垂直或水平的選單列表都是一種流行。但在許多情況下，垂直選單仍只是簡單放置在頁面上方並與表頭(header)和平相處。例如下面範例：

麥當勞的垂直選單列表設計是，當滑鼠停留在連結，選單氣泡就會出現在一旁。這與水平下拉選單相似，但不常見的原因是選單氣泡需要大量的空間。事實上，在行動版中就是改以水平呈現。

Power to the Poster也是很好的例子，這是一個海報零售網站，這樣的選單擺設與背景相當和諧。

小而簡選單

使用垂直選單列表，真的需要將訊息凝聚在一個較小的區塊，這通常關係著調整字體和去除某些頁面元素。記住！設計垂直選單列表時保持「簡單和易於辨識」。

Web Designer Wall使用粉紅色的網頁，並使用非常小的圖標配以華麗的文字，最令人驚豔的是在「BLOG」特別呈現的彈出選單。因為尺寸和相對位置，使此垂直選單顯得精美。

Parachute Clothing的首頁使用類似的垂直選單列表並加入圖標，圖標不僅幫助是別，也增加了網頁的設計感。

隱藏式滑動選單

人們越來越習慣以行動裝置瀏覽網站，使得響應式蔚為流行。

Kick Point在電腦版和行動版都採用滑動選單，依螢幕大小呈現固定比例。點開才固定呈現在右側，顯得更為簡潔，而Bad Assembly是一個非常類似的例子。

對於這樣的一個網站，利用隱藏式滑動選單是有意義的。在任何裝置上頁面都可更快速載入並且感覺更活潑。

以上每一個例子都可證明垂直選單列表在設計得宜下，如何得令人驚艷。雖然不是每個網站可從這樣的設計中受益。但是我們在設計上，可以盡量試著嘗試，並不要認為只有水平才是最好，往往最出人意料的設計最能吸引人，不是嗎？

延伸閱讀：做到這7點，製作出留住客戶的影片

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

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

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

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

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