广州总部电话:020-85564311
广州总部电话:020-85564311

广州网站建设-小程序商城开发-广州小程序开发-企业微信开发公司-网站建设高端品牌-优网科技

20年
互联网应用服务商
请输入搜索关键词
知识库 知识库

优网知识库

探索行业前沿,共享知识宝库

中文这样排版,可好看了!
发布日期:2025-03-24 18:05:55 浏览次数: 840 来源:美啊设计平台


今天改一个画册内容页的编排,看看如何通过页面所承载的信息量,来运用网格的类型、留白的把控、颜色的搭配、以及信息图形化设计等技巧来传达和展示页面的信息。

图片
图片

  • 中英文的字体选择不合适,版面显得粗糙不精致。 
  • 版心尺寸太大,使页面过于拥挤,同时可能会影响印刷裁切。 
  • 右页面的文字编排太过普通,无法吸引读者,重要信息的传达效果有限。 
  • 信息排布过于统一,缺乏明显的差异性,导致读者不知道应该看哪里才好。

图片
图片
图片
图片

  • 中文字体为鸿蒙HarmonyOS Sans,英文字体为Tunga。
  • 将版面设置为六栏网格,左页面的图片以满铺跨页的方式展示。右页面的文字占据四栏网格,而图片则占用两栏网格,使整体画面具有灵动感。
  • 当版面信息量过少而使版面的丰富度不足时,可以对信息进行视觉图形化处理。



网格的运用+信息图形化:
从上面的案例得知,无论画册所承载的信息量是多或少,都应考虑网格的运用和信息图形化的呈现。

●网格的好处
网格有什么好处?网格能使版面具有比例感和秩序感,有助于合理地进行信息区域划分,快速辅助和调整视觉元素之间的对齐及间距。

图片

特别是在设计信息量大的项目时,比如杂志、图书、报纸等,甚至网页的设计也会运用到网格。
图片
建立网格之前,需要对设计内容进行梳理,捋清它们之间的内在逻辑关系后,设置合适的版心,然后合理确定网格类型。
图片
但是,网格只是一个工具,实际的应用还需要以人眼视觉为基准进行调整,并思考如何打破网格的单调感,变化出不同的版面样式。

●信息图形化
信息图作为一种视觉形象化的手段,不仅可以有效地传达信息,还能带来全新的视觉感受。将普通的文稿运用信息图呈现,并在设计布局上兼顾阅读体验,能提升设计质感。

图片

信息图主要分为四种类型:图表、图标、图示和地图。它们广泛应用于企业画册、PPT演示文稿、提案报告、年度报告等设计中。

○ 图表
图表的应用非常广泛,它能让我们方便地阅读大量的数据,并能清晰地理解数据之间的关系。常见的图表类型包括扇形图、折线图、柱状图、散点图、山形图等。

图片
图片
年度报告设计,设计:Hussain Mohammed Al Bakri
图片
Steelcase Sustainbility Report (年度报告)设计
图片
家装公司折页设计,设计:Miuyan Chow
表格可以说是最基本的图表。为了提升表格的整体美感和可读性,需要对表格重新设计后再把它运用到页面中。

○ 图标
图标是一种简化的符号,通常用于代表特定的概念、功能或对象,能快速传达信息、快速识别或作为导航元素。

图片
图片
设计:design purple

○ 图示
图示是一种以图形化形式呈现信息、数据或概念的视觉表达方式。它常用于展示组织架构图、流程图、示意图、企业发展历程图等。

图片
设计:Zutter
图片
设计:design purple
图片
设计:Miuyan Chow
图片
设计:design purple
○ 地图
地图在应用程序中的使用非常普遍,也常出现在一些画册、杂志或其他物料设计中。地图可分为扁平式地图和3D立体地图,选择适合的地图类型可以让设计更具个性和吸引力。
▼ 以区域形式展示
图片
图片
设计:The Heads of State
▼ 以点形式展示
图片

▼ 以线性形式展示
图片
图片
设计:Maniackers Design
▼ 以立体形式展示
图片
当你意识到图形化的重要性之后,特别在版面信息量不多的时候,通过这种视觉化信息图来解决版面空洞的问题。
-END-

优网科技,优秀企业首选的互联网供应服务商

优网科技秉承"专业团队、品质服务" 的经营理念,诚信务实的服务了近万家客户,成为众多世界500强、集团和上市公司的长期合作伙伴!

优网科技成立于2001年,擅长网站建设、网站与各类业务系统深度整合,致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设(品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真)、移动端应用(手机站APP开发)、微信定制开发(微信官网、微信商城、企业微信)、微信小程序定制开发等一系列互联网应用服务。


我要投稿

姓名

文章链接

提交即表示你已阅读并同意《个人信息保护声明》

专属顾问 专属顾问
扫码咨询您的优网专属顾问!
专属顾问
马上咨询
扫一扫马上咨询
扫一扫马上咨询

扫一扫马上咨询