外貿(mào)人需要注意的谷歌Page Experience排名因素更新

今天，我們一起聊聊設(shè)計(jì)與谷歌將用戶體驗(yàn)排名這事兒。

Page Experience頁面體驗(yàn)包括啥內(nèi)容？根據(jù)Google官方的說法兒~：

Page Experience受一系列的子因素影響，分成7個(gè)不同的項(xiàng)目：

Largest Contentful Paint（LCP）：最大內(nèi)容渲染：顯示最大內(nèi)容元素所需時(shí)間，可反應(yīng)出網(wǎng)站的讀取速度

First Input Delay（FID）：首次輸入延遲：反應(yīng)網(wǎng)站互動體驗(yàn)與速度的關(guān)系

Cumulative Layout Shift（CLS）：累計(jì)布局偏移：反應(yīng)網(wǎng)站的視覺穩(wěn)定度

Moblie friendly：移動友好度

Safe browsing：安全性

Https：安全傳輸協(xié)議

No intrusive interstitials：無侵入式頁面

當(dāng)我最初只看到谷歌這個(gè)標(biāo)題的時(shí)候，我還在暗自欣喜：慢慢來的設(shè)計(jì)又有大谷歌的背書了！

我們不就是一直默默的做著優(yōu)化用戶體驗(yàn)的工作嗎，頓時(shí)有一種千里馬被伯樂選中的傲嬌感奔涌而出！

......然鵝，當(dāng)我仔仔細(xì)細(xì)讀完谷歌的詳細(xì)內(nèi)容后，我發(fā)現(xiàn)，原來我們是如此的不自信??！~

下面我為大家詳細(xì)剖析一波：

首先LCP是啥玩意兒？

簡單來說就是你的網(wǎng)站的一個(gè)頁面內(nèi)的第一個(gè)最大的內(nèi)容（“frame”of the content）被呈現(xiàn)出來的時(shí)間需要多久——因?yàn)榈谝粋€(gè)大內(nèi)容對用戶應(yīng)該也是最具吸引力的，很如果內(nèi)容載入很慢，對用戶體驗(yàn)就很不好。

以電商網(wǎng)站舉例，第一最大的內(nèi)容就是產(chǎn)品主圖（獨(dú)立站來說就是banner），而該圖片被使用者的瀏覽器呈現(xiàn)出來所用的時(shí)間，就是LCP。

??敲個(gè)黑板

LCP并不是測量你整個(gè)網(wǎng)頁上最大的內(nèi)容的加載時(shí)間，而是用戶打開你網(wǎng)頁后，看到的第一個(gè)最大的內(nèi)容被呈現(xiàn)出來要多少秒載入。

舉個(gè)栗子：在不影響展示效果前提下，Banner基本上都使用壓縮過的jpg圖片，較少使用png或視頻展示（特殊情況除外），甚至對圖片的顏色范圍和圖片內(nèi)容也會盡量控制，因?yàn)檫@也決定著圖片的大小，決定著加載時(shí)間的長短。當(dāng)鹽，我們也不建議使用圖片輪播（1是輪播實(shí)際讀取效率低，2是加載問題）。

我用上圖做了一個(gè)對比效果，我們看到山峰后面的黃色，是獨(dú)立的單色色塊，一般來說這里是分層處理，基本是三層由前至后：表單層/山峰層/背景層，這種模式?jīng)Q定了山峰要使用png的格式（天空為透明），而這么大大大大大一張滿屏png，細(xì)節(jié)又極其豐富的圖片，其格式大小可想而知，加載起來必然需要一定時(shí)間。

我花三分鐘粗糙改了一稿（其實(shí)改法有很多），供大家對比，感受一下調(diào)整后的色調(diào)和畫面信息的主次關(guān)系。最重要的是修改后山峰不再必須用PNG格式，因?yàn)樗梢哉w作為一個(gè)底圖了，所以減少一個(gè)層，優(yōu)化畫面效果的同時(shí)，加載時(shí)間會得到縮短（同比），這就是慢慢來一以貫之的解決之道——采用更簡單有效的方法，讓你的網(wǎng)站更具競爭力。

谷歌所提到的另外幾個(gè)體驗(yàn)，更多的關(guān)聯(lián)到技術(shù)和后臺，但是，我們在設(shè)計(jì)上也同樣在研究如何優(yōu)化這幾個(gè)方面的頁面體驗(yàn)，比如按鈕：

頁面中的按鈕一般分為下載、上傳/發(fā)送、翻頁、確認(rèn)、返回等功能，每個(gè)功能都有自己獨(dú)特的引導(dǎo)性，是頁面中操作最常用的交互載體。

按鈕如何設(shè)計(jì)，才能給用戶帶來最好的操作體驗(yàn)，并給網(wǎng)站帶來更高的留存率呢？（同樣關(guān)系到谷歌所提出的FID和CLS兩項(xiàng)技術(shù)指標(biāo)）

按鈕文案內(nèi)容清晰化，告知點(diǎn)擊目的，結(jié)果，以及注意口吻情感的表達(dá)，讓用戶感覺到被關(guān)愛、被尊重。按鈕設(shè)計(jì)形態(tài)的一致化，一般采用全圓角、方角、小圓角三種樣式，并分為實(shí)色底/線框兩種。個(gè)人認(rèn)為全圓角的按鈕，視覺重心上更集中在按鈕的文字區(qū)域，用戶的體驗(yàn)效果會更理想。

清晰的按鈕交互效果反饋，一般分為常態(tài)，經(jīng)過，點(diǎn)擊，失效四種狀態(tài)，每種狀態(tài)可以設(shè)置不同的色相、明度、陰影等來提高交互的辨識度，告知用戶當(dāng)前按鈕的所處狀態(tài)。

按鈕的引導(dǎo)性設(shè)計(jì)中，我認(rèn)為色彩起著核心作用，就比如洗手間的門牌設(shè)計(jì)，如果男女都是同色，則只能靠圖形來區(qū)分性別，那么用戶認(rèn)知的時(shí)間成本就會提高（圖形設(shè)計(jì)千差萬別，新用戶沒有認(rèn)知基礎(chǔ)），而藍(lán)/粉色區(qū)分開，則可極為快捷的認(rèn)知性別。以下是關(guān)于按鈕引導(dǎo)性的例子，各位請看：

我們?nèi)サ粑淖謱Ρ劝l(fā)現(xiàn)，顏色設(shè)計(jì)對于引導(dǎo)提示十分重要。一般來說暖色更為突出，冷色其次，飽和度相對較低的顏色最次，當(dāng)然這個(gè)也取決于網(wǎng)站色調(diào)的設(shè)計(jì)。

以上是部分關(guān)于用戶體驗(yàn)與設(shè)計(jì)的分析，由于相關(guān)知識是一個(gè)系統(tǒng)化的專業(yè)體系，在此小編就不一一詳細(xì)闡述了，其實(shí)萬變不離其宗，都是先從用戶角度出發(fā)去思考問題。