每年10月24日前后我的朋友圈都会被一批海报填满。做视觉这行十多年我见过太多节日海报从设计稿发出去最后只收获几十个点赞连发的人自己都不好意思再看第二眼。但今年不一样一组七张的1024节海报从凌晨开始就一层层往上叠做后端的转、做算法的转、连平时只发跑步记录的同事都转了一张。我把这七张挨个存进相册翻来覆去看了三遍越看越确定一件事它们的成功跟设计水平关系不大跟懂不懂程序员关系极大。这篇不聊软件怎么装、代码怎么写聊的是视觉传播这件事在程序员群体里到底怎么成立。七张图我给你拆结构、拆配色、拆信息密度、拆导出参数也拆哪些梗能用、哪些梗一碰就翻车。适合三类人看被临时抓去画1024海报的程序员、想做出能被转发作品的平面设计师、以及负责节日运营却总在纠结要不要放代码雨的内容同学。看完你至少能明白为什么同样是暗色底加一行代码有的图让人想转发有的图让人想划走。1. 从节日祝福到身份认同这七张到底改了什么先说结论这七张的共同点不是好看是像自己人做的。往年绝大多数1024海报的问题出在创作顺序上——先定要做一个科技感海报再往里塞程序员元素最后配一句致敬每一位改变世界的开发者。这个顺序一旦定下来图就注定平庸因为它的出发点是我要祝福你而不是我懂你。1.1 往年海报的三个固定套路以及它们为什么失效我把这几年见过的1024海报归了归类基本跑不出三个套路。第一个是形象套路格子衫、黑框眼镜、头顶稀疏、手边一杯咖啡背景是蓝紫渐变加流动的光线。这类图在五年前还算讨喜现在基本等于自嘲失败——你把一个群体简化成几个刻板符号被简化的人不会觉得幽默只会觉得又是这套。第二个是宏大叙事套路地球、代码雨、连接线、上升的数据曲线配文用代码构建世界。问题是绝大多数程序员每天做的事情是改一个字段类型、等一次构建、追一个只有周五下午才复现的偶发问题。宏大叙事和真实日常之间的落差太大看图的人找不到自己的位置。第三个是技术炫技套路整张图铺满真实代码或者把二进制流做成视觉主体。这类图在同行眼里有个致命问题——代码会被读。你随便贴一段代码上去一定有人去看它写了什么一旦发现是随手复制的示例代码、甚至有语法错误这张图在圈子里的口碑就完了。我见过一张海报上面的代码里for循环少了个右括号评论区比正文热闹。1.2 今年这七张的创作顺序文案先行图做放大器我把这七张放在一起看发现它们的生产逻辑和往年是反的。往年是设计师出图、文案配字今年这组更像是先有一句话再想办法把这句话放大到一屏。具体表现是这七张里有五张的主视觉只服务于一个句子。比如那张纯黑底、只有一行终端输出的整张图的信息量就是一句提交信息比如那张把版本号从v0.1.0一路排到v10.24.0的字号随版本号递增最后一行几乎顶到边缘——它讲的是你这些年一直在迭代但没有一个字说迭代。这种表达方式在传播上有个巨大优势读者不需要被说服他自己就完成了意义填充。这也解释了一个常见困惑为什么有些海报文案写得特别满、特别煽情反而没人转因为煽情是需要读者付出情绪成本的而梗不需要。梗是免费的情绪入口读者笑了转发的手指就已经按下去了。1.3 一张海报的被转发阈值我总结成三条硬指标做得久了我慢慢摸出一个粗糙但好用的判断法。一张节日海报想被程序员主动转发得同时过三关缺一关就沉。判断维度具体标准常见失败表现三秒可读缩略图状态下能看清主体正文不超过两行满屏小字放大才看得清与我有关指向具体场景不是抽象身份致敬开发者这类无主语祝福转出去不掉价不涉及抱怨公司、不涉及真实业务、不显得在卖惨拿线上事故当玩笑第三条最容易被忽略。很多人以为自嘲是安全牌其实自嘲有严格的边界——自嘲自己可以影射组织不行。一张写着我们的系统又挂了的海报转发的人心里会打鼓我转这个领导看了怎么想只要产生这个念头转发就中止了。今年这七张里没有一张碰这条线它们自嘲的对象全是写代码这件事本身——命名困难、需求反复、构建慢、时间不够用。这些都是行业共性不指向任何具体组织所以转起来毫无心理负担。2. 拆开这七张的视觉语法底色、字体与信息密度如果说第1节讲的是说什么这一节讲怎么摆。我一直觉得视觉设计里最难的不是加法是减法——尤其在技术类海报上几乎所有人第一反应都是再加点元素显得专业。这七张恰恰相反它们克制得有点过分但正是这种克制让它们在信息流里跳了出来。2.1 暗色底不是为了装酷是为了给代码留出高光七张里有五张是深色背景。很多人第一反应是技术感就得用深色这个理解太浅了。深色底真正的价值在于建立明暗层级当背景足够暗你放在上面的那一行等宽字就成了唯一的光源读者的视线无处可去只能落在那里。但深色底有个大坑别用纯黑配纯白。#000000底加#FFFFFF字在手机屏上对比度过高边缘会出现轻微的光晕感看起来廉价而且长时间看很累。我一般用接近黑的深灰比如#0E1116、#12151A这一类文字用略灰的白比如#E6E8EB。这套组合在OLED屏上够黑在LCD屏上也不糊。背景色 #0E1116 // 接近黑但不是纯黑 主文字 #E6E8EB // 略灰的白降低刺激 辅助色 #6B7280 // 注释、次要信息 强调色 单一高饱和色全图只用一处强调色这一条我要多说两句。深色底最容易犯的错是多点开花——标题一个青色、副标题一个紫色、装饰线再来个橙色。结果就是读者眼睛乱跳抓不到重点。我的做法是全图只留一个强调色而且只用在最关键的那一处可能是一个光标、一个下划线、一个数字占整张图面积不超过百分之三。剩下的全交给明暗关系。这七张里最典型的就是那张终端体的整张图唯一的高饱和色就是末尾那个闪烁光标的位置其他全是灰阶。2.2 等宽字体的三种正确用法和两种常见误用等宽字体是技术类海报的标配但用对的人不多。我梳理了一下真正成立的用法只有三种。第一种是真代码虽然只是一两行但必须语法正确、逻辑说得通。这里有个原则宁可用一句极其简单的真代码也不要用一段复杂的伪代码。比如一行git commit -m ...任何人都能看懂也不容易出错。第二种是伪代码排版文字内容不是代码但用等宽的栅格排出来制造这是一段输出的错觉。这种用法特别适合把一句普通的话变得有质感因为等宽字体的字面宽度一致天然形成整齐的竖列看起来就像终端窗口。第三种是数字对齐涉及数字、版本号、时间戳的时候等宽字体能保证位数对齐视觉上整齐。那张版本号递增的海报就是典型如果换成比例字体v0.1.0和v10.24.0的宽度差会很别扭整张图的节奏就散了。误用也有两个高频的。一个是正文全用等宽等宽字体为了对齐牺牲了字形的舒适度大面积阅读很累超过三行就该换回常规字体。另一个是中英文混排字重不匹配很多开源等宽字体的中文字重偏细和英文放一起会显得中文虚需要单独调中文的字重或者换一款中文等宽。2.3 信息密度一张图只留一个能被记住的锚点我给自己的规矩是一张传播型海报读者合上手机之后能记住一个东西就够了。这个东西可以是一句话、一个数字、一个图形但不能是三个。这七张里最好的一张整张图只有六个字加一个符号。有人会觉得太浪费版面了但传播逻辑就是这样信息越少记忆点越清晰信息越多什么都留不下。我做过一次小范围测试把同一组海报分别按信息完整版和极简版发到两个规模相近的社群里极简版的截图二次传播率明显更高——原因很简单极简版截图之后依然清晰可读信息完整版截图之后基本糊成一团。具体到比例上我的经验值是主体元素那句最核心的话或者那个图形占画面的视觉重量大概六成留白三成剩下一成放辅助信息。如果辅助信息超过两成这张图就该砍内容了不是缩字号。3. 七个创意原型逐个复盘梗是怎么长成图的这七张的出处我不去点名只拆结构。我把它们归成七个原型你可以直接拿去套自己的场景——原型是可以复用的具体的梗必须自己长这一点后面还会说。3.1 终端输出体把提交信息当成一句独白原型是这样的纯深色底左上角一行极小的路径提示下面是命令加输出整张图看起来就是一张终端截图但内容被换成了一句有情绪的话。这个原型强在形式即语境。读者一看就知道这是开发者每天面对的东西代入成本为零。它弱在门槛不写代码的人完全看不懂所以它天然只适合在垂直圈子里传播。这也恰恰是它能在朋友圈刷屏的原因——圈子内的排他性本身就是一种身份标签转发它的潜台词是我看得懂。做这个原型要注意两点。一是提示符的样式要符合常见习惯别自己发明一套否则会显得外行二是输出内容不要太长终端截图一旦超过十行读者就不看了。理想状态是三到五行最后一行是那句钩子。3.2 版本号体用递增的字号讲时间这个原型的结构特别聪明把v0.1.0到v10.24.0十几个版本号竖排下来字号从很小一路递增到很大颜色从灰逐渐变亮。没有任何一句你成长了但所有人看完都懂。它成立的核心是用排版承载时间。字号递增在视觉上等价于越来越大这是最原始的视觉隐喻不需要解释。而且版本号这个符号在开发者心里有天然的情感重量——它代表着无数个改完又改的夜晚。实操上要注意递增曲线。线性递增会显得平淡我一般用非线性的前几个几乎不变中间开始加速最后两三个跨度很大。这样视觉上有个加速感情绪也跟着往上走。3.3 报错体把异常信息当成诗句这个原型是拿一段报错信息做主体但把报错的具体内容替换成一句自嘲。比如原本是空指针改成未找到名为休息的对象。这类做得好会非常出彩做不好会翻车。翻车的典型是拿真实事故开玩笑。我在第6节会专门讲这条线这里先记一笔报错体只能用每个人都遇到过、但不会造成实际损失的错误类型比如命名困难、拼写错误、环境不一致。涉及数据、涉及线上服务、涉及用户的一律不碰。3.4 硬件特写体一颗磨掉漆的键帽七张里有一张是特写拍的是一颗被磨得发亮的键帽周围虚化配一行短句。这张在信息流里辨识度极高因为其他六张全是平面图形只有它是实物。在一片扁平色块里出现一个真实的、有质感的物体视线会被强行拽过去。这个原型给我的启发是技术类海报不必局限在数字视觉里。键盘、线缆、显示器边框、便签纸、白板笔迹这些实物的质感是纯图形做不出来的。代价是拍摄成本高需要控制光线和景深但也正因为难撞车的概率低。3.5 时间轴体一天的时间戳排成一条线这个原型是把一天之内的若干时间戳竖排下来每个时间戳后面跟一句极短的描述从 09:12 到 23:47。它厉害的地方在于读者会自动补全中间的空白。你只写了七八个时间点但每个人都会想起自己那些没被写出来的时间。这种留白式共鸣比写满要有效得多。排的时候有个技巧时间戳用等宽字体保证对齐描述文字用常规字体视觉上形成左硬右软的对比。另外时间间隔不要均匀均匀就假了要有几个跨度过大的空档那才是真实的节奏。3.6 需求变更体一张图上摞着很多层这个原型是把同一份东西的不同版本层层叠起来视觉上像一摞纸。核心表达是反复但没有一个字提反复。做这个原型要注意叠层的错位必须看起来是无序的。如果错位间距完全一致会显得像精心设计的装饰反而失去了凌乱感这个情绪。我一般手动拖每一层的偏移量和旋转角度都不一样最后再整体检查一遍重心别偏。3.7 数字本体把 1024 这件事本身讲透最后一张回归到 1024 这个数字。1024 2^10这是程序员最熟悉的换算关系。这张的做法是把 2 的幂次排开从 2 一路到 1024最后在 1024 那个位置做视觉强调。这个原型的好处是绝对安全没有任何歧义适合作为一组图的收尾。它的问题是不够有情绪单张发出去很难爆但放在一组里作为定调的那张反而很稳。一组图需要有爆点也需要有底这张就是底。4. 从设计稿到朋友圈尺寸、导出与二次传播的工程细节这一节全是脏活。我见过太多设计稿精美、发出去糊成一片的案例问题几乎全出在导出环节。海报是要在手机上看、被压缩、被二次转发的不做这几步测试前面所有设计都白搭。4.1 一套图要出几个尺寸我列个清单一张图打天下是不行的。我一般会为每组海报出四个尺寸覆盖绝大多数使用场景。用途建议尺寸px比例关键要求信息流单图1080 × 14403:4竖版占屏更大阅读率高方形分享1080 × 10801:1兼容性最好缩略图也清楚长图海报1080 × 19209:16适合故事线信息量可以多横版配图1600 × 90016:9用于文章头图、屏幕展示四个尺寸不是简单缩放。3:4 和 1:1 的构图逻辑完全不一样强行缩放会导致主体被裁。我通常的做法是先做 3:4 的原稿然后重新排 1:1 版本——把主体重新居中删掉两侧的装饰元素必要时把字号调大一档。4.2 微信压缩到底毁掉了什么以及怎么提前规避这是最容易踩的坑。图片经过压缩之后受影响最大的三样东西是渐变色带、细线条、小字。渐变色带在大面积平滑渐变上最容易出现表现为一圈一圈的色阶断层。规避方法有两个一是在渐变上加极轻微的噪点透明度百分之二到三噪点能打散色带二是干脆放弃渐变用纯色块这七张里绝大多数都是纯色我认为这不是审美选择是工程选择。细线条指的是一个像素宽的装饰线、分隔线、边框。压缩之后这些线会时断时续。我的经验是线上的元素宽度不要低于两个像素实在要细就降低透明度做成视觉上的细线而不是物理上的细线。小字是最致命的。设计师在二十七寸显示器上看十二号字很清楚压缩之后在六寸屏上就是一团灰。我定了个硬规矩任何需要在手机上看清的文字字号不低于画面短边的百分之四。1080 宽的图就是不低于 43 像素实际我会放到 48 到 56。4.3 缩略图测试缩到 120 像素再看一眼这是我每次交付前的最后一步也是最有效的一步。把成品导出后缩到短边 120 像素放在手机上看。如果这时候还能一眼看出主体是什么、最核心的那句话能不能辨认这图就过关了。如果缩完只剩一团色块说明主体不够突出回去改构图。顺便说一句色彩空间。导出务必用 sRGB不要用其他色彩空间。不用 sRGB在部分设备上会整体偏色尤其是饱和度高的强调色会变得特别刺眼。这个坑我踩过一批图在本地看很正发出去之后那个青色变成了一种很廉价的荧光色返工重出。5. 落地实操48 小时内攒出一组能打的海报假设你现在接到任务距离 10 月 24 日只剩两天没有设计资源团队里只有你和一个会点 Photoshop 的后端。这种情况下怎么做出能用的东西我把流程拆成可执行的步骤。5.1 第一天上午先攒梗别打开设计软件这一步千万别跳过。直接开软件的结果一定是做成套路图因为软件一打开你的思路就被模板带走了。正确做法是开一个空白文档用一小时把团队里最近半年真实发生过的、大家都还有印象的小事列出来。注意是具体的事不是抽象的辛苦。比如某个字段名改了三次最后改回原名、某次构建跑了四十分钟最后失败了、某个人给变量起名叫 data2。这些才是能用的素材。列完大概会有十几条然后筛。筛选标准就一条这件事说出来不在场的人也能笑一下。如果只有当事人懂那就是内部梗传播半径太小。筛到最后留三条左右够用了。5.2 第一天下午定一个视觉母题全套复用一组图必须有统一感否则摆在一起像拼盘。我通常会定一个母题——一个在所有图里都出现、但形态可以变的元素。可以是左上角的一行路径提示可以是统一的底边对齐线可以是一个始终位于右下角的方块。母题的