概念簡述 

視覺品牌這一概念，既陌生又熟悉。大部分ui設(shè)計師都或多或少做過視覺改版或者風(fēng)格升級，先來看兩個概念：視覺風(fēng)格&視覺品牌。

▲視覺風(fēng)格&視覺品牌重點偏向

風(fēng)格是藝術(shù)概念，是在整體上呈現(xiàn)的有代表性的一種面貌。風(fēng)格能反映時代、思想、審美等特性。也是設(shè)計師對審美獨特鮮明的理解。那么視覺品牌呢？它除了要體現(xiàn)產(chǎn)品本身特性，融入產(chǎn)品希望傳達的感受，也要思考什么對用戶有意義。研究視覺品牌，就是探索如何通過設(shè)計維護用戶對于產(chǎn)品的好感度 ，通過有共鳴的設(shè)計傳遞正能量，讓產(chǎn)品獲得最大的認(rèn)同。簡單來說：視覺風(fēng)格重點是設(shè)計師對審美的傳達；視覺品牌則是通過挖掘產(chǎn)品有價值的特點，創(chuàng)造有共鳴的視覺去打動用戶，助力產(chǎn)品。

▲視覺品牌作用

了解完視覺品牌的概念，我們簡單聊下它的作用。視覺品牌最大作用是建立用戶和產(chǎn)品的關(guān)系。vivo互聯(lián)網(wǎng)單個產(chǎn)品的視覺品牌也受vivo母品牌影響，不同業(yè)務(wù)被滲透的程度不同。比如vivo品牌對vivo官網(wǎng)，vivo商城影響比較大，但是對瀏覽器，i視頻，短視頻的影響就比較小。

流程

那么，如何定義好產(chǎn)品的視覺品牌？借企業(yè)文化里的一句話：做正確的事，并把事情做正確。在設(shè)計工作中，這句話也有一定的指導(dǎo)意義，我們先要確定是否要做視覺品牌，再用合理的流程規(guī)劃好每一步。

結(jié)合過往的業(yè)務(wù)經(jīng)驗來看，對于已有視覺風(fēng)格的產(chǎn)品來說，需要滿足以下兩個情況之一才是最適合做視覺品牌工作的時候：1、產(chǎn)品轉(zhuǎn)型、重大業(yè)務(wù)調(diào)整（包括用戶人群、需求變化等）；2、與相關(guān)行業(yè)設(shè)計語言水準(zhǔn)差距巨大。另外需要考慮的還有時間安排，由于整個流程耗時需要大約12周（3個月），所以設(shè)計師前期就要做好時間規(guī)劃。

確定要做視覺品牌工作后，需要準(zhǔn)備哪些資料？項目環(huán)節(jié)和流程如何？讓我們來看下這12周需要做的事情和基本順序：

▲視覺品牌的流程

我們接下來會重點介紹流程中關(guān)鍵的8個步驟（圖標(biāo)標(biāo)藍(lán)色的step1～8）：1、品牌定位資料熟悉 2、明確視覺品牌關(guān)鍵詞 3、關(guān)鍵詞發(fā)散和可視化 4、提取元素建立視覺符號 5、完善主要頁面 6、驗證視覺風(fēng)格喜好 7、完成所有頁面的視覺效果 8、整理成視覺品牌規(guī)范手冊。

1 、品牌定位資料熟悉

大部分項目的產(chǎn)品，運營和用研角色會提前做一些品牌定位的工作（品牌屋），品牌屋有助于我們對產(chǎn)品各方面進行解讀。這類資料一般我們都可以獲得，設(shè)計師可以從中了解到目前我們產(chǎn)品全面信息，包括：產(chǎn)品形象、調(diào)性、核心價值觀等。我們需要的關(guān)鍵信息：產(chǎn)品關(guān)鍵詞就可以從中找到。如果品牌屋資料不夠明確或者設(shè)計師對確定的詞匯抱有疑問，我們還可以通過工作坊形式，邀請項目核心成員進行腦暴會議，討論出合適的詞語。

▲案例：vivo瀏覽器品牌屋

圖中為瀏覽器品牌屋資料案例，經(jīng)過項目成員討論，瀏覽器產(chǎn)品最終關(guān)鍵詞：智慧、有趣、默契、可靠、年輕。

2、 明確視覺品牌關(guān)鍵詞

然后，從產(chǎn)品關(guān)鍵詞里，我們需要選出符合產(chǎn)品定位又能達到受眾心理預(yù)期的視覺品牌關(guān)鍵詞，聚焦產(chǎn)品的視覺調(diào)性。視覺關(guān)鍵詞一般有2～5個，需要視覺專業(yè)團隊、項目相關(guān)人員、核心用戶一起來挑選，用戶的選擇可以放在問卷里進行，通過快速測試了解用戶對產(chǎn)品的視覺感受和期待。如果確定的視覺品牌關(guān)鍵詞比較多，可以適當(dāng)確立1～2個核心視覺詞匯，便于聚焦后期的風(fēng)格指導(dǎo)。

▲明確視覺品牌關(guān)鍵詞

選擇標(biāo)準(zhǔn)有兩條：1、延展性高，有一定視覺可視化潛力：詞匯要抽象化，不能過于具體，一般都是描述情緒，氣氛，氛圍或者感受之類的。2、貼合公司品牌文化：追求樂趣、充滿活力、專業(yè)音質(zhì)、極致影像、愉悅體驗、敢于追求極致、持續(xù)創(chuàng)造驚喜。

3、 關(guān)鍵詞發(fā)散和可視化

發(fā)散

視覺品牌關(guān)鍵詞選定后，在繪制可視化的情緒版之前，還差一步，就是針對選出來的詞進行發(fā)散。做這一步的目的是希望設(shè)計師的思維能夠盡可能打開，收獲更大范圍的靈感和思考。我們通過三層映射方式，分別對2~5個視覺品牌關(guān)鍵詞進行發(fā)散收獲大量衍生詞。（圖中以詞語“友好”為案例，分別進行物化、心境、視覺映射出大量衍生詞語。）

▲三層映射案例：詞語友好

在大量衍生詞里，我們還要經(jīng)過一輪討論篩選，去掉不合適的詞語。主要看衍生詞和我們的視覺關(guān)鍵詞的關(guān)聯(lián)度是否足夠高，以及是否適合用視覺語言表達等。

如果項目沒有做品牌相關(guān)的工作，沒有產(chǎn)品關(guān)鍵詞，那我們前3步驟怎么辦？遇到這種情況，我們要怎么深入下去？當(dāng)然，你可以嘗試推進項目去做一下品牌屋，這對各個角色在產(chǎn)品認(rèn)知上有很大的幫助。其實還有一個工具方法能夠幫助我們較好的完成各類關(guān)鍵詞提取。(Design O to O 主要是察覺用戶情感化的一個工具，工具里得出該類別情感相關(guān)詞匯和我們想要得出的視覺品牌關(guān)鍵詞概念非常接近，所以推薦作為遇到這類情況的解決方法。)

▲Design OtoO方法 

這套工具方法的核心步驟分別是：收集，組織，反應(yīng)，評估。每一步都有一些工具模型可以套用，能夠較準(zhǔn)的幫助大家達到目標(biāo)，找出合適的關(guān)鍵詞。

可視化

前面我們得出篩選后的衍生詞，是為了之后可以做出更全面、精準(zhǔn)的可視化情緒版。很多設(shè)計師在情緒版制作上比較隨意，這里也給大家一些我們團隊常用來搭建情緒版的方式。一般我們將收集的圖片依照3個維度（人物、場景、物體）進行歸納整理，這樣共性的東西更容易被發(fā)現(xiàn)。當(dāng)然，拼貼整理的方式很多種，也包括常見的任意拼貼、參考式拼貼和精致化拼貼。大家可以多試一些平時不怎么用的維度進行拼接，也許會帶來不一樣的靈感。

▲情緒板拼貼常用方法

4、 提取元素建立視覺符號

每個情緒版帶來的設(shè)計靈感都不相同，所以最終會有多個視覺符號方案。第四個step就是來解說如何從單個的情緒版里提取視覺符號的特征。

▲組成視覺語言最基本的五個維度

“形色字構(gòu)質(zhì)”是組成視覺語言最基本的五個維度，當(dāng)你描繪一個東西的樣子時，你通常會從這五個維度去闡述。所以，我們也從5個維度來提取視覺符號的特征。需要注意：五個維度不一定需要全部進行提煉，有時候遇到前期已經(jīng)確定的就可以直接拿來用，也有的不涉及的，比如字體可能在部分圖標(biāo)里沒有出現(xiàn)也就不需要提煉。讓我們來對色彩、圖形、字體、質(zhì)感、構(gòu)成這5個維度來細(xì)細(xì)展開：

(1) 色彩

▲快捷工具Dopelycolor對圖片進行色彩分析

色彩提取常規(guī)是可以從情緒版里找出的，最簡單的辦法就是找出占比高的色彩并判斷選擇。這里分享一個快捷工具Dopelycolor ，能快速讓你提取圖片中顏色，以及占比，讓你清晰的了解圖片用色情況。

▲提煉色彩需要重要關(guān)注4點

需要注意的有以下幾點：1、已有的品牌色是否要延續(xù)使用 2、選中顏色需要后期調(diào)整三元素，達到最好的視覺效果  3、如果有輔色，主輔色多結(jié)合色環(huán)考慮合理性 4、你選的顏色是不是和市面競品太過雷同，是否要做點差異化？

(2) 圖形

對于我們大多數(shù)產(chǎn)品目前現(xiàn)狀，符號基礎(chǔ)圖形是不宜變動的。大環(huán)境也是如此，例如很大一部分視頻類應(yīng)用圖標(biāo)都圍繞播放三角展開。因為變化會引起用戶新的理解，可能會帶來識別和理解的成本，所以項目設(shè)計師在方案的設(shè)計階段，會多做幾個保守的常用圖形相關(guān)方案。

另外，在沒有基礎(chǔ)圖形的產(chǎn)品品牌中，通常需要通過腦暴會去討論出適合產(chǎn)品的符號基礎(chǔ)形態(tài)。例如vivo積分商城在視覺品牌探索階段，組織腦暴會議，邀請項目中各個關(guān)鍵角色一起來發(fā)散討論適合積分產(chǎn)品的貨幣符號圖形（這也是積分定義的視覺品牌符號）

▲vivo積分商城貨幣符號發(fā)散腦暴會現(xiàn)場

基礎(chǔ)圖形獲取方法介紹完了后，圖形的藝術(shù)表達，也就是圖形設(shè)計是需要我們通過情緒版或者常用創(chuàng)意手法來捕捉的。通過情緒版，我們可以提取出零碎的一些特征，這些通過觀察就可以提取了。比如下面這張情緒版圖上能得出的共性圖形特征有：描邊圖形、線面結(jié)合等。另一張能看出的有：大圓角、簡單幾何、Q型。

▲情緒板圖片提取共性特征

特征好提取，但是如何去用于輸出我們的視覺品牌符號，這塊就依賴各位設(shè)計師的設(shè)計表達了。到這一步，建議參與的設(shè)計師們進行視覺比稿。比稿的設(shè)計師們可以看一看常用的6種創(chuàng)意設(shè)計手法，這些創(chuàng)意手法都是較常見的，在設(shè)計中協(xié)助我們創(chuàng)意的迸發(fā)。

▲6種常見圖形創(chuàng)意手法

(3) 文字

嚴(yán)格意義上，符號里的文字也是圖形的一種。不過，針對用文字來做的符號，可以參考字體創(chuàng)意設(shè)計的10個方法。這里不一一闡釋含義了，大家可以在網(wǎng)上找到更多每一類圖形的案例和應(yīng)用解說。

▲10種常見字體創(chuàng)意設(shè)計方法

(4) 質(zhì)感

如果要進行質(zhì)感的提煉和確定，除了從情緒版里能夠找到一些共性的東西以外，也可以多在流行趨勢、設(shè)計網(wǎng)站材質(zhì)圖形相關(guān)專題里，去嘗試獲取思路。在設(shè)計方案階段，可以多去嘗試不同的設(shè)計質(zhì)感。

▲質(zhì)感素材專題

(5) 構(gòu)成

構(gòu)成通常會用在版式，招貼之類的平面設(shè)計中。很多產(chǎn)品標(biāo)志在構(gòu)成上都很講究，圖標(biāo)的內(nèi)容和留白比例搭配合理，具備設(shè)計舒適感。我們在做符號設(shè)計時候，同樣要非常關(guān)注構(gòu)成，好的構(gòu)成會讓我們的符號更具魅力。常用的圖形構(gòu)成有9種，我們在做圖形時候可以多去嘗試，也可以疊加嘗試，找到適合的構(gòu)成樣式。

▲9大圖形構(gòu)成

案例

回到視覺符號提煉的5大維度方法，我們來看下vivo瀏覽器是如何提煉視覺品牌符號的。由于不同設(shè)計師整理的情緒版，方案都不一樣，接下來來看瀏覽器視覺品牌探索眾多方案其中的一個例子。

▲視覺符號提煉的5大維度

首先來看下瀏覽器目前一些背景設(shè)定，去除既定的情況，我們需要在這幾個方面找尋特征（輔色、圖形藝術(shù)、質(zhì)感、構(gòu)成），來完成我們的視覺符號。

▲vivo瀏覽器背景設(shè)定

在這個方案中，設(shè)計師從情緒版提取了想要的特征（圖片中藍(lán)色文字）：

顏色：從情緒版提出占比較高的顏色，歸納成色組，在色環(huán)中逐一討論去留，去除對比強烈的黃色（因為瀏覽器作為工具類產(chǎn)品并不想傳達出刺激，沖突，過于活力的感受，故去除。）在鄰近色（青色、皮粉色）里考慮避開性別因素，青色更加適合。然后調(diào)整一下rgb，飽和度提高一些。

圖形藝術(shù)：延續(xù)地球元素，情緒版提煉的：大圓角、簡單幾何、Q型，描邊圖形，線面結(jié)合。

質(zhì)感：瀏覽器在先前資料收集的時候就有傾向，考慮近兩年手機背面AG磨砂玻璃廣泛使用，界面上蘋果和微軟也整體設(shè)計轉(zhuǎn)向毛玻璃風(fēng)格，關(guān)于這類品質(zhì)感和空間感明顯的處理方式，瀏覽器設(shè)計師也想進行嘗試。

構(gòu)成：結(jié)合情緒版和圖形構(gòu)成9個方法，提取并運用的主要特征是動勢，也是想賦予符號活力感受。

最后，經(jīng)過草稿比稿，評審?fù)ㄟ^的方案和確定的符號5個特征如下：

▲vivo瀏覽器符號的5個特征

5、 完善主要頁面

視覺品牌符號完成以后，接下來需要繼續(xù)繪制與符號強關(guān)聯(lián)的頁面。這些模塊有：loading、缺省、核心頁面、插畫插圖場景。不是把視覺品牌符號簡單的原封不動放在各個頁面里，而是通過一些設(shè)計手法將它更好的融入在頁面中。

通常，核心頁面模塊的視覺呈現(xiàn)，都是基于已定的視覺品牌符號特征去發(fā)散。目前我們團隊有兩種不同的思路：一個是從先前符號里提取主要某個特征并結(jié)合場景做出版式布局的延展。類似我們做vi時候常用取logo的一部分進行圖形組合再創(chuàng)意。另一個是將已定符號的不同特征進行多個組合，創(chuàng)作出符合這些特征的衍生的新視覺。

