Adobe XD从轰轰烈烈的出现到今天的无数集群，经历了无数的质疑，但它用事实证明了它并不差。
这款专门为UI和UX设计师设计的软件也被Adobe官方寄予厚望。Adobe首席执行官兼执行副总裁斯科特贝尔斯基(Scott Belsky)对此表示赞同：“我们相信Adobe XD至少与Photoshop一样强大，如果不是更强大的话。”
最近Adobe又推出了一个网页，教你如何从Photoshop切换到AdobeXD，从而帮助设计师提高工作效率。感兴趣的朋友可以自行登陆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，字的粗细为规则，填充颜色为#FFFFFF，最后移动到合适的位置，如图。
.com/origin/pgc-image/e527b7bf55414f9f9917e5637c000e4b?from=pc” img_width=”1080″ img_height=”1019″ alt=”Sketch真的不可替代吗？Adobe XD界面设计行云流水？” inline=”0″>
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上看一下最终效果，并且对图层名称等做最后整理。
