「用戶體驗(yàn)設(shè)計(jì)」如何設(shè)計(jì)移動(dòng)端的文本輸入框

依據(jù)移動(dòng)設(shè)備的ux規(guī)劃有許多難點(diǎn)。其中大的規(guī)劃應(yīng)戰(zhàn)之一是在有限的屏幕空間上處理點(diǎn)擊輸入的疑問(wèn)。關(guān)于ux規(guī)劃師、開(kāi)發(fā)人員和商品司理來(lái)說(shuō)，讓這個(gè)進(jìn)程變得易于用戶運(yùn)用就顯得至關(guān)主要。

創(chuàng)新互聯(lián)論述了進(jìn)步數(shù)據(jù)輸入體會(huì)中的三個(gè)關(guān)鍵因素--速度(進(jìn)步輸入速度)、引導(dǎo)(為用戶輸入供給引導(dǎo)協(xié)助)，反應(yīng)(直接有效地指出用戶輸入進(jìn)程中的疑問(wèn))。

輸入

依據(jù)不一樣的輸入信息匹配適宜的鍵盤

用戶都偏愛(ài)那些依據(jù)輸入內(nèi)容供給了適宜鍵盤的運(yùn)用。咱們能夠依據(jù)輸入框的類型優(yōu)化虛擬鍵盤，這是實(shí)體鍵盤不能做到的。常見(jiàn)輸入內(nèi)容的類型包含：

? 數(shù)字：電話號(hào)碼、信用卡號(hào)碼，PIN碼

? 文字：準(zhǔn)確的姓名、用戶名

? 混合輸入：電子郵件地址、大街地址、查找關(guān)鍵詞

請(qǐng)保證這種匹配鍵盤的規(guī)劃在全部運(yùn)用中是一致的，而不是只是用在了某些當(dāng)?shù)亍?/p>

圖1左：用戶需求點(diǎn)擊123鍵來(lái)切換鍵盤類型以便運(yùn)用數(shù)字鍵盤

圖1右：咱們應(yīng)當(dāng)為需求輸入數(shù)字的文本區(qū)域主動(dòng)匹配適宜的數(shù)字鍵盤

合理運(yùn)用主動(dòng)大寫(xiě)功用

合理運(yùn)用主動(dòng)大寫(xiě)關(guān)于進(jìn)步移動(dòng)端表單的可用性來(lái)說(shuō)至關(guān)主要。每個(gè)文本輸入框的首字母和及每句話的首字母應(yīng)當(dāng)主動(dòng)大寫(xiě)。這格外適用于以下兩類輸入?yún)^(qū)域：

? 給某信息命名，比方用戶的姓和名。

? 包含語(yǔ)句式的信息，比方短信息文本。

不過(guò)，當(dāng)咱們輸入電子郵件地址時(shí)，應(yīng)當(dāng)禁用主動(dòng)大寫(xiě)功用，當(dāng)用戶發(fā)現(xiàn)郵箱首字母大寫(xiě)時(shí)，常常會(huì)退回去將大寫(xiě)字母刪掉，由于他們憂慮這么會(huì)讓郵件發(fā)送發(fā)生疑問(wèn)。

圖2

當(dāng)詞典欠好用時(shí)封閉主動(dòng)糾錯(cuò)功用

主動(dòng)批改這個(gè)功用通常使大多數(shù)用戶絕望，乃至當(dāng)用戶沒(méi)有留意到的時(shí)分，它會(huì)顯著損傷用戶。主動(dòng)糾錯(cuò)功用關(guān)于以下這幾種信息更是收效甚微：例如縮寫(xiě)、大街稱號(hào)、電子郵件、人名、以及詞典里沒(méi)有呈現(xiàn)過(guò)的詞匯。

舊版本的亞馬遜手機(jī)app在文本輸入框中運(yùn)用了主動(dòng)修正形式，本來(lái)準(zhǔn)確的輸入反而被主動(dòng)糾錯(cuò)的內(nèi)容替代了。

圖3

這種狀況常常會(huì)發(fā)作，由于用戶通常更重視他們正在輸入的內(nèi)容而不是已經(jīng)輸入的內(nèi)容。假如輸入的內(nèi)容是地址類的信息，主動(dòng)修正功用會(huì)悄然篡改本來(lái)準(zhǔn)確的輸入內(nèi)容，用戶很難留意這點(diǎn)。

固定的輸入形式

不要運(yùn)用固定的輸入形式。運(yùn)用固定款式的最常見(jiàn)的理由是腳本校驗(yàn)約束。(后端也許不能判別用戶輸入的格局)?？墒谴蠖鄶?shù)狀況下，這是開(kāi)發(fā)者的疑問(wèn)，不應(yīng)當(dāng)讓用戶買單。你應(yīng)當(dāng)想方法將用戶的輸入轉(zhuǎn)化成能夠存儲(chǔ)或顯現(xiàn)的格局，而不是強(qiáng)迫用戶輸入固定的格局。