瀏覽器用的第二種方法，提取出的符號特征和定好繪制要求，其中為了保持整體風(fēng)格的一致性，需要繪制的模塊特征應(yīng)不少于一半目前特征（滿足1/2)，如果有新增的特征需要保持和諧，不應(yīng)該有其它明顯的風(fēng)格傾向。這個也是用來檢查你做的系列衍生效果是否整體的標(biāo)準(zhǔn)。經(jīng)常有同學(xué)做了一個很好看的缺省圖，但是風(fēng)格特征與已定視覺符號風(fēng)格相差甚遠(yuǎn)，最后導(dǎo)致不能使用。

下面是vivo瀏覽器視覺品牌符號延展的圖形或頁面樣式：

▲缺省圖樣式（6/8特征）

▲裝飾icon圖樣式（4/8特征）

▲特殊彈出層樣式（4/8特征）

▲視頻操作引導(dǎo)樣式（4/8特征）

▲應(yīng)用在整體頁面效果

看完瀏覽器的符號延展方法，再來感受下另一個方法：通過符號，延展多個版式視覺的案例——短視頻視覺品牌探索。項目設(shè)計師主要對視覺品牌符號圖形特征做了延展，局部提煉并創(chuàng)新版式。

下圖是短視頻視覺品牌符號，基于此為基礎(chǔ)型，設(shè)計師根據(jù)總結(jié)的6種手法，用對稱、平移 等方式進行拓展，結(jié)合頁面實際情況完成。

▲短視頻品牌符號以及圖形應(yīng)用解說

▲短視頻品牌符號頁面背景應(yīng)用

▲ 物料拓展概念

6、驗證視覺風(fēng)格喜好

完成主要頁面后，我們會進行風(fēng)格測試，用來驗證不同的設(shè)計方案在用戶眼里的喜好程度，從而修正設(shè)計師的認(rèn)知偏差。我們建議至少完成3個視覺品牌符號方案和對應(yīng)3套頁面來供用戶測試。

關(guān)于風(fēng)格測試，是將已有的方案通過問卷和簡單的線下訪談，得出用戶的喜好結(jié)論。因為是敏捷測試，只需要一周就可以出結(jié)論。在這一步，有5條測試重點和對應(yīng)解讀需要設(shè)計師關(guān)注，具體內(nèi)容參考下圖：

▲5條測試重點與解讀

目前vivo瀏覽器和i視頻都在視覺品牌升級時候，運用了這個較為敏捷的測試方法。

▲i視頻視覺品牌3套方案風(fēng)格測試復(fù)盤

▲vivo瀏覽器視覺品牌升級核心頁面風(fēng)格測試

7、完成所有頁面的視覺效果

經(jīng)過用戶的驗證和后期修改，我們確定好了唯一的一套最合適的視覺品牌。在設(shè)計組內(nèi)部評審+項目組核心成員評審效果通過后，接下來工作就是按部就班的去完成后續(xù)頁面的規(guī)劃和落地。這一環(huán)節(jié)的工作體量較大，需要花時間去梳理替換所有頁面。整體t替換預(yù)計耗時需要2周左右，建議多些成員參與完成。

8、 整理成視覺品牌規(guī)范手冊

最后一步也是最重要的一步，需要把視覺品牌的設(shè)計指導(dǎo)和規(guī)范進行沉淀。視覺品牌規(guī)范手冊是需要項目組設(shè)計師一起維護的。好的設(shè)計語言是第一步，維護和讓其發(fā)揮最大價值（原則、一致性、效率）是視覺品牌規(guī)范手冊的意義。

▲視覺品牌規(guī)范手冊4大模塊

目前我們已經(jīng)梳理出vivo瀏覽器、短視頻的視覺品牌規(guī)范手冊。內(nèi)容包括4個部分：品牌概述、品牌符號、視覺語言、物料規(guī)范。對產(chǎn)品的視覺品牌理解和如何應(yīng)用會完整的體現(xiàn)在手冊里，建議每一個參與項目設(shè)計師都應(yīng)該在設(shè)計前先整體看一遍。

結(jié)語

視覺品牌的定義流程以及方法，是我們團隊資深ui設(shè)計師第三季度重點研究和探索的產(chǎn)物。希望能給正在做視覺品牌相關(guān)工作的設(shè)計師帶來一些幫助和啟發(fā)，如果有建議或者疑問，歡迎通過VMIC UED公眾號和我們交流，讓我們一起優(yōu)化好這個視覺品牌定義體系，為用戶創(chuàng)造更好的視覺體驗。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

顏色會潛意識地為觀看者提供有關(guān)應(yīng)用程序的大量信息，即使他們從未閱讀過任何文字。

什么是色彩心理學(xué)？

不同的顏色實際上可以對人類的情緒甚至行為產(chǎn)生深遠(yuǎn)的影響。這是全球各城市許多綠色和藍(lán)色倡議者背后的想法：綠色和藍(lán)色使觀看者感到更加平靜和放松。

綠色對減輕壓力（和其他因素）的影響如此深遠(yuǎn)，以至于實際上可以幫助人們延長壽命。

這對應(yīng)用程序設(shè)計意味著什么？

嗯，顏色的影響不僅僅是觀眾喜歡與否，還會影響他們的感受。例如，深淺不一的藍(lán)色會激發(fā)忠誠和可靠的感覺。綠色激發(fā)舒適和幸福。黃色與快樂和刺激有關(guān)。紅色讓人興奮并引發(fā)欲望。

但是那些不一定是感覺的東西呢？人們是否也傾向于將某些價值觀與顏色聯(lián)系起來？

這項調(diào)查要求人們選擇與某個詞相關(guān)的顏色。他們發(fā)現(xiàn)：

• 信任 = 藍(lán)色（34% 的受訪者）

• 速度 = 紅色 (76%)

• 便宜或便宜 = 橙色 (26%) 和黃色 (22%)

• 高品質(zhì) = 黑色 (43%)

• 高科技 = 黑色 (26%)、藍(lán)色 (23%) 和灰色 (23%)

• 可靠 = 藍(lán)色 (43%) 和黑色 (24%)

• 樂趣 = 橙色 (28%) 和黃色 (26%)

• 恐懼、恐怖 = 紅色 (41%) 和黑色 (38%)

應(yīng)用程序設(shè)計人員在開發(fā)應(yīng)用程序時最好牢記這些關(guān)聯(lián)。然而，這些都不是應(yīng)用程序開發(fā)人員絕對必須遵循的硬數(shù)據(jù)。相反，它們是開發(fā)人員可以遵循的指南，并結(jié)合下面討論的其他設(shè)計原則。

圍繞顏色的文化差異

在選擇顏色時，牢記應(yīng)用程序的受眾始終是至關(guān)重要的。

例如，在西方文化中，白色往往代表純潔或純真。然而，在亞洲的某些地區(qū)，白色是用來表示哀悼、厄運和死亡的。顯然，如果應(yīng)用不當(dāng)，這可能會產(chǎn)生嚴(yán)重的意外后果。

為此，設(shè)計人員應(yīng)該了解他們的受眾并相應(yīng)地選擇顏色，這在日益全球化的社會中并非易事。

選擇主調(diào)色板

應(yīng)用程序設(shè)計人員和公司等都應(yīng)該在確定其品牌的主要調(diào)色板之前進行仔細(xì)研究。最重要的是考慮觀眾和他們想要傳達的內(nèi)容。

藍(lán)色是一種流行的顏色，因為它與信任和可靠性有關(guān)，但它也變得有點過度使用了。

橙色可以與廉價聯(lián)系在一起，但也可以與樂趣聯(lián)系在一起。

紅色可以令人興奮和振奮，但也代表恐懼。

更好的使用顏色來設(shè)計應(yīng)用將有助于塑造觀眾的感知。設(shè)計人員需要了解顏色關(guān)聯(lián)以及用戶如何下意識地查看設(shè)計以創(chuàng)建成功的調(diào)色板。

色彩和諧

一旦應(yīng)用程序設(shè)計人員確定了主要顏色，就該選擇其他顏色了。使用一種顏色很簡單，通常不會很引人注目。

但是，選擇的顏色需要很好地搭配。

沖突的顏色會讓觀看者感到不安或有壓力。相反，應(yīng)用程序設(shè)計者應(yīng)該尋求創(chuàng)造一種賞心悅目的組合。一種會讓用戶感興趣并讓他們對應(yīng)用程序感覺良好的應(yīng)用程序，從而引導(dǎo)他們嘗試它。

這里有一些設(shè)計師可以遵循的基本原則，以在他們的設(shè)計中創(chuàng)造和諧的色彩。

單色

首先是在整個設(shè)計中堅持使用相同的顏色，但使用不同的色調(diào)。這增加了產(chǎn)品的興趣但又不會很突兀。

類似色

另一個流行的選擇是使用類似的顏色。這種方案也很難搞砸，盡管設(shè)計人員確實需要了解每種顏色的飽和度。

此方法可以使用色盤上彼此相鄰的顏色。例如，綠色和藍(lán)色，或橙色和紅色。

互補色

互補色方案使用調(diào)色板上彼此相反的顏色。例如，黃色和紫色或藍(lán)色和橙色。

使用互補色時，設(shè)計師必須仔細(xì)選擇陰影和色調(diào)。如果做得不好，很容易創(chuàng)建一個視覺上不和諧的方案。

但是，如果做得好，互補色可以使應(yīng)用程序設(shè)計真正流行起來，并在眾多其他不那么吸引人的應(yīng)用程序圖標(biāo)中脫穎而出。這可以使用戶更有可能選擇該應(yīng)用程序而不是其他類似功能的應(yīng)用程序。

分裂互補色

這種方法有點復(fù)雜，但可以產(chǎn)生一些引人注目的結(jié)果。它采用三種顏色，一種顏色和兩種相鄰顏色的互補色。例如，從紫色開始，然后添加橙色和綠色。

設(shè)計師必須小心使用這種方法，錯誤的組合會使設(shè)計從有趣變成突兀。

正確的應(yīng)用程序設(shè)計顏色

總而言之，應(yīng)用程序設(shè)計中的顏色世界非常復(fù)雜。沒有一種顏色會吸引所有觀眾，也不會適合所有品牌。然而，選擇正確的顏色絕對意味著一個成功的應(yīng)用程序和一個普通的應(yīng)用程序之間的區(qū)別。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

金剛區(qū)是什么，想必大家都有所了解。

沒有的話看這張圖就懂了：

圖片來源：淘寶首頁

我在微信上搜了一下，發(fā)現(xiàn)大部分討論金剛區(qū)設(shè)計的文章，都是在講怎么畫圖標(biāo)。

但是我自己在使用各大 APP 的過程中，發(fā)現(xiàn)很多金剛區(qū)并不是那么好用，而且這跟圖標(biāo)好不好看無關(guān)。

金剛區(qū)設(shè)計不好，會對我的使用造成直接影響：

1. 不夠清晰易懂根本不想去看
2. 首次使用找不到需要的內(nèi)容
3. 下次使用記不住圖標(biāo)的樣子
4. 圖標(biāo)設(shè)計得怪怪的不好理解

我今天就來總結(jié)一下，對于金剛區(qū)設(shè)計的交互/體驗思考：

• 數(shù)量
• 順序
• 顏色
• 樣式

數(shù)量

金剛區(qū)里有多少項比較合適？

這其實是米勒法則（Miller’s Role）的典型運用了。

如果你還不太了解米勒法則，看看下面這張圖里的詞語：

現(xiàn)在，半分鐘回憶一下，你記住了多少個？

……

大部分人能記住 5~9 個。

米勒的研究發(fā)現(xiàn)，普通人的工作記憶（Working Memory）只有 7±2 個信息塊。

如果給的信息超出了這個數(shù)字，大部分人也只能記住這么多。

所以說，金剛區(qū)里的圖標(biāo)數(shù)量，最好也維持在這個數(shù)，否則就是對用戶的記憶能力要求過高了。

通常來，4 個圖標(biāo)很輕松，說 6 個圖標(biāo)是比較理想的，8~9 個就有點吃力了，10 個就超綱了。

例如支付寶這個就過分了，好在這只是工具類產(chǎn)品，復(fù)雜一點也沒辦法：

順序

人們在看閱讀文字時，視線軌跡是之字形：

人們在閱讀表格時，視線軌跡是除草機形：

上圖來源：這樣設(shè)計表格，看著真難受！

雖然金剛區(qū)的眼動圖我沒有，但第一步肯定是從左上角開始往右掃。

所以，用戶最有可能使用的圖標(biāo)，應(yīng)該從左到右排在最上面一行，最不常用的可以排在右下角。

例如美團外賣這個設(shè)計，看著就挺合理。不但把重要內(nèi)容放在第一行，而且還做了很大的視覺區(qū)分：

不過一些不愁流量的 APP 會選擇把黃金位置用做商業(yè)宣傳，難免損失點易用性。

顏色

1. 仿真圖標(biāo)

如果追求質(zhì)感，多半會使用物品本身的顏色，例如每日優(yōu)鮮這個：

這種圖標(biāo)就沒什么顏色好討論了，注意一下整體和諧就好。

2. 數(shù)量較少

如果圖標(biāo)數(shù)量不多可以使用一個顏色，那么顏色上，同樣沒什么好討論的。

例如 QQ 音樂：

3. 數(shù)量適中

如果圖標(biāo)數(shù)量在 7 個左右或以內(nèi)，那么可以每種顏色的圖標(biāo)都來一個，這樣用戶也能記住大概什么顏色代表什么。

例如京東這樣：

4. 數(shù)量很多

圖標(biāo)數(shù)量遠(yuǎn)超過 7 時，就不可能每種顏色來一個了，否則顏色都不夠用了。

如果還是想要劃分顏色，可以將類型作為依據(jù)，這樣用戶在尋找圖標(biāo)時會比較有方向。

當(dāng)然，其實也可以簡單點，干脆都一個顏色，例如聯(lián)通手機營業(yè)廳：

樣式

1. 底框

一些產(chǎn)品為了統(tǒng)一感，會用圓圈或者圓角矩形，把所有圖標(biāo)都框起來。

這樣視覺上是好處理了，但交互上很不推薦，因為會大大降低圖標(biāo)的識別度，乍眼一看都長一樣。

這種底框在主流產(chǎn)品里已經(jīng)很少見了，不過這么做的設(shè)計師還是不少：

這種圖標(biāo)數(shù)量少，有顏色區(qū)分還好，如果數(shù)量多又一個顏色，那就很難辨認(rèn)了。

風(fēng)格

縱觀常見的金剛區(qū)圖標(biāo)，通常不外乎四種樣式：線條、形狀、2D、3D、仿真。

聯(lián)通手機營業(yè)廳

QQ 音樂

京東

美團外賣

每日優(yōu)鮮

任何樣式都能讓用戶識別和記憶，但是不同的樣式給人的感官不同。

真實性越高的視覺樣式，就越容易給人高級的感覺；相反真實性越低的視覺樣式，越容易給人簡單邊界的感覺。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

編輯導(dǎo)語：在當(dāng)今內(nèi)容為王的時代，傳統(tǒng)的信息流無法承載日益豐富的產(chǎn)品內(nèi)容，一種個性化的內(nèi)容推薦方式-feed流逐漸孕育而生。本篇文章中作者分析了feed流的組成元素，以及常見的feed流樣式。推薦對feed流感興趣的朋友們閱讀。

在這個內(nèi)容為王的時代，各個類型的產(chǎn)品都開始圍繞著自己所處的賽道營造豐富的信息流，傳統(tǒng)的信息流不再能承載當(dāng)下豐富多樣的內(nèi)容，信息流也不再單純屬于信息類以及文娛類產(chǎn)品，許多金融類產(chǎn)品甚至是工具類產(chǎn)品都開始有了社區(qū)，不同類型的內(nèi)容開始進入用戶的視野。

