当我们在享受手机App为生活带来的巨大便利时,无形中已经经历了多种多样的移动表单设计形式。而表单设计又是移动应用设计中与用户产生最多交互的步骤,包括用户注册、订阅服务、用户反馈、问卷表单、买卖交易等等。一个优秀的表单设计更有助于提升用户体验,提高转化率,达到更好的营销效果

每一个表单设计的页面都有一个特定的目的,或是吸引注册,或是达成交易。考虑不周甚至是错误的设计有可能会导致用户的流失或交易失败。因此,我们需要了解一下表单设计的基本原则,避免自己在做设计的时候踩地雷。

1. 逻辑清晰

表单是同用户进行沟通的语言。和任何对话一样,它应当以符合逻辑的方式帮助双方完成交流。

2. 尽量使用单列设计

多列的表单容易容易让用户漏填,无法集中精力完成填写。而单列的表单填写路径单一、直接、相比而言更为高效。

3. 减少输入

表单越长越复杂用户完成整体表单的意愿就越低 – 尤其是在小屏幕上。最大限度地减少输入字段数,使你的表单载入更快速,尤其是当您向用户索取大量信息的时候保持表单越简短越好。

4. 提供合适的输入方式

在输入账号、密码,填写邮箱,输入昵称等,均需提供不同的键盘,尽量减少输入错误,帮助用户快速完成填写。

5. 避免将标签作为占位符使用

有一种设计模式是让标签作为占位符置于输入框中,当用户点击输入时候就自动消失。这种设计固然简约,但是用户在输入的时候很容易忘记他们需要输入的字段是什么,也会产生问题。

移动端表单设计案例欣赏

1. Dropbox by Sam Atmore

设计原则:登陆、注册页面轮播展示

明确的CTA提示

在Sam的这个登陆/注册的表单设计中,登陆和注册的逻辑非常清晰。

一是单列的二选一表单设计。用户在开始使用App之前,只需要在两个可选项中选择其中一个,随标签提示进行下一步操作。即便是误触,也可以通过简单的轮播图滑动效果选择另一个选项。

其次,登陆和注册页面的CTA按钮表述非常明确,让用户明确行为的意图和功能,具有强烈的引导作用。

2. Location Switching - by Nimasha Perera

设计原则:智能自动填充选项

表单设计中越来越融入科技化的元素。例如利用自动定位功能,可以根据当前位置进行信息智能填充。这项操作为用户省去了地理位置选择,以及货币转化的过程,节省了不少的时间和精力。而在传统的定位表单设计中,面对位置切换,往往是一长串的城市名,经常令人眼花缭乱。

3. Form Validation - by Emmanuel Torres

设计原则:明显可见的提示信息

用户在登陆或注册的过程中,理想状态是完成信息填写并提交。但实际操作中错误无可避免。所以我们的表单设计需要考虑到可见的、有辨识度的信息提示,及时提醒用户信息填写错误。而不是在他们完成全部信息填写之后再告诉他们出错了。

4. Show/Hide Password - by Claudio Scotto

设计原则:密码提示及忘记密码提示可视化

用户经常遇到的另一个问题是忘记密码,因为大多数密码输入字段由于安全原因会被屏蔽。

建议采取的措施是在密码字段旁边添加一个“显示密码”复选框或图标。 一旦用户点击它,他们将会取消屏蔽密码并查看他们错误的位置。此类设计对于移动端的小键盘简直是完美设置。

5. Explain Everything by Anny

设计原则:标签设计图标化

移动端表单设计样式中,有一种设计方案是是将标签设计成图标,这样一来画面就显得灵活而且更加简洁。因为图标的提示作用,输入框已有输入内容时用户也能很清楚已经输入的是什么字段的内容。而底部的多平台关联注册方式也为用户提供了更加简便的注册方式。使得用户能更便捷的完成应用注册。Mockplus设计的这款应用原型将两者融合在一起,也是一个非常明智的表单设计选择。

作为一款既适用于移动App设计也适用于网页项目设计的原型工具,Mockplus在表单设计的环节有其独特的优势。表单设计所需要的元素都能在软件中轻松找到。例如,占位符,图标,输入框,数字键盘等等。

结语:

无论是填写移动端表单还是网页表单的时候,用户的犹豫是不可避免的。作为设计师或开发人员,学会将这个过程变的便捷而轻松,达成设定目标才是最终的目的。我们应当让表单设计成为优势,而非弱点。一个高度有针对性的表单设计,贴心细致的细节和体验,坚持不懈的改良和调整,高效快速的提交,顺畅的流程,这些才是优秀表单应有的样子。

