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

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

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

輸入

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

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

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

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

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

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

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

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

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

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

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

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

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

圖2

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

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

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

圖3

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

固定的輸入形式

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

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

圖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)步用戶輸入的效率。得益于主動填充供給了實(shí)時(shí)性的輸入主張或是能夠挑選一項(xiàng)內(nèi)容來完結(jié)輸入的下拉菜單，用戶能夠更精確高效地輸入信息。關(guān)于那些讀寫能力欠安、拼寫艱難、格外時(shí)運(yùn)用非本國語言的用戶來說，這具有很高的價(jià)值。

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

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

當(dāng)用戶在輸入框輸入信息時(shí)，他們想知道所輸入信息的類型，供給明晰的標(biāo)簽文本是一個(gè)使UI更具有可用性的好方法。標(biāo)簽奉告用戶文本框的意圖，當(dāng)輸入框取得焦點(diǎn)時(shí)發(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個(gè))，好讓用戶能夠迅速閱讀一切的輸入框的需求。

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

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

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

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

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

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

圖10

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

標(biāo)簽色彩

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

圖11

校驗(yàn)

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

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

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

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

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

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

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

圖13

明晰的信息

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

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

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

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

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

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

圖14

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

圖15

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

小結(jié)

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

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

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

廣告

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