看完本文你將解決以下問(wèn)題
PC設(shè)計(jì)稿轉(zhuǎn)為網(wǎng)絡(luò)鏈接坞淮，實(shí)現(xiàn)瀏覽器真實(shí)環(huán)境在線預(yù)覽
初步接觸和使用FTP
問(wèn)題再現(xiàn)
UI設(shè)計(jì)師經(jīng)常產(chǎn)出兩種“產(chǎn)品”：一種H5頁(yè)面，一種PC頁(yè)面道媚。
H5頁(yè)面很好預(yù)覽扁掸，由于大部分手機(jī)屏幕是16:9，導(dǎo)出預(yù)覽圖最域，用微信或者釘釘發(fā)到需求方手機(jī)就行了谴分，對(duì)方直接在手機(jī)中預(yù)覽設(shè)計(jì)稿，與真實(shí)使用場(chǎng)景基本一樣镀脂，達(dá)到了比較完美的展示牺蹄。
PC頁(yè)面預(yù)覽就遜色多了，我們經(jīng)常遇到以下幾種場(chǎng)景：
1-大部分設(shè)計(jì)師只是簡(jiǎn)單地導(dǎo)出PC頁(yè)面薄翅，發(fā)送到需求方電腦沙兰，對(duì)方電腦尺寸各不相同虑省，預(yù)覽的時(shí)候會(huì)出現(xiàn)各種情況：比例沒有100%、頁(yè)面沒有居中僧凰、長(zhǎng)圖滾動(dòng)不方便等等探颈，諸多不可控因素導(dǎo)致無(wú)法預(yù)知對(duì)方是怎么“欣賞”我們的作品的。
2-我們的設(shè)計(jì)稿是用視網(wǎng)膜屏設(shè)計(jì)的训措，實(shí)際像素會(huì)很大伪节，比如1440的寬度，實(shí)際寬度是2880px绩鸣。對(duì)方電腦是視網(wǎng)膜屏還好怀大，如果是普通屏幕，那么100%比例打開就會(huì)非常大呀闻，需要縮到50%查看化借，十分不便。
3-手機(jī)頁(yè)面預(yù)覽可以在實(shí)機(jī)上完美展示捡多，但是PC頁(yè)面真實(shí)環(huán)境一般都在瀏覽器中蓖康，瀏覽器是帶有系統(tǒng)欄、書簽欄垒手、地址欄等蒜焊，一般圖片查看無(wú)法滿足實(shí)際網(wǎng)頁(yè)瀏覽器效果。
4-關(guān)鍵還有一點(diǎn)科贬，自己檢查過(guò)頁(yè)面后泳梆，整理好發(fā)郵件給老板，結(jié)果發(fā)現(xiàn)頁(yè)面中有個(gè)明顯錯(cuò)誤榜掌，郵件無(wú)法撤回优妙，只好再次發(fā)送郵件。有些粗心的設(shè)計(jì)師甚至?xí)l(fā)送好幾遍……
那PC頁(yè)面怎么讓需求方比較完美地預(yù)覽呢憎账？
黑客給出的解決方案是：把圖片生成鏈接套硼，當(dāng)成網(wǎng)頁(yè)預(yù)覽。
那如何把圖片方便鼠哥、快速轉(zhuǎn)化為鏈接呢熟菲？今天的主角：FTP登場(chǎng)看政。
什么是FTP
FTP朴恳，其實(shí)我們UI設(shè)計(jì)師并不陌生，在公司經(jīng)常聽到程序猿哥哥們使用允蚣。
FTP?是File Transfer Protocol（文件傳輸協(xié)議）的英文簡(jiǎn)稱于颖，而中文簡(jiǎn)稱為“文傳協(xié)議”。用于Internet上的控制文件的雙向傳輸嚷兔。
官方的定義聽得云里霧里森渐，不用管做入，我們只要知道，它可以認(rèn)為是一個(gè)軟件同衣，我們的設(shè)計(jì)圖可以通過(guò)它轉(zhuǎn)化為鏈接竟块。
Mac中一般用FileZilla這個(gè)軟件。點(diǎn)擊下載
圖片上傳到網(wǎng)絡(luò)后是到哪兒了呢耐齐？是到一個(gè)網(wǎng)絡(luò)空間浪秘，而FTP上傳的文件是需要網(wǎng)絡(luò)空間來(lái)存放的。
那如何獲取網(wǎng)絡(luò)空間呢埠况？這里有兩個(gè)方法耸携。
1：基本上大多數(shù)互聯(lián)網(wǎng)公司都有內(nèi)部空間，我們可以讓公司的程序猿哥哥幫忙申請(qǐng)開通辕翰。
2：跟著黑客簡(jiǎn)單幾步去申請(qǐng)個(gè)免費(fèi)的網(wǎng)絡(luò)空間夺衍。
能在自己公司解決FTP空間的同學(xué)可以跳過(guò)這一步。下面黑客將教大家如何申請(qǐng)一個(gè)免費(fèi)的空間喜命。網(wǎng)上找了幾個(gè)沟沙，經(jīng)過(guò)對(duì)比，這個(gè)速度還是可以的壁榕，也不需要輸入個(gè)人身份信息尝胆，注冊(cè)流程簡(jiǎn)單方便，提供的100M空間容量足夠設(shè)計(jì)師日常使用了护桦。
申請(qǐng)免費(fèi)FTP空間
第一步：打開這個(gè)地址注冊(cè)含衔，填寫下面這個(gè)表格。
第二步：提交之后會(huì)顯示主界面二庵，點(diǎn)擊左側(cè)的FTP管理贪染，會(huì)顯示出FTP地址和賬號(hào)，密碼是注冊(cè)時(shí)的密碼催享。
這樣我們就獲取到登錄FTP所需的東西了杭隙。這個(gè)網(wǎng)站由于是測(cè)試用的，也不建議大家去付費(fèi)因妙，免費(fèi)的足夠用痰憎。網(wǎng)站地址是后面我們需要用到的，這個(gè)很重要攀涵。
登錄FileZilla
打開FileZilla铣耘，在頂部依次寫下剛才獲取的信息。主機(jī)就是FTP地址以故。端口不用填寫蜗细。
然后點(diǎn)擊快速鏈接按鈕，狀態(tài)區(qū)域就會(huì)顯示進(jìn)程信息，等到顯示“列出目錄成功”就可以了炉媒，時(shí)間就幾秒鐘踪区，如果等帶時(shí)間長(zhǎng)，就看下提示信息吊骤，或者退出重新登錄缎岗。
上傳圖片
登陸后，右邊紅框就是目前我們?cè)诰€空間的文件列表白粉，現(xiàn)在是空的密强，只需要把設(shè)計(jì)圖拖進(jìn)去就可以自動(dòng)上傳了。
上傳特制代碼html
這里給大家提供一個(gè)代碼文件蜗元，跟上傳圖片同樣的方法或渤，上傳到FTP，需要和設(shè)計(jì)稿在同一個(gè)目錄里面奕扣。
代碼文件的目的就是讓我們的設(shè)計(jì)稿能夠在網(wǎng)頁(yè)中居中顯示薪鹦。
注意，html文件的完整名字一定要是index.html惯豆，如果你本地有一個(gè)其他的池磁，那么下載解壓后可能會(huì)被系統(tǒng)命名為index2.html，需要改過(guò)來(lái)楷兽。
打開連接
以上就是我們的準(zhǔn)備工作地熄，最后一步就是打開我們的鏈接，查看圖片芯杀。
以黑客申請(qǐng)的空間為例子端考，地址是http://hicsy.3vcm.net/
我們?nèi)绻苯狱c(diǎn)擊，只會(huì)出現(xiàn)頁(yè)面提示揭厚，是打不開圖片的却特，需要在鏈接后面加上這些代碼:
/index.html?test.jpg
index.html 就是上傳的代碼頁(yè)面，test.jpg是測(cè)試的設(shè)計(jì)稿筛圆，當(dāng)然你也可以取其他名字裂明，建議用英文和數(shù)字，不要用中文太援。
所以結(jié)構(gòu)就是
你的網(wǎng)站地址 + /index.html?+ 圖片
點(diǎn)擊查看黑客的測(cè)試頁(yè)面
http://hicsy.3vcm.net/index.html?test.jpg
這樣闽晦，我們的頁(yè)面就可以通過(guò)連接預(yù)覽了。以后給老板看設(shè)計(jì)稿提岔，直接發(fā)他鏈接就行仙蛉。
注意點(diǎn)
1-PC設(shè)計(jì)稿需要用兩倍圖，即1920的尺寸是3840px唧垦、1440尺寸是2880px捅儒。
2-如果打不開液样，請(qǐng)確認(rèn)下設(shè)計(jì)稿后綴名和鏈接后綴名是否一致振亮。設(shè)計(jì)稿是png巧还，但鏈接最后是jpg，就無(wú)法打開坊秸。
總結(jié)
如果你會(huì)html麸祷，就可以生成自己第一個(gè)個(gè)人網(wǎng)站了。
不會(huì)也沒關(guān)系褒搔，很多設(shè)計(jì)師會(huì)把自己的建立做成長(zhǎng)圖阶牍，那么利用我們的免費(fèi)空間，可以很方便地生成自己的在線簡(jiǎn)歷星瘾，壓縮包走孽、附件什么的可以告別了。
更多UI設(shè)計(jì)干貨文章請(qǐng)關(guān)注UI黑客
微信公眾號(hào) uihacker
UI黑客官網(wǎng)http://www.uihacker.com/
UI黑客論壇http://bbs.uihacker.com/
