banner作为整个页面中让人立刻关注到的部分,其文字信息决定了用户是否停留在页面。那么在banner 排版设计中,文字应该怎么摆放?
A. 字体大小对比
大号文字给人有力,自信的印象。小号文字给人纤密,紧凑的印象。
字号变大,间距变大,画面会显得更加活跃 , 反之页面显得稳重在网页当中,字体的大小可以起到一定的识别作用,字体大小的组合方式,这也是网页当中最常用到的对比效果之一。同时字体大小对比也是 banner 设计中比较好把握,能快速出效果的设计手法。这样的组合方式比较能凸显标题,也可以建立起清楚的视觉层次,让浏览者清晰的知道 banner 设计的主要信息内容。

banner 字体大小对比(图片来源于网络)
B. 字体粗细对比
细字,显得优美,精细,在网页中一般应用于女性产品,或者正文内容当中。
粗字,显得有力量感,在网页设计中,一般应用于男性产品,重要的广告语或者标题当中。
视觉联想上:细字冷静,粗字热情;字体的粗细对比跟大小对比一样,运用都比较广泛,两者可以搭配起来一起使用。字体的粗细对比出现的一般情况都是为了突出某一个元素,为了拉开层级关系,通常情况下这个元素相比较其他元素会比较重要一些,而把这个元素字体加粗, 使得这个元素在其他元素当中突出出来,达到浏览网站的用户能第一时间先看到这个元素的目的。

banner 字体粗细对比(图片来源于网络)
C. 字形的对比
这个不难理解,就好比界面上有些地方用无衬线字体(例如黑体),有些地方用有衬线字体(例如宋体),这样两者间可以形成一定的对比。再比如中英文结合形成的对比都属于字形的对比。

banner 字形的对比(图片来源于网络)
D. 字体颜色的对比
字体颜色对比顾名思义就是两种或两种以上字体不同颜色之间形成的对比。字体的颜色搭配可以多种多样,总的原则来说就是设计者有意识的给字体加颜色,使该颜色字体在其他字体当中起到突出或是弱化的作用。

banner 字体颜色的对比(图片来源于网络)
E. 字体动静对比
字体动静对比,一般出现在活泼的网站当中,例如使文字倾斜,上下错落等,使得页面不至于太过呆板多用于运动类或者时尚类宣传banner。

banner 字体动静对比(图片来源于网络)
F. 字体的方向对比
字体方向对比在网页当中不常出现,例如文字水平方向,垂直方向,45°方向等,一般多用于以文字为主要展示内容的 banner 设计中。

banner 字体的方向对比(图片来源于网络)
G. 点线面装饰
在 banner 文字排版中适当的添加点线面的装饰可以使得 banner 更具设计感和吸引力。但需要设计者有一定的空间把握能力,把握不好容易使页面显得混乱。

banner 中点线面装饰对比(图片来源于网络)
H. 综合对比
通常情况下,一张banner 图的设计不会只用到一种文字对比的形式来加强视觉效果,大多数情况都会通过综合的对比来增加画面视觉感。

综合对比(图片来源于网络)
不管运用到哪一种字体对比,只要恰当的使用这种对比方式,相信肯定可以为 banner 增色不少,当然,也切勿为了好看而盲目的添加反而起到画蛇添足的反作用,最主要的是能够体现内容的主次关系。
上一篇 设计APP图标需要哪些流程?
下一篇 2020年交互设计趋势展望
热门课程
专业讲师指导 快速摆脱技能困惑相关文章
多种教程 总有一个适合自己专业问题咨询
你担心的问题,火星帮你解答此番调整与三年前网易高调“出海”的姿态形成强烈反差 与此同时,自2024年起,由知名MMO制作人Jack Emmert领导的奥......
收购之后,忽然科技承诺Cocos会全面回归永久免费、纯粹开源的路线,同时借助忽然科技的全球流量资源,为开发者提供更多价值它证明......
工具集中,dgaTension节点与dgaDelta节点发挥着关键作用它们基于每个顶点,对角色网格的两种状态进行细致比较,分别......
以Maya为核心的工业级制作流程,让中国团队掌握了从高精度建模、动态捕捉到光影渲染的全链路技术其前身“王琦电脑动画工作室”成立......
捕获一只少东家! 1 前言 Hello,大家好,我是火星时代广州校区3D模型大师班的学员苏颖,很荣幸可以和大家分享我第五阶段的......
有央企、也有外企,有影视公司、也有游戏公司!收喜报都收到手抽筋了!
又到了星仔最最最中意的晒喜报环节啦!!想想大家第一个月刚打开软件时的一脸蒙圈,夜夜肝作业到教室关门的咬牙坚持,再到毕业时拿上写......
同学您好!