易捷网络专注企业网站建设
11年企业网站建设经验、响应式网站建设,兼容PC、手机、平板全
终端,给你更佳的浏览体验...

无从下手从五种经典网页布局开始设计

来源:网站建设行业资讯网
添加时间:2022-01-17

编者按:不得不说,网页设计绝对是有套路的!网页布局虽然千变万化,但是如果你仔细观察,会发现有一些布局适用范畴相当广,经久不衰。今天的文章,我们就来聊一下5种经典的网页布局。

在开始一个新的网页设计项目的时候,不知道你会不会有那么一瞬间的犹豫:“这个项目要从哪里着手呢?”伴随着这种犹豫的,是“做点前所未有的作品”的冲动。不过,很多时候,这些冲动和犹豫都在需求的磨合、设计的细化中,逐步淡化。相比大家也都发现了,网页布局在很多时候都是相似的,甚至可以说,有些布局模式是长盛不衰的。


这些布局模式,或者说框架,几乎是“约定俗成”的,它们为用户所熟知,它们本身也更贴合用户对内容的识别模式和使用习惯。今天的文章,我们一同来聊聊五种拥有持久生命力的先进网页布局,也许你的下一个网页设计项目可以直接从这五种布局模式入手,无需过多犹豫和纠结。

1、顶部大图Banner+简单的栅格

无论屏幕多大,这种布局都能够为用户展示充足的内容,供用户浏览和探索。虽然这种布局随着屏幕、设备而有所差异,有的设计师会倾向于设计成固定宽或者横跨整个页面的布局,但是总体的模式都大同小异。

·导航栏
·顶部大图,图片上叠有文字标题
·2~4个分栏,承载不同类别的信息,有的会有图标
·主要的内容区域
·页脚

这种布局设计干净清爽,有足够强的视觉表现力,并且常常采用的响应式设计,断点也很好控制。顶部大面积的轮播图或者Banner也有许多插件或者应用来帮你实现。

原理:这种布局中,每个元素都各司其职,并且整个流程是富有逻辑的,顶部大图足以营造氛围,给予用户特定的体验,下面的次一级元素能够做的很好的支撑。

相关趋势:越来越多这类网页开始采用色彩丰富的插画式的图标,而扁平化的设计和这种布局页面有着天然的契合。

2、单页设计,单栏布局

单页式设计这几年非常火,它非常适宜于展现极简的内容,或者专注呈现一个主题。当网站的主题集中,内容也比较固定的时候,无需复杂的布局来呈现,单页单列式的布局足以应付一切。

·导航
·主要内容区域,文字+图片为主
·页脚

采用这种布局模式的时候,空间的控制至关重要,相当考验设计师设计留白和布局平衡的功力。元素和元素之间的疏密关系是需要设计师反复推敲的,如果空间控制不合理会给用户一种混乱的感觉,如果过于紧密则会产生局促感。

原理:单页式设计适合于小网站或者小型项目的展示,它可以用来制造一个简单的介绍页面,让简单的内容显得不那么单调,强化内容的形式感和重量感。对于内容简单的博客网站而言,单页式设计也是不错的选择。

相关趋势:和单页设计结合较紧密的应该是动效设计和视差滚动,他们可以让单页式设计更加生动有趣,淡化单调的设计,赋予页面更强的生命力。

3、自定义栅格

那些被整齐分割出来的网页布局从来都没有过时过。无论是分割得细碎的网页区域还是大块的页面区块,大多都需要借助一套干净整齐的栅格来支撑。在此基础上,内容按部就班地被置于不同的区块中,被精心地组织展示出来。

在设计师的作品集页面中,你可以发现各种各样自定义的栅格布局。自定义栅格展示内容的优势在于,它可以同时呈现大量的视觉化的内容,看起来足够丰富又不会落于下乘。下面这个图库的效果看起来就相当震撼。

在栅格中填充色彩,还可以用来承载文字内容。不同的区块之间不一定非要用线条进行分割,可供选择的方案有很多,不过千万要控制好栅格尺寸和间距。控制不好的细节,整个设计的平衡感可能会被破坏。

原理:栅格的优势在于它的组织性,对于用户而言,它具有规律性和可预期性。一个漂亮的栅格系统能够让用户更快找到需要的内容,在视觉上也更加协调自然。

相关趋势:栅格很容易被人视为卡片这样的元素,可以为其加入翻转等各式各样的动效,呈现出更多的信息和视觉层次。

4、经典的F式布局

研究表明,用户在浏览网页的时候,习惯于沿着F式的阅读轨迹来浏览信息,也就是说,用户喜欢从左到右阅读,然后向下移动,再继续从左到右阅读。

这种F式的阅读模式对应的网页布局就是F式布局,较关键的信息靠左显示,从上到下尽量保持在一条线上。

·页头和导航
·靠左的一栏相对较宽,展示主要的内容
·靠右常为侧边栏,展示相关链接等内容
·页脚

