【下載Infragistics Ultimate最新版本】

無論UI/UX設計人員親自動手的軟件項目類型：金融科技，區塊鏈或電子商務的應用程序，幾乎所有項目共享一個共同的屏幕。在這種情況下，我們談論的是包含用戶個人信息的應用程序的一部分———他的個人資料。我們資料應該包括圖像，名稱，密碼和保存按鈕，以及各種選項設置，但這種簡單性僅適用于普通方案。當深入研究軟件產品的具體業務案例時，用戶配置文件屏幕可能會變得有點復雜。從內層到計費和驗證 - 當涉及到個人資料屏幕時。

如果你必須設計一個組件豐富的用戶配置文件案例，定義最佳用戶體驗場景并選擇最佳組件來表示它。然后，在對初始原型迭代執行UX測試之后，更改和改進線框。需要盡快進行線框改進。本文向您展示如何使用像素完美的預定義Sketch Components和Indigo.Design模式來構建我們的UX概念。

具體操作：

準備開始使用Sketch:當我們使用Indigo.Design UI Kits時，我們不需要浪費時間考慮如何從空白畫板開始，因為我們可以簡單地插入一個最接近我們設計概念的模式。

下一步是根據我們的特定要求配置現有的用戶配置文件模式。我將保留修改后的模式旁邊的初始模式以跟蹤更改：

這是選擇不同的配置文件圖像表示后的結果。

從位于“Avatar”下的選項中，我們可以快速定義右下角圖標的背景顏色，圖標類型，文本顏色，占位符文本等。

如您所見，初始模式提供了幾個輸入，第一個輸入在焦點狀態中表示，而其余輸入處于填充狀態。當然，如果我們想要改變狀態，可以通過State選項輕松完成。

對于當前示例，我選擇了空閑狀態，因此我收到了該結果。在指定輸入時，有用的是清楚地描述其行為。例如，注意密碼是否輸入錯誤或成功。這可以通過State下拉菜單再次設置。選擇我們想要的狀態后，輸入完全垂直分布。

如果我們想要更改輸入的布局以顯示框而不是行，該怎么辦？不用擔心，只需改變它......

并且您會收到完美像素的盒裝輸入。毋庸置疑，如果您更喜歡這種布局，最好堅持使用所有其他輸入。

如果您想要更復雜的輸入，包括后綴，前綴或圖標，該怎么辦？我們的庫提供了易于編輯的模板，涵蓋了幾種情況。讓我們從初始條件開始。

然后，您可以看到如何使用前綴和后綴圖標獲取輸入。

您可能只需要編輯可以編輯前綴和后綴顏色以及圖標類型的圖標。

如果我們想進一步使用另一個Component而不是和Input，我們將不得不分離我們的Profile模式并編輯較小的組件。

在編輯配置文件時，我們經常需要一個切換選項，所以讓我們從Indigo庫中添加和編輯這樣一個組件。

由于模式已經分離，我建議在添加另一個選項后刪除輸入，以將其用作對齊的基點。

精確對齊后，您可以拉伸開關組件以適應偏移。

最后，只需刪除不需要的輸入或字段，然后編輯開關標簽。

如果配置文件設置更復雜，我們可能需要添加一個項目，將用戶導航到另一個屏幕或更深層次。如果我們遇到這種情況，我建議使用列表項。

首先，我們將它作為庫中的組件添加，然后我們將它放在屏幕上的任何位置，并簡單地調整其寬度以固定屏幕大小。最后，不要忘記更改標簽。

我想補充一個重要的注意事項：不要在“替換”菜單中添加組件。我知道它非常誘人，因為它位于組件列表的頂部，但最好首先添加組件的初始形式，而不是從右側選項面板配置它。

購買infragistic正版授權的朋友可以點擊""哦~~~