抽屉式导航的设计更能让用户专注于核心的功能

所属分类: 网页制作 / CSS 阅读数: 1951
收藏 0 赞 0 分享
抽屉式导航 让用户专注于核心的功能  脚本之家
  导航是产品设计的重头戏,Web端设计的时候是在考虑如何将操作展示给用户,而Mobile的设计更多的时候则是考虑如何将操作巧妙的隐藏起来。但这种隐藏实际上是为了核心功能的突出。
  iOS导航模式基本都是基于iOS系统自身的一些模式,随着iOS新产品的不断出现,新的导航方式也随之更新。在这里,说一下“抽屉式”的导航方式。
  当然,抽屉式导航是作者自己给这种导航方式取的名字,至于学名叫什么,小编也不知道。这种导航模式一般采用将导航主体隐藏在app侧边的方式,以一个按钮来呼出导航,在使用完成之后在使用相同的按钮隐藏起来。一拉一缩,从形象上与抽屉类似,于是就这样称呼他。
  根据不完全的考证,这种导航方式始于Facebook。在最早的Facebook App中,一直采用了比较保守的九宫格导航方式,随着FB的发展,这种很重的导航方式会导致用户Timeline的展示被很大程度上弱化,虽然FB也曾尝试在用户进入App的时候直接进入Timeline而不是这个九宫格导航。
  但是,显然这种优化还不是足够好。于是,在2011年11月左右,FB发布了新的iOS和android客户端,其中一个重要的变化就是导航模式的变化,推出了新的抽屉式的导航,同时强化了对Timeline的展示。
  FB推出这种新的导航模式不久,Gmail的iOS版本同样采用了这种导航模式,再之后path 2.0版本也采用了这种抽屉式导航并将其演变到极致。至此,这种抽屉式的导航模式迅速窜红与iOS产品设计中。
  简单的定义
  一般控制抽屉的把手出现在App的左上角,以按钮的形式出现,点击按钮之后抽屉被拉开,按钮被拉到App的右上角,左侧区域被拉开(抽屉)后显示出导航内容。
  导航的内容可以是以列表形式展示的常规2级导航,也可以将一些非常用的快捷操作入口直接放进来,如FB的搜索。具体形式如下图
  当然,这种抽屉也存在一些变种,目前以Path和Sparrow较为突出。Path不仅将主导航作为一种抽屉,同时底部的操作按钮也是一种变种的抽屉;而Sparrow则增加了抽屉的层级,在一级抽屉被打开之后还可以再继续拉开一层抽屉。另外,米途订酒店则将全部的酒店预订过程化作一种抽屉,也是一种很不错的形式。
  另外,对于一些需要用到消息提醒的应用,抽屉的出现会给消息的展示带来新的麻烦,因此,很多的抽屉导航会将消息展示在Title区域里,以一个入口的形式来展示。典型的如Facebook、快捷酒店管家。
  抽屉导航的核心思路
  抽屉式导航的核心思路是“隐藏”。隐藏非核心的操作与功能,让用户更专注于核心的功能操作上去。个人认为,隐藏的思维是移动产品设计中最核心的一个思想。上周在极客公园分享了关于如何应用缩小、隐藏、赋加的思路来做移动产品设计的话题,而这个思路中最最核心的恰恰是隐藏。
  Facebook中,用户核心的操作是阅读Timline,所以抽屉里隐藏了所有其他的操作;Path中,用户的核心操作还是看好友的 Timeline,所以抽屉里隐藏了其他的操作,同时UGC的操作又必不可少,因此Path在左下角也用了一个抽屉;在Sparrow里,用户看新邮件的频率大于查看归档邮件的频率,因此抽屉里隐藏了邮件类型等操作,同时为了平衡发邮件的需求,在右下角单独留了一个入口;在快捷酒店管家里,用户的核心操作是通过地图寻找附近的快捷酒店,所以抽屉里隐藏了切换城市等其他操作……
  这种导航方式会逐渐流行,推测的依据就是随着移动产品设计的演进,越来越多的产品设计师开始认识到只有让核心更突出才能提高整体产品的体验,只有不断降低用户的干扰才能不断提高用户的使用效率。
  而不适合抽屉式导航的App则有
  需要用户不断在导航间进行切换的App、没必要有太多导航的App、或者核心功能就是一堆入口的App。
