做設計是很難的。不僅要建立解決問題的設計，而且理想情況下，它們還應該使人們開心並感到愉悅。設計是一種技能，它是一種手工藝品，而且這種手工藝品做起來並非很容易。

設計UI介面可能具有挑戰性，因為我們作為設計師承擔著許多責任。我們滿足使用者,實現他們的操作目的；我們希望引導他們及時完成操作；我們希望減少使用者學習和認知的成本；我們希望提高知名度，我們希望他們體會到操作的樂趣。

無論他們的互動是認真的，感興趣的，強制性的還是無聊，最終我們都希望他們至少對擺在他們面前的介面有愉快的體驗。那麼我們如何實現這一目標呢？

使用者介面提示

網上有很多指南，特別是對於設計師而言。Medium是一個平臺，充滿了傑出的人才，他們都展示了他們的工作以及如何做自己的工作。我當然不是專家，我是一位相信始終存在增長空間的設計師。但是，根據我多年的經驗，我發現了一些技巧，這些技巧在我每次進行新專案時都會不斷地與之相關。當我能夠建立成功的設計介面時，這些技巧將有很大的幫助。

一、建立排版層次結構

層次結構：根據人員或事物的重要性對其進行排列的系統

印刷術應始終遵循基本的層次結構定義。印刷業是（甚至不是）出版視覺印刷體系的第一種媒介。想象一張報紙。它包含一個主要標題-最大的印刷元素，副標題-通常是文章的標題和正文-文章本身。

定義明確，結構良好的型別層次結構可營造秩序感，並幫助使用者以自然的閱讀模式閱讀。由於將重要元素與次要元素區別開來，因此提高了它們的速度和資料定位能力。

如何建立排版層次結構

首先，我建議減少印刷樣式的數量。我發現3種標題樣式足以滿足2種人體樣式，總共只能建立5種樣式。我還建議僅使用兩個粗細的字型。常規和粗體，或輕和中，具體取決於每個字母形式的字元粗細。從本質上講，重量上的差異應該足以使重要元素與其他元素區分開。

看起來如何？

這裡僅存在三種字型，但非常容易被吸引到標題上，但是，這並不能阻止眼睛自然地閱讀隨後的故事。此字型使用較薄和中等重量，這是因為它具有較重的加粗樣式，在我看來，與其他可用重量相比，對比度太強。僅使用兩個權重就可以使主體突出句子的關鍵部分。

與印刷術有關的另一個技巧是使印刷術樣式降至最低。豐富的風格和家庭風格會給人一種草率和支離破碎的感覺。避免混合使用斜體和粗體。我也更喜歡只使用一個字型家族，但是，如果所有標題都使用一個家族，而正文使用另一個字型，則採用兩個字型家族可能是有效的。在這種實踐中，將sans字型與sans-serif字型一起使用通常會產生最佳效果。

二、保持一致

一致性消除了混亂並減少了學習。

採用一致的設計模式有助於消除混淆，並減少使用者期望的認知工作量。

如何保持一致

在建立介面設計時，重用是一個很好的動詞。一旦對錶示主按鈕等元素的樣式感到滿意，請將其建立為可視元件，以便您可以一次又一次地重複使用它。如果您需要相同元素的相似例項，但需要進行較小的更改，例如較小版本的主按鈕，請使用原始的主按鈕元件並減少內部填充以建立新的但幾乎相同的版本。避免更改其他視覺元素，例如邊框半徑或粗細，甚至避免更改字型粗細，因為這樣的細微調整會給使用者帶來潛在的困惑。

如果使用Sketch，Figma或Adobe XD，則這些工具中的每一個都會促進建立旨在重用的設計元件的想法，因此我完全支援利用這些功能。

一致性是什麼樣的？

三、建立自然的灰色

建立調色盤時，我總是選擇兩個主調色盤來構建我的介面。第一個是單色調色盤，它從同一色調提供不同的狀態和陰影。本質上是灰色到黑色的調色盤。第二個是單色調色盤的複製，僅當我增加顏色組合的藍色和綠色值時。在單色調色盤中使用均勻混合的紅色，綠色和藍色值沒有什麼問題，但是在我眼中，一旦更改了藍色或綠色值，它就會消除一些“剛性”。

這種方法還有助於增加對比度的元素所佔的表面積較小。對於可能充當<Hr />元素的單個畫素邊框或其他設計修飾（例如無效或禁用的標籤），建立現有灰度的第二種版本並增加顏色值會使顏色稍微加深，而無需建立新灰色。

