首頁技術(shù)文章正文

21個UI設(shè)計技巧【UI設(shè)計干貨】

更新時間:2021-07-28 來源:黑馬程序員 瀏覽量:

UI設(shè)計技巧01

在設(shè)計界面和UI組件時,很容易被所有要做出的設(shè)計選擇所淹沒。有時,UI 設(shè)計在您一遍又一遍地調(diào)整它直到感覺恰到好處之前并不完全有效。 就像一幅畫是由成千上萬個簡單的筆觸組成的一樣,一個好的 UI 設(shè)計是由無數(shù)個小決定組成的,這些決定為用戶帶來輕松愉快的體驗。讓我們通過21個技巧來提高我們的 UI 設(shè)計技能!

21個UI設(shè)計技巧

1.淡化背景

當您有一個真正想要引起用戶注意的模態(tài)窗口時,請淡出背景。這將真正使您的窗口在用戶中脫穎而出,促使他們專注于操作。

看看下面例子中的窗口和較暗的背景;對比確實讓我們意識到菜單選項的重要性。

UI設(shè)計技巧02
來自移動模態(tài)聚焦站點模板的示例

2. 使用視覺層次來吸引焦點

大小、對比度和位置是建立視覺層次結(jié)構(gòu)所需的全部。下面顯示的電子郵件內(nèi)容最重要的方面是免費資源按鈕;它的主導地位意味著你的眼睛在文本內(nèi)容或“閱讀更多”按鈕之前被它吸引。

UI設(shè)計技巧03
Titan - 響應(yīng)式電子郵件 + Themebuilder Access

3. 使用顏色來發(fā)揮你的優(yōu)勢

充分利用色彩!如果有一些對用戶來說非常重要的東西,不要害怕使用真正引人注目的顏色。

嘗試使用在設(shè)計的其余部分中不常用的顏色,并嘗試使色調(diào)飽和。您可能也會對視覺吸引力感到驚訝!

UI設(shè)計技巧04
Titan - 響應(yīng)式電子郵件 + Themebuilder Access

4. 自定義那些社交按鈕!

社交媒體按鈕對于許多設(shè)計項目來說都是必不可少的。雖然一開始這似乎是一項簡單的任務(wù),但決定它們?nèi)ツ睦镆约叭绾物@示它們可能會很棘手。經(jīng)常發(fā)生的事情之一是它們會破壞您的 UI 設(shè)計的統(tǒng)一性。它們都有不同的顏色,這最終會讓人感覺它們在相互競爭,并與您的 UI 競爭視覺空間。

值得花一些額外的時間來自定義您自己的社交按鈕以匹配您的 UI 設(shè)計。這將為您的項目提供所需的大量視覺統(tǒng)一!

UI設(shè)計技巧05
手繪社交媒體圖標

5. 向邊框邊緣添加形狀

在背景邊框的邊緣之間添加一些視覺風格以幫助打破網(wǎng)格。堅持網(wǎng)格很好,但有時你想擺脫那種塊狀外觀。添加與下一部分相關(guān)聯(lián)的圖像確實有助于使您的頁面看起來更有活力。您甚至可以使用箭頭形狀將用戶的注意力向上或向下引導。試著發(fā)揮創(chuàng)意,用這個概念提出你自己的想法!

UI設(shè)計技巧06

6. 自定義項目符號列表

項目符號列表是幫助劃分內(nèi)容并使用戶更容易閱讀關(guān)鍵點的有用工具。一個巧妙的技巧是您可以自定義項目符號列表,以使用自定義圖像。這是一種很好的方式來推動您的品牌,甚至通過圖像提供一些信息。嘗試使用獨特的顏色或圖標,將內(nèi)容的信息帶回家!

UI設(shè)計技巧07
介紹 UI 套件

7.將類別組織成塊

在很多情況下,項目符號列表中包含大量信息,或者您可能擔心列表的順序在應(yīng)該將它們視為平等時強調(diào)了最佳選擇。在這些情況下,嘗試將此內(nèi)容劃分為彼此并排的塊。

對于塊,所有內(nèi)容都顯示為具有相同的價值。這樣做的另一個好處是您可以自定義框的設(shè)計并顯示比簡單列表更多的視覺信息。

UI設(shè)計技巧08
介紹 UI 套件

8. 使用適合色盲的顏色

