当前位置: 皇家棋牌官网 > 摄影 > 正文

了解网页设计的需求,使用隐藏式菜单导航的网

时间:2019-09-28 04:10来源:摄影
每个网站都会有一个主要的网页菜单,用于引导用户浏览指定的栏目页面。以前我们的网站导航通常是横向(水平)的,但现在不同了,使用垂直的网页导航开始流行起来。 也就是汉堡图

每个网站都会有一个主要的网页菜单,用于引导用户浏览指定的栏目页面。以前我们的网站导航通常是横向(水平)的,但现在不同了,使用垂直的网页导航开始流行起来。

也就是汉堡图标,已经成为越来越多网页设计导航模块时的首选了。相比于传统的导航栏,隐藏式菜单导航在设计和用户体验上有着它独到的地方。作为一个随着移动端设计发展而崛起的网页设计元素,Navicon并没有减弱它引导用户的功能性,也没有丧失它作为基础网页组件的重要性,还为设计师和开发者提供了更大的创作空间。

网页中的header,一般我们称之为顶部导航栏,这里为了行文方便,以下都简称顶部栏。顶部栏对于一个网站的用户体验来说是至关重要的,因为根据用户的浏览习惯(从左到右,从上到下),当他们进入一个新的网站,顶部栏通常是他们最先看到的地方。我们都知道用户对于你产品的第一印象是很重要的,因为它会一直伴随接下来的使用过程,而且第一印象无法更改。
但是顶部栏却是我们网页设计的一个盲区,我们很少花心思的去研究它。因为我们觉得顶部栏无非是一个logo,几个文字链接堆砌起来作为菜单,着实没有什么需要注意的地方。但是事实上顶部栏网页设计的学问远不止这些。
顶部栏的内容
在进行顶部栏网页设计前,首先我们要确定的是应该要展示哪些内容。一般来说,顶部栏有以下一些内容:
1.品牌logo
2.菜单
3.搜索框
4.提示消息
5.登录/注册
6.联系方式
7.语言切换
8.其他产品或者移动端app的下载链接
9.行为召唤链接(我要投稿,我要发博)
以上这些都是顶部栏中常见的元素,在网页设计的时候我们要根据产品自身的实际情况进行取舍,毕竟这些信息全部放上去也不太现实。信息过度加载会增加用户的使用负担,注意力会被分散。
汉堡包按钮
取舍当然意味着既有“保留”也有“舍弃”,但是UI网页设计中的“舍弃”更多的是指“隐藏”——隐藏一些次要的功能。
在隐藏的同时,我们也希望当用户需要的时候,这些隐藏的功能可以随时随地的呈现出来。汉堡按钮可以帮助我们实现这一点。常见的汉堡按钮是由三条水平线条构成的,很像两层面包一层肉的汉堡包,所以我们形象的称之为汉堡按钮。
汉堡按钮可以通过将一些次要的信息隐藏来释放页面的空间,这样使顶部栏更加的清爽简洁,用户的注意力可以更好的集中在那些重要的信息上。
汉堡按钮在页面导航网页设计中使用的很频繁,用户对此很熟悉,所以不会额外增加用户的学习成本。汉堡按钮网页设计最需要注意的地方就是它很容易被用户忽视,所以我们在网页设计的时候要通过配色,尺寸,留白的使用来将其适当的凸显出来。一句话来说,汉堡按钮既要做到清晰展示,又不能占据太大的空间。
双层菜单
双层菜单的样式在近来的顶部栏网页设计中也愈发受到网页设计师的青睐。因为随着产品功能的不断增加与完善,渐渐出现了一些单层菜单无法解决的情况,那就是顶部栏需要展示的内容过多,而且某些特定功能不属于同一层级。为了更好的应对这类情况,网页设计师们创造性的使用双层菜单这种样式。
以上面的网站为例,上层的菜单有社交网络的链接(Facebook,Instagram和Twitter),企业logo,搜索框,购物车和汉堡按钮。下层的菜单有产品种类,营业网点地址,新闻,关于我们和联系我们。在这种情况下,如果将这些信息以传统的单行菜单展示,势必会放不下,造成顶部栏的过度拥挤。
此外双层菜单这种网页设计样式很新潮,可以给用户耳目一新的感觉。
文字和配色
我们在确定顶部栏上内容和展示方式后要考虑的是网页设计风格。产品的网页设计风格要立足于产品自身的定位,这个就意味着网页设计师的工作不应该仅限于视觉呈现还要懂产品。
一般来说,顶部栏的网页设计风格由配色、文字和图标来构成。因为这是顶部栏上最主要的三个元素,图标的使用相对较少,最常见的是下拉箭头和放大镜图标。
首先来说配色,配色主要是指背景色。通常来说,不要给顶部栏添加过重的背景色,选择浅色或者直接白色。因为颜色过重会造成用户注意力的分散。此外顶部栏下方是banner,我们在进行banner网页设计时候会考虑banner配色和页面整体风格是否搭配。如果顶部栏的颜色过重会制约banner的网页设计,如果是白色和浅色就没有这种顾虑了。当然这也不是绝对的,有些网站顶部栏采用深色同样很好看,有些网站的顶部栏直接是透明,跟页面内容融为一体。
再说文字,大部分用户不会一个字一个字去读页面中的信息,他们是“扫描”式阅读。所以顶部栏上的文字网页设计首要考虑的是可读性,要让用户在短时间内就可以获取这些信息。所以我们的文字要做到能够从背景中凸显出来,必要的时候可以加粗字体样式。
固定型顶部栏
固定顶部栏代表着另一种网页设计思路:无论用户进行何种操作,顶部栏对用户来说都是可见的。这类的顶部栏适用于页面内容比较多,需要用户不断下拉滑动的网站。
这种交互模式可以很好的提升顶部栏的易用性,但是这是建立在牺牲一部分页面空间的基础上换来的,所以我们在使用的时候一定要谨慎。
极简风格
在上面我一直强调顶部栏网页设计要简洁明了,要让用户一眼就能看明白。因为顶部栏属于导航体系的一部分,是为了避免用户迷路,帮助他们更好的使用产品。归根结底用户使用你的产品是为了你提供的内容或服务,而不是来看狂拽酷炫的顶部栏。所以我们不能本末倒置,将顶部栏做的过于花哨,进而分散用户的注意力。
此外极简风格很适合响应式网页设计,可以在多设备上追求一致的用户体验。
简约网页设计的另一大优点就是,网页设计​师会经常遇到临时的迭代需求,领导突然让你在这里加一个按钮那里加一个文字标签,简约网页设计为这种突然的迭代需求提供了操作空间。
总结
网页设计师的工作不应该仅限于视觉呈现,还应该考虑交互原则,注重产品的用户体验。一款产品的功能性和美观性是相辅相成的,光做视觉的网页设计师的作品也无法令用户的眼睛满意。希望这篇文章可以给你带来收获。

