adobe xd

在本教程中，您將學習如何在Adobe XD中創建財務應用程序設計，以及（更重要的是）如何輕松對其UI的各個部分進行動畫處理。

您將在本Adobe XD教程中學到什么

• 如何在Adobe XD中創建財務應用程序模型
• 如何創建和導入圖標
• 如何設置網格
• 如何保存Adobe XD組件
• 如何創建重復網格
• 如何創建交互式原型

有關如何調整或改進最終財務UI設計的更多啟發，您可以在GraphicRiver中找到大量資源。

您將要創造的

我們將設計此UI的深色和淺色變體。 智能手機應用程序通常根據用戶的喜好來適應暗或亮模式，因此這是一個有用的考慮。 這是一個視頻，演示我們將要創建的動畫（深色UI）：

在稍后的過程中，我將向您展示light模式。

您將需要什么

您將需要以下資源才能完成此財務應用程序UI設計：

• San Francisco Compact Display字體
• 金融與銀行業圖標

1.如何將UI模式添加到XD

第1步

讓我們從紙上的基本草圖開始此金融應用程序設計。 在紙上，您可以輕松地建立應用程序設計的主要組成部分以及主要功能的整體比例和位置。 紙質草圖是數字線框的理想起點。

第2步

讓我們打開Adobe XD，然后選擇iPhone XR / XS Max / 11（414 x 896）模板來創建414 x 896畫板。

第三步

現在讓我們開始在線框上的工作。 查看您的紙質草圖，并從應用程序設計的四個主要部分（或模式）開始。

選擇矩形工具（R），然后創建414 x 70像素的形狀。 使用智能向導，如下圖所示放置形狀，然后轉到“ 屬性”檢查器。 使用該復選框禁用現有的邊框 ，然后單擊“很好地填充顏色”并將顏色更改為＃646E83 。

在此初始階段，不要浪費時間對對象進行樣式化或添加太多文本內容。 目前，您唯一需要擔心的是應用程序UI設計的總體結構。 確定各部分之間的比例和間距。

第4步

確保“ 矩形”工具（R）仍處于活動狀態，并創建414 x 150像素的形狀。 如第一張圖所示放置它。

使用相同的工具，創建一個414 x 83 px的形狀并將其放置在第二個圖像中，并創建一個414 x 446 px的形狀并將其放置在第二個圖像中。

第5步

這些將是您的財務UI設計的主要組成部分。

在頂部，您擁有經典的導航欄，您將在其中添加應用程序的控制按鈕。 在導航欄下方，您具有卡片欄，您將在其中添加可用的卡片以及每張卡片的相關信息。 在類別欄中，您將添加一行交易類別，而交易欄中將用于列出所選卡的交易歷史記錄。

2.如何將控件添加到財務應用程序設計中

第1步

重新查看您的紙本草圖，然后將控件添加到此應用程序UI設計中。 讓我們從導航欄開始。 選擇矩形工具（R）并按住Shift鍵，輕松創建一個20像素的正方形。 如下圖所示放置它，禁用邊框并將填充顏色設置為＃646E83 。 對于將用作控件的其余對象，請使用相同的外觀屬性。

確保此正方形保持選中狀態。 按住Option鍵和Shift鍵，然后將所選內容的副本向右拖動，如第二幅圖像所示。 使用智能向導將此新形狀完全放置在第二個圖像中。

第2步

向下移動到卡片欄的左上角。 選擇矩形工具（R），并記得按住Shift鍵以輕松創建30像素的正方形。 如第一張圖所示放置它。

使用相同的工具，創建一個240 x 150 px的形狀并將其放置在第二個圖像中所示的位置。

第三步

專注于該類別欄的左側。 使用矩形工具（R）創建一個60像素的正方形并將其放置在第一個圖像中。

向下移動到交易欄的右側。 使用相同的工具，創建一個30像素的正方形并將其放置，如第二個圖像所示。

第4步

