還在頻繁地使用彈窗對用戶展示重要提示嗎？明知這樣有損體驗卻沒有更好的選擇嗎？那么不妨來試試干擾度更低，卻依然可以用于重要提示的 Sheet 控件吧。

什么是Sheets

Sheets 控件并非彈窗，通常會被熟稱為「浮層」或「浮窗」。

該控件在 iOS 和 Android 系統規范中都有相關定義，屬于多才多藝的控件，可以用于給予信息提示，也可用于展示更多的拓展信息。

從用于提示的角度來看，Sheets 控件和 Dialogs 控件的相同點和不同點在哪里呢？

1. 共同點

模態化

二者都可以設置模態，當模態控件顯示時，頁面背景會顯示深色遮罩，并立即打斷用戶當前操作。

承載操作和信息

二者都可以承載豐富的操作和信息，支持嵌入列表、選擇器等控件及圖片、文本信息。

2. 不同點

觸發方式不同

Dialog 可以不通過用戶操作而自動觸發，Sheet 必須通過用戶操作才可以觸發顯示，因此用戶對 Sheet 的顯示會更有預期。

關閉方式不同

Dialog 的關閉方式較少，通常會要求用戶進行選項操作后才可關閉；Sheet 的關閉方式較多，對于用戶而言有更豐富的選擇權。

因此綜上所述，我們可以發現，Sheet 對比 Dialog 的優勢在于，它的顯示會更符合用戶的預期，它的干擾層度也會低于Dialog（因為更易關閉）。

• Sheets 在 Google Material design 規范中被分為了 Bottom sheest 和 Side sheets 兩類；
• 在 iOS Human Interface Guidelines 中被分為了 Action sheets 和 Activity views 兩類。

下面就由我來依次詳解其特性和玩法吧。

Bottom sheets 底部浮窗

專屬于 Android 的 Sheets 控件。

1. 使用場景

用于補充內容相關的更多信息（非模態）、提供可交互的菜單或對話（模態）或其它關鍵功能/任務的拓展。

2. 注意事項

• Bottom sheet 通常用于 Android 豎屏場景，在 Android 橫屏場景建議使用 Side sheet。
• 在 iOS 中不建議使用 Bottom sheet，建議使用原生的 Action sheets 或 Activity views。

3. 樣式類型

菜單樣式

可嵌套 Menus，展示多個選項內容。

宮格樣式

可使用宮格布局，展示多個選項內容。

迷你樣式（非模態）

一個非模態底部浮窗可被設置固定展示在頁面底部，用戶可以隨時用它來對其它功能/任務進行快捷操作，如進入購物車、查看所選圖片、查看聊天和查看剛才的視頻等。

4. 模態/非模態

非模態浮窗：如左下圖所示，非模態浮窗與內容保持在同一層級，用戶可同時對內容和浮窗進行操作。

模態浮窗：如右下圖所示，模態浮窗層級高于內容，背景深色顯示遮罩，用戶僅能對浮窗進行操作。

5. 顯示與消失

顯示

浮窗顯示時從底部向上滑入，非模態浮窗顯示時不會打斷用戶操作，模態浮窗顯示時會顯示深色遮罩以打斷用戶操作。

消失

浮窗消失時會向底部滑出。

模態浮窗在以下情況下會消失：

• 用戶觸發浮窗上的對應操作（自定義）；
• 用戶點擊浮窗外的區域；
• 用戶下拉浮窗達到收起閾值后（自定義）；
• 用戶點擊 Android 系統返回鍵。

非模態浮窗在以下情況下會消失：用戶選中浮窗上的對應按鈕（自定義）。

6. 支持高度延伸

當浮窗底部仍有未顯示的內容時，可設置通過滑動或拖動浮窗來使其變為全屏展示，并在頂部顯示 Toolbar 來展示關閉/收起操作。

7. 支持深層鏈接

模態浮窗中可以展示其它應用的深層鏈接內容或操作，譬如調用 Google 翻譯。

8. 范例

抖音的評論功能使用的是模態 Bottom sheet；百度地圖的路線切換功能使用的是非模態 Bottom sheet。

Side sheets 側邊浮窗

專屬于 Android 的 Sheets 控件。

1. 使用場景

用于補充內容相關的更多信息（非模態）或提供可交互的列表信息（模態）。

2. 注意事項

• Bottom sheet 通常用于 Android 豎屏場景，在 Android 橫屏場景建議使用 Side sheet。
• 在 iOS 中不建議使用 Bottom sheet，建議使用原生的 Action sheet 或 Activity views。

3. 樣式類型

菜單樣式：可嵌套 Menus，展示多個選項內容。

宮格樣式：可使用宮格布局，展示多個選項內容。

4. 模態/非模態

如左下圖所示，非模態浮窗與內容保持在同一層級，用戶可同時對內容和浮窗進行操作（在移動端較少使用，通常用于 PC 端）。

如右下圖所示，模態浮窗層級高于內容，背景深色顯示遮罩，用戶僅能對浮窗進行操作。

