這個控制項叫:Soft Keyboard/Virtual Keyboard/軟鍵盤/虛擬鍵盤

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開發者鍾穎(知乎昵稱@鍾穎Cyan )研發的Pin( itunes.apple.com/cn/app )提供了一種特殊的系統級定製鍵盤,通過Pin的鍵盤可以快速粘貼曾經的剪貼板記錄甚至同步Mac的剪貼板內容,還提供對剪貼板內容執行搜索、分詞的功能。

Pin的鍵盤

  • 不要遮擋當前獲得焦點輸入框

    在移動端,Soft Keyboard約佔五分之二的屏幕面積,這意味著Soft Keyboard在喚起前後,界面布局會產生很大的變化,因此要注意鍵盤喚起後界面元素位置的變化,不要讓鍵盤遮擋當前獲取焦點的輸入框,以免用戶看不到自己輸入的內容。

相關資料

  • 網易UEDC對鍵盤類型和動作按鍵的研究和分享

    iOS共提供11種鍵盤類型,Android甚至對鍵盤有多達29種參數定製。網易UEDC(用戶體驗設計中心)對iOS和Android的鍵盤進行了系統的研究,提供詳細的使用指南和Axure元件庫分享。請閱讀:

    《交互稿中「鍵盤類型」的標註》( 交互稿中「鍵盤類型」的標註 )

    《深度基礎 | 交互中的Android鍵盤詳解》( 深度基礎 | 交互中的Android鍵盤詳解 )

  • iPad拆分鍵盤

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

    iPad拆分鍵盤

  • 為什麼銀行App要使用亂序鍵位鍵盤

    在PC時代,有木馬病毒通過監控物理鍵盤的鍵位來盜取用戶密碼,注重安全的銀行網站將密碼輸入改為軟鍵盤。正所謂道高一尺魔高一丈,新的木馬病毒記錄屏幕滑鼠點擊位置來推算用戶輸入的內容,於是銀行將軟鍵盤升級為亂序鍵位。

    某銀行App亂序軟鍵盤

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

  • 大屏手機的鍵盤單手操作優化

    現在的手機屏幕尺寸越來越大,單手操作鍵盤會非常費力,有不少手機廠商和第三方輸入法致力於改善這個問題,例如搜狗輸入法單手鍵盤,將鍵盤寬度壓縮至適合單手操作的位置。

    搜狗輸入法單手鍵盤

    更為創新的方案是聯想的水銀鍵盤,當手機向一側傾斜時,通過重力感應水銀鍵盤的按鍵會將鍵盤按鈕向傾斜的方向集中,最遠處的按鈕觸摸區域更大,拇指可以輕鬆觸及。

    聯想水銀鍵盤

推薦閱讀:

[譯] 你的站點如你所想的移動友好嗎?
【交互設計】 也許這些才是你作品集最需要的
App 設計中,慎用左右橫滑設計
交互設計|康石石淺談如何創作一本打動考官的作品集
視覺誤差對 UI 的實際影響講解及一大堆例子

TAG:交互设计 | 交互控件 | 设计规范 |