誰知道 Adob​​e CC 可以線框？

線框圖是設計任何用戶界面的重要步驟，無論是網站、應用程序還是軟件產品。 無需在視覺、顏色、排版、樣式和效果方面分心，您可以更專注於定義內容層次結構和用戶體驗。

製作低保真線框和原型將幫助您在流程中更早、更頻繁地進行測試和迭代。 低保真線框使設計師能夠更快地工作並開發出用戶喜歡的產品。

在野外有很多不同的線框圖工具可供選擇。 您選擇哪一個將取決於您的個人喜好和工作流程風格。

就像許多從印刷界轉向數字設計的設計師一樣，我是 Illustrator、InDesign 和 Photoshop 等 Adob​​e 應用程序的專家。 我可以隨時隨地高效、直觀地使用它們（即使有人在半夜叫醒我並拒絕給我一杯咖啡）。

毫不奇怪，這些多功能應用程序也成為了我用來進行 Web 和應用程序視覺設計的工具。 因此，為了使我的工作流程最有效，我也將它們用於線框圖。

對於每個項目，我通常通過在紙上或 iPad 或智能手機屏幕上（如果我不在辦公桌附近）做非常粗略的草圖來開始設計。 這些草圖可以集中我對所選概念的想法； 客戶可能永遠不會看到它們中的任何一個。 當我確信我的想法可行時，我開始使用線框圖。 我通常將 Adob​​e Illustrator 和 InDesign 結合使用：Illustrator 用於創建大部分 UI 工具包元素，而 InDesign 用於線框本身。

我將在本文後面逐步解釋如何將這些工具整合到您的線框圖工作流程中，但在詳細介紹之前，讓我向您展示使用 InDesign 作為主要線框圖工具的優缺點.

使用 Adob​​e InDesign 作為線框和原型製作工具的利弊

一段時間以來，Adobe InDesign 不僅是一個桌面出版應用程序，而且廣泛用於數字出版和 EPUB 創作。 它也是線框圖的合適工具還有幾個原因：

• 母版頁——您可以使用母版頁快速一致地應用全局設計元素，如導航、頁眉、頁腳等。 您可以根據需要創建任意數量的母版頁，最重要的是，一個母版可以基於另一個。
• 堅實的網格支持- 允許您輕鬆創建和應用不同類型的網格、補充列、水平和垂直參考線以創建模塊，以及子網格以提高複雜性和精度。
• 替代佈局- 為同一文件中的多個設備和方向啟用線框。
• CC Libraries – 生成一個包含不同可重用資源的庫，例如常用對象、顏色、字符和段落樣式。 在 InDesign、Illustrator 或 Photoshop 中或使用 Adob​​e Capture 移動應用程序（無論您喜歡哪一種）創建資源。
• 層- 提供在線框中有選擇地組織、分組、顯示/隱藏和鎖定/解鎖對象和內容的能力。 多頁 InDesign 文檔的每一頁都具有相同的層數和順序。 您對圖層所做的所有更改都會反映在所有頁面上，例如可見性、堆疊順序或刪除。
• 樣式和表格——通過使用 InDesign 樣式完全控製文本、對象和表格的外觀。 樣式可以相互繼承，提供在整個文檔中輕鬆級聯所需格式的能力。 創建和格式化表格以用作線框內容元素甚至是用於佈局目的的助手非常簡單。
• Typekit 集成——在高保真模型中，您可以使用與桌面同步的任何 Typekit 字體。
• 交互性和動畫——您可以使用 Adob​​e InDesign 的內置交互性和動畫功能來創建不同狀態的 Web 或應用程序設計元素以進行交互原型設計。 大多數人在為數字出版解決方案和固定版式 EPUB 導出創建雜誌時使用這些功能，但它們也適用於原型設計。
• 導出選項——InDesign 可以以多種格式導出您創建的線框和原型。 在大多數情況下，交互式 PDF 可能是您選擇的格式，但您也可以使用 Publish Online 功能將文檔轉換為交互式 HTML，可以在現代桌面和移動瀏覽器中查看。 遺憾的是，您對使用 Publish Online 的導出沒有太多控制權，並且導出的文件託管在 Adob​​e 服務器上。 您可以將原型 URL 分享給您的客戶或將其嵌入您的網站。 要獲得更多控制和直接導出到 HTML5，您可以使用 Ajar Productions 的 in5 擴展。

Adobe InDesign有許多優點可用作線框和原型製作工具，但它也有一些缺點：

