建立使用者介面的線框圖
Applies ToVisio Plan 2 Visio Professional 2024 Visio Professional 2021 Visio Professional 2019 Visio Professional 2016

Visio 專業版 和 Visio 方案 2中的線框範本是專為建立軟體應用程式的中畫質模型所設計。 範本可用於各種軟體類型,例如適用於 Windows、因特網和行動裝置的應用程式。

  1. 首先按兩下 [對話框] 樣板,然後將應用程式表單或對話框窗體拖曳到頁面上。 從此樣板新增其他圖形,以建立UI基本結構的大綱。

  2. 按兩下 [工具列] 樣板以新增功能表和其他應用程式圖示。

  3. 使用其他四個默認樣板上的圖形, (件、 游標通用圖示,以及 Web 和媒體圖示) 來填入 UI 並顯示應用程式的功能。

有些線框圖形具有可自定義的屬性。 以下是使用這些圖形的一些秘訣。

您想要做什麼?

Create 對話框

圖案

秘訣

應用程式表單

提供整個應用程式系結的容器。 右上角的連接點會保留適當的 Windows 按鈕圖形。

對話框表單

容器,用來保存對話框的圖示、控件和文字。 右上角的連接點會保留適當的 Windows 按鈕圖形。

Windows 鍵

使用這個圖形選取您要代表的按鈕:[關閉]、[最大化]、[最小化] 或 [還原 (通常位於應用程式和對話框窗體右上角的按鈕) 。 當您將圖案放到表單上時,您會選取您想要的按鈕,也可以以滑鼠右鍵按兩下圖案,然後按兩下 [按鈕類型 ],稍後再變更。

以滑鼠右鍵按兩下圖案,然後按兩下 [ 顯示作用中],即可變更按鈕的底紋。

狀態列

狀態列專案、圖示和分割器的容器。 狀態列專案是中長條,按兩下即可新增文字。 它們也有可新增圖示、進度列、滑桿或其他圖形的中心連接點。 狀態列圖示是含有中心連接點的短條,您可以將圖示從 [常用圖示 ] 或 [網络] 和 [媒體圖示 ] 拖放到其中。 您可以將狀態列分割線放置在其他圖形之間,以顯示顯示的部門。

捲軸

以滑鼠右鍵按兩下以指定為垂直或水準,並設定滑桿的長度 (拇指長度) 。 使用黃色控件控點,將滑桿沿著滾動條的長度移動。

重設大小抓取者

只能在滾動條和狀態列中使用。 對話框隨即出現,讓您可以在將它放到頁面上之後設定類型。

索引標籤

索引標籤專案的容器。 新增 [上] 索引標籤專案或 [底端] 索引標籤項目之後,您可以以滑鼠右鍵按兩下索引標籤專案,或按兩下藍色的 [插入] 箭號,當您將指標停留在索引標籤的一角時,顯示橘色醒目提示即可新增更多專案。

以滑鼠右鍵按兩下圖案,然後按兩下 [設定使用中索引卷標],即可變更索引標籤的底

選取索引標籤時,您可以使用 [容器工具] 底下的 [格式] 索引標籤來變更索引標籤樣式。

頁面頂端

Create 工具列

圖案

秘訣

功能表列

功能表欄專案的容器。 新增功能表欄專案后,以滑鼠右鍵按下專案以設定狀態 (例如已啟用或選取) 、類型 (一般或下拉式) ,以及是否要為圖示新增空間。 您也可以使用快捷方式功能表來新增更多功能表欄專案,也可以按下藍色的 [插入] 箭號。

下拉功能表

功能表項的容器。 新增功能表項之後,以滑鼠右鍵按下專案以設定狀態 (例如啟用或選取的) 、一般或無線電) 等 (類型,以及是否要將其設定為功能表寬度。 您也可以使用快捷方式功能表新增更多功能表項,或按下藍色的 [插入] 箭號。

您可以將下拉功能表連線至功能表欄專案,以顯示開啟的功能表。 功能表欄專案下方角落有連接點,可連線至下拉功能表的上方角落。

頁面頂端

新增控件至表單

圖案

秘訣

超連結

當您在頁面上放置超連結圖形時,會出現 [超連結] 對話框,讓您可以設定連結目標。

按鈕圖像

以滑鼠右鍵按鍵按鍵圖形,以設定按鈕 (的狀態或外觀,例如啟用或選取的) 。

清單方塊

清單框專案的容器。 以滑鼠右鍵按兩下 [清單] 方塊,設定清單 (的方向,例如從上到下或從左至右) 。 新增清單框項目之後,以滑鼠右鍵按兩下專案以設定狀態 (例如啟用或選取的) ,以及設定佔位元,例如,若要為專案新增額外的空間,例如新增圖示。 您也可以使用快捷方式功能表來新增更多清單框專案,也可以按下藍色的 [插入] 箭號。

選取 [列表] 方塊時,您可以使用 [容器工具] 底下的 [格式] 索引標籤來變更 [列表] 方塊樣式。

核取方塊

以滑鼠右鍵按兩下複選框以設定 [選擇 ] (,例如 [ 已選取 ] 或 [ 未選取 ]) ,以及 [ 狀態 ] (例如 [啟用 ] 或 [暫留] 留) 。

樹狀控件

樹狀結構控制專案的容器。 新增樹狀結構控制專案后,以滑鼠右鍵按兩下專案以控制縮排,並設定樹狀結構屬性,例如展開或折疊的狀態和佔位元空格。

您也可以使用快捷方式功能表來新增更多樹狀結構控件專案,或按下藍色的 [插入] 箭號。

選取樹狀結構控制項時,您可以使用 [容器工具] 底下的 [格式] 索引標籤來變更樹狀結構控制樣式。

語音郵件滑桿圖示

以滑鼠右鍵按兩下滑桿來設定數位和刻度標記位置等屬性。 使用黃色控件控點移動滑桿。

進度列

使用黃色控件控點移動進度指標。

行事曆

當您在頁面上放置行事歷時,會出現一個對話框,讓您可以設定月份和年份。 若要稍後變更設定,請以滑鼠右鍵按兩下圖案,然後按下 [ 設定]

頁面頂端

Need more help?

Want more options?

探索訂閱權益、瀏覽訓練課程、瞭解如何保護您的裝置等等。

社群可協助您詢問並回答問題、提供意見反應,以及聆聽來自具有豐富知識的專家意見。