移动端控件整理——导航&搜索

作者: dddt01 | 来源:发表于2021-07-21 10:44 被阅读0次

01 栏（APP层级的内容划分）

底部导航栏/标签栏/Tab Bar/Bottom navigation

底部导航主要用于APP级别，各模块之间的横向切换。在屏幕底部显示导航和关键操作。在处于同一层级的内容组之间导航。

安卓叫底部导航栏（Bottom navigation）。iOS叫标签栏（Tab Bars）

ios与安卓的区别是，ios在不同标签之间切换时，会保留之前的操作状态（如之前进入了详情页，切回来的时候，依然看到详情页。），而安卓则会重置之前的操作。

标签栏出现在APP的底部，可以让人们在APP的不同选项中快速切换。标签栏是半透明的，可能会有纯色背景，在APP的横竖屏中都保持同样的高度，当显示键盘的时候被隐藏。标签栏可以包含任意数量的标签，但是可见标签的数量根据屏幕尺寸和横竖屏的情况而变化。如果一些标签因为竖屏空间限制而不能显示，那最后可显示的标签的就变为“更多”标签，在单独的界面中展示额外的标签列表。

规则#

用作 APP 的一级分类，数量控制在 3-5 个之间。

即使某个 Tab 不可用，也不要禁用或者移除该 Tab。

使用 Badge 进行提示，足不出户也能知道有内容更新。

了解标签栏和工具栏之间的区别很重要，因为这两种类型的栏都出现在应用程序屏幕的底部。标签栏可让人们在应用程序的不同部分之间切换，例如时钟应用程序中的闹钟、秒表和计时器选项卡。工具栏包含用于执行与当前上下文相关的操作的按钮，例如创建项目、删除项目、添加注释或拍照。有关指导，请参阅工具栏。标签栏和工具栏永远不会一起出现在同一个视图中。

一般而言，通过标签栏来组织APP级别的信息。标签栏是让信息层级变得扁平的好办法，并且一次提供了访问多个同级信息目录或模式的途径。

标签栏应该被严格作为导航。标签栏按钮不应该被用来执行操作。如果你需要在当前视图上提供作用于元素的控件，可以使用工具栏。See Toolbars.

避免包含太多选项。每增加一个选项都会减少选择一个标签的可点击空间并且增加APP的复杂度，让定位信息更加困难。尽管“更多”标签可以展示额外的标签，也需要增加点击次数，对标签栏的空间也没有很好地利用。仅仅包含必要的标签，为你的信息层级使用最少数量的必要标签。太少的标签数也有问题，它会使你的界面感觉是断开的。一般而言，在iPhone上使用3-5个标签，在ipad上则可以稍微多几个。

当人们前往你APP的不同区域时不要隐藏标签栏。标签栏是你APP的全局导航，所以他应该在哪里都保持可见。唯一的例外是处于模态视图的时候。因为模态视图给人们一个当他们结束时就消失的单独经历，这不是你APP全局导航的一部分。

当标签所属的功能不可用时，不要删除或者禁用它。当标签在某些情况下可用单在某些情况下不可用时，你的APP界面会变得不稳定且不可预测。确保所有的标签总是可用，并且解释为什么标签的内容是无法获得的。例如，如果在iOS设备中没有本地音乐，音乐应用中“我的音乐”标签会说明如何去下载歌曲。

总是在与标签相关联的视图中切换内容。为了保持界面符合用户预期，选择一个标签总是会影响直接附加于标签栏的视图，而不是屏幕中其他地方的视图。选择左侧分屏视图（split view）中的某个标签，不应该使得右边分屏视图突然改变。选择弹窗中的标签，不应该造成弹窗后面视图的改变。

确保标签栏图标视觉上的一致性和平衡性。系统为常见用例提供了大量的预设图标。 System Icons > Tab Bar Icons. 你可以创造你自己的图标。 Custom Icons.

使用角标来低调的传达信息。你可以显示一个角标——包含文本或者数字或者感叹号的一个红色椭圆——在标签上来暗示该视图或模式含有的新信息。

