移动界面流行版式设计大揭秘！杂志排版思路也能用

处在扁平化时代，吸引用户靠质感已不行了，那有啥利器能给用户体验添分呢？千万别忽视版式设计！以前它大多用于平面设计，只是如今情况不同，UI设计师也得学了，因为它很有用！今天这篇好文章汇总了当下最流行的13种移动界面版式设计，并且有实例分析，赶快去学习！

伴着信息与技术不断发展，手机屏幕尺寸日益增大，界面开始负载起越来越多的信息，繁复的界面装饰细节，致使界面显得愈发臃肿，人们愈发关注界面的内容与功能，信息框架呈扁平化趋向，于设计风格方面，设计师们不再追逐3d、拟物化设计，而是越发崇尚扁平、简约的设计理念。

信息传播桥梁是版面构成，发挥功能特点须让元件各展其长。让如此版面由美观达完善、从视觉至内容，传递更迅且密的种种信息。故而版式设计于广告、招贴连同杂志此类平面设计中，多年来皆大量应用。

虽说于移动应用里是以用户的操作以及使用体验作为主导，然而伴随扁平化潮流的到来，我们不再借助细腻的质感还有光影去提高界面的品质，以此拉开界面的层次，那么我们依靠什么去吸引我们的用户，从而为用户营造良好的阅读以及使用体验呢？

02版式设计在移动界面中的应用

版式设计里，常见的布局存在着十三种，分别是骨骼型，满版型，上下分割型，左右分割型，中轴型，曲线型，倾斜型，对称型，重心型，三角型，并置型，自由型，四角型等 。

这诸多布局于平面设计里运用极为广泛，然而移动界面的设计跟平面设计相较，最大的差异之处在于其具备功能性、富有可操作性还有含括可交互性，版式的选择是立足于产品的功能特性、目标用户、使用场景等诸多因素。

移动界面，依据其产品具备的功能，能划分成两大类，一类是信息展示型界面，另一类是功能操作型界面。

1. 信息展示型界面

我们常见的，以阅读以及传递信息作为主要功能的界面包含，新闻app的部分界面，天气app的部分界面，阅读app的部分界面，购物app的部分界面，音乐app的部分界面，食谱app的部分界面，健康app的部分界面，除此之外，新手引导页也是较为常见的，以传递信息作为主要功能的页面。并且这些app依据其各不相同的功能特性，界面的板式也具有各自独特的特点。

1）以浏览引导为主

以浏览引导作为主要目的的界面，在布局方面会存在一条明确的主线，而在常见的版式布局里，上下分割型布局、左右分割型布局、中轴型布局、曲线型布局等，在图文的排版上，对于用户而言会有一个潜在的引导提示，所以应用较为广泛。

下面存在着两个图片，虽然它们分属于不同的场景，并且具备不同功能，不过却都采用了中轴型布局，也就是图片以及文字是按照垂直方向来进行排列的，从而引导用户依从上方开始朝着下方去浏览，其结构层次显得格外清晰。

2）以品牌传递为主

针对于以品牌传递作为主要内容的界面而言，更加适宜采取满版型、重心型、自由型之类的布置样式。

用图片将整个版面全部充满，这便是满版型，其视觉效果直观且强烈。下面存在两个界面，这两个界面采用的是满版型的布局，借助全屏的图片以及简洁的文案，传递出产品的气质以及理念，与此同时，还会给人一种大方、舒展的感觉。

3）以提高浏览效率为主

针对以着重提升浏览效率作为主要方面的界面而言，一般情况下该界面之中涵盖了数量较多的信息，怎样才能够将信息迅速地、精准无误地传送给用户，以此防止用户产生烦躁之感以及遭受困扰呢？

这类应用里较典型的是新闻、资讯以及图库等 app 的界面，设计时我们能借鉴骨骼型的板式，骨骼型是一种规范、理性的分割方法，杂志排版中常见的骨骼有：竖向通栏、双栏、三栏、四栏等，借助图文的混合编排展现理性且严谨的感觉，在信息传递上更显快速、清晰。

左图所示那个新闻类的app，采用竖向把内容分栏进行布局，其模块化的结构致使信息的呈现显得整洁且严谨。右图所示的是一个用于图片展示的app，它采用了三栏的布局方式，将图片按照瀑布流这种形式呈现给用户，以此便利用户能够快速进行浏览。

然而，鉴于平级的那些信息，着实难以分辨主次之分，并且人的视线在同一时刻很难聚焦于两个或者两个以上的事物之上，所以采纳图片错落排列的方式，从而让画面变得更为活泼些。

4）以信息展示为主

以信息展示作为主要功能的界面，比较常见的存在记录型、天气类等app，这类app的界面更加注重强调信息的直观性。在这类app当中应用较多的布局有满版型，上下分割，左右分割，中轴型，对称型，自由型等 。

下面有两个图例，它们都主要是围绕信息的展示，然而，受界面的信息量以及 app 的功能特性因素的影响，在左图的运动记录界面信息量的比较方面，所采用的是中轴型布局，另外，右图的天气 app 信息量相对较大，其采用的是满版型布局，合理的布局选择对信息的展示有着至关重要的作用。

2 .功能操作型界面

以功能操作为主要内容的界面，其主要目的在于引导用户去进行操作，因而常见的布局主要存在上下分割这种类型、左右分割这种类型、中轴这一类型等等 。

下面的左边那张图，是一个注册页面，其中的btn，采用了中轴型的这样一种构图方式，能够清晰地将操作项以及注册流程展现出来。右边那张图，采用了上下分割的版面构成形式，上面部分是用于图片展示的，下面部分则是选项以及操作，其结构十分清晰 。

在扁平化潮流情形下，不少产品借鉴了杂志排版的某些方式，给用户带去了不错的阅读及使用体验。我于上面示例里，仅仅只是列举了一些个人觉得较为典型且有意思的布局。而对于不同功能的app，选取适合的版式构图类型，大胆地结合板式设计的一些经典形式，或许能为我们的设计开拓新的思路。

继续浏览有关 移动界面设计版式设计 的文章