• 缺少預定義的線框模板和元素——由於 InDesign 並不是一個線框工具，因此您必須自己創建和準備模板和對象資源。 （我將在本文後面向您展示如何處理此步驟。）好消息是，大部分工作只需完成一次，經過幾個小時的工作，您就可以開始您的工作了。 InDesign 線框圖。 此外，您可以從互聯網上下載大量資產和線框套件，因此無需自己繪製所有內容。
• 交互性和動畫功能有限——儘管您可以輕鬆連接頁面並添加一些交互性和動畫，但該過程有時可能需要很長時間。 一些簡單的交互工具不是很直觀。 如果您沒有使用過 InDesign 交互功能，則需要先克服一點學習曲線，然後才能有效地應用它們。
• InDesign 文檔不能直接導出為分層的 PSD 文件——如果您在 Adob​​e Photoshop 中進行視覺設計，並希望使用單獨的線框元素來構建您的設計，那麼您必須先將線框導出為 PDF。 然後您需要在 Illustrator 中打開 PDF 並再次將其導出為分層 PSD。 在 Mac 上工作的人還可以使用 Rob Day 編寫的免費腳本將 InDesign 文件保存為分層 PSD。

良好的線框準備是工作的一半

首先微調您的工作環境。 如果您在 Illustrator 和 InDesign 中還沒有為此類工作保存的工作區，請創建一個。 在 Illustrator 中，從預定義的 Web 工作區開始並根據自己的喜好對其進行調整：關閉您不經常使用的面板，確保打開您將使用的面板，然後根據您的工作風格安排它們。

完成後，通過選擇“窗口”>“工作區”>“新建工作區”來保存工作區... 在 InDesign 中使用 Digital Publishing 工作區作為啟動器執行相同的操作。

組裝線框/模型/原型套件

使用 Illustrator 和 InDesign 的高效線框工作流程需要您先投入一些時間來製作用戶界面資產套件。 自 Adob​​e Creative Cloud 推出以來，CC 庫是存儲所有 UI 工具包組件的最佳方式。

您可以創建一個或多個庫用於線框圖和原型設計。 例如，您可以為網站線框圖創建一個庫，為 iOS 應用程序創建另一個庫，為 Android 應用程序創建第三個庫，等等。

要創建 Adob​​e CC 庫，請打開“庫”面板並從面板的漢堡菜單中選擇“創建新庫”。 您可以在使用您的 Adob​​e ID 登錄的所有設備上的不同 Adob​​e 桌面或移動應用程序中製作和使用您放入庫中的資源。 這意味著您可以在 iPad 或 iPhone 上開始項目，在辦公室的台式計算機上繼續，並在家用筆記本電腦上使用所有設備上可用的相同資產進行最後一刻的更改。

如果您作為更大團隊的一員工作，則可以在團隊成員之間共享庫資產。 庫可以包含顏色、圖形、圖層樣式（僅限 Photoshop）以及段落和字符樣式。 您可以通過單擊 CC Library 面板底部的相應按鈕在庫中添加資源，並選擇相應的元素。 您還可以通過將圖形資源直接從畫板拖到“庫”面板來添加圖形資源。

庫中的資產按類別組織。 堅持良好的做法，並用有意義的名稱重命名每個資產。 庫是可搜索的，通過鍵入其名稱的開頭來查找資產將為您節省大量時間，尤其是當您的庫中有許多不同的項目時。 要更改資產的名稱，請雙擊它並輸入一個新名稱。

創建線框套件組件

儘管 Adob​​e InDesign 有一些與 Illustrator 非常相似的基本繪圖工具，但 Illustrator 是在線框中繪製各種元素的更好選擇。 根據經驗，在 Illustrator 中創建需要一些比基本幾何形狀更複雜的繪圖的所有套件元素。 在 InDesign 中創建包含您需要在佈局中更改的文本的更簡單元素，例如簡單的按鈕。

對於初學者，請列出您需要在線框中的所有元素，例如導航元素、頁面元素（包括圖像、視頻幀和文本框）、圖標、頭像、表單元素和所有其他界面元素。 完成列表後，您可以前往 Illustrator 和 InDesign 來創建這些元素。

首先為線框或模型套件組件創建一個新文檔。 仔細檢查您是否選擇了 Illustrator 中的 Web/設備配置文件或“新建文檔”對話框中的 Web/數字出版意圖。 這樣可以確保以像素為單位，並將顏色模式設置為 RGB。

