【下載Infragistics Ultimate最新版本】

無(wú)論UI/UX設(shè)計(jì)人員親自動(dòng)手的軟件項(xiàng)目類型：金融科技，區(qū)塊鏈或電子商務(wù)的應(yīng)用程序，幾乎所有項(xiàng)目共享一個(gè)共同的屏幕。在這種情況下，我們談?wù)摰氖前脩魝€(gè)人信息的應(yīng)用程序的一部分———他的個(gè)人資料。我們資料應(yīng)該包括圖像，名稱，密碼和保存按鈕，以及各種選項(xiàng)設(shè)置，但這種簡(jiǎn)單性僅適用于普通方案。當(dāng)深入研究軟件產(chǎn)品的具體業(yè)務(wù)案例時(shí)，用戶配置文件屏幕可能會(huì)變得有點(diǎn)復(fù)雜。從內(nèi)層到計(jì)費(fèi)和驗(yàn)證 - 當(dāng)涉及到個(gè)人資料屏幕時(shí)。

如果你必須設(shè)計(jì)一個(gè)組件豐富的用戶配置文件案例，定義最佳用戶體驗(yàn)場(chǎng)景并選擇最佳組件來(lái)表示它。然后，在對(duì)初始原型迭代執(zhí)行UX測(cè)試之后，更改和改進(jìn)線框。需要盡快進(jìn)行線框改進(jìn)。本文向您展示如何使用像素完美的預(yù)定義Sketch Components和Indigo.Design模式來(lái)構(gòu)建我們的UX概念。

具體操作：

準(zhǔn)備開(kāi)始使用Sketch:當(dāng)我們使用Indigo.Design UI Kits時(shí)，我們不需要浪費(fèi)時(shí)間考慮如何從空白畫板開(kāi)始，因?yàn)槲覀兛梢院?jiǎn)單地插入一個(gè)最接近我們?cè)O(shè)計(jì)概念的模式。

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

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

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

如您所見(jiàn)，初始模式提供了幾個(gè)輸入，第一個(gè)輸入在焦點(diǎn)狀態(tài)中表示，而其余輸入處于填充狀態(tài)。當(dāng)然，如果我們想要改變狀態(tài)，可以通過(guò)State選項(xiàng)輕松完成。

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

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

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

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

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

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

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

在編輯配置文件時(shí)，我們經(jīng)常需要一個(gè)切換選項(xiàng)，所以讓我們從Indigo庫(kù)中添加和編輯這樣一個(gè)組件。

由于模式已經(jīng)分離，我建議在添加另一個(gè)選項(xiàng)后刪除輸入，以將其用作對(duì)齊的基點(diǎn)。

精確對(duì)齊后，您可以拉伸開(kāi)關(guān)組件以適應(yīng)偏移。

最后，只需刪除不需要的輸入或字段，然后編輯開(kāi)關(guān)標(biāo)簽。

如果配置文件設(shè)置更復(fù)雜，我們可能需要添加一個(gè)項(xiàng)目，將用戶導(dǎo)航到另一個(gè)屏幕或更深層次。如果我們遇到這種情況，我建議使用列表項(xiàng)。

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

我想補(bǔ)充一個(gè)重要的注意事項(xiàng)：不要在“替換”菜單中添加組件。我知道它非常誘人，因?yàn)樗挥诮M件列表的頂部，但最好首先添加組件的初始形式，而不是從右側(cè)選項(xiàng)面板配置它。

購(gòu)買infragistic正版授權(quán)的朋友可以點(diǎn)擊""哦~~~