Gomboli
(Claudio Gomboli)
1
大家好,
我是 Claudio,在 Canonical(Ubuntu 的发行方)担任 UX 负责人。这是我首次在 Meta Discourse 上发帖,但我们 Canonical 团队一直使用 Discourse 来运营我们网站和产品的社区论坛。
此前,我们探索了将 Discourse 集成到现有网站的主域名下(而非子域名)时的呈现效果(例如,从 discourse.ubuntu.com 迁移到 ubuntu.com/discourse)。
使用顶级网站而非子域名,必然需要调整 Discourse 的导航、交互方式以及整体视觉风格,以确保其能够以一致且无缝的方式融入。我们明白这是一项探索性工作,会影响现有用户体验的多个方面,但我们仍希望与大家分享,并探讨这些修改中的部分内容是否可能引起上游项目的兴趣,或可作为模板提案。
在样式方面,我们使用了开源 CSS 框架 Vanilla 及其组件。
我将在回复此初始介绍帖子的过程中,陆续发布所有视觉设计图。
欢迎提出您的看法,我们很乐意就此事进行进一步或更深入的讨论。
谢谢!
14 个赞
Gomboli
(Claudio Gomboli)
2
Discourse 导航
未登录版本
在我们的方案中,我们移除了默认 Discourse 自带的汉堡菜单,改用侧边导航组件作为所有页面的主要入口。这样做的原因是,将 Discourse 集成到现有网站导航中需要与网站现有结构保持一致。同时,我们也可以通过一个始终可见的导航组件,向用户直接展示所有可用的页面和主题。
搜索功能已集成到网站的全局导航中,并将包含来自 Discourse 的搜索结果。由于这可能涉及重要的前端和后端变更,搜索输入框也可以移至 Discourse 页面内,作为独立组件使用。
10 个赞
Gomboli
(Claudio Gomboli)
3
Discourse 导航
已登录用户导航
当用户登录后,“新建话题”的操作提示将显示出来,同时左侧边栏导航中也会显示“账户”项。
我们可以将“最新”、“新帖”、“未读”、“热门”、“分类”和“书签”等选项不再全部展示在页面顶部,而是将“分类”放在左侧边栏导航中,其余选项则放入下拉菜单,让用户自行选择他们希望看到的内容视图。
7 个赞
Gomboli
(Claudio Gomboli)
4
所有主题列表
我们对显示所有主题的列表进行了重新整理。类别现在通过彩色标签展示,用户可点击标签直接访问特定主题。用户头像及多位用户信息已进行视觉折叠以节省空间。回复数、浏览量和活跃度信息依然可见。
7 个赞
Gomboli
(Claudio Gomboli)
5
在主题内
在主题或分类内,会显示“关注选项”的行动号召。通过下拉菜单,用户可以决定希望接收的通知级别。我们的方案在下拉菜单中显示标签,以便用户轻松了解其对特定主题的订阅状态。
8 个赞
Gomboli
(Claudio Gomboli)
6
显示特定时间
从顶部视图菜单中选择“顶部”,用户可以通过“全部时间”下拉菜单决定显示时间的哪一部分。
6 个赞
Gomboli
(Claudio Gomboli)
8
关于页面
登录后,用户的头像和信息会显示在顶部。在“关于”页面中,次要页面会在侧边导航栏中展开,而“所有主题”则会折叠。如果用户未登录,“关于”页面内容相同,但不会在顶部显示个人资料,也不会显示“账户”。
5 个赞
Gomboli
(Claudio Gomboli)
9
账户页面
Discourse 中的水平菜单项已包含在侧边导航栏中:“摘要 - 活动 - 通知 - 消息 - 徽章 - 偏好设置”。子页面菜单项将在相应的主菜单项下展开,例如:活动 > 全部、主题、回复、草稿、点赞、书签。
请告诉我们您的想法,我们很乐意进一步或更详细地讨论此事。
谢谢!
7 个赞
cvx
(Jarek Radosz)
13
这算不上什么行动号召,但“关注选项”下拉菜单就在“新建话题”按钮旁边。
4 个赞
Stranik
(Evgeny)
14
整体情况不错。但左侧菜单在视觉上与主内容融为一体。能否像 Stack Overflow 那样将其区分开来?例如,通过背景、缩进或颜色等方式。有很多可选方案。
2 个赞
Gomboli
(Claudio Gomboli)
15
感谢大家的回复。
是的,“关注选项”下拉菜单就是这一个:
我注意到,自从我们进行这项工作以来,Discourse 已经更新了通知/关注图标(现在清晰多了,不得不说),因此我们需要相应地更新这一部分。
8 个赞
sam
(Sam Saffron)
16
欢迎将您的主题上传至主题创建器!
我很乐意浏览一下并反馈使用感受。还有一些您可能需要查看的隐藏 UI 元素,例如旗帜 UI、书签 UI 等等。
5 个赞
看起来很棒!这里似乎没有体现通知功能:

这些通知会列在侧边栏的“账户”链接旁边吗?
另外,我推测目前没有使用标签的计划,因为这里也没有体现……这也是我们放弃专用分类列的原因之一。
将分类置于标题下方,使我们能够保持分类与标签的紧密关联,同时与每个主题页面顶部的标题布局保持一致(我刚刚也注意到,在你的设计中,进入主题后分类不再显示,这是有意为之吗?)。
例如,
6 个赞
Gomboli
(Claudio Gomboli)
18
感谢 @sam,我们会查看该指南。确实,一个原型有助于凸显当前 UI 中存在的问题和被忽略的部分。
2 个赞
Gomboli
(Claudio Gomboli)
19
感谢你的回复 @awesomerobot
将 Discourse 移至主域名下(例如 discourse.org/meta,而不是 meta.discourse)时,我们不得不移除用户头像,因为它可能与主网站账户/个人资料图片中的现有图片冲突。
我认为在我们探讨该方案时标签功能尚未出现,因此这需要在后续工作中加入。标题下方的分类确实是一个非常棒的建议。
感谢大家的反馈,这将有助于这些设计的后续工作。
1 个赞