5. 顯示與消失

顯示

浮窗顯示時從左/右邊緣滑入，非模態浮窗顯示時不會打斷用戶操作，模態浮窗顯示時會顯示深色遮罩以打斷用戶操作。

消失

浮窗消失時會向左/右邊緣滑出。

模態浮窗在以下情況下會消失：

• 用戶觸發浮窗上的對應操作（自定義）；
• 用戶點擊浮窗外的區域；
• 用戶側拉浮窗達到收起閾值后（自定義）；
• 用戶點擊 Android 系統返回鍵。

非模態浮窗在以下情況下會消失：用戶選中浮窗上的對應按鈕（自定義）。

6. 滑動說明

支持上下滑動，不支持左右滑動。

7. 范例

淘寶的篩選功能使用的是 Side sheet。

Action sheets 操作浮窗

專屬于 iOS 的 Sheets 控件。

1. 使用場景

用于呈現一組與當前操作相關的選項，如啟動某個任務，或者確認是否開始執行某個可能具有破壞性的操作。

2. 注意事項

在 Android 中不建議使用 Action sheet，建議使用原生的 Bottom sheet 或 Simple dialog。

3. 樣式類型

如下所示，支持單個或多個操作的展示，以及說明文案的展示：

4. 顯示與消失

顯示

浮窗顯示時從底部向上滑入，會顯示深色遮罩以打斷用戶操作。

消失

浮窗消失時會向底部滑出。會在以下情況消失：

• 用戶觸發浮窗上的對應操作（自定義）；
• 用戶點擊浮窗外的區域；
• 用戶點擊浮窗「取消」按鈕。

5. 顯示位置

豎屏時顯示在頁面底部，橫屏是居中顯示在頁面底部。

6. 范例

微信的選擇朋友圈發布類型及清除聊天記錄的二次確認，都是使用的 Action sheet。

Activity views 活動浮窗

專屬于 iOS 的 Sheets 控件。

1. 使用場景

用于呈現一組與當前操作相關的選項表，如復制、收藏或分享。

2. 注意事項

在 Android 中不建議使用 Activity views，建議使用原生的 Bottom sheet。

3. 樣式類型

列表樣式

宮格樣式

混合樣式

4. 顯示與消失

顯示

浮窗顯示時從底部向上滑入，會顯示深色遮罩以打斷用戶操作。

消失

浮窗消失時會向底部滑出。會在以下情況消失：

• 用戶觸發浮窗上的對應操作（自定義）；
• 用戶點擊浮窗外的區域；
• 用戶下拉浮窗達到收起閾值后（自定義）。

5. 顯示位置

豎屏時顯示在頁面底部，橫屏是居中顯示在頁面底部。

6. 支持高度延伸

當面板底部仍有未顯示的內容時，可設置通過滑動或拖動面板來使其高度進行延伸，從而展示更多信息。

7. 范例

愛奇藝的分享功能和泡泡圈選擇發布內容類型，都使用的是 Activity view。

用法總結

建議針對非系統級或業務級的重要提示，使用 Sheets 控件進行提示；Dialogs 控件僅用于最重要的信息提示才算是「好鋼用在了刀刃上」。

另外在調用原生 Sheets 組件時，記得分端的差異性。

文章來源：優設網

當界面設計定稿之后，設計師需要對圖標進行切片，提供給開發工程師。切圖與標注是為了能夠滿足開發人員對于效果圖的高度還原需求，直接影響到工程師對設計效果的還原度，并且也是設計師重要的輸出物之一。合適、精準的切圖可以最大限度地還原設計圖，起到事半功倍的效果。

通常我們只需要對 icon 與圖片進行切圖即可，文字、線條和一些標準的幾何形狀是不需要切圖的，例如搜索框只需要在標注中描述它的尺寸、圓角大小、背景色值、不透明度即可，開發工程師可以用代碼實現這種效果。

切圖基本規范

1. 切圖的尺寸必須為偶數；
2. 同一模塊內，切圖大小應保持一致；
3. 如果有背景，盡量用平鋪的背景圖案來設計（減少程序體積）；
4. 可點擊的部件要把相關狀態都切圖輸出，比如：正常狀態、點擊狀態、不可點擊狀態；
5. 輸出的切圖應當盡可能的壓縮大小，以降低 APP 的總大小，提升用戶使用時的加載速度（推薦在線壓縮：https://tinypng.com）；
6. 所有的變形字體把它當成 icon 來切；
7. 切圖輸出格式：png-24；
8. 重復的東西只切一個。

切圖輸出類型

1. 圖標切圖輸出

桌面圖標切圖輸出

App 的桌面圖標會被運用在很多不同的地方，比如手機桌面、APP store、手機的設置列表，所以 app 桌面圖標需要很多個不同尺寸的切圖輸出。兩個平臺對應的桌面圖標設計輸出尺寸也不盡相同，在輸出的時候要把雙平臺的尺寸全部輸出切圖。桌面圖標切圖只需要提供直角的圖標切圖即可，手機系統會自動生成圓角效果。

