APP设计中,6种常见组件的差异及应用方式

在APP设计中,有很多组建有着类似的功能和用法。如何正确使用这些组件?这些组件之间有什么区别?一起看看作者的解读。

在设计iOS版和Android版的APP过程中,会涉及到很多组件。不同的场景使用的组件也不一样。本文将讲述六组常见的相似组件的区别和用法。

一、警示框(alert)和底部操作列表(actionsheet)

警示框是传达应用或设备某些状态的信息,并且常常需要用户来点击操作。底部操作列表展示了与用户触发的操作直接相关的一系列选项,包含两个或以上的按钮。一般含有三种以上操作使用底部操作列表,一种或者两种操作使用警示框或底部操作列表。

对于警示框(alert)和底部操作列表(actionsheet)的困惑多用于二次确认上,例如微信的退出登录使用的是底部操作列表,而QQ用的是警示框。警示框(alert)和底部操作列表(actionsheet)的区别在于用法:警示框侧重提示文字;进而表示提示文字的内容优先级较高;底部操作列表侧重选择按钮;进而表示选择按钮的功能优先级较高;按钮为0-2个时,建议使用警示框;按钮为2-n个时,建议使用底部操作列表;当然有些场景需要强阻断操作,例如提示没有网络、版本升级等情况需要使用警示框;具体情况可根据产品对待。例如微信退出登录用的是底部操作列表,阻断性不强,对用户打扰程度较低。

二、标签栏(tabbar)和工具栏(toolbar)

标签栏让用户在不同子任务、视图和模式中进行切换。工具栏放置着用于操作当前屏幕中各对象的组件,在iPhone上,工具栏始终位于屏幕底部,而在iPad上则有可能出现在顶部。

例如App Store中底部的标签栏和iOS原生邮件详情页下方工具栏。

标签栏(tabbar)和工具栏(toolbar)之间存在区别:标签栏让用户在不同视图切换,例如App Store点击游戏tab进入游戏内容界面,则涉及到视图切换是标签栏。工具栏则是对当前界面内容进行操作,例如iOS原生邮件点击工具栏中删除,则删除当前邮件。所以涉及到对当前页面进行操作时要考虑使用工具栏。

三、底部动作条(bottomsheets)和菜单(menus)

底部动作条:一个从屏幕底部边缘向上滑出一个面板,在这种方式下向用户呈现一组功能。提供三个或三个以上需要提供给用户选择并且不需要对其进行额外解释的行动选项情境可以采取此方法展现行动选项。可以是宫格样式也可以是列表样式。

菜单:菜单由按钮、动作、点或者包含至少两个菜单项其他控件触发而成立一个临时纸张(paper)。每一个菜单项都是离散选项或者动作,并且能够影响到应用、视图或者视图中选中按钮。

例如微信公众号点击更多出现了一个底部动作条;微信对话长按出现菜单再点击退出出现了一个菜单。

总结下来:

- 如果只有两个或更少数量行动选项可考虑采取菜单(Menu)或者提示框替代。
- 针对长按情境大多数采取菜单(menu)

四、选择器和底部动作条

针对互斥性单项选择需求采取选择器(Selector),好处在于来回切换确定同时由于滚轮式滚动容纳非常多选项很合适。

例如猎聘APP早期版本,在选择当前状态时采取了“删除”、“取消”等字眼描述方式采取了类似“编辑资料”的形式展开全部状态并不能清晰地表达意思且无法容纳更多状态因此做法错误猎聘APP目前已经改为选择器形式展开全部状态并且支持搜索功能使得交互更加友好明确

五、下拉菜单(drop-downmenu)、 底部操 作 列 表 ( actionsheet ) 及活 动 视 图 控 制 器 ( activityviewcontroller )

下拉菜单:通常适用于提供快捷入口导流用户去做其他任务

活动视图控制器:一个临时视图罗列了一系列可以针对页面特定内容系统服务以及定制服务

例子:

- 在支付宝中点击“更多”出现下拉菜单
- 微信公众号主页点击“更多”出现了一个悬浮窗口
- 公众号历史文章中点击“更多”出现活动视图控制器

总结:

- 如果希望提供下一个任务入口则可考虑采取下拉菜单
- 如果希望分享当前页面内容则可考虑活动视图控制器
- 如果希望提供与用户触发相关联行为则可考虑采取 底 部 操 作 列 表 ( actionsheet )

六、Snackbar 和 Toast

Snackbar 是一种针对某些行为反馈机制, 常以小型弹窗形式呈现在手机屏幕最下方, 或者电脑屏幕左下角, 它们会覆盖所有正在运行程序, 包括浮点按钮. Snackbar 会自己消失, 或者当超时时间结束后, 或者当用户触摸屏幕其他位置后.

Toast 主要用于提示系统消息. Toast 同 Snackbar 非常相似, 但是 Toast 并不包含任何交互元素, 也不能从屏幕其他位置关闭.

总结:

1.如果信息反馈需要承载更多提示语建议采取Toast。
2.如果嵌入了交互元素建议采取Snackbar。
3.Toast 相比 Snackbar 提醒强度稍低些。
4.想要学习关于 App 运营等方面知识请关注135编辑器!
文章申明:本文章转载自互联网公开渠道,如有侵权请联系我们删除
文章评价
登录后可以评论
立即登录
分享到