99国产精品成人片,亚洲av成人无码久久精品,久久亚洲精品中文字幕亚瑟

搜索

APP

起點課堂會員權(quán)益

職業(yè)體系課特權(quán)

線下行業(yè)大會特權(quán)

個人IP打造特權(quán)

30+門專項技能課

1300+專題課程

12場職場軟技能直播

12場求職輔導(dǎo)直播

12場專業(yè)技能直播

會員專屬社群

榮耀標(biāo)識

發(fā)布

注冊 | 登錄

360°全方位表單設(shè)計指南（三）

時光時光慢些吧

2020-08-26

0 評論 8833 瀏覽 14 收藏

14 分鐘

編輯導(dǎo)語：用戶要完成表單總要采取輸入、選擇、提交等等動作，這就涉及到了用戶與表單的交互。這篇文章從用戶填寫表單的幾個主要場景出發(fā)對表單交互設(shè)計進(jìn)行了分析，總結(jié)了每個場景下有效的交互設(shè)計經(jīng)驗。

一、單表單輸入

單表單輸入是指只考慮某一個表單的輸入情況，此種情況主要是指的單個文本框的輸入。

1. 輸入前：給出建議

有些情況下用戶并不知道自己應(yīng)該怎么決定答案，這個時候我們可以提前給出一些建議來幫助用戶做出決定。

看一下這個例子：用戶需要給自己的賬戶設(shè)置一個昵稱，但是想不到合適的內(nèi)容，這個時候我們可以自動給出一個昵稱，用戶如果不喜歡可以點擊切換，或者在給出的昵稱基礎(chǔ)上進(jìn)行編輯。

通過給出建議，大大減輕了用戶思考的負(fù)擔(dān)，幫助用戶快速做出決定，既貼心又增加了表單的完成效率。

2. 輸入時：及時驗證

文本框由于本身不限制輸入的數(shù)據(jù)類型，當(dāng)業(yè)務(wù)上要求輸入特定格式的數(shù)據(jù)時，就會出現(xiàn)用戶輸入的數(shù)據(jù)格式不符合要求的情況。

針對這種情況，首先我們應(yīng)該在提交時做數(shù)據(jù)驗證，如果輸入的數(shù)據(jù)格式不符合要求就不允許提交。

但是這樣的方式會導(dǎo)致用戶只有在提交的時候才能發(fā)現(xiàn)自己的錯誤，效率比較低。

我們可以在用戶輸入時就進(jìn)行驗證，比如：

注冊時用戶需要輸入一個用戶名，但是不能使用已被他人使用的用戶名。

這個場景下用戶是不知道哪些用戶名已經(jīng)被他人使用的，只能一次次的試探才能最終確定用戶名，所以我們可以在用戶輸入完用戶名的當(dāng)時就對用戶名稱是否可用進(jìn)行校驗并提示，而不是在用戶提交表單時進(jìn)行提示；這樣用戶就可以及時發(fā)現(xiàn)錯誤及時修改，極大的提升了輸入效率。

注：實時驗證一般只在用戶輸入完成后自動觸發(fā)驗證，不在輸入過程中進(jìn)行驗證，一是避免帶給用戶困惑，同時也能降低服務(wù)器壓力。

但是有一種情況可以在輸入時即進(jìn)行驗證：對用戶的輸入內(nèi)容給出的意見參考而不是對錯的提示。

常見的例子有用戶設(shè)置密碼時，會自動顯示當(dāng)前輸入密碼的密碼強(qiáng)度。

3. 輸入后：自動糾錯

文本框支持輸入的數(shù)據(jù)格式是多種多樣的，有時候同一個內(nèi)容有多種表達(dá)形式，當(dāng)用戶輸入的表達(dá)形式不符合業(yè)務(wù)的要求時，比及時提示用戶正確的格式要求然后讓用戶去修改更好的做法是：自動將用戶的輸入內(nèi)容轉(zhuǎn)換為符合要求的格式。

用戶要輸入一個英語單詞，業(yè)務(wù)上要求首字母必須大寫，當(dāng)用戶習(xí)慣性的用小寫輸入完成時我們可以自動將單詞的首字母轉(zhuǎn)換為大寫后重新顯示給用戶。

