在交互稿中,应重视「键盘类型」的标注

在交互稿的标注中,我们经常会忽略键盘的说明,这是不对的。键盘在用户的交互过程中起到了非常重要的作用,尤其在多个输入框的场景下。


在交互稿的标注中,我们经常会忽略键盘的说明,这是不对的。键盘在用户的交互过程中起到了非常重要的作用,尤其在多个输入框的场景下。

在交互稿中,应重视「键盘类型」的标注

为什么需要标注键盘类型?

在交互稿中,应重视「键盘类型」的标注

大家都知道,一款虚拟键盘(比如iOS系统键盘)有很多种布局类型。在交互稿中,很多人是不标注键盘类型的,我原先也是不标注的。但近来发现键盘对于用户操作的影响其实很大,不标注键盘类型是不对的。一方面,如果键盘调用不当,用户则需要手动切换输入法,这是影响操作效率的(如上图);另一方面,对于多输入框的表单来说,输入框之间的切换、提交表单,这些操作其实都可以通过键盘实现(如上图左),而无需用户手动点击原界面中的元素。最后还有比较重要的一点是:如果设计师不标注,开发同学一般都写成默认键盘,而不会根据场景写成不同类型的键盘。

那么,到底有哪几种键盘?每种键盘有哪些地方是可以控制的呢?

iOS原生应用中的键盘

在交互稿中,应重视「键盘类型」的标注

在交互稿中,应重视「键盘类型」的标注

iOS 中提供了多达12种键盘可以选择(如上图,不讨论中文键盘,中文键盘只有一种布局)。我们可以根据用户当前的需要,提供不同类型键盘。在交互稿中,我们可以将相应的键盘类型名称(英文名)写在界面下方,或者直接使用相应的键盘截图放在交互稿中。对于同一个界面中有不同类型输入框的情况,需要标注出键盘切换的说明。虽然12种键盘类型已经很多,但它们仍然不能覆盖所有场景,这时我们可以进行自定义键盘。当然,开发成本你懂的,开发同学的表情你也懂的。

在交互稿中,应重视「键盘类型」的标注

除了选用不同类型的键盘,部分键盘中还有多种“按键命令”(上图中的蓝色按钮)可以选择,如“完成”、“搜索”、”发送”等。iOS中提供了11种类型的命令,你可以将所需要的命令用文字描述的形式标注在交互稿中,也可以使用截图的方式。值得注意的是,iOS的键盘具有上一项和下一项的功能( <  > ,如上图左上方),这对于表单的交互设计起到了非常重要的作用,一定要好好利用。

Android原生应用中的键盘

在交互稿中,应重视「键盘类型」的标注

如上图所示,Android中提供了9种类型的键盘(同样不讨论中文键盘)。与iOS的键盘调用类似,需要注意多输入框场景下的键盘类型切换。Android场景中的键盘也可以自定义,自定义的成本同样是比较高的,值得斟酌。

在交互稿中,应重视「键盘类型」的标注

同iOS一样,Android的部分键盘也具有多种“按键命令”可以选择:回车、搜索、前往、下一项、完成、发送(未找到案例)。在交互稿中,可以标注出想要的“按键命令”类型。大家应该有注意到,Android中多了一个“下一项”的按键命令,用来替代iOS键盘左上方的“ < >”按键。在多输入框表单的场景下,切记标注出键盘的“按键命令”何时变为“下一项”,何时变为“完成”。

H5下的键盘

在交互稿中,应重视「键盘类型」的标注

在H5环境中,键盘的类型仍然可以自由选择。“按键命令”的类型大部分可以选择,但“完成”和“下一项”不可以选择。也就是说,程序可以控制调出的是“数字键盘”还是“字母键盘”或其他任意类型的键盘。但在“按键命令”类型调用方面,只能调用“搜索”、“回车”、“前往”,而不能调用“下一项”和“完成”。所以在标注交互稿时,需要注意这一点。这个缺陷对于iOS环境中的H5影响并不是太大,因为iOS的键盘具有“< >”和“完成”按钮。但对于Android环境中H5的影响则很大,因为当用户填写完一个输入框想要跳转下一个输入框时,只能手动点击。如果用户下意识地点击“前往”按钮,则可能会出现表单警报(如上图所示)。

这里有一个例外情况,就是当输入框的字符类型是“数字”时,“按键命令”会自动变成“下一项”。Android环境中的这些问题对于用户成本本身就很高的“表单填写”交互来说,其实是很要命的,也是让人无能为力。

PS:上图中键盘上方的白色工具栏(上一项、下一项……)是浏览器提供的插件,不属于系统键盘。

总结

交互稿的标注中,我们经常会忽略键盘的说明,这是不对的。键盘在用户的交互过程中起到了非常重要的作用,尤其在多个输入框的场景下。合理地切换“键盘类型”和“按键命令类型”可以提高用户填写表单的效率,同时也可以让表单填写过程更加顺畅,降低页面的流失率,我相信所有人都知道这点很重要。

交互稿中,除了忽略“键盘的标注”,我们还会忽略很多其他细节的标注,比如过场、加载、热区范围等。对于开发同学来说,不标注一般就意味着不用考虑,指定默认值即可。但对于整个产品来说,每一个细节的忽略都会导致相应的体验问题。所以,如果你还没有和开发同学形成非常良好的默契,还是尽量标注出这些细节吧。

