表单设计的细节分析

GUI实战班不忘初心！持续努力平凡变非凡主讲老师：琦琦老师姓名：琦琦QQ：3003183864拥有5年设计经验1年线下教育经验网页设计师UI设计师

技能web网页设计、电商设计、界面设计、APP设计微信端设计课堂须知1：上课时间：周一至周五晚上20：00-22：00，潭州课堂（PC客户端、移动APP端、网页版）2：本期主讲琦琦老师：3003183864，主要负责专业授课以及问题答疑，作业收集/点评、考勤、回访等:3：作业统一发到指定QQ邮箱：3003183864@，作业格式：日期+课时+QQ网名4：如果有事不能来上课，需提前向老师请假。5：按时提交作业，不能缺交。（看视频学习的同学也一样）如由于工作繁忙不能及时提交作业，需向老师说明情况。6：百度网盘链接：链接：/s/1kv3Yfob9LyE4NCnVwI6gJA提取码：ct53注：该链接是老师课后上传本节课高清录播视频+素材；录播视频也可直接在潭州课堂PC客户端、APP里面进行在线观看！如有疑问私聊老师！课堂纪律1：准时参加课程，不迟到，不早退，不旷课2：上课时公屏上不允许刷屏、闲聊等任何影响其他同学学习情况发生注意：任何讲师不会以任何形式让任何学员打钱，如果报名或者升班补款，请认准官方报名老师及官方报名账号；并且，同学之间应注意交流空间，不要随意轻信任何跟钱财相关的话题，注意自身财产安全。课程大纲第一节

产品思维与需求提起方法

第二节图标设计理论与设计风格第三节应用icon创意思维表现第四节图标设计的品牌基因法则第五节金刚区图标风格解剖第六节整体图标输出点评第七节颜色与风格规范拟定第八节界面设计规范与组件的认识第九节视觉设计必备表现形式第十节界面设计中的排版方式第十一节整体界面输出点评第十二节团队合作方式与IOS项目重建第十三节界面设计细节样式表现第十四节表单设计的细节分析第十五节MaterialDesign设计规范第十六节整体界面输出点评第十七节视觉版本迭代详解（视觉）第十八节系统适配与界面标注、切图第十九节整体界面输出点评第十五节表单设计的细节分析Designidea什么是表单HUMANINTERFACEGUIDELINES谷歌MaterialDesign设计交互语言表单在网页或app中主要负责数据采集的功能。表单本身只是一个数据采集的工具，本身不具有属性，它可以被灵活运用于多种功能模块中，例如用于登录注册模块的信息采集，评论的编辑页，朋友圈的发布页等。什么是表单HUMANINTERFACEGUIDELINES谷歌MaterialDesign设计交互语言如何提升表单体验HUMANINTERFACEGUIDELINES谷歌MaterialDesign设计交互语言1.尽可能减少不必要的表单项目如何提升表单体验HUMANINTERFACEGUIDELINES谷歌MaterialDesign设计交互语言2.尽可能减少表单中的多余字段如何提升表单体验HUMANINTERFACEGUIDELINES谷歌MaterialDesign设计交互语言3.选择最简单的输入方式为了让用户少动，可以将多数用户都会选择的选项设置成默认项。如：选择城市时默认当前定位城市。如何提升表单体验HUMANINTERFACEGUIDELINES谷歌MaterialDesign设计交互语言4.内容展示(1)一页只做一件事，不要一次性展示全部内容（内容较多）如何提升表单体验HUMANINTERFACEGUIDELINES谷歌MaterialDesign设计交互语言4.内容展示(2)较少页面跳转知识点一：如何提升表单体验HUMANINTERFACEGUIDELINES谷歌MaterialDesign设计交互语言5.选择合理的标签对齐方式顶对齐vs左对齐vs右对齐。知识点一：如何提升表单体验HUMANINTERFACEGUIDELINES谷歌MaterialDesign设计交互语言6.选择合适的按钮位置（1）.右上角文字按钮优势：不影响用户对表单内容的注意力；用户在完成表单时，视线会从下向上转移，有助于用户作进一步检查。适用于：表单项目少，在一屏内完全展示；内容复杂且重要，需要用户专注于表单本身，认证填写。知识点一：如何提升表单体验HUMANINTERFACEGUIDELINES谷歌MaterialDesign设计交互语言6.选择合适的按钮位置（2）.固定在屏幕底部优势：用户在任何时间都可以点击；强烈吸引用户的注意力，引导用户点击。缺点：可能会被键盘阻挡。适用于：表单内容重要性不高，不需要全部完成，也不需要过于仔细，需要促进用户快速完成提交。知识点一：如何提升表单体验HUMANINTERFACEGUIDELINES谷歌MaterialDesign设计交互语言6.选择合适的按钮位置（3）.随键盘移动优势：距离键盘位置最近，方便输入完立即提交；不会被键盘阻挡。适用于：表单内容以输入为主，简单不易出错，输入后需要快速提交。知识点一：如何提升表单体验HUMANINTERFACEGUIDELINES谷歌MaterialDesign设计交互语言6.选择合适的按钮位置（4）.置于表单底部优势：符合用户从上至下的阅读方向；可以促进用户完成整个表单。适用于：表单内容少于一页，按钮最靠近表单；表单内容很长，需要引导用户全部填写。知识点一：如何提升表单体验HUMANINTERFACEGUIDELINES谷歌MaterialDesign设计交互语言7.信息分组表单的设计不是简单地从上到下的罗列信息。将同类信息进行分组，可以更好的唤起用户记忆。将不同组的信息进行打包分类，用卡片形式展现出来，既能给用户更好的视觉效果，也更能将用户注意力集中到某一分类上，更好的填写表单。知识点一：如何提升表单体验HUMANINTERFACEGUIDELINES谷歌MaterialDesign设计交互语言8.输入前给指导如对填写信息有格式、内容上的要求，在输入前就应该清晰提示出来，避免事后错误提示造成用户反感。知识点一：如何提升表单体验HUMANINTERFACEGUIDELINES谷歌MaterialDesign设计交互语言9.及时反馈如对填写信息有格式、内容上的要求，在输入前就应该清晰提示出来，避免事后错误提示造成用户反感。知识点一：如何提升表单体验HUMANINTERFACEGUIDELINES谷歌MaterialDesign设计交互语言10.用好键盘合理的自动弹出输入法，根据信息内容自动匹配键盘类型。同时根据填写步骤，合理的定义键盘右下角的功能键，省去收回键盘。根据不同的操作类型，可以在键盘上增加匹配的操作栏，帮助用户收起键盘或进行上下项切换。知识点一：如何提升表单体验HUMANINTERFACEGUIDELINES谷歌MaterialDesign设计交互语言11.二次确认