抓住用户的设计:清晰的移动应用表单


  【编者按】本文转载自@elya妞 的个人博客。为了更多设计师能认真思考移动应用表单的特殊性,最大限度的提升表单设计的体验,提升效率,提高满意度。本文将从清晰的视觉纵线、信息的分组、极致的减法、利用选择代替输入、标签及文字的排布方式、依靠明文确认密码、合理的键盘利用、校验的小秘密这八个维度来分享我的移动应用表单设计秘籍。

  一、清晰的视觉纵线

  用户在浏览信息的时候,如果没有足够多的强调元素,会从上至下,从左至右的浏览,Web端是一个“F”型视线,移动端更经常是“L”型视线(导航和重要操作往往在下边),那么如果你的表单的视觉浏览顺序,符合这个“L”型规律,基本上就符合用户的心理预期,不需要任何的寻找,任何的思考,就可以简单高效的执行完表单项的填写和提交。


  这是一个登录表单视觉纵线的例子,用户先关注到用户名输入框,再关注到密码输入框,然后就自然而然的发现了登录按钮。

  反面的例子很多,比如下面两个:


  第一个反例比较常见,用户输入完用户名和密码之后,直接看到的操作按钮是注册,而不是登录,这种左右的布局方式,即便你用颜色区隔,也阻挡不了用户的视线落到注册上,于是简单的眼动测试就可以发现,这时用户盯着注册停顿思考一下是在所难免的。

  第二个反例则会更加突出一些,因为表单标签与表单的相关性不是很好,用户需要先阅读表单标签的内容,再阅读输入框引导文字的内容,视线一直都是左—— >右——>左——>右,这样已经不够友好了,最后提交的时候,又需要整个视线平移到右上角去寻找登录按钮,当然,我并不是在 challenge iPhone的设计,如果全局都拥有这样的操作栏,右上角提交表单项还好,但这也仅适用于键盘会遮挡提交按钮的情况。

  二、信息的分组

  表单项并不是从上边罗列到下边就可以了,而是要经过信息组织的,同一类的表单可以放在一起,当表单太长的时候,可以拆分成不同的组,这样用户在填写的时候,类似于一种任务拆解,可以一组一组的完成填写。


  登录和注册是两个完全不同的去向,所以在布局上做一个显著的分组,如果用户想要登录的话,专心填写就可以了,如果用户想要注册的话,需要点击注册按钮,去到一个新界面去完成操作。


  填写信息的时候,如果所有想都列出来自然会有较大信息负担,但是如果按组别来填,每个组别只有2~3项,就会觉得没有那么大的压力了。

时间: 2024-07-29 05:41:52

抓住用户的设计:清晰的移动应用表单的相关文章

网页表单设计:电商网站注册表单设计为用户提供方便

文章描述:如何设计注册表单. 注册页面是获取用户资料的主要途径,绝对不是越简单越好,设计要从体验上为用户提供方便,而不是降低注册门槛.网页教学网将结合以前看过关于表单设计的文章和自己的一些浅薄经验做一个总结: (以下内容偏向于B2B的网站) 一『注册的需求包括哪些』 注册的需求大概可以分为四个步骤:①用户类型的分类 ②将访客转化为会员 ③获取用户的资料 ④资料完善和增值引导 ①先看看各大网站是如何做用户类型分类这一步的: 京东商城 中国制造网国际站,将选择地区放在第一步,直接通过国内和国外的IP

网页表单交互设计细节:机票搜素表单的校验

文章描述:表单交互设计之三--机票搜索的校验思考. 在前一篇的校验思考中,我们整体概括了一些校验出现的类型,出现的情况,以及校验设计的设计原则与经验.而在具体设计过程中,需要结合产品的业务逻辑,旅游机票预订的全流程,是我碰到过交互逻辑中,相对比较复杂的情况,它的搜索来说也囊括了比较多的输入项,和各种类别的表单控件,因此它的校验情况也相对比较多样化. 我们来探讨下预订机票中的搜索表单 1. 提到校验,我们往往会联系到提交表单后出现的错误提示类信息,但是其实在填写表单前的提示信息与表单填写校验有着莫

