杰森叔叔 iOS与Android设计规范解析(二)之常用控件
加入收藏 评论

iOS与Android设计规范解析(二)之常用控件

4 天前 发布

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

基于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


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. 1、从列表中选择一个或多个项目
  2. 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

26
26位设计师推荐
杰森叔叔 HQKJ Catsnamespiop 包工头 蜷 Tudou 菠萝魔王 Get A Loan 十米 亮 Albertarozy 淡然 阿躺 . 一二三 cc998899 Instant Online Loans sxersonle jam 饭特稀丶 不不不              Phantom 丶 -Juliet fn儿
杰森叔叔
iOS与Android设计规范解析(二)之常用控件
您还没有登录,登录后发表评论!还没有账号?立即注册

Copyright © 2011 - 2020 UIYuan设计师交流平台, All Rights Reserved. 皖ICP备18024424号-2

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源,商业媒体及纸媒请先联系:service@uiyuan.com

UI园会员交流QQ群: 233748945 / 73425514