• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > 抽屉式导航的设计更能让用户专注于核心的功能

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

作者:@kentzhu 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含抽屉式导航,专注于核心的功能等相关知识,@kentzhu 希望在学习及工作中可以帮助到您
抽屉式导航 让用户专注于核心的功能  微课江湖
  导航是产品设计的重头戏,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。

您可能想查找下面的文章:

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

相关文章

  • 2017-08-06利用CSS生成精美细线Table表格无需复杂style代码
  • 2017-08-06CSS权重关系及问题剖析
  • 2017-08-06Firefox下input button内文字不能垂直居中的解决方法
  • 2017-08-06CSS布局之圣杯布局与双飞翼布局
  • 2017-08-06彻底掌握CSS中的percentage百分比值使用
  • 2017-08-06纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
  • 2017-08-06HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
  • 2017-08-06css之自动换行实现代码
  • 2017-08-06CSS position:absolute全面了解
  • 2017-08-06css在不同浏览器中的唯一标识以height属性为例

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • CSS代码使纯英文数字自动换行的简单实现
    • padding盒子内部文字跟盒子之间的距离
    • CSS教程之div垂直居中的多种方法
    • 用CSS3将你的设计带入下个高度
    • CSS中display:block的作用介绍
    • 高度导致IE6中两个DIV有3px空隙问题_margin-right/left可解决
    • CSS学习之二 选择器
    • 浅谈css清除浮动(clearfix和clear)的用法
    • IE bug input 外层浮动的边距问题
    • 一个小脚本HTC文件补丁让 IE6, 7和 8支持CSS3

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有