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

明修棧道C和暗渡陳倉B

1. 初識B端產品和C端產品

C端 Consumer，表示為消費者、個人用戶或終端用戶設計，直接面向普通用戶提供服務來幫助他們實現個人需求。B端 Business，它面對商業和企業，是為幫助企業集團等實現商業目的而設計的軟件、工具或者平臺。

在我們日常生活中，在手機上使用的大多是 C 端產品，單一的 C 端產品通常是為了實現單一的需求。比如看網紅的抖音、聽音樂的酷狗、買車票的12306、社交的微信等，這些產品有自己的核心功能，其他的功能則是附加的，倘若沒有這些附加功能，雖然用戶體驗感會降低，但并不會影響產品的核心功能。

而面向 B 端的產品，我個人稱之為「暗渡陳倉」，當個人用戶為實現個人需求產生了一系列動作，往往伴隨著該需求的另一端也會反饋一系列動作，即 C 端產品的后臺產品線（BtoC），比如淘寶賣家平臺、餓了么商家版等。除此之外，還有面向商家、企業、業務部門提供的企業級服務產品，以及面對企業或者個人提供的平臺級工具產品等。

雖說我們日常使用的更多是 C 端產品，但是 B 端產品對我們的影響也是時時刻刻存在著。C 端產品在明，逐漸改變著現代人的生活方式，B 端產品在暗，間接服務于用戶，讓一切流程化秩序化，并且具有多個主要功能點。

2. B端和C端產品的區別

在我看來，C 端產品以消費互聯網為主，B 端產品以產業互聯網為主，C 端更感性，而B 端更理性。

從使用者的角度來說：

• C 端產品關鍵詞包括免費使用、迅速上手、體驗為王、你能讓我做什么；
• B 端產品的關鍵詞則是付費購買、上手緩慢、效率第一、你能為我做什么。

從開發的角度來說：

• C端周期短，B端周期長；
• C端用戶多，B端用戶少；
• C端邏輯簡單，B端邏輯復雜；
• C端競品較多，B端競品較少；
• C端主戰場是移動端，B端則是 PC 端；
• C端是用戶體驗驅動，B端是解決問題驅動；
• C端產品的使用決策權在用戶手中，而B端產品的使用決策權則在客戶手中（B端客戶不一定是用戶）；
• C端產品除了產品的體驗以外，也要讓產品更美觀，讓活動更有趣，讓用戶更舒服，產品經理有很強的同理心。B端產品的實用性大于美觀性，能切實解決問題、配置資源的 B 端產品才是一個好的 B 端產品，產品經理要具有更強的邏輯思維能力。

3. 后臺產品常見分類

后臺產品按其作用可大致分為兩類，一是支撐前臺產品，二是管理各種資源。我認為后臺產品應當是囊括在 B 端產品的范圍之內的，常見的類型包括：

• C 端產品的后臺產品線，如淘寶商家版，餓了么商家版，對訂單和用戶進行管理，支持 C 端產品的業務進展。
• 平臺級工具產品，如微信公眾平臺，對文章和讀者的數據統計和管理；各大互聯網公司的開放平臺，如微博開放平臺等。
• 企業級服務產品，虛擬主機系統（VMware），云主機管理系統（深信服、xensystem、騰訊云）以及各種云SaaS。
• 企業的業務處理平臺，對內有考勤、報銷等 OA辦公系統，對外有 CRM 客戶管理系統，ERP 資源及供應鏈管理系統。

后臺產品設計思路

1. 初識后臺產品設計

說起后臺產品，很容易想到復雜、龐大、邏輯縝密，而作為設計師，則苦于競品短缺、架構復雜，設計的前期工作比設計本身要復雜得多等問題。

后臺產品不同于普通用戶所使用的 APP，它在用戶初次使用和短暫時間內的認知成本是較高的。當用戶用慣了一個音樂類的 app，再給他幾個其他的音樂 APP，用戶是可以迅速上手并且輕易解決自己的需求的。而后臺產品則不然。

對于后臺產品來說，它并不是隨隨便便就可以下載使用的，即便你在使用的過程中，也因角色不同而受到權限限制，一般來講很難像超級管理員一樣接觸到整體功能；其次，門檻之高，后臺產品的使用者一般都是在該行業沉淀了很久，所以要對后臺產品進行設計就需要同樣了解該行業，甚至更能洞察該行業，業務本身的復雜性質決定了后臺產品架構也會比較龐大；然后，無論是工廠商家的進銷存管理，還是政府醫院的工作流和業務流，乃至企業內部的產品，除了不同行業都有門檻外，對信息和產品也有「保密協議」的使命感，所謂「隔行如隔山」，在后臺產品更是如此；最后，后臺產品設計往往沒有固定的功能架構和商業模式，對于產品經理的邏輯思維能力要求更高，設計師不僅僅是做界面、優化流程，也要主動和產品經理溝通交流，并對產品進行思考和探索。

2. 后臺UI設計工作流程

后臺 UI 設計的工作，大體分為三個部分：需求分析、設計執行、數據分析。

在需求分析階段，要對產品本身和行業本身有一些基本的認知。要了解產品的基本情況，比如產品目標、用戶人群、產品定位、需求分析、功能模塊、主要競品和產品特色。做這個產品是為了解決什么問題？想實現什么目標？使用這個系統的用戶有哪些？不同角色的用戶有哪些具體的權限？是否需要對每一個用戶的行為都生成操作日志？產品有哪些主要的功能模塊？產品的業務流程是怎樣的？有哪些同類型的產品？和他們相比我們的產品有什么特色和特點？成功地做出大而全的后臺產品，是整個設計團隊和開發團隊能力的體現，而對很多小團隊來說，只能做一些大團隊不愿去做的產品，或另辟蹊徑在某些方面做專做精。

在設計執行階段，參照 PM 給出的功能清單做原型和流程的梳理，需要關注的有當前版本規劃、功能模塊、功能類型、功能描述、任務優先級、完成時間等，交互原型則伴隨著功能描述、規則判定條件、觸發條件等內容。原型設計完成，開始做 UI 視覺方面的設計，而這時后端同步構思需求的實現方案。UI 設計師向前端了解實現框架，方便交接和溝通。當界面實現，UI 設計師應該是最早進行測試的，力求視覺設計和代碼實現無誤差。在完成設計執行后，從信息層級、文字、圖標、圖片等方面進行設計走查，進行多次設計驗證與測試。

數據分析是產品優化迭代的重要依據。進行多番測試和評審后交付客戶（或內部）使用，根據產生的具體問題進行不斷迭代，且觀察產品能否通過準確的數據反映問題、體現能力，應虛心接納使用者的使用建議并嚴謹思考其合理性，用戶的使用和反饋是優化產品的重要途徑。只有達到了管理和運營的指標，后臺產品才是真正產生了價值。

3. 制定設計規范的作用

為后臺產品制定設計規范有哪些作用和好處呢？簡單來說就是對產品好、對自己好、對團隊好、對客戶好。

• 對產品：在項目完成第一版較為穩定的版本時，著手制定設計標準，統一公司視覺設計規范及某些特定交互設計規范。同一個項目會有多個設計師的參與，規范化的設計語言，避免因設計控件混亂而影響設計輸出。
• 對自己：組件化同類元素，提高工作效率，建立公司產品的組件庫，以便不同項目的復用及設計延展。在同一個項目中也能更好的把控該項目的視覺規范，提率。
• 對團隊：設計規范的制定，規范了設計團隊的輸出，同時方便了與開發團隊的交接和協作。通過設計規范的制定，前端實現也能擁有一套可供復用和擴展的組件庫，助力上下游交接及團隊協作。
• 對客戶：制定設計規范的同時需要考慮設計延展性，為不同客戶的定制化需求提供更的輸出。同時在進行產品迭代時，設計規范的組件化調整也大大提高了工作效率。

后臺產品設計規范

以下數值為參考，請結合特定產品靈活運用。

1. 頁面布局

統一尺寸

據統計，目前 PC 端用戶屏幕分辨率占比排名前三的是 1920*1080、1366*768、1440*900，以 1440 來設計的話，向上適配或者向下適配誤差會比較小。

