在屏幕上设计键盘

四月 25th, 2012 39 Comments »

手机都变触屏的了,手机上的键盘也不可避免的成了虚拟键盘。在屏幕上设计虚拟的键盘会遇到些什么问题?

———————————————————————————————
问题一:木有触感了
没有了触感,对于人机交互来说,是个退步。人对设备的操作失去了一个特性,触感的价值,就不必多说了吧。
触屏输入法中实现了“按下键后浮出放大”的功能,但这并不能完全解决无触感的问题,用户并不总是按下后,看,再松开的。因为这样效率太低了。人更愿意相信自己的操作是对的,出错了再修改。所以即使有放大的当前键,也不是总有人看的。

失去触感是移动触屏设备的一大遗憾,或许这也就是科技发展过程中一个不完美的阶段吧。当然我们也不必为触感的消失过分遗憾,科技的进步,必定会朝着弥补这些缺陷的方向发展。也许过不了多久,屏幕就能突起一个个的按键了。

———————————————————————————————
问题二:与26键输入法相比,9键输入法减少了界面间的切换
“是选择9键的输入法,还是选择26键的输入法?”实体键盘时代,你就只能选一次,买手机的时候。现在变成触屏的虚拟键盘了,9键或是26键随时任你选。对这两者的比较也就显得有意义了。

输入需要包括:汉字、英文、数字、各种符号。用户要完成一段输入,往往并不是只写汉字,或只写数字。通常是又有汉字,又有数字,还得点标点符号,说不定还会偶尔拽个英文。于是不得不在多个界面间切换。
9键输入法实际上是用8个键来实现汉字拼音,屏幕里剩下的空间除了切换到英文、符号、数字这些切换键,还有空儿,可以把一些常用符号摆出来,让用户打完文字后,不用切换到“符号”界面就能直接点“句号”,减少了界面间的切换,提高了效率。
26键的输入法,能把所有的26个字母都放下就不容易了,自然没余力摆放常用符号了。

9键的汉字拼音输入界面加入了一些符号,这界面就不能再称为9键汉字拼音了,不好定义名字了,肿么办?再想个别的更贴切的名字就好了。并不能因为内容逻辑不完美就不加入常用符号了。好的设计理念:让用户能更高效的完成任务,而不是单纯强调内容逻辑的准确。相比于26键的输入法,9键输入法有这个条件更好的照顾用户的输入任务。值得肯定的是,大多数第三方9键输入法也都是这么做的。

IOS4原生的笔画输入法,用了5个按键来输入中文笔画,但却没有利用可能的空档儿多塞下几个常用的符号,原本有可能帮助用户少几次界面间的切换,但却没有去做。

分析完了这些后,我想起来去看一眼IOS5的笔画输入法:

当与其他设计者思想相通的那一刻,“我到了~”

界面间切换的频率并不是判断输入法优劣的唯一指标,所以这里也不是说9键输入法就是比26键的好。
输入法是个面向熟手的产品,用户经过一段时间的学习才能较好的掌握。再去浅尝其他输入法时,肯定会觉得有难度。于是,中无论是用26键的,还是用9键的,或者是用手写的,往往都会觉得自己目前用的输入法是最好用的。

———————————————————————————————
问题三:键盘的内容因需要而变
实体键盘中,一个按键上标注的不止是数字,还有符号,也许还有笔画。因为,需要这一个按键在不同的状态下打出来不同的字符。

触屏的虚拟键盘原本就是需要出现的时候才出现的,同样道理,也应该是需要什么样的键盘就出现什么样的键盘。
好的设计理念:为不同的用户任务设计不同的界面。在输入网址时,空格键没用了,“.com”键可以让输入网址更高效。

(26键的键盘终于有空间做一点儿为用户任务的设计了。)

对于只需输入数字的输入框,输入进去别的一定就是错了。既然不希望用户出这种错,那就不提供给用户可能导致错误的工具。这类产品干脆自己做了只能输入数字的输入法,而不是调用系统的输入法。这也正是为特定任务而设计的思想。


———————————————————————————————
问题四:功能更强大了,结构问题也更大了
实体键盘的手机受硬件局限,能打出来的字符以及输入方法都有限。现在变触屏了,全拼、9键拼音、笔画、五笔、手写,英文、数字、符号,你好意思不提供哪项吗?提供如此多的功能,要摆弄清楚这些界面之间的关系也就更难了。

