在Sketch中设计一个素材启发的移动登录表单

img class= ‘ WP-image-6907 ‘ alt= ‘ log in ‘ src= ‘ www . qx6a . com/wpss

1.标题

接下来我来设计前言。我们的头部包括iphone状态栏和导航栏。首先,使用状态栏上的r绘制矩形,将其命名为status bar,然后应用以下属性:

X: 0

Y: 0

宽度:640

高度:40

取消选择边框,以所需颜色填充矩形。可以选择品牌或应用程序的主要色调。我选择蓝色:

H: 200、S: 100、B: 80

010-350000

让我们对导航栏执行相同的操作。按r键,绘制矩形,将其命名为navigation bar,然后使用这些属性放置和缩放矩形。

X: 0

Y: 40

宽度:640

身高:96

用上次选择的相同颜色填充。

010-350000 . size-full ‘ img class= ‘ WP-image-6910 ‘ alt= ‘屏幕快照

注:我们在设计时考虑了视网膜显示屏。因此,导航栏的高度为96px。是实际高度48px的两倍。48px是我选择的字体大小高度(16px)的3倍,可以将图标居中并与内容对齐。

后退按钮

我们差不多完成了主题。现在需要添加页面标题和后退按钮

我先从后退按钮开始。进入Insert符号后,将返回图标,并应用以下属性:

X: 30

Y: 72

宽度:18

高度:32

你应该得到这样的结果。

010-350000

要垂直居中对齐以下图标,请选择图标和导航栏,然后单击垂直对齐图标(下图右上角)。

010-350000

[google_ADS类型=# 8217;mid-ad-post # 8217;[成语]

使用此功能可以相对于其他图层查找图层。现在添加背面标签。输入t,然后写“返回”。导航到文本属性,然后输入以下内容:

字体:Roboto

重量:定期

颜色:白色

字体大小:24

对齐:左

宽度:汽车

线:24

然后用在艺术板上。

X: 70

Y: 76

标题

最后是题目。输入t并记录Login。导航到文本属性,然后输入以下内容:

字体:Roboto

重量:中等

颜色:白色

字体大小:32

对齐:中心

宽度:汽车

直线:32

然后使用以下坐标进行放置:

X: 280

Y: 72

将所有层放在一个文件夹中,选择所有对象,然后单击“组”按钮。“头”这个名字完成了!010-350000。

页面:1 2 3

WordPress主题

苹果iPhone 6s模型(黑、粉、灰、金四种颜色)

2022-9-19 21:17:16

WordPress主题

材料设计调色灵感

2022-9-19 22:02:42

搜索