?在上一篇文章中小白已經(jīng)講解了文字標注，詳情見什么樣的設計標注稿更易于前端實現(xiàn)？-（文字篇）。今天小白簡單的講下圖像標注。為什么稱為“圖像”而不是“圖片”呢？因為網(wǎng)頁設計中除了采用大量圖片外，還會使用一些音、視頻文件。

以下內(nèi)容針對于web設計的標注基礎知識，前端專業(yè)人士與設計高手可忽略此文。

一、關(guān)于圖片

在網(wǎng)頁設計中常見的有圖標、不規(guī)則圖形、圖片、GIF動圖。

1.格式

在網(wǎng)頁設計中，圖標與不規(guī)則圖形通常用png格式，圖片通常用jpg格式。以下是各種格式的特性說明：

圖片來自網(wǎng)絡

2.控制圖片的體積

對于軟件而言，圖片越多，體積越大，可能就會造成多次網(wǎng)絡請求、占用較大的寬帶資源與數(shù)據(jù)空間。對于用戶來講，可能會明顯感知到圖片加載的等待過程，我們需要在圖片質(zhì)量與體積之間尋找平衡點，尤其是分辨率較高、色彩較為豐富的高質(zhì)量攝影素材，我們在導出成web可用的素材時應該在圖片的精細度不降低的前提下縮小圖片體積。但是即便怎么優(yōu)化，我們也難以預料各種網(wǎng)絡因素，所以通常我們除了提供圖片素材本身，也會提供加載狀態(tài)時的設計。除此，存放在服務器里的圖片也可能被刪除、或者找不到?？傊?，我們要考慮圖片加載失敗或者丟失的設計。

舉個例子，我們在淘寶網(wǎng)站中看到的banner圖，如下，像素尺寸1130×500，實際的文件大小只有幾十KB。如果你的網(wǎng)站圖片素材較多，請一定別忘了壓縮體積這件事。

3.減少圖片的使用

如果前端可以用代碼實現(xiàn)的簡單幾何圖形，圓角、漸變、陰影等。我們就無需提供圖片素材了，除非實現(xiàn)出來的效果丑爆了、非常影響用戶體驗。舉個例子，前端css樣式里有跟photoshop對應的投影效果、如投影顏色、不透明度、投影角度、投影的偏移大小、投影的模糊大小等（請注意就不要使用各種圖層疊加效果了哦，否則前端按照你的標注實現(xiàn)出現(xiàn)的投影效果跟預期偏差很大哦），有責任心的前端小伙伴一定能實現(xiàn)一般的投影需求。

除此，同一圖標素材的不同狀態(tài)：默認、懸停、按下（網(wǎng)頁通常不需要按下效果）、禁用，我們往常需要提供4張素材。但是，通過透明度（opacity）（請注意photoshop圖層里效果里的是不透明度值，建議標注的時候轉(zhuǎn)換成透明度值哦，）的處理，且在不影響用戶體驗和設計的目的情況下，我們便可以只使用一張圖片就能搞定控件的多種狀態(tài)，從而減少圖片的使用和網(wǎng)絡請求。

將網(wǎng)頁中的圖標與圖形整合在一張圖片文件中（俗稱雪碧圖），前端小伙伴會定位到對應的位置上。這樣做的好處是減少了網(wǎng)頁的http的請求次數(shù)，也減少了圖片的總體積（單獨一張雪碧圖比很多張小圖的總大小還要小，降低了服務器存儲壓力）。直觀點說，如果每張圖單獨提供，你可能會發(fā)現(xiàn)圖片出現(xiàn)的比文字晚一些，會不那么流暢（一閃一下，這樣做法的網(wǎng)頁很多，大家可以自行去觀察）。這樣做的缺點是如果圖片有改動，設計師需要花精力更新、維護好圖片文件哦。

為了方便前端的小伙伴精準定位，我們需要把小圖片排整齊了，并標注出圖片之間的間距。如果網(wǎng)站涉及到的圖標與圖形比較多，可以按照內(nèi)容或者交互模塊拆分為幾張圖。大家看下網(wǎng)易云音樂里的素材。

來自網(wǎng)易云音樂

來自網(wǎng)易云音樂

4.圖標字體iconfont與SVG格式圖標

現(xiàn)在較為流行的方式是使用圖標字體化iconfont，顧名思義，就是把圖標處理成字體來顯示在屏幕上。使用字體圖標可以不受屏幕分辨率的限制，因為前端可以控制、調(diào)整圖標的大小、顏色和更多的樣式效果，并且不會變模糊哦。所以很多網(wǎng)頁開發(fā)都在嘗試這種方法了。