对于输入法,要达到哪些要求才算是个好的结构设计?
要求1:一个按键指向唯一的一个界面。使得用户可以很容易的预判点击按键后会到哪儿。
要求2:同一个按键,在不同的界面上,位置不变。这样更容易记忆按键的位置。
要求3:可直接互通的两个界面中,用于互通的按键在界面中的位置一致。这是为了方便的返回前一个界面,怎么来的就怎么回去,来去一致。
要求4:尽可能的实现两两界面间的直达。这可以让界面间的切换更快捷。

我们挑个最难搞的—IOS系统中的输入法。先看IOS4原生输入法:

IOS的输入法中,如果能从界面1直接到达界面3,3个界面就完全直达了,实际使用起来会方便很多,可行吗?我们来试一下:
如果三个界面都能直接互通:

红色箭头线标出了问题所在:虽然每两个界面都可以间互通了,但却有一组互通按键的位置不一致了。 结论:三个界面要做到两两彼此直接互通,则至少有一组无法实现用于互通的按钮位置一致。

IOS输入法为了保证两界面间用于互通的按键位置一致,砍掉了界面“ABC”上直通界面“#+=”的按键,形成了现在我们看到的方案:

这个方案有哪些不足?
损失了一个直通,这自然带来了相应的跳转不便。
按键“123”在第一个界面上的位置和第三个界面上的位置不同。这个不足的成因虽然是可以解释的,但确实会给用户形成这样的模糊印象:“123按键有时候是在左下角,有时候是往上窜一行的。”

三个界面,要想两两直通,已经出现问题了,如果是4个界面,当然就更有问题了。而第三方输入法就是要面对4个界面。
对于IOS原生的输入法,中文、英文各是一个输入法,于是,先将中文、英文分开成2组,每组中再各自有文字、数字、符号三个界面,总共6个界面:

而第三方输入法,安装后只是一个输入法,要对付6个界面显然太难了。于是第三方通常将中、英文符号以及其他乱七八糟的符号统统划归到一起,形成:中、英、数字、符号4个界面。

既然3个界面,4个界面都无法很好的做到任何两界面全部直接互通,那么第三方索性采用了另外一种思路:“主-从”的信息架构方式,中文界面为“主”,其他页面为“从”:

但是按照这个模型,想要在从界面之间跳转则比较麻烦,总要先回主界面。
如果,在“从界面中1”中添加去“从界面2”和“从界面3”的按键,另外两个从界面也如是,那么… 是的,就成了四个页面两两全部直接互通了。也就无所谓“主-从”的结构了。前面已经分析了,这样做将很难保证“用于互通的按键在界面中的位置一致。”如果你有兴趣,不妨试一下,试试到底会有几组按键不能保证位置一致。这更像是一道数学题。

只是“主-从”结构不够快捷;四个界面两两全部直通又做不好。于是大多数第三方输入法都采取了折中的方式:采用主从结构为基础,并在一些从界面中添加一些去其它从界面的按键。
比如百度输入法:


这是更好的办法吗?还用前面设计要求来衡量,可以看到,嗯,还是有些问题滴:

也许你已经意识到了,这“主从”改良方案中,要实现所有的设计要求,是不可能的。而这些设计要求确实能帮助用户学习、记忆,进而掌握这个输入法,是有价值的。所以,问题出在改良的“主从”架构上,这种架构方案原本就很难同时达到各项设计要求。

下面是另外一个第三方输入法-触宝:

用于两个界面互通的按键位置完全是固定的,赞~ 在从界面上去往其他从界面的按键更少了,更接近纯粹的“主从”架构,界面间的直达也更不便了。
你还发现了些什么?

结构看似是个较真儿的问题,因为用户通常不会意识到结构。对于输入键盘这样的针对熟手用户的产品,用户更倾向于靠记忆去使用,然而,这并不意味着多离奇的结构设计都是ok的,清晰的结构设计是一定程度上的,甚至是无意识的被用户认知到的,帮助用户更快的形成了记忆。

注:这本是一篇约稿,题目与字数都有一定要求,所以写了这么长。但最终未能被采用,所以直接发到blog上来了。

