使用qt设计登录界面初学者_初学者素描：设计登录表单界面

使用qt设计登录界面初学者

由Bohemian Coding的好伙伴制作的Sketch是界面设计的出色程序。 本入门级教程将向您介绍使用Sketch进行设计。 您将不需要任何程序经验，只需要一些空闲时间来学习新知识。

我将向您展示如何设置简单的画板，如何使用基本工具，布尔操作，“检查器”面板和“层”列表创建形状。 我们将了解如何更改属性，组织图层，导入图像以及Sketch Designer工作流程的其他有用方面。

1.设置素描画板

第1步

让我们开始创建一个新文档。 您已经打开了Sketch 3吗？ 好的，这就是您需要做的！ 让我解释; 默认情况下，Sketch为您提供了一个可以在其上工作的无限画布。 您可以开始创建元素，而不必担心空间不足。

让我们更进一步，创建一个画板。 画板可让您在Sketch的无限画布上创建固定框架。

要创建新的画板，请从工具栏或主菜单转到“ 插入”>“画板” （A） 。   在Sketch的画布内单击并拖动。 您会注意到，Sketch在此过程中如何显示宽度和高度值。 创建一个600 x 800像素画板。

提示：我们可以根据需要创建任意数量的画板。 我们还可以在屏幕左侧的“ 图层列表”上更改画板名称，或使用右侧的“ 检查器”面板更改其位置和尺寸。 选择画板时，通过单击Supr或Delete键来删除画板。

例如，让我们使用检查器将画板位置更改为X = 0 Y = 0 。 或者，您可以简单地将画板拖动到该位置。

提示 ：转到“ 视图”>“显示网格”以激活Sketch随附的默认网格 。 它将帮助您精确定位对象。

第2步

现在，我们将更改画板的颜色。 这样做将有助于以下步骤。 选择您的画板，然后查看“ 检查器”面板。 选中“ 背景颜色”选项，然后单击右侧的色样。 将出现一个选色器，向我们显示不同的颜色选项和属性。 选择您想要的颜色。 选择哪种颜色并不重要，但是在这种情况下，我们将选择暖灰色。

画板制作完成，您就可以开始使用基本布局了！

2.设计基础

第1步

转到“ 插入”>“形状”>“矩形（R）”。 在画板上创建一个360 x 500像素的矩形。 与创建画板一样，您可以绘制一个随机矩形并通过“ 检查器”面板调整其属性。 显示网格使事情变得更轻松！

第2步

选择矩形后，查看“ 检查器”面板。 取消选中该形状的边框。 单击“ 填充”样本并将其设置为白色 。 我们也可以在“ 检查器”面板中设置圆角； 向右移动“ 半径”滑块或在输入字段中键入10 。

第三步

使用插入>形状>椭圆形创建40 x 40像素的圆圈。 请记住，您可以绘制一个随机圆并使用检查器更改其属性。 现在，将其移动到矩形的中间顶部。 如果需要放大，请使用工具 栏上的“ 缩放”工具 。

第4步

创建另一个圆，这次为20 x 20像素。 将其在中间的第一个圆圈内对齐。 移动它时，您会看到一些智能指南来帮助您对齐对象。

实际上，要确保内容正确对齐，请按住键盘上的选项（⌥）键。 草图将帮助您获得精确的像素度量，以显示对象之间的距离。 例如：

这是很大的帮助！ 谢谢，素描！

第4步

现在，我们将把两个圆形对象变成单个“环”。 直接或通过“ 图层列表”选择两个圆圈。 转到工具栏 ，然后单击“ 减去” 。

现在，我们有了一个新的复杂形状：

选择此新对象，然后选择矩形。 现在单击“ 联合”以获取最终形状。

我们在这里做了什么？ 当我们需要非标准形状时，我们必须自己创建它。 我们可以使用钢笔工具绘制它，但是通常很容易将复杂的形状分解为更标准的形状。 我们可以为此使用布尔运算 。 Sketch带有union ， 减去 ， intersect和different布尔运算，以获取子路径生成的不同复杂形状。

