聊天缩略图背后的故事:你不曾注意的那些细节

聊天缩略图背后的故事:你不曾注意的那些细节作者:银光

 

这里我们主要讨论聊天列表中展示的缩略图,缩略图通常是将图片内容进行一定的缩小展现,或裁剪展现,主要有两个目的,一是提供一定的预览功能,二是节省屏幕展示空间、节省流量。

用户发送的图片长短不一,有正方形的,有竖长形的,有横宽型的,甚至有不规则形的(比如一些用户保持的 png 表情)如何设计一个合理的缩略图展示规则能最大可能的满足展示需求,又让整个聊天列表整齐美观呢?

首先我们来看看我们想在聊天中提供的体验:

  • 单个图片更多的图片内容信息展示
  • 多张图片更好的浏览定位找寻
  • 同时发送多张图片更高效的展示

如果我们希望尽可能保留图片的长宽比样式,在聊天列表中错落有致地展示,则我们需要对横向和纵向图片的长和宽都做相应的阈值限制。

在 Facebook Messenger 的例子中,我们发送了以下一组测试图片:

聊天缩略图背后的故事:你不曾注意的那些细节

有常见照片的 4:3 比例,也有常见截图的 16:9 比例,还有 21:9 这样超长/超宽图片。

聊天缩略图背后的故事:你不曾注意的那些细节

裁切阈值方面:我们发现,对于竖向图,Facebook Messenger 设定了一个比例的阈值,长图超出 5:3 比例会被裁切、宽图超过 1:2 会被裁切。未超过这个比例值,图片的内容将被完整缩放。

展示尺寸方面,我们发现:

  • 对于竖向图:高度固定为 300pt,宽度是根据图片比例动态变化的。
  • 对于横向图:宽度是固定为 264pt,高度是根据图片比例动态变化的。

这种方案,最大地兼顾了图片原始比例和图片内容。

限定宽和高的策略也在微信缩略图规则中体现:

聊天缩略图背后的故事:你不曾注意的那些细节

与 Messenger 不同之处在于::

微信的裁切比例阈值设定更宽松一点,21:9 的比例都未被裁切,这会照顾到更多的图片比例,除非是超长、超宽,其他都能在微信中展示完整图片信息,完整缩放。

Messenger 将高度和宽度分别设定,而微信简化了宽和高的阈值设定,以正方形作为基准,去限定高度和宽度,不去考虑是横向图还是纵向图,换一种说法,即: 比例较大的边等于正方形的边,这意味着你在微信中能产生最大显示面积的是正方形图片,并且无需为正方形做特殊判断,Messenger 则需要将正方形视作横向图片的宽度规则,缺点是,正方形展示成了最大面积,其他比例图片都较小,似乎「有失公平」。微信设定的高度和宽度阈值较 Messenger 来说小很多,这样在一屏幕中可以展示更多的图片缩略图;但同时,缩略图太小可能无法识别信息。

微博在私信、发微博的缩略图规则和和微信是一模一样的;Telegram 也几乎一样,只是将「正方形」设置的大了一些。

聊天缩略图背后的故事:你不曾注意的那些细节

所以设定多大的宽高阈值取决于我们的 App 的使用场景和我们的取舍,是经常出现图片还是偶尔出现,是想在一屏幕中更多的展示图片数量,方面用户快速浏览时检索定位,还是希望缩略图展示更明确的信息。

如果我们希望一堆图片展示时能尽可能整齐,而不是像以上两种策略一样横横竖竖,可能简化一个维度会好一些。

在知乎 Live 的缩略图策略中,对于横向图、竖向图,都只设定了宽度的阈值,没有向微信或者 Messenger 那样设定高度的阈值,高度是靠比例阈值动态变化的,竖向图超过 3:2 比例的图片就会被裁剪;横向图超过 1:2 的比例就会被裁剪。

聊天缩略图背后的故事:你不曾注意的那些细节

从展示效果看来,设定统一的宽度让发送的图片无论是横向还是竖向在一屏幕内展示的都很整齐。

