虚拟键盘的设计，其实主要就是围绕两个设计点：效率和精度。

效率：如何协助用户进行更高效的数据输入。

精度：如何保证在一块小屏内确保用户准确无误的输入。

这里举三个体现iOS键盘设计价值的点（其他当然还有很多）：

1. 键盘热区的无感知变化，可以称之为预测输入，视觉感知层面键盘每个区域未发生变化，但是在实际执行层面已经发生了变化。比如当输入hell后，系统会自动辨识预测用户想输入的单词为hello，而后“o”的点击热区范围就会变大。

2. 隐藏手势（长按键盘任意区域）3D touch引发的光标任意定位。

3. 手势摇一摇的还原撤销，是硬件和软件之间的体验搭配。

像这种效率和精度的双重满足的设计细节，有很多，很多操作都是你需要的时候才出现，发现后会更加感叹交互细节设计的Wow。

抛开键盘布局里面的数据规律和人机尺寸数据不说，iOS键盘可以说将主观的经验和客观的数据很好的结合了起来。

在进行界面设计时，比起按钮的设计感与艺术创新度，设计师应该更加注意设计与产品界面合适的按钮。因为在我们设计时，所有的元素，都应该是服务于我们想要设计的产品，都是为了让用户有更好的使用体验。

虚拟键盘(软键盘)设计要点

    前些天花了很多时间写这样一个软键盘，效果是显示一个与键盘外观相似的视图，通过鼠标单击像活动窗口发送虚拟的键盘消息。目标是实现像windows自带的软键盘osk相似。
    看似很简单的工作，设计中却遇到了很多困难。
    困难一：键盘按键分类
        键盘按键有很多种分类方法。
        第一种：按显示分类。按住shift键，字母键、符号键显示上面的字符；按下caps lock键，字母键切换为大写字母。
        第二种：按功能分类。大体有可显示字符类、控制类。控制类包括shift，ctrl等。
        为了解决可变的显示问题，采用了一个自我感觉非常好的解决方案：字符集、键集相互独立。如此一来，只要总体按照功能分类，通过特定功能的按键控制有效字符集即可，也就是说，对普通按键来说，它只负责到指定的字符集中去取对应序号的字符即可。

注意不要和常用的热键冲突

虚拟键盘本质上还是属于一款工具。工具就意味着效率至上

一、软键盘的基本元素

首先，我们先来认识一下软键盘，了解软键盘控件的基本构成元素，下图以 iOS/Android 的默认键盘为例：

1. 内容区按键

键盘的核心主体，不同的键盘类型有不同的内容及布局。

2. 功能按键

键盘上的动作指令，可根据场景定制按键的动作及交互。

3. 其他按键

键盘上的其他按键，包括键盘类型切换、大小写切换、删除、语音输入等。

二、软键盘的类型

了解完软键盘的基本构成，接下来看看软键盘有哪些类型。

即便是在同一个原生系统，软键盘也有着各式各样的不同类型。我们通过软键盘内容区按键的不同，可以分为以下 8 种常用的键盘类型 keyboard type，从而满足大部分的场景需求。

1. 默认键盘

常规的全键盘，不做任何限制，可输入中英文字母数字等：

2. 字母键盘

常规英文输入键盘，不可输入中文，常用于密码输入场景：

3. 邮箱键盘

在默认键盘基础上增加了“@”和“.”，常用在邮箱输入场景：

4. URL键盘

在默认键盘基础上增加了“.com”、“.”和“/”等，常用在输入网址的场景：

5. 数字键盘

仅可输入数字 0-9，常用于输入验证码场景：

6. 电话号码键盘

在数字键盘的基础上，增加「*」「 # 」2 个符号：

7. 小数点键盘

在数字键盘的基础上，增加小数点，常用于金额输入场景：

8. 数字符号键盘

在数字键盘的基础上，多了标点符号：

三、软键盘上的功能按键

除了认识软键盘的类型，还有一个非常重要的元素——功能按键keyboard actions，即键盘上的动作指令，这和用户的填写效率及体验有重要的关联。

不同系统提供了多种动作指令，如iOS提供了多达12种可指定的动作指令，这里就不一一列举了，其中常用的指令有以下这些：

1. 换行 (return)

键盘默认的动作指令，点击执行换行动作，一般用于长文本输入场景。

2. 前往 (go)

点击后执行进入下一个任务项的动作，一般点击后键盘收起且伴随着网页跳离，如输入网址场景。

3. 下一步 (next)

点击后执行切换至下一个输入项的动作，常见于表单填写页。

4. 搜索 (search)

点击后执行搜索动作，一般点击后键盘收起且伴随着网页跳离。

5. 发送 (send)

点击后执行内容传送的动作，常见于通讯工具的信息发送或者评价等场景。

