基于 iOS与Android设计规范解析（一），本文将聚焦于iOS和Android上的交互设计模式之间的区别，在界面之间切换是移动应用中的常见操作。考虑iOS和Android原生应用控件规范的差异，对于APP的设计很关键。

— 如果觉得有帮助，请关注我的公众号【 UX设计笔记 】，每天推送小知识

组件Components  
—
iOS与Android设计规范解析（二）之常用控件
Bars
—
iOS与Android设计规范解析（二）之常用控件
导航栏 Navigation Bar 
导航设计最大的作用就是：告诉用户 当前在哪里，从哪里来，到哪里去。
iOS与Android设计规范解析（二）之常用控件

标签栏TabBars

标签栏位于 屏幕底部，它是悬浮在当前页面之上的，并且会一直存在，只有当用户点击跳转到二级菜单后才会消失，数量 一般在3-5个。
iOS与Android设计规范解析（二）之常用控件
工具栏 Toolbars
工具栏同样位于 屏幕底部， 悬浮在当前页面上的，并且当用户不需要使用的时候，可以隐藏它。例如向上滑动界面时，工具栏会自动隐藏，工具栏的内容主要是对当前页面的操作按钮。
iOS与Android设计规范解析（二）之常用控件
顶栏 TopBar
iOS与Android设计规范解析（二）之常用控件
底栏 BottomBar
iOS与Android设计规范解析（二）之常用控件
Android的TopBar和BottomBar
有且只能使用其中 1种方式，不可共存。
iOS与Android设计规范解析（二）之常用控件


按钮Buttons

—
行为召唤按钮CTA
行为召唤（CTA）按钮其目的是通过设计  诱导或激励用户点击按钮 从而达到产品的目的。页面中最吸引用户点击的按钮就是CTA按钮。

iOS与Android设计规范解析（二）之常用控件

按钮Buttons
iOS与Android设计规范解析（二）之常用控件
案例1
iOS与Android设计规范解析（二）之常用控件


FAB(Floating Action Button)

浮动操作按钮（FAB）
悬浮按钮通常用来承载关联度最高、最重要、最常用的操作。在app中，应该用来承载界面， 最关键的操作或核心功能。
主 要
FAB表示屏幕上的主要操作
建设性
FAB应执行建设性操作（例如创建，共享或探索）
上下文
FAB应与其出现的屏幕内容相关
iOS与Android设计规范解析（二）之常用控件
FAB操作种类

悬浮按钮只承载 积极的、正向操作，例如分享、收藏、创建等，如以下类别：

iOS与Android设计规范解析（二）之常用控件
FAB位置
1、独立出现，不能有Bottom Bar
2、与Bottom Bar结合， 可内嵌、可悬浮叠加，且Bottom Bar至少需要 3个级以上操作功能
iOS与Android设计规范解析（二）之常用控件
一个页面只有一个FAB
悬浮按钮在界面中是 最突出和抢占视觉焦点，所以要么使用一个 悬浮按钮，要么干脆别用。
iOS与Android设计规范解析（二）之常用控件
Buttons的状态
iOS与Android设计规范解析（二）之常用控件
注释：CTA：Call To Action
选择器Selection
—
选择控件类型
iOS与Android设计规范解析（二）之常用控件
单选Radio
使用条件
1、显示所有可用选项
2、从列表中选择一个选项
iOS与Android设计规范解析（二）之常用控件
复选框CheckBox
使用条件
1、从列表中选择一个或多个项目
2、显示包含子选择的列表
iOS与Android设计规范解析（二）之常用控件
开关Switches
使用条件
1、在移动设备和平板电脑上打开或关闭单个选项
2、立即激活或停用某个功能
iOS与Android设计规范解析（二）之常用控件
滑块Sliders
作用
帮助用户选择某个特定的值或一个值范围，
便于用户快速浏览大量的选项立即激活或停用某些内功能
缺点
移动端使用手指滑动，不便与精确选择
iOS与Android设计规范解析（二）之常用控件

模态框Modal
—
什么是Modal
模态框（Modal）是 覆盖在父窗体上的子窗体。目的是现实来自一个单独的源内容，可以在不离开父窗体的情况下有些互动。子窗体可提供信息、交互等。
使用条件
1、出现在应用程序内容的前面
2、提供关键信息或要求做出决定
3、阻断应用正常运行，直至完成窗口上的任务
优点：
可以很好的获取用户的视觉焦点
缺点：
打断用户当前的操作
iOS与Android设计规范解析（二）之常用控件
警告框Alerts/对话框Dialogs
使用条件
1、在移动设备和平板电脑上打开或关闭单个选项
2、立即激活或体用某些功能
iOS与Android设计规范解析（二）之常用控件
对话框Dialogs形态
iOS与Android设计规范解析（二）之常用控件
底部操作面板Action Sheet
加强版对话框，可以有多种操作，且样式也具有多样性
iOS与Android设计规范解析（二）之常用控件
浮层Popover
浮层是用户点击控件或者界面某一区域浮出的临时视图，可以向用户展示多个
功能选项，可以出现屏幕中的任何位置。
iOS与Android设计规范解析（二）之常用控件
什么是非Modal
与模态弹框相比，非模态弹框最大的区别是不强制用户交互，也不会弹出半透明背景层，非模态弹框停留一段时间后会自己消失。非模态弹框属于 轻量型反馈，常见的非模态弹框有Toast和Snackbar。
优点
不会对用户造成太大的干扰
缺点
容易被用户忽视，而且不适合展示过多的信息，可能用户读完之前就消失了。
iOS与Android设计规范解析（二）之常用控件
如何使用
iOS与Android设计规范解析（二）之常用控件
其他控件
—
网格Grids/列表list
iOS与Android设计规范解析（二）之常用控件
选择器Pickers

iOS与Android设计规范解析（二）之常用控件

iOS与Android设计规范解析（二）之常用控件

–  END  –

如果觉得有帮助，请关注我的公众号【 UX设计笔记 】，每天推送小知识

做人要厚道,转载请注明文章来源: https://www.boxui.com/ued/design-idea/34536.html