想要最佳化好UI作品,這14個設計細節一定要檢查到位

編輯導語:UI介面設計不能拋開本質而注重形式,如果沒有理解資訊和內容的因果,很難做出合理的設計。本文作者從14個設計細節分享了被廣泛運用的介面設計規則,它們能快速使得你的介面設計更乾淨、高效,一起來看看吧。

想要最佳化好UI作品,這14個設計細節一定要檢查到位

Hi,我是彩雲。介面是使用者在與任何產品、APP或平臺互動時看到的內容,使用者體驗就是建立在堅實的介面設計基礎之上的。所以,如果你想要在UI設計上提升能力,應該多去思考介面設計背後的原因。

想要最佳化好UI作品,這14個設計細節一定要檢查到位

今天會跟大家分享一些被廣泛運用的介面設計規則,它們能快速使得你的介面設計更乾淨、高效。

二、文案要易於理解

用更容易讓使用者理解(說人話)的引導文案,提升使用體驗。

(彩雲注:下面2個案例中,左側的“購物車”和“庫存2”太過於術語化,右側的“僅剩2”和“加入購物車”更加貼近使用者的日常理解。大家平時工作的時候,也一定要注意介面中的文案,尤其是說明文字,控制元件文字等等,這個點經常容易被忽略。)

想要最佳化好UI作品,這14個設計細節一定要檢查到位

二、垂直對齊易於掃視

良好的對齊方式,可以增強內容的可讀性,讓使用者的視線更容易掃描。

(彩雲注:左側的“之”字形視動線比較難閱讀,且不夠專業;右側的垂直對齊增強了可讀性,也讓設計看起來更加統一,能夠快速的提升設計細節。)

想要最佳化好UI作品,這14個設計細節一定要檢查到位

三、給選項加圖示

使用圖示、動畫作為標籤,有助於更輕鬆地理解內容,它使介面看起來更加理性和豐富,能瞬間抓住使用者的眼球。

(彩雲注:左側的導航相較於右邊,很難第一時間準確識別它的意思,增加圖示後不僅更快看清,視覺上也更加美觀。)

想要最佳化好UI作品,這14個設計細節一定要檢查到位

四、大段內容要拆分

大段的長句會讓內容變得難以閱讀。為了獲得好的體驗和UI,應該注意拆分內容,並使用專案符號突出關鍵點,利用拆分好的內容塊讓使用者更快抓住重點。特別是在“功能說明和條款條件”或任何宣告時,提煉要點有助於提升使用者體驗,這樣也不至於讓使用者直接忽略。

(彩雲注:左側的大段文字我想應該沒多少人會去閱讀,右邊的至少還能在短時間內快速看看幾個關鍵詞。)

想要最佳化好UI作品,這14個設計細節一定要檢查到位

五、流程增加進度條

進度條幫助使用者追蹤流程,它也能使檢視上下步驟更加容易。線上購物,表單填寫,申請流程等場景使用這種格式能很好的簡化流程。

(彩雲注:左邊的表單UI不方便跟蹤進度和流程,右邊的表單把進度放在頂部能幫助使用者清楚的知道流程進度。)

想要最佳化好UI作品,這14個設計細節一定要檢查到位

六、錯誤提示要明確

錯誤提示一定要明確,易於理解,方便使用者進行下一步的操作。如果使用者不理解介面上出現的錯誤,使用者就會感到很失望,可能會放棄接下來的流程。在UI設計時,在正確的地方用通俗的語言說明問題,以避免歧義,這一點非常重要。

(彩雲注:我常常遇到各種出錯,但出現的提示太過於術語化,也沒有提示在正確的地方讓我非常苦惱。)

想要最佳化好UI作品,這14個設計細節一定要檢查到位

七、按鈕要正確合理

從菲茨定律(Fitt’s Law)中我們應該知道,目標區域的距離和外觀與所採取的行動成正比。因此,為了將注意力集中在轉化按鈕上,按鈕應該準確放置在合理位置上。此外,按鈕的大小應該易於點選,避免使用者因嘗試點選時不方便而流失。

(彩雲注:左側的按鈕不在正確的決策位置以及按鈕太小,右側的按鈕簡潔明瞭並且符合使用者的心理預期,能夠讓使用者更快決策並點選。)

想要最佳化好UI作品,這14個設計細節一定要檢查到位

八、用好色彩心理學

顏色是UI中不可缺少的部分,它能影響使用者使用應用時的情緒。正確地使用顏色將使UI看起來更加豐富合理。

(彩雲注:左側的藍色按鈕顏色並不符合使用者對於刪除的心理預期,右側的紅色按鈕對使用者的心理預期有危險和警告,用紅色代表刪除能夠讓使用者集中注意力關注這一特殊的操作。)

想要最佳化好UI作品,這14個設計細節一定要檢查到位

九、單列更易保持關注度

用單列展示內容,能更好地幫助使用者掃描。當你的應用和網站上要展示大量資訊時,將所有資訊垂直對齊時,能更好的保持使用者關注度。

想要最佳化好UI作品,這14個設計細節一定要檢查到位

十、優先社交媒體賬號登入

當用戶準備登入或註冊你平臺的時候,把所有可用的社交媒體登入儘量放在首位。這將避免使用者填寫表格時付出額外的認知負擔和時間消耗而流失。首先使用社交媒體賬號,能很好地增加點選率。

想要最佳化好UI作品,這14個設計細節一定要檢查到位

十一、選擇狀態要清晰

在使用者做選擇的時候,需要清晰地告訴使用者選中的到底是哪一個選項。模稜兩可的顏色會增加使用者的認知負擔。更少的顏色和清晰的選中狀態能讓使用者獲得更好的體驗。

(彩雲注:左側的問題在於選中狀態不清晰且選項的顏色過於豐富,右側的選中狀態清晰且選項顏色只有2種,選中和非選中,體驗會更好。)

想要最佳化好UI作品,這14個設計細節一定要檢查到位

十二、用留白分組

如果想給資訊分組,使用留白是最好的方式。加條線作為分組符號會在介面中增加了一個額外元素,空白能讓UI看起來更加乾淨和優雅。用線分組的情況適用於類似Twitter、Medium之類的重內容平臺等場景。

想要最佳化好UI作品,這14個設計細節一定要檢查到位

十三、控制元件樣式保持一致

保持設計的一致性,能夠降低功能複雜度並讓使用者更快決策,一致性設計讓使用者更快熟悉操作而不需要太多思考。(彩雲注:左側的選項圓角不一致,會讓使用者思考為什麼這裡會有不同,而右側的一致性選項設計,能讓使用者忽略內容外的干擾。)

想要最佳化好UI作品,這14個設計細節一定要檢查到位

十四、搜尋中的佔位符要用好

在搜尋輸入欄新增適當的佔位符,提示使用者可以在平臺上搜索和找到的內容,這樣可以提供使用者參考並帶來更好的使用者體驗。

想要最佳化好UI作品,這14個設計細節一定要檢查到位

十五、總結

以上這些就是在設計數字產品體驗時應該遵循的14個基本規則,這些點雖然基礎,但卻經常被人忽略,我在星球中幫大家看作品集時發現上面提到的這些點出現的是最多的,希望大家可以把這些知識運用到自己的設計中,提升UI產品體驗。

#專欄作家#

彩雲sky,騰訊高階視覺設計師;公眾號:彩雲譯設計。

本文原創釋出於人人都是產品經理。未經許可,禁止轉載。

題圖來自Unsplash,基於CC0協議。

頂部