写给UI设计师的图文设计指南！超多实战案例

为什么要重视APP的图文页面？

从人类进化的结果看图像比文字更受大脑的青睐，在没有文字之前，人类靠的都是「看」出来的图像，所以在APP UI设计中图片比文字更容易让人产生点击欲望。图片在APP UI设计中的应用也非常的广泛。

曾经有一个国外的调研结果，吸引人眼球图片内容排序，人脸 >人>动物>物体。在单张图片选择时也可以在满足产品需求的情况下从生理角度考虑对眼球的吸引力。

我曾负责千万级访问量APP的图片设计，想把做图片APP时的一些思考分享给大家，方便大家在设计APP图片列表、图文混排、图片流、设计图片相关模块无从下手时，能提供一些思路和灵感。
希望对你能有帮助。

图文混排的方式及场景有哪些？

1. 单图设计

单图全屏

定义：单图全屏也就是整个图片撑满屏幕，一般用于开屏启动页、引导页，登录页面的背景，详情页产品介绍底图等。

优点：单张图片冲击力更强，更容易传递品牌调性，图片处理更加灵活。

缺点：对图片质量要求比较高，比如构图、细节都有一定要求，如果是产品图片背景，以及主要内容集中区域展现会有一定的要求。

可使用拼合效果如滴滴的启动页，或者在图片上方加遮罩和纹理，使图片传递出文艺、高端或者其他任何跟品牌形象相关的感受。第二幅图的图片做了纹理处理，更加有质感。最后一个把整个产品作为一个背景底图，使产品表达更直接，搭配卡片辅助信息或者引导button，能增加用户决策效率。

单图卡片（不下拉）

定义：首屏页面中，以一张图片设计为主要视觉引导，其他会有操作信息以及文字信息。

用途：一般用于突出产品调性，比如交友软件的卡片页面，分享的落地页，以及一些专题的入口等，图片作为一个产品的载体及跟用户交流的入口，能第一眼把用户的眼睛聚焦在图片上，从而达到查看其它信息或引导进行其它交互操作的目的。

单图+辅助信息（可下拉）

定义：首屏出现一个宽度撑满，高度自适应的产品图片或者商品图片。

用途：某一些产品大图页，或者详情页的头图，提升产品氛围，引出产品形态以及详细内容。

需要注意：

• 因图片高度一般不固定，需要设置一个最高高度度，比如屏幕高度的75%，wap页面要考虑浏览器底部操作高度，如超过区域或进行裁切，或是同比例缩放放一个底色上，一般采用黑色
• 高度不宜过高，最好能露出部分辅助信息，新设计页面时会做适当引导，比如：提示用户可上拉的箭头或者小手。

2. 图文列表

左图右文-较常见图文列表组合

根据F形浏览引导线，更重要的图片信息放在前面，左图右文模式更强调用图吸引用户浏览视线。

应用场景：搜索结果或推荐list，如房产APP搜索结果 list、购物类搜索结果、播放列表、游记类型结果页。

右图左文-较常见图文列表组合

资讯类型、新闻类APP，更强调文字标题信息，往往图片跟标题的对应性没那么高，有一些是用户自己上传，有很多不可控因素。

应用场景：信息流feed，经常搭配三图模式、纯文字模式一起出现，如今日头条、房产APP、新闻类推荐结果、天气卡片等。

图片流：

一列限高

定义：宽高比固定，主要上图下文，或者字在图上2种形式。

用途：一般用于抓取或者用户上传的图片高度比例较为固定，多采用横图，首屏至少能显示2张半图，竖图也有，但是比较少。

一列不限高

定义：宽高比不固定，宽度撑满，高度不做限制，主要有图+文字组合，可上图下文结构，或者字在图上2种形式。

用途：一般用于抓取或者用户上传的图片宽高比不固定的情况，满足大部分图片的信息展示，比如：百度的大图页大图模式就是采用这样的布局的经典例子。

图片流：二列

二图限高-经典图片流布局

