21個UI設計必會的設計技巧

　　想要成為一名合格的 UI設計師，必須要有紮實的基礎，和豐富的設計經驗，本期小編為大家介紹的 UI設計培訓教程是21個UI設計必會的設計技巧，可幫助大家提升自己。

　　UI設計培訓 技術分享：一個好的UI設計是由無數個小決定組成的，這些決定為使用者帶來輕鬆愉快的體驗。讓我們透過21個技巧來提高我們的UI設計技能：

　　1.淡化背景

　　當您有一個真正想要引起使用者注意的模態視窗時，請淡出背景。這將真正使您的視窗在使用者中脫穎而出，促使他們專注於操作。

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

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

　　3.使用顏色來發揮你的優勢

　　充分利用色彩!如果有一些對使用者來說非常重要的東西，不要害怕使用真正引人注目的顏色。嘗試使用在設計的其餘部分中不常用的顏色，並嘗試使色調飽和。您可能也會對視覺吸引力感到驚訝!

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

　　社交媒體按鈕對於許多設計專案來說都是必不可少的。雖然一開始這似乎是一項簡單的任務，但決定它們去哪裡以及如何顯示它們可能會很棘手。經常發生的事情之一是它們會破壞您的UI設計的統一性。它們都有不同的顏色，這最終會讓人感覺它們在相互競爭，並與您的UI競爭視覺空間。值得花一些額外的時間來自定義您自己的社交按鈕以匹配您的UI設計。這將為您的專案提供所需的大量視覺統一!

　　5.向邊框邊緣新增形狀

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

　　6.自定義專案符號列表

　　專案符號列表是幫助劃分內容並使使用者更容易閱讀關鍵點的有用工具。一個巧妙的技巧是您可以自定義專案符號列表，以使用自定義影像。這是一種很好的方式來推動您的品牌，甚至透過影像提供一些資訊。嘗試使用獨特的顏色或圖示，將內容的資訊帶回家!

　　7.將類別組織成塊

　　在很多情況下，專案符號列表中包含大量資訊，或者您可能擔心列表的順序在應該將它們視為平等時強調了最佳選擇。在這些情況下，嘗試將此內容劃分為彼此並排的塊。

　　對於塊，所有內容都顯示為具有相同的價值。這樣做的另一個好處是您可以自定義框的設計並顯示比簡單列表更多的視覺資訊。

　　8.使用適合色盲的顏色

　　許多患有色盲或其他型別視覺障礙的使用者可能難以區分不同的顏色。檢查以確保您的高對比度顏色，對每個人也有明顯不同，會是一個好主意。Photoshop提示：實際上有一個很酷的技巧可以用於Photoshop來檢查這個!檢視>校樣設定，然後您可以選擇不同的色盲過濾器來檢查對比色。

　　9.分解你的文字

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

　　確保標題是獨特的，使用專案符號來驅動主頁關鍵資訊。使用顏色和粗體文字來強調重要的部分。最重要的是，確保您的書面內容引人入勝且有趣。

　　10.使用塊，而不是邊框

　　用邊框和線條分解內容是區分不同部分的好方法。然而，它們也會給您的設計增添混亂，雖然單獨可能會對您的設計產生整體負面影響。為了解決這個問題，您可以透過用不同的背景顏色分割區域來建立邊框。這自然會在不同的內容區域之間建立一條線，使您的設計不那麼混亂和幽閉恐懼症。越少雜亂，您的內容就越能脫穎而出!

　　11.明智地間隔你的文字

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

　　在單獨的內容之間建立大空間並使正文更接近其對應標題。透過這種方式，您可以以最少的設計風格很好地堅持網格。

　　12.與圓角保持一致

　　使UI元素的角變圓以使它們具有更柔和的外觀是一種常用技術。這樣做的好處是不會破壞網格。儘量確保無論您使用哪種尺寸，您都可以在所有設計元素上始終如一地使用它。您甚至可以更進一步，將其他內容四捨五入到相同的尺寸，例如照片或圖示。這種統一真的可以將設計結合在一起!

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

　　有時按鈕有不同的用途，具體取決於您的專案和使用者目標。在這些情況下，您可以透過大膽使用顏色來強調更重要的選擇，而在重要性較低的按鈕上使用較少的顏色。例如，登入螢幕需要同時容納新使用者和現有使用者，但您可能希望根據您的目標強調這些選項之一。

　　嘗試建立兩個尺寸相同的按鈕，但給更重要的按鈕更多的對比度。在這種情況下，“建立帳戶”被抑制，因為大多數使用者將登入並且只需要建立一個帳戶一次。

　　14.使用粗的單邊線

　　雖然在文字超連結上看到懸停效果使用下劃線是很常見的，但您也可以在塊上使用它。嘗試在滾動時，在整個塊上新增粗下劃線，以真正讓按鈕可點選。您還可以新增這樣的線條來為內容框新增一些視覺風格。

　　15.讓你的按鈕脫穎而出

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

　　16.從遊戲中汲取靈感

　　在遊戲開發領域，有一個術語叫做juice，意思是讓你的遊戲設計變得有趣。這通常包括從按下按鈕開始的有彈性的動畫。嘗試為您的按鈕或載入螢幕圖示新增一些新的CSS動畫，或者為某些功能建立獨特的視覺UI。當然，Web和應用程式開發不是遊戲，您不想浪費使用者的時間，但是透過點選增加的流行或天賦確實可以為您的專案增添一些樂趣。

　　17.給你的按鈕新增圖示

　　雖然一小段文字就足夠了，但在某些情況下，圖示可能真的可以將按鈕的功能帶回家!以與使用專案符號點類似的方式將圖示放在文字旁邊。雖然我不會對每個按鈕都使用它，但它可以幫助使用者快速瞭解按鈕的作用。有了這樣的想法，可能性真的是無限的，例如，您可以透過儲存按鈕或購買按鈕上的購物袋來獲得雲圖示。這樣做的另一個好處是它可以幫助您的設計打破一些語言障礙。

　　18.使用圖示節省寶貴的空間

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

　　有設定頁面嗎?與其將其作為主要導航項，不如建立一個易於訪問的齒輪圖示。

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

　　雖然這不能替換導航中的每個連結，但您可以區分您的內容和用於導航該內容的工具。

　　19.利用CSS漸變

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

　　20.在邊緣重疊內容

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

　　21.在文字之間使用間距

　　有時，文字單獨存在時會感到有些孤獨。您可以做的事情是調整字母的間距以使其脫穎而出!嘗試在標題上使用所有大寫字母來執行此操作，以使您的標題具有複雜的外觀。它還可以對單獨出現的文字產生奇蹟，而周圍沒有太多其他內容。這是在不增大字型大小的情況下提供一些重點的好方法。

　　另外，請記住，這些提示不是絕對的規則。您從事的每個專案都有自己的需求和目標。有些想法會適用於您的設計，有些則不會。在建立UI設計時，請始終牢記使用者的核心目標!