国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

當(dāng)表單信息較長(zhǎng)時(shí)，用戶在使用時(shí)往往都會(huì)感覺很吃力，提高長(zhǎng)表單的操作效率顯得格外重要。筆者最近剛好項(xiàng)目中在做表單界面，于是把項(xiàng)目中遇到的問題總結(jié)出來分享給大家。

目錄

• 一、什么是表單
• 二、長(zhǎng)表單設(shè)計(jì)常見問題
• 三、如何提高長(zhǎng)表單操作效率

一、什么是表單？

表單可以收集用戶的信息和反饋意見，是用戶和產(chǎn)品管理者之間溝通的橋梁。表單從結(jié)構(gòu)上可以分為：表現(xiàn)層、交互層、反饋層。

• 表現(xiàn)層主要由文本域、選擇框、標(biāo)簽、地址、按鈕等表單對(duì)象組成。
• 交互層主要由鍵盤、日期控件、選擇控件、調(diào)節(jié)滑塊等對(duì)象組成。
• 反饋層主要由實(shí)時(shí)反饋、結(jié)果反饋等對(duì)象組成。

在我們?nèi)粘Ｉ钪性絹碓诫x不開表單，比如訂外賣、發(fā)布個(gè)人簡(jiǎn)歷、打車、登陸注冊(cè)等都需要用表單來完成。

二、長(zhǎng)表單設(shè)計(jì)常見問題

表單不管是對(duì)用戶還是產(chǎn)品方都很重要，但是當(dāng)表單信息較長(zhǎng)時(shí)就會(huì)出現(xiàn)問題：

當(dāng)你的表單出現(xiàn)這些問題，你的用戶心情肯定不太美好，如果產(chǎn)品不是唯一的，那么他們就會(huì)棄你而去了，就算是唯一的，但是也免不了吐槽你幾句。但不管怎樣像QQ這樣的產(chǎn)品都在不停優(yōu)化用戶體驗(yàn)，我們的產(chǎn)品要留住用戶也是需要不停優(yōu)化。

三、如何提高長(zhǎng)表單操作效率？

當(dāng)表單過長(zhǎng)往往會(huì)給用戶造成壓力，從而放棄操作。而我們常說的用戶體驗(yàn)主要指以用戶為中心進(jìn)行產(chǎn)品設(shè)計(jì)，其目的是滿足產(chǎn)品需求、符合用戶習(xí)慣和認(rèn)知、能高效愉悅地完成操作。達(dá)到這些目的我們才可能提高整體的操作效率。
具體表現(xiàn)在框架層展示清晰、表現(xiàn)層展示合理、交互層操作高效、反饋層實(shí)時(shí)提醒。根據(jù)這些特點(diǎn)我整理了8條優(yōu)化建議，如下所示：

1. 將長(zhǎng)表單分步設(shè)計(jì)
2. 將相關(guān)的信息進(jìn)行分組
3. 突出核心信息
4. 信息排序遵循用戶習(xí)慣
5. 優(yōu)化設(shè)計(jì)細(xì)節(jié)，提升好感度
6. 采用合理的輸入方式
7. 尋找更高效的輸入方式
8. 及時(shí)反饋

1. 將長(zhǎng)表單分步設(shè)計(jì)

當(dāng)表單較長(zhǎng)時(shí)，將表單信息進(jìn)行拆分，并分步設(shè)計(jì)，可以有效降低用戶輸入壓力。就好像同樣的人數(shù)排隊(duì)，一個(gè)隊(duì)排成長(zhǎng)長(zhǎng)的1排，一個(gè)隊(duì)分成了2排，你是不是更想排第二隊(duì)的呢？

同樣地，有效拆分長(zhǎng)表單會(huì)讓用戶覺得這個(gè)操作并不太多，還可嘗試著去完成，如下圖所示：

Keep采用標(biāo)簽導(dǎo)航進(jìn)行分布設(shè)計(jì)、58同城采用下一步的方式進(jìn)行設(shè)計(jì)，都很好地將界面起到了簡(jiǎn)化作用。

2. 將相關(guān)的信息進(jìn)行分組

信息較多時(shí)，將相關(guān)信息進(jìn)行分組可以減輕用戶輸入壓力。比如你要去超市購買雞蛋、牛奶、蘋果、香蕉、西紅柿、酸奶、黃瓜這7樣?xùn)|西，如果直接記你可能很快就忘記了，如果我們將其分為蛋類、奶類、水果、蔬菜這樣是不是就輕松很多。

同理，在設(shè)計(jì)時(shí)我們可以將屬性相同的歸為一組、類似功能的歸為一組，這樣從視覺上好像信息變少了，用戶才有完成的動(dòng)力。如下圖所示：

58同城將信息分為基本信息、租金詳情，同時(shí)信息內(nèi)容將相關(guān)聯(lián)的廳室、朝向、樓層分為一組。雖然信息差不多，但是58看上去簡(jiǎn)潔很多。

3. 突出核心信息