因此傳統(tǒng)的信息流無法承載日益豐富的產(chǎn)品內(nèi)容，逐漸一種個性化的內(nèi)容推薦方式-feed流逐漸孕育而生，其樣式豐富，其中包括大卡流、雙列流、沉浸流、動態(tài)流、文本流、動態(tài)流、櫥窗流…..筆者將在本文中分析feed流的組成部分，以及使用場景和設(shè)計要點。

一、feed流的主要組成部分

筆者調(diào)研了不同類型的feed流，發(fā)現(xiàn)feed流主要由以下幾個部分組成。如下圖：

筆者為大家挑選了幾個比較常見的元素為大家進行分析。

1. 圖片/視頻

在大多出產(chǎn)品的feed流中，占最大面積的就是圖片或視頻。相較于文字，圖片更能夠激發(fā)用戶點擊的欲望，在帶有社區(qū)屬性的產(chǎn)品中，設(shè)計師還需要考慮如何適配橫屏以及豎屏封面。

其次是如果該位置出現(xiàn)的是視頻。在常見的視頻產(chǎn)品中，當(dāng)系統(tǒng)識別出該內(nèi)容處于用戶界面的中間區(qū)域，則會自動進行預(yù)告播放。在1-2秒的時間內(nèi)，用戶能夠快速瀏覽視頻中最精彩的部分。在展現(xiàn)方式上通常使用帶有圓角的距形進行展示，圓角一般設(shè)置為：8、10、12、14、16、20PX。

2. 標(biāo)題

在feed的設(shè)計中，標(biāo)題是最不可缺少的部分，在字體的設(shè)計上，大多數(shù)采用黑色字體。在排布方式上在一行至兩行，如出現(xiàn)標(biāo)題字?jǐn)?shù)過多，可以用「 … 」的方式進行呈現(xiàn)。其次需要限制產(chǎn)品的創(chuàng)作者以及運營在配置標(biāo)題時，注意文案應(yīng)該簡明扼要，不要過于累贅。

3. 文案

該區(qū)域可以叫做文案區(qū)域或二級標(biāo)題區(qū)域，在該區(qū)域的設(shè)計中，字體顏色建議大多數(shù)采用灰色進行展示。在文案的編寫上可以加入更帶有引導(dǎo)性的詞匯用于引導(dǎo)用戶點擊。

4. 標(biāo)簽

標(biāo)簽的出現(xiàn)目的主要有兩個方面，第一個方面是幫助用戶能夠快速的區(qū)分內(nèi)容的種類如：預(yù)告、獨播、直播、精選、推薦等。用戶可以在眾多feed流中通過快速查看標(biāo)簽進行篩選，從而快速找到自己想看的內(nèi)容。

第二個方面主要是幫助產(chǎn)品進行更加精準(zhǔn)的流量分發(fā)，產(chǎn)品會根據(jù)用戶的操作習(xí)慣進行分群，再根據(jù)用戶興趣給每個群體打上相對應(yīng)標(biāo)簽。而這些標(biāo)簽則是對應(yīng)了不同群體的用戶，因此也就有了淘寶商城中千人千面的推薦形式。

5. 輔助信息

輔助信息主要是為了滿足不同產(chǎn)品的信息呈現(xiàn)，如在視頻平臺中，輔助信息可以承載電影評分、電視劇的集數(shù)、播放量、綜藝的更新日期、點贊數(shù)、評論等，甚至?xí)尤胂嚓P(guān)的快捷操作如靜音。輔助信息在設(shè)計中，不易做的過于突出，需要清晰單個feed的信息層級，挑選必要的信息進行展現(xiàn)。

6. 操作

操作區(qū)域的目的是為了產(chǎn)品的算法更加了解用戶的偏好，因為用戶的興趣是會發(fā)生變化的，如果用戶在某段時間突然特別不想看到某些內(nèi)容，就可以通過點擊操作將內(nèi)容進行「不喜歡」或「減少相關(guān)內(nèi)容」的操作，這樣也能給予用戶對于feed流一定的自定義。

在交互形式上，點擊操作區(qū)域后，建議采用較為輕量的交互方式，如點擊后出現(xiàn)底部彈窗或氣泡的形式。

二、feed流的形式

僅僅了解了feed的組成部分是不夠的。單個的feed流其實就像是英語學(xué)習(xí)中的單個單詞一樣，單獨的去死記硬背某個單詞其實意義是不大的，feed流的設(shè)計也同樣如此。

我們還需要擁有能夠?qū)⑶懊嫣岬降慕M成元素，拆開和重組的能力，因為不同的產(chǎn)品業(yè)務(wù)屬性不同，所需要給用戶提供的內(nèi)容也就不同。接下來筆者就給大家介紹一下常見的feed流形式。

1. 文字流

介紹：文字流多在信息類產(chǎn)品如知乎、百度，或產(chǎn)品的用戶評論區(qū)當(dāng)中。此類樣式可以運用在以文字為主的feed流設(shè)計中，并且還可以與動態(tài)流（下文會提到）之間搭配使用。

由于適配度高，可容納更多的操作按鈕，因此可以服務(wù)與以UGC內(nèi)容為主的產(chǎn)品，UGC產(chǎn)品需要強調(diào)用戶之間的互動，需要將互動類快捷操作外露。

如下圖：

使用場景：以文字為主的信息類產(chǎn)品，新聞資訊類產(chǎn)品、評論區(qū)、產(chǎn)品發(fā)現(xiàn)頁/社區(qū)

設(shè)計要點：在文本流的設(shè)計中，需要注意的是區(qū)分信息的優(yōu)先級，其中標(biāo)題可以采用大字號加粗的方式進行區(qū)分，正文則可以采用黑色常規(guī)的字體。

操作區(qū)域以及輔助信息可以布置在正文的下方，灰色處理，頭像以及標(biāo)簽可以作為一個整體進行布局。在交互上，可以將分享/評論/點贊等按鈕外露，從而降低用戶的互動成本。

2. 大卡流

介紹：該樣式主要服務(wù)與以圖片/視頻信息為主要內(nèi)容的feed流。以淘寶為例，在淘寶2020年提出“逛淘寶”的理念后，不再一味的追求交易的最短路徑，而是讓用戶在首頁點擊了某件商品之后，進入的是一系列同類商品的feed流，而不是商品的詳情頁?？梢钥闯?，大卡流非常適用于圖片/視頻信息的展示。如下圖：

使用場景：以圖片為主的內(nèi)容且需要搭配相關(guān)操作，如評論/進入詳情/分享/點贊等。劣勢是單排僅顯示一條feed，所需空間較大，在首頁不適合單獨使用，需要和其他feed樣式進行搭配。

設(shè)計要點：在大卡流的設(shè)計中，由于空間較大，需要注意標(biāo)題和操作區(qū)域的擺放位置，其次是需要把控創(chuàng)作者或合作媒體上傳的圖片質(zhì)量。最重要的是需要考慮適配橫屏和豎屏的封面，由于圖片比例的不同，會涉及到相關(guān)操作交互一致性以及視覺一致性的統(tǒng)一。

3. 雙列流

介紹：筆者認(rèn)為將雙列流帶到用戶視野的產(chǎn)品非小紅書莫屬，從小紅書發(fā)布之初到現(xiàn)在一直采用雙列流的形式。它的好處是能夠最大限度的將以圖片為主的feed內(nèi)容呈現(xiàn)給用戶。

樣式最初以長卡樣式為主，主要用于適配豎屏圖片，但隨著現(xiàn)階段UGC內(nèi)容的發(fā)展，雙列流也開始適配橫屏封面。如優(yōu)酷的首頁feed，則是采用了雙卡流中的短卡樣式，也不乏將長卡和短卡搭配使用的情況。

使用場景：主要適用于需要以圖片為主的UGC產(chǎn)品，非常適合用于首頁，但不推薦與其他feed樣式結(jié)合使用，容易打破雙列流左右兩則的排布節(jié)奏。對于相關(guān)操作按鈕從數(shù)量上有局限性，不建議外露過多按鈕，可以探索長按吊起更多操作的交互方式。在具體的設(shè)計樣式上，建議參考小紅書，僅將創(chuàng)作者與點贊數(shù)的操作進行外露。

設(shè)計要點：在設(shè)計雙列流的過程中需要考慮左右兩列之間以及上下兩行之間的間距，由于內(nèi)容與內(nèi)容之間圖片的高度不同，標(biāo)題字?jǐn)?shù)不同，因此需要制定良好的規(guī)范，從而保證用戶在瀏覽內(nèi)容的過程中保證兩列內(nèi)容之間的節(jié)奏感。其次是控制操作按鈕的個數(shù)，需要根據(jù)產(chǎn)品實際需求，僅將最總要的操作進行外露。

4. 沉浸流

對于沉浸流的使用最具有代表性的是抖音以及快手，隨著各個產(chǎn)品賽道都加入了短視頻以及直播間的模塊，該類樣式幾乎能夠在所有頭部產(chǎn)品中見到。如在淘寶的商品詳情頁以及首頁都加入了直播的模塊，點擊進入后可以沉浸的了解電子產(chǎn)品的測評或是服裝的實際上身效果，從信息傳達上會比單一的圖片更加多元更具有沉浸感。

使用場景：該類樣式主要適用于短視頻、直播間

設(shè)計要點：由于在不同產(chǎn)品中，短視頻起到作用不同。

比如在淘寶，短視頻的目的是給予用戶更直接的效果展示，讓用戶能夠快速的了解到產(chǎn)品的優(yōu)點，從而下單。

因此短視頻在淘寶詳情頁中的作用就是激勵用戶購買，所以會在左下角加入購買的鏈接。再比如在視頻類產(chǎn)品中，如優(yōu)酷則是提供相關(guān)的電影片段，那么目的就是為了給產(chǎn)品中的電影播放區(qū)導(dǎo)流，因此在設(shè)計過程中也會有相應(yīng)的改變。

在使用沉浸流的過程中，需要結(jié)合實際項目需求，不能將抖音快手的設(shè)計方式直接照搬到自己的產(chǎn)品中，這樣容易導(dǎo)致產(chǎn)品功能割裂的情況。

其次是需要將功能進行分區(qū)展示，如可以將同類的相關(guān)操作聚合放置在固定的區(qū)域，由于沉浸流功能按鈕會非常多，因此對用戶容易造成干擾，容易找不到想要操作的按鈕。

5. 動態(tài)流：

介紹：微博和微信朋友圈是筆者認(rèn)為將動態(tài)流使用的最為廣泛的產(chǎn)品，由于在這兩款產(chǎn)品中，內(nèi)容過于豐富，不僅需要適配橫屏或豎屏的圖片/視頻，還需要考慮適配不同數(shù)量。

并且需要將所有圖片展現(xiàn)給用戶，其中還不乏動圖。因此對于feed的兼容性提出了極高的要求。

使用場景：動態(tài)流可以運用在主打UGC的社區(qū)類產(chǎn)品當(dāng)中，以及單個產(chǎn)品中的社區(qū)模塊。

設(shè)計要點：由于發(fā)布內(nèi)容的主題是合作的媒體以及用戶用于記錄個人生活，因此動態(tài)流的優(yōu)勢非常明顯，可以適配不同數(shù)量的圖片以及用戶的自定義標(biāo)簽，因此動態(tài)流很難說是呈現(xiàn)以圖片/視頻為主的內(nèi)容，還是以文字為主的內(nèi)容，需要設(shè)計師與業(yè)務(wù)冊進行協(xié)商，找到feed對于產(chǎn)品的定位是什么。

劣勢則是用戶難以抓住單條內(nèi)容中的重點。因此設(shè)計師在設(shè)計的過程中，需要明確制定相關(guān)規(guī)范，靈活適配單數(shù)或雙數(shù)的圖片數(shù)量，從視覺上保證平衡。

6. 櫥窗流

介紹：櫥窗流在近兩年越來越多的出現(xiàn)在各大產(chǎn)品中，由于頭部產(chǎn)品都在往超級APP的方向進行發(fā)展。

前面筆者給大家介紹的各種feed樣式之間都存在著各自的優(yōu)勢和劣勢，但是依然無法滿足現(xiàn)在日益豐富的產(chǎn)品內(nèi)容，因此櫥窗流誕生了。其樣式可以理解為將不同樣式的feed進行排列組合，給予用戶矩陣式的內(nèi)容推薦。

使用場景：多用于產(chǎn)品首頁金剛區(qū)的下方，作為產(chǎn)品中某項功能或服務(wù)的入口進行承載，如新品首發(fā)、現(xiàn)實搶購、正片回顧等。其次是運用在某類內(nèi)容的聚合場景下。如將某一類視頻形成一個組合的片單，或者是將某一類書籍形成書單，但是由于內(nèi)容過多，封面難定的問題，此時可以采用櫥窗流的方式進行承載。

設(shè)計要點：雖然說櫥窗流能夠承載豐富的內(nèi)容，容易烘托產(chǎn)品氛圍。但是設(shè)計師在設(shè)計過程中需要對視覺進行整體進行把控，由于單個區(qū)域中，可能會出現(xiàn)過多個內(nèi)容，容易造成頁面混亂對情況。因此不宜把單個feed設(shè)計對過于出跳，這樣容易影響產(chǎn)品的流量分發(fā)。

其次是需要區(qū)分單個feed之間對樣式差異，由于在櫥窗流中，單個feed屬于內(nèi)容的集合，因此需要注意區(qū)分不同feed之間的樣式。

三、總結(jié)

在本文中，筆者粗略的分析了feed流的組成元素，以及常見的feed流樣式。其中不同的樣式各有利弊，并沒有某一種萬能的樣式，因此在設(shè)計過程中，需要結(jié)合業(yè)務(wù)目標(biāo)以及用戶目標(biāo)進行分析，分別分析對于標(biāo)簽/圖片/文字/操作的需求，從而設(shè)計出最適合產(chǎn)品需求的feed。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

很多人對APP中的卡片設(shè)計習(xí)以為常，但對于卡片設(shè)計流行的原因，優(yōu)點，以及如何做好卡片設(shè)計卻可能不甚了解。關(guān)于這些問題，彩云之前也寫過一篇非常受歡迎的卡片設(shè)計經(jīng)驗原創(chuàng)文章《想做好卡片設(shè)計，原來要注意這么多細(xì)節(jié)》，文章中講了非常多的卡片設(shè)計實用技巧。今天這篇國外大佬寫的文章，算是從為什么這樣做的角度來分析卡片設(shè)計，一起來學(xué)習(xí)吧。

從Instagram和Facebook這樣的社交媒體應(yīng)用到亞馬遜這樣的電商平臺，卡片設(shè)計似乎是無處不在的，這些大廠廣泛應(yīng)用使得卡片設(shè)計很快流行了起來。

作為一個信息容器，卡片能承載包括文本、富媒體、按鈕等所有UI元素?；谶@些內(nèi)容，卡片設(shè)計可以根據(jù)不同的設(shè)備和屏幕調(diào)整其大小，平衡界面視覺和用戶體驗。

什么是卡片設(shè)計？

卡片是一個UI組件，包含了某一個內(nèi)容的信息和操作?？ㄆ梢园鞣N元素，但它們都應(yīng)該屬于同一個主題。

這樣做的目的是為了避免冗長的文字，并呈現(xiàn)更多的內(nèi)容。即使從設(shè)計的角度來看，用戶可能不熟悉卡片的概念，但他們馬上就知道如何使用它們，因為它們與實體卡片是一樣的。（彩云注：這個就是用戶心理學(xué)中隱喻的運用）

為什么它會如此流行？

卡片之所以流行，是因為它們能更好的把控內(nèi)容。卡片是模塊化的，所以不同的內(nèi)容可以堆疊在一起，而不需要注意它們的差異。

