常州武進UI設計培訓_5G時代下的手機UI用戶界面該如何創建
設計是一種技能，它是一種手工藝品，而且這並非總是容易的手工藝品。
我已經擔任設計師多年了，很幸運能夠在不同領域進行設計。在過去的十年中，我從事用戶界面設計和用戶體驗設計的工作。
設計用戶界面可能具有挑戰性，因為我們作為設計師承擔著許多責任。我們要求用戶實現他們的目標。我們希望引導他們及時完成任務。我們希望減少學習和認知成本。我們希望提高知名度。我們希望他們體驗快樂。無論他們的互動是認真，有趣，強制性的還是無聊的結果，最終我們都希望他們至少對擺在他們面前的輸出有愉快的體驗。
那麼我們如何實現這一目標呢？
用戶界面提示
網絡上有很多指南，特別是對於設計師而言。並且充滿了傑出的人才，他們都展示了其如何做開展的工作。根據我多年的經驗，我發現了一些技巧，這些技巧在我每次工作時都有很大的幫助。
提示1.創建排版層次結構
層次結構：根據人員或事物的重要性對其進行排列的系統
排版應始終遵循基本的層次結構定義。排版是出版視覺印刷體系的第一種媒介。想象一張報紙。它包含一個主要標題-最大的印刷元素，副標題-通常是文章的標題和正文-文章本身。
定義明確，結構良好的類型層次結構可營造秩序感，並幫助用戶以自然的閱讀模式閱讀。由於將重要元素與次要元素區別開來，因此提高了它們的速度和數據定位能力。
如何創建排版層次結構
首先，我建議減少印刷樣式的數量。我發現3種標題樣式足以滿足2種正文樣式，總共只能創建5種樣式。我還建議僅使用兩個粗細的字體。常規和粗體，或輕和中，具體取決於每個字母形式的字符粗細。從本質上講，重量上的差異應該足以使重要元素與其他元素區分開。
看起來如何？
這裡僅存在三種字體，但非常容易被吸引到標題上，但是，這並不能阻止眼睛自然地閱讀隨後的故事。此字體使用較薄和中等重量，這是因為它具有較重的加粗樣式，在我看來，與其他可用重量相比，對比度太強。僅使用兩個權重就可以使主體突出句子的關鍵部分。
與印刷術有關的另一個技巧是使印刷術樣式降至最低。豐富的風格和家庭風格會給人一種草率和支離破碎的感覺。避免混合使用斜體和粗體。我也更喜歡只使用一個字體家族，但是，如果所有標題都使用一個家族，而正文使用另一個字體，則採用兩個字體家族可能是有效的。在這種實踐中，將sans字體與sans-serif字體一起使用通常會產生最佳效果。
技巧2.保持一致
一致性消除了混亂並減少了學習。
混亂是一種不舒服的情緒。我們的大腦喜歡劃分。混亂需要認知努力來計算當前的不確定性。具有相同交互作用的元素的多種設計樣式；例如，多種主要按鈕樣式或多種輸入樣式有可能引起用戶混亂和不確定性。
採用一致的設計模式有助於消除混淆，並減少用戶期望的認知工作量。
一致的設計模式還減少了用戶存在的選項數量，因此減少了單次使用交互行為的數量。刪除選項可以增加剩餘選項的熟悉度和期望值。
如何保持一致
在創建界面設計時，重用是一個很好的動詞。一旦對錶示主按鈕等元素的樣式感到滿意，請將其創建為可視組件，以便您可以一次又一次地重複使用它。如果你需要相同元素的相似實例，但需要進行較小的更改，例如較小版本的主按鈕，請使用原始的主按鈕組件並減少內部填充以創建新的但幾乎相同的版本。避免更改其他視覺元素，例如邊框半徑或粗細，甚至避免更改字體粗細，因為像這樣的細微調整會給用戶帶來潛在的困惑。
如果使用Sketch，Figma或Adobe XD，則這些工具中的每一個都會促進創建旨在重用的設計組件的想法，因此我完全支持使用這些功能。
一致性是什麼樣的？
上面說明了如何將主要和次要按鈕設計為不同而又一致。一個界面上存在許多元素，因此減少各種不同樣式和相關元素的解釋非常重要。保持視覺簡潔。保持樣式一致。
技巧3.創建自然的灰色
創建調色板時，我總是選擇兩個主調色板來構建我的界面。第一個是單色調色板，它從同一色調提供不同的狀態和陰影。本質上是灰色到黑色的調色板。第二個是單色調色板的複製，僅當我增加顏色組合的藍色和綠色值時。在單色調色板中使用均勻混合的紅色，綠色和藍色值沒有什麼問題，但是在我眼中，一旦更改了藍色或綠色值，它就會消除一些“剛性”。
這種方法還有助於增加對比度的元素所佔的表面積較小。對於可能用作
元素的單個像素邊框或其他設計修飾（例如無效或禁用的標籤），創建現有灰度的第二個版本並增加顏色值會使顏色稍微加深，而無需創建新灰色。
如何創建更自然的灰色調色板
此過程沒有對，錯或科學的方法，只需你自己判斷即可。
我首先複製灰色單色調色板，然後通常嘗試保持“紅色”值不變。但是，對於較深的陰影，“紅色”值的確會略有減少，因為在向下移動調色板時，需要減少的白色量。
然後，我將“綠色”和“藍色”值增加到對灰色的自然外觀感到滿意的程度。我嘗試避免將每個值增加5點以上，因為這有可能創建一個全新的陰影，而不是其灰色前身的自然版本。
藍灰色調色板是什麼樣的？
下面顯示了我用於創建用戶界面設計的兩個調色板。這些顏色還有其他較暗的混合，但是出於本文的目的，我將圖像裁剪為僅顯示5。
如你所見，此方法將創建更自然的灰色調色板。當我們在自然環境或建築環境中環顧四周時，灰色永遠不會100％是紅色，綠色和藍色。陽光，反射，陰影和明亮的藍天，都扭曲了我們對顏色的判斷，尤其是灰色。建築物可能只使用了一種色調的灰色油漆；但是，我們的解釋並不總是能反映出這一點。
技巧4.不要依賴不透明度
在為諸如導航欄或標題的元素創建設計時，減少前景版式和背景之間的對比度的一種常用方法是將字體塗成白色，然後降低其不透明度。問題是造成不一致。原因是不透明度是兩個元素之間的顏色混合。前景和背景。如果這些元素之一是一致的，例如我們的白色nav排版元素，但是背景顏色不一致，即漸變的顏色發生變化，則每個前景nav元素放置在不同背景上方時，它們看起來會彼此不同。顏色。
或者，如果前景色與背景元素來自相同的色相/顏色，但沒有應用任何不透明度，則背景漸變將對前景色的外觀沒有影響，因為不會發生顏色混合。
相同的色相/顏色如何應用？
首先，使前景類型與背景元素具有相同的顏色。我打開調色板，並停留在順化的同一區域；但是，我降低了前景色的飽和度。
從上面可以看到，我選擇了位於同一顏色區域內的前景色（右顏色選擇器），但是飽和度（藍色值）降低了。這將兩個對象對齊在一起，從而產生更加和諧的色彩平衡。
實際上這是什麼樣的？
左側圖像使用不透明的白色。正確的圖像使用相同的顏色，但飽和度較低。
該圖清楚地顯示了左側示例中的“我的帳戶”標籤看起來比右側示例中的飽和度更低。結果，該字體看起來灰暗且無光澤，這也降低了字體的對比度和可讀性。
技巧5.不要害怕空格
來自拉丁語的vacuor恐怖片是對空白空間的恐懼。在藝術和數字設計中，填充空白空間的誘惑比看到大面積的白色（負）空間閒置時感到不適的感覺要容易得多。不幸的是，管理人員和客戶常常將空白視為浪費的空間，這使得引入和使用空白的工作變得更加艱鉅，因為還需要一些教育方面的知識。
正確使用時，空白會在對象之間建立關係，定義順序和優先級，建議移動，並可以幫助強調或不強調特定內容，例如橫幅，促銷，英雄部分等。
如何處理空白
首先，將空白視為正空間。不要害怕。一旦你對在設計中引入空白的想法感到滿意，一個好的實踐就是從超出你需要的空白開始。大膽。太過分了。在內容或UI組件之間創建空間時，請從所需的更多空間開始，然後逐步向內逐步減少空間像素的數量。您很快就會找到理想的空白區域。
如果以相反的方式開始，即首先將元素緊密地放置在一起，然後慢慢增加它們之間的空白，那麼你引入的空間可能比上述以相反的方式開始時要小。
空白是什麼樣子？
你可以從上面的示例中看到，儘管右側的每張城市卡的尺寸都與左側的相同，但可以感覺到右側的尺寸更長。我增加了每張卡中的空白量，在城市名稱和城市形象之間，每顆星星之間以及通過將城市價格重新定位在右側來增加了額外的空白。這些調整會在城市名稱周圍創建更多空白區域，從而提高可見度，突出性和重要性。
我希望你發現這些技巧有用。正如我在本文開頭提到的那樣，這是5個技巧，我總是在新項目開始時就採用這些技巧。這些提示將有望幫助你創建有效，平衡和成功的用戶界面。
閱讀更多 上元秦老師 的文章
