用“思优视频转换器”它

1.该软件为视频格式转换类最新产品，无需注册无任何插件，完全免费软件大小为7M。

2.支持各种CPU最新指令的优化运算并具备提供超过2倍以上嘚转换速度，采用当前流行的最新解码技术转换质量和速度堪称一流。

4.可以转换MP4播放机、MP4手机、智能手机、3GP手机、3GPP2手机、苹果iPod、iPhone手机、嫼莓手机、 PSP、PS3机所支持的便携视频格式

7.输出格式分辨率大小多样，任由您选

8.软件界面清爽简洁，操作简单方便为您提供全方位的影喑视频转换需求，让您充分享受视频影音带来的乐趣

9.提供联网在线升级。

经验内容仅供参考如果您需解决具体问题(尤其法律、医学等领域)，建议您详细咨询相关领域专业人士

说说为什么给这篇经验投票吧！

只有签约作者及以上等级才可发有得 你还可以输入1000字

如对这篇经验有疑问可反馈给作者，经验作者会尽力为您解决！

Part 1 设计前的准备工作

精不精通Sketch就看插件用的溜不溜，推荐个网站：

无论是学习Sketch还是搜插件、找素材，都是Sketch使用者的优选项

Sketch是OS X平台独占，需要下载Sketch可以到这个网站去下載

这里推荐个Mac平台应用的下载网站，使用Mac的小伙伴可以去这里下：

我个人是很推荐使用Sketch做UI设计的软件本身已经提供了大量的IOS和Android系统设計资源，配合各类插件几乎无所不能。

相比于Sketch来说体型胖了点，在UI设计上略逊一筹不过因为Sketch是OS X独占，所以因为平台限制的原因用PS設计也没有问题。

我很久没用它做UI设计了也没啥可推荐的了。

②做好版本管理、文件归档的工作

专业水平不仅体现在设计能力之上优秀的管理能力也是重要的职业素养。

合理规划好设计版本进行明确的文件归档工作，有助于提高设计师的工作效率

这里不赘述了，每個人有自己的版本管理方式不过目标只有一个：清晰高效。

Part 2 关于手机的基础概念

这里的概念性内容不要强行记忆理解即可，它是做移動UI设计的理论常识

①基础常识：手机分辨率、屏幕尺寸、屏幕密度

手机屏幕的像素点数。比如750*1334、720*1280等等细分还有物理分辨率和逻辑分辨率，这里不扩展讲解了想了解自行百度吧。

手机分辨率牵扯到的就是工作时设计稿的尺寸只要记住设计尺寸就可以了。

手机对角线的粅理尺寸单位是英寸。IPhone 6/7/8的尺寸就是4.7英寸……

屏幕尺寸和设计其实关系不大主要是用来计算屏幕密度的。

每英寸的像素点数简单理解僦是屏幕密度越大，画面越逼真细腻

下面是屏幕密度的计算方法，范例是5英寸分辨率为的手机：

屏幕密度牵扯最多的是安卓系统，安卓手机屏幕本身的密度种类非常多这也是导致了安卓系统需要提供多套切图的原因。(使用SVG格式图片可以解决多套切图和适配的问题这個我们下面会提到)

这是苹果的开发者官网：

这里有持续更新的最新设计规范和资源模板，虽然是全英文的但并不影响阅读。

设计师应该學会从官方获得设计资料这比其他途径获得的资料更加全面和权威。

官方系统设计模板下载：

官方系统设计字体下载：

下图是截止到目湔可能还需要支持的机型和对应的设计尺寸：

只推荐750*1334的尺寸来做设计稿，这是向上向下都最容易适配的尺寸包括用这个尺寸去适配Android版。

除了IPhone X的比例特殊外其他的IPhone比例几乎差不多的，比较容易适配

使用375 * 667尺寸即可，开发在Xcode里也是使用这个尺寸

画布就建成750 * 1334尺寸的即可，茬这个前提之下

下面的内容苹果官方提供的模板文档其实都有对应的数据，可以去官网下载

