SEARCH
行业动态

行业动态

优秀网页版式设计实战案例分析

2021-06-10

阅读:16

自上个世纪90年代以后,国内互联网产业及技术得到了长足发展,在企业网站建设领域也发生了巨大变化,各种尖端的网页制作技术和风格版式设计手法层出不穷。网页设计方面不管如何变化,其实网页的版式设计是有一些规律可循的。今天我们讲几个常规的好用的网页版式设计技巧,这是我们十年来企业建站实战案例总结出的设计教程。


01.

-

错位分层,形成Z轴方向深度感


素马长老chris


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


高端网站设计


这种设计并不复杂,但是让页面更加有趣了,它可以适配更多不同类型的项目了。这也解释了为什么用户如此的喜爱类似Apple官网这样的设计。(备注:如页面版式种,模块与模块之间无法形成Z轴深度,可考虑单个模块或海报区域里的内容形成。)


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


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


02.

-

网站首屏采用全屏大图,其他屏采用删格化系统对齐分布,无论是一行2列,3列九宫格,还是多列错位对齐,整站都遵循这种grid的规律。


优秀网页版式设计案例


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


优秀网站设计



·导航栏

·顶部大图,图片上叠有文字标题

·2~4个分栏,承载不同类别的信息,有的会有图标

·主要的内容区域

·页脚


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


高端网站设计


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



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


高端网页设计


03.

-

根据F形状网页浏览模式进行的经典F式布局


高端网页定制设计


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


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


·页头和导航

·靠左的一栏相对较宽,展示主要的内容

·靠右常为侧边栏,展示相关链接等内容

·页脚


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


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


04.

-

单页设计,单栏布局


素马chris


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


·导航

·主要内容区域,文字+图片为主

·页脚


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


克里斯宋


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


克里斯


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


05.

-

自定义栅格


高级网站设计


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


高级网页配色


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


南宁网站设计


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


南宁网页设计


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


广西网页设计


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


小结

-

关于网页版式的布局与设计,最主要的是根据客户的需求来定制。在项目启动会的时候,如有需要,完全可以带上超大的画板和画笔,在顾客面前绘制以上提到的5种网页常见的版式和布局,让用户感受他们的不同,并选定其中2个方向来做深入探索。可有效提高企业建站的效率,减少无必要的尝试。


在大多数企业建站的沟通过程中显示,第二种“全屏头图+多屏栅格系统对齐网页布局”,以及第五种,自定义栅格对齐版式布局较为常见,也为大多数企业客户所接受。


  • GanZhou
  • DongGuan
  • ShenZhen
  • GuangZhou
  • JiuJiang

ADD:赣州市南康区龙岭经济开发区

TEL:136-6297-4469

ADD:东莞市常平镇星汇置地16层

TEL:181-2288-6265

ADD:深圳市宝安区沙井南环路188号

TEL:136-6297-4469

ADD:广州地铁一号线黄沙站附近

TEL:181-2288-6265

ADD:九江市长虹大道东方俊园15楼

TEL:136-6297-4469

Wechat