南京UI设计培训 网站设计垂直选单列表如何呈现

无论在网页设计中是新手或老手，垂直选单列表都是一个值得讨论的话题。垂直的选单设计似乎破坏了设计的基本规则，但实际上却经常有令人惊艳的运用。

小编将JakeRocheleau 文章中整理出拥有垂直选单列表的网站例子，提出一些建议，希望你能从中获得超越这些网站的力量。南京UI设计培训

当然并不是每个网站都需要这样的设计，也可以看看五个网页设计建议，来增加网站吸引力！

单页版面

每个网页都需有个导航选单，帮助用户导向内容。单页版面可说是最灵活的，因为不需一箩筐的连结，也不需要大量的下拉选单和滑动面板。南京UI设计培训

Jorge Rigabert是很棒的网站范例。网站以大胆的用色，切割区块来代表呈现不同的讯息，同时左侧的垂直选单永远在你的鼠标滚轮滚动时跟随在旁边，十分方便。

Silly Poems是另一个很棒的单页网站范例，使用更具创意的设计风格，同时享受许多图形分散在整个页面。但是网站内容紧凑，垂直的选单在手机上是否需要不同的呈现方式呢？并没有绝对的答案。

不是所有网站都是单页版面，庆幸的是有许多其他方法建构一个垂直选单列表。有时网页设计师仍会选择随滚动的选单，这在无论垂直或水平的选单列表都是一种流行。但在许多情况下，垂直选单仍只是简单放置在页面上方并与表头(header)和平相处。例如下面范例：南京UI设计培训

麦当劳的垂直选单列表设计是，当鼠标停留在链接，选单气泡就会出现在一旁。这与水平下拉选单相似，但不常见的原因是选单气泡需要大量的空间。事实上，在行动版中就是改以水平呈现。

Power tothe Poster也是很好的例子，这是一个海报零售网站，这样的选单摆设与背景相当和谐。

使用垂直选单列表，真的需要将讯息凝聚在一个较小的区块，这通常关系着调整字体和去除某些页面元素。记住！设计垂直选单列表时保持「简单和易于辨识」。

Web Designer Wall使用粉红色的网页，并使用非常小的图标配以华丽的文字，最令人惊艳的是在「BLOG」特别呈现的弹出选单。因为尺寸和相对位置，使此垂直选单显得精美。南京UI设计培训

ParachuteClothing的首页使用类似的垂直选单列表并加入图标，图标不仅帮助是别，也增加了网页的设计感。

人们越来越习惯以行动装置浏览网站，使得响应式蔚为流行。

Kick Point在计算机版和行动版都采用滑动选单，依屏幕大小呈现固定比例。点开才固定呈现在右侧，显得更为简洁，而Bad Assembly是一个非常类似的例子。

对于这样的一个网站，利用隐藏式滑动选单是有意义的。在任何装置上页面都可更快速加载并且感觉更活泼。

以上每一个例子都可证明垂直选单列表在设计得宜下，如何得令人惊艳。虽然不是每个网站可从这样的设计中受益。但是我们在设计上，可以尽量试着尝试，并不要认为只有水平才是最好，往往最出人意料的设计最能吸引人，不是吗？