广东快3>WIKI库>学习设计基础>移动端页面布局讲解

移动端页面布局讲解



列表式布局


如图列表式布局示意图,就是把所有的内容从上到下以一个列表的形式去排列。


page1.png


常见案例如左边两幅为微信里面的列表页,一行一行从上到下。右边为游戏的一个列表。这种布局浏览起来比较方便,条理比较清晰。但容易产生视觉疲劳,用户不停的上下翻,只能通过一些大的标题去区分这些内容的重要性,如果版面比较长的话,那排在后面的内容就不容易被发现。

 

page2.png



陈列馆式布局


如图为陈列馆式布局示意图。


page3.png


结合案例进行分析,左边为商城,右边两张为图片站。这种布局给我们进入商场或者画展的感觉,这种布局同一个版面展现的内容比较的丰富,同样可以通过版面的颜色和大小体现出哪一个更重要。


page4.png



九宫格布局


如图为九宫格布局示意图。


page5.png


九宫格布局适合做一些菜单导航页面,比如导航栏目比较多,且层级关系属于同一级,就可以用这种形式放在一起。


page6.png



选项卡式布局


如图为选项卡式布局的示意图。如图片底部有四个分类,就是我们在选择分类的时候,内容部分会根据我们选择的分类进行切换,这就是一种选项卡的效果。


page7.png


如图微信,在选择不同的选项卡时,内容会进行不同的切换。这种布局浏览起来比较方便,同一级里面可以随意的去切换这些内容,不用进行大的跳转。但当选项卡比较多的时候,这种布局就会不太方便。


page8.png



旋转木马布局


page9.png


如图三个页面,这种布局通常可以用在娱乐性的比如电影里面,可以不用上下滑动,比较灵活的左右滚屏切换内容即可,这样子展现的聚焦度就比较高。但若是屏幕太小的话,展示的内容就比较少。


page91.png



行为扩展式布局


如图示意图,行为扩展式布局


page92.png


当我们在操作手机应用的时候经常会有一些交互式的操作,如中间图片的搜索框,若输入了两三个文字,可能下面会自动拉伸出一个常见搜索的列表。以及第一幅图点击一个列表之后,下面的内容就直接展开,不用进行跳转,再次点击又会收起。这种设计比较节省空间,不用进行太多的跳转就可以展示比较多的内容。


page93.png



多面板布局


如图为多面板式布局示意图,这种布局的好处是可以减少页面布局的跳转。


page94.png


这种布局常用来做一些层级比较多的菜单,如左图点击主菜单时,次级内容就直接在页面呈现,不用跳转,操作方便。缺点就是所占屏幕版面模块比较多,如屏幕比较小的话,那右边的内容就会显示的比较拥挤。


page95.png



图表式布局


图表式布局为一种相对比较灵活的布局方式,优点是画面整体式效果比较强,而且表达效果非常的直接。


page96.png


如图最常见的支付宝,直接以一个图表的形式去呈现年收入,就可以直接观察到它的变化。这种表现方式非常的直观,但受移动端显示器非常小的限制,所以同一个页面所能显示的信息非常的少。


page97.png



作业


利用上面讲到的布局方式,选择一种合适的版式设计一个商品的列表页面。



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

分享到:

目录