個人中心該怎么畫?

3 評論 5372 瀏覽 72 收藏 16 分鐘

導語:凡是有用戶體系的產品都應具備個人中心頁面,看似結構簡單的個人中心實則包含了眾多容易被忽視的設計細節。本文作者整理、歸納和總結了個人中心頁面的設計規律,為大家提供一些設計參考。

一、個人中心與個人主頁的區別

  • 個人中心:與用戶相關的各種數據、功能入口和全局性操作的匯總,僅用戶本人可見,設計目標:提高效率;
  • 個人主頁:用于展示用戶信息以塑造形象,由用戶的基本信息、身份等級、自主上傳的內容組成,用戶可以設置可見范圍,設計目標:展示個性。

有用戶體系的產品就有個人中心,而個人主頁常見于帶有社交屬性的產品,因此兩者是包含關系,社交類型產品同時擁有個人中心頁面和個人主頁頁面。

二、個人中心的信息架構

個人中心的信息復雜度與產品本身有關。體系越龐大的產品,對應個人中心頁面需要承載的內容越多,結構勢必復雜。

一般平臺型電商的個人中心頁面必須涵蓋:用戶基礎信息、全局性操作(設置)、關鍵數據記錄(收藏、關注)、購買激勵(會員、紅包)、核心業務(訂單信息)、工具集合(工具箱)……

面對如此多且雜的信息,梳理并分類至關重要,整理出合理的信息優先級是安排頁面布局的前提和關鍵。

大多數產品的個人中心可以總結為幾大信息模塊:個人信息、全局操作、重點推廣、核心功能、全部功能,特別復雜或者簡約的產品可以在此基礎上增加或者刪減模塊。

三、頭圖樣式

個人信息一般放置在頁面頂部,頂部設計形式多樣,結合產品的業務屬性和風格調性,選擇合適的樣式。一般帶有社交屬性的產品的個人主頁,鼓勵用戶充分展示個性,允許用戶自主上傳背景圖片。而對于其他產品來說,穩定和秩序感比個性更加重要。

頭圖主要分為兩類:固定樣式、自定義樣式。

上面依次展示了從簡約到精美的頭圖設計,不同的設計適應不同的產品屬性。一味增加復雜度并不一定合適自己的產品,關鍵還是需要了解目標用戶的視覺喜好,以及產品想傳遞的品牌認知。

四、個人信息模塊

個人信息模塊一般包含:頭像、昵稱、身份屬性這類內容,從布局上來看,一般有以下幾種排版方式:頭像居左、頭像居中、頭像居右。

從信息布局上來說,三種排版方式沒有優劣,根據觀察,線上產品超八成使用頭像居左的布局方式。通常人的瀏覽習慣呈現“F”形,左上角內容是最先觸達人眼的信息,適合放置關鍵信息便于定位。

頭像居中的布局方式適用于個人主頁,更加強調和突出頭像本身,對于社交產品來說,也是一種增加差異化的選擇。

五、全局性操作模塊

全局性操作一般指的是如設置、信息、掃一掃等產品層面的內容,不僅限于當前頁面。

全局性操作有3種常見的布局方式:

  1. 放置在導航欄
  2. 放置在個人信息模塊內
  3. 放置在下方列表中

這種布局方式拓展性最強,導航欄可以盛放多個控件而不會出現布局局促的問題,同時符合用戶使用習慣,設置放在右上角或者左上角,也是最常見方案。

這種布局方式拓展性較弱,右側案例可見,當昵稱較長,控件較多時,容易在視覺上感覺擁擠。從信息親密性上來說,全局性操作和個人信息也不應該歸于同一模塊中。

這種布局方式弱化了“設置”,通常認為如果“設置”的優先級較低,無需單獨將其展示在頭部,直接以列表的形式放置在底部即可。

六、如何突出信息

每個頁面都有重點信息和次要信息,梳理好信息的優先級,用不同的視覺方式呈現給用戶,幫助用戶第一時間獲取關鍵信息,提高效率。

從產品的角度講,不同時期的產品有不同的主推內容,現階段為了增加用戶粘性提升市場占比,會員體系的建立相當關鍵,有會員體系的產品都不約而同地激勵用戶開會員,爭取盡可能多的權益展示機會。

