sketch如何做设计稿交互_设计师用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,会出现间距对齐的问题!
用一倍图的设计稿尺寸,如果列表高度为奇数时,对齐后会出现讨人的小数点!
sketch如何做设计稿交互_设计师用Sketch做设计稿时是用1倍图还是用2倍图做相关推荐
- sketch如何做设计稿交互_交互设计师是做什么的——交互设计的历史、现状和未来...
交互设计是定义.设计人造物系统的行为的设计领域,它定义了两个或者多个互动的个体之间交流的内容和结构,使之互相配合,达成某种目的.--百度百科 交互设计师是以人的需求为导向,理解用户的期望和需求的同时, ...
- sketch如何做设计稿交互_用 Sketch 绘制一份美观的交互稿
经常有人问我:"你的交互稿怎么画得那么好看?能不能教教我?" 其实,我更期待听到的是:"你的方案怎么做得这么好?能不能教教我?" 毕竟,交互稿只是需求的沟通工具 ...
- sketch如何做设计稿交互_《动静之美——Sketch移动UI与交互动效设计详解》历程...
随着移动互联网的迅速崛起,对移动产品界面的设计质量和迭代速度都有了更高的要求,市面上开始涌现出一批专门针对移动UI设计的软件,Sketch便是其中的佼佼者.Sketch因其强大的功能以及极低的入门门槛 ...
- sketch如何做设计稿交互_当屏幕可以折叠,交互设计怎么做
折叠屏终端上市,无形中增加了电商平台的开发运维成本.笔者根据折叠屏的特点,提出了三种交互方案,看看如何在折叠屏上展示界面. 2007年,当乔布斯举着没有物理键盘的iPhone向全世界展示他的新发明时, ...
- 人机交互界面设计大作业_为什么说大多数UI设计、大数据、人工智能等培训班不靠谱?...
搜索框中输入UI设计.大数据.人工智能等字,排在最前面的往往是培训班广告,各类网页中更是层出不穷,我要说的是这玩意不靠谱,你说你培训个Javaphthon等还说得过去,这些刚开设不久的新兴热门专业你就 ...
- 系统怎么设计usb启动_在启动中启动设计系统
系统怎么设计usb启动 重点 (Top highlight) Design systems are all the rage now and you've probably seen this ter ...
- 电子产品设计emc风险评估_书籍介绍:EMC设计方法与风险评估技术
<EMC设计方法与风险评估技术>预计于2020年3月由电子工业出版社出版.它是一本全面解读EMC风险评估技术的书籍. 前言与介绍: 本书是基于作者2008年出版的<电子产品EMC设计 ...
- 物流设计大赛优秀作品_第四届广东省大学生物流设计大赛之五邑大学校园选拔赛通知...
比赛介绍 第四届广东省大学生物流设计大赛 为顺应"大众创业.万众创新"的时代大潮,提高大学 生创新精神.创业意识和创新创业能力,加快高素质物流人 才队伍建设,加强各高校师生间的交流 ...
- sketch如何做设计稿交互_设计干货 | Sketch 的交互插件强势更新,再也不用为跳转的事发愁了!...
可能很多人对 InVision 是做什么的不太清楚,这里稍微科普一下,除去需要 VPN 来提速(不是被墙),这家公司应该是目前所有原型工具中最优秀的,没有之一.无论是对于产品的理解.体验的设计,还是对 ...
最新文章
- C#枚举系统安装的所有打印机
- 总监路上的第 1 年,犯了两个小错误 | 程序员有话说
- go语言io和ioutil包的学习和使用
- Windows内核函数的命名
- 上验证cudnn是否安装成功_windows和linux上的tensorflow安装(极简安装方法)
- java transient 和Volatile关键字
- 常用php时间函数 date() mktime() strtotime()
- C语言——冒泡排序法
- es 中关于 term,match, text, keyword
- jep(java表达式分析器)简介
- linux内存管理(十)-页表管理
- 新DELL服务器在F2设置界面下raid的配置
- 使用matlab对路径的字符串进行分割和合成
- tcpip路由技术卷一_计算机网络题库考(2020.9.10晚18.320.30 北京卷)
- 计算机黑屏什么原因,教您电脑黑屏的原因是什么
- MIDI文件格式(一)
- 2019 GDUT 新生专题I选集 L题(CodeForces - 1260B)
- 如何创建网站 网站的创建方法
- 微前端调研及简析SPA实现原理
- 关于CSAPP的学习:如何与如同机翻的文字搏斗及如何快速理解冗长的说明
热门文章
- 7,37,67,97,127,1577,37,67,97,127,157 这样完全由素数组成的等差数列,求等差素数的最小公差
- 仿当当App首页按钮渐变动画效果
- IE的缺省设置(转)
- 2008 r2 mysql 安装步骤_SQL Server 2008 R2数据库安装流程
- kubernetes 教程 笔记
- python 会计应用软件_会计软件都有哪些?
- python基础考试试题及答案_Python语言基础答案试题题目及答案,期末考试题库,章节测验答案...
- FPGA 20个例程篇:20.USB2.0/RS232/LAN控制并行DAC输出任意频率正弦波、梯形波、三角波、方波(二)
- 2021-4-8 考研复旦大学 计算机 复试通过 经验回顾
- 解决Python安装第三方库太慢的问题