sketch快速制作移动界面

  1. 今天的内容是教大家通过sketch系统里面自带了iOS系统的组件,快速完成界面!
  2. 一般移动端界面主要的构成分为:状态栏、导航栏、标签栏、内容区域这几个部分组成,那么下面我们一起快速来制作界面吧!

从置入中,找到画板工具,画板中自带了不同类型的手机系统和手机型号
根据大家的需求,选择需要制作的手机尺寸,自动生成尺寸界面,这样很方便,加快了我们的作图速度!

  1. 搭建基本框架:状态栏、导航栏、标签栏
  2. 为了快速制作出状态栏、导航栏、标签栏,我选择的是sketch系统自带iOS系统组件

选择适合的状态栏和导航栏,大家可以自己多多试试不同的样式

比如选择一个状态栏和导航栏,添加上去,发现尺寸不对怎么办?

找到属性栏,改变宽度就可以了哦!

  1. 改变w:的宽度,和IPhone11的宽度一样就可以了
  2. 导航栏里的文字和图标都可以进行更改哦!大家下来可以试试哦!
  3. 同理添加标签栏,可以选择要3个图标或者是4个图标

根据前面的步骤,排列好基本框架后,现在可以来制作内容区域了!

  1. 首先,绘制圆形工具,先代替个人头像
  2. 现在需要在圆圈里面放人物形象图片,为了方便快速操作,选择用sketch软件里自带的图片进行制作

属性栏这边,找到数据填充,可以根据里面的选项进行选择,选择一个合适的头像,大家可以自己下来多试几个哦!我的就选好了

我选择的是Q版人物,这个人物有很多种,每次点击出现的人物都不一样哦!我这边就展示4个给大家看看就好了,剩下的交给大家去探索了!

为了效果,我把边框去掉了哦!

接着添加用户名字和一下内容,和之前的差不多,加快速度了哦!

剩下的就是主要内容区域:

  1. 我们可以模仿很多界面里的个人详情界面,下面板块一般是以信息框,进行排列摆放!
  2. 找到ios自带的信息框架,进行修改

最后效果

简单快速的把一个界面的框架全部搭建完成,

剩下的就留给大家,改文字、颜色、内容啦!

提示:改组件内容,选中双击就可以改了!

2021-02-26