这些选项是非破坏性操作，因此我们可以通过在“ 图层”列表中选择子路径（基本形状）属性来轻松更改它们。 当画布中的形状具有多个子路径时，请查看“层”列表。 您将在左侧看到显示箭头，如果展开该箭头，则会看到形状的子路径列表。 如果要更改每个子路径，可以在右侧分别选择一个布尔运算。

第5步

我们的基本形状即将完成！ 确保您的形状保持选中状态，查看“ 检查器”面板，选择“阴影”并按如下所示设置其属性： 颜色> R = 38 G = 30 B = 10 Alpha = 50 ，X = 0，Y = 20，模糊= 20和点差= 0。 最后，您的形状应如下所示：

3.登录元素

没有输入字段和按钮，登录表单将一无所获，所以让我们做一些吧！

提示：您可以锁定您的主要形状，以避免错误和意外运动。 选择它，然后转到“ 排列”>“锁定层”。 层列表上的一个小挂锁会通知您哪些对象已锁定。

第1步

使用矩形工具（R）创建280 x 50px的形状，删除边框，将填充颜色设置为R = 239 G = 87 B = 46， Radius = 2并将其放置，如下图所示。

第2步

创建另一个280 x 70px形状，将其填充为白色， radius = 2 ，将边框粗细设置为1并将边框颜色设置为R = 234 G = 234 B = 234 。 将其移动到橙色矩形的顶部，将其向上拖动10px。 复制此形状（ Control-D ），选择副本并将其再向上拖动80px 。

第三步

现在，使用矩形工具（R）创建一个20 x 20像素的正方形。 将其填充为白色并设置Radius = 2 ， 边框厚度 = 1并将边框颜色设置为R = 234 G = 234 B = 234 。 将其移动到橙色矩形下方10px 。 您的画板应如下所示：

第4步

好的，现在我们将为登录表单添加一些用于标签和占位符的文本元素，以增加其趣味性。 选择“ 文本”工具（T） ，然后可以单击画布中的任意位置以插入文本层。 您将看到正在添加和选择的文本，因此您可以立即开始输入。 您会注意到，检查器已更改为向您显示所有适用于文本的属性。

提示：您也可以单击并拖动以创建固定大小的文本框。 当文本太大而无法放入框内时，它将向下调整大小，而普通的文本框会增加其宽度以适合内容。

添加“ USERNAME”文本，然后转到“ 检查器”面板以设置其属性。 使用Montserrat字体 ， Weight = Regular ， Size = 11 ， Spacing = 1 ， Color> R = 204 G = 204 B = 204。

重新选择文字工具（T）并添加“ Armando”（或任何您想要的）输入文本。 这次使用这些值设置其属性： 蒙特塞拉特字体 ， 重量=常规 ， 大小= 24 ， 间距= 0 ， 颜色> R = 113 G = 87 B = 44。 选择两个文本并将其放置，如下所示：

第5步

这将整理出我们的占位符，并为第一个字段输入文本。 对于第二个，复制文本图层，并将其向下移至第二个矩形80px 。 将文本内容更改为“ PASSWORD”和“ *******”。

第6步

添加一些新的文本层，并使用如下所示的属性。 您将需要Open Sans字体 。

您会注意到“忘记密码”链接带有下划线。 要实现此效果，请单击“ 文本”选项按钮以显示装饰效果。 选择第二层，然后选择文本层。

现在，结果是：

组织须知

现在，我们应该看一下“层列表”。 开始组织和重命名这些矩形形状或简单地对元素进行分组可能是一个好主意。 通过双击对象或右键单击并选择“ 重命名”选项来重命名对象 。 要创建图层组，只需选择一个或多个图层，然后单击工具栏中的“ 组”图标。 您也可以按预期在层列表中的组之间拖动对象。

主要目标是将凌乱的图层列表更改为更优雅和更有条理的外观。 不仅要在学习本教程时，而且要在您参与的每个项目中都考虑到这一点。

4.添加徽标

我们已经在登录框中创建了所需的元素。 是时候添加徽标了。

第1步

打开我作为本教程的附件提供的logo_icon.svg 。 现在专注于“图层”列表面板。 您将看到如何使用我们可以轻松编辑的不同路径制作图标。

第2步

