Hi，我是彩云。用戶頭像是我們在做 UI 時經常會用到的設計元素，但想要設計好它也是有很多需要注意的細節知識的，今天這篇文章將深入到頭像設計的方方面面，不同的事件、狀態、操作、配色等等一系列 UI 設計的最佳實踐。這篇文章準備了很多實例，或許可以給你一些啟發。

近年來，我幾乎每天都在瀏覽數以萬計的 UI 組件、界面、不同的網站和 app，研究它們的結構、布局和配色方式。我的目標是創建一個全面的 UI 指南，設計應用及其組件、模板等。

今天這部分講的就是關于用戶頭像的 UI 組件探索。用戶頭像是一個組件元素，用戶通過它來標識自己。

用戶頭像有哪些類型？

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

• 空狀態
• 名字的首字母
• 用戶照片或者圖片

顏色和尺寸

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

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

事件和通知

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

• 指示燈標識用戶是在線還是不在線
• 通過帶有編號的標簽通知提供信息
• 可以在用戶頭像上增加額外的圖標提供用戶行為操作

用戶的不同狀態

顯示用戶狀態的最常見做法是在頭像的右下角放置一個多色控件

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

通知標簽

根據不同優先級以及為了吸引用戶的注意力，可以修改頭像的標簽樣式

• 對于高優先級的提示，可以使用高亮的底色+反白的文字
• 對于其他情況，使用淺色背景，形式上做一些弱化

操作按鈕

當頭像帶有操作功能時，通常使用圓形按鈕或嵌套圖標等組件來顯示即將進行的操作。

• 將圖標更改為符合用戶期望的結果
• 顏色的使用要合理，需要強調事件或動作的含義

包含文字的頭像

1. 單邊文本

當需要添加額外信息時，次要標題可以和頭像一起使用。此功能在應用欄、列表、表格中非常常用。

• 較大的標題用于表示用戶的名稱
• 額外信息的文字是可選的（例如：狀態、職業、上次訪問、關注者數量等）

2. 底部文本

對于整頁，可以使用更大的頭像，并將文本放在底部。這是應用內的常見模式，例如社交、個人資料、設置等。

頭像的用戶體驗模式

1. 事件

為了進一步表明新用戶的事件，可以在頭像周圍添加一個描邊。還可以添加一個帶有標記的計數器，這也將具有更強的設計提醒作用。

2. 進度

使用一個描邊線作為用戶成就的進度，仍然非常流行和方便。

3. 選擇

對于所選狀態，用戶最可靠的確認方法之一是確認圖標和描邊的組合。

以下是所選狀態的典型變體的外觀：

用戶頭像群組

1. 帶一個按鈕

當頭像被分組時，額外的行動按鈕可以是一個可靠的選擇，讓用戶從那里知道某個操作。
例如，“加號”按鈕將我們帶到一系列交互相關的選項（添加、編輯、排序等），這些選項可以對分組的頭像執行。

2. 標記

數字標記是展示隊列中剩余用戶數量的一個很好的解決方案。

3. 帶有懸浮狀態的標記

一個標記最常見的模式之一，當它被懸停時可以顯示用戶的附加信息，作為信息交互的擴展。

4. 具有懸停狀態的頭像

當堆疊組中的頭像懸停時，顯示用戶全名的最佳方式是使用懸停組件。

5. 頁面模板

在應用或網站中使用頭像的最流行的方式是在頭部嵌入一個小的用戶圖片，或者在配置文件/設置部分嵌入較大的頭像。此時，用戶可以對圖片進行編輯操作。

以上就是我所整理的關于頭像知識的所有內容，希望看完這篇文章你可以更加全面的設計更好的頭像。

歡迎關注作者的微信公眾號：「彩云譯設計」