1. 项目拆解与设计思路“111111111111”这个标题乍看像随手敲出的占位符但如果你把它当作一个完整的项目名称来对待它反而有一种极其鲜明的气质重复、固执、没有解释却又在秩序里藏着一种反常规的冷静。我做这个项目的时候就是想追问一件事——当信息被削减到只剩同一个数字时视觉上还能不能撑起一个完整的表达。这个项目最终被定义为一个“极简主义数字设计实验”以十二个连续的“1”为唯一母题完成从视觉海报到交互页面的系列创作。说人话就是我不做任何花哨的图形只用数字“1”的重复、排列、大小、间距、颜色深浅来构建画面和动效。它解决的是一个看似次要但很多设计师都会纠结的问题当素材极致匮乏时如何靠系统化的设计语言而不是堆砌元素来打动用户。适合参考这个项目的人包括对极简设计感兴趣但又苦于“极简之后没东西可画”的设计师也适合想练习用代码做创意的前端初学者。你不一定要懂多深的编程因为整个项目的核心门槛在于“克制”两个字——少即是多而多出来的东西全靠逻辑去补。选择“1”这个数字也不是随手拍的。在所有数字里“1”的几何形态最单纯竖线一条没有曲线、没有圆环做成字体排布时最容易呈现“阵列感”。十二个“1”排成一排宽度和间距可以形成稳定的节奏如果错开排列又能产生类似密码或条形码的抽象感。这种素材本质上不是不够用而是太够用了——问题是你有没有想到用它来搭建整套视觉系统。项目最终落地成了三样东西一组纯文字海报可以用作手机壁纸或社交头图、一个基于浏览器的交互动画页面可以调节“1”的密度和运动速度、以及一份记录设计过程的说明文档。这样从静态到动态、从思路到成品整条链路是完整的任何人照着这个思路也能复刻出自己的版本。2. 核心细节解析与实操要点2.1 为什么“1”能撑起整套设计“1”的形态特征决定了它的潜力。在无衬线字体下“1”就是一根垂直的竖线最多顶部带一个小横杠或一个小弯。这个形态的优势在于当大量“1”并排出现时它们会产生非常清晰的“栅格感”就像百叶窗或者条形码。而这种栅格感天然适合表达时间、进度、次序感、序列感等抽象概念。具体到实操我建议使用等宽字体Monospace因为等宽字体里每个字符的占位宽度完全一致这会让重复的“1”形成绝对均匀的节奏。如果使用等比字体字符间空隙会忽大忽小整个阵列就会显得凌乱。这个细节是第一批尝试中最容易踩的坑——很多人会觉得“1”反正都是竖线用默认字体就行但实际渲染后数字的顶部细节都会破坏重复的纯净感。我选用的字体是Consolas和IBM Plex Mono两者在中英文环境下都能保持很好的等宽效果。如果你做的是网页还可以加上font-variant-numeric: tabular-nums;让数字不管在什么字体下都采用等宽数字格式这是专业排版里很基础但很好用的一个属性。2.2 间距与节奏的控制逻辑十二个“1”如果只是一字排开视觉上会显得单薄。所以我在项目里引入了三种排列模式模式排列方式视觉效果适用场景直线阵列水平等距排列稳定、理性类似于刻度尺海报底部信息条、页脚装饰错位堆叠每行错开半个字符宽度产生编织感接近电路板纹理背景纹理、桌面壁纸大小渐变从大到小依次排列产生空间纵深像一条透视的马路视觉焦点引导、页面主视觉间距方面我测试了0.2em、0.5em、1em字距最终发现0.5em在大多数屏幕尺寸下最平衡。如果间距太紧竖线会连成一片失去“数字”的识别度如果间距太宽又会让整个序列显得散漫缺乏“11……1”作为一个整体词条的凝聚力。这里的逻辑是间距本质上是数字之间的“呼吸感”它决定了观众先看到“一根一根的线”还是“一串完整的数字”。2.3 颜色与质感的选择这个项目在颜色上我做了两手准备一种是极简的纯黑白对比另一种是加了科技感的深蓝底配亮青色。纯黑白版本最符合“1”序列本身的中性气质当做印刷海报时效果尤其好黑色底上排白色“1”整个画面就像一张摩斯密码纸条信息感和神秘感同时在线。深蓝底版本则更多用于屏幕端。背景用#0a0f1f接近深夜蓝主文字用#00d9ff荧光青辅助文字用#5a7a99灰蓝。这三种颜色的亮度层级非常清晰荧光青负责视觉焦点灰蓝负责背景信息深夜蓝作为基底把整个画面沉下来。这里要提醒的是荧光青不适合大面积铺陈文字——它的刺眼程度很高大面积使用容易让人产生视觉疲劳我在测试中实际把荧光青的字号控制在页面视口宽度的10%以下效果最好。3. 实操过程与核心环节实现3.1 静态海报的实现流程先做最基础的纯文字海报。我用的是 HTMLCSS 来做严格来说这也算是一种“准代码”的工作方式好处是比 Figma 更接近后续做动效的环境。核心结构是一个div容器里面放上十二个“1”然后通过 CSS 控制尺寸和排列。以一幅手机壁纸尺寸 1080 × 1920为例我的实现思路是整个页面设置为黑色背景文字居中排列字重选择font-weight: 100极细字重因为细线在黑色背景上会产生一种精致、脆弱的平衡感而粗体“1”会显得像门板过于笨重。关键代码如下只展示核心思路body { margin: 0; height: 100vh; background: #050505; display: flex; justify-content: center; align-items: center; } .sequence { font-family: IBM Plex Mono, Consolas, monospace; font-weight: 100; font-size: 22vw; /* 让12个1刚好占满屏幕宽度 */ letter-spacing: 0.5em; color: #f2f2f2; user-select: none; }这里font-size: 22vw是我反复调出来的经验值。12 个字符加上 11 个空隙每个字符按一个正方形算大约占宽度的12 11*0.5 17.5个em要让整体宽度接近 100vw一个em大约是100 / 17.5 5.715vw但由于字符本身不是满正方形数字1偏窄实际要放大到 20vw 以上才够22vw 是一个在 1080 屏宽下既不溢出又有呼吸感的数值。如果屏幕尺寸差异大你也可以用clamp(120px, 22vw, 300px)来限制极端情况。HTML 部分很简单div classsequence111111111111/div就这行字不加任何多余装饰。当你在浏览器里打开时你会看到十二根白色的细线立在纯黑背景上像一道被切开的光栅。我第一眼看到这个成品的时候心里是很安静的那种震动——原来最简单的排列也有足够的力量感。如果你想要彩色版本只需要把背景和文字颜色换掉再加一层轻微的发光效果.sequence { color: #00d9ff; text-shadow: 0 0 20px rgba(0, 217, 255, 0.6); }这个20px的发光半径会让数字边缘泛出柔光配合深蓝背景很像科幻片里的系统代码或基因序列。但要小心发光效果在浅色背景上几乎无效甚至会显得脏所以这个技巧只在深色背景下使用。3.2 动态交互页面的编码实现静态做完我继续让这些“1”动起来。动态页面的目标是用户可以通过滑块调整“1”的数量从 1 到 24、运动速度从静止到滚动态、以及排列密度影响间距。整个交互逻辑其实不复杂核心是利用 JavaScript 控制 CSS 变量。首先定义一组控制元素div classcontrols label数量 input typerange idcount min1 max24 value12/label label速度 input typerange idspeed min0 max200 value50/label label间距 input typerange idspacing min0.2 max2 step0.1 value0.5/label /div div classstage idstage/divCSS 里把这些变量作为可变的 CSS 自定义属性.stage { --count: 12; --spacing: 0.5em; font-family: IBM Plex Mono, monospace; font-weight: 100; font-size: 18vw; color: #f2f2f2; white-space: nowrap; overflow: hidden; } .stage span { display: inline-block; letter-spacing: var(--spacing); animation: none; }JS 监听滑块变化const stage document.getElementById(stage); const countInput document.getElementById(count); const speedInput document.getElementById(speed); const spacingInput document.getElementById(spacing); function render() { const count parseInt(countInput.value); stage.style.setProperty(--count, count); stage.style.setProperty(--spacing, spacingInput.value em); stage.innerHTML 1.repeat(count); // 控制动画速度 stage.querySelectorAll(span).forEach((el, i) { el.style.animationDuration (speedInput.value / 100) s; }); }这里稍微绕一点的逻辑是动画。我并没有把所有“1”包在一个容器里统一移动而是给每个“1”加上独立的translateX位移看起来像一条代码瀑布在横向流动。单独控制的好处是可以给不同位置的“1”加上不同延迟形成波浪感。给“1”加上位移动画的基础样式keyframes slide { 0% { transform: translateX(0); } 100% { transform: translateX(-100vw); } }然后让每个“1”以循环的方式运动延迟时间根据索引递增就能自然形成“扫描”的效果。实测下来最舒适的延迟差是0.2s太快会眼花太慢则会变成毫无关系的单点移动。如果不想写代码也可以用 CSS 变量在浏览器里“无代码实现”把上述 CSS 写在开发者工具控制台然后直接在页面里改--count等值照样能看到动态效果。我给这个方案取了个名字叫“控制台极简交互”适合想快速验证创意的设计者。3.3 参数选择与计算方法这里详细说明间距和数量之间的关系因为它是整个项目的视觉杠杆。我采用的计算基准是页面视口宽度W单位 px字体大小Fpx字符数量N间距倍数Sem1em 等于 F。忽略字符本身实际宽度假设“1”占满 0.6em那么一串数字的总宽度约为总宽度 ≈ N * 0.6F (N-1) * S * F这个公式看起来复杂但实际使用只需要一个原则让总宽度在0.9W到1.0W之间保证画面有适当的留白。例如当视口宽度为 1440px设置N12、S0.5em时要算出 F 大约是 150px对应的 vw 单位就是150 / 14.4 ≈ 10.4vw因为 100vw 1440px。我把这些参数做成了一张速查表方便直接套用目的NS (em)F (vw)满宽横幅120.59~11密集纹理200.26~8宽松字母81.010~12垂直长幅60.614~16要注意的是表格里的数字是相对合理的起点不是死规则。不同字体对于数字“1”的字宽定义不同比如思源黑体的“1”比 IBM Plex Mono 的“1”要宽一点所以真正落地的时还是要用浏览器的开发者工具微调。调整的方法很简单把浏览器窗口拉到目标尺寸比如常见的 375px 手机宽度然后观察右侧是否出现横向滚动条如果出现了就把vw值降 1 个单位直到刚好适应为止。3.4 从静态到动态的过渡思路静态版本设计好之后动态版本并不是简单加个动画而是要让动态服务于内容语义。我在动态版本里埋了三个层次的叙事第一层是“节律”。数字“1”以固定的间隔滑过屏幕形成类似节拍器的运动。这一层让观众感受到时间的流逝和秩序感。第二层是“变化”。用户拖动数量滑块时从 1 个“1”增加到 24 个“1”画面会经历“孤点-短句-长条-满屏”四种节奏变化。当数字超过 20 个时单个数字的识别度开始降低它们变成纯粹的纹理这个临界点很有意思——它会让你思考内容到底是以“字符”为单位存在还是以“视觉元素”为单位存在。第三层是“控制感”。交互面板本身就作为设计的一部分被整合进页面而不是另开一个设置弹窗。这样做的好处是用户能够直接看到参数变化如何影响视觉形态这比单纯的观赏视频更有参与感。而且整个控制面板的背景也用了等宽字体数字参数实时显示本身就是“1”序列的延展。这种递进式的结构让一个本来只有十二个“1”的页面有了观看的深度。从实际操作角度讲这个过渡也是开发成本最低的——因为核心引擎依然是 CSS 和几行 JS没有引入任何动画库。4. 常见问题与排查技巧实录4.1 为什么我的“1”排列出来不是等宽的这是被问到最多的一个问题。现象是明明代码里用了等宽字体但渲染出来后每个“1”的间距忽宽忽窄尤其在不同操作系统上表现不一致。原因主要有两个。第一你没有真正加载等宽字体。如果你写了font-family: monospace浏览器会调用系统默认的等宽字体而 Windows 下的SimSun宋体虽然是等宽但字形偏细且容易发虚macOS 下的Menlo算是比较标准的但它在网页里默认font-weight偏粗。最好的做法是显式地加载一款你确定能用的 web font比如 Google Fonts 的IBM Plex Mono或者本地安装的Consolas。第二个原因更隐蔽浏览器默认开启了“自动字距调整”font-kerning。对于数字来说字距调整通常不会影响但当“1”带有顶部的小横杠时某些字体可能会让横杠与旁边字符进行上下对齐的微调导致视觉上出现间距差异。解决办法是在 CSS 中加上font-kerning: none;和font-variant-numeric: tabular-nums;这两行能彻底消除自动调整带来的不稳定。4.2 动态页面在手机端卡顿明显我所用的动画方式如果写得不规范在手机端的表现会非常差尤其当数字数量超过 15 个时帧率直线下降。排查思路是这样的第一确认动画属性是否只用了transform和opacity绝对不要用left、top来做位移动画因为它们会触发主线程布局在手机上会卡成PPT。第二给每个“1”单独加动画时如果用document.querySelectorAll(.item).forEach去逐个设置animationDelay也会产生性能压力。更稳妥的方案是把所有“1”放在一个大容器里用一个大容器做transform: translateX动画内部的延迟差则依靠“错位偏移”来模拟而不是真的让每个元素动。模仿波浪效果的简化实现如下.stage { animation: slide 4s linear infinite; }然后给.stage内部的每个“1”加上不同的margin-top在竖向上做错位这样视觉上仍然有“波浪”的层次感但实际动画只有一个元素在运动性能开销非常小。这个方法是在一次真机测试后总结出来的效果和逐元素动画几乎没有肉眼可见的差别。4.3 颜色的对比度不够导致文字隐没纯黑背景配上白色“1”理论上是最高对比但实际看久了会觉得字符边缘发毛尤其是在 OLED 屏幕上白色像素容易“溢出”。溢出的原因是字体在超小字重font-weight: 100下竖线太细而 OLED 的像素不完全贴合导致视觉上像是断线。解决办法有三个按优先级排序把font-weight从 100 提升到 200 或 300让竖线稍微变粗。这个改动最直接而且不会破坏极简感。给文字加上极淡的text-shadow但不要用发光效果否则会糊成一团。用一个与背景同色系的、半透明的阴影来模拟抗锯齿比如text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);。将背景色从纯黑改为带轻微蓝色的深灰例如#060814这比纯黑更容易让白色文字“站稳”。这三种方法在手机上实测下来最有效的是第一种。建议优先调字重只有当字重已经到 300 但依然发虚时再考虑颜色和阴影的微调。4.4 字号在不同屏占比下的大幅度溢出由于我使用了vw单位如果换到超宽屏比如 21:9 的带鱼屏十二个“1”会显得特别巨大甚至超出视口。同时在窄屏如 320px 宽的老设备上“1”又会小到看不清。更健壮的写法是用clamp()font-size: clamp(60px, 15vw, 180px);这个函数的意思很简单“1”的字号永远在 60px 到 180px 之间优先取 15vw。这样一来小屏上至少有 60px 保证识别大屏上也不会膨胀到失去控制。我用这个方案替换了纯vw之后页面在从 320px 到 2560px 宽度的设备上都保持了稳定。4.5 字体闪烁或加载后跳动如果你使用了 web font则首次加载时字体还没下载完成浏览器会用系统字体临时渲染导致页面打开瞬间“1”的样式跳变。严格来说这不算 bug但很影响观感。解决方式比较经典使用font-display: swap;已经被默认采用但它会让临时字体先显示。更好的办法是提前加载字体并把字体文件 base64 内联到 CSS 中。对于只有数字的页面来说字体文件可以裁剪到只包含“1”这一个字形体积可以压缩到几 KB。这样既有极小的加载负担又不会发生跳变。我实际做的时候用的工具是fonttools将 IBM Plex Mono 的1字形单独提取出来生成一个子集字体文件然后直接内联在style里。虽然操作略麻烦但这是让整个页面在任何网络环境下都保持稳定显示的关键一步。5. 从“111111111111”到更远的设计延伸5.1 变换成一维码与信息加密的视觉隐喻十二个“1”如果披上不同的间距和明暗视觉上会非常接近条形码。我做了一组“误读”式设计把“1”序列排列成条码般的图案然后在旁边配上一些乱序的字母和数字制造一种“可扫描、不可解读”的假象。这个方向很适合用在品牌视觉里。比如把公司的成立年份或核心代码转化为二进制再用“1”和“0”组成图案其中“0”用空位代替“1”保留显示。这样既保持了项目的极简语言又能承载具体的语义信息。我在实际操作中推荐用“二进制到竖线图”的自动生成脚本先写一段 Python 脚本把想要的文本编码成二进制序列再输出成 HTMLtext 111111111111 binary .join(format(ord(c), 08b) for c in text) unit span classon1/span if bit 1 else span classoff_/span虽然这个例子只是为了演示但你可以看出来整个项目从“无意义的 1 序列”跃迁到“有编码意义的视觉系统”只隔着一层想象。这种延伸让项目不止于好看还有一种冷冰冰的叙事感。5.2 生成动态音频反馈的可能性视觉设计的下一步往往有人想加上声音。为“1”序列做声音其实很有意思每一个“1”可以对应一个极短的“滴”声当它滑过屏幕中心时触发。这样静态序列就变成了一台视觉与听觉双重节拍器。在 Web 端用的是Web Audio API每个“1”通过屏幕中心时用OscillatorNode生成一个短促的高频音比如 800Hz 的正弦波时长 0.05 秒。需要注意的地方是音频反馈不能太频繁否则会变成噪音因此需要设置一个最低触发间隔比如 200 毫秒。也就是说当数量超过 10 个时动画速度会自动被限制在一个合理的范围内避免音效连续轰炸。我尝试放在这个项目里的效果是一种很微弱的、类似于秒针快速转动的声音非常冷静配合视觉上的光栅移动整体体验很沉浸。如果你想让项目更完整这个声音模块可以作为扩展方向并不难实现。5.3 衍生印刷品创作玩法除了屏幕端我把“111111111111”也做成了实体印刷品。最省事的方法是直接用热转印工艺把数字阵列印在深色帆布包或 T 恤上。这里有一个小技巧因为印刷时细线条容易断线所以在印刷尺寸下最好把字重从 100 调到 300并且建议把数字宽度放大到至少 3cm 以上。如果是丝网印刷还可以让“1”的线条有一定的延展做成类似波形图的效果。如果你没有印刷设备也可以用最容易的方式体验在 Procreate 或 Photoshop 里输入“111111111111”选择等宽字体利用图层样式添加一个斜面和浮雕效果会让数字拥有立体深度像是一排微小的立柱。这不算复杂但很适合做社交媒体的头图或头像。5.4 适合自家博客或网站页脚的可用模式最后分享一个我认为最实用、最容易落地的延伸把“111111111111”当作网站页脚的装饰序列。在页面底部放一行极细的“1”序列既不像普通装饰线那样呆板又比留白多了一点内容。它几乎可以适配任何风格的网站——无论是开发者博客、设计作品集还是极简风的电商页面这一行“1”都会像是一个低调的签名。实现直接在页脚的footer中加入footer div aria-hiddentrue classfooter-sequence111111111111/div p© 2025 Your Name/p /footer并且把aria-hiddentrue加上因为这一行“1”对屏幕阅读器没有语义纯粹是装饰。CSS 设置成颜色比正文浅两级比如#555字号为正文的一半让它在视觉上不抢占注意力。我曾在一个个人博客上加入这行装饰页面底部多了一种“未完待续”的情趣很多访客在评论区问这是不是某种加密信息——这种暧昧的反馈本身就是项目最好的注脚。6. 实操体验与个人体会这个项目做下来我最大的收获是重新理解了“素材匮乏”这件事。原本“111111111111”是一个极其空洞的输入但当你把它当作唯一不允许修改的约束时创作反而有了明确的方向。设计领域常说“限制产生美”这次我是真真切切体验到了。如果有朋友想复刻类似项目我会建议不要急于“加东西”而是先把“111111111111”在纸上写一百遍观察它在不同字距、不同粗细、不同背景下的性格变化。你可能会发现当字重为 100、间距为 0.5em 时它是一排轻盈的栅栏当字重为 400、间距为 0 时它又变成了一堵密不透风的墙。同一条序列几乎可以表达完全对立的情绪这就够了。根据我个人经验这类实验项目最大的价值其实在过程本身它逼着你放弃依赖素材堆积转而打磨每一毫米的间距和每一帧运动的细节。做完之后你再看任何界面设计都会对“空白”和“重复”这两个元素有全新的感觉。如果这个思路也点燃了你的好奇心建议直接从静态海报开始先不要碰动画——当你能在一张纯黑海报里找到让自己满意的秩序时再让这些“1”流动起来会是完全不同的另一种快乐。