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

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

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

  • 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,需要和设计稿在同一个目录里面。

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

点击下载代码文件

打开连接

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

以黑客申请的空间为例子,地址是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,就可以生成自己第一个个人网站了。

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