干货!5大移动端表单设计原则及案例赏析_手机端表格怎么写逻辑-程序员宅基地

技术标签: 原型设计  移动端表单设计  交互设计  产品经理,原型设计工具,原型设计,设计工具  表单设计  

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

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

1. 逻辑清晰

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

 

2. 尽量使用单列设计

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

 

3. 减少输入

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

 

4. 提供合适的输入方式

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

 

 

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

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


移动端表单设计案例欣赏 

1. Dropbox by Sam Atmore

 

 

 

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

          明确的CTA提示 

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

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

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

2. Location Switching - by Nimasha Perera

 

 

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

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

2. Form Validation - by Emmanuel Torres

 

 

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

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

4. Show/Hide Password - by Claudio Scotto

 

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

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

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

5. Explain Everything by Anny

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

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

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


结语:

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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/aimeeth/article/details/80521044

智能推荐

ubuntu学习篇3——SecureCRT安装与配置_ubuntu terminator和securecrt-程序员宅基地

文章浏览阅读964次。  刚开始学习,若有错误处请指出,共同进步。  QQ 群 号:513683159  软件已上传群里1.软件安装  群文件中。2.查看虚拟机IP地址  这边我是使用“桥接模式”,打开虚拟机后进入终端(快捷键:Ctrl+Alt+T)输入命令:ifconfig,可查询到IP地址:192.168.1.112。3.打开SecureCRT  选择“文件”——》“快速连接(Q)”——》进入菜单界面,输入主机名(IP地址),和用户名——》点击“链接”,得到“The remote system refu_ubuntu terminator和securecrt

windows7系统密码忘记解决办法_win7忘记用户名和密码怎么办-程序员宅基地

文章浏览阅读1k次。windows7系统密码忘记解决办法破解用户的密码方法:方法一:f8进入安全模式强行将administrator密码改成123456netuseradministator123456/add方法二:添加一个用户www.wityx.com提升到administrators组里,用此用户登录删除超级用户administrator的密码netuser www.wityx.com 12..._win7忘记用户名和密码怎么办

pcb板可挖孔吗_PCB板微孔加工方法之机械钻孔-程序员宅基地

文章浏览阅读506次。随着电子产品的迅速更新,印刷电路板的印刷已从以前的单层板扩展到双层板和更复杂的高精度多层板。因此,对电路板孔的加工要求越来越高,如孔径越来越小,孔与孔之间的距离越来越小。据了解,环氧树脂基复合材料是纸板厂最常用的材料,孔径的定义是直径0.6mm在小孔以下,0.3mm在微孔以下。今天我将介绍微孔的加工方法:机械钻孔。为了保证更高的加工效率和孔质量,我们减少了不良产品的比较。在机械钻削过程中,应考虑轴..._机械孔如何加入pcb

aix安装 php,AIX6.1下安装oracle10g-程序员宅基地

文章浏览阅读114次。1.Oracle安装环境准备首先安装bash安装bash下载地址http://www.bullfreeware.com/affichage.php?id=1437,下载三个包(依赖关系)ls gettext-0.17-7.aix6.1.ppc.rpm libiconv-1.13.1-3.aix6.1.ppc.rpm bash-4.1-9.aix6.1.ppc.rpmrpm -ivh --nodep..._gettext rpm aix

HTML, CSS学习笔记(完整版)-程序员宅基地

文章浏览阅读7.2k次,点赞4次,收藏39次。第一章 div布局前几课内容.htm是早期的后缀,因为那时只能支持长度为3的后缀,因此html与htm是一样的。shtml是服务器先处理然后再交给浏览器处理 #HTML小知识#之#XHTML与HTML的区别#XHTML是更严谨更纯净的 HTML 版本。XHTML目标是取代HTML。更详细的介绍 XHTML 教程 http://t.cn/h94BV #HTML小知识#

LeetCode刷题指南_leetcode 题库还会不断增长吗-程序员宅基地

文章浏览阅读1k次。以下是我个人做题过程中的一些体会:1. LeetCode的题库越来越大,截止到目前,已经有321个问题了。对于大多数人来说,没有时间也没有必要把所有题目都做一遍(时间充裕可以随意)。刷个100题左右应该就差不多了(可以考虑序号为前100多的题目,相对更经典一点)。2. 从AC率高的开始做,难度从简单->中等,先不要做困难的。3. 可以按照下文的面试出题频率顺序来做,从频率最高的一..._leetcode 题库还会不断增长吗

随便推点

若依前后端分离/微服务版怎样构造免密链接实现其他系统免登录访问_第三方通过地址跳转若依微服务版前端跳过登录页-程序员宅基地

文章浏览阅读2.5k次。场景若依前后端分离版手把手教你本地搭建环境并运行项目:若依前后端分离版手把手教你本地搭建环境并运行项目_BADAO_LIUMANG_QIZHI的博客-程序员宅基地上面在搭建起来前后端分离版的项目后,别的系统要实现通过跳链接的方式直接跳转到使用若依搭建的系统中从而不用登录就能访问系统。注:博客:BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_程序员宅基地关注公众号霸道的程序猿获取编程相关电子书、教程推送与免费下载。实现1、效果2、若依前后端分离版与_第三方通过地址跳转若依微服务版前端跳过登录页

python-matplotlib绘制堆积的条形图-程序员宅基地

文章浏览阅读3.3k次。import matplotlib as mplimport matplotlib.pyplot as pltx=["a","b","c","d","e","f"]y=[2,3,6,7,9,5,]y1=[5,8,9,3,4,6,]plt.xlim(0,20)plt.barh(x,y,align="center",color="r",label="y")plt.barh(x,y1,left..._matlibplot 堆积条形图

【CSS3】:disabled选择器_css3disable-程序员宅基地

文章浏览阅读770次。“:disabled”选择器刚好与“:enabled”选择器相反,用来选择不可用表单元素。要正常使用“:disabled”选择器,需要在表单元素的HTML中设置“disabled”属性。示例演示通过“:disabled”选择器,给不可用输入框设置明显的样式。HTML代码: CSS代码form { mar_css3disable

自己动手画CPU_头歌自己动手画cpu源码-程序员宅基地

文章浏览阅读780次。我将源码放在压缩包里了,大家只需要复制代码,放进头歌里,满分过!,另外在我博客计算机组成原理专栏和对应资源有头歌所有关卡和源码!_头歌自己动手画cpu源码

模块化Java:声明式模块化-程序员宅基地

文章浏览阅读97次。在模块化Java系列文章的第4篇里,我们将介绍声明式模块化,描述如何定义组件并将它们组织在一起,而无需依赖于OSGi API进行编程。前一篇文章,《模块化Java: 动态模块化》描述了如何通过使用服务(service)给应用程序带来动态模块化特性。它们是通过输出的一个(或多个)可以在运行时被动态发现的接口而实现的。尽管这种方式使得client和server完全解耦,但是又带来一个如何(何时)启动服..._hcrx-2019-10-23

使用Python二次开发PDMS和三维字体工具_怎么pdms模型里打字-程序员宅基地

文章浏览阅读1.5k次。提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档前言Python是当前最火热的编程语言之一,在科技领域有广泛的应用。作为一种胶水语言,Python具有良好的交互性,可以调用C/C++的动态链接库,也可以通过Python.Net来调用C#的程序集。Python是当前最受欢迎的编程语言,拥有强大的社区支持,拥有非常多的第三方库,把Python引入工程领域,引入到我们工程设计的实际工作中,非常有吸引力。一、在PDMS中实现运行Python ShellPDMS、S3D是管道专业常用的两个._怎么pdms模型里打字

推荐文章

热门文章

相关标签