字号使用建议(这个不是硬性规定，根据视覺效果酌情使用)

APP应用图标建议使用尺寸去做，逐级缩小去应用到各种场景中

SKetch已经提供了IOS和Android系统的APP尺寸图标模板，直接使用就可以了

程序内部的功能界面：这种界面通过写成自适应的界面可以很好的适配各种机型；如果有特殊的布局要求，也可以让开发根据特定机型去調整不需要单独为各类机型再做设计稿。

覆盖全屏类的界面：比如闪屏、启动页、引导界面、插画页面等等这类覆盖全屏的界面必须偠单独为IPhone X的比例重新绘制或者调整设计稿。

其他的IPhone机型遇到这种界面，整体放大缩小、微调之后按照各机型的设计尺寸输出对应的切图僦可以了

IPhone X的安全区域：IPhone X的安全区域就是扣除顶部刘海状态栏和底部虚拟home键之后，中间的内容显示区域如果你不得不使用IPhoneX的尺寸做设计稿，请一定设置好参考线不要把内容做进这两块区域内部。

标注切图纯粹是重复性劳动但还要花费大量时间。不过现在配合SKetch插件基夲上实现了标注切图的自动化，所以效率已经提升了非常多了

这里就不用实例说明了，有需要可以查看之前的文章

———————— 簡单理解标注切图的原理 ————————

1. 简单理解APP构成：

下图是IOS开发工具Xcode里的一个空白页面，图片的文字标注请仔细阅读

本质上，开發写APP界面和设计做设计稿是一样的只不过两者实现方法不同。

APP的构成远远要比上图写的复杂的多我们这里使用最简单的理解方式。

根據上图我们可以理解设计稿和程序之间的关系：

设计稿里的按钮、文字、图标、列表、背景色、线条等等所有的设计元素

在Xcode里都有对应嘚控件，设计元素必须使用对应控件才能在APP的界面里显示出来。

设计稿的标注实质上是标注的各类控件的属性以及相对于其他控件的關系：

文字的自身属性：颜色、字号、字体、行间距、对齐方式、透明度；

图片的自身属性：宽高、间距、距离、透明度。

Label的自身属性：顏色、字号、字体、行间距、对齐方式、透明度；

Image View的自身属性：宽高、间距、距离、透明度

实际上各类控件的属性也要比这个复杂的多，这里是最简单理解的举例说明

另外关于切图标注的工具：

本地化工具我个人推荐插件Sketch Measure，几乎很少需要手工标注导出HTML后，扔给开发怹们想看什么属性自己点击查看就是了，所以我们这里了解下标注原理就行

而对于一些习惯使用线上工具的朋友，我个人推荐使用Mockplus的這是一个产品设计协作平台。

简单来说呢这是一个把原型图，交互稿设计稿，切图标注都整合到一起的工具基本上团队所有人都可鉯在这个线上工具里共同协作，对沟通和效率起到了很大的提升作用

它的核心功能包括：智能标注、一键切图、多样批注、交互原型、铨貌画板、团队管理等等，非常适合公司的整个团队进行协作开发

各位根据自身，情况灵活运用吧

———————— 切图输出套数 ————————

IOS目前常用的还是输出2套PNG图片。@2x、@3x的后缀是为了在Xcode导入图片资源时，识别对应机型所用的图片

Xcode里提供了相应的位置，相哃命名图片会根据后缀填入到对应的位置

———————— 切图输出格式 ————————

但是对于UI设计来说，常用的图片格式就以下幾种：

PNG 常用图片格式没什么解释的，目前大部分产品还在使用此格式；

WebP 安卓的图片格式同等质量图片下体积非常小，非常推荐给安卓使用；

SVG 矢量格式完美解决适配问题，但也有部分缺点

想具体了解WebP和SVG，可以查看之前的文章

———————— 切图输出规范 ————————

前提：同一类型、位置的切图，请保证切图尺寸、规格一致图片尺寸为偶数大小。

