app原型设计:盘点那些容易混淆的组件

刚入门的同学们在界面设计的时候,会将一些移动端的组件混淆。今天列举了几组移动端易混淆的组件的区别和用法

第一组:标签栏(tab bar)和工具栏(tool  bar)

标签栏:让用户在不同的子任务、视图和模式中进行切换。

工具栏:放置着用于操作当前屏幕中各对象的组件,在iPhone上,工具栏始终位于屏幕底部,而在iPad上则有可能出现在顶部

它们的区别:

1.标签栏让用户在不同视图切换

例如应用商店里 点击游戏tab,进入游戏内容的界面,所以涉及到视图切换是标签栏(一般在底部,便于单手操作)

2.工具栏则是对当前界面内容的操作

例如微信读书里,在看一本书的时候,会调整屏幕亮度、写想法等,点击工具栏中对应icon即可;所以涉及到对当前页面内容操作的是工具栏

第二组:警示框(alert)和底部操作列表(action  sheet)

警示框是一种强提示,对用户的某个操作给与操作结果的反馈或者响应

而底部操作列表展示了与用户触发的操作直接相关的一系列选项,包含两个或以上的按钮。

一般含有三种以上操作使用底部操作列表,一种或者两种操作使用警示框或底部操作列表

例如:iOS原生邮箱,点击“更多”出现底部操作列表,展示四种操作选项。推特的退出登录仅需要二次确认使用的是警示框。

对于警示框(alert)和底部操作列表(action  sheet)的困惑多用于二次确认上,例如微信的退出登录使用的是底部操作列表,而qq用的是警示框。

警示框(alert)和底部操作列表(action  sheet)的区别于用法:

1.警示框侧重提示文字;进而表示提示文字的内容优先级较高。

2.底部操作列表侧重选择按钮;进而表示选择按钮的功能优先级较高。

3.按钮为0-2个时,建议使用警示框。

4.按钮为2-n个时,建议使用底部操作列表。

5.当然有的场景需要强阻断操作,例如提示没有网络,版本升级,这种情况需要使用警示框。

6.具体情况可根据产品对待。例如微信退出登录用的是底部操作列表,原因,较警示框而言阻断性不强,对用户的打扰程度较低。同时登录按钮位于底部,手指移动路径短。

产品干货内容每日分享,请关注创享公众订阅号“创享产品经理”,超多学习资料还有免费试听课程等你来。

为您推荐

发表评论

电子邮件地址不会被公开。 必填项已用*标注