为了激发你在网页设计中获得网页菜单的制作灵感,这次我们整理了国外一些漂亮的创新的垂直网页菜单设计例子,有的在左边,有的加上滑动效果动画,有的在右上角点击展开菜单等等,希望这些能给你带来好的设计帮助,Enjoy!

如何正确使用Navicon取决于项目的实际状况,相对保守的站点可能不会考虑这个选择,而不少追求时尚简约、多平台体验统一的新兴网站可能会更加青睐Navicon,因为作为导航接口的它小巧而讨喜,轻松配合大图和时尚的网页设计,并且隐藏起复杂的、零碎的导航内容菜单。

BAD ASSEMBLY

Navicon很单调么?并非如此。借助额外的打开过程动效和抓人眼球的细节效果,Navicon拥有非常大的提升空间和设计可能性以及良好的用户体验。更重要的是,它适用于各类导航:不仅可以清楚的传达信息,而且有助于解决响应速度方面的问题,并且能够促进网页在多平台设计上的统一。

皇家棋牌官网 1

接下来,我们通过一系列的网页设计,来深入了解Navicon和隐藏式菜单导航的魅力。

Bad Assembly, 是一家数字广告设计机构,整个网站的设计非常有特色,设计师特意使用了触屏式设计,只有Logo和菜单是可以点击的,使用体验也很好。因为是单页网站,也许是为了让用户直接向下观看,不想太多干扰,设计师把菜单直接隐藏起来,当用户点击时,菜单以流畅的动画形式展示,想法十分不错。所以全屏式的网页设计可以考虑像Bad Assembly的方式来制作,我想用户看了后会很有新鲜感。

eWebDesign

浏览网站

皇家棋牌官网 2