使線框套件資產盡可能簡單，因為它們需要為它們所代表的內容提供快速的視覺提示，而不會過於詳細。 您應該使用非常有限的調色板，最好是幾個灰色陰影。 通過用較深的色調著色或賦予它們更高的對比度，在視覺上突出更重要的元素。

對於更高保真度的模型或原型，創建具有更詳細元素的 UI 工具包，這些元素使用每個項目各自的調色板。 要輕鬆訪問調色板，請將它們添加到 CC 庫中。

CC 庫中的 Adob​​e Illustrator 資源

您從 Illustrator 添加到庫的資源默認是鏈接的（自 Adob​​e CC 2015 起）。 這意味著當您在 Illustrator 中修改庫資源時，更改會反映在所有使用的實例中。 如果要將未鏈接的資產添加到文檔，請在從面板中拖動它的同時按 option/alt 鍵。

當您在 InDesign 中使用鏈接的 Illustrator 資源時，在正常模式下查看文檔時，它們的左上角會有一個小雲圖標。 它們也都列在“鏈接”面板中。 如果您在 Illustrator 中修改庫資源，InDesign 文檔中的更改將不會自動完成。 雲圖標將替換為修改後的鏈接感嘆號圖標，您必須更新這些鏈接。

您放置在 InDesign 文檔中的 InDesign 資源未鏈接。 這意味著您可以獨立於原始實例編輯實例，並且在修改原始資源時，這些更改不會反映在已放置到佈局中的資源上。

在創建線框時考慮這些屬性：當您認為需要全局修改和更新資源時，從 Illustrator 將資源添加到庫中，或者當您知道要單獨修改它們時從 InDesign 中添加它們。 請注意，您還可以在 Illustrator 中創建圖形，將它們複製/粘貼到 InDesign，然後根據需要進行修改，然後再將其作為 InDesign 資源添加到庫中。

如果您碰巧忘記了哪個圖形資源是由哪個應用程序創建的，請查看“庫”面板中每個項目的右側，同時將“顯示項目”用作列表。

Adobe InDesign 內容和副本的靈活性

為確保您可以輕鬆更改線框中的副本和排版，請在 InDesign 中創建文本容器。 InDesign 有一個很好的功能，可以用佔位符文本填充文本框。 繪製文本框時，右鍵單擊它並選擇Fill With Placeholder Text 。

像任何其他圖形元素一樣，通過拖動將文本框添加到 Adob​​e 庫中。 當您稍後將這些文本資源用作線框佈局的一部分時，您可以修改文本框以及線框中的內容。

也可以考慮在 InDesign 中製作按鈕 UI 元素。 要創建一個按鈕，請創建一個文本框架，輸入文本，然後使用對象 > 文本框架選項來定義插入間距。 通過從對齊下拉菜單中選擇所需的選項來調整框內文本的垂直對齊方式。

切換到 Auto-Size 選項卡並選擇適當的自動調整大小（可能是 Width Only）和一個方便的參考點。 如果您不想讓 InDesign 將文本分成多行，請選中“無換行符”選項。

使用現有資源

互聯網上有很多 Adob​​e Illustrator 線框圖和原型設計 UI 工具包，如果您想要現成的解決方案，您可以購買甚至免費下載。 也許您已經擁有可以從已完成項目中挖掘出來的元素。 打開這些文檔，根據需要調整任何先前創建的元素，然後將它們放入各自的庫中。

如果您正在為特定平台（例如 iOS 或 Android 應用程序）進行設計，請務必仔細閱讀他們的人機界面指南並使用適當的資產。 在您的工具包中擁有特定於各種平台的 UI 元素可能會很方便。

在開始實際的線框圖過程之前，不要過分關注試圖解釋庫中的每一個未來資產或狀態。 您可以稍後將資產添加到您的庫中，並隨時在其上進行構建。

創建 InDesign 線框模板

還有一個更重要的準備步驟：創建將用於製作線框的 InDesign 模板。 首先創建一個具有 Web 或數字出版意圖的新文檔，並為您設計的屏幕定義適當的頁面大小。

由於建議您使用某種網格來佈置線框元素，因此設置邊距並通過設置所需的列數和裝訂線空間來創建柱狀網格。 您可以稍後從“佈局”>“邊距和列”更改這些設置，並在“頁面”面板中選擇相應的母版頁（或多個頁面）。

