小米商城APP活動頁UI優(yōu)化，如何做有策略性的UI設(shè)計！

?前言?

電商產(chǎn)品每到節(jié)日幾乎都會做促銷活動，活動頁就是承載促銷活動的主要功能頁面。

說到活動頁大家的印象一定是視覺沖擊力強，活動氛圍很足，也確實如此活動頁需要這樣的感覺。

但是被過度設(shè)計的活動頁會適得其反，比如混亂的元素、糟糕的排版、不合理的配色都會讓用戶反感，最終達(dá)不到活動預(yù)期。

本期我們就針對一個真實的活動頁案例，進(jìn)行有策略性、有依據(jù)的視覺優(yōu)化。

?案例解析?

小米商城在816期間策劃了感恩季活動，活動正式開始前，有訂金預(yù)售階段，用來預(yù)熱和宣傳活動，接下來要優(yōu)化的就是預(yù)熱會場活動頁。

下圖是市場部給到的活動頁，經(jīng)過我們設(shè)計團隊和運營方的評估，認(rèn)為設(shè)計未達(dá)預(yù)期，需要進(jìn)行二次優(yōu)化，下圖所示。

優(yōu)化前版本

從整體來看有活動氛圍，但信息呈現(xiàn)、設(shè)計技法、色彩把控都有提升的空間，如果視覺呈現(xiàn)不夠好，用戶第一映像就會失去一定的信任感。

如果信息呈現(xiàn)不合理，用戶很難找到信息重點和優(yōu)惠賣點，就會降低導(dǎo)購效率，進(jìn)而影響用戶決策。

下面我們把每個模塊的問題做一個詳細(xì)總結(jié)，然后再針對性的去調(diào)整設(shè)計。

?優(yōu)化前工作?

在優(yōu)化前首先要充分了解活動，與運營同學(xué)進(jìn)一步溝通，了解活動運營策略，比如需要了解活動主推哪些商品，然后把主推商品放置頭圖重點曝光。

了解預(yù)售會場在整個活動中的權(quán)重，權(quán)重大小決定視覺設(shè)計上的氛圍強弱，比如預(yù)售會場肯定不能強過活動當(dāng)天的活動氛圍。

了解活動商品的主要賣點，然后通過設(shè)計手段合理表達(dá)。

做好設(shè)計前期的工作，就是有策略性、有依據(jù)的做設(shè)計。

另外再說一點，設(shè)計師前期與需求方進(jìn)行一番深入的需求探討和設(shè)計研究，不僅對設(shè)計有很大幫助，而且還會得到對方充分的信任，這樣的合作最終都是更有價值的、愉快的。

?頭圖優(yōu)化?

舊版

頭圖最大的問題是背景暗淡有臟臟的感覺，其次是背景元素雜亂與元素較多的主視覺放一起不夠恰當(dāng)。

頭圖的設(shè)計其實很好定義，主視覺元素復(fù)雜較多，那就設(shè)計一個簡單的背景，主視覺簡單，那就設(shè)計一個較為豐富的背景，可增強活動的氛圍感。

標(biāo)題有三個層級，活動主題、活動名稱、活動賣點，三個信息層級本身沒問題，但頭圖的下方又出現(xiàn)標(biāo)簽信息的賣點展示（上圖的藍(lán)條），這就導(dǎo)致頭圖的信息冗余。

頭圖上的商品擺放透視、大小、投影都沒有處理的特別好，需要根據(jù)運營策略更換適合的商品。

標(biāo)簽的設(shè)計樣式在頭圖與商品列表中間顯得非常割裂，設(shè)計形式?jīng)]有做好與整體的融合。

背景優(yōu)化

頭圖的主視覺設(shè)計首先要符合業(yè)務(wù)策略，不能強于活動氛圍當(dāng)天的頭圖，所以與設(shè)計活動當(dāng)天頭圖的同事進(jìn)行探討，想法達(dá)成一致后進(jìn)行下一步的設(shè)計。

頭圖改版還是以現(xiàn)有的元素為基調(diào)，提亮背景，減少背景元素，調(diào)整主視覺位置，下方元素過多沒關(guān)系，后面會用漸變遮擋。

商品優(yōu)化

與運營同學(xué)確定主推擺放的商品，設(shè)計上放置商品也要有設(shè)計策略，比如兩個白色的商品盡量分開放，電視機選擇封面與背景對比強的等等。

商品投影的處理盡可能真實，商品整體加上了環(huán)境光，紅色的臺面商品就會反射紅色光，做好這兩點商品看起來融入感會更好。

標(biāo)題優(yōu)化

因為頭圖下方還要放置標(biāo)簽賣點，所以標(biāo)題兩行更合適，這樣信息結(jié)構(gòu)會更簡潔。

“小米816 感恩季”的主題字，在所有的宣傳海報都是紅色，所以這里最好也應(yīng)該是紅色字，舊版使用藍(lán)色字，感恩的寓意表達(dá)不是很強。

“預(yù)售會場”字號設(shè)計較大，比較突出，但因為使用淺色調(diào)并不會顯得突兀。

字的投影與背景做了色調(diào)上的融合，整體看起來會比較協(xié)調(diào)。

下面分享一下投影的設(shè)計技法，非常簡單，會的同學(xué)可以直接略過。

設(shè)計方法：字體轉(zhuǎn)為圖形，給一個合適的漸變色，在使用動感模糊，動感參數(shù)調(diào)整為15，角度調(diào)整為45度（根據(jù)光影設(shè)定）。

