這幾年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è)。