個人中心就是一個很好的推廣會員的觸點。除了推廣會員以外,卡券、紅包福利,也是推廣重點。

可以從以下幾個維度進行視覺強化突出:

  1. 色塊突出
  2. 位置突出
  3. 利益點突出(按鈕文案、角標)
  4. 樣式突出

非會員類型的板塊,經常使用主色進行突出。板塊與背景顏色對比度越大,越突出。用色邏輯與按鈕用色一致,若不想過分強調,可以使用淺色背景,參考花椒案例。

用戶已經對會員概念有一種大概的既定認知,“特權”、“尊享”等關鍵詞是設計會員板塊的指向,與之匹配且應用廣泛的配色主要集中在:黑、金、銀三大類,和一些延伸色如玫瑰金、鎏金等。

這類用色雖然不能體現品牌感,但已經成為移動UI下的一種既定語義,用戶能將金屬色與會員直接地聯系起來。

強調板塊一般放置在頁面中上部,除了位置固定的個人信息板塊外,越需要強調的板塊,位置越靠上。

利益是吸引用戶開通會員的直接原因,在個人中心頁面直接展示優惠金額,以數字的形式激勵用戶最為直接有力。

七、布局形式

個人中心主要分為兩大區塊,頭(個人信息+全局操作)+身(功能集合)。頭部信息的布局方式上文已經有所闡述,主體部分一般承載的內容是個人中心頁面的各種功能集合,承載形式有:列表、卡片、宮格、泳道。

關于信息容器的詳細內容,請參見:《信息容器的歸類與應用》一文,本文重點討論頭身兩板塊的過渡如何處理。

八、頭、身板塊的過渡形式

由于承載的內容不同,頭部往往和主體的展示樣式也不同。兩種不同的視覺樣式之間可以用過渡來銜接,也可以不過渡直接鋪陳下去。

頭部的個人信息區域沒有特殊設計,和主體功能入口部分沒有明確差異,直接將信息鋪陳下去即可,頁面整體性強。

頭部色彩,主體背景消色,中間用色彩漸隱的方式進行過度,較為自然。

頭身直接隔斷,有明確的分界線。頭部和主體分割感較為強烈,便于定位。

這種情況頭身同樣有一條明確的分割線,用卡片置于其上,作為銜接,視覺上更加和諧緊湊。且位于分割線之上的卡片往往承載的是最重要信息,如訂單信息或會員信息。

使用此方案的產品比較重視用戶個性化表達,從放置頭像的位置來看,放置在關鍵的頭身分割線上,頭像的面積也往往較大。

用類似底部半彈窗的形式盛放主體內容,給人主體內容“高于”頭部背景的印象,更加突出主體內容。

常見的頭身分割樣式有:水平分割、漸隱,其他的分割方式如斜線分割或者弧度分割,增加了頁面的創意和獨特性。

九、側邊欄(抽屜)

一般有Tab Bar的產品會把個人中心放在最后一個或者倒數第二個tab里,有些產品沒有Tab Bar,如滴滴,該類工具型產品常使用側邊欄的形式盛放個人中心相關信息。

有些產品有Tab Bar,依然將個人信息收納在左上角,如網易云音樂和qq。其中qq采用了全屏的側邊欄形式。

十、未登錄狀態

當用戶是未登錄狀態時,有些產品不向用戶開放瀏覽個人中心頁面的權限,要求用戶必須先完成登錄注冊。更多產品允許用戶進入個人中心頁面,當用戶觸發某個操作時,提示用戶進行登錄。未登錄狀態下的個人中心,沒有用戶信息。默認頭像和昵稱的占位文案的處理方式值得探討。

使用ip作為默認頭像,兼具品牌感和設計感。快捷登錄直接在個人中心頁面露出登錄方式,減少交互步長。

十一、結語

個人中心頁面有許多設計細節點可以挖掘,選擇最適合自己產品的設計形式至關重要。本文僅是個人經驗總結,如有疏漏或者說得不對的地方,歡迎交流指正。

感謝閱讀。

 

本文由 @doo_W 授權發布于人人都是產品經理,未經許可,禁止轉載

題圖來自?Unsplash,基于 CC0 協議

給作者打賞,鼓勵TA抓緊創作!
更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 很棒!

    回復
  2. 細膩

    回復
  3. 不錯

    回復