缺点是展示的图片大小的排序是 纵向图>正方形>横向图,对横向图不友好,纵向图占据了屏幕较多面积,不利于多张图片的快速纵览,但却无法缩小宽度阈值,因为这样的话会连带横向图展示的更小。

如果你发现用户更爱发纵向图,且没有频繁发图,需要快速滚动去找寻图片的目的的话,那么这个方案可能适合你。

一些产品的缩略图宽度并不是定值,而是一个相对位置的距离,甚至相对位置的百分比,这样展示较为灵活,能充分利用不同设备的不同屏幕尺寸。

同时,基于相对位置的宽度通常会设定一个最大值,超过最大值则不再放大,以防在 iPad 等设备上展示过大:

聊天缩略图背后的故事:你不曾注意的那些细节

如果再进一步,针对竖屏、横屏单独设定相对位置和最大宽度,则在横屏也有较好的体验。

同理,如果用户发送的是小尺寸的表情包,不满足我们的宽高设定,难道我们也要把表情包拉伸到那么大吗?所以,针对小于我们设定的宽高阈值的图片,我们也应该判断其不应该被缩放。

以上都是对图片做了相应的裁切,也有不想裁剪,原模原样想保留原始比例的。

在微博 Web 版的早期版本中,为超长超宽图片设定了最大限时值,再将等比缩放的内容塞进去,四周进行空白填充,所以发送宽高比再大的图片,都会完整展示比例,只是可能这个缩略图在根本没法获取有效信息,完全丧失了「缩略图」的功能了。

聊天缩略图背后的故事:你不曾注意的那些细节

为解决用户连续发图后,在屏幕内快速浏览找寻的方便性问题,一些 App 倾向合并多次发送的图片,例如iMessage、 Facebook Messenger 、知乎 Live

聊天缩略图背后的故事:你不曾注意的那些细节

iMessage 的合并看上去只是为了减少两次发送之间的间隔空间,而缩略规则 则与发送单张图片无异,只是在四周的边角上视为一体做圆角处理。

Facebook Messenger 与知乎 Live 则是常见的的九宫格方式(这更多的在微信朋友圈见到),正方形的边角的两条边不与其他图片接壤时,带有 Raduis ,不同的是,Messenger 多出来的某张图片是靠向发送者,而知乎 Live 则不论发送者还是查看者都靠左,比较两者,Messenger 符合直觉,而知乎 Live 则照顾到了多方视角视角的图片顺序统一问题,毕竟,会有人浏览九宫格图片的视觉路径是 S 型 ,就会造成理解顺序的偏差。

聊天缩略图背后的故事:你不曾注意的那些细节

小小缩略图也有着这么多的考量,如何设计缩略图,还是取决于产品的实际需求和使用场景。

希望这篇文章能带给大家收获,第一次写设计文章 ~ 撒花~~

 

 

文章来源:人人都是产品经理

 

推荐阅读

【UXRen原创】baozhu回味新民旅行中那些见微知著的细节体验
【UX Myths专栏】使用者经验设计之迷思10:如果你的设计是好的,小细节并不重要
【交互】那些不曾被遗忘的细节设计
【动态】支付宝钱包新版本曝光 从强需求的O2O支付切入包抄微信 了解改版细节
iOS 8中你不知道的14个小细节
 

UXRen公众账号
关注UXRen微信公众号(cnUXRen)

UXRen社区欢迎各界用户体验从业者及学生投稿优质原创文章。投稿请关注UXRen社区公众账cnUXRen(上面有二维码)留言“我要投稿”,小编会及时与您取得联系。

版权声明:除转载文章外,本站所有文章版权归UXRen社区所有,转载请注明出处:UXRen社区,并保留本站原文链接地址。本站部分文章来自互联网及公开渠道,如有侵权请及时联系我们。邮箱:contact@13tech.com.cn

原创文章,作者:震天下,如若转载,请注明出处:https://www.iamue.com/21035/

