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

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

一盹牧、鍵盤類型

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

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

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

image
image

二肌访、按鍵命令類型

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

image

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

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

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

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

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

限制:

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

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

好處:

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

2. 完成

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

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

1. 常規(guī)鍵盤

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

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

image

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

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

僅支持字符和數(shù)字足画、符號(hào),不可切換輸入法蛔钙,給用戶明確的指示性锌云,減少犯錯(cuò)誤的機(jī)會(huì)荠医。

image

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

應(yīng)用場(chǎng)景:

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

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

image

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

應(yīng)用場(chǎng)景:

手機(jī)號(hào)碼,不限定國(guó)內(nèi)外胁黑。

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

image

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

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

image

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

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

image

2. 自定義鍵盤

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

應(yīng)用場(chǎng)景:國(guó)內(nèi)18位身份證號(hào)碼

image

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

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

招行掌上銀行:

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

(圖一)

image

(圖二)

浙商銀行:

登錄密碼鍵盤:

image

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

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

image

那么,如何消減兩者的對(duì)立性爬凑?

建議:

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

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

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

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

1. 禁用自動(dòng)更正

英文文本輸入時(shí),系統(tǒng)會(huì)默認(rèn)自動(dòng)更正功能糊余,用來(lái)幫助用戶更正可能出現(xiàn)的輸入錯(cuò)誤秀又。

但當(dāng)用戶在填寫表單時(shí),如賬戶名贬芥、郵箱名吐辙、昵稱、街道地址蘸劈、縮寫等內(nèi)容昏苏,應(yīng)當(dāng)禁用自動(dòng)更正功能,防止自動(dòng)更正掉用戶所填內(nèi)容威沫,用戶沒有注意到更改贤惯,造成輸入錯(cuò)誤。

反面示例:

  • 沒有禁用自動(dòng)更正棒掠。
  • 輸入“jing”孵构,點(diǎn)擊“done”后自動(dòng)更正為“king”,造成輸入錯(cuò)誤句柠。
  • 用戶名一般為用戶自己取的名浦译,為防止重名,所取名字一般都不會(huì)在詞典里溯职,自動(dòng)更正的功能可能會(huì)導(dǎo)致用戶輸入正確的內(nèi)容改為錯(cuò)誤內(nèi)容精盅。
image

2. 禁用首字母大寫

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

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

image

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

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

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

image
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末酪刀,一起剝皮案震驚了整個(gè)濱河市粹舵,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌蓖宦,老刑警劉巖齐婴,帶你破解...
    沈念sama閱讀 222,464評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件油猫,死亡現(xiàn)場(chǎng)離奇詭異稠茂,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)情妖,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,033評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門睬关,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人毡证,你說(shuō)我怎么就攤上這事电爹。” “怎么了料睛?”我有些...
    開封第一講書人閱讀 169,078評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵丐箩,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我恤煞,道長(zhǎng)屎勘,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,979評(píng)論 1 299
  • 正文 為了忘掉前任居扒,我火速辦了婚禮概漱,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘喜喂。我一直安慰自己瓤摧,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,001評(píng)論 6 398
  • 文/花漫 我一把揭開白布玉吁。 她就那樣靜靜地躺著照弥,像睡著了一般。 火紅的嫁衣襯著肌膚如雪进副。 梳的紋絲不亂的頭發(fā)上这揣,一...
    開封第一講書人閱讀 52,584評(píng)論 1 312
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼曾沈。 笑死这嚣,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的塞俱。 我是一名探鬼主播姐帚,決...
    沈念sama閱讀 41,085評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼障涯!你這毒婦竟也來(lái)了罐旗?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,023評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤唯蝶,失蹤者是張志新(化名)和其女友劉穎九秀,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體粘我,經(jīng)...
    沈念sama閱讀 46,555評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡鼓蜒,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,626評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了征字。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片都弹。...
    茶點(diǎn)故事閱讀 40,769評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖匙姜,靈堂內(nèi)的尸體忽然破棺而出畅厢,到底是詐尸還是另有隱情,我是刑警寧澤氮昧,帶...
    沈念sama閱讀 36,439評(píng)論 5 351
  • 正文 年R本政府宣布框杜,位于F島的核電站,受9級(jí)特大地震影響袖肥,放射性物質(zhì)發(fā)生泄漏咪辱。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,115評(píng)論 3 335
  • 文/蒙蒙 一昭伸、第九天 我趴在偏房一處隱蔽的房頂上張望梧乘。 院中可真熱鬧,春花似錦庐杨、人聲如沸选调。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,601評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)仁堪。三九已至,卻和暖如春填渠,著一層夾襖步出監(jiān)牢的瞬間弦聂,已是汗流浹背鸟辅。 一陣腳步聲響...
    開封第一講書人閱讀 33,702評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留莺葫,地道東北人匪凉。 一個(gè)月前我還...
    沈念sama閱讀 49,191評(píng)論 3 378
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像捺檬,于是被迫代替她去往敵國(guó)和親再层。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,781評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容