如何建立更自然的灰色調色盤

此過程沒有對，錯或科學的方法，只需您自己判斷即可。

我首先複製灰色單色調色盤，然後通常嘗試保持“紅色”值不變。但是，對於較深的陰影，“紅色”值的確會略有減少，因為在向下移動調色盤時，需要減少的白色量。

然後，我將“綠色”和“藍色”值增加到對灰色的自然外觀感到滿意的程度。我嘗試避免將每個值增加5點以上，因為這有可能建立一個全新的陰影，而不是其灰色前身的自然版本。

藍灰色調色盤是什麼樣的？

下面顯示了我用於建立使用者介面設計的兩個調色盤。這些顏色還有其他較暗的混合，但是出於本文的目的，我將影象裁剪為僅顯示5。

如您所見，此方法將建立更自然的灰色調色盤。當我們在自然環境或建築環境中環顧四周時，灰色永遠不會100％是紅色，綠色和藍色。陽光，反射，陰影和明亮的藍天，都扭曲了我們對顏色的判斷，尤其是灰色。建築物可能只使用了一種色調的灰色油漆；但是，我們的解釋並不總是能反映出這一點。

四、不要依賴不透明度

在為諸如導航欄或標題的元素建立設計時，減少前景版式和背景之間的對比度的一種常用方法是將字型塗成白色，然後降低其不透明度。問題是造成不一致。原因是不透明度是兩個元素之間的顏色混合。前景和背景。如果這些元素之一是一致的，例如我們的白色nav排版元素，但是背景顏色不一致，即具有顏色變化的漸變，則每個前景nav元素放置在不同背景上方時，它們看起來會彼此不同。顏色。

或者，如果前景色與背景元素來自相同的色相/顏色，但未應用任何不透明度，則背景漸變將不會對前景色的外觀產生影響，因為不會發生顏色混合。

相同的色相/顏色如何應用？

首先，使前景型別與背景元素具有相同的顏色。我開啟調色盤，並停留在順化的同一區域；但是，我降低了前景色的飽和度。

從上面可以看到，我選擇了位於同一顏色區域內的前景色（右顏色選擇器），但是飽和度（藍色值）降低了。這將兩個物件對齊在一起，從而產生更加和諧的色彩平衡。

實際上這是什麼樣的？

左圖使用白色且不透明。正確的影象使用相同的顏色，但飽和度較低。

該圖清楚地顯示了左側示例中的“我的賬戶”標籤看起來比右側示例中的飽和度更低。結果，該字型看起來灰暗且無光澤，這也降低了字型的對比度和可讀性。

五、不要害怕空白

來自拉丁語的vacuor恐怖片是對空白空間的恐懼。在藝術和數字設計中，填充空白空間的誘惑要比看到大面積的白色（負）空間閒置時感到不適的感覺容易得多。不幸的是，管理人員和客戶經常將空白視為浪費的空間，這使得引入和使用空白的工作變得更加艱鉅，因為還需要一些教育方面的知識。

正確使用時，空白會在物件之間建立關係，定義順序和優先順序，建議移動，並可以幫助強調或不強調特定內容，例如橫幅，促銷，英雄部分等。

如何處理空白

首先，將空白視為正空間。不要害怕。一旦您對在設計中引入空白的想法感到滿意，一個好的實踐就是從超出您需要的空白開始。大膽。太過分了。在內容或UI元件之間建立空間時，請從所需的更多空間開始，然後逐步向內逐步減少空間畫素的數量。您很快就會找到理想的空白區域。

如果以相反的方式開始，即首先將元素緊密地放置在一起，然後慢慢增加它們之間的空白，那麼您引入的空間可能比上述以相反的方式開始時要小。

空白是什麼樣子？

您可以從上面的示例中看到，儘管右側的每張城市卡的尺寸都與左側的相同，但可以感覺到右側的尺寸更長。我增加了每張卡中的空白量，在城市名稱和城市形象之間，每顆星星之間以及透過將城市價格重新定位在右側來增加了額外的空白。這些調整會在城市名稱周圍建立更多空白區域，從而提高可見度，突出性和重要性。

我希望您發現這些技巧有用。正如我在本文開頭提到的那樣，這是5個技巧，我總是在新專案開始時就採用這些技巧。這些提示將有望幫助您建立有效，平衡和成功的使用者介面。