对了,上文中提到的技术上的“可以”和“不可以”都是基于一般的开发投入而言啦。因为对开发同学来说:没有实现不了的功能,只有给不了的时间。

最后抛一个问题: 为什么键盘右下角的“命令按键”有时是“完成”,有时是“前往”?到底应该选哪个呢?欢迎留言讨论……

 

作者:崇书庆-seeking-雷雷,网易UEDC小鲜肉1号,高级交互设计师。花名雷雷,因为外面酷似孙红雷,现支持杭研云信项目。有想法,有态度,爱学习,爱分享就是wuli雷雷~

本文由 @崇书庆 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/26104/

(0)
CatherineCatherine
上一篇 2017-05-13 07:37
下一篇 2017-05-13 09:27

相关推荐

  • 交互设计丛书分享:《瞬间之美:Web界面设计如何让用户心动》

    作者简介: (美国)Robert Hoekman.Jr Robert Hoekman,Jr.著名的交互设计师。Miskeeto公司创始人,曾任职于Adobe、美联航等知名公司。除本书外。他还著有Desiging the Obvious以及FlashUser Experience Best Practi…

    2015-07-26
  • 商业产品的四大设计策略

    我们仍然需要在很多地方持续帮助用户有效监控商业产品的使用效果,为商业生态中的用户打造更高质的用户体验。从而提升商业产品的信任度,以达到商业产品的可持续性发展。这是商业设计师们内心所坚守的情怀,也是恒久为之努力的目标。“太棒了,原来是需要多几步才能完成,新方案一步就能完成,实在是很方便”
    ——2016年4月,参与易用性验证实验(一)的用户如是说“原来这个功能是这样,原来我一直理解错了,太可怕了。难怪有些客户设置后无效,总打电话投诉。”
    ——2016年10月,参与易用性验证实验(二)的用户如是说

    2017-05-12
  • 从谢尔丹认识交互设计

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

    2018-04-17
  • Mate S、S6 edge+用户交互设计对比体验

    每年竞争激烈的手机市场中都会带给我们消费者惊喜。在配置性能等硬实力愈发相近的情况下,各厂商在外观,材质,以及操作系统包括界面优化,交互设计等方面都下足了功夫,来为消费者提供具有各具特色的使用体验,以…

    2015-11-10
  • 平庸的产品和伟大的产品中间只隔了一个:微交互

    微交互,听起来很生疏的这个词,实际上却出现在我们每天的日常生活中,甚至可能早上起床后我们做的第一件事就是一次微交互操作的典型案例。

    2017-05-20
  • 读书会第三期:《交互设计指南》

    《交互设计指南》的作者Dan Saffer是旧金山一家产品设计资讯公司Kicker Studio的负责人,也是交互设计领域的思想先行者,经常在国际进行各种演讲活动。这本书在国内最常见的是2010年发行的第2版中译本,其实它在2006年就有了第1版的英文版,它在10年前的目标读者群是设计行业的资深者,现在很适合交互设计师入门通读。交互设计的4种方法从2003年至2010年常见的交互设计方法论共有4种:以用户为中心的设计、以活动为中心的设计...

    2018-04-20
  • 行云流水般的交互体验:当智能头机邂逅百度音乐

    音乐,作为一直延续的人类共有的精神食粮。从爱迪生发明第一部留声机到后来的黑胶唱片、再到磁带、CD、MP3经历了整整140年,储存和传输音乐的介质从磁性变成了光学;储存歌曲的数量越来越多,体积也越来越小。但是笔者有一个长期被困扰的问题:作为运动爱好者和音乐发烧友,在跑步锻炼时常常需要将iPod或者Sony Walkman笨重的机身绑在胳膊上,然后再插上耳机、选歌、调节音量等等至少4、5步操作才能听到想听的歌;还常常因为线头缠绕,越解越乱。...

    2018-01-30
  • 用户体验很重要,外卖小票了解一下

    失恋了,今天很丧,老板给我画一个小猪佩奇好吗?这个要求是四川资阳的一个女孩子点外卖时,在订单上给店主留的言。没有想到,店主竟然答应了。1当顾客在向外卖商家提需求时他们究竟要的是什么?不久前,一个在外卖小票上画画的帖子在网上刷了屏。原来,四川资阳一女子失恋点外卖要求画小猪佩奇,店主竟然答应了。据店主回忆,“大概在下午4点的时候,店里接到订单,在备注栏中,顾客称‘失恋了,今天很丧,老板给我画一个小猪佩奇好吗?’ ”为了安慰失恋的顾客,王女士...

    2018-03-26
  • 交互师们,知道如何写一份交互说明文档吗?【精品】

    一. 什么是交互说明文档(DRD)? 所谓DRD即是用来承载交互说明,并交付给前端、测试以及开发工程师参考的文档。 在项目中,交互设计师的主要产出物可能依次是:site map,page flow,wireframes。有的大型项目前期…

    2014-11-25
  • 悬浮动效常见的几种玩法

    动效是如今UI设计中的重要组成部分,也是目前最热门的设计趋势之一。在之前的《在现代网页设计中,动效常见的几种用法》这篇文章中,我们探讨了动效对于交互和用户的重要意义,动效在不同的环节发挥的作用越越来越大。而今天我们要聊的是光标悬停特效,这也是近年动效设计的热点之一。

    2017-05-05