掌握新技能！使用FTP在线预览PC设计稿
看完本文你将解决以下问题
- PC设计稿转为网络链接，实现浏览器真实环境在线预览
- 初步接触和使用FTP
UI设计师经常产出两种“产品”：一种H5页面，一种PC页面。
H5页面很好预览，由于大部分手机屏幕是16:9，导出预览图，用微信或者钉钉发到需求方手机就行了，对方直接在手机中预览设计稿，与真实使用场景基本一样，达到了比较完美的展示。
PC页面预览就逊色多了，我们经常遇到以下几种场景：
1-大部分设计师只是简单地导出PC页面，发送到需求方电脑，对方电脑尺寸各不相同，预览的时候会出现各种情况：比例没有100%、页面没有居中、长图滚动不方便等等，诸多不可控因素导致无法预知对方是怎么“欣赏”我们的作品的。
2-我们的设计稿是用视网膜屏设计的，实际像素会很大，比如1440的宽度，实际宽度是2880px。对方电脑是视网膜屏还好，如果是普通屏幕，那么100%比例打开就会非常大，需要缩到50%查看，十分不便。
3-手机页面预览可以在实机上完美展示，但是PC页面真实环境一般都在浏览器中，浏览器是带有系统栏、书签栏、地址栏等，一般图片查看无法满足实际网页浏览器效果。
4-关键还有一点，自己检查过页面后，整理好发邮件给老板，结果发现页面中有个明显错误，邮件无法撤回，只好再次发送邮件。有些粗心的设计师甚至会发送好几遍……
那PC页面怎么让需求方比较完美地预览呢？
黑客给出的解决方案是：把图片生成链接，当成网页预览。
那如何把图片方便、快速转化为链接呢？今天的主角：FTP登场。
什么是FTP
FTP，其实我们UI设计师并不陌生，在公司经常听到程序猿哥哥们使用。
FTP 是File Transfer Protocol（文件传输协议）的英文简称，而中文简称为“文传协议”。用于Internet上的控制文件的双向传输。
官方的定义听得云里雾里，不用管，我们只要知道，它可以认为是一个软件，我们的设计图可以通过它转化为链接。
Mac中一般用FileZilla这个软件。点击下载
图片上传到网络后是到哪儿了呢？是到一个网络空间，而FTP上传的文件是需要网络空间来存放的。
那如何获取网络空间呢？这里有两个方法。
1：基本上大多数互联网公司都有内部空间，我们可以让公司的程序猿哥哥帮忙申请开通。
2：跟着黑客简单几步去申请个免费的网络空间。
能在自己公司解决FTP空间的同学可以跳过这一步。下面黑客将教大家如何申请一个免费的空间。网上找了几个，经过对比，这个速度还是可以的，也不需要输入个人身份信息，注册流程简单方便，提供的100M空间容量足够设计师日常使用了。
申请免费FTP空间
第一步：打开这个地址注册，填写下面这个表格。
第二步：提交之后会显示主界面，点击左侧的FTP管理，会显示出FTP地址和账号，密码是注册时的密码。
这样我们就获取到登录FTP所需的东西了。这个网站由于是测试用的，也不建议大家去付费，免费的足够用。网站地址是后面我们需要用到的，这个很重要。
登录FileZilla
打开FileZilla，在顶部依次写下刚才获取的信息。主机就是FTP地址。端口不用填写。
然后点击快速链接按钮，状态区域就会显示进程信息，等到显示“列出目录成功”就可以了，时间就几秒钟，如果等带时间长，就看下提示信息，或者退出重新登录。
上传图片
登陆后，右边红框就是目前我们在线空间的文件列表，现在是空的，只需要把设计图拖进去就可以自动上传了。
上传特制代码html
这里给大家提供一个代码文件，跟上传图片同样的方法，上传到FTP，需要和设计稿在同一个目录里面。
代码文件的目的就是让我们的设计稿能够在网页中居中显示。
注意，html文件的完整名字一定要是index.html，如果你本地有一个其他的，那么下载解压后可能会被系统命名为index2.html，需要改过来。
打开连接
以上就是我们的准备工作，最后一步就是打开我们的链接，查看图片。
以黑客申请的空间为例子，地址是http://hicsy.3vcm.vip
我们如果直接点击，只会出现页面提示，是打不开图片的，需要在链接后面加上这些代码:
/index.html?test.jpg
index.html 就是上传的代码页面，test.jpg是测试的设计稿，当然你也可以取其他名字，建议用英文和数字，不要用中文。
所以结构就是
你的网站地址 + /index.html? + 图片
点击查看黑客的测试页面
http://hicsy.3vcm.vip/index.html?test.jpg
这样，我们的页面就可以通过连接预览了。以后给老板看设计稿，直接发他链接就行。
注意点
1-PC设计稿需要用两倍图，即1920的尺寸是3840px、1440尺寸是2880px。
2-如果打不开，请确认下设计稿后缀名和链接后缀名是否一致。设计稿是png，但链接最后是jpg，就无法打开。
总结
如果你会html，就可以生成自己第一个个人网站了。
不会也没关系，很多设计师会把自己的建立做成长图，那么利用我们的免费空间，可以很方便地生成自己的在线简历，压缩包、附件什么的可以告别了。
原创文章，若本文对您有帮助，右下角打赏下作者吧~~作者：UI黑客，如若转载，请注明出处：《掌握新技能！使用FTP在线预览PC设计稿》http://www.uihacker.com/uihacker-ftp-for-designer/
支付宝扫一扫
微信扫一扫
上传到蓝湖就好了呀，有自己的内部链接和给客户看的链接，方便又实用
蓝湖只能看，页面缩放就无法还原100%，预览不完美
这个方法是把设计稿变成“网页”适配1920-1280范围电脑，打开地址即可基本100%还原线上效果
打不开你的那个链接地址 为什么？
官方3月份更新了服务器地址，我这边也更新修改了，现在可以看了
就是涉及到保密的问题，并不敢随便将设计稿传到公开的 FTP 上
恩，保密是一方面，不过很多公司也在用非私有部署的蓝湖，这些也算是公开了。
大部分公司都有内部ftp，开个权限就行，毕竟设计作品是公司的财产么，有这种意识也是很好的~
好
突然发现好像如果按照宽度750px设计的详情页在移动端使用你这个代码来看的话，iphone6plus上看是两边有白边。这个代码好像是强制设计效果图以本身的宽度来显示。
手机页面直接用手机打开就可以预览，这个代码就是专门用在pc预览界面的，在实际工作中设计师给其他人看pc设计稿很麻烦，所以摸索出了这个方法。
很强
为啥我的测试旁边有2个滚动条
首先恭喜你获得了这个技能
毕竟使用人家的免费服务。我试了下我这边没有俩滚动条，我抽空再找个没广告的免费空间，主要是教会大家使用这个技能。
问题嘛，出在这个空间服务商，它本身是带广告条的，我删除了下，否则底部会有广告
另外每个公司都会有ftp服务器的，文章中也说了最好用自己公司的，让你们技术开个最方便
哦哦 ，原来是这样，多谢啦
不错的东西，主要是这个代码不错。你这个做法我之前在网页设计公司的时候，也有这样的，不过代码没你这个好，就是固定框架，每次还要改源代码里的img地址和名称，一个项目一个文件夹，很麻烦，后面我就没用了。不过你自己真心不错啊，一个代码就ok了。只用管理图片就好了。
其实这个代码也是在技术的指点下弄的，开始也是为了图片定位头疼。
需求很明确，简单方便，只需要把链接最后的图片名和服务器图片名保持一致即可。
网站里的文章都是给设计师解决实际遇到的各种问题，让设计更加高效。
自己并非专业前端，如果有技术错误请多多指点
看来也是一个爱鼓捣技术的设计师啊你！
现在UI设计师必须得知道点技术，否则跟不上市场需求
。
多学习学习，避免被淘汰
看了这篇文章，立马操作了一遍，瞬间逼格提升啊，哈哈，技术小哥哥还喊我大牛，羞羞的脸红了…
是吗？那就以后多多关注UI黑客，会有更多的技能武装你，提升逼格