系統圖標切圖輸出

一套圖適配雙平臺：iOS平臺（iPhone 6plus版本除外）和安卓平臺公用 44*44px 切圖素材，即可實現一套切圖適配兩個平臺的開發。

適配大屏幕：為了適配 iPhone 6plus、iPhone 7plus，單獨切一套比原有 44*44px 切圖大 1.5 倍的切圖，即 66*66px 大小的切圖。

APP內功能圖標

圖標是可以有留白區域的，建議圖標尺寸盡量不要過多。

2. 圖片類切圖輸出

圖片類切圖主要是指啟動頁、新手引導頁、默認提示、廣告圖等需要完整切圖的圖片。同一類型的圖片切圖一般要保持同樣的尺寸大小，以便于工程師開發使用。另外一般這些切圖的文件較大，在切圖過程中需要控制切圖文件的大小。

全屏類切圖

局部類切圖

3. 動效元素切圖

動效元素切圖一般是指在 app 中加載動效所需要的切圖元素。

gif 動圖切圖一般分為三種：

一是只需要給到 gif 圖動效的部分即可。

△ 城易logo

二是，導出序列圖片壓縮打包給開發人員。

三是導出 json 。

Airbnb 開發了一款動效神器：Lottie，這是一個將 After Effects 動畫提供給任意一個 iOS，macOS，Android 還有 React Native 原生 APP 的文件庫。這些動畫通過一個叫 Bodymovin 的開源 After Effects 插件，以 JSON 文件的形式進行輸出。Lottie 通過 JSON 格式下載動畫數據并實時提供給開發者。

相關鏈接

• Lottie官方：Lottie 官方地址
• bodymovin：GitHub 地址（安裝方法：https://www.uisdc.com/lottie-make-loading-animation）
  如若安裝不成功，可在下面的網址中下載其他版本插件：bodymovin版本地址：https://github.com/bigxixi/bodymovin_cn
• lottie-ios：GitHub 地址
• lottie-android：GitHub 地址

如何導出json動畫文件

打開 AE，首選項 – 常規，將允許腳本寫入文件和訪問網絡選項勾選上。

窗口 – 擴展 – Bodymovin，選擇好合成和保存路徑后，點擊 Render 導出 data.jason 文件，再把該文件交給 iOS 開發 （其他同理），具體如下圖：

這里設置選擇 Demo ，可以導出 html 文件，在瀏覽器查看動畫效果。選擇 Glyphs 將字體轉換成圖形形狀。

導出文件：

在線測試結果：可以直接上傳 json 文件，可以提前知道動畫是否有問題，然后再交付給開發。

網址：https://nicolasjengler.github.io/bodymovins-json-tester/dist/

切圖命名規范

1. 通用切圖命名：組件_類別_功能_狀態@2x.png

舉例：tabbar_icon_home_default@2x.png（對應中文：標簽欄_圖標_主頁_默認@2x.png）

2. 模塊特有切圖命名：模塊_類別_功能_狀態@2x.png

舉例：bill_icon_search_pressed@2x.png（對應的中文為：賬單_圖標_搜索_ 默認@2x.png）

3. 常用英文單詞表

標注軟件

現如今市場已有很多設計交互的平臺，如：國內的墨刀、藍湖、摹客等，國外的 Figma、invision 等，各自都有優秀的特點，既滿足交互需求，又能有標注切圖功能，選擇適合自己團隊的工具與開發一起協作即可。

1. Figma

支持 sketch 導入，Figma 也像 Zeplin 一樣，標注頁面間距與尺寸，并且支持各種圖片格式、尺寸、形態輸出，開發人員也有相應的代碼可用參考，分享鏈接即可。

2. 墨刀

支持 sketch 上傳頁面至客戶端，分享鏈接即可。支持多種切圖格式下載，開發人員也有相應的代碼可用參考，操作簡單清晰。

3. 藍湖

支持軟件 PS、sketch 上傳在線標注，在設計源文件上切好圖片，開發人員可在線上下載，且有相應的代碼可用參考，分享鏈接即可。

文章來源：優設

在日常的設計工作中，我們也許會遇到這樣的情況：作品缺少變化導致枯燥乏味；而變化太多又會顯得雜亂、沒有章法；這就對應了設計中統一和打破的關系，那么為什么統一和打破這兩種看似矛盾的關系，卻總是能同時出現在我們的設計作品中？如何更好的理解二者之間的關系并運用到日常的工作中去？希望本期內容能對大家有所幫助。

在設計中統一并不是所有元素1:1的一模一樣，它可以體現在：板式、配色、元素屬性、處理手法等等，那么為什么要統一？統一的目的是什么？下面我們具體來說：

統一：讓作品更整體

作品不夠整體，會給人一種信息散亂、沒有視覺焦點的感受；而將視覺元素進行“統一”，就能很好的解決這一現象，這無關乎技法的熟練與否，在我們的日常生活中就隨處可見：比如：我們的書本排版，會有統一的頁眉、頁腳、段落留白、文字間距等等，其目的就有讓文本內容在視覺感受上更像一個整體；下面我們看個設計中的案例：

