界面設(shè)計(jì) | 移動APP中自定義鍵盤如何設(shè)計(jì)?

江湖醬
0 評論 10571 瀏覽 61 收藏 10 分鐘
🔗 产品经理的职业发展路径主要有四个方向:专业线、管理线、项目线和自主创业。管理线是指转向管理岗位,带一个团队..

鍵盤在用戶的交互過程中起到了非常重要的作用,尤其在多個輸入框的場景下。合理地切換”鍵盤類型”和“按鍵命令類型”可以提高用戶填寫表單的效率,同時也可以讓表單填寫過程更加順暢,降低頁面的流失率。

一、鍵盤類型

iOS 中提供了12種鍵盤可以選擇,我們可以根據(jù)用戶當(dāng)前的需要,提供不同類型鍵盤。

在交互稿中,需要對要調(diào)用的鍵盤進(jìn)行標(biāo)注,對于同一個界面中有不同類型輸入框的情況,需要標(biāo)注出鍵盤切換的說明。

雖然12種鍵盤類型已經(jīng)很多,但它們?nèi)匀徊荒芨采w所有場景,這時我們需要自定義鍵盤。

二、按鍵命令類型

除了選用不同類型的鍵盤,部分鍵盤中還有多種“按鍵命令”(下圖中的藍(lán)色按鈕)可以選擇,如“完成”、“搜索”、“發(fā)送”等。

iOS中提供了11種類型的命令,交互稿中可將所需要的命令用文字描述/截圖的形式標(biāo)注。

iOS的鍵盤具有上一項(xiàng)和下一項(xiàng)的功能( < ?> ,如上圖左上方),對于表單的交互設(shè)計(jì)起到了非常重要的作用,交互稿中需加以說明。

1. 上一項(xiàng) 下一項(xiàng)

與鍵盤tab鍵功能一致,跳轉(zhuǎn)至上一個/下一個標(biāo)簽序列,同時保證不會清空已填入的內(nèi)容。

應(yīng)用場景:表單輸入框標(biāo)簽超出2項(xiàng),喚起鍵盤時,在鍵盤上面顯示“上一項(xiàng)”“下一項(xiàng)”操作按鈕。

限制:

區(qū)分按鈕的可點(diǎn)擊狀態(tài)、不可點(diǎn)擊狀態(tài)。

  • 當(dāng)?shù)谝豁?xiàng)時,“上一項(xiàng)”按鈕置灰,不可點(diǎn)擊;
  • 當(dāng)最后一項(xiàng)時,“下一項(xiàng)”按鈕置灰,不可點(diǎn)擊。

好處:

  1. 手機(jī)屏幕有限,如果喚起的鍵盤擋住了下一項(xiàng)輸入框,可以通過點(diǎn)擊下一項(xiàng)按鈕來輸入下一項(xiàng),無需收起鍵盤,方便用戶操作。
  2. 有多項(xiàng)表單填寫時,通過連續(xù)的點(diǎn)擊下一項(xiàng)按鈕,快捷完成輸入。

2. 完成

點(diǎn)擊“完成”按鈕,從上往下收起鍵盤。

三、鍵盤使用實(shí)例

1. 常規(guī)鍵盤

1)常規(guī)鍵盤-文本輸入

應(yīng)用場景:賬戶姓名、地址等文本輸入

2)常規(guī)鍵盤-字符輸入

應(yīng)用場景:登錄密碼

僅支持字符和數(shù)字、符號,不可切換輸入法,給用戶明確的指示性,減少犯錯誤的機(jī)會。

3)常規(guī)鍵盤-純數(shù)字輸入

應(yīng)用場景:

只支持限制了歸屬地的手機(jī)號碼、數(shù)字郵編、短信驗(yàn)證碼、純數(shù)字支付密碼、銀行卡號、信用卡安全碼。

僅支持輸入0-9的數(shù)字,增大有效點(diǎn)擊區(qū)域,給用戶明確的提示,減少輸入錯誤。

4)常規(guī)鍵盤-電話鍵盤

應(yīng)用場景:

手機(jī)號碼,不限定國內(nèi)外。

在填寫手機(jī)號碼時,如沒有對手機(jī)號歸屬地進(jìn)行單獨(dú)限制,則調(diào)用包含“+”“*”“#”的電話鍵盤。

5)常規(guī)鍵盤——帶“.”的數(shù)字鍵盤

應(yīng)用場景:輸入帶小數(shù)點(diǎn)的金額。

6)常規(guī)鍵盤——帶@的電子郵件鍵盤

應(yīng)用場景:郵箱地址

2. 自定義鍵盤

