掌握新技能暂殖!使用FTP在線預(yù)覽PC設(shè)計(jì)稿

看完本文你將解決以下問(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)楷兽。

點(diǎn)擊下載代碼文件

打開連接

以上就是我們的準(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/


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末琳状,一起剝皮案震驚了整個(gè)濱河市磕瓷,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌念逞,老刑警劉巖困食,帶你破解...
    沈念sama閱讀 211,884評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異翎承,居然都是意外死亡硕盹,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,347評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門叨咖,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)瘩例,“玉大人,你說(shuō)我怎么就攤上這事甸各⊙鼋耍” “怎么了?”我有些...
    開封第一講書人閱讀 157,435評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵痴晦,是天一觀的道長(zhǎng)南吮。 經(jīng)常有香客問(wèn)我,道長(zhǎng)誊酌,這世上最難降的妖魔是什么部凑? 我笑而不...
    開封第一講書人閱讀 56,509評(píng)論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮碧浊,結(jié)果婚禮上涂邀,老公的妹妹穿的比我還像新娘。我一直安慰自己箱锐,他們只是感情好比勉,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,611評(píng)論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般浩聋。 火紅的嫁衣襯著肌膚如雪观蜗。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,837評(píng)論 1 290
  • 那天衣洁,我揣著相機(jī)與錄音墓捻,去河邊找鬼。 笑死坊夫,一個(gè)胖子當(dāng)著我的面吹牛砖第,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播环凿,決...
    沈念sama閱讀 38,987評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼梧兼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了智听?” 一聲冷哼從身側(cè)響起袱院,我...
    開封第一講書人閱讀 37,730評(píng)論 0 267
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎瞭稼,沒想到半個(gè)月后忽洛,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,194評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡环肘,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,525評(píng)論 2 327
  • 正文 我和宋清朗相戀三年欲虚,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片悔雹。...
    茶點(diǎn)故事閱讀 38,664評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡复哆,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出腌零,到底是詐尸還是另有隱情梯找,我是刑警寧澤,帶...
    沈念sama閱讀 34,334評(píng)論 4 330
  • 正文 年R本政府宣布益涧,位于F島的核電站锈锤,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏闲询。R本人自食惡果不足惜久免,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,944評(píng)論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望扭弧。 院中可真熱鬧阎姥,春花似錦、人聲如沸鸽捻。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,764評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至衣赶,卻和暖如春诊赊,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背屑埋。 一陣腳步聲響...
    開封第一講書人閱讀 31,997評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工豪筝, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留痰滋,地道東北人摘能。 一個(gè)月前我還...
    沈念sama閱讀 46,389評(píng)論 2 360
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像敲街,于是被迫代替她去往敵國(guó)和親团搞。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,554評(píng)論 2 349

推薦閱讀更多精彩內(nèi)容

  • 27多艇、移動(dòng)端響應(yīng)式布局開發(fā) 響應(yīng)式布局開發(fā) 1逻恐、什么是響應(yīng)式布局開發(fā)?把我們開發(fā)完成的產(chǎn)品峻黍,能夠讓其適配不同的設(shè)備...
    萌妹撒閱讀 1,040評(píng)論 0 0
  • 食物复隆、溫暖、回憶 對(duì)于每一個(gè)我喜歡的或喜歡過(guò)的人姆涩,都會(huì)有一幕挽拂,必定是跟食物有關(guān)的回憶。它們靜靜躺在我記憶深處骨饿,只有...
    加銅的草稿閱讀 206評(píng)論 0 0
  • 一天都處于腰酸背痛的狀態(tài)亏栈,不舒服,還挺忙的宏赘,早點(diǎn)休息绒北,保重好身體
    京心達(dá)查曉旭閱讀 43評(píng)論 0 0
  • 佛說(shuō) 你看世界是什么 自己便是什么 覺得世界有點(diǎn)亂 是因?yàn)樽约簛y了內(nèi)心 一味地感慨人情冷漠 可能因?yàn)樽约鹤兊谩肮蚜x...
    半樵閱讀 1,318評(píng)論 16 49
  • 兩個(gè)朋友給我的感悟和啟發(fā)闷游? 男生版: 朋友開玩笑說(shuō):老管和老程你選誰(shuí)? 另一個(gè)朋友說(shuō):選老程贴汪。 為啥储藐? 形象不比老...
    香菜和蒜蓉閱讀 270評(píng)論 0 0