如圖所示，上側案例給人的感覺比較雜亂，不夠整體，原因在于：元素與元素之間的關聯性不強，且視覺形態及色彩屬性各不相同，導致整體各元素之間的呼應不夠明顯，所以會給人一種不夠整體甚至雜亂的感覺。而下側案例通過在形態、色彩、屬性等方面的統一化處理，加強了每個單獨視覺元素之間的呼應，使得畫面更整體！

統一：讓作品更整潔

不管是在設計工作還是日常生活中，干凈整潔的東西都是更易于大眾接受的，在設計工作中，做好統一是最重要的一環，在此前提下，才能做好另一環“打破”！所以當設計作品出現亂的現象時，我們需要對其視覺元素進行規整及相應的處理，比如：

通過左右對比我們發現，很明顯右側給人的感覺雜亂無章，而左側干凈整潔、有條理，原因在于：

①、元素與元素之間并不是相互孤立的，而是在視覺上存在著一定的呼應關系，相互關聯，這樣畫面整體性也會更強。

②、視覺上將原本各不相同的形態以及色彩重新進行了統一處理，目的是通過減少視覺元素形態及色彩變化而進一步提升畫面的整潔。

③、視覺元素在物理關系以及屬性上也做到了統一，即統一元素與元素之間的間隔、形態、顏色等等。

下面我們再看組案例：

上圖中，相比而言案例二比案例一給人的感覺更整潔、干凈、也更像一個整體，原因在于：案例二中配圖的屬性做到了視覺上的統一，具體體現在：①、圖片的顏色屬性：統一藍色色相屬性；②、圖片的內容屬性：統一高端、仰視角度建筑屬性；③、圖片的留白屬性：每一幅配圖在視覺上都會有一些留白性質的屬性，給人的感覺很舒服。

所以：出于讓整體更整潔的統一，大多是在做減法或者合并的過程，目的是減少一些造成視覺整體雜亂的因素，比如：色彩雜亂、圖形雜亂、文字形式雜亂、視角角度雜亂、以及過多無關聯的視覺元素等等，統一的過程也是整合視覺元素的過程。

注意：設計中的統一并不是絕對的，而是相對的，如果所有的視覺元素、屬性都嚴格按照統一化去處理，那么就會滋生另一個問題：整體視覺太過平滑、缺少變化甚至會給人一種單調、枯燥的感受。那么在強調統一的同時，“打破”就是為了解決這難題的。

在日常設計工作中，打破是建立在統一基礎之上的操作，那么既然已經做好了統一，為什么還要打破呢？打破能為作品帶來什么？下面我們具體分析：

打破：提升作品視覺層次感

當作品過于統一時，很容易會給人一種單調、乏味、缺少層次變化的視覺感受，而在統一的基礎上做一定的打破操作，就能起到很好的解決這一現象的作用，那么什么是打破？舉幾個簡單的例子：

如上圖所示，圖①就屬于過于統一的表現形式，很明顯整體平淡、乏味，缺少視覺變化；而其他都是在統一的基礎上做了一些“打破”的處理，只不過各自切入點不同，下面我們逐一分析：

圖②：切入點是打破了一成不變的排列形式。

圖③：切入點是打破了一成不變的配色形式。

圖④：切入點是打破了完全統一的配色形式以及形態。

圖⑤：切入點是打破了統一的元素屬性值。

圖⑥：切入點是打破了統一的元素屬性。

以上這些雖然切入點都各不相同，但是目的都是通過打破過于統一的視覺現象，增加整體視覺變化程度，從而提升整體視覺層次感，也打破了呆板、乏味，增添了一些視覺上的跳躍性。

下面我們再看個設計中的例子：

如圖所示，上側案例屬于很好的貫徹整體統一的理念，而下側案例則是打破了固有的統一、卻也保留了大部分統一的屬性，通過兩者對比我們發現，其實單只看這一組案例：兩種表現形式都是可取的，只不過相比而言下側案例給人的視覺感受變化更多、層次感更強，所以相比而言給人留下的視覺印象更深刻。

上面說兩種表現形式都可取的前提是：單單只看這組案例，但是很顯然這組案例只是頁面的局部，如果整體頁面都如上側案例那樣嚴格的按照統一進行，那么頁面整體就會過于平淡、缺少視覺層次感、甚至主次不分明。

打破：劃分視覺主次

在現實生活中，具有差異化的人或實物會很容易引起周圍人的注意，甚至印象深刻、難以忘懷。在設計中亦是如此！其具體表現形式參考上圖①-⑥，因為打破過于統一就是在營造具有差異化的視覺元素，從而會很容易在視覺上形成先后、主次之分，所以就起到了一定的劃分視覺主次的作用。

