在進行 UI 設計的時候,很多小技巧能夠恰到好處地提升界麵的設計視覺效果、用戶體驗。這篇來自Marc Andrew 的文章梳理了6個實用性很強的 UI 效果提升小技巧,是係列文章的十一篇,原文最早發布於 marcandrew.me 。
在創建實用、可訪問性良好且視覺效果頗為出彩的 UI 界麵的時候,我們大多隻需要進行有限度的微調,即可達到頗為不錯的效果。在之前,我已經撰寫了很多實用的 UI & UX 優化小貼士(看完文章在文末獲取),這篇文章繼續增加 6 條實用的建議,一起來看看吧!
1. 少用點色彩一樣可以讓視覺充滿凝聚力
在上方的兩個設計範例當中,左邊使用的配色明顯不搭,右邊則基於基礎色微調明度和飽和度來進行配色,更加協調。
如果你的設計項目可以讓你在顏色選擇方麵有更多的自由,不要總是傾向於用花哨的彩虹色來包裝它。
如果你沿著彩虹係的配色走下去,你可能會很快發現你所選取的色彩總會在視覺上顯得不那麼協調。
實際上,你隻需要基礎的色彩,然後基於這個顏色,借助微調明度和飽和度來拓展配色方案,就能夠得到更加均勻、更加具有凝聚力和專業感的外觀了,不需要閃亮的彩虹色和複雜的配色技巧,同樣能夠拿出好設計。
當然,基於基礎的顏色快速搭建出配色。
2.抓住用戶的注意力的技巧
在上麵的兩個設計範例當中, 一個菜單選項使用了簡單的方形選框,另一個使用了彩色的背景。
UI 可以是幹淨簡約又直觀的,但可用性和易用性更重要,不能以犧牲用戶體驗為代價。對於關鍵信息,UI元素需要有足夠的對比度,以抓住用戶的注意力。
對於像選項菜單這樣簡單的東西,請確保用戶在快速瀏覽的時候,能立刻注意到所選的項目。
相比於小巧的選框,使用彩色的背景來進行區分,會更加直覺,也更容易被用戶所識別出來。
3. 使用細文本的時候加深顏色
在上方的兩個設計範例中,一個文本使用淺灰色,另一個則使用了更深的黑色。
當涉及到長篇文本內容的時候,如果字體是普通粗細,使用可讀性有所保障的某種灰色是目前多數設計師的選擇,它相比於黑色更加優雅,不會顯得對比過於強烈導致視覺感知上的突兀。但是當字體文本非常細的時候,灰色的可讀性可能就存在問題了。
這個時候,可以通過使文本變暗,讓盡可能多的用戶在閱讀的時候不會出現可用性的問題。
4. 讓界麵上最重要的元素更加突出
在上麵的兩個設計範例當中,左邊的一個視覺層次較差,右邊的視覺層次則改善了很多。
在做 UI 設計的時候,你總會希望用戶的眼睛每次都能快速、高效地被關鍵的元素所吸引,並且隻需付出最少的認知努力,不會覺得費勁。
通過控製 字體大小、字重、顏色和布局等視覺層次,您可以輕鬆突出最重要的元素:重要的元素字體更大、字重更粗、顏色有差異、在排版的時候更加突出。
5. 打消用戶的顧慮,讓用戶放心點擊下一步
在上麵的兩個設計案例中, 一個僅僅隻使用了CTA按鈕,另一個則在此基礎上,提供了額外的說明,打消了用戶的顧慮。
當用戶在 UI 中需要進行重要操作的時候,尤其是麵對某些帶有號召性用語的按鈕,請確保用戶對於當前的局麵有充分的了解,不會對接下來可能發生的事情一無所知。對於一些常見的、可能普遍存在於用戶內心的顧慮,一定要提前考慮到,並提供說明。
改善用戶體驗的每一步,都不要讓用戶在交互的曆程中的任何環節產生質疑。
6. 請對 CTA 元素的設計「更自私」一點
在上方的兩個設計範例當中,一個 CTA 按鈕和其他元素使用了相同的顏色,另一個則做出了差異化,讓CTA 按鈕更突出。
引導用戶行為的 CTA 按鈕必須是屏幕上最關鍵的元素之一,它理應得到最高的視覺優先級,換句話說,就是應該盡可能「自私」一點,將最吸引人注意力的顏色分配給它,讓用戶不會將它和其他的 UI 控件在優先級上出現混淆。
當然,你也可以在尺寸、形狀等方麵更進一步設計,但 CTA 按鈕應該保持一種突出的顏色,僅此一項,就可以規避掉絕大部分的問題。
來源:優設網
熱門課程
專業講師指導 快速擺脫技能困惑相關文章
多種教程 總有一個適合自己專業問題谘詢
你擔心的問題,火星幫你解答這篇文章將詳細探索學習網頁設計需要多長時間以及在火星時代教育可以如何學習和領悟這項技能。
深入探討美工專業的學習周期以及有效的學習路徑,專業的指導來自火星時代教育,幫助你理解化學習美工所需的時間
本文從UI設計所需技能,學習方法,以及學習周期三個角度為大家解析學習UI設計需要多長時間。
尋找學習遊戲建模的理想學校,為自己的職業生涯做準備。火星時代教育,全方位的遊戲建模課程,專業的講師指導,提供你需要的技能和知識。
探索學習插畫的核心要求和技巧,以及火星時代教育如何幫助你達成藝術夢想
本文主要介紹如何通過選擇專業的影視動畫場景培訓機構,挖掘你的創新潛能,為未來職業做好準備。同時,我們也將介紹火星時代教育的專業......
1. 打開微信掃一掃,掃描左側二維碼
2. 添加老師微信,馬上領取免費課程資源
同學您好!