UI 設計最佳實踐和常見錯誤

收聽本文的音頻版本

儘管標題 UI 設計師暗示了與傳統平面設計師的不同，但 UI 設計仍然是視覺設計學科歷史傳統的一部分。

對於每一種運動或媒介，該學科都引入了新的圖形語言、佈局和設計流程。 幾代人之間，設計師跨越了從印刷機到施樂，或紙張到像素的過渡。 在這幾代人中，平面設計承擔著代表每個時代視覺語言的責任。

隨著 UI 設計從起步階段過渡，我們可以期待開發什麼樣的圖形世界？ 根據目前的軌跡，未來看起來很暗淡。 今天的大部分 UI 設計已經變得標準化和可重複。 在線設計討論專注於學習規則，以使設計安全工作，而不是挑戰極限或想像新事物。

UI設計師訴諸模式和趨勢的趨勢不僅創造了一個平淡的視覺環境，而且隨著流程變得越來越公式化，它也降低了設計師的價值。

當我們回顧 UI 最佳實踐和常見錯誤時，最緊迫的問題不是技術熟練程度，而是避免重複和視覺上乏味的設計的衝擊。

最常見的五個 UI 設計錯誤是：

1. UI 設計師已經變得痴迷於規則。
2. 網格限制了 UI 設計師的創作過程。
3. UI 設計已經通過模式標準化。
4. 可悲的是，字體被誤解了。
5. 對比並不是萬能的設計。

常見錯誤 #1：UI 設計師變得沉迷於規則

平面設計的世界一直遵循一套規則和標準。 在設計學科中，常見錯誤與已被打破的標準規則非常吻合。 從這個角度來看，設計規則似乎是值得信賴的指南。

然而，在每一個設計學科中，新的運動和創造性的創新都是有意識地打破規則的結果。 這是可能的，因為設計是有條件的，並且需要設計師的判斷力。 設計不是一個答案有限的過程。 因此，設計規則應被視為指導方針，而不是冷酷的事實。 經驗豐富的設計師了解並尊重規則手冊，足以打破常規。

在線討論設計的方式通常圍繞著做和不做的列表展開。 掌握設計完美的 10 個簡單步驟！ 不幸的是，設計需要對原則和趨勢有更深入的理解。 通往良好設計的道路並非通過系統地遵守清單來實現。

有趣的是，如果設計師不再打破規則，那麼就不可能有創造性的突破。 如果 UI 設計師只培養遵循指導方針的能力而不是磨練他們的決策能力，他們可能很快就會變得無關緊要。 我們還有什麼理由認為我們的工作比現成的模板增加了更大的價值？

警惕“十大”設計規則

當今 UI 設計世界中設計規則的問題在於它們的豐富性。 如果設計師需要解決問題，他們可以簡單地查看現有的 UI 社區和他們的解決方案集。 然而，這些指南和規則的豐富性削弱了它們的可信度。

谷歌搜索“Top UI Design Mistakes”會產生 50 萬條結果。 這些作者中的大多數（如果有的話）彼此同意的機率是多少？ 提供的每個設計技巧與讀者的設計問題準確一致的可能性有多大？

通常，在線教育文章討論的是尖銳問題，而不是問題背後的指導設計原則。 結果是新設計師永遠不會明白為什麼設計會如此運作。 相反，他們變得依賴於之前發生的事情。 這些文章中很少有人鼓勵設計實驗或遊戲，這難道不是一個問題嗎？

設計師應該借鑒指導原則的工具包，而不是預定規則和設計模板的書。 “按 x 進行視差滾動，按 y 進行輪播。 在選擇之前，請參閱有關導航工具趨勢的最新博客文章。” 無聊的-！

提示和“前 10 名”列表遵循可預測的趨勢

趨勢對於設計師來說就像垃圾食品。 追隨他們會產生廉價的解決方案，這些解決方案可以提供一些初始回報，但從長遠來看幾乎沒有價值。 緊跟潮流的設計師會很快與自己約會。 跟隨別人的設計路徑的回報？ 一種刺骨的職業空虛感。

