這個(gè)控件叫:Soft Keyboard/Virtual Keyboard/軟鍵盤/虛擬鍵盤

鑒于國內(nèi)交互設(shè)計(jì)名詞混亂不統(tǒng)一,很多設(shè)計(jì)師不知道如何用專業(yè)術(shù)語稱呼一個(gè)控件,因此我開了《這個(gè)控件叫什么》專題,梳理控件的名稱和使用事項(xiàng),希望能為推動交互設(shè)計(jì)發(fā)展,做出一點(diǎn)微小的貢獻(xiàn)。

Soft Keyboard(Virtual Keyboard/軟鍵盤/虛擬鍵盤)并不是真實(shí)的物理鍵盤(Physical Keyboard),而是在屏幕內(nèi)擁有鍵盤樣式和功能的控件,它比真正的鍵盤尺寸更小,而且沒有手感很難盲操作。在觸屏當(dāng)?shù)赖囊苿佣薙oft Keyboard也可以簡稱為Keyboard。

如何使用

Soft Keyboard具備屏幕內(nèi)的控件的特性——按需隨時(shí)改變樣式和位置。合理的運(yùn)用這一特性可以創(chuàng)造獨(dú)特的優(yōu)勢。

  • 選擇適當(dāng)?shù)逆I盤類型
    在某個(gè)場景下,用戶輸入的內(nèi)容類型往往是有限的,某些鍵盤按鍵可能完全用不到,保留所有按鍵不僅浪費(fèi)移動端珍貴的屏幕空間,多余的選擇也降低了用戶輸入的效率。使用恰當(dāng)?shù)逆I盤類型不僅提升輸入體驗(yàn),而且能增強(qiáng)服務(wù)器提交數(shù)據(jù)的校驗(yàn)安全性。iOS、Android提供多種鍵盤類型布局,常用的鍵盤類型布局有:

1.默認(rèn)鍵盤:常規(guī)的全鍵盤,不做任何限制。
2.文本鍵盤:相比默認(rèn)鍵盤取消了表情符號,適合輸入密碼。
3.整數(shù)鍵盤:只能輸入數(shù)字0-9。
4.浮點(diǎn)數(shù)鍵盤:在整數(shù)鍵盤基礎(chǔ)上增加了小數(shù)點(diǎn)。
5.電話號碼鍵盤:在數(shù)字鍵盤基礎(chǔ)上增加了“*” 和 “#” 。
6.郵箱地址鍵盤:在常規(guī)全鍵盤基礎(chǔ)上增加了“@”和“.”。
7.URL鍵盤:輸入網(wǎng)址用的,在常規(guī)全鍵盤上增加或突出“.com”、“.”和“/”等。
8.數(shù)字和符號鍵盤:相比數(shù)字鍵盤多了很多標(biāo)點(diǎn)符號。

常用的鍵盤類型布局

某種程度上來說,Picker可以被當(dāng)做特殊的鍵盤類型。此外還可以對鍵盤的:是否首字母大寫、所有字母大寫、單詞自動補(bǔ)全等參數(shù)進(jìn)行定制,進(jìn)一步提升效率和體驗(yàn)。

  • 定制動作按鍵的功能
    鍵盤上除了輸入內(nèi)容的按鍵,還有另外一類功能按鍵。例如在PC端Tab鍵可以在表單內(nèi)的多個(gè)輸入框之間切換,回車鍵可以換行或者發(fā)送內(nèi)容。Soft Keyboard可以對動作鍵的具體功能進(jìn)行定制,常見的定制功能有:
常見的定制功能

1.回車(return/enter)。用來換行。
2.搜索(search)。點(diǎn)擊后執(zhí)行搜索動作。
3.下一項(xiàng)(next)。通常用在在多個(gè)輸入框的表單中切換到下一個(gè)輸入框。
4.發(fā)送(send)。一般用在通訊App中將內(nèi)容發(fā)送出去。
5.前往(go)。任務(wù)過程中到下一個(gè)步驟的動作,例如輸入網(wǎng)址后,前往打開的網(wǎng)頁。
6.完成(done)。任務(wù)完成后終結(jié)動作。例如表單提交。

  • 自定義鍵盤
    假如用戶使用第三方輸入法就有些悲劇了,第三方的Soft Keyboard不一定完美支持所有鍵盤類型和動作按鍵的定制,而且有私自收集數(shù)據(jù)造成隱私泄露的風(fēng)險(xiǎn)。假如對第三方鍵盤擔(dān)憂,或者對輸入內(nèi)容的類型有偏好,可以設(shè)計(jì)自定義鍵盤。自定義鍵盤分為App內(nèi)輸入視圖( Input Views)和系統(tǒng)級定制鍵盤兩種。
    App內(nèi)輸入視圖是私有定制的,只能在所屬的App內(nèi)使用,不可被其他App或者系統(tǒng)使用。典型案例是iPad版Numbers App,不同數(shù)據(jù)類型的表格單元格所對應(yīng)的輸入視圖也不同,而且還提供簡單的數(shù)據(jù)運(yùn)算功能。
iPad版Numbers App

系統(tǒng)級定制鍵盤可以在系統(tǒng)和所有App全局使用,搜狗、訊飛等第三方輸入法就屬于這種。iOS可通過Soft Keyboard的“地球”icon切換不同的系統(tǒng)級定制鍵盤。


切換系統(tǒng)級定制鍵盤

