# 聊天页面重新设计以提供不同的用户体验
**URL:** https://meta.discourse.org/t/chat-page-redesign-for-a-different-user-experience/345763
**Category:** General
**Created:** [2025年一月6日 07:35 UTC](https://meta.discourse.org/t/chat-page-redesign-for-a-different-user-experience/345763 "2025-01-06T07:35:23Z")
**Posts on this page:** 7
**Page:** 1
### Author:  [@MihirR](https://meta.discourse.org/u/MihirR)
#### Post date: [2025年一月6日 07:35 UTC](https://meta.discourse.org/t/chat-page-redesign-for-a-different-user-experience/345763/1 "2025-01-06T07:35:24Z")
我对聊天页面进行了一些简单的调整，以改进设计并使其感觉更流畅。以下是我所做的更改的概述：
1. **移动了输入指示器** ：
我重新定位了输入指示器，使其现在显示在文本框上方而不是下方。这样感觉更自然，更容易注意到有人在输入。
2. **增加了输入指示器的字体大小** ：
我稍微增大了输入指示器的字体大小。现在它更显眼，也更突出，方便一目了然地阅读。
3. **优化了图片** ：
我移除了过去环绕图片的文档名称/URL，并为图片添加了一个小的圆角。这使得图片看起来更简洁、更精致，并消除了不必要的杂乱。
4. **使输入指示器更具动态性** ：
我为输入指示器添加了一个小小的动态效果。现在，当它出现时，消息会向上轻微滑动以腾出空间，当指示器消失时，消息会向下滑动。这种平滑的过渡使整个体验感觉更流畅、更具交互性。
这些只是小的设计调整。对我来说，它看起来更简洁，感觉更流畅，并且总体上更加精致。请告诉我您的想法，并随时提出任何其他更改或改进建议！
这是代码：
```plaintext
// typing indicator
/* Add space below the replying indicator */
.chat-replying-indicator-container {
order: -1; /* Moves the replying indicator above the text area */
}
.chat-composer__outer-container {
display: flex
;
align-items: center;
box-sizing: border-box;
width: 100%;
padding-inline: 0rem;
padding-bottom: 1rem;
}
.chat-message-collapser .chat-message-collapser-header {
display: none;
align-items: center;
}
.chat-message .onebox img:not(.ytp-thumbnail-image, .onebox-avatar-inline),
.chat-message img.onebox,
.chat-message .chat-uploads img,
.chat-message p img,
.chat-message aside.onebox .onebox-body .aspect-image-full-size,
.chat-message aside.onebox .onebox-body .aspect-image-full-size img,
.chat-message .chat-message-text p img:not(.emoji) {
object-fit: cover; /* Cover the container to preserve the border-radius */
max-height: 300px;
max-width: 90%;
width: unset;
overflow: hidden;
border-radius: 20px; /* Rounded corners */
}
.chat-replying-indicator {
color: var(--primary-medium);
display: inline-flex;
font-size: 1em;
padding-bottom:10px;
}
.chat-replying-indicator-container {
margin-bottom: 10px; /* Adjust the value as needed */
margin-top: -20px;
}
.chat-replying-indicator-container {
margin-top: -30px; /* Default position when not typing */
transition: margin-top 0.3s ease; /* Smooth transition */
}
.chat-replying-indicator-container:has(.chat-replying-indicator__text) {
margin-top: 0px; /* Position when typing */
}
```
附注：这主要是针对移动端的。
现在的样子是这样的：
---
### Author:  [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [2025年一月6日 07:40 UTC](https://meta.discourse.org/t/chat-page-redesign-for-a-different-user-experience/345763/2 "2025-01-06T07:40:06Z")
您的视频似乎已损坏。也许重新上传？
---
### Author:  [@HAWK](https://meta.discourse.org/u/HAWK)
#### Post date: [2025年一月6日 07:51 UTC](https://meta.discourse.org/t/chat-page-redesign-for-a-different-user-experience/345763/3 "2025-01-06T07:51:47Z")
为了透明起见，我编辑了您的标题。 😉
---
### Author:  [@MihirR](https://meta.discourse.org/u/MihirR)
#### Post date: [2025年一月6日 07:55 UTC](https://meta.discourse.org/t/chat-page-redesign-for-a-different-user-experience/345763/4 "2025-01-06T07:55:34Z")
哈哈，我一直使用AI的主题标题:stuck\_out\_tongue:
---
### Author:  [@MihirR](https://meta.discourse.org/u/MihirR)
#### Post date: [2025年一月6日 07:56 UTC](https://meta.discourse.org/t/chat-page-redesign-for-a-different-user-experience/345763/5 "2025-01-06T07:56:54Z")
我不确定为什么自昨天以来会发生这种情况。我和 @Don 就同一个问题进行了讨论，过了一会儿就好了，但现在又坏了。
---
### Author:  [@RGJ](https://meta.discourse.org/u/RGJ)
#### Post date: [2025年一月6日 08:13 UTC](https://meta.discourse.org/t/chat-page-redesign-for-a-different-user-experience/345763/6 "2025-01-06T08:13:31Z")
> [@MihirR](#):
>
> 但现在又坏了。
我现在能正常使用
---
### Author:  [@MihirR](https://meta.discourse.org/u/MihirR)
#### Post date: [2025年一月6日 08:15 UTC](https://meta.discourse.org/t/chat-page-redesign-for-a-different-user-experience/345763/7 "2025-01-06T08:15:04Z")
是的，我实际上是用 Mac 重新上传了视频；对我来说，这个问题通常发生在 iOS 上 :((