美文网首页产品设计SketchSketch
Sketch入门(二)练习APP登录界面设计

Sketch入门(二)练习APP登录界面设计

作者: 赵小客 | 来源:发表于2016-05-25 20:35 被阅读4579次

上一期了解了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的使用之后再说。)

导出图片

小结:

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

相关文章

  • Sketch入门(二)练习APP登录界面设计

    上一期了解了Sketch的基本功能,这期我们就设计一张简单的APP登录界面。具体了解一下功能的用法。由于是入门所以...

  • Sketch资料集合(请收藏,不断更新ing)

    一、软件资源 Sketch 插件集合(持续更新)+建议收藏 二、入门技巧 Sketch入门-怎么测量元素之间的距离...

  • 流光溢彩的时尚音乐移动APP界面设计UI工具包 Mobile U

    流光溢彩的时尚音乐移动APP界面设计UI工具包 Mobile UI Kit Sketch & PSD模版下载 漂亮...

  • 安卓连接数据库

    安卓连接数据库[练习] Android入门案例(二)——JDBC连接MySql数据库实现登录 Android入门案...

  • sketch

    什么是sketch? sketch专门针对界面设计,是一款轻量、易用的矢量绘图工具 stetch的优点:轻量、效率...

  • 11-13 sketch

    什么是sketch? Sketch 专门针对UI界面设计,是一款轻量、易用的矢量绘图工具 优势: 轻量:占用内存低...

  • 2018-10-21

    一、登录界面设计 二、登录界面实现功能 三、登录界面各控件的参数设置 控件1 控件2 控件4 四、重要方法描述 角...

  • 2018-10-21

    一、登录界面设计 二、登录界面实现功能 三、登录界面各控件的参数设置 控件1 控件2 控件4 四、重要方法描述 角...

  • 商超系统登陆界面 廖世豪

    一、登录界面设计 二、登录界面实现功能 三、登录界面各控件的参数设置 控件1 控件2 控件4 四、重要方法描述 角...

  • Sketch 临摹练习系列教程(二)注册登录窗口

    靠着 Google 全文翻译跟着教程硬是撸了一遍, 然后重新整理出了这篇文章.英语原文教程地址: http://w...

网友评论

  • 春田花花幼儿园:请问, 怎么设置两个控件之间的间隔间距,只能自己算? 不能选中两个之后,直接设置吗? 我没找到地方. 还有靠左16px,这个也只能控件的x加上控件的宽度,自己再算吗?
  • dc56b3af89da:一倍图导出 内阴影怎么不见了
  • Seer已被使用:怎么矩形没有找到内描边?
    春田花花幼儿园:inner shadows
  • 栎千:iPhone6的 375 * 667,是相对于开发者的单位点(Pt),像素应该乘以2
  • 顾事:导航栏高度是44哈~不是45~
    赵小客:@顾事 谢谢提醒

本文标题:Sketch入门(二)练习APP登录界面设计

本文链接:https://www.haomeiwen.com/subject/aqhzrttx.html