定义：2列图片组合限高，通常是指一行2列图片，图片高度按比例进行控制，采用相同比例。

用途：一般用于专辑封面、海报封面、视频截图封面等，比如：bilibili的推荐模块。

二图不限高-瀑布流图片

瀑布流布局的出现，一方面是避免引起视觉疲劳，一方面能满足在限宽的情况下，图片的高度能更多的舒展，使图片的空间利用率更高，产品信息展现更丰富。

定义：2列图片组合不限高，通常是指一行2列图片，图片高度自适应，用于产品图片高度不固定的产品类型，会有一个最高高度和最窄高度极端情况定义。

用途：比如图片短视频封面，pinterest结果页瀑布流，有上图下文，或者只有图片2种结构较为常见

图片流：三列限高

定义：指一列有3个图片，且图片控制固定比例的设计，一般有上图下文，只有图片，或者标题+三个图片的组合搭配。

用途：比如图书封面、海报封面、今日头条信息流图文结合等。

圆形图片

定义：图片为圆形，比例1：1。

用途：圆形图片在APP图片设计中也非常的常见，出现最多的应该是作为头像了。

常见组合：左图右文、上图下文、一列3-4个头像或者可以滑动等。

3. 多图模式设计

多图固定比例

定义：超过3张以后的图片模块搭配组合，用来引导用户查看某一个图片列表，或者引导查看更多图片的目的。

用法：多图固定比例在多图模式的时候是最常见的情况，固定模块下采用什么样的搭配组合呢？一般要看图片抓取的数量。

下面几种不同图片数量下的展示形式，当然还会有很多，主要是考虑，当前数量的图片在整个页面中所占的比重以及展现数量这2个条件决定设计的样式。

多图组合的搭配有很多，可参考微信朋友圈自己上传的不同图片数量所呈现出来的模块搭配。

单个图片比例：一般有横版和方图2种，看抓取的图片本身的一个比例。

多图不固定比例

多图不固定比例的应用其实并不是很多见，一般出现在，抓取的图片宽高比比较多且没有规律，又想在一个模块中进行搭配组合，同时满足图片内容的最大化显示。

定义：图片宽高比不固定且要组合成一个模块。

难点：在设计时需要限定高度，我当时做的时候是以高图的数量分别定义出几个模型，再让开发根据高图的数量往模板里面套。

注意点：

左右2图图片宽度要有一个极端情况，当时定义是75%：25%，为什么要按比例来？是用户使用的屏幕分辨率有很多，只能按比例来避免有图过宽或者过窄的情况。

图片比例有哪些以及应用场景？

1. 图片比例 1：1

1：1图片比例能更大程度突出主体物，对横竖图做裁切之后，应用方图能能完整的保留图片信息。

应用场景：电商结果页图片、专辑封面等。

2. 图片比例16：9

16：9的屏幕比例是现在大部分电影片源的比例，从成本的角度考虑实际是16:9相比16:10和4:3更省成本，同样一块大面板，用16:9切割出的小面板多，所以一直沿用这个比例。

应用场景：电视剧、电影相关推荐页。

3. 图片比例3:2

3:2的图片比例是我们最常见的，它是传统135胶片的标准比例，也是大部分数码相机图像传感器的比例。使用3:2比例拍照时，横竖构图都很方便。

应用场景：资讯类app配图、用户自己拍摄图片上传如爱彼迎。

4. 其他比例

其他比如4：3的比例也是比较常见的图片比例，一般出现在大图单个图片的定义上6：8或者黄金分割比例也会在一些APP里面看到。

5. 设计APP页面时选择什么样的图片比例呢？

首先我们在定义图片是选用竖图还是横图的时候，是看我们设计的产品本身，是某一种固定的比例图，还是不规则图片比例。

高图

人物类

高图随着智能手机的普及，越来越多的应用于我们的app设计中，首先是人物类竖版更容易看出全身信息。

图书封面

电影海报

横图

横图在设计时更节省屏幕空间，比如风景、短视频封面、房产推荐图都比较喜欢用横图。

视频封面

