当前位置 > 主页 > 万和大讲堂 >


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

2015-06-09 11:27

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

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

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

单页版面

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

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

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

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

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

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

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

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

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

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

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

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

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


最近开班 more>
  • Python基础班
  • Java全栈开发
  • 前端基础班
  • 软件测试
  • 云原生精英班
  • 云网预科班
  • CISP
  • HCIE-Datacom(HCIA,HCIP基础)
  • HCIP-Datacom(HCIA基础)
  • HCIA-Datacom(0基础)
  • HCIE-Datacom(HCIA,HCIP基础)
  • HCIP-Datacom(HCIA基础)
  • HCIA-Datacom(0基础)
  • OCM 12C
  • OCP 19C
  • RHCE 9.0
  • 随时开课
  • 12月26日
  • 随时开课
  • 12月4日
  • 12月16日
  • 12月9日
  • 12月21日
  • 1月6日
  • 12月30日
  • 12月16日
  • 12月21日
  • 12月7日
  • 12月7日
  • ——
  • 随时开课
  • 12月16日
    • 姓 名 :
    • 电 话 :
    • 课 程 :

技术交流群

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