响应式页面导航四大设计

来源:eidea编辑:xie浏览量:505
1. 简单智能的导航菜单形式

此款菜单适用于所有屏幕的一些设计,菜单扁平化,留有足够空间在各个不同的屏幕上做响应式的变化,一种简单的设计便可以轻松调整。

先来看下面这款非常简单色块的导航,采用了由网页文字链变到移动设备的按钮形式,规避了移动设备操作不精准等一些弊端。

另一种常见的右侧导航设计在很多网站中应用,在移动设备上,导航横向排列不变,Logo和导航由一行变为两行,页面简洁清晰且用户体验一致。


2. 导航菜单列表形式

最常用的一种排列形式,横向导航在小屏幕下变为纵向排列,一列、两列甚至是多列多行的形式,具体应实际情况而定。


3. 导航隐藏形式

在手机设备上导航的另一种形式以隐藏列表的方式呈现,是对空间的有效利用,突出高优先级内容的处理方式。

来看下Microsoft的下拉隐藏菜单,通过设定图标点击对菜单做收缩或展开。经典、简约的布局完美适合平台转换。




4 .下拉菜单形式

使用下拉菜单来组织复杂内容是一个非常方便和流行的方式,复 杂的网站甚至会使用多层次的下拉菜单。在较小的屏幕上,在依赖触摸反应的设备上,下拉菜单要慎用。这里没有悬浮效果,屏幕资源可能非常有限。默认情况下, 导航菜单根本就不显示,只有当触摸到右上角指定的小图标时,第一个内容层才会打开。当触摸到其中一个栏目时,第二个内容层才会逐渐展开,给用户一个非常清 晰明了的内容导航。



响应式案例欣赏

万家乐

知名品牌响应式企业官网

新大陆支付

响应式企业官网

古色服饰

知名品牌响应式企业官网