UI设计体系是一组用于设计、代码和组件的标准,可以将其视为一份设计协作的仿单,也可以看成一个素材库,用于搜集资源并在你的设计中应用它们

为什么我们需要UI组件

如果在界面设计的每个局部运用同等的UI标准,可能会是一个大工程UI体系匡助用户直观地导航和利用你的程序,并且可以使你程序中各个地方设计保持一致,让用户能够更加快捷熟悉你的设计作风UI体系通过为团队提供更加结构化和引导性的方法为你的产品设计界面,从而来协助团队更有效率的进行开发

UI设计中几种常见组件的区分与用法

一. 警示框(Alert)和底部操作列表(Action Sheet)

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

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

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

警示框偏重提示文字,进而表示提示文字的内容优先级较高;

底部操作列表偏重抉择按钮,进而表示挑选按钮的功效优先级较高;

按钮为0-2个不时,提议应用警示框;

按钮为2-n个经常,提议利用底部操作列表;

二. 标签栏(Tab bar)和工具栏(Tool bar)

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

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

标签栏(tab bar)和工具栏(tool bar)的区分:

标签栏让用户在不同视图切换,例如app store 点击游戏tab,进入游戏内容的界面,所以波及到视图切换是标签栏。

工具栏是对当前界面内容的操作,例如iOS原生邮件点击工具栏中的删除,则删除当前邮件所以波及到对当前页面的操作是工具栏

三. 底部动作条(Bottom sheets)和菜单(Menus)

底部动作条:一个从屏幕底部边缘向上滑出的一个面板,利用这种方法向用户显现一组功用底部动作条提供三个或三个以上的操作需要提供给用户取舍,并且不需要对操作有额外解释的景象

底部动作条可以是列表样式的,也可以是宫格样式

菜单:菜单是临时的一张纸(paper),由按钮(button)、动作(action)、点(pointer)或者包含至少两个菜单项的其他控件触发

每一个菜单项是一个离散的选项或者动作,并且能够影响到应用、视图或者视图中选中的按钮

底部动作条(bottom sheet)和菜单(menu)的区分:

如果只有两个或者更少的操作,或者需要详加描述的,可以考虑运用菜单(Menu)或者提示框替代

长依照操作,多数情形利用菜单(menu)

四. 选择器和底部操作列表

对于互斥的单项选择而言,如果利用选择器。选择器的利益是可以往返切换确定,同时由于选择器里面的内容滚动,所以可以包容非常大都的选项

五. 下拉菜单(Drop-down menu)、底部操作列表(Action sheet)及运动视图控制器(Activity view controller)

下拉菜单:常见适用于提供快速进口,导流用户去做其他操作任务

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

运动视图控制器:是一个临时视图,当中罗列了一系列可以针对页面特定内容的体系服务和定制服务

例如在支付宝中,点击「更多」出现下拉菜单微信公众号主页点击「更多」出现底部操作列表民众号历史文章中点击「更多」出现视图控制器

下拉菜单、底部操作列表及运动视图控制器的区分:

操作选项是提供下一个操作任务进口,则利用下拉菜单

对当前操作的分享,则应用运动视图控制器

对当前页面内容的操作,则利用底部操作列表。

立即

咨询

400电话

电话咨询

400-1875-778

微信咨询

李经理

微信扫一扫加好友

下载源码

返回顶部