UI界面设计 ·

自学APP设计教程,常见的APP界面图片排版优缺点

之前ju111.net跟大家讨论了分享了APP列表的布局展示方式。建议童鞋们可以好好的阅读一下。

1、APP产品列表UI设计思维【移动产品设计干货】

2、APP设计课程:手机APP图文列表设计【大图一列】

而今天,ju111.net的小编继续跟大家聊聊APP设计列表当中的图片与文字的组织关系。

同时告诉大家这些图片文字组合布局的优缺点分析。希望对大家有所帮助。

更美的APP界面设计欣赏

 

 

第一种情况:图片靠左对齐,文字靠右

根据眼动规律来说,也就是PC端我们常说的F型阅读模式

“F”指的就是阅读者视线的运动规律:一般来说,习惯从左至右阅读的读者在读网页时,会先以水平的方式浏览页面上部。接下来阅读者的视线会下移,快速扫描一下副标题或关键字,如果其中恰好有感兴趣的内容,他们就会按正常模式,也就是以水平的方式继续读下去。

言归正传:在移动端正常情况下,用户的注意力从左向右(当然不否定特例的),图片放在列表开头的优势。

如下图所示的:

ios和安卓界面设计区别

APP图片布局方式

三个优点:

A、可以增加识别度,加快用户对该记录的识别速度,比如通讯录左侧头像、IM消息列表头像;这样的布局组合方式的前提是图片比文字更重要点。

B、可以吸引用户注意力,提高点击率,比如很多APP在每个栏目左边会放一个icon;

C、可以用图片内容引发用户兴趣,作为营销的手段提高转化率,比如团购网站的美食列表经常放很有诱惑力的美食图片。

缺点:

A、如果图片与内容没啥关系,就会增加惹眼的污染信息,影响用户的阅读速度;

B、如果图片主要是以营销为目的的,久而久之用户就会下意识自动过滤左侧的图片,图片就成了无用的障碍信息。

 

第二种情况:图片靠右对齐,文字靠左的布局方式

如果列表中,每条记录的内容比图片更重要或者该内容很难用相应的图片进行表达,同时又想充实页面提高页面美观度,又或者想用图片对文字进行补充说明的,可以考虑图片放在右侧;

如下图的界面所示:今日头条APP。

头条的分类首页

 

对于这样类型的APP,内容为主,图片只是配图。APP里面的配图只是对内容的一种补充。让内容看起来更加的丰富。

这样的图片靠右对齐的布局方式适用于新闻类或者说内容为主的APP界面。

优点:适合媒体快速阅读。

缺点:视觉平衡不够好。

 

 

第三种情况:图片放在上方,文字放下方

如下面的这些APP界面设计 作品:

想去APP-091

此时图片的重要程度比放在左侧还要高的多,基本每条记录的主要信息都靠配图来呈现,也主要靠图片来吸引用户,文字仅起到辅助作用。这种处理方式主要利用在视频网站、图片社交、部分购物网站、旅游网站上。

一般用在电商购物网站、旅游网站、视频网站等相关的APP界面设计上。

优点:醒目,大气、辨识度高。

缺点:如果一排只放一条记录,很占空间。对于移动端来说是非常浪费的。

 

 

第四种情况:图片放下面,文字放上面的。

这类图文组合布局方式常见于社交APP界面上。比如我们最常见的就是微信的朋友圈的布局方式。

主要利用于社交的状态列表中,比如朋友圈、微博、空间,主要的优势:可以把文字和图片的结合优势充分发挥出来,文字简要陈诉,图片带你身临其境,还原真实情况。

如下图APP展示:

app图片布局方式2

这样的APP界面图片排版优点:自上而下阅读,常见于一些观点,建议等界面。图片只是阐述辅助。这样的布局设计漂亮。适合快速阅读。

这类跟第二种的图片文字组合方式有类似的地方。

缺点:只适合按某种排序。比如时间、地点等。

 

当然,以上四种图片和文字布局组合方式都是我们APP界面设计当中常见的布局方式。

也是混搭在某一个APP里面的图文列表表现方式。

参与评论