
@龍爪槐守望者 :鑒于國內(nèi)交互設計名詞混亂不統(tǒng)一,很多設計師不知道如何用專業(yè)術語稱呼一個控件,因此我開了《這個控件叫什么》專題,梳理控件的名稱和使用事項,希望能為推動交互設計發(fā)展,做出一點微小的貢獻。
Soft Keyboard(Virtual Keyboard/軟鍵盤/虛擬鍵盤)并不是真實的物理鍵盤(Physical Keyboard),而是在屏幕內(nèi)擁有鍵盤樣式和功能的控件,它比真正的鍵盤尺寸更小,而且沒有手感很難盲操作。在觸屏當?shù)赖囊苿佣薙oft Keyboard也可以簡稱為Keyboard。
如何使用
Soft Keyboard具備屏幕內(nèi)的控件的特性——按需隨時改變樣式和位置。合理的運用這一特性可以創(chuàng)造獨特的優(yōu)勢。
選擇適當?shù)逆I盤類型
在某個場景下,用戶輸入的內(nèi)容類型往往是有限的,某些鍵盤按鍵可能完全用不到,保留所有按鍵不僅浪費移動端珍貴的屏幕空間,多余的選擇也降低了用戶輸入的效率。使用恰當?shù)逆I盤類型不僅提升輸入體驗,而且能增強服務器提交數(shù)據(jù)的校驗安全性。iOS、Android提供多種鍵盤類型布局,常用的鍵盤類型布局有:
- 默認鍵盤:常規(guī)的全鍵盤,不做任何限制。
- 文本鍵盤:相比默認鍵盤取消了表情符號,適合輸入密碼。
- 整數(shù)鍵盤:只能輸入數(shù)字0-9。
- 浮點數(shù)鍵盤:在整數(shù)鍵盤基礎上增加了小數(shù)點。
- 電話號碼鍵盤:在數(shù)字鍵盤基礎上增加了“*” 和 “#” 。
- 郵箱地址鍵盤:在常規(guī)全鍵盤基礎上增加了“@”和“.”。
- URL鍵盤:輸入網(wǎng)址用的,在常規(guī)全鍵盤上增加或突出“.com”、“.”和“/”等。
- 數(shù)字和符號鍵盤:相比數(shù)字鍵盤多了很多標點符號。

△ ?常用的鍵盤類型布局
某種程度上來說,Picker可以被當做特殊的鍵盤類型。此外還可以對鍵盤的:是否首字母大寫、所有字母大寫、單詞自動補全等參數(shù)進行定制,進一步提升效率和體驗。
定制動作按鍵的功能
鍵盤上除了輸入內(nèi)容的按鍵,還有另外一類功能按鍵。例如在PC端Tab鍵可以在表單內(nèi)的多個輸入框之間切換,回車鍵可以換行或者發(fā)送內(nèi)容。Soft Keyboard可以對動作鍵的具體功能進行定制,常見的定制功能有:

△ ?常見的定制功能
1. 回車(return/enter):用來換行。
2. 搜索(search):?點擊后執(zhí)行搜索動作。
3. 下一項(next):通常用在在多個輸入框的表單中切換到下一個輸入框。
4. 發(fā)送(send):一般用在通訊App中將內(nèi)容發(fā)送出去。
5. 前往(go):任務過程中到下一個步驟的動作,例如輸入網(wǎng)址后,前往打開的網(wǎng)頁。
6. 完成(done):任務完成后終結(jié)動作。例如表單提交。
自定義鍵盤
假如用戶使用第三方輸入法就有些悲劇了,第三方的Soft Keyboard不一定完美支持所有鍵盤類型和動作按鍵的定制,而且有私自收集數(shù)據(jù)造成隱私泄露的風險。假如對第三方鍵盤擔憂,或者對輸入內(nèi)容的類型有偏好,可以設計自定義鍵盤。自定義鍵盤分為App內(nèi)輸入視圖( Input Views)和系統(tǒng)級定制鍵盤兩種。
App內(nèi)輸入視圖是私有定制的,只能在所屬的App內(nèi)使用,不可被其他App或者系統(tǒng)使用。典型案例是iPad版Numbers App,不同數(shù)據(jù)類型的表格單元格所對應的輸入視圖也不同,而且還提供簡單的數(shù)據(jù)運算功能。

