<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          《如何定義APP視覺品牌》——設計流程與操作方法淺析

          ui設計分享達人


          概念簡述 

           

           

          視覺品牌這一概念,既陌生又熟悉。大部分ui設計師都或多或少做過視覺改版或者風格升級,先來看兩個概念:視覺風格&視覺品牌。

           

          ▲視覺風格&視覺品牌重點偏向

           

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

          ▲視覺品牌作用

           

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


          流程

           

           

          那么,如何定義好產品的視覺品牌?借企業文化里的一句話:做正確的事,并把事情做正確。在設計工作中,這句話也有一定的指導意義,我們先要確定是否要做視覺品牌,再用合理的流程規劃好每一步。

           

          結合過往的業務經驗來看,對于已有視覺風格的產品來說,需要滿足以下兩個情況之一才是最適合做視覺品牌工作的時候:1、產品轉型、重大業務調整(包括用戶人群、需求變化等);2、與相關行業設計語言水準差距巨大。另外需要考慮的還有時間安排,由于整個流程耗時需要大約12周(3個月),所以設計師前期就要做好時間規劃。

           

          確定要做視覺品牌工作后,需要準備哪些資料?項目環節和流程如何?讓我們來看下這12周需要做的事情和基本順序:

          ▲視覺品牌的流程

           

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

           

          1 、品牌定位資料熟悉

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

          ▲案例:vivo瀏覽器品牌屋

           

          圖中為瀏覽器品牌屋資料案例,經過項目成員討論,瀏覽器產品最終關鍵詞:智慧、有趣、默契、可靠、年輕。

           

          2、 明確視覺品牌關鍵詞

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

          ▲明確視覺品牌關鍵詞

           

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

           

          3、 關鍵詞發散和可視化

          發散

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

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

           

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

           

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

          ▲Design OtoO方法 

           

          這套工具方法的核心步驟分別是:收集,組織,反應,評估。每一步都有一些工具模型可以套用,能夠較準的幫助大家達到目標,找出合適的關鍵詞。

           

          可視化

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

          ▲情緒板拼貼常用方法

           

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

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

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

           

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

           

          (1) 色彩

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

           

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

          ▲提煉色彩需要重要關注4點

           

          需要注意的有以下幾點:1、已有的品牌色是否要延續使用 2、選中顏色需要后期調整三元素,達到最好的視覺效果  3、如果有輔色,主輔色多結合色環考慮合理性 4、你選的顏色是不是和市面競品太過雷同,是否要做點差異化?

           

          (2) 圖形

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

           

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

          ▲vivo積分商城貨幣符號發散腦暴會現場

           

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

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

           

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

          ▲6種常見圖形創意手法

           

          (3) 文字

          嚴格意義上,符號里的文字也是圖形的一種。不過,針對用文字來做的符號,可以參考字體創意設計的10個方法。這里不一一闡釋含義了,大家可以在網上找到更多每一類圖形的案例和應用解說。

          ▲10種常見字體創意設計方法

           

          (4) 質感

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

          ▲質感素材專題

           

          (5) 構成

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

          ▲9大圖形構成

           

          案例

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

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

           

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

           

          ▲vivo瀏覽器背景設定

           

          在這個方案中,設計師從情緒版提取了想要的特征(圖片中藍色文字):

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

          圖形藝術:延續地球元素,情緒版提煉的:大圓角、簡單幾何、Q型,描邊圖形,線面結合。

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

          構成:結合情緒版和圖形構成9個方法,提取并運用的主要特征是動勢,也是想賦予符號活力感受。

           

          最后,經過草稿比稿,評審通過的方案和確定的符號5個特征如下:

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

           

          5、 完善主要頁面

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

           

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

           

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

           

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

          ▲缺省圖樣式(6/8特征)

          ▲裝飾icon圖樣式(4/8特征)

          ▲特殊彈出層樣式(4/8特征)

          ▲視頻操作引導樣式(4/8特征)

          ▲應用在整體頁面效果

           

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

           

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

          ▲短視頻品牌符號以及圖形應用解說

          ▲短視頻品牌符號頁面背景應用

          ▲ 物料拓展概念

           

          6、驗證視覺風格喜好

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

           

          關于風格測試,是將已有的方案通過問卷和簡單的線下訪談,得出用戶的喜好結論。因為是敏捷測試,只需要一周就可以出結論。在這一步,有5條測試重點和對應解讀需要設計師關注,具體內容參考下圖:

          ▲5條測試重點與解讀

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

          ▲i視頻視覺品牌3套方案風格測試復盤

          ▲vivo瀏覽器視覺品牌升級核心頁面風格測試

           

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

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

           

          8、 整理成視覺品牌規范手冊

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

          ▲視覺品牌規范手冊4大模塊

           

          目前我們已經梳理出vivo瀏覽器、短視頻的視覺品牌規范手冊。內容包括4個部分:品牌概述、品牌符號、視覺語言、物料規范。對產品的視覺品牌理解和如何應用會完整的體現在手冊里,建議每一個參與項目設計師都應該在設計前先整體看一遍。

           

          結語

           

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

           

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          文章來源:站酷。 作者: vivo互聯網UED
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

           

          應用程序設計中的色彩原則

          ui設計分享達人

          顏色會潛意識地為觀看者提供有關應用程序的大量信息,即使他們從未閱讀過任何文字。


          什么是色彩心理學?

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

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

          這對應用程序設計意味著什么?

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

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

          這項調查要求人們選擇與某個詞相關的顏色。他們發現:

          • 信任 = 藍色(34% 的受訪者)

          • 速度 = 紅色 (76%)

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

          • 高品質 = 黑色 (43%)

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

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

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

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

          應用程序設計人員在開發應用程序時最好牢記這些關聯。然而,這些都不是應用程序開發人員絕對必須遵循的硬數據。相反,它們是開發人員可以遵循的指南,并結合下面討論的其他設計原則。


          圍繞顏色的文化差異


          在選擇顏色時,牢記應用程序的受眾始終是至關重要的。

          例如,在西方文化中,白色往往代表純潔或純真。然而,在亞洲的某些地區,白色是用來表示哀悼、厄運和死亡的。顯然,如果應用不當,這可能會產生嚴重的意外后果。

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


          選擇主調色板


          應用程序設計人員和公司等都應該在確定其品牌的主要調色板之前進行仔細研究。最重要的是考慮觀眾和他們想要傳達的內容。

          藍色是一種流行的顏色,因為它與信任和可靠性有關,但它也變得有點過度使用了。

          橙色可以與廉價聯系在一起,但也可以與樂趣聯系在一起。

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

          更好的使用顏色來設計應用將有助于塑造觀眾的感知。設計人員需要了解顏色關聯以及用戶如何下意識地查看設計以創建成功的調色板。


          色彩和諧


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

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

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

          這里有一些設計師可以遵循的基本原則,以在他們的設計中創造和諧的色彩。


          單色

          首先是在整個設計中堅持使用相同的顏色,但使用不同的色調。這增加了產品的興趣但又不會很突兀。


          類似色

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

          此方法可以使用色盤上彼此相鄰的顏色。例如,綠色和藍色,或橙色和紅色。


          互補色

          互補色方案使用調色板上彼此相反的顏色。例如,黃色和紫色或藍色和橙色。

          使用互補色時,設計師必須仔細選擇陰影和色調。如果做得不好,很容易創建一個視覺上不和諧的方案。

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


          分裂互補色


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

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


          正確的應用程序設計顏色

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

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          文章來源:站酷 作者:ZZiUP

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

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          移動端信息超載設計怎么做?

          資深UI設計者

          移動端由于屏幕尺寸較小,而產品經常需要展示過多的信息,因此對用戶瀏覽行為進行設計,即“頁面信息超載設計”。

               從兩個大環境下看待這個問題,一個是移動端產品,另一個是PC端產品,這里我們主要討論移動端產品。

          由于移動端頁面尺寸較小的特性,常常無法像PC端那樣在一個頁面中展現出多信息多任務,因此在面對多級的信息架構設計時,最常規且傳統的做法是將某一場景/任務下的信息,通過設計頁面的跳轉/或增加頁面的長度來實現。

          但是一個現實的問題在于,用戶愿不愿意滑動?根據埋點數據顯示,在首屏沒有做好內容曝光的前提下,多數移動端頁面超過首屏的內容點擊量會急劇下滑,說明用戶很少主動的查看一屏以外的內容。

          因此對于移動端產品來說,一些重要的內容必須保證用戶在一屏內可以看到,而用戶有必要進一步閱讀的內容也需要做好用戶瀏覽行為的引導。

          從適用場景角度,可將信息超載的設計類型分為「頁面展示信息超載」和「頁面版塊信息超載」,本文將分為上下兩節針對此將進行詳細的案例分析分享。

          頁面展示信息超載

          根據不同的用戶需求以及適用場景,當用戶僅限于當頁的瀏覽時,如何保證大量的信息能有節奏、有目的的傳達給用戶是我們需要考慮的。

          在此類型中主要實現手段有隱藏化設計、場景分頁、無限加載、向下展開按鈕。

          隱藏化設計

          在探索更多業務場景的同時,APP的迭代不僅僅是優化更需要考慮功能的疊加,強調不同的場景聚焦于不同的核心信息上成為了重中之重,為了向用戶營造一種架構全面而使用簡單的用戶體驗,隱藏化設計的概念可以幫助我們拓展更多交互的可能性。

          優勢:

          1. 滿足用戶不同場景不同需求

          2. 產品架構更清晰,用戶使用更簡便

          劣勢:
          沒有提示和線索的隱藏則需要做好新手引導,如早期微信小程序的下滑打開方式等。

          適用性:
          適用于一些多場景的產品,和用戶場景具有明顯行為特點的產品功能模塊中

          交互細節:
          結合上面的案例展示,主流app的隱藏化設計主要體現于卡片模態面板、屏幕擴展、浮窗。

          卡片模態面板

          自從19年ios13發布新設計特性,卡片模態面板就陸陸續續被運用到各大產品中。

          1. 使用熱區高頻于屏幕的中下方,且手勢方便快捷,適合單手操作,因此廣泛的用于一些出行類的app

          2. 具有可伸縮的特性,可適用于一個頁面的不同場景

          3. 處理當前模態面板的任務時,仍然可以看到面板后的界面環境,并不會讓用戶有太大的抵觸感。

          4. 但是使用時需要注意,模態的用途是切換任務狀態,不要僅因為喜歡它的樣式和動效而使用。

          5. 不適合用于展示沉浸閱讀內容,建議設計于復雜度不高的支線任務。

          屏幕擴展

          如案例展示的系統負一屏、蝦米音樂)

          當頁面的功能屬于重要但低頻時,可以考慮使用屏幕擴展進行設計。

          此類型常見的交互設計方式有兩種:一種是常見于各大手機系統主頁以及微信的“負一屏”設計;另一種是app首頁的“二樓”設計,如上面案例展示的“蝦米番你街”,還有淘寶之前推出的“淘寶二樓”。

          使用時需要最注意的是:

          此形態的設計和產品賣點已經運營思路是緊密相關的,需要綜合考慮

          浮窗

          這個控件的使用可能會和屏幕擴展的使用聯系較為緊密,從微信前期浮窗的使用情況來看,不排除是為了解決當使用小程序時無法接受到新消息,但又怕退出后無法找回而產生的焦慮感而誕生的功能。但同樣也是為了解決用戶不同場景的不同任務需求。

          但當浮窗中只有一個待看文章時,需要單擊浮窗后再點擊熱區才能打開內容,兩次點擊行為可以考慮是否有優化的空間。

          除了隱藏化設計,以下傳統頁面信息過載的處理方式也值得思考:

          場景分頁

          翻頁場景常伴隨著分頁器的使用,通過上下頁翻閱來進行信息瀏覽。

          優勢:

          1. 快速告知用戶信息量

          2. 可自主性選擇瀏覽內容

          3. 便于定位回找

          4. 瀏覽信息更有節奏感

          劣勢:
          需要點擊跳轉來獲取更多內容,如果設計不符合使用情景,會在一定程度上打斷用戶的思路,很有可能就會導致用戶的流失。

          適用性:
          移動端中可適用于一些對內容的掌控更強的場景,需要用戶更專注,如后臺表單等,

          但隨著移動互聯網的發展與移動設備的普及,早期的網頁端社區類產品和線下書籍的閱讀也開始嘗試轉戰移動端,可受限于功能形式和用戶習慣的使用差異,以至于需要在兩端之間做好平衡,去考慮用戶操作習慣以及兩端適配的問題。

          因此,較為早期的一類互聯網產品和由線下普及到線上的場景,會采用分頁的方式來綜合用戶在兩者之間的行為習慣,我們也可以看到像知乎這類普及于移動端的產品都并沒有選用分頁的方式進行內容的設計,而是直接設計貼合用戶移動端行為習慣的交互方式。

          交互細節:
          在移動端使用分頁器,一般常見為滑動條和動作面板這兩種控件進行設計。

          仔細去體驗了這兩款產品,發現它們的分頁并不是單純意義上的分頁,而是整合了無限加載與分頁選擇。

          類似于無限加載下滑,但是會自動定位到具體頁數上,比如我滑了 6 次,頁數就到了第 2 頁了。

          從這里看出,移動端出現內容加載的情況時,還是以無限加載為主要方式,即使有分頁,也是輔助作用。

          引發思考:

          滑動條的選頁方式也考慮在滑動滑塊的過程中頁面展示跟隨滑塊位置而變化,選定內容位置后點擊確認,否則可以點擊取消回到選擇前原來的位置。

          無限加載

          即無限滾動加載,通常以 Feed 流/瀑布流的形式出現于產品中,允許用戶通過滾動瀏覽大量內容而不刷到頁面最底層的技術。當你向下滾動頁面時,這種技術將會持續地刷新頁面。

          優點:
          沉浸式信息瀏覽,不會被打斷,增加用戶參與度,促進用戶停留更長時間。

          比起小熱區范圍的點擊行為,滑動對于用戶來說更為簡便更友好,尤其在移動端可以快速瀏覽到感興趣的內容

          缺點:

          1. 無法預知有多少信息,用戶容易產生迷失感,卻無法回定位內容

          2. 對頁面性能要求更高,用戶向下滾動頁面越多,頁面上承載的內容就越多,會導致頁面性能越來越慢

          3. 對設備資源要求更高,在含有大量內容的app中,資源有限的設備(如iPad)可能由于其已加載的內容信息過多而開始降速

          適用性:
          在移動端更方便使用,適用于快速瀏覽內容和發現內容的場景,如休閑娛樂為主的社交型產品/資訊性產品

          交互細節:
          對于這類交互形式,最高頻的用戶需求是回到頂部和資訊內容的刷新以快速尋找感興趣的內容。


          回到頂部

          這類需求常規解決問題的方式是點擊界面頂部回到頂部(ios用戶常用操作),除此之外最常規的操作是在頁面右下角的回到頂部懸浮按鈕。

          還有一種結合用戶心理認知的交互行為設計——底部欄首頁icon的利用,如上面案例的淘寶和同花順,點擊首頁icon可回到初始位置重新加載,淘寶/同花順過把這一隱藏操作顯性化,并且合理利用用戶回到頂部的需求,當用戶不斷下滑頁面時icon變成火箭/刷新的樣子,點擊后立即回到頂部并可進行所有資訊的重新瀏覽。


          尋找感興趣的內容

          無限加載最大的優勢就是能幫助用戶快速瀏覽以找到感興趣的內容,但當頁面本身預加載的內容就都不能吸引用戶興趣,就需要考慮如何通過設計幫助用戶找到真正感興趣的內容。

          如上面案例的同花順和知乎,當瀏覽同花順時,長時間沒有點擊進入任何一篇文章時,在瀏覽中部就會出現刷新提醒;當在知乎的搜索結果頁滑動大概3屏后,知乎會分析判斷用戶沒有找到他想要的信息,于是出現“向知友提問”的按鈕,引導用戶直接提問自己想要的(亮點之處在于對用戶行為進行潛意識分析,而不是全程展示這個提問按鈕,避免減少用戶實際瀏覽區域,造成干擾)。

          向下展開按鈕

          在pc端的網頁中,為了折中分頁和加載的利弊,常常會選用“查看更多”的按鈕,點擊后向下繼續進行加載,同時也能給用戶更多的停頓和節奏去主動的獲取更多的信息。

          而對于不停強調活躍度的移動端的產品來說,向下展開的“查看更多”按鈕,不僅僅只是折中的思考,還有運營層面的考慮。

          (向下展開更多的情況還分為兩種,一種是向下展開更多選擇,另一種是向下展開看到全部內容,以下講的更多是后者)

          優勢:
          產品運營層面

          1、增加點擊促進引流/轉化

          引導注冊、關注、付費等的轉化

          2、為精準推薦提供更多依據

          網站可以通過用戶點擊“閱讀更多”按鈕的行為,獲取有效點擊的用戶數,精準收集用戶閱讀喜好,開發完善用戶畫像,便于日后精準推送某個作者、某類作者、某類文章給點擊的用戶以及相似的用戶群體,優化智能推薦。

          3、判斷文章真實質量

          通過文章點擊的人數、點開率等對創作者進行管理,便于把控平臺內容質量,重點支持優質創作者,從而建立更好的內容生態。

          用戶層面

          1. 增加半遮面的神秘感

          2. 保證穩定快速的閱讀體驗,提升加載性能

          3. 降低閱讀成本

          劣勢:
          若不是為了提升轉化率或者增加曝光率,僅是展示型文章,就會犧牲掉部分的用戶體驗。

          適用性:
          適用于需要考核的內容創造者、需要收集更多用戶數據的產品

          總結

          移動端由于界面空間有限,具有「一個界面一個任務」的特點,因此當面臨產品增加功能時,不能一味在界面中進行功能的堆積排列,而應該更強調于頁面場景化的設計,同時頁面中的每一個細節設計都應該做到恰到好處,減少用戶思考是否需要使用的精力。

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          文章來源:站酷 作者:六月星光

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

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          金剛區的交互設計思考

          資深UI設計者

          金剛區是什么,想必大家都有所了解。

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

          不止畫圖標!5 個金剛區的交互設計思考

          圖片來源:淘寶首頁

          我在微信上搜了一下,發現大部分討論金剛區設計的文章,都是在講怎么畫圖標。

          但是我自己在使用各大 APP 的過程中,發現很多金剛區并不是那么好用,而且這跟圖標好不好看無關。

          金剛區設計不好,會對我的使用造成直接影響:

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

          我今天就來總結一下,對于金剛區設計的交互/體驗思考:

          • 數量
          • 順序
          • 顏色
          • 樣式

          數量

          金剛區里有多少項比較合適?

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

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

          不止畫圖標!5 個金剛區的交互設計思考

          現在,半分鐘回憶一下,你記住了多少個?

          ……

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

          米勒的研究發現,普通人的工作記憶(Working Memory)只有 7±2 個信息塊。

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

          所以說,金剛區里的圖標數量,最好也維持在這個數,否則就是對用戶的記憶能力要求過高了。

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

          例如支付寶這個就過分了,好在這只是工具類產品,復雜一點也沒辦法:

          不止畫圖標!5 個金剛區的交互設計思考

          順序

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

          不止畫圖標!5 個金剛區的交互設計思考

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

          不止畫圖標!5 個金剛區的交互設計思考

          上圖來源:這樣設計表格,看著真難受!

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

          不止畫圖標!5 個金剛區的交互設計思考

          所以,用戶最有可能使用的圖標,應該從左到右排在最上面一行,最不常用的可以排在右下角。

          例如美團外賣這個設計,看著就挺合理。不但把重要內容放在第一行,而且還做了很大的視覺區分:

          不止畫圖標!5 個金剛區的交互設計思考

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

          顏色

          1. 仿真圖標

          如果追求質感,多半會使用物品本身的顏色,例如每日優鮮這個:

          不止畫圖標!5 個金剛區的交互設計思考

          這種圖標就沒什么顏色好討論了,注意一下整體和諧就好。

          2. 數量較少

          如果圖標數量不多可以使用一個顏色,那么顏色上,同樣沒什么好討論的。

          例如 QQ 音樂:

          不止畫圖標!5 個金剛區的交互設計思考

          3. 數量適中

          如果圖標數量在 7 個左右或以內,那么可以每種顏色的圖標都來一個,這樣用戶也能記住大概什么顏色代表什么。

          例如京東這樣:

          不止畫圖標!5 個金剛區的交互設計思考

          4. 數量很多

          圖標數量遠超過 7 時,就不可能每種顏色來一個了,否則顏色都不夠用了。

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

          當然,其實也可以簡單點,干脆都一個顏色,例如聯通手機營業廳:

          不止畫圖標!5 個金剛區的交互設計思考

          樣式

          1. 底框

          一些產品為了統一感,會用圓圈或者圓角矩形,把所有圖標都框起來。

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

          這種底框在主流產品里已經很少見了,不過這么做的設計師還是不少:

          不止畫圖標!5 個金剛區的交互設計思考

          這種圖標數量少,有顏色區分還好,如果數量多又一個顏色,那就很難辨認了。

          風格

          縱觀常見的金剛區圖標,通常不外乎四種樣式:線條、形狀、2D、3D、仿真。

          不止畫圖標!5 個金剛區的交互設計思考

          聯通手機營業廳

          不止畫圖標!5 個金剛區的交互設計思考

          QQ 音樂

          不止畫圖標!5 個金剛區的交互設計思考

          京東

          不止畫圖標!5 個金剛區的交互設計思考

          美團外賣

          不止畫圖標!5 個金剛區的交互設計思考

          每日優鮮

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

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

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          文章來源:優設  作者:ZoeYZ

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

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          feed流應該如何設計

          資深UI設計者

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


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

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

          一、feed流的主要組成部分

          筆者調研了不同類型的feed流,發現feed流主要由以下幾個部分組成。如下圖:

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

          1. 圖片/視頻

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

          其次是如果該位置出現的是視頻。在常見的視頻產品中,當系統識別出該內容處于用戶界面的中間區域,則會自動進行預告播放。在1-2秒的時間內,用戶能夠快速瀏覽視頻中最精彩的部分。在展現方式上通常使用帶有圓角的距形進行展示,圓角一般設置為:8、10、12、14、16、20PX。

          2. 標題

          在feed的設計中,標題是最不可缺少的部分,在字體的設計上,大多數采用黑色字體。在排布方式上在一行至兩行,如出現標題字數過多,可以用「 … 」的方式進行呈現。其次需要限制產品的創作者以及運營在配置標題時,注意文案應該簡明扼要,不要過于累贅。

          3. 文案

          該區域可以叫做文案區域或二級標題區域,在該區域的設計中,字體顏色建議大多數采用灰色進行展示。在文案的編寫上可以加入更帶有引導性的詞匯用于引導用戶點擊。

          4. 標簽

          標簽的出現目的主要有兩個方面,第一個方面是幫助用戶能夠快速的區分內容的種類如:預告、獨播、直播、精選、推薦等。用戶可以在眾多feed流中通過快速查看標簽進行篩選,從而快速找到自己想看的內容。

          第二個方面主要是幫助產品進行更加精準的流量分發,產品會根據用戶的操作習慣進行分群,再根據用戶興趣給每個群體打上相對應標簽。而這些標簽則是對應了不同群體的用戶,因此也就有了淘寶商城中千人千面的推薦形式。

          5. 輔助信息

          輔助信息主要是為了滿足不同產品的信息呈現,如在視頻平臺中,輔助信息可以承載電影評分、電視劇的集數、播放量、綜藝的更新日期、點贊數、評論等,甚至會加入相關的快捷操作如靜音。輔助信息在設計中,不易做的過于突出,需要清晰單個feed的信息層級,挑選必要的信息進行展現。

          6. 操作

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

          在交互形式上,點擊操作區域后,建議采用較為輕量的交互方式,如點擊后出現底部彈窗或氣泡的形式。

          二、feed流的形式

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

          我們還需要擁有能夠將前面提到的組成元素,拆開和重組的能力,因為不同的產品業務屬性不同,所需要給用戶提供的內容也就不同。接下來筆者就給大家介紹一下常見的feed流形式。

          1. 文字流

          介紹:文字流多在信息類產品如知乎、百度,或產品的用戶評論區當中。此類樣式可以運用在以文字為主的feed流設計中,并且還可以與動態流(下文會提到)之間搭配使用。

          由于適配度高,可容納更多的操作按鈕,因此可以服務與以UGC內容為主的產品,UGC產品需要強調用戶之間的互動,需要將互動類快捷操作外露。

          如下圖:

          使用場景:以文字為主的信息類產品,新聞資訊類產品、評論區、產品發現頁/社區

          設計要點:在文本流的設計中,需要注意的是區分信息的優先級,其中標題可以采用大字號加粗的方式進行區分,正文則可以采用黑色常規的字體。

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

          2. 大卡流

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

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

          設計要點:在大卡流的設計中,由于空間較大,需要注意標題和操作區域的擺放位置,其次是需要把控創作者或合作媒體上傳的圖片質量。最重要的是需要考慮適配橫屏和豎屏的封面,由于圖片比例的不同,會涉及到相關操作交互一致性以及視覺一致性的統一。

          3. 雙列流

          介紹:筆者認為將雙列流帶到用戶視野的產品非小紅書莫屬,從小紅書發布之初到現在一直采用雙列流的形式。它的好處是能夠最大限度的將以圖片為主的feed內容呈現給用戶。

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

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

          設計要點:在設計雙列流的過程中需要考慮左右兩列之間以及上下兩行之間的間距,由于內容與內容之間圖片的高度不同,標題字數不同,因此需要制定良好的規范,從而保證用戶在瀏覽內容的過程中保證兩列內容之間的節奏感。其次是控制操作按鈕的個數,需要根據產品實際需求,僅將最總要的操作進行外露。

          4. 沉浸流

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

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

          設計要點:由于在不同產品中,短視頻起到作用不同。

          比如在淘寶,短視頻的目的是給予用戶更直接的效果展示,讓用戶能夠快速的了解到產品的優點,從而下單。

          因此短視頻在淘寶詳情頁中的作用就是激勵用戶購買,所以會在左下角加入購買的鏈接。再比如在視頻類產品中,如優酷則是提供相關的電影片段,那么目的就是為了給產品中的電影播放區導流,因此在設計過程中也會有相應的改變。

          在使用沉浸流的過程中,需要結合實際項目需求,不能將抖音快手的設計方式直接照搬到自己的產品中,這樣容易導致產品功能割裂的情況。

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

          5. 動態流:

          介紹:微博和微信朋友圈是筆者認為將動態流使用的最為廣泛的產品,由于在這兩款產品中,內容過于豐富,不僅需要適配橫屏或豎屏的圖片/視頻,還需要考慮適配不同數量。

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

          使用場景:動態流可以運用在主打UGC的社區類產品當中,以及單個產品中的社區模塊。

          設計要點:由于發布內容的主題是合作的媒體以及用戶用于記錄個人生活,因此動態流的優勢非常明顯,可以適配不同數量的圖片以及用戶的自定義標簽,因此動態流很難說是呈現以圖片/視頻為主的內容,還是以文字為主的內容,需要設計師與業務冊進行協商,找到feed對于產品的定位是什么。

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

          6. 櫥窗流

          介紹:櫥窗流在近兩年越來越多的出現在各大產品中,由于頭部產品都在往超級APP的方向進行發展。

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

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

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

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

          三、總結

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


          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          文章來源:人人都是產品經理   作者:黑羊

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

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          為什么要用卡片設計?好在哪,怎么做?

          資深UI設計者

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

           

          undefined

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


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


          什么是卡片設計?


          卡片是一個UI組件,包含了某一個內容的信息和操作??ㄆ梢园鞣N元素,但它們都應該屬于同一個主題。

          undefined

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


          為什么它會如此流行?


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


          卡片通過強制內容適應卡片邊界和卡片布局上的限制來聚焦內容。設計師喜歡通過卡片混排大量內容,而無需擔心設計會變得雜亂無章。


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


          卡片 UI 設計流行的原因還有很多:


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


          • 易于閱讀:卡片不占用太多空間,并敦促設計師優先考慮其內容。不同的是,每張卡片都變成了易于閱讀的內容??ㄆ層脩舾菀渍业剿麄兏信d趣的內容。


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


          • 有利于響應式設計:卡片是矩形的,可以平滑地調整大小,以適應不同屏幕的水平和垂直正面,這意味著用戶可以在所有設備上獲得統一的體驗。


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



          什么時候應用卡片設計?


          這通常是當你有:

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


          • 信息瀏覽:當用戶瀏覽信息時,卡片的兼容性更好。


          • 任務管理:當可以將流程中的單個任務作為卡片進行說明時, 可以輕松組織卡片以獲取任務列表。任務管理應用在使用卡片式界面為用戶創建儀表板方面做得很好,其中每張卡片代表一個單獨的任務。


          • 類似項目:卡片最適合于異構項目的集合(當并非所有內容都是相同的基本類型時)。


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


          卡片解構


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

          undefined

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


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


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


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


          (5) 副標題: 副標題文本可以包含詳細介紹,如文章的署名或標記的位置。


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


          設計技巧


          有一些小的技巧可以快速提高卡片設計細節。


          1. 使用相關主題的圖片


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

          undefined


          2. 增加視覺層次


          卡片內的層次結構有助于引導用戶對重要信息的閱讀。將主要內容放在卡片的頂部,并使用排版來強化主要內容。使用空白和對比來分隔需要更多視覺分隔的內容區域。(彩云注:視覺層級對于信息表達至關重要?。?nbsp;

          undefined


          3. 限制內容長度


          一張卡片應該只包含重要的信息,并提出一個相關的觀點,以獲取額外的細節,而不是完整的細節本身。當我們試圖在一張卡片中放入太多內容時,卡片可能會變得很冗長,并失去與卡片類比的實際聯系,因為它不再像一張卡片了。 

          undefined


          4. 避免嵌入鏈接


          不要包含內聯鏈接,卡片應該自己鏈接。嵌入文字鏈接會讓用戶誤操作。 

          undefined


          5. 區分操作主次


          包含不同操作的卡片應該在視覺上形成對比。在下面的例子中,我通過使用一種較輕的色調而不是主要的按鈕風格來降低后續操作的視覺強度。 

          undefined


          6. 去掉分割線


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

          undefined


          如何做到視覺上更美觀?


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


          1. 使用圓角


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

          undefined


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


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


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

          undefined


          3.注意字體和留白


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


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


          一些優秀卡片設計的例子


          讓我們看看一些真實項目中的卡片設計案例:


          信息流中的卡片設計


          保持信息流卡片簡單是很重要的。它們應該有一個一致的、重復的結構,但是使用不同的圖片和字體大小來代表卡片中最重要的和最不重要的元素,以使讀卡片的人更容易理解它們。 

          undefined

          由Diseno Constructivo和Webpixels設計


          他們突出特色圖片和標題作為最突出的元素,這能幫助用戶決定文章或發布的內容是否適合他們。


          電商卡片設計


          產品卡片是一個很重要的東西,它可以幫助你將訪問者轉化為客戶。一張優秀的產品卡片應該能夠吸引人們的注意,激發人們獲得產品的欲望,激勵人們購買,并在搜索結果中得到高效推廣。 

          undefined

          由Webpixels設計


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


          如果產品有特價,不僅要在價格欄中注明促銷價格,還要注明常規價格,以及客戶可以節省多少錢。


          個人中心卡片設計


          簡介卡已經成為一個應用或網站中的功能模板。隨著個人品牌變得比以往任何時候都重要,卡片設計在這里也能發揮重要作用。 

          由Neelesh Chaudhary設計


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


          確保只包括必要的信息(例如,照片,名字,職業),讓你的“關于”頁面有剩余的細節來完善你的個人資料。


          儀表盤卡片設計


          儀表板的設計可以有很大的不同。但是所有的儀表盤都是用卡片做的。根據儀表板的類型,每張卡片可能包括概要信息、通知、快速鏈接或導航設計元素、關鍵數據、圖表和數據表。確保你為每個元素使用了正確類型的卡片。 

          undefined

          由Simmmple設計


          儀表盤卡設計允許用戶決定他們想要關注哪些數據。易于理解的UI,允許用戶精確地控制哪些數據需要在儀表板的前端做好。


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


          日常計劃卡片設計


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

          undefined

          由Neelesh Chaudhary設計


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


          卡片結構最適用于添加或刪除任務這樣的小改變,而不是改變像你的總體目標這樣的大想法。


          總結


          有幾種方法可以使卡片設計更加有效。通過最初定義和觀察卡片,我們可以更好地了解跨行業的這種設計模式。這也讓我們能夠推測用戶希望在這些卡片上采取什么行動??ㄆ谔峁┰S多不同種類內容摘要的環境中尤其有效,而不是簡單地作為內容列表的現代替代品。

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          文章來源:站酷   作者:彩云sky

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

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          適老化設計研究實踐

          資深UI設計者

          編輯導語:現今以至遙遠的將來,我們將面對一個殘酷的現實問題:人口老齡化。未來將有很多人群去關注這個群體,但是在市場上,對老年人的產品還是很少的,還存在很多問題。本文應對這個問題,展示不同適應老年人的產品設計細節,我們一起來看看。

          當前,我們正面臨老齡化問題的嚴峻挑戰。

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

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

          但是研究發現,市場上目前沒有產品很好解決了上述問題。

          當下移動APP產品缺少對老年人體驗的深層次關注與設計,只通過單一加大字號與簡化功能等解決基礎體驗,缺乏通過新技術應用和更全面的適老化設計服務老年群體,老年人的需求依舊未得到關注和滿足。

          因此,百度基于自身雄厚的AI技術和精細、系統的適老化設計適時推出百度大字版,使老年人更平等地獲取信息和服務、獲得情感陪伴。

          百度大字版精細系統的適老化設計研究實踐

          百度大字版精細系統的適老化設計研究實踐

          一、精細系統的適老化設計:易閱讀、易收聽、易操作、易理解

          目前行業內缺失成體系的老年人研究報告,針對老年人的研究資料分散在建筑/平面/醫療/家居等各個行業,同時業內也缺少針對老年人系統的設計標準或設計指南。

          現有無障礙設計標準針對殘障人士,且部分標準只適用于PC端,不適用于老年人和移動產品。

          因此在進行百度大字版的適老化設計時,我們系統的研究了老年人面臨的問題、PC端無障礙設計標準及其他相關資料,產出了系統的移動端適老化設計標準體系,同時結合百度大字版實際場景產出了解決方案。

          適老化設計包含:易閱讀、易收聽、易操作、易理解四個方面,后續將詳細闡述。

          百度大字版精細系統的適老化設計研究實踐

          1. 易閱讀

          隨著年齡增長,老年人會出現視力下降、色彩感知弱、動態視覺減弱的問題。

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

          眼睛晶體渾濁,晶體變黃的現象會導致色彩感知弱。視力減退,注意力降低,導致眼睛失去快速對焦的能力,動態視覺減弱。

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

          1)增大字號

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

          PC端WCAG無障礙設計標準建議字號可以放大到200%。

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

          此字號標準經過眼動實驗和用戶訪談進行了雙向論證,形成完整覆蓋各信息層級的字號大小標準,已經在百度大字版落地。

          百度大字版精細系統的適老化設計研究實踐

          字號與眼睛距離對照圖

          百度大字版精細系統的適老化設計研究實踐

          字號標準體系

          百度大字版精細系統的適老化設計研究實踐

          字號應用場景

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

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

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

          百度大字版精細系統的適老化設計研究實踐

          顏色的選取和使用

          3)提供有效的反饋提示

          老年人的動態視覺減弱,對動態內容的捕捉和感知速度明顯下降。

          因此,對界面中短暫出現的提示性信息,我們在現有提示時長的基礎上延長了一檔。

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

          現有提示的停留時間在5-7秒時,百度大字版延長到7秒。超出以上時間則提供適當的關閉機制,避免打擾。

          百度大字版精細系統的適老化設計研究實踐

          提示時長適當延長

          2.易收聽

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

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

          1)增大音量

          針對老年人聽力下降這一現象,我們適當增大了音/視頻的音量。

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

          百度大字版精細系統的適老化設計研究實踐

          iOS系統音量分布

          2)降低語速

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

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

          百度大字版精細系統的適老化設計研究實踐

          速度檔位選擇

          3.易操作

          移動應用需要通過手勢交互來完成任務,但老年人的肢體運動能力也會逐漸下降。

          動作精準度下降使老年人無法準確的完成手勢操作,對動作的精細控制程度降低。

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

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

          3)增大觸控區

          增大觸控區是使移動應用易操作的最簡單有效的方式,同時視覺設計上也需要讓老年人感知到觸控區增大。

          我們通過對iPhone XS Max三倍屏的分辨率和物理尺寸換算,結合人拇指和食指的點擊區域大小,推導出移動應用上,觸控區應大于等于112px×120px。

          百度大字版精細系統的適老化設計研究實踐

          觸控區域示意

          2)降低手指運動距離和操作精準度要求

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

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

          百度大字版精細系統的適老化設計研究實踐

          降低手勢操作的精準度要求

          3)提供明確的操作反饋

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

          百度大字版精細系統的適老化設計研究實踐

          振動反饋

          4)隱性操作顯性化

          為了減輕用戶的學習難度,我們將所有隱性功能或需要手勢操作觸發的功能進行了顯性化設計,如點擊底bar刷新,功能隱性不易發現,百度大字版采用動態刷新圖標的形式,增強底bar可點擊刷新的感知。

          百度大字版精細系統的適老化設計研究實踐

          隱性操作顯性化

          5)輔助用戶輸入

          現實生活中,很多老年人不會使用輸入法,而且肢體運動能力的退化也為輸入帶來了不便,移動設備的輸入法操作區域小難以精準操作。

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

          百度大字版精細系統的適老化設計研究實踐

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

          4.易理解

          隨著年齡的增長,人的認知能力也會逐步下降,老年人會出現反應慢、學習力下降、判斷力下降的情況。

          他們很難一遍學會新內容,也難以判斷信息的真偽。因此我們通過簡單直白的文案話術、清晰明確的圖標設計、可信的來源設計來使內容易理解,安全可信。

          1)采用通俗易懂的文案

          由于老年人觸網時間短、受教育程度不同,難以理解專業的互聯網術語,為了幫助他們更好的使用產品,我們對專業術語都進行了簡化,采用了通俗易理解的文案。

          百度大字版精細系統的適老化設計研究實踐

          文案適配前后對比

          2)提供清晰明確的圖標設計

          為了幫助老年人更好的理解和使用產品,百度大字版的圖標設計都采用了簡單易理解的圖形,同時功能入口大部分采用圖形和文字結合的方式,通過雙重手段幫助老年人理解產品功能。

          百度大字版精細系統的適老化設計研究實踐

          圖形對比示意

          3)提升信任感

          在內容信息來源中或涉及經濟交易的環節,百度大字版通過增加官方標簽、提供官方平臺保障的方式來提升產品整體的可信度,增強老年人對產品的信任感。

          百度大字版精細系統的適老化設計研究實踐

          官方標識和保障示意

          4)提供即時的幫助

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

          二、AI賦能,情感陪伴

          由于很多年輕人去大城市尋找機會,導致產生很多空巢老人,他們情感孤獨,缺少陪伴。

          疫情的爆發,更使老年人在節假日也難以與家人團聚。

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

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

          百度大字版精細系統的適老化設計研究實踐

          語音合成

          百度大字版精細系統的適老化設計研究實踐

          全局內容朗讀場景

          三、豐富內容,充盈生活

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

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

          百度大字版精細系統的適老化設計研究實踐

          智能字幕

          四、生活助手,便捷服務

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

          疫情導致線下服務線上化,因此為了幫助老年人適應這一生活方式的轉變,百度大字版提供了在線政務工具。

          很多老年人承擔了教育孫輩的責任,因此我們提供了一些輔助教學工具,幫助他們帶孩子。

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

          百度大字版精細系統的適老化設計研究實踐

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          文章來源:人人都是產品經理   作者:百度MEUX

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

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          2021-2022設計趨勢·社交APP篇

          資深UI設計者

          互聯網社交發展方向

          先來看看技術發展和現階段人口結構的變化對線上社交有什么影響。

          1. 技術上:

          2G 時代的社交實現了跨地域聊天,用戶可以在 QQ 里和天南地北的人聊天,強調在線狀態。QQ 號是用戶社交虛擬身份的 id,是用戶自我創造的線上人設。2G 時代的社交尋求更為方便的溝通方式。

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

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

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

          騰訊出品!2021-2022設計趨勢報告:社交APP篇

          2. 人口結構變化:

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

          00 后這一階段的出生率跌至了最低點,平時家庭、學校二點一線的生活,繁重的課業負擔,原本在親屬同輩圈的社交就少,在學校的熟人同輩圈的社交也越來越少。

          騰訊出品!2021-2022設計趨勢報告:社交APP篇

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

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

          騰訊出品!2021-2022設計趨勢報告:社交APP篇

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

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

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

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

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

          騰訊出品!2021-2022設計趨勢報告:社交APP篇

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

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

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

          騰訊出品!2021-2022設計趨勢報告:社交APP篇

          Reddit Talk

          3. 從“我是誰”到“我們的關系”

          展示自我除了從展示者的角度來設計“如何更好的展示社交資產”外,也要從看的人的角度考慮“如何更好地了解他”。

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

          騰訊出品!2021-2022設計趨勢報告:社交APP篇

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

          騰訊出品!2021-2022設計趨勢報告:社交APP篇

          4. 虛擬和真實之間,越來越強調“真實”

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

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

          騰訊出品!2021-2022設計趨勢報告:社交APP篇

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

          騰訊出品!2021-2022設計趨勢報告:社交APP篇

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

          騰訊出品!2021-2022設計趨勢報告:社交APP篇

          麥當勞虛擬偶像“開心姐姐”

          用戶在社交網站分享動態,維系自己的人設,獲得群體的存在感和認同感。在未來,這些記錄和創作的內容是否會形成自己的虛擬空間?每一個人不同的故事動態與空間產生聯系,形成自己獨有的虛擬空間社交資產。

          騰訊出品!2021-2022設計趨勢報告:社交APP篇

          5. 社交人格從「完美人設」到「透明人設」

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

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

          騰訊出品!2021-2022設計趨勢報告:社交APP篇

          Poparazzi 能連續拍照變成 GIF 進行分享,同樣也傳達未經過編輯的更真實的自我展示。用戶用 emoji 進行互動,僅展示動態收到的 emoji 表態數量。

          騰訊出品!2021-2022設計趨勢報告:社交APP篇

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

          騰訊出品!2021-2022設計趨勢報告:社交APP篇

          更懂我的匹配

          1. 匹配趨向于多元化

          調查發現,現實中兩位互不相識的陌生人要花 50 小時,才可以在路上叫出對方名字,再投入 40 小時,才能蛻變為真正的友情?;ヂ摼W幫助用戶高效匹配,縮短認識的時間,降低認識的成本。

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

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

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

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

          騰訊出品!2021-2022設計趨勢報告:社交APP篇

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

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

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

          騰訊出品!2021-2022設計趨勢報告:社交APP篇

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

          騰訊出品!2021-2022設計趨勢報告:社交APP篇

          Tinder 的一項調查顯示,40%的人在 Tinder 中發現了前任,24%的人遇到了家人。為了保障用戶隱私,用戶可以上傳他們的聯系人名單以選擇不想在 app 中遇到哪些人,屏蔽所選的聯系人。

          騰訊出品!2021-2022設計趨勢報告:社交APP篇

          更富有樂趣和臨場的溝通

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

          1. 更臨場

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

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

          騰訊出品!2021-2022設計趨勢報告:社交APP篇

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

          騰訊出品!2021-2022設計趨勢報告:社交APP篇

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

          騰訊出品!2021-2022設計趨勢報告:社交APP篇

          2021 年 IOS15 的更新,Facetime 使用的空間音頻讓通話的聽感更加自然、逼真,仿佛在同一房間面對面聊天。

          騰訊出品!2021-2022設計趨勢報告:社交APP篇

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

          騰訊出品!2021-2022設計趨勢報告:社交APP篇

          2. 更個性

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

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

          騰訊出品!2021-2022設計趨勢報告:社交APP篇

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

          騰訊出品!2021-2022設計趨勢報告:社交APP篇

          3. 場景化

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

          咖啡館社交,通過構建咖啡館場景,傳達和陌生人進行一場閑聊的慢社交體驗。

          騰訊出品!2021-2022設計趨勢報告:社交APP篇

          森遇

          Facebook 的視頻通話,用煙花和禮帽的 AR 特效來構建派對的社交場景。

          騰訊出品!2021-2022設計趨勢報告:社交APP篇

          2021 年 WWDC 大會上,現場用不同的 Memoji 營造了線上觀眾參與會議的場景。

          騰訊出品!2021-2022設計趨勢報告:社交APP篇

          4. 感官刺激

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

          Honk 可以同時發送大量的 emoji 表情。

          騰訊出品!2021-2022設計趨勢報告:社交APP篇

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

          騰訊出品!2021-2022設計趨勢報告:社交APP篇

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

          騰訊出品!2021-2022設計趨勢報告:社交APP篇

          網絡表情包

          5. 輕娛樂、游戲社交

          《社交媒體趨勢報告》提到“和朋友保持聯系”一直被列為是使用社交媒體首要原因,但在 16-24 歲的用戶中,主要驅動力變為“尋找搞笑和有趣的內容”。青少年通過線上社交彌補線下社交缺口,獲得同輩認同,排解孤獨和學習壓力?!敖M隊開黑”“一起微光”“找長期固聊固玩”,00 后們的社交需求更多放在娛樂、游戲化社交上。社交體驗也從物理空間的連接轉變到精神空間的連接。

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

          騰訊出品!2021-2022設計趨勢報告:社交APP篇

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

          騰訊出品!2021-2022設計趨勢報告:社交APP篇

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

          騰訊出品!2021-2022設計趨勢報告:社交APP篇

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

          騰訊出品!2021-2022設計趨勢報告:社交APP篇

          結尾

          科技重塑了我們的生活。線上社交讓我們日常溝通更為方便,也讓我們輕松維系現實中的社交關系,越來越多的人依靠它構建新的虛擬關系,互聯網帶來溝通便利的同時,也減少了人與人面對面交流的機會。

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


          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          文章來源:優設   作者:騰訊設計

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

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          信息流產品個人資料卡如何設計?這些思路供你參考!

          資深UI設計者


          在信息流產品中,個人資料卡是一個很重要的頁面。一方面,創作者通過這個頁面展示賬號價值,突顯賬號魅力,引導用戶關注;另一方面,消費型用戶通過這個頁面了解創作者,查看創作者更多內容,是眾多消費型用戶消費內容中重要的一環。只有把這個循環做好才能長期促進平臺生態發展。

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

          前言

          在前期分析過程中,我們發現當前版本存在諸多問題。

          從數據上看,對比公司內同類產品,關注按鈕轉化率較低(出于數據保護,數據隱藏)。

          信息流產品個人資料卡如何設計?這些思路供你參考!

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

          信息流產品個人資料卡如何設計?這些思路供你參考!

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

          設計前應該思考什么

          做任何一個設計前,都應該思考設計目標,否則設計出來的結果沒有意義,也缺乏過程依據和支撐。那么資料卡的設計目標是什么呢?這要從資料卡在信息流產品中的使命和價值說起。

          一方面,消費型用戶通過這個頁面了解創作者,查看更多內容;另一方面,創作者通過這個頁面展示賬號價值,突顯賬號魅力,引導瀏覽者關注。

          如果創作者能夠在資料卡充分展現自己的才華和魅力,帶來了更多瀏覽者的“關注”,那他們就更有動力分享或生產優質內容,進而使產品內容更加豐富;從而吸引更多新用戶的瀏覽、留存。

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

          信息流產品個人資料卡如何設計?這些思路供你參考!

          信息流產品個人資料卡如何設計?這些思路供你參考!

          如何進行資料卡設計

          了解了資料卡的使命和價值,設計目標也呼之欲出,作為平臺方,我們需要幫創作者解決兩個問題:輔助創作者吸粉 & 助力商業化變現

          當然,創作者產出優質的內容才是吸粉的關鍵,平臺方只能助攻。但不同的信息流產品有著不同的定位和側重點,吸引著不同的用戶,所以資料卡設計的樣式也不盡相同。

          信息流產品個人資料卡如何設計?這些思路供你參考!

          1. 輔助創作者吸粉

          在輔助創作者吸粉這里,有兩個維度可以思考:

          • 內容展示維度
          • 用戶關注維度

          內容展示分析

          在資料卡中,有三個大區域:頭圖區、信息區和作品區。

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

          信息流產品個人資料卡如何設計?這些思路供你參考!

          通過對比市面 20+信息流產品,我們發現了一些有趣的規律:

          信息流產品個人資料卡如何設計?這些思路供你參考!

          ① 頭圖區:越是社區類產品,對頭圖個性化重視程度越高,而資訊類的產品則不太重視。

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

          所以我們在設計頁面布局時,需要思考自身產品定位以及創作者需求,把有限的空間利用在刀刃上。

          信息流產品個人資料卡如何設計?這些思路供你參考!

          ② 信息區:越是追求多元化收益商業化的產品,信息區承載量越大。

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

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

          信息流產品個人資料卡如何設計?這些思路供你參考!

          ③ 內容區:越是長內容,越傾向于展示更多作品和更多信息;越是短內容,越是“看就完了”。

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

          所以設計資料卡時,需要設計者清晰了解自己平臺內容特征以及用戶行為偏好,做出更合適自己平臺風格的設計。

          信息流產品個人資料卡如何設計?這些思路供你參考!

          綜上,在做內容布局展示時,需要綜合考慮產品定位,思考這些區域對于產品和創作者瀏覽者意味著什么。

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

          那么如何讓頭圖有價值?創作者愿意為此更換,而瀏覽者看到能夠感受到帳號的特殊性?

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

          信息流產品個人資料卡如何設計?這些思路供你參考!

          用戶行為關注調研

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

          信息流產品個人資料卡如何設計?這些思路供你參考!

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

          信息流產品個人資料卡如何設計?這些思路供你參考!

          我們發現,瀏覽者在關注賬號的時候,主要在意“內容是不是感興趣” 、“粉絲量多少” 和 “內容領域”。少量同學提到了會關注下作品數,其他信息基本不看。

          信息流產品個人資料卡如何設計?這些思路供你參考!

          原話摘錄:

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

          而在操作路徑上,進入資料卡后:先到作品區查看內容列表 → 拖動頁面向上查看更多內容 → 返回信息區查看粉絲量 → 關注賬號。呈現先下后上的操作路徑。

          信息流產品個人資料卡如何設計?這些思路供你參考!

          行為路徑結合關注決策,有三個關鍵元素是形成操作鏈條并綁定在一起:內容、 粉絲數 、關注按鈕,且內容為高播放量內容。所以高播放量內容,粉絲數是決策關鍵,激發下一步關注行為。

          信息流產品個人資料卡如何設計?這些思路供你參考!

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

          基于以上結論我們做了兩個方案再次進行測試:

          • 方案1:傳統樣式
          • 方案2:高播放量內容,粉絲量,關注按鈕放置在同一區域,縮短決策路徑

          信息流產品個人資料卡如何設計?這些思路供你參考!

          為什么做一個傳統方案進行對比測試也是因為現在很多產品資料卡頁面趨同,大家已經形成了認知慣性,而尊重用戶習慣也是產品設計中需要考量的因素。接下來,我們又找了 12 名同學進行訪談和測試。

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

          信息流產品個人資料卡如何設計?這些思路供你參考!

          原話摘錄:

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

          不管哪種樣式,內容都是重中之重。既然是重中之重,大家也會注意到,有些內容區視頻是雙列形式,有些視頻是單列形式。那么瀏覽者如何看待這種區別呢?會對關注產生影響嗎?

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

          信息流產品個人資料卡如何設計?這些思路供你參考!

          以上是關注吸粉的部分,設計時需要綜合考慮產品定位和用戶行為特征進行頁面布局。

          2. 助力商業化變現

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

          一般平臺提供商業化有三種類型:

          基礎工具

          • 商業基礎:平臺提供流量分成、現金獎勵等
          • 商業化功能:打賞、電商功能、內容付費功能、直播功能等
          • 精準推送功能:粉絲分組推送、粉絲必達等

          平臺政策

          • 扶持計劃:出臺各類流量扶持政策,賦能變現
          • 獎勵政策:MCN 簽約、創作活動

          資源整合

          商業資源整合:整合平臺內外部的廣告主資源、商業活動資源、投融資服務、新媒體賬號孵化等各類資源

          資料卡涉及到的商業化展示主要為:電商能力,內容付費,粉絲圈/粉絲付費。當有這些商業化內容的時候,通常占用信息區一行區域,大多數信息流產品多如此。

          信息流產品個人資料卡如何設計?這些思路供你參考!

          但當多種商業化能力同時提供時,不同的產品給出了不同的解決方案。比如大多數產品合并在信息區的一行,通過橫劃展示更多,以保證其他內容的露出。畢竟對于瀏覽者來講,內容才是最重要的。

          信息流產品個人資料卡如何設計?這些思路供你參考!

          有一些產品則沒有選擇合并的方式而每個占用一行空間,與此同時,把創作者的信息展示的也更為詳細,可能和本身社區類產品的定位有關,希望更能關注除了內容以外,創作者自身的獨特價值。

          信息流產品個人資料卡如何設計?這些思路供你參考!

          還有一些產品則利用了內容 tab 區域承載櫥窗和付費服務,減少信息區的占用,還可以通過邏輯把不同渠道或不同場景的用戶引導不同 tab,讓瀏覽者看到更適合自己的內容。

          信息流產品個人資料卡如何設計?這些思路供你參考!

          總結

          資料卡里承載了很多的信息,從創作者的個性展示到內容到商業化變現,需要我們不斷平衡每個區域的關系。

          別的產品這么做,并不一定適合自己的業務,需要我們找準自己產品的定位,結合當下業務重點去綜合考慮。

          業務是偏資訊的還是偏社區的?是偏短內容平臺還是長內容?有沒有提供足夠多的商業變現能力給到創作者?商業化能力做的如何?不同模塊的用戶數據怎么樣?只有對現有業務充分了解,才知道哪些是現階段的重點,才能對一個頁面做出更有依據的設計。

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          文章來源:優設   作者:騰訊設計 

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

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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




          消息通知系統設計指南

          資深UI設計者

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

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

          如何「理解」消息通知

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

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

          騰訊出品!消息通知系統設計指南

          消息觸發時間與條件(何時什么事):如按周期重復的時間點,或系統狀態變更、用戶操作結果等;

          消息發送方(誰發現的事):可能是系統、第三方服務商,或者某個用戶;

          消息接收方(誰需要知道):即接收方,可能是系統中的全部用戶,也可能會根據權限劃分推送到某個用戶群組,或者是某個特定用戶;

          消息觸達渠道(怎么找到他):短信、電話、App 內通知等;

          消息通知內容(告訴他什么):短信的文本、電話對話內容、通知消息的文案等消息通知;

          消息操作反饋(他可以干嘛):主要分為只讀與操作反饋。只讀,即當前消息用戶在瀏覽后不需要做更多的操作,主要以了解為主;操作反饋,即當前消息需要用戶瀏覽,且在瀏覽后做相應的后續操作。

          好的消息系統要滿足什么條件:

          騰訊出品!消息通知系統設計指南

          全面:通知的消息項要完整全面,用戶才能放心地通過消息通知系統了解消息更新內容;

          及時:消息的觸達方式要及時有效,在消息相關事件發生后,用戶能在第一時間獲取到信息并提供操作反饋給到消息發送方;

          高效:能通過合理的消息發送途徑,允許用戶設置及合并相似信息等方式避免過多消息侵擾用戶,讓用戶能夠高效處理消息通知。

          如何「盤點」消息通知

          設計全面、及時、有效的消息通知系統需要對消息的六個關鍵因素進行全面盤點,通過分步的方式逐步完成消息通知系統的設計。主要分為以下三步:

          騰訊出品!消息通知系統設計指南

          ① 盤點系統中包含的消息項:包含其觸發條件、通知來源及通知對象。需要盤點完整消息項從而保證消息系統的完整性;

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

          ③ 撰寫通知內容與操作反饋:包含各消息項的通知內容與操作反饋。讓消息內容能夠有效地傳達給用戶,讓用戶能快速反饋、操作。

          盤點的過程,即對消息通知清單的梳理。與產品、研發等團隊成員的溝通也將使用該清單。最終目標即完成下方表格的填寫:

          騰訊出品!消息通知系統設計指南

          1. 盤點系統中包含的消息項

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

          騰訊出品!消息通知系統設計指南

          盤點出的每個消息項

          都需要補充以下四個關鍵因素:

          觸發條件:結合產品核心場景梳理完整??赏ㄟ^狀態圖或泳道圖查缺補漏(詳見下段內容);

          通知來源:可能是某個內部系統,可能是某個用戶組,也可能是某個具體用戶。用戶組的劃分需要提前與產品、研發同事溝通完成;

          通知對象:可能是全部用戶,也可能是某個用戶組或具體用戶。由觸發條件中的場景決定;

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

          盤點完成的消息項使用下表進行整理,方便產品、設計、研發之間的溝通。

          騰訊出品!消息通知系統設計指南

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

          對于 ToB 或 ToG 類含有復雜狀態轉換以及任務流的產品,除了使用分類的方式盤點消息項,還需要對照流程圖或泳道圖查缺補漏,避免消息類型的遺漏。

          如,顧客線上購買商品并收取商品的商品相關狀態變化如下圖所示,每個狀態都可對應著一條消息項:

          騰訊出品!消息通知系統設計指南

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

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

          什么類型的消息不要納入消息通知系統:

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

          • 單純問候類消息,如“好久不見”等
          • 不需要用戶知道的消息,如系統后臺數據更新等
          2. 確定消息觸達渠道

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

          騰訊出品!消息通知系統設計指南

          消息觸達渠道的配置結果到第一步的表格中:

          騰訊出品!消息通知系統設計指南

          平衡通知量:

          一個好的消息系統需要能有效觸達的同時不過分侵擾用戶。這就要求我們對系統實際運行中可能會出現的通知量進行預估,并適量調整通知方式,讓重要的消息能夠更有效及時地觸達到用戶。最終調整后的消息數量與提醒強度的關系最好能形成如下圖所示金字塔的模式。

          騰訊出品!消息通知系統設計指南

          提醒強度與消息數量的金字塔關系

          合并重復消息:

          對于出現頻率較高,且用戶不需及時了解每條消息的消息項,可以通過合并消息的方式減少通知的數量。合并主要有兩種方式:合并流程過往節點信息和合并同類消息。

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

          騰訊出品!消息通知系統設計指南

          兩種合并消息方式

          智能推送:有條件的系統可根據用戶行為分析及用戶畫像,進行智能推送。如基于用戶畫像按類型推送運營類消息,基于用戶接受消息數量,判斷是否合并消息推送等。

          渠道間消息項的延續與統一:

          出于信息持續性的考慮,觸達渠道之間有部分關聯關系在制定消息觸達渠道時需要注意,如:

          • 若系統包含 App、web 等不同端,相同通知類型的消息要保持統一
          • badge 提示需要在應用內消息通知模塊有對應消息提示
          • push 消息的文案需要與應用內消息中心保持一致
          3. 撰寫通知內容與操作反饋

          通知的內容需要滿足簡明易懂的同時,還要讓用戶能夠快速處理。根據大量經驗總結,通知內容的撰寫可使用一個通用撰寫公式:

          騰訊出品!消息通知系統設計指南

          在應用撰寫公式寫內容時,需注意以下要點:

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

          除了以上通用注意事項,由于渠道本身的特征差異,還需注意以下渠道相關的要點:

          電話:需要設定客服話術標準,一般需要在會話開始前先告知用戶來電是誰、有什么目的。在講述完通知內容后,還應告知用戶如何處理當前信息,如果想了解詳細內容該前往哪個渠道了解。

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

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

          郵件:與短信相似會有來源可信度問題,郵件內容需包含品牌元素,同時發件的郵箱地址后綴使用產品官方網站。另外需要注意,某些郵件軟件會設置不自動下載圖片,郵件重要內容不要使用圖片。

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

          微信公眾號(訂閱號/服務號):由于微信對訂閱號與服務號的消息推送方式會經常變化,需要確認最新的要求并撰寫文案。

          在完成通知內容以及操作反饋的梳理后,對消息梳理表格進行更新,補充相關信息:

          騰訊出品!消息通知系統設計指南

          自此,消息項的盤點已經完成,后續可基于該表格與產品、研發溝通。當業務出現變更時,也需要對表格內容進行同步更新。

          如何「設計」消息中心

          消息通知的觸達渠道中,電話、短信、push 推送的呈現由系統決定。但是若產品有獨立 App,往往需要消息中心去承載全量的消息列表。本章會介紹如何設計消息中心。

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

          騰訊出品!消息通知系統設計指南

          1. 消息中心入口

          主要有底部 tab、個人中心附近的圖標入口、個人中心的菜單項等三種入口形式:

          騰訊出品!消息通知系統設計指南

          消息中心的三種入口

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

          2. 消息列表

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

          騰訊出品!消息通知系統設計指南

          分組合并消息列表

          騰訊出品!消息通知系統設計指南

          分 Tab 合并消息列表

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

          騰訊出品!消息通知系統設計指南

          二級消息列表

          3. 消息卡片

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

          騰訊出品!消息通知系統設計指南

          消息卡片應用示意

          4. 消息中心設置

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

          全部已讀:對于消息數量較多,且未讀態會影響 badge 的展示時需要提供該設置項。點擊后設置列表消息項全部已讀。

          發起對話:若系統包含通訊功能,一般會在消息類表頁提供發起對話的快捷入口。點擊后跳轉到通訊錄或好友列表。

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

          打開消息推送權限:一些應用有一些狀態更新或重要的提醒需要用戶在系統設置中打開當前應用的通知權限,會包含提示用戶打開通知的功能。這些提示需要在用戶進行了如“辦理事項”、“上傳狀態”等發起流程的操作后提示。不建議在用戶啟動 App 時就彈窗提示打開通知。

          總結

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

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          文章來源:優設   作者:騰訊設計 

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

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合