注意：打破也不可盲目的進行，過于統一會單調、乏味、重復感強；而過于追求差異化也會出現雜亂、沒有章法的視覺現象。所以一定要結合實際情況靈活運用。一幅作品中大多情況下：打破的次數要少于統一，即作品整體絕大不多保留整體統一的屬性，通過局部打破處理提升整體出彩度，這樣容易給人一種干凈、整潔且不失視覺變化、層次感的感受！

不妨找一些優秀的網頁分析一下，是否很多優秀的設計作品都符合這一規律？

綜上所述，統一是為了讓作品有視覺條理性、更整體，而打破則是增加視覺層次變化，讓作品更出彩！統一和打破看似是兩個矛盾的名詞，實則在設計中是相輔相成的作用！不管是統一還是打破，兩者的切入點都是相似的，一般體現在：形態、屬性、色彩、大小、位置關系、留白等等。但是無論如何統一都是打破的前提，如果作品整體性都不夠，再一味的追求打破關系，只會讓作品越做越亂。所以一定要先做好統一，其次才是進行打破、改變。當然文中提到的只是一部分，希望大家能活學活用、舉一反三！

文章來源：站酷

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

本文是我學習Material Design設計規范的學習筆記和個人理解，希望對大家設計暗色主題有所幫助。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

在這個看臉的時代，無論是真實社交，還是網絡社交，甚至虛擬形象社交，都是「顏值即正義」。長得好看是一大優勢，或者至少要滿足彼此的審美才有進一步發展的可能。當然要想真正地完成社交目的，還是要看個人的社交能力。在進行網絡社交時（興趣社交除外），可謂「無頭像，不社交」，畢竟跟陌生人搭訕的篩選成本太高，看頭像照片是最直接快速的方式。據說，有好事者在三里屯注冊了某一款陌生人社交軟件，并將頭像設置成了一個在盧浮宮的露背少女照片，在短短時間內，居然收到了 10000 多次點贊，頭像的魔力可見一斑。

頭像設置流程

頭像設置流程一般包括頭像選擇、上傳、裁剪、預覽四個步驟，在用戶界面展現時，部分步驟可合并或跳過，但至少要包括裁剪和預覽。

1. 選擇圖片源

頭像圖片的來源包括本地圖片、系統推薦頭像、用戶個人線上相冊、即時拍攝等。同一產品在不同端可以支持不同的上傳渠道，比如 PC 端攝像頭拍攝質量不佳，而且臺式機不一定配備，一般可以不做支持。

2. 上傳條件限制

上傳本地圖片作為頭像時，圖片的格式、尺寸、文件大小規則應盡量放開限制，至少要支持 JPG、GIF、PNG、JPEG、BMP 等格式。隨著手機拍攝照片的尺寸和大小越來越大，所以 5~6M 是一個比較合適的上限。關于服務器圖片存儲，應保留一張高清大圖和多套不同尺寸的縮略圖。

3. 裁剪處理

圖片裁剪包括系統自動裁剪和用戶手動裁剪。如果不支持手動裁剪，最好把系統自動裁剪和截取做了。京東商城 web 端就沒有截取圖片中央區域，而是直接擠壓或拉伸圖片，導致圖片變形效果很差。手動裁剪時，一般要輔助縮放、旋轉、鏡像等功能?？s放時需注意極限值，否則會導致背景空白（如QQ空間），要做相應的填充處理。裁剪框最好加入輔助線（如九宮格、方圓）和遮罩，方便實時預覽方形和圓形頭像的效果。有時也會加入濾鏡、貼紙等功能。

4. 效果預覽

「所見即所得」是打造優良用戶體驗的訣竅之一，所以提供實時反饋和預覽是必不可少的。比如裁剪得到的各種形狀和尺寸的預覽，濾鏡效果實時渲染等。當然，實時性也和系統性能有關。

頭像的常見展示形狀包括方和圓，有時也有異形頭像。關于頭像形狀的「方圓」論證可以參考微信和 QQ 設計師的官方回復。

同樣作為騰訊的產品，為什么 QQ 的頭像是圓的？而微信的頭像是方的呢？

騰訊的回應如下：

相比方形，人的頭像更接近圓形。圓形 QQ 頭像能更突出頭像弱化背景，也更鼓勵用戶使用真實自拍作為 QQ 頭像。

QQ 作為平臺會接入游戲和第三方應用內容，圓形 QQ 頭像在這些方形、異形圖標環境中提高辨識度，降低用戶的認知門檻。

QQ 希望給用戶傳遞樂在溝通，展現年輕個性的態度，圓形 QQ 頭像更具靈動和活力，與之無縫銜接的頭像掛件也為用戶帶來更個性化的搭配和豐富的自我展示。

因為照片本來是方的，方頭像更符合用戶習慣。

《為什么微信頭像是方的？QQ頭像是圓的？｜你問鵝答》

還有百度小程序關于頭像的規范可供參考：頭像應保證清晰，頭像的主體元素在方形或圓形參考線內，不遮擋關鍵信息，確保前端展現時能在圓形輪廓中展現完全。

設置頭像的12種方式

1. 默認頭像