繼續關注交易欄，并確保“ 矩形”工具（R）仍處于活動狀態。 創建一個80 x 30像素的形狀并將其放置在第一個圖像中，然后創建一個60像素的正方形并將其放置在第二個圖像中。

第5步

您的應用程序模型已完成。 這些形狀中的一些將被樣式化，并在最終的應用程序UI設計中使用，一些將僅用作要添加的按鈕和圖標的指南，而一些將被刪除。

3.如何樣式化此金融應用程序設計的導航欄

第1步

我們將為整個應用程序設計選擇深色樣式，并且僅對最重要的功能使用鮮艷的顏色。 主要組件將使用不同的黑色陰影來巧妙地分隔最重要的部分，而不會太過費力。 我們將所有圖標和文本都使用白色，以形成良好的對比，并使每個元素盡可能清晰。 最后，您將獲得此應用程序設計的黑暗模式。 在最后的步驟中，您將學習如何輕松調整應用程序設計并將整體設計從暗模式切換到亮模式。

讓我們從更改畫板的顏色開始。 單擊畫板上方的名稱，然后轉到屬性檢查器。 單擊“ 填滿顏色”，然后將顏色更改為＃0A0E17 。

第2步

將焦點放在導航欄的左方，然后創建一個小箭頭圖標。 首先，您需要設置網格以使其更易于創建像素完美的對象。 單擊畫板的名稱，然后轉到“ 屬性”檢查器。

專注于“ 網格”部分，然后單擊該復選框以啟用網格。 從下拉菜單中選擇正方形 ，在輸入框中輸入1 ，然后單擊顏色。 將顏色更改為＃C7C7C7 ，不要忘記將不透明度降低到50％ 。

選擇鋼筆工具（P）并創建下圖所示的箭頭路徑。 確保它保持選中狀態，然后轉到“ 屬性”檢查器。 禁用“填充”，將“ 邊框”顏色更改為白色，將“ 大小”增加到4，并且不要忘記檢查“ 圓形帽”和“ 圓形連接”按鈕。

第三步

從導航欄移到右側的正方形。 選擇“ 矩形”工具（R） ，創建一個20 x 4 px的形狀并將其放置在第一個圖像中。 確保它保持選中狀態，并集中在“ 屬性”檢查器上。 禁用邊框 ，將填充顏色更改為白色（ #FFFFFF ），并將“ 轉角半徑”設置為2 。

按住Option鍵和Shift鍵，然后簡單地將此圓角矩形的副本拖到原始形狀下方，如第二幅圖所示。 在兩個圓角矩形之間添加第三個副本，將其寬度減小一半并將其放置，如第三個圖像所示。

第4步

選擇位于導航欄按鈕后面的黑色方塊，然后將其刪除。

選擇“ 文字”工具（T） ，在畫板上單擊并添加“帳戶”文字。 如下圖所示放置它，確保它保持選中狀態，然后轉到“ 屬性”檢查器。 將顏色設置為白色。 選擇San Francisco Compact Display字體 ，將“ 樣式”更改為“ 粗體” ，將“ 對齊方式”更改為“ 居中” ，然后將“ 大小”設置為20 。

我們將在Apple的所有文本中使用這種系統字體，因為它提供了廣泛的樣式和語言，使您可以在每個點大小上獲得最佳的可讀性，或在需要時輕松調整文本內容。

4.如何樣式化此金融應用程序設計的卡片欄

第1步

選擇用于劃分卡片欄的矩形，然后將其刪除。

移至用于劃分導航欄的形狀，然后選擇它。 將其高度增加到190 px ，將其放置在第二個圖像中，并將“ 填充”顏色更改為＃1C2230 。

第2步

從卡片欄中選擇30像素的正方形。 轉到屬性檢查器，將“ 填充”顏色更改為黑色（ ＃000000 ）并將“ 角半徑”設置為10 。

第三步

繼續關注您的黑色圓角正方形。 選擇矩形工具（R） ，創建一個2 x 14 px的形狀并將其放置在第一個圖像中。

