设计干货|聊聊设计师玩转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

相关推荐

  • 在用户体验中询问用户的4个问题(译文)

    该客户的体验是一个思考的人从我们产品的认知度如何去成为一个真正有用的抽象用户,但抽象并非最终有意义。要真正改进您的产品,您需要与您的用户交谈。无论是面对面的,应用内的还是通过电子邮件发送的调查,都需要花时间与用户签到并保持对他们最重要的事情。这种双向反馈也是您可以用来帮助人们通过漏斗最有效的工具之一,并最终帮助他们坚持成为您产品的惯用用户。让我们看看如何从战略上使用问题从用户那里获得正确的信息 - 这种信息将帮助您采取行动。如何提出从收...

    2018-02-26
  • 网络心理学与用户体验:如何使用户爱上我们的产品?

    什么是网络心理学?网络心理学(Cyberpsychology)是研究人与科技交互的背景下人们的心理与行为的新兴学科。它关注网络世界以及网络对人们行为产生的影响。近年来,网络心理学逐渐脱离其他研究人类行为的学科(如社会心理学),形成了自己专门的心理学研究领域。了解来自这个新领域的研究可以帮助设计人员更准确地预测人类在使用不同技术时会如何反应。因此,在思考如何使用户爱上我们的产品时,了解网络心理学是一个非常有用的手段。通过更好地理解用户与技...

    2018-02-23
  • 用户体验的目标是做到“自然”

    不想错过精彩的荔枝话题,点击文章左上角关注“荔枝3十1”。每晚10:00点荔枝陪你说一事晚安文/励志妹图/荔枝工作室经作者授权发布用户体验的目标是做到“自然”导语“自然的体验是不需要用户去思考的。”1需要用文字来解释的交互不是好交互(1)我观察3岁的小孩用iphone很容易上手。比如,iphone的开锁,小孩甚至不用学就会用。因为触摸是人的天性,同时iphone通过箭头图标,向右滑动的文字条(小孩看不懂文字),来暗示手指触摸向右滑动来解...

    2018-04-28
  • 澳洲留学 | 交互设计专业硕士大解析

    📢:1⃣️条信息,足以改变你的未来!欢迎关注本平台交互设计在中国是一个新兴的产业,但是随着中国电子系统对人们生活影响的逐渐扩大,中国交互设计师将面临一个很大的缺口。什么是交互设计专业?1.words 语言语言是互动的最基础部分。人与人之间的互动是通过语言来进行基本交流。人也通过语言与机器进行交流。这里的语言可以是文字形式、语音形式、或动作形式等。在美国,一个好的交互设计师,也是一个很好地copy writer,需要具备良好的语言沟通和文...

    2018-04-06
  • 2019届及以后实习|互联派、苹果、百度等一大波实习来咯!

    今天的实习信息也是满满的哦~快跟着派派一起来看看吧~互联派、苹果、法国优格、百度、京东等多个岗位等你投递~面向人群2019届及以后,包括2019届、2020届、2021届同学,以下的岗位都可以投递哦~岗位预览◆互联派/用户运营实习生/大连◆互联派/新媒体运营(内容编辑)实习生/大连◆网易有道广告优化实习生◆苹果/数据分析实习生/北京◆法国优格/财务助理实习生/上海◆百度/HR实习生(招聘方向)/北京/可转正◆百度/人力资源实习生/北京◆...

    2018-03-23
  • AxureUX电商平台WEB端交互原型模板正式发布

    01作品信息作品名称:AxureUX电商平台WEB端交互原型模板作品类型:模板类发布日期:2018-02-25最新版本:v1.0主要适用:Web端软件版本:Axure 8.0文件大小:13MB作品编号:TEM006作品售价:¥169.00详细介绍及演示:http://www.axureux.com/home/templateswebec.html复制以上链接在浏览器打开或点击文章底部阅读原文,建议在电脑上查看原型演示。02作品介绍本作品...

    2018-03-04
  • Axure案例练习-点评打分效果

    现在,外卖也好,购物也好,打车也好,点评打分是网站常见的用户互动的功能,一般都是1~5分之间评分,分值对应几颗星或者几颗心,当用户点击确定之后打分就完成了。下面我就以大众点评网为例,制作了打分效果。做之前,我们先来分析一下,点评共涉及到6个状态:没有打分的时候、一颗星的时候、二颗星的时候、三颗星的时候、四颗星的时候、五颗星的时候。根据之前的学习,知道点评区域是一个动态面板,这个动态面板有六个状态,当鼠标分别悬停时,切换出不同的状态。我们...

    2018-04-29
  • 从了解用户的注意力开始,创造更优秀的用户体验

    作者:Norbi Gaal译者:优设网-陈子木链接:https://www.uisdc.com/introduction-to-human-attention这是一篇源自心理学家和 UX设计师的关于人类注意力研究的文章。在产品团队中,用户体验设计师的工作是输出高可用性、易用性的可交互数字产品。当我们在设计这些产品的时候,我们花费了大量的时间来探索不同的研究方法,了解不同用户的行为、习惯和需求。对于绝大多数的用户而言,在行为模式和心理结构...

    2018-04-07
  • Axure产品原型在手机上运行的完整教程

    图1 模拟丁香园的高保真原型在一般的开发工作之前,我们通常会设计产品原型,大部分为axure绘制的线框图作为产品的PRD文档,供UI和开发进行前期工作,但是有的时候客户、领导想在开发之前,看到产品的概貌,就必须做产品的高保真原型进行模拟,这时如果做出来的原型能运行在手机端,那再好不过,如图1(注:上图是仿照丁香园的家庭用药,做的一个高保真原型,算是免费给丁香园打广告,是不是考虑给我点广告费?哈哈)。原型制作软件有挺多,不过个人使用之后,...

    2018-03-06
  • 全面解读!人工智能如何改善五大用户体验?

    点击【阅读原文】,即将IPO独角兽,抓住上市前最后的机会!最近两年人工智能技术在金融、安全、交通、医疗、公共服务和制造业等领域逐渐落地,随着技术的成熟,人工智能将会在更多领域影响人类的生活。以人为本的人工智能设计会变得更加重要,本文会从安全性、效率、易用性、场景化、个性化五个方面阐述人工智能如何改善现有的产品和用户体验,这五个方面存在着各种联系并相互影响。安全性越接近系统底层的技术越影响用户体验,例如手机中毒或者信息被盗都会对用户产生巨...

    2018-05-05