新闻中心> 文章详情

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

2015年06月01日

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

 

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

 

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

 

单页版面

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

上一篇下一篇
按时发顺丰

技术交流群

Java大数据交流群560819979    加入
Python技术交流群595083299    加入
Oracle技术交流群595119011    加入
Web前端技术交流群604697610    加入
Huawei技术交流群482919361    加入
Redhat技术交流群587875348    加入
UI设计技术交流群511649801    加入
Cisco技术交流群596886705    加入
IT运维技术交流群605888381    加入