GOOGLE VENTURES

大图背景和视差特效强化了网站视觉,Navicon菜单按钮在右上角,点击打开你会看到一个设计非常细致的导航菜单。

皇家棋牌官网 3

Sampedro

Google Ventures 这个网站我很喜欢,整体梦幻般的干净、简洁,网站所有图片、文字、布局等排版非常成功,看上去十分舒适。

皇家棋牌官网 4

网页菜单导航使用左侧固定形式,图标类似iOS 7外描边风格,图标较大,但不显得笨重,整体菜单反而有优雅的感觉。当你点击其它页面,菜单会自动缩起来,把文字隐藏,只剩下图标,当你把鼠标移到菜单的时候就会慢慢滑动出来,这个想法也是挺有意思的。

时尚的照片放置与网页的页头,配合着时髦的Slogan吸引着用户全部的吸引力。隐藏的导航栏是个理想的解决方案,它让用户将注意力从复杂的导航转移到内容上。

浏览网站

Chapoleone

KICK POINT

皇家棋牌官网 5

皇家棋牌官网 6

细腻而对称的图片背景让网页拥有着别样的美感,如果加上导航栏会破坏这样的美感,所以设计师将Navicon放在左上角。符合习惯,安静自然。

Kick Point, 一家数字营销网站,菜单默认隐藏起来并且使用fixed方式固定在右上角,展示和第一个例子差不多,点击展示,用手机访问的时候也是一样效果,看来这种设计比较流行……

Maecia

网站整体配色很喜欢,首页的内容不多,排版简约,推荐大家看看它的服务页,当我们向下浮动网页的时候,网页背景会自动变色!有空可以看看这种实现方式,引用到你新的设计项目上。

皇家棋牌官网 7

浏览网站

文字与帅气的视频背景融为一体,底部动态的箭头指引用户向下浏览,常驻右上角的Navicon借助黑白强对比彰显存在感,不影响视觉,也不会从你视野中消失。当鼠标移上去的时候,黑底会变成红色。

DATAVEYES

We are Empire

皇家棋牌官网 8

皇家棋牌官网 9

Dataveyes 网站使用了视差滚动,菜单设计比较丰富多彩,主要是运用了扁平化设计配色方案,所以配色很好看啊。

经典的色彩和简约的设计可见设计师的别出心裁,隐藏式的菜单栏令整个页面保持安静。即使鼠标移动上去的时候,动效也非常柔和,黑色变为红色,底部的短横缓慢伸长,动静之间,味道悠长。

浏览网站

Brand Junkie

JONATHAN DA COSTA

皇家棋牌官网 10

皇家棋牌官网 11

华丽的圆形复古图章占据了页面中央,前景后景对比强烈。右上角的Navicon融入度高,但是相应的,用户也不容易发现。

Jonathan 的个人网站,他是一位设计师兼总监,整个网站设计也是Very的简约,好喜欢啊…… 空间排版掌握得很好。Jonathan的网站菜单设计算是横向加侧栏式展示,这种方式用于个人网站还是不错的。

Intelart

浏览网站

皇家棋牌官网 12

ARBOUR

虽然网站整体呈现暗色调,但是前景后景之间的对比度颇为理想。Navicon和网页整体风格相互呼应,点击之后可以看到复杂的导航。

皇家棋牌官网 13

Monograph

Arbour 是一家餐饮美食网站,餐厅除了食物好吃外,还有个主要的就是清洁卫生。这个美食网站的菜单设计就十分优雅和简约了。

皇家棋牌官网 14

浏览网站

和普通的汉堡图标不一样,Monograph的Navicon是参考网页的风格单独定制的,稍有不同但是一眼可以看出来。位置优越,使用便捷,风格统一。

PAULINE OSMOT

Camp David Film

皇家棋牌官网 15

皇家棋牌官网 16

Pauline Osmont 是法国的插画家,当你点击这个网站菜单后,内容展示的交互效果做得很好,流畅、优雅,当然你不要用过时的IE浏览器去浏览哦……

虽然网页在头部使用了相对传统的导航,但是设计团队巧妙地使用了文本替代按钮,并且将其他的部分隐藏在Navicon之后,这样的分段式导航兼顾到了不同用户的需求,呈现了一部分重要的内容,还兼顾到了漂亮的背景和视觉的统一。

浏览网站

