无遮罩就是对图片做一些优化使图片与文字相互独立开来，且常使用文字左上-图片右下的对角线布局，由此可见文字信息与图片同样重要。但这就要求图片必须是定制的，否则图文可能会互相干扰。此外，由于图片部分没有遮罩，对图片的精美度要求相比于半透明遮罩也更高了。如下图：美团的专题模块就采用了这种图文混排无遮罩的形式，美食旅游类产品相比于资讯话题类产品，更需要图片来传达信息。
渐变蒙层则只是遮盖住图片部分，由此可见图片的重要度相比半透明遮罩是有所提高的。同样，因为非全部覆盖，所以对图片的质量有一定的要求。如下图：
爱奇艺的首页推荐banner中，都是一些热播剧。一个剧集相对来说海报的重要度肯定是高于文字的，所以采用这种部分遮盖的内阴影形式，并且将渐变蒙层和文字置于图片底部，进一步突出图片的重要性。当然，如果文字也相对比较重要的话，可以将渐变蒙层和文字置于图片顶部，就与上图下文和上文下图的区别一样。如下图：
最新版的微信订阅号消息列表，由于是资讯类信息，所以将同样重要的文字置于图片顶部。
那么无论是半透明遮罩、无遮罩还是渐变蒙层，都是将文字置于图片内部，其目的都是为了节省空间，提高版面效率。而过多的文字信息也会干扰图片信息的传达，所以文字信息完整度也会有所欠缺。
通过上面的分析，我们可以总结出这几种布局方式在四个维度上的差别：图文重要倾向、图片质量要求、文字信息完整度、版面效率。(注意：图片质量要求包括精美程度以及定制化程度)
因此，我们可以根据以上四个维度来选择合适的布局方式。
参考文献：
新手科普！APP 的图文布局和按钮总结 https://www.uisdc.com/apps-graphic-layout-button-summary
原文地址：海盐社（公众号） 作者： 海舟
FEVTE编注：更多平面设计理论学习请访问飞特网平面设计理论知识栏目，地址：https://www.fevte.com/plan/shejililun/
飞特游客
委托设计