UI设计

ios和material design导航方式的一些思考

作者:口袋使者 2016-10-26 我要评论

直接进入正题。 ios导航相对来说是比较有限的,可以使用导航栏,然后通过左边的返回按钮回到上一层。也可以使用标签栏,在不同标签之间切换,然后还有分段控件,...

直接进入正题。

ios导航相对来说是比较有限的,可以使用导航栏,然后通过左边的返回按钮回到上一层。也可以使用标签栏,在不同标签之间切换,然后还有分段控件,对内容进行分类,最后就是home键,直接回到桌面。当然,这里讲的是系统层面上的,一些软件可以加上自己的一些导航方式,比如手势,比如侧边栏。

material design中则丰富得多,同样有导航栏,有标签栏,只不过名称和使用细节上不同。然后没有分段控件,但是多了物理的返回键和菜单键。另外,ios中的标签在material design中称为底部导航栏,而标签则表示用于内容组织上的一个控件。还有一个比较常用的侧边栏。

先来看看侧边栏,ios设计规范中并没有提及,为什么?
侧边栏的优势是显而易见的,腾出更多的页面空间,让用户更专注于内容本身,同时一定程度上保证了在不同内容之间切换的速度。缺点则是侧边栏内的项目曝光率低,对于一些新功能,或者需要推广的内容来说是不利的。
而ios设计规范的一开始就提到了三大原则,清晰、遵从、深度,表明其是以内容为核心,不需要多余的装饰,那么侧边栏或许是一个不错的选择,因为内容可以得到足够的关注。

但深入考虑之后发现,侧边栏除了曝光率上的缺点之外,还有一个就是信息架构上的问题。首先因为侧边栏的入口占据了返回键的位置,那么两者就只能选其一。在架构相对扁平的应用上,可以比较方便地在侧边栏中进行切换,此时侧边栏与底部的标签栏功能上的差别则不大。但是在层级比较深的应用中,导航栏左边的位置需要放置返回按钮,此时则不能快速地使用侧边栏进行切换。
于是我们可以看到,这和三大原则中的深度有点关系。ios不像material design那样从现实世界中借用了大量的比喻,而是采用深度的概念加上适当的变换动效来表示信息的层级。这样侧边栏的优势就不是很突出,同时侧边栏的物理隐喻并不太适合ios的整体感觉。

举个例子,apple music,在安卓上是使用侧边栏,在ios上是使用标签栏。其实某种程度上来说,ios上的标签栏就相当于material design上的侧边栏。因为ios的标签栏其实并没有严格限制个数,标签可以多个,超过屏幕范围是会包含进一个“更多”的标签下,点击“更多”会弹出一个页面进行选择,是不是感觉和侧边栏有点类似。

接着讲讲分段控件。
在ios中,分段控件是用来信息分类。material design中并没有提到这个,但是有标签。

ps:ios中,底部的导航栏称为“tab bars”,material design中,底部的导航栏称为“bottom navigation”,上部的标签称为“tabs”

这两个某种程度上来说是对应的,同样是用于对信息的分类。但是分段控件由于空间的限制,也和其本身的特性有关,数量上并不能太多。而标签则不同,数量不限,甚至可以滚动。

最后是关于material design中的底部导航栏,刚加入的时候不少人说是直接抄袭ios的。但不管怎么说,底部导航栏是必要的。前面也讲到了,某些情况下,底部导航栏的优势是侧边栏所不具有的。而且,一个最直接的原因是将某些模块放置在底部导航栏中,可以获得比侧边栏多得多的点击数。不过使用的时候就要注意,控制在3到5个之间,material design中并没有“更多”可以用来包含多余的标签。而且导航栏中的内容应该是最顶部的最重要的,不像侧边栏,什么都可以往里面放。

当然,实际使用中并不是所有软件都会遵循平台设计规范,有一些为了保证软件在不同平台上有相同体验,会尽可能保持两者的一致。所以以上的思考也只是限于设计规范中的内容。另外,平时比较少使用ios,所以一些地方理解不是很深,如有错漏,欢迎指正。



阅读原文 本文来自:口袋知识网 news.papocket.com

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 没灵感?这里是最全的15个设计风格总结

    没灵感?这里是最全的15个设计风格总结

  • 没灵感?这里是最全的15个设计风格总结

    没灵感?这里是最全的15个设计风格总结

  • 淘宝刚发布的新版本,可能会引领2017年

    淘宝刚发布的新版本,可能会引领2017年

  • 学会这个教程,可以把任何一张人物照都

    学会这个教程,可以把任何一张人物照都