平面设计项目实战07家居商城网页界面设计

BUSINESS平面设计项目实战目

录contents01房地产海报设计02奶茶促销广告设计03玫瑰花茶包装设计04教育机构VI设计05绘画类书籍封面设计06旅游画册设计07家居商城网页界面设计08商城类App界面设计项目七家居商城网页界面设计项目导读网站是企业、单位或个人通过互联网对外宣传的重要窗口。网页是网站的基本构成元素，是承载各种网站应用的平台，是一种可以在互联网上传输的、需要通过浏览器来阅读的文件。点击跳过情景项目导读精美的网页界面对于提升品牌或个人形象至关重要。点击跳过情景项目导读本项目以家居商城网页界面为例，介绍网页界面设计的相关知识，以及使用Photoshop2021软件制作网页界面的方法。点击跳过情景学习目标【知识目标】了解UI设计的概念。了解网页界面的组成结构。了解网页界面的尺寸规范。了解网页界面设计的常用布局。掌握网页界面的制作方法和技巧。【能力目标】能够根据设计需求分析网页界面的设计思路，确定设计风格。能够使用Photoshop2021软件制作网页界面。【素质目标】提升观察事物的能力和审美能力。加强基础知识的学习，为个人的长远发展打下坚实的基础。项目导航一、UI设计概述二、网页界面设计概述三、网页界面设计常用布局优秀作品赏析项目实训项目实施项目分析一、UI设计概述一、UI设计概述UI是userinterface的缩写，泛指用户界面，是系统和用户交互的媒介，因此，UI设计又称用户界面设计。UI设计界面设计交互设计用户研究一、UI设计概述（1）界面设计界面设计是指对界面的外观进行设计。本项目将围绕PC端界面设计中的网页界面设计进行讲解。界面设计根据载体的不同PC端界面设计针对电脑的界面设计网页界面设计应用软件界面设计移动端界面设计其他界面设计一、UI设计概述（2）交互设计交互设计是指对界面的交互行为进行设计，使交互方式可用、易用。交互设计师需要设计产品的结构关系图操作流程图软件框架设计和操作规范（3）用户研究用户研究是指通过分析目标用户的需求、认知心理、操作行为等特性，明确产品的概念和细节，使产品设计更符合用户的习惯和期待。课堂小结（1）界面设计（2）交互设计（3）用户研究二、网页界面设计概述二、网页界面设计概述网页界面设计主要是设计师根据企业希望向浏览者传递的信息，对网站功能进行规划，对网页界面效果进行设计和美化。优秀的网页界面设计需要做到逻辑清晰、版式优美，以吸引浏览者注意力，达到传递信息、提高企业互联网品牌形象的作用。在设计网页界面之前，我们要简单了解网页界面的组成结构和尺寸规范。二、网页界面设计概述（一）网页界面的组成结构不同类型、不同用途的网页，其内容有所不同，但其界面的主要组成结构是相似的。主体内容页首页尾网站标志导航栏Banner网页界面页首主体内容页尾二、网页界面设计概述（一）网页界面的组成结构1．页首页首位于网页界面顶部，是网页的重要功能区域。页首网站标志整个网站的形象标识；根据浏览者的阅读习惯，浏览者在网页界面左上角停留机会最大，因此网站标志一般位于网页界面左上角；此外，在网页界面顶部还可以设置网站宗旨、宣传口号、广告标语等内容导航栏一般由多个按钮或文本组成，用于展示网站的结构和内容分类，可以帮助浏览者在网站的不同网页之间跳转。页首网站标志导航栏二、网页界面设计概述2．主体内容它们不仅能直观地表达信息内容，还能装饰网页，增加网页吸引力，提升浏览者的浏览体验。主体内容网页广告（如Banner）产品图像装饰图像文本（一）网页界面的组成结构主体内容Banner二、网页界面设计概述（一）网页界面的组成结构3．页尾页尾位于网页界面底部。页尾一般包括网站所属企业的名称地址联系方式版权信息备案信息页尾二、网页界面设计概述设置网页尺寸是网页界面设计的第一步。（二）网页界面的尺寸规范尺寸规范网页高度一般没有限制，可根据网页内容灵活设置网页宽度定宽网页内容区域宽度固定自适应网页内容区域宽度跟随显示屏自动变化二、网页界面设计概述（二）网页界面的尺寸规范下面将针对定宽模式进行介绍。网页界面宽度与显示屏宽度息息相关。市面上，显示屏最常用的分辨率为1920px×1080px，最小的分辨率为1024px×768px。因此，网页界面宽度一般为1920px，如果要设计能够满足所有浏览者的网站，网页界面宽度要小于1024px。课堂小结（一）网页界面的组成结构（二）网页界面的尺寸规范三、网页界面设计常用布局三、网页界面设计常用布局网页布局是指合理规划网页的栏目和版块，以最适合浏览的方式将网页内容（如文字、图像、动画等元素）排放在网页的相应位置。网页界面设计的常用布局国字型工字型满版型框架型标题文本型分割型三、网页界面设计常用布局（1）国字型国字型又称同字型。国字型布局适用于内容丰富的大型网站。网页界面顶部网站标志导航栏Banner主要内容可在主要内容的左、右两侧分别安排导航菜单广告其他栏目最下方是网页页尾网站基本信息联系方式版权声明三、网页界面设计常用布局（2）工字型采用工字型布局的网页界面能给浏览者整齐、干净的感觉。工字型布局适用于购物类、服务类企业网站。网页界面网页页首和主体内容中的Banner一般采用通栏形式，铺满网页的首屏区域Banner以下的内容以相对窄一些的宽度整齐排列直至页尾页尾与页首呼应，采用通栏形式安排基本信息知识库首屏是用户打开网页后第一眼看到的画面。三、网页界面设计常用布局（3）满版型满版型布局是以一张精美的图片作为网页的设计中心，通过合并或调整字体颜色弱化或简化导航栏，突出主体内容，使网页效果如同一张宣传海报。采用满版型布局的网页界面能给人舒展、大方的感觉，使视觉传达效果更加直观、强烈，缺点是会导致网页打开速度慢。三、网页界面设计常用布局（4）框架型采用框架型布局的网页界面结构清晰、一目了然，便于快速浏览。框架型布局适用于大型论坛或网站的后台管理界面。框架型布局左右框架型上下框架型综合框架型三、网页界面设计常用布局（4）框架型采用框架型布局的网页界面结构清晰、一目了然，便于快速浏览。框架型布局适用于大型论坛或网站的后台管理界面。框架型布局左右框架型上下框架型综合框架型三、网页界面设计常用布局（4）框架型采用框架型布局的网页界面结构清晰、一目了然，便于快速浏览。框架型布局适用于大型论坛或网站的后台管理界面。框架型布局左右框架型上下框架型综合框架型三、网页界面设计常用布局（5）标题文本型标题文本型布局的网页顶部是网页的标题或Banner，下面是网页的正文，并且网页内容以文本为主。标题文本型布局适用于文章界面或注册界面。三、网页界面设计常用布局（6）分割型它是将网页内容安排在多个大小不同的版块中（内容多的、重要的版块面积大，反之版块面积小），再像拼图一样，将版块拼合成一个完整的网页。采用分割型布局的网页界面主次分明、形式感极强，能将内容的重要性和层次性体现在网页上，从而引导浏览者按顺序进行阅读。分割型布局斜线分割型块面分割型主题分割型等距分割型三、网页界面设计常用布局（6）分割型它是将网页内容安排在多个大小不同的版块中（内容多的、重要的版块面积大，反之版块面积小），再像拼图一样，将版块拼合成一个完整的网页。采用分割型布局的网页界面主次分明、形式感极强，能将内容的重要性和层次性体现在网页上，从而引导浏览者按顺序进行阅读。分割型布局斜线分割型块面分割型主题分割型等距分割型三、网页界面设计常用布局（6）分割型它是将网页内容安排在多个大小不同的版块中（内容多的、重要的版块面积大，反之版块面积小），再像拼图一样，将版块拼合成一个完整的网页。采用分割型布局的网页界面主次分明、形式感极强，能将内容的重要性和层次性体现在网页上，从而引导浏览者按顺序进行阅读。分割型布局斜线分割型块面分割型主题分割型等距分割型三、网页界面设计常用布局（6）分割型它是将网页内容安排在多个大小不同的版块中（内容多的、重要的版块面积大，反之版块面积小），再像拼图一样，将版块拼合成一个完整的网页。采用分割型布局的网页界面主次分明、形式感极强，能将内容的重要性和层次性体现在网页上，从而引导浏览者按顺序进行阅读。分割型布局斜线分割型块面分割型主题分割型等距分割型课堂小结（1）国字型（2）工字型（3）满版型（4）框架型（5）标题文本型（6）分割型项目分析（一）设计需求本项目主要为家居商城网站设计网页界面。该网站的目标消费者大多在30岁左右，并且网站中销售的产品多为现代风。因此，在设计网页界面时，界面风格不仅要体现出家居商城网站的整体风格，使消费者对销售产品一目了然，还要符合消费者的消费心理和审美倾向，以吸引消费者浏览网页。项目分析（二）设计思路根据设计需求，结合家居商城的风格和面向群体，具体设计思路如下。首先，根据家居商城的风格和目标消费者，在网页界面中采用简约的设计风格，使其与网站中的产品风格统一。其次，在网页界面中使用产品实拍图，清晰、明确地向消费者展示该网站中售卖的产品，便于消费者选择。最后，采用中规中矩的工字型布局安排网页内容，给消费者一种稳定、值得信赖的感觉。项目分析（三）设计风格该网页界面计划以深蓝色为主色调，给人沉稳、端庄的感觉，衬托出网页界面的高级感，使消费者更加信赖网站中的产品；以黄色为辅色，与蓝色形成强烈反差，更好地突出网页中的重点信息，并打破因大面积使用蓝色而造成的沉闷感。家居商城网页界面的最终效果如图所示。项目实施网页界面最终效果可参考本书配套素材“素材与实例\项目七\源文件”文件夹中的“家居商城网页界面.psd”文件。本项目使用Photoshop软件制作网页界面。制作时，我们将整个界面分成3个部分讲解首先制作页首然后制作主体内容最后制作页尾项目实施（一）制作页首制作页首时，首先添加参考线确定网页内容的安全区域；然后使用提供的素材和“横排文字工具”，制作企业标志和网页界面右上方的文本；接着使用“横排文字工具”和“直线工具”制作导航栏，并使用“圆角矩形工具”、“椭圆工具”和“直线工具”制作搜索框；最后使用相应的对齐或分布按钮规范各内容的位置。制作页首

