用有趣的設計師在線遊戲提高你的技能

成功的設計師通常會提高技能和重新技能，以加強跨工具、項目和學科使用的基礎知識。 然而，在工作週內找到額外的學習時間並不容易。 幸運的是，在線遊戲對於 UI/UX 設計師來說是一種有趣且具有教育意義的方式，可以提高他們的技能並獲得新技能。 通過交互式和沈浸式（通常是免費的）在線遊戲體驗，您可以磨練對齊、排版和色彩理論等技術技能。

除了學習新的設計技巧，我發現玩網絡遊戲讓我心情更輕鬆，提高了我的創造力，並幫助我更好地利用核心設計原則。 每當我有空閒時間或遇到頑固的設計問題時，我都會玩其中一個遊戲並以全新的視角離開。

增強你的對齊感

對齊是指導視覺構圖並支持可用性和可讀性的基本設計原則。

它是居中的 這對於訓練您的對齊感並幫助您快速發現間距錯誤非常有用。 目標是確定一個點是否在形狀內居中。 這是一個簡單的概念，但遊戲具有挑戰性，因為這些點通常非常靠近中心放置。 遊戲通過迫使您考慮幾何形狀並在重疊和相鄰形狀中找到參考點來建立構圖意識。

擴展您的字體設計知識

了解字體的細微差別可以幫助設計師建立視覺層次，確保文本清晰易讀，並更好地傳達文案的含義。

我拍攝的襯線字體遊戲測試了您識別襯線字體的速度。 首先，您會看到兩個字母，其中一個是襯線字體，並且需要在時間用完之前單擊它來“拍攝襯線”。 隨著您的進步，您會同時看到越來越多的字母，這使得尋找和拍攝不同的襯線樣式變得更加困難。

這個遊戲會讓你保持警惕！ 我每週都玩它，幾輪之後我總是對它的挑戰性感到驚訝。

Typewar 是另一種字體訓練器，它挑戰您識別不同字體的能力。 在每一輪中，您都會看到一個字形，並且必須從一對選項中選擇正確的字體名稱。 您會因回答問題的方式獲得或失去分數，最終獲得的分數取決於有多少其他玩家正確回答了相同的問題。 即時反饋、實時統計和接觸鮮為人知的字體將激勵您不斷學習。

改善字距調整的眼睛

提高數字文本可讀性的一種方法是確保有效的字距調整或字符之間的間距。 字距調整經常在設計師的雷達下飛行，因為它是在每種字體的字體文件中預定義的。 但是，當字符之間的關係似乎不對時，或者如果您需要為客戶創建定制的標識或字體時，了解如何調整字距會很有幫助。

Kern Type 通過測試您在單詞中正確間隔字母的能力來幫助您微調您的字距調整技巧。 對於您緊縮的每個單詞，您都會獲得 100 分的分數，並且可以在三個視圖之間切換：您的間距、最佳間距以及兩者的組合以進行比較。

我一直回到這個遊戲，因為很難得分 100，它提醒我總是有改進的空間。

升級你的彩色遊戲

通過升級您的色彩技能，您可以在一系列設計項目和學科中做出更明智、更有意義的決策。 顏色是一款挑戰您識別色調和飽和度的遊戲，以及互補、相似、三色和四色的顏色配對。 界面顯示一個交互式色輪，中心突出顯示顏色。 您必須在 10 秒或更短的時間內確定色輪內的顏色（或多種顏色），當您嘗試為三色和四色配色方案匹配顏色時，這項任務的難度會增加。

改進你的向量技術

Figma、Sketch 和 Adob​​e Illustrator 等基於矢量的工具允許設計人員創建可縮放而不會降低質量的數字圖形，這與像素圖像不同，像素圖像會隨著尺寸的增加而降低分辨率。 但是繪製和操作矢量形狀和曲線可能是一個棘手的過程。

