导航栏分析:iOS 与 Material Design的对比分析

   2016-11-22 0
核心提示:前阵师傅带着整理设计规范,结束项目后从规范角度去反思,会发现自己还有很多东西要学。交互设计师真的是一个很专业的职业(划重点!),虽然国内市场入门门槛低,但是要做出合理的方案是需要有专业的知识储备的。定义iOS:导航栏能够实现在应用不同信息层级

前阵师傅带着整理设计规范,结束项目后从规范角度去反思,会发现自己还有很多东西要学。交互设计师真的是一个很专业的职业(划重点!),虽然国内市场入门门槛低,但是要做出合理的方案是需要有专业的知识储备的。

导航栏分析:iOS 与 Material Design的对比分析

定义

iOS:导航栏能够实现在应用不同信息层级结构间的导航,有时候也可用于管理当前屏幕内容。

类型

1. iOS

(1)基础规范

导航栏分析:iOS 与 Material Design的对比分析

如图是ios系统导航的基础形式,其中text为上一级的标题,title为当前视图的标题,a代表操作控件。

ios10规范中提及:一般来说,导航栏上应该不多于以下三个元素:当前视图的标题、返回按钮和一个针对当前的操作控件。

在已下载的253个app(app来源于豌豆荚的设计奖,appso和最美应用的推荐,app store的编辑推荐等,),归纳了以下三种形式:

  1. 含三种元素
  2. 不含返回按钮
  3. 不含返回及标题

1)含三种元素

导航栏分析:iOS 与 Material Design的对比分析

大部分app没有显示上一级标题,右边的操作控件最多为2个。在使用体验上,只要保证两个控件之间距离符合规范,2个操作控件是可行的。

导航栏分析:iOS 与 Material Design的对比分析

2)不含返回按钮

导航栏分析:iOS 与 Material Design的对比分析

不含返回的一般为一级页,有一个特殊例子是mindnode在导航栏加了四个操作控件

导航栏分析:iOS 与 Material Design的对比分析

mindnode是一个思维导图app,主要功能是子级页的文稿编辑,主页的优先需求也是展示内容,所以把附加功能放置在导航栏是符合当前app的需求的。

3)不含返回及标题

导航栏分析:iOS 与 Material Design的对比分析

大部分app右边的操作控件一般不多余3个,操作控件多了以后会压缩icon尺寸,有悖于ios10的清晰原则,而day one journal的导航栏右边有4个按钮。

导航栏分析:iOS 与 Material Design的对比分析

day one是一个日记本app,可以看出它的用户群体定位是中深度用户,导航栏的操作控件都是新手用户很少使用到的,但是对于中深度用户来说是高频的便捷操作。可是也存在间距过小,容易误操作的问题。

(2)app应用

导航栏分析:iOS 与 Material Design的对比分析

如图是导航栏的应用形式之一,为标签与操作控件的结合。

在已下载的253个app,归纳了以下四种形式:

  1. 包含搜索框
  2. 包含标签
  3. 包含logo
  4. 包含分段控件

1)包含搜索框

导航栏分析:iOS 与 Material Design的对比分析

如图所示,操作控件加搜索框,多用于搜索需求优先级较高的页面。与搜索栏的区别是,搜索栏不包含管理当前页面的操作控件。

app中涉及的形式如下:

导航栏分析:iOS 与 Material Design的对比分析

2)包含标签

导航栏分析:iOS 与 Material Design的对比分析

如图所示,操作控件加多个标签,一般不多于3个,若多余三个可以考虑另设标签栏。

app中涉及的形式如下

导航栏分析:iOS 与 Material Design的对比分析

3)包含logo

导航栏分析:iOS 与 Material Design的对比分析

如图所示,logo加操作控件

app中涉及的形式如下:

导航栏分析:iOS 与 Material Design的对比分析

4)包含分段控件

导航栏分析:iOS 与 Material Design的对比分析

基本形式如图所示,logo加操作控件,ios规范里提及在导航栏中使用了分段控件,就不要再放标题以及其它多余控件,所以在使用分段控件时,左右两侧的操作按钮应越少越好。

