设计移动端网页的版式主要有哪几种?移动端设备的屏幕较小,分辨率各异,为了能更好地显示网页的内容,移动端网页必须能够自适应各种不同的分辨率。昆明网络推广小编认为移动端网页的版式与PC端网页有很大区别,主要体现在栅格系统、功能减去、修饰减去和流式布局4个方面。 栅格系统 栅格系统通过一系列的行与列的组合来管理页面布局。栅格系统不仅可以让网页的信息呈现更美观易读、更具可用性,而且还可以使网页更灵活与规范。PC端网页和移动端网页的栅格系统是不同的,如图所示为PC、i Pad和手机三者的栅格模式。 从图中可以看出,手机端的栅格系统中,有5个列宽为68的列、4个宽度为24的列间距,再加上2个宽度为22的页边距,整个页面宽度为480。采用这种模式设计出来的页面更符合移动端网页的页面显示效果,用户的观感会更好。 功能减去 由于移动设备的屏幕较小,一般会减去PC端网页的一些不太重要的功能,并设置相应的链接,使其在其他页面中进行显示。随着屏幕尺寸的不断减小,页面中展现的功能就会相应地减少,浏览页面的方式也由PC端的S型转变为手机端从上往下的浏览方式,这样可以优先展示重要的内容,吸引用户并提升用户的浏览体验。 修饰减去 面对小屏幕,在功能减少的情况下,修饰也必须减少。在PC端中可以显示的加强视觉效果的一些设计,在移动端则要去掉。 一般情况下,PC端的设计除了要满足功能的要求外,还要考虑版面的设计,通过合理的图片和文字版面布局来加强用户的观感。其版面的功能和视图安排一般各占50%左右。但是在手机等移动端,功能和视图的安排要变成功能占80%,视图占20%。 流式布局 PC端页面的布局方式通常是固定的,这种固定式布局在转向移动端时,因为屏幕的变化就会出现每个板块虽然上面很整齐,但是下面出现了镂空的现象,这样会使视觉效果不美观。 转换为流式布局后,则会根据屏幕的大小自动调整布局结构,因为流式布局是以百分比进行设置的,非常灵活,且出现空余的部分会自动填充,这就使得网页布局更加紧凑,浏览效果也更好。 更多关于网站建设的经验和技巧,欢迎与昆明网络推广小编交流,竭诚服务! |