什麼是應用設計

移動應用設計同時綁定了用戶界面 （UI） 和用戶體驗 （UX）。設計人員負責确保應用程序看起來不錯，而開發人員則負責其功能。作為設計人員，您将負責應用程序的整體外觀，包括其配色方案，字體選擇以及人們可以用來與之交互的不同小部件。這意味着您必須保持簡單，以免在此過程中失去用戶。從哪裡開始？在開始時。

閱讀：- 面向初學者的十大移動應用程序設計課程。

1.打開您的Figma文件并為應用程序屏幕創建框架

首先，讓我們打開相同的Figma文件。然後點擊F選擇框架工具，然後從設計視圖右側的選項中選擇iPhone X。然後，讓我們更改此屏幕的背景顔色。

選擇該框架後，查看Figma窗口右側的檢查器。單擊顯示“背景”的白色方塊，然後選擇一種顔色。我們選擇了#FFFFFF這是在Figma默認顔色樣本的左下角找到的藍色陰影。

2. 創建形狀

然後單擊“R”到活動矩形工具。按住鼠标左鍵，然後将矩形設置為與框架相同的大小。您還可以從Figma應用程序的右上角調整矩形的大小，您可以在其中管理W&H以調整矩形的大小

3. 放置圖像

要放置圖像，您需要首先選擇形狀工具，然後選擇放置圖像選項或單擊“Ctrl Shift K”。然後從計算機浏覽圖像。然後單擊矩形以越過圖像。

4. 鍵入文本

通過單擊“T”，您可以激活文本工具。然後，您可以鍵入任何您想要的内容。至于現在，我正在輸入“歡迎來到光環”。然後，您可以從右側自定義文本大小，字體和顔色。在本教程中，我們将在 Semibold 系列上使用“Outfit”字體。此外，我們還使用了30px字體大小，并在文本上#0A0B0D顔色。

5. 潛台詞

現在讓我們輸入一些潛台詞。你可以寫任何你想寫的東西，但現在，我們将輸入“我們正在為你準備一些很棒的東西！現在，您可以從正确的大小自定義文本，如标題文本。我們在常規系列中使用“Poppins”字體。文本大小為 14px，顔色代碼為#8C8994。

6. 對齊方式

現在，我們将确保文本正确對齊，為此，我們将使用“Shift”鍵選擇兩個文本。然後轉到右上角并單擊中間對齊，以完美地對齊文本。

7.帶圖标的按鈕

現在讓我們制作按鈕。為此，再次按“R”。然後制作一個矩形。然後制作它（W 156）和（H 52）。現在轉到顔色部分并将其設置為白色（#FFFFFF）。之後，轉到應用程序右上角的角半徑，并将收音機增加到20。現在，您必須找到按鈕的一些圖标。您可以訪問此處下載免費圖标。然後下載并粘貼圖标在Figma上。

粘貼圖标後，減小圖标的大小并将其适合如下圖所示的形狀。然後使用“鍵入”工具并鍵入“Google”，在Medium Family上使用“Poppins”字體使文本大小為12px。将字體的顔色更改為 #071731。現在選擇圖标，文本和形狀，然後單擊“Ctrl G”以制作一組按鈕。然後按“Ctrl D”複制按鈕，并更改第二個按鈕圖标和文本。

8. 簡單的按鈕

現在讓我們再做一個長按鈕。為此，再次按“R”并制作另一個矩形（W 335）和（H 50）。現在再次轉到顔色部分并将其設置為白色（#FFFFFF）。現在，将半徑從應用的左上角增加到 100。現在按“T”到活動類型工具，然後鍵入“繼續發送電子郵件”，然後将顔色更改為#0A0B0D。确保字體在中為“裝備”14px。現在選擇形狀和文本，并使其像以前一樣中間對齊。現在按“Ctrl G”以組成組。

9. 另一個潛台詞

現在讓我們再做一個潛台詞。再次按“T”進入活動類型工具，然後鍵入“沒有帳戶？注冊”。将字體大小更改為14px，并在常規系列上使其成為“Outfit”。現在，我們将在此文本上使用雙色。為此，我們需要先選擇半文本，“沒有帳戶？”選擇此文本并将文本顔色更改為#676D7B然後選擇文本的另一半“注冊”并将顔色更改為#4877EF。

10. 最終對齊

現在我們需要确保我們的文本和按鈕正确對齊。為此，您需要選擇設計的所有增長。現在按“Alt”并将鼠标懸停在框架上。您可以看到設計元素的像素。确保所有元素都像圖像上一樣位于中間。然後從頂部開始制作100。

砰！設計完成

祝賀！你正确地完成了設計，你已經做得很好。這是我們所做的最終設計。完整的設計鍊接在這裡。

注意：不要擔心保存設計。Figma将自動保存您的設計。如果要導出設計，請選擇框架，然後單擊應用程序右下角的導出按鈕。

編輯：塵淵文化

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!