確保選擇了該細矩形并復制它（ Command-D ）。 選擇副本，轉到“ 屬性”檢查器，然后將“ 旋轉角度”設置為90度 。

第4步

從卡片欄中選擇矩形，然后轉到“ 屬性”檢查器。 將“ 轉角半徑”設置為10 ，然后單擊“ 填充顏色”。 將填充類型從純色更改為線性漸變 ，然后將焦點放在漸變滑塊上。

選擇左側的顏色并將其更改為＃2E64F8 ，然后選擇右側的顏色并將其更改為＃0C23AC 。 返回畫板并移動漸變滑塊，如第一幅圖所示。

第5步

選擇文本工具（T），然后添加“借記卡”文本。 如下圖所示放置它，確保它保持選中狀態，然后轉到“ 屬性”檢查器。 將顏色設置為白色。 選擇San Francisco Compact Display字體 ，將“ 樣式”更改為“ 淺” ，將“ 路線”更改為“ 左” ，然后將“ 大小”設置為10 。

使用相同的工具，添加下面顯示的其余文本，并使用下圖所示的文本屬性。

第6步

選擇一個藍色的圓角矩形及其上方的所有文本。 使用Command-G鍵盤快捷鍵將這些選定的對象分組。

轉到“ 圖層”面板，并將這個新創建的組重命名為“ Card Blue” 。

步驟7

確保已選擇“ Card Blue”組，然后將其復制（ Command-D ）。 移至“ 層”面板，然后將此新組重命名為“ Card Purple” 。

從這個新組中選擇圓角矩形，然后將現有的線性漸變替換為下圖所示的矩形。

步驟8

繼續關注“紫色卡片”組，并調整文本內容，如第一個圖像所示。 完成后，按住Shift鍵，然后將“紫色卡片”組拖到右側，如第二幅圖像所示。

5.如何樣式化此金融應用程序設計的類別欄

第1步

下載這些“ 財務和銀行業務”圖標 ，并將以下所示的四個圖標拖到您的應用程序用戶界面設計中。 將這些形狀縮放為20 px，然后將“ 填充顏色”更改為白色。

逐個選擇每個圖標，打開“ 資產”面板，然后將圖標保存在“ 組件”面板中。 命名這些組件，如下圖所示。

第2步

將焦點放在類別欄上，選擇一個黑色正方形，然后轉到“ 屬性”檢查器。 將“ 轉角半徑”設置為10并將“ 填充”顏色更改為＃1C2230 。

選擇“ 文本”工具（T），然后添加“全部”文本。 如下圖所示放置它，確保它保持選中狀態，然后轉到“ 屬性”檢查器。 將顏色設置為白色。 選擇San Francisco Compact Display字體 ，將“ 樣式”更改為“ 淺” ，將“ 路線”更改為“ 居中” ，然后將“ 大小”設置為12 。

第三步

選擇矩形工具（R）并創建一個9像素的正方形。 將其填充為白色，并將“ 轉角半徑”設置為2 。 將此形狀的副本拖到右側，并在副本和原始副本之間留出2 px的間隙，如第二幅圖像所示。 復制這兩個形狀，將副本向下拖動，并記住在副本和原件之間留出2 px的間隙。

一旦您完成后，選擇所有四個形狀和從屬性檢查器中單擊聯盟按鈕。 放置新對象，如第三張圖片所示。

第4步

選擇第一個圖像中突出顯示的三個對象，轉到“ 資產”面板，然后將選擇另存為新組件。 將其命名為“ Category” 。

第5步

確保仍然選擇了新保存的組件，然后從“ 屬性”檢查器中單擊“ 重復網格”按鈕。 單擊該右手柄并將其拖動到右側，以添加組件的四個副本，如第一幅圖像所示。

將光標移動到組件之間的任意位置，然后單擊并拖動以將組件之間的整體間距減小到19 px ，如第二幅圖像所示。

第6步

專注于重復網格中的第二個組件。 雙擊圖標兩次以將其隔離，然后將其刪除。 從“ 資產”面板中拖動“家庭”組件，然后將其精確放置在第二個圖像中所示的位置。 對重復網格中的下一個組件重復此技術。