圖4左：數(shù)據(jù)輸入框的款式符合常規(guī)(把電話號(hào)碼分割成三個(gè)輸入框)，其他表單被鍵盤遮擋

圖4右：輸入框支持輸入靈敏的內(nèi)容，而且輸入完結(jié)后主動(dòng)進(jìn)步以便不會(huì)被鍵盤遮擋

默認(rèn)值和主動(dòng)完結(jié)

規(guī)劃師們通常期望依據(jù)用戶的歷史記錄為他們供給預(yù)設(shè)的默認(rèn)值和提示語(yǔ)，然后運(yùn)用戶更快捷地輸入信息。比方，能夠依據(jù)用戶所處的地理位置信息預(yù)設(shè)國(guó)家地區(qū)。

這種規(guī)劃方法假如與主動(dòng)完結(jié)功用合作運(yùn)用，能夠明顯進(jìn)步用戶輸入的效率。得益于主動(dòng)填充供給了實(shí)時(shí)性的輸入主張或是能夠挑選一項(xiàng)內(nèi)容來(lái)完結(jié)輸入的下拉菜單，用戶能夠更精確高效地輸入信息。關(guān)于那些讀寫(xiě)能力欠安、拼寫(xiě)艱難、格外時(shí)運(yùn)用非本國(guó)語(yǔ)言的用戶來(lái)說(shuō)，這具有很高的價(jià)值。

圖5：供給了查找主張的文本域

標(biāo)簽和有用的信息

當(dāng)用戶在輸入框輸入信息時(shí)，他們想知道所輸入信息的類型，供給明晰的標(biāo)簽文本是一個(gè)使UI更具有可用性的好方法。標(biāo)簽奉告用戶文本框的意圖，當(dāng)輸入框取得焦點(diǎn)時(shí)發(fā)揮作用運(yùn)用戶即便輸入完信息后，依然保證對(duì)輸入框的重視度。

你也能夠依據(jù)輸入框的上下文供給有用的信息。相關(guān)的上下文信息能協(xié)助用戶更簡(jiǎn)便地完結(jié)任務(wù)。

標(biāo)簽長(zhǎng)度約束

標(biāo)簽并不是協(xié)助信息。咱們?cè)谝?guī)劃中應(yīng)當(dāng)運(yùn)用簡(jiǎn)潔的、短的具有描述性的標(biāo)簽(1-2個(gè))，好讓用戶能夠迅速閱讀一切的輸入框的需求。

圖6：輸入框的標(biāo)簽是 ‘電話’、’入住’、‘退房’

假如你需求更多關(guān)于輸入框的信息，提示文本能夠協(xié)助用戶免除迷惑、并防止犯錯(cuò)。

圖7：‘PHONE’文本框下方的信息是協(xié)助文本

簡(jiǎn)略的案牘

規(guī)劃用戶易于了解的語(yǔ)言。表意不明的術(shù)語(yǔ)和語(yǔ)句會(huì)給用戶添加認(rèn)知擔(dān)負(fù)， 明晰的交流和功用應(yīng)當(dāng)一直優(yōu)先于專業(yè)的術(shù)語(yǔ)。

圖8左：冷僻的案牘會(huì)迷惑用戶

圖8右：明晰易懂的術(shù)語(yǔ)易于用戶了解

輸入框內(nèi)的提示信息

頁(yè)內(nèi)標(biāo)簽(也叫占位符文本)適用于簡(jiǎn)略的輸入框，比方用戶名和暗碼。

圖9

當(dāng)屏幕中存在多于兩個(gè)輸入框時(shí)，關(guān)于那些分離隔的文本標(biāo)簽，行內(nèi)標(biāo)簽就不適用了。盡管他們看起來(lái)整齊有序，但存在兩個(gè)嚴(yán)峻的疑問(wèn)：

? 當(dāng)用戶點(diǎn)擊了輸入框，行內(nèi)標(biāo)簽就會(huì)不見(jiàn)，所以他們不能再查看所輸入的內(nèi)容是不是準(zhǔn)確

? 當(dāng)用戶在輸入框中看到提示文本，他們有也許認(rèn)為這個(gè)文本框已被預(yù)填成功然后疏忽它。

一個(gè)處理占位符文本的好方法是--起浮標(biāo)簽。 當(dāng)用戶填寫(xiě)當(dāng)時(shí)某文本框時(shí)，行內(nèi)標(biāo)簽即起浮到文本框頂部。

圖10

留意：不要過(guò)于依靠占位文本和標(biāo)簽。由于一旦在輸入框里輸入內(nèi)容，占位文本就無(wú)法被看到了。能夠運(yùn)用起浮標(biāo)簽，這么能夠運(yùn)用戶隨時(shí)承認(rèn)他們填寫(xiě)的內(nèi)容是不是準(zhǔn)確。

標(biāo)簽色彩

標(biāo)簽的色彩應(yīng)當(dāng)與全部運(yùn)用的色彩匹配，并堅(jiān)持適宜的對(duì)比度(不應(yīng)當(dāng)太亮或太暗)。