有39 条对“在屏幕上设计键盘”的评论

  1. AG 说:

    请问博主,本文倒数第二章图片中的标示是用什么软件做的?

  2. GB1900 说:

    依旧精彩,期待下篇

  3. ElvisCai.com 说:

    基于Android的输入法,我也写过一篇:
    http://www.elviscai.com/pm/mobile/my-android-101-2/

  4. xLight 说:

    Android上touchpal输入法进入符号界面后,要靠一个“返回”按钮回到正常输入界面,让人立刻就晕菜了

  5. ElvisCai.com 说:

    @xLight ,

    据说那个是可以设置为输入符号后自动返回输入界面的。

  6. Kyle 说:

    很有价值的文章,感谢无私奉献

  7. Jacann 说:

    同问楼主,交互概念图是用什么软件做的?

  8. […] 源地址:http://www.chouyu.com.cn/?p=363 更多 document.getElementById(“bdshell_js”).src = “http://bdimg.share.baidu.com/static/js/shell_v2.js?t=” + new Date().getHours(); 0 标签: 键盘设计 本文链接: 你手机屏幕上的键盘是这样设计出来的 版权所有: 非特殊声明均为本站原创文章,转载请注明出处:移动互联网每日速递 订阅更新: 您可以通过RSS订阅我们的内容更新 […]

  9. abfg4i5pf5lb 说:

    又有新文章了,不错,支持博主。

  10. ping 说:

    第三方输入法想太多了…

  11. ck香水多少钱 说:

    4cs4yo明天你还会更新的吧 明天我在来

  12. 在屏幕上设计键盘 | 异次元小窝 说:

    […] 源地址:http://www.chouyu.com.cn/?p=363 […]

  13. a71k61 说:

    不错,我要转载一下。

  14. 羊毛线团 说:

    看得我晕菜了
    楼主有更好的虚拟键盘的设计方法么?

  15. 性保健品 说:

    谢谢了。 不错。

  16. 在屏幕上设计键盘 | UxFACE 说:

    […] http://www.chouyu.com.cn/?p=363) This entry was posted in 交互设计 and tagged 百度输入法, 虚拟键盘, 触宝, […]

  17. 五星宏辉破解 说:

    文章挺好的,谢谢。

  18. 6tin3s 说:

    楼主,永远支持你!

  19. http://www.rijigu.com/ 说:

    必须支持,精品每一篇。

  20. 8ho2jo 说:

    支持你,博主!

  21. 0nf13t 说:

    支持你,博主!

  22. 抓住用户的设计:触屏上的键盘 | 雷锋网 说:

    […] 原文链接:在屏幕上设计键盘 […]

  23. 抓住用户的设计:触屏上的键盘 | 云动态 说:

    […] 原文链接:在屏幕上设计键盘 […]

  24. 钟伟任 说:

    不断的切换界面才是最烦人的事情。

  25. […] 源地址:http://www.chouyu.com.cn/?p=363 […]

  26. yiduiyi 说:

    请问能投稿吗?

  27. 浩安 说:

    关于问题一,之前有想过在屏幕上贴一种膜,就算不能有按下去的触感,其实让这种膜有一种略粘的感觉也好,这样,当手在离开屏幕时会有一种“不舍”的感觉。(粗略构想)

  28. 合页 说:

    很好的文章,不错的想法

  29. 合页 说:

    很好的文章,希望楼主能多写点

  30. 眼镜代理一件代发 说:

    很好的文章,学习了

  31. 不锈钢合页 说:

    写的太好了很喜欢看这样的文章

  32. command C 说:

    有些设计太依照原则了也不好

  33. 快乐在于充实 说:

    1、庸人败于惰,能人败于傲 世上两种人必定惨败,一种是懒惰之人,另一种是骄傲之人。前者什么事都想在“明日”再做,结果总是一事无成;后者瞧不起天下所有人,自认为自己最聪明,常常招来他人的不满和怨恨,于是往往受人诋毁、咒骂,最后被恶意的诽谤所吞没。 2、不必

  34. 龙猫 说:

    有水平

  35. 五金配件 说:

    很好非常好,希望能越来越好!

  36. 十万酒 说:

    还是比较喜欢键盘的。。。

  37. www.qqfenzu.cc 说:

    真是相当不错哦

  38. www.liquan.org 说:

    就爱看这样的好文章

  39. 麦田记忆 说:

    第一个那种手机有那种模拟触摸的物理震动,触摸屏应该能实现,最后总结的有什么输入法比较好吗

发表评论

您的大名: