起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識什么樣的設計標注稿更易于前端實現？-（圖像篇）
?在上一篇文章中小白已經講解了文字標注，詳情見什么樣的設計標注稿更易于前端實現？-（文字篇）。今天小白簡單的講下圖像標注。為什么稱為“圖像”而不是“圖片”呢？因為網頁設計中除了采用大量圖片外，還會使用一些音、視頻文件。
以下內容針對于web設計的標注基礎知識，前端專業人士與設計高手可忽略此文。
一、關于圖片
在網頁設計中常見的有圖標、不規則圖形、圖片、GIF動圖。
1.格式
在網頁設計中，圖標與不規則圖形通常用png格式，圖片通常用jpg格式。以下是各種格式的特性說明：
圖片來自網絡
2.控制圖片的體積
對于軟件而言，圖片越多，體積越大，可能就會造成多次網絡請求、占用較大的寬帶資源與數據空間。對于用戶來講，可能會明顯感知到圖片加載的等待過程，我們需要在圖片質量與體積之間尋找平衡點，尤其是分辨率較高、色彩較為豐富的高質量攝影素材，我們在導出成web可用的素材時應該在圖片的精細度不降低的前提下縮小圖片體積。但是即便怎么優化，我們也難以預料各種網絡因素，所以通常我們除了提供圖片素材本身，也會提供加載狀態時的設計。除此，存放在服務器里的圖片也可能被刪除、或者找不到?？傊覀円紤]圖片加載失敗或者丟失的設計。
舉個例子，我們在淘寶網站中看到的banner圖，如下，像素尺寸1130×500，實際的文件大小只有幾十KB。如果你的網站圖片素材較多，請一定別忘了壓縮體積這件事。
3.減少圖片的使用
如果前端可以用代碼實現的簡單幾何圖形，圓角、漸變、陰影等。我們就無需提供圖片素材了，除非實現出來的效果丑爆了、非常影響用戶體驗。舉個例子，前端css樣式里有跟photoshop對應的投影效果、如投影顏色、不透明度、投影角度、投影的偏移大小、投影的模糊大小等（請注意就不要使用各種圖層疊加效果了哦，否則前端按照你的標注實現出現的投影效果跟預期偏差很大哦），有責任心的前端小伙伴一定能實現一般的投影需求。
除此，同一圖標素材的不同狀態：默認、懸停、按下（網頁通常不需要按下效果）、禁用，我們往常需要提供4張素材。但是，通過透明度（opacity）（請注意photoshop圖層里效果里的是不透明度值，建議標注的時候轉換成透明度值哦，）的處理，且在不影響用戶體驗和設計的目的情況下，我們便可以只使用一張圖片就能搞定控件的多種狀態，從而減少圖片的使用和網絡請求。
將網頁中的圖標與圖形整合在一張圖片文件中（俗稱雪碧圖），前端小伙伴會定位到對應的位置上。這樣做的好處是減少了網頁的http的請求次數，也減少了圖片的總體積（單獨一張雪碧圖比很多張小圖的總大小還要小，降低了服務器存儲壓力）。直觀點說，如果每張圖單獨提供，你可能會發現圖片出現的比文字晚一些，會不那么流暢（一閃一下，這樣做法的網頁很多，大家可以自行去觀察）。這樣做的缺點是如果圖片有改動，設計師需要花精力更新、維護好圖片文件哦。
為了方便前端的小伙伴精準定位，我們需要把小圖片排整齊了，并標注出圖片之間的間距。如果網站涉及到的圖標與圖形比較多，可以按照內容或者交互模塊拆分為幾張圖。大家看下網易云音樂里的素材。
來自網易云音樂
來自網易云音樂
4.圖標字體iconfont與SVG格式圖標
現在較為流行的方式是使用圖標字體化iconfont，顧名思義，就是把圖標處理成字體來顯示在屏幕上。使用字體圖標可以不受屏幕分辨率的限制，因為前端可以控制、調整圖標的大小、顏色和更多的樣式效果，并且不會變模糊哦。所以很多網頁開發都在嘗試這種方法了。
那設計師如何制作字體文件呢？首先用AI制作矢量圖標（直接黑或白單色就可以啦），做好后另存為SVG格式（一種圖標字體文件啦），SVG格式可以使用瀏覽器打開預覽效果；然后打開制作圖標字體網站?https://icomoon.io/，導入自己SVG文件，就能生成一個字體文件壓縮包，把這個包包丟給前端就可以了。
給大家百度了一個該網站生成圖標字體的教程。
當然icomoon這個網站還可以找到一些免費可供使用的SVG圖標，除此，大家也可以使用阿里的iconfont網站上傳維護自己的SVG圖標。
但是iconfont有幾個缺點：
- 跟文字一樣，只能支持單色哦。
- 字體文件體積較大，影響頁面的加載速度，尤其是包含數百圖標的字體，卻使用了其中幾個，豈不是很浪費？
- 既然是字體文件，不同瀏覽器渲染出來的效果就會有差異，說白了，樣式可調整的空間越大，就越難控制最后顯示出來的效果。同樣瀏覽器也會將其視為字體進行抗鋸齒處理，有時效果并沒有想象中的那么清晰銳利（相對與純圖片效果還是有優勢的）。
那既然圖標字體有這么多的問題，那么為什么不直接使用SVG格式呢？畢竟圖標字體也是通過SVG封裝形成的，這樣我們就可以避免字體帶來的一些缺點，同時可以保留矢量圖形的優點。對于前端來講，可以直接調用SVG格式的圖片，跟調用png、jpg圖片一樣的。既然只是提供SVG格式，那么在AI中制作圖標時候，可以多嘗試幾種顏色了。以后提供一張SVG圖片，就可以適用在不同尺寸需要的地方。
如何去發現網頁中圖標是否使用了SVG格式呢？你可以右擊圖標，點擊“審查元素”。如果看不懂，最笨最直接的方法就是使勁的放大，看看有沒有發生模糊。
所以呢，還是要根據具體情況采用具體的策略的，例如淘寶網站里很多單色圖標都是使用圖標字體實現的。
二、如何標注
1.圖標與圖形
（1）不規則圖形的標注
前端能寫出來的圖形，我們直接標注尺寸就行，如果是不規則圖形，我們需要把不規則的部分切圖提供給前端。如果規則部分的圖形尺寸是隨內容擴展的，那我們還要說明規則。舉個例子，如下
（2）圖標與文字組合的標注
圖標與文字的組合通常是標題或者按鈕。需要標注出圖標與文字的間據，圖標與其他盒子的間距。如果圖標充當了背景，盡量提供與所在盒子一樣的尺寸，減少前端不停位移對位置的工作。
2.圖片素材
（1）固定尺寸的圖片標注
比較常規，直接標注出長與寬，與其他盒子的間距即可。
（2）需要縮放、裁切的圖片說明
在做圖片懸掛效果時，可以會稍微的縮放圖片的尺寸，在制作素材的時候我們需要提高最大尺寸的那張圖，然后需要標注出另外一張圖的縮放比例。如圖：
（3）背景圖片
在網頁設計中較為流行的是采用背景大圖，直接鋪滿的那種。如果是可拼接的圖形還好，你只需提供一個單元的素材即可。如果是高品質素材，如上文所述，我們需要控制圖片的體積大小，根據不同的屏幕分辨率提供不同尺寸的素材?；蛘呖刂茍D片體積的基礎上，直接提供一張1920px寬度的背景圖片。例如唯品會頁面的banner圖片處理，當屏幕分辨率變小時，背景圖片邊上的部分就被裁切。
下面是淘寶一網店首頁banner圖，當屏幕分辨率變小時，背景圖片長寬會等比例縮小。
你已經看完了嗎？希望對你或多或少有些幫助。
作者：小白，微信公眾號：小白的交互設計。
本文由 @小白 原創發布于人人都是產品經理。未經許可，禁止轉載。
- 目前還沒評論，等你發揮！
