图文混排的方式及场景

1.单图设计

单图全屏

定义：单图全屏也就是整个图片撑满屏幕，一般用于开屏启动页、引导页，登录页面的背景，详情页产品介绍底图等。
优点：单张图片冲击力更强，更容易传递品牌调性，图片处理更加灵活。
缺点：对图片质量要求比较高，比如构图、细节都有一定要求，如果是产品图片背景，以及主要内容集中区域展现会有一定的要求。

单图卡片（不下拉）

定义：首屏页面中，以一张图片设计为主要视觉引导，其他会有操作信息以及文字信息。
用途：一般用于突出产品调性，比如交友软件的卡片页面，分享的落地页，以及一些专题的入口等，图片作为一个产品的载体及跟用户交流的入口，能第一眼把用户的眼睛聚焦在图片上，从而达到查看其它信息或引导进行其它交互操作的目的。

单图 + 辅助信息（可下拉）

定义：首屏出现一个宽度撑满，高度自适应的产品图片或者商品图片。
用途：某一些产品大图页，或者详情页的头图，提升产品氛围，引出产品形态以及详细内容。
需要注意：
●因图片高度一般不固定，需要设置一个最高高度度，比如屏幕高度的 75%，wap 页面要考虑浏览器底部操作高度，如超过区域或进行裁切，或是同比例缩放放一个底色上，一般采用黑色
●高度不宜过高，最好能露出部分辅助信息，新设计页面时会做适当引导，比如：提示用户可上拉的箭头或者小手。

2.图文列表

左图右文 - 较常见图文列表组合

根据 F 形浏览引导线，更重要的图片信息放在前面，左图右文模式更强调用图吸引用户浏览视线。
应用场景：搜索结果或推荐 list，如房产 APP 搜索结果 list、购物类搜索结果、播放列表、游记类型结果页。

右图左文 - 较常见图文列表组合

资讯类型、新闻类 APP，更强调文字标题信息，往往图片跟标题的对应性没那么高，有一些是用户自己上传，有很多不可控因素。
应用场景：信息流 feed，经常搭配三图模式、纯文字模式一起出现，如今日头条、房产 APP、新闻类推荐结果、天气卡片等。

图片流：一列

一列限高

定义：宽高比固定，主要上图下文，或者字在图上 2 种形式。
用途：一般用于抓取或者用户上传的图片高度比例较为固定，多采用横图，首屏至少能显示 2 张半图，竖图也有，但是比较少。

一列不限高

定义：宽高比不固定，宽度撑满，高度不做限制，主要有图 + 文字组合，可上图下文结构，或者字在图上 2 种形式。
用途：一般用于抓取或者用户上传的图片宽高比不固定的情况，满足大部分图片的信息展示，比如：百度的大图页大图模式就是采用这样的布局的经典例子。

图片流：二列

二图限高 - 经典图片流布局

定义：2 列图片组合限高，通常是指一行 2 列图片，图片高度按比例进行控制，采用相同比例。
用途：一般用于专辑封面、海报封面、视频截图封面等，比如：bilibili 的推荐模块。

二图不限高 - 瀑布流图片

瀑布流布局的出现，一方面是避免引起视觉疲劳，一方面能满足在限宽的情况下，图片的高度能更多的舒展，使图片的空间利用率更高，产品信息展现更丰富。
定义：2 列图片组合不限高，通常是指一行 2 列图片，图片高度自适应，用于产品图片高度不固定的产品类型，会有一个最高高度和最窄高度极端情况定义。
用途：比如图片短视频封面，pinterest 结果页瀑布流，有上图下文，或者只有图片 2 种结构较为常见

图片流：三列限高

定义：指一列有 3 个图片，且图片控制固定比例的设计，一般有上图下文，只有图片，或者标题 + 三个图片的组合搭配。
用途：比如图书封面、海报封面、今日头条信息流图文结合等。

圆形图片

定义：图片为圆形，比例 1：1。
用途：圆形图片在 APP 图片设计中也非常的常见，出现最多的应该是作为头像了。
常见组合：左图右文、上图下文、一列 3-4 个头像或者可以滑动等。

3.多图模式设计

多图固定比例

定义：超过 3 张以后的图片模块搭配组合，用来引导用户查看某一个图片列表，或者引导查看更多图片的目的。
用法：多图固定比例在多图模式的时候是最常见的情况，固定模块下采用什么样的搭配组合呢？一般要看图片抓取的数量。

多图不固定比例

多图不固定比例的应用其实并不是很多见，一般出现在，抓取的图片宽高比比较多且没有规律，又想在一个模块中进行搭配组合，同时满足图片内容的最大化显示。
定义：图片宽高比不固定且要组合成一个模块。
难点：在设计时需要限定高度，我当时做的时候是以高图的数量分别定义出几个模型，再让开发根据高图的数量往模板里面套。

注意点：
左右 2 图图片宽度要有一个极端情况，当时定义是 75%：25%，为什么要按比例来？是用户使用的屏幕分辨率有很多，只能按比例来避免有图过宽或者过窄的情况。