卡片通過強制內(nèi)容適應(yīng)卡片邊界和卡片布局上的限制來聚焦內(nèi)容。設(shè)計師喜歡通過卡片混排大量內(nèi)容，而無需擔(dān)心設(shè)計會變得雜亂無章。

卡片可以將內(nèi)容分解成易于理解的小塊，以便用戶與之互動。通過給內(nèi)容一個容器，卡片向用戶表明內(nèi)容是真實和感性的。

卡片 UI 設(shè)計流行的原因還有很多：

• 直觀：卡片在界面中看起來與現(xiàn)實世界中的卡片相同，它們對用戶來說似乎很常見。在卡片成為移動和網(wǎng)絡(luò)應(yīng)用中的流行元素之前，它們在現(xiàn)實生活中無處不在：名片、棒球卡、便簽。卡片代表了一種有益的視覺類比，它允許我們的大腦直觀地將卡片與其所代表的內(nèi)容聯(lián)系起來，就像在現(xiàn)實生活中一樣。

  
  

• 易于閱讀：卡片不占用太多空間，并敦促設(shè)計師優(yōu)先考慮其內(nèi)容。不同的是，每張卡片都變成了易于閱讀的內(nèi)容。卡片讓用戶更容易找到他們感興趣的內(nèi)容。

  
  

• 有吸引力且對用戶更友好：基于卡片的設(shè)計通常非常依賴視覺效果（尤其是圖片）；就信息架構(gòu)而言，視覺層次會更加清晰。使用圖片有助于使基于卡片的設(shè)計比不在卡片中排列的相同內(nèi)容對用戶更具吸引力。

  
  

• 有利于響應(yīng)式設(shè)計：卡片是矩形的，可以平滑地調(diào)整大小，以適應(yīng)不同屏幕的水平和垂直正面，這意味著用戶可以在所有設(shè)備上獲得統(tǒng)一的體驗。

  
  

• 便于分享：卡片可以鼓勵用戶在社交媒體上分享內(nèi)容，因為它允許用戶只分享特定的內(nèi)容，而不是整個頁面。

  
  

什么時候應(yīng)用卡片設(shè)計？

這通常是當(dāng)你有:

• 基于搜索的界面:  卡片能通過模塊的內(nèi)容快速顯示合適的內(nèi)容，這使得用戶可以深入了解自己的興趣?；诳ㄆ脑O(shè)計是一種非常適合呈現(xiàn)這類內(nèi)容的方式。

• 
  

• 信息瀏覽：當(dāng)用戶瀏覽信息時，卡片的兼容性更好。

• 
  

• 任務(wù)管理：當(dāng)可以將流程中的單個任務(wù)作為卡片進行說明時， 可以輕松組織卡片以獲取任務(wù)列表。任務(wù)管理應(yīng)用在使用卡片式界面為用戶創(chuàng)建儀表板方面做得很好，其中每張卡片代表一個單獨的任務(wù)。

• 
  

• 類似項目：卡片最適合于異構(gòu)項目的集合（當(dāng)并非所有內(nèi)容都是相同的基本類型時）。

• 
  

• 可視化分析:  儀表板通常在同一頁上同時顯示各種內(nèi)容樣本。在這種情況下，卡片類比可以幫助在不同物品之間創(chuàng)造出更明顯的差異，其中每張卡片可以適應(yīng)不同的角色。

卡片解構(gòu)

卡片的布局可以不同，以支持它們包含的內(nèi)容類別。下面的組件通?？梢栽诙喾N卡片樣式中找到。

(1)富媒體: 卡片可以包含縮略圖，以顯示圖片，插圖，頭像，Logo，圖標(biāo)或圖形。

(2) 標(biāo)題: 標(biāo)題文本可以包含相冊或文章的名稱或標(biāo)題。

(3) 描述: 支持文本，如文章摘要或簡短的描述。

(4) 行動按鈕: 卡片可以包含用于操作的按鈕。

(5) 副標(biāo)題: 副標(biāo)題文本可以包含詳細(xì)介紹，如文章的署名或標(biāo)記的位置。

(6) 圖標(biāo): 卡片可以包含操作圖標(biāo)。

設(shè)計技巧

有一些小的技巧可以快速提高卡片設(shè)計細(xì)節(jié)。

1. 使用相關(guān)主題的圖片

圖片是卡片設(shè)計的主角，你需要一個高級的圖片來吸引用戶對每張卡片的注意。不僅是圖像，卡片還可以包含插圖、帶有淺色背景框的圖標(biāo)或任何其他類型的富媒體，但需要與內(nèi)容主題相關(guān)。 

2. 增加視覺層次

卡片內(nèi)的層次結(jié)構(gòu)有助于引導(dǎo)用戶對重要信息的閱讀。將主要內(nèi)容放在卡片的頂部，并使用排版來強化主要內(nèi)容。使用空白和對比來分隔需要更多視覺分隔的內(nèi)容區(qū)域。（彩云注：視覺層級對于信息表達至關(guān)重要！） 

3. 限制內(nèi)容長度

一張卡片應(yīng)該只包含重要的信息，并提出一個相關(guān)的觀點，以獲取額外的細(xì)節(jié)，而不是完整的細(xì)節(jié)本身。當(dāng)我們試圖在一張卡片中放入太多內(nèi)容時，卡片可能會變得很冗長，并失去與卡片類比的實際聯(lián)系，因為它不再像一張卡片了。 

4. 避免嵌入鏈接

不要包含內(nèi)聯(lián)鏈接，卡片應(yīng)該自己鏈接。嵌入文字鏈接會讓用戶誤操作。 

5. 區(qū)分操作主次

包含不同操作的卡片應(yīng)該在視覺上形成對比。在下面的例子中，我通過使用一種較輕的色調(diào)而不是主要的按鈕風(fēng)格來降低后續(xù)操作的視覺強度。 

6. 去掉分割線

對于新手設(shè)計師來說，用分割線來區(qū)分內(nèi)容是一種常見的方式，以此定義不同的組。這些邊框會造成不必要的視覺干擾，從而影響內(nèi)容。

如何做到視覺上更美觀？

APP中的卡片并不是純粹的擬物概念，但通常情況下，使用一致的類比和物理原理能幫助用戶理解界面并分析內(nèi)容中的視覺層次。在卡片的情況下，你可以做幾件事:

1. 使用圓角

在形態(tài)上與真實世界的卡片進行視覺對比。圓角更有效，因為它們讓我們的眼睛容易跟隨視覺動線，“因為它更適合頭部和眼睛的自然運動”。 

2. 增加一個輕微的外邊框或者投影

增加一條淡淡的描邊框或者增加一個淡淡的投影都是很好的做法。陰影在界面中創(chuàng)造了一個層次，這有助于我們區(qū)分UI元素。

然而，在設(shè)計中添加陰影并不像聽起來那么簡單。有時候設(shè)計師會過分強化投影效果，讓原本看起來不錯的設(shè)計看起來很廉價。避免使用純黑色的陰影。

3.注意字體和留白

重要的是要讓每一張卡片都能被人看到、閱讀和理解。在每個塊周圍添加大量的空白，讓用戶有時間處理并進行視覺重置，有精力看完一張卡再到下一張。

選擇簡單和基本的字體，因為基本的排版最大限度地提高了可讀性，并有助于瀏覽。

一些優(yōu)秀卡片設(shè)計的例子

讓我們看看一些真實項目中的卡片設(shè)計案例：

信息流中的卡片設(shè)計

保持信息流卡片簡單是很重要的。它們應(yīng)該有一個一致的、重復(fù)的結(jié)構(gòu)，但是使用不同的圖片和字體大小來代表卡片中最重要的和最不重要的元素，以使讀卡片的人更容易理解它們。 

由Diseno Constructivo和Webpixels設(shè)計

他們突出特色圖片和標(biāo)題作為最突出的元素，這能幫助用戶決定文章或發(fā)布的內(nèi)容是否適合他們。

電商卡片設(shè)計

產(chǎn)品卡片是一個很重要的東西，它可以幫助你將訪問者轉(zhuǎn)化為客戶。一張優(yōu)秀的產(chǎn)品卡片應(yīng)該能夠吸引人們的注意，激發(fā)人們獲得產(chǎn)品的欲望，激勵人們購買，并在搜索結(jié)果中得到高效推廣。 

由Webpixels設(shè)計

產(chǎn)品的名稱應(yīng)該放在最顯眼的地方，這樣參觀者就會立刻明白他來對地方了。一個好的配圖能告訴顧客勝過千言萬語，所以你需要一個高質(zhì)量的產(chǎn)品配圖來設(shè)計完美的產(chǎn)品卡片。

如果產(chǎn)品有特價，不僅要在價格欄中注明促銷價格，還要注明常規(guī)價格，以及客戶可以節(jié)省多少錢。

個人中心卡片設(shè)計

簡介卡已經(jīng)成為一個應(yīng)用或網(wǎng)站中的功能模板。隨著個人品牌變得比以往任何時候都重要，卡片設(shè)計在這里也能發(fā)揮重要作用。 

由Neelesh Chaudhary設(shè)計

就像每一張卡片一樣，配置文件卡片也是一個UI組件，它包含了對它所代表的內(nèi)容至關(guān)重要的信息。為了達到你的目標(biāo)，你要向其他人推銷你自己。

確保只包括必要的信息(例如，照片，名字，職業(yè))，讓你的“關(guān)于”頁面有剩余的細(xì)節(jié)來完善你的個人資料。

儀表盤卡片設(shè)計

儀表板的設(shè)計可以有很大的不同。但是所有的儀表盤都是用卡片做的。根據(jù)儀表板的類型，每張卡片可能包括概要信息、通知、快速鏈接或?qū)Ш皆O(shè)計元素、關(guān)鍵數(shù)據(jù)、圖表和數(shù)據(jù)表。確保你為每個元素使用了正確類型的卡片。 

由Simmmple設(shè)計

儀表盤卡設(shè)計允許用戶決定他們想要關(guān)注哪些數(shù)據(jù)。易于理解的UI，允許用戶精確地控制哪些數(shù)據(jù)需要在儀表板的前端做好。

只包括最相關(guān)的信息，為用戶使用方便。當(dāng)你的數(shù)據(jù)集在一起看更容易理解時，找到在一張卡片上顯示它們的方法。但是要小心，不要讓用戶感到困惑。

日常計劃卡片設(shè)計

看板任務(wù)卡似乎是一件非常簡單的事情——拿一張便簽，寫下你需要做什么，然后把它貼在墻上。這些卡片必須包含需要行動的單位數(shù)量。它們還可能包含各種各樣的其他信息，清楚地傳達了必須做什么。 

由Neelesh Chaudhary設(shè)計

卡片上包含的信息包括任務(wù)的名稱和重要的細(xì)節(jié)，如任務(wù)的類型和誰擁有它?？窗蹇ǚ旁跔顟B(tài)類別下。最基本的狀態(tài)類別是“計劃要做”、“正在進行中”和“完成”，但是狀態(tài)可能因項目而異。

卡片結(jié)構(gòu)最適用于添加或刪除任務(wù)這樣的小改變，而不是改變像你的總體目標(biāo)這樣的大想法。

總結(jié)

有幾種方法可以使卡片設(shè)計更加有效。通過最初定義和觀察卡片，我們可以更好地了解跨行業(yè)的這種設(shè)計模式。這也讓我們能夠推測用戶希望在這些卡片上采取什么行動。卡片在提供許多不同種類內(nèi)容摘要的環(huán)境中尤其有效，而不是簡單地作為內(nèi)容列表的現(xiàn)代替代品。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

編輯導(dǎo)語：現(xiàn)今以至遙遠(yuǎn)的將來，我們將面對一個殘酷的現(xiàn)實問題：人口老齡化。未來將有很多人群去關(guān)注這個群體，但是在市場上，對老年人的產(chǎn)品還是很少的，還存在很多問題。本文應(yīng)對這個問題，展示不同適應(yīng)老年人的產(chǎn)品設(shè)計細(xì)節(jié)，我們一起來看看。

當(dāng)前，我們正面臨老齡化問題的嚴(yán)峻挑戰(zhàn)。

統(tǒng)計表明，中國的老齡化人口已達到2.64億，且這一數(shù)據(jù)仍在持續(xù)增長，而老年人在生活、情感上都面臨諸多問題。

• 首先，老年人在視覺、聽覺、肢體、認(rèn)知方面都出現(xiàn)了不同程度的退化，無法平等地獲取信息和服務(wù)；
• 其次，年輕人涌向大城市尋找機會，老年人被迫成為空巢者，疫情的發(fā)生更使親人長期兩地分離，老人情感孤獨缺少陪伴；
• 另外，疫情的爆發(fā)也促使線下服務(wù)轉(zhuǎn)為線上化，老年人不能很好適應(yīng)這一轉(zhuǎn)變，遇到很多困難。

但是研究發(fā)現(xiàn)，市場上目前沒有產(chǎn)品很好解決了上述問題。

當(dāng)下移動APP產(chǎn)品缺少對老年人體驗的深層次關(guān)注與設(shè)計，只通過單一加大字號與簡化功能等解決基礎(chǔ)體驗，缺乏通過新技術(shù)應(yīng)用和更全面的適老化設(shè)計服務(wù)老年群體，老年人的需求依舊未得到關(guān)注和滿足。

因此，百度基于自身雄厚的AI技術(shù)和精細(xì)、系統(tǒng)的適老化設(shè)計適時推出百度大字版，使老年人更平等地獲取信息和服務(wù)、獲得情感陪伴。

一、精細(xì)系統(tǒng)的適老化設(shè)計：易閱讀、易收聽、易操作、易理解

目前行業(yè)內(nèi)缺失成體系的老年人研究報告，針對老年人的研究資料分散在建筑/平面/醫(yī)療/家居等各個行業(yè)，同時業(yè)內(nèi)也缺少針對老年人系統(tǒng)的設(shè)計標(biāo)準(zhǔn)或設(shè)計指南。

現(xiàn)有無障礙設(shè)計標(biāo)準(zhǔn)針對殘障人士，且部分標(biāo)準(zhǔn)只適用于PC端，不適用于老年人和移動產(chǎn)品。

因此在進行百度大字版的適老化設(shè)計時，我們系統(tǒng)的研究了老年人面臨的問題、PC端無障礙設(shè)計標(biāo)準(zhǔn)及其他相關(guān)資料，產(chǎn)出了系統(tǒng)的移動端適老化設(shè)計標(biāo)準(zhǔn)體系，同時結(jié)合百度大字版實際場景產(chǎn)出了解決方案。

適老化設(shè)計包含：易閱讀、易收聽、易操作、易理解四個方面，后續(xù)將詳細(xì)闡述。

1. 易閱讀

隨著年齡增長，老年人會出現(xiàn)視力下降、色彩感知弱、動態(tài)視覺減弱的問題。

老花眼、眼睛進光量減少等問題會導(dǎo)致視力下降。

眼睛晶體渾濁，晶體變黃的現(xiàn)象會導(dǎo)致色彩感知弱。視力減退，注意力降低，導(dǎo)致眼睛失去快速對焦的能力，動態(tài)視覺減弱。

因此為了使老年人更易獲得視覺信息，我們對界面元素做了一系列的改造，使內(nèi)容更易閱讀。

1）增大字號

增大字號是適老化設(shè)計最有效的手段。

PC端WCAG無障礙設(shè)計標(biāo)準(zhǔn)建議字號可以放大到200%。

按不同的閱讀媒介與人眼距離進行推導(dǎo)，移動端字號大小建議在60px-81px之間，標(biāo)題、正文、輔助信息等不同信息層級采用不同的字號標(biāo)準(zhǔn)。

此字號標(biāo)準(zhǔn)經(jīng)過眼動實驗和用戶訪談進行了雙向論證，形成完整覆蓋各信息層級的字號大小標(biāo)準(zhǔn)，已經(jīng)在百度大字版落地。