步驟7

繼續專注于重復網格并調整文本，如第一幅圖像所示。 完成后，選擇用于劃分類別欄的矩形并將其刪除。

6.如何樣式化此Finance App Design的交易欄

第1步

選擇“ 文本”工具（T），然后添加“ TRANSACTIONS”文本。 如下圖所示放置它，確保它保持選中狀態，然后轉到“ 屬性”檢查器。 將顏色設置為白色。 選擇San Francisco Compact Display字體 ，將“ 樣式”更改為“半粗體” ，將“ 對齊方式”更改為“ 左” ，然后將“ 大小”設置為15 。

第2步

將焦點放在交易欄的右上角，然后選擇該正方形。 轉到屬性檢查器，將“ 轉角半徑”設置為5并將“ 填充”顏色更改為＃1C2230 。

第三步

繼續關注上一步中編輯的形狀。 選擇矩形工具（R） ，創建一個10 x 2 px的形狀，并用白色填充。 添加此矩形的兩個副本，并將其拖動到原始矩形下方，如第二幅圖像所示。

第4步

從交易欄中選擇另一個正方形，將“ 轉角半徑”設置為10并將“ 填充顏色”更改為＃1C2230 。

從交易欄中選擇矩形，將“ 轉角半徑”設置為15并將“ 填充顏色”更改為＃FD7074 。

第5步

選擇“ 文本”工具（T） ，添加“電”文本并將其放置在第一張圖像中。 將顏色設置為白色。 選擇San Francisco Compact Display字體 ，將“ 樣式”更改為“ 中” ，將“ 對齊方式”更改為“ 左” ，然后將“ 大小”設置為20 。

使用相同的工具，添加文本“ 13 Jan 08:45 PM” ，并將其放置在第二個圖像中。 將顏色設置為白色，并將不透明度降低到50％。 選擇San Francisco Compact Display字體 ，將“ 樣式”更改為“ 淺” ，將“ 路線”更改為“ 左” ，然后將“ 大小”設置為14 。

最后，添加“ $ 29.99”文本并將其放置在第三張圖片中。 將顏色設置為＃1C2230 。 選擇San Francisco Mono字體 ，將樣式更改為粗體 ，將對齊方式更改為居中 ，然后將大小設置為14 。

第6步

添加家庭組件的一個實例并將其放置，如第一個圖像所示。 選擇第二個圖像中突出顯示的對象，并將其另存為新組件。 將其命名為“交易” 。

步驟7

確保仍然選擇了新保存的組件，然后從“ 屬性”檢查器中單擊“ 重復網格”按鈕。 單擊該底部手柄并將其向下拖動以添加組件的四個副本。 如圖所示，將組件之間的間距減小到20 px 。

從每個組件副本中隔離圖標，然后將其替換為第二個圖像中顯示的圖標。

步驟8

從底部紅色形狀中選擇第二個，并將其“ 填充”顏色更改為＃00b980 。 調整文本信息，如下圖所示。

步驟9

選擇用于劃分交易欄的矩形，然后將“ 填充”顏色更改為＃0A0E17 。 選擇此形狀以及組成交易欄的其余對象并將其分組（ Command-G ）。 轉到“ 圖層”面板，然后將此組命名為“ Transactions Blue” 。

第10步

選擇矩形工具（R），然后創建414 x 5像素的形狀。 用＃2E64F8填充此細矩形，并將其放置，如下圖所示。

7.如何遮罩對象并乘以畫板

第1步

轉到“ 層”面板，選擇“藍色卡片”和“紫色卡片”組，然后將它們分組 （ Command-G ）。 將此新名稱命名為“ Cards” 。

第2步

選擇“ 矩形”工具 ，創建一個344 x 150 px的形狀，并將其放置在第一個圖像中所示的位置。 這種新形狀的外觀屬性并不重要。 將其與“卡片”組一起選擇，然后轉到“ 對象”>“具有形狀的蒙版（Shift-Command-M）” 。 這將掩蓋您的“卡片”組，僅使掩膜矩形所覆蓋的組的內容保持可見。

