本文梳理了手機鍵盤裡的要點、細節點，日後遇到有涉及到鍵盤輸入的地方，可以有更多的思路去解決各種産品/設計問題。

手機鍵盤，可以幹嘛？？無疑是打字、信息輸入，也是用戶體驗産品最常用、最直接的方式之一。

我們每天都在使用鍵盤，但是偶爾會遇到一些體驗上的不足，如鍵盤擋住操作入口、很難控制鍵盤光标的移動……

所以今天想梳理一下手機鍵盤裡的要點、細節點，日後遇到有涉及到鍵盤輸入的地方，可以有更多的思路去解決各種産品/設計問題。

目錄：

1. 鍵盤與命令類型
2. 設計要點
3. 有意思的鍵盤交

Part1：鍵盤與命令類型

先簡單說下鍵盤與命令詞類型（想看設計要點，可直接滑到Part2部分），對鍵盤有個全局的認識，方便在工作中知道每種鍵盤的用途。

1. 鍵盤類型

從技術角度上看，市面上所有的鍵盤産品可分為：系統鍵盤（手機默認鍵盤）、第三方鍵盤（功能豐富，輸入效率高）、自定義鍵盤（安全性高，有一定開發成本）。

從可提供類型看上，iOS一共提供了12種的鍵盤類型，其中8種是常用的：默認（中英）鍵盤、郵件鍵盤、字符與數字鍵盤、帶小數點的數字鍵盤、存數字鍵盤、撥号鍵盤、網址鍵盤、外國産品鍵盤（如Twitter、Instagram）

剩下的4種則是這些，但我實在看不出這些鍵盤和默認（中英）鍵盤有何區别，因此将這4種獨立展示：

而Android系統鍵盤隻提供了9種，但大部分和iOS的鍵盤類型一樣。因此需要我們在交互稿中，标明對應的鍵盤類型。

2. 命令詞類型

而鍵盤命令詞的類型上，iOS提供的也很豐富，多達11種。

而安卓則少些，但基本能覆蓋所有場景了。

3. H5裡的插件

iOS自帶有“上一項”和“下一項”的鍵盤插件，因而在一些H5表單中可以靈活選擇上/下一個文本框或選擇器。而Android在H5是沒有“下一項”命令的（無論第三方還是系統鍵盤）。因而在H5頁面中的表單中，往往需要提供一個外部插件來輔助用戶輸入。

Part2：設計要點

盤點了鍵盤與命令詞類型後，接下來梳理一些設計要點，避免今後工作中踩坑，完善産品設計細節。

1.“删除”不完全是“清空”

鍵盤上的‘删除’按鈕可以逐一删除輸入結果，界面上的’清除‘icon也能做到。但二者間在特定的技術環境下，會存在交互上的差異。

一個典型的例子就是：UC浏覽器的翻譯器。

在已有翻譯結果的情況下，點擊鍵盤上的‘删除’按鈕，隻能删除文本框裡的内容，對底下的翻譯結果并無影響。

而點擊界面上的“清空”icon，能同時清除掉 文本框内容和翻譯結果。

原因在于：

在當前的技術環境下，UC浏覽器還無法裡做到“實時翻譯”（邊輸入内容，邊顯示翻譯結果），因此無論用戶在文本框裡編輯了什麼内容，技術上都很難檢測到文本框裡的信息，所以不會影響到底下的翻譯結果。

而“清空”icon則不同，它就相當于界面上的一個功能入口，點擊它完全可以檢測/控制到其他内容狀态（文本框内容和翻譯結果），所以可以做出對這2者的“清除”指令。

但若能做到“實時翻譯”，就可以同時檢測、删除文本框内容和翻譯結果了，就如谷歌浏覽器的翻譯器：

2. 鍵盤可以附帶功能入口

産品設計時總有一個固有思維：一定要将某個按鈕/功能/操作放在某個界面上，因此有時會受到“視覺布局怪異、功能關系不搭”等的困惑。

遇到這種情況時，可以試着将功能和鍵盤綁定在一起，依附在鍵盤上才出現。讓功能和内容間的關系更加獨立開來，釋放頁面壓力。

但是有個提前：這些功能/内容盡量是和用戶的輸入行為有關聯的，不要把所有功能都添加上去。

3. 注意鍵盤的遮蓋區域

在一些表單設計時，應該注意鍵盤彈出後對界面布局、用戶操作的影響。一些重要信息、操作按鈕要盡量放在鍵盤的遮蓋區外，避免用戶“要收起鍵盤才能操作/看到”的尴尬局面。