確實，努力發明自己的風格和系統是一項艱苦的工作，但絕對值得付出努力。 每天的收穫和突破都是你自己的。 複製似乎永遠無法滿足設計師的靈魂。

常見錯誤 #2：網格限制了 UI 設計師的創作過程

儘管我反對規則，這裡有一個：UI 設計師不可能在沒有網格的情況下工作。 Web 和移動界面基本上是基於逐像素組織的——沒有辦法繞過它。

然而，這並不意味著 UI 設計師應該只追求以網格為中心的外觀。 同樣，沒有理由讓所有與設計相關的決策都基於網格。

避免將網格用作時尚工具

一般來說，根據趨勢進行設計會導致設計不佳。 充其量，趨勢會帶來令人滿意的結果，但總體影響幾乎可以肯定是平淡無奇。 時髦就是平凡。

因此，在設計中使用網格時，請了解網格作為工具必須提供的內容以及它可能傳達的內容。 網格通常代表中立性，因為網格約束內的一切看起來都是平等的。

網格還允許無偏見的導航體驗。 用戶可以從一個項目跳到另一個項目，而不受設計師策展手的任何干擾。 使用其他導航結構，設計者可能能夠更有意地對內容進行分組並建立所需的序列。

不要默認將網格作為工作流程

羅德島設計學院 (RISD) 的教員兼 PIN-UP 雜誌的主任 Dylan Fracareta 指出，“大多數人從 12 列網格開始……因為你可以從中得到 3 和 4。” 這裡的危險是設計師會立即預先確定他們的工作。

為了防止這種情況，Fracareta 只使用設置數量的移動工具，而不是物理地將東西放在網格線上。 這具有建立秩序和打開意外結果可能性的雙重效果。

為瀏覽器設計過去意味著我們將輸入代碼並等待看看會發生什麼。 如今，網頁設計類似於傳統的佈局設計，其過程“更像是調整兩張透明紙”。 作為設計師，我們如何從這個過程中受益？

儘管網格可能具有限制性，但它們是我們最傳統的組織形式之一。 網格很直觀。 電網是中性的，不張揚的。 網格允許內容自己說話，用戶可以輕鬆導航界面。 儘管我對網格的限制性提出了警告，但不同的陣列允許不同程度的指導或自由。

常見錯誤 #3：UI 設計已通過模式標準化

標準化設計元素的概念早於 UI 設計。 幾個世紀以來，建築細節被重複並應用於類似的設計環境。 這種做法對於人們很少感知的建築物的部分是有意義的。

然而，一旦建築師標準化了家具尺寸和扶手高度等常見元素，人們開始對由此產生的米色物理環境表示不感興趣。

不僅如此，標準化的尺寸也被證明是無效的。 根據統計平均值，它們通常無法為大部分人口提供服務。 可重複的細節有其位置，但不應不加批判地使用它們。

設計師不應該將模式用作產品

許多 UI 設計師將模式視為比簡單的省時工具更重要的東西。 他們將它們視為複雜設計問題的現成解決方案。 模式旨在標準化重複性任務和工件，以使設計人員的工作更輕鬆。 遺憾的是，某些模式，如輪播、分頁和 F 模式已經成為我們許多界面的整個結構。

模式使用合理嗎？

設計師告訴自己，F 模式的存在是人們在網絡上閱讀方式的結果。 Espen Brunborg 指出，也許人們以這種方式閱讀是因為我們過度使用了 F 模式。 “如果網頁設計師所做的只是遵循配方，那麼他們有什麼意義呢？” 布倫堡問道。

常見錯誤 #4：字體被悲慘地誤解

許多“快速提示”設計列表建議了字體的硬性和快速規則。 每一條規則都被虔誠地喊著：“只有一個字體家族！ 等寬字體已死！ 不惜一切代價避免使用細字體！” 這只不過是熱空氣。

關於類型、文本和字體的唯一合法規則集中在強制易讀性和傳達適當的含義上。 只要文本清晰易讀，就有機會使用各種字體。 UI 設計師必須負責了解界面中實現的每種字體的歷史、用途和設計意圖。

字體易讀性至高無上

