iOS和Android规范解析——标签导航和分段控件

从今天开始,将介绍iOS和Android设计规范中关于导航的部分。今天要介绍的两个控件,经常容易混淆以至于用错。请各位读者仔细阅读,防止以后用错。


从今天开始,将介绍iOS和Android设计规范中关于导航的部分。今天要介绍的两个控件,经常容易混淆以至于用错。请各位读者仔细阅读,防止以后用错。

iOS和Android规范解析——标签导航和分段控件

Material Design Guidelines

标签(tabs)使内容在一个较高的层级被组织起来。一般,一个标签里需要展示与该标签相关的内容。标签的名字需要清楚地描述该标签里所包含的内容。

信息架构

标签导航一般用于从一个比较高的层级来组织信息,呈现出提纲挈领的效果。例如,使用标签呈现报纸的不同版面。不要使用标签导航来呈现不同页码的页面(就像搜索结果页中的第1页,第2页那种页面),也不要把标签的切换设计成可循环的样式(即,在最后一页,继续向下切换又回到第一页)。

下面所示的用法示例需要注意:

iOS和Android规范解析——标签导航和分段控件

iOS和Android规范解析——标签导航和分段控件

内容

一个标签里的所有内容应该属于一个大分类(比如“设置”或者“音乐”),并且标签之间内容不能有重叠。标签可以包含图标(icon)和文字。如果使用文字,则尽量简短。

另外有以下用法示例需要注意:

iOS和Android规范解析——标签导航和分段控件

使用

标签有两种,一种是固定标签,适用于标签的数目比较少的情况。每个标签固定的位置,有利于用户的记忆:

iOS和Android规范解析——标签导航和分段控件

固定标签示例

另一种是可划动标签,适用于标签数量比较多的情况。同时,可划动标签的宽度可以长短不一,根据标题长短决定。

iOS和Android规范解析——标签导航和分段控件

可划动标签示例

通常,标签被建议使用在以下的情况:

  • 需要经常切换视图;
  • 应用包含的视图比较少;
  • 应用提供的几个视图都比较重要(由于标签切换,相对于别的导航方式来说,操作更容易。因此通过标签导航提供的几个视图,相对来说到达率会更好。笔者注)。

iOS Human Interface Guidelines

分段控件可以包含两个或者更多的分段选项,每一个选项作为一个独立的按钮而存在。在一个分段控件里,所有的分段选项在长度上要保持一致。和按钮一样,每个分段选项可以包含文案或者图片。分段控件通常用来作为不同视图的入口,比如在地图应用里,分段控件可以让用户在“地图”、“交通”和“卫星”等视图间切换。

iOS和Android规范解析——标签导航和分段控件

iOS系统自带的地图应用

关于分段控件的使用,苹果规范给出了以下几个要点:

  1. 限制分段选项的数目,以提高可用性。更宽的分段选项更容易点击。在iPhone上,苹果建议一个分段控件包含的分段选项最多是5个(想说5个也不少了好不好。。)
  2. 尽量保证每个分段选项里的内容的尺寸是一致的。因为所有的分段选项在长度上需要保持一致,所以如果有的分段选项内容很满,而有的比较空,在视觉上会不太美观。
  3. 在一个分段选项里,避免同时使用文案和图片。尽管单个分段选项里可以包含文案或者图片,但是同时包含两者可能会使界面看起来割裂和迷惑。
  4. 如果你定制了一个分段控件的外观,那么请确保内容的位置是恰当的。比如,如果你更改了分段控件的背景,那么请确保里面的内容看起来是OK的,并且是对齐的。

以上介绍了MD和iOS设计规范中对于标签导航和分段控件的介绍。这两个控件由于长得比较相似,因此经常会用错;尤其是分段控件,需要注意它是不能通过划动来切换的。

讨论使我们认识更加深刻,欢迎留言讨论。

#专栏作家#

新设计青年,微信公众号:新设计青年。人人都是产品经理专栏作家,爱奇艺高级交互设计师。德国海龟一枚,曾任职于腾讯微生活、网易、宜信等公司。

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

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/20245/

(0)
CatherineCatherine
上一篇 2017-08-04 05:25
下一篇 2017-08-04 06:25