6. 完成 (done)

点击后执行任务完成后终结的动作，如表单填写完成场景。

四、软键盘的细节考量

通过以上的介绍，相信大家对软键盘已经有了大致的认识。接下来来说说在实际的产品设计过程中，我们需要注意到哪些细节？

1. 细节一：根据输入场景唤起恰当的键盘类型

上图是一个填写收件人联系方式和地址的表单页面，在填写过程中可以看到用户遇到了以下几个问题：

1）手机号填写调起的是默认键盘

用户需要手动切换键盘且只能切换至数字符号键盘，除了用户需要输入的数字外还会有很多 “ 没用的 ” 标点符号；如果不小心误触了某些符号，键盘又会自动切换回默认键盘。

2）手机号填写输入框可以填写中文和其他字符

输入框没有做字符类型的限制，且用户点击保存后才会有校验提醒。

以上问题主要是因为没有根据用户的输入场景唤起恰当的键盘而引起的，每一个细节的疏忽都可能会导致不同的体验问题，因此在我们的设计交付物一定要明确键盘的类型。

2. 细节二：“ 巧用 ” 键盘的功能按键，定制恰当的动作指令

除了键盘类型，我们还需要考虑键盘上的功能按键，特别是涉及到表单输入的场景。

从前文的示例动图还可以看到：当用户填写完一项内容后需要用户手动移到下一项的位置并触发再次唤起键盘。

用户在整个交互过程中，手移动的路径是很长的，特别是一些大屏手机，这大大降低了用户的填写效率。我们可以合理的利用键盘上的功能按键来解决这个问题并提升填写效率，实现更好的交互体验。

1）表单的填写场景

用户首次触发填写项唤起键盘，这时候可以把键盘的功能按键 keyboard actions指定为「下一步」，用户完成输入内容点击此动作指令即确认当前输入框的内容同时进入下一个内容输入。

这样不仅可以减少用户操作，提升表单填写效率，甚至可以降低页面的跳出率。还有一个需要注意的点是：到最后一个输入项的时候，功能按键应该指定为「完成」或者「前往」。

2）单项内容填写场景

用户触发填写项唤起键盘后，我们可以通过用户场景来定制动作指令，从而减少用户的操作成本。如搜索场景，我们可以将功能按键指定为「搜索」；在聊天/评论等场景，可以指定为「发送」；在输入网址的场景，可以指定为「前往」……

因此在实际的产品设计过程中，除了标注出键盘类型，我们还需要标注出键盘的功能按键，对于表单填写页面，还应该标注出多种键盘的情况以及功能按键的切换规则。

3. 细节三：考虑键盘唤起和收起时的临界条件

键盘唤起和收起都会引起用户可视区域的变化，因此我们还需要考虑键盘唤起和收起时的临界条件。

1）重要内容是否会被遮挡我们在设计界面的时候，要考虑到唤起键盘时是否会把重要内容遮挡掉

如下图不同产品的登录页面：

唤起输入键盘前：

唤起输入键盘后：

图一初看没有什么问题，实际上却没有考虑到键盘唤起状态时对信息的遮挡。用户输入完手机号，需要先收起键盘再唤起密码的输入，最后又需要先收起键盘才能点击登录按钮，增加了操作成本。

图二和图三则都考虑到了键盘唤起和收起的临界状态，是比较好的案例。

图二采用了页面上移的形式，当键盘被唤起时，页面往上移动，保证重要信息都在用户可视区域内，键盘收起时，页面恢复默认状态；图三的设计保证了无论键盘处于什么状态都不改变页面布局且不会遮挡重要信息。

2）焦点改变与键盘状态的联动

还有一个需要考虑的小细节是用户从唤起键盘到完成输入这一过程并不一定是连续的，如用户聚焦输入框唤起键盘后或者输入到一半时，又想看看页面上的其他内容而上下滑动了页面。

像这样的场景，我们应该如何处理与键盘状态的联动呢？

比较好的做法应该是当用户上下滑动页面时或点击键盘及输入框以外的地方时，收起键盘，即输入框失焦时收起键盘，用户再次聚焦输入框后唤起键盘。

输入框失焦即收起键盘的交互细节是各系统可支持的配置值，实现起来并不复杂。但如果设计交付物没有标注清楚规则的话，开发同学很可能会忽略。

这种情况下当键盘被唤起后，只能由用户手动收起，导致用户在输入的过程可能会出现不顺畅的体验。

需要注意有一个良好的用户体验就行了

 虚拟键盘设计要点 虚拟键盘(‎软键盘)设‎计要点‎写一个软键‎盘,效果是‎显示一个与‎键盘外观相‎似的视图,‎通过鼠标单‎击像活动窗‎口 发送虚拟‎的键盘消息