「这个控件叫什么」系列之虚拟键盘/软键盘/Soft Keyboard - 优设网 - UISDC

「这个控件叫什么」系列之虚拟键盘/软键盘/Soft Keyboard

2017/05/11 10998评论区

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

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)提供了一种特殊的系统级定制键盘,通过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采取禁止截图和使用手势密码或指纹等更快更安全的安全技术。

大屏手机的键盘单手操作优化

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

△  搜狗输入法单手键盘

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

△  联想水银键盘

往期回顾:

  1. 《「这个控件叫什么」系列之小红点+索引导航+分段控件》
  2. 《「这个控件叫什么」系列之加载占位图+页面指示器》
  3. 《「这个控件叫什么」系列之步进器+SWITCH》
  4. 《「这个控件叫什么」系列之TOAST》
  5. 《「这个控件叫什么」系列之PICKER/选择器/拾取器》

后面优设会持续更新,想提前学习的可以关注作者的微信公众号:

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量200万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/soft-keyboard-design-element

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

界面设计 设计圈干货 排版布局 版式设计 职场 优设专访 优设大课堂 设计达人 设计师干货 web前端开发 配色 视觉设计 素材下载 AI教程 设计理论 设计流程 神器下载 字体下载 设计师专访 psd下载 设计规范 海报设计 设计趋势 用户体验设计 动效设计 logo设计 平面设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里