《UI元素图形创意设计》课件-第6章 Banner设计

20202020年立项金课UI创意设计元素图形YUANSUTUXINGCHUANGYISHEJI课程类型总学时数考核方式课程内容授课方式自编讲义、教材专业必修课72（理论36实践36）考试，平时作业40%，期末考试60%UI元素图形创意设计的方法，软件操作的技能每章1个项目（2周），项目化教学已购教材作为Illustrator软件操作的工具书目录本课属于对接1+X考证，课程思政的项目式课程。课程所使用的软件包括Photoshop、Illustrator、AE，

课程以培养大家的UI图形创意能力为根本，结合绘图软件的功能用法，通过案例有针对性地解析UI项目的设计过程，操作步骤分步解析。01第1章是概述，包含UI设计的基础知识和3个软件的概述02第2-9章，各个案例分步解析，以案例解析界面构图、图形元素和色彩、字体规范等03第10章是综合实战，从任务分析、策划和设计、制作规范和完成界面效果图方面进行全过程讲解Banner的设计与制作Banner是界面里不可或缺的元素，Banner可以进行内容展示、产品推荐、广告投放等，是当前互联网广告中应用范围最广的广告形式。Banner的概念Banner的设计原则Banner设计的步骤完整项目课堂演示+学生实操拓展练习四三二第6章Banner设计分为4个部分一五一、Banner的概念Banner（横幅广告）最初是用来指线下的展示广告。作为日常交通工具，地铁站内每天人来人往，人们总是被站内各种各样的广告给吸引。绚丽的色彩，突出的文案，无论行路多么匆忙，总是会注意到，这类广告常称为“横幅广告”，即“Banner图”。随着互联网的兴起，Banner被广泛应用到网站和移动端APP，Banner的范畴也从线下展示广告扩展为了静态式、动态式和互动式三种表现类型，Banner适用于发布或推广新的产品、塑造网络品牌、树立企业形象，是当前互联网广告中最基本的广告形式。二、Banner的设计原则突出信息传达（一）带动用户情绪（二）引导用户行为（三）（一）突出信息传达在UI设计中通常用“易懂性”这个词语来形容设计的信息传达能力。易懂性强调设计应从用户获取信息的角度出发，思考如何让用户更加简单地获取广告信息。常规的Banner图主要由内容、主题、装饰和背景四个层次构成，而易懂性常常体现在内容层的设计上，我们要做到文案尽量简洁通俗、文案内容的行数尽量控制在三行以内，确保可读性；在设计上，我们不仅要做到舒服、显眼，还要有信息层级，合理引导用户根据信息的主次关系浏览信息。（二）带动用户情绪设计区别于绘画的最主要特征是设计带有明确的目的性，绘画则仅仅是画家本身的艺术表达，设计一定是带有目的性的，有相对明确的目标用户群。因此，优秀的设计能迎合用户的需求，拉近用户距离，从而让设计更易被目标用户接受，以达到相应的传播目的。（二）带动用户情绪设计区别于绘画的最主要特征是设计带有明确的目的性，绘画则仅仅是画家本身的艺术表达，设计一定是带有目的性的，有相对明确的目标用户群。因此，优秀的设计能迎合用户的需求，拉近用户距离，从而让设计更易被目标用户接受，以达到相应的传播目的。（二）带动用户情绪（三）引导用户行为A平面广告注重创意的表达，Banner则更加强调画面表现力，吸引用户第一时间去点击。设计师需要让用户更清楚地感受产品的品质感，进行人性化的设计，对用户友好的设计，用户一定会感受得到，也会给予你回应。B上方两张图的右图是改进后的Banner效果图，整体元素没有变化，当把画面从水平结构改成了略为倾斜的感觉，给用户一种动感。此外，背景由统一的红色背景改成了红绿切割的撞色背景，提高了画面的表现力和吸引力。对比之下，改进后的Banner，用户点击的概率会更高。（四）课堂练习1请同学们登录网站，收集已上线的Banner设计案例，并从Banner设计原则出发，分析这些案例为什么要这样设计，并指出它们的优缺点。大家总结好后写成文档，并把图片和文档打包提交。三、Banner设计的步骤（一）了解需求设计是有目的的创意活动，做任何设计的前提就是了解设计需求，只有弄明白需求方到底想要什么，我们才能少改几次稿。需要了解的需求大体可以总结成以下几个方面：1确定文案信息、素材、尺寸大小2确定Banner的设计目的3询问需求方的建议4确定设计时间三、Banner设计的步骤（一）了解需求设计是有目的的创意活动，做任何设计的前提就是了解设计需求。需要了解的需求大体可以总结成以下几个方面：1确定文案信息、素材、尺寸大小2确定Banner的设计目的3询问需求方的建议4确定设计时间（二）根据需求确定设计风格01简约风（二）根据需求确定设计风格02时尚风（二）根据需求确定设计风格03复古风（二）根据需求确定设计风格04科技风（二）根据需求确定设计风格05手绘风左字右图是最常见最容易掌握的排版，中规中矩，不易出错。（三）根据素材和文案确定版式01左字右图（三）根据素材和文案确定版式02左图右字左图右字和左字右图差不多，首先要根据素材图片的构图和走向确定图片是适合放在左边还是右边，再做文案的排版。左图右字也是属于比较常规不容易出错的构图。（三）根据素材和文案确定版式03左中右构图左中右构图一般为左图中字右图或者左字中图右字。这种构图比左右构图版式会丰富点，但是比它们难把握。如果banner上要出现两个人物，比较适合左中右构图。或者想要重点突出人物，也可以把人物居中，把文案放在人物两侧。（三）根据素材和文案确定版式04上下构图上下构图一般为上字下图。上下构图不好掌握，常见于一个Banner中要出现多个主体时，多个主体在左右构图里不好摆放。由于上下构图的尺寸限制，图片需要缩小。（三）根据素材和文案确定版式05文主图辅突出文字并做设计，图片作为背景起到一个装饰的作用，或者没有图片素材。常见于文案内容比较抽象、不方便或者不需要用到图片素材、不知道用什么图片素材去表达画面内容，没有一个代表性的图片素材作为画面主体的情况。（三）根据素材和文案确定版式06不规则构图不规则构图最难把握，相对的，最有设计感。不规则构图如果把握得好，版式的丰富会给人眼前一亮的感觉。其实不规则构图也是在常规构图的基础上再做一些变化，万变不离其宗。（四）构成Banner的元素的设计（四）构成Banner的元素的设计（四）构成Banner的元素的设计01内容层（四）构成Banner的元素的设计02主题层（四）构成Banner的元素的设计03装饰层（四）构成Banner的元素的设计04背景层从素材里面直接吸取合适的颜色，再调节饱和度和明度。这样画面会比较协调统一。（五）调整配色01从素材图片中吸取配色（五）调整配色02单色将图形部分处理成单色的，容易营造整体统一的基调，更加能凸显文案部分的信息。（六）课堂练习2完成音乐或美食类Banner广告一张，要求：主题突出，符合Banner设计原则，内容层、主题层、装饰层清晰。思政要求见下页：课堂练习课程思政音乐或美食类Banner广告应体现创新精神：创意设计追求新颖，体现广告行业的创新精神，鼓励同学们在日常生活中追求创新和进步。美食广告应包含下面7点中的1点：1.家国情怀：展示地方特色美食，唤起人们对家乡的思念和对国家的热爱。2.文化自信：融入中国传统文化元素，展示中国丰富的饮食文化，传递对自身文化的自信和骄傲。3.社会责任：强调健康饮食、节约粮食等社会责任主题，传播健康生活的理念。4.法治意识：不夸大产品效果，不使用误导性的语言。5.社会主义核心价值观：通过展示家庭和睦、尊老爱幼等传统美德传递正面社会价值观。6.和谐共生：展示有机农业、可持续发展的食材来源。7.节日文化：如春节、中秋节等，展示与节日相关的食物，强化传统节日的文化意义和社会价值。。课堂练习课程思政音乐广告应体现广告行业的创新精神，鼓励同学们在日常生活中追求创新和进步，并包含下面7点中的1点：1.家国情怀：通过歌词和旋律传达对家乡和国家的深厚情感。2.文化自信：融入中国传统文化元素，展现中国音乐家的文化自信，如刀郎的音乐作品。3.社会责任：通过公益营销，关注社会问题，传递社会正能量。4.社会主义核心价值观：巧妙地将社会主义核心价值观融入其中，引导社会思潮。5.和谐共生：展示音乐与商业的结合，传递和谐共生的理念。6.节日文化：结合传统节日，传递节日文化，强化传统节日的文化意义和社会价值，如网易云音乐在中秋节的营销活动。7.情感共鸣：通过音乐的情感传递效果，与消费者建立情感共鸣。四、Banner项目实战（一）项目实战项目要求：参考电商类女装促销Banner设计案例，根据下方尺寸、文案等要求，设计“不期而遇”女装促销Banner图，设计风格不限。尺寸要求：1920pt×800pt文案素材：主标题：不期而遇副标题：暖冬计划、衣为有你、只想给你、温暖如春。内容：其他文案：可以根据上述文案翻译成不同语种的文案（比如可以把副标题翻译成英文，添加在画面中做装饰或者信息展示）。目标用户群：年轻女性消费者。图片素材：请扫书中二维码下载。（二）项目准备与设计这个阶段，先要读懂项目要求，根据项目主题查找相关banner的范例作为参考，再运用结合自己的创意，画出设计草图。（二）项目准备与设计01根据题目，寻找范例，观察范例这两张的风格是经典简约，采用的是左右构图的版式类型，色彩搭配简洁统一。优点是主题突出，文字内容和主体元素表达清晰，信息传达效率高。这两张在版式上有一些灵活变化，它们本质上还是左右构图，左边这张在两边加上了一层虚化的图片背景，在丰富画面的同时，也讲主体内容聚集在了画面中间。右边这张运用了相同的手法，不过只在左边放置了一层虚化的图片背景，同时将右侧的主体人物进行突出，与左侧的虚化背景图片形成有节奏感的平衡。此外，这两张Banner都运用了色块进行文字装饰，增加了画面的层次和时尚感。（二）项目准备与设计01根据题目，寻找范例，观察范例（二）项目准备与设计01根据题目，寻找范例，观察范例这两张采用的是文主图辅的排版方式，左边这张是图片元素在两侧，右边这张是图片元素在中间。两张都对文字和图片进行了处理，相互穿插，塑造了较强的表现力和时尚感。（三）项目实施五、拓展练习项目要求：参考电商类促销Banner设计案例，根据下方尺寸、文案等要求，设计“FILAFUSIO