適配方案：面向多個客戶，后臺產品設計功能型頁面的尺寸統一為 1440*900，按照柵格系統原則向上或向下適配。展示型頁面以 1440*900 為主，同時設計出極端情況（寬度為 1280 以及寬度為 1920）的效果圖，力求實現前端實現效果和高保真設計圖誤差最小。面向公司內部的后臺系統，由于各個職工電腦屏幕是統一采購、統一尺寸，所以開發適配的分辨率可以統一尺寸進行設計，這個尺寸根據公司內部采購屏幕的尺寸和分辨率選擇即可（提前和前端溝通好）。

頁面框架

頁面框架主要分為左右欄布局和上下欄布局，還有其他的布局。左右欄布局包括頂部欄、左側菜單欄、主體內容三大區域，其中頂部菜單欄、左側菜單欄為固定結構，右側主體內容根據分辨率進行動態縮放；上下欄布局包括頂部菜單欄和主體內容兩大區域，其中頂部菜單欄為固定結構，主體內容進行動態縮放且需定義主體內容左右兩邊空白區域最小值；左右欄布局時，左側菜單可收縮展開，收縮狀態下固定寬度。

柵格布局

柵格系統的使用是為了解決自適應和響應式問題，從而更好地進行產品設計和產品開發。響應式柵格采用 24 列柵格系統實現，以滿足 2，3，4，5，6 分比布局等多種情況。固定寬度 Column，將間隔 Gutter 進行動態縮放。

需要柵格化處理的內容的總寬度=23列（1列=1寬度Column+1間隔Gutter）+1寬度Column=24寬度Column+23間隔Gutter。

谷歌規定模塊和結構之間要以 8px 為基準，布局間相對間距可采用 8px 以及 8 的倍數，但一些小組件（按鈕、間隔、輸入框）可以以 4 為基準。柵格布局是為了輔助設計，靈活運用，不要被它所局限。

尺寸設定

一般在整體區域左上角放置產品 LOGO 及產品名稱，大部分系統頂部欄高度 48+8n，側邊欄寬度  200+8n。我常用的是頂部欄高度 56px，側邊欄寬度 200px，側邊欄收縮狀態寬度 56px，右側的側浮窗寬度 400px。

相對間隔

定義主體內容的上下左右邊距，定義主體區域內各模塊的邊距及安全寬度，超出內容區域的部分采用區域內滾動或整屏滾動，視情況固定導航欄。

2. 標準色

顏色分為品牌色、輔助色、中性色。根據不同產品的不同需求，可能也會將統計圖、標簽等進行統一標準色設定。

品牌色即產品主色，產品主色的設定直接影響產品氣質和直觀感受，也是產品直接對外的形象。品牌色要根據產品特性、用戶使用場景、產品定位等進行選取，盡量做好色彩的延伸性，可支持換膚。品牌色的應用場景包括操作狀態、按鈕色、可操作圖標等。

輔助色用于提示其他場景，比如成功、失敗、警告、無效等。

中性色常用于文本、背景、邊框、分割線等，需要考慮深色背景和淺色背景的差異，可以選擇同一色相控制透明度變化，用來表現不同的層級結構。

其他色如統計圖、數據可視化、多個標簽的不同配色方案根據項目情況單獨設定。

3. 標準字

后臺系統常用的字體：windows 系統，中文 Microsoft YaHei，英文 Arial；Mac 字體，中文 PingFang SC，英文 Helvetica；除此之外可以選擇的字體還有 segoe UI、思源黑體、Hiragino Sans GB等。

后臺系統中常用字體大小為 12px、13px、14px、16px、18px、20px、24px、30px。

行高設定，根據文字大小及使用場景設置行高，一般行高=文字大小+6px/8px。

4. 圖標

圖標是 UI 設計中重要組成部分，一般分為功能圖標和應用圖標，以圖形的方式傳達概念，可以降低理解成本，使得界面更加協調美觀。在后臺產品中，圖標的功能則更偏向輔助性，輔助用戶對功能的認識。

除了某些常用的圖標，有一些專業性的操作和詞匯則需要設計師進行繪制，現在比較方便的方法是在 iconfont 提供的圖標模板上用 AI 繪制，畫板 1024*1024，提供圓形、正方形、矩形形狀。圖標尺寸按照 8 的倍數進行延展，繪制完成后生成 svg 格式文件，提交到阿里巴巴矢量圖標庫的項目組里，方便前端調用，調整大小和顏色更為方便，且能夠優化系統內存和性能。

5. 按鈕

按鈕是后臺產品進行交互設計是重要元素，提供給用戶進行點擊操作，是視覺上最引人注目的控件，具有一定的視覺受范性。常用按鈕可分為填充按鈕、線性按鈕、文字按鈕。

按鈕的交互狀態包括默認、懸停、點擊和不可用。

按鈕根據需求分為不同尺寸，大中小三個級別用在不同的場景，一般按照 8 的倍數設定。如高度分別設定為 24、32、40px。

規范整理時要規定不同類型按鈕的寬高、圓角及文字大小，同時還要將按鈕的不同狀態展現出來。

填充按鈕之間間距最小為 10px。

6. 導航

導航的類型有很多種，常用的比如頂欄菜單、側欄菜單、折疊菜單、下拉菜單、面包屑、分頁、步驟條、時間軸、tab標簽頁、膠囊菜單、徽標數等。

各類導航中的字體大小可進行統一設定。

頂欄菜單多為一級菜單，點擊切換，或作為下拉菜單的父級，將子級菜單合理分類。

側欄菜單為垂直導航菜單，可以內嵌子菜單。

下拉菜單的觸發方式一般有鼠標懸停和鼠標點擊兩種。

步驟條引導用戶按照流程來完成任務，一般步驟不得少于兩步。

分頁的高度設定為 24px、30px、32px，根據應用場景適當增減內容，比如設定每頁展示數據的條數、跳轉至指定頁等。

面包屑用于說明層級結構，使用戶明確當前所在位置，并且可以回到任一上級頁面。

徽標數用來通知用戶當前有未讀消息，一般出現在圖標的右上角或者跟在文字后面。

7. 表單

表單多由一條或多條列表項組成，單一列表項的類型有字段輸入框、條件選擇器。

字段輸入框的標題和輸入框分布方式包括左右、上下、無標題。左右分布是常見的對齊方式，比較適合 PC 端的使用；上下分布增加了表單的整體高度，視情況選擇使用；無標題經常應用在登錄注冊，雖然減少了面積，但是增加了理解難度。

輸入框的交互狀態包括默認、輸入結果、提示錯誤、禁用、獲取焦點。

輸入框的尺寸可按照8的倍數進行設定，比如 24px、32px，也可根據系統實際情況進行設定，我常用的輸入框高度為 30px，寬度視情況而定，無圓角。上下布局的多個輸入框上下間距為 20px，有錯誤提示時候豎向增加 10px 或橫向顯示在輸入框右側（預留出位置）。

表單中標題文字左對齊，輸入框左對齊，標題文字距離輸入框20px（多個長度不同的輸入框算最長的）；標題文字右對齊，輸入框左對齊，也是常用的方式。輸入框內正文字體 14px，文字和左右兩邊邊框的邊距 10px。

選擇器包括單選、多選、時間選擇、開關切換、下拉選擇、滑塊選擇、旋鈕等。單選框多為圓形，復選框多為方形。

搜索框和選擇框的高度為 30px 或按照 8 的倍數自行設定，通常和輸入框保持一致。搜索框距離右側按鈕 4px，內部文字 14px。

單選多選框尺寸 16*16px，多個選項橫向排列間距 16px，縱向排列間距 8px。

開關按鈕外框 40*20px，內部圓形 16*16px。

8. 表格

表格在后臺產品 UI 設計中占比非常大，用來展示數據、統一管理、作為詳情入口，是最清晰、的形式之一。在設計規范中需設定表頭高度、表格行高、表格列寬范圍，同時也包括表格中的按鈕樣式、標簽樣式。

表格主要分為五大區域：選擇搜索區、操作區、表頭、正文、底欄。選擇搜索區放置篩選框和搜索框，為用戶提供按需搜索，可以大大提高用戶效率；操作區指各種對表格內容進行增刪改查、批量處理、配置列的動作；表頭展示列標題，一般具有排序功能；正文主要展示各種各樣的數據，要注意行高、對齊、分割、信息層級等，要考慮是否提供行內操作；底欄顯示分頁、總數統計等。

