常见布局:简单的移动UI排列布局形式-创视动画

常见布局:简单的移动UI排列布局形式

  伴随着科技的不断更新发展,手机功能越来越强大,相关的软件也应运而生。人性化的手机设计现在已经不单单局限于手机的外观,用户界面设计的规范性对于如今的移动UI设计显得非常重要。合理的布局可以使界面变得井然有序,让用户可以很容易地找到自己想要的信息。下面就介绍5种常见的移动UI排列布局。
一.竖排列表布局
  由于手机屏幕大小有限,因此大部分的手机屏幕都是采用竖屏列表显示,这样可以在有限的屏幕上显示更多的内容。
在竖排列表布局中,常用来展示功能目录、产品类别等并列元素,列表长度可以向下无限延伸,用户通过上下滑动屏幕可以查看更多内容。
  优点:层次展示清晰明了;视线流从上到下,浏览体验快捷;可展示内容较长的菜单或拥有次级文字内容的标题。例如,支付宝App的大多数界面就采取了竖排列表布局的方式,如图2-1所示。
图2-1 竖排列表布局
二.横排方块布局
  由于智能手机的屏幕分辨率有限,无法完全显示计算机中的各种软件的工具栏,因此很多移动应用在工具栏区域采用横排方块的布局方式。
  横排方块布局主要是横向展示各种并列元素,用户可以左右滑动手机屏幕或点击左右箭头按钮来查看更多内容。例如,大部分的手机桌面以及相册App等就是采用横排方块布局,如图2-2所示。
图2-2 横排方块布局
  在元素数量较少的移动UI中,特别适合采用横排方块来进行布局。但这种方式需要用户进行主动探索,体验性一般,因此如果要展示更多的内容,最好采用竖排列表。
三.九宫格布局
  九宫格最基本的表现其实就像是一个3行3列的表格。目前,很多界面采用了九宫格的变体布局方式,如图2-3所示。
图2-3 九宫格的变体布局
四.六宫格布局
  六宫格最基本的表现其实就像是一个2行3列的表格。六宫格这种布局一般都会在首页或者个人中心出现,大部分是起到导航的作用,如图2-4所示。
图2-4 六宫格布局
五.大图展示布局

  大图展示布局多见于引导页设计和一些图片分享App,或者文艺范和摄影类的App,如图2-5所示。

图2-5 大图展示布局