Sketch用它做UI,真香!

用户头像
西安/UI设计师/7年前/243浏览
Sketch用它做UI,真香!

之前做设计一直用PS,改用Sketch,PS感觉是多面手,Sketch做UI这块很好用,图形处理较弱。

今年初去北京找工作,很多都要求用Sketch,今年8月份忍痛买了MAC,开始学习使用Sketch,目前已用它做了2个项目,嗯〜〜真香!!!今天我就总结下它有多香!


一.创建画布

它自带苹果、安卓、网页、纸张等尺寸的画布,它是一款矢量软件,创建时只需创建一倍尺寸就可以。


二.插件

目前用的最多的是阿里的Dapollo,哦my god~,用过才知道什么是效率之王。有它你还需要纠结规范吗?它是最好的教学工具。


还有蓝湖插件、sketch measure等等,稍后介绍。因用的时间也不长,还有哪些插件好用,继续探索中...


三.组件

把导航栏作为组件,在页面上引用,组件上的文字可以修改。当组件修改后,所有引用它的自动修改,不用一个一个去修改了。



像这种列表作为组件,只需要修改组件,所有列表都会修改好,组件文字可以随意修改。


组件内可以嵌套组件,在页面引用时,可以替换,可以达到做一个组件,一切搞定的效果,有修改时,只需要修改组件就好,大大提高了效率。


这是我做完一个APP的组件库,之后的修改不怕不怕啦〜〜〜



四.辅助线功能

选中元素,按住ALT键,可以看到该元素与周边元素的间距,拖动元素也会出现同类元素的对齐线。让对齐更简单。


五.切图

选中要切的元素,设置它切的倍数(不规则的图形,防止它的虚边和前端对齐问题,在它底层创建一个白色,不透明度为1的矩形,作为它的区域),可以选择IOS和安卓,会自动出现它常用的倍数,删除不必要的倍数就可以。以次类推,把需要切的元素都设置好。

现在就用到sketch measure插件,选择“插件”——“sketch measure”——“导出规范”,设置好参数,就会生成html规范,方便前端切图,内含设置好切图的元素。

最后压缩切好的图,整个项目UI部分就完成了。


六.交互动效

 

它与principle完美衔接,一键导入SKETCH源文件,让想动的元素动起来,不想让它动的文件夹命名后加*,导入principle就是位图。principle是apple前设计师开发的,做UI动效简单快速。也推荐大家使用,很多大神作品上的动效都是用它做的,它相比AE更简单直接,做一些常见的UI动效完全够用了。


总结:

 

  1. 做的项目多了,会积累出自己一套组件库,效率会越来越高。

  2. 它不止在排版上更方便,制作ICON也很好用。

  3. 制作交互动效,更好的表达你的设计理念。

  4. 排除了很多干扰,UI设计师可以更专注视学、交互、用户体验的思考。



2
举报
|
收藏
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
UI界面 组件
盲盒APP UI设计
新能源APP应用UIKit
UI通用设计素材1
Security Camera UI kit
【新年UI图标】汽车icon
高级表盘系列UI源文件
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
【新年UI图标】会员icon
【新年UI图标】体育icon
户外旅行飞机情侣假日出行
科技医疗透明柜UI界面设计
3D卡通UI界面图标可爱插画免扣素
【新年UI图标】钱包icon
我的钱包-UI界面设计-app
APP/小程序商业项目UI模板|99个高保真UI+79个原型
3D渐变流体抽象矢量UI背景图
钱包ui模板
【新年UI图标】30个图标
【新年UI图标】旅行icon
高级感金属拟物 UI设计组件库
手表表盘UI系列
【新年UI图标】礼物/活动icon
【新年UI图标】秒杀icon
你可能喜欢
相关收藏夹
大家都在看
登录注册