中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)讀：為了提高更好更精準(zhǔn)的服務(wù)，我們往往會(huì)需要收集用戶的信息，表單設(shè)計(jì)就顯得尤為重要。本文將從表單類型和設(shè)計(jì)點(diǎn)出發(fā)進(jìn)行分析，希望對(duì)你有幫助。

不管你是負(fù)責(zé)設(shè)計(jì)B端產(chǎn)品或者C端產(chǎn)品，都必然接觸過表單設(shè)計(jì)。

有長(zhǎng)表單也有短表單，我們要知道表單的目的是收集用戶的信息，綜合這些信息以提供更好更準(zhǔn)確的服務(wù)給到用戶。

對(duì)于用戶來說，填寫長(zhǎng)長(zhǎng)的表單是需要花費(fèi)時(shí)間成本的，如果表單是將所需要收集的問題簡(jiǎn)單的羅列出來，填寫起來會(huì)非常困難，引起用戶的反感情緒，直接導(dǎo)致的就是用戶會(huì)直接關(guān)閉表單填寫。

設(shè)計(jì)師需要通過設(shè)計(jì)手段降低用戶對(duì)于表單的理解成本，充分的從用戶的角度考慮，幫助其更快速高效的完成表單填寫。

一、表單類型

在開始優(yōu)化設(shè)計(jì)表單之前，需要先了解一下表單的類型有哪些。

二、設(shè)計(jì)點(diǎn)

1. 提升填寫效率

設(shè)計(jì)某些有著特定填寫格式的表單，添加上適當(dāng)?shù)奶崾緲永梢愿咝?。下圖這個(gè)是一個(gè)填寫官網(wǎng)地址的表單，通常我們?cè)跒g覽網(wǎng)站時(shí)不會(huì)特意去記住網(wǎng)址，這里提供了一個(gè)常規(guī)網(wǎng)址的樣例格式，可以對(duì)于用戶起到一定的提示作用，幫助其更快速準(zhǔn)確的填寫信息。

類似的還有，地址（如：***街**號(hào)）、日期（MM/DD/YY）、官網(wǎng)地址（http://www.***.com）、ICP備案號(hào)（京ICP證***號(hào)）、車牌號(hào)（川A·***）等，設(shè)計(jì)時(shí)遇到這種類型表單，可以添加相應(yīng)的提示樣例。

當(dāng)可選項(xiàng)較少時(shí)，將選項(xiàng)全部排列出來會(huì)比下拉操作更好。我們?cè)谧夥抠I房時(shí)，會(huì)有一個(gè)戶型的指標(biāo)，采用將幾個(gè)選項(xiàng)統(tǒng)一排列出來的展示方式，用戶可以一眼看到戶型有幾種選擇，只需要一個(gè)操作就可以完成。

而使用下拉框需要先點(diǎn)擊下拉圖標(biāo)，查看有哪些選項(xiàng)，再?zèng)Q定選擇哪個(gè)，這就需要兩步操作才可以完成。相比較之下，必然會(huì)選擇第一種設(shè)計(jì)。有一種情況，當(dāng)可選項(xiàng)超過5個(gè)時(shí)，可以考慮使用下拉樣式。

地區(qū)選擇時(shí)，將省份、城市、區(qū)信息合為一處，減少點(diǎn)擊次數(shù)。下圖兩種形式相比較，鼠標(biāo)點(diǎn)擊次數(shù)上左邊形式更少，操作交互更加流暢，比較符合用戶的使用習(xí)慣，左邊下拉框比右邊視覺效果上會(huì)更簡(jiǎn)潔。

面對(duì)一個(gè)幾頁(yè)長(zhǎng)的表單，需要填寫的信息太多，用戶第一反應(yīng)肯定會(huì)煩躁。

早在19世紀(jì)中葉，愛爾蘭哲學(xué)家漢米爾頓觀察到的，有一個(gè)神奇的7±2效應(yīng)，意思就是人們的短時(shí)記憶的信息量是7個(gè)，可能會(huì)上下浮動(dòng)2個(gè)。運(yùn)用在設(shè)計(jì)交互上，在設(shè)計(jì)這樣的長(zhǎng)表單時(shí)，可以將表單按照類別分為分類，一次只展示部分信息，降低用戶的心理壓力，填寫效率會(huì)更高。

自動(dòng)填充默認(rèn)信息，在填寫表單時(shí)，會(huì)有一些標(biāo)簽信息是相互關(guān)聯(lián)的。

下圖中地址與郵政編碼是相互匹配的信息，用戶填寫完地址，系統(tǒng)可以自動(dòng)將郵政編碼填充。這樣設(shè)計(jì)的原因是產(chǎn)品充分考慮實(shí)際場(chǎng)景，用戶通常是不會(huì)去特意記住編碼，必然需要查找才可以，這必然會(huì)打斷用戶當(dāng)前填寫表單的操作。

類似的表單類型還有如手機(jī)號(hào)碼的區(qū)號(hào)、國(guó)家、具有行業(yè)屬性的表單（如填寫汽車行業(yè)相關(guān)的性別，默認(rèn)填充為男）、針對(duì)某一年齡段的產(chǎn)品的關(guān)于年齡的相關(guān)表單信息，總的來說就是適用于大多數(shù)用戶的標(biāo)簽信息都可以使用自動(dòng)填充默認(rèn)信息的設(shè)計(jì)。

