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

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

从人类进化的结果来看，图像比文字更受大脑青睐。在没有文字之前，人类靠的是“见过”的图像。所以在APP界面的设计中，图片比文字更容易让人产生点击的欲望。APP界面的设计也广泛使用图片

曾经有一个国外的研究成果，引起了人们的关注。图片内容排序，人脸>:人>:动物>:物体。在选择单幅图片时，也可以在满足产品要求的同时，从生理角度考虑对眼球的吸引力

曾经负责过百万访问量的APP的图片设计，想分享一下制作照片APP时的一些想法，让大家在设计APP图片列表、图文混合、图片流、设计图片相关模块时提供一些思路和启发。

希望对你有帮助。

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

1.单图设计

单画面全屏

定义:单图全屏是指全图填充屏幕，一般用于打开启动页面、指南页面、登录页面背景、详情页产品介绍底图等。

优点:单幅画面冲击力更强，更容易传达品牌调性，画面处理更灵活。

缺点:对画质要求高，比如构图，细节。如果是产品图片背景，对主要内容集中区域的显示会有一定的要求。

可以使用拼接效果，比如滴滴的启动页面，或者在图片顶部添加蒙版和纹理，让图片传达出文艺、高端或者其他任何与品牌形象相关的感觉。第二张图中的图片是有纹理的，这样更有纹理。最后一个把整个产品作为背景底图，让产品表达的更直接。配合卡片辅助信息或引导按钮，可以提高用户的决策效率。

单张图片卡(不要下拉)

定义:在第一个屏幕页面，一个画面设计是主要的视觉引导，其他的会有操作信息和文字信息。

用途:一般用于突出产品的调性，如交友软件的卡牌页面、分享的登陆页面、一些专题的入口等。图片作为产品的载体和与用户交流的入口，可以让用户的目光第一眼就聚焦在图片上，从而达到查看其他信息或引导其他交互操作的目的。

单幅图片+辅助信息(下拉)

定义:在第一个屏幕上，出现一个产品图片或全幅、高适应性的产品图片。

用途:某些产品的大页面或详细页面的页眉，可以增强产品氛围，引出产品形式和详细内容。

需要注意的是:

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

2.图形和文本列表

左侧图片和右侧文本-更常见的图片和文本列表组合

F型浏览指引线，更重要的图片信息放在前面，左图右文模式强调吸引用户浏览注意力。

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

左侧文本在右侧-更常见的图形列表组合

信息类型，新闻类app，比较强调文字标题信息，往往图片和标题对应度没那么高，有的是用户自己上传的，不可控因素很多。

应用场景:信息流feed，经常和三图模式、纯文本模式一起出现，比如今日头条、房产app、新闻推荐结果、天气卡等。

图像流:

一列的高度限制

定义:宽高比是固定的，主要是图片上下，或者图片上两种形式的文字。

用途:一般用于拍摄或上传固定高度比的图片，多采用水平图片，第一屏至少可以显示两张半图片，垂直图片也有，但很少。

柱子的高度不受限制

定义:宽高比不固定，宽满，高不限。主要有两种形式:图片+文字组合，上下结构，或者图片上的文字。

用途:一般用于捕捉或用户上传图片的长宽比不固定时，以满足大部分图片的信息显示。比如百度的大页面大图片模式就是采用这种布局的经典例子。

图像流:两列

双画面高度限制-经典画面流布局

定义:两列图片的组合高度限制通常是指一行两列的图片，图片的高度按照相同的比例控制。

用途:一般用于相册封面、海报封面、视频截图封面等。，例如:bilibili的推荐模块。

两张图不限高度——瀑布流水图

瀑布流布局的出现，一方面可以避免造成视觉疲劳，另一方面可以满足在宽度有限的情况下，图片的高度可以延伸更多的要求，使图片的空利用率更高，产品信息更丰富。

定义:两列图片的组合高度不限，通常指一行两列的图片。图片适应性强，用于产品图片高度不固定的产品类型。最高高度和最窄高度会有一个极端的案例定义。

用途:例如，图片的短视频封面，pinterest结果页面的瀑布流，上下，或者只有图片比较常见

图片流:三列高度限制

定义:指一栏三张图的设计，图片控制固定比例。一般只有上下图，或者标题和三张图的组合。

用途:例如，书籍封面、海报封面、今日头条信息流、图形组合等。

圆形图片

定义:图片为1: 1比例的圆形。

用途:圆形图在APP图片设计中也很常见，最常见的应该是作为头像使用。

常见组合:左图、右图、上图、下图、3-4个头像一列或滑动等。

3.多图图案设计

多图固定比例

定义:3个以上图片模块的组合，用于引导用户查看某个图片列表或引导用户查看更多图片。

用法:多图定标是多图模式下最常见的情况。固定模块下使用什么样的搭配组合？一般要看拍摄的图片数量。