确保标签栏字形在视觉上保持一致和平衡。在 iOS 13 及更高版本中，您可以使用SF Symbols来表示标签栏项目。在所有版本的 iOS 中，系统 API 为您提供了一组为常见用例设计的特定图标（glyphs）（请参阅系统图标 > 标签栏图标）。您还可以设计自己的图标（glyphs）；有关指导，请参阅Glyphs。

在纵向中，标签栏图标（glyphs）可以出现在标签标题上方；在横向，图标和标题可以并排出现。根据设备和方向，系统会显示常规或紧凑的标签栏。您的应用应包含两种尺寸的自定义标签栏图标。在创建不同形状的标签栏图标时使用以下指标。

Bottom navigation

原则：3-5个目标。图标+文字（可选。文字要简短直白，避免省略显示、换行显示）。让用户可以轻易地触及，持续在底部出现（滚动时可以显示/隐藏），各部分之间处于同级地位。避免横向滚动。

少于3个部分的时候，使用标签页（tabs）。底部导航与顶部导航同时使用的时候，会造成混乱。应该错开层级，底部作为一级导航，页面内使用标签页/分段控件来组织内容。

顶部栏/导航栏/Navigation Bars

安卓叫顶部栏（top app bars），iOS叫导航栏（navigation bars）。顶部栏是导航+页面级操作。

顶部栏的导航主要用于纵向深入的导航，如查看详情页面，顶部点击返回按钮即可返回。各页面之间保持一致性。

安卓的顶部栏提供与当前屏幕相关的内容和操作，可以包含品牌元素、屏幕标题、导航和操作按钮。可以转换为情境化的动作栏。导航可以调出抽屉导航菜单，操作可以使用下拉菜单放置更多的动作。

导航栏可以情境化显示，即根据用户的操作、页面状态的变化来显示不同的内容。

ios的导航栏出现在APP界面的顶部，在状态栏的下方，能够在一些不同层级的页面中提供导航。当加载一个新页面的时候，导航栏的左侧一般会出现一个返回按钮，与前一个页面的标题放在一起。有时候，导航栏的右边会包含一个编辑或者完成按钮的控件，用来管理当前视图的内容。在分屏视图内，导航栏可能只会出现在分屏视图的窗格中。导航栏是透明的，也许会有一个背景色调。而且可以设定在键盘出现、手势发生、视图缩放的时候隐藏。

规则#

可在导航栏中使用 SegmentedControl 对内容进行层级划分。

避免用过多的元素填满导航栏。一般情况下，一个『返回按钮』、一个『标题』、一个『当前视图的控件』就足够了；如果已经有了 SegmentedControl ，一般只搭配一个『返回按钮』或者『当前视图的控件』。

为图标和文字控件，提供更大的点击热区。

安卓规范中，顶部导航栏可以用更大的高度，增加背景图片（不干扰图标识别的前提下）。滚动时可以隐藏导航栏、导航栏高于内容区域、更大高度的导航栏变为正常高度的导航栏。

当全屏展示内容时，考虑暂时隐藏导航栏。当你试图聚焦于内容之上时，导航栏可能会形成干扰。暂时隐藏导航栏可以提供一个更加沉浸的体验。照片应用在全屏浏览照片时，会隐藏导航栏和其它交互元素。如果你采取类似的行为，让人们可以通过一个简单的手势如触击，来恢复导航栏。

tips：当你不需要导航或者需要多样化的控件来管理内容时，使用工具栏。

导航栏标题

可在导航栏中显示当前视图的标题。如果标题非常冗长且无法精简，可以空缺。标题默认左对齐（iOS默认居中对齐）。标题的文本应该简短直白，避免省略显示，必要时可以折行显示。

考虑在导航栏显示当前视图的标题。在大多数的场景下，标题帮助人们理解他们正在浏览的是什么。但是，如果给导航栏命名看起来是多余的，你可以让标题处空着。例如，备忘录不需要当前备忘的标题，因为内容的第一行就提供了所需的上下文信息（context）。

