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