当然，在不同的图片数量下会有很多显示形式，主要是考虑到当前的图片数量占整个页面的比例和显示的图片数量决定了设计风格。

多图组合有很多。可以参考微信朋友圈上传的不同图片呈现的模块组合。

单幅画面比例:一般有横版和方图两种，取决于拍摄画面本身的比例。

多图不固定比例尺

其实不固定比例的多图应用不是很普遍。一般拍摄的图片宽高比大且不规则，他们想在一个模块中匹配组合，同时又能最大限度的显示图片内容。

定义:图片的长宽比不是固定的，要组合成一个模块。

难度:设计的时候需要限制高度。我在做的时候根据高图数定义了几个模型，然后让开发者根据高图数插入模板。

注意事项:

左右图应该有一个极限的画面宽度。当时的定义是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或者黄金分割比例也可以在一些应用中看到。

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

首先，我们在定义画面是垂直的还是水平的时候，要看我们设计的产品，是固定比例的画面还是不规则比例的画面。

高徒

字符类

随着智能手机的普及，我们的app设计中越来越多地使用高画质。首先，在人物画像中更容易看到全身信息。

图书封面

电影账单

水平图

水平图在设计上节省更多的屏幕空。比如风景，短视频封面，物业推荐图都比较喜欢用横排图。

视频封面

方形图

其实，方块图的应用是最广泛的。无论是横排还是竖排，方块图都能满足主体最大限度的展示，也能满足文艺感，所以APP设计很受设计师欢迎。

电子商务地图

商品地图

切割规则

可能有人会问，图片缩放后怎么放入边框？

一般切割规则有以下几种，其中第一种比较常见，第二种视觉效果略差，但能满足所有图片信息显示，第三种技术要求较高，图像识别技术会有一定要求。

图片手势操作有哪些？

图片的手势操作可以分为:上下滚动、左右滑动、点击、双击、放大。新发布的手势交互和无触摸交互可能是未来的趋势。

1.上下滚动，左右侧滑

上下滚动:

上下滚动是一种常见的手势，通常用于当页面内容超过一个屏幕时，通过滑动来查看以下信息。一般内容属于同一级别，可以随时滚动查看同一内容，比如瀑布流。

左右侧滑:

左右侧滑手势在侧滑后的图片页面处于同一水平时使用较多，图片本身需要扩展更多的内容，从而大大扩展横向和纵向内容的利用率空。

2.单击、双击并放大

点击:

单机操作是常见的交互方式，还有图片、文字、链接、按钮等。将应用于它。

双击:

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

放大:

放大图片常用在想看图片细节的时候。部分APP图片不支持放大功能，在大页面中应用广泛。

图版率是什么？

在页面设计中，除了文本，通常还会添加图片或插图等视觉视觉内容。这些视觉元素占据的面积与整个页面的比例就是版材率。简单来说，版材率就是页面上图片面积的比例。这种文字和图片的比例会对页面的整体效果和内容的可读性产生很大的影响。

但是，板率越高越好。这取决于实际项目是否需要向用户传达丰富、生动、活泼的感受。

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

提高印版率的方法:增加一些图标设计或图片与色块结合，可以在视觉上提高印版率。当然，如果没有图片，可以结合背景画一些插画。

还有哪些图片处理效果？

除了图片的排列，图片的比例，手势等等，如何在设计图片的时候让APP更有特色？让我们来看看一些常见的图像处理技术。

1.抠图+背景颜色效果

应用场景:图片内容比较固定，比如一些类别的入口，类别不要太多；否则，操作和设计专业的学生将面临很大的压力，如果经常更换，操作成本会更高。

优点:背景可定制，与图片本身结合产生强烈的设计感，页面整体设计风格可控。

2.图片+磨砂玻璃效果

应用场景:一般用于APP页面，消耗一定的性能，wap应用较少。

优点:磨砂玻璃效果可以更大程度上满足画面氛围，同时可以兼顾文字内容的显示。

3.图片+渐变蒙版效果

应用场景:一般用于在背景图片颜色未知的情况下，将背景图片放置在文本的底部，以保证任何图片下文本的可读性。插画中还加入了色彩，具有一定的审美视觉体验。

图片默认和极端情况

图片加载本身比文字慢。当网络不好或者没有网络的时候，用户有哪些方式可以减少挫败感？

1.徽标+灰色背景，或仅灰色背景

如果有必要强调品牌可以以logo的形式加入，也不要太深，可以起到传达品牌形象的作用。还有一种方法是直接占领灰色色块，让用户知道这个区域是图片，但是还没有加载。还将有一个应用程序在灰色块上添加白光效果，以传达它正在加载的信息。

2.色块

一般用于图片瀑布流，观看图片滑动过快或者网络不好的时候，有两种显示规则。第一种是设计师定义一批色值，随机展开。第二种是计算目前需要显示的图片的平均颜色，给出一个色块，效果比较好，但是有一定的开发成本。