APP圖標設計小技巧：在iOS上快速獲得APP圖標的真實預覽圖
嚴格來說，這並不是一篇關於前端開發的文章，因為涉及到的知識非常淺。這只是一個向設計獅們分享的小經驗，只是其中用到了一些前端內容。
最近接了個私活，了解到一個初創公司正在高價懸賞Logo（主要用於APP圖標），我便投稿試了試，結果真的被選中了，得到了我認為遠超Logo本身價值的獎金（看來跟著拿到投資的初創公司混真的有肉吃啊）。閑話不表，設計完Logo之後我靈機一動，用iOS系統做了一個APP圖標真實效果預覽圖，一起發給了甲方。
我們假設剛做好的Logo是下面這樣的（這是樣例圖標，用我開發的UWP應用《紙書科學計算器》的Logo代替，色調就妥妥地用知乎藍吧）：
本文的最終目標是把它煞有介事地放在iOS的主屏幕上，效果如下：
如果你再拍一個實物圖出來，就可以充當這個圖標的效果圖了（手機拍得丑勿噴）：
總之這是一個讓你告別P圖和套Mockup的簡單方法。不用真的編譯出這個iOS應用，你需要做的，只是用電腦搭建一個本地伺服器，再做一張非常簡單的網頁即可。然後在iOS上用Safari打開這張網頁，將網頁快捷方式發送到主屏幕，就達到這個效果啦。
一、搭建本地靜態伺服器
本文以Windows系統為例。Mac系統可以用Apache，詳情請百度，並不複雜的。所以Mac用戶可以跳過本節。Windows雖然也可以用Apache，但是用自帶的IIS會更加方便。
作為.NET全家桶成員，IIS經常和後端的http://ASP.NET結合起來建站，但在這裡我們不需要配置http://ASP.NET。只用幾個步驟，便可在電腦上開啟IIS服務。
以下步驟以我電腦上的Win10系統為例，和Win8、Win7上的操作都是差不多的：
1.打開控制面板，進入「程序與功能」：
2.點擊「啟用或關閉Windows功能」：
3.參照圖中紅色圈出部分，勾選需要的組件。需注意：不能只勾選最上一級選項，必須從最底層選項開始勾選，直至所選組件全部顯示為「√」，如圖中所示。
4.點擊「確定」按鈕，Windows開始添加IIS功能，這會持續幾分鐘，然後就可以使用IIS功能了。
5.在開始菜單的「Windows管理工具」目錄下，找到並打開「Internet Information Services(IIS)管理器」（建議把該快捷方式固定在開始菜單，以後打開會更方便）。
6.在界面左側列表找到自己的主機那一項，右鍵，選擇「添加網站」：
7.這時會彈出「添加網站」的窗口，我們先不要管它。我們打開命令提示符（cmd），輸入「ipconfig」並回車，即可查看自己本機在當前區域網內的IP地址（注意是IPv4地址，而且以「192.168」開頭）。
8.回到「添加網站」窗口，如下圖所示填寫網站名稱、設置伺服器根目錄所在路徑（根目錄選在哪裡看你喜好），並填入本機IP地址作為伺服器的訪問地址，點擊確定。
9.這時，我們發現網站已經建立並啟動了：
二、新建靜態頁面
有了本地伺服器，我們就可以放靜態網頁進去了。只要你的iOS設備和電腦連接著同一個wifi，iOS設備就可以訪問電腦上的伺服器。
1.在電腦上，我們進入剛剛設置好的伺服器根目錄下（我的是「C:server-root」），在這裡添加一個主頁。新建一個文本文檔，輸入以下代碼並保存，把文件名改為「index.html」。
<!DOCTYPE html>n<html lang="zh-cmn-Hans">n<head>n <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />n <link rel="apple-touch-icon" href="icon256.png" />nn <title>應用名稱</title>nn</head>n<body>n <p>OK!</p>n</body>n</html>n
（註：「應用名稱」處應改為你需要填寫的應用名稱）
2.然後再把設計好的Logo做一份尺寸為256px*256px的應用圖標，保存為png格式（尺寸一定要對），放在和index.html同一個目錄下，改名為「icon256.png」：
3.在瀏覽器中輸入你本機的IP地址，看看主頁是否成功顯示：
4.看來我們已經成功了！現在就可以在你的iOS設備上打開Safari，輸入該IP地址，在確認能正常訪問之後，點擊右上方的分享按鈕，再點擊「添加到主屏幕」：
接下來按一下home鍵，就會發現大功告成了：
下面簡單介紹下原理，最關鍵的是HTML里的這一句代碼：
<link rel="apple-touch-icon" href="icon256.png" />n
這句聲明了如果Safari將網頁快捷方式發送到主屏幕，就以「icon256.png」作為圖標。但是，在APP如此豐富的現在，好像沒什麼人這樣做了。
還好，這句的功能可不止這個。有了這個link元素，如果你收藏該網頁，在個人收藏夾中還會顯示這個圖標，這個應用場景就常見多了：
可能本文對於設計獅來說還是有點極客，不知道接受度如何。不管怎樣，祝設計愉快，甲方爽快~
推薦閱讀：