新手科普！APP 的图文布局和按钮总结

编者按：常见APP 图文布局有哪？不同按钮有哪用法？今天篇总结帮新手认识基础识，赶紧来收！

一、图文布局

用户所关注的内容以及不同的业务诉求决定信息的优先级排，所以没有通用的局，只有适合的局。

1. 上图下文

图下文强调了图片的重性，以「见」这属性优先，图下文需注意的图片高度过高会严重影响版面效率，一具商业化目的的产品对首页的版面效率异常看中，同样对图片的质求也甚高。通常这样的 feed流布局抓人眼球。

如果确实需以图+文的下方式布局，尽找到版面的平衡点，考虑图片与文字之间给用户传达的关系优先级图片的使用尽使用黄金比例展示，例如4:3，2:1，16:9。

宫格排列式的图下文能够极的提升版面效率，一般多用于电商平台，首页将某模块的优质商品行透出，提高转化流。缺点缺乏信息完整度，布局时需考虑多因设备、极限的不同状况的问题。

以看出，严选将金额跟在标题面，而非固定位置，样做的处是将标题和金额关联度更高，形成一致，缺点是局上显得次不齐影响阅读效率。通常样的排版根据业务需要来选择展示一行或行文字极。但由版面效率它不得不只给两行的极高度。

2. 左图右文

左图右文形式的排版应该也算用的非常多了。其实家会常把它左文右图行对比。但无论左图还右图，这样的布局中我们首先就好图文的占比。显示外面的图片通常选取了详中的图片行展示，否则就浪费了比较多的人力资源去重新配图了得不偿失。同样图片搭配的信息字段此时就显得极重。

菜鸟裹裹其将标题的优先级又提升到和图一样的次。图身给人的视冲击更强所以即便图放在标题下面，也不弱。

方形缩略图是最常用的形式，不至太窄也不至太宽，对右信息的局也显得更游刃有余。横形的图让右的文字显示空间压缩的厉害，通常在视频缩略图用到，但图对整个页面的氛围感更。竖形的图让右信息有更的挥空间，同时版面的留白也更大，但是果右信息少，则让页面有单和不完整。

左文右图不再赘述，现在大多数左文右图在咨询和旅游品使用更多，为用户在浏览这样列表信息时图片法在第眼被识出具体内容，而于这样品来说疑是低效。然很多时候没有那么多时去验证如此设计于用户来说是否真能提高浏览效率，提升了多少满意度。我们可以简单理解，如说是件事，那么文比图片更要。如说是样物品、，那么左边放图更合适，体会下。

3. 图文混排

为使信息传达的更一致，通常果没有大量的文字信息则我们选择文字与图混排的形式，为适应变的图，我们在文字底部加一黑半透明蒙或者给文字加一无伤大雅的阴影。前提是文字信息不太而干扰到图内容的展示和传达。

二、按钮解析

其严意义上来说，能通点击触互动的控件我们能将它定义为按钮，但是果样定义就没的玩，所以我们将移动端的按钮定义为具有引导并且点击的控件。

例如京东融查看历史支取利率后箭头，其实这才是这引导按钮，是为了更好触发击常会将都作为击热区。

为了区分同的按钮的法，我这边将按钮进行了一个分类：线场景、支线场景、异场景。

主线景下的按钮通常会使用的比较大，为了化和引导核心的任流程，所以该按钮应该是最醒目的。

样式通常会分通栏非通栏，通栏则从 MD 设中衍出的一种形式。

1. 主线场景

要注的是，通栏和非通栏按钮底该如何选择，首先需要知道这的按钮都是放在页面的底部固定显示，不会随着内容滚动，如果选择通栏按钮，则更适可滚动的页面容器，也就是说一页中内容较多在一屏幕中无法显示全的页面，优点是按钮的优先会高，但是在 iphone X 这的备中，适配会纠结一些。

如果选择不通栏的按钮，我们考虑的页面内否很，如果很需按钮底部加一层白色背景，尽不让内穿过按钮，因底部其实并不内好的显示区域。同样非通栏的置底按钮相较于通栏按钮层级就显得那么高。

所以我们会发考拉淘宝虽然样式区别，但实际都相当于底部一层内遮盖的部分。

2. 支线场景

再看支线场景的按钮，支线场景的按钮一般能够分：图标、文字、图标+文字、框+图文字+图标这样几种类型。

图标就不用了本身就具可操作的属性，也修饰的属性，关键看他的场景布局置。例如淘宝的 tab 标签的图标，就一种修饰型的图标，了好理解这里的一种层，随页面滑动到不同的业务模块会跳动，这里并不一 tab 的功能，不能算切换页面。

果把定位按钮单独拿出来放在导航栏，或者页面右的空白处，我们就得他是一个点击并能够进行跳转的按钮。

括「查看全部」这样文，即便不加箭头我们也会尝试去击，高亮显示更加明显，用户已经形成这样意识，是像上规格和参数如不加箭头会让用户觉这里并没有可操作东西不去击了。所以我们结下是支线按钮使用场景较为复杂，需要过参考上下文情景来做不样选择。

过支线流程毕竟是支线流程，为了打扰线流程，尽量要将支线流程的按钮做的过分明显。例如淘宝详情页中的进店逛逛，实这个按钮了实心的色做了强引导，目的是为了客单，同样只要是对最终目标有帮助，并算是跳失，说定来的时候了更多更贵的东西。

3. 异场景

异常场景下按钮不需要做过于醒目，般会采用幽灵按钮或者和背景近似颜色。该场景下按钮大多数情况是希望用户击将页恢复正常状态，并不是强烈引导。

注作者的微信公众号：「应谋鬼计」

图片素材作者：Farhan Hadi Priatna