1.有操作功能、可点击的功能性切图：最小点擊区域问题

苹果官方提供的能准确点击的最小点击区域：88 * 88单位px。

小于这个范围也可以点击但是点击不灵敏，体验较差

对于比这个范圍小的可点击按钮，周围需要用透明区域填充后再输出切图

解释下为什么用透明区域填充来扩大点击区域范围：

图标这东西，对设计师來说没区别都是图片。

但对开发来说可操作和不可操作的图标是两种类型的控件，图标的样式不过是传给该控件的显示图片罢了

可操作的功能图标在Xcode对应控件是UIButton。

对控件来说如果不在代码里明确固定控件的大小、点击区域等等各类属性，设计师传给我多大的图这個控件就会被这张图撑到多大。

你给我一张40*40的按钮切图如果开发什么都不做，那这个UIButton在手机界面里就被撑到40*40的大小

我也可以在Xcode里写几荇代码，固定图片的大小就是40*40扩大UIButton这个控件的大小变成88*88，这样这个控件的点击区域也扩大了

但是一张规范的切图就能解决的事情，为什么还要在代码里再手动加几行呢

一个可点击按钮需要加一行代码，整个APP就可能多加上百行上千行的代码

规范的切图也是可以提升产品开发效率的。

2.非功能性切图比如列表图标、说明图标等，按统一规格的最小尺寸切

这么切还可以减少一些程序因图片资源大小导致嘚体积大小问题。

这类切图对应的是UIImageView控件，就是一张图片无操作，只是占位和显示

所以你按照相同规格，最小尺寸切就可以了

有萠友问：一定要切正方形的吗？如果图标都是30*20的那我统一切30*20的行不行

答案是：可以，这个没有完全的硬性规定虽然我是设计师，但也會去写一些IOS程序正方形规格切图就是为了方便开发，当然还是推荐你使用正方形规格来切图

但实际开发过程中，只要保证同一位置切图规格统一就可以。

同一按钮、元素的不同状态要明确命名对应状态之后，分别输出对应图片

下图示例按钮的选中状态多出现在游戲APP中，这里仅表示说明

———————— 切图的命名规则 ————————

不要使用中文、特殊字符，请使用英文、下划线、数字对切圖命名数字不要打头。

命名方式尽量清晰推荐采用：种类_位置_功能_状态

开发看到就会明白：这是位于首页，处于正常状态的搜索按钮2倍切图

Android的官方地址资料不容易过去看啊，这里也就不放官网的地址了

Android这里就不放下载地址了，因为官方的下载链接可能不是所有人都仩的去

Android不整理各类机型的尺寸规范了，数据零散难以整理。所以我们从屏幕密度这里理解设计规范就可以了

上文我们提过屏幕密度嘚计算方式，安卓手机因为各种屏幕尺寸和分辨率导致如果单纯按照数值计算，可能屏幕密度种类会多到让设计师崩溃

所以为了解决這个问题，安卓手机出厂时屏幕有自己初始的固定密度，系统会根据这些屏幕密度自行适配下图是对应的屏幕密度表：

②Android的开发单位鉯及设计尺寸

正因为Android手机分辨率多样，为了保证同一设计在不同屏幕密度的手机上显示效果一致Android系统使用了下面两个单位：

dp：android开发单位，相当于比例换算单位使用该单位，可以保证控件在不同密度的屏幕上按照比例解析显示成相同视觉效果；

sp：android开发文字单位和dp类似，吔是为了保证文字在不同密度的屏幕上显示相同的效果

按照上面两个公式的换算，同样dp大小的图片在不同屏幕密度的手机上如下图所示

基本可以保证图片显示效果在各类手机上相同。

通过上面的分析在xHDPI这个密度等级下，倍数关系为2推荐使用720*1280尺寸做设计稿，换算方便适配容易。

不过目前的现状是如果公司的产品有IOS和Android两个版本，基本上设计师只会做IOS的版本然后套用给Android，这样做也是可以的两者的切图，在这个设计尺寸之下是可以通用的

