火星网校
APP的风水学！关于图文设计排版的那些事儿……
APP的设计即使玩出花儿来，无外乎还是要承载图文的；而图文的设计最先要解决的就是排版问题，今天一篇文章给你讲透“APP风水学”！关于图文设计排版的那些事儿……
图文布局版式是app设计的骨干支架。
各类app通常会以不同的 业务需求 和 用户引导 需求来进行决定信息的排布优先级，只有合适的图文布局形式才能让用户有效的被引导，实现产品的设计目标。
以下将结合通过各类app的版面案例，来解析三种常见的图文布局版式。
希望这次的学习，也能在大家以后的页面设计中提供一些思路和选择方案。
1、上图下文
上图下文更强调了图片的重要性，已图片为先，这类图文布局通常被运用在有大量优质图片的提供和产生的app中，如设计类、杂志类、摄影类、短视频类app，利用高质量吸睛图片来抓住用户的眼球，但值得注意的是，这类布局的缺点是图片版面占比太大，版面利用率偏低，且对图片质量较高。
如果一定要用这类图文布局，考虑到图片与文字之间的优先级关系，应尽量使用 黄金比例 做展示，如 4:3，2:1，16:9 等。
说到上图下文的图文版式，不得不提到 宫格版式 的上图下文，这种图文版式能够极大的提升页面版式的利用率，一般多用于电商平台的商品展示，能同时将多个产品图片及信息同时展示，提高流量和转化率。
而这样的版式布局的缺点则是缺乏信息的展示完整度，在布局时要更多的考虑到不同的设备终端所带来的展示信息的极限值的设置。
2、左图右文
左图右文的图文版式算是非常常见了。大家经常会将它与左文右图来进行对比，其实无论图片在左边或是右边。
这类布局我们优先考虑的应该是图文之间的占比，除此之外，如果在这个版面中，图片的优先级是高于文字的，那么我们通常会选择左图右文，反之则会选择左文右图。
方形的缩略图是最常用的形式，适中的宽窄比例也让右侧的文字显示空间更加舒适。横形的图片比例会让右侧的文字空间进行挤压，但是图片增加了页面的氛围感。
竖形的图片让右侧有更大的空间，同时版面的留白也更大，但是如果右侧的信息过少，则会让页面右也不完整和不平衡。
3、图文混排
为了使信息传达的更一致，如果没有大连的文字信息我们通常会选择图文混排的版式来进行页面布局，为了适应多变的图片，我们通常会在文字底部加一层黑色半透明蒙层或者给文字加隐形来增加文字的可阅读性。
总结，各类的app会根据自己的产品业务诉求，来设计不同的版面与布局， 没有对错，只有是否合适 。只有合适自己的产品的版面布局，才能实现自身产品产生价值最大化，和商业转化。希望给你启发！
作者： 邵丹
来源：UI设计师之家
下一篇 进阶线性图标设计教程
-
2101期学员李思庭作品
-
2104期学员林雪茹作品
-
2107期学员赵凌作品
-
2107期学员赵燃作品
-
2106期学员徐正浩作品
-
2106期学员弓莉作品
-
2105期学员白羽新作品
-
2107期学员王佳蕊作品
相关文章
多种教程 总有一个适合自己专业问题咨询
你担心的问题，火星帮你解答-
可灵年化5亿美元谷歌带队出海安徽举办省级漫剧大赛AI设计日报0623
可灵正推进从快手分拆独立运营，内部方向为2027年初递交港股上市申报 来源：上海证券报（2026-06-17） AI短剧"产......
-
火星时代
-
腾讯又放大招这款AI工具让游戏美术效率提升300是真革命还是噱头
但对于追求极致细节的资深原画师来说，自动化程度高也意味着部分控制权让渡，需要适应 实测体验：响应速度确实惊艳，比传统生图的等待......
-
2026年，AI短剧早已不是"写一段提示词等生成"的粗放阶段真正拉开差距的，是谁先把从立项到出片的整套工业化流程跑通 过去做A......
-
什么是负面提示词？ 在AI绘画中，我们通常用正向提示词告诉模型想要什么——比如"一个穿红色连衣裙的女孩站在海边"这时候你需要一......
-
做AI漫剧最头疼的是什么？不是剧情写不好，不是场景出不来——是角色脸上的表情 想写角色开心，只会一句"他开心地笑了"；想写难过......
