• 创意论道
  • 最新加盟
  • 行业动态
  • 视频制作
  • 网站建设
  • 品牌设计
  • 响应式导航的规划形式有哪几类?

    发布时间:2015.02.13 浏览:1852

    在大屏幕上,导航置顶或导航居左是两种典型的规划形式,然而,这两种形式在小屏幕上却遭受应战。在呼应式规划日渐盛行的今日(译者注:正本已经盛行了好几年了),咱们更有必要重新审视关于小屏幕环境下的导航规划形式。这些经过移动设备拜访的页面导航,有必要既方便用户疾速拜访,又不能过于突出。

    以下,我列出了 7 种多见的呼应式导航的规划形式,它们分别是:

    1. 置顶(或“任其自然”)

    2. 页脚锚点

    3. 菜单挑选

    4. 开关

    5. 侧滑

    6. 置底

    7. 彻底躲藏

    上述每种规划形式都各有利弊,咱们在挑选导航规划方案时,需求根据项目的实际状况作出判别。

    置顶(或“任其自然”)

    将导航置顶或让导航随规划恣意活动(任其自然)是一种最简略的导航完成方法。正是因为这种易于完成的方法,它也变成了当下很多呼应式页面的“标配”。

    长处

    易于完成:在大屏幕和小屏幕上的完成方法共同不依靠 JavaScript:这样就最大程度上保证了兼容性无需打破原有 CSS 款式无需打乱内容正本的次序:这种方法保证了它是完彻底全的流体规划,无需一丁点的人为干涉

    缺陷

    占用空间:高度疑问在移动端是中心疑问。Luke 在自个的书中表达的网站建设“内容优先,导航其次”是典型的移动端页面体会。咱们都希望用户可以以最快的速度获取内容,这久意味着咱们需求移除导航以保证用户重视的焦点一向保持在中心信息上。而当导航高度过大,致使屏幕内的中心信息无法展现的时分,就会致运用户的疑问。如下图,当咱们翻开一个页面时,全部屏幕都被导航占有,用户无法获取有用信息。 ![置顶导航在小屏幕上主动折行显现][2] 扩展性差:当你的导航刚好在一行内展现时,若要再添加章节的时分会呈现什么状况呢?如果客户俄然需求再添加一个名为“商品和效劳”的导航类目呢?或许将导航标题翻译成其他言语后致使字符长度的改变呢?这些状况都会破坏原有的规划方案。粗手指:导航全挤在一同,粗手指心急如焚,怎样点也点不到自个想要拜访的导航链,这样就添加了误操作的几率(不合适小屏幕上经过手指进行点击操作)跨设备的疑问:不一样设备渲染的方法各异,在 iPhone 上很棒的页面或许在其它渠道上体现得很糟糕。 ![不一样设备上渲染的区别]

    页脚锚点

    在页面头部只保存一个去底部的锚点,将导航放在页脚是一种讨巧的做法。它节省了头部名贵的空间,一起又满意了拜访导航的需求。

    长处:简略完成:页眉锚点,导航置底,没有比这更简略的了!–不依靠 JavaScript:这意味着更少的测验和更好的浏览器支撑 CSS 改动小:因为选用了绝对或固定方位,将底部导航移到大屏幕的顶部几乎太简略了

    缺陷:用户利诱:疾速跳转至页脚这一动作简略让用户利诱缺少高雅:这样说很古怪(译者也有同感),但我(作者)以为相似开关的交互方法更性感一些。这种选用锚点跳转的方法尽管有用,但不高雅,对比那些经过精心规划的移动端运用的交互方法而言过分粗糙。

    菜单挑选

    将导航收纳在一个挑选菜单的控件傍边是一个不错的方法。它避免了导航置顶所占用的屏幕空间。

    长处:

    腾出了满足的空间:一个挑选菜单不管是在横向或纵向上都特别省空间契合用户习气:对比置底的方法,用户更习气导航被放置在页面头部简略辨认:下拉菜单的控件款式非常显眼,及其简略发现支撑本地化的交互方法:因为选用规范控件,使得操作非常本地化,这种本地化是指对设备本身特点的支撑,比方,在触摸设备上可以经过点击操作,而在轨迹球上支撑翻滚操作;

    缺陷:

    款式不一致:不一样浏览器会呈现不一样款式的下拉菜单也许会让用户利诱:大多数用户只在填写表单时才会看见下拉菜单,而将下拉菜单用作导航,担心用户一会儿无法了解下拉菜单内容的处理方法对比古怪:因为在下拉菜单中,子项目会主动缩进,这样尽管可用,但从视觉上看非常紊乱;也许会依靠浏览器调用 JavaScript

    开关

    开关的完成方法相似页脚锚点,但不是点击跳转至页脚,而是点击后将菜单区域滑动翻开。相同也是对比简略完成的规划形式。

    长处:

    易于了解:相较于页脚锚点俄然间的跳转,开关这种是方位不变的交互方法更简略让用户接受交互更高雅(对比跳转而言)拓展性强:你仅有要做的即是在PC端躲藏开关,在恰当的断点处显现它,这全部的全部都能经过 CSS 来完成。

    缺陷:

    动画也许不行滑润:Android 关于动画的支撑一向欠好,因而,也许得到你想要的作用非常依靠 JavaScript:正因为翻开开关的动画需求 JavaScript 来完成,所以它的兼容性不太好(作者的黑莓设备就不支撑);

    侧滑是在 Facebook 的大力推广下盛行起来的。之所以叫抽屉源于它的交互动效,当点击菜单按钮后,导航模块会像抽屉一样从页面边缘滑动呈现。

    长处:

    空间富余:因为从边缘滑出,这些内容被了解为在底层或屏幕外的无限区域内美观:简练即是美,并且动画作用冷艳。

    缺陷:

    小众:与其他简略的规划形式比起来,从旁边面滑动翻开导航栏的作用需求若干杂乱的动画来完成,这样就将一些低端设备挡在门口。因而,如果你的项目是面向群众而规划的,需求谨慎。适配性欠好:这种形式仅合适移动设备,在大屏幕上的体现并欠好(也没有必要)。也许存在利诱:当我(作者)首次看到 Facebook 选用这种规划时,我还以为页面出错了呢!在屏幕右侧显露一些信息关于我自己而言仍是很古怪的(纯属作者自己观点)

    只在页脚放置导航

    只在页脚放置导航和页脚锚点相似,仅仅它不在页眉放置锚点。这种形式的理念是内容优先、导航其次。这种方法需求用户将页面滑动至底部才干看见导航

    长处:简略完成兼容性(无需 JavaScriptCSS 改动小:因为选用了绝对或固定方位,将底部导航移到大屏幕的顶部几乎太简略了

    缺陷:难以发现:不管在大屏或小屏上都很难发现页脚会有导航;难以运用:移动端用户需求不断翻滚页面至底部,才干运用页脚导航,非常不便

    彻底躲藏

    将导航躲藏,得到最大化的空间。

    这种规划形式遵从了该规律:不要赏罚那些经过移动端拜访你网站的用户。移动端用户究竟想得到或不想要哪些信息仍旧是个谜。移动端用户会做任何桌面端用户都会做的工作,因而,仅关于移动端用户供给某些中心功用是很有必要的。

    长处:屌爆了

    完满的利用有限的屏幕空间

    关于移动端设备有很大优势,只用向下滑动就能检查更多。

    缺陷:去掉了关于移动端用户的中心功用或内容将连接或内容躲藏的做法并欠好。呼应式的鼓吹者以为这种做法会致使移动端页面与桌面端构成内容上的区别,以及体会上的灾祸。

    添加页面额外的开支运用指令 display:none 仅能在页面上躲藏该元素。页面的代码、图像或别的文件依旧在后台下载,这终究致使了页面拜访缓慢。

    难以保护两个彻底别离的导航体系将变成后期保护时的担负。

    也许存在利诱移动端用户向下滑动页面来改写列表时,并不会意识到当我(作者)首次看到 Facebook 选用这种规划时,我还以为页面出错了呢!在屏幕右侧显露一些信息关于我自己而言仍是很古怪的(纯属作者自己观点)

    结语

    移动导航就像你真实的兄弟一样:互相需求,但又给互相空间;而那些假装跟你很要好的兄弟老是在你需求的时分不见(当你需求导航的时分找不到)或许占有你的自己空间而让你抓狂;因而,关于呼应式导航进行规划,需求在拜访的便携性和空间上做一个平衡。


    TAG:企业官网制作
    本文由专注于 品牌设计 20年的东八区编写,原创不易,转载请注明出处:http://www.dongbaqu.com

    品牌策略

    品牌设计

    视频制作

    活动策划

    PARTNER

    合作伙伴
  • Copyright © 2006 东八区品牌创意 All Rights Reserved     鲁ICP备13031932号-1     鲁公网安备 37020302370328号
    电话咨询 网络咨询
    立即与东八区项目顾问通话
    4000-117-087
    • 提供您的电话号码,东八区项目顾问将致电联系您。
    • 等待时间:5分钟以内

    信息保护中请放心填写