表格信息一般主要功能為增刪改查，查看和編輯是最基本的功能，表格信息支持篩選、搜索、排序、分頁。對可批量操作的表格數據在第一列增加多選框。

行高

表格行高可設置為表格內字體高度的 2~3 倍，主表格會間隔顯示不同顏色，用于區分不同行數據、加強視覺流引導，展開單行的內置表格可采用純色，選中行應有視覺上的反饋。表頭要和表格內容有視覺上的區分。表格行高可采用 36、40、48、60 等。

行數

表格行數太多加載速度會降低，延長用戶等待時間；行數太少會導致用戶不斷翻頁，降低使用效率。比較合適的默認表格行數是 20 或 50，用戶可以根據自己需求選擇默認的行數。設定行數之后，如果每頁行數多于每屏行數，可在表格內引入滾動條，這時可以固定表頭滾動內容。

列寬

列寬根據內容字段長短需要有不同且合理的默認值，使得表格字段有良好的展示效果。列內容的長度固定時，列寬應大于固定寬度（比如時間、MD5、SHA1）；列內容不固定時，能預判最大寬度的按照最大寬度設定列寬（比如IP地址、MAC地址、姓名），不能預判最大寬度的設定列寬按照常用寬度，多于內容省略以「…」展示，鼠標懸停出現完整內容（比如詳情、描述）。

列數

表格列不應過多，列數比較多的情況下應該合理進行合并、隱藏、刪除或進行優先級處理。常用的方法有引入配置列，用戶可自定義展示必需列以外的其他列；只展示重要信息，下拉展開列查看完整信息；在表格中引入橫向滾動條，根據實際情況選擇是否要始終固定基本信息列（如第一列是文件名）和操作列（最后一列的操作）。

對齊方式

表格內的文本應按照文本類型不同進行統一規范，如金額類數值保留相同位數小數，SHA1 雖然是一串數字但是其實那并不是數據而是一串編碼，所以可以像文本一樣左對齊。根據文本內容不同，對齊方式也應靈活調整，可采用文本左對齊、數據右對齊、金額小數點對齊的方式。數據前面有標簽的，將標簽前置對齊。類似 IP 地址、MD5、SHA1、域名這樣的信息，也可以根據產品需要在文本前面增加「復制」圖標，方便用戶調用。

詳情入口

表格內部數據的詳情入口，將能點擊下鉆查看詳情的內容以不同顏色表示，同時在表格行最后一列操作按鈕部分放置一個查看按鈕。

9. 反饋

包括彈框、側滑框、骨架屏、全局提示、警告提示、消息提醒、加載狀態等。分為模態框和非模態框，區別是是否會打斷用戶工作流。

彈框又稱對話框，是疊加在應用主窗口上的彈出式窗口，以對話的方式使用戶參與進來。

彈框

彈框出現時，主題內容增加一層遮罩 #000，透明度 50%，避免使用雙層彈框，可同時采用有關閉圖標的彈框和無關閉圖標的彈框，引導用戶對內容進行正確操作。如果設定系統內所有彈框均可以點擊彈框外區域關閉， 則需要為用戶新增或編輯內容的彈框彈出二級確認的彈框，或者再次進行交互梳理。

側滑框

側滑框又稱抽屜，出現在右側，固定寬度 400px，高度覆蓋在主題內容之上，點擊側滑框以外的區域則收起側滑框。

骨架屏

為某些特定數據提供數據加載等待時的占位圖形組合。

全局提示

建議停留時間 3s，可根據文字字數調整停留時間，文字內容限制在 30 以內。

警告提示

用不同顏色和樣式展示需要關注的信息。

通知提醒

消息通知和警告信息用通知提醒框，單個消息從頁面右側以抽屜的方式劃出，用戶可手動關閉，或停留 3s 后自動關閉。

10. 缺省狀態

繪制不同類型的情感化插畫表示缺省狀態，如404、500、暫時沒有數據、沒有新消息等。

頁面需要一個默認的底色，錯誤文字使用 14px，與情感化插畫間距 20px，與按鈕間距 30px。

11. 數據可視化

數據可視化部分可能是后臺產品中對視覺設計要求較高的部分，使用情境為各類統計圖、大屏展示頁面等。

功能型頁面的數據可視化可以引入圖形化設計組件，Echarts、G2、d3等；展示型頁面的數據可視化則可以做得更有趣，比如立體的統計圖、粒子地球效果、靈活有趣的網絡拓撲圖等。

考慮到數據可視化可能會需要深色淺色不同的背景，在數據可視化統計圖的色彩搭配上要注意顏色的拓展性。

經驗觀點及設計資源

1. 設計前端一家親

• Ant Design 的設計組件，實現框架 React、Angular
• Element 的設計組件，實現框架 Vue 2.0、 Angular
• iView 的設計組件，實現框架 Vue
• 飛冰的設計組件，實現框架 React
• Layui 的設計組件
• G2 可視化圖形組件
• Echarts 可視化圖形組件
• d3.js 可視化圖形組件
• GridGuide 在線柵格化計算工具

2. 書籍推薦

• 《B端產品經理必修課》
• 《交互設計精髓》
• 《U一點料·Ⅱ》
• 《簡約至上：交互式設計四策略》

3. 文章和作品推薦

• 《如何更好地使用柵格系統》 Christie Tang
• 《柵格系統及其在后臺設計中的應用》 UXBoy
• 《新人來收！10分鐘幫你掌握柵格系統基礎知識！》 蝸牛醒
• 《原子化設計-后臺產品組件庫建設》 MrLei
• 《如何寫后臺系統UI設計規范 》 八戒Maria
• 《B端產品設計》 千夜Ryan_Vision
• 《面向企業中后臺產品的設計系統大合集》 Z清暉
• 《B端網頁設計規范全方位匯總》 BruceXLS
• 《如何利用走查表驅動設計改版》 可樂Cola
• Michal Parulski 的后臺可視化設計作品
• zoeyshen 的后臺可視化設計作品
• 三魚先生的數據可視化設計作品

總結

不管是做 C 端產品還是 B 端產品，都是為了實現用戶的需求、幫用戶解決問題。

剛接觸后臺產品的時候，最希望能把產品做的炫酷、美觀，工作中慢慢地發現項目的背后思考更為重要，產出的設計成果也應該有理有據、支撐整個設計體系。網上供大家使用和學習的資源非常多，對一些公司來說、專門去制定一套自己的后臺設計規范不免顯得費時費力，合理引入 antdesign 和 element 等開源的設計組件，會使得設計師以及前端事半功倍，有助于設計師把更多的精力投入到沉淀行業知識、研究產品架構、梳理交互方式和創新視覺表現上。

在后臺產品的設計過程中，更應該把寶貴的時間用在更值得關注的事物上，讓設計師能夠輔助業務挖掘，從趨于相同的表象中找到產品獨有的閃光點，從而切實解決問題和實現價值。

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

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

單圖排版

1. 平鋪

即把圖片鋪滿整個版面，這種處理方式多用于封面設計。

或者在內頁中把某一半版平鋪一張大圖，另一半則排列文字或者小圖。

平鋪的圖片比較有張力，有視覺重心的圖片適合這么處理。下圖平鋪的效果就一般般。

還有一種情況是把圖片當做背景，也可以采用平鋪，如下圖：

2. 四周留白

即圖片要比版面小，并讓其四周都留出空白。這里也分兩種情況，一是圖片位于版面正中央，圖片周圍的留白是對稱的，這種效果類似于相框，常用于封面設計。

還有一種情況是圖片周圍的留白并不對稱，如下圖，留白較多的區域會用來排文字，常用于海報設計和畫冊內頁設計。

3. 一條邊出血

即把圖片的一條邊對齊邊界，這么處理有點沖破束縛的意思，可以增加圖片的想象力和版面的設計感。

4. 三條邊出血

這么做會把版面分成兩部分，一部分為色塊，一部分為圖片，在排版時我們還可以通過文字、色塊或顏色把這兩個部分聯系起來。

5. 拆分

即把一張圖片拆分成幾份，然后隔開一些排列，這么做比單獨放一張圖片會更有設計感和趣味性，風景類圖片適合這么處理。

6. 跨版