原理:人的行为很容易受到习惯的影响,而研究也证实了人思考、行为确实是模式化的。从左到右,自上而下,人们大多习惯了这种行为模式。F式的布局模式拥有良好的适用性,便于用户理解和交互。

相关趋势:F式布局中侧边玩法很多,有的设计师会将导航与之结合,或者在页面顶部加上大图Banner。

5、极简分层

极简化的设计一直都在流行,它的流行不是没有原因的。开放式的空间让用户感觉更加轻松,也使得其中展现的内容更容易被聚焦。如果极简化的页面中加入不多的几个并列的内容层,可以让信息更有层次,也使得极简的页面拥有了细节。

这种设计并不复杂,但是让页面更加有趣了,它可以适配更多不同类型的项目了。这也解释了为什么用户如此的喜爱类似Apple官网这样的设计。

原理:极简化的页面中加入简单的几个分层,让页面有了视觉焦点,尤其是当设计者想要引导用户关注到某个关键的内容的时候,这种页面布局很很容易实现这一点。

相关趋势:微妙的阴影和渐变常常被用在这样的页面当中,强化元素之间的层次感。虽然这些设计手法一度“过时”,但是现在大有卷土重来之势,而MaterialDesign这样的设计风格就是它们的冲锋号。

科技(深圳网站建设)结语:

许多设计手法、设计趋势都常常会被人质疑,但是如果撇开情感因素,从较基本的设计原理上来推导这些趋势的时候,能够从根本上判读这些设计手法是否真的是有价值的。

今天所谈及的这些布局是经过时间洗炼的经典设计,挑选合适的设计趋势同这些布局结合起来,常常能够带来不错的效果。

网站建设计最新案例赏析:


东莞索诚电子网站制作首页设计效果图
东莞索诚电子
广州飞进信息科技网站制作首页设计效果图
广州飞进信息科技
山东恒美科技网站制作首页设计效果图
山东恒美科技
山东刚泽金属制品网站制作首页设计效果图
山东刚泽金属制品
广州康耐登家居用品网站制作首页设计效果图
广州康耐登家居用品
陕西松峰实验设备网站制作首页设计效果图
陕西松峰实验设备
湖南新展博会展服务网站制作首页设计效果图
湖南新展博会展服务
东莞吉川机械科技网站制作首页设计效果图
东莞吉川机械科技
深圳捷益达电子网站制作首页设计效果图
深圳捷益达电子
广东童年之家实业网站制作首页设计效果图
广东童年之家实业
 

网站建设行业资讯推荐阅读:


深圳网站设计哪家好,网站设计的技巧是什么定制网站的优势在哪里创建网站的基本信息教育网站基本建设必须有什么功能如何设计出一个有特色的网站网站建设还能为企业带来那些好处网站建设的费用以及怎么让网站利益最大化移动网站建设需要注意什么怎样设计才能提高用户体验外贸网站建设需要了解的知识深圳网络公司-做什么的网站开发10种Web应用程序的性能问题告别混乱,是时候来理清交互设计!新手如何做网页设计春节做网站建设的费用有优惠吗多少钱科技:专业企业品牌网站建设公司科技浅谈:成功的企业网站建设需要具备什么团购制造行业大战推动导航网站一夜兴盛网站建设前期策划思路和细节调整分析模版网站是否适合做搜索引擎优化做网站如何注册一个自己满意的域名,应从哪几方面入手网站建设的详细方案网站建设是如何盈利的一个好的域名让你比同行走的更远为什么网站建设公司的价格存在差异网站建设的真相网站建设有哪些误区我们要防止网站建设好处,网站SEO优化标题怎么写网站建设管理工作首期培训班在京举办 什么构成了一个网站设计要素企业网站怎么选择自助建站系统SSL证书的两大作用:数据加密和身份认证。专业设计网站时间跟什么因素有关你确实是在做西安网站建设企业网站首页如何设计企业想要做好网络营销需要哪些工作网站主页应该如何设计 网站设计中要遵守哪六大原则网站制作小细节很重要网站建设对企业的价值网站设计减少跳出率的方法优秀的网站设计体现在哪里网站排名究竟和什么有关系网页设计有哪些非常需要注意的地方,下面一起来看看吧。企业网站用户常关注的板块有哪些Kuwebs企业网站学习及改编总结如何做好一个响应型网站呢深圳网站建设要放眼全局企业微信跟微信企业号有什么区别深圳福田中小企业网站制作,中小企业网站seo如何做优化深圳网站设计内容优化手机网站开发的益处有哪些教您如何打造一个酷网站电子商务网站这样设计才能提高竞争力深圳网站建设公司解密网页效果图与实际网站的差异网站中的极简设计网站代运营企业可以企业出示什么协助怎样判定外贸网站平台搭建是不是出色怎么做一个有高度的标题党深圳基金网站建设解决方案网络逻辑类故障
企业网站建设行业信息服务发布平台!
(www.fantodo.com)版权所有
QQ在线咨询