热线电话
13321960829

Website News

网站建设相关文章资讯

您现在的位置:
主页 建站资讯 网站设计百科
分享给网站设计师们的UI组件使用小心机
发布时间:2018-10-16 14:00
同样是APP设计,为何别人设计的都那么优秀,其实很多都在于一些小组件和控件的细节设计。当然首先我们要先理解:
 
 
一、标签栏与工具栏
 
什么是标签栏?标签栏是位于屏幕底部的,悬浮在页面上的,当用户点击败它到了二级页面这后才会随着不见。同一视图之间进行切换不同的子任务,视图或模型。
当某个标签被选中的时候,要有颜色等外表上的区分,当然个数也是有限制的,最好不要超过5个,反正目前为止也很少有人设计6个的,因为超过5个就会特别拥挤,毕竟手机屏幕再大也只有
那么大,有很多个就设计个“更多”标签了。
 
 
么是工具栏:工具栏和标签栏一样的也是在屏幕底部,也可以是悬浮在当前页面之上的,如果不需要使用可以隐藏。例如比较常见的是向上滑动界面时,工具栏就会显示不见。工具栏的内容主要是对当前页面的相关操作按钮。
 
标签栏(tab bar)和工具栏(tool bar)的区别:
标签栏让用户在不同视图切换,例如app store 点击游戏tab,进入游戏内容的界面,所以涉及到视图切换是标签栏。
工具栏是对当前界面内容的操作,例如iOS原生邮件点击工具栏中的删除,则删除当前邮件。所以涉及到对当前页面的操作是工具栏。
 




如何使用标签栏与工具栏?
 
切换状态
 
如果我们需要同级别页面之间的切换时,就要使用标签栏,我们所说的标签栏一般为一级导航。
看一下淘宝底部中一级栏目中视图之间的切换就用到了标签栏




再来看浏览器底部的这个评论收藏转发等一些针对当前页面的功能性的操作就应该使用工具栏。




位置状态
 
位置状态:底部的导航如果往上滑动,不想让它消失,要它一直都保持在,那么就使用标签栏
 
如果在到导航上下滑动想让他随着页面的长短来消失或者显示,那么就使用工具栏
 
浏览器底部的这个会随着向上滑动而消失的这个是属于工具栏,要往下滑动才看得到哦,大家可以试看一下。




选中状态
 
 
选中状态:需要用户选中某一项显示不同的内容且有颜色等外表上的区分时,要使用标签栏
 
用户当选择后,出现操作表等与当前界面相关的操作时,也就是承上启下的操作时,应该选择工具栏。
 
 
如图:我们还是看淘宝APP,当我点击底部的选项时,切换的同时,当前选中的是我的购物车,购物车那个按钮就会变成橙色,来告知用户当前选中的是那个界面,所以使用了标签栏。再看看
浏览器中,点击底部按钮后出现操作表且当前选中的按钮也没有外表上的变化,因为不会在当前切换界面,所以选择了工具栏。




二、Snackbar和Toast
 
定义
 
1、什么是Snackbar?
 
Snackbar大多数情况下使用都是在安卓系统中,一般是由于一希提示性的文字一个操作按钮组成,它会在规定年
的时间内,或者用户上点击到其它地方了就会消失。所以说Snackbar不会影响用户对其它地方的操作。如图:上方那一行文字“购物车中有1件商品已降价,快去看看”


 
什么是Toast?
Toast:Toast都是出现在页面的中部或者顶部,悬浮在页面上的,不可以对它进行操作的,出现一下就会自动关闭,在此期间不会影响其它的操作。如图这行一字”“可以快速评价里插入商品名称了哟”

 
2、怎么使用Snackbar和Toast?
 
他们操作是不同的,从前面的介绍中不难发现Toast 弹窗没有任何操作键,而 Snackbar 是有操作键的。
 
如图左边美团的评价页面,打开在中间位置出现一行文字“可以快速评价里插入商品名称了哟”这个就是Toast 弹窗。在几秒内就没有了,是不可以操作的。
如图右边京东的购物车页面,在它的页面上方会看到一行字“购物车中有1件商品已降价,快去看看”这行字是引导你去看其它的商品,点击这行字可以跳到其它的页面,也可以进行关闭操作键,这个是属于Snackbar。
 


3、退出状态不同
 
退出状态不同:Toast弹窗是设置好的,自动消失,不要点击等任何操作的。
 
而 Snackbar 可以超时消失也可以用户主动上滑关闭。存在的时间比Toast弹窗长。
 
如图:左边是一个爱奇艺APP的一个列表页,上方“已为您更新11条新增互动内容”这是属于Toast弹窗,很快就会消失,自动刷新的,
用户不需要任何操作就可以看到内容。
而 Snackbar,除了超时后自动关闭外,也可以通过滑动界面让弹窗主动关闭。
如图右边这是一个酒店APP,底部有一个隐约的一行字"查看更多精彩内容”为了不影响用户观看其它内容,所以在这里选择 Snackbar,在超时的情况下会自动关闭的,还有一种情况就是上下滑动界面时会自动关闭的。


组成元素不同
 
Toast弹窗主要是由提示性文字和半透明的背景组成,也可以加小图标,而 Snackbar 除文字、背景,图标外还有操作键组成。
 