如果您需要水平參考線和互補的垂直參考線，請手動創建它們或使用“佈局”>“創建參考線”創建額外的網格。 創建網格時，使用其中一種在線網格計算器工具（如 Gridulator）會很有幫助。

您還可以創建用於演示目的的其他模板，將設備模型用作線框的框架。 由於可以將一個 InDesign 文檔鏈接到另一個文檔，因此您可以在一個 InDesign 文檔中創建線框，然後將其放入另一個文檔中進行演示。

雖然一開始看起來很複雜，但這實際上是一個非常簡單有效的工作流程。 將實際線框保存在單獨的文檔中可以更輕鬆地繼續從批准的線框構建到精美的視覺設計。

創建演示就緒模板也很簡單，可以在其中放置線框、添加標籤和評論，並能夠向客戶展示您的最佳解決方案。 當您對線框文件進行修改時，只需像演示文檔中的任何其他鏈接一樣更新它，然後ta-daaa！ 所有更改也都在您的演示文稿中。

在“圖層”面板中，您可以為不同類型的內容準備單獨的圖層：用戶界面元素、交互功能、手勢、標籤和註釋。 如果您需要為特定項目添加更多圖層，您可以在線框製作過程中隨時輕鬆添加它們。

創建完成後，將模板另存為 InDesign.indt 模板文件。 保存所需的所有模板後，您終於可以開始高效地進行線框圖製作了。

構建線框

首先要做的事情是從母版頁開始。 從庫中拖動在項目的所有屏幕上相同的所有全局元素。 如果您正在設計一個網站，這些通常是帶有徽標、導航和頁腳的頁眉。 由於您可以創建多個母版頁並且它們可以相互繼承，因此您可以利用嵌套母版頁。

例如，根據項目，您可以為一個 UI 元素創建母版頁，例如模式或對話框彈出窗口，然後基於第一個母版創建新的母版，僅更改需要不同的元素。

您無法選擇、更改或刪除常規文檔頁面上的主元素，除非您在按住 Command/Control + Shift 的同時單擊它們以覆蓋主元素。 一旦您的元素被覆蓋，您可以更改其任何參數或將其從佈局中完全刪除。

請記住，即使您覆蓋元素，您尚未更改的參數仍將從主節點繼承。 例如，如果您通過更改元素的顏色來覆蓋元素，則它的大小不會改變，因為它仍然連接到主節點。 此外，如果您在母版頁上更改它，它也會在您之前覆蓋的元素上被修改。

在您的線框圖文檔中插入其他頁面時，請記住將它們基於它們各自的母版。 如果您需要更改佈局中已有頁面的母版，請在“頁面”面板中選擇它們，單擊鼠標右鍵，然後選擇“將母版應用於頁面”。 使用庫資源並使用智能參考線和對齊選項排列它們以創建最終的 UI 線框佈局。

如果您要為多個屏幕尺寸創建設計，請從“佈局”>“創建備用佈局”或“頁面”面板製作備用佈局。 您可以在創建備用佈局時使用流式佈局規則來自動採用從一種尺寸和方向到另一種尺寸和方向的頁面元素，或者您可以手動控制它們。 要應用和測試 Liquid 佈局規則，請使用頁面工具或打開面板 Window > Interactive > Liquid Layout。

添加交互性

Adobe InDesign 具有許多交互功能，您可以在創建線框或原型時利用這些功能。 您將包含哪些功能將取決於您的線框、原型或演示文稿所需的最終格式。

如果您要導出為 PDF，交互性將受到限制，但您至少可以使用超鏈接面板創建屏幕之間的鏈接。 選擇要作為鏈接的元素，然後單擊新建超鏈接圖標。 從鏈接到下拉菜單中，選擇頁面並輸入所需的頁碼。 對您希望充當屏幕之間鏈接的所有項目重複該操作。

您還可以向駐留在母版頁上的對象添加超鏈接，這可以節省實時時間。 在母版頁上創建一次鏈接，它們將適用於文檔的所有屏幕。

您可以從任何圖形、文本、圖像或元素組創建按鈕。 要從選定對象創建按鈕，請使用 Window > Interactive > Buttons and Forms 面板並單擊 Convert to Button 圖標。

按鈕可以為正常、翻轉和單擊外觀創建不同的狀態。 要為按鈕添加翻轉或單擊狀態，請在“按鈕”面板中單擊它們並編輯每個狀態的按鈕外觀。 要向按鈕添加操作，請單擊加號並從列表中選擇它。 考慮到 SWF/EPUB 下的操作不適用於交互式 PDF。

