当前位置: 首页 >文章 > 【只言片语06】app图文布局和按钮
收藏
分享

【只言片语06】app图文布局和按钮

举报应骏应骏发布于 2018-08-222191阅读3点赞1评论
如果说的是一件事,那么文字比图片更重要。如果说的是一样物品、人,那么左边放图更合适,...

 图文布局 


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

只有适合的布局。


1.上图下文



上图下文更强调了图片的重要性,以“见”这个属性为优先,上图下文需要注意的是图片高

度过高会严重影响版面效率,而一个具有商业化目的的产品对首页的版面效率异常看中,

同样对图片的质量要求也甚高。通常这样的feed流布局更抓人眼球。




如果确实需要以大图+文的上下方式来布局,尽量找到版面的平衡点,考虑图片与文字之

间想要给用户传达的关系和优先级图片的使用尽量使用黄金比例做展示,例如4:3,2:1,

16:9等




宫格排列式的上图下文能够极大的提升版面效率,一般更多用于电商平台,在首页将某

个模块的优质商品进行透出,提高转化和流量。缺点是缺乏信息完整度,在布局时需要

考虑更多因设备、极限值带来的不同状况的考虑。


可以看出,严选将金额跟在标题后面,而非固定位置,这样做的好处是将标题和金额关

联度更高,形成一致性,缺点是布局上显得层次不齐影响阅读效率。通常这样的排版会

根据业务需要来选择展示一行或多行文字极限。但由于版面效率它不得不只给了两行的

极限高度。



2.左图右文




左图右文形式的排版应该也算是用的非常多了。其实大家会经常把它和左文右边图进行

对比。但无论是左图还是右图,在这样的布局中我们首先就要做好图和文的占比。显示

在外面的图片通常是选取了详情中的图片来进行展示,否则就浪费了比较多的人力资源

去重新配图了得不偿失。同样和图片搭配的信息字段此时就显得极为重要。


菜鸟裹裹其实将标题的优先级又提升到了和图片一样的层次。图片本身给人的视觉冲击

会更强所以即便图片放在标题下面,也不会弱。



方形缩略图是最常用的形式,不至于太窄也不至于太宽,对于右侧信息的布局也显得更

游刃有余。横形的图片会让右侧的文字显示空间压缩的厉害,通常在视频缩略图会用到,

但图片对整个页面的氛围感会更好。竖形的图片让右侧信息有更多的发挥空间,同时版

面的留白也更大,但是如果右侧信息过少,则会让页面有些单调和不完整。


左文右图就不再赘述,现在大多数左文右图在咨询和旅游产品中使用的更多,因为用户

在浏览这样的列表信息时图片无法在第一眼被识别出具体内容,而对于这样的产品来说

无疑是低效的。当然很多时候没有那么多时间去验证如此设计对于用户来说是否真的能

提高浏览效率,提升了多少满意度。我们可以简单的理解,如果说的是一件事,那么文

字比图片更重要。如果说的是一样物品、人,那么左边放图更合适,体会一下。



3.图文混排




为了使信息传达的更一致,通常如果没有大量的文字信息则我们会选择文字与图片混排的

形式,为了适应多变的图片,我们会在文字底部加一层黑色半透明蒙层或者给文字加一

无伤大雅的阴影。前提是文字信息不会太多而干扰到图片内容的展示和传达。



 按钮解析 

其实严格意义上来说,能通过点击出发交互动作的控件我们都能将它定义为按钮但是如果

这样定义那就没的玩了,所以我们将移动端的按钮定义为具有引导性并且可点击的控件。


例如京东金融查看历史支取利率后的箭头,其实这才是这一行的引导按钮,但是为了更好

的触发点击通常会将整一行都作为点击热区。


所以为了区分不同的按钮的用法,我这边将按钮进行了一个分类:1.主线场景 2.支线场景 

3.异常场景


主线场景下的按钮通常会使用的比较大,为了强化和引导核心的任务流程,所以该按钮应

该是最醒目的。


