设计师用Sketch做设计稿时是用1倍图还是用2倍图做

设计师用Sketch做设计稿时是用1倍图还是用2倍图做

相信很多人跟我一样一直在纠结到底用一倍图做ui设计还是二倍图?国外的设计师喜欢用一倍,国内的设计师比较多用二倍,实际上两种选择都有自己的好处,今天就打算给大家抛砖引玉一下。

375x667px :一倍图(@1x);750x1334px:二倍图(@2x);

1.PS和Sketch的差别

PS是光栅图像( Raster Image )(光栅图也叫做位图、点阵图、像素图 )。所以Photoshop十分依赖DPI,AI和Photoshop不同的是,它是独立于DPI的,因为它依赖矢量图。与光栅图相反,图像生成采用矢量图,依靠数学公式计算,以编程方式重新调节大小并且不会损失图片质量。

Sketch 是一款矢量绘图应用,这意味着你在调整形状的时候一定程度上可任意缩放。

ps画板

Sketch画板

Sketch官方给出默认画板尺寸是一倍图尺寸,PS给出的是二倍图尺寸,原理上面已经简单讲解过。所以如果做iOS 的ui设计的时候,PS一般用二倍图来设计(750x1334px),Sketch可以选择一倍图(375x667px)或二倍图(750x1334px)来设计。

2.@1x设计的理由

Medium上有篇文章专门讲述了用@1x设计的理由,我就吸取其精华,然后结合实际情况给大家讲解一下

1) :少量数学计算

相对来说可以减少一定的数学计算,如果@2x设计时转换@3x需要乘以1.5,相对来说转换会比较麻烦。但是@1x设计稿如果要转换只要相应的乘以2和3即可得到对应的@2x和@3x。

2) :安卓和iOS共用一套

iOS 设计尺寸375x667px,安卓360x640px;安卓和iOS可以共用字体、图标和间距。可以更加方便里做好统一的设计规范

3) :快速导出

安卓

iOS

sketch42版本可以在Prefences—Presets里面设置好预定的导出尺寸,快速导出的优势其实已经相对来说不复存在了,但是一倍图导出相对于二倍图导出比较直观,3x的后缀@3x,2x的后缀@2x,一一对应,不容易搞错。而且当你点击Export的右上角“+”的时候,默认都是整数倍数导出,导出仍然更加快速便捷。

如果你是二倍图做设计,可以设置成如下图

@2x导出预设

4) :与开发沟通无碍

Zeplin和Sketch Measure是两款优秀的标注插件,都可以设置当前设计稿的Density(分辨率),所以其实一倍图和二倍图并没有太大的区别,唯一要注意开发视角看到的一定是转换成一倍图的标注。

举个例子:如果退出按钮高度:375x44px(@1x),750x88px(@2x),开发看到的都是如下的标注,所以二倍图设计稿的童鞋需要在跟开发交流的过程中要心里默默的除以2.

开发视角

5) :图片尺寸和文件更小

如果用一倍图的时候,设计稿中难免会有需要填充图片的地方,所以一倍图的图片所需尺寸必然会比二倍图小很多,不提倡用剪切蒙版的方式来放置图片(除非你对图片的呈现视角有很强的需求),一般可以通过填充来放置图片,可以让图层更加干净简洁。二倍图设计的童鞋可以通过File—Reduce File Size或者裁切图片来缩小图片大小来达到减少文件大小。文件大了以后,尤其图片很多的时候,会占用很多内存,导致卡顿。一倍图设计稿导出二倍图的时候注意图片有模糊的可能。

图片导入

6) :图标尺寸、图片和间距尺寸更加自由

二倍图设计时,图标尺寸必须为偶数,这样才能保证@3x也是整数。图片尺寸可以为奇数只要被2除尽即可,不一定要偶数。

例如,图标:image@2x.png(40x40px)image@3x.png(60x60px)

一倍图设计时,图标尺寸可以为奇数,间距可以不是整数。(小数位都是0.5),但是尽量都是整数比较好。

例如,图标:image.png(15x15px),图片:170.5x170.5px;

7) :更适合国际化趋势

国外设计师的设计稿、平台设计规范以及大部分源文件素材用一倍图来做的居多,Sketch自带的模板都是一倍图设计的,调用iOS和Android的官方控件相对来说会快很多,省去了缩放的麻烦。而且不管Apple和Google引入新的屏幕密度都不需要你重新转换。

8) :更省空间

一倍图时,一个Page页可以放置更多的画板,但是二倍图设计时,放置同样数量的画板会显得比较臃肿。越多的画板在同一个Page页可以更加方便的设计师管理页面,保证设计规范执行更加到位。

9) :安慰剂效应

二倍图设计时容易让设计师误以为二倍图会提供更多的空间来填满元素,这样可能会导致点击目标区域变小,字体变小最终导致可读性变差。

10) :跨平台更加方便

使用一倍图导入到目前主流的可交互原型软件(Origami、Flinto、Principle、Form等)内制作可交互原型会有更好的体验。

2.@1x和@2x对比

二倍图设计默认导出的图片是 2x 高清的,可直接使用。

二倍图导出时省去了点击+号 再选 2x ,操作方便。

二倍图做设计时,如果有iPhone 6 可以截优秀APP的图直接PS量取尺寸而不用除以2。

用一倍图的设计稿尺寸,1px的线绘制会用到0.5px,会出现间距对齐的问题!

用一倍图的设计稿尺寸,如果列表高度为奇数时,对齐后会出现讨人的小数点!

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,311评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,339评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,671评论 0 342
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,252评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,253评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,031评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,340评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,973评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,466评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,937评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,039评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,701评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,254评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,259评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,485评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,497评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,786评论 2 345

推荐阅读更多精彩内容