天天看點

簡潔明了的優秀UI設計原則(4)

#31 視覺必須展現層次

沒有樣式的内容,使用者無法區分層次,也無法決定閱讀順序。右圖那樣一路看下來已經算好的了——多數使用者碰到這種排版可是會直接走人的!

簡潔明了的優秀UI設計原則(4)

#32 分組相似的内容

常識。

簡潔明了的優秀UI設計原則(4)

△ 【左】菜單:打開 儲存 建立副本 删除。工作區控制:放大 縮小。

【右】菜單:儲存 縮小。工作區控制:放大 建立副本。 散在外邊:打開 删除…… (這個有點搞笑了)

#33 表單内直接驗證,替代傳統的送出後傳回錯誤

AJAX時代的新常識。不要忘記就可以。

當然也需要注意:傳統的驗證方法仍然要作為保底方案設計出來。絕對禁止因為前台有了AJAX背景就不驗證。

簡潔明了的優秀UI設計原則(4)

△ 【左】好的表單 - 直接顯示“這個選項是必填的”

【右】不那麼完美的表單 - 送出後才顯示缺少部分項

#34 寬容各種格式的使用者輸入!

在不引起二義性的前提下,程式員有責任盡可能多的接受各種格式的使用者輸入。例如信用卡号碼、電話号碼等資料,就應當自動接受并過濾括号、空格、減号、句點、逗号這些合理的分隔符。

寬進嚴出是程式設計的一個重要原則。對使用者的輸入要盡可能的寬容,但對資料的顯示和輸出(包括對使用者輸入資料的回顯)必須格式嚴格。這個原則也同樣适用于Web程式設計。

簡潔明了的優秀UI設計原則(4)

△ 幾個電話号碼中包含了空格、括号、減号、加号

【左】完美的表單 - 統統接受

【右】差強人意的表單 - 隻接受帶空格的

(不錯了……國内多少表單連空格都不讓加……程式員的懶惰、無知和自大氣死人!)

#35 強調緊迫性

明日複明日,明日何其多。我生待明日,萬事成蹉跎。不給使用者設定時間期限,使用者就永遠沒有行動的動力。該催促就催促。

使用者都害怕失去機會,這是個應當合理利用的心理。隻是不要欺騙使用者——使用者發現得了。

簡潔明了的優秀UI設計原則(4)

△ 【左】還有2天結束 —— 立刻行動

【右】總之行動吧,時間不要緊,今天、明天,反正拖到最後就不做了

#36 強調稀缺性

使用者往往認為稀缺的東西更有價值,在面對稀缺資源時也更害怕錯過。

使用者都害怕失去機會,這是個應當合理利用的心理。隻是必須再次強調:不要欺騙使用者——使用者發現得了。

簡潔明了的優秀UI設計原則(4)

△ 【左】最好的網絡課程 - 僅餘 2 席。 【右】最好的網絡課程。

#37 給使用者提示,不要讓使用者憑空回憶

做過調查問卷的都知道,右圖那樣一個

<textarea>

要求使用者回報的問題,如果是可選問題那麼幾乎沒人寫,如果是必填問題那麼所有人都對付。

給使用者一些提示去選擇,明顯比讓使用者自己從0開始回憶更友善。

簡潔明了的優秀UI設計原則(4)

△ 【左】請告訴我們您最喜歡的電影 - 這裡是最近您看過的一些影片,供您選擇。

【右】請告訴我們您最喜歡的電影 - 努力回憶一下吧!你能想起來的!加油!

#38 可點選元素做大點兒

小不點的按鈕和導覽列文字,那已經是上世紀90年代的網頁樣式了。

尤其是現在的移動時代,小按鈕在手機上幾乎沒法點。請千萬做大一點。

簡潔明了的優秀UI設計原則(4)

#39 頁面加載做快點兒

幾秒鐘加載不出來,使用者就流失百分之多少,這都是老生常談的調查結論了。

請合理選擇機房,并正确使用CDN、緩存等手段。生産環境的網站很大程度上都忌諱所有内容往主伺服器上一堆完事。

簡潔明了的優秀UI設計原則(4)

#40 提供必要的快捷鍵

例如GMail使用j和k切換上一封/下一封郵件。對開發者群體會尤其受歡迎。

簡潔明了的優秀UI設計原則(4)

繼續閱讀