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

20180608-掌握新技能！使用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，需要和设计稿在同一个目录里面。

代码文件的目的就是让我们的设计稿能够在网页中居中显示。

点击下载代码文件

打开连接

以上就是我们的准备工作，最后一步就是打开我们的链接，查看图片。

以黑客申请的空间为例子，地址是http://hicsy.3vcm.net/

我们如果直接点击，只会出现页面提示，是打不开图片的，需要在链接后面加上这些代码:

/index.html?test.jpg

index.html 就是上传的代码页面，test.jpg是测试的设计稿，当然你也可以取其他名字，建议用英文和数字，不要用中文。

所以结构就是

你的网站地址 + /index.html? + 图片

点击查看黑客的测试页面

http://hicsy.3vcm.net/index.html?test.jpg

这样，我们的页面就可以通过连接预览了。以后给老板看设计稿，直接发他链接就行。

注意点

1-PC设计稿需要用两倍图，即1920的尺寸是3840px、1440尺寸是2880px。

2-如果打不开，请确认下设计稿后缀名和链接后缀名是否一致。设计稿是png，但链接最后是jpg，就无法打开。

总结

如果你会html，就可以生成自己第一个个人网站了。

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

全部评论：10条

加载中...

大哥哥 2018-09-25 03:21

很强

回复
yaosir 2018-09-20 01:41

为啥我的测试旁边有2个滚动条

回复
- UI黑客 V 2018-09-20 03:21
  
  首先恭喜你获得了这个技能
  问题嘛，出在这个空间服务商，它本身是带广告条的，我删除了下，否则底部会有广告毕竟使用人家的免费服务。我试了下我这边没有俩滚动条，我抽空再找个没广告的免费空间，主要是教会大家使用这个技能。
  另外每个公司都会有ftp服务器的，文章中也说了最好用自己公司的，让你们技术开个最方便
  
  回复
  - yaosir 2018-09-20 04:03
    
    哦哦，原来是这样，多谢啦
    
    回复
枫叶 2018-09-19 05:27

不错的东西，主要是这个代码不错。你这个做法我之前在网页设计公司的时候，也有这样的，不过代码没你这个好，就是固定框架，每次还要改源代码里的img地址和名称，一个项目一个文件夹，很麻烦，后面我就没用了。不过你自己真心不错啊，一个代码就ok了。只用管理图片就好了。

回复
- UI黑客 V 2018-09-19 05:50
  
  感谢支持。
  其实这个代码也是在技术的指点下弄的，开始也是为了图片定位头疼。
  需求很明确，简单方便，只需要把链接最后的图片名和服务器图片名保持一致即可。
  网站里的文章都是给设计师解决实际遇到的各种问题，让设计更加高效。
  自己并非专业前端，如果有技术错误请多多指点
  
  回复
  - 枫叶 2018-09-20 00:58
    
    看来也是一个爱鼓捣技术的设计师啊你！
    
    回复
    - UI黑客 V 2018-09-20 03:17
      
      现在UI设计师必须得知道点技术，否则跟不上市场需求。
      多学习学习，避免被淘汰
      
      回复
秋月酱 2018-09-10 06:43

看了这篇文章，立马操作了一遍，瞬间逼格提升啊，哈哈，技术小哥哥还喊我大牛，羞羞的脸红了…

回复
- UI黑客 V 2018-09-10 09:06
  
  是吗？那就以后多多关注UI黑客，会有更多的技能武装你，提升逼格
  
  回复