即在畫冊設計中，讓圖片同時占據兩個版面。當在一個跨版中只有一張圖片時，如果只把圖片排在某一半版中，那么另一半版就容易單調，所以在這種情況下通常會使用跨版，而且圖片放大后會更有張力，還能把左右兩個版面關聯起來。

雙圖排版

在畫冊的設計中，有時候我們應該把一 P 當成一個版面，而有時候則需要把一個跨版當成一個版面，這取決于具體的內容以及排版形式，所以圖片的排版也要分成這兩種情況來考慮。

1. 統一大小對齊排版

在一些作品集或產品畫冊中常用到此排法，視覺流程簡單、清晰。

2. 統一大小錯位排版

比對齊排版更有動感，且由于圖片不多，所以也不會顯得混亂。

3. 一大一小排版

這種排版對比鮮明、更有張弛，可以在一個跨版中使用，也可以是在某一 P 中使用。

還可以把其中的一張圖片去底，這么組合起來更靈活，對比更強烈。

如果把整個跨版當成一個版面，那么可以把大的那張圖進行跨版，小的那張圖則不跨版。

或者把大圖鋪滿一個 P，而小的圖片和文字則排在另一個 P。

這兩種排法都很大氣且不失細膩。

多圖排版

有時候一個版面內的圖片會有很多，這種版面排起來會更有難度，常用的排版方式有以下 8 種。

1. 大小統一對齊排版

這種排法比較整潔，但缺少變化，適合用于目錄頁或者產品和人物介紹。

2. 大小不統一對齊排版

這種排法會比前一種更靈活一點。適合利用網格工具來輔助排版。

這種排版雖然沒有統一圖片的大小，但由于保持了嚴格的對齊關系，所以依然顯得很整潔。

3. 圖片與色塊組合排版

圖片與色塊組合在一起排版既不會像只有圖片那么單調，還可以利用色塊排文字。不過注意色塊的顏色不要太多，且顏色最好來自圖片。

4. 錯位排版

即把相連兩張圖片刻意錯開，或者把圖片與文字的位置互換，這么做可以有效打破圖片完全對齊的單調，且由于有一定的規律，所以也不會對視覺流程造成太大影響。

5. 把圖片拼成特定的形狀

這種排法適合圖片比較多的情況，這么做可以避免圖片太多而顯得混亂，而且因為拼成的形狀要與設計需求相關，所以會顯得更有創意。

6. 按照某一路徑排版

這種排法跟前一種一樣，適合數量較多的同類圖片使用，可以避免圖片排得太過分散，如果不統一圖片的大小和方向，效果會比較活潑但不規范，適用于照片墻和兒童畫冊的排版。

如果統一圖片的大小和方向，或者使它們呈漸變式的變化，這些圖片還可以形成一定的節奏感，不僅不會亂，還很美觀。

7. 一大多小排版

如果在版面中分開排列大小差不多的多張圖片，那么該版面就會缺乏重點且沒有張力，而如果把其中一張圖片放大，與其他圖片形成鮮明的大小對比，就可以有效解決這一問題。

8. 自由排版

即大小不需要統一、圖片與圖片之間也不一定要嚴格對齊，效果比較靈活，設計感較強，常用于雜志排版中。

這種排法有兩點需要注意，一是圖片不要排的太分散；二是最好要有大小對比。

去底圖也很適合這么做，當然，在排版的時候也要有大小的區分，同時要注意圖片與圖片、圖片與文字之間的輪廓要形成互補。

結語

版面中的圖片數量有從一張到數十張不等，圖片的排版方式也非常多，所以我沒法一一列出，以上總結的 17 個技巧僅僅代表一些比較主流的方向，具體的變化還需要大家根據具體的內容和設計需求去做嘗試和突破，希望這篇文章能給你一點幫助。

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

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

解決問題的最佳方式可以是最大限度地降低問題的負面影響甚至將其消除，也可能是讓事物呈現出其應有的樣子，此外再無更好的選擇。就像 Facebook 的產品設計師 Ruthia He 提到的「Good design is both invisible and obvious」（好設計是無形也是顯而易見的）。真正的好設計能給到用戶的是用戶心中對它所期待的樣子，所以「設計」會符合常理到讓人無從察覺。其實這其中的每一個體驗流程、觸點安排抑或是設計細節，都是設計師們的精心策劃與用心。

為什么有時候在「朋友圈」發狀態，文字信息會被折疊？

自從「微信」發布 7.0 的新版本后，部分朋友圈信息會被折疊的問題受到了廣泛的討論。騰訊的公關總監張軍對此給出了官方解釋：當用戶在「微信」發表原創內容即直接輸入文字，信息會折疊較少，文字會得到較大面積的展示；而當用戶發布粘貼復制的內容時，文字只會顯示一行，其他信息將會被折疊。團隊做這樣的信息呈現設計是為了鼓勵用戶多發原創內容，提升朋友圈的整體使用體驗。

旅游達人都愛的Booking為什么這么好用？

從「Booking繽客」預定酒店住宿后，系統會自動下載訂單信息至本地。這樣，當用戶到達目的地時無論當地網絡狀況如何（哪怕出現因網絡原因無法正常訪問 App 的情況），仍可毫無壓力地隨時查看訂單詳情頁。畢竟作為一家定位于幫用戶在網絡上預訂世界各地住宿的國際化平臺，用戶身處異國地區需要查看住宿信息的使用場景很普遍。這個看似不起眼的小細節，卻從設計邏輯的層面優化提升了產品的易用性，讓產品真正貼近用戶真實的使用場景，變得更加好用。

B站是如何營造陪伴感，讓用戶看劇不孤單的？

Bilibili 網站的電腦端不僅會在主頁顯示在線總用戶人數，還會在每個視頻的播放頁面顯示當前正在觀看此視頻的人數。將原本后臺統計的數據顯性化呈現在用戶可見的頁面，一方面利用訪問數據吸引用戶的好奇心進行觀看，另一方面也會給予用戶陪伴感與歸屬感。當看到有這么多小伙伴與你同時在線觀看同一部影片，雖然看不見彼此，但心理上會有陪伴感。一個人在家看劇仿佛也沒那么孤單了。

如何保證用戶的操作行為，始終位于手部舒適區之內？

多數產品在設計頁面模態彈窗引導用戶操作行為時，都會將操作控件放在固定的頁面位置（一般居中或者處于頁面底部）。但「抖音」的設計卻讓人眼前一亮：系統會自動檢測用戶進行操作時手指與屏幕的接觸位置，并將模態彈窗的操控按鈕顯示在離用戶手指最近的地方。隨用戶手部活動區域變化而靈活變更位置的模態彈窗設計，使用戶在進行手勢交互的過程中，操作動作能始終在手部的舒適區域內進行，是應對大屏時代十分友好的體驗設計。

為了改善長文閱讀體驗，我們悄悄開發了這個小功能

不知道你有沒有發現「優設」的文章瀏覽頁面右下角隱藏有「文章目錄」的按鈕。將鼠標移到按鈕上可以看到文章目錄的小導航。小標題的羅列既清晰呈現了文章結構，幫助讀者迅速理解文章；又能起到快速定位文章內容的作用，一鍵直達想看的內容區域。閱讀篇幅較長的文章對于缺少耐心或講究效率的同學而言，無疑是痛苦的。有了這個「目錄」功能的設計，看長文時的舒適度與閱讀效率都加倍了。

天天聽「網易云音樂」的你，可能都沒發現這個小秘密

我們天天聽歌的「網易云音樂」，在有網與無網狀態下打開應用的跳轉頁面其實是不同的。因為對用戶而言，只有在有網絡尤其是無線網絡的場景里才會在線聽歌，當播放器處于無網狀態下能夠播放的只有本地音樂資源。所以設計團隊根據用戶具體的使用場景，設定用戶在有網狀態下打開 App 會進入「發現」的音樂首頁，而在無網情境里會直接跳轉「我的音樂」頁面。音樂首頁便于用戶發現音樂資訊與歌單推薦，在線聽歌；而「我的音樂」方便直接打開「本地音樂」列表，離線聽歌。區別化的頁面跳轉為用戶縮短了行為路徑，節省了操作步驟，讓使用體驗更貼合具體使用場景。

當你在「騰訊視頻」追劇播放進程被電話打斷…

