欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

响应式网站页面导航设计

发布时间:2017:10:03 11:30:19 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1145个文字,预计阅读时间3分钟
导语
当越来越多周围的朋友使用iPhone,android手机或平板电脑,随着越来越多的人都在讨论新旧概念的主体意识,当我们一直秉承用户体验的第一个与网页设计完美结合,海淘科技也收集了响应设计

当越来越多周围的朋友使用iPhone,android手机或平板电脑,随着越来越多的人都在讨论新旧概念的主体意识,当我们一直秉承用户体验的第一个与网页设计完美结合,智唯网络也收集了响应设计理念和方法,今天与大家分享响应式导航的设计。

响应网页设计遵循导航的响应式设计理念,响应页面的设计和开发基于用户行为和环境(系统平台、屏幕尺寸、屏幕取向,等等)的反应,并相应地调整。同样的元素大小比例,调整页面布局和内容的结构的优化调整,允许用户在不同的平台上有一个独特的用户体验。这里解释是悬挂特效,flash在响应式流行年代已经不适用于移动设备。

一、情景定位

下面以三种有代表性的主流设备屏幕尺寸:Pc、iPad、iPhone做案例解析几种常见的导航设计。

1.简单智能的导航菜单形式

此款菜单适用于所有屏幕的一些设计,菜单扁平化,并且会留有一定的空白空间在不同的手机屏幕上做自适应的变化,一种简单的设计便可以轻松调整。

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


响应式网站页面导航设计

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


响应式网站页面导航设计

2.导航菜单列表形式

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

先来看单列形式的案例:Forefathers Group

响应式网站页面导航设计

两列形式:Travelorego


响应式网站页面导航设计

多行多列形式:Regent College


响应式网站页面导航设计

3.导航隐藏形式

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

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


响应式网站页面导航设计


响应式网站页面导航设计


响应式网站页面导航设计

国际标准化组织ISO网站在移动设备预览时也采用了隐藏菜单的形式,但展开的交互形式菜单栏出现在网站的底部。这样,吸引用户浏览头部和中间的内容,逼迫访客先浏览完网站后再决定下一步要做什么


响应式网站页面导航设计


响应式网站页面导航设计


响应式网站页面导航设计

4.下拉菜单形式

在第三种介绍中的隐藏菜单的两个案例里,同时也采用了下拉菜单的形式。使用下拉菜单来组织复杂内容是一个既快又流行又便捷的方式,复杂的网站甚至会使用多层次的下拉菜单。一个更小的屏幕上,依靠触觉反应设备,小心谨慎的下拉菜单。没有悬浮作用,屏幕资源可能非常有限。大部分时间采用默认的状态,导航菜单不显示,只有浏览用户点击制定的图标时,第一层的内容就会打开。当触摸其中一个列,第二层内容会逐渐扩大,给用户一个非常清楚明确的内容导航。

来参考下面一个案例:The Copper Tree。

响应式网站页面导航设计

下拉菜单的共同点是:默认隐藏菜单,如果用户认可并需要导航链接,点击图标菜单,选择菜单消失自动隐藏,在下次操作重复。这样设置的优势是内容不会影响其他页面。

二、设计原则

举了那么多案例,下面我们来看看在具体的设计中要遵循哪些原则?

佛山网站建设优化公司 智唯网络

专业建站,免费排名「快速上首页」5年建站优化经验

免费上首页>>马上咨询
专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:交互设计师和产品经理PK的一点心得

下一篇:响应式Web设计技术

  • 同行价格

    统一报价,无隐形消费

  • 金牌服务

    一对一专属顾问,7*24小时金牌服务

  • 售后无忧

    完善售后,客服经理全程跟进

建站优化二维码
建站优化二维码

截屏,微信识别二维码

微信号:13825575516

(点击微信号复制,添加好友)

优化二维码打开微信