认识达内从这里开始

掌握不同的页面布局方式能够让UI设计师在设计网页的时候更容易作出符合用户使用习惯的一些设计方式，下面我们就通过案例分析来简单了解一下，UI设计师需要掌握哪些页面布局方法。

1、列表布局

列表布局也就是我们常见的图片列表，主要由商品缩略图和多个文字信息组合而成，列表布局重在文本内容，对于图片的质量要求不高，主要为了起到视觉引导的作用。

优势是，遵循自上而下的阅读模式，有利于信息快速的扫视和对比;空间占比小，一屏可展示更多的商品;拓展性好，可展示更多促销信息。

缺点是，图片尺寸小质量差，细节展示不丰富;样式单一、趣味性差;由于信息量过大，长时间浏览会引起视觉疲劳。

2、大图网格布局

大图网格布局一行只展示一张图片，由于图片占比较大，因此一屏只能展示1到2张;在设计上它可以分为通栏和非通栏设计，通栏可展示更多的信息;非通栏也就是卡片风格其视觉表现力更强，多用于以图片浏览型为主的产品。

优点是，图片占比大，可以展示更多的商品细节和丰富界面效果，同时至上而下的浏览顺序，有利于信息有效传达。

缺点是，页面空间的消耗大，一屏可展示内容少，不利于信息的查找和对比。

3、两列网格布局

两列网格布局也就是将屏幕一分为二，图片和文字进行上下展示，类似一个网格，浏览次序类似一个Z字，因此产品都能均衡的被用户看到，该布局图片占比较大，对图片质量要求较高，适用于图片对比为主的商品。

优点是，利于图片类商品的对比选择;页面空间消耗小，一屏可展示4到6条信息;视觉效果较好。

缺点是，文字信息展示少，只能展示商品标题、价格、标签等参数，当界面信息过多时界面会显得凌乱。

4、两列瀑布流布局

两列瀑布流布局也就是将屏幕一分为二，和常规布局类似，其中图片的宽固定，高随图片的尺寸变化而变化，相比于两列宫格布局，瀑布流布局采用不规则的Z字布局，适用于产品数量较多，用户目标不明确的情况下使用。

优点是，可根据图片比例自适应高度，图片的细节表达更有力;产品展示数量多，用户在使用时可以无限下滑。

缺点：采用预加载的实现方式，不能预估产品多少，在浏览时产品图片大小不一，大图很容易被记住，而小图很容易被忽略。

5、拼图布局

拼图布局，头部常以一张大banner的形式出现，下面是由几张图片以各种拼图形式呈现。一般来说下面展示的信息都是和他相关列表的商品，适合平台主动推荐的商品列表。

优点是，采用杂志式排版，样式上更活泼美观;产品主次表达更清晰，通过图片占比大小就可以确定主要和次要信息。

缺点是，图片一般有大有小，小的也很容易被忽略;另外该样式编辑成本高，往往需要单独推荐。

6、三列网格布局

三列网格布局，也就是将屏幕一分为三进行展示，也可以叫宫格布局，由于模块比较小因此主要以图片展示为主，文字信息一般只有简单的标题，适合用在用户需求不明确的页面。

优点是，从排版上界面利用率高，一屏可展示的产品数量多，利于用户快速浏览选择自己感兴趣的。

缺点是，图片展示尺寸小质量低，文字信息展示简单，对比性较弱，界面的趣味性和新鲜感都比较低。

【免责声明】：本内容转载于网络，转载目的在于传递信息。文章内容为作者个人意见，本平台对文中陈述、观点保持中立，不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。更多内容请加danei0707学习了解。欢迎关注“达内在线”参与分销，赚更多好礼。