当前位置：首页>游戏攻略>代替刷手机的100个设计小游戏(设计师版)

代替刷手机的100个设计小游戏(设计师版)

  • 更新时间 2026-09-28 11:46:09
代替刷手机的100个设计小游戏(设计师版)
这篇整理了 100 个能涨知识的设计玩法：训练游戏、创意实验、可玩的配色与字体工具都在里面，按 8 类排好。

01 排版·字体·矢量（18）

Method of Action｜字距、配色、钢笔、字形、布尔五款训练游戏的官方入口
https://method.ac
Kern Type｜调整字母间距到最舒服状态，练版式细节
https://type.method.ac
Shape Type｜拖动锚点重塑字母轮廓，练贝塞尔曲线手感
https://shape.method.ac
Bézier Game｜用钢笔工具描出物体轮廓，锚点越少越强
https://bezier.method.ac
Boolean Game｜用并集、差集、交集组合目标图形，练布尔运算
https://boolean.method.ac
Typewar｜看字母竞速识别字体，练字体认知速度
https://typewar.com
I shot the serif｜射击衬线字体、放过无衬线，新手到资深难度
https://www.tothepoint.co.uk/us/fun/i-shot-the-serif/
Type Connection｜帮两个字体“配对约会”，理解字体性格搭配
https://typeconnection.com
Font Game｜ILoveTypography 出品，30 道题测字体识别
https://ilovetypography.com/fonts/fontgame/
FontStruct｜用积木拼装自己的字体，还能下载使用
https://fontstruct.com
Prototypo｜拖动参数实时生成字体，理解字形生成逻辑
https://www.prototypo.io
Ragtime｜60 秒修好段落左右边缘的对齐锯齿
https://fathom.info/ragtime/
Fontjoy｜一键生成和谐字体配对，理解字体气质互补
https://fontjoy.com
Type Scale｜选择字号比例生成层级，练排版节奏
https://type-scale.com
Wordmark.it｜输入文字一键预览全部字体，选字体神器
https://wordmark.it
Calligraphr｜上传手写稿转成可商用字体
https://www.calligraphr.com
Modular Scale｜按数学比例生成字号阶梯，练排版系统思维
https://www.modularscale.com
WhatTheFont｜上传图片识别字体，字体侦探工具
https://www.myfonts.com/WhatTheFont

02 色彩与配色（26）

Color｜在色环上补全目标色相与饱和度
https://color.method.ac
Eye Test 色感｜60 秒从相近色块中找出差异
http://game.ioxapp.com/eye-test/game.html
Hex Invaders｜外星人入侵版射击游戏，练 hex 色值识别
https://www.hexinvaders.com
Dialed｜限时凭记忆还原颜色，练色彩记忆
https://dialedcolorgame.com
Daily Color Challenge｜每天一题选对色值，Wordle 式配色挑战
https://66colorful.com/tools/daily-color-challenge
Palette Lab｜Toon Tone 卡通配色记忆等游戏合集
https://palettelab.org
Random Color Naming｜看色块猜颜色名称，三档难度
https://en.ud5.com/tool/random-color-challenge
Color Guesser｜按颜色名在色轮上找色，练色感
https://pantonecolors.net/color-guesser/
X-Rite Color Challenge｜官方色觉测试，排序色相考验色感
https://www.xrite.com/hue-test
Khroma｜AI 根据你的偏好生成配色，越用越懂你
https://www.khroma.co
Blendoku｜颜色渐变小游戏，把色块排成渐变序列
http://blendoku.com
I Love Hue｜解谜式配色游戏，把打乱的色块归位
https://ilovehue.com
Colordot｜点几下鼠标生成柔和配色方案
https://color.hailpixel.com
Color Hunt｜每日精选配色灵感库，可收藏可复制
https://colorhunt.co
Coolors｜空格键快速生成配色方案，可锁定色值
https://coolors.co
Colormind｜AI 从图片中提取配色，一键出方案
http://colormind.io
Happy Hues｜按场景分类的配色灵感，附应用示例
https://www.happyhues.co
UI Gradients｜渐变背景配色合集，复制即用
https://uigradients.com
Gradient Hunt｜每日更新渐变配色灵感
https://gradienthunt.com
WebGradients｜180 组渐变配色，含 CSS 代码
https://webgradients.com
MyColor.space｜输入一个颜色自动生成整套配色
https://mycolor.space
Realtime Colors｜实时预览配色在网页上的应用效果
https://www.realtimecolors.com
Colorable｜检测文字与背景对比度是否达标（WCAG）
https://colorable.jxnblk.com
Palettte｜对配色做渐变编辑，调试色彩过渡
https://palettte.app
Paletton｜经典配色方案生成器，色轮操作直观
https://paletton.com
Adobe Color｜Adobe 官方配色工具，含取色与趋势
https://color.adobe.com/zh/create/color-wheel

03 眼力与细节（8）

The Designer's Eye｜判断圆点是否在形状正中心，10 关全对才算赢
https://www.supremo.co.uk/designers-eye
Can't Unsee｜两版界面挑出更专业的一个，练细节敏感度
https://cantunsee.space
Pixactly｜凭感觉画出指定像素宽度的方块
http://pixact.ly
Pixel Hunt｜倒计时里找出色块不同的那一个
https://shortcutgames.com/pixel-hunt
Find The Difference｜官方浏览器版找不同，练观察力
https://findthedifference.net
Puzzio Find It｜限时找 5-7 处不同，奖励耐心观察
https://puzzio.io/game/find-it---find-the-differences
Which Face Is Real｜MIT 项目，分辨真人脸与 AI 生成脸
https://www.whichfaceisreal.com
Real or AI｜AI 人脸挑战，练真假辨别能力
https://thisfacenotexist.com/real-or-ai.html