用戶在輸入一個日期，業(yè)務(wù)上要求的格式是XXXX/XX/XX，但是用戶輸入的格式是XXXX-XX-XX，在用戶輸入完成后我們可以自動將日期格式轉(zhuǎn)換為XXXX/XX/XX。

注：轉(zhuǎn)換需要在用戶輸入完成后轉(zhuǎn)換，不可在用戶輸入過程中轉(zhuǎn)換以免打斷用戶的輸入。

二、關(guān)聯(lián)輸入

關(guān)聯(lián)輸入是指多個表單之間存在聯(lián)動關(guān)系的輸入，比如選了A之后就不用再填寫B(tài)。

1. 數(shù)據(jù)關(guān)聯(lián)：做到數(shù)據(jù)聯(lián)動

當(dāng)兩個表單之間的數(shù)據(jù)有關(guān)聯(lián)關(guān)系時，需要隱藏聯(lián)動條件下不允許選擇的數(shù)據(jù)而不是用戶選擇后進(jìn)行提示所選的數(shù)據(jù)不符合要求。

比如有年齡和書單兩個表單，當(dāng)填寫的年齡小于18周歲時就不可再選擇某些類型的書單；用戶選擇書單時即應(yīng)該即時校驗用戶輸入的年齡，若小于18周歲則不對用戶展示禁用書單。

2. 表單關(guān)聯(lián)

表單關(guān)聯(lián)是指多個表單是否需要填寫相互之間有制約關(guān)系，最常見的是調(diào)查問卷的場景，某個題目選擇了A答案會跳到第X題，選擇了B答案則會跳到Y(jié)題目。

此時涉及到的情況會比較復(fù)雜，我們可以試著用多個方式逐一對比，并根據(jù)具體情況選擇合適的處理方式。

1）分頁處理

分頁處理適用于關(guān)聯(lián)關(guān)系存在于多組表單之間而不是多個表單之間，此時可以將多組表單分別放在不同的頁面，采用分步填寫的方式逐頁完成表單。

優(yōu)點：

流程清晰，用戶對表單的完成路徑理解成本低。
能保證每一步表單填寫時都是已滿足上一步條件（否則不會進(jìn)行到下一步），不易出錯。

缺點：僅適用于流程類表單無法處理平行表單，對于三個表單任選一個的情況無法處理。

2）分組處理

分組處理即將所有有關(guān)聯(lián)關(guān)系的表單進(jìn)行分組，比如選擇A之后只能選擇123，選擇B之后只能選擇456，選擇C之后只能選擇789；同時ABC之間為互斥關(guān)系，選擇某一個之后即不能選擇另外兩個；此時我們可以將A+123、B+456、C+789在頁面上分為三組，選擇一組之后禁用其他兩組。

優(yōu)點：掌控全局，用戶對所有內(nèi)容一目了然，能根據(jù)需要迅速做出選擇。

缺點：視覺干擾過于嚴(yán)重，特別是分組較多時大量堆積的內(nèi)容會給用戶帶來壓力。

3）選項卡

選項卡也是一種分組處理，不同的是選項卡將不同組的內(nèi)容分別隱藏在了不同的選項卡內(nèi)，每次只展示當(dāng)前選擇的選項卡的內(nèi)容。

優(yōu)點：分類明確，遇到分組較多時，仍能在不對用戶產(chǎn)生嚴(yán)重視覺干擾的情況下讓用戶對所有內(nèi)容一目了然。

缺點：不利于表達(dá)表單的完成路徑，即：用戶無法清晰的理解多個選項卡是需要全部填寫完才能提交表單，還是只填寫其中一個才能提交表單；也無法理解多個選項卡分別填寫后是需要分別提交還是一起提交。

三、增加輸入

增加輸入是當(dāng)前的表單數(shù)量不是固定的，需要用戶根據(jù)需要自由增加。

比如要求用戶填寫家庭成員時我們沒有辦法預(yù)測用戶有多少家庭成員，常見的做法時初始提供兩個成員的錄入表單，用戶可根據(jù)需要點擊“添加成員”向頁面添加更多的成員錄入表單。

此種情況有兩種常用的方式：彈窗添加和顯示隱藏。

彈窗添加即用戶點擊添加時出現(xiàn)一個彈窗，在彈窗中輸入相關(guān)內(nèi)容，確認(rèn)添加后在頁面上顯示添加內(nèi)容；此種方式適用于需要添加的表單內(nèi)容過多時，比如對播放器的復(fù)雜設(shè)置，在彈窗中展示完整的設(shè)置項，設(shè)置完成后在頁面上只顯示設(shè)置的結(jié)果。

