編輯導(dǎo)語：產(chǎn)品服務(wù)用戶，用戶使用產(chǎn)品。每個產(chǎn)品都需要有一個「我的」頁面，去承載用戶的相關(guān)信息。通常用戶的個人一些基本信息都會放在頁面頭部，以便用戶快速判斷當(dāng)前登錄賬號是否是自己的。本文就我的-頭部信息模塊設(shè)計來深入探索，分析如何更好的設(shè)計才可以帶給用戶良好的使用體驗。

一、包含哪些信息

「我的」一般都是一個獨立tab頁面，在產(chǎn)品中是占有很重要的位置。

個人基本信息的位于我的頁面的頭部區(qū)域，是非常矚目的，這部分的設(shè)計直接影響用戶對于其的設(shè)計印象。想要設(shè)計好這個模塊，首先需要了解一下頭部模塊都包含哪些信息。以即刻為例，有頭像、昵稱、性別、編輯按鈕、關(guān)注/被關(guān)注、今日訪客、個人名片、更多這些功能信息。

當(dāng)然不同的產(chǎn)品包含的信息也會有所不同，平時遇到的產(chǎn)品一般都會有頭像、用戶名、編輯、更多這幾項信息，本文將主要以此基礎(chǔ)來分析設(shè)計。

二、頁面的排版布局

我的-頭部信息模塊有很多種展示形式，現(xiàn)在產(chǎn)品中常見的形式都是狀態(tài)欄、導(dǎo)航欄、信息模塊公用一個背景，設(shè)計形式上都是視作了一個整體。

1. 使用最多的就是靠左對齊排版

這也和人的閱讀習(xí)慣是相同的，都是從左開始讀，因此設(shè)計上有一個準(zhǔn)則是重要的信息優(yōu)先放在頁面的左側(cè)，不重要的可以放在右側(cè)。

這里可以先看這個案例，滴滴出行、搜狗輸入法的設(shè)計布局都是信息靠左對齊，頭像和用戶名都是作為一個整體居左，其他的設(shè)置、通知放在導(dǎo)航右側(cè)。

2. 居中排版

使用這種布局形式，頭部信息模塊會占據(jù)較多頁面空間，比其他兩種布局要多。而當(dāng)我的頁面內(nèi)容較少，就可以使用，可以更好的使頁面更加充實。

另外，居中排版也是一種視覺上最平衡的形式，即使內(nèi)容少，頁面也不會出現(xiàn)左重右輕等情況。

3. 左右對齊排版

這種布局形式較少，如果產(chǎn)品中的用戶名信息重要程度高于頭像，一般用戶是不會主動去替換頭像，而是產(chǎn)品默認(rèn)頭像。設(shè)計上，用戶名的字號使用較大的字體，才可以使左右平衡，因為本身圖片的視覺是重于文字的。這種排版布局突破常規(guī)形式，重在新穎。

知識點：帶有社交屬性的產(chǎn)品中，用戶頭像都是很重要的，相當(dāng)于你的臉面，是作為識別當(dāng)前用戶的首要標(biāo)志，一般用戶都會替換成自己喜歡的圖片。這類產(chǎn)品，像是微信、微博、知乎等產(chǎn)品，設(shè)計上，重點應(yīng)該是頭像的展示，用戶名字體不要太大，只需要和其他信息做出區(qū)分即可。

工具型的產(chǎn)品中，用戶頭像不是很重要，用戶通常會使用產(chǎn)品的默認(rèn)頭像，像這種類型的有很多，外賣類、銀行類、出行類、實用工具類等等這些，建議可以嘗試一下左右對齊排版，會有全新的視覺效果，也會讓人眼前一亮。

三、頭部背景設(shè)計

搞定了信息內(nèi)容的排版設(shè)計，接下來就需要在背景設(shè)計上下下功夫了。背景設(shè)計這里有一個設(shè)計準(zhǔn)則，不可以搶了信息內(nèi)容的視覺焦點。畢竟，快速提供給用戶必要的信息是產(chǎn)品的目的。背景設(shè)計可以有很多種形式。

單純從使用顏色來講，形式有使用純色、使用漸變：

1. 純色

純色分為無彩色系、有彩色系。無彩色系，就是黑白灰，頭部背景設(shè)計通常是白色使用最多，一般不會選擇黑灰。白色對于不同的信息元素及其他色彩的容納性更高，設(shè)計出來的效果也最好。有彩色系，主要根據(jù)產(chǎn)品的主題色去考慮設(shè)計。

2. 漸變

漸變可以有線性漸變、徑向漸變、角度漸變。三種形式都可以出來很好的效果，設(shè)計時可以嘗試不同的可能性，勇于創(chuàng)新。

想背景設(shè)計更豐富一些，這時添加一些基礎(chǔ)幾何圖形、或者一些特殊圖形。

3. 添加基礎(chǔ)幾何圖形

方形、圓形、半圓、圓環(huán)、線性、三角形等這些，可以單一或者組合形式設(shè)計。

4. 添加一些特殊圖形

舉個栗子：使用品牌VI圖形元素，為產(chǎn)品添加上品牌基因。

5. 用圖片當(dāng)背景

這里有可以是固定一張圖片，一些游戲社區(qū)軟件上有這種案例，有興趣可以看看?；蛘呤褂妙^像填充背景，頭像通常會做模糊、毛玻璃的效果設(shè)計。

6. 使用插畫當(dāng)背景

這種形式可以放在使用居中排版的設(shè)計時使用，信息內(nèi)容少，插畫不會搶了信息的焦點，反而使頁面更豐富飽滿。

四、小結(jié)

本文從包含信息、排版布局、背景設(shè)計三個方面分析了我的-頭部信息模塊，從不同的角度講述了設(shè)計該模塊需要注意的設(shè)計點，及相關(guān)建議方法，歡迎有不同想法的小伙伴來找我探討探討。

本文由 @YI易設(shè)計 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自?Unsplash，基于 CC0 協(xié)議