在「騰訊視頻」看視頻如果遇到播放進程被其他任務打斷暫停的情況（比如接電話或者分享），當再次回到播放界面時當前視頻并不是接著剛剛的暫停處播放的，而是會從暫停處往前倒幾秒播放。這就如同我們追劇時會看到很多片頭都有回顧上一集劇情的道理。在這里，「騰訊視頻」是想讓用戶通過復習倒回的幾秒老畫面回憶起之前的劇情，接著看新畫面時就能更好地連接完整劇情，得到更加沉浸的觀看體驗了。同樣擁有這個貼心設計的還有「優酷視頻」。

「抖音」是怎樣利用一個按鈕的小心機，達到鼓勵用戶分享行為的目標的？

在「抖音」的內容推薦頁面刷視頻時，你會發現正常情況下頁面右側的「分享」按鈕顯示為代表分享含義的普通 icon。但如果你在當前頁面停留時間較久觀看該短視頻第三遍時，系統會預判用戶對此內容感興趣并有潛在分享意愿，此時右側的「分享」按鈕就會變成閃動的朋友圈或微信圖標了。差異化的圖標變化設計突出了「分享」功能，一方面是對用戶心理與動作的預判揣摩，另一方面也從潛意識里起到了鼓勵用戶分享行為的目的。做產品，想辦法驅動用戶分享行為真的很重要。

在社交產品發布狀態收到CEO的點贊，是種什么樣的心情？

玩「即刻」的同學應該都有發現，「即刻」CEO 瓦恁的賬號在社區內活躍得像高仿。時常更新自己的狀態分享生活日常以及常常點贊回復用戶的舉動，讓瓦總收獲了一批忠實粉絲。還有一個很有意思的互動是：所有用戶在「即刻」發表的第一條狀態都會被 CEO 瓦恁點贊，這對于新用戶而言會得到很大的驚喜和虛榮心上的小滿足吧。雖然新用戶第一條點贊應該是代碼小哥哥又調皮了，但 CEO 時不時地參與到用戶的互動中，確實是不錯的增加用戶粘性的方式。

「支付寶」收款碼的隱藏小心機

「支付寶」的收錢功能我們都很熟悉：打開自己的收款碼設置好金額，再拿給對方掃碼即為收錢。但你可能沒注意，當手機處于向下傾斜的角度給對方進行展示時，界面會自動旋轉二維碼的朝向并將按鈕置灰不可點擊。這里的二維碼旋轉設計是為了方便對方看即掃碼，而按鈕置灰則是防止用戶誤操作點擊到設置金額。從用戶日常行為出發，解決掃碼不便的麻煩，真是隱藏很深的小細節大體驗。

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

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

在這個看臉的時代，無論是真實社交，還是網絡社交，甚至虛擬形象社交，都是「顏值即正義」。長得好看是一大優勢，或者至少要滿足彼此的審美才有進一步發展的可能。當然要想真正地完成社交目的，還是要看個人的社交能力。在進行網絡社交時（興趣社交除外），可謂「無頭像，不社交」，畢竟跟陌生人搭訕的篩選成本太高，看頭像照片是最直接快速的方式。據說，有好事者在三里屯注冊了某一款陌生人社交軟件，并將頭像設置成了一個在盧浮宮的露背少女照片，在短短時間內，居然收到了 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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

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

2012年，Random International 的作品《雨屋》正式開啟了大眾對沉浸式體驗的認識，近年隨著 teamLab、Punchdrunk 等互動體驗展演的火爆，沉浸式新媒體設計不僅成為了炙手可熱的包裝概念，同時也透露出人們對于新型互動的好奇心與強需求。提起新媒體作品，我們通常會自動聯想到黑科技和腦洞，卻容易忽視這些作品除了具有前衛的藝術性表征，同時也暗含著嚴謹而延展的設計內核。

2019 年初夏，Mindpark 邀請了兩位數字媒體界的先鋒代表：Moment Factory與Studio Swine，和我們共同探討了沉浸式設計在商業性實踐與實驗性探索上的思路與價值。

透過數字篝火，人們重聚在一起

總部位于蒙特利爾的 Moment Factory 是一家專業打造沉浸式互動體驗設計的多媒體公司，以跨界和合作著稱的他們擁有一個超 350 人的龐大團隊。自千禧年成立以來，MF 已經成功打造了近 400 個場景設計商業項目，客戶包括微軟、索尼、NFL、麥當娜等，形式從立體光雕、數據互動到空間展覽、演唱會工程都樣樣精通，幾乎每個作品在面世時都顛覆了人們對驚艷的定義。

△ Demo Reel ©?Moment Factory

Moment Factory 的業務主要分為三大模塊：內容、互動與場景。植根于公眾場域創作的他們，善于根據場地的特點策劃和開發因地制宜的故事內容，繼而在聲光電的效果設計上加強環境與人之間的聯結，最后兩者結合形成互動閉環以構造出全局的沉浸式體驗。

△ ©?Moment Factory

Moment Factory 的工作流也基于這三大模塊多線程并行。與傳統行業不同的是，客戶對于 MF 而言并不是甲方爸爸，而是項目的共創者。他們會邀請客戶參與并確認每一個設計環節，一來可以增加客戶對項目的認知與信任度，二是考慮到多媒體物料制作成本較高，也預防階段性推翻對項目進程造成影響。

△ ©?Moment Factory

因地制宜的創造性內容

「Aura」是 Moment Factory 耗時超過一年，動用超過 100 人團隊制作的夢幻級沉浸式光雕作品。它集合了極其的視效投影技術及獨立打造的交響樂聲效，為蒙特利爾圣母大教堂打造了 40 分鐘震撼而靈動的超感官體驗。

△ AURA ©?Moment Factory

基于天主教堂自身「誕生-受難-升天-審判」的故事脈絡，AURA 的設計概念以 the Path of Light（光明之路）為主線，并根據建筑動線分為 the Birth of Light（光的誕生）， the Obstacles（苦路），the Open Sky（升天）三個章節。

△ ©?Moment Factory

在確定故事線與情緒板同時，考慮到教堂內部結構的復雜性及壁畫的還原準確性，團隊使用 3D 掃描重塑建筑模型，并進行了大量的動效推演及真實光影測試，最終利用自研的工業投影體系，讓建筑實體與投影內容的結合達到型與神的高度統一。

△ Behind the Scenes ©?Moment Factory

在細節的雕刻上，作品對主殿圣像的層級結構進行分解，營造出空間錯位的效果。另外也對苦路長廊的畫像進行精準投影，以光的擴散作為線索，一步一步引導觀眾的視線，展開故事敘述。

△ Behind the Scenes©?Moment Factory

無論是故事設定還是效果設計，Aura 都根據教堂題材順勢而為，在不破壞建筑原有氣質的前提下，放大環境硬件中的可用元素，從而達到「概念-動線-效果」的全方位合一。視覺互動的起承轉合不但將觀眾的沉浸式體驗最大化，同時也升華了圣母大教堂的神性與歷史精神。

環境與人的聯結

LAX 項目是 Moment Factory 在 2013 年為洛杉磯機場打造，以時間旅行為主題的商業項目。它既是全美最大的機場多媒體環境設計項目，也是品牌體驗拓展的空間實驗。

雖然洛杉磯機場整體以「時間旅行」作為品牌主題，但出發者和到達者的動線終歸不同：除了機場主體以外，旅客的體驗還涉及到另外兩個環境——旅行目的地和洛杉磯。因此，本項目根據不同的觸點（登機口與到達大廳）針對性地設計了不同互動內容，讓出發者與到達者都能找到與環境的聯結和延伸，使整個機場體驗形成通路。

Moment Factory 為登機口都設計了實時更新的互動墻，不但能捕捉行人的動態并融入畫面，更能實時切換目的地的本土特色內容作為動畫元素，使準備出發的游客身未動而心先遠。

△ THE PORTALS ©?Moment Factory

與登機口不同的是，到達大廳的巨幕內容則根據機場的建筑結構設計，以跳水、跳躍等蒙太奇片段營造出洛杉磯愜意、清爽、驚喜的城市品牌形象；系列影片也同時在長廊和行李大廳中展映，以保持品牌語意的一致性與連續性。

△ WELCOME WALL©?Moment Factory

