国产a一级毛片爽爽影院_欧美日韩亚洲中字二区在线播放_国产在线每日都有更新_日韩中文字幕tv在线看_日韩美女婬乱大片A级网站_韩国无遮免费羞羞漫画_久久亚洲精品无码播放偷妻_国产成人777爽视频_色噜噜狠狠成人中文综合18_国产精品免费高清在线观看

編輯導(dǎo)語(yǔ)：當(dāng)我們想使用某個(gè)站點(diǎn)的服務(wù)，站點(diǎn)也想了解用戶的信息資料時(shí)，便產(chǎn)生了表單。然而冗長(zhǎng)麻煩的表單，可能會(huì)勸退用戶，要怎么做出簡(jiǎn)潔干凈，另用戶愉悅填寫的表單呢？一起來(lái)看一下吧。

自互聯(lián)網(wǎng)發(fā)展到現(xiàn)在，當(dāng)我們想使用某個(gè)站點(diǎn)的服務(wù)時(shí)，站點(diǎn)也想了解用戶的信息資料，這時(shí)候就產(chǎn)生了表單，在站點(diǎn)提供服務(wù)給用戶前，需要用戶進(jìn)行填寫資料。但是冗長(zhǎng)復(fù)雜麻煩的表單，會(huì)立馬勸退用戶。這時(shí)不禁拋出以下疑問(wèn)：

怎樣做出簡(jiǎn)潔干凈令用戶愉悅填寫的表單呢？

我們不能忽略一些交互細(xì)節(jié)，往往一些好的交互提升會(huì)帶給用戶不一樣的美妙感受，而我們這邊通過(guò)查閱了一些表單設(shè)計(jì)文章，輸出了以下表單的設(shè)計(jì)功能建議：

一、表單組件

1. 輸入框

一般輸入包含文本標(biāo)簽，輸入框本身以及信息提示組成。

建議規(guī)范：

1）清晰的文本標(biāo)簽

讓用戶正確識(shí)別需要輸入什么，文本標(biāo)簽必須要有的，還可以增加普遍認(rèn)知的圖標(biāo)，用戶一瞬間即可反應(yīng)輸入內(nèi)容（例如搜索的放大鏡圖標(biāo)）。

2）合理的輸入框尺寸

輸入框尺寸根據(jù)輸入內(nèi)容的長(zhǎng)短來(lái)設(shè)計(jì)，會(huì)更加適宜用戶閱讀和輸入，如果一個(gè)字段太長(zhǎng)或太短，用戶就會(huì)開(kāi)始懷疑他們是否誤解了這個(gè)標(biāo)簽。

對(duì)于具有可變輸入(姓名或電子郵件)長(zhǎng)度但在標(biāo)準(zhǔn)平均范圍內(nèi)的表單字段，應(yīng)該根據(jù)可能輸入的平均長(zhǎng)度找到合適的寬度。研究表明，這些輸入字段的范圍通常在18到33個(gè)字符之間。

譬如我們經(jīng)常輸入的驗(yàn)證碼，一般為4個(gè)字符的長(zhǎng)度，減低用戶瀏覽時(shí)感受的輸入負(fù)擔(dān)。

3）合適的字體大小

應(yīng)該確保字體足夠大，盡量讓它們清晰可辨，參考了蘋果跟安卓的設(shè)計(jì)規(guī)范，安全文字一般14px-16px之間。

4）顏色與背景高對(duì)比度

標(biāo)簽和輸入文案的顏色，確保在W3C的對(duì)比度范圍中，較小的文本應(yīng)當(dāng)確保至少和背景之間有4.5:1的對(duì)比度比率。

5）提供舒適的點(diǎn)擊區(qū)域

確保用戶用戶點(diǎn)擊輸入的時(shí)候，觸發(fā)區(qū)足夠?qū)捤墒孢m，而不是很難點(diǎn)擊。拇指的觸發(fā)區(qū)域應(yīng)當(dāng)控制在 45~57px之間，但是在移動(dòng)端上，控件看起來(lái)太大會(huì)讓人覺(jué)得不舒服，所以你的文本框高度應(yīng)該設(shè)計(jì)在32~40px之間，這樣看起來(lái)足夠友好，又不會(huì)太大。

6）選擇合適的鍵盤（平板&移動(dòng)端）

