原來頭像這麼小的設計細節，也有這麼多知識點

在我們日常使用的APP中，頭像這一設計元素基本上是必備的，不過這一元素雖然常見，但若想設計得好，還是需要注意許多細節。本篇文章裡，作者便對頭像設計的細節做了總結，一起來看看吧，也許會加深你對頭像設計的理解。

使用者頭像是我們在做UI時經常會用到的設計元素，但想要設計好它也是有很多需要注意的細節知識的，今天這篇文章將深入到頭像設計的方方面面，不同的事件、狀態、操作、配色等等一系列UI設計的最佳實踐。

這篇文章準備了很多例項，或許可以給你一些啟發。

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

今天這部分講的就是關於使用者頭像的UI元件探索。使用者頭像是一個元件元素，使用者透過它來標識自己。

一、使用者頭像有哪些型別？

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

二、顏色和尺寸

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

為了更好的識別，不同使用者配色可以多樣化一些；

頁首、導航欄中一般用24-40dp寬度為主；

40-48dp的頭像大小通常用在內容塊或列表中；

如果你想在更大的頁面中使用頭像，比如個人中心、設定中心等時，推薦使用56+dp。

三、事件和通知

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

指示燈標識使用者是線上還是不線上；

透過帶有編號的標籤通知提供資訊；

可以在使用者頭像上增加額外的圖示提供使用者行為操作。

四、使用者的不同狀態

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

綠色的代表線上，灰色代表不線上；

填充圖形代表使用者線上狀態，而空心形態使用者不線上的狀態（並且是可以操作的）。

五、通知標籤

根據不同優先順序以及為了吸引使用者的注意力，可以修改頭像的標籤樣式。

對於高優先順序的提示，可以使用高亮的底色+反白的文字；

對於其他情況，使用淺色背景，形式上做一些弱化。

六、操作按鈕

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

將圖示更改為符合使用者期望的結果；

顏色的使用要合理，需要強調事件或動作的含義。

七、包含文字的頭像

1. 單邊文字

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

較大的標題用於表示使用者的名稱；

額外資訊的文字是可選的（例如：狀態、職業、上次訪問、關注者數量等）。

2. 底部文字

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

八、頭像的使用者體驗模式

1. 事件

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

2. 進度

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

3. 選擇

對於所選狀態，使用者最可靠的確認方法之一是確認圖示和描邊的組合。

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

九、使用者頭像群組

1. 帶一個按鈕

當頭像被分組時，額外的行動按鈕可以是一個可靠的選擇，讓使用者從那裡知道某個操作。

例如，“加號”按鈕將我們帶到一系列互動相關的選項（新增、編輯、排序等），這些選項可以對分組的頭像執行。

2. 標記

數字標記是展示佇列中剩餘使用者數量的一個很好的解決方案。

3. 帶有懸浮狀態的標記

一個標記最常見的模式之一，當它被懸停時可以顯示使用者的附加資訊，作為資訊互動的擴充套件。

4. 具有懸停狀態的頭像

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

5. 頁面模板

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

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

原文作者：Roman Kamushken（本文翻譯已獲得作者的正式授權）

原文地址：https：//blog。prototypr。io/designing-the-avatar-all-you-need-to-know-a22af3daa1f2

譯者：彩雲Sky，騰訊高階視覺設計師，人人都是產品經理專欄作家；公眾號：彩雲譯設計。

本文由@彩雲sky 翻譯釋出於人人都是產品經理，未經許可，禁止轉載

題圖來自 Unsplash，基於 CC0 協議

該文觀點僅代表作者本人，人人都是產品經理平臺僅提供資訊儲存空間服務。