在機場中央，MF 團隊還打造了一個呼應主題的重點裝置——時間鐘樓。除了播放實時更新的故事短片外，設計師考慮到屏幕過于虛擬和冷感，故以機械咕咕鐘為靈感，讓鐘樓和環繞屏幕在準點切換真人報時舞蹈，既達到提醒旅客時間的作用，也讓他們在候機的空隙獲得環抱式的娛樂化體驗。

△ TIME TOWER ©?Moment Factory

從手稿到成型，LAX 項目歷時 16 個月，在三個大洲拍攝了超過 4 小時的視頻內容。而且因為機場常年不能關閉，也極大增加了項目的施工與調試難度。

△ ©?Moment Factory

《通用設計法則》中曾提到，「沉浸」即是讓人專注于當前環境，并在設計者提供的目標情境中進行互動而獲得愉悅，從而忘記真實環境的存在。Moment Factory 十分善于提取及串聯實體環境與觀眾之間的觸點，利用不同的互動技術對每一個觸點進行感官的復合強化，并以完整的敘事結構對品牌進行包裝，才屢屢在 Lumina、Kontinuum 等系列作品中打造出連貫又有趣的體驗心流。

對互聯網產品設計而言，我們能調用的觸點也許僅有區區一屏，但用戶在獲取虛擬體驗時的沉浸式感知卻和實境式體驗是相似的，因此設計師也可以參考以下幾點：

• 利用五感塑造場景：不僅從視覺層雕琢，更要調動觸覺（設備震動、阻尼感）、聽覺（聲效、音樂、聲場）等感官以模擬真實世界中的物理反應，打破虛擬環境和實境的時差和次元壁。
• 減少環境干擾項：收起不必要操作，最大化界面視野，讓用戶盡可能全程聚焦在目標場景。
• 強化敘事性引導：利用開屏動畫、轉場動效、角色故事等元素增加場景代入感并進行自然過渡。
• 即時性反饋：給予用戶簡單而反饋感強的任務，以延續他們對互動的把控感和積極性，從而增加用戶在環境中逗留的時間和意愿。

We do it in the public. We bring people together.

過去，由于娛樂產品的復制成本較高，人們大都以群體形式到電影院或劇院里進行活動，因此促進了社交互動與環境共融。但隨著媒介的升級，娛樂不僅從大眾走向個人，同時也將個人和群體進行隔離，使個人和社群、環境之間的互通性越來越弱。Moment Factory 堅持在公共場域中探索新型的體驗形式，正是因為他們堅信娛樂活動雖然可以由個人進行，但沉浸式的情感體驗仍舊需要透過真實環境下的社交互動來完成。利用數字篝火為體驗設計融合升溫，才能讓人們真正地共聚與共享真實的情感和生活。

用轉瞬即逝創造世界

如果說 Moment Factory 利用新媒體在環境創意、娛樂性與商業價值之中找到了發展的平衡，Studio Swine 則是利用新媒體設計的實驗性為人們開辟了觀察世界的全新角度。

Studio Swine 中的「SWINE」全稱是 Super Wide Interdisciplinary New Explorers，意味著無限跨界與探索主義。它由新派英國藝術家 Alexander Groves 及日本建筑師 Azusa Murakami 于 2011年創立，作品領域涵蓋思辨設計、裝置藝術、電影、雕塑等。他們的創作以獨特的世界觀、空間感及美學體系征服了世界各大頂尖藝術展覽，倫敦V&A博物館、巴黎蓬皮杜藝術中心與威尼斯雙年展等都曾邀請他們展出。

△ ©?Studio Swine

在西方，越來越多像 Studio Swine 這種設計師團隊選擇以跨界的形式進行研究及創作，他們也不再拘泥于設計與藝術之間的所謂界限，逐漸衍生出了新的設計流派與理論。傳統行業的設計焦點往往會落在商業策略與 Design Thinking 上，而新形態的設計則更多地向批判性與未來性上傾斜。

△ An Unresolved Mapping of Speculative Design ©?Elliott P Montgomery | EPMID.COM

2013 年前后，英國設計師 Anthony Dunne 和 Fiona Raby 提出了 Speculative Design（思辨性設計）來概括此類在藝術與設計之間的交疊學科。對比起傳統設計基于現有場景來解決現有問題，思辨性設計旨在擴充場景的可能性，以引導人們想象和思考未來社會生活、生產的狀態或矛盾。Speculative Design 以設計作為跨領域的思維實驗及方法，不僅突破了媒介、工藝的疆域，選題上也常常挑戰甚至跳脫社會倫理、文化定式、現世哲學的桎梏，而這種敢為人先的創作理念也是此類作品爭議性的源頭。

△ Redrawn from Speculative Design Practice ©? Ivica Mitrovi? | Speculative.hr

NEW SPRING

New Spring 是 Studio Swine 與 COS 合作的裝置互動項目，作品以意大利建筑的拱廊結構及櫻花樹在四季中的形態為意象設計，并將氣泡比喻花的綻放與凋亡，旨在討論時間與物質的瞬息性。在創作伊始，設計師提出了一個假設場景：在未來，物質將越來越多，而空間越來越少，植物與園林可能朝著機械化、人工化的方向發展，那么我們要怎么去模擬四季變化下生物從生到滅的過程呢？

△ COS x NEW SPRING ©?Studio Swine

為了全感官地營造未來園林的場景感與沉浸感，除了櫻花樹的意境外，Studio Swine 更與化學家合作，研制出帶有混合香味且不會立即爆破的氣泡，為互動者帶來意料之外的觸感體驗。在聽覺上，編曲家 Gavin Singleton 也特意為展覽場景打造了專屬的音樂EP。

△ ©?Studio Swine

2018年，Swine Swine 再度利用氣泡作為原型，以世界上最小且最古老的生物之一——藍細菌的光合供氧為主題，制作了高達 9 米的大型環境裝置 Infinity Blue 來模擬地球大氣層的歷史，禮贊藍細菌賜予了地球第一口呼吸。雕塑中內嵌 32 個旋渦氣孔不斷噴發出圈裝煙霧，用以比喻光合作用生產氧氣的過程。

△ Infinity Blue ©?Studio Swine

HAIR HIGHWAY

和場景設計不同，影片同樣也是另一種常見的沉浸式表現手法。近幾年越來越多的新媒體作品采用紀錄電影、開放式互動短劇、VR 短片等形式對作品進行呈現：一是影片能突破作品篇幅，更全貌地介紹項目背后的概念與調研故事；二來基于自媒體環境的蓬勃，作品能以較低的復制成本獲得更高的傳播度；三則是影片天然的敘事結構能快速激活觀眾的代入感。

Hair Highway（絲綢之路）是以紀錄片與家具設計復合呈現的極富爭議性的新媒體實驗。Studio Swine 意識到在自然資源逐漸減少的情況下，人類毛發作為一種代謝物質，也許可以成為新型的可再生資源?；谶@個洞察，他們嘗試以頭發作為原料去創造一種近似木料的全新媒材，以挑戰現有的美學標準和詮釋物質的可能性。

△ Hair Highway ©?Studio Swine

亞洲人頭發的生長速度是熱帶硬木的 16 倍，而中國作為熱帶硬木最大的進口國也是人類毛發最大的出口國，因此也被他們選為了項目的起源地。兩人在創作過程中不僅探訪了 9 個位于山東的假發工廠，更拍攝大量假發制作的工序與買賣流程作為紀錄片的生態調研資料。

△ ©?Studio Swine

Hair Highway 以絲綢為概念，用樹脂封印毛發制作出一種模擬琥珀、玳瑁紋理的板材，并糅合清代及上海 20 年代裝飾主義的紋理設計與西方抽象幾何的輪廓特征，創造出了一套極具古典神韻的系列家飾。

△ ©?Studio Swine

不破不立，Studio Swine 的作品始終緊扣著三個思辨性的特征：探索時間性、想象未來社會的形態、創造新型的物質組合，以新銳的角度挑動人們的思維的底線，而量產和商業化卻從不是他們眼中的第一要義?；蛟S怪誕，或許不安，但設計在他們的哲學里只是一條探索世界的未竟之路，而不是一個實用主義誕下的結果。

新媒體的特點之一，就是他基于時間的藝術形式。新媒體的表現很多都是時間累積的縮影，每一幀，每一個圖層，每一個數據庫的建立，以及觀眾在與之互動的時候也同時在進行一個時間的旅行。我希望互動是更加內隱和內省的，而不是僅僅基于科技的娛樂程度。——著名新媒體策展人 Richard Castelli

