UI設計小技巧提升工作效率
來源：優(yōu)漫教育
發(fā)布人：UMAN
時間：2023-11-07 16:39:45
設計是一種技能，它是一種手工藝品，而且這并非總是容易的手工藝品。在過去的十年中，很幸運能夠在不同領域進行設計。從事用戶界面設計和用戶體驗設計的工作。設計用戶界面可能具有挑戰(zhàn)性，因為作為設計師承擔著許多責任。要求用戶實現(xiàn)他們的目標。希望引導他們及時完成任務。我們都希望減少學習和認知成本。希望提高知名度。無論他們的互動是認真，有趣，強制性的還是無聊的結果，最終UI設計師都希望他們至少對擺在他們面前的輸出有愉快的體驗。
用戶界面提示
網絡上有很多指南，特別是對于設計師而言。并且充滿了杰出的人才，他們都展示了其如何做開展的工作。根據(jù)我多年的經驗，我發(fā)現(xiàn)了一些技巧，這些技巧在我每次工作時都有很大的幫助。
提示1.創(chuàng)建排版層次結構
層次結構：根據(jù)人員或事物的重要性對其進行排列的系統(tǒng)
排版應始終遵循基本的層次結構定義。排版是出版視覺印刷體系的第一種媒介。想象一張報紙。它包含一個主要標題-最大的印刷元素，副標題-通常是文章的標題和正文-文章本身。
定義明確，結構良好的類型層次結構可營造秩序感，并幫助用戶以自然的閱讀模式閱讀。由于將重要元素與次要元素區(qū)別開來，因此提高了它們的速度和數(shù)據(jù)定位能力。
如何創(chuàng)建排版層次結構
首先，我建議減少印刷樣式的數(shù)量。我發(fā)現(xiàn)3種標題樣式足以滿足2種正文樣式，總共只能創(chuàng)建5種樣式。我還建議僅使用兩個粗細的字體。常規(guī)和粗體，或輕和中，具體取決于每個字母形式的字符粗細。從本質上講，重量上的差異應該足以使重要元素與其他元素區(qū)分開。
看起來如何？
高級有效的UI設計小技巧提升工作效率
這里僅存在三種字體，但非常容易被吸引到標題上，但是，這并不能阻止眼睛自然地閱讀隨后的故事。此字體使用較薄和中等重量，這是因為它具有較重的加粗樣式，在我看來，與其他可用重量相比，對比度太強。僅使用兩個權重就可以使主體突出句子的關鍵部分。
與印刷術有關的另一個技巧是使印刷術樣式降至最低。豐富的風格和家庭風格會給人一種草率和支離破碎的感覺。避免混合使用斜體和粗體。我也更喜歡只使用一個字體家族，但是，如果所有標題都使用一個家族，而正文使用另一個字體，則采用兩個字體家族可能是有效的。在這種實踐中，將sans字體與sans-serif字體一起使用通常會產生最佳效果。
技巧2.保持一致
一致性消除了混亂并減少了學習。
混亂是一種不舒服的情緒。我們的大腦喜歡劃分。混亂需要認知努力來計算當前的不確定性。具有相同交互作用的元素的多種設計樣式；例如，多種主要按鈕樣式或多種輸入樣式有可能引起用戶混亂和不確定性。
采用一致的設計模式有助于消除混淆，并減少用戶期望的認知工作量。
一致的設計模式還減少了用戶存在的選項數(shù)量，因此減少了單次使用交互行為的數(shù)量。刪除選項可以增加剩余選項的熟悉度和期望值。
如何保持一致
在創(chuàng)建界面設計時，重用是一個很好的動詞。一旦對表示主按鈕等元素的樣式感到滿意，請將其創(chuàng)建為可視組件，以便您可以一次又一次地重復使用它。如果你需要相同元素的相似實例，但需要進行較小的更改，例如較小版本的主按鈕，請使用原始的主按鈕組件并減少內部填充以創(chuàng)建新的但幾乎相同的版本。避免更改其他視覺元素，例如邊框半徑或粗細，甚至避免更改字體粗細，因為像這樣的細微調整會給用戶帶來潛在的困惑。
如果使用Sketch，F(xiàn)igma或Adobe XD，則這些工具中的每一個都會促進創(chuàng)建旨在重用的設計組件的想法，因此我完全支持使用這些功能。
一致性是什么樣的？
高級有效的UI設計小技巧提升工作效率
上面說明了如何將主要和次要按鈕設計為不同而又一致。一個界面上存在許多元素，因此減少各種不同樣式和相關元素的解釋非常重要。保持視覺簡潔。保持樣式一致。
技巧3.創(chuàng)建自然的灰色
創(chuàng)建調色板時，我總是選擇兩個主調色板來構建我的界面。第一個是單色調色板，它從同一色調提供不同的狀態(tài)和陰影。本質上是灰色到黑色的調色板。第二個是單色調色板的復制，僅當我增加顏色組合的藍色和綠色值時。在單色調色板中使用均勻混合的紅色，綠色和藍色值沒有什么問題，但是在我眼中，一旦更改了藍色或綠色值，它就會消除一些“剛性”。
這種方法還有助于增加對比度的元素所占的表面積較小。元素的單個像素邊框或其他設計修飾（例如無效或禁用的標簽），創(chuàng)建現(xiàn)有灰度的第二個版本并增加顏色值會使顏色稍微加深，而無需創(chuàng)建新灰色。
如何創(chuàng)建更自然的灰色調色板
此過程沒有對，錯或科學的方法，只需你自己判斷即可。
我首先復制灰色單色調色板，然后通常嘗試保持“紅色”值不變。但是，對于較深的陰影，“紅色”值的確會略有減少，因為在向下移動調色板時，需要減少的白色量。
然后，我將“綠色”和“藍色”值增加到對灰色的自然外觀感到滿意的程度。我嘗試避免將每個值增加5點以上，因為這有可能創(chuàng)建一個全新的陰影，而不是其灰色前身的自然版本。
用戶界面提示
網絡上有很多指南，特別是對于設計師而言。并且充滿了杰出的人才，他們都展示了其如何做開展的工作。根據(jù)我多年的經驗，我發(fā)現(xiàn)了一些技巧，這些技巧在我每次工作時都有很大的幫助。
提示1.創(chuàng)建排版層次結構
層次結構：根據(jù)人員或事物的重要性對其進行排列的系統(tǒng)
排版應始終遵循基本的層次結構定義。排版是出版視覺印刷體系的第一種媒介。想象一張報紙。它包含一個主要標題-最大的印刷元素，副標題-通常是文章的標題和正文-文章本身。
定義明確，結構良好的類型層次結構可營造秩序感，并幫助用戶以自然的閱讀模式閱讀。由于將重要元素與次要元素區(qū)別開來，因此提高了它們的速度和數(shù)據(jù)定位能力。
如何創(chuàng)建排版層次結構
首先，我建議減少印刷樣式的數(shù)量。我發(fā)現(xiàn)3種標題樣式足以滿足2種正文樣式，總共只能創(chuàng)建5種樣式。我還建議僅使用兩個粗細的字體。常規(guī)和粗體，或輕和中，具體取決于每個字母形式的字符粗細。從本質上講，重量上的差異應該足以使重要元素與其他元素區(qū)分開。
看起來如何？
高級有效的UI設計小技巧提升工作效率
這里僅存在三種字體，但非常容易被吸引到標題上，但是，這并不能阻止眼睛自然地閱讀隨后的故事。此字體使用較薄和中等重量，這是因為它具有較重的加粗樣式，在我看來，與其他可用重量相比，對比度太強。僅使用兩個權重就可以使主體突出句子的關鍵部分。
與印刷術有關的另一個技巧是使印刷術樣式降至最低。豐富的風格和家庭風格會給人一種草率和支離破碎的感覺。避免混合使用斜體和粗體。我也更喜歡只使用一個字體家族，但是，如果所有標題都使用一個家族，而正文使用另一個字體，則采用兩個字體家族可能是有效的。在這種實踐中，將sans字體與sans-serif字體一起使用通常會產生最佳效果。
技巧2.保持一致
一致性消除了混亂并減少了學習。
混亂是一種不舒服的情緒。我們的大腦喜歡劃分。混亂需要認知努力來計算當前的不確定性。具有相同交互作用的元素的多種設計樣式；例如，多種主要按鈕樣式或多種輸入樣式有可能引起用戶混亂和不確定性。
采用一致的設計模式有助于消除混淆，并減少用戶期望的認知工作量。
一致的設計模式還減少了用戶存在的選項數(shù)量，因此減少了單次使用交互行為的數(shù)量。刪除選項可以增加剩余選項的熟悉度和期望值。
如何保持一致
在創(chuàng)建界面設計時，重用是一個很好的動詞。一旦對表示主按鈕等元素的樣式感到滿意，請將其創(chuàng)建為可視組件，以便您可以一次又一次地重復使用它。如果你需要相同元素的相似實例，但需要進行較小的更改，例如較小版本的主按鈕，請使用原始的主按鈕組件并減少內部填充以創(chuàng)建新的但幾乎相同的版本。避免更改其他視覺元素，例如邊框半徑或粗細，甚至避免更改字體粗細，因為像這樣的細微調整會給用戶帶來潛在的困惑。
如果使用Sketch，F(xiàn)igma或Adobe XD，則這些工具中的每一個都會促進創(chuàng)建旨在重用的設計組件的想法，因此我完全支持使用這些功能。
一致性是什么樣的？
高級有效的UI設計小技巧提升工作效率
上面說明了如何將主要和次要按鈕設計為不同而又一致。一個界面上存在許多元素，因此減少各種不同樣式和相關元素的解釋非常重要。保持視覺簡潔。保持樣式一致。
技巧3.創(chuàng)建自然的灰色
創(chuàng)建調色板時，我總是選擇兩個主調色板來構建我的界面。第一個是單色調色板，它從同一色調提供不同的狀態(tài)和陰影。本質上是灰色到黑色的調色板。第二個是單色調色板的復制，僅當我增加顏色組合的藍色和綠色值時。在單色調色板中使用均勻混合的紅色，綠色和藍色值沒有什么問題，但是在我眼中，一旦更改了藍色或綠色值，它就會消除一些“剛性”。
這種方法還有助于增加對比度的元素所占的表面積較小。元素的單個像素邊框或其他設計修飾（例如無效或禁用的標簽），創(chuàng)建現(xiàn)有灰度的第二個版本并增加顏色值會使顏色稍微加深，而無需創(chuàng)建新灰色。
如何創(chuàng)建更自然的灰色調色板
此過程沒有對，錯或科學的方法，只需你自己判斷即可。
我首先復制灰色單色調色板，然后通常嘗試保持“紅色”值不變。但是，對于較深的陰影，“紅色”值的確會略有減少，因為在向下移動調色板時，需要減少的白色量。
然后，我將“綠色”和“藍色”值增加到對灰色的自然外觀感到滿意的程度。我嘗試避免將每個值增加5點以上，因為這有可能創(chuàng)建一個全新的陰影，而不是其灰色前身的自然版本。
相關推薦
-
【UI培訓】：關于UI設計新手常遇到的問題及解決方法
UI設計新手常遇到的問題有哪些？比如，請問UI設計師每天的工作內容是什么樣的？除了做圖還要干什么？還需要哪些技能？個人職業(yè)規(guī)劃通常什么樣？做圖只是視覺設計師最基礎的工作，除了視覺執(zhí)行，還需要向上接入PD了解產品需求、在設計中驗證交互流程，向下跟進程序開發(fā)、數(shù)據(jù)收…行業(yè)資訊發(fā)布時間：2022/03/24 查看詳情 -
室內設計應體現(xiàn)文化元素的六大重要思維
無論是首都北京的故宮，還是西藏的布達拉宮，其精巧的室內裝潢和環(huán)境藝術，都有誰能說出這并非出自頂級的專業(yè)室內設計師和藝術大師之手，中國傳統(tǒng)室內設計文化也正是傳統(tǒng)東方文化與古典建筑藝術的精華部分。行業(yè)資訊發(fā)布時間：2022/03/24 查看詳情 -
UI設計培訓中有沒有學不會UI的人
UI設計培訓中有沒有學不會UI的人？優(yōu)漫教育小編要說是真的有，就是那些根本不想學的，就像你永遠叫不醒一個裝睡的人。如果你對ui有強烈的學習興趣，想在ui行業(yè)有所建樹，那么不論你是高中畢業(yè)、大學畢業(yè)，不論你是有計算機基礎、零基礎，不論你是男生、女生，不論你是20歲、30…行業(yè)資訊發(fā)布時間：2022/04/01 查看詳情
