【Infragistics教程】设计用户配置文件:如何使用Overrides(上)

{@@Genre} | 使用教程 | 编辑:不飞的小鸟 | 2018-10-11 09:53:54| 阅读 0 有用 (0) 评论 (0) 收藏


概述:本文向您展示如何使用像素完美的预定义Sketch Components和Indigo.Design模式来构建我们的UX概念。

【下载Infragistics Ultimate最新版本】

无论UI/UX设计人员亲自动手的软件项目类型:金融科技,区块链或电子商务的应用程序,几乎所有项目共享一个共同的屏幕。在这种情况下,我们谈论的是包含用户个人信息的应用程序的一部分———他的个人资料。我们资料应该包括图像,名称,密码和保存按钮,以及各种选项设置,但这种简单性仅适用于普通方案。当深入研究软件产品的具体业务案例时,用户配置文件屏幕可能会变得有点复杂。从内层到计费和验证 - 当涉及到个人资料屏幕时。

如果你必须设计一个组件丰富的用户配置文件案例,定义最佳用户体验场景并选择最佳组件来表示它。然后,在对初始原型迭代执行UX测试之后,更改和改进线框。需要尽快进行线框改进。本文向您展示如何使用像素完美的预定义Sketch Components和Indigo.Design模式来构建我们的UX概念。

具体操作:

准备开始使用Sketch:当我们使用Indigo.Design UI Kits时,我们不需要浪费时间考虑如何从空白画板开始,因为我们可以简单地插入一个最接近我们设计概念的模式。

overrides

overrides

下一步是根据我们的特定要求配置现有的用户配置文件模式。我将保留修改后的模式旁边的初始模式以跟踪更改:

overrides

这是选择不同的配置文件图像表示后的结果。

overrides

从位于“Avatar”下的选项中,我们可以快速定义右下角图标的背景颜色,图标类型,文本颜色,占位符文本等。

overrides

如您所见,初始模式提供了几个输入,第一个输入在焦点状态中表示,而其余输入处于填充状态。当然,如果我们想要改变状态,可以通过State选项轻松完成。

overrides

对于当前示例,我选择了空闲状态,因此我收到了该结果。在指定输入时,有用的是清楚地描述其行为。例如,注意密码是否输入错误或成功。这可以通过State下拉菜单再次设置。选择我们想要的状态后,输入完全垂直分布。

overrides

如果我们想要更改输入的布局以显示框而不是行,该怎么办?不用担心,只需改变它......

overrides

并且您会收到完美像素的盒装输入。毋庸置疑,如果您更喜欢这种布局,最好坚持使用所有其他输入。

overrides

如果您想要更复杂的输入,包括后缀,前缀或图标,该怎么办?我们的库提供了易于编辑的模板,涵盖了几种情况。让我们从初始条件开始。

overrides

然后,您可以看到如何使用前缀和后缀图标获取输入。

overrides

您可能只需要编辑可以编辑前缀和后缀颜色以及图标类型的图标。

如果我们想进一步使用另一个Component而不是和Input,我们将不得不分离我们的Profile模式并编辑较小的组件。

overrides

在编辑配置文件时,我们经常需要一个切换选项,所以让我们从Indigo库中添加和编辑这样一个组件。

overrides

由于模式已经分离,我建议在添加另一个选项后删除输入,以将其用作对齐的基点。

overrides

精确对齐后,您可以拉伸开关组件以适应偏移。

overrides

最后,只需删除不需要的输入或字段,然后编辑开关标签。

overrides

如果配置文件设置更复杂,我们可能需要添加一个项目,将用户导航到另一个屏幕或更深层次。如果我们遇到这种情况,我建议使用列表项。

首先,我们将它作为库中的组件添加,然后我们将它放在屏幕上的任何位置,并简单地调整其宽度以固定屏幕大小。最后,不要忘记更改标签。

overrides

我想补充一个重要的注意事项:不要在“替换”菜单中添加组件。我知道它非常诱人,因为它位于组件列表的顶部,但最好首先添加组件的初始形式,而不是从右侧选项面板配置它。

overrides

overrides

购买infragistic正版授权的朋友可以点击"咨询在线客服"哦~~~

本站文章除注明转载外,均为本站原创或翻译。
欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果
文章转载自:{@@Original} {@@OriginalPath}

用户评论: 您的宝贵经验,能为更多人带来帮助,登录后才能评论。
评论加载中...



    联系我们


    官方微信
    官方微博
    慧都科技有限公司 版权所有 Copyright 2003-<%:DateTime.Now.Year %> 渝ICP备12000582号 | 渝公网安备 50010702500608号