信息量|教你在界面中应用版式布局( 二 )

下面的左图是一个新闻app，采用竖向分栏的布局，模块化的结构使得信息的展现整洁和严谨。右图是一个图片展示app，则采用了三栏的布局，把图片以这种瀑布流的形式展现给用户，方便用户快速浏览。但是由于平级的信息，很难区分主次，而人的视线很难在同一时间聚焦在两个或者两个以上的事物上，所以通过图片错路排列，使得画面更为活泼。

文章插图
（4）以信息展示为主
以信息展示为主的界面，比较常见的有记录型、天气类等app，这类app界面更强调信息的直观性。在这类app中应用的较多的布局有满版型、上下分割、左右分割、中轴型、对称型、自由型等。
下面的两个图例虽然都以信息的展示为主，但因界面的信息量、app的功能特性因素的影响，左图的运动记录界面信息量比较上，采用了中轴型布局，而右图的天气app信息量比较大，采用了满版型布局。合理的布局选择对于信息的展示有至关重要的作用。

文章插图
2. 功能操作型界面以功能操作为主的界面主要是引导用户操作，所以常见的布局主要有上下分割型、左右分割型、中轴型等。
下面的左图是一个注册页面，btn采用了中轴型的构图，清晰地展现了操作项和注册流程。右图采用了上下分割的版面构成，上面为图片展示，下面部分为选项和操作，结构非常清晰。

文章插图
三、结语在扁平化的潮流下，很多产品也借鉴了杂志排版的一些方式，为用户带来了良好的阅读和使用体验。我在上面的示例中也只是列举了一些个人认为比较典型和有意思的布局，而针对不同功能的app，选择适合的版式构图类型，大胆的结合板式设计的一些经典的形式，也许能为我们的设计拓展新的思路。公众号：西瓜的设计
本文由 @西瓜的设计原创发布于人人都是产品经理；未经许可，禁止转载
题图来自 Unsplash，基于CC0协议