本文主要是根據(jù)項目的表單填寫體驗差被客戶撤下線重新整改，而對此將表單進行了新的用戶體驗設計的一些構(gòu)思。

一、現(xiàn)狀

傳統(tǒng)的PC端空間范圍大，能夠?qū)⒈韱蔚乃行畔⑦B同溫馨提示語等平鋪展示出來，但是一下子用戶看到這么多內(nèi)容會給用戶帶來壓力，進而放棄表單的填寫， 這也是在PC端表單設計的用戶體驗很不好的地方。

如今的移動互聯(lián)網(wǎng)時代，表單的設計思路不同以往PC端，移動端表單設計存在以下難點：

移動端屏幕空間有限，不可能像PC端一樣在表單的設計上將所有的信息都平鋪展示出來；
表單的字段信息比較多，會使得整張表單過長，以致得至少2屏以上的內(nèi)容來呈現(xiàn)，過多的內(nèi)容會促使用戶放棄填單；
表單的提示語不夠友好，沒有給用戶創(chuàng)造一個洽意的表單填寫環(huán)境，用戶在表單填寫過程中更多的是不知所措；
移動端的輸入困難，由于移動設備空間限制，用戶很難看清并及時糾正輸入過程中的錯誤；
移動選的選擇器單行所能承載的字段數(shù)量有限，面對超多字段的選擇項往往是不足以承載。
二、設計目標

盡可能讓更多用戶完成表單的填寫，減少跳出率；
表單的設計要讓用戶少思考，少操作。
三、設計策略

1. 刪除“信息”

由于表單的信息過于，移動端的位置又有限，所以需要刪除掉多余的信息，刪除信息分兩種情況：

（1）刪除標題多余字段

客戶提交過來的業(yè)務表單里面，大部分的標題字段過長，并且啰嗦，例如：投訴表單中的“違法行為的起止時間”標題， 做“刪除”調(diào)整之后標題可變成“違法時間”，對應的在時間選擇框的溫馨提示語告知用戶：請選擇開始/結(jié)束時間，即可解決問題。

（2）刪除表單里的標題

通過調(diào)研之后發(fā)現(xiàn),：客戶提交過來的表單中有些標題字段，即使沒有也不影響他們幫助用戶解決問題，也就意味著這些標題字段 是可以刪除的，必要的信息呈現(xiàn)給用戶讓他們完善即可，不要把非必要的字段硬塞給用戶，多一個標題字段就會多一位用戶放棄填單。

2. 調(diào)整排版

舊版本的頁面布局是采用從上到下，即標題字段在上輸入框在下，這在一定程度上會使得表單的頁面內(nèi)容過長，同時字段標題的長短不一破壞了版面結(jié)構(gòu)。

新設計的排版是采用從左到右，采用標題在左輸入框在右這種布局是基于以下兩點考慮：

由于對標題進行刪除操作后，標題基本可控制在4個字段內(nèi)，若特殊情況操作4個字段，即可自行拓展成兩行；
從左到右的排版在一定程度縮短了表單的長度，并且減少了用戶向下滑動的操作次數(shù)。

3. 組織“信息”

表單信息平鋪出來沒有進行組織，會讓用戶感覺雜亂無章，沒有一個清晰的認知，為快速幫用戶建立認知體系，需對標題信息進行分塊組織，把合適的東西分到相同的組里去。

4. 隱藏“信息”

提示語的設置是為了讓用戶順暢的填寫表單，但是提示語過長會分散用 戶的注意力，并且不是每一個用戶都需要這一層提示語，所以就要將相 應的提示語進行隱藏，用戶有需要就自己點擊獲取，不需要就可以直接忽略，隱藏的展示形式有兩種：

1.圖標：將相關(guān)的文字釋義內(nèi)容隱藏在圖標，點擊即可彈窗獲取，同 時彈窗的設計采用跟輸入框同寬，緊挨著輸入框，并且箭頭指向圖標，使 得輸入框與提示框建立起聯(lián)系；
2.文字收縮：點擊“詳情”二字即可將全部的示例內(nèi)容展示出來。

5. “同理心”提示語

提示語的設置有兩種作用：

1.快速的幫助用戶建立認知，并且要通俗易懂；
2.降低用戶的防御心里，讓用戶感知到填這張表單是安全的，能夠放心的去填寫。

6. 讓用戶少操作

由于移動端的輸入困難，同時為了讓用戶盡可能地減少操作，通過調(diào)研之后發(fā)現(xiàn)，可將對應的輸入項內(nèi)容轉(zhuǎn)化成選擇項內(nèi)容，這樣的好處不單在于用戶層面，對于客戶層面來說也能使他們更加精準的定位到問題。

而不是放著一個輸入框給用戶自由發(fā)揮去填寫，而 后業(yè)務部門還要對用戶的輸入內(nèi)容進行分析，中間消耗過多的時間精力。

7. 讓用戶有控制感

表單的填寫是由流程的，所以就需要讓用戶做到心中有數(shù)，明白自己從哪里來到哪里去，同時通過進度條能清晰的人認知到需要多少步才能完成表單，用戶都喜歡控制感而不是被控制，進度條可以降低用戶的離開率，在頁面的呈現(xiàn)上也會更加直觀。

總結(jié)

用戶本身就是懶的，何況表單的填寫就很繁瑣，需要用戶多去動手，所以在表單上的設計上應該站在用戶的角度去考慮， 學會換位思考，擁有同理心，將繁瑣的內(nèi)容進行簡化，使得用戶在表單的填寫過程中感覺到愉悅。

本文來源于成都網(wǎng)站建設公司與成都網(wǎng)站設計制作公司-創(chuàng)新互聯(lián)成都公司！

文章名稱：移動端表單設計構(gòu)思
當前URL：http://m.newbst.com/news1/316701.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設計、企業(yè)建站、域名注冊、App開發(fā)、做網(wǎng)站、商城網(wǎng)站

廣告

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