sumr

service@sumr.org
021 - 6160 - 6918

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

2014-10-10 

1、引言

手机屏幕不断变大,界面承载的信息也不断增多,加上繁复的装饰细节,让界面日益臃肿。因而,用户对移动应用界面,更加关注内容与功能,信息框架开始朝着扁平化方向发展。

移动应用界面的版面,连接着信息传播,充分利用版面元素中的诸多特点与功能,能够让全部版面实现视觉到内容上的完善与美观,从而能够高效准确地进行信息传递。因此,版式设计被广泛应用在广告、招贴、杂志之类平面设计中。尽管在移动应用界面中,用户的操作与体验是最主要的,但当扁平化潮流滚滚而来,我们无法再以细腻的质感和光影提升移动应用界面的品质,从而与别的界面拉开层次,那我们凭什么给用户创造更好的阅读、体验?

2、版式设计在移动应用界面中的使用

骨骼型,满版型、上下分割型、左右分割型、中轴型、曲线型、倾斜型、对称型、重心型、三角型、并置型、自由型、四角型等是十三种常见的版式设布局。此类布局广泛应用于平面设计中。移动应用界面设计区别于平面设计主要是:功能性、可操作性及可交互性。版式的选择则是根据产品的功能特性、目标用户、使用场景等因素来做的。

移动应用界面根据产品功能有两大类:信息展示型界面、功能操作型界面。

(1)、信息展示型界面

像新闻、阅读、购物、食谱、健康等常见的app界面都是。而新手引导页也是较为常见的以传递信息为主的页面。此类app又因为功能特点不同,界面的版式也各自不同。

1)以浏览引导为主


这类移动应用界面布局上有着明确的主线,常见的版式布局中上下分割型、左右分割型、中轴型、曲线型等类型在图文排版上能给用户潜在的引导提示,应用较为广泛。

2)以品牌传递为主

这类移动应用界面,比较适合用满版型、重心型、自由型等布局样式。

满版型就是将图片充满整个版面,有着直观而强烈的视觉效果。以下的移动应用界面就用了满版型的布局,通过全屏的图片与简洁的文案,将产品气质、理念传递出来,让人有种大方、舒展的感觉。


3)以增强浏览为主

这类移动应用界面一般含有诸多信息量,比较典型的应用是新闻、资讯以及图库等app界面。设计时可参考骨骼型版式。这种版式具有规范、理性的分割方法,杂志排版上,常有的骨骼排列是:竖向通栏、双栏、三栏、四栏等。这种图文混合编排理性而严谨,能够快速、清晰传递信息。

下面的新闻app,用的是竖向分栏的布局,模块化的结构让信息能够整洁和严谨展现。右图的图片展示app,用的是三栏布局,能将图片通过瀑布流的形式展现给用户,便于用户浏览。不过,因为平级的信息,主次不好区分,人的视线又不好同时聚焦在两个以上的事物上,因而图片错落排列,让画面变得活泼。


4)以信息展示为主

这类移动应用界面,较为常见的有记录型、天气类等app。这种移动应用界面追求信息的直观性。较常见的布局有满版型、上下分割、左右分割、中轴型、对称型、自由型等。

以下两种图例的移动应用界面受信息量、app功能特性因素等的影响,左边的运动记录界面信息量较为向少,用的是中轴型布局,而右图信息量较大,用的是满版型布局。合理的布局有利于信息的展示。


(2)、功能操作型界面

此类移动应用界面的目的是引导用户操作,常见的布局有上下分割型、左右分割型、中轴型等。

厦门两个图例中,左边是个注册页面,btn用的是中轴型的构图,将操作项和注册流程展示出来。右边用的是上下分割的版面构成,上面是图片展示,下面是选项与操作,结构清晰。


3、结论

以上的示例,是一些比较典型、有趣的布局。根据app功能的不同,选用合适的版式构图类型,结合版式设计里的经典形式,能为设计拓展出新的方向。

2015-12-05 00:00

跨平台车联网体验——上海站

剩余名额: 23 人

活动已结束

友情链接
Process: 0.0588s ( Load:0.0053s Init:0.0103s Exec:0.0210s Template:0.0221s ) | DB :14 queries 0 writes | UseMem:2,415 kb
0.0618s