字號與眼睛距離對照圖

字號標(biāo)準(zhǔn)體系

字號應(yīng)用場景

2）使用符合老年人生理、心理特征的顏色

老年人眼睛晶體變渾濁、變黃，導(dǎo)致對色彩的感知減弱，且研究表明老年人更喜愛溫暖明亮的顏色，更希望感受到活力而不是蒼老。

因此在顏色的設(shè)計上，我們通過增加色彩對比度到不小于3:1、大量使用暖色調(diào)、減少紫色和青色的使用3個手段，來進行界面色彩的設(shè)計。

顏色的選取和使用

3）提供有效的反饋提示

老年人的動態(tài)視覺減弱，對動態(tài)內(nèi)容的捕捉和感知速度明顯下降。

因此，對界面中短暫出現(xiàn)的提示性信息，我們在現(xiàn)有提示時長的基礎(chǔ)上延長了一檔。

例如現(xiàn)有提示的停留時間小于3秒時，百度大字版延長到3秒，現(xiàn)有提示的停留時間在3-5秒之間時，百度大字版延長到5秒。

現(xiàn)有提示的停留時間在5-7秒時，百度大字版延長到7秒。超出以上時間則提供適當(dāng)?shù)年P(guān)閉機制，避免打擾。

提示時長適當(dāng)延長

2.易收聽

隨著年齡增長，老年人也會逐步出現(xiàn)聽力下降的問題，聽力損失程度受地域、受教育程度、疾病等多重因素影響，且高頻和低頻聽力損失程度更深。

因此我們通過增加音量、適當(dāng)降低語速等方式幫助用戶更好的獲取聽覺信息。

1）增大音量

針對老年人聽力下降這一現(xiàn)象，我們適當(dāng)增大了音/視頻的音量。

研究表明，老年人聽覺平均感知音量在67.5～75.3分貝之間，因此在視頻開始播放時，我們對低于設(shè)定值的音量適當(dāng)增加到約44%。

iOS系統(tǒng)音量分布

2）降低語速

為了保證老年人有效的接收到聲音信息并進行理解，音/視頻的播放速度也需要適當(dāng)下降。

因此，我們減少了高檔位語速，并提供了高、中、低3檔語速，使老年人選擇適合自己的速度，更有效的獲取聲音信息。

速度檔位選擇

3.易操作

移動應(yīng)用需要通過手勢交互來完成任務(wù)，但老年人的肢體運動能力也會逐漸下降。

動作精準(zhǔn)度下降使老年人無法準(zhǔn)確的完成手勢操作，對動作的精細(xì)控制程度降低。

同時老年人相較年輕人運動更加遲緩，逐漸出現(xiàn)操作遲疑、猶豫或暫停，運動幅度或速度也會下降。

因此為了保證老年人可以準(zhǔn)確的完成操作，我們采用了增大觸控區(qū)、降低手指運動距離和精準(zhǔn)度要求、提供有效的反饋提示、操作功能顯性化等方式。

3）增大觸控區(qū)

增大觸控區(qū)是使移動應(yīng)用易操作的最簡單有效的方式，同時視覺設(shè)計上也需要讓老年人感知到觸控區(qū)增大。

我們通過對iPhone XS Max三倍屏的分辨率和物理尺寸換算，結(jié)合人拇指和食指的點擊區(qū)域大小，推導(dǎo)出移動應(yīng)用上，觸控區(qū)應(yīng)大于等于112px×120px。

觸控區(qū)域示意

2）降低手指運動距離和操作精準(zhǔn)度要求

老年人的肢體運動能力下降，難以完成長距離、長時間、連續(xù)、高級的操作。

因此我們集中界面的主要操作在屏幕下半部分，保證用戶在使用時手指移動的距離更短，同時減少使用具有明確方向性、精準(zhǔn)度要求的高級手勢，如雙擊、旋轉(zhuǎn)圖片到正向等。

降低手勢操作的精準(zhǔn)度要求

3）提供明確的操作反饋

為了提醒老年人注意、告知其已完成操作、增強操控感，我們在特定場景增加了振動反饋，如臨界值、出錯、滑塊、警告場景。

振動反饋

4）隱性操作顯性化

為了減輕用戶的學(xué)習(xí)難度，我們將所有隱性功能或需要手勢操作觸發(fā)的功能進行了顯性化設(shè)計，如點擊底bar刷新，功能隱性不易發(fā)現(xiàn)，百度大字版采用動態(tài)刷新圖標(biāo)的形式，增強底bar可點擊刷新的感知。

隱性操作顯性化

5）輔助用戶輸入

現(xiàn)實生活中，很多老年人不會使用輸入法，而且肢體運動能力的退化也為輸入帶來了不便，移動設(shè)備的輸入法操作區(qū)域小難以精準(zhǔn)操作。

因此我們依托百度的AI技術(shù)，提供了語音搜索和圖像搜索能力，使老年人可以方便的通過語音和圖像搜索主動探索獲取新知，答疑解惑，跟上時代進步。

依托百度AI技術(shù)提供語音和圖像搜索能力

4.易理解

隨著年齡的增長，人的認(rèn)知能力也會逐步下降，老年人會出現(xiàn)反應(yīng)慢、學(xué)習(xí)力下降、判斷力下降的情況。

他們很難一遍學(xué)會新內(nèi)容，也難以判斷信息的真?zhèn)?。因此我們通過簡單直白的文案話術(shù)、清晰明確的圖標(biāo)設(shè)計、可信的來源設(shè)計來使內(nèi)容易理解，安全可信。

1）采用通俗易懂的文案

由于老年人觸網(wǎng)時間短、受教育程度不同，難以理解專業(yè)的互聯(lián)網(wǎng)術(shù)語，為了幫助他們更好的使用產(chǎn)品，我們對專業(yè)術(shù)語都進行了簡化，采用了通俗易理解的文案。

文案適配前后對比

2）提供清晰明確的圖標(biāo)設(shè)計

為了幫助老年人更好的理解和使用產(chǎn)品，百度大字版的圖標(biāo)設(shè)計都采用了簡單易理解的圖形，同時功能入口大部分采用圖形和文字結(jié)合的方式，通過雙重手段幫助老年人理解產(chǎn)品功能。

圖形對比示意

3）提升信任感

在內(nèi)容信息來源中或涉及經(jīng)濟交易的環(huán)節(jié)，百度大字版通過增加官方標(biāo)簽、提供官方平臺保障的方式來提升產(chǎn)品整體的可信度，增強老年人對產(chǎn)品的信任感。

官方標(biāo)識和保障示意

4）提供即時的幫助

為了隨時解決老年人遇到的問題，百度大字版提供了暖陽熱線，使老年人可以隨時打電話獲取專業(yè)人員的幫助和解答。

二、AI賦能，情感陪伴

由于很多年輕人去大城市尋找機會，導(dǎo)致產(chǎn)生很多空巢老人，他們情感孤獨，缺少陪伴。

疫情的爆發(fā)，更使老年人在節(jié)假日也難以與家人團聚。

因此百度大字版通過語音合成等AI能力，還原兒孫親友的真實聲音，用于全局內(nèi)容播報朗讀，使老年人感受到至親至愛仿佛陪伴在他們身邊，緩解老年人的孤單和思念之情。

全局語音朗讀也能解決老年人的閱讀障礙和長時間閱讀導(dǎo)致的視覺疲勞問題，同時可以解放雙手，使老年人隨時隨地聽朗讀。

語音合成

全局內(nèi)容朗讀場景

三、豐富內(nèi)容，充盈生活

百度大字版圍繞老年人的實際生活需求，依托百度的內(nèi)容生態(tài)和個性化推薦技術(shù)，提供了符合老年人興趣的圖文和音視頻內(nèi)容，一站式滿足了老年人的內(nèi)容消費需求。

• 在設(shè)計上，我們通過AI技術(shù)，對視頻增加智能字幕，方便老年人獲取視頻信息；
• 在內(nèi)容流的操作上，通過統(tǒng)一的容器和流式交互，為老年人提供便捷的操作體驗，使他們更方便、平等的獲取信息和內(nèi)容。

智能字幕

四、生活助手，便捷服務(wù)

百度大字版還提供了多種實用工具，滿足老年人疫情時代和日常的生活訴求。

疫情導(dǎo)致線下服務(wù)線上化，因此為了幫助老年人適應(yīng)這一生活方式的轉(zhuǎn)變，百度大字版提供了在線政務(wù)工具。

很多老年人承擔(dān)了教育孫輩的責(zé)任，因此我們提供了一些輔助教學(xué)工具，幫助他們帶孩子。

更有疫情地圖、垃圾分類等貼合日常生活場景的工具，使智能技術(shù)更貼近、融入老年人的生活。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

互聯(lián)網(wǎng)社交發(fā)展方向

先來看看技術(shù)發(fā)展和現(xiàn)階段人口結(jié)構(gòu)的變化對線上社交有什么影響。

1. 技術(shù)上：

2G 時代的社交實現(xiàn)了跨地域聊天，用戶可以在 QQ 里和天南地北的人聊天，強調(diào)在線狀態(tài)。QQ 號是用戶社交虛擬身份的 id，是用戶自我創(chuàng)造的線上人設(shè)。2G 時代的社交尋求更為方便的溝通方式。

3G 進入了移動社交，著名風(fēng)投公司合伙人約翰·杜爾提出 SoLoMo 概念（社交化、本地化、移動化）。用戶可以基于位置進行交友，比如附近的人；基于行為匹配，比如微信搖一搖。沒有在線狀態(tài)，可以隨時隨地的聯(lián)系，隨時在朋友圈獲取對方線下的生活狀態(tài)。

4G 時代，手機硬件、大數(shù)據(jù)和 AI 的發(fā)展，大大提升了匹配的效率，高效地建立潛在社交關(guān)系。不論是看臉社交還是靈魂匹配，都能在很短時間內(nèi)找到合適的人聊天。信息傳輸越來越快，溝通互動的方式不斷革新，用戶從文字、圖片聊天進而習(xí)慣于實時語音和視頻。

隨著 5G 到來，高帶寬互聯(lián)網(wǎng)、云、AR/VR/MR 的高速發(fā)展，視頻作為主要的信息和溝通載體變得日益普及，疫情讓在線溝通和協(xié)作越來越方便，更多的線下社交場景轉(zhuǎn)移到線上，線上社交的頻次大大增加的同時，副作用也開始呈現(xiàn)，社交隔離讓人們感到更孤獨，對云社交的需求愈發(fā)強烈。

2. 人口結(jié)構(gòu)變化：

獨生子女群體在 80 年代出現(xiàn)，但由于父母輩基本是有數(shù)量較多的親兄弟姐妹，因此第一代獨生子女的同輩中有較多的表兄弟姐妹或堂兄弟姐妹互為玩伴。而由第一代獨生子女繁衍出的第二代獨生子女，也就是現(xiàn)在的大部分 00 后，家庭規(guī)模越來越小，親屬同輩越來越少，加上人口流動頻繁，少有的親屬同輩也較為疏遠(yuǎn)。

00 后這一階段的出生率跌至了最低點，平時家庭、學(xué)校二點一線的生活，繁重的課業(yè)負(fù)擔(dān)，原本在親屬同輩圈的社交就少，在學(xué)校的熟人同輩圈的社交也越來越少。

2018 年發(fā)布的《00 后來襲-騰訊 00 后研究報告》中說到，“75%的 00 后渴求有更多的時間跟同伴在一起”。00 后在現(xiàn)實生活中缺失的同輩圈社交，更有強烈的訴求去互聯(lián)網(wǎng)上尋找。他們有著更為復(fù)雜的社交需求，通過與同輩圈的互動，建立同輩伙伴關(guān)系，從中獲得陪伴感、歸屬感和自我認(rèn)同，形成自我認(rèn)知。

回顧這幾年社交的變化，技術(shù)讓社交體驗從“線上線下割裂”向“虛擬空間映射真實世界”發(fā)展，00 后的線上社交需求更加強烈，我們?nèi)绾谓庾x用戶、解讀人群，尋找他們的需求痛點。接下來，本文從自我展示、匹配連接、溝通互動的社交體驗路徑來探討社交的設(shè)計趨勢和特點。

更多樣化具象化的自我展示

最初的互聯(lián)網(wǎng)社交身份是簡單的虛擬身份 ID：虛擬頭像、昵稱、個性簽名、QQ 秀，當(dāng)時的社交體驗線上和線下完全割裂，用戶的自我展示強調(diào)純線上人設(shè)打造。隨著硬件設(shè)備和圖像技術(shù)發(fā)展，用戶慢慢豐富社交資產(chǎn)，用真實身份交友，高清美顏自拍、沙雕表情包和聲音名片，線上的自我展示與線下生活緊密聯(lián)系。而現(xiàn)在，更多人用虛擬形象代表自己，技術(shù)的進步讓虛擬形象的展示更完美、更逼真。

1. 真實身份展示從單一趨向于全面

用戶在展示自我的時候往往需要填寫大量文字信息和傳輸多張精修過的照片，導(dǎo)致編輯成本高、瀏覽效率低。視頻化的普及讓用戶隨時隨地記錄自己，在這種沉浸式的自我展示中，身份信息傳達更加有效和真實，也進一步放大用戶的自我炫耀感。

Feels 的個人資料由全屏照片、視頻、問答組成，用 story 的交互方式進行瀏覽。

2. 從聲音名片到聲音形象，更加賦予了情感和靈魂

語音的優(yōu)點在于比文字傳輸效率高，一篇完整的文字自我介紹用語音三言兩語就說完了。而語音的缺點是無法在嘈雜的公共環(huán)境中使用，所以老年人最愛用語音，因為他們私人空間較多。疫情讓人們大大減少了旅游和外出娛樂，享受個人空間的時間變多了，從而縮小了語音使用環(huán)境受限的缺點，放大了傳輸效率的優(yōu)點。在今年，出現(xiàn)大量語音房社交，語音從“蘿莉音”“正太音”的聲音社交名片變成展示個人形象的方式。

Clubhouse 帶來語音社交熱潮，F(xiàn)acebook、Twitter 也相繼上線語音房 hotline 和 Spaces，用戶可以找到一個感興趣的主題房進行聊天或圍觀，那些通過短短幾分鐘發(fā)言就吸粉的高質(zhì)量用戶，通過聲音賦予了個人的情感和有趣的靈魂。

Reddit Talk

3. 從“我是誰”到“我們的關(guān)系”

展示自我除了從展示者的角度來設(shè)計“如何更好的展示社交資產(chǎn)”外，也要從看的人的角度考慮“如何更好地了解他”。

ios15 從 spotlight 輸入聯(lián)系人的名字，對方個人信息會智能拉取你們相關(guān)聯(lián)的信息，包括最近的聊天、共享的位置和照片。

Snapchat 能根據(jù)生日、出生時間、地點生成個人星座運勢和個性，還能和好友進行星座合盤。通過個人資料之間的交互，強化雙方身份的情誼特點。

4. 虛擬和真實之間，越來越強調(diào)“真實”

虛擬形象的概念不新鮮了，2003 年 QQ 秀是虛擬形象的雛形，Y 世代網(wǎng)民根據(jù)自己的喜好拼出屬于自己的 QQ 秀形象，用于 QQ 聊天時的自我形象炫耀和情感表達。Z 世代逐漸成為互聯(lián)網(wǎng)的主力軍時，他們的個性習(xí)慣和獨特的表達方式讓虛擬形象在社交中的使用需求愈發(fā)強烈?！禯 世代圈層消費大報告》提出 z 世代五大典型興趣圈層為：電競、國風(fēng)、二次元、模玩手辦、硬核科技。Z 世代已經(jīng)從他們的興趣中建立了對虛擬形象的情感，興趣成為他們建立自我人設(shè)的重要手段，他們跳出固定人設(shè)，在不同興趣圈層展示多樣個性，使用特定沖浪語，以此獲得歸屬感和認(rèn)同感。

