据说,用户只需要0.2秒就可以决定是否阅读博客或SNS feed上的文章。无论你写出多么高质量的文字,如果引人注目的图像不能引起人们的注意,那么文章的存在就会被忽视。
我们将以图表的形式解释配色方案和布局的设计原则,这些原则将极大地提高点击率 (CTR),这些原则是从数百个缩略图 A/B 测试中获得的数据得出的。
“Z 定律”和控制视线的字母位置
人眼以“Z”轨迹从屏幕左上方移动到右上方、左下方和右下方。以下是在智能手机的窄屏幕上即时传达消息的基本布局规则。
- 将主要副本放在左上角:将吸引读者注意力的最大钩子(问号或数字)放在左上角,即眼睛首先到达的地方。
- 最大字符数为13至15个字符:缩小到一眼就能读懂的字符数,并将其分成2至3行以增加对比度。只需将助词(~no,~wa)变小,将关键字名词放大两倍,可读性就可以大大提高。
- 在右下放置“视觉锚点”:通过在右侧放置人物面部表情照片或具有三维效果的图标插图,稳定整个屏幕的重心。
采用“互补色对比”的设计,不会被淹没在您的智能手机屏幕中
背景和文本之间对比度不足的引人注目的内容将与源上的背景完美融合。
- 确保亮度差达到或超过60%的对比度:作为基本规则,浅色背景上使用深色文本,深色背景上使用白色文本,并且有效地布置位于色轮另一侧的“互补色(例如,黄色或橙色作为蓝色背景上的强调色)”。
- 使用垫子 (obi) 和阴影:将文本放置在照片或复杂背景图像上时,请务必放置半透明的黑带(垫子)或使用边框或阴影,使文本的轮廓清晰独立。
要避免的不良设计的典型例子
“空白太多,字体太小,无法在智能手机上阅读”和“我太注重时尚,使用细 Mincho 字体”是常见错误。引人注目的不是艺术品,而是“鼓励人们点击的招牌”。请务必检查智能手机上的缩小预览,以确保您有足够的力量停止拇指。

