這裡所說的系統軟體（內部這麼稱呼），指的是由軟體與硬體裝置所結合成的系統的軟體那一部分。這種系統一般都比較複雜，往往是面向企業開發的，也是所謂的b端產品。比如本人參與過的智慧型某某網管系統和某某分析保障系統，它們的軟體層面如右圖所示。
我在做系統軟體時做互動設計的主流工作時步驟如下：資訊架構—整體布局—任務操作流程——線框圖。接下來就按照這個步驟來總結一下。
構架資訊架構對於互動設計師來說，是一種很核心的能力。對於我所接觸的這種比較複雜的系統軟體的資訊架構，有幸有機會去學習以及實踐了一下。使用者體驗要素那本書中資訊結構分類就有以下那麼幾種（如圖從左往右）：
層級結構
矩陣結構
自然結構
線性結構
這些結構在使用者體驗設計的資訊架構設計中就起到了不少的作用。
關於我所接觸的系統軟體，運用得比較明顯的是層級結構，比如樹狀圖，比如在某某管理系統中的區域、站點、機房、屏、箱、盤。因為在實際情況中，乙個區域可以包含很多站點，乙個站點又可以搭建很多機房，每個機房可以擺放很多屏，乙個屏可以裝很多個箱，乙個箱一般有6個盤，很明顯的一層包含一層的。這也是管理某某的乙個實際情況以及它所具有的特性。在面對這種情況，很自然就可以考慮從上到下的使用方式了，也很符合邏輯，用乙個樹狀導航就可以有組織地將管理某某的這種狀況在軟體介面上視覺化地展示出來，隨時檢視其的狀態。這種使用方式，就解決了該系統中視覺化工程的資訊架構問題了，如下圖：
對於層級結構還有另外一種使用方式，從下到上，就是從最低級別的功能特性出發，將最低級別的功能特性歸屬到較高一級的類別中，一步一步往上找歸屬。例如某某管理中的，要將實際生活中紙製輸出工作指令這一業務在軟體的介面中表現出來，就得了解管理人員與執行者之間執行任務的流程、操作流程以及相關的內容，然後將其倒推為乙個功能模組，再將這個功能模組倒推到整個系統中。這樣的話就可以將傳統工作流中的紙製輸出工作指令轉化為網路電子輸出工作指令了，就找到了其的資訊架構。
乙個系統軟體往往業務很多，運用第一種從上到下和第二種從下到上不見得就能得到乙個統一的資訊架構。畢竟這兩種方法都是有缺陷的。要去彌補這種缺陷，可以考慮從上到下和從下到上的方法之間找到平衡，也就是從中間考慮。剛好在某某管理這個系統中將有些功能特性分組時我們遇到了比較模糊的分組問題，猶豫不決，就與客戶以及使用者都溝通了一下，讓他們對這些功能特性進行認知並分組。得到客戶以及使用者的分組後，我們就對上以及對下都各做調整，最後就能得到乙個統一的資訊架構了。
每種產品對這四種基本結構的偏重是不同的。在我做系統軟體時，在考慮某些場景的時候，比如管理人員需要檢視某個物件的狀態，但是這個物件的同類又非常多，那就得根據物件的具體特性把它給找出來。在組織這類資訊的時候，用矩陣結構就很合適了。如下圖，就展現了乙個矩陣結構，具體一點就是可以進行多條件查詢。
「矩陣結構允許使用者在節點與節點之間沿著兩個或更多的「維度」移動。由於每乙個使用者的需求都可以和矩陣中的乙個「軸」聯絡在一起，因此矩陣結構通常能幫助那些「帶著不同需求而來」的使用者，使他們能在相同內容中尋找各自想要的東西。「
在構建系統軟體的資訊架構的過程中，層級結構與矩陣結構是運用得比較明顯的兩種結構，其他兩種結構在一些輕型產品的資訊架構中會用得比較多。
當把資訊架構建立好了時候，就要考慮怎麼布局這些功能模組，怎麼在介面內將這些功能模組有的放矢地擺放出來，也就是規劃整體布局。
整體布局按照使用者體驗5要素中的說法就是屬於框架層面的內容，這裡主要總結的就是導航。這種系統軟體導航一般有三種，分別是橫向導航（頂部導航）、縱向導航（側邊導航）以及橫向+縱向導航（兩者綜合的導航）。 頂部導航適合功能模組較少的系統，也可以給介面留出更多展示資訊的空間，但是拓展性差一些。如圖：
側邊導航適合功能模組稍多的系統，拓展性也好，邏輯呈現還比較清晰，也能夠增加較多的功能模組和子級選單，一般還會細分為樹結構、直接展示二級選單的以及滑鼠移入顯示二級選單三種，缺點就是如果每次操作都需要展開二級選單欄，就會增加了使用者的心理認知負擔和操作成本。如圖的導航。
頂部導航+側邊導航，這種適合於很複雜，功能模組很多的系統。如圖某銀行的系統導航。
在將整體布局規劃好之後，就需要梳理任務操作流程了，結合業務流程進行梳理，也就是將需要完成某任務的操作一步一步地規劃好，看怎麼樣能有效率地完成操作目標，邊梳理邊畫流程圖。將規劃好的步驟再合理有序地安排在乙個頁面內或幾個頁面內，同時畫頁面流程圖，標好每乙個頁面以及頁面與頁面之間的關係，如圖（**網路，畢竟專案圖不要隨便發布啊哈）。接著將頁面內容擺放在軟體介面上時這一步就會涉及到相關的設計法則了（這個有時間再總結，笑臉），也就是畫原型啦！所謂的線框圖。
以上就是我做這一兩個系統軟體後的一點點總結。
在網頁設計中如何排版
可以說，排版是ui設計中最難的部分。在這篇文章中，我會教你一些實用的技巧，你可以在你的專案中使用。我們應該記住，除了美學，我們還有使用者。你需要使用的字型要靈活。你的字型應該提供粗細不同的寬度。注意這些方面是很重要的，好的排版對讀者來說是 透明 的，但壞的就會讓人從顯示器上 尖叫 出來。了解什麼字型...
如何在網頁中引用CSS
如何在網頁中引用css?2006 11 21 17 42 如何在網頁中引用css?初學css的一般都對如何在網頁中使用css感到特別困惑，在這裡我把常用的方法介紹給大家，以解大家心頭之惑 1 使用embed 嵌入樣式單 排版樣式 即將css 直接插入每個頁面的html的 說明 css檔案的路徑用絕對...
如何在網頁中插入CSS
1.鏈入外部樣式表 上面這個例子表示瀏覽器從mystyle.css檔案中以文件格式讀出定義的樣式表。rel stylesheet 是指在頁面中使用這個外部的樣式表。type text css 是指檔案的型別是樣式表文字。href mystyle.css 是檔案所在的位置。media是選擇 型別，這些...