在交互稿中,應重視「鍵盤類型」的標注
在交互稿的標注中,我們經常會忽略鍵盤的說明,這是不對的。鍵盤在用戶的交互過程中起到了非常重要的作用,尤其在多個輸入框的場景下。
為什么需要標注鍵盤類型?
大家都知道,一款虛擬鍵盤(比如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雷雷~
本文由 @崇書慶 原創發布于人人都是產品經理。未經許可,禁止轉載。
想問一下,金融類,很多常見的是需要輸入金額,輸入金額的鍵盤都是定制化的,為什么要加上一個完成按鍵,(完成按鍵點擊是收起鍵盤),我輸入金額完畢,直接點擊立即購買按鈕不就可以進行下一步了,或者點擊鍵盤外區域,鍵盤也會自動收起,ps:再說一下最近自己對支付購買流程的思考:金融類,在購買理財產品,需要輸入金額這一項里,每次跳轉進輸入金額頁面,都需要用戶點擊一下輸入框才能彈出鍵盤,為什么不設置成跳轉該頁面之后立即彈出鍵盤,給用戶一個連貫性操作,減少用戶操作步驟,這時候的鍵盤是不是不需要加入“完成”按鍵了?研究了國內幾乎大多數金融類產品,這一塊好像都是需要用戶多一步點擊輸入框,我看了文章說是希望先讓用戶仔細看整屏的信息,那信息歸納整理精簡,不可以做成立即彈出鍵盤的形式嗎?最近學習交互很迷茫了,希望能得到回答,非常感謝
為什么鍵盤右下角的“命令按鍵”有時是“完成”,有時是“前往”?
語義上稍微有點差異,如果你講究的話可以區分一下。完成偏向于“針對當前任務”,比如提交一個報名表。前往偏向于“下一個任務”,比如輸入網址后,點擊前往。
這些年你趟過的坑,還少么? ?
感謝分享,確實需要注意啊,尤其是該輸入數字時,彈出的是默認鍵盤,簡直崩潰!
開發中都遇到過
好東西啊, ??
實實在在的干貨!
我曾經看到有位大神分享的交互稿寫法,里面就標注了鍵盤類型。然后我就Get到了
求分享
求分享
學習了
深有體會,之前產品設計稿不注意這些。在開發同學開發完后,給人的體驗真是令人崩潰,每次輸入要切換鍵盤
無法收藏,
不能吧?我可以收藏。你換chrome瀏覽器試試?