2.1 初级布局：解析移动UI的纵横布局

软件界面的设计师除了视觉效果本身以外，对于设计是否可以实现、大概以何种方式实现、规范可否被理解并且复制执行、设计实现的性价比与时间比等维度都应有相当高度的认识。

本节将讲解关于简单界面布局的一些相关知识，这是比较适合于初级UI的设计方法。

2.1.1 竖向排列布局

手机屏幕的大小有限，因此，大部分的手机屏幕都是采用竖屏列表显示，这样可以在有限的屏幕上显示更多的内容。

竖向排列布局常用来展示功能目录、产品类别等并列元素，列表长度可以向下无限延伸，用户通过上下滑动屏幕可以查看更多内容，如图2-1所示为竖向排列布局。

图2-1 竖向排列布局

2.1.2 横向排列布局

智能手机的屏幕分辨率有限，无法完全显示电脑中各种软件的工具栏，因此，很多移动应用在工具栏区域采用横向排列的布局方式。

在元素数量较少的移动UI中，特别适合采用横向排列来进行布局，但这种方式需要用户进行主动探索，体验性一般，如果要展示更多的内容，最好采用竖向排列布局。

横向排列布局主要是横向展示各种并列元素，用户可以左右滑动手机屏幕或点击左右箭头按钮来查看更多内容。例如，大部分的手机桌面及相册APP等就是采用横向排列布局，如图2-2所示，为横向排列布局。

图2-2 横向排列布局

2.1.3 九宫格排列布局

九宫格最基本的表现其实就像是一个3行3列的表格。目前，很多UI采用了九宫格的变体布局方式，如图2-3所示为九宫格排列布局。

图2-3 九宫格排列布局