編者按:在進行 UI 設計的時候,很多小技巧能夠恰到好處地提升界面的設計視覺效果、用戶體驗。這篇來自Marc Andrew 的文章梳理了 6 個實用性很強的 UI 效果提升小技巧,是系列文章的十三篇,原文最早發布于 marcandrew.me

在創建實用、可訪問性良好且視覺效果頗為出彩的 UI 界面的時候,我們大多只需要進行有限度的微調,即可達到頗為不錯的效果。在之前,我已經撰寫了很多實用的 UI & UX 優化小貼士(看完文章在文末獲取),這篇文章繼續增加 6 條實用的建議。如果你對于這個系列感興趣,上一期的內容也值得看看:

下面,一起來看看最新的 6 項設計技巧吧!

1、用頁內鏈接讓用戶盡快獲取信息

第十三波!快速提升 UI 設計效果的 6 個小技巧

頁面內鏈接,或者頁內導航,在過去曾經一度被很多設計師所抵制,但是如果在對的地方使用,實際上對于整個頁面的體驗是有明顯加成的。最典型的,就是在較長頁面當中,頁面內跳轉鏈接能夠幫助用戶更好地導航。

當用戶打開一篇較長的文章的時候,文章通常會被劃分為多個不同的部分,不同的章節,這個時候頁內鏈接本質上就是某種意義上的導航,幫助用戶快速定位到他們需要的位置,無需進行無休止的滾動,迅速確定自己的興趣點,點擊,精準降落。

使用得當,頁內鏈接會大大提高頁面內容的可發現性和內容的參與度。

2、讓按鈕文本指向性保持一致清晰

第十三波!快速提升 UI 設計效果的 6 個小技巧

按鈕上的文案內容是非常重要的。用戶打開一個頁面,當他面對一個 CTA 按鈕的時候,他需要知道當他點擊這個按鈕之后,會發生什么,去到什么地方,起碼他應該知道這個按鈕所指向的行為和方向是什么,這也對按鈕的標簽文案提出了要求。

我經常看到網站和 APP 當中的文案使用模糊或者整體的語言風格不夠一致。比如有的地方文案是「Lets do this(就這么干吧)」,有的地方則是「Join Now(現在加入)」,類似功能的標簽,卻使用了截然不同風格的文案,這種情況可能會增加用戶的認知負荷,還會讓用戶對產品產生懷疑。

3、自動填寫重復表單字段幫用戶節省精力

第十三波!快速提升 UI 設計效果的 6 個小技巧

有些表格可能會很長,尤其在是在電商和各種涉及專業服務的網站上,需要非常具體而準確地填寫各種表單。

為用戶簡化冗余的表單項目是非常有必要的。比如需要用戶填寫送貨地址這種字段,可能需要多次填寫,這種字段需要花費較長時間來完成,而且可以確定的是,這幾個地方是完全一樣的。這個時候,系統應當提供自動填寫功能來幫助用戶節省精力。

不過值得一提的是,在注冊表單當中,有時候需要用戶重復填寫密碼,這個環節是出于確認密碼正確性而設置的,不應該在這個地方幫用戶「偷懶」。

4、將字段名稱放在較長表單的輸入框上方

第十三波!快速提升 UI 設計效果的 6 個小技巧

對于較短的表單,我們將每個字段的名稱放在填寫表格的左側倒是影響不大,用戶在填寫的時候視線會使用Z字型來回折返,由于內容量較少,在體驗上不會讓人感到疲憊。但是在較長的表單當中,情況就不一樣了。

由于用戶需要持續地填寫內容,使用Z字型掃讀會非常疲憊,這個時候,需要將字段名稱移到表格的上方,這樣用戶可以使用F式的掃讀方式,視線基本上是從上到下自然移動,在體驗上更加輕松。

5、不要讓不必要的文案內容擾亂操作

第十三波!快速提升 UI 設計效果的 6 個小技巧

即使你所設計的網站和 APP 并不是走極簡的風格,在很多的頁面當中,都是需要做一些必要的精簡,幫助用戶更加快速和順暢地從 A 點出發抵達 B 點。

比如在注冊頁面當中,一個「Register Now(立刻注冊)」就足以告知要做的事情,那么副標題「請填寫下方的注冊表單」其實是沒有存在的必要。

指引用戶方向當然是必要的,但是在本身的文案和功能是不言自明的情況下,再增加額外的說明就屬于畫蛇添足了。

6、不要為了精簡而粗暴精簡UI控件

第十三波!快速提升 UI 設計效果的 6 個小技巧

和上面一條的道理相同,雖然有的 UI 控件在設計上確實存在精簡的空間,但是也不要為了精簡而精簡。最典型的案例,就是加載進度條的設計。從根源上來說,進度條的存在是為了幫助用戶了解某項操作的進度,簡單的加載控件僅僅只能夠給用戶以模糊的感知,只有明確的百分比標識才是用戶真正想要知道的信息。

將百分比的標識去掉,僅保留進度條本體,很難讓用戶對信息把控,這種精簡方式其實是在體驗上開倒車。

下面是更早的內容:











收藏 46
點贊 36

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。