更多精彩内容其他人还在看

CSS配合JavaScript做酷的动态页面效果

  利用CSS配合JavaScript的可以做很多更酷的动态页面效果,在本教程的最后给大家简单介绍一下CSS配合JS的应用。首先,要搞清楚事件和动作的概念。在客户端脚本中,JavaScript 通过对事件进行响应来获得与用户的交互。例如,当用户单击一个按钮或者在某段文字上移动鼠标
收藏 0 赞 0 分享

WEB标准,Web前端开发工程师必备技术列表

  想要打造并拥有一流的Web产品开发团队,在团队成员基础能力上一定要下功夫。对于Web前端产品开发来说,仅仅掌握Web1.0时代简单的"网页套接"是完全不够的。我结合自己的团队配备,特此罗列了Web前端产品工程师所涉及的技能列表如下:   通过许多实际项目,
收藏 0 赞 0 分享

用CSS制作Alpha滤镜测试板

alpha滤镜给制作网页特效提供了较大的创作空间,但由于它控制参数较多,在实际应用时,为了确定一组合适的参数值,不得不反复调整修改,在编辑窗口和预览窗口来回倒腾,甚是麻烦,本文介绍了一种简单的方法。制作一个“Alpha滤镜参数测试板”,在测试板上输入参数
收藏 0 赞 0 分享

非常流行的所谓的气泡窗口

普通的Alt无法自定义风格,而Sweet Titles通过JS脚本与CSS的集合.自定义了这种伪Alt风格. 前一段时间非常流行的,就所谓的气泡窗口(鼠标移到链接处出现的). 我们这里实现的用的是Sweet Titles的插件.显示效果完全由CSS控制.. 先下载Sweet Ti
收藏 0 赞 0 分享

CSS教程:li和ul标签用法举例

LI代码的格式化: A).运用CSS格式化列表符: ul li{ list-style-type:none; } B).如果你想将列表符换成图像,则: ul li{ list-style-type:none; list-style-image: url(/blog/images/
收藏 0 赞 0 分享

CSS教程:CSS中的定位(position)

  使用CSS来定位页面内层的位置,一直是比较难以掌握的事情,很多时候,往往被绝对定位的元素,总是以浏览器的左上角为坐标原点,此时,如果浏览器的大小改变,被定义的层就会偏离设计想要的位置,让人很挠头。   其实,要想控制好层的绝对定位,只要理解CSS中关于定位
收藏 0 赞 0 分享

CSS教程:盒模型(BOX Model)

  如果想熟练掌握DIV和CSS的布局方法,首先要对盒模型有足够的了解。每个HTML元素都可以看作一个装了东西的盒子,盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其他盒子之间,还有边界(margin),如图1所示。
收藏 0 赞 0 分享

无延迟翻滚的图形与CSS混合风格按钮

  在一个具有图形背景的按钮中添加CSS风格的文本,这种建立按钮的方法结合了具有CSS翻滚(CSS rollover)标记的开发速度和效率,从而有效地提高按钮外表图像的三维效果。   相比于常规的图形按钮,这些图形/CSS混合按钮可易于建立和载入,因为你只需要为空白按钮外面
收藏 0 赞 0 分享

css里expression实现界面对象的批量控制

用过css样式我们就知道, 可以定义一批对象的class属性来指定同一个样式来统一界面. 但如何统一同类型的对象的事件? 比如:界面有无数个 <img src="**.jpg"> 如何实现鼠标经过此图片, 图片的src变成是**_over.jpg?
收藏 0 赞 0 分享

CSS教程:水平对齐(text-align)

  水平对齐(text-align),用以设定元素内文本的水平对齐方式。   1.语法   text-align具体参数如下: 语法:text-align:left|right|center|justify 说明:设定元素内文本的水平对齐方式。 参数:left:左
收藏 0 赞 0 分享
查看更多