第8章 网站页面布局和模块设计ppt课件.ppt
![资源得分’ title=](/images/score_1.gif)
![资源得分’ title=](/images/score_1.gif)
![资源得分’ title=](/images/score_1.gif)
![资源得分’ title=](/images/score_1.gif)
![资源得分’ title=](/images/score_05.gif)
《第8章 网站页面布局和模块设计ppt课件.ppt》由会员分享,可在线阅读,更多相关《第8章 网站页面布局和模块设计ppt课件.ppt(71页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、在此输入您的封面副标题第8章 网站页面布局和模块设计第8章 网站页面布局和模块设计 网站页面布局 网站LOGO设计 网站导航设计 网站导航设计 UI 学习目标了解常规网站的布局。1掌握熟悉2熟悉网页中各个模块的设计规范。了解掌握网页基本模块的设计方法。3 目录8.18.1网站页面布局点击查看本小结知识架构【实例12】:咨询公司logo8.58.5【实例13】:导航设计8.68.6网站logo设计8.28.2点击查看本小结知识架构网站导航设计8.38.3点击查看本小结知识架构【实例14】:耳麦banner8.78.7网站banner设计8.48.4点击查看本小结知识架构 8.1 网站网站UI视觉
2、规律视觉规律网站UI视觉规律常见的网页布局方式 知识架构 8.2 网站logo设计Logo概述网站logo的作用 知识架构8.2.3网站logo表现形式8.2.4网站logo设计流程 8.3 网站导航设计8.3.1认识网站导航8.3.2网站导航的作用 知识架构8.3.3导航在网站中的位置8.3.4网站导航形式 8.4 网站banner设计8.4.1认识网站banner8.4.2Banner设计特点 知识架构8.4.3Banner设计原则8.4.4Banner构图方式 8.1 网站页面布局在设计网站界面时,将页面中的模块进行规范化的设计和合理的布局,能够实现网页内容的结构化,使访问者直观、迅速的
3、找到需要的信息。然而该如何对网页进行布局?又该怎样设计网页中的各个模块呢? 8.1.1 网站UI视觉规律 8.1 网站页面布局视觉焦点分布图通常网站的访问者不会将网页内容全部阅读,而是采取避重就轻的原则,阅读一些醒目的内容或者感兴趣的信息,因此在进行网页布局前,首先要了解一下网站访客的浏览模式。知识点概述 8.1.1 网站UI视觉规律 8.1 网站页面布局F模式是指用户沿着左侧垂直浏览而下,先去寻找页面中每个段落开头的兴趣点,如果发现了感兴趣的点,用户就会从该处开始沿水平线方向的阅读。最终结果就是用户的视线呈F型。F模式F模式通常F模式会出现在一些以文字为主的网页中,例如博客、论坛等。用户一般
4、极少逐字阅读文字,因此初始段落,副标题和要点都要保持醒目。 8.1.1 网站UI视觉规律 8.1 网站页面布局Z模式是指用户的浏览视线沿着从左到右自上而下的阅读方式。用户首先关注的页头水平方向的内容,当视线抵达尾部时则又重复遵循着水平方向从左到右的习惯模式,人眼以这种模式移动时,浏览视线形成了一个虚构的“Z”形。Z模式Z模式Z模式几乎可以适用到任何的网页交互,是能够将重要信息自然而然的突出。Z模式的优点就是简单,简化布局可以增加转化率。 8.1.2 常见的网页布局 8.1 网站页面布局 常见的页面布局方式 8.1 网站页面布局“国”字型“国”字型布局是网页上使用最多的一种结构类型,是综合性网站
5、页面中常用的版式。通常上方为引导栏、header、导航栏,中间为内容区,最底端为版权信息。将内容区分为左、中、右三大块,通常左右两侧为导航、友情链接,中间为内容区域。“国”字型布局 常见的页面布局方式 8.1 网站页面布局“T”字型“T”型布局与“国”字型布局很相近,页面上方一致,仅仅只是在形式上略有区别。网页上边和左右相结合的布局,通常右边为主要内容,所占比例比较大。“T”字型布局 常见的页面布局方式 8.1 网站页面布局标题正文型布局标题正文型布局即上方为网页标题或类似的一些内容,中间为正文部分,下方为版权信息。标题正文型布局 型布局 常见的页面布局方式 8.1 网站页面布局左右分割型布局
6、结构,就把整个版面分割为左右两个部分,分别在左或右配置文案。通常会在其中一侧放置一列文字链接,在文字链接上方会有标题或logo。左右分割型布局 常见的页面布局方式 8.1 网站页面布局与左右分割的布局结构类似,区别仅仅在于上下框架页面的导航和logo在上方,正文内容在下上下分割型布局 常见的页面布局方式 8.1 网站页面布局封面型布局基本出现在一些网站的首页,大部分直接使用极具设计感的图像或动画作为网页背景,然后添加一个“进入”按钮即可。封面型布局 8.2 网站logo设计网站logo是网站特色和内涵的集中体现,有利于传递网站的定位和经营理念,便于用户识别。 8.2 网站logo设计本节将从l
7、ogo概述、网站logo的作用、网站logo表现形式和网站logo设计流程四个方面进行详细讲解。 概述 8.2 网站logo设计logo中文译为“标志”,标志是代表特定的事物,具有象征意义的图形符号。知识点概述网站logo 概述 8.2 网站logo设计与标志相关的几个容易混淆的概念 网站logo的作用 8.2 网站logo设计1传递信息好的logo会反映网站及设计者的某些信息或意图,特别是对一个商业网站来话,访问者可以从中基本了解到这个网站的类型或者内容。2树立形象网站logo是企业形象的代表,企业强大的整体实力、完善的管理机制、优质的产品和服务,都被涵盖于标志之中。3利于竞争网站logo被
8、赋予明确的意义和目的,优秀的logo个性鲜明,视觉冲击力强,便于识别,促进消费。 网站logo表现形式 8.2 网站logo设计特定图案特定图案指的是通过特定的图案代表logo。QQlogo 特定图案的优缺点 8.2 网站logo设计 网站logo表现形式 8.2 网站logo设计特定文字文字本身属于表意符号。特定文字将文字适当加以变形,用一种形态加以统一。唯品会和淘宝网logo 特定文字的优缺点 8.2 网站logo设计 网站logo表现形式 8.2 网站logo设计字图结合字图结合是一种表象、表意的综合,指文字与图案结合的设计,兼具文字与图案的属性。图文并茂,相互衬托又相互补充。字图结合并
9、不是将图形和文字简单的拼凑组合,而是发挥两者各自的优势,完美的融合在一起。苏宁易购logo 字图结合的优缺点 8.2 网站logo设计 网站logo的设计流程 8.2 网站logo设计 8.3 网站导航设计导航是网页UI设计中不可或缺的基础元素,是网站信息结构的基础分类,是用户浏览信息的路标。用户通过导航可以直观的了解网站的内容及信息的分类方式。 8.3 网站导航设计本节将从认识网站导航、网站导航的作用、导航在网站中的位置和网站导航形式四个方面进行详细讲解。 认识网站导航 8.3 网站导航设计网站导航是为了方便用户在网页间来回切换,引导用户在网站中到达想要到达的位置,通常位于网页的上端,网站导
10、航的设计应更加直观而准确,并最大限度的为用户方便而考虑,查找信息更快捷,操作更简便,导航设计决定着用户是否方便使用该网站。知识点概述网站导航 网站导航的作用 8.3 网站导航设计1引导页面跳转网站页面中各种形式与类型的导航都是为了帮助用户更加方便的跳转到不同的页面。2定位用户位置导航可以帮助用户识别当前页面与网站整体内容的关系,以及当前页面与其他页面之间的关系。3清理内容与链接的关系网站的导航是对网站整体内容的一个索引和高度概括,功能类似于书本的目录,可以帮助用户快速找到相关的内容和信息。 导航在网站中的位置 8.3 网站导航设计由于早期网页技术不发达,以及受浏览器属性的影响,通常在下载网页的
![第8章 网站页面布局和模块设计ppt课件.ppt_第1页](https://file.taowenge.com/fileroot2/2022-5/11/30e7338a-7462-4256-9376-5f6fe4f9c199/30e7338a-7462-4256-9376-5f6fe4f9c1991.gif)
![第8章 网站页面布局和模块设计ppt课件.ppt_第2页](https://file.taowenge.com/fileroot2/2022-5/11/30e7338a-7462-4256-9376-5f6fe4f9c199/30e7338a-7462-4256-9376-5f6fe4f9c1992.gif)
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 第8章 网站页面布局和模块设计ppt课件 网站 页面 布局 模块 设计 ppt 课件
![提示](https://www.taowenge.com/images/bang_tan.gif)
限制150内