Used to check for browser translation.
用于检测浏览器翻译。
ブラウザの翻訳を検出する

Discuss Kit v2.0 发布: 用户界面全面优化

wangqi
2024年6月21日 · edited
B
Blogs
cover

在 Discuss Kit 一年多的 v1.0 版本迭代中,我们期望 Discuss Kit 能更有效地帮助我们进行沟通、协作以及管理各类内容,因此我们逐步开发了包括讨论、博客、文档、交谈、网摘在内的许多核心模块。至今,ArcBlock 开发团队Team DAO、ArcBlock 社区、以及 ArcBlock 主站(包括博客和开发文档)等服务,都得到了 Discuss Kit 的有力支撑。

从 2023 年末至 2024 年第一季度,我们开始筹备 Discuss Kit 的 v2.0 版本,计划对用户界面进行全面的优化。经过一个季度、100 多个小版本的不断迭代,我们终于迎来了 v2.0 版本的发布。v2.0 版本的主要目标是优化用户界面,同时也包括若干新功能和大量的 bug 修复。下文将详细介绍我们在 v2.0 版本中的一些新增功能和改进。

讨论 (Discussion)#

讨论模块旨在为用户提供一个互动平台,让他们可以就特定主题进行讨论和交流。用户可以发起新的讨论主题,回复现有讨论。适用于需要团队协作、社区交流或任何需要集体讨论决策的群体。

帖子列表页面#

帖子列表页面的布局基本保持不变,左侧是板块列表,右侧是帖子列表,页面顶部新增了一个横幅区域,其中的标题,副标题都可以在仪表盘中自定义。

image.png

帖子列表页面还包含了许多不易察觉的细节优化,比如:

  • 字体、字重、图标、文本行距 等优化
  • 板块选中状态的样式优化,表单控件的边框、背景、尺寸 等样式优化
  • 像标签选择器这种通用组件,在样式、交互方面也得到了大量改进,以更紧凑的标签展示方式替代了原先的列表形式,标签的前背景色以及边框色尽可能采用舒适的色彩搭配,此外,Discuss Kit 会跟踪用户的常用标签并将其显示在上方。

image.png

帖子详情页面#

image.png

上图是帖子详情页面,标题上方是几个常用操作按钮,包括返回、收藏、分享、菜单。标题右侧是表示 "置顶" 和 "精华" 的徽章,标题下方展示了帖子所在板块、浏览次数以及关联标签,在这次优化中,我们对图标按钮、菜单列表的样式进行了改进,以确保按钮等 UI 组件的尺寸、边框颜色和图标尺寸更加协调一致,甚至对图标的描边宽度也进行了统一处理。

标题下方是帖子正文,在 v2.0 版本中,我们结合 Material Design Theme 对内容排版进行了整体优化,包括字体、字体大小、字重、文本颜色、行高、行距、段距等方面。此外,我们还优化了链接、引用、列表和待办列表等元素的样式,以提升可读性和阅读体验。

评论列表位于正文内容下方,我们对评论列表中的贴图/回复图标按钮、Reaction 组件以及排序组件的样式进行了优化,同时通过添加评论间的分隔线,使评论更加清晰易读。

帖子编辑体验优化#

image.png

帖子编辑页面 (上图) 在编辑体验和布局方面进行了许多改进。编辑帖子时会跳转到一个专用的编辑页面 (上图),取代之前类似弹窗式的编辑方式,尽可能给用户留出充出的编辑空间。像板块选择、标签选择、置顶、加精等功能被整合到了设置面板中,点击右上角的设置按钮可以打开该面板。

image.png

在编辑过程中,如果不小心触发页面关闭或页面跳转,Discuss Kit 将会检测是否有未保存的内容,并帮助用户避免意外丢失数据。

image.png

如果用户正在编辑一个帖子,此时另一位拥有编辑权限的用户修改并保存了帖子,那么用户会看到一个提醒,用户可以选择备份内容并刷新页面,以避免内容冲突。(Discuss Kit 将来会支持多人协作编辑)

image.png

在 v2.0 版本中,我们对编辑器样式进行了大量改进,移除了不常用的工具按钮,重新组织排列了工具栏按钮,优化了工具栏按钮图标的显示,使工具图标更加一致、美观。

image.png

博客 (Blog)#

博客模块允许用户发布文章,分享知识,内置强大的多语言和翻译支持,适合所有希望建立个人或企业博客的用户。

Discuss Kit 支持两种风格的博客模板: “Standard” 和 “Corp”。默认情况下会使用 “Standard” 模板,用户可以在仪表盘中配置选择他们想要使用的模板。在这次 v2.0 优化中,我们对 standard/corp 两种模板的博客列表和博客详情页面都进行了优化。

image.png

Standard 模板#

下图是 standard 模板的博客列表,左侧是博客分类和主题标签,右侧是博客列表,可以浏览每篇博客的封面图、标题、摘要、标签 等信息。

image.png

移动端:

image.png

