高二机工社UI设计项目教程课件学习单元3项目2：电商平台首页设计

学习单元3——网页设计. UI设计项目教程 单元概述 通常来说，UI设计领域内的网页设计倾向于视觉而非代码。本单元重点介绍网页重要组成元素Banner的设计及网站主页设计两方面内容。Banner作为网站的横幅广告，核心功能是吸引用户关注，获得高点击率。作为广告形式的一种，它需要主题明确，突出关键内容。在进行Banner设计前，必须先弄清楚三个问题：需要设计的Banner主要适用于什么主题？推荐的是什么样的产品？如何生动有趣地去表现设计需求以吸引用户点击？本单元通过对Banner的设计制作流程的介绍，使读者能够熟悉Banner设计构成元素及Banner设计的流程，并对Banner设计形成整体的概念。除了Banner这一核心要素外，网站主页设计也非常重要。本单元详细介绍了网站主页设计的具体方法，概述了网站主页设计需要考虑的因素及注意事项。 学习目标 1．能够说出Banner制作的流程 2．通过项目制作，学习Banner设计制作要素规范 3．灵活使用平面设计软件，体现Banner的表现力和传达力；掌握Banner画面质感、重量感的表现方法 4．能够说出网站主页设计包涵的具体内容 5．能够通过项目制作，学习电商平台首页设计制作要素规范；电商平台首页设计流程；电商平台首页的布局和电商网页的设计原则 6．灵活使用平面设计软件表现电商平台首页设计案例的表现力和传达力 电商平台首页设计 项目2. TWO 项目描述 Studio公司的主要业务范围是售卖高品质HiFi耳机和数码配件等。Studio公司本次新推出一款头戴式耳机，外观潮流时尚，是很多潮人首选的耳机。为了使Studio公司得到最大程度的推广，建立客户信用度，增加销量，需要对该项目进行网站设计，要求分类明确，色彩明快，产品直观吸引客户购买。 通过收集资料和小组讨论确定此项目定位与风格。经过讨论，需要设计的模块大体包含网站Logo、导航栏、Banner、商品内容区域和页脚。 设计网站就像一个工程一样，有一定的工作流程，要从了解客户需求开始，有计划地工作下去。只有了解网站制作的基本流程，才能制作出更好、更合理的网站。电商平台首页设计流程可以分为以下几步。 1．网站前期策划，包括网站主题和了解客户设计需求 网站主题是网站的中心内容，用于指明网站的主要内容。网站必须要有一个明确的主题。 　网站建设的目的 　网站的服务和产品 　企业的产品和服务 　企业的产品和服务的表现形式 2．收集资料 在网站前期策划完成之后，就要进行网站设计所需资料的收集。网站的首页主要包括文案、图形、多媒体等内容。搜集素材时，要注意版权问题。 3．正式设计制作网页 策划好主题和收集好素材后，就进入网页设计制作阶段了。首先对网站的整体风格进行规划，主要包括网站的整体色彩、结构、字体、背景等元素。 UI设计项目教程 任务1：　耳机网站首页设计 店招图绘制效果 UI设计项目教程 任务1：　耳机网站首页设计 轮播图制作效果 UI设计项目教程 任务1：　耳机网站首页设计 推荐图制作效果 UI设计项目教程 任务1：　耳机网站首页设计 资讯图制作效果 UI设计项目教程 任务1：　耳机网站首页设计 页尾制作效果 UI设计项目教程 任务1：　耳机网站首页设计 最终效果 UI设计项目教程 任务2：　商品详情页面设计 购买界面绘制效果 UI设计项目教程 任务2：　商品详情页面设计 详情制作效果 UI设计项目教程 任务2：　商品详情页面设计 详情制作效果 UI设计项目教程 任务2：　商品详情页面设计 最终效果 UI设计项目教程 必备知识 1．网页界面的构成 网页界面包括网站Logo、导航栏、Banner、内容栏和版尾。 Logo的大小标准：88×31为普通规格；120×60为一般大小规格；120×90为大型Logo。好的Logo所具备的条件：符合国际标准，精美独特，兼容网站风格，能体现网站类型。 导航栏是索引网站内容和快速访问所需内容的辅助工具。同级项目数以3～7项为宜。 Banner是可由图像、文字、动画结合而成的网页栏目，主要作用是展示网站的广告内容。 内容栏是网页内容的主体，由一个或多个子栏组成，包含网站提供的所有信息和服务项目。内容可以是文字、图 像，或者两者相结合。 版尾可以申明版权、法律依据及各种提示信息。版权的书写应符合所在国家的法律依据，以及遵循一般书写习惯。 除此之外，版尾处可以提供一个导航条，为将页面滚动到底的用户提供一个导航方式 UI设计项目教程 必备知识 2．网页版式设计的基本内容 网页的标题设计　好的标题设计可令人赏心悦目，能形成网页的整体风格。标题所在的栏目一般在网页的上方，并左右贯穿整个网页。标题的背景可以使用动态或静态的图片，主要由网页的交互式特性决定。 文字的编排