公开!Xmind UI 设计稿开源

image

继 Xmind 品牌升级后,我们又做了一个重大的决定——将 Xmind 桌面版所有的 UI 设计稿开源。


为什么决定开源?

这几年思维导图赛道比以往要拥挤些。但我们发现一个有趣的现象,用户并没有因为可下载的选择变多了而获得更丰富多元的使用体验,事实正相反。

Xmind 从图标到界面,从骨架到配色,都收获了一大批致敬。

image

image

Xmind 的一些配色甚至被友商当作了付费会员专享,成为增值服务的一部分。

image

在 Xmind 中所有的配色和样式用户都是可以免费用的,而友商却要让用户为此付费。

过分了。

而且这些模仿乍一看确实像,但仔细一看,还是差了不少意思。

比如,Xmind 的骨架并非只是导图结构的缩略图,我们在骨架中还设计了不少样式的细节。

image

Xmind 的配色也不仅仅是颜色的简单组合。我们的智能算法能根据导图背景、线条、主题和文字的颜色变化进行调整,不管怎么调都能保持内容的清晰可见。

image

可以说友商们只是模仿了点皮毛,用户体验并没有跟上。

这种既像又不像的“模仿”,很让人头疼。

所以我们决定,将 Xmind 的 UI 设计稿开源。

直接复刻可以最大程度避免动作变形,也不会耽误到用户的使用体验。

不断创新的团队不惧怕模仿,我们害怕的是没有抄到精髓的拙劣模仿。功能配色的模仿很简单也很快速,但仔细考虑用户体验的每个细节这点不容易。

这是我们为思维导图领域所做的微小贡献。我们希望整个思维导图领域生态可以变得更好,我们也希望友商们可以良性竞争,多为用户着想,提供更好的思维导图体验。

Xmind 的 UI 设计

极简、克制、轻量是 Xmind UI 设计的关键词。我们采用“无感设计”,力求为用户提供更简洁的使用体验、更流畅的交互体验、更无障碍的上手体验。既照顾到新手的易用性,同样也考虑到资深用户的深度需求。

image

轻量设计,极致用户友好

作为一款效率软件,在进行界面设计时简单高效成为了我们的首要设计原则。我们充分利用留白和简单的元素来构建复杂的交互界面,使其清晰灵活并保持高度的一致性。

在界面设计上我们采用了极简、克制的设计,界面中没有一丝冗余,只将最实用的功能放在软件工具栏上,不做多余的修饰干扰用户,不像其它传统软件各种功能满屏负载,一进来就给你很多选择和压迫感。

image

我们采用了无障碍设计。在颜色上采用黑白蓝的主要配色,不依赖颜色来传递信息,而是采用高对比度的视觉处理方式,干净、简约、清晰、明朗,在视觉辨认上毫不费力,充分考虑到了视力障碍人士的需求。

image

为方便用户更快认知和熟悉软件的功能,样式面板的设计也是我们每年反复推敲的重点。在面板的功能排布上,我们通过对元素、对比度、文字、间距的反复推敲,使其具有清晰的视觉层级。像思维导图一样,样式面板的功能排布也具有清晰的逻辑,让用户可以随取随用,对新手极度友好。 不同平台,一致的使用体验

Xmind 是一款跨平台的软件,为了保证用户在各个平台上都拥有相似的使用体验,我们在设计之初就考虑到不同平台下组件样式与系统本身的统一性,最大程度符合用户的使用习惯,而不仅仅只是针对平台做简单的适配。

比如在对于工具栏的设计中,macOS 系统常用的顶部菜单栏在 Windows 中有所缺失,我们便针对 Windows 版进行了改进,在最左侧加入菜单按键。

image

针对于两个平台控件样式的不同,我们区分了软件在不同平台内各种控件的圆角与阴影,使其自然和谐。对话框的弹出方式和排列方式也针对不同平台做出相应的调整。

image

在适应不同系统的设计规范的前提下,最大程度保持了 Xmind 的设计风格,保持用户的熟悉感,降低用户的操作和认知成本。

隐形设计,精细打磨

精细是 Xmind 设计的另一个关键词。为了让大家拥有更好的使用体验,我们在软件的各个细节上都下足了功夫。小至一个勾选框,一张贴纸,甚至在各种边际情况下也做了充足的考量。

比如在智能配色方案中,如果你去掉了思维导图的背景色,我们会根据感知对比度算法(APCA)为字体设置反色,让你在各种背景颜色下都能保证文字的可读性。 为了优化用户的打印体验,我们在设计贴纸和插画时加入了双重描边来增强识别度,使其在深色背景和浅色背景的打印场景下都有良好呈现,对思维导图本身也进行了黑白打印模式的优化。

image

在字体这件事上,除了我们自研的品牌字体 NeverMind 外,我们还专门提供了中日韩字体(CJK font)设置,让西方语言文字和中日韩文字混排时可以分别设置各自适合的字体来达到更好的组合使用效果,也避免了一些西文字体不支持中日韩文字而导致缺字的问题。

image

在 Xmind 中,用户随时都可以知道自己创建了多少个主题,软件可自动适配系统的浅色和深色外观,语言切换也可在软件内秒切,软件字体也可自动跟随系统字体大小变化等。这些细节或许都不易被用户感知到,但都是我们精细思考和设计过的结果。

image

如何使用 Xmind 的 UI Kit?

Xmind 的 UI Kit 包括 Xmind 设计的组件、模板、字体、贴纸等组成 Xmind 桌面版 UI 设计的各个元素。你可以点击 Xmind 桌面版 UI Kit 获取以上的所有资源。

image

在 Xmind 这十六年的软件设计过程中,我们始终将用户体验放在首位。在设计上保持敏锐,在设计过程中穷尽各种边际情况的考量,不断优化、精进,力求让大家拥有一个更轻松愉快的使用体验。

在追求更极致的用户体验这条路上我们步履不停,我们也希望借此连接和吸引到更多喜欢设计的朋友参与到 Xmind 的共建中来。欢迎大家的反馈和建议,期待给大家带来更优秀的产品。