网页设计导航栏怎么做

2017-08-09南风未起18 的分享

  我们这次要讲的是网页中的header,一般我们称之为顶部导航栏,这里为了行文方便,以下都简称顶部栏。当进入一个新的网站,顶部栏通常是最先看到的地方,因此顶部栏尤为重要。

网页设计导航栏怎么做   三联

  但是顶部栏却是我们设计的一个盲区,我们很少花心思的去研究它。因为我们觉得顶部栏无非是一个logo,几个文字链接堆砌起来作为菜单,着实没有什么需要注意的地方。但是事实上顶部栏设计的学问远不止这些。

  顶部栏的内容

  在进行顶部栏设计前,首先我们要确定的是应该要展示哪些内容。一般来说,顶部栏有以下一些内容:

  品牌logo

  菜单

  搜索框

  提示消息

  登录/注册

  联系方式

  语言切换

  其他产品或者移动端app的下载链接

  行为召唤链接(我要投稿,我要发博)

  以上这些都是顶部栏中常见的元素,在设计的时候我们要根据产品自身的实际情况进行取舍,毕竟这些信息全部放上去也不太现实。信息过度加载会增加用户的使用负担,注意力会被分散。

  汉堡包按钮

  取舍当然意味着既有“保留”也有“舍弃”,但是UI设计中的“舍弃”更多的是指“隐藏”——隐藏一些次要的功能。

  在隐藏的同时,我们也希望当用户需要的时候,这些隐藏的功能可以随时随地的呈现出来。汉堡按钮可以帮助我们实现这一点。常见的汉堡按钮是由三条水平线条构成的,很像两层面包一层肉的汉堡包,所以我们形象的称之为汉堡按钮。

  (ps:汉堡按钮最初是由国外设计师最先使用并命名,如果是中国设计师发明了它,没准就叫肉夹馍按钮了。)

  汉堡按钮可以通过将一些次要的信息隐藏来释放页面的空间,这样使顶部栏更加的清爽简洁,用户的注意力可以更好的集中在那些重要的信息上。

  汉堡按钮在页面导航设计中使用的很频繁,用户对此很熟悉,所以不会额外增加用户的学习成本。汉堡按钮设计最需要注意的地方就是它很容易被用户忽视,所以我们在设计的时候要通过配色,尺寸,留白的使用来将其适当的凸显出来。一句话来说,汉堡按钮既要做到清晰展示,又不能占据太大的空间。

  双层菜单

  双层菜单的样式在近来的顶部栏设计中也愈发受到设计师的青睐。因为现在随着产品功能的不断增加与完善,渐渐出现了一些单层菜单无法解决的情况,那就是顶部栏需要展示的内容过多,而且某些特定功能不属于同一层级。为了更好的应对这类情况,设计师们创造性的使用双层菜单这种样式。

  以上面的网站为例,上层的菜单有社交网络的链接(Facebook,Instagram和Twitter),企业logo,搜索框,购物车和汉堡按钮。下层的菜单有产品种类,营业网点地址,新闻,关于我们和联系我们。在这种情况下,如果将这些信息以传统的单行菜单展示,势必会放不下,造成顶部栏的过度拥挤。

TA发布的帖子

593

收藏

589

好文推荐

  •   1. 蒙牛: 3D音乐 特别的奶特时光  听,让3D音乐与极致美味一起,带您走进特别的奶特时光。  http://www.mnnaite.com/static/  2.Adidas NEO Label 冬 ...

  •   这些美食博客主题,配备了您需要的食物的强大特色功能,旅游甚至是时尚博客。 不仅配有定制食谱卡,还集有营养数据框和信息的步骤与照片,他们是非常灵活, ...

  •   游戏网站的设计要求比一般网站要求要高,设计必需细致,突出画面视觉效果,很多优秀的游戏网站可能要经过手绘、后期处理并且制作极击冲击力的视频,这些都需 ...