包括手機橫屏時的走查，也要注意一下鍵盤高度對界面的影響。

4.“隐私數據”盡量用随機鍵盤

對于個人财産、身份信息等敏感數據的輸入時，用戶對該類型信息的重視程度，明顯高于其他類型的信息輸入。所以産品設計時可優先考慮“自定義随機鍵盤”（指鍵盤上的字母/數字等随機排布），以保護用戶财務和隐私安全。如中國銀行的支付密碼：

騰訊各大樓下的訪客機也是采用随機鍵盤，以保護所有訪客的預約隐私。

5. 命令按鈕位置的不同

在手機鍵盤裡輸入文字時，iOS由于系統的限制，對文字的發送指令隻能在鍵盤上來完成，因此iOS用戶的交互操作都全部集中在鍵盤右下角。

而Android端就靈活很多，不僅可以在鍵盤上執行發送指令，也可以在輸入欄/搜索欄周邊新增操作入口。

即使大部分産品都這麼做，但還是有部分産品做到了“兩端對齊”，如網易郵箱：

6. 預判用戶的行為

用戶行為的預判，指的是當我們明确知道用戶目的、能推測出用戶下一步操作時，可以做一些減少用戶操作步驟、提升輸入效率的設計，如：

（1）自動調起鍵盤

在一些表單輸入的流程中，當能預知到用戶的下一步操作時，完全可以幫助用戶自動調起鍵盤的（尤其是需要跳轉頁面才能輸入的表單）。

（2）調起對應的鍵盤類型

這個點無需多講，當明确知道表單輸入所需的文本類型：中文/英文/數字/郵箱/網址等，需調起相對應的鍵盤類型。

（3）短信驗證碼的調取

在短信驗證碼的表單設計時，可以利用系統的‘短信權限’自動輸入驗證碼，減少用戶的操作步驟。

iOS：隻能将驗證碼調取在鍵盤上，點擊自動複制粘貼。

Android：可以将驗證碼自動粘貼在文本框裡，且自動跳轉頁面。

前提是：産品已獲得手機的短信權限，否則很難調取到驗證碼信息。

（4）更準确的命令詞

鍵盤上的命令詞，在交互上的固定認知是：點了就能看到想要的内容。

就如微信的搜索，用戶的預期和鍵盤上的命令詞完全是一緻的，用戶能知道點擊會出現什麼樣的内容。

但在視覺上，不恰當的命令詞容易讓人産生歧義、誤解，甚至幹擾接下來的操作。

如網易郵箱登錄的第一個表單，鍵盤上對應了“下一步”命令詞，用戶知道可以快速切換到第二個表單。但在第二個表單時，還是“下一步”命令詞 是不是會讓人費解？？

畢竟該處是表單輸入的交互終點，用“前往（Go）、登錄（Join）”這些命令詞是不是更準确些呢？

因此日常中，我們需要對命令詞有更深的理解，方便給予用戶更準确的引導。

Part3：有意思的交互

最後盤點一下，在一些第三方和系統自帶的鍵盤上，都有哪些有意思的交互細節？啟發一下産品設計時的腦洞。

1. 更準确地移動光标

在輸入過程中，想将“光标”移動在某個文字附近是一件比較麻煩的事，尤其是在小屏幕手機裡。

但iOS手機有 3D touch功能，不少産品都會通過“重按鍵盤”的方式來控制光标的移動。如iOS系統鍵盤、百度輸入法和訊飛輸入法：

但是Android手機可沒有3D touch，如何解決這個問題？

典型的例子還是UC浏覽器，采用一個“滑塊組件”來控制光标的移動。不管Android和iOS端，都能有效地提升輸入效率和體驗。

2. 長按的彩蛋

除了長按鍵盤外可以移動光标外，在一些第三方鍵盤上也隐藏了“長按”的彩蛋，如：

（1）百度輸入法

長按可以持續選擇表情，還有表情飄出效果。

（2）訊飛輸入法

長按可以選擇表情的顔色，但部分表情才有而已。

（3）搜狗輸入法

長按可以切換至‘單手鍵盤’模式，用于操作大屏幕手機或iPad。

結語

好了，大緻的整理就到這了。可能有些細節點講的不是很好，請你多指教。

作者：和出此嚴，微信ID：elffzh，公衆号：和出此嚴

本文由 @和出此嚴 原創發布于人人都是産品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部