為縮短注冊流程，減少潛在用戶流失，用戶注冊過程中一般不會強制用戶設置頭像。所以，為防止用戶不去設置頭像以及頁面中頭像加載不出來，系統會提供默認頭像以便在相關位置展示?？梢圆捎没疑^像，也可以采用基于企業吉祥物卡通形象設計的彩色頭像（例如蝦米、轉轉）。二者各有好處，灰色頭像可以時常提醒用戶去設置頭像，彩色頭像則可以豐富畫面、增加趣味性。不過唯一的遺憾是一旦設置了新頭像，改不回默認頭像了，畢竟有的默認頭像還是挺好看的。有的社區允許游客用戶進行點贊、評論等操作，這時便會用到游客默認頭像。當然，同一系統內，默認頭像也可以不唯一，比如，根據用戶性別、星座匹配頭像，根據用戶身份角色匹配頭像（司機/乘客，招聘者/求職者），或者制作頭像庫為用戶隨機分配頭像。

2. 系統推薦頭像

讓用戶自己拍攝或找到一張自己滿意的圖片做頭像，對有些用戶而言其實是一件成本比較高的事情。如果用戶群體足夠大，圖片質量難以保證，甚至內容監管又會帶來新的問題，所以推薦一些優質頭像供用戶挑選，就成了一個很不錯的輔助解決方案。QQ 很早就推出了類似功能，甚至成了會員服務的一部分。平安金管家 APP 也有類似功能，提供了四個商務風格的卡通頭像供用戶選擇。

最近比較火的匿名社交APP Soul 也同樣支持使用系統推薦頭像，而且是只能使用系統頭像，如下圖所示，用戶可以根據自己所設置的性別，頭像風格選擇心儀的頭像。Soul 不允許用戶上傳其他照片作為頭像，也是希望用戶能拋開顏值，找到真正的靈魂伴侶。這些頭像本身也體現了用戶個體的審美情趣、價值觀等。最近 Soul 新上線了「超萌捏臉功能」，下文會著重詳細分析，不過捏臉而成的頭像依然可以算是系統推薦頭像，只是把頭像拆解成了頭發、臉、眉毛、眼睛、鼻子、嘴巴、衣服配飾等元素，然后再由用戶自己排列組合。

3. 隨機選擇頭像

前文也提到了隨機頭像，即系統會在用戶注冊成功后為其隨機匹配頭像，避免單一默認頭像的沉悶，記憶中以前 GitHub 就是采用這種做法。另一種隨機頭像是指用戶主動選擇隨機頭像，獲得相應的驚喜，比如嗶哩嗶哩就采用了這種做法。不過實在難以琢磨出這種類似「變臉」的玩法背后的設計邏輯。

4. 使用歷史頭像

在用戶使用過一段產品之后，可能會積累大量的歷史頭像（主要是用戶自主上傳的，使用過的系統頭像不記錄在內）。QQ 就把用戶的這些頭像收集起來展示給用戶，以便用戶查看或重新選擇，雖然用戶重新使用的幾率并不大，但不失為一種增進用戶情感、提高用戶粘性的做法，畢竟這里面滿滿都是青春的回憶，很容易給用戶帶來觸動。

微信也有類似的做法，不過只能查看上一張頭像。微信的設計哲學是不去刻意討好用戶，所以這里更多的是防止用戶反悔，方便用戶在最近使用的兩張頭像之間切換對比。馬蜂窩的做法與 QQ 類似，不過增加了刪除歷史頭像的功能（當前頭像不可刪除）。聊天寶（原子彈短信）有很多錘子的設計基因，錘子的設計師們推崇工匠精神，愛為用戶創造小驚喜，所以聊天寶不能查看自己的歷史頭像，但卻能查看好友的歷史頭像。不妨推測下背后的設計動機：現代人分分鐘互相加個好友，但可能來不及備注，而人們對圖像的記憶更準確、持久，所以看到頭像可能就會很快地回憶起好友姓名、相識的場景等信息。

5. 文本頭像

文本頭像在商務類應用中比較常見，例如 OA。由于辦公社交的社交屬性并不是很強，更多在于及時通訊，所以圖片頭像并不是特別重要，并且文本頭像中的字號更大，更容易辨識。要注意文本顏色和背景顏色的對比度，另外同一個應用中，文本和背景可以多做幾個配色方案隨機展示，以豐富視覺效果。此外還要注意文本的取值顯示規則，下圖是釘釘的部分頁面截圖，可以從中推測：

• 漢字類：單個或兩個漢字展示全部漢字，三個及以上漢字僅展示后兩個漢字；
• 英文類：一個單詞時取前兩個字母，兩個及以上單詞取前兩個單詞的首字母；
• 數字類：單個或兩個數字展示全部數字，三個及以上數字僅展示后兩個數字。

6. 角色頭像/匿名頭像

相信很多人都玩過 QQ 的匿名聊天功能，然后就被管理員禁止了，它更像是一種娛樂性玩法。其實還有類似的做法，在游戲中較為常見，在角色確定前顯示的是用戶頭像，角色確定后就顯示角色頭像。比如斗地主，地主身份確定前顯示用戶本身頭像，確定后則顯示角色頭像，而且還會根據角色性別顯示相應頭像。

