Facebook消息传递背后的UX行为初探

时间：2023-04-03 00:47:32 HTML

我确实对Facebook聊天行为做了一些研究。而且我觉得它把聊天框、图片处理、引用处理、头像、状态变化等等各个方面都处理的非常漂亮，这打破了我“聊天功能太简单了”的固有思维。处理单个图像您可能认为处理不同尺寸和纵横比的图像所需的工作是一项简单的任务。很多人似乎都这样做：max-width:100%?Facebook的情况并非如此。当用户上传图片时，其宽度作为内联CSS添加，图片的响应性使用padding-bottom（宽高比，现在广泛用于元素自身的响应性）处理。

/a>.image{显示：块；边界半径：18px；边框：1px实心#0006；溢出：隐藏；}.image__main{最大宽度：480px；}.image__element{最大宽度：100%；位置：相对；}.image__aspectRatio{位置：相对；}.image__wrapper{位置：绝对；顶部：0；右：0；底部：0；左：0；宽度：100%；高度：100%；}.image__wrapperimg{显示：块；最大宽度：100%；最大高度：200px；宽度：100%；height:100%;}以下是每张图片应遵循的规则：最大宽度为480px最大高度为200px调整大小时，图像应保持相同的纵横比如果图像小于最大值，则按原样显示。这里的好处是纵横比是根据所使用的图像动态生成的。此外，重要的是要记住flexbox不会将flex项目缩小到最小的内容。尺码以下。这意味着如果将浏览器调整到一定宽度，弹性项目将不会缩小到其最小内容大小以下。为了解决这个问题，我们需要添加min-width:0。否则，对于图片来说，肯定会溢出。这里进一步研究可以参考笔者之前的文章：用户体验思考与Flex的三个陷阱：元素不均分、溢出不省略、垂直不滚动。大货架的基本代码如下：其中，flexitem是message__outeritem的直接child，我们给它加上message__row。.message__row{最小宽度：0；/*otherstyles*/}当我和别人讨论的时候，有些人会争辩说为什么要把图片的固定宽度加上作为内联CSS呢？其实很容易想到，这跟图片的加载有关系。否则，如果我们不为图像设置固定大小，我们会注意到布局发生变化。处理多张图片如果您一次发送多张图片，则无需考虑它们的纵横比。相反，Facebook将它们视为“一条消息”。每个图像都将包含在一个正方形中，并使用对象拟合来避免扭曲或拉伸它们。.gallery{显示：flex;弹性包装：包装；弹性：1；/*还原填充以使图库与其兄弟对齐。*/margin:-2px;}.gallery__item{/*在每个图像周围添加2px偏移量，将导致两个相邻图像为4。*/padding:2;}.??gallery__item--third{flex:33.33%;}.gallery__item--half{flex:50%;}简而言之，我们需要这样做：图像网格也是使用CSSflexbox构建的。根据图像的数量，图像的宽度值等于其flexbox容器的1/3或1/2（存在可发送图像的最大数量）。间距是通过每个图像父级上的填充来处理的。为避免画廊边缘出现不必要的间距，应在弹性容器上使用等于内边距的负边距值。我想强调每个项目之间的间距的使用。在这种情况下，padding:2px更有用，因为它在LTR和RTL方向上都有效。其中，最重要的是如何判断图片的显示结构具有高性能——虽然我不知道Facebook团队是如何处理图片和文本消息的。但是如果是我，就需要把两者分开，专心做一个图片选择器组件。这个还在设计中，我好像想太多了，没下手。文本消息除了图片，Facebook还显示“独特”的文本消息。具体来说，单条消息、连续多条消息、混合消息、引用消息的风格都不一样。比如单条消息是这样的：当连续发送多条消息时，基本就是这个状态：而且，用户体验还不止于此。如果您使用的是LTR（从左到右，例如英文）布局，则发送方为蓝色气泡，接收方为灰色气泡（看着您）；如果布局是RTL（从右到左，例如阿拉伯语），反之亦然。当然，也是基于上面提到的“大架子”HTML结构。它的CSS看起来像这样：.message__outer{display:flex;}.message__inner{flex:1;显示：弹性；flex-direction:row-reverse;}.message__actions{width:67px;padding-right:5px;}.message__spacer{flex:1;}其中actions是操作菜单。我认为这里加固定宽度的原因是为了给它预留空间，避免布局偏移。更好地控制内部布局。例如，聊天气泡应该有一个最大宽度，我们可能需要从中减去操作菜单的宽度。为了确保在较小的尺寸下没有问题，我们需要注意以下几点：考虑到由于空间不足而导致默认宽度崩溃的情况；防止消息操作缩小到更小的尺寸；通过打破很长的单词来避免溢出；.message__bubble{最大宽度：calc(100%-67px);overflow-wrap:break-word;}.message__actions{flex-shrink:0;}对于短信，我们要考虑语言可以给它加上dir属性值：如果第一个文本是用RTL语言编写的（例如：阿拉伯语），则文本将从右到左阅读，即使您在这之后输入的LTR文本也是如此。如果以LTR格式输入文本（例如：英文），文本将从左到右阅读。关于上面提到的多个气泡的圆度状态不同的问题，我们还需要注意的是，对于发送者和接收者来说，它们会有所不同。除此之外，它们将根据页面方向（LTR与RTL）进行翻转。/*设置特殊角度的弧度，一般为18px，特殊角度为4px*//*你，蓝色消息*//*第一条消息*/.message--first.message__bubble{border-end-end-radius:4px;}/*中间消息*/.message--middle.message__bubble{border-start-end-radius:4px;border-end-end-radius:4px;}/*Lastmessage*/.message--last.message__bubble{border-start-end-radius:4px;}使用了css的一些属性的“双精度写法”这里。因为inline-begin和inline-end会在布局改变的时候翻转。这样，我们就不用关心它的方向了——所以，其实你也可以这样写：border-radius:upperleft,upperright,lowerrightlowerright,lowerleft;对于短信，需要有撤回等操作的操作按钮。是这样的：Facebook有这个技巧：它在右侧填充以防您发送消息。否则，填充在左边；它通过flex-direction:row-reverse和发件人消息的默认顺序翻转；如果消息太长，或者是图片或视频，则操作菜单应垂直居中。这可以通过使用flexbox对齐来实现。。message__actions{显示：flex；弹性方向：列；证明内容：居中；对齐项目：居中；宽度：67px；padding-right:5px;}当消息包含长文本或图像时，该元素将拉伸以填充其父级高度。请注意，这是“垂直居中”，而不是“垂直对齐”。这一点让我有点困惑。这个时候换成竖排不是更好吗？说到这里，有个问题没有提到但似乎很容易想到：spacerelement是干什么用的？容易翻转！最后，作为Facebook，怎么能没有主题色功能呢？他们的工程师似乎很看好在气泡中加入渐变，虽然在我看来，很难说。但是非常棒！这是通过css完成的！一开始笔者以为是类似滚动视差或者纯js实现的，后来发现是我小，布局小~假设我们有这样一个背景色：.messages-parent{background-color:#3a12ff；background-image:linear-gradient(#faaf00,#ff2e2e,#3a12ff);}是的，没错。它被添加到整个父元素。然后从每个邮件气泡中删除背景颜色和边框半径。接下来，我们需要为UI中除聊天气泡之外的所有内容添加白色背景。.message__actions,.message__status,.spacer-xs,.spacer-lg,.message__spacer,.message__avatar{背景颜色：#fff;既然我们已经解决了聊天气泡，我们如何添加圆角呢？伪元素！！！.custom-theming.message__bubble{位置：相对；边界半径：0；背景：透明；}.custom-theming.message__bubble::after{内容：“”；位置：绝对；左：-36px；右：-36px；顶部：-36px；底部：-36px；border:36pxsolid#fff;}现在有了边框，但是里面的部分还是直角。接下来，我们需要编辑圆角。众所周知，它有一个公式：InnerRadius=BorderRadius-BorderWidth这意味着，即使加上上面的内容，内角仍然为零。如果没有自定义主题，边框半径为border-radius:36px18px。为了在内半径上反映这一点，我们需要将border-radius添加到伪元素。使内半径=54px-36px=18px然后有：.custom-theming.message__bubble{position:relative;边界半径：0；背景：透明；}.custom-theming.message__bubble::after{内容：“”；位置：绝对；左：-36px；右：-36px；顶部：-36px；底部：-36px；边界半径：54px；border:36pxsolid#fff;}最后，我们需要将伪元素的大小限制在消息气泡的范围内。.custom-theming.message__bubble{位置：相对；边界半径：0；背景：透明；溢出：隐藏；/**!!!**/}最后一步是将border-color更改为白色，这里我们真的应该借助background-attachment因为我们需要保持颜色相对于滚动。.messages-parent{背景颜色：#3a12ff;背景图像：线性渐变（#faaf00，#ff2e2e，#3a12ff）；背景附件：已修复；border-left:2pxsolid#fff;borfer-right:2pxsolid#fff;}最后最后，拜拜~

上一篇：表单元素中readonly和disabled的区别

下一篇：让挖矿回归大众：恩探墨黄皮书解读：矿工

Facebook消息传递背后的UX行为初探相关文章