掌握新技能！使用FTP在线预览PC设计稿-UI黑客

看完本文你将解决以下问题

  • PC设计稿转为网络链接，实现浏览器真实环境在线预览
  • 初步接触和使用FTP

UI设计师经常产出两种“产品”：一种H5页面，一种PC页面。

H5页面很好预览，由于大部分手机屏幕是16:9，导出预览图，用微信或者钉钉发到需求方手机就行了，对方直接在手机中预览设计稿，与真实使用场景基本一样，达到了比较完美的展示。

掌握新技能！使用FTP在线预览PC设计稿-UI黑客

PC页面预览就逊色多了，我们经常遇到以下几种场景：

1-大部分设计师只是简单地导出PC页面，发送到需求方电脑，对方电脑尺寸各不相同，预览的时候会出现各种情况：比例没有100%、页面没有居中、长图滚动不方便等等，诸多不可控因素导致无法预知对方是怎么“欣赏”我们的作品的。

掌握新技能！使用FTP在线预览PC设计稿-UI黑客

2-我们的设计稿是用视网膜屏设计的，实际像素会很大，比如1440的宽度，实际宽度是2880px。对方电脑是视网膜屏还好，如果是普通屏幕，那么100%比例打开就会非常大，需要缩到50%查看，十分不便。

掌握新技能！使用FTP在线预览PC设计稿-UI黑客

3-手机页面预览可以在实机上完美展示，但是PC页面真实环境一般都在浏览器中，浏览器是带有系统栏、书签栏、地址栏等，一般图片查看无法满足实际网页浏览器效果。

掌握新技能！使用FTP在线预览PC设计稿-UI黑客

4-关键还有一点，自己检查过页面后，整理好发邮件给老板，结果发现页面中有个明显错误，邮件无法撤回，只好再次发送邮件。有些粗心的设计师甚至会发送好几遍……

掌握新技能！使用FTP在线预览PC设计稿-UI黑客

那PC页面怎么让需求方比较完美地预览呢？

黑客给出的解决方案是：把图片生成链接，当成网页预览。

那如何把图片方便、快速转化为链接呢？今天的主角：FTP登场。

什么是FTP

FTP，其实我们UI设计师并不陌生，在公司经常听到程序猿哥哥们使用。

掌握新技能！使用FTP在线预览PC设计稿-UI黑客

FTP 是File Transfer Protocol（文件传输协议）的英文简称，而中文简称为“文传协议”。用于Internet上的控制文件的双向传输。

官方的定义听得云里雾里，不用管，我们只要知道，它可以认为是一个软件，我们的设计图可以通过它转化为链接。

Mac中一般用FileZilla这个软件。点击下载

图片上传到网络后是到哪儿了呢？是到一个网络空间，而FTP上传的文件是需要网络空间来存放的。

那如何获取网络空间呢？这里有两个方法。

1：基本上大多数互联网公司都有内部空间，我们可以让公司的程序猿哥哥帮忙申请开通。

2：跟着黑客简单几步去申请个免费的网络空间。

能在自己公司解决FTP空间的同学可以跳过这一步。下面黑客将教大家如何申请一个免费的空间。网上找了几个，经过对比，这个速度还是可以的，也不需要输入个人身份信息，注册流程简单方便，提供的100M空间容量足够设计师日常使用了。

申请免费FTP空间

第一步：打开这个地址注册，填写下面这个表格。

掌握新技能！使用FTP在线预览PC设计稿-UI黑客

第二步：提交之后会显示主界面，点击左侧的FTP管理，会显示出FTP地址和账号，密码是注册时的密码。

掌握新技能！使用FTP在线预览PC设计稿-UI黑客

这样我们就获取到登录FTP所需的东西了。这个网站由于是测试用的，也不建议大家去付费，免费的足够用。网站地址是后面我们需要用到的，这个很重要。

登录FileZilla

打开FileZilla，在顶部依次写下刚才获取的信息。主机就是FTP地址。端口不用填写。

掌握新技能！使用FTP在线预览PC设计稿-UI黑客

然后点击快速链接按钮，状态区域就会显示进程信息，等到显示“列出目录成功”就可以了，时间就几秒钟，如果等带时间长，就看下提示信息，或者退出重新登录。

上传图片

登陆后，右边红框就是目前我们在线空间的文件列表，现在是空的，只需要把设计图拖进去就可以自动上传了。

掌握新技能！使用FTP在线预览PC设计稿-UI黑客

上传特制代码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，就可以生成自己第一个个人网站了。

不会也没关系，很多设计师会把自己的建立做成长图，那么利用我们的免费空间，可以很方便地生成自己的在线简历，压缩包、附件什么的可以告别了。