版式设计（第二版）课件：网页界面版式设计

网页界面版式设计一

、网页界面版式设计的概念网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地讲，网站就是由网页组成的。网页界面版式设计是指对网页中的文字、图片、动画、音频、视频等按照一定的规律和艺术化处理方式进行编排和布局，以增强用户体验，达到有效传递信息的目的，如图5-6-1所

示

。

网页界面版式设计图5-6-

1

网页界面版式设计

网页界面版式设计二、网页界面的尺寸网页界面不像印刷品一样，它没有固定的尺寸，它的大小与显示器的大小及分辨率有关。常见的电脑显示器的分辨率及各分辨率电脑显示器的市场占有率如图5-6-2所示；移动端网页

的尺寸则会因手机屏幕的不同而改变，H5页面的版式设计稿一般宽度为640

px,高度为1

136px,移动端的网页界面如图5-6-3所示。1920px×1080px市场占有率13.49%1620px×900px市场占有率2.62%1440px×900px市场占有率4.75%1366px×768px市场占有率6.28%1024px×768px市场占有率2.83%图5-6-2

各分辨率电脑显示器的市场占有率

网页界面版式设计图5-6-3

移动端网页界面

网页界面版式设计三、网页界面版式设计的程序1.分析定位根据网站用户需求以及具体网页的性质和内容来确定版式设计的风格，最终形成初步的版

式设计思路。2.设计构思(1)设计网站的进入界面、首界面以及二级界面、三级界面。(2)对网页界面的图片、文字、视频等内容进行初步编排，确定网页界面的结构。3.确定方案制定版式设计方案，综合考虑版面色彩、结构等，制作出平面设计稿。4.网页切割确定版式设计方案后，对版面中的图片进行合理切割，以保证网页信息加载的速度。5.网页后台制作当所有的设计程序完成后，进行图片链接及交互设计，可开展网页测试来确定网页界面流

程是否合理、用户体验是否良好，最终完成网页界面设计。

网页界面版式设计

网页界面版式设计四、网页界面版式1.

“国”字型版式“国”字型版式也可以称为“同”字型版式，

其特点是网页界面的最上面是网站的标志、横幅

广告和导航栏，中间是网页的主体内容，最下面

是网页的版权声明等信息，如图5-6-4所示。鲜O图5-6-4

采用“国”字掣版式的网页界面2.拐角型版式拐角型版式与“国”字型版式类似，网页界面顶部都是网站的标志、导航栏和横幅广告。

拐角型版式适用于购物类、门户类网站网页界面的设计，如图5-6-5所示。

网页界面版式设计图5-

6-

5

采用拐角型版式的网页界面3.左右框架型版式左右框架型版式常用于一

些大型论坛和企业网站的网页

界面，网页界面左侧一般为导

航栏链接，右侧为网页的主体内容，如图5-6-6所示。

网页界面版式设计图5-6-6

采用左右框架型版式的网页界面4.海报型版式采用海报型版式的网页界面，看起来就像平时见到的海报一样，中间是一幅很醒目、设计精美的图片，图片周围设计有文字信息和链接。海报型版式常用于时尚类网站的首页，其优

点是版面美观，有视觉冲击力，缺点是网页打开速度慢，如图5-6-7所示。

网页界面版式设计图5-6-

7

采用海报型版式的网页界面5.斜线分割型版式斜线或者斜着的物体，其本身似乎自带张力，将其用在网页界面的版式设计中，可增强版面的视觉张力。当网页界面设计过于中规中矩、无亮点时，打破这种中规中矩就尤为重要。打破中规中矩的方法有很多，而使用斜线分割版面就是其中一种常用的方法，如图5-6-8所示。

网页界面版式设计图5-6-8

采用斜线分割型版式的网页界面DARK

CHOCDLATE60%WITH

SALTEDALMONDS6.个性化版式个性化版式适用于一些专题性网站的网页界面，它是在基础网页界面版式的基础上增加一

些独特、另类的元素，以实现与众不同的网页界面设计效果，如图5-6-9至图5-6-11所示。

网页界面版式设计图5-6-9

采用个性化版式的