平面设计项目实战 项目七 家居商城网页界面设计.pptx

平面设计项目实战BUSINESS目录contents绘画类书籍封面设计玫瑰花茶包装设计旅游画册设计奶茶促销广告设计商城类App界面设计家居商城网页界面设计教育机构VI设计房地产海报设计0306010705020408项目七家居商城网页界面设计项目导读点击跳过情景网站是企业、单位或个人通过互联网对外宣传的重要窗口。网页是网站的基本构成元素，是承载各种网站应用的平台，是一种可以在互联网上传输的、需要通过浏览器来阅读的文件。项目导读点击跳过情景精美的网页界面对于提升品牌或个人形象至关重要。项目导读本项目以家居商城网页界面为例，介绍网页界面设计的相关知识，以及使用Photoshop2021软件制作网页界面的方法。点击跳过情景学习目标【知识目标】了解UI设计的概念。了解网页界面的组成结构。了解网页界面的尺寸规范。了解网页界面设计的常用布局。掌握网页界面的制作方法和技巧。【能力目标】能够根据设计需求分析网页界面的设计思路，确定设计风格。能够使用Photoshop2021软件制作网页界面。【素质目标】提升观察事物的能力和审美能力。加强基础知识的学习，为个人的长远发展打下坚实的基础。项目导航一、UI设计概述二、网页界面设计概述三、网页界面设计常用布局项目分析项目实施项目实训优秀作品赏析一、UI设计概述一、UI设计概述UI是userinterface的缩写，泛指用户界面，是系统和用户交互的媒介，因此，UI设计又称用户界面设计。一、UI设计概述（1）界面设计界面设计是指对界面的外观进行设计。本项目将围绕PC端界面设计中的网页界面设计进行讲解。一、UI设计概述（2）交互设计交互设计是指对界面的交互行为进行设计，使交互方式可用、易用。（3）用户研究用户研究是指通过分析目标用户的需求、认知心理、操作行为等特性，明确产品的概念和细节，使产品设计更符合用户的习惯和期待。课堂小结（1）界面设计（2）交互设计（3）用户研究二、网页界面设计概述二、网页界面设计概述网页界面设计主要是设计师根据企业希望向浏览者传递的信息，对网站功能进行规划，对网页界面效果进行设计和美化。优秀的网页界面设计需要做到逻辑清晰、版式优美，以吸引浏览者注意力，达到传递信息、提高企业互联网品牌形象的作用。在设计网页界面之前，我们要简单了解网页界面的组成结构和尺寸规范。二、网页界面设计概述网站标志页首导航栏（一）网页界面的组成结构Banner不同类型、不同用途的网页，其内容有所不同，但其界面的主要组成结构是相似的。主体内容页尾二、网页界面设计概述网站标志页首导航栏（一）网页界面的组成结构1．页首页首位于网页界面顶部，是网页的重要功能区域。二、网页界面设计概述（一）网页界面的组成结构Banner2．主体内容它们不仅能直观地表达信息内容，还能装饰网页，增加网页吸引力，提升浏览者的浏览体验。主体内容二、网页界面设计概述（一）网页界面的组成结构3．页尾页尾位于网页界面底部。页尾二、网页界面设计概述（二）网页界面的尺寸规范设置网页尺寸是网页界面设计的第一步。二、网页界面设计概述（二）网页界面的尺寸规范下面将针对定宽模式进行介绍。网页界面宽度与显示屏宽度息息相关。市面上，显示屏最常用的分辨率为1920px×1080px，最小的分辨率为1024px×768px。因此，网页界面宽度一般为1920px，如果要设计能够满足所有浏览者的网站，网页界面宽度要小于1024px。课堂小结（一）网页界面的组成结构（二）网页界面的尺寸规范三、网页界面设计常用布局三、网页界面设计常用布局网页布局是指合理规划网页的栏目和版块，以最适合浏览的方式将网页内容（如文字、图像、动画等元素）排放在网页的相应位置。三、网页界面设计常用布局（1）国字型国字型又称同字型。国字型布局适用于内容丰富的大型网站。三、网页界面设计常用布局（2）工字型采用工字型布局的网页界面能给浏览者整齐、干净的感觉。工字型布局适用于购物类、服务类企业网站。知识库首屏是用户打开网页后第一眼看到的画面。三、网页界面设计常用布局（3）满版型满版型布局是以一张精美的图片作为网页的设计中心，通过合并或调整字体颜色弱化或简化导航栏，突出主体内容，使网页效果如同一张宣传海报。采用满版型布局的网页界面能给人舒展、大方的感觉，使视觉传达效果更加直观、强烈，缺点是会导致网页打开速度慢。三、网页界面设计常用布局（4）框架型采用框架型布局的网页界面结构清晰、一目了然，便于快速浏览。框架型布局适用于大型论坛或网站的后台管理界面。三、网页界面设计常用布局（4）框架型采用框架型布局的网页界面结构清晰、一目了然，便于快速浏览。框架型布局适用于大型论坛或网站的后台管理界面。三、网页界面设计常用布局（4）框架型采用框架型布局的网页界面结构清晰、一目了然，便于快速浏