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×60px或300×300px。6.下载地址页面，尺寸为560×60px或468×60px。7.内页底部通栏，尺寸为760×60px。8.左漂浮，尺寸为80×80px或100×100px。9.右漂浮，尺寸为80×80px或100×100px。UI设计项目教程必备知识Banner设计常识——Banner绘制尺寸从网站的页面大小来看1.800×600px下，网页宽度保持在778px以内，就不会出现水平滚动条，高度则视版面和内容决定。2.1024×768px下，网页宽度保持在1002px以内，就不会出现水平滚动条，高度则视版面和内决定（页面的显示尺寸为1007×600px）。3.使用Photoshop软件做网页可以在800×600px的状态下显示全屏，页面的下方又不会出现滑动条，尺寸为740×560px左右。4.1024×768px下网页的尺寸为width=955，height=600;800×600px下网页的尺寸为width=760，height=420。5.分辨率在640×480px的情况下，页面的显示尺寸为620×311px。UI设计项目教程必备知识Banner设计常识——Banner绘制尺寸从Banner自身的设计大小看1.页面长度原则上不超过3屏，宽度不超过1屏2.每个标准页面为A4幅面大小，即8.5×11英寸3.全尺寸Banner为468×60px，半尺寸Banner为234×60px，小Banner为88×31px，另外120×90px、120×60px也是小图标的标准尺寸4.每个非首页静态页面含图片字节不超过60K，全尺寸Banner不超过14KUI设计项目教程任务拓展

公司近期承接“月满登高秋意浓——端午节”产品推广的Banner设计