设计干货|聊聊设计师玩转Sketch的那些事儿

点击蓝字关注GOMEOS用户体验设计1调整组内图层父级变换属性新的调整大小选项可以帮助我们更灵活地调整对象与子层之间的响应:1. 默认属性下的成组放大缩小变化,内部的图标跟随组的缩放比例进行变化.2. 锁定图标的固定宽度&固定高度,成组的缩放比例不会影响到图标的比例与尺寸.3. 当锁定上部及右部间距时,成组缩放比例时,图标距离组内上部及右部的距离保持不变.2嵌套样式这个十分强大的功能使得symbols的复用更加的强大,可以同一内容复用多...

点击蓝字关注GOMEOS用户体验设计

设计干货|聊聊设计师玩转Sketch的那些事儿

设计干货|聊聊设计师玩转Sketch的那些事儿

1

调整组内图层父级变换属性

新的调整大小选项可以帮助我们更灵活地调整对象与子层之间的响应:

1. 默认属性下的成组放大缩小变化,内部的图标跟随组的缩放比例进行变化.

设计干货|聊聊设计师玩转Sketch的那些事儿

2. 锁定图标的固定宽度&固定高度,成组的缩放比例不会影响到图标的比例与尺寸.

设计干货|聊聊设计师玩转Sketch的那些事儿

3. 当锁定上部及右部间距时,成组缩放比例时,图标距离组内上部及右部的距离保持不变.

设计干货|聊聊设计师玩转Sketch的那些事儿

2

嵌套样式

      

这个十分强大的功能使得symbols的复用更加的强大,可以同一内容复用多种样式,也可以同一样式改写不同内容。

设计干货|聊聊设计师玩转Sketch的那些事儿

3

支持WebP压缩格式

     

当看到Sketch支持WebP格式时,不禁感叹Sketch的强大,WebP也是被小编十分看好的当下图片压缩处理的趋势.

WebP在2010年由Google发布,在Google的明星产品,如:YouTube、Gmail、Google Play,在国内如腾讯、淘宝等都可以看到WebP的运用.

Webp是一种支持有损压缩和无损压缩的图片格式文件,派生自图像编码格式VP8.根绝Google的测试,无损压缩后的WebP比PNG文件少了约50%的文件大小,即使这些PNG文件经过其它压缩工具压缩之后,WebP还是可以减少约30%的文件大小.     

设计干货|聊聊设计师玩转Sketch的那些事儿

通过研究,整理了WebP的显著优势:

1. PNG转WebP的压缩率要高于PNG原图压缩率,同样支持有损与无损压缩;

2. 转换后的WebP体积大幅减少,图片质量得到保障;

3. 转换后的WebP支持Alpha透明和24-bit颜色数,不存在png压缩后色彩不够丰富可能会出现毛边的情况.

4

Libraries功能

       

一个Library本质上就是一个普通的Sketch文件,其中的Symbols可以被其他Sketch文件调用. 如果你编辑了Library当中的Symbols,那么调用了该Library的其他Sketch文件便会收到更新通知,你可以对变更进行预览、对比和确认,使这些Sketch文件所调用的Symbols自动更新至最新版本.

1. 打开Sketch,快捷键【command+,】,打开【偏好设置】,选择【资源库】;

设计干货|聊聊设计师玩转Sketch的那些事儿

2. 点击【添加资源库】按钮,如选择【GOME OS3.0组件库】.

注意:此处可能会遇到一个小问题,当第一次选中文件时,右下角【打开】为置灰显示,这个时候再随意点击一下其它sketch文件,注意不要重复点击,然后【打开】按钮就会正常显示,直接点击打开即可.

设计干货|聊聊设计师玩转Sketch的那些事儿

3. 添加组件完成后,可以选中需要替换组件的图层.

设计干货|聊聊设计师玩转Sketch的那些事儿

4. 当组件库有内容更新时,右上方会出现提示【资源库有可用更新】.

设计干货|聊聊设计师玩转Sketch的那些事儿

5. 可以点击提示,查看更新的内容,对比更新前后的设计样式,选择是否更新.

设计干货|聊聊设计师玩转Sketch的那些事儿

