在交互稿中,應重視「鍵盤類型」的標注

15 評論 19553 瀏覽 130 收藏 9 分鐘

在交互稿的標注中,我們經常會忽略鍵盤的說明,這是不對的。鍵盤在用戶的交互過程中起到了非常重要的作用,尤其在多個輸入框的場景下。

為什么需要標注鍵盤類型?

大家都知道,一款虛擬鍵盤(比如iOS系統鍵盤)有很多種布局類型。在交互稿中,很多人是不標注鍵盤類型的,我原先也是不標注的。但近來發現鍵盤對于用戶操作的影響其實很大,不標注鍵盤類型是不對的。一方面,如果鍵盤調用不當,用戶則需要手動切換輸入法,這是影響操作效率的(如上圖);另一方面,對于多輸入框的表單來說,輸入框之間的切換、提交表單,這些操作其實都可以通過鍵盤實現(如上圖左),而無需用戶手動點擊原界面中的元素。最后還有比較重要的一點是:如果設計師不標注,開發同學一般都寫成默認鍵盤,而不會根據場景寫成不同類型的鍵盤。

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

iOS原生應用中的鍵盤

iOS 中提供了多達12種鍵盤可以選擇(如上圖,不討論中文鍵盤,中文鍵盤只有一種布局)。我們可以根據用戶當前的需要,提供不同類型鍵盤。在交互稿中,我們可以將相應的鍵盤類型名稱(英文名)寫在界面下方,或者直接使用相應的鍵盤截圖放在交互稿中。對于同一個界面中有不同類型輸入框的情況,需要標注出鍵盤切換的說明。雖然12種鍵盤類型已經很多,但它們仍然不能覆蓋所有場景,這時我們可以進行自定義鍵盤。當然,開發成本你懂的,開發同學的表情你也懂的。

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

Android原生應用中的鍵盤

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

同iOS一樣,Android的部分鍵盤也具有多種“按鍵命令”可以選擇:回車、搜索、前往、下一項、完成、發送(未找到案例)。在交互稿中,可以標注出想要的“按鍵命令”類型。大家應該有注意到,Android中多了一個“下一項”的按鍵命令,用來替代iOS鍵盤左上方的“ < >”按鍵。在多輸入框表單的場景下,切記標注出鍵盤的“按鍵命令”何時變為“下一項”,何時變為“完成”。

H5下的鍵盤

在H5環境中,鍵盤的類型仍然可以自由選擇?!鞍存I命令”的類型大部分可以選擇,但“完成”和“下一項”不可以選擇。也就是說,程序可以控制調出的是“數字鍵盤”還是“字母鍵盤”或其他任意類型的鍵盤。但在“按鍵命令”類型調用方面,只能調用“搜索”、“回車”、“前往”,而不能調用“下一項”和“完成”。所以在標注交互稿時,需要注意這一點。這個缺陷對于iOS環境中的H5影響并不是太大,因為iOS的鍵盤具有“< >”和“完成”按鈕。但對于Android環境中H5的影響則很大,因為當用戶填寫完一個輸入框想要跳轉下一個輸入框時,只能手動點擊。如果用戶下意識地點擊“前往”按鈕,則可能會出現表單警報(如上圖所示)。

這里有一個例外情況,就是當輸入框的字符類型是“數字”時,“按鍵命令”會自動變成“下一項”。Android環境中的這些問題對于用戶成本本身就很高的“表單填寫”交互來說,其實是很要命的,也是讓人無能為力。

PS:上圖中鍵盤上方的白色工具欄(上一項、下一項……)是瀏覽器提供的插件,不屬于系統鍵盤。

總結

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

交互稿中,除了忽略“鍵盤的標注”,我們還會忽略很多其他細節的標注,比如過場、加載、熱區范圍等。對于開發同學來說,不標注一般就意味著不用考慮,指定默認值即可。但對于整個產品來說,每一個細節的忽略都會導致相應的體驗問題。所以,如果你還沒有和開發同學形成非常良好的默契,還是盡量標注出這些細節吧。

對了,上文中提到的技術上的“可以”和“不可以”都是基于一般的開發投入而言啦。因為對開發同學來說:沒有實現不了的功能,只有給不了的時間。

最后拋一個問題:?為什么鍵盤右下角的“命令按鍵”有時是“完成”,有時是“前往”?到底應該選哪個呢?歡迎留言討論……

 

作者:崇書慶-seeking-雷雷,網易UEDC小鮮肉1號,高級交互設計師?;桌?,因為外面酷似孫紅雷,現支持杭研云信項目。有想法,有態度,愛學習,愛分享就是wuli雷雷~

本文由 @崇書慶 原創發布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 想問一下,金融類,很多常見的是需要輸入金額,輸入金額的鍵盤都是定制化的,為什么要加上一個完成按鍵,(完成按鍵點擊是收起鍵盤),我輸入金額完畢,直接點擊立即購買按鈕不就可以進行下一步了,或者點擊鍵盤外區域,鍵盤也會自動收起,ps:再說一下最近自己對支付購買流程的思考:金融類,在購買理財產品,需要輸入金額這一項里,每次跳轉進輸入金額頁面,都需要用戶點擊一下輸入框才能彈出鍵盤,為什么不設置成跳轉該頁面之后立即彈出鍵盤,給用戶一個連貫性操作,減少用戶操作步驟,這時候的鍵盤是不是不需要加入“完成”按鍵了?研究了國內幾乎大多數金融類產品,這一塊好像都是需要用戶多一步點擊輸入框,我看了文章說是希望先讓用戶仔細看整屏的信息,那信息歸納整理精簡,不可以做成立即彈出鍵盤的形式嗎?最近學習交互很迷茫了,希望能得到回答,非常感謝

    來自北京 回復
  2. 為什么鍵盤右下角的“命令按鍵”有時是“完成”,有時是“前往”?

    來自上海 回復
    1. 語義上稍微有點差異,如果你講究的話可以區分一下。完成偏向于“針對當前任務”,比如提交一個報名表。前往偏向于“下一個任務”,比如輸入網址后,點擊前往。

      來自浙江 回復
  3. 這些年你趟過的坑,還少么? ?

    來自湖北 回復
  4. 感謝分享,確實需要注意啊,尤其是該輸入數字時,彈出的是默認鍵盤,簡直崩潰!

    來自北京 回復
  5. 開發中都遇到過

    來自河南 回復
  6. 好東西啊, ??

    來自北京 回復
  7. 實實在在的干貨!

    來自北京 回復
  8. 我曾經看到有位大神分享的交互稿寫法,里面就標注了鍵盤類型。然后我就Get到了

    來自浙江 回復
    1. 求分享

      來自廣西 回復
    2. 求分享

      來自北京 回復
  9. 學習了

    來自湖北 回復
  10. 深有體會,之前產品設計稿不注意這些。在開發同學開發完后,給人的體驗真是令人崩潰,每次輸入要切換鍵盤

    回復
  11. 無法收藏,

    回復
    1. 不能吧?我可以收藏。你換chrome瀏覽器試試?

      來自廣東 回復