方图

方图的应用其实是最广泛的、不管是横图还是竖图，方图都能最大限度满足主体物最大显示，而且方图还能满足文艺感，所以，APP设计时很受设计师青睐。

电商图

商品图

裁切规则

有的人可能会问，按比例之后图片怎么放到框框里面呢？

一般的裁切规则有以下几种，其中第一种比较常见，第二种视觉效果略差，但是能满足图片信息全部展现，第三种智能裁切，对技术要求比较高，图像识别技术这块会有一定的要求。

图片手势操作有哪些？

图片的手势操作分为：上下滚动、左右侧滑、单击、双击、放大这几种，最新发布的手势交互，无触碰交互可能未来也会是一个趋势。

1. 上下滚动、左右侧滑

上下滚动：

上下滚动这个常见的手势一般用于页面内容超过一屏时，可以滑动查看下面的信息，一般内容属于相同层级且可以一直滚动查看相同内容，如瀑布流。

左右侧滑：

左右侧滑手势更多用于侧滑之后的图片页面为相同层级，且图片本身需要拓展更多内容的情况，更大拓展横向竖向内容空间利用率。

2. 单击、双击、放大

单击：

单机操作是常见的交互方式，图片、文字、链接、按钮等都会应用到。

双击：

一般用于对图片本身进行某些操作，比如喜欢、收藏、赞等。

放大：

放大图片在图片想查看细节时会经常用到，有一些APP图片是不支持放大功能的，在大图页应用较多。

图版率是什么？

在页面设计中，除了文字之外，通常都会加入图片或是插图等视觉直观性的内容。表示这些视觉要素所占面积与整体页面的之间比率的就是图版率。简单说来，图版率就是页面中图片面积的所占比。这种文字和图片所占的比率，对于页面的整体效果和其内容的易读性会产生巨大的影响。

但并不是图版率越高越好，要看实际项目中是否需要传递给用户丰富、活泼、热闹的感受。

图片本身的内容也会起到一定作用。

提升图版率的方法：加入一些图标设计，或者图片和色块结合都可以起到视觉上提升图版率的作用，当然如果没有图片也可以画一些插画跟背景结合的形式。

还有哪些图片处理效果？

除了上面我们介绍的图片的排布方式，图片的比例、手势操作等，设计图片时，怎么能让APP更有特色呢？我们来看下一一些图片常见的处理手法。

1. 抠图+背景色效果

应用场景：图片内容较为固定，图比如某一些品类的入口，品类不宜过多，要不然运营设计同学会有很大压力，如果经常更换运营成本也较高。

优势：背景能自定义，跟图片本身结合能产生很强的设计感，页面整体设计风格可控。

2. 图片+毛玻璃效果

应用场景：一般用于APP页面，对性能有一定的消耗，wap端应用比较少。

优势：毛玻璃效果能更大程度满足图片氛围的同时，又能兼顾文字内容展现。

3. 图片+渐变遮罩效果

应用场景：一般用于背景图片颜色未知的情况下放在文字底部保证文字能在任何图片下的可读性，例图中也加入了颜色，具备一定美观视觉感受。

图片缺省及极端情况

图片加载本身要比文字要更慢一些，在网络不好，或者没网的时候，会有哪些办法让用户减少挫败感呢？

1. logo+灰底，或只有灰色底

如果需要强调品牌可以加入logo的形式，不宜过深，能起到传达品牌形象的作用，还有一种就是直接灰色色块占位，让用户了解这个区域是一个图片，但是未加载出来。还会有一个app在灰色块上面加一个白光动效，传递正在加载中这一信息。

2. 彩色块

一般用于图片瀑布流，查看图片滑动过快或者网络不好时，有2种展现规则，第一种是设计师自定义一批色值，开发随机调取，第二种计算当前需要展现的图片的颜色平均值，给出一个色块，效果更好，但是有一定开发成本。

看到最后的小伙伴有福了，最后送上高清免费国外网站：

关注更多设计思维、UI动效、创意请关注：有爱设计站