1)定制鍵盤——帶X的數(shù)字鍵盤

應(yīng)用場景:國內(nèi)18位身份證號碼

2)定制鍵盤——隨機(jī)密碼鍵盤

應(yīng)用場景:各類銀行app登錄密碼/支付密碼

招行掌上銀行:

  • 密碼為數(shù)字、字符、字母隨機(jī)組合密碼。
  • 鍵盤上文本:暗示用戶有安全保障的鍵盤,消除用戶疑慮,增加安全性。
  • 鍵盤內(nèi)數(shù)字位置隨機(jī)顯示,防止密碼被泄露(如圖一)
  • 鍵盤內(nèi)數(shù)字按順序顯示(如圖二)

(圖一)

 

(圖二)

浙商銀行:

登錄密碼鍵盤:

6位數(shù)支付密碼/取款密碼/賬戶密碼等:

鍵盤內(nèi)數(shù)字位置隨機(jī)顯示,防止密碼被泄露。但是,安全性提高的同時,也增加了用戶輸入的難度。

那么,如何消減兩者的對立性?

建議:

A. 根據(jù)用戶使用場景的不同,提升不同安全級別。

  • 有密碼的/私人wifi連接——定義為安全環(huán)境——普通鍵盤模式
  • 4G/3G/2G網(wǎng)絡(luò)/公共的無密碼wifi連接——定義為非安全環(huán)境——安全鍵盤模式

B. 可切換安全鍵盤和普通鍵盤輸入,讓用戶自己選擇,并記住用戶的選擇,下次再次使用時,默認(rèn)上一次選擇。

四、鍵盤使用規(guī)則

1. 禁用自動更正

英文文本輸入時,系統(tǒng)會默認(rèn)自動更正功能,用來幫助用戶更正可能出現(xiàn)的輸入錯誤。

但當(dāng)用戶在填寫表單時,如賬戶名、郵箱名、昵稱、街道地址、縮寫等內(nèi)容,應(yīng)當(dāng)禁用自動更正功能,防止自動更正掉用戶所填內(nèi)容,用戶沒有注意到更改,造成輸入錯誤。

反面示例:

  • 沒有禁用自動更正。
  • 輸入“jing”,點(diǎn)擊“done”后自動更正為“king”,造成輸入錯誤。
  • 用戶名一般為用戶自己取的名,為防止重名,所取名字一般都不會在詞典里,自動更正的功能可能會導(dǎo)致用戶輸入正確的內(nèi)容改為錯誤內(nèi)容。

2. 禁用首字母大寫

智能手機(jī)默認(rèn)會把標(biāo)準(zhǔn)文本輸入框的首字母大寫,這在大部分情況下是合適的。

但是,在有些情況下應(yīng)當(dāng)禁用自動大寫,特別是像郵箱地址這種絕大多數(shù)用戶都以為要小寫的情況,首字母自動大寫會造成用戶需再次修改所輸入的內(nèi)容,形成挫敗感,增加操作困難度。

3. 保持一致,調(diào)用合適的鍵盤

如果一個輸入框調(diào)用了專用鍵盤而其他類似的輸入框卻沒有,那么在沒有調(diào)用專用鍵盤時用戶會感到困惑,并開始質(zhì)疑這個輸入框所需輸入的類型。

為特定輸入框調(diào)用合適的鍵盤是正確的做法,但是要確保在app內(nèi)保持一致,否則會讓用戶很困惑。換句話說,如果信用卡號的輸入框調(diào)用了數(shù)字鍵盤,那么類似的輸入框如安全碼、有效期、預(yù)留手機(jī)號也要有同樣的做法。

 

本文由@江湖醬 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)允許,禁止轉(zhuǎn)載。

題圖來自Unsplash, 基于CC0協(xié)議。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!
专题
19331人已学习13篇文章
画像标签是由数据标签经过分析、加工处理,形成的更加抽象、易于理解的复合标签。本专题的文章分享了如何设计用户标签体系。
专题
15141人已学习12篇文章
用户体验五要素包括战略层、范围层、框架层、结构层、表现层五个方面,本专题的文章分享了用户体验五要素的看法。
专题
14278人已学习13篇文章
如果做小红书运营?本专题的文章分享了小红书流量密码。
专题
18013人已学习15篇文章
签到功能是培养用户习惯的好办法。本专题的文章提供了签到功能的设计指南。
专题
53503人已学习19篇文章
让我们来看一下Axure的高端操作:用Axure实现游戏功能
专题
18449人已学习15篇文章
库存管理是管理商品和数量之间的关系。本专题的文章提供了库存管理设计指南。