字體傳達含義並影響易讀性。 隨著圍繞設備易讀性規則的所有討論，設計師們忘記了這種類型旨在為文本體注入美感。 易讀性是至關重要的——這是無可爭議的——但它確實應該是一個明顯的目標。 否則，為什麼我們需要 Helvetica 或 Highway Gothic 之外的任何東西？

要記住的重要一點是，字體不僅僅是為不同的易讀性環境而設計的。 它們對於傳達意義和賦予文本體微妙的情緒也是必不可少的。

不惜一切代價避免使用細字體是不明智的

現在這種趨勢已經過去了，一個常見的設計批評主張完全避免使用細字體。 但是我們需要更多的法規嗎？ 目標不應該是更深入地理解支持字體的設計原則嗎？

一些設計師確信，細字體在設備之間無法閱讀或不可信。 合法點。 然而，這代表了當前 UI 設計討論中的一種情況，即字體僅被理解為與易讀性相關的技術選擇。 如果易讀性是唯一的設計問題，為什麼不完全摒棄細字體呢？

更全面的方法首先要了解為什麼細字體可能是有利的，以及在什麼情況下。 粗體、厚文本實際上比細文本更難閱讀。 然而，由於粗體字體具有更多的視覺重量，它們更適合標題或文本很少的內容。

細字體通常使用襯線，使其適合正文。 為何如此？ 當快速連續查看時，襯線字符會一起流動，使它們更適合長時間閱讀。

此外，通常選擇細字體，因為它們傳達優雅。 如果聘請設計師為要求視覺複雜性的客戶創建界面，那麼很難找到更重的字體來完成這項工作。

字體需要變化來建立層次結構

一個常見的 UI 設計錯誤是未能在字體之間提供足夠的變化。 更改字體是一種很好的導航工具，有助於在界面中建立視覺層次結構。 一般來說，最大的項目（或最粗的字體）是最重要的，並且具有最大的視覺重量。 視覺意義幫助用戶識別內容標題和常用功能。

太多的變化會破壞等級制度

使每種字體選擇都獨一無二，尤其是當界麵包含許多字體時，問題在於沒有什麼真正突出。 如果每種字體都不同，用戶就很難識別重要內容或建立視覺秩序感。

常見錯誤#5：對比不是萬能的設計

許多“Top Mistakes”列表中出現的一個共同點鼓勵 UI 設計人員避免使用低對比度的界面。 確實，在許多情況下，低對比度設計難以辨認且無效。 然而，與我對細字體的觀點類似，我擔心的是絕對語言的使用會導致同質化、高對比度的設計文化。

默認使用高對比度是粗心的

高對比度的視覺效果無疑是刺激和令人興奮的。 然而，在人類的情感範圍內，還有更多的狀態值得傳達。 視覺刺激也可能是視覺安全的。

以當代科幻電影的整個行業為例。 似乎每部作品都採用黑色和霓虹藍的視覺效果來誘使觀眾興奮。 將高對比度圖像和低對比度圖像交織在一起，引發更廣泛的情緒反應，這不是更有效嗎？

從功能上講，如果界面中的每個元素都與另一個元素形成鮮明對比，那麼就沒有什麼特別突出的了。 這破壞了對比度作為分層工具的潛在價值。 將不同的設計動作視為工具而不是規則，對於避免停滯不前的時尚設計至關重要。

結論

充其量，設計規則是指南。 它們提供了決策安全性，並警告設計師輕率選擇的危險。

相反，設計規則不是法律。 它們並非牢不可破，當然也不值得我們毫無爭議地投降。 事實上，如果不顧一切地遵循設計規則，可能會成為嚴重的拐杖，削弱我們創造性地解決問題的能力。

設計師不是科學家。 我們不一定要為我們做出的每一個審美決定提供經驗證據。 誠然，我們的職業是一種過程和深思熟慮的判斷，但也有本能和獨創性的空間。 事實上，我們幫助客戶在雜亂無章的時尚內容世界中脫穎而出的能力取決於我們是否願意想像新的可能性。

我們必須進行實驗。 我們必須玩。

設計規則的存在是為了獲得視覺優勢。 它們可能彎曲，甚至折斷，但決不能盲目跟隨。