美文网首页控件和规范交互范式iDesign
这个控件叫:Soft Keyboard/Virtual Keyb

这个控件叫:Soft Keyboard/Virtual Keyb

作者: 龙爪槐守望者 | 来源:发表于2017-05-10 11:43 被阅读751次

    鉴于国内交互设计名词混乱不统一,很多设计师不知道如何用专业术语称呼一个控件,因此我开了《这个控件叫什么》专题,梳理控件的名称和使用事项,希望能为推动交互设计发展,做出一点微小的贡献。

    Soft Keyboard(Virtual Keyboard/软键盘/虚拟键盘)并不是真实的物理键盘(Physical Keyboard),而是在屏幕内拥有键盘样式和功能的控件,它比真正的键盘尺寸更小,而且没有手感很难盲操作。在触屏当道的移动端Soft Keyboard也可以简称为Keyboard。

    如何使用

    Soft Keyboard具备屏幕内的控件的特性——按需随时改变样式和位置。合理的运用这一特性可以创造独特的优势。

    • 选择适当的键盘类型
      在某个场景下,用户输入的内容类型往往是有限的,某些键盘按键可能完全用不到,保留所有按键不仅浪费移动端珍贵的屏幕空间,多余的选择也降低了用户输入的效率。使用恰当的键盘类型不仅提升输入体验,而且能增强服务器提交数据的校验安全性。iOS、Android提供多种键盘类型布局,常用的键盘类型布局有:

    1.默认键盘:常规的全键盘,不做任何限制。
    2.文本键盘:相比默认键盘取消了表情符号,适合输入密码。
    3.整数键盘:只能输入数字0-9。
    4.浮点数键盘:在整数键盘基础上增加了小数点。
    5.电话号码键盘:在数字键盘基础上增加了“*” 和 “#” 。
    6.邮箱地址键盘:在常规全键盘基础上增加了“@”和“.”。
    7.URL键盘:输入网址用的,在常规全键盘上增加或突出“.com”、“.”和“/”等。
    8.数字和符号键盘:相比数字键盘多了很多标点符号。

    常用的键盘类型布局

    某种程度上来说,Picker可以被当做特殊的键盘类型。此外还可以对键盘的:是否首字母大写、所有字母大写、单词自动补全等参数进行定制,进一步提升效率和体验。

    • 定制动作按键的功能
      键盘上除了输入内容的按键,还有另外一类功能按键。例如在PC端Tab键可以在表单内的多个输入框之间切换,回车键可以换行或者发送内容。Soft Keyboard可以对动作键的具体功能进行定制,常见的定制功能有:
    常见的定制功能

    1.回车(return/enter)。用来换行。
    2.搜索(search)。点击后执行搜索动作。
    3.下一项(next)。通常用在在多个输入框的表单中切换到下一个输入框。
    4.发送(send)。一般用在通讯App中将内容发送出去。
    5.前往(go)。任务过程中到下一个步骤的动作,例如输入网址后,前往打开的网页。
    6.完成(done)。任务完成后终结动作。例如表单提交。

    • 自定义键盘
      假如用户使用第三方输入法就有些悲剧了,第三方的Soft Keyboard不一定完美支持所有键盘类型和动作按键的定制,而且有私自收集数据造成隐私泄露的风险。假如对第三方键盘担忧,或者对输入内容的类型有偏好,可以设计自定义键盘。自定义键盘分为App内输入视图( Input Views)和系统级定制键盘两种。
      App内输入视图是私有定制的,只能在所属的App内使用,不可被其他App或者系统使用。典型案例是iPad版Numbers App,不同数据类型的表格单元格所对应的输入视图也不同,而且还提供简单的数据运算功能。
    iPad版Numbers App

    系统级定制键盘可以在系统和所有App全局使用,搜狗、讯飞等第三方输入法就属于这种。iOS可通过Soft Keyboard的“地球”icon切换不同的系统级定制键盘。


    切换系统级定制键盘

    由国内iOS开发者钟颖(微博昵称 @StackOverflowError)研发的Pin( https://itunes.apple.com/cn/app/pin-clipboard-extension/id1039643846?l=en&mt=8 )提供了一种特殊的系统级定制键盘,通过Pin的键盘可以快速粘贴曾经的剪贴板记录甚至同步Mac的剪贴板内容,还提供对剪贴板内容执行搜索、分词的功能。

    Pin的键盘
    • 不要遮挡当前获得焦点输入框
      在移动端,Soft Keyboard约占五分之二的屏幕面积,这意味着Soft Keyboard在唤起前后,界面布局会产生很大的变化,因此要注意键盘唤起后界面元素位置的变化,不要让键盘遮挡当前获取焦点的输入框,以免用户看不到自己输入的内容。

    相关资料

    • 网易UEDC对键盘类型和动作按键的研究和分享
      iOS共提供11种键盘类型,Android甚至对键盘有多达29种参数定制。网易UEDC(用户体验设计中心)对iOS和Android的键盘进行了系统的研究,提供详细的使用指南和Axure元件库分享。请阅读:
      《交互稿中「键盘类型」的标注》( http://mp.weixin.qq.com/s/ii7iTwT7B-SmHkC_7bcUbQ
      《深度基础 | 交互中的Android键盘详解》( http://mp.weixin.qq.com/s/nQx2CpEHCycwyunEgI-m2w

    • iPad拆分键盘
      移动设备横屏情况下宽度太大,用户手指很难触及到屏幕中线,而且Soft Keyboard会占用过多的纵向屏幕空间,导致操作和显示都非常不便。当你用两指同时向左右拉iPad的软键盘时,键盘就会被拆分,这样能提供更多的内容显示面积,操作也变得更顺利。


      iPad拆分键盘
    • 为什么银行App要使用乱序键位键盘
      在PC时代,有木马病毒通过监控物理键盘的键位来盗取用户密码,注重安全的银行网站将密码输入改为软键盘。正所谓道高一尺魔高一丈,新的木马病毒记录屏幕鼠标点击位置来推算用户输入的内容,于是银行将软键盘升级为乱序键位。


      某银行App乱序软键盘

      银行将这项安全技术从网站照搬到了App里,事实上,在触屏手机上使用乱序软键盘意义不大,不仅极大降低了用户输入效率,木马悄悄截屏或者手机使用者背后有人即可轻易截取密码。可喜的是陆续有银行App采取禁止截图和使用手势密码或指纹等更快更安全的安全技术。

    • 大屏手机的键盘单手操作优化
      现在的手机屏幕尺寸越来越大,单手操作键盘会非常费力,有不少手机厂商和第三方输入法致力于改善这个问题,例如搜狗输入法单手键盘,将键盘宽度压缩至适合单手操作的位置。


      搜狗输入法单手键盘

      更为创新的方案是联想的水银键盘,当手机向一侧倾斜时,通过重力感应水银键盘的按键会将键盘按钮向倾斜的方向集中,最远处的按钮触摸区域更大,拇指可以轻松触及。


      联想水银键盘







    《这个控件叫什么》专题

    这个控件叫:Badge/徽标/小红点
    这个控件叫:A-Z index/字母索引导航
    这个控件叫:Segment Controls/分段控件(附录与Tabs的区别)
    这个控件叫:Skeleton Screen/加载占位图
    这个控件叫:Page Indicator/Page Controls/页面指示器
    这个控件叫:Stepper/步进器
    这个控件叫:Switch/开关/滑动开关/切换开关
    Toast(吐司提示)的曾经、现在与未来
    这个控件叫:Picker/选择器/拾取器
    这个控件叫:Action Sheet/动作菜单/动作面板/行动列表
    这个控件叫:Popover/气泡弹出框/弹出式气泡/气泡
    这个控件叫:Text fields/输入框/文本框
    这个控件可能叫:Notice Bar/通告栏

    相关文章

      网友评论

      • 吴德馨:请问作者:当我们通过改变输入框的 inputView 来自定义键盘的时候,是否可以更改 inputView 的尺寸?(其实主要就是希望自定义的键盘视图更高一些,而不是系统设定的256或216)。
        吴德馨:@龙爪槐守望者 我在 Google 里搜索了好多,都没有找到,基本都是说如何获取弹出的键盘高度,并没有提到更改 inputView 大小
        龙爪槐守望者:@请问一个月 应该可以,搜索输入法就有这个功能
      • huangxiaohao:这个水银键盘好棒
      • 黑白之间:iPad拆分键盘真的比原来的好用多了,虽然一开始看着有点不习惯。联想水银键盘有意思,设计者很有想象力!
      • 王诩:加油

      本文标题:这个控件叫:Soft Keyboard/Virtual Keyb

      本文链接:https://www.haomeiwen.com/subject/kbprattx.html