在整個設計和開發完成後，我們就進入了最佳化階段。

以下主要列舉了設計師需要最佳化和跟進的相關內容。共 5 個方面：

網站效能SEO使用者行為A/B 測試訪問資料

網站效能

然後，設計師就可以與開發人員一起，有針對性的進行改善，提高網站效能。

▲ web.dev 線上效能檢測

當然，設計師常見的最佳化工作，主要集中在以下兩大類。

圖片：

格式。選擇更加合適展示圖片內容所要採用的格式（JPG、PNG、SVG、GIF 等）。例如，JPG 格式適合多彩的照片，PNG 適合單色圖示等體積。進行一定範圍（人眼可接受的角度）的壓縮，減少圖片所佔儲存，以及採用 WebP 圖片格式的相容方案尺寸。針對不同端（電腦和手機）、不同解析度（普通屏和高畫質屏）的適當尺寸，節省載入資源

可用性：

色彩對比度。W3C 建議的視覺呈現文字和文字的影象具有對比度至少為 4.5:1，大型文字和影象的對比度至少為 3:1字型大小。PC 網頁字型大小一般使用不低於 12px，移動端字型大小不小於 10pt（sp）

SEO

很多設計師可能不能理解，為什麼要關注 SEO？這好像超出了“職能”範疇。

但做為網站的設計者，其實我們服務於兩個角色：潛在客戶 和 搜尋引擎。並且搜尋引擎最佳化中有一部分也是設計職能的範疇。

作為設計師，我們可以透過使用像 Checkbot 這種簡單易上手的工具，輸入網址便可對網站的 SEO、速度和安全性進行檢測，然後根據檢測報告中與設計相關的內容進行最佳化便可。

▲ Checkbot 線上 SEO 檢測

例如，常被設計師忽略的圖片 Title 和 Alt 屬性。畢竟搜尋引擎是無法理解圖片內容的，所以需要對圖片進行 Title（描述性標題） 和 Alt（可替代文字，圖片載入失敗時顯示） 描述。

以及網頁內容是否使用 Header Tags 來進行組織。在設計交付中我們需要明確的定義 H1-H3（如果不夠可以進行新增 H4、H5 等），否則前端工程師檢視設計稿時只會理解為不同字號而已。

▲ 視覺看上去是一樣，但對搜尋引擎的友好程度是不一樣的

同時，我們還需要在 百度搜索平臺 和 Google Search Console 提交相關站點資訊、網站連結等內容，從而保證我們設計的網站能夠被搜尋引擎收錄，以及能夠在搜尋頁面更好的展示給潛在使用者。

▲ 百度搜索平臺站點屬性設定

▲ Google Search Console 站點地圖提交

使用者行為

滾動熱圖，瞭解訪客瀏覽的主要內容範圍。在此範圍內，訪客不在繼續滾動，即絕大多數訪客放棄的位置。這可以很好的幫助我們瞭解當前內容安排的合理性以及不同模組內容的吸引力程度。

▲ 滾動熱圖資料

螢幕錄製，顧名思義就是錄製訪客的螢幕。這使得我們可以進行回放觀看訪客在網站上的行為。

▲ 螢幕錄製記錄

▲ 觀看訪客行為

訪問資料

A/B 測試在設計領域多用於方案的對比和驗證，並透過行為資料的統計來進行判斷。

Google Optimize，是一款免費的網站最佳化工具，可以進行 A/B 測試、多元測試和重定向測試等功能。

▲ Google Optimize A/B 測試

Google Optimize 有提供瀏覽器外掛，可以對要測試的原始版本進行線上修改，儲存後便生成了變體，所以設計師僅依靠自身的力量就可以完成測試設定。

多元測試，是對兩個及以上元素或模組的組合進行測試，從而確定變體的有效組合。

例如，首屏的文案和配圖，假如現在有 2 個文案和 3 張圖片，我們就可以組合成 6 套，進行多元的測試，找出最佳組合。

重定向測試，主要針對於差別很大的方案，同時不同的變體擁有不同的 URL。

例如，某個產品的介紹頁的改版，就可以採用重定向測試。訪客透過首頁入口進入產品頁面時，隨機分配到不同版本，最後透過相關資料的對比，我們就可以明確的知道改版有效性的具體情況。

訪問資料

其中行為流，可以幫助我們看出使用者的主要行為路徑，以及頁面漏損情況。

▲ Google Analytics 行為流

目標，是另一個經常被我常用到的模組。設定後，Google Analytics 可以幫助我們統計相關目標的具體資料。例如從首頁 > 產品頁 > 註冊頁的轉化資料。

▲ Google Analytics 目標