用戶界面設計的7個方法

想學習ps基礎的朋友們能夠去學習一下《PS網頁前端設計基礎》這是一套徹底免費的教程~

我可能會假設咱們中的大多數人都是從一開始就對UI設計一無所知，可是，儘管開始的時候咱們遇到了困難，咱們仍是經過大量的設計書籍和文章來理解顏色、排版、佈局等是如何工做的。這是一個背後有一個「爲何」的過程，每當咱們建立一個更大的文本，添加一個陰影，或者改變顏色，都必須有一個緣由來解釋爲何事情必須是這樣的。

所以，在本文中，我將分享我從不一樣的公司、設計師、設計用戶界面時學到的東西以及我在這一過程當中發現的新發現！

免責聲明：如下提供的樣本並不必定意味着它們是錯誤的。這只是咱們如何從一個好的設計方案改進爲更好的方案的基礎。

1、這個文字很重要，讓它更大？

當面對須要字體層次結構的內容時，使文本更大以給予重點和重要性一般不能解決問題，就像下面的問題同樣：

字體層次結構不是小到大的字體大小，它是關於字體正確的大小，粗細和顏色的混合，創造對比，對比度越大越好。

那麼，如何建立更好的對比度呢？

1.不要使用一種不一樣字體大小的權重來建立對比度和層次結構。

2.相反，主要內容使用粗體和深色樣式，次要內容使用較小和較淺樣式。

3.建立三種不一樣顏色的文本（見下面的示例）。

4.不要懼怕在項目上應用大的字體間隙（即24px標題、16px正文文本、10px meta等）。間隙越大=對比度越好。

5.記住，對比度=字體大小+字體粗細+顏色

6.最後，必定要檢查它的對比度。

2、不要使用純黑色

咱們都知道使用黑色文字顏色（＃000）會給讀者帶來眼睛疲勞，所以咱們的解決方案是建立深色變體做爲替代方案。可是，咱們可使用具備不一樣不透明度的黑色做爲解決方案，而不是選擇3個或更多十六進制顏色值：

在上面的示例中，我使用黑色做爲個人主顏色，並根據應用層次（即主內容、輔助內容等）下降其不透明度。

3、用公式學顏色

咱們中的大多數人都不擅長選擇正確的顏色組合，每當咱們看到一個精心編排的調色板設計時，咱們都會問本身「他們是如何作到的？」「（就像下面的那個同樣）：

直到我瞭解到，瞭解色彩並不只僅是爲了那些從一開始就有設計天賦的人，在Hue，飽和度，亮度（HSB）上進行簡單的加法和減法就能發揮做用（咱們將對這個公式使用HSB而不是RGB）。以下所示：

那麼，HSB中的加減法在哪裏出現呢？

實際上，咱們能夠採用兩種方法，正如咱們所見，這兩種方法的基色都相同，但在文件夾和條帶顏色方面有所不一樣。當咱們開始時，老是記住第一個數字對應於色調，而後是飽和度，最後是亮度。

選項A

在選項A中，咱們能夠看到色調值123一直保持在形狀（圓形、文件夾、條帶）以外，而飽和度和亮度是發生變化的地方。

如今，當咱們關注的是24的基底飽和度和96的亮度時，當咱們爲文件夾建立深綠色時，這兩個值都發生了變化。從24的飽和度變成40（增長+16），從96的亮度變成82（減小-14），這代表不管增長仍是減小，飽和度的變化都須要與亮度成反比調整，以產生良好的對比度（反之亦然）。一樣的事情也發生在紙條上，以文件夾的飽和度和亮度爲基值，咱們從40移到44（增長+04），亮度從82減小到75（減小-07），由此得出公式：

較暗值=飽和度增長是亮度的下降

較亮值=飽和度下降是亮度的增長

每當我想知道在個人設計中應該使用什麼顏色時，這個公式就幫助了我。我瞭解到最好的開始點是有一個基色，從那裏開始調整飽和度和亮度，同時保持色調值不變。

選項B

在選項B中，一樣的原理仍然適用（咱們上面的公式），可是色調值會改變。

RGB表明紅色、綠色和藍色，而CMY表明青色、洋紅和黃色。這些術語在我剛開始的時候並無對我有任何重要性，直到我發現使用RGB和CMY進行顏色組合時。

如今在選項B中，若是咱們想要基色的顏色有一個更暗的變化，咱們須要作的就是將顏色選擇器移動到調色板中最近的RGB所在的方向，或者將其移動到CMY的方向以得到更亮的變化。例如：

因爲咱們想要建立一個更暗的基礎顏色b9f4bc（圓形背景），這將應用於咱們的文件夾圖標，咱們須要移動咱們的顏色選擇器到最近的RGB所在的方向（在本例中是藍色）。可是若是咱們想要一個更輕版本的文件夾，咱們將把選擇器移到左邊，靠近CMY（在本例中是黃色）。

*更常見的是，RGB會致使較暗的變化，而CMY會致使較淺的變化。

將顏色選取器移動到所需的變體後，如今咱們將在選項A中應用公式，這將致使咱們具備此顏色組合：

紅色、綠色、藍色（RGB）+選項A公式=較暗的變化

青色、洋紅、黃色（CMY）+選項A公式=較淺的變化

4、使用間距分隔組

除了在兩個組之間添加一條線以顯示分隔以外，在兩組之間使用一個較大的空間是一個更好更容易的解決方案。

彼此接近或接近的物體每每被組合在一塊兒

從上面的例子中，個人目標是經過在標題和它的做者之間使用一個24像素的大空間間隙來建立一個分離。

5、使用顏色分隔行

除了使用線條外，在行中添加顏色背景對用戶閱讀很是有幫助，並且對咱們的設計師來講也會更享受。

6、使用品牌顏色做爲強調

儘可能保持咱們界面的整潔

7、注意對齊

最後，若是您要建立一個像上面這樣的列表設計，請將項目符號、標誌符號或數字放在空白處以突出顯示列表。這將使用戶的可讀性流不間斷，更清晰。

最後歡迎加入咱們的設計羣：801466587，咱們能夠交流學習更多的設計及內容！