要創建彈出元素，請選擇顯示/隱藏按鈕和表單。 要隱藏按鈕直到觸發選中隱藏直到觸發選項。 您可以在交互式 PDF 中包含多狀態對象，但前提是您先將它們導出為 SWF，然後再將它們放回 InDesign 版面以進行 PDF 導出。 這個工作流程很乏味，並且無法在所有 PDF 閱讀器中正確查看 PDF，因此除非確實有必要，否則請盡量避免這樣做。

如果您想使用 InDesign CC 2015 Publish Online 功能將文檔轉換為 HTML 原型，您可以使用更多交互選項，例如動畫、多狀態對象和多按鈕操作，包括所有用於 SWF/EPUB 導出的選項。

您可以使用“動畫”面板添加簡單的動畫，並從下拉菜單中選擇一種內置預設並設置其屬性。 一個對像只能應用一個動畫，但如果您需要添加更多動畫，請將您的對象與一個空框分組，並在該新創建的對像上使用新動畫。

對於需要顯示不同狀態的 UI 元素，請創建多狀態對象。 為每個狀態創建一個單獨的對象。 對象可以是單個元素（圖片、文本框、圖形）或一組不同的元素。 打開 Window > Interactive > Object States 面板，選擇您為多狀態對象創建的所有對象，然後單擊面板底部的 New 按鈕。

創建多狀態對像後，您需要創建按鈕以從一種對象狀態移動到另一種狀態。 Go To Next State 或 Go To Previous State 操作通過 Go To State 操作顯示特定對象狀態。

如果你想在你的線框/原型中有一個可滾動的框架，最簡單的創建方法是使用 Ajar Productions 的通用滾動框架擴展。 下載並安裝擴展後，您可以將其用作 InDesign 面板。 對於可滾動的框架，您需要為容器創建內容以及一個框架。

可滾動內容可以是文本框、圖片或組合在一起的多個元素。 完成創建內容和容器框後，選擇內容並編輯 > 剪切。 然後選擇容器並使用“編輯”>“粘貼到”將內容粘貼到其中。 選擇容器並使用通用滾動框架，調整所需的滾動方向。

通過組合按鈕、多狀態對象、動畫和可滾動框架，您可以獲得豐富的交互體驗。 要在 InDesign 中測試交互性，請使用 EPUB 交互性預覽面板。 您可以預覽單個頁面或整個文檔。 根據需要放大預覽面板。

如果您還沒有使用過 Adob​​e InDesign 交互功能，請做好準備，因為一開始會有一些學習曲線。 但只要稍加練習和反複試驗，你就會很快掌握它們。

導出完成的文件

當您完成線框圖和演示文件的創建後，剩下的就是以最好的方式向客戶展示您的偉大想法。 為此，您需要以客戶可以預覽的格式導出線框。 儘管 InDesign 文件可以以多種格式導出，但如果測試功能性低保真或高保真原型，您可能會使用交互式 PDF 或 Publish Online 功能。 要另存為交互式 PDF，請從“導出”對話框的“格式”下拉菜單中選擇 Adob​​e PDF（交互式），然後根據需要調整屬性。 如果您想要包含交互式元素，請不要忘記勾選表單和媒體。 客戶可以在免費的 Adob​​e Reader 中查看 PDF 線框，並將他們的所有評論寫在同一個文件中。

您還可以使用從 InDesign 導出的 PDF 文檔來創建 InVision（或其他一些支持 PDF 的工具）原型。 如果您的標準原型製作工具（可能是 Marvel）無法導入 PDF，請將您的 InDesign 線框頁面導出為 JPEG 或 PNG 圖像。

要導出可在不同設備上的現代瀏覽器中看到的交互式 HTML 原型，請轉到文件 > 在線發布，或單擊應用程序欄中的在線發布按鈕。 文檔準備好在線發布並上傳後，您可以復製文檔 URL 以與利益相關者共享並開始審核過程。 您還可以在您的網站上嵌入已發布的原型。

Publish Online 功能的一個缺點是它對導出沒有任何額外的控制，並且文件始終存儲在 Adob​​e 的服務器上。 此外，它仍然是一個預覽功能，您無法確定 Adob​​e 將朝哪個方向開發它，或者即使它會停止使用。

導出線框/原型後，就可以開始測試、審查和迭代過程了。