使用者介面設計的7個方法

pilishen發表於2019-03-01

想學習ps基礎的朋友們可以去學習一下《PS網頁前端設計基礎》這是一套完全免費的教程~

我可能會假設我們中的大多數人都是從一開始就對UI設計一無所知，但是，儘管開始的時候我們遇到了困難，我們還是通過大量的設計書籍和文章來理解顏色、排版、佈局等是如何工作的。這是一個背後有一個“為什麼”的過程，每當我們建立一個更大的文字，新增一個陰影，或者改變顏色，都必須有一個原因來解釋為什麼事情必須是這樣的。

因此，在本文中，我將分享我從不同的公司、設計師、設計使用者介面時學到的東西以及我在這一過程中發現的新發現！

免責宣告：以下提供的樣本並不一定意味著它們是錯誤的。這只是我們如何從一個好的設計方案改進為更好的方案的基礎。

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

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

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

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

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

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

3.建立三種不同顏色的文字（見下面的示例）。

4.不要害怕在專案上應用大的字型間隙（即24px標題、16px正文文字、10px meta等）。間隙越大=對比度越好。

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

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

二、不要使用純黑色

我們都知道使用黑色文字顏色（＃000）會給讀者帶來眼睛疲勞，因此我們的解決方案是建立深色變體作為替代方案。但是，我們可以使用具有不同不透明度的黑色作為解決方案，而不是選擇3個或更多十六進位制顏色值：

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

三、用公式學顏色

我們中的大多數人都不擅長選擇正確的顏色組合，每當我們看到一個精心編排的調色盤設計時，我們都會問自己“他們是如何做到的？”“（就像下面的那個一樣）：

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

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

實際上，我們可以採用兩種方法，正如我們所見，這兩種方法的基色都相同，但在資料夾和條帶顏色方面有所不同。當我們開始時，總是記住第一個數字對應於色調，然後是飽和度，最後是亮度。

選項A

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

現在，當我們關注的是24的基底飽和度和96的亮度時，當我們為資料夾建立深綠色時，這兩個值都發生了變化。從24的飽和度變成40（增加+16），從96的亮度變成82（減少-14），這表明無論增加還是減少，飽和度的變化都需要與亮度成反比調整，以產生良好的對比度（反之亦然）。同樣的事情也發生在紙條上，以資料夾的飽和度和亮度為基值，我們從40移到44（增加+04），亮度從82減少到75（減少-07），由此得出公式：

較暗值=飽和度增加是亮度的降低

較亮值=飽和度降低是亮度的增加

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

選項B