当你想要特别强调上下文信息（context）的时候，使用大标题形式。大标题不会与内容竞争，但是在一些APP中，大而粗的标题文本可以帮助人们在浏览和搜索时确定方向。例如，在选项卡式布局中，大标题可以帮助澄清当前激活的选项，并且在人们需要滚动到顶部时提示他们。电话采用这种策略（使用大标题来强调），而音乐使用大标题来区分专辑、艺术家、播放列表和收银机等不同内容区域。在iOS 13和更新的版本中，大标题不默认包含背景和阴影。同时，当人们开始滚动页面内容时，大标题会转变为标准标题样式。

在大标题导航栏中考虑隐藏边框。在iOS 13和更新的版本中，你可以通过去除导航栏的阴影来隐藏底部边框（边框会在人们滚动内容区域时自动重新出现）。无边框的导航样式在大标题的导航栏中表现良好，因为它增强了标题和内容之间的联系感。但是，在标准大小标题的导航栏中，无边框样式可能效果并不好。因为栏的标题和按钮可能会很难辨别。一个例外是在iPad的分屏视图中，你可能会通过在主视图和详情视图中都使用无边框样式来保持二者之间的连贯性。

导航栏控件

避免放太多控件导致导航栏变得拥挤。一般情况下，导航栏的内容最多包括当前视图的标题、一个返回按钮、一个管理当前视图的控件。如果你在导航栏中使用了分段控件（segmented control），导航栏中就应该除了分段控件外不再包含标题或者其他控件。

使用标准的返回按钮。人们知道在多层级的信息中间，标准的返回按钮可以使他们原路返回。然而，如果你采用了自定义的返回按钮，要确保它看起来像是一个返回按钮，有直观的表现，和你其它的界面相匹配，而且在整个APP中保持一致。如果你是用自定义图片代替了系统提供的V形返回按钮，请同时提供一个自定义遮罩图片(custom mask image)。iOS使用这个遮罩图片来实现转场时的过渡动画。

不要包含多段的面包屑路径。返回按钮总是表明一种单一的动作——回到之前的页面。如果你认为人们在没看到当前页面的完整路径情况下会迷失方向，考虑让你的APP层级更加扁平。

给文本按钮提供充足的空间。如果你的导航栏包含了多个文本按钮，这些按钮的文本可能会重叠到一起，导致按钮无法识别。通过在按钮之间插入固定空间项来增加间距。

当你希望你的APP信息层级更扁平的时候，考虑在导航栏使用分段控件（segmented control）。如果在导航栏使用分段控件，仅仅在信息层级的顶层使用，并且确保在低层级中使用准确的返回按钮标题。For additional guidance, seeSegmented Controls.

02 导航菜单（APP层级的内容划分）

抽屉/侧边导航/navigation drawer

用于在屏幕边缘显示应用导航等内容的面板。

抽屉导航的形式可以分为：标准抽屉（常驻）、模态抽屉（点击后滑出）、底部抽屉（底部滑出）。移动端一般使用后两种。

规则#

是 Android 推荐的导航方式，常见于该平台应用。

具有5个以上菜单项（顶级分类）的应用；具有两级或更多级导航层次结构的应用程序；不相关目的地之间的快速导航；

菜单项名字应该清晰简明，如果它们超出容器宽度，则将其截断。

菜单项按重要性排序。

可以使用分割线进行分组。

导航轨道/navigation rail

导航轨道主要应用于大屏幕尺寸设备，在左侧常驻。包含3-7个菜单项，

包含的元素：

1. 容器

2. 浮动操作按钮（可选）

3. 目的地

4. 文本标签

5. 分隔线（可选）

背景/backdrop

背景由两个部分组成：背景层和前层。背景层显示动作和上下文，这些控制和通知前层的内容。两者互相关联。

通过折叠/展开的形式，交换焦点区域，形成操作与浏览状态之间的切换。

03 页面内的内容分块