点击此处播放微课提示在工具属性栏中单击“对齐并分布”按钮，在打开的面板的“对齐”下拉列表中选择“选区”（见图），此时单击对齐或分布按钮，会以当前选区为标准；在“对齐”下拉列表中选择“画布”，单击对齐或分布按钮时，会以整个画布为标准。项目实施（二）制作主体内容制作主体内容

点击此处播放微课我们将网页界面的主体内容分成两部分讲解，首先制作上方的Banner，然后制作下方的其他内容版块。1．制作Banner制作Banner时，首先置入素材并调整其位置，作为Banner中的图像；然后复制图像，将原图像栅格化，为其填充纯色，并使用图层混合模式、不透明度和“高斯模糊”滤镜制作图像的投影；接着使用“钢笔工具”绘制选区，并为选区填充渐变色，制作图像背景；最后使用“横排文字工具”、“圆角矩形工具”、“三角形工具”和“椭圆工具”制作Banner中的文本信息和滚动点。项目实施（二）制作主体内容2．制作其他内容版块制作其他内容版块时，首先绘制分类版块的图标区域；然后置入素材，调整其位置，制作各内容版块的产品图像；最后使用“横排文字工具”、“圆角矩形工具”和“直线工具”制作产品文案、按钮和装饰线条。提示在执行“自由变换”命令时，选择“编辑\首选项\工具”菜单项，在打开的“首选项”对话框中勾选“在使用‘变换’时显示参考点”复选框，可以显示变换的参考点。按“Alt+Ctrl+Shift+T”组合键复制并应用上一次自由变换操作时，如果复制的对象位于同一图层中，且无法对其进行单独编辑时，可以先按“Ctrl+H”组合键，再按“Alt+Ctrl+Shift+T”组合键，使复制对象位于新图层中。项目实施（三）制作页尾制作页尾时，首先使用“矩形工具”绘制一个矩形；然后将置入的素材剪贴到矩形中，作为页尾背景；最后使用提供的素材和“横排文字工具”制作页尾中的内容。制作页尾

点击此处播放微课项目实训本实训要求利用本项目所学知识制作汽车网站首屏，效果如图所示。首屏最终效果可参考本书配套素材“素材与实例\项目七\源文件”文件夹中的“汽车网站首屏.psd”文件。项目实训汽车网站首屏以黑白色为主，给人高雅、庄重、高级的感觉，可以更好地衬托出产品的光泽和质感，突出主要物体。此外，在界面中使用红色为点缀色，能够更好地突出重要信息，为画面添加色彩，赋予画面新的生机。汽车网站首屏的制作步骤见教材。优秀作品赏析此外，如图所示是一些优秀