lin 劃分 -- 文章 adding 在一起 學習 內容 範圍

大多數情況，開發人員都比較煩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：能讓用戶選擇的就不要讓用戶輸入 用戶並沒有我們想象的那麽勤奮，默認給用戶做好選擇。 -------------------------------------------------邪惡的分割線----------------------------------------- 下圖為我們幾年前最早版本微信公眾號的訪客預約表單設計，感興趣的夥伴可以針對上面所學的設計原則練練手，看看如何改進才使得這個界面讓你想用或是用的爽！也請期待我的下一篇文章對這個案例的說明和改進！

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