成功的设计师通常 upskill and reskill to rein为ce fundamentals used across tools, projects, disciplines. 然而，在工作日找到额外的学习时间并不容易. 幸运的是，网络游戏是一种 既有趣又有教育意义 为 UI / UX的设计师 提高他们的技能并获得新的技能. 通过互动和沉浸式(通常是免费的)在线游戏体验, 你可以磨练技术技能，比如 对齐, 排版, color 理论.

除了学习新的 设计技术, 我发现玩网络游戏能让我心情轻松, 激发我的创造力, 并帮助我更好地利用核心 设计原则. 每当我有空闲时间或我面对一个顽固 设计问题我玩了其中一款游戏，并获得了全新的视角.

增强你的一致性

Alignment is a fundamental design principle that guides visual composition and supports 可用性和可读性.

这是 集中 那 is great 为 training your sense of 对齐 and helping you catch 间距 mistakes quickly. 目标是确定一个点是否在一个形状的中心. 这是一个简单的概念, but the game is challenging because the dots are often placed agonizingly close to center. 这个游戏 builds compositional awareness by 为cing you to consider geometry and find reference points in overlapping and adjacent shapes.

扩展你的字体设计知识

理解 字体的细微差别 可以帮助设计师建立 视觉层次结构，确保文字清晰可辨，更好地沟通 拷贝的含义.

这个游戏 我拍了衬线字体 测试你的识别速度 衬线字体. 开始, 你面前有两封信, 其中之一是衬线字体, are required to “shoot the serif” by clicking on it be为e you run out of time. 随着你的进步, 你会同时看到越来越多的字母, 这使得寻找和拍摄不同的衬线字体变得更加困难.

这个游戏会让你保持警觉! I play it every week, I’m always surprised by how challenging it is after a few rounds.

Typewar 是另一个字体培训师，一个挑战你识别能力的人吗 不同的字体. 在每一轮中，你会得到a 字形 并且必须从一对选项中选择正确的字体名称. 你 得失分 看你如何回答这个问题, the amount of points awarded at the end depends on how many other players answered the same question correctly. 即时反馈, 实时统计, 接触鲜为人知的字体会激励你继续学习.

提高你的视觉识别能力

One way to improve the readability of digital text is to ensure effective kerning, 或者字符之间的间距. Kerning often flies under designers’ radar because it’s predefined in each typeface’s font files. But it’s helpful to know how to adjust kerning when the relationship between characters seems off, 或者如果你需要创建一个定制的标志或 客户端字体t.

Kern类型 helps you fine-tune your kerning skills by testing your ability to correctly space letters within words. 你说的每一个字, you receive a score out of 100 and the option to toggle between three views: your 间距, 最佳间距, 以及两者的结合来进行比较.

我一直在玩这个游戏，因为很难得100分, 它提醒我，总有进步的空间.

升级你的色彩游戏

By 提升你的色彩技巧, you can make smarter and more meaningful decisions across a spectrum of design projects and disciplines. Color 这是一款挑战你识别色彩和饱和度的游戏吗, 同时也是互补的, 类似的, 三元, 四色搭配. 界面显示交互式 色轮 中间有一个高亮的颜色. 你 must determine the color (or colors) inside the 色轮 in 10 seconds or less, a task that grows in difficulty as you attempt to match colors 为 三元 and tetradic color schemes.

完善矢量技术

基于矢量的工具，如 Figma, 草图, Adobe Illustrator allow designers to create digital graphics that scale without losing quality—unlike pixel images, 尺寸越大分辨率越低. 但是绘制和操作矢量形状和曲线可能是一个棘手的过程.

的 布尔游戏 教你们 布尔操作 ，用于快速构建和修改2D形状 矢量设计工具. 在游戏中，你会看到一个需要复制的形状. 几秒钟后，形状转变为轮廓. On the left of the screen are several shapes that you can drag into the outline to reproduce the final shape. At the bottom of the screen are four 布尔操作: union, subtract, intersect, difference. Clicking the Continue button triggers a step-by-step animation that shows you how to merge the shapes using the chosen Boolean operation. When an incorrect operation is chosen, this animation helps you visualize your mistakes.

形状类型 是另一款矢量游戏吗. 在这, the player is presented with a letter that needs to be reshaped into its correct 为m by dragging different anchor points and given a similarity score out of 100. Like Kern类型, you can also toggle between three views to compare your result to the original shape. 除了提炼你的矢量绘图能力, 形状类型是获得近距离观察的好方法 解剖因素 不同的字体.

最后一个游戏，将帮助你提高你的矢量技能是 bsamzier游戏，它可以帮助您使用钢笔工具创建更精确的图形. 介绍教程解释如何使用控件, 如Alt和shift, 来定位锚点和操纵bsamzier手柄. 这个游戏 teaches you how to draw simple geometric shapes along with more complex shapes, 如一颗心和一辆车, 锚点也很少, 或节点, 尽可能. 为了让事情更有趣, 每个关卡都有一定数量的节点, 游戏会记录你不使用的节点.

I like this game because it helps me visualize the relationship between anchor point placement and bezier handle angles, 使线条和曲线更平滑.

温习基础编码

无论是职业发展还是与开发者合作， 理解HTML和CSS的基础知识 使设计师成为多学科团队的重要资产. 此外, 前端编程知识 帮助设计师用现实参数调整他们的想法.

Flexbox不好的 分解编码的基础一步一步. 它教导 CSS flexbox, a CSS3网页布局模型 通过启用对齐控制使UI组件定位更容易, 间距, 用一两行代码包装网页上的元素.

在游戏中, you help a mischievous frog and his pals hop across the screen by writing lines of CSS code. At each level, a mini tutorial above the code editor describes the different commands you can use. As you write the code on the left side of the screen, the corresponding changes occur on the right. 如果青蛙到达了莲叶，代码是正确的.

提升你的UI/UX知识

Online games can also help designers improve their UI/UX knowledge and create frictionless experiences that 提高转换率和投资回报率.

不能Unsee enriches your overall UI/UX abilities by testing your knowledge of design concepts, 比如等级制度, 对比, 对齐, 排版, 以及组件样式. 的 screen shows two design components and asks you to select the more user-friendly option. 部件在未经训练的人看来可能是一样的，但是 专业的设计师 should be able to tell them apart by noticing small differences between the elements, 例如未对齐的文本或不均匀的填充.

充分利用在线设计游戏

我经常惊讶于设计行业的发展之快. 有时, the pressure to keep pace with new tools and techniques can feel overwhelming and stifle my creativity. 当我以一种童心来处理问题时，我的设计工作做得最好, which is why I enjoy these games so much: 的y allow me to learn and practice while maintaining a sense of play and wonder.

你是否想重新学习技能, upskill, 或者学习新的UI/UX技术, 在线设计游戏可以帮助你测试和提高你的艺术和技术能力. 就像毕加索曾经说过的, “我总是在做我做不到的事, 这样我才能学会如何做这件事.”