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

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

21個(gè)UI設(shè)計(jì)技巧

1.淡化背景

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

看看下面例子中的窗口和較暗的背景;對(duì)比確實(shí)讓我們意識(shí)到菜單選項(xiàng)的重要性。

2. 使用視覺層次來(lái)吸引焦點(diǎn)

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

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

充分利用色彩!如果有一些對(duì)用戶來(lái)說非常重要的東西，不要害怕使用真正引人注目的顏色。

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

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

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

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

5. 向邊框邊緣添加形狀

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

6. 自定義項(xiàng)目符號(hào)列表

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

7.將類別組織成塊

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

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

8. 使用適合色盲的顏色

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

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

·

9. 分解你的文字

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

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

10.使用塊，而不是邊框

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

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

11. 明智地間隔你的文字

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

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

12. 與圓角保持一致

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

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

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

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

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

嘗試創(chuàng)建兩個(gè)尺寸相同的按鈕，但給更重要的按鈕更多的對(duì)比度。在這種情況下，“創(chuàng)建帳戶”被抑制，因?yàn)榇蠖鄶?shù)用戶將登錄并且只需要?jiǎng)?chuàng)建一個(gè)帳戶一次。

14. 使用粗的單邊線

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

15.讓你的按鈕脫穎而出

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

16. 從游戲中汲取靈感

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

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

17. 給你的按鈕添加圖標(biāo)

雖然一小段文字就足夠了，但在某些情況下，圖標(biāo)可能真的可以將按鈕的功能帶回家!以與使用項(xiàng)目符號(hào)點(diǎn)類似的方式將圖標(biāo)放在文本旁邊。

雖然我不會(huì)對(duì)每個(gè)按鈕都使用它，但它可以幫助用戶快速了解按鈕的作用。有了這樣的想法，可能性真的是無(wú)限的，例如，您可以通過保存按鈕或購(gòu)買按鈕上的購(gòu)物袋來(lái)獲得云圖標(biāo)。這樣做的另一個(gè)好處是它可以幫助您的設(shè)計(jì)打破一些語(yǔ)言障礙。

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

隨著移動(dòng)應(yīng)用程序變得標(biāo)準(zhǔn)化，因此有許多不同的圖標(biāo)。這為我們提供了一個(gè)節(jié)省空間并使我們的設(shè)計(jì)時(shí)尚的絕佳機(jī)會(huì)。

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

沒有足夠的空間放置搜索欄?嘗試使用放大鏡圖標(biāo)，以便在用戶需要時(shí)可以訪問該欄。

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

19. 利用 CSS 漸變

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

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

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

21. 在文本之間使用間距

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

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

使用這些技巧開始學(xué)習(xí) UI 設(shè)計(jì)

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

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

猜你喜歡：

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

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

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

APP界面設(shè)計(jì)：設(shè)計(jì)元素設(shè)計(jì)須知

黑馬程序員UI/UE設(shè)計(jì)培訓(xùn)課程