2022年10月17日

Xmind UI 設計現已開源

Shin

作為思維導圖軟件領域的先驅,知識共享、擁抱創新和用戶至上一直是我們堅持的理念。早在2008年,Xmind就推出了開源版本,我們的字體“NeverMind”也對外開放並免費提供商業使用。

這是我們第一次公開並分享UI設計。這顯示了我們對用戶設計的奉獻,以及我們持續創新、追求精益求精的思考。

Text design featuring the words

高度統一的設計語言。

一致性

優秀的設計不僅取決於它的外觀有多好,而是看它如何能將功能和用途結合起來服務於用戶。我們非常關注我們的軟件如何與用戶互動——這真正體現了我們為用戶帶來最佳體驗的目的。

Xmind在

完美適應

不同的平台上具備高度一致性。作為一款跨平台軟件,我們考慮到不同操作系統的特點,並遵循系統規範,以更好地符合用戶的習慣。舉例來說,在工具欄的設計中,macOS系統常用的頂部菜單欄在Windows中缺失,所以我們通過在最左側添加菜單按鈕來改進Windows版本。

Whenever you interact with the Xmind system to call out an action, the action sheet will present in the same way as how your system would present to you. There would be no disconnecting feeling in the interaction.We differentiated the rounded corners and shadows of the various controls to make them

自然而和諧

於每個平台。

Two application windows side by side: one on a blue background with a Windows interface, the other on an orange background with a macOS interface.

保持界面輕盈清爽。

去掉繁雜,只留下舒適和質量

簡單和效率是我們的主要設計原則。我們充分利用留白和簡單元素來實現複合的交互界面,這些界面既清晰又靈活,並且具有高度一致性,能全面幫助用戶更快熟悉軟件功能。

面板和工具欄設計得極為簡潔,界面上處處無冗餘,控制項數量少,按照功能邏輯劃分。

The design of the format panel has always been one of the focuses of our annual retrospection. The layouts are designed to be logically structured, and we ensure a

清晰的視覺層次

通過反覆推敲對比、文字和元素間距。每個部分都有明確的功能目的,每個動作按鈕正確發揮其功能。工具欄和工作面板中

不再混亂

User interface screenshot of a mind mapping tool, showing options for shapes, lines, text styles, and layout themes.

最終用戶友好

我們相信,優秀的設計對於定義和維持卓越的用戶體驗至關重要。我們經常反問自己:作為一個產品,當去掉華麗的外衣後,你還會愛上它嗎?它對你還有用嗎?

我們不斷提醒自己,提取信息,打磨它們,做必要的加減法,並在概念上重新組織設計。

例如,關於顏色設計,我們進行了添加。主要工具欄和動作按鈕均使用黑色、白色或藍色的主色調。我們分析顏色的色相、亮度和飽和度,選擇對視覺障礙的用戶友好的顏色。我們也遵循

WCAG(網頁內容無障礙指引)原則

,確保用戶能在界面中不受顏色相關障礙的影響。

And there’s also subtraction in our design. In the design of the sheet bar at the bottom, it only becomes visible when you need multiple canvases.

少即是多。所以當你問我們如何以新手身份入門思維導圖時,我們非常有信心地向你展示你已經擁有一切所需。當你在Xmind中打開一個新畫布時,你已經準備好開始。沒有複雜的設計或設定會使你困惑。

關注被忽視的細節。

精雕細琢的細節

打印思維導圖是一個重要的場景,尤其當你以黑白打印時。你可能會知道我們有許多有趣且富有創意的貼紙和插圖,這些都是由我們的設計師精心製作的。但我們發現,這還不夠。由於印刷質量不同,可能難以識別思維導圖中的貼紙和插圖。因此,我們添加了一個額外的邊框,以

增強視覺對比和識別

As for the language setting, it is easily switched in a second within Xmind. You don’t need to restart the app at all.

CJK字體設置

也提供了支持。這避免了一些西文字體不支持CJK字體而導致的字符丟失問題。

In the sheet bar, we have a topic counting function in the right corner, which allows you to track your ‘idea branches’.

系統文本居中對齊,像電影結尾的演職員表,這使其在視覺上更美觀,更易於搜尋特定文本。Xmind中的顯示解析度可適應您的系統縮放。無論您是需要默認、更小或更大的顯示空間,它會隨系統偏好自動調整。

All these details may not be easily perceived by users, but they are the result of our meticulous thinking in design.

我們始終將用戶放在首位。

許多人看到了我們設計原則背後的精確邏輯,我們所堅持的奉獻,以及公開分享知識、思想和創新的包容性。這也吸引人們模仿。但我們並不認為這是一件壞事。從各方面看,我們被模仿的事實證明了我們的設計和用戶體驗的卓越。

我們也希望能夠聯繫並吸引更多熱衷設計的志同道合之人。我們期待與你攜手,共同追求卓越。

如何使用Xmind UI設計套件?

Xmind UI套件包含了我們所有的設計組件:模板、字體、貼紙、插圖及其他元素。你可以前往

Xmind桌面UI套件

獲取上述所有資源。

Xmind desktop UI kit showcasing design elements, icons, and interface tools on a white background.

更多文章