高二机工社UI设计项目教程课件学习单元3项目1：Banner设计

学习单元3——网页设计. UI设计项目教程 单元概述 通常来说，UI设计领域内的网页设计倾向于视觉而非代码。本单元重点介绍网页重要组成元素Banner的设计及网站主页设计两方面内容。Banner作为网站的横幅广告，核心功能是吸引用户关注，获得高点击率。作为广告形式的一种，它需要主题明确，突出关键内容。在进行Banner设计前，必须先弄清楚三个问题：需要设计的Banner主要适用于什么主题？推荐的是什么样的产品？如何生动有趣地去表现设计需求以吸引用户点击？本单元通过对Banner的设计制作流程的介绍，使读者能够熟悉Banner设计构成元素及Banner设计的流程，并对Banner设计形成整体的概念。除了Banner这一核心要素外，网站主页设计也非常重要。本单元详细介绍了网站主页设计的具体方法，概述了网站主页设计需要考虑的因素及注意事项。 学习目标 1．能够说出Banner制作的流程 2．通过项目制作，学习Banner设计制作要素规范 3．灵活使用平面设计软件，体现Banner的表现力和传达力；掌握Banner画面质感、重量感的表现方法 4．能够说出网站主页设计包涵的具体内容 5．能够通过项目制作，学习电商平台首页设计制作要素规范；电商平台首页设计流程；电商平台首页的布局和电商网页的设计原则 6．灵活使用平面设计软件表现电商平台首页设计案例的表现力和传达力 Banner设计 项目1. ONE 项目描述 每日鲜Fresh-One食品公司是一个围绕着市民餐桌的生鲜O2O电商平台。每日鲜Fresh-One提供的食品覆盖了水果蔬菜、海鲜肉禽、牛奶零食等品类，为用户提供全球生鲜产品“2小时送货上门”的极速达冷链配送服务，主打精选、产地直采、极速达。每日鲜Fresh-One公司近期推出当季新品热带水果与海产品新上市项目。为了使该项目得到最大程度的推广，带给顾客耳目一新的感觉，需要对该项目进行网站首页的Banner设计，设计风格要求配色热情明快，产品直观有吸引力，顾客接受度强。 UI设计项目教程 任务1：　设计前期准备 Banner设计过程可以分为以下5步 UI设计项目教程 任务1：　设计前期准备 1．沟通，了解设计需求 在有设计需求的时候先不要着急马上就开工，首先要了解一下项目的背景、客户的需求，如这是什么主题？推荐的产品是什么样的？根据主题去定位相应的活动基调、色调和风格。风格涉及色彩、布局、字体、排版等。 UI设计项目教程 任务1：　设计前期准备 2．执行 版式　版式规则是整个设计的骨架，开始做Banner前，先把信息分类整理，摆放产品或者模特的位置，合理地运用画面。 色彩设定　色彩设定的主要工作为确定主色调、辅色调。不难理解，在整个画面中色彩占用最多的颜色可以确定为主色调，辅色调作为点缀辅助，要根据行业属性配比相关颜色。 UI设计项目教程 任务1：　设计前期准备 3．创意思路 提取关键字，并通过头脑风暴的方式将关键词具像化，使最终的视觉效果符合设计需求。页面元素、场景、布局排版等都需要在这个阶段去考虑，可以在纸上画草图演示布局。通过分析本项目的设计要求，提取关键字：生鲜，食品，品质，服务，精选，并转化具像化图形。 UI设计项目教程 任务1：　设计前期准备 4．设计Banner 根据具像化的关键词，设计构成Banner的元素，收集素材，建立素材库文件夹，有逻辑地把素材放在各分类下，如人物类、场景类、字体类、装饰类素材等，这样，在整体布局排版的时候就能够更加有效率地去调取素材。要在平时养成收集素材的好习惯。通过实地拍摄，后期调色，确定了牛奶、海鱼、西瓜、意大利面等素材。 UI设计项目教程 任务1：　设计前期准备 5．最终确定及审核 Banner设计后一定要附上效果图或者样机图，去模拟真实的展示效果，看看实际上线效果和预期是不是一致的。 UI设计项目教程 任务2：　网站Banner广告制作 Banner广告 UI设计项目教程 任务2：　网站Banner广告制作 最终效果 UI设计项目教程 必备知识 Banner设计常识 —— Banner绘制尺寸 打开网站页面会看到颜色丰富、图案各异的Banner图片，它们的大小也是不一样的。Banner的设计尺寸是由网站本身的设计规格和广告图片的规格决定的，可以说它的设计规格是没有固定要求的。虽然没有严格规定Banner的设计尺寸，但从网站Banner设计的页面规格分析，网站Banner设计中常用的尺寸如下: 从网站页面的广告位置来看　 1.首页右上，尺寸为120×60px。 2.首页顶部通栏，尺寸为760×60px。 3.首页中部通栏，尺寸为580×60px。 4.内页顶部通栏，尺寸为468×60px。 5.内页左上，尺寸为150×