在交互稿的標(biāo)注中，我們經(jīng)常會(huì)忽略鍵盤的說明，這是不對(duì)的。鍵盤在用戶的交互過程中起到了非常重要的作用，尤其在多個(gè)輸入框的場(chǎng)景下。

為什么需要標(biāo)注鍵盤類型？

大家都知道，一款虛擬鍵盤（比如iOS系統(tǒng)鍵盤）有很多種布局類型。在交互稿中，很多人是不標(biāo)注鍵盤類型的，我原先也是不標(biāo)注的。但近來發(fā)現(xiàn)鍵盤對(duì)于用戶操作的影響其實(shí)很大，不標(biāo)注鍵盤類型是不對(duì)的。一方面，如果鍵盤調(diào)用不當(dāng)，用戶則需要手動(dòng)切換輸入法，這是影響操作效率的（如上圖）；另一方面，對(duì)于多輸入框的表單來說，輸入框之間的切換、提交表單，這些操作其實(shí)都可以通過鍵盤實(shí)現(xiàn)（如上圖左），而無(wú)需用戶手動(dòng)點(diǎn)擊原界面中的元素。最后還有比較重要的一點(diǎn)是：如果設(shè)計(jì)師不標(biāo)注，開發(fā)同學(xué)一般都寫成默認(rèn)鍵盤，而不會(huì)根據(jù)場(chǎng)景寫成不同類型的鍵盤。

那么，到底有哪幾種鍵盤？每種鍵盤有哪些地方是可以控制的呢？

iOS原生應(yīng)用中的鍵盤

iOS 中提供了多達(dá)12種鍵盤可以選擇（如上圖，不討論中文鍵盤，中文鍵盤只有一種布局）。我們可以根據(jù)用戶當(dāng)前的需要，提供不同類型鍵盤。在交互稿中，我們可以將相應(yīng)的鍵盤類型名稱（英文名）寫在界面下方，或者直接使用相應(yīng)的鍵盤截圖放在交互稿中。對(duì)于同一個(gè)界面中有不同類型輸入框的情況，需要標(biāo)注出鍵盤切換的說明。雖然12種鍵盤類型已經(jīng)很多，但它們?nèi)匀徊荒芨采w所有場(chǎng)景，這時(shí)我們可以進(jìn)行自定義鍵盤。當(dāng)然，開發(fā)成本你懂的，開發(fā)同學(xué)的表情你也懂的。

除了選用不同類型的鍵盤，部分鍵盤中還有多種“按鍵命令”（上圖中的藍(lán)色按鈕）可以選擇，如“完成”、“搜索”、”發(fā)送”等。iOS中提供了11種類型的命令，你可以將所需要的命令用文字描述的形式標(biāo)注在交互稿中，也可以使用截圖的方式。值得注意的是，iOS的鍵盤具有上一項(xiàng)和下一項(xiàng)的功能（ < ?> ，如上圖左上方），這對(duì)于表單的交互設(shè)計(jì)起到了非常重要的作用，一定要好好利用。

Android原生應(yīng)用中的鍵盤

如上圖所示，Android中提供了9種類型的鍵盤（同樣不討論中文鍵盤）。與iOS的鍵盤調(diào)用類似，需要注意多輸入框場(chǎng)景下的鍵盤類型切換。Android場(chǎng)景中的鍵盤也可以自定義，自定義的成本同樣是比較高的，值得斟酌。

同iOS一樣，Android的部分鍵盤也具有多種“按鍵命令”可以選擇：回車、搜索、前往、下一項(xiàng)、完成、發(fā)送（未找到案例）。在交互稿中，可以標(biāo)注出想要的“按鍵命令”類型。大家應(yīng)該有注意到，Android中多了一個(gè)“下一項(xiàng)”的按鍵命令，用來替代iOS鍵盤左上方的“ < >”按鍵。在多輸入框表單的場(chǎng)景下，切記標(biāo)注出鍵盤的“按鍵命令”何時(shí)變?yōu)椤跋乱豁?xiàng)”，何時(shí)變?yōu)椤巴瓿伞薄?/p>

