用Sketch 做 iOS ios ui设计尺寸规范时,一般选用哪个尺寸

界面设计工具 Sketch 的使用体验如何?
按投票排序
大概用 Sketch 用了将近一个月,原来是一直用 Illustrator 做界面设计。Sketch 有很多优点,但是同样的也有很多不爽的地方,大概列举一下,供参考:优点:快,用 Sketch 好像没有冷启动时间一样,这也就是为什么 AI 和 PS 需要启动画面OSX 支持好,原生全屏,原生的版本控制,支持 Retina功能集足够,支持贝塞尔曲线,支持布尔运算,支持文字转曲,支持图层样式功能亮点原生支持 @2x 图片导出保存切片时,可以选择导出的图层。如果在背景上画图标的话,不用像PS那么苦逼多个图层样式叠加,一个样式可以有n个阴影,基本上用 PS,AI 做出来的效果用 Sketch 没大问题。方便的阵列生成,有一个图形快速生成 n×n 的阵列,有内建的功能。支持 CSS 样式复制每个顶点的圆角半径设置 (PS内牛满面)比 Adobe 好用的智能辅助线,不仅可以对齐,选中之后按住 option 还可以量距离Sub-pixel 的文字渲染,这个 Adobe 从来没做到过。像素对齐,这个 PS 和 AI 也是痛点,但是 Sketch 也有小问题。不限制大小的画布,这也是 PS 的一大痛点。缺点快捷键覆蓋率不高,和 Adobe 系不一样 (比如R是矩形,Adobe系一直是M),且不好自定义。像素图像编辑功能弱到爆,相当于没有。蒙板功能难用到爆,哪怕我只是想 Crop 一张像素图,也要画个路径,选中之后做蒙板。只支持 SVG 的导入,不支持 psd, ai 路径的导入,复制粘贴群组内编辑比较弱偶尔不稳定,不明原因地变慢文字编辑工具属于刚刚能用的状态&del&不能设置虚线和箭头&/del& Update: 可以设置,Border 那里有下拉菜单……最大的缺点:Sketch 文件属于没人支持的状态。你不可能永远不把原文件给别人。既然一个工具能让我用将近一个月,并且有相对稳定的产出,这个工具肯定是足够一般的用途了,但是要挑战 Adobe CS 这些大块头,还是不太现实,比较适合小团队,做一些简单的界面(话说现在扁平化流行的年代,用 Sketch 倒是刚刚好)。秀一个 Sketch 画的,并不复杂,但是比较典型的比其它工具都方便:
如果全团队是Mac的话,Sketch是非常好用且适应现在的设计趋势的。我们公司现在已经全部都用Sketch了。Sketch尤其适合设计师职能不细分的中小团队和个人作品的制作。线框到视觉稿可以在一个软件里完成,能省去不少时间。Sketch的用户社区也比较繁荣健康,让人挺有信心继续用下去。(Sketch的扩展开发比PS容易的样子,我看github上还有人做了自动生成iconfont之类的高级脚本……)其他回答基本都只是在特色功能上评论,确实,这软件一开始的印象可能只有小巧便捷够用。但用多了后就会发现他最好的地方不是比PS多了什么功能,而是针对UI设计的操作、交互模式,用起来非常高效。PS因为要考虑摄影用户的使用,并不能针对UI设计师做最优设计。有些回答中说道的切图、测距等功能,其实最新的PS CC也能胜任(其他很多功能我相信要在PS上出现也只是个时间问题。跟PS比功能是很难有核心竞争力的),但PS的基本工具的操作/交互方式从来不是对UI设计专门设计的(我想这很难改变)。而这正是Sketch的取胜之道。UI设计时,最频繁的操作有选择/移动,整理图层、更改属性/样式。这3样东西是互相影响的,Sketch在这3方面都做得挺好,就完成了1+1+1=5的出色体验(虽然有一些是矢量软件天生的操作优势):整理图层UI设计中得图层,和照片编辑时很不同的一点是,模块(or板块or分组)之间大多数不重叠,因此图层顺序也就相对不那么重要。只要对象能够被用户方便的选择到(后面讲选择功能的设计),图层的顺序很多时候是无所谓的。事实上浏览图层面板是低效的,不管缩略图还是文件名,人的读取效率都是不够理想的。Sketch通过更适宜的基本功能设计,很大程度上减少了用户对图层面板的依赖程度(不用去看),不仅直接简化了操作,也使用户可以更专注于画布上得内容。不要小看Forward和Backward的设计。Sketch的这个功能设计地非常好。首先这个功能的运作方式非常高效,它会考虑到遮罩关系,不做无意义的顺序变动。比如从上到下有a/b/c三图层,a遮着c了,但是b在其他地方,那我对c执行一次forward,c就是直接跑到a上面了(c/a/b),而不是只傻傻地提升一个级别(a/c/b)其次它只改变同级别内的图层,所以图层组内的东西怎么forward都不会跳出图层组。相比PS,图层一多,拖动来改变顺序太痛苦,用forward和backward每次只移动一层,低效,而连按太欢了又可能一不小心把分组逻辑搞乱了,必须小心翼翼复制、粘贴Sketch中复制、粘贴的操作和日常其他软件里的复制粘贴很相似。选中图层or图层组的情况下command+c复制,command+v粘贴。另外很重要的一个设计是,当前选中的对象决定粘贴出来的东西在哪个图层组里。这样大部分复制粘贴操作是不用看图层面板的。而PS里,ctrl+c和ctrl+v只能复制像素(选区),图层/对象的各种复制都远没有Sketch那么爽快,因为你必须通过不狗直观的图层面板来决定新图层的上下关系和包含关系。选取、移动工具这个最基本、最重要的工具设计的好不好,影响是巨大的。PS选择分为矢量的选择(A)和位图的选择(M)和图层的选择(V),略微复杂、繁琐。比如我现在要改变一个矩形矢量图层的圆角参数,我得先V切换到图层选择工具选中图层,然后A切换到矢量选择工具选中该路径,然后属性面板里才给我出现了圆角的参数。而Sketch里只有唯一的选择工具,一统天下。Sketch里的选择工具,通过双击可以把选择范围的层级深入一层(也就是可以选图层组里的东西),这样即使是嵌套了很多层图层组,每层还好多个图层组的情况,也可以很方便且逻辑较清晰地进行对象的选择。这个双击使得用户更加不需要关注图层面板。而PS里的选择工具有两个模式,一个是选图层组,一个是选图层。图层组模式是不能选图层组里的图层;图层模式时不能直接选整个图层组。双击?那是什么?Sketch里的默认的工具是选择/移动工具。其他工具都是画一下就切换回选择工具。你说你要连续添加很多个图形/元素?用make grid批量复制并布局吧。画好一个东西后接着布局,更加符合绘制UI的情况。而PS里你画好一个图形后还得按着ctrl才能移动。(PS的操作就是ctrl基本不离手)更改属性/样式Sketch里的涂层样式是在右栏里常开的。而在PS里先要在图层面板里找到当前选中的涂层然后双击打开样式编辑窗口,而样式窗口的弹出位置又是不那么确定的(尤其是多屏环境时),这么多次的视线和鼠标的移动,是非常低效且烦人的。其实这点PS也是可以模仿的,只要开发个图层样式的面板,然后这个面板可以自定义显示哪些属性(不然会过多塞不下)就可以了。但Adobe没有,我也没搜到这样的一款扩展/插件。经我这么一番叙述大家应该可以意识到了PS做UI设计是多么繁琐。sketch不仅简化了流程,还让左手(不用太多时间按着ctrl)和眼睛(不用去仔细阅读图层面板)更加轻松。它带来的隐藏的效率提升是比较可观的。至少操作体验是很好的。Sketch还有很多人性化的设计细节。各位用着用着就能体会到。简单明了的功能加上以上各种亲切的交互设计使得这软件的上手难度极低。我转向Sketch的时候除了个别疑点稍微搜了下文档,总体边学边用的过程都毫无阻碍。感受到的相对的不足有:团队小,软件没有Adobe的产品稳定,遇到bug时基本上就是毫无办法。也不知道什么时候会修复。大点的项目or大尺寸位图多点,性能就很一般了。之前做一个web app,背景整个是个位图,结果artboard也就十几张就比PS还卡了。Sketch如果功能上能满足团队需求,是目前的不二之选。它决不是简单地针对UI设计开发特别的功能、去掉不太用的功能,而是在基本的操作层次上给UI设计师带来了得更好地体验。
经过几个月在工作上的实际使用,上手容易,产出不错,在Ui设计上基本可以完全替代photoshop,目前已成为我的主力设计工具。它的优点其实就两个:一是提高工作效率,二是增加鼠标寿命。缺点也很明显,位图处理不能。------------------------------------------------------------------------------------------------------------日补充目前sketch已经更新到3.0版本,估计不久的将来会正式发布,各种功能加强,例如导出功能支持多种缩放尺寸,切片路径作为单独的文件可管理,Greate Symbol(虽然还搞不清怎么用但看起来很厉害的样子)等等...,着实的更加方便。------------------------------------------------------------------------------------------------------------有图有真相。界面:图标:文档:Sketch的优点:自动保存为了减少photoshop的崩溃的损失,每一个Ui设计师都会不停的command+s,这其实是一件很残忍的事,你可以打开自动保存,但你无法预估它的保存时间,但随着文件越做越大,它来这么一下,你就得停下不动,这事尤其的蛋疼。sketch可以自动保存并且最关键的事,它不会打断你,你不必神经质的每隔几分钟手便抽动一次。矢量图形在sketch创建的图形全部是矢量的,在放大缩小就很方便,不需要调整太多,还有一个很好的小功能,就是可以一键把0.几的像素变成整数,而且可以很方便的在矢量视图和像素视图之间进行切换。可以很方便的创建一些重复形状构成的图形。测量工具我们在用photoshop做界面设计时,为了元素位置的精确,需要用蚂蚁线或者切片工具来测量元素与元素之间的距离,画完蚂蚁线或切片如果有变动,你还得再量一遍。在sketch在这点就会节省你很多时间,并且让我们的设计更加精确,只要选中这个元素,按住alt键,然后再把鼠标点选其他元素或者移动就可以实时的显示上下左右之间的距离,这是我认为sketch的一个最棒的功能。圆角矩形sketch对圆角矩形的创建是很方便的,既可以控制四个角圆角大小,也可以双击,对单个圆角进行调整,并且可以随意调圆角矩形,圆角也不会变形,当然photoshopcc也解决了这个问题,但它的操作很笨重。还有一个好处是,你可以点击右边的数值,并拖动鼠标,可以实时看到图形的变化。方便的选择元素左侧图层和分组栏,可以看到矢量图形的的缩略图。当用鼠标掠过画布上的各个元素的时候,左侧会出现一个蓝色框对对焦到我们选中的元素。另外如果你是一个分层分组科学合理,命名规范的设计师的话,那sketch的搜索会让你寻找界面元素的时候更加方便,并且随着上下点击会对焦到你选中的元素。图层样式sketch的图层样式和photoshop一样,渐变,描边,内外阴影,不同的是sketch可以在一个图形上添加最多四层完全不同的渐变,添加无限的描边和内外阴影。我们创建比较复杂的图形质感的时候也就更加方便。文字的样式也可以单独的保存起来,方便对多个的文本进行调整。无论图层样式还是文字样式都可以用alt+command+c或v进行粘贴。钢笔工具sketch的钢笔工具也比photoshop好用,具体表现在可以方便控制像素对齐或半个像素对齐,而在photoshop中虽然也可以对一个像素对齐,但设置和切换很麻烦。最棒的是,它可以画完美的弧线,只要按住atl键拖动鼠标即可。网格工具又是一个photoshop比较渣的点,photoshop不用第三方的网格插件基本就不可用,在sketch可以很方便的对网格进行编辑,有传统的方格,也有横向和纵向组成的长方形。文字渲染这个点其实说的是sketch支持sub-pixel渲染,翻译成中文可以说是次级像素,我随便截图给大家看一下,这种渲染方式是以前的旧技术,为低分辨率的显示器而生,现在绝大多数的系统和屏幕都是有的,当然有的同学要抬杠了,iOS的屏幕上没有,实际上是有的,只是Apple默认关闭,为什么关闭?1是iOS的现在的屏幕的像素密度不需要,刚才也说说了这是一个旧的技术,2是由于底层技术上的原因所以不支持。导出切图画切片和输出切图对设计师是最痛苦的一件事,痛苦程度随着切图数量和设备屏幕的多少不断递增。sketch输出切图很方便,等待时候比photoshop真是短太久了,因为是完全的矢量,可以无限缩放,并且可以同时输出一倍和二倍图。还可以自动画出切片大小。甚至可以直接把切图直接拖到指定的位置。效果图镜像sketch是原生支持在iOS设备上查看设计稿的,可以下载iOS的App,就可以在iPhone,iPad实时查看设计稿了。稳定和效率sketch可以添加无限的画布,可以把界面全部在一个文件内完成,有点像ppt,每页都可以建立多个画布,把多个界面平铺,即便设计很多界面也不会觉得运行效率上有所降低,由于都是矢量,所以文件体积也比photoshop小很多。所以最关键的一点就是稳定,彻底把你从不停的command+s解放出来,也不用在一个psd固定的内只建几个界面。更新勤快sketch工具是一个年轻小团队,更新比较勤奋,对于用户的反馈也很及时。售价448元,安装包不到10m,破解也是方便,但建议差钱的和不差钱的购买正版,拿出人民币真正的支持这些能够切实的解决问题的人。支持eps和svg的导入可以把psd内的矢量文件转成eps或svg格式,可以在sketch内打开。Photoshop的槽点:不适合UI设计师在photoshop诞生时到现在,无论从官方的宣传,还是迄今为止的的版本更新点,都可以看到,photoshop的定位就是图像处理软件,Ui设计师从来都不是目标受众,我们使用的只是刚好能够提供界面设计功能的photoshop,但绝对谈不上就是给ui设计师准备的界面设计工具,打个比方,photoshop是全能,臃肿,笨重的工具箱,里面有钳子扳手改锥锤子等等工具,但我们需要只是一把用来削苹果的小刀。不适合Ui设计Ui设计很重要的一个点就是要求精确,同一个界面,你还得适配多种尺寸屏幕,这个过程在photoshop会花去你大量的时间去调整,像素,图标,文字,距离等等,因为photoshop从来没说它是个专业的排版工具。Ui设计对“对齐”这个词格外敏感,所以你需要对齐像素,对齐文字,对齐图形等等。对齐这些元素需要辅助线,网格等,但在photoshop这些原生工具真心难用,以至于我们必须下载第三方插件解决这个问题。在设计的最后,画切片,输出切图的时候往往是是很痛苦的。photoshop一直没有一个好的解决方式,只能第三方来了。我们还需要一个能实时在手机屏幕上查看效果图的工具,我们可以依赖photoshop第三方插件,但毕竟是第三方,总会有些问题,比如为了实时预览你的psd画板大小始终是640X1136,并且时不时的卡死等等。运行速度慢photoshop的年龄大概将近30来岁,第一个正式的版本是1990年发布在mac上的,当时只有800多k,发展到目前的photoshopcc,有1个多g。从安装包大小,启动速度,处理文件时的等待时间,即便优化重新写过,在最新的photoshopcc还是让人感到慢,卡。我们不能抱怨,因为photoshop的产品定位就是图像处理,静态的动态甚至3D的,什么都可以做。更新速度慢当时买了retina本子是没办法用photoshop的,过了几个月adobe才发布更新。不会随着拖拽变化的圆角矩形又等了多久,字体渲染要等多久,是因为产品庞大,尾大不掉,响应速度特别慢。photoshop有着广泛的用户群体,UI设计师只是其中的一点点,我们的需求不会被第一时间得到响应。弹出框我相信这是设计师最难以接受的情景就是各种各样的假死或真死的对话框,绝对菊花一紧,如果运气好话也保存过重新打开photoshop就好了,就怕一打开是几个小时前的成果,或者更惨点儿打不开了,文件没有备份,只有一份,遇到这种情况真就除了卧槽没别的辙,只有重新来过。UI设计师在Photoshop生存要点每5分钟按一次command+s。Psd文件不能大于30M。Psd内不能超过6个界面。安装Psd缩略图补丁。使用智能对象。打开Psd,保存,或者输出切片要控制情绪。... ...工具并不是最重要的,但时间很重要。
用Sketch有一段时间了,特别适合用来设计web/移动端的界面,无论是上手速度还是工作起来的设计速度都甩ps/ai好几条街。相比与Adobe的东西,Sketch较为专注,自然也较为轻量,值得一试。ps.最近翻译了一篇相关的文章,可以看下
Sketch做绘图的确不靠谱,但是现在做iOS7和Windows 8的扁平设计,效率比使用PS不知道要高多少。一些复杂的图像可以从PS导过来作为库使用,我现在已经全面从PS撤离转Sketch了。源文件问题,Sketch的源文件现在已经蛮多的了,虽然比起PS还是少,但基本够用,使用别人源文件的难度也降低了很多。还有个最大的好处是,我发现新的设计师上手PS比上手Sketch要难得多,这就意味着独立产品开发者,可以自己一个人用Sketch+Xcode5完成设计到开发的全过程。
我只想说,我那天旋转复制了120个矩形,就再也打不开那个文件了。。。
sketch在UI设计,尤其是移动终端和扁平化风格下是非常具有优势和效率的。硬伤是没有windows版本,不过技术上应该不是很难实现双版本。adobe一定注意到这款软件了,是收购还是改造现有产品?我觉得有可能会收购。
恩,用Sketch,作为产品我可以搭配Origami做交互(这个暂时还学得不太好)方便上手,有一些设计知识,半天可以上手。产出效率非常快,export功能可以小刀export每一个单独的元素。show一张我用学的Sketch教程吧,20分钟做的一个icon。我来更新一下,每天十分钟,一周左右的画布。
说实话,不太好用。还是说说有点,原生mac程序,制作ios & mac的界面和图标来还是非常顺畅的,从尺寸到格式,无不方便。但是——比较起重造型的AI的操控来说,太有限的布尔运算功能,羸弱的剪刀功能以及基本上没太大用处的剪切蒙版都是大软肋呀;比较起重效果的PS的操控来说,......好吧,直接在PS里面做导入进来就好吧!Sketch,要想替代ADOBE2件套,还有很长的路要走!
用户体验太好了,所以注定不能成为专业设计师的主力设计工具.
有了sketch,让我等技术宅终于可以自由自在的自己设计想要的ui效果了(当年一拿起ps就一头冷汗),于是果断买了(限时促销ing,要买的赶紧了)。
专门为UI设计而生的工具,像我这样的非设计师,再也不用看视频看书学习PS了,分分钟上手,随便画画就能产出低保真的线框图,稍有积累就可以做高保真,真实我等的福音。大快所有无基础人员人心的大好事。其实OmniGraffle的新版也不错。
说下感受:优点:做界面排版速度杠杠的。自动对齐,像素对齐。导出资源的功能很强大。自动保存也很贴心。快速在移动设备上预览。不足:画图工具还达不到AI和PS那么方便。钢笔工具。形状路径调整,比ps和ai弱很多很多。因此,工作中会这样,图标会在ai里画好。再拖入sketch里。sketch里就画些简单的形状吧。
做一点补充。sketch的钢笔工具其实做了很多优化,个人认为比ps甚至AI都要好,和sketch一贯的风格一样,在提升UI设计效率上下了大功夫。具体的操作,你看过下面我总结的一些快捷键就知道了。o 单击v进去钢笔工具o 双击锚点可以在straight和mirrored之间切换模式o 单击tab可以选中下一个锚点o 单击1,2,3,4可以切换模式(straight,mirrored,disconnected,asymmetric)o 按住commend拖动锚点关闭smart guides(就是那条水平垂直方向和其他点对齐的线)o 按住commend拖动手柄可以自由定位手柄位置(直接切换到disconnected)有人可能不知道straight,mirrored,disconnected,asymmetric都是些啥。进去钢笔工具模式后,右侧inspector可以看到这四个按键。straight(直线角):点击画布时添加一个直角,没有弧度。两个锚点得到的就是一条直线。mirrored(镜像):两个锚点镜像对应,也就是两点距离相等且相互对立。通常是默认模式。disconnected(断开连接):两个锚点完全独立互不影响。asymmetric(不对称):两个锚点相互对立,但是距离独立不受影响。其实掌握1234这四个快捷键钢笔工具就可以用的很溜零阻碍了,在不知道这个快捷键之前转换模式我还得一个一个在inspector上点,非常浪费时间。希望大家使用愉快~
对于界面设计师来说,尤其是安卓版本,简直是彻底解脱的感觉。装2个插件,自动生成安卓的多个版本,自动换算dp值,自动标注,还可以自动换算成DP值。IOS版本可以使用px值。以前用markman标注,也还是得手工处理呀,这下好了,全自动啊,感动死了!这里的介绍与教程
要自己学习Sketch3,就下载我利用业余时间做的《Sketch3中文手册》吧,可以在UIweek官网上下载到,使用ibooks查看
目前已经成为团队的主力设计工具,产出效率和质量可以完全替代ps。但是如果开发用windows,那么还是需要单独标注。
对啊Sketch支持Windows么?是不是完全不支持啊?
no mac!!!!!!!!!!!!!!!!我额很想学
只有我感觉不好嘛。。。我觉得这个东西是为程序员等设计领域的门外汉量身打造滴呃。。。SKETCH设计教室!带你了解超好用的Sketch插件
优秀网页设计联盟-SDC-网页设计师交流平台-听讲座,聊设计,找素材,尽在优设网
& / & & / & 正文
Hi,我是优设小编
SKETCH设计教室!带你了解超好用的Sketch插件
通过上两节的文章,大家可能已经对这款软件的基本操作有了一个大概的了解。但很多朋友可能会有疑惑,”好像的功能也没有那么强大啊?””也就是个普通的矢量绘图软件吧?” 恩,你错了,因为你忽略掉了一件东西—插件。 插件是让保持强大的独门绝技,很多软件看起来不支持的功能,通过插件都可以实现,大大提高工作效率。 下面,静电来介绍下sketch常用的,受大家欢迎的插件。
一、安装插件的方法
sketch有两种插件安装的方法,一种是传统的安装方式,另一种是通过一款叫sketch toolbox的小软件来快捷安装。
首先看第一种安装方法,打开sketch(这里以最新版本的sketch3 为例),然后选择菜单 Plugins&Reveal Plugins Folder,即可打开插件文件夹。 打开后即可知道路径,不用刻意去记这个路径在哪里。
打开后可以看到以一个个文件夹命名的,就是一个个的插件。以下就是静电的电脑中安装的插件。 目前sketch官网上零星分散着一些插件的压缩包(相关链接:) 我们可以通过下载相应的压缩包,并解压到上述的Plugins下面,然后重启sketch,如果成功,在plugins菜单就会出现相应的选项。
或者,可以直接解压文件夹,选择里边的以。sketchplugin结尾的文件,双击直接安装,出现下面的提示,则安装成功。
但是,使用这种方法安装插件,需要一个个的找插件,非常麻烦。那么大家还记得静电在第一节的sketch教程中给大家的两个下载地址吗?一个是sketch安装文件,另一个就是关于插件的sketch toolbox。地址再贴一次给大家,没有下的同学一定要装哦(sketch toolbox下载地址:),下载并安装后即可使用。打开sketch toolbox,大家会看到各种各样的插件,如下图:
只需简单点击install按钮,即可方便的安装插件,再也不用费时费力的一个个的找了。
二、插件推荐
ok,这个时候大家可能会有选择恐惧症了,这么多插件,我要从何选起呢? 别着急,静电给大家推荐几款最常用的。
顺便推荐一下Photoshop的高效插件!
推荐插件:Content Generator Sketch Plugin
做app设计的时候,我们可能会使用各种各样的头像来营造真实效果。 但寻找头像并做遮罩是一件非常耗时耗力的事情,但我们又不想把头像做的千篇一律对吧? 这个时候神器来了,快来下载这款 Content Generator Sketch Plugin吧。 只需选中你要填充头像的图形,他会帮你随机选择并填充合适的图像。 看看效果吧。
这个插件比较大,大概80m左右,所以请多耐心的等待下载完成。 如果实在下载很慢,那么请使用这个网址使用迅雷直接下载,然后按照上文的方法解压并拷贝到文件夹中:
当然随机生成用户名也是可以的。
还可以有随机的大段文本生成。
恩,这样的效果图,岂不是比做一个元素然后不断拷贝粘贴帅气多了?毕竟,我们的效果图要模拟最真实的效果不是吗?
推荐插件:Sketch Measure
我们在做完设计稿后,需要告诉前端开发工程师,图片是多大尺寸,这段文本是多大字号,间距是多少。这个时候,sketch messure就派上用场了,相比传统的标注方式,在软件内标注极大提高了我们的工作效率。我们只需选中两个元素,然后选择plugins菜单, 就可以标注图片尺寸,文字字号,间距等等等等,这一切不需要你自己一个个的打字上去哦,只需要告诉sketch你要标注那些元素,要标注什么,就可以一键搞定了。 效率极大提高,我们可以腾出更多的时间来更好的设计我们的作品了。
tips:要标记,首先选择要标记的一个或者多个元素,然后选择plugins里的标注方式即可完成自动标注了。标注完成的设计稿,直接输出就可以给前端开发工程师了。
另外要注意的一点,标注的时候,一定要选对相应的Design Resolution 。 安卓的按照安卓的解决方案标注, ios的按ios的方式标注。这样才能确保你的设计稿被前端工程师正确的实现出来。静电认为,这个标注非常方便,特别是标注字体的时候,插件直接按照标注解决方案换算出正确的字号,方便开发工程师调用。对于ios和安卓的标注,一般各自选择一套即可。 比如ios选择Retina,安卓可以选择xxhdpi或者xhdpi。
推荐插件:icon stamper
icon stamper是一个可以一键生成iOS多种图标尺寸的插件。 你只需要做一个最大的图标,这个插件可以自动帮你生成一整套各种尺寸的图标,然后可以一次导出。不用在ps中一个一个的设计啦。 来,让我们看看这款插件如何使用。
首选,选择菜单 File & New From Template & iOS App Icon
第二步,在名为iTunesArtwork@2x”的artboard中设计你的图标。 设计完成后,选中所有元素,按command+G组合成一个组,并选中这个组。
第三步,选择 Plugins & icon-stamper & Icon Stamper 即可生成各种大小的图标了。
第四步,选择File&Export,即可批量导出。
推荐插件:Rename it
对于app设计者来说,我们通常需要切出不同尺寸的图标来适应各种机型或者分辨率。这个时候,我们需要将某些参数体现的文件名或者图层名称,方便我们非常快速的知道,这个图层的属性,比如长宽高等等。 或者,我们需要批量将文件或者图层进行命名。 Renameit 插件可以轻松帮我们办到。
目标:将图中的三个形状按照宽高来批量命名。
第一步,选择要批量命名的元素。
第二步,选择Plugins & Rename it ,在弹出的对话框中,设定命名规则。 这里要说明的是, %N %W这些都是变量,会根据图片的尺寸来自动填充,我们需要的是设定这个规则即可, 接着我们输入下面的参数(请自己填写文件后缀),然后确定。 这个时候图层就会按我们要的规则明明。
图层命名规则参数:
- 输入号 “+” 和你想添加的文本即可在适当的位置添加固定字符(如:+ button)
“%N” 将图层名按顺序加上数字后缀。“%n” 则是加上倒序的数字。(如:item %N)
- 保留并移动原图层名: 输入新的图层名时,使用 “*” 号代替原图层名。(如:big * button)
- 添加图层的长度和宽度:输入 “%w” 或者 “%h” 来添加图层的长和宽。(如:rectangle %w 或者 rectangle %w x %h)
推荐插件:Duplicator
使用这个插件,我们可以将一个元素有规律的复制并排列,并可以选择复制次数及间距。 使用很简单,静电就不截图演示了。
推荐插件:Sketch Qrcode
生成矢量二维码,直接在sketch中解决,不用再去找二维码生成网站了。
ok,sketch强有力的左膀右臂已经介绍完毕了。有了这些插件,我们可以更方便的进行设计。 下一节,我们重点谈谈sketch的钢笔工具,毕竟,矢量软件嘛,路径什么的必须得及其熟练才行,小伙伴们,如果发现有其它好的插件,欢迎一起交流,也欢迎关注我的微信jingdesign91。 我们下期见。
Sketch设计教室系列好文!
附上贴心小技巧:
从零开始学Sketch教程合集!
原文地址:
【优设网 原创文章 投稿邮箱:】
================关于优设网================
“优设网“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:。
设计微博:拥有粉丝量76万的人气微博 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:
订阅更新:您可以通过
【推荐!设计师必备网址导航】
我们的团队
大家在关注}

我要回帖

更多关于 ios设计尺寸 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信