-
1 教学内容
-
2 教学视频
-
3 课堂练习
3.4 表单
3.4.1 表单结构与设计要点
1．表单结构
表单的基本结构包含三个要素：标签（lable）、输入框（input）、提示语（placeholder）。
2．设计要点
（1）自动聚焦与智能提示
进入表单填写页面时，输入焦点自动被放入第一个输入项，同时弹出输入键盘，让用户少了一步单击操作，如图3-46所示。当输入邮箱类内容时，自动弹出常见邮箱后缀方便用户选择，如图3-47所示。需要特别注意的是，所有焦点所在的输入项的输入框不能被输入键盘挡住。
（2）尽量减少跳转页面
能在一个页面完成的尽量不要再跳转新页面，如果编辑时确实需要跳转新页面那么一定要在编辑前的页面中看到设置的数值。图3-48所示的是添加备注信息的修改日期操作，此时新页面从系统底部弹出，用户既能看到上一级页面的内容，也能在新页面中进行操作。
（3）尽量使用行内标签
当屏幕空间有限时，标签跟输入框组合成单一的元素，如图3-49所示。当用户输内容时，标签就消失，这种设计既美观又不占空间，标识度也有所提高。
（4）简化表单数量与颜色
所有的表单设计都要遵从一个原则，那就是尽量简化表单数量，将用户理解成本降到最低。在色彩搭配方面，不要使用多种颜色相互搭配的设计，而要根据产品的标准色进行设计。
3.4.2 单选框与复选框
1．单选按钮
单选按钮用于一组相关但互斥的选项中，用户能且仅能选择一个选项,如图3-50所示。单选按钮选项的数量不宜过多，如果屏幕空间足够，且选项内容重要需要罗列展示，则可以采用单选按钮。否则,应该使用下拉框组件。而当只有两个选项,且两个选项的含义相反时，可使用开关组件。
2 ．复选框
复选框组件能为用户提供一组相互关联但内容不同的选项，如图3-51所示。
3、思路解析：
无论是单选按钮还是复选框，选中状态与非选中状态的外观一定要有鲜明对比，其外观不局限于圆形，颜色搭配与APP产品风格相一致即可，本例解析如图3-52所示。
3.4.3 文本框与下拉框
1．文本框
当用户单击文本框时系统会自动弹出键盘，文本框的外观可以是矩形也可以是圆角矩形，如图3-54所示。用户输入完成后，单击键盘上的【Enter 】键时，应用程序根据文本框输入的内容进行相应处理。需要说明的是，从用户体验的角度来讲，应该尽量少用文本框组件，能够让用户选择的内容，就不要让用户输入，可以采用下拉框等组件来实现。
2．下拉框
下拉框用于帮助用户在一组互斥的列表中进行选择，其外观根据产品需要进行变如图3-55所示。下拉框的使用可使页面更紧凑，对于那些不希望强调的选项来说非常合适。
3、思路解析：
文本框外观大多数使用圆角，少数使用直角，这要根据产品整体风格而定，边框可以使用灰色描边，文字颜色应该使用程序的主色;下拉框默认状态下，一般需要有文字提示某选项被选中时，会有颜色突出显示，如图3-56所示。