下图是 Standard 模板的博客详情页面,页面上半部分包括封面图、分享按钮、博客分类、博客标题和标签,在标题下方可以看到发布时间、作者、浏览数量等信息。接下来是博客正文内容,正文下方会显示推荐文章。页面最下方是评论区。

image.png

Corp 模板#

Corp 模板的博客列表 (下图) 与 standard 模板的博客列表在布局上类似,只是博客列表采用卡片的展示形式。

image.png

移动端:

image.png

Corp 模板的博客详情页面 (下图) 与 Standard 模板相似,同样展示封面图、标题、作者、发布时间等关键要素,不同的是 Corp 模板采用了两列布局,左侧展示正文,右侧放置了文章目录和推荐文章列表。

image.png

网摘 (Bookmark)#

网摘模块能够帮助用户保存和组织网络上的资源,用户可以将任何网页保存为书签,对书签进行分类和标记,方便日后查找和参考。

v2.0 对网摘功能进行了许多优化,尤其在用户界面和交互体验方面。列表页 (下图) 采用了两列布局,左侧展示了书签分类,右侧则以卡片形式展示书签列表。用户可以通过关键字或标签来搜索书签。

image.png

通过书签详情页,可以查看快照,也可以点击 “查看来源” 按钮访问原始链接。

image.png

image.png

文档 (Documentation)#

文档是一个多用途模块,不仅可以用于维护技术类文档,还能助力团队构建系统化的知识库,同时也适合用作个人笔记。特别是在处理多语种内容的时候,文档模块显得尤为得心应手。它集成了先进的 AI 翻译技术,能够在保持内容格式的同时实现快速准确的跨语言内容转换,极大地提升了文档处理的效率和准确性。

在 v2.0 的优化中, 我们还对文档增添了多入口支持, 我们可以按项目或板块来组织文档, 如下图,

image.png

访问文档首页, 用户看到的是各个项目文档, 下图中文档卡片的样式也经过了精心设计,

image.png

此外,Discuss Kit 还支持一种高级的文档组织方式,我们可以通过系统标签为文档设置集合分类(比如 Get Started、Guide 等集合),

image.png

这样不同文档的不同章节会被组织到指定的 “集合” 下进行展示(下图)。

image.png

聊天 (Chat) #

聊天模块提供即时通讯功能,方便用户之间进行私密或群组交流。该模块也集成了通知系统,当有用户评论你的帖子或回复你的评论时,可以在这里接收通知消息。

会话列表和消息列表#

v2.0 版本对会话列表和消息列表的布局、样式进行了优化,整体应用更加美观。现在,在会话列表上用户可以方便地查看每个会话的最后一条消息,并且最近活跃的会话会自动置顶显示在列表的顶部,这样用户能更快速地找到他们感兴趣的内容,有助于他们更轻松地参与讨论。

image.png

image.png

通知消息列表的样式得以优化,而且 Discuss Kit 所支持的通知消息类型也在不断增加。

image.png

除了用户界面方面的优化,会话的加载效率和实时通讯的稳定性也得到了大幅提升。

支持用户搜索#

Chat 模块新增了用户搜索功能,方便快速找到用户并与之交谈

image.png

移动端用户界面优化#

image.png

image.png

板块、标签的管理#

板块管理和标签管理在用户界面上有了很大的改进,现在的板块列表、标签列表更清爽、美观。

image.png

image.png

在 v2.0 以前,板块只适用于帖子,在这次优化中我们将板块的适用性延伸到了博客、文档以及书签,此外,板块可以与通行证绑定 (下图),这样可以达到保护板块 (以及板块中内容) 的目的。

image.png

在 v2.0 版本中,我们将标签明确划分为系统标签 (下图) 和普通标签,当我们需要为帖子、文章打标签时,通常只有管理员才能使用系统标签,当然,对于任何标签,我们都可以为其绑定通行证,以限制或放开标签的使用范围。

image.png

下图中的标签被绑定了通行证,可以看到 "Restricted Access: Owner, Admin, Guest" 提示,

image.png

image.png

我们共同改进,社区驱动的更新#

我们相信,我们产品的核心在于充满活力的用户社区。您的见解和建议对我们来说是无价之宝,我们致力于整合您的反馈意见,使 Discuss Kit 变得更好。在这个部分中,我们突出展示了最新更新和由您启发而进行的错误修复。从微小调整到重大改变,每次更新都是为了增强您的体验并满足您的需求。感谢您一直以来的支持与参与。让我们看看在本次发布中,您提供的反馈帮助了我们改进什么!

结束#

Discuss Kit v2.0 相较于 v1.0 取得了比较明显的进步,我们将持续优化用户界面和交互体验,接下来 Discuss Kit 将重点关注以下几个方向:

  • Chat 模块的体验优化以及与 DID Wallet 的无缝集成
  • 内容搜索的优化
  • 编辑体验的优化,包括草稿、发布流程
  • AI 能力的增强

如果您在使用过程中有任何需求、建议或问题,欢迎您访问 ArcBlock Community 进行反馈。我们将竭尽全力提供帮助,此外,你的反馈如果入选我们的 Bug Bounty Program,你将获得 ABT 奖励。


2.0.175