移动UI设计中有哪些常见的APP组件

1,266 阅读2分钟

常见APP组件

控制元素是指页面中可与用户交互、向APP发出指令的设计组件,如音乐播放器中调整音乐音量的滑动器;设置页面中控制程序启动的开关;购物车中控制数量的步进器等都属于控制元素。

image.png

筛选器

筛选器是页面中用来调整和筛选数据的组件。数据类型不同,组件的表现形式也有所区别。

时间选择器和地区选择器通常采用上下滚动的方式调整信息。

条件筛选器则让用户从给出的分类条件中选择若干限制条件,从而逐步缩小搜索范围。

image.png

表单 APP 中常见的表单控件有单选框、复选框、文本框和下拉列表等。它们常用于接收用户信息的页面中,如登录页和注册页等。设计时应区分表单内信息的级别,强化重要信息,弱化次要信息,并将同类信息等距排列,以便用户浏览,如右图所示。

image.png

按钮

按钮是APP 的基础控件之一,被广泛应用于页面各模块中,当用户点击按钮后,可触发即时命令,跳转至相应页面、完整的按钮视觉体系分为强、中和弱3 个层次,能区分按钮未点击、点击和不可用3 种状态。

按钮所处位置不同,其外观也会有所区别。位于导航栏的按钮,通常会直接使用“文字”或“文字+ 图标”的形式表现。

位于内容视图的按钮,一般作为重要的交互组件,多用“文字+背景”或“文字+ 背景+ 图标”的形式表现,以增强视觉表现力,引导用户点击。

image.png

image.png

image.png

其他组件

其他组件是指在APP 中必需却不太常用的组件,如提示浮层组件。提示浮层包括轻量级和重量级两种。

轻量级提示浮层一般位于当前场景页面之上,用于通知用户出现的即时问题,出现两秒后自动消失,不影响用户对页面的操作,如图所示;

重量级提示浮层也称对话框,常在APP 处于某种特殊情况时自动弹出,让用户对重要信息进行确认,此时浮层外变为不可操作状态,如图所示。

image.png