顯示隱藏即點擊添加時在頁面上即時增加顯示更多的表單，這種方式優(yōu)點不打斷用戶的輸入，操作比較流暢，但是表單數(shù)量較多時會導(dǎo)致頁面比較混亂。

四、提交表單

提交表單是完成表單的最后一步，此處最需要關(guān)注的是基于各種驗證的提示，這些可以在上一篇文章中詳細(xì)了解。

這次主要說明一個常見的操作處理：很多情況下我們都會要求用戶提交表單時勾選一些必須同意的服務(wù)條款，否則就不允許提交。

比較常見的做法有：

在提交時檢測是否已經(jīng)勾選，未勾選時進(jìn)行提示，這種是體驗最差的做法，因為這種做法只有在用戶提交時才會告訴用戶必須勾選服務(wù)條款。
在未勾選服務(wù)條款時將提交按鈕灰色顯示，這種是標(biāo)準(zhǔn)的做法，能通過灰色顯示提交按鈕給用戶一定的預(yù)期，也達(dá)到了要求用戶必須勾選服務(wù)條款的目的。
還有一種操作效率更好但是不太普遍適用的辦法：將同意服務(wù)條款與提交按鈕合并處理。這種做法將前兩種做法中勾選服務(wù)條款、點擊提交兩步操作合并成了一步，提高了輸入效率；但是此種做法容易導(dǎo)致用戶忽視閱讀條款內(nèi)容，對于服務(wù)條款比較重要，希望用戶必須閱讀的場景不建議使用此種做法。

五、其他技巧

在前兩篇文章中我們說過表單設(shè)計的一個重要原則就是提高用戶操作效率，填寫表單不是用戶的需求，用戶在填寫表單時是痛苦的，我們必須想辦法讓用戶盡快完成表單結(jié)束這種痛苦。

所以萬變不離其宗，只要是有助于實現(xiàn)這一目標(biāo)的策略都是可取的，除了上邊以及前兩篇文章講到的內(nèi)容，還有很多可以參考借鑒的小技巧。

1. 預(yù)測輸入

預(yù)測輸入即根據(jù)用戶已經(jīng)輸入的內(nèi)容做推測，自動給出當(dāng)前輸入的可能答案，最常見的就是根據(jù)當(dāng)前的熱門電影自動給出建議搜索內(nèi)容；比如當(dāng)前爆火的電影《八佰》，當(dāng)用戶輸入“八”或者“8”時都會以下列列表的形式給出預(yù)測電影名“八佰”。

2. 自動對焦

自動對焦是自動幫用戶激活下一個輸入表單，經(jīng)常使用于初始打開表單填寫頁面時，或者隱藏搜索框的搜索功能；當(dāng)用戶點擊搜索圖標(biāo)時會顯示搜索框，此時可以自動將光標(biāo)定位在搜索框中而不需要用戶再點一次文本框來激活文本框。

3. 個性化定制

大數(shù)據(jù)技術(shù)的發(fā)展讓計算機(jī)了解每個人的習(xí)慣成為可能，那么我們就可以根據(jù)每個人不同的操作習(xí)慣給出不同的表單交互形式；比如：有些人習(xí)慣發(fā)表電影評論時長篇大論，我們就可以對這個人顯示一個較大的文本框；有些人只喜歡只言片語，我們就可以顯示一個較小的文本框，將多余的位置展示更多的常用詞組。

4. 引入新技術(shù)

隨著科技的發(fā)展，人機(jī)交互的方式不再局限于用雙手操作鍵盤，語音轉(zhuǎn)文本的技術(shù)已經(jīng)十分成熟；圖像識別技術(shù)讓人們可以利用手機(jī)的攝像機(jī)掃描圖片或者卡片直接獲取信息；也可以借助外部硬件來輔助輸入；比如使用身份證讀卡器直接讀取證件信息來代替手工錄入、使用指紋識別來代替密碼認(rèn)證。

科技發(fā)展日新月異，在提高效率方面機(jī)器總是不會讓我們失望；因此我們也需要多多關(guān)注科技在表單輸入方面帶給我們的各種便利，及時引進(jìn)成熟的技術(shù)方案提升表單輸入體驗！