在多人协作场景中,你可以将Library文件存放在Dropbox同步文件夹或GitHub的Repository当中,并确保其他同事拥有访问权限,这样他们便可以在自己的本地Sketch文件当中调用Library并使用其中的Symbols了。在你编辑了Library文件之后,他们的本地Sketch文件同样会收到更新通知.

5

查找和替换颜色

查找和替换颜色是一项非常实用的功能,其中包括三种替换的类型:

1. 查找文件中所有使用 A 颜色的地方,并更换成 B 颜色.

2. 查找文件中所有使用 A 颜色(包括使用 A 颜色不同透明度)的地方,并更换成 B 颜色.

3. 查找文件中所有使用 A 颜色(包括使用 A 颜色不同透明度)的地方,并更换成 B 颜色,同时保留透明度信息.

设计干货|聊聊设计师玩转Sketch的那些事儿

下面用一组渐变色替换的方法实际操作一下:

设计干货|聊聊设计师玩转Sketch的那些事儿

6

强大的交互原型功能

画板和热区链接实现页面间的跳转,实现动态交互原型,类似交互软件Marvel中的热区链接,下面看一段来自Sketch官网的视频展示.

设计干货|聊聊设计师玩转Sketch的那些事儿

1. Sketch软件内部预览,类似于Principle中的预览窗口,或xcode中的模拟器;

2. Sketch Mirror内实时预览,USB连接或同局域网内预览操作.
3. Sketch Cloud内实时预览,登录Sketch Cloud后可将项目文件上传至官方云端,实现在线多人预览,并可进行讨论.

设计干货|聊聊设计师玩转Sketch的那些事儿
设计干货|聊聊设计师玩转Sketch的那些事儿

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/36252/

(0)
交互精选交互精选
上一篇 2018-04-04
下一篇 2018-04-05