那設計師如何制作字體文件呢？首先用AI制作矢量圖標（直接黑或白單色就可以啦），做好后另存為SVG格式（一種圖標字體文件啦），SVG格式可以使用瀏覽器打開預覽效果；然后打開制作圖標字體網(wǎng)站?https://icomoon.io/，導入自己SVG文件，就能生成一個字體文件壓縮包，把這個包包丟給前端就可以了。

給大家百度了一個該網(wǎng)站生成圖標字體的教程。

當然icomoon這個網(wǎng)站還可以找到一些免費可供使用的SVG圖標，除此，大家也可以使用阿里的iconfont網(wǎng)站上傳維護自己的SVG圖標。

阿里 ?http://www.iconfont/

但是iconfont有幾個缺點：

• 跟文字一樣，只能支持單色哦。
• 字體文件體積較大，影響頁面的加載速度，尤其是包含數(shù)百圖標的字體，卻使用了其中幾個，豈不是很浪費？
• 既然是字體文件，不同瀏覽器渲染出來的效果就會有差異，說白了，樣式可調(diào)整的空間越大，就越難控制最后顯示出來的效果。同樣瀏覽器也會將其視為字體進行抗鋸齒處理，有時效果并沒有想象中的那么清晰銳利（相對與純圖片效果還是有優(yōu)勢的）。

那既然圖標字體有這么多的問題，那么為什么不直接使用SVG格式呢？畢竟圖標字體也是通過SVG封裝形成的，這樣我們就可以避免字體帶來的一些缺點，同時可以保留矢量圖形的優(yōu)點。對于前端來講，可以直接調(diào)用SVG格式的圖片，跟調(diào)用png、jpg圖片一樣的。既然只是提供SVG格式，那么在AI中制作圖標時候，可以多嘗試幾種顏色了。以后提供一張SVG圖片，就可以適用在不同尺寸需要的地方。
如何去發(fā)現(xiàn)網(wǎng)頁中圖標是否使用了SVG格式呢？你可以右擊圖標，點擊“審查元素”。如果看不懂，最笨最直接的方法就是使勁的放大，看看有沒有發(fā)生模糊。

所以呢，還是要根據(jù)具體情況采用具體的策略的，例如淘寶網(wǎng)站里很多單色圖標都是使用圖標字體實現(xiàn)的。

二、如何標注

1.圖標與圖形

（1）不規(guī)則圖形的標注

前端能寫出來的圖形，我們直接標注尺寸就行，如果是不規(guī)則圖形，我們需要把不規(guī)則的部分切圖提供給前端。如果規(guī)則部分的圖形尺寸是隨內(nèi)容擴展的，那我們還要說明規(guī)則。舉個例子，如下

（2）圖標與文字組合的標注

圖標與文字的組合通常是標題或者按鈕。需要標注出圖標與文字的間據(jù)，圖標與其他盒子的間距。如果圖標充當了背景，盡量提供與所在盒子一樣的尺寸，減少前端不停位移對位置的工作。

2.圖片素材

（1）固定尺寸的圖片標注

比較常規(guī)，直接標注出長與寬，與其他盒子的間距即可。

（2）需要縮放、裁切的圖片說明

在做圖片懸掛效果時，可以會稍微的縮放圖片的尺寸，在制作素材的時候我們需要提高最大尺寸的那張圖，然后需要標注出另外一張圖的縮放比例。如圖：

（3）背景圖片

在網(wǎng)頁設計中較為流行的是采用背景大圖，直接鋪滿的那種。如果是可拼接的圖形還好，你只需提供一個單元的素材即可。如果是高品質(zhì)素材，如上文所述，我們需要控制圖片的體積大小，根據(jù)不同的屏幕分辨率提供不同尺寸的素材?；蛘呖刂茍D片體積的基礎上，直接提供一張1920px寬度的背景圖片。例如唯品會頁面的banner圖片處理，當屏幕分辨率變小時，背景圖片邊上的部分就被裁切。

下面是淘寶一網(wǎng)店首頁banner圖，當屏幕分辨率變小時，背景圖片長寬會等比例縮小。

你已經(jīng)看完了嗎？希望對你或多或少有些幫助。

作者：小白，微信公眾號：小白的交互設計。

本文由 @小白 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。