鍵盤彈起時的交互

來自專欄交互小怪獸1 人贊了文章

之所以想分享篇關於鍵盤彈起的文章，是因為在最近做的項目中，無論在畫交互稿，還是進行設計探討，發現一個小小的鍵盤在細節點上有很多需要注意的點(keng)，也希望同是設計師的大家多提這方面的更多建議。

鍵盤作為用戶與手機每天都在接觸的重要媒介，其存在的重要性不言而喻，每次對話，每次輸入地址，每次查詢機票，基本都會彈起一次，那麼它彈起的時候，會發生什麼呢？

1.鍵盤彈起時，請給我出口

鍵盤在彈起的時候，一般是帶著用戶進入一個新的模態空間去進行輸入，這個時候就要考慮如何讓用戶退出。那麼退出的方式有很多種，可以用圖標示意，可以直接用文字提示(ios搜索的做法)，也可使用返回的形式告知用戶。

隨著輸入方式的多樣化，例如搜索框旁邊會增加語音輸入，識別輸入等，可能會有空間利用的問題，所以我在舉的例子中就是在輸入中捨棄部分功能，將其轉化為退出按鈕的做法，因為個人認為在輸入中需要集中注意的還是「輸入」而不是「切換」，如果仍然希望為用戶提供其他形式輸入的入口，也可在在鍵盤中加入。

2.鍵盤彈起時，推薦他們想要的

用戶在使用鍵盤之前都做過些什麼呢？也許他們已經在別處搜索過同樣的詞語，但沒找到滿意的結果，也許他們剛看完一部電影，來找影評，更常見更主動的場景是，用戶正在閱讀一篇文章，看到個感興趣單不太懂的詞語，於是進行複製，然後到別處去找這個詞，那麼這個時候如果能適時地在鍵盤上推薦，也可以讓整個輸入流程更順暢。

3.鍵盤彈起時，返回再不是返回

手機的底部一般有導航條，這個導航條因手機而異。有的鍵盤會專門設計一個收起的區域，而有的會比較簡潔，直接跟導航條聯動。如果是後者的話，則務必考慮在交互稿中分兩種狀態呈現。

4.鍵盤彈起時，佔位符靠邊

輸入框的佔位符具有一定的提示作用，所以在未激活態的時候居中展示可讀性更強。而彈起鍵盤激活輸入框時，輸入區域則集中在左側，所以佔位符可以靠邊。

5.鍵盤彈起時，內容遮一半

這是比較容易忽略的一個點。鍵盤彈起時，介於用戶要輸入而又未輸入之間，似乎是一個很好的推薦區域，可以放很多相關的內容引導用戶進行搜索。但此時又大多伴隨著鍵盤的彈起，那麼這時候豐富的內容就被遮擋了差不多一半。蘋果WWDC2017中的一篇演講The Keys to a Better Text Input Experience提到了一個自適應內容的理念，希望對大家有所啟發，就是將內容在鍵盤彈起的時候進行適當的壓縮變化，這樣就可以保證內容的全量化展現。

小結

說實話，我作為一名設計師有時候也會忽略一些細節，但我也知道這些細節很重要，因此也在逐步積累與改進，共勉。

文中提到的

蘋果WWDC關於輸入設計優化的演講