從對娛樂效果喜聞樂見，對創作理念心悅誠服，再到如今被作品激活出新的靈感、批判或討論，受眾與作品之間的互動升維或許才是創作者最樂意觀望的局面。沉浸式新媒體設計為人們提供了孵化情感和思想的超感官空間，而互動場域中的人才是成就作品的最終環節。

真正的沉浸是思維的沉浸，環境的營造只是想象力的引路人。

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

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

這篇文章我們來談談移動端和PC端交互設計上的區別。

經常遇到一些設計師，他們之前負責的都是pc端產品，突然改做移動端，會不自覺的把pc端的一些設計理念“移植”到移動端，出現了水土不服。有經驗的設計師一看你設計的移動端頁面就知道你之前做的都是pc端，這是一件非常尷尬的事情。就好像你說了一句“nice to meet you”，別人就知道你老家是哪里一樣。那么移動端和pc端交互設計上的區別究竟在哪呢？

大屏到小屏

開門見山，移動端和pc端最根本的區別就是屏幕的大小。屏幕的大小直接決定了界面信息量，pc端一個頁面可以展示完全的信息可能需要移動端好幾個頁面來承載。

可能有的設計師覺得，屏幕尺寸不一樣做自適應不就行了，移動端頁面做長一點，讓用戶滑動就可以了。這是一個非常簡單的處理方案，但是忽略了一個重要前提：用戶愿不愿意滑動？根據埋點數據顯示，多數移動端頁面超過一屏的內容的曝光與點擊量會急劇下滑，說明用戶很少主動滑動去查看一屏以外的內容。對于移動端產品來說，一些重要的內容必須保證用戶在一屏內可以看到。

1）信息架構重構

因此，如果你要為一個pc端網站做一個移動端app，首先要做的就是信息架構的重構。pc端有足夠的空間可以把所有的功能直接展示給用戶，而移動端只能展示一些主要的功能，一些次要的功能需要放在下一層級。

例如，appstore中用戶是可以評價這條評論對自己是否有幫助的。PC端的處理方式很簡單，直接展示給用戶。而移動端是需要用戶長按這條評論才可以彈出評價列表的，可能很多用戶今天看了這篇文章才發現原來還有這個功能。沒關系，之前雖然不知道，但是并沒有影響你正常使用啊。對次要功能進行適當的降低信息層級是移動端設計師必須要考慮的。

2）一個頁面，一個任務

對于上面信息架構重構的觀點可能會有人存在異議，對于一些表單類頁面來說，例如用戶要借錢、轉賬，有些信息是用戶必須要填的。在這些場景中，我們不擔心用戶不滑動，因為用戶不滑動就無法完成操作。那么在這種情況下，是否可以繼續延續pc端的布局樣式？

以上面的轉賬流程為例，pc端是直接在一個頁面展示，而移動端是分成了兩個頁面。為什么這樣？把備注/付款說明也放在第一個頁面不行嗎？

因為移動端用戶使用環境更加的復雜多變，更容易受到干擾，所以必須保證界面信息的簡單直觀。如果在一個頁面中展示過多的信息量，容易讓用戶混亂。這里所說信息量并不是指絕對信息量，更準確的說法應該是用戶主觀感受上的信息量。同樣的幾個輸入框，可能在pc端只占了頁面的1/4，而移動端占了一整個頁面，給用戶的感觀是完全不一樣的。頁面塞的滿滿當當，容易讓用戶焦慮。

一個頁面可以完成的任務現在要跳轉好幾個頁面，增加了操作步驟。用戶害怕“內容多”，難道不害怕“步驟多”嗎？不害怕，因為頁面內容量是用戶一眼就可以看出來的，用戶無法立刻感知這個任務有多少步驟。因為無知，所以無畏。等到用戶知道這個任務步驟數的時候，整個任務都已經完成了。

借唄的這次改版，用戶要借錢必須先輸入借款金額，其余的借款期限、還款方式和利息等信息才會展示給用戶。這些信息都是跟用戶借款金額相關的，用戶沒有輸入借款金額，這些信息展示給用戶意義也不大，不如隱藏，讓用戶的注意力聚焦于完成輸入借款金額。

沒有一個放之四海而皆準的設計原則，所有的設計理論都不能罔顧實際的應用場景而機械的套用。如果前后步驟關聯性比較強，我建議不要分頁展示。例如，目前很多的短信驗證碼都選擇把“輸入手機號”和“輸入短信驗證碼”放到兩個頁面，我個人對此持保留意見。設想一個場景，如果用戶遲遲沒有收到短信驗證碼，那么他需要確定是手機號輸錯了、網絡故障還是其他什么原因。用戶需要返回到上一個頁面查看，如果手機號和短信驗證碼放在同一個頁面就簡單多了。

3）突出重要信息

前面我們提到的主要是控制移動端頁面的信息量。頁面信息量少就可以了？當然不是，我們來看一下火車換乘的場景，如果你要從南京去新疆阿克蘇，沒有直達的車次，只能從西安換乘。我們來看看下面兩款產品的處理方式，左邊是12306，右邊是飛豬。12306還是一股pc端風格迎面撲來，問題出現在哪？12306跟飛豬展示信息量差不多，唯一的區別在于12306展示了兩趟車次各自的起止時間，而飛豬只告訴用戶整趟旅程的起止時間。

顯然問題不是出現在信息量上，而是對信息的展示形式上。用戶更關注的信息，應該讓用戶更容易發現。對于一趟車次來說，用戶更加關注出發/到達站、出發/到達時間和票價。對飛豬界面進行高斯模糊處理，發現用戶的視覺焦點正好落在這些重點信息上。

12306所有的信息都屬于同一層級，讓人抓不到主次。而且界面中出現了過多的配色，更增加用戶的信息獲取成本。

鼠標到手指

pc端用戶與界面進行交互靠的是鼠標，移動端用戶靠的是手指。鼠標的操作更加精準，因此移動端界面中元素的尺寸和間距比pc端的大。以下圖為例，左邊是pc端，右邊是移動端。移動端的輸入框沿用的還是pc端樣式，而且關于利率和手續費的詳情icon過小，用戶的手指點擊的時候容易誤操作。

給你的界面做減法

前面我們主要強調了移動端產品要盡量減少界面中信息量?？刹豢梢栽诓桓淖儺a品信息架構的前提下，通過交互設計上的改動來完成目標呢？我給大家介紹兩個方法：場景化和關聯化。

1）場景化

在一個頁面中，雖然內容很多，但是用戶真正感興趣并且會與之交互的內容很少。如果我們可以獲知用戶在特定的場景下對于某個內容訴求很高，那么我們突出展示；反之如果訴求很低的話，我們可以隱藏。

舉一個之前說過的例子，知乎中，用戶在搜索結果頁滑動大概3屏后，會出現“向知友提問”按鈕。因為用戶滑動了3屏，說明用戶可能對當前的搜索結果不滿意，這時引導用戶去提問，用戶的意愿更高。如果我們全程展示這個去提問按鈕，反而會減少用戶的實際瀏覽區域，造成干擾。

上面主要提到了，同一個流程，需要根據用戶不同的使用場景提供不同的功能。其實即使是同一個功能，我們也要根據用戶不同的使用場景選擇不同的展示形式。

還是知乎，為了方便用戶可以快速的查看下一個回答，給用戶提供了一個浮動按鈕。但是這個浮動按鈕，當用戶開始滑動頁面時候就會改變樣式。這個很容易理解，當用戶剛進入這個頁面，為了降低用戶的學習成本，我們需要直接告訴用戶這個按鈕是干什么的。當用戶開始滑動進入閱讀答案的狀態，縮小按鈕的形態避免對界面信息造成遮擋。

2）關聯化

我們需要梳理信息之間的關聯性，將相互關聯的信息整合在一起，進而減少頁面中信息量。支付寶賬單的月份篩選功能，對入口進行了修改。之前用戶需要點擊日歷圖標，現在用戶直接點擊月份就可以了。用戶要篩選的就是月份，那么直接把月份作為入口更加合適。

總結

以上就是我對移動端和pc端交互設計上區別的簡單分析和總結，如果你有不同的建議和看法歡迎留言討論。

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

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