7. 動態視頻頭像

動態視頻頭像可以讓用戶跨越時間維度從多角度展示自己。依然以 QQ 為例，動態頭像分兩種，一種是 QQ 會員才可使用的動態頭像，由系統推薦，用戶自主選擇；另一種是讓用戶自己拍攝錄制。具體流程如下圖，用戶先錄制視頻，然后選擇一幀作為靜態頭像，以便能在不支持展示動態頭像的地方展示。這也是目前的一大趨勢，不過如果好友列表的頭像都在動也還挺嚇人的。

8. 輪播頭像

針對陌生人社交場景，如探探，頭像更顯得重要，左滑還是右滑就在剎那之間，點進去主頁也根本不會下滑屏幕細看具體的興趣、資料，所以就要盡量在首屏展示更多更大更清晰的照片，輪播圖就是一種很好的形式。探探最多可設置 6 張圖片或 6 段視頻作為輪播頭像。其實，輪播頭像類似 QQ 照片墻的概念，不過自我展示意味更濃。

采用類似輪播頭像做法的還有音遇 APP，雖說主張以歌會友，但誰都喜歡唱歌好聽的小哥哥小姐姐還有高顏值。如下圖，個人主頁背景圖即頭像輪播。還有一些社交軟件可以將個人系列頭像設為私密，然后定向開放展示給需要的人。

9. 捏臉頭像

ZEPETO（中文名：崽崽）的火爆刮起了一陣虛擬形象社交的風潮，雖然是三維形象的玩法，但和之前紅極一時的臉萌并沒有本質的區別，要想實現從工具到社交的轉變，獲取關系鏈才是王道。多閃和 Soul 動作也很快，已經上線了捏臉功能，雖然目前是二維的，但相信巨頭們早已開始布局三維虛擬形象社交了。目前 ZEPETO 可編輯臉型，甚至可以進行簡單的化妝。服裝配飾則包括衣服、頭飾、首飾等，且支持按上架時間、價格等排序。室內裝飾則涵蓋了地板、家具、擺件、樂器等等。手勢主要是一些肢體動作庫，動作效果十分連貫?？梢哉f ZEPETO 集成了用戶對場景搭建+服飾搭配+顏值定義+炫酷動作的完美幻想，同時也擴充了人們對虛擬形象社交乃至電商新形態的想象空間。

目前市面上，尤其是游戲領域，不管畫風是 Q萌，還是 3D，時尚亦或仙俠，人物建模及捏臉系統已經比較完善，且得到廣泛應用。這里推薦一款叫做 IMVU 的 APP，它的人物畫風、服飾質感比 ZEPETO 更加寫實，更偏成人化，視角轉換也更加流暢，支持俯視/仰視。不過，臉萌早已涼涼，美圖的圖片社交之路似乎完全和 ins 對不上標，所以 3D 虛擬形象社交的未來之路也未可知。

10. 頭像掛件

頭像掛件、等級徽章、認證標志也屬于頭像的一部分，不過需要結合付費會員、用戶成長體系、認證規則進行討論才有意義。

11. 使用第三方頭像

使用第三方社交賬號快速登錄已經成為登錄注冊頁面的標配，畢竟一個授權就解決了賬號注冊、頭像及昵稱設置等問題。這兩天，吃瓜群眾們又一次見證了「頭騰大戰」。多閃使用了用戶的微信頭像和昵稱，可是并沒有得到相應授權，因為之前的授權是給抖音的，當然現在也停止授權了。不管是不是抖音碰瓷，但微信/QQ 賬戶上的頭像、昵稱的權益歸屬確實是個問題。個人上傳的頭像還好說，如果用的是系統推薦頭像，這些圖片的版權是不是歸屬騰訊呢？用戶使用第三方登錄后，最好還是引導用戶盡快綁定手機并設置完善其他資料。

12. 群組頭像

這里以 QQ、微信和釘釘為例進行分析。微信群聊頭像由群成員頭像組合生成，在方框內嵌套群成員的方形頭像，根據群成員的數量多少（1-9）進行相應排布，多于 9 人時顯示前 9 人頭像。另外，微信暫不支持設置圖片為群頭像。釘釘群與微信類似，不過外觀上是圓形外框嵌套群成員的方形頭像，顯示數量也有所限制（最多顯示前4個），但可以選擇其他圖片作為群組頭像。QQ 群比較復雜些，可分為討論組和群，雖然現在統稱「群聊」，根據創建方式區分如下：選人創建（對應的是討論組）和按分類創建（對應的是群）。討論組也是不能設置頭像的，是在圓形內嵌套群成員的圓形頭像，最多可顯示前 5 個成員的頭像。而群頭像由管理員設置，且可以查看歷史頭像、使用系統推薦頭像等。另外還有 TIM，定位是對抗釘釘的辦公軟件，比 QQ 更輕量化，視覺風格也大不相同， TIM 中討論組頭像的展示就采用了類似釘釘的做法──圓形外邊框+方形頭像。

