用戶頭像是我們在做 UI 時經(jīng)常會用到的設(shè)計(jì)元素，但想要設(shè)計(jì)好它也是有很多需要注意的細(xì)節(jié)知識的，今天這篇文章將深入到頭像設(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)建一個全面的 UI 指南，設(shè)計(jì)應(yīng)用及其組件、模板等。
今天這部分講的就是關(guān)于用戶頭像的 UI 組件探索。用戶頭像是一個組件元素，用戶通過它來標(biāo)識自己。
基本上有以下三種類型可以用來代表用戶頭像
- 空狀態(tài)
- 名字的首字母
- 用戶照片或者圖片
根據(jù)具體使用場景的不同，你可以使用多樣化的顏色和尺寸:
- 為了更好的識別，不同用戶配色可以多樣化一些
- 頁眉、導(dǎo)航欄中一般用 24-40dp 寬度為主
- 40-48dp 的頭像大小通常用在內(nèi)容塊或列表中
- 如果你想在更大的頁面中使用頭像，比如個人中心、設(shè)置中心等時，推薦使用 56+dp
當(dāng)我們想通過用戶頭像通知某事或演示某種操作時，可以使用額外的 UI 元素；
- 指示燈標(biāo)識用戶是在線還是不在線
- 通過帶有編號的標(biāo)簽通知提供信息
- 可以在用戶頭像上增加額外的圖標(biāo)提供用戶行為操作
顯示用戶狀態(tài)的最常見做法是在頭像的右下角放置一個多色控件
- 綠色的代表在線，灰色代表不在線
- 填充圖形代表用戶在線狀態(tài)，而空心形態(tài)用戶不在線的狀態(tài)（并且是可以操作的）
根據(jù)不同優(yōu)先級以及為了吸引用戶的注意力，可以修改頭像的標(biāo)簽樣式
- 對于高優(yōu)先級的提示，可以使用高亮的底色+反白的文字
- 對于其他情況，使用淺色背景，形式上做一些弱化
當(dāng)頭像帶有操作功能時，通常使用圓形按鈕或嵌套圖標(biāo)等組件來顯示即將進(jìn)行的操作。
- 將圖標(biāo)更改為符合用戶期望的結(jié)果
- 顏色的使用要合理，需要強(qiáng)調(diào)事件或動作的含義
1. 單邊文本
當(dāng)需要添加額外信息時，次要標(biāo)題可以和頭像一起使用。此功能在應(yīng)用欄、列表、表格中非常常用。
- 較大的標(biāo)題用于表示用戶的名稱
- 額外信息的文字是可選的（例如：狀態(tài)、職業(yè)、上次訪問、關(guān)注者數(shù)量等）
2. 底部文本
對于整頁，可以使用更大的頭像，并將文本放在底部。這是應(yīng)用內(nèi)的常見模式，例如社交、個人資料、設(shè)置等。
1. 事件
為了進(jìn)一步表明新用戶的事件，可以在頭像周圍添加一個描邊。還可以添加一個帶有標(biāo)記的計(jì)數(shù)器，這也將具有更強(qiáng)的設(shè)計(jì)提醒作用。
2. 進(jìn)度
使用一個描邊線作為用戶成就的進(jìn)度，仍然非常流行和方便。
3. 選擇
對于所選狀態(tài)，用戶最可靠的確認(rèn)方法之一是確認(rèn)圖標(biāo)和描邊的組合。
以下是所選狀態(tài)的典型變體的外觀：
1. 帶一個按鈕
當(dāng)頭像被分組時，額外的行動按鈕可以是一個可靠的選擇，讓用戶從那里知道某個操作。
例如，“加號”按鈕將我們帶到一系列交互相關(guān)的選項(xiàng)（添加、編輯、排序等），這些選項(xiàng)可以對分組的頭像執(zhí)行。
2. 標(biāo)記
數(shù)字標(biāo)記是展示隊(duì)列中剩余用戶數(shù)量的一個很好的解決方案。
3. 帶有懸浮狀態(tài)的標(biāo)記
一個標(biāo)記最常見的模式之一，當(dāng)它被懸停時可以顯示用戶的附加信息，作為信息交互的擴(kuò)展。
4. 具有懸停狀態(tài)的頭像
當(dāng)堆疊組中的頭像懸停時，顯示用戶全名的最佳方式是使用懸停組件。
5. 頁面模板
在應(yīng)用或網(wǎng)站中使用頭像的最流行的方式是在頭部嵌入一個小的用戶圖片，或者在配置文件/設(shè)置部分嵌入較大的頭像。此時，用戶可以對圖片進(jìn)行編輯操作。
以上就是我所整理的關(guān)于頭像知識的所有內(nèi)容，希望看完這篇文章你可以更加全面的設(shè)計(jì)更好的頭像。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。