Sketch真的不可替代吗？Adobe XD界面设计行云流水？

从轰轰烈烈的问世，到如今的拥簇无数，Adobe XD经历了无数的质疑，但它用事实证明了，自己并不差。

这款专门为UI和UX设计师打造的软件，也被Adobe 官方寄予厚望，Adobe的首席执行官兼执行副总裁Scott Belsky为其代言：“我们相信Adobe XD即使不会比 Photoshop更强，也至少和它同样强大。”

而近日，Adobe又上线了一个网页，教你如何从 Photoshop切换到 Adobe XD，以此帮助设计师提升工作效率。有兴趣的朋友可以自行到Adobe官网查看。

相信有部分朋友也已经在使用Abode XD进行设计，既然是主打UI设计的软件，今天数艺君就给大家讲讲怎样利用Adobe XD设计一个带键盘交互的登录界面~

带键盘交互的登录界面设计

带键盘交互的登录界面设计，需要在基础登录界面的设计基础上将键盘融入界面中，并对登录按钮进行优化。

01 打开Adobe XD，新建一个iPhone 8尺寸的文档，或者在上一个XD文档中，直接按快捷键A新建一个画板，并将该画板的填充色设置为#007D80，如图所示。

02 打开iOS的UI Kit文件，然后选中白色的顶部状态栏和数字键盘，按快捷键command+C（macOS系统）/Ctrl+C（Windows系统）复制一份，接着按快捷键command+V（macOS系统）/Ctrl+V（Windows系统）在绿色的画板上粘贴，最后将其移动至合适的位置，如图所示。

03 继续在iOS的UIkit中找到返回图标，并复制粘贴到画板中，然后将填充色设置为#FFFFFF，接着将其移动至合适的位置，如图所示。

04 按快捷键T激活“文本”工具，然后在画板上输入文字“忘记密码”，接着设置字体大小为20px，字重为Regular，填充色为#FFFFFF，最后将其移动至合适的位置，如图所示。

05 按快捷键T激活“文本”工具，然后在画板上输入文字“登录”，接着设置字体大小为36px，字重为Regular，填充色为#FFFFFF，如图所示。

06 按快捷键T激活“文本”工具，然后在画板上输入文字“手机号”，并设置字体大小为17px，字重为Semibold，填充色为#FFFFFF，接着选中“手机号”图层，并按快捷键 command+D（macOS系统）/Command +D（Windows系统）复制一份，再将文本图层移动到右侧合适的位置，最后设置文本为右对齐，并将文本内容修改为“使用用户名登录”，如图所示。

07 按快捷键R激活“矩形”工具，绘制一个50px×30px的矩形，然后设置圆角半径为4px，并去掉边界，接着将填充色设置为#FFFFFF，最后将其移动至合适的位置，如图所示。

08 按快捷键T激活“文本”工具，输入文本+86，然后设置字体大小为17px，字重为Semibold，字色为#007D80，接着将其和矩形居中对齐，如图所示。

09 按快捷键L激活“直线”工具，然后按住键盘上的Shift 键，垂直向下绘制一条长度为36px的直线，接着设置边界大小为2px，边界色为#FFFFFF，最后将其移动至合适的位置，如图所示。

10 按快捷键L激活“直线”工具，然后按住键盘上的Shift 键，从左到右水平绘制一条长度为343px的直线，接着设置边界大小为1px，边界色为#FFFFFF，最后将其移动至合适的位置，如图所示。

11 选中步骤06~步骤10创建的图层，然后按快捷键 command+G（macOS系统）/Ctrl+G（Windows系统）对其编组，接着按快捷键 command+D（macOS 系统）/ Ctrl+D（Windows系统）复制一份，最后将其向下移动至合适的位置，如图所示。

12 在复制的图层中将“手机号”的文本对齐方式设置为左对齐，然后将内容修改为“密码”，接着将“使用用户名登录”修改为“显示”，最后按快捷键command+；（macOS系统）/Ctrl+；（Windows系统）隐藏矩形、+86和垂直直线图层，如图所示。

13 按快捷键R激活“矩形”工具，绘制一个375px×70px的矩形，并去掉边界，然后设置填充色为#FFFFFF，接着按键盘上的数字键1，将不透明度设置为10%，最后将其移动至合适的位置，如图所示。

14 按快捷键R激活“矩形”工具，绘制一个160px×30px的矩形，然后将圆角半径设置为15px，并去掉填充，接着设置边界大小为1px ，边界填充色为#FFFFFF，最后将其移动至合适的位置，如图所示。

15 按快捷键T激活“文本”工具，输入文字“手机动态密码登录”，然后设置字体大小为17px，字重为Regular，字色为#FFFFFF，接着将其移动至合适的位置，如图所示。

16 按快捷键E激活“椭圆”工具，按住键盘上的Shift 键绘制一个50px×50px的圆，并去掉边界，然后将填充色设置为#FFFFFF，接着按键盘上的数字键7，将不透明度设置为70%，最后将其移动至合适的位置，如图所示。

17 选中左上角的“返回”图标，然后按快捷键 command+D（macOS系统）/Ctrl+D（Windows系统）复制一份，接着将复制的图标移动至圆上方，和圆居中对齐，最后将其旋转180°，如图所示。

18 选中“返回”图标和圆，然后按快捷键 command+option+S（macOS系统）/Ctrl+Alt+S（Windows系统）执行减去顶层布尔运算，如图所示。

至此已经基本完成该界面的设计，最后可以对图层之间的间距做一些调整，应在移动端的 Adobe XD上看一下最终效果，并且对图层名称等做最后整理。

延伸阅读更多内容可以购买《Adobe XD 功能解析与应用》详细阅读哦！
▼点击“阅读原文”可以直接购买
《Adobe XD 功能解析与应用》