深夜「不」发媸
这里是工作狂的聚集地 | ||||
职场 | 学术 | 新媒体 | 设计 | 极客 |
你来晚了。
「深夜发媸」的声名鹊起，得益于它曾是微信圈一股难得的“污流”，甚至早些时候我一直认为她和 Harace 的「蝉创意」以及「公路商店」属于同类，是午夜床头我们共同孤独但放荡的灵魂。不过现在，“你来晚了”。打开这个公众号，它的介绍是——一个不装逼的时尚号，我们也许更应该把她和「黎贝卡的异想世界」以及「石榴婆报告」归为同类。
而在以前，她的账号介绍只有四个字——“你来晚了”。
这样的改变我有三个猜想▼
1.以往的标题往往逼近微信的底线，但现在一个团队都要靠这个品牌吃饭，不值得冒险。
2.徐妍从当年的大学生蜕变步入社会，目光和自然会向时尚看齐。
3.“黄段子”的变现能力着实有限，潜在广告主的范围会收窄，必须打开大众话题为生存而战。
于是，我们看到了一个深夜「不再」肆意发媸的深夜发媸。
● ● ●
当然，我觉得时尚的主题也非常棒。不过相信肯定会有很多读者和我一样，有些怀念以前的黄暴文字和非常独特的留白排版。更多 JZ 和「深夜发媸」的共同读者，肯定还知道 JZ 曾邀请徐妍参加过「JZ Talk Show」节目和我共同聊过排版。那么今天不妨教大家，如何像「深夜发媸」以前一样排版：1.留白设计 2.标题图用美图秀秀速成 3.快速找白底文艺范儿图片。
（如果你想听当时言十和徐妍一个半小时的聊天录音，可以回复“深夜”听听看。开头就有徐老师勾魂的笑声）
声明：我并不排斥「深夜发媸」如今的版式——尤其 JavaScript 推送封装的缩略图，已经注意到 imgUrl 的自动剪切问题，既照顾到订阅者的打开感受，也将关键字充分在朋友圈中呈现。字体目测是汉仪的某一款，可惜没能通过图像识别分辨到（如果有认出来的设计师读者可以留言，也可以回复“老司机”了解字体识别的一些方法）。
言归正传，我们今天挑选的是 2015-05-14 的《你以为我刀枪不入，我以为你百毒不侵》下文是原文的一个局部的粘贴。
前三名的高票答案分别是
▼
老！子！不！愿！将！就！
要不是因为长得丑！
谁特么要当单身狗？
自己明明没对象！
偏被别人以为有！
其实，除了以上这三点
从小伙伴们的回复来看
单身汪的成因千姿百态
▼
男女比例三比七
四个里面三个基
素哥
身在师范
已经两年没见过正常男人
禄燕妮
连男人都遇不见
怎么遇见男朋友
特大粒子
再也不能做你的港湾
也没兴趣做别人的船
你的名字显示不出来
斯人若彩虹
遇上方知有
寒月
已经开过了法拉利
哪还能接受小夏利
Ellen
身上还有他的纹身
怎么能好好睡别人
人参__果
人间有风情万种
我依然情有独钟
萌萌萌
又不是和他
谈恋爱干嘛
M
因为被他喜欢过
很难再觉得
别人有那么喜欢我
欧可嘉
我为什么还不恋爱
因为还在等你回来
端木樱柠
我非你不嫁
你非她不娶
Ms.y
女铁汉，不用伴
吴淑怡
呵呵，周围妹子都找我拧饮料瓶
白小蜗
除了单手能拧矿泉水瓶
我还能接电线
因为双手能换我司桶装矿泉水我是妹子
一棵刘梦娜
我可以一口气提四瓶水从一楼到六楼
又到了必须改名叫过儿的时候
我会设置无线路由器
Morgana
● ● ●
好了，样例就先到这边。
不得不说，这种大面积留白阅读在当时是独树一帜的。我们曾在很多企业内训中谈过「深夜发媸」这种留白小字设计的视觉原理。
在以前，大多数公众号为了方便读者快速定位关键图像和文字信息，会选择大字大图排布；为了保证更少翻页，同时将大量块面信息堆叠——这都是合情合理的，因为移动阅读的翻页其实具有交互性，视觉识别满足交互设计中最基本的 Fitts’ Law 费茨定律 T = a + b log2(D/W+1)。这个以 2 为底的指数函数告诉我们用户到达目标的交互距离要短，交互目标要大——这样的感受其实就在大多数小编的潜意识里。
那么「深夜发媸」违反交互设计定律了吗？乍一看她的排版浅交互更多（翻页行为），但是视觉同样很容易聚焦到信息点——因为在设计学中，“留白”设计的“白”，也是整个视觉区块的一部分——所以它的实际视觉目标非常大，目标之间几乎是没有间距的。
所以大面积留白，配合14/12号字居中作为信息中心，就是「深夜发媸」旧版设计的第一要义。
● ● ●
徐妍选择了用虚线做不同答题之间的分割，而这条虚线的 CSS 构造方法如下▼
<section style="margin-top: 0.5em; margin-bottom: 0.5em; border-top-style: dashed; border-top-width: 1px; border-color: rgb(240, 166, 203);"></section>由此可见这是一个 section （区段）外边框 border 中的顶边，通过设定宽度使其可见，再通过 dash 使其转化为虚线。
● ● ●
那设计小白怎么快速做出如下这种标题栏呢？
壹︱Tools
下面各位小白来跟我操作，首先，我们今天不需要 *Adobe *Photoshop▼
我们需要的是美图秀秀（桌面版）▼
以及 Windows 画图板▼
贰︱Steps
其实你们一直不知道美图秀秀（桌面版）以及美图秀秀批量处理工具是俩神器，非常适合小白作图。下载完毕后，我们打开界面▼
然后请点击右上角“新建按钮”，大小看着差不多就行▼
然后先做边框。我们找到上方的边框选项卡，点击后进入边框编辑状态。然后在右侧在线素材中直接跳往第5页（如果你打开美图秀秀后，这个边框样式不在第5页请自行翻查下）▼
选择该样式，我们就先把外边框呈现出来了▼
然后我们选择文字工具。工具会调用你本地安装过的字体，方便你快速挑选你自己需要的字体样式，键入你需要的文字内容▼
当然这个字体输入工具只能整体改颜色，所以不同颜色文字你需要单独打好▼
好了我们已经完成一大半了，接下去需要将这个画布扩展开。将这个图片另存为出来，再用画图板从本地打开，并按住右下角画布锚点拖拽来放大画布区域▼
好了我们用选择工具从右下角开始按住，拖到画布左上角超出图像，你就可以选中我们的黑框文字，随后移动到差不多的位置（反正不是 PS，差不多就行了）▼
保存，然后我们重新用美图秀秀打开该图▼
在右侧点开涂鸦笔工具，选择白色。把画笔大小数值提高，随后涂掉顶部框一部分▼
叁︱Last
现在我们需要一个合适的 icon，还是推荐在 easyicon 上直接搜索▼
作为一个全球 icon 分享站点，它支持中文搜索，键入后会自动翻译到英文。比如我这里想找一个嘴唇的 icon 所以可以直接输入“嘴唇”▼
显然我们找到了合适的 icon，点击后选择 .png格式下载下来即可▼
如何用添加添加上去呢？这时候不能把这个 .png 直接往美图秀秀里拖，而是使用上方的“饰品”选项卡，并在左下方点击导入“饰品”。注意饰品类型是“用户自定义”▼
从左侧选中你导入的饰品，拖放到合适位置。可以对饰品的简单参数做调整▼
好了，大功告成！当然为了在微信图文中以合适大小展现，你可以用 Windows 画图板进一步调整▼
以上演示主要是为了让大家了解美图秀秀桌面版的这些快捷操作方式，至于到了你手里，完全可以自创更多有趣的小标题形式。
好设计并不是设计师的专利，掌握一些技巧，你也可以。更多关于新媒体的企业形象设计原理和 VI 延伸性的问题，欢迎8月7日来武汉现场与 JZ 探讨（点击查看大图）▼
本文作者
复旦大学青年智库讲师
浙江传媒学院客座讲师
微信 SVG AttributeName 白名单开发者
共青团上海市委新媒体顾问
团中央青创训练营导师
LinkedIn 赤兔首批官方特邀讲师
● ● ●
至于如何找到文字范儿爆表的白底图片，甚至 GIF 动态图，我们以前写过文章教大家。你可以回复“配图”两个字直接阅读。过程中可能牵涉登录一些国外艺术设计交流网站需要 VPN，你则可以回复“翻墙”了解浏览国外艺术网站的方法。
其他你会感兴趣的内容
回复 新媒体看更多圈内的重要资讯
回复 H 5了解社会化营销利器玩法
回复 广告开启更多脑洞级创意广告
H5、平面、视频、多媒体定制请致电
TEL：（021）3721 8818