图形创意（微课版）课件 项目7、8 VI设计-“果之怡”品牌VI图形创意、UI设计-天气预报 App图形创意

项目7VI设计——“果之怡”品牌VI图形创意图形创意（微课版）高等院校艺术设计精品系列教材项目描述由于现代消费者的生活习惯和健康意识日益提高，对水果品质的要求也越来越严格。为了应对当下消费者需求和行业竞争形势，“果之怡”品牌希望利用店铺装修升级的机会重新对品牌进行优化打造，委托某创意工作室进行“果之怡”品牌的VI设计。项目目标项目背景项目名称“果之怡”品牌VI设计“果之怡”品牌以销售芒果起家，现已发展为从水果采摘、筛选、保鲜至销售的水果零售连锁店品牌，以“吃健康好果，享怡然之乐”为经营理念，消费者定位是中青年群体。“果之怡”坚持销售自然培育、无公害、无添加的水果，还原水果本真滋味，让消费者买好果、健康吃、享开心作品主题吃健康好果，享怡然之乐作品形式计算机软件制作，矢量文件格式作品数量品牌标志1个，辅助图形和VI应用场景效果若干项目目标效果要求①设计风格：简约、自然、清新、活泼，与水果品牌的行业属性相适应②文字设计：对标志、图案和店铺用品中的字体进行设计，标志文字要具备设计感，符合品牌气质，其他文字要具备易识别性和美观性③色彩设计：色彩以水果真实的色彩为主，鲜艳亮丽，色彩搭配和谐④图形创意：图形主要包括标志图形和辅助图形，都要与水果紧密相关，最好选取店铺中具有代表性的水果进行图形创意，使消费者在看到水果图形的同时，能了解品牌属性，并迅速联想到品牌店铺⑤应用场景：本项目VI设计主要在品牌店铺中使用，至少展示出名片、包装贴纸、标价牌、工作服、环保袋、纸杯等应用场景效果CONTENTS7.1VI设计的基本原则7.2VI设计的主要内容7.3VI设计中的图形创意技巧统一性原则统一性也可以理解为整体性，VI设计以标志为主导，以不同场合的辅助图形、标准字体、颜色等为桥梁，将各属性的内容融于一体，形成新的效果。规范性原则规范性原则主要指VI的制作和实施应该规范。美观性原则美观性原则是指VI设计要给人们带来美的感受。独特性原则VI设计的目的是提升企业形象，增强品牌的可识别性和认同感，以便在复杂的市场竞争中保持自身优势。原创性原则原创性原则是指VI设计要符合国家在广告、知识产权、商标等方面的法律规定。中国邮政VI设计VI设计还需要遵循一些基本的设计原则，方便对VI设计效果进行规范。CONTENTS7.1VI设计的基本原则7.2VI设计的主要内容7.3VI设计中的图形创意技巧辅助图形主要用于在设计中辅助标志、标准字体与标准色彩的表达。辅助图形当完成基础的VI设计后，即可将设计后的效果运用到企业或品牌的相关产品中，如名片、便签纸、信封、工作证、出入证、文件袋、信封、纸杯、文具、公文袋、票据、合同书规范模版等。应用场景标志是企业形象的直观体现，是VI设计的核心和基础。标准字体是根据企业名称及其主要经营内容而设计的，专门用于体现企业名称或者品牌形象的字体，主要包括中文标准字与英文标准字。标准色彩指为塑造独特的企业形象而确定的某一特定的色彩或一组色彩系统。标志标准字体标准色彩港中国际货运代理（广州）有限公司VI设计（LAZYstudio）——标志港中国际货运代理（广州）有限公司VI设计（LAZYstudio）——标准字体港中国际货运代理（广州）有限公司VI设计（LAZYstudio）——标准色彩、应用场景CONTENTS7.1VI设计的基本原则7.2VI设计的主要内容7.3VI设计中的图形创意技巧7.3.1标志图形创意技巧标志图形的主要作用是传达理念和特色，设计师在设计标志图形时可以根据企业、品牌、组织的名称和行业，进行具象化或抽象化设计。具象化设计抽象化设计从现实世界中存在的素材中选择与标志主题相关的图形，进行提炼和加工，组成新的标准图形，具有生动形象、有趣的特点，还对主题起到直观的说明性图示作用。以点、线、面为元素，运用重复变形、对称、发射、分解、组合等图形创意方法，组成虽然现实世界中不存在，却符合企业、品牌、组织的气质和行业特点的标志图形。具象化标志图形（豌豆荚标志）抽象化标志图形（红点设计大奖标志）7.3.2辅助图形创意技巧辅助图形的形式多样，既可以是以企业标准图形衍生变化的抽象纹样图形，也可以是根据企业特性而专门设计的，具有个性特征、抽象或具象的图形。设计师在设计辅助图形时可以参考以下技巧。提取标志局部重新打造与标志具有强关联，但更具感染力的辅助图形将标志中部分元素和其他个性化元素相结合重新打造与标志不相关，但与品牌、企业、行业、自身风格气质相关的辅助图形从标志字母中提取了部分，最终设计出辅助图形将标志中的拼图元素与外形相似的花朵图形结合项目实施1．“果之怡”品牌VI设计构思标志构思1标准字体构思2创意标准字构思基础标准字构思标志构思过程标准字体构思VI设计标准字体方案项目实施标准色彩构思3辅助图形构思4VI设计配色方案辅助图形构思过程1辅助图形构思过程项目实施应用场景图形构思5名片01包装贴纸0203标价牌04其他应用场景名片构思包装贴纸构思标价牌构思其他应用场景构思项目实施2．制作标志和辅助图形制作标志1绘制小圆绘制水果剪切水果绘制水果阴影和高光项目实施绘制绿叶镜像绿叶绘制圆点输入路径文字项目实施制作辅助图形2绘制正圆绘制内部切面绘制果肉肌理绘制橙子正面项目实施绘制正圆第一种分隔线图形示例水果辅助图形示例第二种分隔线图形示例底纹图形示例项目实施3．制作VI应用部分制作名片1制作包装贴纸2制作名片正面的背景图形制作名片背面的底纹绘制包装背景绘制苹果包装背景项目实施制作标价牌和其他应用场景3划分标价牌区域添加对应的辅助图形项目实训项目背景项目名称“云开”新能源公司VI设计项目“云开”新能源公司是一家从事风能和水能开发的新能源公司，由于新成立不久，准备加强公司宣传，需要设计师根据企业从事的业务进行VI设计，用于向内部员工、求职人员、企业客户传达企业定位，提升企业知名度和影响力，从而吸引更多年轻人进入本企业作品主题“云开”新能源作品形式计算机制作，矢量文件格式作品数量品牌标志1个，辅助图形和VI应用场景效果若干项目实训效果要求①设计风格：简约、自然、稳重，与公司的新能源行业属性相适应②文字设计：对标志、图案和办公用品中的字体进行设计，标志文字要具备设计感，其他文字要具备识别性和美观性③色彩设计：色彩要与风能、水能业务具有一定的关联性，色调统一④图形创意：包括标志图形和辅助图形，图形要具备风能和水能的特征，使人在看到图形的同时，了解企业业务，从而起到宣传企业的作用⑤应用场景：需要在多个办公应用场景中体现，具体的设计作品包括名片、工作证、纸杯、档案袋、信封等。项目8UI设计—天气预报App图形创意图形创意（微课版）高等院校艺术设计精品系列教材项目描述随着智能手机、平板等移动设备的普及，App（Application，简称App）成为人们日常生活中不可或缺的应用程序，为人们生活提供了极大便利，由于人们活动范围的扩大和出行需要，天气预报也成为人们生活中的主要信息需求之一。由于传统的天气预报方式在实时性、功能性上已无法满足人们需求，各种天气预报App应运而生，“蔚见天气”App就是其中之一，在新技术、新思潮、新审美的环境下，“蔚见天气”App需要优化自身的界面内容和界面视觉效果。项目目标项目背景项目名称“蔚见天气”AppUI设计“蔚见天气”App主要为用户提供当前与未来15天各地区的天气预报、空气质量、气象预警、穿衣建议和出行建议等信息，帮助用户及时做好各方面的计划和防护措施。现“蔚见天气”需要重新优化UI设计，需要设计师按照要求完成App启动图标设计和天气预报界面设计作品主题天气预报作品规格App启动图标尺寸为1024px×1024px，界面尺寸为1125px×2436px效果要求①风格：图标风格没有限制，可以采用简约、写实、扁平或轻质感等风格进行设计；界面风格要求简洁②字体：尽量选择简约、端庄、稳重的字体，字体类型限制在1~3种，不宜过多③图形创意：图形主要包括App启动图标、界面中的天气预报图标和提示图标太复杂④色彩：采用明度较高的、与天气相关的色彩，如蓝色、白色、黄色等CONTENTS8.1广告的类型8.2广告文字的分类8.1.1图标设计图标设计是指将某些实体活动以及真实、幻想或抽象的动机做成图形符号的过程，用于帮助用户理解与吸引用户视线，是用户成功进行交互和提高用户体验的关键一环，也是UI设计中的图形创意重点。设计师进行图标设计时，应遵守以下4条原则。设计准确具体表现在表意准确和造型准确两个方面。01具备识别性设计的图标效果要能准确地表达图标内容，避免产生误导和歧义。02设计同一主题或同一个App中的图标时，要有合理的规划，既要强调统一性，又要突出差异性。03具备统一性和差异性具体表现在图标外观和交互动效方面的简洁性。04简洁舒适8.1.2手机界面设计户外广告是指在建筑物外表、街道、广场等室外公共场设立的广告。户外广告的受众较广泛，且可在固定的地点长时间展示广告信息，因此，户外广告的传播效果较好。手机界面是用户与手机系统、应用交互的窗口，手机界面设计必须基于手机设备的物理特性和系统应用的特性，针对手机中的各种页面，以及用户在手机上的浏览习惯，进行界面设计。手机界面的组成包括状态栏、导航栏、内容区域和标签栏组成，每个区域对应的内容不同。中国农业银行App界面8.1.3网站页面设计网站页面设计则是根据集合内容和不同使用需求对网站页面进行规划和美化，网站页面中的图形设计应该风格统一，每个页面干净直观，以一个主色调为主，配上合适的文字和图形，让用户流畅、舒适，愉快地接收信息，与网站页面进行交互。Monsters网页（ByAfterglow）8.1.4应用软件界面设计应用软件界面设计主要是指针对应用软件的不同界面功能进行设计。设计师在设计应用软件界面时，应统一不同界面的风格，并在不同界面中保留相同的图形元素，使界面之间互有关联。某数据平台应用软件界面CONTENTS8.1广告的类型8.2广告文字的分类8.2.1图标设计规范图标常与文本搭配使用，不仅能传达出丰富的信息，还能提升整个界面的美观性和信息识别度。同时，有的图标还具有交互性和功能性，当用户点击这些图标时，就会执行特定的操作，触发相应功能。各种应用程序的启动图标通常以024px×1024px的尺寸来设计，后续应用于不同界面中时再根据需要调整合适大小。界面中可点击的功能型图标常见尺寸有“48px×48px”“40px×40px”“32px×32px”“24px×24px”“18px×18px”。界面中用于引导、装饰、提示状态、或不可点击的修饰型图标常见尺寸有“16px×16px”“12px×12px”“10px×10px”。8.2.2按钮设计规范按钮是UI设计中常见的图形，设计师应将按钮的设计规范以文字的形式标注清楚，包括按钮的尺寸大小、圆角大小、描边大小，以及按钮中的文字大小等。按钮的视觉效果体现主要包括默认状态、点击状态和禁用状态3种。各种按钮的标注不同状态按钮的视觉效果项目实施1．天气预报App图形设计构思本例的“蔚见天气”AppUI设计中涉及到的图形主要包括启动图标、天气预报图标、气象图标和建议信息图标。启动图标设计构思草图参考示例天气预报设计图标构思天气预报图标设计构思项目实施启动图标设计构思草图参考示例天气预报设计图标构思天气预报图标设计构思项目实施2．天气预报App原型图绘制界面整体采用对称式构图方式，在对称中适当进行了变化，增加界面的活跃感和层次感。界面最上方为状态栏和导航栏版块，然后是作为视觉焦点的今日天气状态版块，下方采用图形色块划分了气象信息、穿衣建议、出行建议、未来天气预报版块，通过各版块的位置形成直线视觉流程引导用户从上至下纵向浏览界面，版块内部的横线装饰元素则能有效引导用户从左至右横向浏览内容。天气预报App原型图项目实施3．天气预报App图标制作填充渐变颜色绘制启动图标外部路径绘制启动图标内部路径减去路径填充渐变颜色制作外发光效果绘制“晴”图标局部完成“晴”图标效果项目实施4．天气预报App界面制作绘制白云和矩形制作白云装饰效果绘制版块背景和装饰直线项目实施4．天气预报App界面制作建立剪切蒙版制作风格化效果添加图标输入文字项目实训