談談用戶體驗中的表單設計-理論篇

大多數狀況，開發人員都比較煩UI和交互，若是公司有專門配備UI和交互工程師，那麼開發人員就能夠省事不少，專一於業務代碼的實現，但據我瞭解不少小公司則沒這麼幸運了，因此，我認爲開發人員多瞭解設計方面的知識對本身也是一種能力的提高，不用總被產品經理手撕了。

 

下圖爲PC端觸摸屏產品的2個登陸表單，僅從用戶交互層面考慮，哪一個表單登陸效率高？

     

                                   圖1                                                                                  圖2

 

       你們暫且將PC端觸摸屏產品理解爲像是高鐵站自助取票的設備吧。在這種相似的PC端觸摸屏產品中，人機交互應該作到儘可能流程簡化，提高效率，才能給用戶帶來好的用戶體驗，同時也提高了業務應用場景的效率。

       圖1的用戶角色採用的是下拉框隱藏控件，圖2的用戶角色是直截了當的呈現。當用戶須要切換用戶角色登陸系統時，那麼圖1須要點擊2次才能選中其它用戶角色進行登陸；圖2則只須要點擊1次就能選中其它用戶角色進行登陸。

      因此，單從用戶交互層面來說，圖2切換用戶角色登陸系統的效率高。可能有人會說了，至於嗎？纔多這麼一步操做無傷大雅！嗯！舉這個例子我只是想說明一點： 作產品必定要遵循用戶體驗至上原則，千萬不要小看細節，好的用戶體驗都是在每個微乎其微的細節中進行打磨提高的。

 

經過學習前輩總結的關於表單設計中的如何提高用戶體驗，結合自身工做，下面總結了我認爲很重要的10點設計原則，僅供參考：

 

 

設計原則1：儘可能單列、縱向佈局

多列布局會擾亂用戶垂直方向的視線移動，縱向排列能加快瀏覽速度。 由於人的眼球移動從上向下更加集中，從左到右瀏覽，視野範圍廣，瀏覽效率沒有縱向排列高。

 

 

設計原則2：標籤應頂部對齊

數據項少：頂部標籤能讓用戶更快完成瀏覽，也易於移植到移動端。

數據項多：左側標籤可以減小高度，由於它們在一塊兒更易於瀏覽。

 

 

設計原則3：選項少於6個，所有展現出來

把選項放入下拉選單須要用戶進行兩次點擊，還會把選項隱藏起來。超過5項才使用下拉選框。若是超過25個選項，就要在下拉菜單中加入搜索。

 

 

設計原則4：內容驗證對錯應合理和及時

告訴用戶是哪裏出錯了，並說明出錯的具體緣由。

 

別在用戶打字的時候進行逐行驗證，除非這對他們有幫助——例如建立密碼、用戶名之類，或者字符數提示信息。

 

 

設計原則5：區分主次操做項

主要操做應重點突出，如Sign Up按鈕是咱們但願用戶去點擊的，那麼就經過深色背景突出，吸引和引導用戶去點擊。你們有卸載過某殺毒軟件吧？它們就是噁心的把取消卸載按鈕作成深色，一不留心就點中了，還覺得是卸載了呢！我我的以爲這點小聰明仍是別去幹了！

 

 

設計原則6：拋棄星號*，標出選填項

必填項比選填項要多的時候，標出選填項，避免*號過多打擾用戶瀏覽界面的簡潔性。

 

 

設計原則7：把相關信息分類編組

 

用戶會分塊思考，太長的表單會讓人眼花繚亂。建立符合邏輯的分組，用戶會更容易理解表單。

 

 

設計原則8：對特定數字序列按規則劃分

 

 

人的短時間記憶是有限的，按特定規則劃分，有利於用戶閱讀、編輯、校對。

 

 

設計原則9：增長一鍵清空Icon，方便從新輸入

 

一個是隻須要點一次就能清空，一個須要長按一段時間或者連續按屢次才能清空，孰優孰劣可想而知。

 

 

設計原則10：能讓用戶選擇的就不要讓用戶輸入

用戶並無咱們想象的那麼勤奮，默認給用戶作好選擇。

 

-------------------------------------------------邪惡的分割線-----------------------------------------

下圖爲 咱們幾年前最先版本微信公衆號的訪客預定表單設計，感興趣的夥伴能夠針對上面所學的設計原則練練手，看看如何改進才使得這個界面讓你想用或是用的爽！也請期待個人下一篇文章對這個案例的說明和改進！