22年的Flag之一是要输出《交互设计基础课程》，所以计划每周一篇，欢迎大家持续关注和监督👀今儿是除夕，昨晚为了赶车只睡了3个小时，白天断断续续小憩+陪小朋友玩游戏，吃过晚餐，听着外面噼噼啪啪的炮竹声开始继续码字，准备用一篇新的文章祝大家除夕快乐~在上一讲《 iOS人机界面指南 · 设计理念》中，我把iOS指南拆分为3大模块：设计理念、界面元素和设计标准，今天继续为大家拆解界面元素，帮助大家更好的理解iOS指南。
交互设计 · 第 7 讲
👉 iOS人机界面指南 · 界面元素👈
界面元素是构成App的基本原料，俗话说巧妇难为无米之炊，要想做好一个厨师，必须要了解一下食材种类、特性以及经典的搭配方式，这样才可以更快的做出合格的家常菜。
那iOS系统到底给我们提供了哪些食材呢？我们可以从这张图中找到答案。
我不知道大家看到这张图的第一想法是什么？我的想法是：这也太多太难记忆了吧！的确，根据米勒定律，人们一次可以记住的信息组块是4±1，而指南却直接平铺给了我们6、13、14总计33类的信息，远远超过了我们的记忆上限，也难怪那么多设计师说要系统学习规范，但又迟迟不见行动。
▲图2 iOS指南的界面元素-脑图
我们先把这33类元素的脑图画出来，你也可以先思考一下，看你能否找到6，13，14类元素之间的规律，更好的理解和记忆它们🤔。（建议思考后再接着往下看，说不定你跟悦姐的思考框架心有灵犀呢😝）
咱们先从简单的只有6类的栏开始，大家可以观察一下这6栏元素之间有什么关系呢？（分类的标准不唯一，大家可以按照自己的归类方式划分）
▲图3 栏的分类
比如说，我是按照栏通常出现的位置划分的，位于顶部的栏有状态栏、导航栏和搜索栏；位于底部的栏有标签栏和工具栏，位于侧边的是侧边栏。
状态栏出现在屏幕的上边缘，显示有关设备当前状态的有用信息，例如时间、蜂窝运营商和电池电量等。
iOS系统提供了深色和浅色两种状态栏，建议直接调用不要自定义。对于沉浸式页面可以暂时隐藏状态栏，但考虑到用户对时间电量等信息的关注，建议始终显示时间电量信息或者让用户很容易能唤出状态栏。导航栏出现在应用程序屏幕的顶部、状态栏的下方，起到导航作用。二级页面的标准导航栏由左侧返回按钮+中间标题+右边操作构成。
一级页面无需显示返回按钮，当标题无意义时，可以省略标题，若要凸显标题时，可以用大标题模式展示。搜索栏允许人们通过输入文本来搜索。它可以单独显示，也可以固定在导航栏中置顶显示，还可以折叠当用户下滑才显示。
未输入前，可以在搜索框中显示搜索提示，告知用户可支持的搜索范围，搜索栏的右侧可以根据需求决定是否要显示取消按钮；输入文本过程中，建议在下方提供搜索联想，减少用户输入。同时在搜索框右侧显示清除按钮，方便用户清空内容。标签栏出现在屏幕底部，通常作为一级导航，帮助用户了解应用程序提供的信息或功能类型。用户可以通过标签栏快速切换，同时保留每个标签中的内容状态。
默认情况下，标签栏是半透明的，当内容滑到最底部后移除标签栏半透明背景；标签栏的选项个数≤5个，不建议隐藏标签栏，或者禁用标签选项；横屏模式时，标签栏图文建议左右布局；弹起键盘时标签栏要隐藏。工具栏出现在屏幕底部，里面包含用于执行与当前视图相关的操作按钮。
默认情况下，工具栏是半透明的，当内容滑到最底部后移除工具栏半透明背景；工具栏用于展示人们在当前页面中最有可能执行的操作，当操作个数≤3个时，建议使用名称，当操作个数在3个以上时，建议使用SF符号节约空间。可以根据需要隐藏工具栏，或者禁用某些工具；弹起键盘时工具栏要隐藏。侧边栏提供应用级导航和对应用中顶级内容集合的快速访问。在侧边栏中选择一个项目可以让人们导航到特定的内容。
侧边栏在pad上用的比较多，iphone上使用较少，因为默认不可见，用户使用率会比较低。侧边栏中的信息层级最好不要超过2个，每个标题名称都要尽量精简。学习了简单的栏，我们来看一下最基础的控件。控件是界面元素中最基础的元素，栏和视图都可以看做是控件的典型组合。因为控件和视图都比较多，我就不一一在文章中介绍了，感兴趣的小伙伴可以加入悦姐交互小课堂，听我一一拆解，我在这里先介绍一下控件的分类思路。
我把控件分成了4大类：单击操作类、量化操作类、状态展示类和其它。
按钮用于执行特定的操作，类型非常多样，在最新的iOS15指南中，标准按钮、切换按钮、关闭按钮、弹出菜单、下拉菜单都被归在了按钮里（在我眼里并不合理）。开关可以看做是一种特殊的按钮（开关只能在表格行中使用，在导航栏工具栏等位置就需要转化为按钮使用）情境菜单和编辑菜单都可以看作是，针对不同对象多种操作行为的合集。（下拉菜单和弹出菜单明显和这两个更像平级的类型）
这三者的共性是都是针对同一类型的选项，在数量或者程度的区间范围内，增加或者减少，以选择合适的值。状态展示类包括进展指示器、刷新，分段控件和页面指示器。
进展指示器包含无明确进度的loading图标和有明确进度的进度条。刷新控件的刷新过程一般用的都是无明确进度的loading图标。分段控件展示了所有视图的标题，用户可以明确的知道有几个视图并任意选择其中一个视图进行查看。页面指示器则只告知了有几个视图，用户只能顺序左右滑动查看视图不能提前预知和选择。
文本框和标签通常是搭配出现的，而标签颜色也是可以用色彩面板进行选择的。标签在任何地方出现都应该遵循简洁清晰的标准。我们在app中所有能看见的内容都存在于一个视图中。根据ios指南中对视图的介绍，我把视图分为了4大类：内容类、单一操作类、复杂操作类、其他类。
内容类视图，包含了各种不同类型的内容视图，比如：集合视图、图像视图、文本视图、网页视图、表格视图。
表格视图、文本视图和图像视图，顾名思义，视图内的内容分别是表格、文本和图像。网页视图的视图内则内嵌的网页，集合视图则是管理一组有序的内容，比如照片、卡片等。
行动菜单是一种特定样式的警告，它提供与当前上下文相关的两个及两个以上的选项，在小屏幕时从底部滑出，在较大屏幕上则以弹出框形式展现。（通过这段描述你应该知道为什么我把这三个归为一类了）。警告框由标题、可选信息、1个及以上按钮构成。当行动按钮在3个及以上时，建议使用行动菜单。弹出框适合在大屏幕中使用，它是一种瞬态视图，包含一个指向性的箭头指向它出现的位置，内部可以包含任何种类的元素，如表格、集合、图像等。（从这个角度上来看，它其实也可以被归到复杂操作类）工作表可帮助人们执行与父视图相关的不同任务，而无需将他们带离当前上下文。它显示为部分覆盖底层内容的卡片。卡片的顶角是圆角的，以便在视觉上将其与父视图区分开来。活动视图展示与当前上下文有用的各种任务，点击可以立即执行。活动视图可以是工作表或弹出框，取决于具体设备。其他类包括：分栏视图、滚动视图和翻页视图。它们都提供了一种显示一屏视图外更多内容的呈现方式。
分栏视图多用在pad上，对于多个级别的导航非常有用。滚动视图允许用户浏览大于可见区域的内容，滚动视图本身没有外观，但会在人们与之交互时显示瞬态滚动指示器。翻页视图提供了一种在内容页面之间实现线性导航的方法，能帮助页面流畅的从一个滚动到下一个。界面元素的介绍到这里就结束了，让我们再来回顾一下所有的元素：
虽然总的数量并没有减少，但结构化之后是不是清晰了很多。如果你对文章任意内容有疑问，请加悦姐微信yuechats，加入悦姐交互小课堂，听悦姐为你详细讲解~
交互设计 · 第 8 讲预告
👉 iOS人机界面指南 · 设计标准👈
🎉🎉🎉
悦姐最近新组建了【交互小课堂】
每周日晚8:00，腾讯会议开讲文章拓展知识，并免费解答大家的交互设计疑问。
系列课程20堂+，帮助大家交互设计从入门到专业。
前100名限时特价199元加入，101~200名限时定价299元。
有需要的小伙伴请添加悦姐微信yuechats，备注【交互小课堂】
我是悦姐，一个爱学习和分享的设计专家~
欢迎关注，2022年和悦姐一起交互进阶~