文档章节

在网页中设计导航菜单的三个原则(附案例)

王尘宇
 王尘宇
发布于 2017/09/07 00:04
字数 557
阅读 2
收藏 0
导航菜单可能是网页设计中最重要的部分了。每个用户浏览网站时一定有所需,因此导航菜单能够帮助用户寻找信息。好的导航菜单像是导游,告诉用户网站是干什么的,内容分类有哪些,在哪里可以找到什么信息。 而且导航栏也是整体布局的重要组成。 总结一下,导航栏的重要性。   1. 浏览完Logo后,导航栏是用户第一个看到的组件。 2. 导航栏的作用是引导用户。 3. 导航栏的作用也类似于索引,快速帮助用户找到所需信息。   想让导航栏更加优雅、美丽、响应式么?看看导航栏设计的三大要点吧!

1) 别再让导航胖下去了,给导航减个肥

导航菜单重要性不言而喻。一些设计师往往使用一些繁杂的装饰来做突出。其实大可不必,通过字体、悬停效果、留白可以设计出简约、优雅的极简主义风格导航栏,看看下面的案例。

Design Instruct

  minimal navigation bar  

Sugar Rush

  Clean Navigation Bar Design  

Mmminimal

  Minimal Navigation Bar  

AD60

  Clean Navigation Menu Example  

Rhythm

  Clean navigation menu  

2) 如果有能力,为什么不试试来做响应式设计

设备种类越来越多,如何满足大部分用户的阅读需求?这就必须要使用 响应式设计了。根据屏幕尺寸来合理缩放页面,达到更好的阅读效果,这里是一些案例。

Inspire Conference

  responsive web design example  

Forefathers Group

  responsive navigation menu  

These Are Things

  responsive navigation bar examples  

Ryan O’Rourke

  navigation menu should be responsive in html5  

Stephen Caver

  responsive navigation menu example  

3) 合理放置导航,出现在该出现的地方

将导航放置何处,以何种方式展现,这都是不容忽视的,无论是水平布局还是垂直布局,都要尽量满足用户使用习惯。水平式导航菜单的好处是明显,清晰可见,大家都会知道导航条在上方,而且不是那么占据空间。而垂直的导航菜单可以兼容不同的屏幕尺寸。
  • 避免奇怪的布局
  • HTML标记要简单
  • 保持简约
  • CSS设置样式
原文地址: designzzz

© 著作权归作者所有

共有 人打赏支持
王尘宇
粉丝 1
博文 450
码字总数 469557
作品 0
西安
私信 提问
超过 25 个极好的响应菜单解决方案

关于响应式的网站设计讨论越来越火热,以至于人们总是质问你为何不使用响应式的方法来设计你的网页。 而响应式设计最难的一部分是创建导航菜单,支持大的屏幕和小的屏幕,支持包括电脑浏览器...

oschina
2013/11/10
9.1K
11
应用于网站导航中的 15 个 jQuery 插件

当考虑到网页设计时,导航被认为是使网页以用户友好方式展现的一个重要部分。在现代的交互网站中,导航起着至关重要的作用,如果没有正确地处理会影响你网站的访问。适当的导航工具能够帮助用...

oschina
2013/10/15
9.6K
26
如果你在找 CSS 学习资源,那就收藏这篇文章

本文由伯乐在线 -伯小乐 翻译。未经许可,禁止转载! 英文出处:Grace Smith。欢迎加入翻译组。 如果你在寻找一些 CSS 基础和高级的指南或资源,那这篇文章应该有你要的 CSS 初级和高级指南:...

伯乐在线
2014/11/07
0
0
从Web到WAP移植的设计原则

从Web端直接移植为WAP2.0形式,突出的矛盾是信息架构不适应小屏幕设备,垂直页面的冗长和WAP2.0表现形式的限制。 提升小屏幕浏览的体验,在设计中应包含以下几个核心任务: 控制信息的维度 ...

小编辑
2010/07/22
383
5
8 款极具表现力的jQuery/CSS3网页菜单

上一篇我向大家分享了7款效果震憾的HTML5应用组件,今天主要来分享一下CSS3网页菜单,因为在一个网站中,菜单起着举足轻重的作用,所以作为WEB开发人员,我们有必要将网站的菜单设计得尽量完...

yykj
2013/07/03
5.4K
16

没有更多内容

加载失败,请刷新页面

加载更多

(荷兰)彼得·冯·门施著:博物馆学研究的目的

博物馆学研究的目的 (荷)彼得·冯·门施 尽管诸多关于博物馆学认知目的的不同看法可以被归纳为数个主要群体,但没有一个群体可以被称为“学派”。一般来说,学派是由于博物馆学研究目的的不...

乔老哥
6分钟前
0
0
Vue slot的用法

之前看官方文档,由于自己理解的偏差,不知道slot是干嘛的,看到小标题,使用Slot分发内容,就以为 是要往下派发内容。然后就没有理解插槽的概念。其实说白了,使用slot就是先圈一块地,将来...

peakedness丶
18分钟前
1
0
解析如何用爬虫程序批量采集梨视频数据

本文介绍如何使用爬虫程序免费采集梨视频拍客的视频标题、链接、简介等信息。 采集字段: 视频标题 视频链接 点赞数 视频时长 发布时间 拍客 拍客链接 视频简介 标签 功能点目录: 如何对采集...

技术阿飞
24分钟前
2
0
《阿里铁军》的读书笔记和读后感范文2600字

《阿里铁军》的读书笔记和读后感范文2600字: 在中国互联网,有一个流传很广的说法是,百度强在技术,腾讯强在产品,阿里强在运营。虽然发展到今天,已经不能再用这样简单的视角来看待这三个...

原创小博客
52分钟前
5
0
怎样实际项目中运用责任链模式

1 模式概要 1.1 简介 责任链模式为请求创建一个接收者对象链,每个接收者都包含对另一个接收者的引用,如果一个对象不能处理该请求,那么它会把请求传给下一个接收者,依此类推 责任链模式避...

小刀爱编程
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部