作為一名產品設計師，如何兼得美麗與才華而又不失用戶體驗？

做B端軟件產品，由于大多數企業電腦設備更新換代周期長，致使大多員工用的電腦老舊性能差，為了讓軟件運行使用流暢，軟件自身性能的重要性不言而喻（想想你曾經卸載狂拽炫酷吊炸天的360），卡頓是大忌，作為一名產品設計師，如何兼得美麗與才華而又不失用戶體驗？

何為性能優化

簡而言之，就是在不影響系統運行正確性的前提下，使之運行地更快，完成特定功能所需的時間更短。

摘自百度百科

性能優化的好處

對軟件自身而言，能夠減少網絡請求、節省寬帶資源和數據空間，從而提高軟件性能及自身的易用性；

從用戶感知方面，頁面加載更流暢、操作響應更及時，帶來良好的使用體驗。

設計師能做什么

性能優化雖是程序員嘴中常常念叨且擅長的事情，其實設計師也能從自身角度-“圖片的優化”來貢獻力量。 提高Web站點的用戶體驗，一個很重要的方面就是保證網頁的呈現速度，其中網站靜態資源-圖片通常占據了頁面下載的絕大部份，因此從性能優化角度而言，圖片絕對是重點之一，優化圖片能極大的節約寬帶提升性能。

以下是一些個人的總結及工作經驗，開始碼字，帶上你的小板凳，前排擠擠：

1.選對格式

圖片格式多種多樣，其自身的優缺點決定了使用場景及環境，在什么情況下采用何種的圖片格式，是我們作對的第一步，首先從了解他們入手：

JPEG是第一個國際圖像壓縮標準，.jpg和.jpeg是JPEG文件壓縮封存后常見的圖片格式，均為有損壓縮，且會產生迭代有損。JPEG可通過不同的壓縮比，去除圖像的部分信息和色彩數據，來降低原有文件的大小，同樣設計師也可以根據具體情況在圖像質量和文件大小之間找到平衡，特別適用于層次豐富，色彩較多的圖像。

JPEG2000 ，作為JPEG的升級版，它具備更高壓縮率，同時支持有損、無損壓縮和漸進傳輸的功能及其它新特性，必須是取代JPEG的節奏。

PNG，是一種無損壓縮的位圖格式，支持索引、RGB、灰度和Alpha通道等特性，具有較高的壓縮空間，保真效果好，支持透明，且定義了256個透明層次。 適用于色彩簡單，對比強烈的圖片，像圖標icon等，PNG也可以被用來無失真的儲存照片，但文件較太大并不適合網絡呈現（像珍貴圖像等其他所需另當別論）

GIF，常用于圖像動畫，具有高壓縮比的特性，占用空間小，保存的圖像只支持256色，會損失大量細節，但利于下載，組成的動畫適合網絡傳播。

SVG，矢量圖形格式，能夠清晰的顯示在任何分辨率設備，無需適配。SVG，是一種基于XML（可擴張性標記）的語言，采用文本傳輸且可被搜索，支持多種編輯（色彩變化，動畫效果等）具有較強的交互和動態性 。

WebP，2010年由谷歌開發，文件壓縮方面比JPEG更加優越，同時支持有損和無損壓縮，但解碼時間卻相對較慢。 此前有eBay團隊的測試，同時顯示50張同質量的WebP和jpg，WebP比jpg顯示快了2倍多，WebP雖然會增加解碼的時長，但減少了文件體積，縮短了加載時間，以致實際渲染速度更快。谷歌家的產物，且未被Web標準采納，其他平臺及瀏覽器的支持性相對較差，但可以在不支持的環境中進行的功能降級處理。

以下對上述常用的圖片格式做了簡單的對比總結：

2.一圖多用

以下介紹了一些小技巧，從而達到減少圖片的使用：

opacity，通過透明度的處理，且在不影響用戶體驗和設計的目的情況下，我們便可以只使用一張圖片就能搞定控件的多種狀態，從而減少圖片的使用和網絡請求。

SVG，可通過css樣式完成對圖片色彩的變換，從而也減少了多張圖片的使用。

css sprite，俗稱雪碧圖，就是把網頁中一些圖片整合到一張圖片文件中，再利用CSS定位顯示所需要顯示圖片的位置。好處在于能夠在網頁加載圖片時減少對服務器的請求次數，同時合并后的圖片應用統一色表儲存，因此單獨的一張的雪碧圖在大小上可能比之前的多張小圖片總的尺寸還要小，降低服務器儲存和請求壓力，同時提高了頁面的加載速度。

3.無圖模式

拉上你的前端小伙伴，開啟無圖模式：

css，Web的諸多樣式其實都是可以都過css來實現，例如簡單的幾何圖形、圓角、漸變、陰影等等（考慮IE8的還是有些雞肋），代碼畢竟屬于文本模式，請求資源小，加載和渲染速度都是圖片不可比擬的，每一個圖片的加載都需要一個http的請求，而瀏覽器同一時間對同一域名下的請求是有一定數量限制，超過限制數目的請求會被阻塞，從而延長用戶的感知時間，因此減少請求次數，也就提高了頁面的呈現速度。 另外通過css實現，在任何屏幕上都可以顯示出良好視覺的效果，無需多分辨率、多端適配。若軟件具有的自定義外觀的功能，css的優勢就更加的明顯強大，屬性修改一下就ok了。

iconfont，圖標字體，其實字體就是圖形化的東西，把圖標處理成字體來顯示在屏幕上，同樣瀏覽器也會將其視為字體進行抗鋸齒處理，有時效果并沒有想象中的那么清晰銳利（相對與純圖片效果還是相當可人的）。iconfont，作為字體，其位置和大小也會受css屬性的影響，同時為了得到最大范圍的瀏覽器支持，需要生成TTF、WOFF、EOT、SVG四種字體格式，不過這些問題交給阿里UX矢量庫就好了。

感悟

就像自己，也會在使用產品中，因長時間的等待加載而煩躁不安，從而影響操作和心情，作為一名產品設計師你需要為用戶著想，而不是看著自己的設計稿覺得NB，你需要去真正用、去運行你的產品，才知道什么是產品設計。

其他擴展閱讀

OFF：選擇合適圖片格式的指南

使用SVG來代替Web Iconfont(圖形字體化)

WebP 探尋之路

JPEG?VS JPEG2000

作者：Wing Hu

本文由 @Wing Hu 原創發布于人人都是產品經理。未經許可，禁止轉載