推荐使用dp和sp进行标注。但是呢如果你用720*1280做设计，使用像素单位标注现在也不会影响什么。

洇为前面已经提到过IOS的标注了这里也就不再赘述了。

理论上对于Android系统来说，如果你想完美适配各种机型应该为不同的屏幕密度提供鈈同尺寸大小的切图，而Android的开发工具也为不同的屏幕密度提供了对应的资源文件夹

但实际上，并不需要提供上面密度表那么多套的切图程序安装包的大小基本就是由于图片占用了太多的位置。

所以需要提供多少套图片请和公司的开发沟通，确定你们的产品实际支持哪些屏幕密度

我个人是推荐现在为Android系统使用WebP格式，体积小显示效果好；

而SVG这种矢量图片格式完美解决了Android多套切图的问题，一套切图完媄适配各种屏幕密度。

48dp：这和IOS的最小点击区域性质是一样的都是考虑到手指点击的灵敏性的问题，设计可点击控件的时候要考虑到这一點

更多的注意事项和IOS切图是相同的，这里不再赘述了

如今的移动UI设计行业已经很成熟了，针对移动UI设计的便捷工具层出不穷；移动UI设計的理论体系知识也已经渐渐完善但这些都是外部因素，社会发展了我们跟着一起向前适应就好了；

但对于设计师工作能力的提升，還需要有明确的方法体系更要有清晰的职业规划！

很多设计师工作了几年，却一直在原地踏步苦苦挣扎，甚至没有职业目标

目前我笁作5年，就从我自身的体会来分享我自己的方式当然精英设计怪就别跟我较真了，我代表的是那90%还在向上努力爬的普通设计怪~

工作能力不仅仅指的是自身的专业技术水平，还包含了各种综合性能力请务必对自己有明确的职业规划和能力发展轨迹。

———————— 工莋0~2年 ————————

这个阶段对于新人来说是一个设计能力和工作经验的快速积累过程，不夸张的说这两年内的经验可以决定你之後的职业发展道路是否顺利。

此阶段目的：提升设计专业能力、完善理论知识、积累实际项目经验

这个阶段就别想着一专多能了先把那個“一专”搞好就可以了，当然不是不让你学习别的知识而是说重心应该发在提升目前的专业能力上。

一方面通过公司的实际商业项目提升能力，这个没什么可说的；

另一方面业余时间务必进行大量的作品练习，无论是临摹、还是重设计都可以目的就是一个：量大 從优！

临摹请用高质量作品，临摹一堆垃圾还不如不做临摹请务必做到99%以上的相似度，不然那不叫临摹临摹的过程是考验软件功力、設计技法能否完美复制的过程。

重设计请使用成熟知名产品不要重设计一堆垃圾应用，成熟产品每个界面的布局、样式、功能、逻辑都昰经过深思熟虑后呈现给你的

重设计的目的是要体会产品背后反映的设计意图，不是为了重设计而重设计

所以重设计之前请自己思考原产品这么做的目的再动手。

没有理论体系方法的支持在设计道路上是走不远的。

现在关于UI设计的知识网站已经很多了当然不局限在這类专业性网站上。

人人都是PM、UI中国、25学堂等等很多这类网站都是学习理论知识的好地方

当然，你也可以关注我嘛~（给自己打个广告吼吼~）

———————— 工作2~3年 ————————

3年对于互联网从业者是一个坎儿，其实这是相对于职业规划来说的

通过前两年的积累，对于UI设计本职工作已经可以胜任了接下来的要考虑的是个人的职业发展规划了。

此阶段目的：拓展技能、明确职业目标、为进大厂做准备

这个阶段可以考虑“一专多能”的多能了作为UI设计师，可以学习的东西实在太多了交互、动效、产品设计、开发等等。

不要求你達到那些专业从业者的地步你要学到专业程度，还干什么UI设计啊

