<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>

          首頁

          UI色彩總結—如何滿足不同界面的配色需求

          資深UI設計者

            作為身處設計領域我們或多或少的學習過色彩知識,同類色、鄰近色、對比色、明度、純度......但好像學習過是一回事,使用起來由是一回事,我們然后常常聽到自己的作品被說:顏色太臟了,太焦了,太花,氛圍不對....總的來說就是不太好看,于是我們就去看很多很多的好圖,嘗試著學習別人的色感,讓自己的作品更好看些。

          通過參考圖片的色表,并嘗試用到自己的作品里面去

          (上圖只是舉下例子)

                     自己的作品色感也確實得到了很大的提升呢,但我們也可換其他的圖,畢竟色感好的圖那么多,接著好像就會陷入一個誤區,過于依賴參考,脫離了參考自己用色就會猶豫不決,就算是參考了用色也不知道為什么要這樣配色,作用是什么......一系列問題浮現在我們的腦海,那么問題產生,思考一下該如何解決問題吧,希望能夠跟大家一起提升色彩知識


          色彩基礎知識

          既然是了解和提升色彩,那我們不妨先復習一下色彩的基礎知識

          (非常熟悉色彩基礎的可以這里可以跳過)

          1、色彩的屬性

          ①色相

                  色相也就是以色彩的稱謂,它是一種顏色區別于另一種顏色的獨特屬性。例如: 玫瑰紅、桔黃、檸檬黃、鈷藍、群青、翠綠…..我們把紅橙黃藍綠紫,和她們所處的各自之間的紅橙、黃橙、黃綠、藍綠、藍紫、紅紫這六種中間色一共12種色,稱為色環。

          ②明度

                   我們稱顏色的深淺為明度,若在某一色相的顏色中加入黑或白的成分,便可使明度降低或升高。色彩的明度是眼睛對光源和物體表面的明暗程度的感知,主要是由光線強弱決定這一視覺經驗,顏色明度越高,其視覺感受越明亮,反之,則越暗淡。

          ③ 純度

                     色彩的純度是指某一種色相的顏色的鮮艷程度,也叫飽和度,既某一種顏色的自身形象的完整程度。

          自然界的顏色,由于受光線變化的環境因素的影響,單個物體的固有色純度不會是百分百,總有一些偏向,有色彩的各種色都具有飽和度,而區別其飽和度高低的方法是根據這種色中含灰色的程度來計算的。


          總結:顏色主要是由色相(顏色)、明度(明暗)以及純度(飽和度)組成

          ①關于色相的問題“花”可以通過減少色相,或者保持色相在三種以內,來使畫面整潔,具有統一感

          ②關于明度的問題“平”可以通過拉大明度的區間,來達到加強畫面的層次感的表現

          ③關于純度的問題“焦”和“臟”根據畫風對純度統一的要求,通過弱化或增強純度,使畫面純度保持一致


          色彩搭配

          了解完顏色的基礎知識,再來了解一下色與色之間如何進行搭配,并且會產生什么作用吧

          (非常熟悉色彩基礎的可以這里可以跳過)

          ①同類色

                    以某一顏色為基準,與此色相隔15°以內的顏色為同類色,主要是指單一色相通過明度、純度變化達到豐富的色彩效果,同類色給人的差距很小,常常給人單一、統一、穩定的感覺,可以通過明暗層次來提升畫面的層次感

          ②類似色

                    以某一顏色為基準,與此色相隔30°以內的顏色為類似色,類似色比同類色效果搭配更明顯、豐富,可保持畫面的統一感和協調性,呈現柔和質感,由于搭配效果較為平淡和單調,可以通過色彩明度和純度的對比,達到強化色彩的目的


          ③臨近色

                    以某一顏色為基準,與此色相隔60°—90°的顏色為臨近色,臨近色對比屬于色相中對比,可保持畫面的統一感,又能使畫面顯得豐富、活潑,可增加明度和純度對比,豐富畫面效果,這種色調上的主次感能夠增強配色的吸引力

          ④對比色

                    以某一顏色為基準,與此色相隔120°—150°的任一兩色互為對比色,對比色相搭配是色相中的強對比,其效果鮮明、飽滿,容易給人帶來興奮、激動的快感,作品中常以高純度的對比色配色來表達隨意、跳躍、強烈的主題,以吸引人們目光的作用

          ⑤互補色

                    以某一顏色為基準,與此色相隔180°的任一兩色互補,互補色的色相對比最為強烈,畫面相較于對比色更為豐富,更具有感官刺激性

          總結

                   不同顏色的搭配能夠產生不同的作用,我們可以根據自己的需求選擇合適的色彩搭配來運用到自己的界面上來,但是這種基礎的色彩搭配更適合運用到廣告、活動、banner上來,因為他們有明確的主題,確定的角色作為色調參考,而且能夠作為單獨界面存在,但是像通用界面,變化太多,需要考慮的也太多,單單的色彩搭配不能夠作為唯一的參考標準,想知道是被什么因素所影響的嗎,接著看下去吧~

          (對比色)


          色彩比例

                   上面說道,根據不同色彩搭配的特點,即可運用到界面上,來達到自己想要的效果,那為什么自己所用到的色相并不多,但界面還會經常被點評“花”呢?又該怎么解決這個問題呢?這里可能是色彩比例出了問題

                  “花”主要指:色相、明度以及純度多且分布過于分散,從而形成細碎的點、以及使用素材過多(素材自身帶有多種顏色)導致畫面被分割的很細碎,所以在設計中畫面通常由主色、輔助色和中性色組成,一來是可以很好的規避這個debuff,二來使畫面整潔,具有統一性,也方便沿用到其他界面

          ①主色

                   主色為核心色彩,它的要點在于——你想讓用戶感受那種情緒,然后通過情緒關聯到一個大致的色彩范圍,再進行微調,常常用到同類色、鄰近色....來使界面即具有層次感的豐富,又可以保持畫面的統一感和協調性


          ②輔助色

                   輔助色包含一到若干個和主色不同的色彩,具體的根據實際場景功能決定,最常用到互補色和對比色,因為視覺差異性大,而輔助色主要功能是作為引導用戶進行交互,比如通知、提醒、取消用紅色,確認、升級用綠色.....而基于引導用戶這個原則,所以越需要被突出的顏色,可以在色環中離主色越遠,越不需要被突出的則越近,例如:常作為提示作用的按鈕


          ③中性色

                   如果說主色輔助色決定了界面視覺是否出彩,那中性色的應用直接決定了頁面能不能正常使用,所以中性色常用于界面中的文字,界面底版等顏色,起到便于閱讀的作用


          總結

                  主色、輔助色、中性色的運用使界面具有層次感,避免了因為顏色細碎而導致“花”的問題,而大面積的主色通過色彩情感增強玩家對世界觀的整體感受,而輔助色作用則傳達特定的信息方便玩家的抉擇


          色彩心理學

                剛剛說到主色取決于—想讓用戶感受哪種情緒,那情緒是跟色彩如何進行關聯的呢?

          ①色彩感受

                其實也沒有那么玄乎,包括沒有學過美術的人也知道冷色、暖色,但色彩本身并無冷暖的溫度差別,是視覺色彩引起人們對冷暖感覺的心理聯想

          進而產生冷暖感覺,并且產生一系列的情緒

          例如:【暖色】人們見到紅、紅橙、橙、黃橙、棕等色后,會聯系到太陽、火焰等景象

                    【冷色】見到藍、紫等色后,則會聯想到天空、冰雪、海洋等景象


                                 

          ②色彩情緒

                   而情緒的產生,主要是因為我們通過顏色—聯想到景象—從而產生情緒,因為色彩本身是沒有情感的,我們之所以能感受到色彩的情感,是因為長期生活照一個色彩環境中,積累了許多視覺經驗,這些經驗與某種色彩刺激呼應時,就會激發某種情緒


          例如:黃綠、藍、藍綠等色,使人聯想到草、樹等植物,產生青春、生命、和平等感覺。紫、藍紫等色使人聯想到花卉、水晶等稀貴物品,故易產生高貴、夢幻的感覺。至于黃色,一般被認為是暖色,因為它使人聯想起陽光、麥田等

           ③色彩感受補充

          色彩的輕重感

          •  高明度: 高明度的色彩使人聯想到藍天、白云、彩霞、棉花、羊毛等,從而產生輕柔、漂浮、上升等感覺, 所以產生“輕”的感受

          •  低明度:低明度色彩容易讓人聯想到鋼鐵、大理石、礦石等,從而產生沉重、穩定、降落等情緒,所以產“重”的感受

                        


          色彩的軟硬感

          色彩的軟硬感主要來自色彩的明度,參考上面,但是純度也是其中的影響因素,例如:

          •  高純度: 高純度的色彩都偏硬感,如果明度又低則硬感更明顯,來源于色與色之前的對比,界限明顯

          •  中、低純度:色彩成柔和感,因為容易使人聯想起駱駝、狐貍、貓、狗等動物毛發,絨織物,而且色與色之間對比的界限不明顯

                       


          色彩的華麗/質樸

          色彩的鮮艷、質樸、色彩的三要素對此都有一定的影響,其中純度的影響最大,來源于人們對材質的認知,例如:

          • 高明度、高純度:色彩豐富、強對比,感覺鮮艷、強烈

          • 低明度、低純度:單純,弱對比,感覺色彩質樸、高雅、暗淡、復古

          過色彩的這個特點,我們可以用于營造即復古、典雅又華麗的氛圍

                   以上只是些舉例說明,希望大家能夠舉一反三,例如:高明度具有擴大感、膨脹感,低明度具有顯小、收縮感等等,在裝潢設計、服裝設計常有用到呢,畢竟黑色顯瘦(滑稽)~

                    又例如根據人群劃分,以兒童作為主要用戶人群,色彩都是高明度、高飽和度,因為小孩子視力發展隨年齡增長逐漸完善,他們在視力未完全發展的時候能辨別出的顏色有限,對純度明度鮮艷的辨別度高,所以就特別喜歡鮮艷的顏色。

          總結

                  我們看到的各種色彩,與以往的記憶及經驗產生聯想,從而形成一系列的色彩心理反應,我們可以通過這些心理反應的特點,來得到合適的配色并且運用到我們的作品中


          色彩運用與感情基調

          上面只是詳細的說明了色彩的各自特點,以及不同的顏色所產生的不同情感,那我們該怎么把所有的知識總結起來,運用到我們的游戲配色中來呢?下面講的是主色

                  首先每個游戲都有自己獨特的美術風格,而情感基調則是決定美術風格的方向,什么是情感基調:他是游戲傳達給玩家,能夠激起玩家情緒反應的核心感受,而玩家對于感情基調的感知來源于視覺呈現,而我們通過概括游戲的視覺基調,則很好的幫我們找到美術風格的方向

          例如:

          (中世紀戰爭)

          (科幻未來)

          (古典神話)

                 通常游戲的情感基調都是由概念設計師設定的,但介于概念設計師在國內較為稀缺,我們可以通過競品、資料圖片來表達游戲的情感基調和整體風格,但是被概括的情感基調內容過于遼闊,我們需要仔細拆分成多個細分領域,更方便我們做設計

          例如:科幻戰爭(按時間來劃分有:二戰、冷戰、現代、近未來,未來...)(按風格劃分有:賽博朋克、原子朋克、柴油朋克...)、

                  每個細分的領域都有他各自的美術風格和特點,當然這篇主要講配色,我也先不扯遠了,確定風格之后,我們就可以通過風格特點來確定配色,

          例如:我們比較熟悉的風格《賽博朋克》的配色分析

          整體色調:高對比度、高飽和度、低亮度的畫面,整體亮度較低。畫面以冷色調(藍色、青色、紫色)為主,同時局部用暖色調(霓虹燈色調)點綴

          畫面為什么以藍色、綠色、紫色為主呢?

          綠色:因為早期電腦顯示器上的字符是綠色的。上世紀60到80年代,電腦顯示器均為單色顯示器。一般來說,單色顯示器分為黑白和綠色兩種。由于顯示綠色的熒光粉,在造價上遠低于顯示白色的熒光粉,因此早期單色顯示器多使用綠色字符。綠色從顯示器中流入賽博朋克世界,形成了一種極具風格化的視覺特點

          藍色:標準的科幻色,科技代表的是對未知的探索, 宇宙、天空、大海等都和藍色有關,而這三者都是科學研究的最原始的對象,其次藍色是短波長顏色,從心理上會給人以 沉穩、理智、準確的意象,恰恰與科技給人的感覺相符,最主要的是藍色用于表達科幻的作品相當廣泛,幾乎已經達到了眾人皆知的地步

          紫色:紫外光色極具穿透力,即使在一片灰霾暗淡之中,也能夠令人一眼望見。強化了光污染下的失真美感,也是賽博朋克的標志性色彩之一。

          總結:

                 如果說色彩心理學是:通過顏色—使玩家聯想到景象—從而產生代入情緒,那么主色的確定則是:通過景象—感受情緒—關聯色彩,至于明度和純度,則取決于風格特點


          色彩運用與游戲反饋


                      如果說主色是為了通過色彩聯想產生情緒變化,增強玩家的代入感,那么輔助色的作用就是信息傳達,通過視覺感受色彩能夠在第一時間激發大腦的最本能反應,讓玩家直接感受到當前畫面所傳達的視覺信息,并且玩家在交互后瞬時獲得的知覺反饋。

                      為了游戲世界更加真實可信,游戲的設計都是基于現實生活進行創作的,所以游戲美術設計師需要將這些最基本的顏色認知加入到游戲設計中,通常運用這種色彩情感聯系讓玩家與游戲互動,向他們傳達特定信息。那么我們看看顏色傳遞信息的一些例子吧

          例如:

          綠色:屬于大自然色系,代表著生命的永恒,給人一種生機勃勃的感覺,充滿了希望和活力,設計師也常運用綠色描述玩家安全的健康狀態。例如:血條,滿格的信號,恢復生命....同時基于綠色在社會的廣泛運用,如交通系統的綠燈等,綠色作為積極的象征已經扎根在我們腦海,所以綠色還有和平、安全、同意等的積極聯想,而和平狀態、引導性的確定以及打鉤符號也是我們常見的設計運用


          紅色:在現實生活中,交通燈顯示為紅色意味著停止機器上閃爍紅燈標志著危險或故障,紅色的滴狀物象征血等。所以,紅色通常用于表達與綠色截然相反的意境。對某些人來說,紅色暗示危險情況,代表警告或一些消極內容。在游戲設計中,常用紅色描述角色性命危險的狀態,或者一些提示性的警告等

                 以上只是部分例子,你們玩游戲的時候不妨注意一下這些有趣的設定,例如道具、角色的品質顏色,勝利失敗的顏色對比區分,或者是劃分陣營時,通過不同顏色區分勢力等等

          總結:

                 輔助色的確定公式則是:通過顏色—使玩家聯想景象—引導玩家獲得指示—以致玩家做出反饋,所以顏色的運用在引導玩家、說明功能上起到了非常大的幫助哦

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

          文章來源:站酷   作者:筱玥 

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

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

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


          如何制作數據可視化地圖

          資深UI設計者


          第三方地圖的獲取和對接

          普通地圖一般都是去對接三方平臺,如百度地圖、高德地圖、騰訊地圖、谷歌地圖等。他們都會提供對應的地圖開放服務。以高德地圖為例,實操一下地圖的獲取和調色方法以及最后跟開發交付的流程。

          首先登錄高德開放平臺,點擊右上角控制臺


          進入控制臺會進入下圖頁面(大家可以多點點查看下平臺的相關功能內容,比如點擊數據可視化里面會有集成的地圖可視化效果)


          數據可視化里面后有一些集成的模板化的效果,大家可以點點看看



          回到主題點擊自定義地圖就可以對地圖進行自定義配置了,如下圖: 



          頁面上會有好多配置好的模板供你選擇,也可以選擇自己自定義配置,根據需要選擇一個點擊進去,就進入地圖配置頁面。


          上圖中左側為地圖的可配置項目,點擊選擇可根據自己的需求對地圖進行配置,包括顏色字體界線等等都可以配置。每個配置項下面都會有很多配置子項,非常詳細,當然里面會有些收費的配置項需要付費后使用,這塊大家可以多點點,根據自己需求來做調整。


          如果想要獲取3d建筑的樣式把右下角層級超過17后,會顯示建筑,可根據需求調整角度和位置。


          最后將調整好的樣式,直接放大全屏后截屏后就可以在設計稿里使用了。


          關于開發樣式的對接

          將配置好的文件點擊右上角的發布,直接繼續點擊發布


          發布成功后會出現如下的彈框,里面會有一些調用和使用地圖的方法。


          根據使用需求可選擇不同平臺的使用方式,直接復制鏈接丟給開發就好了。

          3D地圖建模及貼圖的制作獲取方法

          首先看下網上找的兩張參考圖的效果

          (圖片源自網絡,如侵權刪)

          (圖片源自光啟元,如侵權刪)


          3D地圖的獲取和建模的流程

          首先大家可以在網上下載地圖的邊界輪廓文件,這里推薦網站-阿里云Data V 的一款地圖選擇器(http://datav.aliyun.com/tools/atlas/index.html#&lat=30.332329214580163&lng=106.72278672066881&zoom=3.5)

          這里可以下載對應的各個省份 城市的邊界地圖輪廓模型的svg文件,點擊左下角進行下載


          以山東省為例將下載好的svg文件導入ai里轉換成ai格式,這里要注意的是另存的時候一定要選擇比較早的版本,建議存為Illustrator 8圖中箭頭所指的那個版本,要不然c4d會是識別不出來。


          將轉換好的ai文件導入c4d,執行擠壓。山東省的3d模型就建好了。


          模型建好之后需要將模型進行展UV處理(展uv:將一個3D立體的模型拆開,展開成一個平面2D圖片。作用:使模型的貼圖效果更真實。)這里用到展uv的插件(FDUVToolkit 1.0)后臺回復 uv插件可獲取插件。下圖是在c4d中展完uv的樣圖,截圖保存下做備用(為后面的貼圖位置做參考,后面的貼圖需要和展uv的這個圖一一對應上)。


          將處理好的模型導出obj備用(后面給開發和在ae中處理效果都會用到這個格式)



          漫射貼圖制作的思路

          首先在Google Eaeth Pro 上面找個省份對應的位置然后執行文件-保存就能保存當前展示得地圖紋理了(建議保存兩張貼圖,一張帶邊界和地名的方面后面制作貼圖的時候方便對上位置,第二張就是無邊界地名的作為最終的漫射貼圖)。


          將c4d展完uv的截圖、還有制作模型下載的地圖邊界路徑、和剛才的截圖一一拖入ai里面 ,新建一個4k(這里根據需求建就行)的畫布,將展uv的截圖縮放到畫布大小,如下圖,然后根據邊界輪廓都對應好 執行剪切蒙版,最終會得到下面的圖的效果。(切記貼圖的位置一定要和上面uv截圖的位置一致,要不然貼上會是亂的)

          高度貼圖的思路(用到軟件QGIS)

          首先去地理空間數據云上下載素材:選擇對應的行政區位置。


          將下載好的數據解壓后倒入QGIS軟件;倒入的圖片稍微有些明顯的拼接的縫隙 將圖片位移處理后導出備用。



          最后處理完的貼圖如下:(切記貼圖的位置一定要和上面uv截圖的位置一致)

          法線貼圖的獲取和處理思路

          將處理好的高度貼圖導入到ps中 執行-濾鏡-3D-生成法線圖


          直接點擊確定,法線圖就做好了,直接導出就可以了,最終效果如下:


          這樣整個3d地圖所需要的貼圖就都做好了 。

          最后貼圖制作好了之后就是貼到模型上處理效果,因篇幅原因本期暫時不分享了。


          城市模型的獲取方法

          推薦一個網站用于下載地圖數據叫-OpenStreetMap (OpenStreetMap 是一個由地圖制作愛好者組成的社區。這些愛好者提供并維護世界各地關于道路、小道、咖啡館、鐵路車站等各種各樣的數據。)    


          地址:https://www.openstreetmap.org/#map=15/39.9198/116.4536需要的自取。


          首次打開是這樣的


          點擊導出會進入下面界面,(ps:當前屏幕看到的區域就是要導出下載的位置)點擊下方的藍色導出按鈕就會提示下載,最終得到一個map.osm的文件。    


          下面需要將下載好的地圖數據轉換成模型,這里用到的軟件是Blender及他的GIS插件公眾號回復“Blender” 或“GIS插件”領取安裝包(包里有詳細安裝說明)


          先打開Blender:選擇 GIS - 導入 - Open Steeet Map xml(.osm)    

           
          根據界面內容 選擇剛下載的文件進行導入    


          導入后就會得到下面的城市模型了,如下圖:    


          執行:文件 - 導出 - 選擇后綴是.obj的這個如下圖 就可以將模型導出obj了。    
           

          做到這一步本次的分享也要接近尾聲了,后續的操作可繼續在Blender里做效果,或者通過Blender導出城市的obj格式的模型文件,用C4D打開做效果。


          以上方法只是獲取一些建模的方法,后面一些定制化需求需要針對某一個建筑單獨建模,一般都是基于實測數據畫出建筑的整體外輪廓,然后把實際拍攝的大樓四個面的照片進行處理制作為貼圖貼上,篇幅原因大概講一個思路。


          最終的效果-深色


          淺色效果


          關于開發對接

          一般這種效果都會有好多種實現方法,threeJS,webgl,U3D,Ue4,Ventuz等等,如何對接開發給開發提供那些東西,這都取決于開發使用的工具和實現的方式,這里建議做之前充分跟開發溝通想要的效果,可以讓他們做個調研方案,這樣會事半功倍,免得做一些無用功,出現設計和開發相互甩鍋來回扯皮的情況。

              

          不管是基于什么實現大致的實現思路都是差不多的,基本都是會需要設計師提供地圖模型、UV貼圖、烘焙貼圖、材質參數等等。   

           

          這些東西對接其實跟咱們自己建模貼圖然后在處理材質燈光(有些不支持燈光渲染,就需要把燈光的效果烘焙到貼圖上直接給貼圖)這些參數是一個原理,把基礎模型和對應的參數和貼圖,給到開發就可以了。  

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

          文章來源:站酷   作者:MR小六

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

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

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




          企業產品如何做好用戶教育系統設計?

          資深UI設計者

          toB 產品具有邏輯復雜、使用門檻高、試錯成本高、用戶角色多樣化的特點,通過用戶教育設計向用戶傳遞產品價值,提升產品易用性與可學性。本文從用戶生命周期出發,明確用戶教育在企業產品各個使用階段的目標,制定對應設計策略,同時結合過去一年「企點客服」產品的用戶教育設計實踐,沉淀了一些系統化設計經驗和思考與大家分享。

          不同規模企業對用戶教育的需求分層

          1. 中大企業為服務付費,那中長尾企業的用戶教育如何滿足?

          SaaS 企業產品的業務體系分為“產品+服務”,不同類型的企業購買產品的訴求是不同的,對用戶教育的需求也有所差異:

          中大企業往往已經擁有成熟的業務管理方案,需求明確,愿意為服務付費,遇到使用問題傾向于尋求服務支持。對于 SaaS 廠商來說,中大企業客單價高,售后會提供專業的服務跟進(包括定制需求、上門實施服務等),這些增值服務也是 SaaS 廠商常見的一種商業模式。

          中長尾企業希望獲得一個好用的產品,甚至獲得免費的服務。對于 SaaS 廠商來說,這類企業客單價低,售后會盡可能節省客服人力成本,主要在售后培訓期及為 VIP 客戶提供服務。所以需要更多地在產品內提供用戶教育來引導自助解決問題,傳遞行業運營經驗來幫助企業提升業務。

          本文將重點圍繞中長尾企業的產品內自助式用戶教育來展開。

          2. 針對企業主要角色,用戶教育需要關注的點?

          中長尾企業往往缺乏成熟的數字化管理及運營經驗,用戶教育可以引導企業盡快從傳統業務思路過渡到數字化業務思路。

          管理者、一線員工是企業最常見的兩類角色,用戶教育需考慮兩者在業務流程、績效目標、操作習慣上的差異,并且在產品使用中更好地透傳“后臺配置”和“前臺使用”之間的關系。另外對于企業經營者來說,員工頻繁流動導致新員工培訓成本高,用戶教育可以幫助新員工上手,降低培訓成本。

          企業產品用戶教育設計策略

          1. 背景

          「企點客服」是「騰訊企點」旗下的一款產品,致力于為企業的客服/運營團隊提供一站式“服務營銷一體化”解決方案。產品從界面上分為面向企業管理員的賬戶中心后臺網站,用于接待配置/員工監控/數據分析;以及主要面向一線客服的客戶端(工作臺),主要用于客戶接待。

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          2. 產品內各階段用戶教育解決方案

          產品內自助式用戶教育包括用戶使用產品過程中,在產品界面內能接觸到的提示幫助。根據用戶使用周期,各階段的教育設計目標如下:

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          • 新手期:讓新用戶盡快體驗到產品價值,對產品產生第一步信任
          • 使用期:隨任務場景適時提供幫助,幫助中心提供自助查詢
          • 迭代期:新功能有效觸達,老用戶體驗平滑過渡

          除此之外的服務階段(培訓期)則包含了產品界面外的教育幫助,如售后培訓、客服咨詢等。

          新手期:讓新用戶盡快體驗到產品價值,對產品產生第一步信任

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          用戶在注冊/付費后的第一個階段是新手期(一般為 90 天),這個階段是用戶對產品產生第一步信任的關鍵時期,直接影響到新客活躍度。新手 Onboarding 引導可以幫助用戶以較低的學習成本快速上手,盡早體驗到產品價值。

          對于首次進入產品界面的用戶來說,最有效的上手引導方式有新手任務、全局導覽、全局彈窗。進入具體功能頁后用空白頁及內容示例來進一步引導使用。

          1. 新手任務:最小閉環跑通業務,發現產品核心價值

          新手任務是一種高效直接的 Onboarding 方式,幫助獲得可測試的最小閉環體驗,適用于功能層級復雜的界面(如產品后臺)、核心價值明確的產品。

          用戶初次進入頁面時,新手任務通常以獨立頁面或彈窗形式主動出現,用明確的任務步驟來推動達成關鍵行為。

          在企點賬戶中心后臺,我們把企業管理員的最小任務目標定義為:搭建最基礎的客服接待系統,對應關鍵操作步驟為:創建客服小組→配置接待組件→接待客戶。界面呈現上,把賬戶中心涉及多個頁面的配置操作提煉到三個單頁里,簡單三步讓管理員馬上測試到真實的客戶接待效果。

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          完成最小任務后,可以繼續進入到任務清單進行更完整的功能探索,用戶可以根據自己的節奏進行學習。任務清單依據用戶使用場景分類,把復雜的大任務拆分為多個小的子任務,減輕用戶心理壓力。進度條給予用戶對學習進度的掌控感,同時激勵他們繼續探索。從最小任務到完整任務清單,實現從新手到中級的過渡。

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          2. 全局導覽:手把手全面介紹重點功能

          與新手任務“直接給答案”的方式不同,全局導覽像導游一樣向用戶介紹核心界面及功能,適用于層級較淺的界面、功能較為簡單的產品。

          全局導覽通常由一系列有順序、有指向性的輕浮層組成,對于新手來說的確是一種全面的、保姆級的引導方式,但風險是一通引導過后用戶可能什么都沒記住。所以設計時必須聚焦用戶最關注的功能點,步驟不宜過多,且必須允許用戶在任意步驟跳出流程。

          3. 全局彈窗:核心特性重點聚焦

          首次進入產品界面時自動彈出一個或一組模態窗口。這種形式的侵犯性較強,也就意味著用戶可能會馬上跳過或關閉,所以要盡量讓用戶 3 秒內 get 到重點(如需傳達更多信息可在最后一屏附上跳轉入口)。企點客戶端新手引導通過三個滑屏重點呈現核心特性:

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          用戶經歷了新手 Onboarding 引導后,在開始使用前對產品有了初步了解,是時候放手讓他們進入頁面探索一番了:

          4. 空白頁

          空白頁是一種特殊的頁面狀態,常用于剛進入頁面時無內容或功能未開啟時的狀態??瞻醉摓樾率钟脩艚榻B當前功能價值,引導使用,同時透傳品牌形象,與用戶建立情感連接,留下良好的第一印象。

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          空白頁文案千萬不能用簡單的一句“暫無數據”就完事兒,而是必須明確告知用戶:功能是什么?功能的價值是什么?接下去要怎么做?作為企業產品,文案風格力求清晰、理性、積極。

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          空白頁插圖用于輔助信息可視化表達,視覺風格上需符合企業產品品牌調性。例如企點品牌關鍵詞是“智能、輕快、高效”,那么插圖風格就不能太嚴肅厚重。

          圖標型:簡潔抽象,偏情感化與氛圍表達,適用于較易理解、邏輯較為簡單的功能。例如智能客服的知識庫相關頁面都采用了情感化的圖標型插畫,并用統一的機器人形象打造系列感:

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          概念圖形型:通過抽象界面和圖形把復雜邏輯可視化,適用于邏輯比較復雜難懂的功能。例如機器人任務型相關功能:

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          5. 內容示例/模板

          面對復雜功能時,空白頁引導可能無法為用戶提供最直接的使用建議,此時可以采取內容示例或模板引導。

          團隊協作工具 Slack 為新用戶提供了三個常見的 channel 示例(左圖);項目管理應用 Trello 預置了看板示例,同時把引導文案巧妙地融入了看板(右圖):

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          除了內容示例,對于復雜功能可以提供配置模板。模板可以通過成熟競品分析、行業桌面研究或用戶訪談推導得出。后續根據用戶反饋逐漸完善調優。

          企點賬戶中心的“高級分配規則”根據不同客戶類型提供了典型規則模板,為運營經驗不足的企業提供了有價值的參考:

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          使用期:隨任務場景適時提供幫助,幫助中心提供自助查詢

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          這個階段的用戶訴求是使用順暢,遇到問題能及時得到幫助。合理、有效、適時出現的用戶教育能降低用戶的受挫感,提升產品易用性。

          1. 隨任務場景適時提供觸手可達的幫助

          當管理員在產品后臺進行功能配置時,用戶教育的基本目標是幫他高效順利完成任務,更高階的則是要傳達功能配置邏輯與功能間的聯動關系。從“知道怎么配置”到“理解為什么這樣配置”,結合業務理解把功能用深、用好。

          在企點賬戶中心,我們把提示信息按出現時機、提示強度、信息顆粒度劃分為三種類型:小燈泡、小灰塊、小問號。這三種類型后續將沉淀為通用型組件且推廣應用于其他業務線,降低溝通成本及每次重復開發的工作量。

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          ① 第一時間透傳重要信息「小燈泡」

          “小燈泡”作為頁面全局引導,負責在用戶進入頁面時第一時間透傳關鍵信息。小燈泡常駐頁面右上角,進入頁面時默認展開吸引注意,收起后不再自動展開避免干擾。

          小燈泡內容結構分為基礎部分與拓展部分?;A部分主要是功能介紹或操作引導,拓展部分包括企點有料、關聯模塊、相關問題。內容中可點擊“了解更多”到幫助中心,加強與幫助中心的串聯。

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          除了正在進行的小燈泡組件化建設,后續我們考慮搭建小燈泡運營后臺,運營/設計可以配置需要使用小燈泡的頁面,隨時調整文案及幫助中心鏈接等,無需開發介入,提升各方效率。

          回顧小燈泡教育組件的發展進程:從應用于個別核心功能頁→建立標準化組件并推廣到各業務線→搭建運營后臺,逐步提升教育組件的標準化和使用效率。

          ② 就近外露輕量提示「小灰塊」

          “小灰塊”與頁面內容緊密結合,當用戶在操作過程中遇到問題,不用花費過多搜索成本就能就近獲得幫助。小灰塊可提供設置建議或數據解讀,使用通欄形式,可承載多行文本:

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          ③ 原地收納次要信息「小問號」

          “小問號”用于收納名詞解釋和非必需外露的提示信息,減輕對操作流程的干擾。小問號主要用于兩個場景:頁面全局說明、重點字段說明。注意同一頁面中不要出現過多小問號,只保證在最需要解釋的地方使用。

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          2. 承接界面內提示,幫助用戶自助學習并解決問題

          產品界面內的幫助信息畢竟是有限的,最終所有的幫助信息都會匯聚到幫助中心,完善的幫助文檔是所有幫助信息的基石。

          幫助中心的價值在于:對外不僅能幫助已有客戶自助解決問題,還為潛在客戶提供了解產品的機會;對內也為產品側售后客服/經銷商提供了學習機會,面對用戶咨詢時也可快速查詢應對。

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          在設計企點幫助中心首頁的信息架構時,我們為新用戶/老用戶、有明確問題/不明確問題的用戶都提供了針對性的幫助模塊。

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          ① 問題按任務場景分類,便于理解和查找

          按用戶任務場景把問題分類打包,站在用戶使用角度而不是產品功能角度措辭,符合用戶心智更易理解。點擊某個主題模塊進入該模塊的完整問題列表,再細化分類查找。

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          ② 收集用戶滿意度反饋,衡量幫助效果,為內容優化提供方向

          為了解文章內容是否真正對用戶起到了幫助作用,我們在每篇文章末尾附上滿意度統計,為內容的迭代優化提供依據和方向:

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          ③ 隨產品迭代保持內容更新

          幫助中心內容并不是一蹴而就的,而是需要長期悉心的運營維護。文章內容要隨著每個產品迭代來更新,保證用戶看到的始終是最新最準確的信息。

          3. 提供客服咨詢入口,常規問題交給智能客服

          當用戶無法自助解決問題,或本身學習意愿就弱的那些用戶會選擇直接咨詢客服。企點在產品界面、官網、幫助中心、公眾號都提供了客服咨詢入口,接入機器人客服來解決低價值、程序化的問題,復雜、操作性強的問題則轉人工跟進。機器人接待的關鍵是產品知識庫的搭建,可以基于幫助文檔框架進行梳理設置。

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          迭代期:新功能有效觸達,老用戶體驗平滑過渡

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          精心打磨上線了一個新版本,用戶卻不知道、不會用,豈不可惜?迭代期的用戶訴求是新功能上線后能及時被告知,得到使用引導,老用戶習慣平滑遷移,體驗不發生斷層。定期的新版本觸達也會讓用戶產生“這款產品一直在更新迭代,有發展潛力”的印象,幫助提升用戶粘性。要做好迭代期用戶教育,需要界面內教育引導和運營推廣共同發力。

          不是所有新功能都需要教育引導,只有在用戶高頻、核心使用路徑上新增或升級的功能、或界面布局發生重大變動時才需要教育,而技術上的性能優化則不需要教育。

          1. 更新前有效觸達,更新后引導上手

          新功能的教育路徑分為:更新前的通知觸達、價值傳達和更新后的使用引導。對于客服和管理者,教育目標也有一定的側重,比如對于一線客服要重點傳達新功能可提升接待效率,對于管理者則需要更多透傳管理配置上的價值。

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          2. 沉淀迭代期教育規范,搭建 CMS 運營工具,推動迭代期教育引導標準化

          ① 新功能引導規范沉淀

          更新后首次打開頁面,首先用全局彈窗進行新功能觸達引導:

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          從全局引導進入到頁面內引導,整體路徑以企點賬戶中心為例:更新后用戶首次登錄,先通過全局“版本更新彈窗”或“菜單綠點提示”觸達用戶,點擊進入具體頁面后再根據新功能類型采取不同的引導形式:

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          ② CMS運營工具搭建

          為進一步提升全局引導的標準化,便于內容靈活調整、降低開發反復修改成本,我們設計并推動了 CMS 運營工具建設。通過運營工具可配置三端的全局引導(更新彈窗),而頁面內引導(綠氣泡等)則沉淀為組件由各業務方自行調用。

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          3. 保證老數據遷移,使用體驗平滑過渡

          迭代期除了功能更新后的引導,更重要的是要保證存量用戶體驗的平滑過渡,包括老數據遷移和使用習慣的延續。

          對于核心路徑上的重要功能,或更新后界面與使用體驗變化較大的功能,需采用謹慎的升級策略:在不改變老使用體驗的基礎上提供自主升級入口,給用戶緩沖的時間,在一段時間后再執行自動升級。

          例如企點的「客戶庫」新版引導:升級前在老界面上彈出更新提示,結合運營策略設置自動彈出提示的時間點(自動升級前 15、7、3、2、1 天)。升級完成后的新功能引導彈窗中還加入了“退回老版客戶庫”按鈕,點擊后要求用戶填寫退回老版的原因以迭代優化功能。

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          除了上述這種重大功能升級,大部分老功能都是直接原地完成升級的,只需在對應位置旁提供輕量化的提示引導(如氣泡、文字 tips 形式):

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          培訓期:用戶培訓分層傳達,教育內容多渠道應用

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          企業客戶購買產品后,產品通常會在 30 天內安排售后培訓組負責新用戶培訓,結合教育材料用面對面、電話或電腦遠程等方式開展培訓。教育材料除了用于對外培訓,也可用于對內培訓,幫助產品服務側人員先了解產品統一認知,從而更好地培訓客戶。

          在教育材料編撰過程中,設計師應充分利用信息可視化手段,把復雜內容轉化為清晰易懂的教育內容,幫助用戶理解。

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          1. 用戶分層:基于教育對象、內容深度分層傳達

          基于教育對象、內容深度分層培訓,使教育內容更有效地傳達。對應的教育材料也需根據用戶分層來進行差異化制作。

          我們把企業產品的教育對象分為管理員和一線客服:針對管理員提供賬戶中心功能使用介紹,如客戶管理/數據分析/接待配置等功能,幫助其更高效管理員工和提升業務;針對一線客服提供客戶端(工作臺)使用指導,幫助提升客戶接待效率。

          從內容深度上分為新手版和完整版:新手版中只介紹新手必須要了解的核心功能,更多詳情會提供鏈接到完整版中深入了解;完整版則是詳細的字典式指南。

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          2. 內容組織:把復雜信息轉化為易于理解的信息

          提到教育材料,大家的普遍感知是復雜冗長難消化。比起簡化內容縮小篇幅,更重要的是要想辦法講清楚讓內容便于理解。通過模塊化、可視化、場景化的手段,把復雜信息轉化為易于理解的信息。

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          ① 可視化:抽象概念可視化,更直觀易懂

          一圖勝千言,通過概念圖、流程圖、表格形式,把抽象難理解的邏輯/概念可視化呈現。

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          ② 場景化:結合業務場景,讓配置邏輯更易理解

          避免生硬地講解功能,而是結合業務場景給出配置推薦,讓背后邏輯更易理解。

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          ③ 價值導向化:從功能價值和用戶利益出發,優于直白的功能描述

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          教育材料完成后,除了作為客戶培訓資料,還可應用于多種渠道,例如:界面內提示信息、幫助中心文檔、機器人客服知識庫、企點課堂直播課件、公眾號推文等。

          企業產品用戶教育設計要點

          1. 結合項目發展階段選擇教育重點切入口

          如果你所在的產品處于初期階段,主要以新用戶為主,那要重點考慮“新手期”與“培訓期”的教育引導,幫助新用戶上手并產生產品易用的良好體驗,提升活躍度;如果你的產品已經發展到了成熟期,那要更側重“使用期”及“迭代期”的教育引導,保證存量用戶的使用體驗。

          2. 到用戶身邊去,深入一線使用場景

          參與用戶訪談、坐到售后培訓組邊上旁聽用戶電話咨詢、作為直播課講師培訓用戶…深入一線用戶場景,真實的聲音能幫助你更走心地引導用戶。

          3. 尋求高效合作路徑,提升多方溝通效率

          以迭代期為例,由于從設計、開發到產品宣講到運營制作內容的流程很長,最后撰寫新功能推廣內容的運營同事對需求背景及設計思路缺乏深入理解,導致花費大量時間在追溯溝通上。為尋求更高效的合作路徑,建議需求凍結后讓運營同事盡早介入,及時同步需求背景和設計思路。設計師需要在設計稿中交待清楚需求背景及思考點、遺留點,通過新功能 checklist 共同維護。

          4. 思考用戶反饋渠道,為內容優化提供方向

          通過可以實現的一切手段收集用戶反饋。比如《營銷 QQ 升級》相關教育材料,我們從運營側了解到教育材料上線前后數據對比(使用指導類的咨詢問題占比下降了 6%);在條件有限的情況下利用平臺自身也可以進行定量(閱讀數通過騰訊文檔收集)和定性(騰訊問卷收集)的數據收集,對反饋為不滿意的用戶進行進一步詢問,從中得出教育材料的優化方向;公眾號運營推文則可以通過公眾號平臺自帶的閱讀數轉發數等進行統計。

          5. 不要在最后才考慮用戶教育

          在緊湊的產品迭代中,用戶教育總是最后才被提起,甚至被忽略。經常會發生在臨近上線時突然想起“這里要不要加一個用戶引導”,然后匆匆設計開發上線。在需求初期就應開始整體思考,不要在最后才想到用戶教育。

          藍藍設計建立了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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務



          如何從零開始創建新的設計原則?

          資深UI設計者

          本期提綱:

          • 為什么我們需要新的設計原則
          • 制定新的設計原則
          • 推行新的設計原則
          • 新設計原則的影響

          在本文中,我們將分享如何提煉出設計原則,并在團隊中引推廣實施的。

          去年,我們一群人聚在一起探討了一個棘手的問題:隨著 Spotify 的不斷發展,我們如何在產品迭代中保持高水平的設計質量?

          經過研究和討論,我們確定了一個方向:為了提高質量,我們需要清晰、有用的設計原則。一方面,我們認為只有定義了 Spotify 的設計原則是什么,才能夠幫助團隊評估他們是否以 “Spotify 方式” 進行設計。另一方面,我們還希望幫助設計師在討論設計目標和設計評審時使用相同的評價標準。通過不斷更新的設計原則可以實現保持高水平設計質量的目標。

          為什么我們需要新的設計原則

          為了解決設計無法標準化的問題,2013 年,Spotify 制定了最初的設計原則:內容優先、盡量活潑、建立熟悉感、爭取事半功倍、保持真實、恰如其分,這些原則讓設計師們在輸出和討論方案的時候有方向可循。有了設計原則之后,我們的設計方案在字體、色彩、圖片、板式、信息架構和交互方式等方面都具備了一致性,即使不是設計師也能夠對我們的設計產生共鳴。

          官方譯文!Spotify 如何從零開始創建新的設計原則?

          Spotify 在 2013 年制定的設計原則:內容優先、盡量活潑、建立熟悉感、爭取事半功倍、保持真實、恰如其分。

          但設計原則是需要與我們的業務目標一起向前的,到了 2020 年,Spotify 已經發生了很大變化,我們在播客上加倍發力,我們為消費者提供的不僅僅是音樂,而是包含廣播、故事等更多元的音頻形式;我們服務的對象,不僅僅是聽眾,還有藝術家和廣告商;我們的設計師團隊也不斷的壯大,發展到現在已經有近 200 人。

          看著 2013 年制定的設計原則,我們問自己:這些設計原則對于我們現在的設計是否還是正確的?Spotify 的設計師們是否真的意識到這些設計原則的存在?答案是否定的。

          我們經過對現有設計原則的討論,發現了以下三個方面的問題:

          1. 無法滿足不同內容的需求:原本的設計原則,更專注于消費者的音樂體驗,然而隨著 Spotify 的發展壯大,我們的產品不僅僅是音樂,而是包含更多內容的音頻,但這些原則似乎并不適用于我們設計的所有內容。

          2. 概念容易混淆:比如 “lagom” 和 “do less”,都有簡約的、恰到好處的意思,在表意上存在重疊使得它們很難分辨,在評估設計方案時,我們很難確定從哪一方面評估我們的工作。

          3. 數量過多的原則很難記?。焊鶕覀兊恼{研和設計師的反饋,設計師們往往記不住這些設計原則的內容,這也就導致了他們無法很好的在設計實踐中應用。

          簡而言之,舊的設計原則需要更新。

          制定新的設計原則

          去年,我們工作組的十幾名產品設計師和用戶體驗設計師,在一個協作研討會上聚在一起討論如何制定新的設計原則,我們希望團隊中的每個人都參與進來,而不是讓一個人來決定 Spotify 的設計原則應該是什么。

          我們通過以下三個問題,指導我們制定新的設計原則:

          • 我們為什么要制定這些設計原則?
          • 它們是給誰用的?
          • 它們將如何使用?

          經過一番激烈的辯論,我們得到了答案:

          • 設計原則是為了幫助設計創造,并為評估設計成果提供衡量標準。
          • 設計原則的核心對象是我們的設計師。
          • 在設計創作過程中設計可以幫助產品設計師做出設計決策;在評估設計時,提供統一的衡量標準,避免以短暫流行風格進行判斷。

          然而真正的挑戰是應該怎樣定義新的設計原則。我們在設計時應該追求什么樣的價值觀和設計屬性?產品應該傳遞給用戶什么感受?

          對于這些問題,每一位設計師都有自己的觀點。我們讓所有人將自己對 spotify 的設計原則進行定義,并將這些想法寫在便利貼上。我們將這些想法進行總結分類,為了避免重復性的概念,我們把相似的概念歸為同一類別,并且讓大家對這些觀點進行具體的描述,來幫助大家理解他們想要的設計原則。最后,我們將所有的想法都匯集在一個巨大的矩陣圖中,通過設計師們的投票來幫助我們縮小范圍,確定大家認為合理的設計原則。

          官方譯文!Spotify 如何從零開始創建新的設計原則?

          帶有便利貼的矩陣圖

          通過上面的方式,我們提出了新原則的草案。同時我們也通過與用戶溝通,進一步了解用戶對于 spotify 設計的理解,根據這些反饋,我們進一步在設計原則的概念細節上進行調整后,確定了新的 Spotify 設計原則:相關性、人性化、統一性。

          官方譯文!Spotify 如何從零開始創建新的設計原則?

          Spotify 新設計原則:相關性、人性化、統一性

          1. 相關性

          把每個用戶作為一個獨立的個體來看待。

          Spotify 是為每一位用戶量身定做的,我們希望 Spotify 具有個性化的感覺。為了給用戶提供專享的感受,在設計過程中,我們認真思考我們所展示的內容是什么、展示給誰以及在什么背景下呈現。簡單來說,我們會在正確的時間提供正確的信息給特定的人,我們不想要 “一刀切” 的體驗。

          那么我們在具體的實踐中,是怎樣體現 “相關性” 的設計原則呢?

          舉個例子,同樣是歌曲 “pure seduction” 的封面,歐美國家的用戶看到的畫面可能是激情熱吻,但對于相對內斂的東南亞國家用戶,封面的內容就會以更加含蓄柔和的方式呈現。同樣的,印度用戶大多數更喜歡聽印度語的歌曲,我們在一開始就讓他們選擇自己喜歡的音樂語言,使用戶得到與自己具有 “相關性” 的音樂內容。

          我們尊重不同的文化和社會環境,我們希望每一個視覺呈現都能夠適合當地用戶,能夠被當地用戶所理解。

          官方譯文!Spotify 如何從零開始創建新的設計原則?

          Spotify 播放列表封面和注冊頁面的示例

          2. 人性化

          人性化的設計是可以與用戶交流的。

          Spotify 是依賴于推薦算法的產品,但這種技術也是基于人的喜好的。Spotify 像人類一樣,也會有情感,有自己的思考方式。我們希望用戶在使用 Spotify 時,可以有一種 “和人交流的感覺”,如果我們把 Spotify 設計得太工具化,就會失去這種感覺了。我們的每周推薦歌單封面,沒有選用精致的照片,而是直接使用用戶的個人頭像,通過這種方式我們告訴用戶 “這是只為你一個人準備的歌單”,還有什么比自己的個人形象更加 “人性化” 呢?再舉個例子,在 Spotify 的兒童版本中,我們將創建個人資料的行為變成了創建有趣的卡通角色的過程,“人性化” 的虛擬形象使 Spotify 與兒童用戶更流暢的交流。

          官方譯文!Spotify 如何從零開始創建新的設計原則?

          Discover Weekly 封面和 Spotify Kids 應用程序的示例

          3. 統一性

          統一性可以使線下產品和線上產品實現品牌感。

          我們的線上和線下產品的設計風格都應該具有統一性,即使沒有過多的說明,人們看到一眼也可以知道這是 Spotify 的設計。統一的設計風格,可以讓用戶對于我們的產品有一定的熟悉感和信任感。正因如此,我們沒有完全拋棄 2013 年制定的的設計原則,去創造新的方向,而是根據之前的設計原則進行修改和優化。為了實現品牌的一致性,我們希望我們所制定的原則是可以在不同設計對象和設計場景中復用的。

          下圖中是一個營銷活動的案例,無論是線下的廣告牌、宣傳海報,還是線上的活動頁面,我們的設計風格都保持了統一性,無論你在線下還是線上看到,你都會知道這是 Spotify 的產品。

          官方譯文!Spotify 如何從零開始創建新的設計原則?

          Spotify 營銷活動的示例

          推行新的設計原則

          提出設計原則是一回事,讓每個人都參與進來完全是另一回事。如果我們想讓新設計原則持續運行下去,就需要一個執行計劃。

          在推行設計原則的初期,我們在一個設計團隊的工作坊中試運行了新的設計原則。通過觀察設計師在實際工作過程中,是否由于運用了新的設計原則更好的完成了設計實踐,幫助我們判斷這些原則是否是真的發揮作用。之后,我們將這些原則納入現有的設計活動中 —— 例如,在全員設計會議中,介紹這些原則,并將它們添加到我們的設計手冊和新員工的入職流程中。幾個月后,我們與 Spotify 的所有設計團隊都開展了一系列工作坊。這樣,每個設計師都可以學習如何將設計原則應用在工作實踐當中。

          在工作坊中,我們將設計項目中應用設計原則的案例記錄下來,比如,以用戶的名字來命名歌單,建立與用戶的 “相關性”。我們將這些設計師們在真實的項目中遇到的案例整理到一起,以便其他設計師看到具體案例時,更好的理解新的設計原則。

          官方譯文!Spotify 如何從零開始創建新的設計原則?

          展示如何使用設計原則的卡片

          在推行新的設計原則的過程中,我們發現有兩點值得注意:

          1. 恰當的案例,有助于我們對新設計原則的理解

          口頭上表達 Spotify 的設計原則是 “人性化” 或是 “相關性” 是很容易的,但是什么樣子的設計才是 “人性化” 和 “相關性” 的呢?在推行設計原則時,用例子來說明這些原則的含義非常有用,案例越多越有利于我們對這些抽象設計原則的理解。

          2. 周邊產品可有助于設計師理解和記憶新的原則

          設計原則也可以通過更多的周邊產品,如海報、貼紙或其他產品去推廣。理解新的設計原則和理念需要很多時間,周邊產品可以幫助團隊理解和記憶這些原則。為了推行新的設計原則,我們已經開始設計相關的海報、文具等周邊產品。

          官方譯文!Spotify 如何從零開始創建新的設計原則?

          設計原則的在線下產品應用的示例(由 deepyellow 和 dribbble 圖形組成的樣機模板)

          在沒有 “官方” 的周邊產品時,一位設計師把設計原則作為自己的筆記本電腦桌面背景,這也是一個很好的理解設計原則的方法。

          官方譯文!Spotify 如何從零開始創建新的設計原則?

          帶有壁紙的筆記本電腦,壁紙上寫著設計原則:相關的、人性化的、統一的。

          新設計原則的影響

          我們推出了這些設計原則后,有什么變化呢?

          1. 新的設計原則更容易被大家記住和應用

          現在,大多數設計師都意識到了 Spotify 有設計原則。根據我們的設計行動小組最近的一項調查表明,設計師們已經了解了 “相關性、人性化和統一性” 的設計原則,并且在設計過程中,設計師們也會考慮這些原則。這表明新的設計原則與我們之前的六項原則(內容優先、盡量活潑、建立熟悉感、爭取事半功倍、保持真實、恰如其分)相比,更適用且更容易被記住,也更容易在實踐中應用。

          2. 為設計評審建立了統一的標準

          設計師有時在設計評審時會參考這些原則,但在這方面還有有待改進。在評審期間,設計師仍然需要有意識的參考設計原則。隨著時間的推移,我們希望這成為設計師的本能反應。

          我們開始制定新的設計原則時,目的是幫助設計師提升設計質量。那么我們的新設計原則是否使設計質量有所提升呢?現在說還為時過早。但我們希望 “相關性、人性化和統一性” 可以傳達出 Spotify 的產品目標,這些原則能夠不斷提醒我們做得更好。

          總結

          設計原則不應該是一成不變的,設計原則需要根據我們的產品目標的不斷發展進行優化更新,不斷適應新的設計環境和設計對象,以持續保持高質量的設計輸出。

          好的設計原則應該是更容易被大家記住,并在工作實踐中應用的。好的設計原則可以幫助我們在工作中做出正確的設計決策,在設計評審中建立統一的標準。相比設計原則的制定,設計原則的推行也同樣重要,合理的推行方式可以使設計師真正的理解設計原則,并能夠像本能反應一樣在設計實踐中應用。

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

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

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

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

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



          防呆設計——10個防錯的通用設計原則

          資深UI設計者

          防呆(日語:ポカヨケ poka yoke),是一種預防矯正的行為約束手段,運用防止錯誤發生的限制方法,讓操作者不需要花費注意力、也不需要經驗與專業知識,憑借直覺即可準確無誤地完成的操作。

          而說到防呆設計,在各行各業都應用得非常廣泛。為了避免用戶在使用產品時不小心犯錯,產品在設計時都會加入“防呆設計”。防呆設計,就是通過設計的方法來實現防呆,來幫助盡可能多的人進行“無腦操作”的方法。當然,防呆設計如果做得不好,就變成了招呆設計。

          今天老王就跟大家來分享一下,在UI界面的設計中10種防呆設計原則。


          1.阻斷性原則




          2.保險性原則



          3.自動原則



          4.相符原則


          5.順序原則



          6.隱私原 



          7.重復原則



          8.提示原則



          9.錯誤提示



          10. 緩和原則


          如果你細心觀察你的四周,就會發現生活中很多細節都運用到了防呆設計。今天跟大家分享的這10種防呆設計的原則其實更是一種方法總結,具體如何運用還需要大家帶入到實戰中多多練習,在產品遇到錯誤時,想想該用哪種方式解決。


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

          文章來源:站酷    作者:micu設計

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

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

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


          興趣電商,是新機遇還是偽概念?

          資深UI設計者

          編輯導語:如今,電商的發展如火如荼,我們的生活已經離不開電商平臺。隨之帶來的是豐富多樣的選擇,消費者可選擇的種類更多了。但消費者的需求也在發生著變化,興趣電商的機會也來了。如何在興趣電商中拔得頭籌,脫穎而出?我們一起來看看吧。

          作者 | 周曉奇

          編輯 | 子夜

          來源 | 連線Insight(ID:lxinsight)

          “過度豐富的商品對于消費者來說,或許是一種恩賜,或許是一種詛咒。”在《品類殺手》一書中,美國著名零售業研究專家羅伯特·斯佩克特提到。

          經過十幾年的蓬勃發展,電商生態已經足夠豐富,如今人們足不出戶就可以購買到市面上絕大部分商品。

          但電商在豐富消費者物質生活的同時,也出現了商品過度豐富、信息過剩,用戶反而會因此感到疲倦,貨比三家也頗費精力。

          這也讓“推薦商品”成了新的商機。從社交電商,到目前依靠內容吸引用戶購買行為的電商生態,都是“貨找人”的場景。

          據招商證券發布的《直播電商三國殺》報告顯示,從2015年開始,以短視頻、直播為主要載體,依托優質內容激發消費者興趣的電商生態,在國內突然興起,并呈現爆發式發展。

          圖源招商證券報告

          今年2月,中國互聯網絡信息中心發布的第47次《中國互聯網絡發展狀況統計報告》,其中數據顯示,在電商直播中購買過商品的用戶已經占到整體電商直播用戶的66.2%,其中17.8%用戶的電商直播消費金額占其所有網上購物消費額的三成以上。

          通過短視頻、直播,用戶發現并了解了商品,而優質的內容則激發了用戶潛在的消費需求。

          這種電商生態,用興趣電商表述更為準確。

          不過,頗受爭議的是,在國內電商生態如此繁榮的環境下,興趣電商是涌現的新機遇,還是偽概念?

          商家、品牌商們已經在用腳投票,越來越多的品牌正在組建獨立的興趣電商團隊。

          據連線Insight不完全統計,美的、珀萊雅等品牌都在內部搭建了專門的直播團隊,三只松鼠有十余人的直播運營團隊,良品鋪子甚至還專門為抖音電商渠道單獨注冊了一家公司。

          在技術的不斷突破下,電商生態也隨之風云變幻,而興趣電商的出現,或將成為當前短視頻平臺在電商領域突圍的關鍵。

          一、用戶消費習慣變了,電商的新機會是什么?

          時代浪潮滾滾向前,電商世界也隨著用戶習慣的變化而風云變幻。

          在最早期,人們希望買到自己需要的東西,搜索式電商滿足了這一階段的用戶需求,解決了購物渠道和價格信息不對稱的問題。

          搜索電商時代解決了“人找貨”的問題,而社交電商時代很快進入了“貨找人”的階段。

          在新的階段,出現了借助社交流量激活的電商生態。在社交電商中,人的價值開始發揮重要作用,通過用戶與用戶建立聯系,進而推薦商品,極大地提升了用戶對不熟悉商品的信任感。

          更關鍵的是,在社交電商生態中,產生第一次交易后,真正的裂變才剛剛開始。通過社群或個體聯系,社交電商可以覆蓋單個用戶所有生活必需品。

          由此,專業的社交電商玩家陸續誕生,開始有了與傳統電商分庭抗禮的實力。

          可見,跟隨用戶消費習慣的變遷,在不同階段都會誕生不同的電商模式。

          那么目前,用戶出現了什么新的消費習慣?電商領域還有什么新趨勢?

          通過觀察用戶可支配收入、規模,以及日常高頻使用的軟件,或許能夠看到正在誕生的新機會。

          如今,隨著全國居民人均可支配收入的連年增長,人們的消費習慣在不斷發生改變。

          據國家統計局數據顯示,2020年,全國居民人均可支配收入為32189元,比上年名義增長4.7%,扣除價格因素,實際增長2.1%。其中,城鎮居民人均可支配收入43834元,增長3.5%,扣除價格因素,實際增長1.2%;農村居民人均可支配收入17131元,增長6.9%,扣除價格因素,實際增長3.8%。

          與電商剛崛起的時代不同,如今網購已演變為一種基礎消費形式,成為大多數用戶日常生活的基礎組成部分,而此時大部分用戶已經跨越了生存需求階段,越來越愿意為自己的興趣付費。

          抖音電商總裁康澤宇提到,當前用戶的消費結構發生了升級,早期大眾消費時代,消費者需要什么買什么,現在消費者生活富裕了,出現了很多精品店、Shopping Mall,消費者逛街過程中,沒有什么特別明確的需求,只是看到什么喜歡買什么。

          據中國網絡視聽節目服務協會發布的《2020年中國網絡視聽發展研究報告》(以下簡稱網絡視聽報告)顯示,我國短視頻用戶規模已經達8.18億,占網民整體的87.0%,其中,抖音穩居行業第一梯隊。

          在報告進行的專項調查結果中,其中46.9%的用戶每天看綜合視頻的時間在1-2小時,對于短視頻而言,這一數字為34.8%;此外,有16.1%的用戶每天收看綜合視頻的時長在2小時以上,對于短視頻而言,這一數字為18.2%。

          從各項維度來看,短視頻已經成長為互聯網行業第一大用戶時長、流量和內容的聚集地。

          這意味著,很多用戶的喜好在短視頻這個巨大的內容平臺上展示,他們對感興趣的內容點贊和評論。

          根據用戶喜愛的內容,發現用戶的潛在需求,給他們推薦他們感興趣的商品,這是興趣電商最大的特點。

          但要做好這件事并不容易,當消費者的需求不明確的時候,商家要怎么幫助用戶發現潛在需求?平臺又怎么幫助商家將商品推薦給感興趣的人?

          二、興趣電商,重在興趣

          興趣電商,真的能帶來成交嗎?

          興趣電商對應的消費特征是,用戶存在潛在的消費需求,但并不知道真正契合自己需求的是什么商品,或者說,在海量的商品信息、層出不窮的新科技新產品面前,消費者不知道自己的興趣和需求究竟應該以怎樣的產品形態出現。

          而在用戶觀看短視頻或直播的過程中,豐富而生動的內容會激發出用戶潛在的消費需求,從而轉化為商品訂單。

          在招商證券的《直播電商三國殺》報告中提到,直播帶貨能夠帶動觀看用戶的消費欲望:超過60%的用戶表示直播帶貨能夠非常大或者比較大地引起消費欲望。

          抖音創作者馬玲敏最先感覺到了這一趨勢。三年前,馬玲敏只是在朋友中最先玩抖音,平常拍攝的也都是自己上下班的日常,而在一次無意中,她拍攝了一條云南特色美食”油炸玫瑰花”的視頻,這讓其一夜漲粉五萬。

          當地習以為常的食物與鄉貨,在外界看來卻是新鮮事、新鮮好物。馬玲敏捕捉到這種變化后,開始通過短視頻和直播,將更多云南的特色鄉貨傳播給更多地方。

          2020年,馬玲敏與團隊小伙伴,走了上萬公里路,探訪了30多個云南村莊,在傳播云南特色鄉貨的同時,也賣出了2.5萬件當地特色美食,年銷售額達到123萬元。

          馬玲敏的案例,正展現出興趣電商的獨特性與商業價值。如果沒有抖音短視頻和直播,馬玲敏或許還是一個幼兒園老師,而沒有她的傳播,全國各地的用戶也不會知道眾多云南特色鄉貨。

          通過短視頻和直播,貨找人的路徑得以實現,而依托優質的內容,才是真正推進興趣電商誕生并發展壯大的重要因素。

          更多的創作者,正在短視頻平臺上輸出著優質的內容,而這些內容,都蘊藏著商機。

          只要在工作室內,陳凱拿起一把錘子,就能敲敲打打一整天,但他不是修理工,而是一位中國傳統甲胄愛好者。

          傳統甲胄,圖源抖音賬號殿前司-胖虎

          作為中國鎧甲愛好者社團“殿前司”的發起人之一,2018年,陳凱注冊了抖音賬號,開始通過短視頻的形式,讓那些曾經只存在于壁畫上、書籍里的傳統鎧甲“活了起來”。

          在他的短視頻中,包含了從傳統甲胄的整體展示,到制作過程、盔甲相關的歷史文化知識。

          在現代追求高科技、新技術的潮流下,陳凱為喜愛甲胄的玩家,開辟了一個小小的天地,而網友在陳凱的短視頻和直播當中,也找到了自己對傳統甲胄的熱情,成為了資深愛好者,積極地消費、傳播著相關工藝作品和文化。

          據連線Insight了解,如今在抖音上,手藝人的比例越來越多。原本,這些手藝人制作的工藝品無人問津,而通過抖音等短視頻平臺,這些手藝人甚至實現了年入百萬。

          追根溯源,這些手藝人能夠崛起的關鍵原因之一是,他們越來越習慣并擅長使用短視頻渠道。

          相比圖文內容,豐富的視頻內容更為通俗易懂,理解短視頻內容的門檻也就更低,由此吸引并帶來了更多元化的用戶群體。

          據網絡視聽報告顯示,截至2020年6月,我國網民較2020年3月新增3625萬。新增網民中,15.2%的人第一次上網時使用的是短視頻應用,此外,新網民對短視頻使用率為77.2%,較2018年底增長10個百分點以上。

          對手藝人而言,他們創作的內容天然具有稀缺的趣味性,而這種趣味性內容一旦匹配到相關愛好者,就有了商業變現的可能。

          可以說,短視頻和直播帶貨,將商品展示變得更加生動、直觀,而這也是推動興趣電商興起的時代背景。

          根據第三方測算,興趣電商的GMV到2023年大概會超過9.5萬億,整個電商行業會有越來越多的參與者轉向興趣電商。

          三、風口漸起,誰能突圍成功?

          興趣電商的想象空間很大,但想吃到這塊蛋糕得有真實力。

          需要比拼的要點,包括了平臺創作者的數量、用戶數量、內容的豐富和優質程度、推薦分發技術。

          只有這些都具備了,才能同時服務好用戶和商家,在激烈的電商競爭中實現突圍。

          對于商家而言,興趣電商的崛起,意味著更嚴峻的考驗,其不僅需要挑選出符合用戶興趣的商品,還要通過豐富的內容來展現該商品的趣味性,但這也意味著有更多發展與崛起的機會。

          首先最直觀的,就是獲得新客。

          在流量普遍高昂的情況下,商家獲客的成本居高不下,興趣電商顯然是一個值得嘗試的渠道。

          據康澤宇透露,抖音平臺的商家反饋,抖音電商85%的消費者都是新客,這意味著越來越多的消費者,開始涌入興趣電商生態。

          當前,據抖音官方數據顯示,截至2020年8月,包含抖音火山版在內,抖音的日活躍用戶數已經超過6億。

          在這個用戶數量的基礎上,只要結構合理、運行得當,其未來發展空間足夠廣闊。

          加華資本創始合伙人宋向前曾提到,現在年輕人受到非常好的教育,他們的視野更廣闊,而且作為數字經濟原住民,這一代年輕人掌握了很多信息,填補了信息差距。

          龐大的年輕群體,也有更高的消費力。

          據第一財經商業數據中心發布的《2020Z世代消費態度洞察報告》顯示,在中國,Z時代的開支達4萬億人民幣,占全國家庭總開支的13%,同時Z時代人群更愿意為自己的多元興趣而買單。

          Z時代消費規模,圖源2020Z世代消費態度洞察報告

          可見,在不久的將來,隨著Z時代逐漸成為社會重要支柱,更有趣、精準,內容質量更好的興趣電商,可能將改變整個電商產業以及重塑其中各個環節。

          但如今,國內興趣電商市場還在發展初期,與傳統電商生態依舊有很大差距,同時興趣電商要想避免僅停留在概念層面,平臺應該有耐心、有遠見,重視治理、重視質量,重視單純的GMV數字之外更切實的用戶體驗,如此才能讓興趣電商真正成為增長引擎。

          更為重要的是,作為電商生態中的新勢力,興趣電商不僅需要保證商品的內容有趣,更需要確保商品質量,保障每個消費者的購物體驗。

          看起來質量好,拿到手的產品不低于預期,這才能真正讓感興趣的用戶,沉淀為忠誠粉絲。

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

          文章來源:人人都是產品經理   作者:米可

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

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

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



          頁面加載方式介紹

          資深UI設計者

          網易新聞




          Pinterest

          Artand



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

          文章來源:站酷    作者:WseSteven 

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

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

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




          數據可視化--如何應用這12種圖表

          資深UI設計者

          怎樣設計圖表才能準確傳達數據故事,設計的過程中需要注意什么?下面介紹這12種圖表是如何應用的以及它們的優缺點

          圖表設計原則

          怎樣設計圖表才能準確傳達數據故事,設計的過程中需要注意什么?總結了幾個設計圖表的基本原則

          1.確保準確性

          數據可視化的設計首先需要始終保持數據的準確性和完整性。通過使用清晰的標簽、準確的軸線等精準的的展示數據,使數據時刻都是真實可信未修飾過的,不能為了修飾美化數據而歪曲混淆信息。

          2.提升用戶體驗

          為用戶瀏覽數據提供上下文標識有助于用戶快速感知數據,設計時要考慮到用戶現有的心智模型——這些心智模型可能由廣泛使用的工具塑造而成,創建出色的可視化體驗可使用標志性的功能引導用戶找到他們需要的東西。以幫助感知快速響應的系統。

          3.突出重點

          減少認知負擔使用戶專注于主要的信息上,需要對整體視覺進行降噪處理。最大化數據信息的呈現比率并避免設計過多無關的圖形元素。應用顏色促進圖形的理解:標簽、分類、突出顯示或度量;幫助用戶理解層次結構、數據方向和關系。


          12種圖表應用方式

          下面介紹12種圖表,應該根據什么樣的場景結合哪種數據結構使用,以及是否存在可替代的方案等。其中有幾種是在實際使用中并不常用的類型,大眾對這類圖表的理解并不多,我們只有在理解圖表的含義及功能才可快速應用在設計中。

          1.氣泡圖

          氣泡圖也是散點圖的一種,其擁有多元變量,除 X 軸和 Y 軸所代表的變量值外,每個氣泡的面積代表第三個值。

          缺點:氣泡的大小是有限的,太多的氣泡會使圖表難以閱讀。

          設計時需注意:

          a. 選擇合適的氣泡大小,不可過大或者過小,太的氣泡容易遮擋到其他氣泡不便于選擇查看被遮擋的詳細數據;太小的氣泡難以選擇

          b. 不要使用奇怪的形狀,均采用同一種氣泡類型僅通過顏色做區分即可;無需做太多造型,多種造型結合不夠直觀難以區分種類


          2.熱力圖

          熱力圖用于指示區域內每個點的權重。除了將地圖作為背景層外,還可以使用其他圖像。熱力圖中的顏色通常與密度掛鉤,每個顏色代表一個數據區間,通過使用顏色的對比來表示地理區域或數據列表的密度分布信息。

          如何設計?

          a. 使用簡單的地圖輪廓: 少量的留白輪廓可適當區分個區域邊界,大量留白輪廓使邊界過于清晰使各區域有割裂感的會分散注意力。

          b. 使用簡單的圖案:圖案過多容易干擾閱讀,盡量不使用圖案,如果必須要用使用1-2種即可,過多則難以駕馭;

          c. 使用合適的顏色: 強烈的顏色會導致視覺負擔,難以區分輕重緩急。使用單色或相近色,并調整陰影以區分區域更好。

          d. 選擇合適的數據范圍:數據范圍區間應該是均等的,而超出范圍的數據可用 +/- 表示。

          這些是設計熱力圖時需要注意的地方,適用于大多數情況,當然這也不能作為絕對的標準,需要具體情況具體分析。


          3.桑基圖

          ?;鶊D顯示了從一個指標到其子級指標的流量及比例。在流程的每個階段,節點可以組合或分割路徑。兩端的節點寬度顯示其數值大小,因此節點越寬,占比越大。可用于財務、管理和能源分析或代表產品的生命周期。這種類型的可視化可用于描述實體從源頭到終點的流程

          優點:對于文字流尤其有用:金錢、貨物、時間、選票等,但也可用于許多其他目的。通過連接流線可以直觀的區分變量的聚散關系。

          缺點:?;鶊D只能通過節點、連接和數值展示簡單的數據故事。不能從中推導出更復雜的關系。


          4.華夫餅圖

          華夫餅圖是一個非常有趣的圖表,通常由100 個方塊組成一個整體,因此它可以根據指標與整體的關系進行著色或填充顯示指標的占比情況,就像餅圖一樣,同時它也適合顯示單個百分比。

          優點:它能夠顯示整體的各個部分并比較單個百分比的多樣性,指標比例能夠更清楚地通過色塊面積表示。

          缺點:涉及太多指標時顏色區分變多使展示變得過于復雜,無法直觀看出單個指標的面積結構,因此適合用在只有少數指標的展示


          5.矩形樹圖

          當畫面中需要多次出現餅圖或環形圖展示指標間占比情況時,重復元素過多用戶閱讀時更加如意感覺到乏味,此時可以采用矩形樹圖展示占比,通過使用色塊面積比例來區分指標間占比大小情況。

          優點:使用區域空間而不是角度顯示數據,當類別超過五個時(避免有時難以標記的餅圖)以及可視化類別內的子類別,樹形圖比餅圖更有用。

          缺點:此類圖表應用不夠普遍,可能有大量用戶對這種圖表形式不太了解。


          6.旭日圖

          旭日圖是樹圖的一種替代方案,采用圓環形式表示分層數據信息。層次結構從內圈到外圈擴散,其展示形式像太陽一樣由中心向四周發散。圓環的每個指標被切片對應一個節點,圓心是根節點,在出現多個層級換結構時通過圓心切換回上一層級。旭日圖在用色上最好采用不同深淺的顏色來表示父子級結構在色調上保持一致性,使用戶能夠直觀的看出層級間的關聯關系。

          優點:可以顯示層次流以及整個關系的一部分

          缺點:如果配色方案不正確,那么理解圖表就會變得困難。此外,過多的切片會使圖表擁擠且難以閱讀。


          7.靶心圖

          同樣是占比圖的一種,與常見餅圖不同之處在于,該圖的指標間沒有關聯即占比百分數相加不等于100,但又需要同時查看指標的占比情況,因此需要采用這種形式進行對比分析

          優點:適用于指標間比較分析,視覺上較為直觀;

          缺點:因層疊環形過多無法在圖表上加大量文字輔助展示


          8.熱詞云

          熱詞云是展示文本數據的可視化形式,由大量關鍵詞組成的云狀彩色圖形。通過關鍵詞的大小顏色等區分詞語的使用頻率以及重要性,可以快速幫助用戶感知最突出的關鍵詞。

          優點:能夠快速獲取關鍵詞信息,可通過熱詞快速檢索所需信息

          缺點:因熱詞云需要大量的數據支撐,對數據依賴度高,如果數據過少效果則不明顯,不適合精確分析。


          9.河流圖

          河流圖是顯示指標的大小或比例如何隨時間變化,“流線”的垂直寬度表示該實體的大小。可以通過使用固定比例查看所有指標的整體大小的變化;也可以使用相對比例以某一項指標為參照目標,其他指標的值與此做對比;若所有指標始終達到 100%呈現的效果類似于面積圖。

          優點:可查看新指標的出現而其他指標消退的速度,整體的趨勢發展狀態比較直觀。

          缺點:雖然看趨勢發展方向比較直觀,但是詳細的信息閱讀起來較為困難。


          10. 瀑布圖

          瀑布圖通過對初始值進行多次加減運算來呈現達成某個值的運算過程。在瀑布圖中,需定義好顏色的含義,不同的顏色用于顯示不同的操作過程,例如綠色表示加法,紅色表示減法,藍色表示所有操作后收到的總值。這里起始值和最終值之間的所有值都是浮動的。

          優點:快速查看在上一數據的基礎上當前數據的變化情況

          缺點:使用此圖表是只能表示過程的流程


          11.儀表盤

          儀表盤是一種物化圖表常用在時鐘、汽車儀表等,通過指針角度代表當前數值進度。它可以直觀地表示一個指標的進度或實際情況。一個儀表板僅能表示一種含義,若出現兩種含義的儀表盡量分開展示,

          優點:儀表適用于間隔之間的比較。

          缺點:不適合用在具有多個分量的數據結構


          12.甘特圖

          甘特圖直觀地顯示了任務的時間區間、實際進度以及與需求的比較。因此管理人員可以輕松了解項目的進度情況。

          優點:適合快讀查看項目進度、狀態隨時間變化、項目流程等時間管理類信息

          缺點:可查看整體情況,詳細細節還需進行具體標注


          總結

          圖表的類型多種多樣,實際項目中使用何種圖表需要根據數據間的關系來決定,如果畫面出現同類型結構關系的頻率過高想要增加畫面的趣味性減少閱讀的疲憊感可以通過改變圖表的顏色進行區分,或者變換圖表類型,有部分圖表是可以替換使用的,例如:餅圖表示占比關系,可以換成南丁格爾玫瑰圖或環形圖,也可換成上文所提到過的華夫餅圖、矩形樹圖。因此在設計時可以不用太過于局限在圖表的結構上,可以在其他方向進行優化。



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

          文章來源:站酷    作者:胖kuan 

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

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

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






          日歷

          鏈接

          個人資料

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

          存檔

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