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

一、包含哪些信息

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

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

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

二、頁(yè)面的排版布局

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

1. 使用最多的就是靠左對(duì)齊排版

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

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

2. 居中排版

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

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

3. 左右對(duì)齊排版

這種布局形式較少，如果產(chǎn)品中的用戶名信息重要程度高于頭像，一般用戶是不會(huì)主動(dòng)去替換頭像，而是產(chǎn)品默認(rèn)頭像。設(shè)計(jì)上，用戶名的字號(hào)使用較大的字體，才可以使左右平衡，因?yàn)楸旧韴D片的視覺(jué)是重于文字的。這種排版布局突破常規(guī)形式，重在新穎。

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

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

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

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

單純從使用顏色來(lái)講，形式有使用純色、使用漸變：

1. 純色

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

2. 漸變

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

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

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

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

4. 添加一些特殊圖形

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

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

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

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

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

四、小結(jié)

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

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

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