作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.
成功的设计师通常 upskill 并重新培训以加强跨工具、项目和规程使用的基础知识. 然而,在工作日找到额外的学习时间并不容易. 幸运的是,网络游戏是一种 既有趣又有教育意义 为 UI / UX的设计师 提高他们的技能并获得新的技能. 通过互动和沉浸式(通常是免费的)在线游戏体验, 你可以磨练技术技能,比如 对齐, 排版, color 理论.
除了学习新的 设计技术, 我发现玩网络游戏能让我心情轻松, 激发我的创造力, 并帮助我更好地利用核心 设计原则. 每当我有空闲时间或我面对一个顽固 设计问题我玩了其中一款游戏,并获得了全新的视角.
对齐是指导视觉构图和支撑的基本设计原则 可用性和可读性.
这是 集中 那。 对训练你的对齐感和帮助你快速发现间距错误很有帮助吗. 目标是确定一个点是否在一个形状的中心. 这是一个简单的概念, 但这款游戏具有挑战性,因为这些点通常被放置在离中心很近的地方. 游戏通过强迫你考虑几何形状并在重叠和相邻的形状中找到参考点来构建构图意识.
理解 字体的细微差别 可以帮助设计师建立 视觉层次结构,确保文字清晰可辨,更好地沟通 拷贝的含义.
这个游戏 我拍了衬线字体 测试你的识别速度 衬线字体. 开始, 你面前有两封信, 其中之一是衬线字体, 并且需要在时间用完之前点击它来“拍摄衬线”. 随着你的进步, 你会同时看到越来越多的字母, 这使得寻找和拍摄不同的衬线字体变得更加困难.
这个游戏会让你保持警觉! 我每周都打,我总是惊讶于几轮之后的挑战.
Typewar 是另一个字体培训师,一个挑战你识别能力的人吗 不同的字体. 在每一轮中,你会得到a 字形 并且必须从一对选项中选择正确的字体名称. 你 得失分 看你如何回答这个问题, 最后获得的分数取决于有多少其他玩家正确回答了同样的问题. 即时反馈, 实时统计, 接触鲜为人知的字体会激励你继续学习.
提高数字文本可读性的一种方法是保证有效的字距, 或者字符之间的间距. 字距通常不受设计师的关注,因为它是在每种字体的字体文件中预定义的. 但是,当字符之间的关系似乎不一致时,知道如何调整字距是有帮助的, 或者如果你需要创建一个定制的标志或 客户端字体t.
Kern类型 通过测试您在单词中正确空格字母的能力,帮助您微调您的字距技能. 你说的每一个字, 你会得到100分的分数,并且可以选择在三个视图之间切换:你的间距, 最佳间距, 以及两者的结合来进行比较.
我一直在玩这个游戏,因为很难得100分, 它提醒我,总有进步的空间.
By 提升你的色彩技巧, 您可以在一系列设计项目和学科中做出更明智、更有意义的决策. Color 这是一款挑战你识别色彩和饱和度的游戏吗, 同时也是互补的, 类似的, 三元, 四色搭配. 界面显示交互式 色轮 中间有一个高亮的颜色. 您必须在10秒或更短的时间内确定色轮内的颜色, 当您尝试为三色和四色方案匹配颜色时,难度会增加的任务.
基于矢量的工具,如 Figma, 草图, 和Adobe Illustrator允许设计师创建数字图形,而不损失质量-不像像素图像, 尺寸越大分辨率越低. 但是绘制和操作矢量形状和曲线可能是一个棘手的过程.
的 布尔游戏 教你们 布尔操作 ,用于快速构建和修改2D形状 矢量设计工具. 在游戏中,你会看到一个需要复制的形状. 几秒钟后,形状转变为轮廓. 屏幕左侧有几个形状,您可以将它们拖到轮廓中以重现最终形状. 在屏幕的底部是四个布尔运算:并、减、相交和差. 单击Continue按钮会触发一个分步动画,向您展示如何使用所选布尔操作合并形状. 当选择了不正确的操作时,这个动画可以帮助您将错误可视化.
形状类型 是另一款矢量游戏吗. 在这, 玩家将看到一个字母,需要通过拖动不同的锚点将其重新塑造成正确的形式,并给出100分的相似度分数. 与Kern类型类似,您也可以在三个视图之间切换,以便将结果与原始形状进行比较. 除了提炼你的矢量绘图能力, 形状类型是获得近距离观察的好方法 解剖因素 不同的字体.
最后一个游戏,将帮助你提高你的矢量技能是 bsamzier游戏,它可以帮助您使用钢笔工具创建更精确的图形. 介绍教程解释如何使用控件, 如Alt和shift, 来定位锚点和操纵bsamzier手柄. 这个游戏教你如何画简单的几何形状以及更复杂的形状, 如一颗心和一辆车, 锚点也很少, 或节点, 尽可能。. 为了让事情更有趣, 每个关卡都有一定数量的节点, 游戏会记录你不使用的节点.
我喜欢这个游戏,因为它帮助我可视化锚点放置和贝塞尔手柄角度之间的关系, 使线条和曲线更平滑.
无论是职业发展还是与开发者合作, 理解HTML和CSS的基础知识 使设计师成为多学科团队的重要资产. 此外, 前端编程知识 帮助设计师用现实参数调整他们的想法.
Flexbox不好的 分解编码的基础一步一步. 它教导 CSS flexbox, a CSS3网页布局模型 通过启用对齐控制使UI组件定位更容易, 间距, 用一两行代码包装网页上的元素.
在游戏中, 你可以通过编写几行CSS代码来帮助一只淘气的青蛙和它的伙伴们在屏幕上跳跃. 在每个级别上,代码编辑器上方的迷你教程描述了可以使用的不同命令. 当您在屏幕左侧编写代码时,相应的更改将在右侧发生. 如果青蛙到达了莲叶,代码是正确的.
在线游戏还可以帮助设计师提高他们的UI/UX知识,创造无摩擦的体验 提高转换率和投资回报率.
不能Unsee 通过测试你的设计概念知识来丰富你的整体UI/UX能力, 比如等级制度, 对比, 对齐, 排版, 以及组件样式. 屏幕显示两个设计组件,并要求您选择对用户更友好的选项. 部件在未经训练的人看来可能是一样的,但是 专业的设计师 应该能够通过注意元素之间的微小差异来区分它们吗, 例如未对齐的文本或不均匀的填充.
我经常惊讶于设计行业的发展之快. 有时, 跟上新工具和新技术的步伐的压力会让我感到势不可挡,扼杀了我的创造力. 当我以一种童心来处理问题时,我的设计工作做得最好, 这就是为什么我如此喜欢这些游戏:它们让我在保持游戏感和好奇的同时学习和练习.
你是否想重新学习技能, upskill, 或者学习新的UI/UX技术, 在线设计游戏可以帮助你测试和提高你的艺术和技术能力. 就像毕加索曾经说过的, “我总是在做我做不到的事, 这样我才能学会如何做这件事.”