許多患有色盲或其他類型視覺障礙的用戶可能難以區(qū)分不同的顏色。檢查以確保您的高對比度顏色,對每個人也有明顯不同,會是一個好主意。

Photoshop 提示:實際上有一個很酷的技巧可以用于 Photoshop 來檢查這個!查看>校樣設(shè)置, 然后您可以選擇不同的色盲過濾器來檢查對比色。

UI設(shè)計技巧09

·

UI設(shè)計技巧10
無障礙

9. 分解你的文字

很容易陷入使用大塊文本的陷阱。有時這可能是作為設(shè)計師向您提供信息的方式。然而,除非這是一篇您希望用戶坐下來喝杯咖啡閱讀的文章,否則開始分解您的信息通常是個好主意。用戶正在尋找特定的東西,所以讓他們盡可能容易。

確保標題是獨特的,使用項目符號來驅(qū)動主頁關(guān)鍵信息。使用顏色和粗體文字來強調(diào)重要的部分。最重要的是,確保您的書面內(nèi)容引人入勝且有趣。

UI設(shè)計技巧11
Sakola - 高中網(wǎng)站設(shè)計用戶界面

10.使用塊,而不是邊框

用邊框和線條分解內(nèi)容是區(qū)分不同部分的好方法。然而,它們也會給您的設(shè)計增添混亂,雖然單獨可能會對您的設(shè)計產(chǎn)生整體負面影響。

為了解決這個問題,您可以通過用不同的背景顏色分割區(qū)域來創(chuàng)建邊框。這自然會在不同的內(nèi)容區(qū)域之間創(chuàng)建一條線,使您的設(shè)計不那么混亂和幽閉恐懼癥。越少雜亂,您的內(nèi)容就越能脫穎而出!

UI設(shè)計技巧12
Sakola - 高中網(wǎng)站設(shè)計用戶界面

11. 明智地間隔你的文字

正如使用塊可以幫助創(chuàng)建沒有邊界的網(wǎng)格一樣,經(jīng)過深思熟慮的間距也可以產(chǎn)生相同的效果。當您將文本段落之間的間隔恰到好處時,您通常甚至不需要單獨的背景顏色。

在單獨的內(nèi)容之間創(chuàng)建大空間并使正文更接近其對應(yīng)標題。通過這種方式,您可以以最少的設(shè)計風格很好地堅持網(wǎng)格。

UI設(shè)計技巧13
Sakola - 高中網(wǎng)站設(shè)計用戶界面

12. 與圓角保持一致

使 UI 元素的角變圓以使它們具有更柔和的外觀是一種常用技術(shù)。這樣做的好處是不會破壞網(wǎng)格。盡量確保無論您使用哪種尺寸,您都可以在所有設(shè)計元素上始終如一地使用它。

您甚至可以更進一步,將其他內(nèi)容四舍五入到相同的尺寸,例如照片或圖標。這種統(tǒng)一真的可以將設(shè)計結(jié)合在一起!

UI設(shè)計技巧14
銀行金融 UI 套件

13. 按重要性改變按鈕設(shè)計

有時按鈕有不同的用途,具體取決于您的項目和用戶目標。在這些情況下,您可以通過大膽使用顏色來強調(diào)更重要的選擇,而在重要性較低的按鈕上使用較少的顏色。

例如,登錄屏幕需要同時容納新用戶和現(xiàn)有用戶,但您可能希望根據(jù)您的目標強調(diào)這些選項之一。

嘗試創(chuàng)建兩個尺寸相同的按鈕,但給更重要的按鈕更多的對比度。在這種情況下,“創(chuàng)建帳戶”被抑制,因為大多數(shù)用戶將登錄并且只需要創(chuàng)建一個帳戶一次。

UI設(shè)計技巧15

14. 使用粗的單邊線

雖然在文本超鏈接上看到懸停效果使用下劃線是很常見的,但您也可以在塊上使用它。嘗試在滾動時,在整個塊上添加粗下劃線,以真正讓按鈕可點擊。您還可以添加這樣的線條來為內(nèi)容框添加一些視覺風格。

UI設(shè)計技巧16

15.讓你的按鈕脫穎而出

具有大量負空間的平面設(shè)計正變得非常流行。雖然保持簡單是很好的,但用戶可能無法理解導航按鈕與常規(guī)文本不同。利用間距和獨特的設(shè)計元素讓您的按鈕從正文中脫穎而出。

