「爱范儿」为何越来越没范儿
这里是工作狂的聚集地 | ||||
职场 | 学术 | 新媒体 | 设计 | 极客 |
我们只批评，
我们认可的品牌。
今天特意换回被永久禁封的原号「JZ多媒体解决方案」的排版，因为我知道「爱范儿」的 BOSS 其实喜欢原来的。▼
首先感谢 Wilson 的这段有失风范的评价。但既然分享了这篇文章，至少说明大家都是追求美感的人。
如果你想看图中提及的“丑爆”的文章，可以点击这里。
「爱范儿」是一个我个人非常喜欢的账号，同学们也知道我在很多大学的社会营销学课程中极力推荐过，因此我对它的苛求可能更多一些。内容质量一直很好，没得多说；既然 BOSS 公开呛 JZ 的新排版，那么就调皮地回复一下。当然，我这个脾气不擅长人身攻击，还是只能从代码和数据上做一些分析和对「爱范儿」的诚恳建议。
「爱范儿」的长期读者肯定知道它的排版发生过重大变动，但你可能不知道的是——其原因不是为了更优美，而是为了更快捷——爱范儿开发了一套自己的快捷图文编辑程序（不要问我上那里可以用，那是 Wilson 他们自用的）。只要把写好的文档丢进去，几十秒就排版结束。
理由很简单，作为一个拥有一天三条群发权限的小特权号，为了保证紧跟科技圈最新动态，从出稿到发文容不得半点拖延。
于是，它丑掉了。当然不是说“丑爆了”，我也不会说爱范儿 BOSS 审美有问题，就像我也并未妄议说徐沪生审美有问题一样。职业设计师之间，是很忌讳妄评他人审美的。
而其实本文的主题是：技艺高于技术，不要丢掉技术实现的初衷。
我最喜欢的「爱范儿」的排版 CSS 规范是这样的▼
段落被封装入 section 中，边距参数如下▼
margin: 18px 28px;这一设计是非常巧妙的。因为16号字正文一直以来被认为是「人民日报」级排版，拥挤而肿胀。但通过上下和两侧外边距使得画面一下子松散开来（18和28的上下与左右边距像素不知道选择的原因，可能比较吉利）。
更重要的是，曾经的「爱范儿」有行高控制▼
line-height: 1.5;很棒！这样一来进一步打开了整个画面的视野。最后在加上一个 CSS 的两端对齐▼
text-align: justify;完美。
而关于文字的 CSS style 本身，早期「爱范儿」使用的是▼
color: rgb(96, 96, 96)一种灰色字体，和 JZ 原先使用的一致（回复“排版”你会读到为什么白底上灰色字的阅读体验更好）；而黑色字则是「爱范儿」的高亮，也和我们一致。
对，这就是范儿，一种精致的优雅。看似潇洒的呈现背后是精确的品控。
后来听说「爱范儿」加紧融资开拓，推文内容越来越丰富，人手、时间都成了问题。所以既然有些技术优势，不如开发一个省时省力的排版器吧！所以现在爱范儿的排版变成这样▼
孰优孰劣，我想都不用多言读者自然看得出。我说 Wilson 啊，科技是一种精致的艺术，你看看你现在这乱得▼
▲我们选择了最近一期推送，在 PhotoShop 中拉取两条参考线。发现在这个截屏中，不同段落尽管各自有“两端对齐的感觉”，但是对齐的第二 margin 值居然层次不齐。不知道是不是排版器在 margin 执行时候出了参数问题。而且这个问题反复出现，下面这个截图肉眼就能识别到▼
当然上图令人每次都看着很揪心的是分隔符，我们取出了原图像▼
是不是觉得非常得不清楚？是的，因为该图像大小为1.15KB，dpi （每英寸显色点）居然选择了 72▼
dpi 在行业内，作为平面设计的常识：偏大视觉体才可选用 72 dpi，连印刷的海报一般都用到起码 150 噢！但是这组分隔符这么小，72 的 dpi 显然是不足的。一个更无法辩驳的原因如下，让我们来看一下手机屏幕本身的 dpi （数据来自老牌安卓市场品牌机锋评测）▼
于是乎「爱范儿」编辑器的开发者在国产机都达到 130+ dpi 的现代科技社会，强行用 72 dpi 做了三个点——我说 Wilson 啊，你被外包开发团队耍了你知不知道啊？
但是我仍然相信， Wilson 的审美，hmmmmmmm，没毛病！
● ● ●
JZ 其实比较喜欢用圆形符号做分隔符，打起来快又清楚，我也建议大家用。当然「爱范儿」当初开发这个编辑器的时候，外包团队可能说了——啊我们给你们开发一个分隔符样式，报价加 3000 块钱——那就没什么可说了，一个愿打一个愿挨。
审美有问题的，可能是外包技术公司。但 Wilson 我给你的建议，是技艺要先于技术。虽然这句话说出来，很不像 JZ 的风格，因为我们是圈内出了名的技术偏执。但是我认为，艺术高于科技，哲学高于艺术。
开发这个排版器的初衷，是让「爱范儿」更高效地发文。
但是，你们的“范儿”确定还在吗？
另外，忘记告诉 Wilson，你在行业内看到过很多大号的精美排版，其实都是我们 JZ 外包定制的整套代码级VI。在下次开口前，记得冷静冷静，或者和我们一样，用最理智的计算机语言或程序，解释我们的观点。千万不要被现在国内的科技大佬普遍的爆脾气带跑偏了呐！
「爱范儿」的成功有目共睹，所以你的骄傲可以有，但抖机灵使不得。相比之下，我更喜欢「极客公园」那群人，码农天生就是温和而萌萌哒存在！
BTW，这个粗糙的排版器，建议让外包方在好好做一下。也希望 Wilson 本人言论能更有风范，品牌也能重现当年的视觉体验。大不了多雇几个排版编辑，起码聘回当年的编辑。融资过后不差钱，千万不要对人才吝啬。
新媒体品牌在变现路上，总会有一些迷茫。可能是徐沪生那样在艺术的初心上彷徨，有可能是 Wilson 在技术层面上的趔趄。更多关于如何平衡好营销和品质的问题，欢迎8月7日来武汉现场与 JZ 探讨（点击查看大图）▼
● ● ●
另外澄清一件事情，之前关于「一条」的推文，聂凡鼎先生有了一些误解，当然也主要是我的表述可能存在问题。「24 HOURS」是我个人认为无瑕疵的品牌，我觉得是当下非常值得 VI 参照的品牌。
至于喜欢到什么程度呢？我曾经给「24 HOURS」发过兼职旅游作者的简历（因为我个人出差比较频繁），甚至投稿过一段代码。那时候发现他们家顶部的那个旋转的时钟精度不太够，所有徒手写了一段代码矢量动态图投稿给他们。
当然后来「24 HOURS」提高了这个顶部时钟的 GIF 精度，所以也就没有用上。读者有兴趣可以琢磨下这个动效的执行代码。JZ 作为微信官方 HTML5 下 SVG AttributeName 白名单的委托制定机构，会通过另外一个矩阵号「JZMidi」日常做一些好玩的代码推送。
<p style="text-align: center;">
<svg width="324px" height="90.476px" style="box-sizing: border-box;">
<circle fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" cx="162" cy="45.238" r="38.095" style="box-sizing: border-box;"></circle>
<polygon points="158.365,15 162,10.248 165.635,15 " transform="rotate(152.583 162 45.238)" style="box-sizing: border-box;">
<animatetransform attributename="transform" type="rotate" values="0 162 45.238;360 162 45.238" dur="8s" repeatcount="indefinite" style="box-sizing: border-box;"></animatetransform>
</polygon>
<circle fill="none" stroke="#000000" cx="162" cy="45.238" r="10.842" style="box-sizing: border-box;"></circle>
<g style="box-sizing: border-box;">
<path d="M159.849,43.13c0,0.719-0.289,1.381-0.868,1.984l-1.764,1.685c-0.32,0.332-0.547,0.7-0.681,1.104
c-0.134,0.404-0.201,0.844-0.201,1.32h3.45v0.681h-4.142c-0.005-0.116-0.008-0.209-0.011-0.278
c-0.002-0.069-0.003-0.134-0.003-0.195c0-0.542,0.076-1.056,0.229-1.54c0.153-0.484,0.384-0.926,0.695-1.324l1.743-1.735
c0.329-0.299,0.575-0.591,0.737-0.875c0.162-0.285,0.246-0.561,0.25-0.826c0-0.254-0.032-0.493-0.095-0.714
s-0.16-0.412-0.289-0.573c-0.13-0.161-0.291-0.288-0.483-0.382s-0.419-0.141-0.677-0.141c-0.381,0-0.714,0.083-0.999,0.249
s-0.533,0.429-0.745,0.789l-0.438-0.357c0.118-0.216,0.258-0.407,0.42-0.573c0.163-0.166,0.339-0.307,0.529-0.423
s0.39-0.205,0.6-0.266s0.42-0.091,0.632-0.091c0.31,0,0.595,0.06,0.854,0.178c0.259,0.119,0.481,0.287,0.667,0.502
c0.186,0.216,0.331,0.476,0.434,0.78S159.849,42.753,159.849,43.13z" style="box-sizing: border-box;"></path>
<path d="M167.744,47.114h-1.369v2.789h-0.564v-2.789h-3.331v-0.764l3.091-5.537h0.804v5.636h1.369V47.114z M165.811,46.45v-4.939
l-2.759,4.939H165.811z" style="box-sizing: border-box;">
<path style="box-sizing: border-box;"></path>
</path>
</g>
</svg></p>中间的 24 直接被我转曲了，所以 path 部分都切换了贝塞尔曲线。
其他你会感兴趣的内容
回复 新媒体看更多圈内的重要资讯
回复 H 5了解社会化营销利器玩法
回复 广告开启更多脑洞级创意广告
H5、平面、视频、多媒体定制请致电
TEL：（021）3721 8818