UI/UX 境界中的思維導圖

Saurav Pandey 是 Snapdeal 的產品設計師。他喜歡運用像素和向量打造愉悅的使用體驗。他發現心智圖是一個對概念豐富非常有用的工具，他在他的 UI/UX 項目中使用 XMind。在本文中，他分享了他的見解以及 XMind 如何幫助他的項目。

闡述複雜的想法可能具有挑戰性，然而，XMind 解決了被稱為心智圖策略的困境，這可以讓這個過程變得簡單很多。

心智圖

「問題表述得好就等於問題解決了一半」

心智圖是一個對概念豐富非常有用的工具。應該強調心智圖，因為它有助於產生新的想法並識別不同數據和信息之間的關係。

我個人偏好使用 XMind 來製作心智圖。

我的某個項目中的範例心智圖

為 Mac 獲取 XMind

XMind 讓你可以創建一個圖表，其中一個整體想法分支出相關的子想法。

開始時，輸入核心想法，然後附加額外的“節點”或子主題。每個節點可以分裂成子節點，這些子節點又可以繼續分裂成自身的子節點。如果在某一點上你開始失去對全局的掌握，只需查看你已創建的所有節點的運行列表。

心智圖不僅僅是文字：可以包括圖標和圖像來使其更生動或更容易找到節點。

除了頭腦風暴，心智圖在你想將一個龐大的項目分解為具體的行動項時也是很有用的。

繪製心智圖的 ABC

樹狀模型

大多數心智圖遵循樹狀模型：它們從一個單一的對象開始，通常位於中心，然後發展出代表相關概念的多個分支。每個分支可以分裂成兩個或多個分支，但它們永遠不會合併在一起：整張圖是一個層級方案，每個對象只有一個“父級”，但可以有多個“子級”。

在 XMind 中設計

由於其低複雜性，這個模型快速且易於管理，但有時層級關係的約束不允許有意義的表示：有時我們需要更多的靈活性。

為 UX 設計師而製的心智圖

如所見，心智圖是用於頭腦風暴、模式識別和過程可視化的工具，因此在 UX 設計工作中心智圖有無窮無盡的用途。但我發現一種心智圖對我們特別有用，因為它展示了實體以及我們連接它們的方式：本體圖。

本體 是對存在進行哲學研究，研究直接與存在相關的概念以及存在的基本類別和它們的關係。

本體圖與開發人員使用的數據庫關係圖有一些相似性，實際上它們有相同的目標：表現系統中現有對象之間的關系。然而，本體圖更常作為設計工具而非文檔工具，因此我們主要在項目的早期階段使用它來幫助我們定義系統如何運作。

Jack Magma Studio 的本體圖

心智圖的特徵

• 清晰的組織結構。心智圖限制在樹狀結構。它們具有明確的、有導向性的從樹根向外的流動。

• 一個中心主題。在心智圖中，所有節點（除了樹根）僅有一個父節點。每個節點都可以有子節點作為該概念的子主題。心智圖中的每個概念都可以直接溯回根主題。

• 沒有關系的定義。節點之間不同類型的關系沒有區分——樹中的所有邊都以相同方式表示並未標記。

在 UX 中的使用

心智圖有助於將與單一主題相關的信息集合進行系統性、有意義的結構化。在 UX 中，它們在進行分類思考時很有幫助，例如：

• 分解特定網頁上的組件——例如，為了確定網頁的小型信息架構

• 在網站中規劃主題內容

• 更有效地分隔和覆蓋信息

XMind 提供的酷炫功能

我個人尤其喜愛或對我幫助最大的 XMind 功能包括： 跨所有裝置的無縫體驗：心智圖可以輕鬆地在筆記本電腦和移動設備上找到，並且 XMind 能在不同平台上完美運行。

暗黑介面：XMind: ZEN 在任何桌面平台上支援深色模式。可以在首選項中在亮面和深色介面之間切換。

結論

在微觀層面繪製心智圖可能真的很難並且常常無用。在早期設計階段，創建低保真地圖比浪費時間詳細描述和編碼更富有成效。

每位設計師在權衡利弊後都會有自己最喜歡的模型。我個人偏好樹狀模型，因為它的簡單性。

註：本文由 Saurav Pandey 發表於 Medium。