颗粒感与磨砂表面的设计研究
World Map的彩色Hero试作遭到用户否定:灰度稿的完成感丢失,颗粒也没有成为清楚的观看经验。下一稿以正常显示尺寸下可辨的灰度团簇、浅起伏与柔和受光为目标,先明确颗粒语言,再比较颜色如何参与。这是当前项目的设计约束;颗粒、磨砂和高级感在其他项目中仍需按任务判断。
彩色稿的失败记录
内置image_gen工具以灰度背景为编辑目标,要求保留开口和构图,将外层改为蓝色、内侧改为黄绿,并加入细颗粒及边缘细纹。主轮廓近似延续,颜色、明暗、肌理与文字前景共同改变。本轮并非只改色相的单变量对照。
用户反馈原话:“一下就丢失高级感了”“其实我没有感受到颗粒感”,并提出接近磨砂的灰度大颗粒方向。该稿保留为失败参照,灰度稿继续作为空间基线。

本项目的诊断假设:蓝色由局部图形扩大为整片高彩度场域,黄绿由内侧色带扩大为较亮的开口;它们改变了原稿的注意分配。较细密的纹理虽然存在,却没有形成用户期待的可感颗粒。下一轮分别调整面积、明暗和彩度,判断各自贡献;用户的否定并不证明高彩度在所有设计中都无效。
四种宽度、短长标题共八种布局没有溢出和文字越界;背景加载正常。背景像素的粗略对比检查仍发现1440像素宽的小字签名、736像素宽的长标题存在不足区域。该检查只按文字范围采样背景,未使用实际字形轮廓。布局能容纳内容与视觉方向获得认可,是两件需要分别检验的事。
原始背景为hero-color-background.png,完整内置生图提示词与屏幕检查保留输入与结果。旧版中的“很细的颗粒”改为后续需要用输出尺寸检验的具体条件。
研究支持了哪些区分
颗粒的尺度与起伏强度需要分别控制
Ware与Knight的纹理显示研究将方向、尺度和对比作为重要设计维度,并指出纹理可见性随空间频率而变。文中的像素例子依赖其显示密度和观看距离,不能直接变成今天所有屏幕的统一阈值。原论文
Padilla等人的研究使用合成高度场,同时改变频谱衰减与高度幅度,让观察者在动态受光条件下匹配粗糙程度。两项参数都影响判断。它支持将组织尺度和起伏幅度分开测试;它没有给出适用于静态Hero的唯一颗粒尺寸。2008年原论文
本项目的操作:先固定输出宽度,比较细密与成团的灰度组织;再保持团簇尺度,比较明暗起伏。原图中的细节是否存在、正常尺寸下是否可辨、观看者是否将它理解为磨砂,分别记录。
可见明暗组织可以形成颗粒感的依据
2019年的特殊效果涂层研究在漫射照明下观察颗粒感,使用无彩色样本控制颜色贡献;研究讨论不规则亮暗区域及样本明度对判断的影响。这为灰度颗粒对照提供了直接参考,研究对象仍是特定涂层。原论文
本项目的操作:下一稿颗粒优先改变亮暗,避免各颗粒独立偏红、偏绿、偏蓝。若加入颜色,让大色域、内侧和强调位置承担色彩职责。彩色材料也能有可见颗粒;这里选择无彩色对照,是为了先辨清我们需要的颗粒线索。
磨砂的经验还包含表面如何响应光
Ho等人的联合测量实验发现,光泽与表面起伏的知觉会相互影响。这支持将颗粒组织与反光分布一起检查,不能把高光、颗粒和深度各自任意叠加。2008年原论文
Frayret等人的磨砂玻璃研究摘要将该效果与表面微观晶体结构及光散射联系起来。这解释实际磨砂的一类光学依据;屏幕上的较大灰度团簇是视觉表现选择,不等于把真实微结构按物理尺度复制出来。论文摘要
本项目的操作:以较宽缓的亮暗、可辨但浅的局部起伏和柔和反光建立候选。用户提出的“接近磨砂”作为感知目标,尚不要求把Hero设计成真实磨砂玻璃。加大颗粒之后仍要防止它变成石块、坑洞或规则点阵的联想。
三块灰度对照
使用原创程序生成三块表面示意。前两块使用同一噪声规则,将采样间隔从1个CSS像素改为4个CSS像素。第三块使用第二块的同一场作为高度场,以坡度计算简化局部侧光。第三块的亮暗分布随模型改变,不是把前一块原样照亮的物理模拟。