這不會改變您的設計外觀，但是一旦我們采用了原型制作方式，您就會了解其用法。 一旦將此組變成水平滑動菜單，遮罩將使滑動效果僅在被遮罩的區域中可見。

第三步

選擇您的畫板（單擊名稱）并復制它（ Command-D ）。 在兩個畫板之間留出200像素的間距。 專注于新的畫板。 選擇該細小的藍色矩形，然后將“ 填充顏色”更改為＃772CCB 。

轉到“ 圖層”面板并打開被遮罩的組。 選擇該“卡片”組，然后移至畫板。 按住Shift鍵，然后將您的選擇拖到左側。 確保在選擇的右邊緣和畫板的右邊緣之間留出20 px的間隙，如第二幅圖所示。 返回到“層”面板，并將“事務藍色”組重命名為“事務紫色” 。

8，如何將您的財務UI設計變成交互式原型

第1步

從設計模式切換到原型模式 。

轉到“ 圖層”面板，然后從第一個畫板中選擇“卡片”組。 返回您的畫板，單擊該藍色箭頭按鈕，然后將其拖動到第二個畫板上方即可連接兩個畫板。 轉到屬性檢查器以設置交互行為。 將“ 拖動”設置為觸發器，然后選擇“ 自動動畫” 類型，并將“ 緩動”設置為“ 無” 。

第2步

從第二層中選擇“卡片”組，并將其與第一個畫板連接。 保持與上一步相同的交互行為。

第三步

選擇第一個artbaord，然后將焦點放在“ 圖層”面板上。 從“卡片”組中僅選擇“紫色 卡片”組，并將其與第二個畫板連接。 轉到屬性檢查器來設置此新交互的行為。 將Tap設置為觸發器，然后選擇Auto-Animate 對于類型，將“ 緩動”設置為“ 無” ，并將“ 持續時間”更改為0.4 。

選擇第二個artbaord，然后將焦點放在“ 圖層”面板上。 從“卡片”組中僅選擇“卡片藍色”組，并將其與第一個畫板連接。

第4步

選擇“藍色交易”組，將其復制（ Command-C ），然后將副本粘貼到第二個畫板內的“紫色交易”組頂部。 復制“紫色交易”組（可以從“ 圖層”面板中輕松選擇），然后將副本粘貼到“藍色交易”組頂部的第一個Arboard中。

選擇在此步驟中添加的兩個組副本，并將它們拖動到artbards下方500 px 。 將這些組放在畫板之外將為“ Transactions Blue”和“ Transactions Purple”組在屏幕動畫中內外添加漂亮的幻燈片。

現在，您可以單擊“ 預覽”按鈕來查看原型。

第5步

您可以輕松地將財務UI設計的樣式從暗模式更改為亮模式。 您要做的就是更改用于文本，圖標和空白區域的顏色。

從文本和圖標開始，然后將白色替換為＃2A2B90 。 移至畫板顏色并將其更改為白色。 對用作“事務”組的背景的矩形以及該加號圖標后面的圓角正方形執行相同的操作。 最后，將導航欄的顏色更改為＃F0F3FD 。 對封裝圖標的圓角正方形執行相同的操作。

你完成了！

這是它在燈光模式下的外觀。 我希望您喜歡本教程，并可以將這些技術應用到將來的應用程序UI設計項目中。 請不要在評論部分分享您的最終結果。

隨意調整最終設計，使其成為您自己的。 您可以在GraphicRiver上找到一些靈感的重要來源，并提供有趣的解決方案來改善您的財務UI設計。

想了解更多？

翻譯自: https://webdesign.tutsplus.com/articles/finance-app-ui-design-in-adobe-xd--cms-34554

adobe xd

總結

以上是生活随笔為你收集整理的adobe xd_如何在Adobe XD中创建Finance App UI设计的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。