如下图左边App 中只需要提示用即可,“发送成功”的提示,所以选用 Toast,组成元素选用背景+文字+图标,看右边的这个App 需要加入赞、评论、收藏等操作键,所以选择了 Snackbar。





三、Tabs与分段控件
 
1、定义
 
什么是Tabs?
 
Tabs 里 Tab 呈现的内容可以有很大的差别,而且数量没有限制,Tabs 不能作为表单的单选组件。如图左边图中上面部分”关注、
推荐、热点等那一排都是Tab,而且横向是可以多个的,向右滑动就可以看到很多。 
分段控件:每个分段作用是互斥的,在分段控件里,所有的分段选项框在长度上要保持一致,分段控件的分段选项不得超过5个,不可以滑动的,每个分段选项可以是纯文字或者图片。如右图





2. 如何运用?
 
来源不同:分段控件来自 iOS规范,而 Tabs 来源于 MD规范。
 
我们看一下
 
如图左边网易云音乐的我的消息页面,用的是分段控件,而右边网易云音乐的我的视频页面用的是Tabs切换。


 
还有IOS中日历界面点击收件箱,因为是 iOS系统配置的应用,所以界面中切换样式用的是分段控件,如图


 
而反观安卓系统则用的是 Tabs切换。

 
内容不同
 
分段控件主要起到分割和筛选同类数据的作用,外分段控件更多的是以单选功能出现在表单的使用中,而 Tab 则不能作为表单的单选组件。
案例:如图左边,iphone是“健康”APP中的“步数”图表页统计,为了让用户查看起来更加方便,把数据分割为日、周、月、年的不同的步数统计,
因为是同类数据切换,所以选择了分段控件。
而 Tabs 则没有这样的限制,Tabs 里的每一项所呈现的内容可以有很大的差别。Tabs用得地方比较多,如图右边是一个购物APP的分类,他每一个类别的内容都是差别很大的是没有关系的,“居家、用品、玩具”




操作方式不同
 
分段控件都是需要点击操作的,而 Tabs 除了点击外还可以左右自由去滑动操作的。
 
如图左边是一个读书app,因为在表单里它分割的是一些相似的数据,易让用户准确的点击,所以选使用的是分段控件。
右边这个是滴滴出行的APP,这种切换就比较明显,很容易区分,所以选择了可以侧滑屏幕切换的 Tabs。



数量
 
分段控件数量不能超过5个,而 Tabs 没有数量限制,可以添加多个,设置成左右滑动就行。
 
案例:如下图健康APP的界面中因为分类的数量未超过五个(不是所有未超过5个的就要用分段控件,同时也要根据以上说的其他三种情况判断,这里只针对数量阐述而已),所以可以使用分段控件,而某购物APP界面中因为分类数量过多且内容上有区别所以选择了 Tabs。
 
 
四、警告框与操作表
 
1. 定义
 
警告框:是一种操作上的确认,只有当用户点击按钮后确认后才算完成,才可以有其他操作,主要作用是警告或提示用户的。
 
警告框由三部分组成:标题、正文、按钮。有些简单的警告或提示只有正文和按钮即可。
如图左边是一个购物完成后的评价页面,有两个大字是标题,还出现一段正文解释这段提示的内容,然后用户要点击确定或者取消来完成操作。
 
操作表/ActionSheet:操作表通常会从屏幕底部边缘向上滑出一个面板,可提供2个以上的选择。
呈现给用户的是简单、清晰、无须解释的一组操作,没有正文的描述内容(大部分)。另外重要的功能操作也会用红色文字展示。
如图右边是一个购物app的退出操作表,从屏幕底部边缘向上滑出一个面板,可提供2个以上的选择。


 
2. 如何选用?
 
 
文字内容的重要性:选择警示框和操作表时,如果内容非常重要,如左图, 是一个登陆界面,输入密码是个非常严肃重要的事,这个弹窗文字内容对于用户的重要程度,如果内容极为重要则选用警示框。
 
再看看右边的图是QQ聊天记录删除时,出发现的是操作表,因为聊天记录不属于特别重要的信息,不需要很多文字来解释和说明,用户直接操作即可。
 



数量
 
记得操作表按钮数量可以是多个,也是就是2个以上,警示框的按钮数量不可以超过两个。如果数量一样,那么就看重要性了,这里前面一条说过的,这里就不重提了。
如图左边是一个推送消息设置的提示,只有一个按钮。
如图右上边是举报的操作表,有三个按钮。



 
用户操作流畅性
 
 
警示框是以强硬的手法提示用户,停止此操作或者注意些操作的后果,是阻断作用,在用户户操作上的流畅性有着很严重的影响。
 
如果不需要太过强硬,我们就选用只需在屏幕中任意位置点击就会消失的操作表。
 
如图左边就是某软件要访问你的相册出现的警示框,因为这关系到用户的隐私,需要进一步提示。
 
如图右边只是退出账号,不那么重要,在操作上就会流畅很多,只需在屏幕中任意位置点击就会消失的操作表。





总结
 
今天小编给大家分析了8个组件的选用和理解。
 
分别是警告框与操作表标签栏与操作栏Tabs与分段控件Toast与Snackbar。大家都理解了吗?多看几遍可以加深理解与印象哦,明白了就去练习吧。
 

相关文章

友情链接:上海网站建设公司 | 上海电商开发 |