android 底部和导航栏重合_iOS与Android设计规范解析（二）之常用控件

点击上方  蓝字  关注 “ UX设计笔记 ”，一起共成长 

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

组件Components  — Bars — 导航栏 Navigation Bar  导航设计最大的作用就是：告诉用户当前在哪里，从哪里来，到哪里去。 标签栏 TabBars 标签栏位于屏幕底部，它是悬浮在当前页面之上的，并且会一直存在，只有当用户点击跳转到二级菜单后才会消失，数量一般在3-5个。 工具栏 Toolbars 工具栏同样位于屏幕底部，悬浮在当前页面上的，并且当用户不需要使用的时候，可以隐藏它。例如向上滑动界面时，工具栏会自动隐藏，工具栏的内容主要是对当前页面的操作按钮。 顶栏 TopBar 底栏 BottomBar Android的TopBar和BottomBar 有且只能使用其中 1种方式，不可共存 。 Buttons — 行为召唤按钮CTA 行为召唤(CTA)按钮其目的是通过设计 诱导或激励用户点击按钮 从而达到产品的目的。页面中最吸引用户点击的按钮就是CTA按钮。 按钮Buttons 案例1 FAB(Floating Action Button) 浮动操作按钮(FAB) 悬浮按钮通常用来承载关联度最高、最重要、最常用的操作。在app中，应该用来承载界面，最关键的操作或核心功能。 主要 FAB表示屏幕上的主要操作 建设性 FAB应执行建设性操作(例如创建，共享或探索) 上下文 FAB应与其出现的屏幕内容相关 FAB操作种类 悬浮按钮只承载积极的、正向操作，例如分享、收藏、创建等，如以下类别： FAB位置 1、独立出现，不能有Bottom Bar 2、与Bottom Bar结合，可内嵌、可悬浮叠加，且Bottom Bar至少需要3个级以上操作功能 一个页面只有一个FAB 悬浮按钮在界面中是最突出和抢占视觉焦点，所以要么使用一个悬浮按钮，要么干脆别用。 Buttons的状态 注释：CTA：Call To Action Selection — 选择控件类型 单选Radio 使用条件 1、显示所有可用选项 2、从列表中选择一个选项 复选框CheckBox 使用条件 1、从列表中选择一个或多个项目 2、显示包含子选择的列表 开关Switches 使用条件 1、在移动设备和平板电脑上打开或关闭单个选项 2、立即激活或停用某个功能 滑块Sliders 作用 帮助用户选择某个特定的值或一个值范围， 便于用户快速浏览大量的选项立即激活或停用某些内功能 缺点 移动端使用手指滑动，不便与精确选择 模态框Modal — 什么是Modal 模态框(Modal)是覆盖在父窗体上的子窗体。目的是现实来自一个单独的源内容，可以在不离开父窗体的情况下有些互动。子窗体可提供信息、交互等。 使用条件 1、出现在应用程序内容的前面 2、提供关键信息或要求做出决定 3、阻断应用正常运行，直至完成窗口上的任务 优点： 可以很好的获取用户的视觉焦点 缺点： 打断用户当前的操作 警告框Alerts/对话框Dialogs 使用条件 1、在移动设备和平板电脑上打开或关闭单个选项 2、立即激活或体用某些功能 对话框Dialogs形态 底部操作面板Action Sheet 加强版对话框，可以有多种操作，且样式也具有多样性 浮层Popover 浮层是用户点击控件或者界面某一区域浮出的临时视图，可以向用户展示多个 功能选项，可以出现屏幕中的任何位置。 什么是非Modal 与模态弹框相比，非模态弹框最大的区别是不强制用户交互，也不会弹出半透明背景层，非模态弹框停留一段时间后会自己消失。非模态弹框属于轻量型反馈，常见的非模 态弹框有Toast和Snackbar。 优点 不会对用户造成太大的干扰 缺点 容易被用户忽 视，而且不适合展示过多的信息， 可能用户读完之前就消失了。 如何使用 其他控件 — 网格Grids/列表list 选择器Pickers -  END  - 如有什么疑问和建议，欢迎加入微信群一起探讨 —— 我是分割线 ——   往期精选文章   iOS与Android设计规范解析(一) 全面解析APP启动页/闪屏/引导页设计技巧 浅谈-APP缺省页情感化的设计技巧 APP登录注册的设计技巧 图标绘制基础指南，一篇就够了！ 设计师必知的 2020 年平面和视觉设计趋势 2020年常用设计规范Sketch源文件下载合集

---