智能聯(lián)想，這種交互設(shè)計(jì)形式很常見，互聯(lián)網(wǎng)產(chǎn)品很多場(chǎng)景都有使用到。用戶輸入某個(gè)信息內(nèi)容，會(huì)自動(dòng)出現(xiàn)有可能相關(guān)的內(nèi)容，用戶可以在這些內(nèi)容中選擇自己需要的，不要一個(gè)一個(gè)輸入，節(jié)省操作成本。

2. 好的交互體驗(yàn)

多行文本框，使用可拉伸的文本框比固定框（內(nèi)容框內(nèi)滾動(dòng)，頁(yè)面中又加了內(nèi)滾動(dòng)）更好。

幾乎所有的表單中都會(huì)出現(xiàn)多行文本框，當(dāng)你作為一名用戶看到下圖兩種文本框時(shí)，你更喜歡哪一種？

左邊文本框時(shí)可以根據(jù)輸入內(nèi)容的多少變化高度；右邊文本框則采用的固定大小的文本框，當(dāng)超過一定字?jǐn)?shù)時(shí)，會(huì)以框內(nèi)滾動(dòng)的形式展示。

根據(jù)使用體驗(yàn)來說，可變化的文本框會(huì)更好，頁(yè)面整體效果更統(tǒng)一。右邊文本框還有一點(diǎn)很不好的設(shè)計(jì)點(diǎn)是，在滾動(dòng)的大頁(yè)面上又加上了一個(gè)滾動(dòng)文本框，這時(shí)一個(gè)頁(yè)面上就出現(xiàn)了兩個(gè)滾動(dòng)條，給用戶操作上造成一定混亂。

錯(cuò)誤提示時(shí)，提示文案需要明確指出出錯(cuò)的地方。經(jīng)常在登錄某個(gè)APP時(shí)提示用戶名或者密碼錯(cuò)誤，這種情況最好的處理方式是明確說明是用戶名還是密碼錯(cuò)誤。

下圖的場(chǎng)景就出現(xiàn)在注冊(cè)的流程中，一些網(wǎng)站對(duì)于用戶名的格式是有相應(yīng)的要求的，當(dāng)你在用戶名中輸入了包含顏文字的字眼就會(huì)報(bào)錯(cuò)，報(bào)錯(cuò)的提示文案應(yīng)該像左邊的一樣講明要求與禁止，試想如果用戶看到右邊的錯(cuò)誤文案，仍然會(huì)一頭霧水。當(dāng)我們?cè)谠O(shè)計(jì)錯(cuò)誤提示時(shí)，可以朝著這個(gè)方向設(shè)計(jì)。

文本框在PC端及移動(dòng)端的使用區(qū)別，PC端通常使用左標(biāo)簽右輸入框，移動(dòng)端頁(yè)面受限于顯示面積小，使用上標(biāo)簽下文本框或者標(biāo)簽置于輸入框內(nèi)。下圖中顯示的標(biāo)簽置于輸入框內(nèi)，當(dāng)點(diǎn)擊輸入框時(shí)，標(biāo)簽移動(dòng)到上面，這種設(shè)計(jì)形式也很好，缺點(diǎn)是開發(fā)成本較高。

對(duì)于特殊格式的信息自動(dòng)幫用戶設(shè)定好展示格式。設(shè)計(jì)這類型表單時(shí)，不能簡(jiǎn)單的按照正常思路去思考，需要考慮到特定場(chǎng)景的設(shè)計(jì)形式。

像手機(jī)號(hào)、銀行卡號(hào)、軟件序列號(hào)等這些表單，通常的形式是每四位數(shù)字與四位數(shù)字都會(huì)使用空格隔開，方便用戶對(duì)照是否有誤。涉及到金額時(shí)，每四位數(shù)字都會(huì)使用逗號(hào)隔開，以便用戶快速了解到金額數(shù)。在設(shè)計(jì)手機(jī)填寫驗(yàn)證碼時(shí)，樣式上是獨(dú)立的6個(gè)圓角矩形框，輸入時(shí)當(dāng)你輸入一位數(shù)字時(shí)會(huì)自動(dòng)跳轉(zhuǎn)到下一個(gè)矩形框。

限制文本框的輸入信息屬性限制。比如輸入密碼、手機(jī)號(hào)、身份證號(hào)碼、車牌號(hào)時(shí)，移動(dòng)端的鍵盤應(yīng)該切換成數(shù)字英文鍵盤，這是通過鍵盤來限制用戶輸入的信息屬性。也可以在文本框輸入時(shí)利用一些弱提示形式，提醒用戶此處應(yīng)該是哪種屬性的信息。

表單在完成填寫提交時(shí)，告知用戶提交結(jié)果，這一步是很有必要的。從用戶角度來說希望填寫的表單是否提交成功，下一步該干什么；從產(chǎn)品自身角度來說，可以在結(jié)果頁(yè)面運(yùn)用情感化設(shè)計(jì)提升用戶的心情愉悅度，同時(shí)提供一些功能入口，為其他頁(yè)面引流。

好了，這次沒有總結(jié)，想看再往上看一遍。

作者：小葫圖，微信公眾號(hào)：YI易設(shè)計(jì)

本文由 @YI易設(shè)計(jì) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于 CC0 協(xié)議