由國內(nèi)iOS開發(fā)者鐘穎(微博昵稱 @StackOverflowError)研發(fā)的Pin( https://itunes.apple.com/cn/app/pin-clipboard-extension/id1039643846?l=en&mt=8 )提供了一種特殊的系統(tǒng)級定制鍵盤,通過Pin的鍵盤可以快速粘貼曾經(jīng)的剪貼板記錄甚至同步Mac的剪貼板內(nèi)容,還提供對剪貼板內(nèi)容執(zhí)行搜索、分詞的功能。

Pin的鍵盤

  • 不要遮擋當(dāng)前獲得焦點(diǎn)輸入框
    在移動端,Soft Keyboard約占五分之二的屏幕面積,這意味著Soft Keyboard在喚起前后,界面布局會產(chǎn)生很大的變化,因此要注意鍵盤喚起后界面元素位置的變化,不要讓鍵盤遮擋當(dāng)前獲取焦點(diǎn)的輸入框,以免用戶看不到自己輸入的內(nèi)容。

相關(guān)資料

  • 網(wǎng)易UEDC對鍵盤類型和動作按鍵的研究和分享
    iOS共提供11種鍵盤類型,Android甚至對鍵盤有多達(dá)29種參數(shù)定制。網(wǎng)易UEDC(用戶體驗(yàn)設(shè)計(jì)中心)對iOS和Android的鍵盤進(jìn)行了系統(tǒng)的研究,提供詳細(xì)的使用指南和Axure元件庫分享。請閱讀:
    《交互稿中「鍵盤類型」的標(biāo)注》( http://mp.weixin.qq.com/s/ii7iTwT7B-SmHkC_7bcUbQ
    《深度基礎(chǔ) | 交互中的Android鍵盤詳解》( http://mp.weixin.qq.com/s/nQx2CpEHCycwyunEgI-m2w

  • iPad拆分鍵盤
    移動設(shè)備橫屏情況下寬度太大,用戶手指很難觸及到屏幕中線,而且Soft Keyboard會占用過多的縱向屏幕空間,導(dǎo)致操作和顯示都非常不便。當(dāng)你用兩指同時(shí)向左右拉iPad的軟鍵盤時(shí),鍵盤就會被拆分,這樣能提供更多的內(nèi)容顯示面積,操作也變得更順利。


    iPad拆分鍵盤
  • 為什么銀行App要使用亂序鍵位鍵盤
    在PC時(shí)代,有木馬病毒通過監(jiān)控物理鍵盤的鍵位來盜取用戶密碼,注重安全的銀行網(wǎng)站將密碼輸入改為軟鍵盤。正所謂道高一尺魔高一丈,新的木馬病毒記錄屏幕鼠標(biāo)點(diǎn)擊位置來推算用戶輸入的內(nèi)容,于是銀行將軟鍵盤升級為亂序鍵位。


    某銀行App亂序軟鍵盤

    銀行將這項(xiàng)安全技術(shù)從網(wǎng)站照搬到了App里,事實(shí)上,在觸屏手機(jī)上使用亂序軟鍵盤意義不大,不僅極大降低了用戶輸入效率,木馬悄悄截屏或者手機(jī)使用者背后有人即可輕易截取密碼。可喜的是陸續(xù)有銀行App采取禁止截圖和使用手勢密碼或指紋等更快更安全的安全技術(shù)。

  • 大屏手機(jī)的鍵盤單手操作優(yōu)化
    現(xiàn)在的手機(jī)屏幕尺寸越來越大,單手操作鍵盤會非常費(fèi)力,有不少手機(jī)廠商和第三方輸入法致力于改善這個(gè)問題,例如搜狗輸入法單手鍵盤,將鍵盤寬度壓縮至適合單手操作的位置。


    搜狗輸入法單手鍵盤

    更為創(chuàng)新的方案是聯(lián)想的水銀鍵盤,當(dāng)手機(jī)向一側(cè)傾斜時(shí),通過重力感應(yīng)水銀鍵盤的按鍵會將鍵盤按鈕向傾斜的方向集中,最遠(yuǎn)處的按鈕觸摸區(qū)域更大,拇指可以輕松觸及。


    聯(lián)想水銀鍵盤








《這個(gè)控件叫什么》專題

這個(gè)控件叫:Badge/徽標(biāo)/小紅點(diǎn)
這個(gè)控件叫:A-Z index/字母索引導(dǎo)航
這個(gè)控件叫:Segment Controls/分段控件(附錄與Tabs的區(qū)別)
這個(gè)控件叫:Skeleton Screen/加載占位圖
這個(gè)控件叫:Page Indicator/Page Controls/頁面指示器
這個(gè)控件叫:Stepper/步進(jìn)器
這個(gè)控件叫:Switch/開關(guān)/滑動開關(guān)/切換開關(guān)
Toast(吐司提示)的曾經(jīng)、現(xiàn)在與未來
這個(gè)控件叫:Picker/選擇器/拾取器
這個(gè)控件叫:Action Sheet/動作菜單/動作面板/行動列表
這個(gè)控件叫:Popover/氣泡彈出框/彈出式氣泡/氣泡
這個(gè)控件叫:Text fields/輸入框/文本框
這個(gè)控件可能叫:Notice Bar/通告欄

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,351評論 25 708
  • 《裕語言》速成開發(fā)手冊3.0 官方用戶交流:iApp開發(fā)交流(1) 239547050iApp開發(fā)交流(2) 10...
    葉染柒丶閱讀 28,812評論 5 20
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,692評論 4 61
  • 一、進(jìn)程與線程 1.進(jìn)程: 系統(tǒng)中正在運(yùn)行的一個(gè)應(yīng)用程序,每個(gè)進(jìn)程之間是獨(dú)立的,每個(gè)進(jìn)程均運(yùn)行在其專用且受保護(hù)的內(nèi)...
    云上的彩閱讀 759評論 0 0

友情鏈接更多精彩內(nèi)容