移动界面设计：布局方式与视觉效果

对于移动应用产品的定位、交互设计以及后期的视觉设计来说，布局方式尤其重要。产品的前期设计流程以用户定位、市场分析、竞品分析、功能托补以及低保真等流程组成，也就是所提到的交互设计流程。那么，只有在交互流程完善的基础之上才能够顺利进行视觉设计相关的工作，所以，对于这一章节所要提到的布局方式就像是人的骨骼一样，支撑起整个页面的信息展示区域以及页面信息传递的脉络（图2-26）。

图2-26

那么，这些布局方式最初更多用于交互阶段中低保真效果图，用于显示界面内容的框架以及信息内容摆放的位置。然后视觉设计师再根据交互低保真图的基础进行视觉效果，也就是高保真效果图的制作。框架和布局好比是骨骼，视觉效果更像皮肤和穿着（如图2-27）。所以，低保真的布局框架起着链接交互设计和视觉设计的重要作用，是每一位视觉设计师都必须要重点掌握的内容。

本章提到的移动界面的布局方式，主要包括大平移式布局、列表式布局、宫格式布局、侧滑式布局以及标签式布局等常用的布局方式，并且基于这些布局方式，重点讲解如何运用视觉设计的手法完成界面设计，使其能够更加美观地展现在产品的高保真页面中。本章所提到的布局方式具备一些优点，但也会有一些缺点存在，需要在设计产品的过程当中，将这几种布局方式搭配起来使用，实现布局方式功能上的互补和优化，从而达到对信息的合理梳理并快速传递给用户，从而提升用户体验。好的布局方式就像储物盒一样，可以更加清晰合理的规划产品的信息内容。(www.xing528.com)

图2-27

布局方式可以运用于各种产品和平台中，但是嫁接在这些布局方式基础之上的视觉界面则会随着产品的用户人群的需求与特点、行业的特征以及产品的视觉形象而千变万化。