高新技術(shù)的發(fā)展讓虛擬形象變得越來越高質(zhì)量。蘋果的 Memoji、Snapchat 的 Bitmoji 和 Facebook 的 avatars 讓虛擬形象成為自己的化身，用于個人資料展示以及聊天表情包、合照、視頻互動等場景。Snapchat 最新的資料設(shè)計中展示了 3DBitmoji。

依靠面部捕捉、表情捕捉、動作捕捉的技術(shù)，實現(xiàn)了真人與虛擬形象的動態(tài)同步，降低了真人化虛擬形象的設(shè)置成本。在 SXSW2021 音樂節(jié)上，展示了 Facebook 新 avatar 系統(tǒng)推出的 VR 社交應(yīng)用 Horizon。人與人能通過虛擬形象進行實時互動，除了有自己逼真的形象外，還具備真實的眼神表情和肢體動作，還會根據(jù)肢體動作變化不同情緒。

大數(shù)據(jù)和人工智能時代，融合了 AI 技術(shù)的虛擬形象也在近幾年層出不窮。與真人虛擬形象不同的是，它不受對方在線的限制，能隨時進行實時互動，來滿足用戶對陪伴和娛樂的需求。麥當(dāng)勞推出一位唱跳型愛豆的虛擬形象，她可以和小朋友進行溝通互動，一起跳舞，跟小朋友講故事，增加與消費者之間玩伴、陪伴關(guān)系。

麥當(dāng)勞虛擬偶像“開心姐姐”

用戶在社交網(wǎng)站分享動態(tài)，維系自己的人設(shè)，獲得群體的存在感和認(rèn)同感。在未來，這些記錄和創(chuàng)作的內(nèi)容是否會形成自己的虛擬空間？每一個人不同的故事動態(tài)與空間產(chǎn)生聯(lián)系，形成自己獨有的虛擬空間社交資產(chǎn)。

5. 社交人格從「完美人設(shè)」到「透明人設(shè)」

隨著好友列表數(shù)量增多，很多人開始逃離朋友圈，人們在朋友圈的人設(shè)經(jīng)營也越來越謹(jǐn)小慎微，開始疲于“完美”人設(shè)的表達，社交產(chǎn)品開始減壓。正如越來越多的年輕服裝品牌進行的「透明商品運動」，他們在品牌宣傳時，將商品從生產(chǎn)到制作的全過程透明化公開給消費者。「透明人設(shè)」是反對當(dāng)今社交信息流充斥著的完美人設(shè)，鼓勵自我展示更加真實和未經(jīng)編輯。

Dispo 復(fù)古相機拍攝后需要 24 小時才出片，并且沒有任何美圖的編輯工具。傳達現(xiàn)實生活中不完美的時刻也是值得捕捉和分享的。

Poparazzi 能連續(xù)拍照變成 GIF 進行分享，同樣也傳達未經(jīng)過編輯的更真實的自我展示。用戶用 emoji 進行互動，僅展示動態(tài)收到的 emoji 表態(tài)數(shù)量。

你是否會因為動態(tài)無人互動而焦慮？是否會因為很久不更新動態(tài)而失去展示的動力，慢慢社恐？instagram 和 Facebook 允許用戶隱藏帖子的贊數(shù)，來減輕用戶的壓力和焦慮。

更懂我的匹配

1. 匹配趨向于多元化

調(diào)查發(fā)現(xiàn)，現(xiàn)實中兩位互不相識的陌生人要花 50 小時，才可以在路上叫出對方名字，再投入 40 小時，才能蛻變?yōu)檎嬲挠亚椤；ヂ?lián)網(wǎng)幫助用戶高效匹配，縮短認(rèn)識的時間，降低認(rèn)識的成本。

近幾年，用戶的喜好正在極速分裂和細(xì)化。《00 后來襲-騰訊 00 后研究報告》表明 73%的 00 后會主動地獲取資源來發(fā)展自己感興趣的領(lǐng)域。由于現(xiàn)實中同輩社交圈狹窄，他們需要在互聯(lián)網(wǎng)的社交陣地上尋找更垂類的興趣伙伴，比如云學(xué)習(xí)伙伴、游戲玩伴、coscp 等，線上社交在不斷垂直細(xì)分以便更快捷的連接同輩伙伴。

隨著傳輸速度的發(fā)展，匹配連接的體驗具有更實時的交互和面對面的互動體驗。Distance Disco 是一款云蹦迪平臺，疫情期間，大家在各自房間里通過在線視頻就能開啟一場線上舞會，結(jié)識一起蹦迪的朋友。界面上的視覺元素和色塊會隨著音樂節(jié)奏變化，增強迪斯科的互動氛圍。

視頻鏈接：https://v.qq.com/x/page/w32687gdpf8.html?start=46

Honk 匹配陌生人聊天的動畫，傳達了穿越了人山人海，遇見了你的感覺。頭像出現(xiàn)時，出現(xiàn)招手動畫，像是剛剛見面的人招手打招呼。

2. 匹配提升安全感和隱私保護

現(xiàn)實生活中我們都有意識地保護自己的隱私，而到了互聯(lián)網(wǎng)，卻容易放下戒心將自己的信息分享給他人，線上社交會放大陌生人有趣、友善的一面，卻也隱藏了人性的缺點。社交產(chǎn)品的在幫助用戶建立社交關(guān)系的同時，也要提升用戶隱私保護和社交安全的體驗。

Instagram 帳戶注冊時，未滿 16 歲的未成年人默認(rèn)使用私人帳戶，僅粉絲才能查看其發(fā)布的信息，在平臺內(nèi)容分發(fā)和互動上與成年人帳戶進行隔離。當(dāng)用戶更改成公共帳戶時，會給到提示強調(diào)私人帳戶的好處。

Snapchat 推出“好友檢查”，用戶可以快捷私密地刪除不聯(lián)系的人，確保好友列表里仍是真正的朋友。

Tinder 的一項調(diào)查顯示，40%的人在 Tinder 中發(fā)現(xiàn)了前任，24%的人遇到了家人。為了保障用戶隱私，用戶可以上傳他們的聯(lián)系人名單以選擇不想在 app 中遇到哪些人，屏蔽所選的聯(lián)系人。

更富有樂趣和臨場的溝通

在社交產(chǎn)品中，聊天是關(guān)鍵的一環(huán)，匹配到合適的用戶后，如何加強雙方情感連接和信任的紐帶讓用戶為關(guān)系而留？從書信到電報到電話到視頻通話，都是通過技術(shù)的發(fā)展獲得了更高效真實的溝通體驗，線上溝通的用戶體驗一直不斷還原線下的真實體驗，疫情加速了多人在線視頻通話的發(fā)展，既讓人在溝通時保持社交距離，又讓人感覺對方近在遲尺。

1. 更臨場

相較于面對面溝通交流，線上的交流在聽覺、視覺、觸覺、情緒傳遞的體驗上，決定了用戶社交臨場感的強弱。

Honk 用文字交流時，能看到對方一個字一個字實時的輸出，模擬真實的說話方式。

2021 年 Google I/O 大會的 3D 視頻聊天設(shè)備 Project Starline，利用多個高分辨率攝像機和深度傳感器在不同角度捕捉用戶，以 3D 的效果進行人物呈現(xiàn)，營造對方真的就在對面的裸眼 3D 感。

2021 年 F8 大會上，F(xiàn)acebook 提出用于 AR 視頻通話的 MultipeerAPI，更方便創(chuàng)作者制作 AR 特效，用于多用戶、多屏幕的共享 AR 體驗。用戶在多人視頻通話時，視頻中會出現(xiàn)太空或篝火的 AR 特效，讓視頻者感受到大家都在同一個共享空間。還支持輕量級游戲，多位玩家屏幕由一根曲線貫穿，玩家用臉引導(dǎo)甜甜圈共同完成接力游戲。

2021 年 IOS15 的更新，F(xiàn)acetime 使用的空間音頻讓通話的聽感更加自然、逼真，仿佛在同一房間面對面聊天。

面對疫情人們在生活中的社交禮儀都以非身體接觸式動作替代，線上社交的頻次和密度大大增加，視頻通話在視、聽處理上越來越自然和逼真，在觸覺上也向著《頭號玩家》的男主角在虛擬空間中感受到的虛擬觸覺傳遞到現(xiàn)實中那樣在進化。美國西北大學(xué)的研究中，一位媽媽與孩子視頻通話時，通過撫摸屏幕，能把來自媽媽的撫摸傳遞到孩子身上的“AR 皮膚”上。未來在虛擬社交中也能獲得真實的觸碰，加強情感的連接。

2. 更個性

個人展示是單向的，溝通交流是雙向的，雙方在不斷交換彼此之間的狀態(tài)和感受，從中獲得被了解和認(rèn)可。個性聊天氣泡、表情包、自定義聊天背景，幫用戶在溝通交流時展現(xiàn)自己獨一無二的個性。線上社交的用戶語言設(shè)計要打造個性化的社交氛圍，讓用戶的個性在溝通中被挖掘和展現(xiàn)。

MUZE 在聊天中可以自由擺放文字、貼圖、涂鴉，讓交流更個性化和自由。

Google I/O 大會推出的全新設(shè)計語言 Material You 中，系統(tǒng)會基于用戶選擇的壁紙進行自由取色，并應(yīng)用到 UI 中。是否聊天的 UI 也能隨著聊天中的圖片，或是聊天發(fā)送的表情文字提取心情語義，進行 UI 的變化，加強情緒的傳達。

3. 場景化

人和人的社交通常依附于不同的場景，群聊或好友分組就是將特定的社交關(guān)系進行場景設(shè)定。比如“火鍋突擊隊”“老廢物樂園”“吃瓜小分隊”依附社交場景來進行互動，幫助用戶帶入社交氛圍。

咖啡館社交，通過構(gòu)建咖啡館場景，傳達和陌生人進行一場閑聊的慢社交體驗。

森遇

Facebook 的視頻通話，用煙花和禮帽的 AR 特效來構(gòu)建派對的社交場景。

2021 年 WWDC 大會上，現(xiàn)場用不同的 Memoji 營造了線上觀眾參與會議的場景。

4. 感官刺激

2021 年 Google 的一份統(tǒng)計數(shù)據(jù)表明，用戶平均注意力時長從 12s 下降到 9s，而 00 后的平均注意力僅 8s。面對這樣的用戶，需要讓他們在短時間內(nèi)獲得極大的感官刺激來延長注意力，以及在溝通交流時有更極致的情緒表達。

Honk 可以同時發(fā)送大量的 emoji 表情。

QQ 團隊運用 Lottie 技術(shù)推出每秒 60 幀超高幀率、動效更細(xì)膩的小黃臉表情包。

微信的表情包不僅帶來視覺上逼真的 3D 動畫效果，屏幕上其他內(nèi)容也會隨之震動，還有觸感上的沖擊。

網(wǎng)絡(luò)表情包

5. 輕娛樂、游戲社交

《社交媒體趨勢報告》提到“和朋友保持聯(lián)系”一直被列為是使用社交媒體首要原因，但在 16-24 歲的用戶中，主要驅(qū)動力變?yōu)椤皩ふ腋阈陀腥さ膬?nèi)容”。青少年通過線上社交彌補線下社交缺口，獲得同輩認(rèn)同，排解孤獨和學(xué)習(xí)壓力?！敖M隊開黑”“一起微光”“找長期固聊固玩”，00 后們的社交需求更多放在娛樂、游戲化社交上。社交體驗也從物理空間的連接轉(zhuǎn)變到精神空間的連接。

用戶在 Housparty 進行視頻聊天時，如果感到無聊，可以玩一場輕松的游戲，游戲過程中可以通過視頻看到對方的狀態(tài)。

Snapchat 正推出一種叫 Connected Lenses 的新型增強現(xiàn)實鏡頭，它可以讓不在同一個物理空間的用戶一起進行 AR 游戲，比如共同組建樂高模型。

IOS15 中 Facetime 加入 Shareplay 功能，可以與朋友共享屏幕，一起線上追劇、聽音樂、玩游戲。

Tinder 在今年推出第二季 Swipe Night 活動，用戶通過觀看每周一集的互動故事，向左或向右滑為故事中的角色做決定，每一集結(jié)束后會匹配到在故事中做出類似選擇的用戶，并可以繼續(xù)相關(guān)話題的聊天。

結(jié)尾

科技重塑了我們的生活。線上社交讓我們?nèi)粘贤ǜ鼮榉奖悖沧屛覀冚p松維系現(xiàn)實中的社交關(guān)系，越來越多的人依靠它構(gòu)建新的虛擬關(guān)系，互聯(lián)網(wǎng)帶來溝通便利的同時，也減少了人與人面對面交流的機會。

美國傳播學(xué)家艾伯特·梅拉比曾給出一個公式：信息溝通傳遞=55%視覺+38%聲音+7%語義。大意是人們在現(xiàn)實生活中進行面對面溝通交流時，7%是語言上的內(nèi)容，剩下的是面部表情、肢體動作、目光接觸、語速語調(diào)等非語言內(nèi)容的交流。隨著技術(shù)的進步，社交不斷在補充非語言內(nèi)容交流的缺失。在自我展示中，無論是視頻化、聲音形象、富有表情和肢體動作的虛擬形象，還是溝通場景中越來越臨場的體驗和充滿感官刺激的表情符號，線上社交的趨勢都在不斷映射線下社交的體驗。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

在信息流產(chǎn)品中，個人資料卡是一個很重要的頁面。一方面，創(chuàng)作者通過這個頁面展示賬號價值，突顯賬號魅力，引導(dǎo)用戶關(guān)注；另一方面，消費型用戶通過這個頁面了解創(chuàng)作者，查看創(chuàng)作者更多內(nèi)容，是眾多消費型用戶消費內(nèi)容中重要的一環(huán)。只有把這個循環(huán)做好才能長期促進平臺生態(tài)發(fā)展。

這個頁面承載著這么多的價值，該如何設(shè)計？本篇將以 QB 看點號資料卡升級的設(shè)計思路為例，進行分析解答。

前言

在前期分析過程中，我們發(fā)現(xiàn)當(dāng)前版本存在諸多問題。

從數(shù)據(jù)上看，對比公司內(nèi)同類產(chǎn)品，關(guān)注按鈕轉(zhuǎn)化率較低（出于數(shù)據(jù)保護，數(shù)據(jù)隱藏）。

從樣式上看，信息布局較亂，重點不突出。

基于以上背景，我們開始對資料卡進行改版升級。

設(shè)計前應(yīng)該思考什么

做任何一個設(shè)計前，都應(yīng)該思考設(shè)計目標(biāo)，否則設(shè)計出來的結(jié)果沒有意義，也缺乏過程依據(jù)和支撐。那么資料卡的設(shè)計目標(biāo)是什么呢？這要從資料卡在信息流產(chǎn)品中的使命和價值說起。

一方面，消費型用戶通過這個頁面了解創(chuàng)作者，查看更多內(nèi)容；另一方面，創(chuàng)作者通過這個頁面展示賬號價值，突顯賬號魅力，引導(dǎo)瀏覽者關(guān)注。

如果創(chuàng)作者能夠在資料卡充分展現(xiàn)自己的才華和魅力，帶來了更多瀏覽者的“關(guān)注”，那他們就更有動力分享或生產(chǎn)優(yōu)質(zhì)內(nèi)容，進而使產(chǎn)品內(nèi)容更加豐富；從而吸引更多新用戶的瀏覽、留存。

