Ch3-3 | 资讯层级 | 视觉动线、排版层级
q.怎么透过排版位置分出层级?
a0.依据人的视觉动线原理(白话:人看画面/阅读文字的方向习惯,细节请至结论看)
【范例将同样的封面用不一样的方式排,方便比较】
【我决定的文案重要程度(层级):标题>作者>小字】
【这张设计希望你先看到标题,再看到作者,最后才看到小字】
a1.如果你的标题整体是横的:
我们阅读横书的习惯是从左到右、从上到下(z字型)
所以层级依重要程度:标题在左上、作者在右上、小字在左下
a2.如果你的标题整体是直的:
我们阅读直书的习惯是从右到左、从上到下
所以层级依重要程度:标题在右上、作者在左上、小字在左下
a3.如果你的标题在版面中央:
最重要摆中间,其他资讯看是直书还是横书,概念如上
所以层级依重要程度:标题在中间、作者(直书)在右上、小字在左下
结论:
秉持本书只给乾货的原则
如果大家想了解视觉动线背后的原理
可以参考文章「赶紧收下!连bat设计师都在使用的视觉动线技巧(上)(下)」
<a href=https://reurl.cc/xkk4r7 target=_blank class=linkcontent><a href="<a href="https://reurl.cc/xkk4r7</a>"" target="_blank" class="linkcontent">https://reurl.cc/xkk4r7</a>"</a> target="_blank"><a href="https://reurl.cc/xkk4r7</a></a>" target="_blank" class="linkcontent">https://reurl.cc/xkk4r7</a></a></a>
想了解日常阅读习惯
可以参考维基百科「东亚文字排列方向」
<a href=https://reurl.cc/a8vk3e target=_blank class=linkcontent><a href="<a href="https://reurl.cc/a8vk3e</a>"" target="_blank" class="linkcontent">https://reurl.cc/a8vk3e</a>"</a> target="_blank"><a href="https://reurl.cc/a8vk3e</a></a>" target="_blank" class="linkcontent">https://reurl.cc/a8vk3e</a></a></a>
a0.依据人的视觉动线原理(白话:人看画面/阅读文字的方向习惯,细节请至结论看)
【范例将同样的封面用不一样的方式排,方便比较】
【我决定的文案重要程度(层级):标题>作者>小字】
【这张设计希望你先看到标题,再看到作者,最后才看到小字】
a1.如果你的标题整体是横的:
我们阅读横书的习惯是从左到右、从上到下(z字型)
所以层级依重要程度:标题在左上、作者在右上、小字在左下
a2.如果你的标题整体是直的:
我们阅读直书的习惯是从右到左、从上到下
所以层级依重要程度:标题在右上、作者在左上、小字在左下
a3.如果你的标题在版面中央:
最重要摆中间,其他资讯看是直书还是横书,概念如上
所以层级依重要程度:标题在中间、作者(直书)在右上、小字在左下
结论:
秉持本书只给乾货的原则
如果大家想了解视觉动线背后的原理
可以参考文章「赶紧收下!连bat设计师都在使用的视觉动线技巧(上)(下)」
<a href=https://reurl.cc/xkk4r7 target=_blank class=linkcontent><a href="<a href="https://reurl.cc/xkk4r7</a>"" target="_blank" class="linkcontent">https://reurl.cc/xkk4r7</a>"</a> target="_blank"><a href="https://reurl.cc/xkk4r7</a></a>" target="_blank" class="linkcontent">https://reurl.cc/xkk4r7</a></a></a>
想了解日常阅读习惯
可以参考维基百科「东亚文字排列方向」
<a href=https://reurl.cc/a8vk3e target=_blank class=linkcontent><a href="<a href="https://reurl.cc/a8vk3e</a>"" target="_blank" class="linkcontent">https://reurl.cc/a8vk3e</a>"</a> target="_blank"><a href="https://reurl.cc/a8vk3e</a></a>" target="_blank" class="linkcontent">https://reurl.cc/a8vk3e</a></a></a>