個人中心設計的五大要訣！——背景篇

前言

個人中心作為 app 內僅次於首頁的 tab 流量入口，重要性自然不言而喻。因而我們在設計時經常迷惑，糾結如何使頁面更加合理，實用。

而個人中心設計中最難的就是頁面背景的選擇，背景往往奠定了 app 的基調和整個頁面的信息排布。

那麼我們應該如何設計個人中心背景呢？

常見的五種設計方式

在經過多重分析之後，我總結了五種背景設計方法和大家分享一下。它們分別是：

用戶自行上傳、根據頭像變化、根據用戶等級、固定背景、無背景。

1.用戶自行上傳

用戶註冊登錄後的 app 個人中心通常會提供一張默認背景圖，用戶可通過個人設置或者直接點擊背景圖來選擇圖片替換。

設計特點：

用戶可根據個人喜好選擇背景，提高了用戶的參與度。同時這種設計方式突出了頭部的個人信息區域，優先順序相對高於下方的功能入口。

2.根據頭像變化

根據上傳頭像的變化而變化，通常會使用虛化頭像，然後疊加白色蒙層或者黑色蒙層的效果。

設計特點：

背景根據頭像變化，這種設計方式使頁面色調、風格與頭像統一，整體相對和諧、不突兀，不容易出錯。同時背景顏色的改變，也能將個人信息區和功能入口區分開。

3.根據用戶等級

根據用戶等級升降或者是否購買會員而更改背景顏色，意在打造用戶之間的差異感。

左圖是京東的 PLUS 會員，顏色從常規的紅色升級成尊貴 vip 的黑金色 ；右圖是淘票票的白銀會員，根據消費背景會從青銅會員-白銀會員-黃金會員-黑鑽會員，不同會員享有不同權益。

設計特點：

提升了高消費用戶和付費用戶的尊貴感，同時意在為會員營造更優質的環境和更貼心的服務。

4.固定背景

固定背景，顧名思義就是不提供用戶修改的入口，app 內部提供默認背景。

a.顏色背景

顏色背景是我們最常見的背景之一，各種純色漸變色的 app 多不勝數，有時還會疊加幾何圖形，底紋等裝飾。

左圖是美團外賣的個人中心頁面，使用了 app 的品牌黃色，點綴了外賣相關的元素；右圖網易考拉也使用了其 app 的品牌漸變色。

設計特點：

使用主題色，讓品牌概念在個人中心再一次得到強化，提高用戶對於品牌的辨識度。顏色背景最大的特點是可以根據運營活動作出定製化頭部，例如618大促，雙11購物節等等，和首頁的主題緊密相關。

b.卡通背景

卡通背景較少出現在日常 app 中，卡通形象受眾用戶相對較少，使用不當卡通背景會給用戶帶來低幼的感覺。

設計特點：

使用卡通形象，可以突出 app 的可愛調性，加深用戶對品牌形象的認知。同時用戶在使用的過程中，心情相對而言會輕鬆、愉悅一些。

c.圖片背景

圖片背景使用了一張固定圖片作為背景，通常作為襯托，展示上相對比較弱化。

設計特點：

使用背景圖片可以突出 app 的類別，烘托氛圍，給予用戶沉浸式體驗。例如美圖美妝，使用了女性最愛的粉色配以馬卡龍作為背景圖片；螞蟻短租則使用了室內的家居圖，體現 app 作為旅遊住宿平台，立志讓每位房客體驗到家感覺的決心。

d.動效背景

動效背景我們以唱吧 app 為例，漸變背景從藍色到紫色，再到紅色的漸變。

設計特點：

雖然說漸變色背景現在比較普遍，但是動效漸變卻能第一眼吸引用戶注意力，能夠讓整個場景更加時尚，多變。

5.無背景

無背景也是我們最常見的背景之一，搭配用戶信息和功能入口，整個頁面乾淨整潔。

設計特點：

頁面整體乾淨簡潔、弱化了頭部的用戶信息，從而突出頁面其他功能。例如左圖的馬蜂窩，強化了「記錄你的旅行」功能；右圖的閑魚頁面功能重要性相對平均，就突出了頁面下方的發布按鈕。

總結

個人中心設計中最難的就是頁面背景的選擇，我們需要自設計的時候先了解整個頁面中各元素的重要性，哪些需要突出或者弱化。

然後根據上述得到的結論，針對不同的頁面選擇不同的設計方式，有下面5種方式最為常見：用戶自行上傳、根據頭像變化、根據用戶等級、固定背景、無背景。

以上五種常見背景設計方法，只為給大家在設計時提供一些幫助建議，希望大家能根據使用場景選擇最合適的。