上一期了解了Sketch的基本功能，这期我们就设计一张简单的APP登录界面。具体了解一下功能的用法。由于是入门所以过程会写的非常详细。

这是一种常见的登录页面

在设计之前我们需要先分析这个界面的功能及交互。

1、该界面出现在APP启动页之后

2、登录方式有两种，第一种用户名/手机号和密码登录；第二种第三方登录。

3、有［账号］和［密码］就会有［找回密码］的功能。

4、有［注册］入口，如果APP不要求必须登录就能使用就要有［随便看看］的入口。

了解这些后，我们就会对这个页面有一个大致框架（工作中，这些需求会有产品经理明确提出并和设计一起讨论）

设计页面

一、新建Sketch文件，添加画板

新建Sketch文件并添加画板［Insert>Artboard快捷键A］，选择A工具后右侧会出现Sketch提供的多个IOS机型，选择iphone 6（375*667px 这是@1x设计尺寸）。选中画板名称双击（快捷键com+R）重命名。

二、添加状态栏

选择File > New From Template > ios UI Design，可能会弹出一个弹框提示：Some Fonts in this Document are Missing（字体缺失提醒）选择OPen打开即可。

然后你就会看到iOS的系统UI（sketch3.7.1版本中IOS系统UI尺寸是iphone6，所以我们刚才建立画板时选择了iphone6），选择所需要的状态栏。粘贴复制到登录的画板中，位置：顶部。

注：在图层中可看到这个状态栏前的有一个类似刷新的图标，这个就是［符号］的标志，双击可进入符号的页面，点击［Return to Instance］或选择页面可以返回［Page 1］

符号

二、添加导航栏

这里要普及一下IOS系统尺寸。以iphone6为例，页面375*667x，状态栏20px，导航栏45px，标签栏49px

接下来我们要在导航栏上加入［随便看看］按钮

1、添加矩形（快捷键R）尺寸：375*45px，填充色：默认，描边：不勾选，位置：紧贴状态栏

2、添加文字（快捷键T）输入［随便看看］。

3、画箭头icon。

第一步：画一个圆形［快捷键O］Size（尺寸）：14*14px，Borders（描边）＃333333、inside、0.5px。

第二步：画出两个矩形［快捷键R］摆出“ ┛”这样的位置关系，然后选择Union［布尔运算］将两个图形合并后，进行Transform［旋转］-45°至“>”这个角度。

第三步：将画好的“>”箭头Flatten［合并］然后和第一步画的圆进行上下左右对齐，并编组［com＋G］。

画箭头步骤

说明：1、这里之所以把描边设置成0.5px是因为我做的图是开发尺寸，也就是设计尺寸的二分之一。这样可以提高研发人员查看原文件的效率，同时也能提高双方沟通时信息传递的准确性。2、合并形状的主要目的是重塑图形空间区域，但是之前的操作过程将无法返回。

4、文字于箭头组合摆放

将文字于箭头水平中心对齐，间隔8px，编组后放置在导航栏位置，上下居中，靠左16px。最后将导航栏的颜色透明度改成0%。

三、添加Logo

这是在网上找的一个logo，接下来临摹一下。

1、新建背景圆［快捷键O］，72＊72px；填充＃4A4A50。

2、绘制logo图形。新建矩形16*27px，填充＃FFFFFF；双击图形进入编辑点状态，选择底部两个点设置圆角8px；

画一个圆尺寸：30*30px，位置：于矩形左对齐，且半个圆在矩形的上边；再画一个圆尺寸：24*24px，这里随便填充一个红色半透明设置为50%，位置：顶部于刚才画的圆齐平，左侧紧挨矩形。选中这两个圆选择布尔运算，减去顶部的圆。同理，在画一个矩形进行布尔运算减去右侧多余的图形。

最后画出两个圆形，分别为大小：15*15px，位置：顶部离圆形6px，左侧离矩形4px。另一个大小：18＊18px，位置：顶部距离刚才画的圆3px，左侧距离矩形3px。最后将画好的logo编组，于背景上下左右居中对齐。然后再将logo和背景圆一起编组，位置：画布左右居中对齐，顶部距离导航栏40px。

四、添加输入框及登录按钮

1、画一个矩形327*40px，填充：＃FFFFFF；内描边：-0.5px，颜色＃e0e0e0。

添加文字：用户名/手机号；字号：14px；颜色＃999999。对齐：于输入框左对齐，上下居中。

同理画出密码输入框。［用户名/手机号输入框］上下距离［logo］和［密码输入框］均为12px；

添加登录按钮：矩形327*44px，圆角2px；填充：＃4A4A50。添加文字登录，字号：16px；颜色＃FFFFFF。于矩形上下左右居中。将文字和矩形编组，位置：于画板左右居中，距离输入框24px。

输入框设置

五、添加常规操作

添加［注册、忘记密码、第三方登录］常规操作。

1、输入文字［注册］字号：14x；颜色：＃526792（自定义的一个链接色）；位置：于登陆按钮左对齐，顶部距离16px。同理，添加［忘记密码］位置：于登陆按钮右对齐。

2、第三方登录

输入文字［第三方登录］字号：13px；颜色＃999999。画一个矩形60*0.5px；颜色＃e0e0e0，距离文字间距14px，上下居中，左右各一个。将三个元素编组。

添加图标，画三个圆，大小：34*34px；颜色：＃32C23E、＃1DB5ED、＃FA5A51。从http://www.iconfont.cn/中输入关键词，微信、QQ、微博下载对应SVG格式的图标。用Sketch打开，复制粘贴画板中，调整大小放置在对应的圆形中。每个图标之间间隔30px，距离画板底部和第三方登录文字均为24px。

添加常规操作

六、导出

选择画板，点击属性区右下角Make Exportable，勾选Background Color可以多倍图同时导出，在电脑上预览，只需导出@1x，如果要放置到手机上看可以选择添加@2x。点击［Export登录］按钮导出即可。（说明：设计的是iphone6的尺寸，所以图片放在这个机型上看效果最佳，或者直接连接Mirror直接查看，关于Mirror的使用之后再说。）

导出图片

小结：

软件的学习没有太多的技巧，特别现在网上有很多现成的教程，只要自己有心学，没什么难的，多练习就可以。