更多新用戶的加入、瀏覽、留存，讓內(nèi)容生產(chǎn)者有更多的漲粉空間，粉絲規(guī)模做起來之后再進行商業(yè)化。這樣對消費型用戶、內(nèi)容生產(chǎn)者、平臺方都有利，進而處于良性循環(huán)。

如何進行資料卡設(shè)計

了解了資料卡的使命和價值，設(shè)計目標(biāo)也呼之欲出，作為平臺方，我們需要幫創(chuàng)作者解決兩個問題：輔助創(chuàng)作者吸粉 & 助力商業(yè)化變現(xiàn)

當(dāng)然，創(chuàng)作者產(chǎn)出優(yōu)質(zhì)的內(nèi)容才是吸粉的關(guān)鍵，平臺方只能助攻。但不同的信息流產(chǎn)品有著不同的定位和側(cè)重點，吸引著不同的用戶，所以資料卡設(shè)計的樣式也不盡相同。

1. 輔助創(chuàng)作者吸粉

在輔助創(chuàng)作者吸粉這里，有兩個維度可以思考：

• 內(nèi)容展示維度
• 用戶關(guān)注維度

內(nèi)容展示分析

在資料卡中，有三個大區(qū)域：頭圖區(qū)、信息區(qū)和作品區(qū)。

• 頭圖區(qū)：指的是頂部的頭圖區(qū)域，這里可以讓創(chuàng)作者設(shè)置個性化頭圖，展示個性。
• 個人信息區(qū)：主要是作者的基本信息，包括昵稱、賬號名、簡介、粉絲數(shù)、認(rèn)證信息等…這里通常還承載著一些等級、榜單，屬于信息展示和官方背書區(qū)。
• 作品區(qū)：主要展示賬號發(fā)布的內(nèi)容，這部分通常是瀏覽者最關(guān)注、瀏覽時間最長的部分。

通過對比市面 20+信息流產(chǎn)品，我們發(fā)現(xiàn)了一些有趣的規(guī)律：

① 頭圖區(qū)：越是社區(qū)類產(chǎn)品，對頭圖個性化重視程度越高，而資訊類的產(chǎn)品則不太重視。

從產(chǎn)品功能上來看，越是偏向于社區(qū)類屬性產(chǎn)品，頭圖區(qū)域越大，可自定義替換的范圍也越廣。從用戶使用角度來看，社區(qū)類產(chǎn)品的用戶也更愛展示自我，頭圖替換的比例也更大，風(fēng)格更多樣化。而資訊類產(chǎn)品的創(chuàng)作者大多使用默認(rèn)頭圖，并不進行個性化設(shè)置，自定義頭圖的比例很小。

所以我們在設(shè)計頁面布局時，需要思考自身產(chǎn)品定位以及創(chuàng)作者需求，把有限的空間利用在刀刃上。

② 信息區(qū)：越是追求多元化收益商業(yè)化的產(chǎn)品，信息區(qū)承載量越大。

創(chuàng)作者不是活雷鋒，想讓他長久的留在平臺必然需要給到創(chuàng)作者更多收益（收益除了顯性也有隱形的，比如 B 站，很多創(chuàng)作者在 B 站發(fā)文平臺收益相比其他平臺少，但因為品牌聲量大、氛圍好，獲得了巨大的關(guān)注和曝光，所以即使收益低，創(chuàng)作者也會持續(xù)在平臺投稿）。

除了流量分成外，平臺們也在幫助創(chuàng)作者實現(xiàn)多元化的收益，比如商鋪、直播、付費課程粉絲圈等。甚至抖音很多創(chuàng)作者直接把商務(wù)合作寫在了個人簡介中招商引資。所以這個區(qū)域，隨著多元化商業(yè)收入的更多嘗試，信息承載量也越來越大。

③ 內(nèi)容區(qū)：越是長內(nèi)容，越傾向于展示更多作品和更多信息；越是短內(nèi)容，越是“看就完了”。

對比多款產(chǎn)品我們發(fā)現(xiàn)，越是長內(nèi)容的產(chǎn)品，在內(nèi)容區(qū)越是注重效率選擇。通常會顯示更多內(nèi)容，且單條內(nèi)容會顯示更多維度幫助瀏覽者決策是否點擊查看。猜測可能是因為內(nèi)容較長，瀏覽者通常會花費更多精力在選擇上。而越是短內(nèi)容，把單條內(nèi)容放大，促進瀏覽者點擊，直接“看就完了”，反正一條也沒太長時間。

所以設(shè)計資料卡時，需要設(shè)計者清晰了解自己平臺內(nèi)容特征以及用戶行為偏好，做出更合適自己平臺風(fēng)格的設(shè)計。

綜上，在做內(nèi)容布局展示時，需要綜合考慮產(chǎn)品定位，思考這些區(qū)域?qū)τ诋a(chǎn)品和創(chuàng)作者瀏覽者意味著什么。

比如頭圖區(qū)域，資訊類產(chǎn)品并不重視，畢竟賬號還是靠內(nèi)容說話，即便是放張個性化頭圖，瀏覽者也不會因此而關(guān)注。而且大家都使用默認(rèn)頭圖，個性化無從說起，就更沒有什么意義了。

那么如何讓頭圖有價值？創(chuàng)作者愿意為此更換，而瀏覽者看到能夠感受到帳號的特殊性？

筆者提供一個思路拋磚引玉，參考 App Store 的編輯精選：只有精選的 APP 才可以有頭圖權(quán)利，其他 APP 都是默認(rèn)樣式。而稀缺性和被認(rèn)可，正是人類所追逐和渴望的。如果平臺選出一些精選帳號，賦予其設(shè)置頭圖資格。作為創(chuàng)作者，非常有意愿去更換，因為可以體現(xiàn)出和其他賬號的不同。瀏覽者也可以通過頭圖感受到當(dāng)前賬號的優(yōu)質(zhì)屬性。

用戶行為關(guān)注調(diào)研

既然要幫賬號吸粉，那么我需要了解瀏覽者的行為偏好，知曉瀏覽者根據(jù)哪些內(nèi)容判斷是否關(guān)注該賬號。這里我們線下調(diào)研了 12 名用戶，了解他們在信息流產(chǎn)品中（產(chǎn)品不限于 B 站、抖音、小紅書、知乎、快手等）進入資料卡后，通過哪些信息和元素來決策是否關(guān)注賬號。

通過訪談，我們得到了 12 名用戶的原始表述。

我們發(fā)現(xiàn)，瀏覽者在關(guān)注賬號的時候，主要在意“內(nèi)容是不是感興趣” 、“粉絲量多少” 和 “內(nèi)容領(lǐng)域”。少量同學(xué)提到了會關(guān)注下作品數(shù)，其他信息基本不看。

原話摘錄：

• 主要看作者發(fā)的內(nèi)容，把高播放量的看一下，如果都比較感興趣就會關(guān)注。會看一下粉絲量，粉絲量多代表質(zhì)量比較好，關(guān)注不會踩坑。作品數(shù)會看一眼，如果作品太少，比如5個以下就不關(guān)注了直接看。
• 只看內(nèi)容，其他作者資料基本都不看，偶爾看一下粉絲數(shù)。教程不看粉絲數(shù)，教程如果是我需要的內(nèi)容，就算粉絲少我也會關(guān)注。
• 主要看作者別的視頻，關(guān)注主要是為收藏，不看別的只看所有視頻。會關(guān)注最近內(nèi)容的播放量怎么樣，其他基本不看。
• 那肯定是看內(nèi)容是不是感興趣啊，關(guān)鍵還是看內(nèi)容，粉絲量和點贊作品數(shù)會看一下，但不會作為關(guān)注的主要原因。如果粉絲量作品數(shù)多的話，關(guān)注動力會大一些。其他的都不看。
• 還是看內(nèi)容是不是感興趣。粉絲量分情況，特別需要的內(nèi)容不關(guān)注粉絲量，搞笑類生活類的會看下粉絲量再考慮是不是關(guān)注。有一些作者如果只看個別內(nèi)容感興趣但整個領(lǐng)域不感興趣的話不會關(guān)注。通過標(biāo)題大概判斷是不是自己喜歡的類型，最主要的還是內(nèi)容，其他的不看，粉絲量會看一下別太差就行。

而在操作路徑上，進入資料卡后：先到作品區(qū)查看內(nèi)容列表 → 拖動頁面向上查看更多內(nèi)容 → 返回信息區(qū)查看粉絲量 → 關(guān)注賬號。呈現(xiàn)先下后上的操作路徑。

行為路徑結(jié)合關(guān)注決策，有三個關(guān)鍵元素是形成操作鏈條并綁定在一起：內(nèi)容、 粉絲數(shù) 、關(guān)注按鈕，且內(nèi)容為高播放量內(nèi)容。所以高播放量內(nèi)容，粉絲數(shù)是決策關(guān)鍵，激發(fā)下一步關(guān)注行為。

而且我們在訪談中發(fā)現(xiàn)，關(guān)注行為也是一個偏沖動行為，用戶通常在進入資料卡的幾分鐘內(nèi)做出決定，在頁面停留時間越長，越不容易發(fā)生關(guān)注行為。所以在設(shè)計中，盡量縮短決策路徑，減少決策時間。

基于以上結(jié)論我們做了兩個方案再次進行測試：

• 方案1：傳統(tǒng)樣式
• 方案2：高播放量內(nèi)容，粉絲量，關(guān)注按鈕放置在同一區(qū)域，縮短決策路徑

為什么做一個傳統(tǒng)方案進行對比測試也是因為現(xiàn)在很多產(chǎn)品資料卡頁面趨同，大家已經(jīng)形成了認(rèn)知慣性，而尊重用戶習(xí)慣也是產(chǎn)品設(shè)計中需要考量的因素。接下來，我們又找了 12 名同學(xué)進行訪談和測試。

出乎意料的是，大家對于新事物的接受程度很高，有八名同學(xué)選擇方案 2。雖然只是理論上的選擇，并沒有延伸到實際行為，但也佐證了大家對于高播放量內(nèi)容確實存在很高的需求。對于選擇方案 1（傳統(tǒng)樣式）的同學(xué)來說，主要是不喜歡橫滑操作和不想改變既有習(xí)慣。

原話摘錄：

• 喜歡方案1，不喜歡橫滑，習(xí)慣豎著操作，標(biāo)題清晰
• 喜歡方案1，橫著這樣展示好像沒有豎著這樣展示清晰，喜歡這種長條的樣式
• 喜歡方案2，喜歡這個，重點突出，符合我的習(xí)慣，如果高播放量內(nèi)容都不錯我就會關(guān)注，省得找來找去了
• 喜歡方案2，上面這個類似youtube的popular uploads的東西能讓你第一眼看出這個UP主牛在哪

不管哪種樣式，內(nèi)容都是重中之重。既然是重中之重，大家也會注意到，有些內(nèi)容區(qū)視頻是雙列形式，有些視頻是單列形式。那么瀏覽者如何看待這種區(qū)別呢？會對關(guān)注產(chǎn)生影響嗎？

基于兩種樣式進行訪談，比分最后打成平手。雖然在 2 選 1 的要求下大家各有各的選擇，但最后也都表示差不太多，都能接受。從信息利用率上來講，雙列的形態(tài)展示的內(nèi)容更多，而且對視頻更加友好，預(yù)覽圖比較大。所以如果是視頻內(nèi)容，可以使用雙列大預(yù)覽圖樣式。

以上是關(guān)注吸粉的部分，設(shè)計時需要綜合考慮產(chǎn)品定位和用戶行為特征進行頁面布局。

2. 助力商業(yè)化變現(xiàn)

商業(yè)化能力是創(chuàng)作者與平臺形成強關(guān)系的紐帶。平臺為幫助創(chuàng)作者變現(xiàn)，不僅通過各類扶持政策給予補貼， 更是通過整合各類商業(yè)資源，不斷拓展商業(yè)化渠道，打通全流程商業(yè)鏈條，幫助創(chuàng)作者實現(xiàn)內(nèi)容價值最大化。

一般平臺提供商業(yè)化有三種類型：

基礎(chǔ)工具

• 商業(yè)基礎(chǔ)：平臺提供流量分成、現(xiàn)金獎勵等
• 商業(yè)化功能：打賞、電商功能、內(nèi)容付費功能、直播功能等
• 精準(zhǔn)推送功能：粉絲分組推送、粉絲必達等

平臺政策

• 扶持計劃：出臺各類流量扶持政策，賦能變現(xiàn)
• 獎勵政策：MCN 簽約、創(chuàng)作活動

資源整合

商業(yè)資源整合：整合平臺內(nèi)外部的廣告主資源、商業(yè)活動資源、投融資服務(wù)、新媒體賬號孵化等各類資源

資料卡涉及到的商業(yè)化展示主要為：電商能力，內(nèi)容付費，粉絲圈/粉絲付費。當(dāng)有這些商業(yè)化內(nèi)容的時候，通常占用信息區(qū)一行區(qū)域，大多數(shù)信息流產(chǎn)品多如此。

但當(dāng)多種商業(yè)化能力同時提供時，不同的產(chǎn)品給出了不同的解決方案。比如大多數(shù)產(chǎn)品合并在信息區(qū)的一行，通過橫劃展示更多，以保證其他內(nèi)容的露出。畢竟對于瀏覽者來講，內(nèi)容才是最重要的。

有一些產(chǎn)品則沒有選擇合并的方式而每個占用一行空間，與此同時，把創(chuàng)作者的信息展示的也更為詳細(xì)，可能和本身社區(qū)類產(chǎn)品的定位有關(guān)，希望更能關(guān)注除了內(nèi)容以外，創(chuàng)作者自身的獨特價值。

還有一些產(chǎn)品則利用了內(nèi)容 tab 區(qū)域承載櫥窗和付費服務(wù)，減少信息區(qū)的占用，還可以通過邏輯把不同渠道或不同場景的用戶引導(dǎo)不同 tab，讓瀏覽者看到更適合自己的內(nèi)容。

總結(jié)

資料卡里承載了很多的信息，從創(chuàng)作者的個性展示到內(nèi)容到商業(yè)化變現(xiàn)，需要我們不斷平衡每個區(qū)域的關(guān)系。

別的產(chǎn)品這么做，并不一定適合自己的業(yè)務(wù)，需要我們找準(zhǔn)自己產(chǎn)品的定位，結(jié)合當(dāng)下業(yè)務(wù)重點去綜合考慮。

業(yè)務(wù)是偏資訊的還是偏社區(qū)的？是偏短內(nèi)容平臺還是長內(nèi)容？有沒有提供足夠多的商業(yè)變現(xiàn)能力給到創(chuàng)作者？商業(yè)化能力做的如何？不同模塊的用戶數(shù)據(jù)怎么樣？只有對現(xiàn)有業(yè)務(wù)充分了解，才知道哪些是現(xiàn)階段的重點，才能對一個頁面做出更有依據(jù)的設(shè)計。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

文章來源：優(yōu)設(shè)   作者：騰訊設(shè)計 

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

消息通知可以及時地將狀態(tài)、內(nèi)容的更新觸達到用戶，用戶則可以根據(jù)收到的消息做后續(xù)判斷。但是如果沒有及時將重要消息觸達到用戶或者濫用消息，則失去了消息通知的初衷。特別是針對涉及復(fù)雜任務(wù)流程的產(chǎn)品，消息類型繁雜，難以全面盤點消息類型，消息系統(tǒng)的設(shè)計就顯得尤為重要。

希望通過這篇文章讓各位在設(shè)計消息通知系統(tǒng)的時候能夠更加全面高效。

如何「理解」消息通知

消息通知需要為產(chǎn)品服務(wù)，幫助用戶快速獲取對應(yīng)的通知信息。收到一條新回復(fù)的提示、工作臺展示工作進度、朋友的來電，生活中處處是信息的交換。在 App 和網(wǎng)頁應(yīng)用中最常見的信息交換方式則是消息通知。