UI設(shè)計技巧17
菜單導航 UI 套件網(wǎng)站 Adobe XD 模板

16. 從游戲中汲取靈感

在游戲開發(fā)領(lǐng)域,有一個術(shù)語叫做juice,意思是讓你的游戲設(shè)計變得有趣。這通常包括從按下按鈕開始的有彈性的動畫。

嘗試為您的按鈕或加載屏幕圖標添加一些新的 CSS 動畫,或者為某些功能創(chuàng)建獨特的視覺 UI。當然,Web 和應(yīng)用程序開發(fā)不是游戲,您不想浪費用戶的時間,但是通過點擊增加的流行或天賦確實可以為您的項目增添一些樂趣。

UI設(shè)計技巧18

17. 給你的按鈕添加圖標

雖然一小段文字就足夠了,但在某些情況下,圖標可能真的可以將按鈕的功能帶回家!以與使用項目符號點類似的方式將圖標放在文本旁邊。

雖然我不會對每個按鈕都使用它,但它可以幫助用戶快速了解按鈕的作用。有了這樣的想法,可能性真的是無限的,例如,您可以通過保存按鈕或購買按鈕上的購物袋來獲得云圖標。這樣做的另一個好處是它可以幫助您的設(shè)計打破一些語言障礙。

UI設(shè)計技巧19

18. 使用圖標節(jié)省寶貴的空間

隨著移動應(yīng)用程序變得標準化,因此有許多不同的圖標。這為我們提供了一個節(jié)省空間并使我們的設(shè)計時尚的絕佳機會。

有設(shè)置頁面嗎?與其將其作為主要導航項,不如創(chuàng)建一個易于訪問的齒輪圖標。

沒有足夠的空間放置搜索欄?嘗試使用放大鏡圖標,以便在用戶需要時可以訪問該欄。

雖然這不能替換導航中的每個鏈接,但您可以區(qū)分您的內(nèi)容和用于導航該內(nèi)容的工具。

UI設(shè)計技巧20

19. 利用 CSS 漸變

當您真的絕對需要引起按鈕的注意時,請嘗試放置環(huán)境漸變。雖然我建議不要在導航中過度使用漸變,但這種額外的視覺天賦確實可以為視覺組件帶來優(yōu)勢。

UI設(shè)計技巧21
比特錢包

20. 在邊緣重疊內(nèi)容

處理內(nèi)容區(qū)域邊緣時的另一個好主意是重疊內(nèi)容。這確實強調(diào)了內(nèi)容本身,并增加了一些有趣的深度,這在平面顏色上很難實現(xiàn)。它也可以很好地彌合一個部分與下一個部分之間的差距!

UI設(shè)計技巧22
比特錢包

21. 在文本之間使用間距

有時,文本單獨存在時會感到有些孤獨。您可以做的事情是調(diào)整字母的間距以使其脫穎而出!嘗試在標題上使用所有大寫字母來執(zhí)行此操作,以使您的標題具有復(fù)雜的外觀。

它還可以對單獨出現(xiàn)的文本產(chǎn)生奇跡,而周圍沒有太多其他內(nèi)容。這是在不增大字體大小的情況下提供一些重點的好方法。

UI設(shè)計技巧23
比特錢包

使用這些技巧開始學習 UI 設(shè)計

你有它!21個技巧來幫助你學習 UI 設(shè)計。在您的下一個 UI 設(shè)計項目中嘗試這里列出的一些技巧(并記住在使用任何形式的 UI 設(shè)計時注意細節(jié))。尋找對你有用的想法并做筆記。

另外,請記住,這些提示不是絕對的規(guī)則。您從事的每個項目都有自己的需求和目標。有些想法會適用于您的設(shè)計,有些則不會。在創(chuàng)建 UI 設(shè)計時,請始終牢記用戶的核心目標!



猜你喜歡:

UI設(shè)計師如何分析數(shù)據(jù)優(yōu)化設(shè)計?

用戶界面設(shè)計的10大原則

社交APP通話界面設(shè)計

APP界面設(shè)計:設(shè)計元素設(shè)計須知

黑馬程序員UI/UE設(shè)計培訓課程

分享到:
在線咨詢 我要報名
和我們在線交談!