△ ?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)提供了一種特殊的系統(tǒng)級定制鍵盤,通過Pin的鍵盤可以快速粘貼曾經(jīng)的剪貼板記錄甚至同步Mac的剪貼板內(nèi)容,還提供對剪貼板內(nèi)容執(zhí)行搜索、分詞的功能。

△ ?Pin的鍵盤
不要遮擋當前獲得焦點輸入框
在移動端,Soft Keyboard約占五分之二的屏幕面積,這意味著Soft Keyboard在喚起前后,界面布局會產(chǎn)生很大的變化,因此要注意鍵盤喚起后界面元素位置的變化,不要讓鍵盤遮擋當前獲取焦點的輸入框,以免用戶看不到自己輸入的內(nèi)容。
相關資料
網(wǎng)易UEDC對鍵盤類型和動作按鍵的研究和分享
iOS共提供11種鍵盤類型,Android甚至對鍵盤有多達29種參數(shù)定制。網(wǎng)易UEDC(用戶體驗設計中心)對iOS和Android的鍵盤進行了系統(tǒng)的研究,提供詳細的使用指南和Axure元件庫分享。請閱讀:
《交互稿中「鍵盤類型」的標注》( http://mp.weixin.qq.com/s/ii7iTwT7B-SmHkC_7bcUbQ )
《深度基礎 | 交互中的Android鍵盤詳解》(http://mp.weixin.qq.com/s/nQx2CpEHCycwyunEgI-m2w )
iPad拆分鍵盤
移動設備橫屏情況下寬度太大,用戶手指很難觸及到屏幕中線,而且Soft Keyboard會占用過多的縱向屏幕空間,導致操作和顯示都非常不便。當你用兩指同時向左右拉iPad的軟鍵盤時,鍵盤就會被拆分,這樣能提供更多的內(nèi)容顯示面積,操作也變得更順利。

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

△ ?某銀行App亂序軟鍵盤
銀行將這項安全技術從網(wǎng)站照搬到了App里,事實上,在觸屏手機上使用亂序軟鍵盤意義不大,不僅極大降低了用戶輸入效率,木馬悄悄截屏或者手機使用者背后有人即可輕易截取密碼。可喜的是陸續(xù)有銀行App采取禁止截圖和使用手勢密碼或指紋等更快更安全的安全技術。
大屏手機的鍵盤單手操作優(yōu)化
現(xiàn)在的手機屏幕尺寸越來越大,單手操作鍵盤會非常費力,有不少手機廠商和第三方輸入法致力于改善這個問題,例如搜狗輸入法單手鍵盤,將鍵盤寬度壓縮至適合單手操作的位置。

△ ?搜狗輸入法單手鍵盤
更為創(chuàng)新的方案是聯(lián)想的水銀鍵盤,當手機向一側(cè)傾斜時,通過重力感應水銀鍵盤的按鍵會將鍵盤按鈕向傾斜的方向集中,最遠處的按鈕觸摸區(qū)域更大,拇指可以輕松觸及。

△ ?聯(lián)想水銀鍵盤
往期回顧:
- 《「這個控件叫什么」系列之小紅點+索引導航+分段控件》
- 《「這個控件叫什么」系列之加載占位圖+頁面指示器》
- 《「這個控件叫什么」系列之步進器+SWITCH》
- 《「這個控件叫什么」系列之TOAST》
- 《「這個控件叫什么」系列之PICKER/選擇器/拾取器》
后面優(yōu)設會持續(xù)更新,想提前學習的可以關注作者的微信公眾號:

【優(yōu)設網(wǎng) 原創(chuàng)文章 投稿郵箱:yuan@uisdc.com】
================關于優(yōu)設網(wǎng)================
"優(yōu)設網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設計師學習平臺,專注分享網(wǎng)頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/。
設計微博:擁有粉絲量200萬的人氣微博@優(yōu)秀網(wǎng)頁設計 ,歡迎關注獲取網(wǎng)頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網(wǎng)站推薦,設計師必備導航:http://hao.uisdc.com
復制本文鏈接 文章為作者獨立觀點不代表優(yōu)設網(wǎng)立場,未經(jīng)允許不得轉(zhuǎn)載。




發(fā)評論!每天贏獎品
點擊 登錄 后,在評論區(qū)留言,系統(tǒng)會隨機派送獎品
2012年成立至今,是國內(nèi)備受歡迎的設計師平臺,提供獎品贊助 聯(lián)系我們
MJ+SD智能設計
已累計誕生 772 位幸運星
發(fā)表評論 為下方 2 條評論點贊,解鎖好運彩蛋
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