app中涉及的形式如下:

导航栏分析:iOS 与 Material Design的对比分析

2. Material Design

(1)基础规范

导航栏分析:iOS 与 Material Design的对比分析

如图是Android导航的常见模式,抽屉导航及标签。

在已下载的68个app(app来源于豌豆荚设计奖),归纳了以下三种形式:

  1. 抽屉导航
  2. 标签
  3. 抽屉导航+标签

1)抽屉导航

导航栏分析:iOS 与 Material Design的对比分析

抽屉导航,其展开列表可以是一层也可以是多层级,但多层级大多运用在大屏幕上。

app涉及的形式如下:

导航栏分析:iOS 与 Material Design的对比分析

2)标签

导航栏分析:iOS 与 Material Design的对比分析

标签在安卓端也运用很多,其与ios的差别主要是视觉上的。

app涉及的形式如下:

导航栏分析:iOS 与 Material Design的对比分析

3)抽屉导航+标签

导航栏分析:iOS 与 Material Design的对比分析

多层级的导航模式,在material design规范中有举例,但在app中运用较少。

app涉及的形式如下:

导航栏分析:iOS 与 Material Design的对比分析

(2)app应用

导航栏分析:iOS 与 Material Design的对比分析

在安卓端的app中,发现大部分运用的是ios的设计语言,或者用的就是ios端的版本,这里就证明了交互设计是一个各种条件综合下的产物。

保留疑问查询网上资料及请教师傅,对于在安卓端还仍然运用ios设计语言的解答:

  1. 人力短缺,维护成本高。
  2. ios设计语言较早出现,比material design语言早,认可度较高,影响力较大。
  3. material design规范较粗略,规范更多的是视觉及动效。

注意事项

1. 规范性

规范性不是指一定完全照搬设计规范,而是要在符合规范的基础上可以做有利于用户使用的创新。没有遵照规范的创新可能连基本的可用性都达不到。

导航栏分析:iOS 与 Material Design的对比分析

微信的ios版和安卓版分别使用了各自平台的设计语言,ios版没有把搜索功能加在导航栏,而是通过下拉操作出现搜索栏,我猜测是考虑到一致性规范,这就是在规范之上的创新。

2. 一致性

一致性则是为了达到好用,尽可能让导航一致减少用户的学习成本。

导航栏分析:iOS 与 Material Design的对比分析

微信的ios版导航栏只有以上几种形式,规范起来算3种类型,用这种思路再去看市面上的app,就会发现有些app不是一个产品,只是多个页面的集合。

3. 创新性

在交互设计中,创新是很难做到的,挑战的是用户的使用习惯,面临的是新手引导的成本,但是只要能满足用户需求,并适合产品本身的就是好的创新。

导航栏分析:iOS 与 Material Design的对比分析

之前文章有分析过的vsco的导航,没有一点规范的痕迹,但是对于vsco来说,就是符合需求的导航。

写在结尾

本文基于两个平台的规范文档和现有app的应用对比两个平台的导航栏进行分析,有四个好处:

  1. 帮助自己打牢专业基础,这里分享Robert Hoekman.Jr和Jared Spool写的《网站设计解构》一书中关于标准与创新的解答:即使是最具创新的项目,可能也只占整个项目的20%,其余都是基于标准的支撑。
  2. 分析完所有控件,组件,视图等我就建立了一套自己的基础组件库,输出图时效率翻倍啊。
  3. 可以为大家提供一个学习交互设计的思路,一定要动起手来玩app并思考啊。打牢基础再去想创新吧~
  4. 可以证明自己具备专业基础,很多公司招聘交互设计师会提这样的要求,玩过100个app以上,了解并熟悉不同平台设计规范。这样的分析过程最起码可以证明以上两点。

作者:小静静,娱乐行业初级交互设计师,个人公众号:静静做设计呢(jingidesign)

