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．网页版式设计的基本内容网页的标题设计好的标题设计可令人赏心悦目，能形成网页的整体风格。标题所在的栏目一般在网页的上方，并左右贯穿整个网页。标题的背景可以使用动态或静态的图片，主要由网页的交互式特性决定。文字的编排通常情况下，适合网页正文显示的文字大小在12磅左右。图文的结合在网页的版式设计中，只使用文字并不适合人们长期阅读，所以网页在版式设计上采用图文结合的方式更为恰当。图文结合主要有两种表现形式：一个是文字匹配图片的形式，图形是网页的主体，文字是辅助存在；另一个是图形匹配文字的形式，要把握图形和文字的关系，根据不同类别的网站灵活搭配。页面的节奏韵律页面的节奏韵律需要根据设计的风格和受众的情感综合起来体会。一个音乐类的网站，给人的感觉是轻松欢畅的；一个新闻类网站，给人的感觉是节奏快速的；而一个军事类网站给人的感觉是严肃庄重的。所以，这就需要设计者根据内容来选择设计风格。UI设计项目教程任务拓展浏览B&O品牌的电商网站，观察其商品页面并对其商品页面进