设计出品
扫描关注网站建设微信号

扫一扫微信二维码

feed流:易于忽略的图像自适应知识

新乡云优化2020-10-18Feed流
feed流:易于忽略的图像自适应知识
我们每天都沉浸在各种供稿流中,感觉您的设计是如此简单,只需设计一张卡,然后将整个界面复制粘贴就可以了。
但是,每个人都很容易忽略图像适应问题。例如,在微信聊天中,您不能保证用户会发布一些图像并且无法估计图像的比例,因此我们需要设置相应的规则。
下面,我概述了最容易出现问题的大图片布局,网格布局和拼图布局图像自适应方法。
1.大图设计
大图像布局意味着无论用户上传多少图像,Feed流中都会显示一个大图像。您可以单击详细信息或滑动查看其他图像。通常,用于大图像设计的图像适应方式有两种:一种是以固定比例显示图像,另一种是随图像变化。
1.显示图像的尺寸是固定的
无论用户上传的是水平图像还是垂直图像,显示的图像比例都是固定的。使用这种自适应方法,图像占用的空间较小,可以提高用户的阅读效率,因此,当产品目的是要提高用户的阅读效率时(例如,在行之间),您可以使用它。
feed流中容易忽略的图像自适应知识
2.随图像变化
当用户上载不同比例的图像时,图像显示宽度是屏幕的宽度,并且图像显示高度会根据给定的宽度成比例地缩放。使用这种自适应方法可以完美地表达图像信息,图像占据较大空间,适用于图像质量较高的产品以及以图像为主的用户。
feed流中容易忽略的图像自适应技能
需要说明的是,该方法需要设置一个阈值。当图像高度超过一定值时,该高度不会增加,但会受到阈值的影响;当图像高度小于特定值时,该高度不会降低,但会受到阈值的影响。
二,网格布局
宫殿格式的设计意味着用户上传的图像将适合每个正方形。网格布局可以具有各种形状,例如九个正方形的网格,五个正方形的网格和三个正方形的网格。以下是九格网格更复杂的修改示例。。
九宫格适配无法区分屏幕,但是会执行特殊处理以仅加载一个图像。直接将两个或多个图像用作最小正方形的宽度,然后以相等的比例缩放。具体的图像适配方案如下:
feed流中容易忽略的图像自适应技能
当有三幅图像时,位置3和5颠倒并排成一排:1、2、3。2)当有两幅图像时,直接将图像适合于网格1、2。
当图像为一幅时,如果0.5<=宽度/高度<=2,则限于1-4个网格的范围(包括间距),即,长宽比在此范围内时,最长边在两个网格之间临时间隔。
feed流中容易忽略的图像自适应知识
当图像为一幅时,宽度/高度>2的图像(例如全景图像)最多占据三列,而高度最多占据一列(包括间距大小)
feed流中容易忽略的图像自适应技能
单幅图像,宽度/高度<0.5(例如长微博图像),高度最多占用两列,宽度最少两列的1/3(包括间距)
feed流中容易忽略的图像自适应技能
三,拼图设计
这种设计方法是将多个图像组合成一个矩形,其样式新颖且类似于杂志版面,因此也称为杂志版面,但由于其对图像的要求很高,因此主要用于图片的社交网络,例如。
feed流中容易忽略的图像自适应技能
下面我概述了网格布局的规则。在设计时,您无需设计所有情况,只需将不同图像的解决方案发送给开发人员,它们就会选择相应的规则。
feed流中容易忽略的图像自适应技能
四,画重点
设计时,很容易遵循产品原型,而忽略一些小设计。
特别是对于新手设计师而言,它不完整是比较容易的,因此建议每个人看到一些干燥的物品,收集它们并在以后找到它们时迅速找到它们,以避免这些问题。,避免走弯路。
例如,本文中提到的三点很容易遗漏:CGU内容没有报告功能,登录和注册时键盘锁定了按钮,并且文本在图像中的对比度不足。浅色。下次遇到这些问题时,您将不必陷入困境。向上。
文章关键词