04 品牌与 Logo（5）

LogoGames｜看 logo 猜品牌，免费无注册，含 11 个分类题库
https://logogames.io
WhatIFS Logo Quiz｜逐条线索（颜色→轮廓→首字母）猜品牌
https://whatifs.fun/logo-quiz/
Guess The Logo｜揭开色块猜品牌，和好友拼速度
https://logogame.net
Logo Quiz Game｜1220 个 logo、20 关，拼字母猜品牌名
https://logoquizgame.com
World Guesser Logo Quiz｜浏览器直接玩的品牌识别问答
https://worldguesser.io/logo-quiz

05 CSS 与前端（10）

Flexbox Froggy｜用 flex 布局把青蛙送回荷叶，24 关
https://flexboxfroggy.com
Grid Garden｜写 grid 代码给胡萝卜浇水，28 关
https://cssgridgarden.com
CSS Diner｜用 CSS 选择器“吃掉”餐桌上的菜，32 关
https://flukeout.github.io
CSSBattle｜用最短 CSS 复刻目标图形，全球排行
https://cssbattle.dev
Flexbox Defense｜塔防玩法练 flex 布局
http://www.flexboxdefense.com
Grid Attack｜打怪闯关学 grid 布局
https://codingfantasy.com/games/grid-attack
Flexbox Adventure｜冒险剧情学 flex，24 个挑战
https://codingfantasy.com/games/flexbox-adventure
CSS Speedrun｜限时写出正确选择器，10 道题拼手速
https://css-speedrun.netlify.app
CSS Challenges｜真实网页布局还原挑战
https://css-challenges.com
Codepip｜Froggy/Garden 官方平台，更多网页学习游戏
https://codepip.com

06 Google 创意实验（12）

Quick, Draw!｜你画我猜，AI 猜你画了什么
https://quickdraw.withgoogle.com
AutoDraw｜AI 帮你把涂鸦变成规整图标
https://www.autodraw.com
Blob Opera｜指挥四个彩色小团子唱歌剧，AI 实时发声
https://artsandculture.google.com/experiment/blob-opera
Shadow Art｜用手比影子，AI 猜你在模仿什么
https://shadow-art.withgoogle.com
Semi-Conductor｜指挥台上的乐队，跟着节拍挥动手臂
https://semiconductor.withgoogle.com
Song Maker｜在网格上点出旋律，生成你的第一首歌
https://song-maker.withgoogle.com
Chrome Music Lab｜音乐与声音的实验乐园，十几个小实验
https://musiclab.chromeexperiments.com
Emoji Scavenger Hunt｜AI 用摄像头陪你玩表情符号寻宝
https://emojiscavengerhunt.withgoogle.com
Art Coloring Book｜给世界名画在线涂色
https://artsandculture.google.com/experiment/art-coloring-book
Puzzle Party｜和全球网友拼世界名画拼图
https://artsandculture.google.com/experiment/jigsaw-puzzle
Play a Kandinsky｜走进康定斯基的画里演奏音乐
https://artsandculture.google.com/experiment/play-a-kandinsky
X Degrees of Separation｜看两个看似无关的名人如何产生联系
https://artsandculture.google.com/experiment/x-degree-of-separation

07 艺术·绘画·音乐互动（16）

Weave Silk｜用鼠标画出发光的丝缎线条，对称之美
https://weavesilk.com
Patatap｜敲键盘生成音效动画，手指即乐器
https://patatap.com
Jackson Pollock｜像波洛克一样泼墨，鼠标甩出色彩
http://www.jacksonpollock.org
ThisIsSand｜在浏览器里玩流沙，堆出彩色沙丘
https://thisissand.com
WebGL Fluid｜流体模拟实验，鼠标搅动彩色液体
https://paveldogreat.github.io/WebGL-Fluid-Simulation
Mandalagaba｜在线画曼陀罗几何纹样，对称治愈
https://www.mandalagaba.com
Make 8-bit Art｜像素画在线创作，保存你的 8-bit 作品
http://make8bitart.com
Piskel｜免费像素画编辑器，还能做 GIF 动图
https://www.piskelapp.com
PhotoMosh｜一键给照片加故障艺术效果，玩坏图片
https://photomosh.com
Incredibox｜拖拽音效做出自己的 beatbox 作品
https://www.incredibox.com
Sketch Toy｜无限画布速写板，画完还能回放过程
https://sketchtoy.com
Aggie.io｜在线协作画板，和朋友一起画
https://aggie.io
Typatone｜打字成曲，每个字母都有音高
https://typatone.com
Bees & Bombs｜动效插画博客，每个都能玩
https://beesandbombs.com
Falling｜满屏下坠的动效实验，解压神器
https://fallingfalling.com
Click Click Click｜点击次数的全球实验，看你能点多快
https://clickclickclick.click

08 几何·3D·像素（5）

Tinkercad｜浏览器里的 3D 建模，游戏化教学上手快
https://www.tinkercad.com
Euclidea｜尺规作图闯关，用几何规则完成任务
https://www.euclidea.xyz
Hextris｜六边形俄罗斯方块，旋转六边形接色块
https://hextris.github.io/
100,000 Stars｜在银河系 10 万颗恒星中漫游
https://stars.chromeexperiments.com
Spline｜浏览器 3D 设计工具，拖拽做出三维作品
https://spline.design
素材来源于网络，版权归原作者所有，侵删
本文来自网友投稿或网络内容， 如有侵犯您的权益请联系我们删除， 联系邮箱：wyl860211@qq.com 。

英语母语国家排行榜,90%的人一开始就看反了

怎么选翡翠手镯,能安全下车️(专业版)

随机文章