美文网首页
如何做好移动应用的表单设计

如何做好移动应用的表单设计

作者: 马卡他弟本来是我的昵称 | 来源:发表于2017-09-18 08:35 被阅读0次

减少输入

移动应用受键盘输入效率的限制,不适合做太多的数据录入工作。建议使用接口减少用户的数据录入工作。具体场景有:
1.要求输入地址时,可通过获取用户定位减少用户必要的数据录入。
2.要求填写银行卡号、身份证号时,可通过访问用户设备相机、相册通过上传图片的方式减少用户必要的数据录入。
还可以通过提供默认值的方式减少用户录入工作,但注意默认值支持用户自由的进行修改,保证用户的控制与自由。

再认而非回忆

当应用不得不让用户进行录入时,建议提供选项、slider、audio 或 picker 等控件,而非提供文本输入框。
选项不但可以减少用户手指录入的负担,也能减轻用户大脑记忆的负担。

格式提示

预期错误发生后要求改正,不如在一开始就防止错误发生。
在用户录入数据前给予格式提示可以有效的帮助用户进行数据录入工作,提高用户体验。
格式提示有 2 种类型:
1.文本框内缺省提示。提示强度较弱,当用户开始录入数据后提示将消失,适用于格式较简单的提示。
2.文本框底部提示。提示强度较强,提示文案常驻文本框底部或临近位置,用户在录入数据时可实时查看格式提示,适用于格式较复杂的提示,例如用户名、密码等 string 类型的文本框。

防止过度提示,类似手机号码等文本框,无需在提供多余的提示打扰用户。

即时反馈

用户在录入数据时希望知道自己的操作是否正确、系统将如何处理“我”所录入的数据。
即时反馈可帮助用户快速的发现数据录入的错误及时修改,提高填写表单的正确率。
可在用户录入时实时监听文本框的值变化事件,若格式正确,则立即给予反馈(在当前录入区域以绿色图标等表意符号进行反馈);在文本框失去焦点时判断,若格式错误则可以使用强度稍强的方式提示录入有误。

注意反馈的力度。根据表单的性质以及对应值的关键程度需要把控好反馈的强度,例如密码错误等关键错误提示,需要使用强度较强的模态弹窗进行反馈。(关于把控反馈强度的心得,将在今后的文章中分享 :-) )

系统对用户的反馈往往有 2 种工作模式:

  1. 本地进行。例如判断手机号码格式(1 开头的 11 位纯数字)。
  2. 需要请求服务器进行验证。例如判断手机号是否已注册会员。

第 1 种工作模式由于可在本地进行,占用系统资源小,可动态监听、即时反馈。
第 2 种公众模式由于需要请求服务器,建议在用户点击“提交”/“登录” 按钮时再反馈(注意此时需要再按钮上提供系统正在处理请求的局部反馈)。

以上。

相关文章

  • 如何做好移动应用的表单设计

    减少输入 移动应用受键盘输入效率的限制,不适合做太多的数据录入工作。建议使用接口减少用户的数据录入工作。具体场景有...

  • [交互设计]PC&移动端表单设计

    手机App为生活带来巨大便利,多种多样的移动表单设计形式进入我们的工作与生活。表单是移动应用中与用户产生最多交互的...

  • 移动应用设计细节分析——表单

    本文通过表单的系统表现以及用户输入交互两方面,分析表单设计的一些准则和优秀案例。 参考文章:表单经典原则是错的?来...

  • 表单设计-学习笔记

    文/丹顶鹤的日记本 学习笔记注:本文所说的表单(Form),是网页或者移动应用表单。 一) 表单的作用 表单的主要...

  • 移动设计第1课:如何设计好移动表单

    本文来源于一本书《Mobile Design Book》,是在浏览每日新产品时发现的,当在其网站注册了邮箱后,就会...

  • 移动UI设计的八大原则

    原文-云瑞设计分享-da酥 设计很多时候都靠灵感闪现,移动应用的设计则更加的灵活多变,如何能更好的设计出一个应用,...

  • Bootstrap 响应式设计

    简介 本教程讲解如何在网页布局中应用响应式设计。在课程中,您将学到响应式 Web 设计。随着移动设备的普及,如何让...

  • 如何做好app应用的ui设计

    如何做好app应用的ui设计。ui设计是企业在进行APP应用开发设计当中的一个重要环节,是影响用户体验效果的关键因...

  • 如何编写稳定流畅的iOS移动端应用

    如何编写稳定流畅的iOS移动端应用 如何编写稳定流畅的iOS移动端应用

  • 2018年的移动用户体验设计趋势

    事情在移动应用程序世界中迅速发展。为了在移动用户体验设计领域取得成功,设计师必须具有远见并为即将到来的新挑战做好准...

网友评论

      本文标题:如何做好移动应用的表单设计

      本文链接:https://www.haomeiwen.com/subject/cwamsxtx.html