相关推荐

  • 极简主义风格:要讲究四大设计要点

    极简风并不是简单的做减法,这也是极简设计最棘手的地方。想必设计师都明白“少即是多”这个概念,但是要怎么在实际设计中践行这种极简设计的理念呢?今天的文章,就帮你梳理一下基本的法则,帮你在设计之前就理顺思路。“完美的设计是可以实现的,也许你还可以向其中加入更多的东西,但如果想从中移除某些元素,就完全不可能了。”

    2017-05-11
  • 深入研究了4款外卖APP,我做了交互优化

    作者:陈仁杰 题外话:作为一名交互设计师,平时闲下来特别喜欢分析市场上的一些具有代表性产品的交互设计。同样,作为一名资深的吃货,毋庸置疑,当然先给大家分析几款“外卖”的交互设计。 首先,我将分析的逻辑和…

    2017-08-04
  • 打造美观清晰易使用的交互文档

    在检查交互文档的时候,我有句口头禅是:“这交互稿画得太丑了。”听到这句话的小朋友,有些回了句“哦…”,有些则会问“交互稿也要考虑美么,交互稿不是逻辑ok就行了么”,脸上是不甚理解的。

    2017-05-20
  • 交互设计师的工作流程及不同阶段的职责

    本篇将介绍我目前参与交互设计的工作流程以及各个阶段的工作职责。

    2016-01-31
  • 用户体验设计师的进阶指南

    互联网行业大步流星、产品迭代周期越来越短,设计挑战日趋严峻。作为一名奋斗在前沿的设计师,你有多久没有更新自己的知识体系了呢?不论新人还是老司机,如何让自己的成长速度跟上行业的飞速发展,已然成为了一个重要命题。本文旨在帮助设计师正确、快速的成长,希望给进阶之路上的设计者们带来思考和启发(注:本文主要是指互联网产品设计、用户体验设计、交互设计、视觉设计等相关设计岗位)。我们认为,只有明确了努力的方向、找到了合适的方法、优化了学习的路径,才能...

    2018-03-14
  • 如何做好新领域下的产品交互设计

    我所在的大数据部,是百度技术体系中一个极具技术与产品创新的部门。因此,作为交互设计师会设计各种行业的产品,已经接触过的行业有网站统计分析、旅游、金融、广告营销、医疗、房地产、零售O2O、彩票、体育、汽车…

    2016-05-10
  • UI中的文字设计总结与分析

    对于设计师来说,文字是一个可以很好提升产品用户体验的武器,希望这篇文章能够给各位设计师带来收获。

    2017-08-04
  • 4月最新便民信息!政府、企业、医院、社工...你想要的岗位都在这里!

    各类招聘求职生活信息关注后回复发布查看更多4月啦,又是新的开始没有工作的同学快快看有哪些好工作吧...   ...招聘信息类首先,是我们玩转郫县的招聘啦邀请你一起来和我们玩营销经理▲薪资待遇:社保+底薪+全勤+提成+奖金(4000-10000元)▲职责要求:1.开拓郫都地区美食、休闲、旅游市场2.建立并维护平台与合作商家良好关系3.能熟练运用word、Excel办公软件▲任职资格:1.工作主动、责任心强、具有良好的团队合作精神、抗压能力...

    2018-04-08
  • 这场UED界的大会堪比最近最火爆的雄安楼市

    2011年,阿里UED委员会的几位童鞋一商量,想给互联网的UED们一个搭交流学习的场子,就发起了第一届UCAN。如今,UCAN已经从阿里的UED的大团建发展成了国内最热门的设计大会之一。2017届的UCAN今天在阿里巴巴西溪园区召开,小编在现场看到走道都坐着人,800多人的场子,10000人报名,快赶上抢房摇号的阵仗了。报名的观众不但专业齐全,视觉、交互、用研、工程师、产品经理一个不拉,而且来自的公司阵容也很强大,腾讯、百度、亚马逊……...

    2018-02-01
  • 谈谈人类学民族志这一高端用研方法

    前几天参加起点学院的“产品总监修炼之道”北京站培训,K叔的用户研究课程中提到了“人类学民族志”这一“很上流”的用研方法,由于时间关系老师当时并没有展开来说,只是讲了一个小小的例子。正好我对民族研究也很感兴趣,最近又读了一本《我的凉山兄弟》,也就不揣冒昧来谈一谈人类学民族志这一高端用研方法。不妥之处,还请各位指教。

    2017-05-24