消息作為一種信息交換方式，抽象其過程，即為“在達到某一觸發(fā)條件下，由發(fā)送方發(fā)送消息給到接收方，接收方可針對此條消息提供反饋”。需要包含以下關(guān)鍵因素：

消息觸發(fā)時間與條件（何時什么事）：如按周期重復(fù)的時間點，或系統(tǒng)狀態(tài)變更、用戶操作結(jié)果等；

消息發(fā)送方（誰發(fā)現(xiàn)的事）：可能是系統(tǒng)、第三方服務(wù)商，或者某個用戶；

消息接收方（誰需要知道）：即接收方，可能是系統(tǒng)中的全部用戶，也可能會根據(jù)權(quán)限劃分推送到某個用戶群組，或者是某個特定用戶；

消息觸達渠道（怎么找到他）：短信、電話、App 內(nèi)通知等；

消息通知內(nèi)容（告訴他什么）：短信的文本、電話對話內(nèi)容、通知消息的文案等消息通知；

消息操作反饋（他可以干嘛）：主要分為只讀與操作反饋。只讀，即當(dāng)前消息用戶在瀏覽后不需要做更多的操作，主要以了解為主；操作反饋，即當(dāng)前消息需要用戶瀏覽，且在瀏覽后做相應(yīng)的后續(xù)操作。

好的消息系統(tǒng)要滿足什么條件：

全面：通知的消息項要完整全面，用戶才能放心地通過消息通知系統(tǒng)了解消息更新內(nèi)容；

及時：消息的觸達方式要及時有效，在消息相關(guān)事件發(fā)生后，用戶能在第一時間獲取到信息并提供操作反饋給到消息發(fā)送方；

高效：能通過合理的消息發(fā)送途徑，允許用戶設(shè)置及合并相似信息等方式避免過多消息侵?jǐn)_用戶，讓用戶能夠高效處理消息通知。

如何「盤點」消息通知

設(shè)計全面、及時、有效的消息通知系統(tǒng)需要對消息的六個關(guān)鍵因素進行全面盤點，通過分步的方式逐步完成消息通知系統(tǒng)的設(shè)計。主要分為以下三步：

① 盤點系統(tǒng)中包含的消息項：包含其觸發(fā)條件、通知來源及通知對象。需要盤點完整消息項從而保證消息系統(tǒng)的完整性；

② 確定消息觸達渠道：包含各消息項的觸達渠道。讓所有消息都能觸達到用戶的同時，能夠讓重要信息更易觸達，保證消息通知的及時性；

③ 撰寫通知內(nèi)容與操作反饋：包含各消息項的通知內(nèi)容與操作反饋。讓消息內(nèi)容能夠有效地傳達給用戶，讓用戶能快速反饋、操作。

盤點的過程，即對消息通知清單的梳理。與產(chǎn)品、研發(fā)等團隊成員的溝通也將使用該清單。最終目標(biāo)即完成下方表格的填寫：

1. 盤點系統(tǒng)中包含的消息項

當(dāng)前步驟需要對系統(tǒng)中可能會有的消息項進行完整的盤點。盤點消息項可以通過按消息類型走查方式完成。市場上比較有共識的消息的分類方式主要分為禁止、警告、成功三類。但是在實際設(shè)計工作中還需要配合以下的消息分類方式去更完整地盤點消息項：

盤點出的每個消息項

都需要補充以下四個關(guān)鍵因素：

觸發(fā)條件：結(jié)合產(chǎn)品核心場景梳理完整?？赏ㄟ^狀態(tài)圖或泳道圖查缺補漏（詳見下段內(nèi)容）;

通知來源：可能是某個內(nèi)部系統(tǒng)，可能是某個用戶組，也可能是某個具體用戶。用戶組的劃分需要提前與產(chǎn)品、研發(fā)同事溝通完成；

通知對象：可能是全部用戶，也可能是某個用戶組或具體用戶。由觸發(fā)條件中的場景決定；

重要性：需要與團隊溝通得出，可使用“高”、“中”、“低”的分類方式。

盤點完成的消息項使用下表進行整理，方便產(chǎn)品、設(shè)計、研發(fā)之間的溝通。

用流程圖或泳道圖查缺補漏：

對于 ToB 或 ToG 類含有復(fù)雜狀態(tài)轉(zhuǎn)換以及任務(wù)流的產(chǎn)品，除了使用分類的方式盤點消息項，還需要對照流程圖或泳道圖查缺補漏，避免消息類型的遺漏。

如，顧客線上購買商品并收取商品的商品相關(guān)狀態(tài)變化如下圖所示，每個狀態(tài)都可對應(yīng)著一條消息項：

線上購物過程中的消息流程圖示意

當(dāng)系統(tǒng)內(nèi)包含多角色，且角色間流程有交互時，則可以使用泳道圖的方式進行梳理。在泳道圖中的每一條狀態(tài)變更線，都對應(yīng)著一個狀態(tài)變更提醒。其中角色間交互的線，由于需要角色主動處理方可進入下一流程狀態(tài)，這條消息一般會成為一條待辦消息。

什么類型的消息不要納入消息通知系統(tǒng)：

需要注意的是，雖然通知的完備性很重要，但某些消息在前期梳理時就需要從清單中剔除，包括：

• 單純問候類消息，如“好久不見”等
• 不需要用戶知道的消息，如系統(tǒng)后臺數(shù)據(jù)更新等

2. 確定消息觸達渠道

確定要推送給用戶的消息類型后，需要給各消息匹配適合的通知方式。不同的通知方式會有不同的適用場景，可對照下表結(jié)合第一步整理的重要性配置消息的觸達渠道：

消息觸達渠道的配置結(jié)果到第一步的表格中：

平衡通知量：

一個好的消息系統(tǒng)需要能有效觸達的同時不過分侵?jǐn)_用戶。這就要求我們對系統(tǒng)實際運行中可能會出現(xiàn)的通知量進行預(yù)估，并適量調(diào)整通知方式，讓重要的消息能夠更有效及時地觸達到用戶。最終調(diào)整后的消息數(shù)量與提醒強度的關(guān)系最好能形成如下圖所示金字塔的模式。

提醒強度與消息數(shù)量的金字塔關(guān)系

合并重復(fù)消息：

對于出現(xiàn)頻率較高，且用戶不需及時了解每條消息的消息項，可以通過合并消息的方式減少通知的數(shù)量。合并主要有兩種方式：合并流程過往節(jié)點信息和合并同類消息。

• 合并流程過往節(jié)點消息：對于一些流程類通知，若用戶在響應(yīng)或查看前，流程已經(jīng)進入到下一階段，歷史節(jié)點的信息已經(jīng)無需了解時，可合并過往流程節(jié)點的消息。如淘寶在展示物流時，針對同一訂單的物流，僅保留最新的一條。
• 合并同類信息：對于同類型消息過多，且用戶不需要一一查看，只需在用戶有需要的時候提供入口查看完整內(nèi)容時，自動合并同類型的消息，減少對用戶的打擾。如 Instagram 在展示用戶動態(tài)信息時，會合并同一天同一類型的消息。

兩種合并消息方式

智能推送：有條件的系統(tǒng)可根據(jù)用戶行為分析及用戶畫像，進行智能推送。如基于用戶畫像按類型推送運營類消息，基于用戶接受消息數(shù)量，判斷是否合并消息推送等。

渠道間消息項的延續(xù)與統(tǒng)一：

出于信息持續(xù)性的考慮，觸達渠道之間有部分關(guān)聯(lián)關(guān)系在制定消息觸達渠道時需要注意，如：

• 若系統(tǒng)包含 App、web 等不同端，相同通知類型的消息要保持統(tǒng)一
• badge 提示需要在應(yīng)用內(nèi)消息通知模塊有對應(yīng)消息提示
• push 消息的文案需要與應(yīng)用內(nèi)消息中心保持一致

3. 撰寫通知內(nèi)容與操作反饋

通知的內(nèi)容需要滿足簡明易懂的同時，還要讓用戶能夠快速處理。根據(jù)大量經(jīng)驗總結(jié)，通知內(nèi)容的撰寫可使用一個通用撰寫公式：

在應(yīng)用撰寫公式寫內(nèi)容時，需注意以下要點：

• 重點前置：用戶觸達的第一場景，可能是手機的 push 消息，可能是多個消息的列表。這就要求在撰寫文案時要將重要信息前置，如驗證碼、還款金額、事件提醒名稱等。
• 敏感信息保護：由于無法確認(rèn)用戶獲取信息的場景是否私密。對于金額、個人信息等隱私數(shù)據(jù)，建議在應(yīng)用內(nèi)或其他渠道提供設(shè)置項，提供用戶自主選擇是否在消息通知中包含具體數(shù)值。如果要默認(rèn)顯示，需要提前告知用戶。
• 來源信息露出：在郵件、短信等非產(chǎn)品自有渠道推送消息時，用戶可能會不確定消息的來源是否官方，需要包含消息來源信息。
• 提供觸發(fā)時間：當(dāng)消息的發(fā)生時間對用戶后續(xù)判斷、操作有影響時，需要在通知內(nèi)容中包含消息發(fā)生的時間。

除了以上通用注意事項，由于渠道本身的特征差異，還需注意以下渠道相關(guān)的要點：

電話：需要設(shè)定客服話術(shù)標(biāo)準(zhǔn)，一般需要在會話開始前先告知用戶來電是誰、有什么目的。在講述完通知內(nèi)容后，還應(yīng)告知用戶如何處理當(dāng)前信息，如果想了解詳細(xì)內(nèi)容該前往哪個渠道了解。

短信-來源平臺：由于通知類短信的發(fā)送號碼可能會由于服務(wù)商設(shè)置的問題導(dǎo)致有多個發(fā)送號碼發(fā)送給用戶，用戶無法根據(jù)號碼判斷發(fā)件人身份。故需要在短信最開始說明平臺來源，建立品牌認(rèn)知，避免用戶錯認(rèn)為是垃圾短信。如：「騰訊科技」***

短信-操作反饋：由于大部分短信為純文本短信，相關(guān)操作反饋需要通過鏈接或者路徑指引的方式提供。若短信包含詳情鏈接，鏈接最好能設(shè)置為保留根域名的短鏈，如：點擊了解詳情：cdc.qq.com/d8djei

郵件：與短信相似會有來源可信度問題，郵件內(nèi)容需包含品牌元素，同時發(fā)件的郵箱地址后綴使用產(chǎn)品官方網(wǎng)站。另外需要注意，某些郵件軟件會設(shè)置不自動下載圖片，郵件重要內(nèi)容不要使用圖片。

push 推送（移動端）：是消息在移動端的特有觸達渠道，由手機系統(tǒng)發(fā)送。發(fā)送的信息格式會受系統(tǒng)要求有所限制。最新的推送要求可參考相關(guān)設(shè)計規(guī)范文檔或接口規(guī)范。應(yīng)用的 icon 與名稱系統(tǒng)會自動補充，撰寫文案時不用包含。

微信公眾號（訂閱號/服務(wù)號）：由于微信對訂閱號與服務(wù)號的消息推送方式會經(jīng)常變化，需要確認(rèn)最新的要求并撰寫文案。

在完成通知內(nèi)容以及操作反饋的梳理后，對消息梳理表格進行更新，補充相關(guān)信息：

自此，消息項的盤點已經(jīng)完成，后續(xù)可基于該表格與產(chǎn)品、研發(fā)溝通。當(dāng)業(yè)務(wù)出現(xiàn)變更時，也需要對表格內(nèi)容進行同步更新。

如何「設(shè)計」消息中心

消息通知的觸達渠道中，電話、短信、push 推送的呈現(xiàn)由系統(tǒng)決定。但是若產(chǎn)品有獨立 App，往往需要消息中心去承載全量的消息列表。本章會介紹如何設(shè)計消息中心。

不同應(yīng)用的消息中心處理方式受產(chǎn)品定位、應(yīng)用框架等因素影響，設(shè)計差異化較大。但是可以通過按路徑分割去簡化設(shè)計：消息中心的入口、消息列表的組織方式、消息卡片的樣式、消息的設(shè)置等幾個部分。

1. 消息中心入口

主要有底部 tab、個人中心附近的圖標(biāo)入口、個人中心的菜單項等三種入口形式：

消息中心的三種入口

• 底部 tab：一般適用于產(chǎn)品核心功能中包含大量用戶間通訊，或者希望通過強化消息露出來促進用戶上傳更多內(nèi)容。對于重要的消息類型可提供數(shù)字 badge 作為未讀消息數(shù)量的提示；
• 頂部圖標(biāo)入口：一般適用于產(chǎn)品消息數(shù)量較少，或消息對產(chǎn)品核心場景的影響較少的情況。一般會在首頁的頂部，或個人中心頁的頂部有一圖標(biāo)作為入口。圖標(biāo)會包含數(shù)字 badge 作為未讀消息數(shù)量的提示；
• 個人中心菜單項：一般適用于當(dāng)產(chǎn)品頂部空間作他用，沒有圖標(biāo)入口的位置時使用。

2. 消息列表

從消息中心入口點擊后跳轉(zhuǎn)到消息列表。由于消息的即時性，需要按時間維度排列。但是如果產(chǎn)品的消息類型較多，可通過分組合并或者分 tab 的方式提升用戶觸達消息的效率。

分組合并消息列表

分 Tab 合并消息列表

對于通知類型復(fù)雜的系統(tǒng)，還可使用二級列表的形式對消息進一步分類展示，如微信及支付寶，由于其包含大量第三方服務(wù)，消息復(fù)雜，均設(shè)置了二級消息列表幫助用戶分類查找消息。

二級消息列表

3. 消息卡片

消息列表中的卡片有兩種樣式可選，一般在一級消息列表使用小卡片樣式，讓用戶有更高的瀏覽效率。大卡片樣式則用于二級消息列表，或當(dāng)前應(yīng)用的消息數(shù)量較少時。

消息卡片應(yīng)用示意

4. 消息中心設(shè)置

一般位于消息中心列表頁右上角，若可設(shè)置項較多，則提供設(shè)置入口在二級頁設(shè)置。一些常用的消息設(shè)置項如下：

全部已讀：對于消息數(shù)量較多，且未讀態(tài)會影響 badge 的展示時需要提供該設(shè)置項。點擊后設(shè)置列表消息項全部已讀。

發(fā)起對話：若系統(tǒng)包含通訊功能，一般會在消息類表頁提供發(fā)起對話的快捷入口。點擊后跳轉(zhuǎn)到通訊錄或好友列表。

設(shè)置通知提示方式：提供按消息類型設(shè)置某些通知項的接受渠道、接收時間段、各渠道之間的已讀聯(lián)動等，如微博；或者讓用戶選擇消息通知的精確度，是否包含具體信息，如微信可接收“您收到了一條信息”的模糊消息。

打開消息推送權(quán)限：一些應(yīng)用有一些狀態(tài)更新或重要的提醒需要用戶在系統(tǒng)設(shè)置中打開當(dāng)前應(yīng)用的通知權(quán)限，會包含提示用戶打開通知的功能。這些提示需要在用戶進行了如“辦理事項”、“上傳狀態(tài)”等發(fā)起流程的操作后提示。不建議在用戶啟動 App 時就彈窗提示打開通知。

總結(jié)

本文是對消息通知系統(tǒng)設(shè)計的初步介紹，希望能幫助到新手產(chǎn)品、交互、產(chǎn)品體驗設(shè)計師快速了解消息通知系統(tǒng)的內(nèi)容盤點與消息中心的設(shè)計方法，制定及時、高效、完整的消息通知系統(tǒng)。