UI怎么設計？21個UI設計必會的設計技巧

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

21個UI設計技巧

1.淡化背景

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

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

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

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

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

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

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

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

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

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

5. 向邊框邊緣添加形狀

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

6. 自定義項目符號列表

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

7.將類別組織成塊

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

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

8. 使用適合色盲的顏色

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

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

·

9. 分解你的文字

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

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

10.使用塊，而不是邊框

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

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

11. 明智地間隔你的文字

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

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

12. 與圓角保持一致

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

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

13. 按重要性改變按鈕設計

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

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

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

14. 使用粗的單邊線

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

15.讓你的按鈕脫穎而出

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

16. 從游戲中汲取靈感

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

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

17. 給你的按鈕添加圖標

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

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

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

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

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

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

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

19. 利用 CSS 漸變

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

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

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

21. 在文本之間使用間距

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

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

使用這些技巧開始學習 UI 設計

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

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

猜你喜歡：

字體的變形創(chuàng)意設計

UI設計扁平人物設計技巧教程

UI常用導航和優(yōu)缺點分析

電商banner圖設計方法和技巧

傳智教育UI/UE設計培訓課程