用有趣的设计师在线游戏提高你的技能

成功的设计师通常会提高技能和重新技能，以加强跨工具、项目和学科使用的基础知识。 然而，在工作周内找到额外的学习时间并不容易。 幸运的是，在线游戏对于 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 技术，在线设计游戏都可以帮助您测试和发展您的艺术和技术能力。 正如巴勃罗毕加索曾经说过的那样，“我总是在做我做不到的事情，以便我可以学习如何去做。”