图形创意（微课版）课件 项目8 UI设计-天气预报 App图形创意

项目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界面制作建立剪切蒙版制作风格化效果添加图标输入文字项目实训项目背景项目名称旅游网登录页UI设计长假即将来临，某旅游网站想重新设计登录页，使登录页效果更加简约、生动、美观，更能吸引用户注册、登录，增加用户对该旅游网的好感作品主题旅游网登录页作品规格1920px×1080px效果要求①风格：扁平插画风格，简约、清新②字体：宜选择易识别、简洁、端正的字体③图形创意：符合旅游行业属