sketch快速制作移动界面
- 今天的内容是教大家通过sketch系统里面自带了iOS系统的组件,快速完成界面!
- 一般移动端界面主要的构成分为:状态栏、导航栏、标签栏、内容区域这几个部分组成,那么下面我们一起快速来制作界面吧!
从置入中,找到画板工具,画板中自带了不同类型的手机系统和手机型号
根据大家的需求,选择需要制作的手机尺寸,自动生成尺寸界面,这样很方便,加快了我们的作图速度!
- 搭建基本框架:状态栏、导航栏、标签栏
- 为了快速制作出状态栏、导航栏、标签栏,我选择的是sketch系统自带iOS系统组件
选择适合的状态栏和导航栏,大家可以自己多多试试不同的样式
比如选择一个状态栏和导航栏,添加上去,发现尺寸不对怎么办?
找到属性栏,改变宽度就可以了哦!
- 改变w:的宽度,和IPhone11的宽度一样就可以了
- 导航栏里的文字和图标都可以进行更改哦!大家下来可以试试哦!
- 同理添加标签栏,可以选择要3个图标或者是4个图标
根据前面的步骤,排列好基本框架后,现在可以来制作内容区域了!
- 首先,绘制圆形工具,先代替个人头像
- 现在需要在圆圈里面放人物形象图片,为了方便快速操作,选择用sketch软件里自带的图片进行制作
属性栏这边,找到数据填充,可以根据里面的选项进行选择,选择一个合适的头像,大家可以自己下来多试几个哦!我的就选好了
我选择的是Q版人物,这个人物有很多种,每次点击出现的人物都不一样哦!我这边就展示4个给大家看看就好了,剩下的交给大家去探索了!
为了效果,我把边框去掉了哦!
接着添加用户名字和一下内容,和之前的差不多,加快速度了哦!
剩下的就是主要内容区域:
- 我们可以模仿很多界面里的个人详情界面,下面板块一般是以信息框,进行排列摆放!
- 找到ios自带的信息框架,进行修改
最后效果
简单快速的把一个界面的框架全部搭建完成,
剩下的就留给大家,改文字、颜色、内容啦!
提示:改组件内容,选中双击就可以改了!
2021-02-26