文档章节

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

王尘宇
 王尘宇
发布于 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
9K
11
如果你在找 CSS 学习资源,那就收藏这篇文章

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

伯乐在线
2014/11/07
0
0
37个超级棒的 jQuery菜单插件

导航是网站设计最重要的元素之一。一个优秀的导航菜单要简洁易用,方便用户。而用 jQuery 菜单插件制作出来的动态导航则能很好的满足这一点。jQuery 是一个轻量级的 JavaScript 框架,兼容 ...

墙头草
2012/03/22
18.1K
11
从Web到WAP移植的设计原则

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

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

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

yykj
2013/07/03
5.2K
16

没有更多内容

加载失败,请刷新页面

加载更多

注解

今日学习目标 : 能够使用Junit进行单元测试 能够说出注解的作用 能够使用JDK提供的3个注解 能够根据基本语法编写自定义注解实现类 能够了解自定义注解解析 能够了解元注解使用 能够根据上课案...

码农屌丝
8分钟前
1
0
configure: error: xml2-config not found. Please check your libxml2 installation

安装php时的报错 checking libxml2 install dir... no checking for xml2-config path... configure: error: xml2-config not found. Please check your libxml2 installation. 检查是否安装......

bengozhong
11分钟前
0
0
Java8 new Time Api

Java8 new Time Api JAVA8之前Date/Times Api的问题 线程安全问题 Api 不易理解 Api 转换复杂 1. Main class LocalDate LocalTime LocalDateTime ZonedDateTime Period Duration LocalDate ......

Kenny100120
13分钟前
0
0
403. Frog Jump

Description Tag:Dynamic Programming Difficulty:Hard A frog is crossing a river. The river is divided into x units and at each unit there may or may not exist a stone. The fro......

52iSilence7
14分钟前
0
0
nginx+php+swoole安装记录

领了台阿里服务器1vCPU 1G,做下测试研究。 系统 centos7,使用yum安装。 Nginx yum install nginx##开启nginxservice nginx start 安装php72 安装前确定下系统是否有安装php,有请卸载:...

WalkingSun
18分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部