《UI视觉设计案例教程》(共6章)第4章-网页界面设计.pptx

第4章网页界面设计

章前导读随着互联网的发展和普及，网络已成为人们获取信息的重要途径，而网页是直接向人们提供信息的新媒体，其界面设计的好坏也成为影响人们浏览体验的重要因素。02本章首先介绍网页界面设计的基础知识和设计规范，再实战案例讲解网页界面的一般设计方法和技巧。

ReviewOfWorkContent学习目标·了解网页界面的组成·了解常见的网页界面布局及版块规划技巧·了解网页界面设计的要点·了解网页界面设计的尺寸规范·了解网页界面设计中常用的字体和字号·掌握网页界面的一般制作方法

第4章网页界面设计4.14.24.3界面设计规范案例实战基础知识

4.1基础知识4.1.1网页界面的组成网页界面一般由页首、主体内容和页脚三部分组成（如图所示），下面分别介绍。Logo导航栏Banner页首主体内容页脚

1．页首位于网页的顶部，由Logo和导航栏等组成，是网页的重要功能区域，在整个网站中占重要地位。Logo是网站的标志，通常放在网站页面的左上角，也可根据需要放在其他位置，如图4-2所示。图4-2网站Logo

2．主体内容网页主体内容主要由图像和文字组成，图像主要有网页广告、产品图像、装饰图像、按钮和图标等，文字是网页的主要内容，可通过对文字的字体、字号、颜色、行距、对齐方式，底纹和边框等进行设计。图4-4网页中的图像

3．页脚包括网站的版权信息、备案信息和联系方式等，整体高度可依内容而定，如图4-6所示。图4-6页脚

4.1.2常见网页界面的布局12345工字型国字型POP型对称型分割型常见网页界面的布局有工字型、国字型、POP型、对称型和分割型等，下面简要介绍这几种布局类型。

类型特点工字型网页页首和主体内容中的Banner一般采用通栏形式，铺满网页的首屏区域，页脚与页首呼应。给浏览者整齐、干净的感觉。适用于购物类、服务类企业网页。国字型国字型布局的基本形式是将网站的Logo、导航栏及Banner等置于顶部，下方安排网页的主体内容，，最后由页尾组成“国”字的底部边框，将主体内容包围。适用于门户、购物类等内容丰富的大型网站。POP型以一张精美的图片作为页面的设计中心，通过合并或调整字体颜色弱化或简化导航项，突出主体内容，页面效果如同一张宣传海报。页面设计简洁、优美，具有极强的视觉冲击力，缺点是网页打开速度慢。对称型采用左右或上下对称的方式安排网页内容,页面极具震撼力。分割型将网页内容安排在多个大小不同的版块中，再像拼图一样，将版块拼合为一个完整的页面。常见的分割方式有斜线分割、块面分割、主题分割、等距分割等。

常规文字的字号可设置为12像素、14像素、16像素、18像素等。常见网页界面的布局有工字型、国字型、POP型、对称型和分割型等，下面简要介绍这几种布局类型。标题、导航文字可设置为20像素、22像素、24像素等。将图片、文字等信息进行层叠，打破传统的左右、上下布局，则能增加画面的层次感，使枯燥的图文说明方式更具设计感。工字型对称型国字型

POP型分割型

4.1.3网页布局的技巧网页中版块的位置、大小、间距及叠加关系等，是网页布局中非常重要的内容，如果处理不当很容易造成网页界面效果呆板或混乱，降低浏览者的浏览体验。下面介绍几种常见的网页布局技巧。1.延伸2.曲线3．过渡4．隐藏5．层叠6．错位

1．延伸当两个版块的内容有所关联时，将较小的版块延伸到较大的版块上，使两个版块重叠一部分，则可以很好地打破两个版块之间的分界线。版块的对齐与延伸

2．曲线通过改变分割线的形状（如将直线改为曲线、折线等）能有效地解决界面呆板问题。注:虽然两个版块在效果上呈现出曲线过渡，但实际上版块的形状依然是矩形，只是上方版块底部填充了白色的曲线形状。采用曲线分割的版块布局

3．过渡对称型是比较流行的网页布局方式之一。界面简洁大气，有效避免因图片与文字叠加造成的混乱，避免版块间过渡生硬可将与版块内容相关的元素置于两个版块之间，对版块进行过渡处理。采用产品图片过渡的对称布局

将图片、文字等信息进行层叠，打破传统的左右、上下布局，则能增加画面的层次感，使枯燥的图文说明方式更具设计感。通过改变分割线的形状（如将直线改为曲线、折线等）能有效地解决界面呆板问题。Logo是网站的标志，通常放在网站页面的左上角，也可根据需要放在其他位置，如图4-2所示。风格定位：体现了网站的思想倾向和文化内涵。4．隐藏对于POP型界面布局来说，提炼信息内容，保留主要信息，隐藏次要信息，适当放大信息内容，则能使页面显得简洁、大气。隐藏次要信息的