UI设计项目式教程 课件 第4章（4.1Banner设计原则）

UI设计项目式教程课程介绍案例分析设计流程实战练习

本章节主要包含了banner设计原则、banner设计的特点、banner构图方式及尺寸要求、banner放置位置及切换方式，这些知识点几乎囊括了UIbanner设计的应用及设计形式。

此次PPT为大家介绍banner设计原则的相关内容。UI设计项目式教程课程介绍案例分析设计流程实战练习

在制作Banner文案排版时，我们需要了解并掌握相关原则，Banner设计需遵循留白、对齐、对比三大原则，提升视觉吸引力与信息传递效率。

留白原则：要求保留合理空白，避免元素堆砌，既能突出核心信息（如主题、按钮），又能缓解视觉疲劳，让画面更通透。

对齐原则：是画面整洁的关键，需将文字、图形等元素按统一基准对齐（左对齐、居中对齐等），建立视觉秩序，引导用户视线有序流动，避免杂乱感。

对比原则：可强化视觉层次，通过色彩（如冷暖色对比）、大小（主标题与辅助文字差异）、明暗等对比，突出核心内容，让关键信息快速被捕捉，同时增强画面的视觉冲击力，助力Banner在短时间内抓住用户注意力。设计流程UI设计项目式教程课程介绍案例分析设计流程实战练习

对齐原则：是画面整洁的关键，需将文字、图形等元素按统一基准对齐（左对齐、居中对齐等），建立视觉秩序，引导用户视线有序流动，避免杂乱感。因此，我们只需要借助PS/AI软件的对齐工具/标尺辅助线就可以完成对齐。对齐工具标尺辅助线UI设计项目式教程课程介绍案例分析设计流程实战练习

在Banner设计中，以参考线作为文字区域的对齐边界。借助参考线规范文字摆放范围与对齐基准，能有效规避元素错位问题，让版面布局更规整有序，同时提升信息传递的清晰度，强化设计的专业质感。UI设计项目式教程课程介绍案例分析设计流程实战练习Banner对齐设计案例赏析UI设计项目式教程课程介绍案例分析设计流程实战练习

对比原则：大小（主标题与辅助文字差异）、突出核心内容，让关键信息快速被捕捉，同时增强画面的视觉冲击力，助力Banner在短时间内抓住用户注意力。

图片中主标题占比大从而阐述这张banner的主题，其他文案以及相应的装饰性元素缩小，让整个画面更加丰富，不会显得特变单调，UI设计项目式教程课程介绍案例分析设计流程实战练习

留白原则：要求保留合理空白，避免元素堆砌，既能突出核心信息（如主题、按钮），又能缓解视觉疲劳，让画面更通透

图片案例很好的展示了留白层次的视觉感官让每个文案中间有一段的距离，从而显示出不同的层级关系，也从而梳理出我们文案的一个主要层次和次要层次的区别UI设计项目式教程课程介绍案例分析设计流程实战练习

图片中文案排布的非常满，导致没有任何的呼吸的空间，给我们的感觉非常的拥挤头部过来气，且整体的文案层次并没有很明显的差距，分不清主次关系，从而让阅读有了障碍。反例展示UI设计项目式教程课程介绍案例分析设计流程实战练习

以黑黄撞色潮鞋为核心，黑黄块面背景强化视觉冲击，左上角搭配“时尚潮鞋”大字与促销信息，右下角布局聚焦产品，色彩对比突出潮流感，突出信息层级清晰。UI设计项目式教程课程介绍案例分析设计流程实战练习一、临摹优秀Banner作品，深度理解并掌握对齐、对比、留白三大设计原则的实际应用逻辑，提升Banner版面规整度、视觉层次感与信息传递效率，夯实设计基础。二、作业要求1.临摹素材：选取3组优秀Banner案例（涵盖电商促销、活动宣传、品牌展示3类常见场景）中任选1组进行临摹，需完整还原作品