布爾遊戲向您介紹布爾運算，這些運算用於在基於矢量的設計工具中快速構建和修改 2D 形狀。 在遊戲中，您會看到要復制的形狀。 幾秒鐘後，形狀變成輪廓。 屏幕左側是幾個形狀，您可以將它們拖到輪廓中以重現最終形狀。 屏幕底部是四個布爾運算：並集、減法、相交和差分。 單擊“繼續”按鈕會觸發一步一步的動畫，向您展示如何使用選定的布爾運算合併形狀。 當選擇了不正確的操作時，此動畫可幫助您可視化您的錯誤。

Shape Type 是另一個可以嘗試的矢量遊戲。 在其中，玩家會看到一個字母，需要通過拖動不同的錨點將其重新塑造成正確的形式，並給出 100 分的相似度得分。像 Kern Type 一樣，您也可以在三個視圖之間切換，以將您的結果與原來的形狀。 除了改進您的矢量繪圖能力外，Shape Type 還是一種近距離觀察不同字體的解剖元素的好方法。

最後一款可以幫助您提高矢量技能的遊戲是 Bezier 遊戲，它可以幫助您使用鋼筆工具創建更精確的圖形。 介紹教程解釋瞭如何使用控件（例如 alt 和 shift）來定位錨點和操縱 Bezier 手柄。 該遊戲教您如何使用盡可能少的錨點或節點來繪製簡單的幾何形狀以及更複雜的形狀，例如心臟和汽車。 為了讓事情變得有趣，你會為每個級別獲得一定數量的節點，並且遊戲會記錄你不使用的節點的運行記錄。

我喜歡這個遊戲，因為它可以幫助我可視化錨點位置和貝塞爾手柄角度之間的關係，從而使線條和曲線更平滑。

複習基本編碼

無論是職業發展還是與開發人員合作，了解 HTML 和 CSS 的基礎知識都可以讓設計師成為多學科團隊的重要資產。 此外，前端編程知識可以幫助設計師用現實的參數來調整他們的想法。

Flexbox Froggy 逐步分解編碼的基礎知識。 它教授 CSS flexbox，這是一種 CSS3 Web 佈局模型，通過在網頁上啟用對齊控制、間距和包裝元素，只需一兩行代碼，就可以更輕鬆地定位 UI 組件。

在遊戲中，你通過編寫幾行 CSS 代碼幫助淘氣的青蛙和他的伙伴們在屏幕上跳躍。 在每個級別，代碼編輯器上方的迷你教程描述了您可以使用的不同命令。 當您在屏幕左側編寫代碼時，右側會發生相應的更改。 如果青蛙到達睡蓮，代碼是正確的。

提升您的 UI/UX 知識

在線遊戲還可以幫助設計師提高他們的 UI/UX 知識並創造無摩擦的體驗，從而提高轉化率和投資回報率。

Can't Unsee 通過測試您對設計概念（例如層次結構、對比度、對齊方式、排版和組件樣式）的了解來豐富您的整體 UI/UX 能力。 屏幕顯示兩個設計組件，並要求您選擇對用戶更友好的選項。 組件可能看起來與未經訓練的眼睛相同，但專業設計師應該能夠通過注意元素之間的細微差異（例如未對齊的文本或不均勻的填充）來區分它們。

充分利用在線設計遊戲

我經常對設計行業的發展速度感到驚訝。 有時，與新工具和技術保持同步的壓力會讓人感到不知所措並扼殺了我的創造力。 當我以孩子氣的精神解決問題時，我會盡我最大的努力，這就是我如此喜歡這些遊戲的原因：它們讓我在保持遊戲感和好奇感的同時學習和練習。

無論您是想學習新技能、提陞技能還是學習新的 UI/UX 技術，在線設計遊戲都可以幫助您測試和發展您的藝術和技術能力。 正如巴勃羅畢加索曾經說過的那樣，“我總是在做我做不到的事情，以便我可以學習如何去做。”