在界面中將核心信息進(jìn)行差異化設(shè)計(jì)，可以很好引導(dǎo)用戶視線，這里的差異化設(shè)計(jì)可以是字體加大加粗、添加背景色、色彩對(duì)比、留白等。

餓了么訂單列表的收貨地址、送達(dá)時(shí)間、支付方式就采用了差異化設(shè)計(jì)，選擇收貨地址將字號(hào)增大、并放置在列表外的藍(lán)色背景上，送達(dá)時(shí)間和支付方式的從參數(shù)采用藍(lán)色文字。這樣不僅將模塊之間有了區(qū)分，同時(shí)在表現(xiàn)形式和用戶接受信息上都有加強(qiáng)。

4. 信息排序遵循用戶習(xí)慣

信息排序指每個(gè)模塊的內(nèi)部信息最好能按照用戶習(xí)慣進(jìn)行排序。比如填寫個(gè)人信息時(shí)，一般順序?yàn)樾彰?dāng)前公司→職位，如果你把這個(gè)位置顛倒了就打破了用戶的邏輯，會(huì)增加用戶思考的時(shí)間，如下圖所示。

智聯(lián)招聘的個(gè)人信息界面排列順序?yàn)樾彰?、公司、職位、所在地均是圍繞個(gè)人信息逐步填寫。

5. 優(yōu)化細(xì)節(jié)提升好感度

表單細(xì)節(jié)的設(shè)計(jì)主要需要注意列表對(duì)齊方式、文字層次等。

1）標(biāo)題和暗示選用適合對(duì)齊方式

標(biāo)題和暗示對(duì)齊方式一般有三種：左對(duì)齊、左右對(duì)齊、上下對(duì)齊。

從下圖可以看出：左對(duì)齊/左右對(duì)齊，不如上下對(duì)齊視覺流暢。但是其占地小，因此這兩種用得比較常見。一般輸入信息較多時(shí)可采用左對(duì)齊、選擇信息較多時(shí)采用左右對(duì)齊、信息較少時(shí)采用上下對(duì)齊。

2）文字要有層次

設(shè)計(jì)時(shí)文字大小、默認(rèn)顏色、輸入顏色、強(qiáng)調(diào)顏色都需要設(shè)定好，這樣可以提升表單細(xì)節(jié)的層次。

6. 采用合理的輸入方式

輸入方式也可交交互方式主要有：鍵盤、快捷標(biāo)簽、滑塊、下拉控件、輸入框等。采用合適的形式可以節(jié)省用戶輸入時(shí)間，如下圖所示。

轉(zhuǎn)轉(zhuǎn)輸入賣多少錢時(shí)直接采用聯(lián)動(dòng)的數(shù)字鍵盤，讓輸入一次完成，不用來回切換。當(dāng)需要輸入詳情時(shí)直接調(diào)用文字鍵盤，同時(shí)還設(shè)置了快捷標(biāo)簽，讓編輯更順暢。

7. 尋找更高效的輸入方式

當(dāng)輸入樣式設(shè)計(jì)后，我們?cè)谧穯栂逻@種輸入方式真的是最優(yōu)的嗎。還有其他形式可以取代嗎？比如加入語音輸入、攝像頭掃描、聯(lián)動(dòng)彈窗等。

8. 及時(shí)反饋

及時(shí)反饋可以避免所有信息都填完之后，再彈出toast提示不通過的情況，它同樣能提供操作效率，如下圖所示。

58同城中，當(dāng)我輸入的數(shù)字為一位數(shù)時(shí)，他會(huì)提示租金最少輸入兩位，這樣可以有效防止用戶錯(cuò)填，給用戶更清晰的指示。

四、總結(jié)

本文主要和大家分享了，提高長(zhǎng)表單操作效率的幾個(gè)優(yōu)化方面。

1. 通過將長(zhǎng)表單分布設(shè)計(jì)、將相關(guān)的信息進(jìn)行分組讓框架層展示更清晰。
2. 通過突出核心信息、信息排序遵循用戶習(xí)慣、優(yōu)化細(xì)節(jié)提升好感度讓表現(xiàn)層展示更有層次。
3. 通過采用合理的輸入方式、尋找更高效的輸入方式讓交互層操作更高效。
4. 通過及時(shí)反饋?zhàn)尫答亴訉?shí)時(shí)提醒，避免錯(cuò)誤操作。

參考引文

經(jīng)驗(yàn)分享：簡(jiǎn)化輸入，讓網(wǎng)頁表單更親切?http://t.cn/RgJPuuK

以用戶視角出發(fā)的表單之旅?http://t.cn/EKTmQOC

如何通過設(shè)計(jì)的手段來提高表單的錄入體驗(yàn)?http://t.cn/EKTmuN8

表單設(shè)計(jì)需要注意?http://t.cn/EhMmZPf

如何高效完成表單輸入？來看這個(gè)實(shí)戰(zhàn)案例！http://t.cn/Rgx3Pr4

作者：風(fēng)箏KK，公眾號(hào)：海鹽社

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

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