• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 专业科班系列!超实用的标题排版小套路

专业科班系列!超实用的标题排版小套路

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含中文排版,排版布局,标题设计,经验分享等相关知识,希望在学习及工作中可以帮助到您

@设计便利店 :今天不分享那么大的理论,介绍几个简简单单排标题的方法,供大家学习参考。

01. 同字号加粗 & 置顶

▲ 标题:方正兰亭特黑简体 内文:方正兰亭黑简体

标题置于左上顶部,并远离正文,标题加粗,标题字号与正文字号相同。

在文字内容很多的情况下,这种设置的好处是让读者有足够呼吸的空间,这种方式的标题设计是比较优雅、克制与内敛的。

02. 大字号标题 & 置顶

▲ 标题:小塚宋体 内文:小塚宋体

标题依旧设置左上顶部,采用了内文2.5倍字号的字体,这种方式的标题设计让标题和正文的对比尤为突出。

03. 1.5倍标题

▲ 标题:方正兰亭黑简体 内文:方正兰亭黑简体

标题位于正文的上方,字号是正文的1.5倍,标题与正文之间空了一行。这种方式的标题设计比较保守,好处是适用绝大部分的情景需要。

04. 无衬线字 + 衬线字

▲ 标题:思源黑体(Bold) 内文:思源宋体(Regular)

标题与正文使用有对比的字体,此例子标题为无衬线黑体,正文为衬线宋体。标题依旧位于正文的上方,字号是正文的1.5倍,标题与正文之间空了一行。这种方式的标题设计也是常用手法,好处是强化两者间的对比。

05. 超大标题加英文

▲ 标题:思源黑体 内文:思源黑体

如果觉得纯中文的版式比较难处理,可以尝试加入少许英文字当做点缀。这种方式的标题设计好处是,减轻版式的单调感,同时可增加版式的国际感。

06. 加分割线

▲ 标题:思源黑体(Heavy) 内文:思源黑体 (Regular)

一根横线划分了标题和正文。这种方式的好处是,将文本属性划分,并进一步强调了标题这一行的重要性。

07. 加入简单视觉元素

▲ 标题:思源黑体(Bold) 内文:思源宋体(Regular)

当觉得版式枯燥无味时,可以尝试加入与内文匹配的视觉元素,如例子中,加入了艺术家草间弥生最著名的红色圆点,既不感觉符号与内文无关,又让版式多了些许亮点。

08. 竖标题排版

▲ 标题:A-OTF 徐明 内文:思源宋体

竖排版可以让汉字体现其特有的韵味,在配合英文小字在旁点缀,不会显得太过于传统,这种横竖配合版式的好处是,阅读有节奏变化,可以提高阅读体验。

部分资料来源:《Grid Systems in graphic design – 平面设计中的网格系统》 Josef Muller-Brockmann, 徐宸熹等 译,2016

一起进步!

共勉 ??

欢迎关注作者的微信公众号:「设计便利店」

「想掌握排版四原则?3个海报设计教程满足你!」

  1. 《设计易容术!如何设计一张高品位高水准的海报?》
  2. 《设计易容术!如何设计一张高品位高水准的海报(二)》
  3. 《设计易容术!如何设计一张高品位高水准的海报?(三)》
设计微博:拥有粉丝量200万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。

优设大课堂

您可能想查找下面的文章:

  • 用超多案例,帮你学会排版中最基础的对比和对齐原则
  • 没素材就做不出好作品?高手说不一定!
  • 素材太丑?学会这5个方法照样能做好设计!
  • 专业科班系列!超实用的标题排版小套路

相关文章

  • 2018-08-23怎样让用户对产品产生依赖与习惯?来看这篇基础科普!
  • 2018-08-23用户测试的基本步骤和沟通技巧
  • 2017-08-06写样式时背景色的声明的重要性
  • 2018-08-23UCAN 干货总结!阿里设计如何助力设计产业升级?
  • 2018-08-235分钟交互设计指南系列:对话框
  • 2017-08-06三谈Iframe自适应高度代码
  • 2017-08-06HTML中的input type="reset"标签失效(不起作用)的可能原因。
  • 2018-08-23想成为高级交互设计师?这是我的5个经验总结
  • 2018-08-23超全面!如何做好应用程序中的反馈设计?
  • 2018-08-23超全面!聊天机器人的界面交互设计实战经验总结

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 双11干货!写给运营视觉设计师的交互小技巧
    • 界面设计中,交互方式是选择滑动还是点击呢?
    • 写给UI新手的APP结构指南:注册和登录
    • 5000字,超详细总结App加载设计
    • Web开发中盒子居中的几种方法
    • 从事用研6年后,我总结了这四个最重要的技能
    • 清除浮动(clearfix 和 clear)的用法示例介绍
    • 最全最好用的动效落地方法,都帮你总结好了(下)
    • 趁年轻做些更有挑战的事情!专访Twitter 产品设计师王源
    • HTML写链接的时候要始终将正斜杠添加到子文件夹减少HTTP请求

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有