2022-1-12 高勁
做設計是很難的。不僅要創建解決問題的設計，而且理想情況下，它們還應該使人們開心并感到愉悅。設計是一種技能，它是一種手工藝品，而且這種手工藝品做起來并非很容易。
設計UI界面可能具有挑戰性，因為我們作為設計師承擔著許多責任。我們滿足用戶,實現他們的操作目的；我們希望引導他們及時完成操作；我們希望減少用戶學習和認知的成本；我們希望提高知名度，我們希望他們體會到操作的樂趣。
無論他們的互動是認真的，感興趣的，強制性的還是無聊，最終我們都希望他們至少對擺在他們面前的界面有愉快的體驗。那么我們如何實現這一目標呢？
創建排版層次結構
定義明確，結構良好的類型層次結構可營造秩序感，并幫助用戶以自然的閱讀模式閱讀。由于將重要元素與次要元素區別開來，因此提高了它們的速度和數據定位能力。
首先，我建議減少印刷樣式的數量。我發現3種標題樣式足以滿足2種人體樣式，總共只能創建5種樣式。我還建議僅使用兩個粗細的字體。常規和粗體，或輕和中，具體取決于每個字母形式的字符粗細。從本質上講，重量上的差異應該足以使重要元素與其他元素區分開。
看起來如何？
這里僅存在三種字體，但非常容易被吸引到標題上，但是，這并不能阻止眼睛自然地閱讀隨后的故事。此字體使用較薄和中等重量，這是因為它具有較重的加粗樣式，在我看來，與其他可用重量相比，對比度太強。僅使用兩個權重就可以使主體突出句子的關鍵部分。
與印刷術有關的另一個技巧是使印刷術樣式降至最低。豐富的風格和家庭風格會給人一種草率和支離破碎的感覺。避免混合使用斜體和粗體。我也更喜歡只使用一個字體家族，但是，如果所有標題都使用一個家族，而正文使用另一個字體，則采用兩個字體家族可能是有效的。在這種實踐中，將sans字體與sans-serif字體一起使用通常會產生最佳效果。
保持一致
一致性消除了混亂并減少了學習。
混亂是一種不舒服的情緒。我們的大腦喜歡劃分。混亂需要認知努力來計算當前的不確定性。具有相同交互作用的元素的多種設計樣式；例如，多種主要按鈕樣式或多種輸入樣式有可能引起用戶混亂和不確定性。
采用一致的設計模式有助于消除混淆，并減少用戶期望的認知工作量。
一致的設計模式還減少了用戶存在的選項數量，因此減少了單次使用交互行為的數量。刪除選項可以增加剩余選項的熟悉度和期望值。
在創建界面設計時，重用是一個很好的動詞。一旦對表示主按鈕等元素的樣式感到滿意，請將其創建為可視組件，以便您可以一次又一次地重復使用它。如果您需要相同元素的相似實例，但需要進行較小的更改，例如較小版本的主按鈕，請使用原始的主按鈕組件并減少內部填充以創建新的但幾乎相同的版本。
避免更改其他視覺元素，例如邊框半徑或粗細，甚至避免更改字體粗細，因為這樣的細微調整會給用戶帶來潛在的困惑。
如果使用Sketch，Figma或Adobe XD，則這些工具中的每一個都會促進創建旨在重用的設計組件的想法，因此我完全支持利用這些功能。
一致性是什么樣的？
上面說明了如何將主要和次要按鈕設計為不同而又一致。一個界面上存在許多元素，因此減少各種不同樣式和相關元素的解釋非常重要。保持視覺簡潔。保持樣式一致。
創建自然的灰色
創建調色板時，我總是選擇兩個主調色板來構建我的界面。第一個是單色調色板，它從同一色調提供不同的狀態和陰影。本質上是灰色到黑色的調色板。第二個是單色調色板的復制，僅當我增加顏色組合的藍色和綠色值時。
在單色調色板中使用均勻混合的紅色，綠色和藍色值沒有什么問題，但是在我眼中，一旦更改了藍色或綠色值，它就會消除一些“剛性”。
這種方法還有助于增加對比度的元素所占的表面積較小。對于可能充當<Hr />元素的單個像素邊框或其他設計修飾（例如無效或禁用的標簽），創建現有灰度的第二種版本并增加顏色值會使顏色稍微加深，而無需創建新灰色。
此過程沒有對，錯或科學的方法，只需您自己判斷即可。
我首先復制灰色單色調色板，然后通常嘗試保持“紅色”值不變。但是，對于較深的陰影，“紅色”值的確會略有減少，因為在向下移動調色板時，需要減少的白色量。
然后，我將“綠色”和“藍色”值增加到對灰色的自然外觀感到滿意的程度。我嘗試避免將每個值增加5點以上，因為這有可能創建一個全新的陰影，而不是其灰色前身的自然版本。
藍灰色調色板是什么樣的？
下面顯示了我用于創建用戶界面設計的兩個調色板。這些顏色還有其他較暗的混合，但是出于本文的目的，我將圖像裁剪為僅顯示5。
文章來源：公眾號 作者：UI設計派
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.izc.net.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務