使用矩形工具（R）创建30 x 60px的形状并将其放置，如下图所示。 此时无需将其完美地放置100％。 请记住，移动时可以使用网格和键盘上的选项（⌥）键。 这样，Sketch将为您显示精确的距离。

第三步

现在，在“ 层”列表上 ，将路径层拖动到“形状”组中。 把它放在顶部。 通过执行此操作，您将获得新的复合形状。 这就是Sketch中布尔运算和矢量形状的强大功能！

第4步

您还记得我们在您的子路径右侧谈论这些小图标时的想法吗？ 我们可以为每个子路径分别选择不同的布尔运算。 因此，让我们将第一个更改为Substract ，将第二个更改为Difference 。

第5步

简单的步骤。 确保仍选择新的复合形状。 转到Layer>路径>展平 。 这样做会丢失子路径及其编辑功能，但是下一步将变得更加容易。

第6步

保持选择形状。 转到工具栏 ，然后单击“ 编辑”图标。 您会注意到“ 检查器”面板和形状本身发生了一些变化。 通过在画布上拖动来选择所有矢量点。

将焦点放在“ 检查器”面板上，并将“ 角数”设置为5。单击“ 填充”以显示选项窗口，然后选择第二种填充类型：“ 线性渐变” 。 您将看到两条点，一条线通过覆盖您的图层而相连。 线上的每个点代表沿渐变的色标。

要更改停靠点之一的颜色，请在画布上单击它。 您将看到检查器中的颜色选择器更新为该停止点的颜色。 在此颜色选择器中选择一个新值，您将看到结果。 知道了，我们可以将第一种颜色调整为R = 245 G = 166 B = 35 ，第二种颜色调整为R = 239 G = 87 B = 46 。 您也可以直接在颜色选择器上更改颜色。

这是我们的最终形状：

步骤7

复制形状并将其粘贴到您的登录表单中。

步骤8

您的标识即将完成，因此现在添加一些常规文本。 输入您想要的任何内容，但是在本教程中，我使用了“ myapp”以及以下位置和属性：

我们的登录表格已填写完毕！

5.添加背景

第1步

Sketch使我们可以处理位图图像以及矢量对象。 对于背景，我将从Unsplash中选择一个图像。 那里的摄影真棒！ 我将挑选 Nick West制作的这款 。

现在回到您的文档。 在“ 图层”列表面板上选择画板，然后转到“ 插入”>“图像”以选择图片。 警告：此图片太大！ 我们将通过转到“ 检查器”面板并将其尺寸更改为更易于管理的尺寸（例如1280 x 876px）来缩小尺寸。 将其定位在X = 0 Y = 0并确保它是   在图层列表的底部。

提示：如果在选择画板的同时导入图片，则会使用画板尺寸自动遮盖图像。 将图层移动到画板组之外以取消遮罩。 在官方文档中了解有关遮罩对象的更多信息。

第2步

在Sketch中，我们可以使用位于检查器中的“ 颜色调整”面板来调整现有图像的颜色 。 我们可以更改饱和度，亮度和对比度。 将饱和度设置为0 ，将对比度设置为1,9 。

现在，使用“ 插入”>“形状”>“矩形（R） ”创建一个600 x 800像素的矩形。 将其放在X = 0 Y = 0处 。 在“ 图层”列表上，将形状图层移动到图片图层上方。 复制它并按如下所示设置矩形属性：对于第一个矩形，设置不透明度= 100％，混合=乘法，颜色> R = 173 G = 166 B = 152 。 对于第二个（正好在第一个之上），设置不透明度= 50％，混合=正常，颜色> R = 173 G = 166 B = 152 。

你完成了！

这是它的外观。

希望您喜欢本教程...

但是，等等，还有更多！

由于您正在创建UI元素，因此在登录表单中添加一些其他详细信息可能会非常有用，不是吗？ 表单界面有很多方面。 不同的状态和反馈。 我在本教程中介绍的所有技术将使您具备制作一些额外元素的技能，例如：

认为可以做到吗？ 如果您遇到困难或需要问我一些问题，只需发表评论或在Twitter上找到我 。 我期待着您的相处！

翻译自: https://webdesign.tutsplus.com/tutorials/sketch-for-beginners-design-a-login-form-interface--cms-21534

使用qt设计登录界面初学者