说说抽屉式导航

Web端设计很多时候是在考虑如何将操作展示给用户,而mobile的设计更多的时候则是考虑如何将操作巧妙的隐藏起来。这种隐藏实际上是对">核心功能的一种突出。

导航始终是产品设计的重头戏,不管在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里,用户看新邮件的频率大于查看归档邮件的频率,因此抽屉里隐藏了邮件类型等操作,同时为了平衡发邮件的需求,在右下角单独留了一个入口;在快捷酒店管家里,用户的核心操作是通过地图寻找附近的快捷酒店,所以抽屉里隐藏了切换城市等其他操作…..

3月份的时候我曾在微博上说,这种导航方式会逐渐流行,推测的依据就是随着移动产品设计的演进,越来越多的产品设计师开始认识到只有让核心更突出才能提高整体产品的体验,只有不断降低用户的干扰才能不断提高用户的使用效率。

不适合抽屉式导航的App

需要用户不断在导航间进行切换的App、没必要有太多导航的App、或者核心功能就是一堆入口的App。

来源:http://www.ikent.me/blog/4138

时间: 2025-01-03 17:44:14

说说抽屉式导航的相关文章

有什么好的方案可以替代抽屉式导航?

  关于抽屉导航(三线icon/汉堡包菜单)的文章和讨论已经够多了.本文无意加入这些讨论,只是想寻找一种更好的替代方案,毕竟抽屉导航的缺陷早已成为公论 >>> 效率低下:交互有够麻烦的 导航性差:不知道自己在哪 塞满了各种乱七八糟的功能 先来看看有哪些常见的导航模式 在此之前我想先老生常谈一下:每一款产品都是为特定用户群体而设计的,你需要仔细琢磨用户的使用场景,一些方法兴许适合你,但对别人却未必. 1. Swarm和标签导航 在Swarm by Foursquare的1.0版本中,点击左

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

[编者按]本文转载自@kentzhu 的个人博客.导航是产品设计的重头戏,Web端设计的时候是在考虑如何将操作展示给用户,而Mobile的设计更多的时候则是考虑如何将操作巧妙的隐藏起来.但这种隐藏实际上是为了核心功能的突出. iOS导航模式基本都是基于iOS系统自身的一些模式,随着iOS新产品的不断出现,新的导航方式也随之更新.在这里,说一下"抽屉式"的导航方式. 当然,抽屉式导航是作者自己给这种导航方式取的名字,至于学名叫什么,小编也不知道.这种导航模式一般采用将导航主体隐藏在app

移动APP设计:优秀的APP导航设计形式

文章描述:导航的设计是 App 设计发展过程中很值得玩味的地方,由于移动设备特别是智能手机的屏幕尺寸有限,设计者们通常会将屏幕空间尽量留给主体内容,优秀的导航设计会让用户轻松到达目的地而又不会干扰和困惑用户. [导读]为了在手机屏幕给定的范围内展示出更多内容,优秀的导航栏设计将起到关键性作用,对于不同的操作也当因地制宜地选则不同的设计方案. 导航的设计是 App 设计发展过程中很值得玩味的地方,由于移动设备特别是智能手机的屏幕尺寸有限,设计者们通常会将屏幕空间尽量留给主体内容,优秀的导航设计会让

全方位科普移动端导航的七种设计模式

  看了很多总结导航的文章,其实都基本雷同,但是都觉得不够细致,也不是从我们常用的产品去分析的,因此用自己的思路重新分析了一遍,某些段落来自引用,比如拇指热区,某些来自我读过的文章,但大部分的分析来自我的原创.这篇文章应该说是站在巨人的肩膀上,自己的一些浅见. 任何APP的组织信息都需要以某种导航框架固定起来,就像是建筑工人拔地而起的高楼大厦一样,地基非常重要,之后你想要盖多少层楼.每层楼有多少间房,都在地基的基础上构成.而一个新的产品也是这样,合适的导航框架,决定了产品之后的延伸和扩展. 不同

APP导航交互设计解析

  首先,我们来看一下一个叫做原始导航的导航. 原始导航是一个最最粗糙的导航,通过纯文字的链接入口来导航.如下图: 把它定义为原始导航,是因为如今我们的移动APP导航都是在此基础上通过不断的演变来形成我们常见的APP导航模式. 一.标签导航(选项卡导航) 有了原始导航,你可能会说,原始导航这种入口的摆放方式太占空间了,就五个入口就占据了整个界面.有没有一种更加省空间的导航模式呢?当然有. 首先,我们将五个入口放到界面的下方,就会形成常见的底部标签导航. 目前这样的APP导航是最常见的. 通常,底

网站导航设计指南:如何做有吸引力的网站?

导航的功能是为了让用户更容易地找到需要的信息,可以对网站的信息架构和站内搜索进行分析和优化,也能对用户起到很好的引导作用.一个有吸引力的导航能够吸引用户去浏览更多的网站内容,增加用户在网站的停留时间.导航在网站设计中的地位举足轻重,它引导着用户进行浏览和查找,一个良好的导航系统能让用户在离开网站时感觉享受了一次愉快的旅程. 1. 顶部水平栏导航 顶部水平栏导航是当前两种最流行的网站导航菜单设计模式之一.它最常用于网站的主导航菜单,且通常地放在网站所有页面的网站头的直接上方或直接下方.顶部水平栏导

有哪些将侧边导航玩得特别出彩的网站

  导航的方式多样,今天着重聊聊侧边导航.如何在大小.形式.色彩以及排版方面将导航玩出不一样的姿态,来看高手的作品跟@AnyForWeb_UED 同学细致专业的分析 >>> 导航在网站设计中的重要性已经毋庸置疑,但重要不意味着它必须高调,安静与显眼兼具的导航才最符合用户的使用体验,而侧边导航恰巧同时满足了这两点.网站侧边导航的好坏与否很容易判断,主要取决于它的大小.形式.色彩和排版. 一般来说,侧边导航的宽度尺寸控制在内容部分宽度的三分之一左右; 主要表现形式有抽屉式导航.固定式侧边导航

侧边栏让网站导航一边玩儿去!

导航在网站设计中的重要性已经毋庸置疑,但重要不意味着它必须高调,安静与显眼兼具的导航才最符合用户的使用体验,而侧边导航恰巧同时满足了这两点.网站侧边导航的好坏与否很容易判断,主要取决于它的大小.形式.色彩和排版. 一般来说,侧边导航的宽度尺寸控制在内容部分宽度的三分之一左右; 主要表现形式有抽屉式导航.固定式侧边导航和隐藏式侧边导航等; 色彩上要与页面整体风格互相协调融合,避免过于亮眼的颜色.虽然导航应该显眼,但通过色彩来实现却不是一个好方法,通过排版.形式.字体等方式同样能达到目的; 侧边导航

TAB导航与侧边抽屉导航的巅峰对决

  编者按:本文作者Anthony Rose,是社交网络电台Zeebox的联合创始人及CTO,文章不仅分析了侧边栏导航和Tab导航的利弊,还有改版过程进行A/B test 的详尽过程,且最后也给了建议,读完能对这两种导航有清晰的认识,非常有价值的经验分享 :) ================正文分割线================ 设想你需要设计一个含有许多页面和模块,不能在一屏内显示完全的应用.你一定会首先想到去设计一个底部或顶部的Tab导航.等一下,多出来的一排导航看上去有点碍眼?我们尝