# 用户菜单全新设计，移动端位置调整

**URL:** https://meta.discourse.org/t/usermenu-revamped-mobile-repositioning/291910
**Category:** UX
**Created:** [2024年一月17日 07:40 UTC](https://meta.discourse.org/t/usermenu-revamped-mobile-repositioning/291910 "2024-01-17T07:40:05Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![digitaldominica](https://avatars.discourse-cdn.com/v4/letter/d/97f17d/32.png) [@digitaldominica](https://meta.discourse.org/u/digitaldominica)
#### Post date: [2024年一月17日 07:40 UTC](https://meta.discourse.org/t/usermenu-revamped-mobile-repositioning/291910/1 "2024-01-17T07:40:05Z")

</div>

您好，为了让我的论坛用户更好地访问用户菜单，我通过创建一个自定义主题组件，将用户菜单图标从侧边移到了底部。

之前：

 ![Screenshot_20240117_032815_Chrome](https://global.discourse-cdn.com/meta/original/4X/0/4/0/0407d2c55e4f11e3993887d74c6ad9ea8de37d57.jpeg)  
 ![Screenshot_20240117_032825_Chrome](https://global.discourse-cdn.com/meta/original/4X/c/3/6/c366448b400c52c40ebb59cc0d1eae16afcb74a3.jpeg)

之后：

 ![Screenshot_20240117_032843_Chrome](https://global.discourse-cdn.com/meta/original/4X/d/c/e/dceee938d265ef7fbf12dbfe40dda25dedd748c9.jpeg)  
 ![Screenshot_20240117_032848_Chrome](https://global.discourse-cdn.com/meta/original/4X/1/1/e/11ea242d389d48105eb2edb2c319660afb406185.jpeg)

仍在努力优化底部的用户菜单标签页

 ![Screenshot_20240117_032853_Chrome](https://global.discourse-cdn.com/meta/original/4X/d/6/5/d658e37f5388027bdc8ac9d02bb84cfa33996e25.jpeg)

目前已在安卓上测试，稍后将尝试在 iPhone 设备上进行测试。

我还通过 CSS 从用户菜单中移除了回复、反应和其他通知，主要是为了节省空间，而且因为它们在默认通知菜单中已提供，所以对我个人而言优先级不高。相比之下，书签、消息和提及则更为重要。

---

<div class="post-metadata">

### Author: ![digitaldominica](https://avatars.discourse-cdn.com/v4/letter/d/97f17d/32.png) [@digitaldominica](https://meta.discourse.org/u/digitaldominica)
#### Post date: [2024年一月18日 13:27 UTC](https://meta.discourse.org/t/usermenu-revamped-mobile-repositioning/291910/2 "2024-01-18T13:27:08Z")

</div>

通过移除 em 到 100% 的 max-height 值，并向 quick access li 项目添加 display flex，以及从底部按钮移除 li:last-child 的底部间距，已排序用户菜单间距。

 ![Screenshot_20240118_092258_Chrome](https://global.discourse-cdn.com/meta/original/4X/5/c/8/5c83bc6702da0b0663837c5f2d8b6f4f73ab11a3.jpeg)

最后，将“暂停通知”重命名为“专注模式”，以减少与用户个人资料顶部通知之间的混淆。

🙂

---

<div class="post-metadata">

### Author: ![Wojtek\_X](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/wojtek_x/32/353905_2.png) [@Wojtek\_X](https://meta.discourse.org/u/Wojtek_X)
#### Post date: [2024年一月18日 14:54 UTC](https://meta.discourse.org/t/usermenu-revamped-mobile-repositioning/291910/3 "2024-01-18T14:54:08Z")

</div>

做得好 🙂 好运 🙂