合理规划布局，提升信息推送清晰度与用户体验

这一节主要介绍在手机移动设备的界面设计中常用的几种布局方式。其实对于布局方式来说，其存在的根本原因是为了和当前页面所展示的信息相互匹配，便于页面信息的传递与信息层级的划分。同时，也是为了后期视觉设计打下一个坚实的基础，因为视觉设计师也需要根据低保真图所展示的布局框架进行视觉延展。所以，界面的框架和布局方式就如同骨架一样，支撑起了整个产品的信息展现和区域划分，也是联接交互设计与视觉设计重要的桥梁。

对于布局方式，前面介绍了大平移式、宫格式、列表式以及侧滑式等布局方式。不难发现，其实每一种布局方式都是为了去展示和匹配不同的信息。例如，当交互设计师需要在当前页面展示检索信息的话，可以使用列表式布局以及宫格式布局，如果当前页面展示的信息太多以至于大量的增加了页面的显示高度时，设计师可以使用标签式布局或者选项卡来分流大量信息以便减少页面延展，增加当前页面利用率，以及减少产品的页面跳转，节省用户的操作时间。

那么，布局方式就像分隔储物盒一样，把需要在界面中展示的信息进行合理的分布。对于视觉设计来说，界面的布局方式的选择是做出好的视觉效果的重要开始，所以在使用布局效果的时候应该改根据信息的展现而细分、优化和丰富界面的布局。

在布局方式的选择背后，是设计师是否能够更加细分产品信息传递的专业能力和深度，以及对于信息传递给用户的敏锐度。例如，同样是产品检索页面，可以全部使用列表式布局进行产品展示，但会让用户产生视觉疲劳和焦虑感，也会降低当前页面的信息传递层级性，如果在当前产品中想要突出一些热门或者爆款产品，其效果也不会好。

所以可以使用一些宫格式布局来展示一些重点推荐产品，这样，用户就会在浏览当前页面时将注意力自觉放到宫格式布局上面，增加了页面的信息层级和视觉的跳跃率，通过视觉来引导用户的视觉浏览顺序，也可结合眼动仪进行测试。（如图2-80）

图2-80

设计师也可以利用移动互联的一大特点，也就是“个性化推荐”对产品列表进行进一步的优化。因为在产品使用的过程中便可以发现，用户的内心其实是希望得到足够的尊重和被关注。所以，这种个性化的信息推荐就成了现有移动终端产品发展的必然趋势。其最大的特点就是先进行用户需求的调研，然后根据用户调研的结果或者是用户之前的搜索以及交易记录进行相关产品的推荐并展开，从而产生信息推送因人而异的效果，很多的产品都在运用这种方式来进行展开，例如前文对“Apple Music”中进行用户个性化需求的调研方式的分析。

这时，设计师往往会使用“大平移式布局”进行推送信息的展现。例如，刚才提到的产品列表页面，也可以根据用户的需求，浏览记录以及购买记录加入这一版块，来推送和用户购买需求高度匹配的定量推送的产品卡片（10～20张），以便于增加产品的日活量以及转化率。(www.xing528.com)

所以，大平移式的布局方式更加细化了为用户推送的产品层级。总结一下可以看到，较为粗放的“全部产品”使用列表式布局，热门产品使用宫格式布局，而匹配度最高的“推荐产品”使用的是大平移式布局，信息的层级和推送会更加的清晰（如图2-81）。

图2-81

合理使用布局方式的目的之一是为了更好地划分产品中的信息层级，通过布局方式将信息推送清晰化，为用户筛选最优信息来让用户做选择，从而减少用户浏览信息的时间成本。让产品使用更加高效，在增加用户的转化率的同时也从侧面证明了决定布局方式的依据是产品信息的传递和组成。

通过之前内容对各个布局方式的逐一讲解可以发现，每种布局方式都有着非常大的优势，但也存在不可避免面的缺陷。例如列表式布局的优点莫过于展示信息量大，学习成本较低。但是，其缺点也是由于信息量过大而导致用户在查找有效信息时会耗费过多的时间成本，所以，才需要结合其他的布局方式来解决和弱化缺点。

在现有的布局方式中，通常都需要交互设计师来进行穿插配合使用，以便于通过各种不同的布局方式来进行缺点的互补，因为如果使用单一的布局方式一定会将其缺陷不断放大。并且使用多种布局方式进行配合也可以更加优化产品的信息传递，实现所谓“强上加强”的效果，在信息推送和信息层级划分上达到最佳的用户体验。

在设计和规划产品布局的时候，设计师会发现还存在着一种更好的布局方式，那就是利用几种常见的布局方式综合使用，相互匹配，取长补短也就是这里要给各位提到的最终的一种布局方式——混合式布局。

所以，看似简单的布局方式，其实是要展现出很好的信息规划与信息推送的逻辑思维以及产品思维。而且，合理丰富的布局方式也是进行视觉设计的重要基础，对于未来产品的视觉效果也起着至关重要的作用。