上图下文：一行只显示一张图片，大多采用横图，同屏一般不超过两个内容，用户需要从图片中获取大量信息，对图片的质量要求很高，大多有专门的人员审核，以完成对图片的品质的把控 。这种方式很占用界面的纵向空间，部分租房类、艺术类产品会选用此种方式 。

文章插图
双列组合
并排：相同高度的比例控制，是较为经典图文布局，相比单列，同屏可展示更多的图片内容且空间利用率更高，能同时向用户传达更多信息 。
错位：图片高度自适应（瀑布流），在限制宽度的条件下，高度自由发挥，让图片得到更多的舒展，利用率更高 。双列错位的排版方式增加了版式的趣味性，可缓解用户在长时间浏览下的视觉疲劳，需要注意的是宽高比例不要太大、成跳跃式的变化，否则可能导致视觉混乱，且低高度的图片信息很容易被忽略 。

文章插图
3）多图组合
不规则：多图不规则比例并不常见，因移动端设备可视宽度有限，容易导致混乱的错觉 。艺术、拼图类产品看到的居多，另外，部分社交类产品为了展示不同远近距离的层级关系也会用到这种排版方式 。

文章插图

图片常见的手势操为：滑动、点击、双指缩放，除此之外，还有很多针对所有元素都可以操作的交互手势，这里就不多说了，下面单独对图片手势作出介绍 。
1）滑动
左右滑动：为了拓展更多内容，多用于相同等级的图片列表或大图切换，在页面列表中会将无法同时展示的图片呈现一部分或以数量作为提示，引导用户探索以发现更多 。

文章插图
2）点击/长按
单击：单击可查看图片，从缩略图到详情或大图的切换操作；
双击：针对图片本身进行某些操作，比如喜欢、点赞等，另外，部分图片通过双击进行一定比例的放大缩小 。
长按：调出图片的部分属性信息、下载图片等进行下一步操作 。

文章插图
3）双指缩放
当我们需要查看图片的某些局部信息或细节时，就会使用双指（开合）缩放的交互手势 。

文章插图

三、图片样式效果因图片的色彩变化不规则，为了保证图片上层文字的可读性，通常会在文字区域加一个纯色遮罩，也可设置不透明度的渐变效果，使遮罩跟图片的过渡更加协调，提升视觉美观度 。
毛玻璃效果通常出现在应用的2、3级页面，对应用性能会有一定的消耗，一般使用封面图片进行大幅度的高斯模糊作为背景使用，可在上层加上一定透明度的蒙层配合使用，透明度数值根据不同的图片色彩及使用场景适当的调整 。毛玻璃效果既能满足文字内容的清晰呈现，又能提供场景氛围并提升界面的品质感与神秘感，我们最熟悉的当属音乐播放页面的背景模糊效果了 。
对于自营平台，内容较为固定的商品页面，可将商品抠图后自定义背景，让界面的整体设计风格可控，延展性更高 。不适配平台类型应用，因为会让商家产生较高的运营成本 。
图片圆角值设定，能体现出不同的产品属性及气质 。例如：直角比较硬朗，给人高冷、力量的感觉，小圆角传达出安全、专业的属性，而大圆角显得活泼、可爱，更有亲和力 。

• 农村最好风水户型 按照风水设置农村户型
• 怎样设置网页字体大小 网页字体大小设置在哪里
• 使命召唤7怎么设置最流畅 使命召唤7配置文件
• 淘宝旺旺满意度怎么提升？怎么设置？
• 淘宝坏单包赔怎么理赔？怎么设置？
• 淘宝品牌店有什么标签？淘宝店铺标签怎么设置？
• ppt形状怎么置于底层 ppt置于顶层快捷键怎么设置
• word添加动态效果 Word动画设置
• word表格序号怎么自动生成 word序号自动排序怎么设置格式
• 苹果xr怎么设置来电闪光灯亮 xr为什么不能显示电池百分比了