圖11

校驗(yàn)

輸入框校驗(yàn)意味著給用戶反應(yīng)并引導(dǎo)他們改正過(guò)錯(cuò)，消除用戶的疑惑。這個(gè)校驗(yàn)的成果應(yīng)當(dāng)是人性化的而非像機(jī)器般冷冰。數(shù)據(jù)處理進(jìn)程中最主要也是最簡(jiǎn)略讓人累覺(jué)不愛(ài)的當(dāng)?shù)厥沁^(guò)錯(cuò)處理。犯錯(cuò)是人類天分，咱們?cè)谔顚?xiě)輸入框時(shí)也不可防止。假如規(guī)劃妥當(dāng)，校驗(yàn)?zāi)軌蚴贡緛?lái)表意不清的交互做法變得明晰易懂。

實(shí)時(shí)校驗(yàn)

當(dāng)用戶在輸入數(shù)據(jù)的進(jìn)程中，他們不喜歡在最終提交時(shí)才發(fā)現(xiàn)自個(gè)犯了過(guò)錯(cuò)。準(zhǔn)確的做法是，咱們應(yīng)當(dāng)在用戶剛剛剛填寫(xiě)完某條信息后就馬上奉告他是不是準(zhǔn)確。

實(shí)時(shí)的頁(yè)內(nèi)校驗(yàn)?zāi)軌蝰R上奉告用戶他們輸入的信息是不是準(zhǔn)確。用戶能夠更快地修正過(guò)錯(cuò)，而不必等到按下提交按鈕后才知道哪里錯(cuò)了。規(guī)劃師能夠給過(guò)錯(cuò)案牘界說(shuō)鮮明的色彩，比方赤色或許橙色這種暖色調(diào)。

圖12左：表單輸入內(nèi)容直到點(diǎn)擊提交后才報(bào)錯(cuò)，而且過(guò)錯(cuò)信息在輸入框以外

圖12右：輸入框下方實(shí)時(shí)顯現(xiàn)了過(guò)錯(cuò)信息

校驗(yàn)不只應(yīng)當(dāng)奉告用戶過(guò)錯(cuò)，還應(yīng)通知他們?cè)趺醋霾攀菧?zhǔn)確的，用戶才會(huì)更有決心完結(jié)輸入進(jìn)程。

圖13

明晰的信息

用戶時(shí)常有這么的迷惑“剛才發(fā)作了啥?為啥會(huì)這么?”。此刻應(yīng)當(dāng)供給一個(gè)直接了當(dāng)?shù)拇鸢?。因而校?yàn)信息應(yīng)當(dāng)明晰地闡明：

? 過(guò)錯(cuò)是啥以及也許發(fā)生過(guò)錯(cuò)的因素

? 用戶下一步應(yīng)當(dāng)做啥來(lái)改正過(guò)錯(cuò)

再次重申，防止運(yùn)用機(jī)械性的術(shù)語(yǔ)。這條規(guī)矩看起來(lái)很簡(jiǎn)略，可是有時(shí)卻很簡(jiǎn)略被疏忽。

適當(dāng)?shù)纳?/h2>

當(dāng)規(guī)劃校驗(yàn)信息時(shí)，色彩是一個(gè)可利用的好工具。依據(jù)常規(guī)，赤色表明過(guò)錯(cuò)信息，黃色表明正告信息，綠色表明成功，這些方法很見(jiàn)效。下圖是一個(gè)校驗(yàn)暗碼輸入框的好事例：

圖14

另一個(gè)運(yùn)用色彩的優(yōu)異事例是對(duì)文本輸入框做出字?jǐn)?shù)約束。赤色的字符計(jì)數(shù)器及赤色下劃線闡明該輸入框字?jǐn)?shù)已超限。

圖15

界面中色彩的運(yùn)用應(yīng)當(dāng)符合用戶認(rèn)知，這是衡量?jī)?yōu)異視覺(jué)規(guī)劃的主要規(guī)范之一。

小結(jié)

咱們的規(guī)劃設(shè)計(jì)應(yīng)當(dāng)盡也許讓用戶更快地完結(jié)信息錄入。即便像是首字母主動(dòng)大寫(xiě)或給每個(gè)輸入框供給合理的指示這種簡(jiǎn)略的方法都會(huì)大大進(jìn)步輸入框的可用性。規(guī)劃師應(yīng)當(dāng)多思考用戶輸入時(shí)的實(shí)在運(yùn)用做法然后在規(guī)劃時(shí)保證沒(méi)有忽略某些主要的信息。

標(biāo)題名稱：「用戶體驗(yàn)設(shè)計(jì)」如何設(shè)計(jì)移動(dòng)端的文本輸入框
網(wǎng)頁(yè)地址：http://www.bm7419.com/news/167960.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷seo公司；服務(wù)項(xiàng)目有用戶體驗(yàn)等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)