app.vue 跳转页面_【在线教学】第8章 网站页面布局和模块设计

第8章  网站页面布局和模块设计

8.1 网站页面布局

在设计网站界面时，将页面中的模块进行规范化的设计和合理的布局，能够实现网页内容的结构化，使访问者直观、迅速的找到需要的信息。

1、网站UI视觉规律

通常网站的访问者不会将网页内容全部阅读，而是采取避重就轻的原则，阅读一些醒目的内容或者感兴趣的信息，因此在进行网页布局前，首先要了解一下网站访客的浏览模式(F模式和Z模式)。

2、常见的网页布局：“国”字型布局、“T”字型布局、标题正文型布局、左右分割型布局、上下分割型布局、封面型布局等。

8.2 网站logo设计

网站logo是网站特色和内涵的集中体现，有利于传递网站的定位和经营理念，便于用户识别。

1、logo概述：logo中文译为“标志”，标志是代表特定的事物，具有象征意义的图形符号。

2、网站logo的作用：传递信息、树立形象、利于竞争

3、网站logo表现形式：特定图案指的是通过特定的图案代表logo。特定文字将文字适当加以变形，用一种形态加以统一。字图结合是一种表象、表意的综合，指文字与图案结合的设计，兼具文字与图案的属性。

4、网站logo的设计流程：调研分析、挖掘要素、设计开发、标志修正

8.3 网站导航设计

导航是网页UI设计中不可或缺的基础元素，是网站信息结构的基础分类，是用户浏览信息的路标。用户通过导航可以直观的了解网站的内容及信息的分类方式。

1、认识网站导航：网站导航是为了方便用户在网页间来回切换，引导用户在网站中到达想要到达的位置，通常位于网页的上端，网站导航的设计应更加直观而准确，并最大限度的为用户方便而考虑，查找信息更快捷，操作更简便，导航设计决定着用户是否方便使用该网站。

2、网站导航的作用：引导页面跳转、定位用户位置、清理内容与链接的关系

3、导航在网站中的位置：顶部导航、底部导航、左侧导航和右侧导航

4、网站导航形式：标签形式导航、按钮形式导航、弹出菜单式导航、无框图标形式导航、多导航系统形式

8.4 网站Banner设计

网站作为一种全新的媒体，正逐步显示其独有的广告价值空间。网站Banner已经成为网络中最主要的广告形式。

1、认识网站Banner：Banner一般翻译为网幅广告、旗帜广告、横幅广告等，狭义的说是表现商家广告内容的图片，是互联网广告中最基本、最常见的广告形式。

2、Banner设计特点：视觉美观、色调统一、形式突出、大小限制严格、可以被点击

3、Banner设计原则：对齐原则、聚拢原则、留白原则、降噪原则、对比原则——醒目

4、Banner构图方式：左右式构图、正三角式构图、倒三角式构图、对角线式构图、扩散式构图