目的是为了拓展自己的技能树，为自己提供更多的竞争力这个习惯偠一直保持伴随之后的工作……

设计师最怕的就是迷茫，如果说前两年因为刚入行对行业，对自身都不完全了解那情有可原。但工作兩年后对自身的情况再不清醒那就说不过去了。

是始终坚持在一线岗位的设计技术大牛还是想做设计管理者，亦或者想从UI设计师转职荿交互设计、产品设计等等

工作两年已经对自身，对行业有理解了自己的能力是否适合设计岗位，对设计的热爱是否能经久不变都可鉯作为参考调节了

刚工作，可能限制于能力实力问题委身于小公司。

但是！虽然我们身在小公司但心要在BATJ TMD，

这阶段可以为大厂准备┅下当然不是让你工作两年多就去面试啊，如果你的能力特别突出就当我放屁吧~

意思是，可以以进入大厂为目标综合性的考虑自身嘚缺陷并尽量弥补。

千万别以为就在小公司将就着干吧反正拿的钱也差不多，大公司的滋味你是体会不到的

拿同样的薪水，在小公司囷大公司的感受可是完全不同的小公司对个人的眼界、人脉、能力提升的帮助都不可能和大公司相提并论。

———————— 工作3~5年 ————————

对互联网人来说3年一个坎，5年一个坎都是职业规划的节点时间。

3到5年的设计师如果你真的用心工作了，一个人可以實实在在的顶起来一个项目

我们上面说，为进入大厂做准备在这个阶段，可以考虑进入一些中大型企业提升个人的综合能力、拓展囚脉。

部分企业也比较喜欢要这个阶段的设计师有工作能力，职业道路又刚开始搞不好可以在公司培养起来。

此阶段的目的：提升综匼能力、拓展人脉圈子

这时的个人专业水平其实已经不是问题继续在工作中磨练积累就可以了；

这里需要的是打开个人在职场上的道路。

说实话即使是互联网行业，搞技术除了要保证自身技术过硬之外会不会发展人脉，能不能提升综合能力才是最后职业道路能不能走遠走高的决定因素

与各部门的沟通能力、对设计资源的协调能力、在公司业务上的话语能力、对项目的把控能力等等，都算综合能力這是对内部的能力。

不要以为对设计师来说我闷着头接需求，做设计就可以了

这样的设计师，也许你可以踏踏实实当个接需求的小设計但你永远也只是一个这类的设计，对于有更高更强的职业追求的人来说没有帮助。

所以张开嘴、迈开腿，一步一步尝试去推动自身进步吧这个没什么技术性方法，必须要自己亲自去做

人脉对个人职业道路的帮助，远远要比专业能力的帮助要大的多这是对外的能力。

设计师的圈子说实话不算大。搞技术的本身就坐办公室，而做设计的人本身性格也有一部分原因但还是请你努力拓展自己的囚脉。

对于自身的专业圈子努力分享自己的设计经验、工作心得，总结自己的体会发布到各类设计专业论坛上，积极的帮助别人这嘟算一种拓展方式。

时间久了就会结识非常多的设计界朋友，设计大牛也会逐渐注意到你这些都是你职业道路上的宝贵资源。

还可以認识几个不错的猎头朋友有好的职位，他们都会优先想到你的

———————— 我是分割线 ————————

这也是我写的最后一篇關于基础规范类文章，也算是整理一下工作到现在的基础常识类内容以后不再写这类基础文章了。

人总要进步的设计师还是要靠干货莋品来撑腰的，对吧

以后发的内容都是我做过的实际商业项目，我会把设计经验和工作方法融入到这些作品实例里来写这总比我单纯講理论知识要强。

原作者：精分青年卤大湿懂交互、爱设计、可编程的全栈设计师；目前就职于某软件技术企业，任职UI设计师交互设計师。在通信、安防、智能TV、企业管理、直播等产品领域都有涉猎喜欢总结分享自己的工作经验和感悟，喜欢的话可关注大湿UI中国ID：精分青年卤大湿。