# 改进用户菜单选项卡的布局

**URL:** <https://meta.discourse.org/t/improving-the-layout-of-the-user-menu-tab/132069>\
**Category:** UX\
**Created:** [2019年十月23日 12:04 UTC](https://meta.discourse.org/t/improving-the-layout-of-the-user-menu-tab/132069 "2019-10-23T12:04:40Z")\
**Posts on this page:** 6\
**Page:** 2

<div class="post-metadata">

**Author:** ![rishabh](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rishabh/32/179446_2.png) [@rishabh](https://meta.discourse.org/u/rishabh)\
**Post date:** [2020年一月2日 13:52 UTC](https://meta.discourse.org/t/improving-the-layout-of-the-user-menu-tab/132069/21 "2020-01-02T13:52:22Z")

</div>

> [@Remah](#):
>
> 我喜欢桌面端和移动端的菜单保持一致。我两者都会用到，这样对大脑的负担更小。

> [@Remah](#):
>
> 多列布局通常阅读速度较慢。

我一直在思考这个问题，必须承认你说得对。在撰写这个话题时，我只考虑了美观，而忽略了实际的用户体验。尽管双列图标框看起来更漂亮，但我不确定是否值得仅为了移动端而做出更改，因为这会带来不一致性和可读性问题：

既然 **移动端点击目标过小** 是这里唯一需要解决的问题，我们可以简单地按固定比例增大图标框的尺寸（不要像截图中那么大），同时保持现有布局不变：

 ![image](https://global.discourse-cdn.com/meta/original/3X/4/c/4c7f41293c992efa8dace1b2ecda5f91e21dafcb.png)

---

<div class="post-metadata">

**Author:** ![Howaids](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/howaids/32/171481_2.png) [@Howaids](https://meta.discourse.org/u/Howaids)\
**Post date:** [2020年三月22日 09:02 UTC](https://meta.discourse.org/t/improving-the-layout-of-the-user-menu-tab/132069/22 "2020-03-22T09:02:22Z")

</div>

感谢提出这个 UI 方面的顾虑，@rishabh。

只是想为讨论补充一个不同的视角。作为一名经常出差的顾问，我连续三年只使用手机，直到今年才重新使用台式机，期间我对浏览器的用户体验发展感到惊叹。在手机上，我只会使用那些拥有专用移动界面的应用，并愿意为了优秀的用户体验而放弃一些桌面端功能。如今，我两者兼用，但会根据具体目标来调整使用方式。

我想表达的核心观点是：移动设备和桌面端为用户提供了截然不同的用户体验。统一的设计反而可能导致用户体验下降。我同意 @codinghorror 和 @sam 的看法，即移动端 UI 是重点，您最初提出的大图标建议正是提升移动端用户体验的正确方向。@awesomerobot 的线框图看起来也很棒！充分利用屏幕空间以提升操作按钮的舒适度和视觉美感，在任何情况下都会赢得我的移动端支持。

如果团队能够放宽对桌面端和移动端 UI 一致性的限制，发挥想象力，那将会非常有趣。这或许能让没有台式机或笔记本电脑的移动端用户也接触到 Discourse。在东南亚，我们有许多年轻人拥有多达三部手机，却没有笔记本电脑或台式机。

---

<div class="post-metadata">

**Author:** ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)\
**Post date:** [2020年三月22日 22:09 UTC](https://meta.discourse.org/t/improving-the-layout-of-the-user-menu-tab/132069/23 "2020-03-22T22:09:30Z")

</div>

我确实认为我们应该回过头来讨论这个问题 @awesomerobot，但优先级较低……在我看来，这些设计稿很有价值。

---

<div class="post-metadata">

**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\
**Post date:** [2020年三月23日 17:26 UTC](https://meta.discourse.org/t/improving-the-layout-of-the-user-menu-tab/132069/25 "2020-03-23T17:26:31Z")

</div>

这个话题里有很多不错的观点，所以我们就从非常简单的一点开始：

 ![Screen Shot 2020-03-23 at 1.20.08 PM](https://global.discourse-cdn.com/meta/original/3X/f/1/f1f20308e9fb0207bf0edfc23422a98d8644570c.png)

这很快将在 Meta 上上线：

[https://github.com/discourse/discourse/commit/39dde33cbba1c9e7b9175b466a4fc574a0b9e35c](https://github.com/discourse/discourse/commit/39dde33cbba1c9e7b9175b466a4fc574a0b9e35c)

---

<div class="post-metadata">

**Author:** ![ondrej](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ondrej/32/198804_2.png) [@ondrej](https://meta.discourse.org/u/ondrej)\
**Post date:** [2020年三月23日 17:39 UTC](https://meta.discourse.org/t/improving-the-layout-of-the-user-menu-tab/132069/26 "2020-03-23T17:39:46Z")

</div>

我觉得还有空间被浪费了？

好像只是把盒子变大了，而所有内容仍然在左边。

---

<div class="post-metadata">

**Author:** ![ondrej](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ondrej/32/198804_2.png) [@ondrej](https://meta.discourse.org/u/ondrej)\
**Post date:** [2020年三月23日 18:43 UTC](https://meta.discourse.org/t/improving-the-layout-of-the-user-menu-tab/132069/27 "2020-03-23T18:43:31Z")

</div>

实际上，再想想，它并不差。照片里看起来有些不同，但真正看到或使用它时，感觉很好。

[上一頁](https://meta.discourse.org/t/improving-the-layout-of-the-user-menu-tab/132069.md?page=1)