键盘弹起时的交互

之所以想分享篇关于键盘弹起的文章,是因为在最近做的项目中,无论在画交互稿,还是进行设计探讨,发现一个小小的键盘在细节点上有很多需要注意的点(keng),也希望同是设计师的大家多提这方面的更多建议。

键盘作为用户与手机每天都在接触的重要媒介,其存在的重要性不言而喻,每次对话,每次输入地址,每次查询机票,基本都会弹起一次,那么它弹起的时候,会发生什么呢?

1.键盘弹起时,请给我出口

键盘在弹起的时候,一般是带着用户进入一个新的模态空间去进行输入,这个时候就要考虑如何让用户退出。那么退出的方式有很多种,可以用图标示意,可以直接用文字提示(ios搜索的做法),也可使用返回的形式告知用户。

随着输入方式的多样化,例如搜索框旁边会增加语音输入,识别输入等,可能会有空间利用的问题,所以我在举的例子中就是在输入中舍弃部分功能,将其转化为退出按钮的做法,因为个人认为在输入中需要集中注意的还是“输入”而不是“切换”,如果仍然希望为用户提供其他形式输入的入口,也可在在键盘中加入。

2.键盘弹起时,推荐他们想要的

用户在使用键盘之前都做过些什么呢?也许他们已经在别处搜索过同样的词语,但没找到满意的结果,也许他们刚看完一部电影,来找影评,更常见更主动的场景是,用户正在阅读一篇文章,看到个感兴趣单不太懂的词语,于是进行复制,然后到别处去找这个词,那么这个时候如果能适时地在键盘上推荐,也可以让整个输入流程更顺畅。

3.键盘弹起时,返回再不是返回

手机的底部一般有导航条,这个导航条因手机而异。有的键盘会专门设计一个收起的区域,而有的会比较简洁,直接跟导航条联动。如果是后者的话,则务必考虑在交互稿中分两种状态呈现。

4.键盘弹起时,占位符靠边

输入框的占位符具有一定的提示作用,所以在未激活态的时候居中展示可读性更强。而弹起键盘激活输入框时,输入区域则集中在左侧,所以占位符可以靠边。

5.键盘弹起时,内容遮一半

这是比较容易忽略的一个点。键盘弹起时,介于用户要输入而又未输入之间,似乎是一个很好的推荐区域,可以放很多相关的内容引导用户进行搜索。但此时又大多伴随着键盘的弹起,那么这时候丰富的内容就被遮挡了差不多一半。苹果WWDC2017中的一篇演讲The Keys to a Better Text Input Experience提到了一个自适应内容的理念,希望对大家有所启发,就是将内容在键盘弹起的时候进行适当的压缩变化,这样就可以保证内容的全量化展现。

小结

说实话,我作为一名设计师有时候也会忽略一些细节,但我也知道这些细节很重要,因此也在逐步积累与改进,共勉。

文中提到的

https://developer.apple.com/videos/play/wwdc2017/242/

微信公众号:交互小怪兽

文章标签:

0 条评论 164 次阅读

  1. 既来之,则言之。

发表评论

Top