学习13种移动界面版式设计，让你的排版设计杂志一样吸睛

于扁平化时期，吸引用户已无法凭借质感了，那么究竟有何种利器能够为用户体验增添分数呢？请勿忽视版式设计！虽说往昔大多应用于平面设计里，然而时移世易，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而言，挑选适宜的版式构图类型，大胆地结合板式设计的一些经典形式，或许能够为我们的设计开拓新的思路。

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