-
1 教学内容
-
2 练习案例
网页效果图的设计
1、明确网页各板块主次关系按照从上至下、从左至右的原则进行区分
必备元素:
网站标志/标题(Logo)
网站导航(menu)
网站主场景动画,焦点图轮播(banner)
内容区(新闻 企业简介 产品展示 服务项目……)
版权信息(版权所有、联系方式)footer
可选元素:
搜索:门户、购物、旅游、学术(行业内容网站)……
电话:公司内有客服或相关业务部门
在线客服
流量统计:百度凤巢
浏览区域放左边,功能区域放右边
列表区域放左边,内容区域放右边
2、网页各元素的基本设置
明确各元素之间的主次关系与强弱对比
网页设计排版的元素都可以按照我们对内容的理解对其进行主次的区分。
对该强调的内容采用各种方式对其视觉感进行加强。
常用方式:
色彩(饱和度越高越能吸引注意力,但是会有low低档的感觉)
明暗(浅色主色,深色更突出)
大小、远近
疏密(留白)
位置(左上重要,右下次要)
间距尽量使用:2、5、10的倍数
3、常规网页布局要点
(1)采用方块布局法:横屏竖直的进行布局,不要使用弧形,不规则形状进行板块布局
(2)布局不做突破,可以从设计的颜色,风格上进行调整
(3)响应式网站,让网页内容布局不固定,可以根据不同显示器的尺寸进行流动调整
(4)各版块主从关系
LOGO与导航尽可能设计在网站的头部并采用平铺的形式,需要突出、醒目、方便浏览者试用。
背景、内容区尽可能简洁化,颜色选择上尽可能低纯度,色相与明度变化不要太大,追求整体性、统一性、协调性。
LOGO、导航、按钮、标题等需要突出的元素需要设计得明显一些,颜色选择上纯度调高,各板块对比加强。
但这几个元素之间同样要注意协调性,否则各元素相互冲突,整个画面就杂乱无章。
4、常见效果图的布局形式






5、根据以上的方法,设计制作下图网页效果图


