赞助商
立即赞助

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

UI设计3年前 (2021)更新 流光
2.7K 0 0

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

一、图文布局

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

1. 上图下文

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

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

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

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

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

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

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

2. 左图右文

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

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

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

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

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

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

3. 图文混排

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

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

二、按钮解析

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

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

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

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

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

1. 主线场景

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

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

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

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

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

2. 支线场景

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

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

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

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

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

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

3. 异场景

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

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

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

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

图片素材作者:Farhan Hadi Priatna

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

重复可以使画面秩序化、整齐化,形成和谐、富有节奏感的视觉效果,更加有利于人们加强对画面的记忆。 一、设计中的重复是什么...
App设计
各位好,我是呆呆,今天这篇文章,是「交互问答」专栏的第一篇文章。文章的内容主要来自于读者提的问题。 这些文章原本可...
交互
最近收到的一则问题,大概是:在做设计的时候,经常会遇到一个问题,就是一个按钮,在同一页面的不同情况下,有时可用,有时...
交互设计
在做设计时,经常为该使用网格还是列表所纠结,一直想找资料来深入了解下这两者的区别。为此呢,我找到了这篇文章,文章作者...
APP界面
生活条件的提升使得大家对于健康的生活方式有了更多的需求。健身类的应用就是帮助力求健康的用户提升生活品质的帮手。借助这...
App设计
很多人误解 UI设计师做的只是画图标和「填色」,也有一些刚入行 UI 的朋友,拿着原型图就开始做设计稿。其实 UI设计师也叫做...
App设计
我们在进行设计的时候,往往遇到以下的场景: 这就是信息的无限性和手机屏幕的有限性之间的矛盾,如何把信息合理的展示给...
App设计
注册登录一直是应用中必不可少的一环,用户打开应用可能第一步就是登录页面,这相当于一款应用的脸面,也是用户使用产品的源...
App设计