用戶界面樹形結構顯示方法及系統的製作方法
2023-05-17 13:09:26 2
用戶界面樹形結構顯示方法及系統的製作方法
【專利摘要】本發明提供了一種用戶界面樹形結構顯示方法及系統，包括：自動生成並顯示根節點列表；根據接收到的用戶指令，生成並顯示相應根節點的各級子節點列表；其中，所述根節點列表和各級子節點列表均包括顯示區域沿界面縱向依次排列的一個或多個節點，且所述各級子節點列表的顯示區域沿界面橫向依次排列。本發明不僅能夠充分利用用戶的界面縱向和橫向空間，避免局部界面空白、顯示效果不佳的問題，而且能夠使樹形結構的層次更加分明，從而能夠迅速地找到需要的節點，提高用戶的使用效率以及體驗效果。
【專利說明】用戶界面樹形結構顯示方法及系統
【技術領域】
[0001]本發明涉及人機互動【技術領域】，更具體地說，涉及一種用戶界面樹形結構顯示方法及系統。
【背景技術】
[0002]軟體設計可分為兩個部分:編碼設計與UI (User Interface,用戶界面)設計。UI設計，是指對軟體的人機互動、操作邏輯、界面美觀的整體設計。UI設計的內容包括樹形結構的設計。
[0003]樹形結構是一種可以分級顯示項目列表的窗口，其所含項目以相互關聯的方式顯示在控制項中，通過點擊位於某一級的項目節點展開下一級中從屬於該節點的所有項目。雖然樹形結構控制項非常適合管理那些層次較多且相互間隸屬關係較為清晰的項目元素，但是，現有的樹控制項無法滿足特殊的業務特性。
[0004]現有的樹形結構都是通過上下結構顯示根節點以及子節點的，如圖1所示，下一級節點的顯示區域均位於上一級節點顯示區域的下方。但是，當節點較多或節點的層級較多時，能夠顯示各層級節點的界面縱向空間有限，而其界面的橫向空間並未完全利用，因此，會造成界面局部空間空白，顯示效果不佳，用戶體驗不理想的問題。
【發明內容】
[0005]有鑑於此，本發明提供了一種用戶界面顯示系統及方法，以解決現有技術中採用上下結構顯示樹形結構時，造成的界面局部界面空白，顯示效果不佳，用戶體驗不理想的問題。
[0006]為實現上述目的，本發明提供如下技術方案:
[0007]一種用戶界面樹形結構顯示方法，包括:
[0008]自動生成並顯示根節點列表；
[0009]根據接收到的用戶指令，生成並顯示相應根節點的各級子節點列表；
[0010]其中，所述根節點列表和各級子節點列表均包括顯示區域沿界面縱向依次排列的一個或多個節點，且所述各級子節點列表的顯示區域沿界面橫向依次排列。
[0011]優選的，所述用戶的指令為用戶通過滑鼠移入操作、鍵盤方向鍵操作或觸屏觸控操作輸入的指令。
[0012]優選的，接收到用戶指令時，生成並顯示所述節點的子節點列表，隱藏所述節點同一級的其他節點的子節點列表。
[0013]優選的，子節點列表中排列在第一個的第一節點的顯示區域與其對應的上一級節點的顯示區域在同一條直線上。
[0014]優選的，接收到用戶指令時，如果生成的子節點列表的顯示區域超出當前顯示界面時，所述顯示界面的滾動條自動移動，以顯示所述子節點列表。
[0015]優選的，當同一列表中的多個節點的子節點相同時，將所述多個節點沿界面縱向依次排列在同一顯示區域內，並在接收到用戶指令後，在所述顯示區域右側生成並顯示對應所述多個節點的同一子節點列表。
[0016]優選的，用於科目選擇時，每一個節點對應一個科目，則所述方法還包括:
[0017]根據顯示的各級子科目列表，選擇用戶需要的科目。
[0018]優選的，當用戶選擇的科目為單個的科目時，可以通過點擊所述科目對應的顯示區域來選中所述科目；當用戶選擇的科目為同一子科目列表中的全部科目時，可以通過選中所述子科目列表對應的上一級科目，來選中所述子科目列表中的全部科目。
[0019]一種用戶界面樹形結構顯示系統，包括:
[0020]樹形結構控制模塊，用於自動生成根節點列表，並根據接收到的用戶指令生成相應的根節點的各級子節點列表；
[0021]顯示控制模塊，用於控制根節點列表和子節點列表中節點的顯示區域沿界面縱向依次排列，以及控制所述各級子節點列表的顯示區域沿界面橫向依次排列。
[0022]優選的，所述顯示控制模塊包括:
[0023]第一顯示區域控制模塊，用於控制根節點列表和子節點列表中節點的顯示區域沿界面縱向依次排列；
[0024]第二顯示區域控制模塊，用於控制各級子節點列表的顯示區域沿界面橫向依次排列；
[0025]第三顯示區域控制模塊，用於控制子節點列表中排列在第一個的第一節點的顯示區域與其對應的上一級節點的顯示區域在同一條直線上。
[0026]優選的，所述顯示控制模塊還包括:
[0027]界面顯示控制模塊，用於當生成的子節點列表的顯示區域超出用戶的當前顯示界面時，移動顯示界面的滾動條來顯示所述子節點列表。
[0028]優選的，所述顯示控制模塊還包括:
[0029]合併顯示模塊，用於當同一列表中的多個節點的子節點相同時，將所述多個節點沿界面縱向依次排列在同一顯示區域內，並在所述顯示區域右側顯示對應所述多個節點的同一子節點列表。
[0030]與現有技術相比，本發明所提供的技術方案具有以下優點:
[0031]本發明所提供的用戶界面樹形結構顯示方法及系統，由於根節點列表和各級子節點列表中節點的顯示區域沿界面縱向依次排列，即從上往下依次排列，因此，充分利用了用戶界面的縱向空間，又由於各級子節點列表沿界面橫向依次排列，即從左往右依次排列，充分利用了用戶界面的橫向空間，因此，本發明不僅能夠充分利用用戶的界面空間，避免局部界面空白、顯示效果不佳的問題，而且能夠使樹形結構的層次更加分明，從而能夠迅速地找到需要的節點，提高用戶的使用效率以及體驗效果。
【專利附圖】
【附圖說明】
[0032]為了更清楚地說明本發明實施例或現有技術中的技術方案，下面將對實施例或現有技術描述中所需要使用的附圖作簡單地介紹，顯而易見地，下面描述中的附圖僅僅是本發明的一些實施例，對於本領域普通技術人員來講，在不付出創造性勞動的前提下，還可以根據這些附圖獲得其他的附圖。[0033]圖1為本發明提供的現有的樹形結構示意圖；
[0034]圖2為本發明實施例一提供的用戶界面樹形結構顯示方法流程圖；
[0035]圖3為本發明實施例一提供的樹形結構示意圖；
[0036]圖4為本發明實施例一提供的節點顯示區域合併後的樹形結構圖；
[0037]圖5為本發明實施例二提供的用於科目選擇的用戶界面樹形結構顯示方法流程圖。
【具體實施方式】
[0038]正如【背景技術】所述，現有的樹形結構都是通過上下結構顯示根節點以及子節點的,如圖1所示，下一級節點的顯示區域均位於上一級節點顯示區域的下方。但是，當節點較多或節點的層級較多時，能夠顯示各層級節點的界面縱向空間有限，而其界面的橫向空間並未完全利用，因此，會造成界面橫向局部空間空白，顯示效果不佳，用戶體驗不理想的問題。
[0039]基於此，本發明提供了一種用戶界面樹形結構顯示方法，以克服現有技術存在的上述問題，包括:
[0040]自動生成並顯示根節點列表；
[0041]根據接收到的用戶指令，生成並顯示相應根節點的各級子節點列表；
[0042]其中，所述根節點列表和各級子節點列表均包括顯示區域沿界面縱向依次排列的一個或多個節點，且所述各級子節點列表的顯示區域沿界面橫向依次排列。
[0043]本發明還提供了一種用戶界面樹形結構顯示系統，包括:
[0044]樹形結構控制模塊，用於自動生成根節點列表，並根據接收到的用戶指令生成相應的根節點的各級子節點列表；
[0045]顯示控制模塊，用於控制根節點列表和子節點列表中節點的顯示區域沿界面縱向依次排列，以及控制所述各級子節點列表的顯示區域沿界面橫向依次排列。
[0046]本發明所提供的用戶界面樹形結構顯示方法及系統，由於根節點列表和各級子節點列表中節點的顯示區域沿界面縱向依次排列，即從上往下依次排列，因此，充分利用了用戶界面的縱向空間，又由於各級子節點列表沿界面橫向依次排列，即從左往右依次排列，充分利用了用戶界面的橫向空間，因此，本發明不僅能夠充分利用用戶的界面空間，避免局部界面空白、顯示效果不佳的問題，而且能夠使樹形結構的層次更加分明，從而能夠迅速地找到需要的節點，提高用戶的使用效率以及體驗效果。
[0047]以上是本發明的核心思想，為使本發明的上述目的、特徵和優點能夠更加明顯易懂，下面結合附圖對本發明的【具體實施方式】做詳細的說明。
[0048]在下面的描述中闡述了很多具體細節以便於充分理解本發明，但是本發明還可以採用其他不同於在此描述的其它方式來實施，本領域技術人員可以在不違背本發明內涵的情況下做類似推廣，因此本發明不受下面公開的具體實施例的限制。
[0049]其次，本發明結合示意圖進行詳細描述，在詳述本發明實施例時，為便於說明，表示器件結構的剖面圖會不依一般比例作局部放大，而且所述示意圖只是示例，其在此不應限制本發明保護的範圍。此外，在實際製作中應包含長度、寬度及深度的三維空間尺寸。
[0050]下面通過幾個實施例詳細描述。[0051]實施例一
[0052]本實施例提供了一種用戶界面樹形結構顯示方法，其流程圖如圖2所示，包括:
[0053]S201:自動生成並顯示根節點列表；
[0054]在生成根節點列表之前,利用AJAX (Asynchronous JavaScript and Xml,異步的JavaScript 和 Xml 技術)技術或基於 TCP/IP (Transmission Control Protocol/InternetProtocol，傳輸控制協議/網際網路互聯協議)的技術從伺服器端或本地文件中讀取數據。所述數據包括JSON格式數據、XML格式或其他格式的數據，對所述數據進行解析後，獲得表示節點之間層級關係的數據項，所述數據項通常包括id和parented這兩個欄位，支持無限層級的節點。
[0055]其中，AJAX不是一種新的程式語言，而是一種用於創建更好更快以及交互性更強的網頁應用程式的技術，JSON是一種輕量級的數據交換格式，它是基於JavaScript的一個子集。JSON雖然採用完全獨立於語言的文本格式，但是，也具有類似於C語言家族的習慣特性(包括C，C++，JavaScript等)，這些特性使得JSON成為理想的數據交換語言，易於用戶閱讀和編寫，同時也易於機器的解析和生成。雖然XML的說明結構更接近人類的語言，在編碼的可讀性上具有明顯的優勢，但是，JSON更適合機器閱讀，索引效率更高。
[0056]對數據進行解析後，得到表示數據之間層次關係的節點數據，並根據節點數據自動生成並顯示根節點列表，所述根節點列表包括一個或多個根節點，且所述根節點的顯示區域沿界面的縱向排列，即從上往下依次排列。
[0057]S202:根據接收到的用戶指令，生成並顯示相應根節點的各級子節點列表。
[0058]本實施例中，用戶指令為用戶通過滑鼠移入操作輸入的指令，當然，在其他實施例中也可以為用戶通過鍵盤方向鍵操作或點擊觸控螢幕的觸控操作等輸入的指令。當用戶按壓鍵盤方向鍵時，通過識別方向鍵對應的位置區域確定對應的節點，並執行相應的命令，顯示子節點列表等；當用戶點擊觸控螢幕時，通過識別點擊的位置區域確定對應的節點，並執行相應的命令，顯示子節點列表等。
[0059]本實施例中，根據接收到的用戶指令生成並顯示相應根節點的各級子節點列表的過程具體為:接收到用戶滑鼠移入操作輸入的指令時，通過識別滑鼠的位置確定對應的根節點，生成並顯示所述根節點的各級子節點列表。
[0060]接收到用戶指令時，即當用戶將滑鼠移入任一根節點的顯示區域時，通過識別滑鼠的位置確定對應的根節點，生成並顯示所述根節點的各級子節點列表的過程包括:當用戶將滑鼠移入任一根節點的顯示區域時，系統自動生成並顯示所述根節點的第一級子節點列表，當用戶將滑鼠移入第一級子節點列表中任一節點的顯示區域時，系統自動生成並顯示所述節點的第二級子節點列表，依次類推，當用戶將滑鼠移入第N-1級子節點列表中任一節點的顯示區域時，系統自動生成並顯示所述節點的第N級子節點列表，其中，所述第N級子節點列表為所述根節點的最後一級子節點列表。
[0061]所述各級子節點列表的顯示區域沿界面的橫向，即從左往右依次排列，且任一節點的子節點列表中縱向排列在第一個的第一節點的顯示區域與所述節點的顯示區域在同一條直線上，所述子節點列表顯示區域的左側位置緊鄰其對應的上一級節點顯示區域的右側位置，且所述子節點列表與所述上一級節點之間通過樹形符號連接，本實施例中的樹形結構的示意圖如圖3所示。[0062]在顯示各級子節點列表的過程中，接收到用戶指令時，即當用戶將滑鼠移動到任一節點的顯示區域時，系統自動生成並顯示所述節點的子節點列表，並自動隱藏所述節點同一級的其他節點的子節點列表，以便於用戶查看。此外，當用戶滑鼠移入任一節點的顯示區域時，如果生成的子節點列表的顯示區域超出當前顯示界面時，所述顯示界面的滾動條自動移動，以顯示所述子節點列表。
[0063]通過識別滑鼠的位置來確定用戶需要查看的節點，並據此來自動展開相應節點的子節點列表，自動隱藏所述節點同一級的其他節點的子節點列表，即便於用戶查看，又提高了操作效率，從而避免了節點層級較多時，需要多次點擊滑鼠來完成層級的展開、收縮，操作繁瑣的問題。
[0064]本實施例中，當同一列表中的多個(兩個及兩個以上)節點的子節點列表相同時，例如，節點A、節點B、節點C具有相同的子節點列表，則將節點A?C沿界面縱向依次排列在同一個塊內，即同一顯示區域內，所述節點的顯示區域合併後的樹形結構如圖4所示。所述顯示區域內的各節點之間相互獨立，對各節點的操作互不影響。所述多個節點與其他節點沒有太大的區別，僅僅只是沒有自己的顯示區域，共同處於同一個顯示區域的外部邊框內部而已。
[0065]其中，在接收到用戶指令後，在所述顯示區域右側生成並顯示對應所述多個節點的同一子節點列表，即在接收到對應所述顯示區域的任一節點的用戶指令後，在所述顯示區域右側生成並顯示同一子節點列表。
[0066]本實施例提供的用戶界面樹形結構顯示方法，由於根節點列表和各級子節點列表中節點的顯示區域沿界面縱向依次排列，即從上往下依次排列，因此，充分利用了用戶界面的縱向空間，又由於各級子節點列表沿界面橫向依次排列，即從左往右依次排列，充分利用了用戶界面的橫向空間，因此，本發明不僅能夠充分利用用戶的界面空間，避免局部界面空白、顯示效果不佳的問題，而且能夠使樹形結構的層次更加分明，從而能夠迅速地找到需要的節點，提高用戶的使用效率以及體驗效果。
[0067]實施例二
[0068]本實施例提供了一種用於科目選擇的用戶界面樹形結構顯示方法，所述樹形結構中的每一個節點都對應一個科目，所述方法的流程圖如圖5所示，包括:
[0069]S501:自動生成並顯示根科目列表；
[0070]在生成根節點列表之前，利用AJAX技術或基於TCP/IP協議的技術從伺服器端或本地文件中讀取數據,所述數據包括JSON格式數據、XML格式或其他格式的數據。對所述數據進行解析後，獲得表示各科目間層級關係的數據項，所述數據項通常包括id和parented這兩個欄位，其支持無限層級。
[0071]獲得表示各科目之間層級關係的數據後，根據所述數據自動生成並顯示根科目列表，所述根科目列表包括一個或多個根科目，且所述根科目的顯示區域沿界面的縱向排列，即從上往下依次排列。
[0072]S502:根據接收到的用戶指令，生成並顯示相應根科目的各級子科目列表；
[0073]本實施例中，用戶指令為用戶通過將滑鼠移入操作輸入的顯示指令，當然，在其他實施例中也可以為用戶通過鍵盤方向鍵操作或點擊觸控螢幕的觸控操作等輸入的指令。即當用戶按壓鍵盤方向鍵時，通過識別方向鍵對應的位置區域確定對應的節點，並執行相應的命令，顯示子節點列表等；當用戶點擊觸控螢幕時，通過識別點擊的位置區域確定對應的節點，並執行相應的命令，顯示子節點列表等。
[0074]本實施例中，根據接收到的用戶指令生成並顯示相應根科目的各級子科目列表的過程具體為:接收到用戶滑鼠移入操作輸入的指令時，即當用戶將滑鼠移入任一根科目的顯示區域時，通過識別滑鼠的位置確定對應的根科目，系統自動獲取數據生成並顯示所述根科目的各級子科目列表。
[0075]接收到用戶指令時，即當用戶將滑鼠移入任一根科目的顯示區域時，通過識別滑鼠的位置確定對應的根科目，生成並顯示所述根科目的各級子科目列表的過程包括:當用戶將滑鼠移入任一根科目的顯示區域時，系統自動生成並顯示所述根科目的第一級子科目列表，當用戶將滑鼠移入第一級子科目列表中任一科目的顯示區域時，系統自動生成並顯示所述科目的第二級子科目列表，依次類推，當用戶將滑鼠移入第N-1級子科目列表中任一科目的顯示區域時，系統自動生成並顯示所述科目的第N級子科目列表，其中，所述第N級子科目列表為所述根科目的最後一級子科目列表。
[0076]所述各級子科目列表的顯示區域沿界面的橫向，即從左往右依次排列，且任一科目的子科目列表中縱向排列在第一個的第一科目的顯示區域與所述科目的顯示區域在同一條直線上，所述子科目列表顯示區域的左側位置緊鄰其對應的上一級科目顯示區域的右側位置，且所述子科目列表與所述上一級科目之間通過樹形符號連接，其樹形結構圖與圖3中的結構相同。
[0077]在顯示各級子科目列表的過程中，接收到用戶指令時，即當用戶將滑鼠移動到任一科目的顯示區域時，系統自動生成並顯示所述科目的子節點列表，並自動隱藏所述科目同一級的其他科目的子節點列表，以便於用戶查看。此外，當用戶滑鼠移入任一科目的顯示區域時，如果生成的子科目列表的顯示區域超出當前顯示界面時，所述顯示界面的滾動條自動移動，以顯示所述子科目列表。
[0078]通過識別滑鼠的位置來確定用戶需要查看的科目，並據此來自動展開相應科目的子科目列表，自動隱藏所述科目同一級的其他科目的子科目列表，即便於用戶查看，又提高了操作效率，從而避免了科目層級較多時，需要多次點擊滑鼠來完成層級的展開、收縮，操作繁瑣的問題。
[0079]S503:根據顯示的各級子科目列表，選擇用戶需要的科目。
[0080]生成並顯示根科目的各級子科目列表後，用戶可以根據需要選擇科目。當用戶選擇的科目為單個的科目時，可以通過點擊所述科目對應的顯示區域來選中所述科目；當用戶選擇的科目為同一子科目列表中的全部科目時，可以通過選中所述子科目列表對應的上一級科目，來選中所述子科目列表中的全部科目。
[0081]本實施例中，當同一列表中的多個(兩個及兩個以上)科目的子科目列表相同時，則與圖4中的結構相同，將科目A?C沿界面縱向依次排列在同一個塊內，即同一顯示區域內。所述顯示區域內的各科目之間相互獨立，對各科目的操作互不影響。所述多個科目與其他科目沒有太大的區別，僅僅只是沒有自己的顯示區域，共同處於同一個顯示區域的外部邊框內部而已。
[0082]其中，在接收到用戶指令後，在所述顯示區域右側生成並顯示對應所述多個科目的同一子科目列表，即在接收到對應所述顯示區域的任一科目的用戶指令後，在所述顯示區域右側生成並顯示同一子科目列表。
[0083]本實施例中，由於根科目列表和各級子科目列表中科目的顯示區域沿界面縱向依次排列，即從上往下依次排列，因此，充分利用了用戶界面的縱向空間，又由於各級子科目列表沿界面橫向依次排列，即從左往右依次排列，充分利用了用戶界面的橫向空間，因此，本實施例不僅能夠充分利用用戶的界面空間，避免局部界面空白、顯示效果不佳的問題，而且能夠使樹形結構的層次更加分明，從而能夠迅速地找到並選擇需要的科目，提高了用戶的使用效率以及體驗效果。
[0084]實施例三
[0085]本實施例提供了一種用戶界面樹形結構顯示系統，包括:樹形結構控制模塊和顯示控制模塊，樹形結構控制模塊，用於自動生成根節點列表，並根據接收到的用戶指令生成相應的根節點的各級子節點列表；顯示控制模塊，用於控制根節點列表和子節點列表中節點的顯示區域沿界面縱向依次排列，以及控制所述各級子節點列表的顯示區域沿界面橫向依次排列。
[0086]本實施例中，所述系統還包括:數據獲取模塊，用於利用AJAX技術或基於TCP/IP協議的技術從伺服器端或本地文件中獲取JSON格式、XML格式或其他格式的數據，並對所述數據進行解析，獲得表示各節點層級關係的數據項，所述數據項通常包括id和parented這兩個欄位。
[0087]數據獲取模塊獲得數據後，樹形結構控制模塊根據所述數據自動生成根節點列表，並將所述根節點列表顯示在用戶界面，根據用戶的指令，即當用戶的滑鼠移入任一根節點的顯示區域時，樹形結構控制模塊根據數據生成所述根節點對應的子節點列表，當用戶的滑鼠移入所述子節點列表中的任一子節點的顯示區域時，樹形結構控制模塊根據數據生成所述子節點對應的子節點列表，依次類推，直至生成所述根節點的最後一級子節點列表。本實施例中的樹形結構控制模塊支持無限層級的子節點列表的生成。
[0088]在樹形結構控制模塊生成根節點的各級子節點列表的過程中，顯示控制模塊控制根節點列表和子節點列表中的節點的顯示區域沿界面縱向排列，即從上往下依次排列，以及控制生成的各級子節點列表的顯示區域沿界面橫向排列，即從左往右依次排列。
[0089]本實施例中，所述顯示控制模塊包括:第一顯示區域控制模塊、第二顯示區域控制模塊、第三顯示區域控制模塊和界面顯示控制模塊，第一顯示區域控制模塊，用於控制根節點列表和子節點列表中節點的顯示區域沿界面縱向依次排列；第二顯示區域控制模塊，用於控制各級子節點列表的顯示區域沿界面橫向依次排列；第三顯示區域控制模塊，用於控制子節點列表中排列在第一個的第一節點的顯示區域與其對應的上一級節點的顯示區域在同一條直線上；界面顯示控制模塊，用於當生成的子節點列表的顯示區域超出用戶的當前顯示界面時，移動顯示界面的滾動條來顯示所述子節點列表。
[0090]本實施例中，用戶指令為用戶通過將滑鼠移入到相應節點的顯示區域的操作來輸入的顯示指令，當然，在其他實施例中也可以為用戶通過鍵盤方向鍵操作或點擊觸控螢幕的觸控操作等輸入的指令。即當用戶按壓鍵盤方向鍵時，通過識別方向鍵對應的位置區域確定對應的節點，並執行相應的命令，顯示子節點列表等；當用戶點擊觸控螢幕時，通過識別點擊的位置區域確定對應的節點，並執行相應的命令，顯示子節點列表等。
[0091]此外，本實施例中，所述顯示控制模塊還包括:合併顯示控制模塊，用於當同一列表中的多個節點的子節點列表相同時，將所述多個節點沿界面縱向依次排列在同一顯示區域內，並在所述顯示區域右側顯示對應所述多個節點的同一子節點列表。
[0092]如圖4所示，當節點A、節點B、節點C具有相同的子節點列表時，合併顯示控制模塊將節點A?C沿界面縱向依次排列在同一個塊內，即同一顯示區域內。所述顯示區域內的各節點之間相互獨立，對各節點的操作互不影響。所述多個節點與其他節點沒有太大的區別，僅僅只是沒有自己的顯示區域，共同處於同一個顯示區域的外部邊框內部而已。其中，樹形結構控制模塊在接收到用戶指令後，生成對應所述多個節點的同一子節點列表，合併顯示控制模塊控制同一子節點列表在所述顯示區域的右側顯示。
[0093]本實施例提供的用戶界面樹形結構顯示系統，通過樹形結構控制模塊自動生成根節點列表，以及根據用戶的指令生成相應的根節點的各級子節點列表，通過顯示控制模塊控制根節點列表和子節點列表中的節點的顯示區域沿界面縱向依次排列，即從上往下依次排列，以及所述各級子節點列表的顯示區域沿界面橫向依次排列，即從左往右依次排列，從而實現了用戶界面縱向空間和橫向空間的充分利用，避免了局部界面空白、顯示效果不佳的問題，且能夠使節點的層次更加分明，從而能夠迅速地找到需要的節點，提高了用戶的使用效率以及體驗效果。
[0094]本說明書中各個實施例採用遞進的方式描述，每個實施例重點說明的都是與其他實施例的不同之處，各個實施例之間相同相似部分互相參見即可。對於實施例公開的裝置而言，由於其與實施例公開的方法相對應，所以描述的比較簡單，相關之處參見方法部分說明即可。
[0095]對所公開的實施例的上述說明，使本領域專業技術人員能夠實現或使用本發明。對這些實施例的多種修改對本領域的專業技術人員來說將是顯而易見的，本文中所定義的一般原理可以在不脫離本發明的精神或範圍的情況下，在其它實施例中實現。因此，本發明將不會被限制於本文所示的這些實施例，而是要符合與本文所公開的原理和新穎特點相一致的最寬的範圍。
【權利要求】
1.一種用戶界面樹形結構顯示方法，其特徵在於，包括: 自動生成並顯示根節點列表； 根據接收到的用戶指令，生成並顯示相應根節點的各級子節點列表； 其中，所述根節點列表和各級子節點列表均包括顯示區域沿界面縱向依次排列的一個或多個節點，且所述各級子節點列表的顯示區域沿界面橫向依次排列。
2.根據權利要求1所述的方法，其特徵在於，所述用戶指令為用戶通過滑鼠移入操作、鍵盤方向鍵操作或觸屏觸控操作輸入的指令。
3.根據權利要求2所述的方法，其特徵在於，接收到用戶指令時，生成並顯示所述節點的子節點列表，隱藏所述節點同一級的其他節點的子節點列表。
4.根據權利要求3所述的方法，其特徵在於，子節點列表中排列在第一個的第一節點的顯示區域與其對應的上一級節點的顯示區域在同一條直線上。
5.根據權利要求4所述的方法，其特徵在於，接收到用戶指令時，如果生成的子節點列表的顯示區域超出當前顯示界面時，所述顯示界面的滾動條自動移動，以顯示所述子節點列表。
6.根據權利要求5所述的方法，其特徵在於，當同一列表中的多個節點的子節點列表相同時，將所述多個節點沿界面縱向依次排列在同一顯示區域內，並在接收到用戶指令後，在所述顯示區域右側生成並顯示對應所述多個節點的同一子節點列表。
7.根據權利要求6所述的方法,其特徵在於,用於科目選擇時,每一個節點對應一個科目，則所述方法還包括: 根據顯示的各級子科目列表，選擇用戶需要的科目。
8.根據權利要求7所述的方法，其特徵在於，當用戶選擇的科目為單個的科目時，可以通過點擊所述科目對應的顯示區域來選中所述科目；當用戶選擇的科目為同一子科目列表中的全部科目時，可以通過選中所述子科目列表對應的上一級科目，來選中所述子科目列表中的全部科目。
9.一種用戶界面樹形結構顯示系統，其特徵在於，包括: 樹形結構控制模塊，用於自動生成根節點列表，並根據接收到的用戶指令生成相應的根節點的各級子節點列表； 顯示控制模塊，用於控制根節點列表和子節點列表中節點的顯示區域沿界面縱向依次排列，以及控制所述各級子節點列表的顯示區域沿界面橫向依次排列。
10.根據權利要求9所述的系統，其特徵在於，所述顯示控制模塊包括: 第一顯示區域控制模塊，用於控制根節點列表和子節點列表中節點的顯示區域沿界面縱向依次排列； 第二顯示區域控制模塊，用於控制各級子節點列表的顯示區域沿界面橫向依次排列； 第三顯示區域控制模塊，用於控制子節點列表中排列在第一個的第一節點的顯示區域與其對應的上一級節點的顯示區域在同一條直線上。
11.根據權利要求10所述的系統，其特徵在於，所述顯示控制模塊還包括: 界面顯示控制模塊，用於當生成的子節點列表的顯示區域超出用戶的當前顯示界面時，移動顯示界面的滾動條來顯示所述子節點列表。
12.根據權利要求11所述的系統，其特徵在於，所述顯示控制模塊還包括:合併顯示控制模塊，用於當同一列表中的多個節點的子節點列表相同時，將所述多個節點沿界面縱向依次排列在同一顯示區域內，並在所述顯示區域右側顯示對應所述多個節點的同一子節點列表。
【文檔編號】G06F9/44GK103793135SQ201310753753
【公開日】2014年5月14日 申請日期:2013年12月31日 優先權日:2013年12月31日
【發明者】張慶梅, 張萌霞, 雷太原 申請人:遠光軟體股份有限公司