Sketch(四)——综合案例

效果展示

Sketch(四)——综合案例_第1张图片

准备工作

1. 安装IOS UI design组件库

  • 打开Sketch的偏好设置➡️组件库➡️下载安装

2. 安装iconfont插件

  • 没有此插件和iconfont字体几乎所有iconfont都会在Sketch中显示为问号
  • 插件库中搜索iconfont➡️点击What is a font bundle➡️下载压缩包➡️安装tff-files文件夹中所有字体

?视频教程:Sketch安装iconfont字体

步骤详解

1. 添加iphone XS画板,结合Runner➡️Insert➡️iphoneXS+status插入iphone屏幕和信号栏

2. 画矩形置于最下层,结合Runner➡️Run➡️uns设置随机背景图,添加径向填充效果


3. 结合Runner➡️Run➡️iconfonts添加search和menu字体图标,调整样式

4. 画矩形使用Sketch Materail插件添加卡片效果,画圆形填充随机头像

5. 增加名字、简介(Content Generator插件)、观看数(iconfont:eye)、喜欢数(iconfont:heart)和分割线(v)等细节处理

> 细节补充:

  1. 如果因为颜色和图层问题看不清效果可临时添加一个图层
  2. 快捷键有大用:
    样式复制:Option+Command+COption+Command+V
    调整字体:Option+Commad+'+'Option+Commad+'-'
  3. 找不到置入的iconfont直接从画板中拉取
  4. 插件用好了事半功倍
  5. 设计没有规则,只有“潜规则”

你可能感兴趣的:(支线)