三块均不引入色相变化,并将平均灰度与8位编码值标准差对齐;浅色外观约为184和17,深色外观约为135和17。这些是图像参数,并非物理亮度或心理等强度。1px与4px是生成的采样间隔,也不是所有颗粒的准确直径。
736与320像素宽、浅深两种外观共四种状态检查通过:没有横向溢出、标签越界或脚本错误,像素保持无彩色,三块的编码值均值和标准差一致到本轮检查精度。查看截图后可以定位大小与受光造成的可见差异;是否贴近用户期待的磨砂,还需要观看反馈。对照不复现上述实验,也没有模拟光散射与完整阴影。
对照源代码保存噪声规则、采样间隔与简化局部受光模型;对照检查保存四种显示状态。
补进武器库的操作候选
适用条件:纹理在放大图中存在,却在实际应用中失效;或加入细节后,材料感与既定调性不一致。
- 钉住观看条件。 写出实际展示宽度、裁切、查看方式。先在正常尺寸下判断,放大检查用于解释细节。
- 定义能指认的表面线索。 写清团簇大小、边缘软硬、亮暗起伏、方向和密度,替代单独的“细腻”“高级”“磨砂”指令。
- 分离颜色与颗粒。 先用无彩色组织测试尺度,再测试对比与局部受光;颜色进入下一轮对照。
- 检查生成关系。 团簇作为颜色斑驳、浅凹凸或反光差异,会得到不同表面经验。明确选用哪条路径。
- 返回应用。 Hero正常尺寸下可读;章节保留归属关系;正文减少干扰。各应用保留所需线索,强度按任务分配。
沿原灰度空间稿继续的应用试作见下节。色彩仍保留大面积中性底、轻微色偏和局部颜色三种竞争配置,在表面候选得到观看反馈后继续比较。
灰度磨砂的Hero与应用试作
2026-10-12,使用内置image_gen编辑灰度空间背景。要求延续主构图、开口、厚度与柔和侧光,将表面改为较易辨认的无彩色团簇及浅起伏;内侧相对安静,保留深度。提示词以1536像素宽原图中的6至10像素团簇描述尺度目标,该数值是生成要求,未作为成图每个颗粒的实测直径。

将背景放回真实文字后,可以看见比空间基线更明显的灰度斑驳,开口、侧面和内侧阴影仍然可读。这是本轮的视觉观察;是否达到用户期待的磨砂与完成感,继续由观看反馈判断。成图没有被定义为某种真实物料,也没有加入颜色变量。
表面与文字的联合修正
最初叠字时,较暗颗粒压低了说明和导航小字的局部对比。将这几类文字从灰色加深为近黑色,以字号、间距和位置维持层级。长标题另用较小的字号配置,让它留在开口左侧的阅读区域。图像没有烘焙文字,样稿保留可编辑排版。
1440、736、390、320像素宽分别检查短标题和长标题,共八种状态:背景加载正常,没有横向溢出、文字越界、标题折行、行动入口与底部导航重叠或页面脚本错误。按文字范围采样背景的对比初筛,在修正后没有低于本轮设定阈值的区域;它没有测量实际字形轮廓与抗锯齿,也不替代阅读测试。另查看宽屏、窄屏及长标题截图。

按应用改变强度
章节封面使用同一背景的不同裁切,共用名称排字、开口及明暗关系。较小尺寸下,颗粒更多参与总体质地;章节不要求每个团簇与Hero一样醒目。本轮验证同一资产的裁切与组合,尚未生成新的曲面家族。
正文开篇取消整片肌理,保留稳定排字与分隔线中的间隔,让“开口”进入更安静的阅读模式。这是按任务调整表现强度的候选。

这一阶段新增的操作经验是:让可辨的颗粒进入实际画幅之后,重新安排小字对比和长标题空间,再检查哪些应用需要完整表面、哪些只保留关系。放大图的细节、正常尺寸的感知和应用中的阅读分别检查。
可编辑应用样稿内嵌原始背景;背景原图、完整内置生图提示词与八种屏幕状态检查保留本轮结果。空间基线、被否定的彩色稿和三块参数对照继续保存。
当前设计状态
用户随后肯定当前观感,但指出图像缺少入口,需要读设计故事才能理解“欢迎继续走进去”。下一轮进入入口与视觉引导:保留灰度磨砂作为表面目标,调整宏观几何和前后关系。
空间稿已有基础;彩色与细纹稿被否定;灰度磨砂候选已经进入Hero、章节和正文的联合样稿。结束当前验证作业的条件是:Hero的形体、表面、色彩与文字共同支持所选体验;常用尺寸可读;章节与正文有协调的强弱模式;基本使用规则能说明如何延伸。作品赏析、布局检查和用户认可各自保留依据。