H5下的鍵盤

在H5環(huán)境中，鍵盤的類型仍然可以自由選擇。“按鍵命令”的類型大部分可以選擇，但“完成”和“下一項(xiàng)”不可以選擇。也就是說，程序可以控制調(diào)出的是“數(shù)字鍵盤”還是“字母鍵盤”或其他任意類型的鍵盤。但在“按鍵命令”類型調(diào)用方面，只能調(diào)用“搜索”、“回車”、“前往”，而不能調(diào)用“下一項(xiàng)”和“完成”。所以在標(biāo)注交互稿時(shí)，需要注意這一點(diǎn)。這個(gè)缺陷對(duì)于iOS環(huán)境中的H5影響并不是太大，因?yàn)閕OS的鍵盤具有“< >”和“完成”按鈕。但對(duì)于Android環(huán)境中H5的影響則很大，因?yàn)楫?dāng)用戶填寫完一個(gè)輸入框想要跳轉(zhuǎn)下一個(gè)輸入框時(shí)，只能手動(dòng)點(diǎn)擊。如果用戶下意識(shí)地點(diǎn)擊“前往”按鈕，則可能會(huì)出現(xiàn)表單警報(bào)（如上圖所示）。

這里有一個(gè)例外情況，就是當(dāng)輸入框的字符類型是“數(shù)字”時(shí)，“按鍵命令”會(huì)自動(dòng)變成“下一項(xiàng)”。Android環(huán)境中的這些問題對(duì)于用戶成本本身就很高的“表單填寫”交互來說，其實(shí)是很要命的，也是讓人無(wú)能為力。

PS：上圖中鍵盤上方的白色工具欄（上一項(xiàng)、下一項(xiàng)……）是瀏覽器提供的插件，不屬于系統(tǒng)鍵盤。

總結(jié)

交互稿的標(biāo)注中，我們經(jīng)常會(huì)忽略鍵盤的說明，這是不對(duì)的。鍵盤在用戶的交互過程中起到了非常重要的作用，尤其在多個(gè)輸入框的場(chǎng)景下。合理地切換“鍵盤類型”和“按鍵命令類型”可以提高用戶填寫表單的效率，同時(shí)也可以讓表單填寫過程更加順暢，降低頁(yè)面的流失率，我相信所有人都知道這點(diǎn)很重要。

交互稿中，除了忽略“鍵盤的標(biāo)注”，我們還會(huì)忽略很多其他細(xì)節(jié)的標(biāo)注，比如過場(chǎng)、加載、熱區(qū)范圍等。對(duì)于開發(fā)同學(xué)來說，不標(biāo)注一般就意味著不用考慮，指定默認(rèn)值即可。但對(duì)于整個(gè)產(chǎn)品來說，每一個(gè)細(xì)節(jié)的忽略都會(huì)導(dǎo)致相應(yīng)的體驗(yàn)問題。所以，如果你還沒有和開發(fā)同學(xué)形成非常良好的默契，還是盡量標(biāo)注出這些細(xì)節(jié)吧。

對(duì)了，上文中提到的技術(shù)上的“可以”和“不可以”都是基于一般的開發(fā)投入而言啦。因?yàn)閷?duì)開發(fā)同學(xué)來說：沒有實(shí)現(xiàn)不了的功能，只有給不了的時(shí)間。

最后拋一個(gè)問題：?為什么鍵盤右下角的“命令按鍵”有時(shí)是“完成”，有時(shí)是“前往”？到底應(yīng)該選哪個(gè)呢？歡迎留言討論……

作者：崇書慶-seeking-雷雷，網(wǎng)易UEDC小鮮肉1號(hào)，高級(jí)交互設(shè)計(jì)師?；桌?，因?yàn)橥饷婵崴茖O紅雷，現(xiàn)支持杭研云信項(xiàng)目。有想法，有態(tài)度，愛學(xué)習(xí)，愛分享就是wuli雷雷~

本文由 @崇書慶 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。