本文梳理了手機(jī)鍵盤里的要點(diǎn)、細(xì)節(jié)點(diǎn)，日后遇到有涉及到鍵盤輸入的地方，可以有更多的思路去解決各種產(chǎn)品/設(shè)計(jì)問題。
本文梳理了手機(jī)鍵盤里的要點(diǎn)、細(xì)節(jié)點(diǎn)，日后遇到有涉及到鍵盤輸入的地方，可以有更多的思路去解決各種產(chǎn)品/設(shè)計(jì)問題。
手機(jī)鍵盤，可以干嘛？？無疑是打字、信息輸入，也是用戶體驗(yàn)產(chǎn)品最常用、最直接的方式之一。
我們每天都在使用鍵盤，但是偶爾會(huì)遇到一些體驗(yàn)上的不足，如 鍵盤擋住操作入口、很難控制鍵盤光標(biāo)的移動(dòng)……
所以今天想梳理一下手機(jī)鍵盤里的 要點(diǎn)、細(xì)節(jié)點(diǎn)，日后遇到有涉及到鍵盤輸入的地方，可以有更多的思路去解決各種產(chǎn)品/設(shè)計(jì)問題。
目錄：
- 鍵盤與命令類型
- 設(shè)計(jì)要點(diǎn)
- 有意思的鍵盤交
目錄：
- 鍵盤與命令類型
- 設(shè)計(jì)要點(diǎn)
- 有意思的鍵盤交
先簡單說下鍵盤與命令詞類型（想看設(shè)計(jì)要點(diǎn)，可直接滑到Part2部分），對(duì)鍵盤有個(gè)全局的認(rèn)識(shí)，方便在工作中知道每種鍵盤的 用途。
1. 鍵盤類型
從技術(shù)角度上看，市面上所有的鍵盤產(chǎn)品可分為： 系統(tǒng)鍵盤（手機(jī)默認(rèn)鍵盤）、 第三方鍵盤（功能豐富，輸入效率高）、 自定義鍵盤（安全性高，有一定開發(fā)成本）。
從可提供類型看上，iOS一共提供了12種的鍵盤類型，其中8種是常用的：默認(rèn)（中英）鍵盤、郵件鍵盤、字符與數(shù)字鍵盤、帶小數(shù)點(diǎn)的數(shù)字鍵盤、存數(shù)字鍵盤、撥號(hào)鍵盤、鍵盤、外國產(chǎn)品鍵盤（如Twitter、Instagram）
剩下的4種則是這些，但我實(shí)在看不出這些鍵盤和默認(rèn)（中英）鍵盤有何區(qū)別，因此將這4種獨(dú)立展示：
而Android系統(tǒng)鍵盤只提供了9種，但大部分和iOS的鍵盤類型一樣。因此需要我們?cè)?交互稿中，標(biāo)明對(duì)應(yīng)的鍵盤類型。
2. 命令詞類型
而鍵盤命令詞的類型上，iOS提供的也很豐富，多達(dá)11種。
而安卓則少些，但基本能覆蓋所有場景了。
3. H5里的插件
iOS自帶有“上一項(xiàng)”和“下一項(xiàng)”的鍵盤插件，因而在一些H5表單中可以靈活選擇上/下一個(gè)文本框或選擇器。而Android在H5是沒有“下一項(xiàng)”命令的（無論第三方還是系統(tǒng)鍵盤）。因而在H5頁面中的表單中，往往需要提供一個(gè) 外部插件來輔助用戶輸入。
Part2：設(shè)計(jì)要點(diǎn)
盤點(diǎn)了鍵盤與命令詞類型后，接下來梳理一些設(shè)計(jì)要點(diǎn)，避免今后工作中踩坑，完善產(chǎn)品設(shè)計(jì)細(xì)節(jié)。
1.“刪除”不完全是“清空”
鍵盤上的‘刪除’按鈕可以逐一刪除輸入結(jié)果，界面上的’清除‘icon也能做到。但二者間在特定的技術(shù)環(huán)境下，會(huì)存在交互上的差異。
一個(gè)典型的例子就是：UC瀏覽器的翻譯器。
在 已有翻譯結(jié)果的情況下，點(diǎn)擊鍵盤上的‘刪除’按鈕，只能刪除文本框里的內(nèi)容，對(duì)底下的翻譯結(jié)果并無影響。
而點(diǎn)擊界面上的“清空”icon，能同時(shí)清除掉 文本框內(nèi)容和翻譯結(jié)果。
原因在于：
在當(dāng)前的技術(shù)環(huán)境下，UC瀏覽器還無法里做到“ 實(shí)時(shí)翻譯”（邊輸入內(nèi)容，邊顯示翻譯結(jié)果），因此無論用戶在文本框里編輯了什么內(nèi)容，技術(shù)上都很難檢測到文本框里的信息，所以不會(huì)影響到底下的翻譯結(jié)果。
而“清空”icon則不同，它就相當(dāng)于界面上的一個(gè)功能入口，點(diǎn)擊它完全可以檢測/控制到其他內(nèi)容狀態(tài)（文本框內(nèi)容和翻譯結(jié)果），所以可以做出對(duì)這2者的“清除”指令。
但若能做到“實(shí)時(shí)翻譯”，就可以同時(shí)檢測、刪除文本框內(nèi)容和翻譯結(jié)果了，就如谷歌瀏覽器的翻譯器：
2. 鍵盤可以附帶功能入口
產(chǎn)品設(shè)計(jì)時(shí)總有一個(gè)固有思維：一定要將某個(gè)按鈕/功能/操作放在某個(gè)界面上 ，因此有時(shí)會(huì)受到“ 視覺布局怪異、 功能關(guān)系不搭”等的困惑。
遇到這種情況時(shí)，可以試著將功能和鍵盤綁定在一起，依附在鍵盤上才出現(xiàn)。讓功能和內(nèi)容間的關(guān)系更加獨(dú)立開來，釋放頁面壓力。
但是有個(gè)提前：這些功能/內(nèi)容盡量是 和用戶的輸入行為有關(guān)聯(lián)的，不要把所有功能都添加上去。
3. 注意鍵盤的遮蓋區(qū)域
在一些表單設(shè)計(jì)時(shí)，應(yīng)該注意鍵盤 彈出后對(duì)界面布局、用戶操作的影響。一些重要信息、操作按鈕要盡量放在鍵盤的遮蓋區(qū)外，避免用戶“要收起鍵盤才能操作/看到”的尷尬局面。
包括 手機(jī)橫屏?xí)r的走查，也要注意一下鍵盤高度對(duì)界面的影響。
4.“隱私數(shù)據(jù)”盡量用隨機(jī)鍵盤
對(duì)于個(gè)人財(cái)產(chǎn)、身份信息等敏感數(shù)據(jù)的輸入時(shí)，用戶對(duì)該類型信息的重視程度，明顯高于其他類型的信息輸入。所以產(chǎn)品設(shè)計(jì)時(shí)可優(yōu)先考慮“ 自定義隨機(jī)鍵盤”（指鍵盤上的字母/數(shù)字等隨機(jī)排布），以保護(hù)用戶財(cái)務(wù)和隱私安全。如中國銀行的支付密碼：
騰訊各大樓下的訪客機(jī)也是采用隨機(jī)鍵盤，以保護(hù)所有訪客的預(yù)約隱私。
5. 命令按鈕位置的不同
在手機(jī)鍵盤里輸入文字時(shí)，iOS由于系統(tǒng)的限制，對(duì)文字的發(fā)送指令只能在鍵盤上來完成，因此iOS用戶的交互操作都全部集中在鍵盤右下角。
而Android端就靈活很多，不僅可以在鍵盤上執(zhí)行發(fā)送指令，也可以在輸入欄/搜索欄周邊新增操作入口。
即使大部分產(chǎn)品都這么做，但還是有部分產(chǎn)品做到了“ 兩端對(duì)齊”，如網(wǎng)易郵箱：
6. 預(yù)判用戶的行為
用戶行為的預(yù)判，指的是當(dāng)我們明確知道用戶目的、能推測出用戶下一步操作時(shí)，可以做一些 減少用戶操作步驟、提升輸入效率的設(shè)計(jì)，如：
（1）自動(dòng)調(diào)起鍵盤
在一些表單輸入的流程中，當(dāng)能預(yù)知到用戶的下一步操作時(shí)，完全可以幫助用戶自動(dòng)調(diào)起鍵盤的（尤其是需要跳轉(zhuǎn)頁面才能輸入的表單）。
（2）調(diào)起對(duì)應(yīng)的鍵盤類型
這個(gè)點(diǎn)無需多講，當(dāng)明確知道表單輸入所需的 文本類型：中文/英文/數(shù)字/郵箱/等，需調(diào)起相對(duì)應(yīng)的鍵盤類型。
（3）短信驗(yàn)證碼的調(diào)取
在短信驗(yàn)證碼的表單設(shè)計(jì)時(shí)，可以利用系統(tǒng)的 ‘短信權(quán)限’自動(dòng)輸入驗(yàn)證碼，減少用戶的操作步驟。
iOS：只能將驗(yàn)證碼調(diào)取在鍵盤上，點(diǎn)擊自動(dòng)復(fù)制粘貼。
Android：可以將驗(yàn)證碼自動(dòng)粘貼在文本框里，且自動(dòng)跳轉(zhuǎn)頁面。
前提是：產(chǎn)品已獲得手機(jī)的 短信權(quán)限，否則很難調(diào)取到驗(yàn)證碼信息。
（4）更準(zhǔn)確的命令詞
鍵盤上的命令詞，在交互上的固定認(rèn)知是： 點(diǎn)了就能看到想要的內(nèi)容。
就如微信的搜索，用戶的預(yù)期和鍵盤上的命令詞完全是一致的，用戶能知道點(diǎn)擊會(huì)出現(xiàn)什么樣的內(nèi)容。
但在視覺上， 不恰當(dāng)?shù)拿钤~容易讓人產(chǎn)生歧義、誤解，甚至干擾接下來的操作。
如網(wǎng)易郵箱登錄的第一個(gè)表單，鍵盤上對(duì)應(yīng)了“ 下一步”命令詞，用戶知道可以快速切換到第二個(gè)表單。但在第二個(gè)表單時(shí)，還是“下一步”命令詞 是不是會(huì)讓人費(fèi)解？？
畢竟該處是表單輸入的交互終點(diǎn)，用“ 前往（Go）、登錄（Join）”這些命令詞是不是更準(zhǔn)確些呢？
因此日常中，我們需要對(duì)命令詞有更深的理解，方便給予用戶更準(zhǔn)確的引導(dǎo)。
Part3：有意思的交互
最后盤點(diǎn)一下，在一些第三方和系統(tǒng)自帶的鍵盤上，都有哪些有意思的交互細(xì)節(jié)？啟發(fā)一下產(chǎn)品設(shè)計(jì)時(shí)的腦洞。
1. 更準(zhǔn)確地移動(dòng)光標(biāo)
在輸入過程中，想將“光標(biāo)”移動(dòng)在某個(gè)文字附近是一件比較麻煩的事，尤其是在小屏幕手機(jī)里。
但iOS手機(jī)有 3D touch功能，不少產(chǎn)品都會(huì)通過“重按鍵盤”的方式來控制光標(biāo)的移動(dòng)。如iOS系統(tǒng)鍵盤、百度輸入法和訊飛輸入法：
但是Android手機(jī)可沒有3D touch，如何解決這個(gè)問題？
典型的例子還是UC瀏覽器，采用一個(gè)“ 滑塊組件”來控制光標(biāo)的移動(dòng)。不管Android和iOS端，都能有效地提升輸入效率和體驗(yàn)。
2. 長按的彩蛋
（1）百度輸入法
（2）訊飛輸入法
（3）搜狗輸入法
結(jié)語
好了，大致的整理就到這了。可能有些細(xì)節(jié)點(diǎn)講的不是很好，請(qǐng)你多指教。
作者：和出此嚴(yán)，微信ID：elffzh，公眾號(hào)：和出此嚴(yán)
本文由 @和出此嚴(yán) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于CC0協(xié)議。