加载更多/滑动加载

利用纵向虚拟无限高度，通过上下滑动来查看更多的内容。如常见的信息流app页面。可以使用间距、分割线、卡片等对各部分内容进行区分与组织。

分割线

分割线用于组与组之间的划分，而非单个内容之间的划分。在间距区分失效时考虑使用，应该时微妙的而不是显眼的，避免干扰到主要内容的显示。

分割线包含全出血、半出血、居中、带小标题等形式。

手风琴/Accordion/扩展面板/树状结构/分组折叠

可以折叠/展开的内容区域。一般是针对一组内容进行折叠/展开，可以多级嵌套，形成树形结构的内容组织。

规则#

对复杂区域进行分组和隐藏。

通常，一次只允许单个内容区域展开；特殊情况，多个内容区域可以同时展开。

分段控件（Segmented Controls）/分段器

分段控件主要用于页面内不同内容模块之间的横向切换。

分段控件是一个包含两个或更多分段的线性合集，每一个分段功能上都是互斥按钮。在控件中，所有的分段都是等宽的。和按钮一样，分段可以包含文本和图像。分段控件经常用来显示不同的视图。例如，在地图中，分段控件让你在地图、交通状况图、卫星这几个视图中切换。

限制分段的数量以提高可用性。越宽的分段越容易点击。在iPhone中，分段控件应该拥有五个或更少的分段。

尽量保持分段内容尺寸的一致性。因为所有的分段都是等宽的，如果一些填充了内容，另一些没有填充，看起来就不会很好。

避免在分段中混合文本和图像。尽管单独的分段可以包含文本或者图像，在同一个控件中混合二者可能会导致界面没有条理、令人困惑。

在自定义分段控件中合适地定位内容。如果你改变了分段控件的背景样式，确保内容仍然看起来很好而且不要看起来没有对齐。

规则#

和 Tabs 功能相似，尽可能避免一个页面中同时出现这两个组件。

可以搭配 NavBar 一起使用，用于显示多个视图，分段数一般为 2 个。

单独放置一行时，分段数最多为 5 个；文案需要精简，一般 2-4 个字。

尽可能保持文案长度一致。

标签页/tabs

标签页与分段控件类似，用于让用户在不同的视图中进行切换。与标签栏不同的是，主要用于页面内的视图切换，而标签栏的切换内容，层级更高一些。

规则#

标签数量，一般 2-4 个；其中，标签中的文案需要精简，一般 2-4 个字。

在 iOS 端的次级页面中，不建议使用左右滑动来切换 Tab，这个和 iOS 的左滑返回存在冲突，eg：详情页中 Tabs。

走马灯/轮播图/页面控件/Carousel/Page Controls

页面指示器在扁平的页面列表中显示当前页面的位置。它看起来像是一系列小的指示点，代表了以打开顺序排列的可用页面。实心点代表当前页面。视觉上，这些点总是等距排列的，当屏幕上出现的点数量太多的时候会被省略。用户可以轻触页面控件的前边或后边来访问前一个或下一个页面。但是他们不能轻触一个特定的点到一个特定的页面。导航总是按顺序进行的，通常是通过将页面轻扫到另一侧。

分层页面不要使用页面指示器。页面指示器不能反映页面之间是如何联系或者指示哪个页面对应哪个点。这种类型的控件是为同级的页面设计的。

不要展示太多页。超过10个点就很难一眼计数，超过20个打开的页面按顺序访问起来很耗费时间。如果你的APP需要展示超过20个同级页面，考虑使用不同的组织方式——例如网格——可以支持非顺序导航。

页面指示器居中放在屏幕底部。页面指示器应该总是被居中放置，并且位于内容底部和屏幕底部之间。这样可以使它保持可见，而不会妨碍内容显示。

步骤条/Steps

显示一个任务的进度；或者引导用户完成某个复杂任务。让用户在完成一个较长的业务过程中，知道还需要多少步才能完成，增加用户的控制感，避免遥遥无期的无力感。

