「用戶體驗設(shè)計」如何設(shè)計移動端的文本輸入框

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

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

輸入

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

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

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

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

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

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

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

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

合理運(yùn)用主動大寫功用

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

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

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

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

圖2

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

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

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

圖3

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

固定的輸入形式

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

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

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

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

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

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

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

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

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

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

標(biāo)簽長度約束

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

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

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

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

簡略的案牘

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

圖8左：冷僻的案牘會迷惑用戶

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

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

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

圖9

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

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

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

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

圖10

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

標(biāo)簽色彩

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

圖11

校驗

輸入框校驗意味著給用戶反應(yīng)并引導(dǎo)他們改正過錯，消除用戶的疑惑。這個校驗的成果應(yīng)當(dāng)是人性化的而非像機(jī)器般冷冰。數(shù)據(jù)處理進(jìn)程中最主要也是最簡略讓人累覺不愛的當(dāng)?shù)厥沁^錯處理。犯錯是人類天分，咱們在填寫輸入框時也不可防止。假如規(guī)劃妥當(dāng)，校驗?zāi)軌蚴贡緛肀硪獠磺宓慕换プ龇ㄗ兊妹魑锥?/p>

實時校驗

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

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

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

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

校驗不只應(yīng)當(dāng)奉告用戶過錯，還應(yīng)通知他們怎么做才是準(zhǔn)確的，用戶才會更有決心完結(jié)輸入進(jìn)程。

圖13

明晰的信息

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

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

? 用戶下一步應(yīng)當(dāng)做啥來改正過錯

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

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

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

圖14

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

圖15

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

小結(jié)

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

新聞標(biāo)題：「用戶體驗設(shè)計」如何設(shè)計移動端的文本輸入框
本文路徑：http://www.bm7419.com/news10/167960.html

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

廣告

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