移动端网页布局越来越多的人开始关注,自从微信开发工具出来之后好多人都以为小程序就是移动端,从某个角度来说,我认为都是一样的,但是具体设置的时候还是有所差别,这次主要还是以移动端讲述为主。

首先移动端的设置,我这里因为比较老土,设计还是以PS为主,一些比较好的公司,设计前端,特别是移动端设计或者是UI设计,主要是以磨刀,蓝湖,sketch,XD,ARP等软件来进行操作。

确实他们有他们对应的优势,尺寸结构,布局结构,功能结构,排版结构,元素结构甚至切图参数显示都完美的展示出来,归根还是那句话,软件始终是辅助,主要还是依托于操作者。

那我们首先开始我们的操作(初级版),第一移动端的布局,以多少为主,这个主要是看各个公司的规定而定,开始可以以750px宽度为准,为什么以750px宽度为准的话,这个我还一下子回答不出来,主要是2的倍数有关{个人见解或者是看别人的视频介绍},第二移动端的布局方式,要么全屏,要么居中分布;

常规移动端设计(以商城为例)

顶部一部分包括左边logo 中间部分搜索,右边要么是用户中心,要么是扫一扫。或者是导航按钮。

后面是幻灯片部分,其中包括项目部分(可以包括产品介绍,新闻信息等图标展示的部分,多数以三个或者是四个图标加文字显示,);

然后是推荐信息比如公司新闻,或者是优惠活动的信息;展示的效果要么是上下滚动,要么是左右滚动;

后面的是产品分类,将产品分成一个模块展示出来,展示的形式要么全部是产品展示,要么是左边一个主要的产品名称,右边是一排的产品栏目展示出来。

最后面再来一个推荐产品或者是热门信息就可以了,底部加一点网站的相关信息,比如地址啊,联系信息啊,电话啊,备好信息就可以了,如果添加允许侧栏加一个返回顶部的按钮或者是联系方式的按钮就完美了,

如果是移动端,我认为不一定要加底部的菜单栏,如果需要就添加。一个简单的购物移动端的设计思路就可以了,

那企业网站又是如何呢,这个就要看你的电脑端设计是什么样子的,如果您的页面设计要自适应的结构方式,那您移动端的设计思路其实是和您电脑端设计的思路是一致的,只是显示的方式不一样,电脑端显示五个,我移动端显示三个就可以了,要有一种方式,电脑端是一种显示方式,移动端是另一种显示方式,只是内容显示部分是通用的而已,展示的结构不一样而已,那怎么排版就看设计师的思路,归根到底其实和电脑端的思路是一样的,只是显示的方式以移动端为准而已。


相关文章