輸入框選擇合適的鍵盤，可以讓用戶更快的填寫表單，例如輸入框內(nèi)容如果只需輸入數(shù)字的，可以選擇數(shù)字鍵盤。

7）鍵盤tab訪問(wèn)（PC端）

根據(jù)W3C的用戶實(shí)踐設(shè)計(jì)模式中鍵盤交互模式提及，表單應(yīng)該只能通過(guò)鍵盤上的tab按鈕來(lái)訪問(wèn)和編輯。

8）輸入框顯示邊框，聚焦時(shí)高亮輸入框

具有定義邊界的輸入字段對(duì)于有移動(dòng)障礙和認(rèn)知障礙的用戶非常重要。

點(diǎn)擊聚焦輸入框時(shí)，建議在輸入框提供一個(gè)清晰的視覺(jué)提示——改變顏色，在框中淡出，高亮顯示，縮放等等。

9）避免使用占位符文本作為標(biāo)簽

雖然占位符文本用作標(biāo)簽非常節(jié)約表格的空間，但是對(duì)于用戶來(lái)說(shuō)非常容易出現(xiàn)忘記輸入的是什么，然后又要?jiǎng)h除掉輸入框所寫的，才能看到占位符的標(biāo)簽內(nèi)容，所以目前更推薦使用懸浮標(biāo)簽。

2. 單選組件

單選，在提供的選項(xiàng)中只能選擇其中一項(xiàng)。

建議規(guī)范：

1）合適的字體大小

同輸入框的規(guī)范一樣，建議安全文字一般14px-16px之間。

2）顏色與背景高對(duì)比度

同輸入框的規(guī)范一樣，確保文本和背景之間有4.5:1的對(duì)比度比率。

3）舒適的點(diǎn)擊區(qū)域

建議將整個(gè)單選框和標(biāo)簽選項(xiàng)作為點(diǎn)擊區(qū)域。

4）合適的單選設(shè)計(jì)形式

根據(jù)選項(xiàng)的數(shù)量來(lái)選擇對(duì)應(yīng)的設(shè)計(jì)形式（單選常見(jiàn)樣式如開(kāi)關(guān)形式、分段控件式、垂直列表式、輸入篩選式還是下拉菜單式）。

5）考慮預(yù)填寫

讓容易被選中的放在選項(xiàng)的最前處，例如生日年份，有些控件一拉下來(lái)就是1960-2018，但是目標(biāo)用戶也不大可能是1,2歲的小孩吧，這種選項(xiàng)完全可以排除掉。

3. 多選組件

建議規(guī)范：建議規(guī)范基本跟單選組件一致。

樣式選擇：

多選形式目前大多采用以下四種方式：

1. 開(kāi)關(guān)形式：表示選中或非選中兩種狀態(tài)之間的切換，一般只有一條單獨(dú)使用
2. 水平放置式：適合選擇項(xiàng)不非常多和移動(dòng)端展示，節(jié)省空間
3. 垂直列表式：適合選擇項(xiàng)少于6項(xiàng)的情況和PC端顯示，更直觀，也容易選中，但是較浪費(fèi)空間
4. 輸入篩選式：適合選項(xiàng)較多的情況，增加搜索篩選功能

選擇建議：

1. 開(kāi)關(guān)式：只有兩個(gè)選項(xiàng)，并且是互斥狀態(tài)
2. 水平列表式：小于6個(gè)選項(xiàng)，適合移動(dòng)端
3. 垂直列表式：小于6個(gè)選項(xiàng)，適合PC端
4. 輸入篩選式：適合非常多選項(xiàng)，移動(dòng)端&PC端皆可

4. 滑塊

滑塊，對(duì)于刻度范圍上的非謹(jǐn)慎選擇，例如捏臉的時(shí)候?qū)δ槻康恼{(diào)整。由軌道，拇指，選中值（可選）和刻度線（可選）組成。

建議規(guī)范：

1. 觸碰范圍，讓用戶容易點(diǎn)中滑塊上的拇指，拇指直徑建議20px左右
2. 即刻反應(yīng)，當(dāng)與滑塊交互時(shí)，周圍涉及的更改立即有反應(yīng)執(zhí)行

二、總結(jié)

以上的表單優(yōu)化建議內(nèi)容主要通過(guò)收集資料整理的，歡迎多多提意見(jiàn)交流~

本文由 @一起聊產(chǎn)品 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

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