Michael Villeneuve

JASON JAMES

皇家棋牌官网 17

皇家棋牌官网 18

Michael Villeneuve采用了更为简约的设计,漂亮的线框图标和文字结合在一起,在深色背景下对比明显。左上角的Navicon也是如此。

这个网站菜单看起来比较容易忽略,但当你滑动网页的时候,我想你就会发现右上角还有个东东在的……

Exit Film

浏览网站

皇家棋牌官网 19

MAMMOTH MEDIA

网站集中式的内容布置非常独特,对称的布局使网页看起来非常整齐。Navicon没有置于顶部,而是在左边中央位置。

皇家棋牌官网 20

La Ligne Rouge

Mammoth Medias 网站的响应式网页设计做得很好,非常难得,什么时候我也这么细节就好了,菜单采用侧边栏方式,还加了个浅色的暗淡的背景,与首页对应。

皇家棋牌官网 21

浏览网站

在这里,Navicon的作用是补充设计并强化网站特色。菜单按钮和中间的曲棍球图标保持样式上的一致性,确保了识别性又保留了网页的性格。

Flirty HTML网站模板

Xander

皇家棋牌官网 22

皇家棋牌官网 23

Flirty 是一个单页的HTML模板,价格非常使用,但却拥有流行的网页技术,喜欢的可以 点击这里 购买使用,只需要$11美元哦,网站整体设计简洁,排版也非常不错,用来作为个人网站或作品集展示够用了。

如画的照片,雅致的字体,隐藏式菜单果然是首选。

浏览网站

了解网页设计的需求,使用隐藏式菜单导航的网页设计欣赏。Tannbach

总结垂直菜单确实给我们带来一些新鲜感,但我觉得它比较适合创意类的设计工作室、企业网站或个人博客网站,如果用于大型的门户网站、电子商务网站侧要考虑清楚再设计。

皇家棋牌官网 24

好了这些创新的垂直网页菜单设计后,你现在有没有灵感了呢?去掉以往的水平菜单设计,尝鲜垂直式的网页菜单,给国内的用户来点新鲜感吧!如果你有更好的设计例子,欢迎在下方留言处分享给大家,感谢阅读。

主流的设计固然不错,别出机杼的设计更能令人难忘。Tannbach的导航菜单使用了下拉式的面板,不缺乏互动性,也足够精致。

Cofa Media

皇家棋牌官网 25

网页使用视频背景展现了机构的工作流程,点击Navicon之后,导航菜单会占据整个屏幕,这和移动端的设计高度一致,值得参考学习哦皇家棋牌官网,~

Alt_Cph14

皇家棋牌官网 26

Alt_Cph14 所使用的蓝色绝对令你印象深刻,它的灵感应该是来自于早期的数字界面设计。在这种色调之下,Navicon清晰而明显。

Ball&Claw

皇家棋牌官网 27

Ball&Claw 网站使用精致的排版和优雅的配色方案营造雅致的氛围,Navicon与整个氛围相得益彰。

Hooch Creative

皇家棋牌官网 28

去掉传统的导航栏之后整个页面清爽了起来,亮色调的网站名称,大字体标题,两者以不同的方式吸引用户注意,而Navicon则在右上角平衡了网页的视觉。

Sam Dallyn

皇家棋牌官网 29

作为产品展示类的网页,Sam Dallyn这个网站的页面布局非常出色,精致、复杂,但又泾渭分明。微小的Navicon在左侧无干扰地常驻,如果你真的需要借助导航来做什么的话,也不难找到。

The First 50 Years of Bose

皇家棋牌官网 30

整个网页被设计师从中间一分为二,鼠标移动到某一侧的时候,中间的隔线会移动到另一侧,激活所在区域,借助动效和声音吸引你。常驻右侧的Navicon与其他功能构成了侧边栏,便于操作。

Demodern

皇家棋牌官网 31

黑色底的Navicon 在浅色底背景上看起来颇为显眼。点击Navicon会呈现出黑色底的导航内容,菜单出现时候的动效具有令人难忘的几何质感。

结语

Navicon和许多不同类型的网站都能完美的适配,这中间可选择的余地非常之大,你所需要的是仔细的分析的大胆的想象。

编辑:摄影 本文来源:了解网页设计的需求,使用隐藏式菜单导航的网

关键词: 皇家棋牌官网