移动端 html 表单案例,【干货】5大移动端表单设计原则及案例赏析相关推荐

  1. HBase的RowKey设计原则含案例(全)

    前言 HBase的RowKey的行由行键按字典顺序排序,这样的设计优化了扫描,允许存储相关的行或者那些将被一起读的邻近的行.然而,设计不好的行键是导致 hotspotting 的常见原因.当大量的客户 ...

  2. 案例分享 | 如何实践 4 个用户体验设计原则

    作者 / Google Play Apps & Games Team 本文是数字健康连载的最后一篇文章,由 Google 数字健康团队 (Kate Lockhart) 和 Google 平台与 ...

  3. MYSQL——索引设计原则与案例分析

    摘要 B+ 树为了维护索引有序性,在插入新值的时候需要做必要的维护.假如表中 R1~R5 的 (ID,k) 值分别为 (100,1).(200,2).(300,3).(500,5) 和 (600,6) ...

  4. 维度表创建规范_数据仓库维度建模-维度表设计

    1 维度表的定义 在维度建模中,通常将指标的度量称之为"事实",将产生度量的环境称之为"维度".将描述同一个业务实体的的多个维度列组合在一起,就是常说的&quo ...

  5. a表两个字段都与b表一个字段关联_Oracle系列第二章----表,精彩延续。。。

    第一节 表的概念 表设计的原则 2.1 表 数据库中以表为组织单位存储数据.表用来存储一些事物的信息,首先需要有一个表名,以及存储的信息. 2.2 设计原则 好的数据库表设计会影响数据库操作效率.特别 ...

  6. html表单验证案例,HTML5表单验证(4个实用的表单美化案例)

    multipart/form-data 在使用包含文件上传控件的表单时,必须使用 autocomplete="on" 自动补全功能 novalidate 不验证 placehold ...

  7. Java数据结构(1.1):数据结构入门+线性表、算法时间复杂度与空间复杂度、线性表、顺序表、单双链表实现、Java线性表、栈、队列、Java栈与队列。

    数据结构与算法入门 问题1:为什么要学习数据结构          如果说学习语文的最终目的是写小说的话,那么能不能在识字.组词.造句后就直接写小说了,肯定是不行的, 中间还有一个必经的阶段:就是写作 ...

  8. java表单自动绑定数据_java工作流系统表单自动 获取数据

    关键词:工作流快速开发平台  工作流流设计  业务流程管理   asp.net 开源工作流  bpm工作流系统  java工作流主流框架  自定义工作流引擎 表单设计器  流程设计器 什么是数据自动获 ...

  9. abap mm后台表_【中后台应用】从表单抽象到表单中台

    从表单抽象到表单中台 相信前端开发的同学,对表单其实并不陌生,而且时至今日,表单应用的编写因为React.Vue等框架的出现,也变得更加地便捷了.在前端工作中,有着很多中后台应用-表单的开发工作量,笔 ...

  10. element-ui表单_每日UI挑战强加-登录表单(分步教程)

    element-ui表单 A step by step journey to create a good design from the daily UI challenge 一步步走,从日常的UI挑 ...

最新文章

  1. 用c自制编程语言,(怒)自制编程语言
  2. python 添加进度条
  3. Deep Non-Line-of-Sight Reconstruction:深度非视域重建
  4. SAP WM 物料主数据里的Palletization Data
  5. Intellij idea workflow 工作流插件安装
  6. HDU4970 Killing Monsters dp
  7. JSP简单练习-JSP动作指令
  8. 每天进步一点点《ML - 支持向量机》
  9. java线程画动图闪,Android中利用画图类和线程画出闪烁的心形,android心形,package com....
  10. [Lintcode]102. Linked List Cycle/[Leetcode]
  11. 使用PS创造非凡动物形象
  12. niceScroll 滚动条的用法
  13. 史上最详细的虚拟机VMware12安装Windows7教程
  14. STM32F103_study61_The punctual atoms(Clock System Intro)
  15. 正则系列之量词(Quantifiers)
  16. Mac电脑的强大压缩工具——FastZip,加密压缩。
  17. MongoDB 全面总结
  18. 思考者的回归--转帖今何在的优美文章《窗》之三
  19. 银河麒麟系统共享打印机方法
  20. 阿里云服务器创建快照、回滚磁盘

热门文章

  1. c语言已知斜率 求倾角,直线与方程(一)倾斜角与斜率
  2. VC6中如何让改变控件Botton的字体(大小和字体)
  3. C语言 判断一个数是否为水仙花数
  4. ADA程序实例(面向对象特性之多态)
  5. java osm_OSM初识(三)OSM Data
  6. 计算机的开机键在哪里设置,笔记本电脑怎么开机 笔记本电脑开机键在哪
  7. 红蓝对抗---蓝队手册
  8. linux 对战平台,【浩方对战平台和搜狗输入法 For Linux哪个好用】浩方对战平台和搜狗输入法 For Linux对比-ZOL下载...
  9. [Error Msg] The root link_base has an inertia specified in the URDF, but KDL does not support ...
  10. 锁存器和缓冲器的区别