样式通常会分为通栏和非通栏,而通栏则是从MD设计中衍生出来的一种形式。


1.主线场景



要注意的是,通栏和非通栏按钮我们到底该如何选择,首先我们需要知道这样的按钮都是

放在页面的底部固定显示,不会随着内容滚动,如果选择通栏按钮,则更适合可滚动的页

面容器,也就是说一页中内容较多在一屏幕中无法显示全的页面,优点是按钮的优先级会

很高,但是在iphonex这样的设备中,适配会纠结一些。


而如果选择不通栏的按钮,我们要考虑的是页面内容是否很长,如果很长需要在按钮底部

加一层白色背景,尽量不要让内容穿过按钮,因为底部其实并不是内容最好的现实区域。

同样非通栏的置底按钮相较于通栏按钮层级就显得没那么高。



所以我们会发现考拉和淘宝虽然有样式区别,但实际上都相当于在底部有一层内容遮盖的

部分。



2.支线场景

再来看支线场景的按钮,支线场景的按钮一般能够分为:图标、文字、图标+文字、框+图

文字+图标这样几种类型



图标就不用说了本身就具有可操作的属性,也有修饰的属性,关键看他的场景和布局位置。

例如淘宝的tab标签上的定位图标,就是一种修饰型的图标,为了更好理解这里的定位是一

种楼层定位,随着页面滑动到不同的业务模块而会跳动,这里并不是一个tab 的功能,不能

算是切换页面。


如果把定位按钮单独拿出来放在导航栏,或者页面右侧的空白处,我们就会觉得他是一个可

点击并能够进行跳转的按钮。


包括“查看全部”这样的文字,即便不加箭头我们也会尝试去点击,高亮显示就更加明显,用

户已经形成这样的意识,但是像上面的规格和参数如果不加箭头会让用户觉得这里并没有可

操作的东西就不去点击了。所以我们总结一下就是支线按钮的使用场景较为复杂,需要通过

参考上下文的情景来做不同样式的选择。


不过支线流程毕竟是支线流程,为了不打扰主线流程,尽量不要将支线流程的按钮做的过分

明显。例如淘宝详情页中的进店逛逛,其实这个按钮用了实心的色块做了强引导,目的是为

了提高客单价,同样只要是对最终目标有帮助,并不能算是跳失,说不定回来的时候买了更

多更贵的东西。


3.异常场景



异常场景下的按钮不需要做的过于醒目,一般会采用幽灵按钮或者和背景近似的颜色。该场景

下按钮大多数情况是希望用户点击奖页面回复正常状态,并不是一种强烈的引导。


以上就是本期内容,多谢收看。

1条评论
别默默看啦~登录/注册一起参与讨论吧~

暂无评论

请选择举报理由

违反法律法规

侵犯个人权益

有害网站环境

更多训练营>>

为你推荐 · 训练营(全勤打卡报名费全额返累计全额返用户133,481人)

【4月】趣味MG动画制作训练营
距离开班仅剩11天31人已报名
【4月】零基础手绘插画训练营
距离开班仅剩11天59人已报名
电商海报设计训练营
距离开班仅剩39天23人已报名
特惠
充值
7折购
今日还在继续学习的你,太棒了!
7
折扣券可用于
年费无限VIP
立 即
使 用
此活动优惠不可与其他活动叠加使用
有效期:000000
消息
登录即可查看消息记录
建议
意见
官方
客服
在线咨询客服热线

您可以与在线客服进行沟通获得帮助

工作日:9:00~22:00节假日:9:00~18:00

联系在线客服

您可以电话联系客服进行沟通获得帮助

工作日:9:30~18:30

400-862-9191
虎课
积分
免费学习89000+个教程!
配套素材、源文件一键下载!
昨日学员已学习了46,688
并提交了341份作业!
登录后立即学习!
loading
微信扫码关注即可登录
您需要同意协议才可以进行登录
登录虎课网,每天免费学课程全站 89000+ 视频会员教程 | 每日可免费学 1
为确保账户信息安全
请先进行真实姓名验证后进行充值付款
立即验证