延伸一下，有人說微信重新定義了群的設計形態，更貼近用戶自然使用方式：無需群ID，無需刻意創建群，隨時拉人開聊，無需命名，默認不保存到通訊錄，搜索群時可通過直接搜人實現等。

結語

本文列舉分析了頭像設置的相關設計思路和案例，對社交產品的頭像設計大有裨益。在設計時，尋求相關設計參考是獲取靈感和解決方案的有效方法，認真發現生活中的好設計，及時積累并總結，才能在關鍵時刻有高質量的輸出。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

△ 文中配圖均來自美團官方和產品截圖，僅作為設計交流使用

這是在設計群看見的一個啟動頁視頻，第一感覺就是品牌色由「青綠色」變成了「黃色」，采用 C4D 渲染出各種使用場景和產品的各種服務品類，表明產品內部依然囊括了吃喝玩樂等一系列服務。風格比較年輕化，第一感覺還是蠻不錯的，所以我立馬去 App Store 升級了產品，發現 APP 啟動圖標也變了。

△ APP圖標目前是第二個，猜測是想給用戶一個過渡期

為什么美團突然要進行品牌升級？

官方給的說法是：為了「將所有線上線下曝光進行視覺化統一，流量到品牌的一體化」。同時希望以統一品牌色為起點，未來實現從線上到線下，從流量到品牌的四者一體。

確實是這樣，就是為了品牌的統一，這就是這次升級的核心意義。這是典型的由公司經營戰略為導向而進行的一次產品升級，這樣做也是為了搶占用戶心智，為了以后讓人一看到黃色，就只會想到美團，而不是其他品牌，畢竟現在的產品太多元化了，每家大廠都應該有自己的一個獨有的品牌色，這樣品牌就不會過于分散。比如微信的綠色、淘寶的橘黃色、天貓的紅色……如何讓用戶第一時間就想到你的產品，對于競爭異常激烈的今天這真是太重要了。

說到用戶心智，前兩天看見一篇關于品牌的文章，里面提到：早期的品牌戰略是「定位理論」，它告訴了我們：品牌的競爭，是關于潛在用戶心智的競爭，如今這一理論也一樣適用。

為什么品牌升級，只升級品牌色？

因為品牌顏色的變化是用戶最直接、最容易感知出的變化，品牌色是最容易吸引用戶，占領用戶心智的方式。

為什么是黃色，而不是青綠色？

為什么是黃色，而不是將所有色系都變為青綠色？

我們都知道，美團升級前是「青綠色」、美團外賣是「黃色」、大眾點評是「橘黃色」，是各自不同的色系。

美團的四大業務支柱是：外賣、到店、酒店&旅游、出行。其中外賣的流量最大，每天外賣的訂單有數百萬計，這是一個巨大的流量，所以變身外賣「黃」也是為了流量和品牌更好地綁定。并且大街上奔忙的穿黃色衣服的外賣小哥，你一眼就知道是美團外賣，這些都是無形中的廣告，也早已扎根于你的心智之中。相信很多人心中的美團 = 美團外賣，所以變成「黃色」是最合適的。

但是「美團黃」和美團外賣的「黃色」還有所區別，只能算是一個色系，美團外賣的黃色更顯年輕一點。而「美團黃」官方的解釋是：黃色代表著熱情、溫暖，象征著美團始終堅守「幫大家吃得更好，生活更好」的使命，致力于為用戶提供更優質、有溫度的一站式生活服務，幫助人們向美好生活靠近。

下面再來對比一下產品頁面 UI 的變化：

△ 升級前主頁面UI

△ 升級后主頁面UI

單從頁面對比來看，整體布局結構沒有什么變化，不出所料，主要的區別就是將新的品牌色「美團黃」進行了視覺上的強化。

這種大塊的品牌色比較突出的設計似乎和當下流行的簡潔優雅的設計風格背道而馳，似乎只有在電商產品中比較常見，但我認為，這樣的設計應該只是暫時的，相信在經過一段時間占據了用戶心智之后，美團勢必會順應當下的流行趨勢，在此期待一下。

去年被收購的摩拜一直虧損嚴重，繼改名為「美團單車」之后，掃碼騎車入口也整合進了美團 APP，如今為了讓線下場景都統一成一個色系，單車也要變成黃色了：

對此，網上有人喊話美團：順便把小黃車也收購了吧，畢竟黃色的單車給我們的第一印象就是 OFO，這樣線下黃色的單車就全都是你家的了，我們的押金也就有著落了……

另外，還有一些其他線下場景品牌色運用：

這次美團的升級，不管你喜歡與否，它已經發生，就像年前的微信升級一樣。一開始勢必會有很多人不習慣，這其實也是受用戶心智的影響，我們都會帶有一種現狀偏見來看待事物的新舊變化，這是很正常的心理狀態，但是過了一段時間以后，都會淡忘，直到習慣，都逃不過「真香」理論。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。