广东快3>WIKI库>学习UI设计>网页界面布局简介

网页界面布局简介


在web页面设计过程中,布局是极为重要的一环,布局不仅是设计师技术上的考量,更是技术与艺术的高度统一,布局既要考虑到网站本身的功能模块合理安排,以及实际需求,还需要考虑到浏览者的真实体验。



布局时需要考虑的因素


布局的目的是使有限的元素进行有机地组合,使版面产生清晰的条理性,突出主体及主要信息,体现不同元素的层级关系,以达到良好的信息传递季视觉体验。需要考虑到网站中需要存放的功能模块,用户的屏宽像素以及用户的浏览习惯等。在综合考虑之后才能给出合理的安排。


1.面中需要考虑的功能模块


由于网站的类别太多,它的功能模块不完全相同。总体来说,可以包含页首的通用导航、logo、主视图banner、主题内容(各种功能模块、图片、文字、视频)、页脚等几个通用的部分。


2.屏宽像素


一般来说,要考虑的屏宽都在1024像素以上,据相关统计90%的显示器都超过这个分辨率。因此在PC端我们把目标定在1000像素左右,需要减掉浏览器的相关边缘。


3.浏览习惯


一般用户按照从上至下,从左至右的顺序进行扫视。出于这样一个信息社会,信息是非常大的,没有时间逐字逐句阅读,那么需要优先将重要的信息放在左上角或者右下角的位置,避免将重要的信息放在左下角的位置上,如果确实需要,我们可以通过色彩、形状大小等方式,对用户进行相关的视觉引导。


经过这些考虑之后,我们就可以把之前的思路在草图上进行模拟、修改。并于客户进行沟通商榷,得到设计草图,在软件上进行相关的布局操作。



常见的网页布局方式


1.水平分割式


水平分割的页面具有较强的视觉稳定性,给人平静、安定的感觉。排版方式就是按照从上至下顺序的方式进行排版。如果主题部分出现多个功能模块,可以再按照从左向右的顺序进行排放。这种风格方式是页面当中用的最普遍的。与前端进行代码生成时,非常方便,易于前端页面制作。


layout1.png


2.垂直分割


垂直分割强调的是垂线的视觉冲击力,体现坚强、理智与秩序的感觉。同时可以形成左右两个版面内容的对比,非常具有视觉冲击力。


layout2.png


3.曲线分割式


曲线、弧线、曲线形状的应用能够产生运动、韵律的动感,形成富有活力的视觉效果。


layout3.png


4.其他分割式


能够丰富网页的表现力,使网页更富于变化,艺术效果更丰富多彩。


layout4.png



 网页布局中出现的趋势


在互联网早期刚刚兴起时,我们发现大批的网站都有一套通行的排版模式,页头、页脚、侧边、内容区域。我们发现现在的网页千变万化,根本没有固定的形式,它可以被设计成任何所想要的形式,新的规则就是没有固定的规则。


1.极简主义


在网页设计当中我们需要将一些类似的内容进行分组,以便于他们从页面当中进行分离,避免页面当中出现内容的混乱。现在普遍的趋势就是将这些额外的界面元素去除。这是一种极简主义的方式。把原来的页头、页尾这些概念去掉,它用更加直观的排版,把核心内容直接展示出来,用大写的口号或者是经验的产品大图快速地冲击我们的眼球,带来视觉上的震撼。可以发现,移除页头和页尾之后,内容得到了极大的强调。让用户在浏览内容之前,先强调品牌,造就了优美的视觉流程。


layout5.png


2.基于网格


这些排版方式,建立在模块化或类似网络的结构上。在这些设计中,每一个模块都是意图根据屏幕尺寸,进行自动调整,这并不是新的方式,是响应式网页设计,让它变得更加有用。它可以像搭积木一样,由各个模块组建而成,最终可以随着用户显示终端的不同进行调整。这样的好处是方便网站管理者对所有的用户进行统一的展示和管理。避免对同一个网址的访问的重定向问题。有利于网站得到流量数据分析。


layout6.png



【本文由麦子学院独家原创,转载请注明出处并保留原文链接】

分享到:

目录