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

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

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

輸入

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

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

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

? 文字：準確的姓名、用戶名

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

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

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

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

合理運用主動大寫功用

合理運用主動大寫關于進步移動端表單的可用性來說至關主要。每個文本輸入框的首字母和及每句話的首字母應當主動大寫。這格外適用于以下兩類輸入區(qū)域：

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

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

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

圖2

當詞典欠好用時封閉主動糾錯功用

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

舊版本的亞馬遜手機app在文本輸入框中運用了主動修正形式，本來準確的輸入反而被主動糾錯的內容替代了。

圖3

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

固定的輸入形式

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

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

圖4右：輸入框支持輸入靈敏的內容，而且輸入完結后主動進步以便不會被鍵盤遮擋

默認值和主動完結

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

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

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

標簽和有用的信息

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

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

標簽長度約束

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

圖6：輸入框的標簽是 ‘電話’、’入住’、‘退房’

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

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

簡略的案牘

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

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

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

輸入框內的提示信息

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

圖9

當屏幕中存在多于兩個輸入框時，關于那些分離隔的文本標簽，行內標簽就不適用了。盡管他們看起來整齊有序，但存在兩個嚴峻的疑問：

? 當用戶點擊了輸入框，行內標簽就會不見，所以他們不能再查看所輸入的內容是不是準確

? 當用戶在輸入框中看到提示文本，他們有也許認為這個文本框已被預填成功然后疏忽它。

一個處理占位符文本的好方法是--起浮標簽。 當用戶填寫當時某文本框時，行內標簽即起浮到文本框頂部。

圖10

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

標簽色彩

標簽的色彩應當與全部運用的色彩匹配，并堅持適宜的對比度(不應當太亮或太暗)。

圖11

校驗

輸入框校驗意味著給用戶反應并引導他們改正過錯，消除用戶的疑惑。這個校驗的成果應當是人性化的而非像機器般冷冰。數(shù)據(jù)處理進程中最主要也是最簡略讓人累覺不愛的當?shù)厥沁^錯處理。犯錯是人類天分，咱們在填寫輸入框時也不可防止。假如規(guī)劃妥當，校驗能夠使本來表意不清的交互做法變得明晰易懂。

實時校驗

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

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

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

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

校驗不只應當奉告用戶過錯，還應通知他們怎么做才是準確的，用戶才會更有決心完結輸入進程。

圖13

明晰的信息

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

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

? 用戶下一步應當做啥來改正過錯

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

適當?shù)纳?/h2>

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

圖14

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

圖15

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

小結

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

標題名稱：「用戶體驗設計」如何設計移動端的文本輸入框
網頁地址：http://muchs.cn/news/167960.html

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

廣告

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