网站设计资源:网站设计中最常用的表单插件

文章简介:网站项目中最常用的表单插件. 今天带来的是网站项目中最常用的表单插件. jQuery Complexify 网站有责任告诉用户他们设置的密码的质量,这款插件可以显示密码的复杂程度,通过视觉反馈把风险降到最低. 使用非常简单,示例 HTML 代码: 1 2 3 4 5 6 7 8 9 <script src="../assets/s/jquery.complexify.js"></script> <div id="demo"&g

网站交互设计的小细节:表单必填项设计思考

相信每个用户面对页面中洋洋洒洒的表单都会倍感烦躁,有的用户甚至直接选择放弃,那么该如何让用户面对表单时避开信息干扰,直接注意到他们的必填信息呢? 如上图,表单信息的表现类别分为: 41%的网站使用标签右对齐 (YouTube, Facebook, Metacafe) 30%的注册表单使用顶端对齐(Behance.net, Wufoo, Tickspot, Mixx, DZone) 29%使用的是标签左对齐((Digg, Ning, Wykop.pl, 43things, StudiVZ) 表单中

在JSP文件中的同一个form表单有多个用来提交表单值的按钮,用户可以通过不同的按钮提交表单,需要调用Action中的不同处理方法,该怎么使用动态方法调用?

问题描述 Action 问题补充:是struts2 怎么修改jsP动态form的action名称呀? 解决方案 function formSubmit(){document.form1.method="post"; var url ="<%=request.getContextPath()%>/hrt/chartSichuan.do?method=recordList"; document.form1.action= url; document.form

用javascript实现改善用户体验之alert提示效果_表单特效

测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试

卧底用户体验设计

用户体验设计这词大概是我心中挥之不去的幽灵,除非我皈依它的门下,否则绝不给我任何喘息. 作为妥协,先提及一本新书,虽然作者与出版商都没有给我任何推介费用,更没有授权我引用相关内容,我还是决定介绍The UX Booth 对本书的一段引用:Winning a User Experience Debate .这篇文章引用了原书第五章的一段内容,我仅引述若干并综合一些要点: 要将用户设计体验融入商业核心,你必须说服同事信任你的意见与专长.良好处理批评/批判是赢得信任的重要方式.轻率的否定 他人会让你辛

优秀的表单设计:能顺利的让用户达到目的

文章描述:以用户视角出发的表单之旅. 用户使用发布表单,就像是一次旅行.旅行的目的是否能达到?过程是否让人满意?这些都决定了用户会否再来这里. 一.那么为什么要以用户的视角呢? 作为设计师,你是否遇到过这种情况: · 我们额外加一个填写项,用来收集用户信息吧:· 我们的表单之所以复杂,是因为我们希望用户多填写内容,这些内容都是有用是:· 我们的表单应该在这最重要的一步出现,这样就能让更多的用户看到它--. 作为用户填表单时,你是否这样想? · 我们填写表单只是为了达到我想要的目的,才不是为了你们

用户体验设计:公用样式模板的设计制作

这个话题是应腾讯ISD同仁之邀在WebReBuild三周年交流会上做的主题分享.由于临场等原因有些问题当时没有讲明白,回来后按原有思路形成了一篇小论文,对其中一些问题进行了进一步阐述.现场有位同行朋友提出了对使用表现性语义的质疑,当时没有给出让他满意的答复,因此文章中花了较多的篇幅来探讨语义性有关的问题,算是对那位朋友的解答. 一. 公用样式模板的"公用"的含义 1. 能够应用在不同功能的web系统上(用在哪?) 企业的web开发团队除了开发一些在公共平台运营为公司用户服务的web产品