据说,用户只需要0.2秒就可以决定是否阅读博客或SNS feed上的文章。無論你寫出多麼高品質的文字,如果引人注目的圖像不能引起人們的注意,那麼文章的存在就會被忽視。
我們將以圖表的形式解釋配色方案和佈局的設計原則,這些原則將極大地提高點擊率 (CTR),這些原則是從數百個縮圖 A/B 測試中獲得的數據得出的。
“Z 定律”和控制視線的字母位置
人眼以「Z」軌跡從螢幕左上方移動到右上方、左下方和右下方。以下是在智能手机的窄屏幕上即时传达消息的基本布局规则。
- 將主要副本放在左上角:將吸引讀者註意力的最大鉤子(問號或數字)放在左上角,即眼睛首先到達的地方。
- 最大字符数为13至15个字符:缩小到一眼就能读懂的字符数,并将其分成2至3行以增加对比度。只要將助詞(~no,~wa)變小,將關鍵字名詞放大兩倍,可讀性就可以大幅提升。
- 在右下放置「視覺錨點」:透過在右側放置人物臉部表情照片或具有三維效果的圖示插圖,穩定整個螢幕的重心。
採用「互補色對比」的設計,不會被淹沒在您的智慧型手機螢幕中
背景和文字之間對比度不足的引人注目的內容將與來源上的背景完美融合。
- 確保亮度差達到或超過60%的對比度:作為基本規則,淺色背景上使用深色文本,深色背景上使用白色文本,並且有效地佈置位於色輪另一側的“互補色(例如,黃色或橙色作為藍色背景上的強調色)”。
- 使用墊子 (obi) 和陰影:將文字放置在照片或複雜背景圖像上時,請務必放置半透明的黑帶(墊子)或使用邊框或陰影,使文字的輪廓清晰獨立。
要避免的不良設計的典型例子
「空白太多,字體太小,無法在智慧型手機上閱讀」和「我太注重時尚,使用細 Mincho 字體」是常見錯誤。引人注目的不是藝術品,而是「鼓勵人們點擊的招牌」。請務必檢查智慧型手機上的縮小預覽,以確保您有足夠的力量停止拇指。

