在我們日常使用的APP中,頭像這一設計元素基本上是必備的,不過這一元素雖然常見,但若想設計得好,還是需要注意許多細節。本篇文章里,作者便對頭像設計的細節做了總結,一起來看看吧,也許會加深你對頭像設計的理解。
用戶頭像是我們在做UI時經常會用到的設計元素,但想要設計好它也是有很多需要注意的細節知識的,今天這篇文章將深入到頭像設計的方方面面,不同的事件、狀態、操作、配色等等一系列UI設計的最佳實踐。
這篇文章準備了很多實例,或許可以給你一些啟發。
近年來,我幾乎每天都在瀏覽數以萬計的UI組件、界面、不同的網站和app,研究它們的結構、布局和配色方式。我的目標是創建一個全面的UI指南,設計應用及其組件、模板等。
今天這部分講的就是關于用戶頭像的UI組件探索。用戶頭像是一個組件元素,用戶通過它來標識自己。
一、用戶頭像有哪些類型?
基本上有以下三種類型可以用來代表用戶頭像:
二、顏色和尺寸
根據具體使用場景的不同,你可以使用多樣化的顏色和尺寸:
三、事件和通知
當我們想通過用戶頭像通知某事或演示某種操作時,可以使用額外的UI元素;
四、用戶的不同狀態
顯示用戶狀態的最常見做法是在頭像的右下角放置一個多色控件。
五、通知標簽
根據不同優先級以及為了吸引用戶的注意力,可以修改頭像的標簽樣式。
六、操作按鈕
當頭像帶有操作功能時,通常使用圓形按鈕或嵌套圖標等組件來顯示即將進行的操作。
七、包含文字的頭像1. 單邊文本
當需要添加額外信息時,次要標題可以和頭像一起使用。此功能在應用欄、列表、表格中非常常用。
2. 底部文本
對于整頁,可以使用更大的頭像,并將文本放在底部。這是應用內的常見模式數字排列組合軟件app,例如社交、個人資料、設置等。
八、頭像的用戶體驗模式1. 事件
為了進一步表明新用戶的事件數字排列組合軟件app,可以在頭像周圍添加一個描邊。還可以添加一個帶有標記的計數器,這也將具有更強的設計提醒作用。
2. 進度
使用一個描邊線作為用戶成就的進度,仍然非常流行和方便。
3. 選擇
對于所選狀態,用戶最可靠的確認方法之一是確認圖標和描邊的組合。
以下是所選狀態的典型變體的外觀:
九、用戶頭像群組1. 帶一個按鈕
當頭像被分組時,額外的行動按鈕可以是一個可靠的選擇,讓用戶從那里知道某個操作。
例如,“加號”按鈕將我們帶到一系列交互相關的選項(添加、編輯、排序等),這些選項可以對分組的頭像執行。
2. 標記
數字標記是展示隊列中剩余用戶數量的一個很好的解決方案。
3. 帶有懸浮狀態的標記
一個標記最常見的模式之一,當它被懸停時可以顯示用戶的附加信息,作為信息交互的擴展。
4. 具有懸停狀態的頭像
當堆疊組中的頭像懸停時,顯示用戶全名的最佳方式是使用懸停組件。
5. 頁面模板
在應用或網站中使用頭像的最流行的方式是在頭部嵌入一個小的用戶圖片,或者在配置文件/設置部分嵌入較大的頭像。此時,用戶可以對圖片進行編輯操作。
以上就是我所整理的關于頭像知識的所有內容,希望看完這篇文章你可以更加全面地設計更好的頭像。
原文作者:Roman (本文翻譯已獲得作者的正式授權)