大多數情況,開發人員都比較煩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:能讓用戶選擇的就不要讓用戶輸入

用戶並沒有我們想象的那么勤奮,默認給用戶做好選擇。
-------------------------------------------------邪惡的分割線-----------------------------------------
下圖為
我們幾年前最早版本微信公眾號的訪客預約表單設計,感興趣的伙伴可以針對上面所學的設計原則練練手,看看如何改進才使得這個界面讓你想用或是用的爽!也請期待我的下一篇文章對這個案例的說明和改進!

