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

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

如何使用

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

选择适当的键盘类型

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

默认键盘:常规的全键盘,不做任何限制。

文本键盘:相比默认键盘取消了表情符号,适合输入密码。

整数键盘:只能输入数字0-9。

浮点数键盘:在整数键盘基础上增加了小数点。

电话号码键盘:在数字键盘基础上增加了“*” 和 “#” 。

邮箱地址键盘:在常规全键盘基础上增加了“@”和“.”。

URL键盘:输入网址用的,在常规全键盘上增加或突出“.com”、“.”和“/”等。

数字和符号键盘:相比数字键盘多了很多标点符号。

△  常用的键盘类型布局

某种程度上来说,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元件库分享。请阅读:

iPad拆分键盘

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

△  iPad拆分键盘

为什么银行App要使用乱序键位键盘

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

△  某银行App乱序软键盘

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

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

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

△  搜狗输入法单手键盘

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

△  联想水银键盘

往期回顾:

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

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

================关于优设网================

“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。

【特色推荐】

设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/。

设计微博:拥有粉丝量200万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。

设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

android 系统 keyboard 第一个字母是大写,「这个控件叫什么」系列之虚拟键盘/软键盘/Soft Keyboard...相关推荐

  1. delphi控件切图界面闪烁_「这个控件叫什么」系列之加载占位图+页面指示器

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

  2. Mac系统关闭重启电脑后「重新打开应用及其窗口」功能的方法

    大家在使用Mac电脑时可能会遇到,当您登录 Mac 或打开某个 App 时,App 及其窗口可能会自动重新打开.面对这种现象我们该如何解决呢?下面小编就给大家详细介绍一下控制此现象的方法,希望对大家有 ...

  3. android点击隐藏控件,Android编程实现点击EditText之外的控件隐藏软键盘功能

    本文实例讲述了Android编程实现点击EditText之外的控件隐藏软键盘功能.分享给大家供大家参考,具体如下: 工具类 ... public static void hideKeyboard(Co ...

  4. Android 第十八课 强大的滚动控件 RecyclerView

    步骤: 一.添加依赖库 compile'com.android.support:recyclerview-v7:26.1.0' 二.在activity_mian.xml中,添加RecyclerView ...

  5. Android Native APP开发笔记:使用WebView控件加载网页

    文章目录 目的 基础使用 处理网页导航 加载本地网页 Web和Native之间交互 调试Web应用 处理页面重绘 总结 目的 WebView是一个比较常用的控件,功能上也比较单一,就是用来加载网页的, ...

  6. [习题].FindControl()方法 与 PlaceHolder控件 #2(动态加入「子控件」的事件)

    这是我的文章备份,有空请到我的网站走走, http://www.dotblogs.com.tw/mis2000lab/ 才能掌握我提供的第一手信息,谢谢您. http://www.dotblogs.c ...

  7. Android 打造完美的侧滑菜单/侧滑View控件

    概述 Android 打造完美的侧滑菜单/侧滑View控件,完全自定义实现,支持左右两个方向弹出,代码高度简洁流畅,兼容性高,控件实用方便. 详细 代码下载:http://www.demodashi. ...

  8. [习题]如何触发 GridView 身体里面的「子控件」的事件 (ASP.NET案例精编 / 清华大学出版社 Ch.10/11两章的补充)...

    [习题]如何触发 GridView 身体里面的「子控件」的事件?#1 (ASP.NET案例精编 / 清华大学出版社 Ch.10/11两章的补充) 這個範例是要補充書本「上集」(ASP.NET專題實務) ...

  9. android禁止下拉刷新,Android开发之无痕过渡下拉刷新控件的实现思路详解

    相信大家已经对下拉刷新熟悉得不能再熟悉了,市面上的下拉刷新琳琅满目,然而有很多在我看来略有缺陷,接下来我将说明一下存在的缺陷问题,然后提供一种思路来解决这一缺陷,废话不多说!往下看嘞! 1.市面一些下 ...

最新文章

  1. 机房收费系统总结【5】——无用功
  2. 常用几种激活函数的总结
  3. 小程序的ui应该怎么设计?
  4. 吴恩达深度学习笔记(105)-人脸识别之面部验证与二分类
  5. Spring Boot + Mybatis + Shiro 后台权限管理系统
  6. eclipse如何导出WAR包
  7. android网络请求流程图,Android OKHttp系列1-流程总结
  8. Artificial Intelligence and Change Management
  9. 圣诞前夜预告|深入理解Linux内核经验分享
  10. InstallShild的研究,msde2000,.netframwork,ScriptProject与ScriiptMSIProject的区别
  11. PLECS软件学习使用(一)简单的RLC电路搭建
  12. [摘]UML学习二:标准建模语言UML的静态建模机制
  13. rip和ospf vrrp vlan综合实验
  14. Laravel学习笔记之Demo1——URL生成和存储
  15. LoadRunner牛刀小试
  16. 信用卡的使用之二——哪些情况下银行降额
  17. Android拼接合并图片生成长图
  18. SAAS产品设计原则及产品架构特点
  19. wps表格粗线和细线区别_wps论文三线表的粗线是多少
  20. 如何解决CPU使用率过高问题

热门文章

  1. 手机系统更新有坏处吗?
  2. python sklearn svm多分类_sklearn中SVM一对一多分类参数的研究
  3. 渣本双非进大厂,3轮技术面+1轮HR面,拿下字百万年薪offer
  4. mysql语句创建学生表_用sql语句创建学生表的方法是什么
  5. 最大人工岛[如何让一个连通分量的所有节点都记录总节点数?+给连通分量编号]
  6. java导入csv文件时利弊,关于在自己写的应用上导入csv文件时踩过的坑
  7. Win11一键重装系统后如何使用自带的故障检测修复功能
  8. 我,30多岁的土木工程人,终于转行了
  9. Altium designer17生成PCB出现unknow pin问题解决
  10. Vue中遍历不规律的json对象(递归)