掌握新技能!使用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黑客,会有更多的技能武装你,提升逼格