神奇的F12鍵:UI你好,你可能要失業(yè)了
剛開始研究HTML+CSS的時候就知道有F12鍵的存在,最近做商城項目的時候偶然發(fā)現(xiàn)了它的神奇之處,于是總結(jié)了下來
這幾年UI好像特別火,滿大街的都是UI。為什么呢?這就要得益于互聯(lián)網(wǎng)的推波助瀾。無論是大公司還是小企業(yè),都在做網(wǎng)站,做app, 所以他們需要UI啊,所以全民UI啊。然而,最近我發(fā)現(xiàn)了一個神奇的東西,那就是F12鍵。功能簡直不能更強大,可以直接copy別人家的設計,別人家的圖片,別人家的... ...
有了F12,前端開發(fā)可以跳過設計,直接敲代碼,而且做出來的效果還會比初級UI設計出來的東東,好上個十倍、百倍。
當我們正常的打開網(wǎng)頁,比如打開“小米商城”,它是長這樣的。

然后當我們按下F12鍵,調(diào)出調(diào)試器,你就會發(fā)現(xiàn)網(wǎng)頁的右側(cè)就出現(xiàn)HTML和CSS樣式,

如果公司沒有UI,那么前端就可以直接根據(jù)調(diào)試器里的樣式,來編寫自己的網(wǎng)頁代碼,復制出一個跟小米商城類似的網(wǎng)站,那么也就沒有UI的什么事了。
你不失業(yè),誰失業(yè)。
但是如果很不幸,你就是UI,看不懂代碼沒關(guān)系,F(xiàn)12鍵也將是提高你的工作效率的神器。
提高你的PC端找圖效率
如果你要設計一個商城,商品圖片的質(zhì)量直接關(guān)系到了網(wǎng)頁設計的質(zhì)量。那么找圖將會花費掉你很大一部分時間和精力。但是現(xiàn)在,F(xiàn)12可以幫你解決這個問題。
打開淘寶,天貓,京東等商城購物網(wǎng)站,找到自己需要的商品圖片或者banner,然后按下F12鍵,通過簡單幾個操作就可以得到你所需要的圖片。
同樣的以小米商城為例,紅色矩形框住的部分就是我們需要劃重點的部分,

通過5個步驟,我們就能得到自己想要的banner圖片。
1.讓帶有箭頭的那個圖標處于選中狀態(tài) → 2.鼠標點擊你所需要的圖片,調(diào)試器里相對應的代碼就會被選中 → 3.鼠標右鍵帶下劃線的圖片鏈接 → 4.選擇在新的標簽頁中打開鏈接 → 5.把新頁面中的圖片另存為到自己的文件夾
用一張圖簡單歸納出來就是,

就這樣,別人的圖片就變成你的了,而且同一個網(wǎng)頁上的商品圖片的尺寸和風格都是一致的,你不僅節(jié)省了找圖的時間,同時也節(jié)省了處理圖片的時間。
通過這種方式所得到的圖片通常都是高清大圖,網(wǎng)站的檔次和逼格一下子就上去了。
節(jié)省你的APP項目找圖時間
在用F12調(diào)出調(diào)試器的情況下,我們可以在PC模式和H5模式下切換自如。同樣,紅色矩形框住的部分需要我們重點掌握。

用鼠標點擊兩個大小不一樣的矩形所組成的圖標后,把它網(wǎng)址中的“www”改為“m”,它就進入到了正常的H5頁面。然后,在iPhone6處,點擊下拉圖標,你可以切換到任何你需要的、不同屏幕尺寸的手機模式。
用一張圖歸納如下:

在H5模式下,你也可以像之前一樣“偷”別人家移動端的圖片了。
如果你稍微懂一點代碼,你不用再像之前一樣,看到好的樣式設計,先在手機里下載app,然后手機截圖,然后傳到電腦上,然后導進PS里,然后手動測量,然后再設計實施... ... 這樣不僅麻煩,而且還會存在一定的誤差。
通過H5模式,你可以直接查看別人家的版式間距,文字屬性等等,簡直不能更方便了。
神奇的F12鍵,無論是UI還是前端,都是必備技能。
寫在最后,只有不斷學習,才能永不失業(yè)。








