來源：UI中國

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

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

項目概述

QQ 20周年，是互聯網產品長青的一個傳說，就在 20 周年的時間節點，QQ 向用戶提供一份關于他自己的、真誠熱切的 QQ 數據總結。通過數字，匯集出每個人自己的 QQ 時光歷程，從而牽引出每個人對于成長、青春、溝通、時代流動的感知與回憶，引發 2019 年一場集體的情感共鳴。

△ QQ 20年來的一路變遷

項目流程

項目歷時兩個月，從項目初期，視覺和產品密集溝通，了解需求，進行頭腦風暴，輸出多個視覺方案縱向對比，最后確定視覺風格，分配視覺工作（插畫，動畫，3D）。項目后期，包括開發還原，數據調配等眾多環節，環環相扣，缺一不可，一路過關斬將，整個 H5 需要不同崗位的高度配合和各專業的高度默契。

△ H5的項目流程圖

項目難點

1. 異地合作

本次 H5 聯動了動效，3D，插畫設計師的共同合作，由于支持 3D 的設計師在韓辦公，所以大部分都是在線上全英溝通，包括前期的項目進度同步，還有后期的模型調整等環節都能及時反饋，快速反應，最后如期打磨出五款 spaceQQ。算是一次順利的異地合作。

△ 五款3D spaceQQ最終效果

2. 3D spaceQQ視覺還原

3D 鵝從設計軟件轉化為 H5 展示過程中，存在模型文件過大、材質缺失等問題，直接影響用戶體驗。在開發的過程中同學通過模型減面、重新選擇材質，還有模型拆分等解決方法，在視覺觀感和性能中建立了平衡的杠桿，最終實現了 15 個 SPACE QQ 的視覺還原。

△ 五款3D spaceQQ最終視覺還原效果

3. 視覺工作的同步進行

由于項目時間比較緊迫，而且 H5 加入了 3D 模型，還有需要大量的動效，所以需要在同一時間線上，同步進行，視覺稿輸出，動畫制作和 3D 模型打磨。考驗設計師的溝通和執行能力。與此同時，需要隨時和開發同步動畫 demo 以確保動畫可實現。和產品密集溝通，及時根據文案調整畫面。

設計理念

因為 QQ 是陪伴了大多數用戶的一個產品，見證了整個互聯網社交的演變過程，容易引起用戶的情感共鳴。設計的初期，圍繞「個人軌跡」的主題發散了不同方向的視覺概念，在引起客戶共鳴感的復古元素和傳遞不斷「探索」未來的概念間尋找平衡點。最后沿用了 20 周年的太空概念貼合「探索」的主題，結合有年代特征的代表性視覺符號來引起「個人軌跡」的這一概念的用戶情感共鳴。另外，H5 運用了 3D 打造了 15 只太空鵝，打造「個人軌跡」的專屬感，既聯動用戶溫暖的回憶之余，也增添了一些小驚喜。

概念設計

1. H5整體視覺風格

QQ，是陪伴了大多數人成長的一個互聯網產品，其本身帶有很多高辨識度的視覺元素，例如對話框，提醒上線的音效等。因為 H5 本身是一個大數據總結，專屬感非常強的一個產物，所以希望是喚醒用戶一些封塵已久的記憶，就像打開時間膠囊般的期待和感動。同時也象征著 QQ 一直陪伴在身邊，從而引起用戶的共鳴。

設計方面，除了通過一些標志性的視覺元素喚醒用戶的回憶之外，也加入 QQ 20周年的太空「探索」主題的元素，響應 20 周年的主題之余，也寓意 QQ 不斷地對外探索，從多個維度來看世界，尋找有趣的內容。

對話框，是承載數據的視覺符號，也是貫穿整個 H5 的重要視覺符號之一。寓意著 QQ 一直致力于「溝通」，而且不同時代的 QQ 對話框都各有特點，也是見證 QQ 時代變遷的重要元素，所以提取了三個階段代表性的對話框樣式來承載數據，并且加入有時代特征的視覺元素（如bb機，像素化的小箭頭等）作為輔助，增加 H5 的氛圍感，也算是視覺上的「小彩蛋」。

△ QQ原始對話框

H5 加入一些趣味感的元素，如笑臉，愛心等元素，背景輔以流動的彩色不規則圖案，來增加對話框的玩味。也寓意 QQ 20年來給用戶帶來源源不斷的樂趣，留下了不可取代的時代印記。

△ 重繪對話框

H5 中也加入了很多好玩的元素，不同時代所用的移動設備，融合貼近太空「探索」主題的背景；利用帶手套的手和不同的元素進行互動；增加重繪經典頭像的互動動畫，加入 QQ 空間的植物等懷舊元素，增加 H5 的可玩性和驚喜感。

△ 經典頭像的重繪

△ 經典頭像穿插在H5中的小彩蛋

△ 帶手套的手和有時代標簽的元素互動

動畫設計

1. 視覺動態化方案

在動畫制作前期會出一份詳細的動態化分頁策劃，以及一份盡可能表達完整的動畫 demo，能便于設計與開發能準確的估算出制作周期。在開發完成預研測試后，基于動畫 demo 共同制定一個大致的動態化方案──對話框等大面積使用代碼實現，其他裝飾性小元素全部使用序列幀。在觀眾每滑一頁即可觸發當前頁的動畫，且能保證大體動畫的流暢度。

2. 動畫制作

為了盡可能減少 H5 的運算體積，又保證畫面動態的流暢程度，導出的序列必須滿足以下所有條件：

• 全部元素可循環
• 盡可能少的幀數
• 可重復使用的素材

△ 設計了4個不同的色塊流動loop，方便開發安插在每頁合適的位置

3. 導出與同步

在配合開發導出的階段，為了能明確序列的標記，所有序列文件命名為 xx-in/xx-loop/xx-out。使用同步工具以實現 AE 動畫序列導出和開發提取素材能同步進行，并保持實時更新和迭代。

△ 第6頁動畫導出序列

太空QQ形象設定

創建了四款全新的 spaceQQ，根據用戶的 QQ 年齡而設計。根據用戶的 QQ 年齡，分了四個款式的鵝：奢華，智能，閃亮和神秘四個概念，一個遞進的尊貴程度，刺激用戶分享欲。包括基礎款的 QQ 在內，共創造了 5 個類型的 spaceQQ。每個設計都基于基本 spaceQQ 的形式，但是套裝的顏色和細節根據各自的概念各有特色。

△ spaceQQ總覽圖

配色方案

用戶可以根據自己的喜好更改這 5 款 spaceQQ 的裝扮顏色。

關于運營

1. 專屬感

整個 H5 始終緊扣 QQ 20周年的太空「探索」主題，整個 H5，除了用數據喚醒用戶和 QQ 多年的點點滴滴之外，5 個 spaceQQ 概念設定，既能增加用戶的新鮮感，又能刺激用戶的分享欲，C4D 建立的 3D 形象豐富了整個 H5 的視覺層次，深化了 QQ 品牌的影響力，寓意鵝廠一直與時俱進，緊貼潮流。

2. 情緒調動

對于當下的運營活動來說，趣味性是引爆轉發量的重要元素，H5 結合 QQ 用戶創作的背景音樂和能夠調動用戶情感的設計語言來釋放用戶的情緒，比如驚喜感（用戶結合 QQ 的標志性音效創作的背景音樂），榮譽感（不同 Q 齡獲取相應的 spaceQQ）等，讓用戶產生持續的驚喜感，在懷舊和新鮮感中得到滿足，提升用戶活躍性。

總結

QQ 20周年 H5 設計，嘗試結合了 3D，動畫，插畫等設計形態，為每一位用戶打造專屬的「個人軌跡」，通過數字，拼湊出和 QQ 的過往朝夕，引起用戶共鳴。鵝廠不斷創新探索的同時，也為用戶溫存屬于用戶自己的專屬回憶，深化 QQ 的品牌價值。

福利

考慮到部分同學想更仔細地查看、保存或收藏高清大圖的需求，我們設置了關鍵詞，微信公眾號后臺以「spaceQQ+序號」的方式回復，例如「spaceQQ1」，即可逐一獲取對應的高清頭像和壁紙。

掃碼領取專屬「個人軌跡」：

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