网页板式做不好怎么办?-网页设计系列课图文教程
作者:huke88发布时间:2022年01月31日 08:01

虎课网为您提供字体设计版块下的网页板式做不好怎么办?-网页设计系列课图文教程,难度等级为初级练习,下面开始学习这节课的内容吧!



本节课讲解 网页板式做不好怎么办?同学们可以在下方评论区进行留言,老师会根据你们的问题进行回复,作业也可以在评论区进行提交。

 

课程核心知识点:网页设计中的板式要点。

 




那我们开始今天的教程吧。

 

1.网页是直接从平面设计过渡过来的互联网信息表达方式,所以最初的很多平面设计理论也就自然而然的发展到了网页这里,这里先单独讲下板式设计,板式是一个页面的根本,如图所示。

 

2.首先我们来看网页的构成,一个网页是由页头(Logo、导航、联系方式等)、主体、页脚三个部分组成,如图所示。

 

3.我们来看看苹果主页的板式构成,一般是由页头、导航、主体、页脚的顺序构成,也有时候导航界面会在页头上方,但是在正常情况下导航和页头会放在一个部分,如图所示。

 

4.像是二级页面的形式基本与首页相同,唯一区别是在右侧多了列表页面,例如下方澎湃新闻的页面,具体如图所示。

 

5.我们从用户角度来了解一下浏览习惯,浏览的习惯分为F型浏览与Z型浏览,红色部分为重点浏览的区域,F型浏览是最常用的浏览方式,将重要的信息排版在左侧传达的效果最佳,如图所示。

 

6.例如百度会将最上方几条搜索结果设置为广告位,根据用户的F型浏览习惯来投放广告,如图所示。

 

7.在百度新闻页面中,根据用户Z型浏览习惯将相关文章放置在了右侧,有利于提升用户的停留时间,如图所示。

 

8.以下是同平面设计基本原则:对比、重复、对齐、亲密性,推荐大家看《写给大家看的设计书》,如图所示。

 

9.接下来我们了解一下设计技巧与规范,信息传达在网页设计中是很重要的,所以首要的还是信息,如图所示。

 

10.在信息传达部分我们需要做好图文辅助,意思就是使用图片配合文字来更好的表达文章中的信息,如图所示。

 

11.图片固然重要,但也需要注重文字疏密对比的排版,文字相对图片带来的信息更加直观,如图所示。

 

12.清晰的视觉引导也是非常重要的一点,通俗的说就是页面不杂乱,利用用户的浏览习惯来进行视觉引导,如图所示。

 

13.好的颜色选择可以带来情绪的传达,在制作页面板式时可以利用颜色来丰富页面,如图所示。

 

14.以下是常见的页面布局,国字型布局也可以称为"字型,是一些大型网站所喜欢的类型,即最上面是网站的标题以及横幅广告条,接下来就是网站的主要内容,左右分列两小条内容,中间是主要部分,与左右一起罗列到底,最下面是网站的一些基本信息、联系方式、版权声明等,如图所示。

 

15.匡字型布局与国字型布局类似,它去掉了字形布局的最右边的部分,给主内容区释放了更多空间,如图所示。

 

16.三字型布局在页面上由横向两条色块将网页整体分割为3部分,色块中大多放置广告条与更新和版权提示,如图所示。

 

17.川字型布局整个页面在垂直方向分为三列,网站的内容按栏目分布在这三列中,最大限度地突出主页的索引功能,如图所示。

 

18.第五种就是海报型布局,这种类型基本上是出现在一些网站的首页,大部分为一些精美的平面设计结合一些小的动画,放上几个简单的链接,如图所示。

 

19.综合型布局顾名思义就是将上述几种类型综合运用各取所长达到更好的效果,如图所示。

 

20.回顾本节课所学的内容,同学们可在视频下方的评论区留言并提交作业,老师会根据提出的问题回复。

 

21.视频学百遍,不如上手练一练,你学会了吗!

 

以上就是网页板式做不好怎么办?-网页设计系列课图文教程的全部内容了,你也可以点击下方的视频教程链接查看本节课的视频教程内容,虎课网每天可以免费学一课,千万不要错过哦!


特别声明:以上文章内容仅代表作者huke88本人观点,不代表虎课网观点或立场。如有关于作品内容、版权或其它问题请与虎课网联系。
500+精品图书
20G学习素材
10000+实用笔刷
持续更新设计模板
立即领取

下载虎课APP

随时随地学技能
APP更方便
每天免费学课程
下载虎课网APP
随时随地学海量会员教程
特惠
充值
7折购
今日还在继续学习的你,太棒了!
7
折扣券可用于
年费无限VIP
立 即
使 用
此活动优惠不可与其他活动叠加使用
有效期:000000
消息
登录即可查看消息记录
建议
意见
官方
客服
在线咨询客服热线

您可以与在线客服进行沟通获得帮助

工作日:9:00~22:00节假日:9:00~18:00

联系在线客服

您可以电话联系客服进行沟通获得帮助

工作日:9:30~18:30

400-862-9191
虎课
积分
免费学习89000+个教程!
配套素材、源文件一键下载!
昨日学员已学习了36,588
并提交了234份作业!
登录后立即学习!
loading
微信扫码关注即可登录
您需要同意协议才可以进行登录
登录虎课网,每天免费学课程全站 89000+ 视频会员教程 | 每日可免费学 1
为确保账户信息安全
请先进行真实姓名验证后进行充值付款
立即验证