APP设计必修课:如何设计出规范的移动表单组件

今天25学堂小编跟大家开门见山,直奔主题。众所周知在很多电商类APP应用中,内嵌了大量的H5页面,这样的页面不调用手机系统本身的控件,控件的交互方式以及设计样式不受手机系统的限制。

因为H5是HTML生成的,页面可以同时被浏览器和应用读取,所以很多控件的设计形式与传统Web界面上的控件非常相似。

下面25学堂的小编就来跟大家好好的聊一下如何规范的去设计出移动端的表单组件。

同时大家可以欣赏:

1、APP表单设计技巧分享以及移动表单设计界面赏析

2、一种新颖的APP表单交互设计模式优缺点分析

3、好看的iOS7 APP登录表单界面设计欣赏

 

 1、单选框
单选框 (Radio)用于一组相关但互斥的选项中,用户能且仅能选择一个选项,如图所示。单选框选项的数量不宜过多,选项展示的是程序选项,而非数据。如果屏幕空间足够,且选项内容重要需要罗列展示出来,可以使用选项按钮。否则,应使用下拉列表控件。当只有两个选项的时候,且两个选项的含义相反,可使用开关控件。

 

app表单设计规范-单选框

 

2、复选框

复选框(CheckBox)控件的作用是为用户提供一组相互关联但内容不兼容的选项,如图所示。用户可以选择一个或者同时选择多个选项,也可不选择任何选项。复选框的标签是对选中状态的描述,而清除状态的含义必须与选中状态明确相反。

因此,复选框应当仅用于切换选项的开关状态,或者是选择/取消选择一个项目。

作为基础控件之一,复选框广泛应用于不同平台的所有产品中。

 

app表单设计规范-复选框

 

3、文本框

文本框(TextField)是可以接受用户输入文本的圆角区域,如图所示。当用户单击文本输入框时显示键盘。当用户单击键盘上的回车键时,应用程序根据文本框输入的内容进行相应处理。在你决定使用文本框前,先考虑是否有其他控件能让用户的输入变得更简单,如选择器或者列表。能让用户选择的,就不要让用户输入。

 

文本框设计

 

4、下拉框

下拉框(Drop list)又叫下拉菜单,用于从一组互斥值列表中进行选择,如图所示。用户能且仅能选择一个选项。在下拉列表中,用户只能选择列表中列出的选项,最终只显示选择的一项内容。下拉框较为紧凑,对于那些不希望强调的选项来说非常合适。

其对屏幕空间的占用是固定的,节省空间,而且与其包含的选项数量无关。在某些情况下,和选择器(Picker)功能是通用的。

当选项不多的时候,可以考虑使用原生选择器。当表单中含多个下拉选项时,建议使用下拉框。

下拉框

 

5、表格布局设计

在很多APP应用中,如果有很多信息需要归类,且这些信息归类的维度很多,这时就需要使用表格的形式把这些信息归类,便于用户筛选出想要的信息。但是移动端尽量少用表格。

如图所示。归类的信息偏于展现而非操作类型。

订单配送的表格设计

 

以上就是25学堂根据淘宝、美团APP上的一些表单组件进行的 归类和整理。同时这些内容结合了网上大牛的观点。

希望这5种表单设计组件规范可以帮助你更深的了解,让你在移动APP设计当中更加规范、合理。

每天更新,
全站高品质素材免费下载!