轉自：和出此嚴(ID：Hechu618)
作者： 和出此嚴
手機鍵盤，可以幹嘛？？ 無疑是打字、資訊輸入，也是使用者體驗産品最常用、最直接的方式之一。 我們每天都在使用鍵盤，但是偶爾會遇到一些體驗上的不足，如鍵盤擋住操作入口、很難控制鍵盤光标的移動... 是以今天想梳理一下手機鍵盤裡的要點、細節點，日後遇到有涉及到鍵盤輸入的地方，可以有更多的思路去解決各種産品/設計問題。
目錄： 一、鍵盤與指令類型 二、設計要點 三、有意思的鍵盤互動
Part1：鍵盤與指令類型 先簡單說下鍵盤與指令詞類型(想看設計要點，可直接滑到Part2部分)，對鍵盤有個全局的認識，友善在工作中知道每種鍵盤的用途。 鍵盤類型 從技術角度上看，市面上所有的鍵盤産品可分為： 系統鍵盤(手機預設鍵盤)、第三方鍵盤(功能豐富，輸入效率高)、自定義鍵盤(安全性高，有一定開發成本)。
從可提供類型看上，iOS一共提供了12種的鍵盤類型： 其中8種是常用的：預設(中英)鍵盤、郵件鍵盤、字元與數字鍵盤、帶小數點的數字鍵盤、存數字鍵盤、撥号鍵盤、網址鍵盤、外國産品鍵盤(如Twitter、Instagram)
剩下的4種則是這些， 但我實在看不出這些鍵盤和預設(中英)鍵盤有何差別，是以将這4種獨立展示：
而Android系統鍵盤隻提供了9種，但大部分和iOS的鍵盤類型一樣。是以需要我們在互動稿中，标明對應的鍵盤類型。
指令詞類型 而鍵盤指令詞的類型上，iOS提供的也很豐富，多達11種。
而安卓則少些，但基本能覆寫所有場景了。
H5裡的插件 iOS自帶有‘上一項’和‘下一項’的鍵盤插件，因而在一些H5表單中可以靈活選擇上/下一個文本框或選擇器。 而Android在H5是沒有’下一項‘指令的(無論第三方還是系統鍵盤)。 因而在H5頁面中的表單中，往往需要提供一個外部插件來輔助使用者輸入。
Part2：設計要點 盤點了鍵盤與指令詞類型後，接下來梳理一些設計要點，避免今後工作中踩坑，完善産品設計細節。 ‘删除‘不完全是‘清空’ 鍵盤上的‘删除’按鈕可以逐一删除輸入結果，界面上的’清除‘icon也能做到。但二者間在特定的技術環境下，會存在互動上的差異。
一個典型的例子就是：UC浏覽器的翻譯器。 在 已有翻譯結果 的情況下，點選鍵盤上的‘删除’按鈕，隻能删除文本框裡的内容，對底下的翻譯結果并無影響。
而點選界面上的’清空‘icon，能同時清除掉 文本框内容和翻譯結果。
原因在于： 在目前的技術環境下，UC浏覽器還無法裡做到’實時翻譯‘(邊輸入内容，邊顯示翻譯結果)，是以無論使用者在文本框裡編輯了什麼内容，技術上都很難檢測到文本框裡的資訊，是以不會影響到底下的翻譯結果。 而’清空‘icon則不同，它就相當于界面上的一個功能入口，點選它完全可以檢測/控制到其他内容狀态(文本框内容和翻譯結果)，是以可以做出對這2者的’清除‘指令。 但若能做到’實時翻譯‘，就可以同時檢測、删除 文本框内容和翻譯結果了。 就如谷歌浏覽器的翻譯器：
鍵盤可以附帶功能入口 産品設計時總有一個固有思維：一定要将某個按鈕/功能/操作放在某個界面上，是以有時會受到‘視覺布局怪異、功能關系不搭’等的困惑。 遇到這種情況時，可以試着将功能和鍵盤綁定在一起，依附在鍵盤上才出現。讓功能和内容間的關系更加獨立開來，釋放頁面壓力。
但是有個提前：這些功能/内容盡量是 和使用者的輸入行為有關聯的，不要把所有功能都添加上去。 注意鍵盤的遮蓋區域 在一些表單設計時，應該注意鍵盤彈出後對界面布局、使用者操作的影響。 一些重要資訊、操作按鈕要盡量放在鍵盤的遮蓋區外，避免使用者‘要收起鍵盤才能操作/看到’的尴尬局面。
包括 手機橫屏 時的走查，也要注意一下鍵盤高度對界面的影響。 ‘隐私資料’盡量用随機鍵盤 對于個人财産、身份資訊等敏感資料的輸入時，使用者對該類型資訊的重視程度，明顯高于其他類型的資訊輸入。 是以産品設計時可優先考慮 ‘自定義随機鍵盤’(指鍵盤上的字母/數字等随機排布)，以保護使用者财務和隐私安全。 如中國銀行的支付密碼：
騰訊各大樓下的訪客機也是采用随機鍵盤，以保護所有訪客的預約隐私。
指令按鈕位置的不同 在手機鍵盤裡輸入文字時，iOS由于系統的限制，對文字的發送指令隻能在鍵盤上來完成，是以iOS使用者的互動操作都全部集中在鍵盤右下角。
而Android端就靈活很多，不僅可以在鍵盤上執行發送指令，也可以在輸入欄/搜尋欄周邊新增操作入口。
即使大部分産品都這麼做，但還是有部分産品做到了‘兩端對齊’，如網易郵箱：
更多Android與iOS的互動差異，可看這裡 預判使用者的行為 使用者行為的預判，指的是當我們明确知道使用者目的、能推測出使用者下一步操作時，可以做一些減少使用者操作步驟、提升輸入效率的設計，如： 1.自動調起鍵盤 在一些表單輸入的流程中，當能預知到使用者的下一步操作時，完全可以幫助使用者自動調起鍵盤的(尤其是需要跳轉頁面才能輸入的表單) 。
2.調起對應的鍵盤類型 這個點無需多講，當明确知道表單輸入所需的文本類型：中文/英文/數字/郵箱/網址等，需調起相對應的鍵盤類型。
3.短信驗證碼的調取 在短信驗證碼的表單設計時，可以利用系統的‘短信權限’自動輸入驗證碼，減少使用者的操作步驟。 iOS：隻能将驗證碼調取在鍵盤上，點選自動複制粘貼。 Android：可以将驗證碼自動粘貼在文本框裡，且自動跳轉頁面。
前提是：産品已獲得手機的短信權限，否則很難調取到驗證碼資訊。 4.更準确的指令詞 鍵盤上的指令詞，在互動上的固定認知是：點了就能看到想要的内容。 就如微信的搜尋，使用者的預期和鍵盤上的指令詞完全是一緻的，使用者能知道點選會出現什麼樣的内容。
但在視覺上，不恰當的指令詞容易讓人産生 歧義、誤解 ，甚至幹擾接下來的操作。 如網易郵箱登入的第一個表單，鍵盤上對應了‘下一步’指令詞，使用者知道可以快速切換到第二個表單。 但在第二個表單時，還是‘下一步’指令詞 是不是會讓人費解？？
畢竟該處是表單輸入的互動終點，用‘前往(Go)、登入(Join)’這些指令詞是不是更準确些呢？
是以日常中，我們需要對指令詞有更深的了解，友善給予使用者更準确的引導。
Part3：有意思的互動 最後盤點一下，在一些第三方和系統自帶的鍵盤上，都有哪些有意思的互動細節？啟發一下産品設計時的腦洞。 更準确地移動光标 在輸入過程中，想将’光标‘移動在某個文字附近是一件比較麻煩的事，尤其是在小螢幕手機裡。 但iOS手機有3D touch功能，不少産品都會通過‘重按鍵盤’的方式來控制光标的移動。如iOS系統鍵盤、百度輸入法和訊飛輸入法：
但是Android手機可沒有3D touch，如何解決這個問題？ 典型的例子還是UC浏覽器，采用一個‘滑塊元件’來控制光标的移動。不管Android和iOS端，都能有效地提升輸入效率和體驗。
長按的彩蛋 除了長按鍵盤外可以移動光标外，在一些第三方鍵盤上也隐藏了‘長按’的彩蛋，如： 1.百度輸入法： 長按可以持續選擇表情，還有表情飄出效果。
2.訊飛輸入法： 長按可以選擇表情的顔色，但部分表情才有而已。
3.搜狗輸入法： 長按可以切換至‘單手鍵盤’模式，用于操作大螢幕手機或iPad。
- 結 語 - 好了，大緻的整理就到這了。可能有些細節點講的不是很好，請你多指教。
推薦閱讀
(點選标題可跳轉閱讀)
誰是最好用的短視訊APP？
Apple 的設計哲學 · UI 篇
一看就會一做就廢，産品清單樣式試試這樣思考！
關注『UI設計達人』
看更多精選UI設計文章
↓↓↓
好文章，我在看❤️