分为横向和纵向显示两种。

规则#

应用在离散和时间较长的进度显示，eg：转账进度；如果任务是连续和短暂的，应该使用 Progress 来显示，eg：打开页面。

当任务复杂或者存在先后关系时，将其分解成一系列步骤，从而简化任务，eg：用户注册新账号。

侧边栏/Sidebars

iOS侧边栏类似于安卓中的标准抽屉菜单，一般在iPad等大屏设备应用上使用，采用拆分视图。主要用于应用级导航和对应用中顶级内容集合的快速访问。

原则

将正确的外观应用到侧边栏。要创建侧边栏，请使用集合视图列表布局的侧边栏外观。

使用侧边栏来组织应用级别的信息。侧边栏是让信息架构更加扁平，同时提供多个同等级别的信息分类或模式的一种方式。使用侧边栏快速导航到应用的关键部分，或者类似于文件夹和播放列表之类的顶级内容的集合。

只要有可能，让人们自定义侧边栏的内容。因为侧边栏为您的应用程序提供导航，您可以使用它为人们提供快捷方式以快速访问他们关心的内容。最好是用户可以决定哪些项目最重要。

不要阻止人们隐藏侧边栏。允许人们隐藏侧边栏以为其内容创造更多空间，并使用内置的边缘滑动手势再次显示侧边栏。避免在默认情况下隐藏侧边栏。

保持侧边栏中的标题清晰简洁。省略不必要和多余的词。例如，Mail 在每个邮箱的标题中省略了 Messages 一词，使用更简洁的术语，如 Flagg 和 Drafts。

一般来说，不要在侧边栏中展示两个以上的层次结构。当数据层次比两层更深时，在分屏视图界面的补充列中使用列表视图。

分页器

分隔长列表，每次只加载一个页面。

规则#

当加载/渲染所有数据将花费很多时间或者流量时使用。

二、搜索

01 搜索入口

搜索按钮

通过按钮提供搜索入口，点击后进入搜索页面。搜索页可以增加历史搜索、分类、推荐等功能，适合于页面布局紧凑，搜索功能较为复杂的场景。

搜索栏（Search Bars）

一般可位于 NavBar 下方，通过『取消按钮』退出激活状态。

搜索栏让人们可以在大量信息中间通过输入文本来搜索。搜索栏可以单独出现，也可以出现在导航栏中或者内容视图中。当出现在导航栏时，搜索栏可以固定的在导航栏以便随时可使用。或者可以折叠隐藏，直到用户向下滑动时显示。

规则#

应该在 placeholder 里提供提示文字，提醒用户输入相关内容，比如：双11特卖。

在搜索栏下方，可提供有用的标签文案，帮助用户通过点击直接完成输入，比如：列出一些最近搜索的关键词。

使用搜索栏而不是文本框来搜索。文本框没有人们期望的搜索栏的标准外观。

清除按钮可用。大多数搜索栏包含清除按钮，可以清空输入栏的内容。

在合适的时候让取消按钮可用。大多数专门的搜索栏都包含一个可以立即停止搜索的取消按钮。

清除按钮和取消按钮

如有必要，在搜索栏提供提示和上下文信息（context）。搜索栏区域可以包含一个占位符文本作为被搜索内容的信息提示，类似于“搜索衣服、鞋子和配件”，或者简单的“搜索”。可以直接在搜索栏上方显示简洁明了、带有适当标点的单行文字来提供指导。股票应用使用了文本提示告知人们可以输入公司名字或者股票代码。

考虑在搜索栏下提供帮助性的快捷方式或者其它文本内容。利用搜索栏下方的区域帮助用户更快的获取内容。例如Safari浏览器应用，当你触击搜索区域的时候展示书签，不需要输入任何搜索项就可以选择一个直接进入。股票应用当你在文本区域输入内容时展现一个结果列表。可以在不需要输入更多词语的情况下随时点击选择一个。

范围栏（Scope Bars）

可以在搜索栏附加范围栏来让人们定义搜索范围。