常见的5种网站页面布局方式及特点分析 |
您所在的位置:网站首页 › 网店的常见形式有哪三种 › 常见的5种网站页面布局方式及特点分析 |
互联网的世界里,网页是我们接触最多的内容展示平台(载体),各种风格设计及不同类型主题的网站数不胜数,笔者作为一名网页设计师,在关注内容本身的同时,也喜欢研究一下网站页面的设计特点,这不失为一种提升网页设计能力的好方法。今天我们主要聊聊关于网站页面布局的一些话题,网页设计虽然千变万化,如果你是个细心的设计师一定会发现其中的一些端倪,就页面布局而言,常用的布局方式其实也就那么几个,接下来港夕科技就和大家聊聊常用的5种页面布局。 在你接到一个新设计项目的时候,是否思考过页面应该采用哪种布局更加合理,更加利于核心内容的展现?当然,你可能也会有做出一些颠覆性设计的想法,但在项目实际执行的时候,初期的想法慢慢被淡化,到项目后期,其实并没有完成颠覆性设计这一愿景,由此我们发现,很多时候页面布局都是相近的,甚至有些布局是经久不衰的一种存在。 长盛不衰必然有其存在的优势特点,例如常见的F型布局,除了更贴合访客对内容的识别模式之外,它更符合人们的阅读习惯,当然,除了F型布局还有一些经典的布局设计,让我们一起来看看吧! 1、大图banner+简单格栅。
页面元素组成: 顶部导航栏,顶部banner大图,3~5个分栏,用以展示不同类别的信息,主要内容区域,页面底部。 原理:这种布局中,每个元素都各司其职,并且整个流程是富有逻辑的,顶部大图足以营造氛围,给予用户特定的体验,下面的次一级元素能够做的很好的支撑。 相关趋势:越来越多这类网页开始采用色彩丰富的插画式的图标,而扁平化的设计和这种布局页面有着天然的契合。 2、单栏布局设计。
页面元素组成:顶部导航,主要内容区域,页面底部。 采用这种布局模式的时候,空间的控制至关重要,相当考验设计师设计留白和布局平衡的功力。元素和元素之间的疏密关系是需要设计师反复推敲的,如果空间控制不合理会给用户一种混乱的感觉,如果过于紧密则会产生局促感。 原理:单页式设计适合于小网站或者小型项目的展示,它可以用来制造一个简单的介绍页面,让简单的内容显得不那么单调,强化内容的形式感和重量感。对于内容简单的博客网站而言,单页式设计也是不错的选择。 相关趋势:和单页设计结合最紧密的应该是动效设计和视差滚动,他们可以让单页式设计更加生动有趣,淡化单调的设计,赋予页面更强的生命力。 3、自定义格栅布局设计。
在设计师的作品集页面中,你可以发现各种各样自定义的栅格布局。自定义栅格展示内容的优势在于,它可以同时呈现大量的视觉化的内容,看起来足够丰富又不会落于下乘。下面这个图库的效果看起来就相当震撼。 在栅格中填充色彩,还可以用来承载文字内容。不同的区块之间不一定非要用线条进行分割,可供选择的方案有很多,不过千万要控制好栅格尺寸和间距。控制不好的细节,整个设计的平衡感可能会被破坏。 原理:栅格的优势在于它的组织性,对于用户而言,它具有规律性和可预期性。一个漂亮的栅格系统能够让用户更快找到需要的内容,在视觉上也更加协调自然。 相关趋势:栅格很容易被人视为卡片这样的元素,可以为其加入翻转等各式各样的动效,呈现出更多的信息和视觉层次。 4、F型布局设计。
这种F式的阅读模式对应的网页布局就是F式布局,最关键的信息靠左显示,从上到下尽量保持在一条线上。 页面元素组成:页头和导航,靠左的一栏相对较宽,展示主要的内容,靠右常为侧边栏,展示相关链接等内容,页面底部。 原理:人的行为很容易受到习惯的影响,而研究也证实了人思考、行为确实是模式化的。从左到右,自上而下,人们大多习惯了这种行为模式。F式的布局模式拥有良好的适用性,便于用户理解和交互。 相关趋势:F式布局中侧边玩法很多,有的设计师会将导航与之结合,或者在页面顶部加上大图Banner。 5、极简页面布局。
这种设计并不复杂,但是让页面更加有趣了,它可以适配更多不同类型的项目了。这也解释了为什么用户如此的喜爱类似Apple 官网这样的设计。 原理:极简化的页面中加入简单的几个分层,让页面有了视觉焦点,尤其是当设计者想要引导用户关注到某个关键的内容的时候,这种页面布局很很容易实现这一点。 相关趋势:微妙的阴影和渐变常常被用在这样的页面当中,强化元素之间的层次感。虽然这些设计手法一度“过时”,但是现在大有卷土重来之势,而Material Design 这样的设计风格就是它们的冲锋号。 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |