如何设计完美的移动端表单【UXRen译#169】

如何设计完美的移动端表单【UXRen译#169】

作者:Levi Kovacs   |  翻译:楠木,校审:小蟹

 

不是所有人都喜欢填写表单。它不是什么有趣的事情,但它是我们必须做的事,完成一件事情的方法,可以说是一个工具。所以,让我们不再关注如何让它有趣,而是如何让它尽可能高效。

当然,它应该是美学上让人愉悦的,但我们这里的目标是使其可用,并帮助人们尽快完成它。

 

1、使用分段选择控件而不是下拉菜单

在一个有2-5个选项的单选情景内,使用内联分段选择控件而不是下拉菜单。主要是因为所有的选择都是立即可见的,并且可使用单个交互动作进行选择而不是三个(点击打开选项,执行选择,确定)。

如何设计完美的移动端表单【UXRen译#169】

 

2、将多个选择的下拉菜单合并在单个区域内

这一条可能不适用于所有地方,但是时间选择器是个很好的例子。它包含三个部分,年月日,这意味着如果用下拉菜单的话,至少有三个三步动作,加起来一共9个步骤。这太多了。而使用单个区域来做整个时间选择器则只需五步:打开,选择年,月,日,确定。

如何设计完美的移动端表单【UXRen译#169】

 

3、使用开关代替下拉菜单

一个包含两个选择的下拉菜单,如“显示”及“隐藏”像是勾选框。像图上所示的下拉菜单是在逼迫用户做多余的交互动作。同样的情况可以使用勾选框或者开关,二元选择的完美实现方法。

如何设计完美的移动端表单【UXRen译#169】

 

4、滑动器

通过切换控制方式,你可以将一个单调笨重的下拉菜单转变为可简单快速浏览的页面。考虑使用滑动器来选择范围内的一个或多个值。

如何设计完美的移动端表单【UXRen译#169】

 

5、避免使用多列

尤其是在较小的屏幕上,其物理边界帮助用户集中着手于内容上。这样整个页面导航更容易并且帮助用户使用时走在正确的轨道上。

如何设计完美的移动端表单【UXRen译#169】

 

6、使用步骤代替下拉菜单

当用户需要对数字做增加或减少的小调整时,避免使用自由形态输入方式以及下拉菜单。步骤选择器帮助最大程度减少错误发生,并减少为得到正确的数值所需的点击次数。

如何设计完美的移动端表单【UXRen译#169】

 

7、将报错信息在每行内显示而不是组合显示

在字段旁边显示上下文的错误比以前更重要。大部分时候,表格的上部或下部在屏幕可视范围之外,所以在对的位置提示用户非常重要。要在错误发生的时候以及发生的位置报错。避免以下两种方式报错:简单的表述“有四个错误”,或者在页面的最下方列出所有问题。

如何设计完美的移动端表单【UXRen译#169】

 

8、不要重复必填区域

根据经验来说,尽量避免显示不必要的字段。它会让表格更简短,用户更快乐。但有时候你确实不能避免它。所以当出现可选填的字段时,突出显示它,而不是突出必填字段或者用“*”来表示其他字段。

如何设计完美的移动端表单【UXRen译#169】

 

9、把相关的字段组合起来

组合相关的字段帮助人们更快浏览并发现他们想要的东西。同时这样可以打破冗长的表格,变之为几个部分。从而各个击破。

如何设计完美的移动端表单【UXRen译#169】

 

10、提供舒适的可触摸区域

不要把按钮和触摸区域做的太小。用户不是在用鼠标在点击,而是用他们的手指。

如何设计完美的移动端表单【UXRen译#169】

 

11、保持平台的一致性

做移动端特别是app时尽量和平台保持一致。尽可能使用相同的交互模式,提供熟悉的界面给用户。人们对同一个设备上的任一app中的返回按钮抱有同样的期待,它可能是iOS,Android或者Windows手机。

始终把用户的目标记在心里,同时如果你能在设计表格时努力一点点,你将会降低放弃率并提高转化率。确保你已经订阅了更多像这样的文章,另外这是我们正在做的帮助你设计更好表格的工具。

 


更多译文:

30个笑死人的设计
2017年移动端用户体验设计趋势
人机交互的四次重大变革
迪斯尼电影APP用户画像高清中文版
什么是用户体验文案设计?
全部160+篇译文>>

 

申请加入UXRen翻译组>>

uxren-fanyizu-00

 


译者:楠木     审校:小蟹

作者:Levi Kovacs

原文链接:https://uxplanet.org (需翻墙)

原文标题:《Building Great Mobile Forms》

版权声明:

  • 本文版权归:UXRen翻译组 所有;
  • 转载带有“UXRen译”抬头的翻译文章,文章标题必须保留“UXRen译”字样;
  • 转载文中必须保留:“UXRen翻译组”、“作者”、“译者”及“审校者”信息;
  • 转载文末必须保留本译文网页链接地址;
  • 如未遵照上述规则转载,视为侵权,UXRen社区保留随时追责的权利。
 