然后整體再給一個90%的透明度，這樣能更好的與背景色融入，最后用白色的文字圖層覆蓋，調(diào)整位置即可。

標(biāo)簽優(yōu)化

賣點標(biāo)簽的主要作用，是介紹此次活動最有吸引力的優(yōu)惠政策，設(shè)計的要點需要突出文字優(yōu)惠信息，還要做好與整體的融合。

設(shè)計上要做到讓用戶容易看到文字優(yōu)惠信息，但也能讓用戶看過一次后，視覺上容易忽略掉，這就需要把握好設(shè)計的度。

優(yōu)化后設(shè)計上加大字號，弱化背景色調(diào)，放置頭圖，頭圖背景使用漸變色與頁面下方的底色融接，這樣就會成為了一個整體。

?商品列表優(yōu)化?

舊版

產(chǎn)品列表背景圖，其實沒必要再設(shè)計突出的樣式，設(shè)計多處沒有策略的突出樣式就是過度設(shè)計。

頭圖已經(jīng)強調(diào)了活動氛圍，下面應(yīng)該安靜地展示商品更為合適。

商品列表的問題是賣點信息排版設(shè)計不合理，賣點信息放在列表右上角并不是最優(yōu)的方案，因為文字多就破壞了列表信息結(jié)構(gòu)。

另外，賣點信息使用了兩個沒有依據(jù)的顏色，再加上顏色由于明度高與白色字也沒有拉開對比，這個問題直接導(dǎo)致用戶容易忽略最關(guān)鍵的賣點信息。

另外，按鈕中的小文字過于小，不符合UI的設(shè)計規(guī)范，活動頁的文字元素還是要展示的直接明了，按鈕漸變色的使用也有可提升的空間。

新版

優(yōu)化后商品列表背景改為暖色調(diào)，用于簡單的強調(diào)氛圍，同時列表中也增加了活動主題標(biāo)識（紅色心形主題logo），進(jìn)一步能強調(diào)主題。

把賣點信息融入列表信息中，用圖標(biāo)+紅色字的樣式突出，這樣信息的呈現(xiàn)既工整，也做到了突出。

按鈕的設(shè)計樣式改為兩邊對比強烈的色調(diào)，漸變色使用左右漸變，舊版的上下漸變樣式看起來鼓鼓的，其實是比較過時的樣式。

立即預(yù)訂按鈕顏色依舊使用黃色，因為是預(yù)訂流程還不是購買，所以黃色的寓意較為恰當(dāng)。

?兩坑列表優(yōu)化?

舊版

同樣的問題，兩坑列表的賣點信息背景色與白色字對比度依舊沒有拉開，這樣很容易造成閱讀困難。

兩坑列表按鈕是“立即購買”，所以使用強烈的紅色更為恰當(dāng)，紅色同時也區(qū)別了黃色預(yù)訂流程按鈕。

另外，列表副標(biāo)題字號過小不符合設(shè)計規(guī)范，這點也需要做字號的優(yōu)化。

新版

改版后，賣點改為紅色標(biāo)簽形式，放置左上角，調(diào)整排版樣式和副標(biāo)題字號，使用紅色漸變按鈕。

?標(biāo)題優(yōu)化?

舊版

先說一下此活動頁后臺配置的方式，設(shè)計師設(shè)計好活動頁后，需要把頁面分塊切圖給到運營同學(xué)，他們再把切圖上傳后臺分別配置鏈接即可，最終形成完整的活動頁。

配置方式就類似蓋樓層，上圖就是一個一個模塊的標(biāo)題，需要分別切圖給到運營同學(xué)。

舊版的設(shè)計技法過于老舊，樣式不夠簡潔，所以標(biāo)題樣式也需要進(jìn)一步優(yōu)化。

新版

優(yōu)化后結(jié)合了感恩季主題元素，使用心形元素來裝飾標(biāo)題，對于此活動頁這樣簡潔的設(shè)計形式更合適。

?底部Tab優(yōu)化?

舊版

舊版底部Tab依舊是有很多裝飾，其實底Tab空間并不大，這樣的設(shè)計形式，對于商品圖標(biāo)來說不太容易識別，再加上字號也小于UI規(guī)范，視覺體驗就會存在問題。

另外沒有預(yù)留Home條位置，這也是一個比較嚴(yán)重的問題，這樣切圖配置后，文字會被Home條遮擋。

新版

針對舊版存在的問題，優(yōu)化設(shè)計樣式，減少修飾元素，以簡潔突出商品為主，字號使用規(guī)范大小，預(yù)留Home條位置。

?最終整體效果?

最終效果

上圖是優(yōu)化后的效果，頁面中根據(jù)運營需求又加了兩個搶紅包位置。

?最后?

設(shè)計的本質(zhì)是助力業(yè)務(wù)拿到更好的結(jié)果，所以設(shè)計應(yīng)該是有策略的、有目的的完成。

設(shè)計前期通透的了解業(yè)務(wù)，再結(jié)合業(yè)務(wù)做設(shè)計策略，那設(shè)計結(jié)果才會是經(jīng)得起考驗、更有價值的。

先點個“在看”，然后帶你進(jìn)設(shè)計群，公眾號后臺回復(fù)“1”即可，我等你

長按下方二維碼，關(guān)注“互聯(lián)網(wǎng)設(shè)計幫”