给UI设计师的图文参考案例！

为什么要关注APP的图文页面？从人类进化的结果来看，图像比文本更受大脑的青睐。在没有文本之前，人类依赖于文本「看」图像，所以在APP界面设计中，图片比文字更容易点击。图片在APP界面设计中也得到了广泛的应用。有一个国外的研究结果，吸引了人们对图片内容的排序和人脸的关注>人>动物>物体。在选择单张图片时，我也可以从生理角度考虑对眼球的吸引力，以满足产品的需求。我曾经负责数千万次访问APP的图片设计。我想和大家分享一些做图片APP的想法，方便大家在设计APP图片列表、图片混排、图片流、设计图片相关模块时提供一些思路和灵感。希望能对你有所帮助。图文混排的方式和场景有哪些？1.单图设计单图全屏定义：单图全屏，即整个图片充满屏幕，一般用于打开启动页面、引导页面、登录页面背景、详细页面产品介绍底图等。优点:单张图片冲击力更强，更容易传递品牌调性，图片处理更灵活。缺点：对图片质量有一定的要求，如构图、细节等。如果是产品图片背景和主要内容集中区域显示，则会有一定的要求。可以使用滴滴的启动页面等拼合效果，或者在图片上方添加遮盖和纹理，使图片能够传达与品牌形象相关的文学艺术、高端或其他感受。第二幅图的图片经过纹理处理，更有质感。最后，将整个产品作为背景底图，使产品表达更直接，配合卡片辅助信息或引导button，可以提高用户的决策效率。单图卡片(不下拉)定义:在主屏幕页面，以图片设计为主要视觉引导，其他会有操作信息和文字信息。用途：一般用于突出产品色调，如约会软件的卡片页面、共享登陆页面、一些主题入口等。作为产品的载体和与用户沟通的入口，图片可以第一眼将用户的眼睛集中在图片上，从而达到查看其他信息或引导其他交互操作的目的。单图 辅助信息(可下拉)定义:产品图片或商品图片出现在第一个屏幕上，宽度饱满，高度自适应。用途：部分产品大图页，或详情页头图，提升产品氛围，引出产品形式及详细内容。需要注意的是：由于图片高度一般不固定，需要设置最高高度，如屏幕高度的75%。wap页面应考虑浏览器底部的操作高度，如超过区域或切割，或同比缩放背景颜色。一般来说，黑色高度不应过高。最好暴露一些辅助信息，在新设计页面时，会给予适当的指导，如提示用户可以拉箭头或小手。2.图形列表左右文本-根据F形浏览引导线组合较常见的图形列表，更重要的图形信息放在前面，左右文本模式更强调使用图形来吸引用户浏览视线。应用场景：搜索结果或推荐list，如房地产APP搜索结果list、购物搜索结果、播放列表、游记类型结果页面。右边的左边-更常见的图形列表组合信息类型，新闻应用程序，更强调文本标题信息，通常图片和标题之间的对应性不那么高，有些是用户自己上传的，有很多无法控制的因素。应用场景：信息流feed，常与三图模式、纯文字模式一起出现，如今日头条、房地产APP、新闻推荐结果、天气卡等。图片流:一列限高定义:宽高比固定，主要有上图下文或图上两种形式。用途：一般用于捕获或用户上传的图片高度比较固定，多采用横图，第一屏至少可显示2张半图，竖图也可显示，但较少。一列不限高定义:宽高比不固定，宽度饱满，高度不限制，主要有图片 文本组合，可以是上图下文结构，也可以是图上两种形式的单词。用途：一般用于捕获或用户上传的图片宽度比不固定，以满足大多数图片的信息显示。例如，百度的大图页大图模式就是使用这种布局的经典例子。图片流：二列二图片高度限制-经典图片流布局定义：二列图片组合高度限制，通常指一行两列图片，图片高度按比例控制，使用相同比例。用途：一般用于专辑封面、海报封面、视频截图封面等，如bilibili推荐模块。第二，图片不限高——瀑布流图片瀑布流布局的出现，一方面是为了避免视觉疲劳，另一方面是为了满足图片的高度可以更舒展，使图片的空间利用率更高，产品信息显示更丰富。定义：2列图片组合不限于高度，通常指一行2列图片，图片高度自适应，用于产品图片高度不固定的产品类型，将有最高高度和最窄高度的极端定义。用途:比如图片短视频封面，pinterest结果页瀑布流，上图下文，或者只有两种图片结构:三列限高定义:指一列有三张图片，图片控制固定比例的设计，一般有上图下文，只有图片或标题。 三张图片的组合。用途：如图书封面、海报封面、今日头条信息流图文结合等。圆形图片定义:图片为圆形，比例1：1。用途:圆形图片在APP图片设计中也很常见，最常见的应该是头像。常见组合:左图右文，上图下文，一列3-4个头像或滑动。3.多图模式设计多图固定比例定义：3个以上的图片模块组合，引导用户查看图片列表或查看更多图片。用法:多图模式下多图固定比例最常见。固定模块下采用什么样的搭配组合？一般取决于图片捕获的数量。当然，以下不同图片数量下的显示形式有很多，主要考虑当前图片数量在整个页面中的比例和显示数量的两个条件决定了设计风格。多图组合有很多搭配，可以参考微信朋友圈上传的不同图片数量呈现的模块搭配。单张图片比例：一般有横版和方图两种，看图片本身的一个比例。事实上，多图不固定比例、多图不固定比例的应用并不多见。一般来说，图片的宽度和高度都比较高，不规则。它们还希望在模块中进行匹配和组合，以满足图片内容的最大显示。定义:图片宽高比不固定，应组合成模块。难点：设计时需要限制高度。当我这样做时，我根据高图的数量分别定义了几个模型，然后让开发根据高图的数量将其设置在模板中。注意:左右图片宽度要有极端情况，当时定义为75%：25%，为什么要按比例来？用户使用的屏幕分辨率很多，只能按比例避免图片太宽或太窄。图片比例和应用场景是什么？1.图片比例1：11：1.图片比例可以更大程度地突出主体。切割水平和垂直图后，应用程序方图可以完全保留图片信息。应用场景：电子商务结果页图片、专辑封面等。2.图片比例16：916：9的屏幕比例是大多数电影来源的比例。从成本的角度来看，实际上是16:9相比16:10和4:3.节省成本，同样的大面板，16:9切割出来的小面板很多，所以一直沿用这个比例。应用场景：电视剧、电影相关推荐页面。3.图片比例3:23:图片比例是我们最常见的，它是传统135胶片的标准比例，也是大多数数码相机图像传感器的比例。使用3:2比例拍照时，横竖构图非常方便。应用场景：信息app配图，用户自己拍照上传如爱彼迎。4.其他比例，如4：3的比例也是比较常见的图片比例，一般出现在大图单个图片的定义上：在一些应用程序中也可以看到8或黄金分割比。5.在设计APP页面时选择什么样的图片比例？首先，当我们定义图片是选择垂直图片还是水平图片时，我们是否看到我们设计的产品本身，是固定比例图片还是不规则图片比例。随着智能手机的普及，高图人物类高图在我们的app设计中的应用越来越多。首先，人物类的垂直版本更容易看到全身信息。图书封面电影海报横图在设计上节省了更多的屏幕空间，比如风景、短视频封面、房地产推荐图。视频封面方图的应用实际上是最广泛的，无论是水平图还是垂直图，方图都可以最大限度地满足主体的最大显示，方图也可以满足艺术感，因此，应用程序设计非常受设计师的欢迎。有些人可能会问，按比例后图片怎么放在框架里？一般的切割规则有以下几种，其中第一种更常见，第二种视觉效果稍差，但可以满足所有的图像信息显示，第三种智能切割，技术要求相对较高，图像识别技术将有一定的要求。图片手势有哪些操作？图片的手势操作分为：上下滚动、左右滑动、单击、双击和放大。未来最新发布的手势交互可能是一种趋势，没有触摸交互。1.上下滚动，左右滑动，上下滚动：当页面内容超过一个屏幕时，上下滚动的常见手势通常用于滑动以查看以下信息。一般内容属于同一级别，可以一直滚动以查看相同的内容，如瀑布流。左右侧滑动：左右侧滑动手势更多地用于同一层次的图片页面，图片本身需要扩展更多的内容，以扩大水平和垂直内容空间的利用率。2.单击、双击、放大单击:单机操作是一种常见的交互方式，将应用于图片、文字、链接、按钮等。双击：一般用于图片本身的某些操作，如喜欢、收藏、赞美等。放大:放大图片经常用于图片查看细节。有些APP图片不支持放大功能，广泛应用于大图页。什么是图版率？在页面设计中，图片或插图等视觉直观内容通常被添加到文本中。图版率是指这些视觉元素所占面积与整个页面之间的比率。简单来说，图版率就是页面中图片面积的比例。文本和图片的比例对页面的整体效果及其内容的可读性有很大的影响。但并非图版率越高越好，要看实际项目是否需要传达给用户丰富、活泼、热闹的感觉。图片本身的内容也会起到一定的作用。提高图版率的方法:添加一些图标设计，或者图片和色块的组合，可以在视觉上提高图版率。当然，如果没有图片，也可以画一些插图和背景的组合。还有哪些图片处理效果？除了上面介绍的图片布局、图片比例、手势操作等，在设计图片时，APP怎么能更有特色呢？让我们来看看一些常见的图片处理方法。1.抠图 背景色效果应用场景：图片内容相对固定。例如，在某些类别的入口处，类别不应过多。否则，学生将承受巨大的运营设计压力。如果经常更换，运营成本也会很高。优点：背景可以自定义，结合图片本身可以产生强烈的设计感，页面的整体设计风格可控。2.图片 毛玻璃效果应用场景：一般用于APP页面，对性能有一定的消耗，wap端应用较少。优点：毛玻璃效果可以在更大程度上满足图片氛围的同时，还可以兼顾文字内容的展示。3.图片 渐变屏蔽效果应用场景：一般用于背景图片的未知颜色，以确保文本在任何图片下的可读性，并在例子中添加颜色，具有一定的美丽视觉感觉。在图片缺乏和极端情况下，图片加载本身比文本慢。当网络不好或没有网络时，用户会有什么方法来减少挫败感？1.logo 灰色底部，或者只有灰色底部，如果你需要强调品牌可以添加标志的形式，不应该太深，可以发挥传达品牌形象的作用，另一个是直接灰色块占据位置，让用户知道这个区域是一张图片，但没有加载。还将有一个应用程序在灰色块上添加一个白光动态效果，以传达正在加载的信息。2.彩色块一般用于图片瀑布流。当查看图片滑动过快或网络不良时，有两种显示规则。一是设计师定制一批颜色值，开发随机获取。二是计算当前需要显示的图片的颜色平均值，给出色块，效果更好，但有一定的开发成本。