本文由 @小静静 原创发布于人人都是产品经理。未经许可,禁止转载。

 
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • 我如何将Material Deisgn带入实际产品中
    我如何将Material Deisgn带入实际产品中
    最近,与上海的“谷歌开发者社区”(GDG)一起策划并与大家进行了一期关于Material Design在的话题分享会。这几天我抽空将当天分享的PPT内容再精简整理了一下,并在关键页面配上了对应的文字说明,便于分享给没有来得及到场及更多的朋友。我问过很多人这个问
  • Material Design让我打破的思维局限
    Material Design让我打破的思维局限
    这段时间为了研究控件,细看了一下 Material Design,结果发现了很多创新、好用又有趣的东西。如果你想看一看 Material Design 的译文或者控件目录,这样的资源想必你能搜到不少。所以,我就不再锦上添花了,这里主要写的是 Material Design 给我带来的打破思
  • Muse UI — Vue2.0 和 Material Design 结合
    Muse UI — Vue2.0 和 Material Design 结合
    Vue 2.0 发布以来,很多 vue 的开源项目都开始了升级计划,我也思考着 vue-carbon 的升级之路,9月开工,11月完工, Muse UI 闪亮登场。 先睹为快 Muse UI 主要用于移动端和一些对浏览器兼容性要求不高的桌面端应用,先上地址: https://github.com/museui/mus
  • Drawer 详解 ·Material Design Part 3
    Drawer 详解 ·Material Design Part 3
    这是一个系列文章,在这个系列里,我会按打造一个Material Design App的路线介绍所有应当掌握和值得掌握的系统组件。你会在这些文章里了解到这些组件的使用和内部实现原理,以及它们背后所反映的Material Design的设计思想,希望你会喜欢。往期回顾 Material
    11-13 安卓开发
  • Material Design
    Material Design
    经过一周的学习,整合梳理自己学到的知识,与大家分享以下是自己将Material Design中认为比较重要的知识点整合所得,有遗漏或者补充的欢迎大家指出,共同进步!!Material Design(材质设计)一、Material Design是什么?Material Design,中文名:原质化设计
  • Material Animations 4:Circular Reveal Animations
    Material Animations 4:Circular Reveal Anima
    Circular Reveal Animations,官方称之为循环揭露动画效果,是一种用来显示/隐藏一组UI界面元素的动画效果,它是在API 21引入的,对应的类是 ViewAnimationUtils 。 循环揭露动画效果可以和共享元素变换动画组合,用来创造一些有意义的动画效果,自然地告诉用
    10-13 安卓开发
  • Toolbar 详解 · Material Design Part 2
    Toolbar 详解 · Material Design Part 2
    这是一个系列文章,在这个系列里,我会按打造一个Material Design App的路线介绍所有应当掌握和值得掌握的系统组件。你会在这些文章里了解到这些组件的使用和内部实现原理,以及它们背后所反映的Material Design的设计思想,希望你会喜欢。往期回顾 Material
  • Material Design风格常用控件的使用与定制
    Material Design风格常用控件的使用与定制
    你是否还在使用selector来定制Button普通状态、按下状态的变化呢?你是否也想自己的Button有Material Design的阴影效果呢?你是否也想让各种控件轻松变换各种颜色风格呢?那么看完这篇分享,你就会有答案了。二、4种风格的Button 系统默认有4种风格的Button效
  • 「最美应用」解决通讯录头像难题
    「最美应用」解决通讯录头像难题
    让用户一个人去维护整个通讯录的头像更新十分不现实。一加推出的氢 OS 直戳用户痛点,自动用几何线条去匹配用户头像,使通讯录更倾向于 Material Design 风格,以与系统协调。当然短时间内,氢 OS 并没有匹配其他手机的意愿。 Micopi Pico 可以提供类似氢OS的
  • Material Animations 2:Shared Element Transition
    Material Animations 2:Shared Element Transi
    元素共享变换(shared element transition)决定了共享的view元素从一个Activity/Fragment 到另一个Activity/Fragment的切换中是如何动画变化的。 请记住,共享元素变换并不是真正实现了两个Activity或者Fragment之间元素的共享,界面还是两个不同界面,只不
    10-07 安卓开发
点击排行