(0)
震天下震天下
上一篇 2017-08-07
下一篇 2017-08-07

相关推荐

  • 交互设计自学攻略

    交互设计是一个现在很热的岗位,工资待遇,发展前景都比较好。一些学工业设计,计算机,心理学及相关专业的人都想加入其中。 但国内大学只有少量开设相关的专业,而且集中在设计名校,如(清华,西交大,北理,江南…

    2015-08-19
  • 【笔记】对话十五年设计老兵问答实录

    2017年10月28日,UXRen深圳分舵举办了《对话十五年设计老兵:提问&分享&讨论》的分享活动,本文基于嘉宾刘云天设计总监的问题回答整理而成。   活动笔记(by A.King & 绿宝): 问题1:你在腾讯10年的…

    交互专题 2017-11-13
  • 【笔记】设计师与产品经理该如何高效地进行团队协作?

    2017年5月14日,UXRen北京分舵在北辰泰岳大厦主办了《设计师与产品经理该如何高效地进行团队协作》的分享活动,本文基于分享嘉宾朱峰现场分享整理而成。   分享嘉宾: 朱峰(现任 “蓝湖”产品负责人&联合创始人…

    交互专题 2017-08-07
  • 搜索结果页优化的10条最佳实践方法【UXRen译#175】

    作者:Nick Babich   |  翻译:猫猫DE爪,校审:兔兔瑶   搜索就像是用户和系统之间的对话:用户键入他们的信息需求作为问询关键词,系统则展现出它的回答作为一组结果。搜索结果页是搜索体验的一个重要部分:它提…

    交互专题 2023-03-03
  • 交互设计师的60日计划第十七天

    #交互设计师的每日#20150815 雨天和大学最好的朋友的离别,最后一顿饭吃了王品台塑,果然一分价钱一分货。以用户体验为招牌的海底捞告诉我们要排队2小时等位…但是贵的王品台塑不仅立刻有位,服务也要比海底捞更胜一…

    2015-08-20
  • 帮UX新人摸清用户体验设计各岗位的典型特征【UXRen译#172】

      作者:Christian Beck  |  翻译:小蟹,校审:Duke   当我面试刚从学校毕业的准设计师时,我总是问他们:“当你被指派到一个新的项目时,你希望做哪一部分的工作,哪一部分的工作又是你心里祈祷别人会做的?” 众所…

    交互专题 2017-08-07
  • 一个项目解读交互设计的3个核心价值

    作者: 小米渣和大冬瓜   说到交互设计的价值,很多人可能一脸懵逼,交互不就是一个画线框图的嘛,然后再用各种乱七八糟的线连在一起。其实这一直以来是行业内对交互设计的一种“误解”,线框稿只是交互设计师最终产…

    交互专题 2017-08-07
  • 除了灵感,还有什么方法能帮你想出新的idea【UXRen译#174】

    作者: Mind Tools Editorial Team |  翻译:Chen Jing,校审:包子   “我们要 think differently!”“这个得有些新想法!”“我们要更有创意!”这些声音是否在你工作的场所越来越多? 面对复杂,开放和不断变化的挑战…

    交互专题 2017-08-07
  • 互联网设计的互惠原则:索取前请先给予【UXRen译#187】

    作者:凯特. 迈耶、 金. 弗莱厄蒂 |  翻译:毛毛,校审:天蛙   摘要:人类倾向于回报别人的好意,投之以木桃,报之以琼瑶。这种社会心理学理论可被应用于用户交互设计中,来获得用户的信任并让他们积极参与到你的…

    交互专题 2017-11-23
  • 2016年度13篇最佳UI/UX参考文章【UXRen译#161】

    作者:Grace Jia(UI/UX Researcher & Analyst)  |  翻译:代代子,校审:Chen Jing   本文收集了2016年度最受推荐的设计文章,内容涉及(1)UI/UX设计的原则、书籍和工具(2)如何做出更好设计的方法和建议(3…

    交互专题 2017-08-07