把登录页质感做成可调参数：ASCII/Dither效果拆解

设计师枯白啃设计的新栏目《999个小技巧，让你Vibe的产品更有质感》更新到003期。这次是Dither与ASCII参数化效果，用在登录页、卡片这类界面。

两种效果的逻辑不同。ASCII把画面切成网格，每格按亮度换一个字符，从“.”到“@”越来越密。字号控制大小，间距控制网格疏密，采样强度控制明暗对比，取样区域决定字画暗部还是亮部。Dither把画面切成像素块，用4×4的Bayer矩阵当阈值，把每个颜色压成几级。像素块控制大小，间距控制纹理尺度，采样强度越高，颜色级数越少，颗粒感越重。

遮罩是这套效果的关键。两种效果都可以加一层垂直渐变遮罩，让画面退后，效果更像纹理而不是噪点。直接套滤镜很容易显得像屏幕噪点。

作者给的推荐参数：ASCII用遮罩90、取样暗部、采样强度100、大小37、间距0；Dither用遮罩88、采样强度100、大小15、间距0。

Prompt的亮点：让AI生成一套可实时控制的参数系统，不是渲染一张静态图。指定项目中的图片或视频，旁边放一个控制面板，包含遮罩、滤镜切换、调色板、采样色调、采样强度、大小、间距。每个滤镜的参数独立保存，切换时恢复自己的设置，支持重置为推荐值。视频播放时逐帧重绘，拖滑块实时生效。

几个实现细节：采样时把画面cover-fit到约480px的小画布，每帧取约12000个均匀分布的点，用低/高分位做对比度映射；ASCII字符集从空格到@渐变，等宽字体；Dither用4×4 Bayer矩阵，量化级数从8级压到2级；遮罩在浅色页面用白色、深色页面用黑色，透明度不同。

视频演示了一个登录页：橙蓝渐变背景，左上角绿色方块组成的抽象图案，右侧登录表单，底部控制面板实时调整各种参数。

有网友问视频用什么做的，作者回复：Opus 5.5 口述直出。整套页面是让AI直接生成的代码，不是剪辑软件。

001到003期都在枯白啃设计的主页。这个系列的核心思路：质感不靠碰运气，把每个变量做成可调参数，AI就能生成可控的结果。