相关推荐

  • 交互设计职业背景思考

    前言:最近一段时间,基本每天都有小伙伴在问,“我是来自非设计专业的学生,能否做交互设计”、“我想从事交互设计工作,是否需要读一个交互设计的硕士?”、“我工作一段时间了,不是设计行业,我能转行做交互设计么?”、“我对交互设计很感兴趣,如何从零开始自学?”,刚好今天看到一个知乎问题邀请,问的也是类似问题,所以我想写一些关于交互设计职业背景的粗浅思考,供大家参考。:)大多数问题归结为两类。第一类问题:交互设计工作是否需要专门的交互设计专业教育...

    2018-01-30
  • 2018年交互设计的6大趋势

    ♝点击上方“交互设计学堂”关注我们,送电子书设计是围绕人解决问题,因此对2018年交互趋势的预测,我们将目光聚焦在细腻的情感体验打磨、达成目标的交互介质、解决问题的效率、发生交互行为的场景这几个方面,探究出了以下6大趋势:全感官体验All-sense experience趋势简述人有五感,强化体验记忆的最有效方式就是五感相结合。看见、听见信息已成为体验常态,而更真切的感知信息是用户体验升级的客观诉求,全感官体验能更好的打造“身临其境的沉...

    2018-02-07
  • “桥”的创想——中安创谷“创业者之桥”设计全球征集于中科大正式启动

    📌 编辑 | P.S3月15日,中安创谷创业者之桥设计全球征集启动会于中国科学技术大学西区成功举办。标志着全球征集活动正式启动。来自中国科学技术大学、合肥工业大学、安徽大学、安徽建筑大学的师生、本地孵化机构负责人、创业团队、媒体代表等近200人参加了启动会。中安创谷科技园是中国当下以“众创空间、孵化器、加速器、产业基地和基金集群”为主要业态的科技园代表之一,“创业者之桥”作为连接一期、二期园区的重要纽带,对园区的整体性及交通流线起着重要...

    2018-03-17
  • 广告与用户体验如何共存?

    今天给大家分享的是来自UI中国会员-海舟Ocean关于广告营销相关设计的一些经验总结。最近公司的移动端产品在优化广告投放,其中也遇到了不少的困惑,我翻看了部分APP的广告展现形式并结合了几位设计师&产品经理的想法之后,整理总结出了这篇文章。本文将结合实际案例就常见的广告形式以及它们如何合适地呈现与大家进行分享。遇到的困惑我们知道无论是自身的品牌活动宣传还是第三方的商业广告都能为公司和产品带来不小的收益,但与此同时不恰当的广告也会对用户体...

    2018-04-20
  • 【交互设计】北京中技华软科技服务有限公司内部主题分享会第七期

    北京中技华软科技服务有限公司内部主题分享会第七期主题:交互设计时间:2018年4月23日主讲人:高旭2018年4月23日上午,北京中技华软科技服务有限公司进行了第七期内部主题分享会——交互设计。交互设计起源于网站设计和图形设计,但现在已经成长为一个独立的领域。现在的交互设计师远非仅仅负责文字和图片,而是负责创建在屏幕上的所有元素,所有用户可能会触摸,点按或者输入的东西:简而言之,产品体验中的所有交互。主讲人高旭分别从交互设计的起源、原则...

    2018-04-24
  • 用户体验很重要,外卖小票了解一下

    失恋了,今天很丧,老板给我画一个小猪佩奇好吗?这个要求是四川资阳的一个女孩子点外卖时,在订单上给店主留的言。没有想到,店主竟然答应了。1当顾客在向外卖商家提需求时他们究竟要的是什么?不久前,一个在外卖小票上画画的帖子在网上刷了屏。原来,四川资阳一女子失恋点外卖要求画小猪佩奇,店主竟然答应了。据店主回忆,“大概在下午4点的时候,店里接到订单,在备注栏中,顾客称‘失恋了,今天很丧,老板给我画一个小猪佩奇好吗?’ ”为了安慰失恋的顾客,王女士...

    2018-03-26
  • 文娱寄卖 | 京东用户体验部喊你来填调研问卷啦!

    全文字数:  1800阅读时间:   6分钟嗨,收藏大咖们你们好!我是来自京东集团电子文娱技术研发部的一名用户体验师。刚接触京东文娱寄卖业务的时候,我并不太熟悉邮币卡、书画等市场,只是经常听朋友和亲戚讨论文玩藏品。当与很多邮币卡商、书画商沟通之后,我看到的是20多年的坚守、30年不变的初衷以及因线下市场低迷导致的生活压力。顷刻间我明白了,京东文娱寄卖商城的人文情怀,这其中是对行业的挚爱以及解决用户需求痛点的执着。用户体验部钱币溯源,追忆...

    2018-04-25
  • 交互设计工作流程6步走

    点击信息与交互设计关注我们!欢迎大家踊跃投稿哦!投稿邮箱:iidc@iidc.org.cn经常有人会问交互设计到底是做什么的?交互在工作中的流程是什么样子的?那么今天就来讲讲交互设计在工作项目中需要做哪些工作。这里结合笔者本身的个人经历,将交互工作流程总结为以下6点:1、发现问题这里的发现问题,主要是找到一些体验不合理或者未达到预期效果的地方。发现问题的方式有很多,在实际项目工作中,可能大部分的问题反馈来源于客服或者产品需求,这里交互更...

    2018-01-30
  • sketch 44.1+汉化插件下载

    如果你喜欢UI设计如果你喜欢高效设计如果你喜欢简洁的设计最重要的,你得有个Macbook pro !Macbook pro!Macbook pro  !不要提什么macbook air,因为你是设计师,设计师,设计师。官网地址http://www.sketchcn.com/,可免费下载体验30天。  很值得购买的软件,只需要$99为什么选择 SketchSketch 是为图标设计和界面设计而生的。它是一个有着出色 UI 的一站式应用,所...

    2018-04-22
  • 为了更好的用户体验,谷歌拿出了“大棒”与“胡萝卜”

    点击关注36氪,置顶公众号专业的行业新闻及深度报道,不容错过━━━━━━这是著名分析师Ben Thompson对谷歌近期宣布的一组数据的评论,原标题为“THE AGGREGATOR PARADOX”以下为谷歌宣布的这组数据:现在共有3100万个网站加入了加速移动页面(AMP)计划,自去年10月以来增长了25%。在2月的第1周,谷歌向出版商发送了4.66亿个页面浏览量——比2017年1月增加了近40%。我们希望通过这样一篇文章,来带你了解...

    2018-02-27