UXRen公众账号
关注UXRen微信公众号(cnUXRen)

UXRen社区欢迎各界用户体验从业者及学生投稿优质原创文章。投稿请关注UXRen社区公众账cnUXRen(上面有二维码)留言“我要投稿”,小编会及时与您取得联系。

版权声明:除转载文章外,本站所有文章版权归UXRen社区所有,转载请注明出处:UXRen社区,并保留本站原文链接地址。本站部分文章来自互联网及公开渠道,如有侵权请及时联系我们。邮箱:contact@13tech.com.cn

原创文章,作者:震天下,如若转载,请注明出处:https://www.iamue.com/21049/

(0)
震天下震天下
上一篇 2017-08-07
下一篇 2017-08-07

相关推荐

  • 设计师100问:问天问地问自己【UXRen译#179】

    作者:Jon Moore  |  翻译:hanbb,校审:宝珠 副标题:聪明的设计需要问对问题   一个设计师的工作不仅仅是调整像素和完善曲线。如果你问我在Innovatemap 的日常工作中和我在UX Power Tools的项目中学到些什么,那…

    交互专题 2017-10-11
  • 未来全新的用户界面将重塑设计师的工作【UXRen译#156】

    副标题:图形用户界面更进一步的思考 作者:Paul Boag  |  翻译:文松,校审:林有九   我们目前的生活已经离不开图形用户界面,它萌芽于施乐帕克研究中心(PARC),目前已经成为PC很重要的部分。不光这样,随着网页…

    交互专题 2017-08-07
  • 关于2017年设计趋势的13个预言

    在未来,当对微小细节的关注渗入用户体验设计的每一寸土壤;当对像素级完美的追求成为设计的基本要求;当将简单便捷的设计理念融入用户的日常生活,那么我们就能够帮助用户体验全新的生活。 在2016这一年,全世界笃信…

    交互专题 2017-08-07
  • 交互设计师的60日计划之第八天

    今天仍然在处理上周五的需求。参与讨论的人越多,战线就拖得越长。不过讨论虽然效率低,却能出现各种各样的想法和方案,不靠谱的,靠谱的。 2015/08/04 与老大谈话所得题目起的有点大,不过这是今天老大和我讲的主…

    交互专题 2015-08-20
  • 阿里设计专家深度解读:全链路设计师和设计增值再现

    分享嘉宾:汪方进(1688UED设计总监) 点评嘉宾:高峰(阿里巴巴国际UED B2B总监)、周敏青(阿里巴巴国际UED AliExpress总监)   前些日子的美国大选,特朗普胜出了,这个结果让很多小伙伴惊呆了!他竞选口号是:M…

    交互专题 2017-09-11
  • 从谢尔丹认识交互设计

    通常来说,拥有成熟产品的大型互联网公司都会设有交互设计岗位,这个岗位在近几年的招聘市场上也越炒越火。不同于视觉设计师有可视化的作品展示,交互设计师的工作大多无法直观可视化或出于保密性难以对外展示,所以在大众心目中始终是神秘的存在。如同武侠世界里的隐居剑客,高手榜上虽没它的名字,但江湖中处处是它的传说。交互设计了解一下交互设计(英文Interaction Design, 缩写IXD),是设计系统动态、人机互动方式的领域,通俗来说就是“用户...

    2018-04-17
  • APP中使用UI交互设计动效的三个好处

    1.让整个画面充满活力 在界面中加入了动态元素,可以很大的增加用户使用app趣味性,使整个app界面看起来不会那么枯燥,ui设计需要做的就是让 这些动态的元素效果有一种和用户在交流的情感。 来源 来源 来源 2.提高…

    2015-11-11
  • 这个简单粗暴的设计为何是“好设计”?

    作者:UX沐沐(公众号:Liveux)   20世纪著名建筑师史密斯.德罗在总结他成功经验时说“魔鬼藏在细节中”,面对一些习以为常的设计,设计师能否洞察背后的不寻常? 今天想探讨一个我们每天都能见到数十次的“寻常”设计…

    交互专题 2017-08-07
  • 【笔记】对话十五年设计老兵问答实录

    2017年10月28日,UXRen深圳分舵举办了《对话十五年设计老兵:提问&分享&讨论》的分享活动,本文基于嘉宾刘云天设计总监的问题回答整理而成。   活动笔记(by A.King & 绿宝): 问题1:你在腾讯10年的…

    交互专题 2017-11-13
  • 用微妙动效改善用户体验的简单方法

    译者:zyl0127     应用程序中的动效具有新的改良性的意义。跟过去的华丽、混乱的网站动画不同,新的动画干净、流畅,并且易于导航。忘掉你所知的GIF、令人不愉快的广告和Flash网站吧, 这些都是过去的事情了。 当…

    交互专题 2017-08-07