在我們?nèi)粘Ｊ褂玫腁PP中，頭像這一設(shè)計(jì)元素基本上是必備的，不過這一元素雖然常見，但若想設(shè)計(jì)得好，還是需要注意許多細(xì)節(jié)。本篇文章里，作者便對(duì)頭像設(shè)計(jì)的細(xì)節(jié)做了總結(jié)，一起來看看吧，也許會(huì)加深你對(duì)頭像設(shè)計(jì)的理解。

用戶頭像是我們?cè)谧鯱I時(shí)經(jīng)常會(huì)用到的設(shè)計(jì)元素，但想要設(shè)計(jì)好它也是有很多需要注意的細(xì)節(jié)知識(shí)的，今天這篇文章將深入到頭像設(shè)計(jì)的方方面面，不同的事件、狀態(tài)、操作、配色等等一系列UI設(shè)計(jì)的最佳實(shí)踐。

這篇文章準(zhǔn)備了很多實(shí)例，或許可以給你一些啟發(fā)。

近年來，我?guī)缀趺刻於荚跒g覽數(shù)以萬計(jì)的UI組件、界面、不同的網(wǎng)站和app，研究它們的結(jié)構(gòu)、布局和配色方式。我的目標(biāo)是創(chuàng)建一個(gè)全面的UI指南，設(shè)計(jì)應(yīng)用及其組件、模板等。

今天這部分講的就是關(guān)于用戶頭像的UI組件探索。用戶頭像是一個(gè)組件元素，用戶通過它來標(biāo)識(shí)自己。

一、用戶頭像有哪些類型？

基本上有以下三種類型可以用來代表用戶頭像：

1. 空狀態(tài)；
2. 名字的首字母；
3. 用戶照片或者圖片。

二、顏色和尺寸

根據(jù)具體使用場景的不同，你可以使用多樣化的顏色和尺寸:

• 為了更好的識(shí)別，不同用戶配色可以多樣化一些；
• 頁眉、導(dǎo)航欄中一般用24-40dp寬度為主；
• 40-48dp的頭像大小通常用在內(nèi)容塊或列表中；
• 如果你想在更大的頁面中使用頭像，比如個(gè)人中心、設(shè)置中心等時(shí)，推薦使用56+dp。

三、事件和通知

當(dāng)我們想通過用戶頭像通知某事或演示某種操作時(shí)，可以使用額外的UI元素；

• 指示燈標(biāo)識(shí)用戶是在線還是不在線；
• 通過帶有編號(hào)的標(biāo)簽通知提供信息；
• 可以在用戶頭像上增加額外的圖標(biāo)提供用戶行為操作。

四、用戶的不同狀態(tài)

顯示用戶狀態(tài)的最常見做法是在頭像的右下角放置一個(gè)多色控件。

• 綠色的代表在線，灰色代表不在線；
• 填充圖形代表用戶在線狀態(tài)，而空心形態(tài)用戶不在線的狀態(tài)（并且是可以操作的）。

五、通知標(biāo)簽

根據(jù)不同優(yōu)先級(jí)以及為了吸引用戶的注意力，可以修改頭像的標(biāo)簽樣式。

• 對(duì)于高優(yōu)先級(jí)的提示，可以使用高亮的底色+反白的文字；
• 對(duì)于其他情況，使用淺色背景，形式上做一些弱化。

六、操作按鈕

當(dāng)頭像帶有操作功能時(shí)，通常使用圓形按鈕或嵌套圖標(biāo)等組件來顯示即將進(jìn)行的操作。

• 將圖標(biāo)更改為符合用戶期望的結(jié)果；
• 顏色的使用要合理，需要強(qiáng)調(diào)事件或動(dòng)作的含義。

七、包含文字的頭像

1. 單邊文本

當(dāng)需要添加額外信息時(shí)，次要標(biāo)題可以和頭像一起使用。此功能在應(yīng)用欄、列表、表格中非常常用。

• 較大的標(biāo)題用于表示用戶的名稱；
• 額外信息的文字是可選的（例如：狀態(tài)、職業(yè)、上次訪問、關(guān)注者數(shù)量等）。

2. 底部文本

對(duì)于整頁，可以使用更大的頭像，并將文本放在底部。這是應(yīng)用內(nèi)的常見模式，例如社交、個(gè)人資料、設(shè)置等。

八、頭像的用戶體驗(yàn)?zāi)Ｊ?/h2>

1. 事件

為了進(jìn)一步表明新用戶的事件，可以在頭像周圍添加一個(gè)描邊。還可以添加一個(gè)帶有標(biāo)記的計(jì)數(shù)器，這也將具有更強(qiáng)的設(shè)計(jì)提醒作用。

2. 進(jìn)度

使用一個(gè)描邊線作為用戶成就的進(jìn)度，仍然非常流行和方便。

3. 選擇

對(duì)于所選狀態(tài)，用戶最可靠的確認(rèn)方法之一是確認(rèn)圖標(biāo)和描邊的組合。

以下是所選狀態(tài)的典型變體的外觀：

九、用戶頭像群組

1. 帶一個(gè)按鈕

當(dāng)頭像被分組時(shí)，額外的行動(dòng)按鈕可以是一個(gè)可靠的選擇，讓用戶從那里知道某個(gè)操作。

例如，“加號(hào)”按鈕將我們帶到一系列交互相關(guān)的選項(xiàng)（添加、編輯、排序等），這些選項(xiàng)可以對(duì)分組的頭像執(zhí)行。

2. 標(biāo)記

數(shù)字標(biāo)記是展示隊(duì)列中剩余用戶數(shù)量的一個(gè)很好的解決方案。

3. 帶有懸浮狀態(tài)的標(biāo)記

一個(gè)標(biāo)記最常見的模式之一，當(dāng)它被懸停時(shí)可以顯示用戶的附加信息，作為信息交互的擴(kuò)展。

4. 具有懸停狀態(tài)的頭像

當(dāng)堆疊組中的頭像懸停時(shí)，顯示用戶全名的最佳方式是使用懸停組件。

5. 頁面模板

在應(yīng)用或網(wǎng)站中使用頭像的最流行的方式是在頭部嵌入一個(gè)小的用戶圖片，或者在配置文件/設(shè)置部分嵌入較大的頭像。此時(shí)，用戶可以對(duì)圖片進(jìn)行編輯操作。

以上就是我所整理的關(guān)于頭像知識(shí)的所有內(nèi)容，希望看完這篇文章你可以更加全面地設(shè)計(jì)更好的頭像。