導讀：樹形結構是交互設計中的基礎組件，可用清晰的層級結構來展示層級信息，便于用戶根據數據之間的關系來逐級找到相應的節點及數據 。樹形結構使用較為廣泛，例如導航、空間或邏輯組織、頁面定位、級聯選擇等，其結構可展開或折疊，并根據相應的使用環境可進行相應的適應性改造 。

一、定義 從更廣義的角度上來說，樹狀結構（Tree structure），又可稱為樹形結構，或稱樹狀圖，其是一種將層次結構式的構造性質，以圖象方式表現出來的方法 。以樹的象征來表現出構造之間的關系，不過在圖象的呈現上，它是一個上下顛倒的樹，其根部在上方，是內容的開頭，而下方的內容稱為枝干與葉子 。
在樹狀結構中的基本單位，稱為節點（Node） 。節點之間的鏈接，稱為分支（branch） 。節點與分支形成樹狀，結構的開端，稱為根（root），或根結點 。根節點之外的節點，稱為子節點（child） 。沒有鏈接到其他子節點的節點，稱為葉節點（Leaf） 。
在進行介紹之前，我們先做一個小測試，如圖：
樹形結構的CheckBox應該位于折疊icon的前面，還是后面？
這里就不說明答案了，相信讀完這篇文章，你會有明確的答案 。
二、結構 樹形結構是一種層次嵌套的結構 。一個樹形結構的外層和內層有相似的結構，所以，這種結構多可以遞歸的表示 。樹狀結構只是一個概念，可以用許多種不同形式來展現 。
相對來說，樹狀結構是一個比較復雜的交互組件，包括若干組成部分 。標準的樹狀結構包括選中狀態、節點展開/折疊按鈕、單選框或復選框選擇器、類型圖標、描述文字、計數器、帶有編輯、導航或刪除等操作的附加按鈕等 。設計師也可以根據需求，在樹狀結構內定制任意的組件 。
樹形結構就像一個包含分層數據的列表，充當物品的容器，可以展開和折疊節點 。當用戶展開節點時，樹形結構會根據當前顯示的級別數，動態更改每個級別的縮進 。
由于場景不同，樹形結構所含的元素也有所差異 。標準的組織樹應該包括但不限于以上元素，
根據需求，用戶可以通過基本元素組合成所需要的樹形結構 。
三、應用方式 樹形結構的應用范圍很廣，常見的應用方式包括導航、定位、選擇、組織等 。在不同的應用場景下，樹形結構的表現形式、所包含的元素、可用的操作都有所不同 。
接下來，我們就詳細介紹一下這四種場景的應用方式及注意事項：
3.1 導航 導航是樹形結構在web端最常見的應用方式，以至于很多人都不清楚其嚴格意義上算是樹形結構，特別是包含多級導航左側導航，常見于B端產品后臺頁面和一些復雜數據的展示頁面 。

猜你喜歡

• 林瑞陽什么時候開始滿頭白發的 林瑞陽為什么頭發白了
• 白琉璃的真實身份到底是什么 無心法師白琉璃的來歷身世
• 歷史上小喬是周瑜正妻還是小妾 歷史上周瑜的正妻是誰
• 房屋常識:房產證的名字
• 歌手旭日陽剛近況 農民工組合旭日陽剛現在過的怎么樣
• 催淚大片這6部一定榜上有名 比較感人的電影
• 簡短介紹冬至習俗的來歷傳說 關于冬至的來源和故事
• 目前最好的淘寶客app 淘客app代理可以做嗎
• 怎么選擇家庭空氣開關的型號？ 家用漏電開關型號
• 坂井泉水是赤木晴子的原型嗎 日本赤木晴子的原型是誰