在B端設計中,數據可視化是必不可少而且非常重要,越來越多的設計師需要和數據打交道,但是很多設計師不懂可視化當中不同用途的圖表規范,只是單純設計出好看的數據圖表,卻不能給用戶帶來更多的信息和價值。
因此掌握數據可視化能力是設計師必不可少的一個技能,然而目前國內互聯網對于數據的教學不夠全面,這讓很多B端的設計師很苦惱,所以今天我結合自己的工作經驗和大家分享一下--“數據可視化之圖表設計”,為大家梳理一套完整的數據可視化的框架,以及關于可視化設計的基本準則和規范。幫助大家理解什么樣的數據對應什么樣的圖標,了解顏色的意義,知道數據排版的要點。
將不可見的數據轉化為可見的圖形和符號,從中發現規律和特征,以獲取更多的信息和價值。
在當前互聯網的時代下,一頁圖可能對標一個龐大且復雜的數據表格,按照人類本身對圖的記憶遠大于對抽象文字的記憶,所以我們要學會讓數據說話,數據可視化除了“簡潔直觀”,還可有容易理解和記憶、傳遞信息更豐富的特點。
接下來我們開始思考如何制作數據可視化圖標?首先規范的流程是最好的前提,下面的工作流程結合我自己的經驗和日常企業的數據分析場景,找到了一個合適的參考,我們就可以步步為營,避免很多不必要的返工,保證設計質量和項目進度。
很多小伙伴在做可視化圖表設計過程中,肯定遇到過這樣的困擾,發現自己做完的圖標并未能準確表達自己的意圖,也無法傳達自己的意圖,圖表通常讓用戶看完困惑不已,主要問題出現在分析的維度沒有找準或定義的比較混亂,面對B端龐大復雜的圖標,同樣的一個指標的數據,我們從不同維度分析就會出現不同結果。用一句古話來形容:橫看成嶺側成峰。
國外專家Andrew Abela曾整理了一份圖表類型選擇指南圖示(如下圖),他把數據的關系分成了4種類型,幫助我們去選出合適的圖表來呈現。
上圖向大家展示了數據分析常用的4個維度,我們在選定數據指標后,我們需要和數據產品經理溝通我們核心需求,是我們想通過可視化向用戶傳遞什么價值信息。上圖引導我們從“聯系、分布、比較、構成”四個維度更有邏輯的思考這個問題,我們在進行圖表設計時首先進行需求的分析,熟悉數據并且明確數據要展現出來的信息,然后選用合適的圖表來進行數據的展現。
聯系:數據之間的相關性
分布:指標里的數據主要集中在什么范圍、表現出怎樣的規律
比較:數據之間存在何種差異、差異主要體現在哪些方面
構成:指標里的數據都由哪幾部分組成、每部分占比如何
考慮到日常企業的數據分析場景,圖中有些圖表使用頻率是非常低的。所以我參考了上圖的部分內容,對其進行了總結,重新整合成三個維度
圖表的作用,是幫助我們更好地看懂數據。選擇什么圖表,需要回答的首要問題是『我有什么數據,需要用圖表做什么』,而不是 『圖表長成什么樣』 ,根據數據選用合適的圖表展現來把數據的信息傳達給用戶。因此我們從數據出發、熟悉每種圖表的定義、適用場景、優缺點,從功能角度對圖表進行分類,這樣才能快速選擇合適的圖表。
定義:柱狀圖是一種以長方形的長度為變量的統計圖表。長條圖用來比較兩個或以上的價值(不同時間或者不同條件),只有一個變量,通常利用于較小的數據集分析。
特點:
1、這個分類不限于地區、品牌等,可以是一個時間周期;
2、數量控制在5-12條最佳;
使用建議:
(1)使用合適的寬度去適配柱條的寬度
當柱子太窄時,用戶的視覺可能會集中在兩個柱中間的負空間,而這里是不承載任何數據的。寬度推薦使用在1/2 柱寬到 1 柱寬之間,但也要視情況而定。
(2)不推薦采用全圓角
柱形圖可以有適當的圓角,全圓角則有可能歪曲可視化圖表的表達,用戶可能無法明確是圓心還會頂點作為峰值。
(3)不要使用非水平和豎直的文字標注,也不要使用轉行
有時坐標軸上的注釋文字會很多,所以很多人為了妥協,在小空間內顯示出所有的文字標注內容,而使用傾斜的文本,或者將文本轉行處理。
不要用過于復雜的設計形式,數據可視化的第一要義是簡單易懂,所以在遇到標簽文字過長時,可以采用將柱狀圖轉化為條形圖
定義:條形圖是用寬度相同的條形的高度或長短來表示數據多少的圖形。條形圖能夠使人們一眼看出各個數據的大小,易于比較數據之間的差別。當條目較多,如大于12條,移動端上的柱狀圖會顯得擁擠不堪,更適合使用條形圖。
特點:
1、與柱狀圖類似,只是交換了X軸與Y軸位置;
2、多用于豎長的顯示區域,例如手機端、大屏的一側;
3、多用于top排行或分類名稱較長的情況;
4、數量一般不超過30條,否則易帶來視覺和記憶負擔
使用建議:
(1)采用有序排列,軸標簽右對齊
對多個數據系列排序時,如果不涉及到日期等特定數據,最好能符合一定的邏輯用直觀的方式引導用戶更好的查看數據。
可以通過升序或降序排布,例如按照數量從多到少來對數據進行排序,也可以按照字母順序等來排布??傊?,按照邏輯排序可以一定程度上引導人們更好地閱讀數據。
(2)標簽直接顯示在柱體上
條形圖還可以通過省略橫軸和縱軸,并直接在柱子上表明數值,來降低數據墨水比,進一步提高信息的獲取效率。
定義:用于顯示數據在一個連續的時間間隔或者時間跨度上的變化,它的特點是反映事物隨時間或有序類別而變化的趨勢。折線圖分為直線折線圖和曲線折線圖。折線圖可以清晰的反映數據是遞增還是遞減、增減的速率、增減的規律(周期性、螺旋性等)、峰值等特征。
特點:
1、橫軸如果不是表示連續數值,折線圖的意義不大
2、數量一般不少于3條,否則用柱狀圖更合適
使用建議:
(1)反映事物隨時間或有序類別而變化的趨勢
折線圖看的是趨勢,所有不是有序類別的不適合使用折線圖
(2)視覺美化
折線圖可以清晰的反映數據是遞增還是遞減,不能和面積圖累計的概念混淆,由于折線圖放在界面上的視覺重量很弱,所以我們可以通過添加微漸變加重視覺。
定義:面積圖又叫區域圖。它是在折線圖的基礎之上形成的, 它將折線圖中折線與自變量坐標軸之間的區域使用顏色或者紋理填充,顏色的填充可以更好的突出趨勢信息,需要注意的是顏色要帶有一定的透明度,透明度可以很好地幫助使用者觀察不同序列之間的重疊關系,沒有透明度的面積會導致不同序列之間相互遮蓋,減少可以被觀察到的信息。
使用建議:
(1)不要超過7個序列
當數據系列過多時,往往造成用戶難以觀察的痛苦,所以建議使用堆疊面積圖時數據系列最好不要超過7個。
分組條形圖屬于條形圖的一種,又叫簇狀條形圖,是一種以不同分組高度相同的長方形的寬度為變量的統計圖表,每個分組中的柱子使用不同的顏色或者相同顏色不同透明的方式區別各個分類,各個分組之間需要保持間隔。
特點:
(1)適用場景
分組條形圖適用于表達相同分類不同組別的數據,或者相同組別不同分類的數據,簡而言之,就是根據一個相同變量的不同分組進行數據表達。
(2)不適用場景
分組條形圖不適合用于表達分組過多的,數據量較大的數據,也不適合用于表達趨勢類的數據。
定義:雙向柱狀圖又叫正負條形圖,是使用正向和反向的柱子顯示類別之間的數值比較,其中分類軸表示需要對比的分類維度,連續軸代表相應的數值。
定義:一種圓形直方圖,使用半徑長短表示數值大小??梢栽谝曈X上夸大數據之間的差異。
特點:
1、由于面積等于半徑的平方,玫瑰圖會將數值之間的差異放大
2、南丁格爾玫瑰圖不能用于表示占比構成
3、數量:一般 不超過30條,否則易帶來視覺和記憶負擔
定義:雷達圖又稱為蜘蛛網圖、網絡圖,蜘蛛圖,星圖,是以在同一點開始的軸上顯示的三個或更多個變量的二維圖表的形式來顯示多元數據的方法,所有這些方面都可以類似地量化,常用于排名、評估、評論等數據的展示,比如我們玩王者榮耀中英雄的各項性能指標。
特點:
1、指標得分接近圓心,說明處于較差狀態,應分析改進;指標得分接近外變現,說明處于理想狀態
2、數量控制在5-8個最佳
定義:對比分類數據的數值大小以及是否達標
特點:
1、可以通過標記刻度區間,來進行更好的評估
2、數量控制在10個以內
定義:由多個梯形從上而下疊加而成。從上到下的項有邏輯上的順序關系,梯形面積表示某個業務量與上一個環節之間的差異,通過漏斗各環節業務數據的比較,能夠直觀地發現和說明問題所在,為決策者提供一定的參考。
特點:
適用于業務流程比較規范、周期長、環節多的單流程單向分析,不適合表示無邏輯順序的分類對比
使用建議:
(1)漏斗圖不是表示各個分類的占比情況,而是展示數據變化的一個邏輯流程,如果數據是無邏輯順序的占比比較,建議使用餅圖更合適。
(2)可以根據數據選擇使用對比色或同一種顏色的色調漸變,從最暗到最淺來依照漏斗的尺寸排列。切記,不要添加許多圖層和顏色造成漏斗圖難以閱讀。
定義:用于表示不同分類的占比情況,通過弧度大小來對比各種分類,將一個圓餅按照分類的占比劃分成多個區塊,整個圓餅代表數據的總量,每個圓弧所在的塊表示該分類占總體的比例大小,所有圓弧所在的塊組成的圓餅等于 100%,這樣可以很好地幫助用戶快速了解數據的占比分配。
特點:
1、可以通過標記刻度區間,來更好的評估
2、數量控制在10個以內
使用建議:
(1)餅圖適合用來展示單一維度數據的占比,要求其數值中沒有零或負值,并確保各分塊占比總和為100%
(2)餅圖不適合被用于數據的比較
定義:本質是將餅圖中間區域挖空
特點:
(1)餅圖的整體性太強,我們會將注意力更多集中在扇形的面積上,環圖則可以很好地避免這個問題
(2)建議分類數量不超過9個
使用建議:
餅圖更加集中面積,環圖會集中在角度和弧長上,所以我們中間的空間利用率還可以更好的利用。
定義:旭日圖(Sunburst)由多層的環形圖組成,在數據結構上,內圈是外圈的父節點。因此,它既能像餅圖一樣表現局部和整體的占比,又能像矩形樹圖一樣表現層級關系。
特點:
1、旭日圖=N張餅圖
2、離遠心越近,代表層級越高
3、下一層級的總和構成上一層級
4、可以無限向外擴展
定義:堆積面積圖是一種特殊的面積圖,可以用來比較在一個區間內的多個變量。如果有多個數據系列,并想分析每個類別的部分到整體的關系,并展現部分量對于總量的貢獻時,使用堆積面積圖是非常合適的選擇。
特點:
1、適合表達總量和分量的構成情況
2、分類指標的縱軸起點,并不是從0開始,而是在上一個分類基礎上疊加
使用建議:
1、圖表有重疊的數據時,類別數量越多,重疊越多,因此可見度越低,所以不建議堆疊面積圖中包含過多數據系列.
2、堆積面積圖要展示部分和整體之間的關系,所以不能用于包含負值的數據的展示。
3、建議堆疊面積圖中把變化量較大的數據放在上方,變化量較小的數據放在下方會獲得更好的展示效果。
定義:堆疊柱狀圖是柱狀圖的擴展,不同的是,柱狀圖的數據值為并行排列,堆疊柱圖則是一個個疊加起來的。它可以展示每一個分類的總量,以及該分類包含的每個小分類的大小及占比,因此非常適合處理部分與整體的關系。
特點:
1、二級分類并不是按照同一基準對齊的
使用建議:
大多數的堆疊柱狀圖都是垂直繪制的,但是如果你的數據標簽特別長時,考慮更好地展示效果,可以選擇使用水平堆疊的方式。
定義:通過顯示正值(收入)和負值(支出)對總量的貢獻來顯示結果累積的過程,因為形似瀑布流水而被稱之為瀑布圖。瀑布圖通過巧妙的設置,使圖表中數據的排列形狀(稱為浮動列)看似瀑布懸空,從而反映數據在不同時期或受不同因素影響的程度及結果,還可以直觀反映出數據的增減變化,在工作表中非常實用。
特點:
1、過程值為正的時候,向上加;
2、過程值為負的時候,向下減;
定義:特殊高亮的形式顯示數據集中的區域和數據所在的地理區域的圖示。使用地圖作為背景,對數據的地理分布顯示直觀通過顏色深淺、氣泡大小等容易判斷度量的大小,將數據在不同地理位置上的分布通過顏色或者氣泡映射在地圖上。
特點:
1、結合散點:位置坐標更清晰
2、結合飛線圖:表達起始點和目標點的鏈接或流向關系
使用建議:
(1)必須要有地理位置
(2)展現的通常是以某個地區為單位的匯總的連續信息
(3)當你用基于地圖的熱力圖的時候,顏色梯度變化一定是有規律的,一定根據數值遞增遞減來變化的,否則在視覺上產生錯誤引導
定義:數據點在直角坐標系平面上的分布圖,表示因變量隨自變量而變化的大致趨勢。
定義:氣泡圖是顯示變量之間相關性的一種圖表。與散點圖類似。在直角坐標系中顯示數據的兩個變量(X和Y軸)之間的關系,數據顯示為點的集合。與散點圖不同的是,氣泡圖是一個多變量圖,它增加了第三個數值即氣泡大小的變量,在氣泡圖中,較大的氣泡表示較大的值??梢酝ㄟ^氣泡的位置分布和大小比例,來分析數據的規律。
特點:
有一定的數據量是展現三個變量之前的相關性,數據具有3個序列、特征及相關值。
舉個栗子:
我們回歸到線下場景,我們通常在逛生鮮超市類如盒馬生鮮、沃爾瑪等,會發現里面售賣的雞蛋、生鮮類會比外面便宜很多,因為他們容易過期,屬于成本極高的食品,通過限購來讓他們引流,從而吸引更多的顧客來買那些成本低、單品收入高的商品。
最后給大家總結一下,首先我們拿到數據后先明確我們的使用目標,是讓用戶用最短的時間了解到數據帶來的信息,結合每個圖表的優缺點,選擇合適的圖表,從需求和目標出發,切忌盲目的增加和刪減元素,圖表的易用性大于它的美觀度。
以上就是本篇文章的全部內容,數據可視化是一門龐大系統的科學,關于可視化相關的知識還有很多沒有涉及到,例如可視化圖表的構成、圖表運用場景、數據可視化大屏等等,后續希望大家持續關注。
文章來源:tob.design 作者:佩奇一只居
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
元旦過后,新的一波工作又要開始了,我在開始準備新一輪匯報材料的時候突然想到了一個問題,不知道鐵子們在往年參加設計評審的時候,有沒有總被老板 diss 設計稿里“太空了” “不夠飽滿” 這些個問題呢?
我猜測應該 99%的鐵子經歷過,我也不例外,從校招進到第一家公司就開始被植入頁面需要利用好每一像素的理念,搞得像北京房價一樣寸土寸金,生怕被浪費了;思前想后為了大家不重蹈我的覆轍,所以新年的第一篇,咱一起來聊聊排版的問題:
如果你看過我過往的文章,也許會對我的排版多少有點印象,夸張的大字,極強的對比,還有一些微妙的層級關系。
坦誠的講,我的風格揉雜了 2 種設計體系 —— 瑞士風格 / 擬物風格;
1. 瑞士風格
整潔、嚴謹、工整、理性化、實用的特征是瑞士平面設計的精神所在;這種一絲不茍,傳達準確的風格,即所謂瑞士國際主義風格。簡單的說,由于 Swiss Design 這種風格簡單明確,傳達功能準確,因而很快得到世界范圍內的普遍認可,成為戰后影響最大的一種平面設計風格,也是國際最流行的風格,因此,又被稱為國際主義平面設計風格;
簡單的說,瑞士的這種設計風格典型的代表就是我們看到的雜志,其中有 3 個特點:講究網格 / 非常理智的克制顏色的使用 / 層級關系;有趣的是,審美和潮流是循環的,隨著時代的發展,越來越多的 app 開始重新挖掘出來瑞士風格并加以使用,比如我們 iOS 系統自帶的應用們,Spotify:
年少的時候,我經??粗@些個 app 會不禁的問,為什么在沒有一張圖片的情況下還能如此好看?這些年終于明白了前人良苦用心:文字是內容,同樣也是構成;是信息,同樣也是裝飾;簡單可以理解為,不管在平面還是網頁亦或者是 UI 界面,在沒有可用的裝飾下,信息本身要承擔起裝飾和傳達的雙重功能,這就是瑞士風格的核心本質。
2. 擬物風格
iOS 是擬物的典型代表,網上對于這塊的講解已經過于飽和了,我也沒必要贅述;那么這一趴,來聊聊對我產生深遠影響的錘子科技吧。我第一次接觸到 smartisan OS 并沒有覺著多么驚艷,潛意識里只不過是覺著把 iOS 的圖標畫的更漂亮了一點而已…
但當我打開下圖這個頁面的時候,我意識到我對擬物的理解還是淺薄了,第一次被光影的層次震撼到:
通過光影塑造了一個三維空間,讓整個畫面豐富飽滿,也打破了我幼稚的設計觀,PS.不管錘子科技現在如何,我依然敬佩 Paco / 方遲 / 羅子雄的設計團隊為這個行業做出的貢獻,respect!
毫無保留的說,我的設計就是二者的融合,以 層次對比 作為核心理念。
啰嗦了半天,趕緊進入正題;如果你是一名產品體驗設計師,一定聽說過 “奧卡姆剃刀” ,這個定律通常用在交互鏈路的設計上(意思就是在用戶路徑中沒必要的步驟,省了就完事了),“如無必要,勿增實體” 即簡單有效原理;
同樣,在嘈雜的視覺結構里,畫面也需要奧卡姆剃刀,當你在對畫面的飽和上困擾不已,并急于找到一些背景和紋理填充的時候,我建議你先冷靜一下…因為頁面的空虛未必是需要實體化的東西來填充的;上文有說過以 “層次對比” 作為核心理念出發,要區別于平面設計,營造一個立體空間,所以先理一下畫面結構:
通常來講,如果想要不平,把二維空間轉化成三維空間是必要的一步,需要在 Z 軸上下功夫;如果你恰巧也是一名攝影愛好者,可以想象下照相機的焦距和景深,工作原理是相同的,需要 前景 / 主體和背景 三個層次;當然,虛實的對比對信息的呈現和層次的拉開是極其重要的,這里需要通過景深來控制效果,你可以通過 photoshop 濾鏡-模糊畫廊的“場景模糊”來做到:
另外,空間的感覺想要被突顯,那么“光影和空氣”的價值就可以無限放大了,按照如上所說的結構,把內容和自然物質擺進去就好了,甚至可以做到舉一反三(比如不同顏色的氛圍,我就不展開了):
整個 case 下來,你會發現用光來聚焦在信息上,自然而然就形成了我們說所得 “信息優先級”;有點時候空氣和光影的飽滿程度超乎你的想象,這種自然存在的物質可以很好的幫助畫面分層,以達到填充的效果,并不是一定要依賴于實體化的裝飾。
對了,如果你跟我一樣閑著沒事干的話,借用 keynote 的動畫效果做一個吊炸天的動效,一定可以成為匯報場上最靚的崽(注意:視頻有音樂)!
keynote 素材和視頻可在開頭/文末下載
本來不打算再開一個章節說這個,但還是覺著很有必要再說下(我好糾結),作為 PPT 來講,ta 的主要用途分為兩種:其一是給人看的,其二是給人講的;不管是哪種,盡可能的簡化文字,是對輸入者關愛;
以上圖為例(實名 diss 自己的作品),坦誠的講左邊的部分大多數觀者是不會有心思來看的,按照視覺系統的處理,這部分就會被當成一個“面”而被忽略掉,這種情況下右邊顯得有力很多,也能幫助觀者聚焦信息,所以還是那句話,能不寫的就別寫,能少些的別多寫,保持信息的密度也是設計師必要的職責之一。
想問一個問題,鐵子們覺著 UI 的本質或者作用是什么?從我個人的角度來講,UI 設計的本質就是對信息的整理歸類和編排,沒有什么比信息更重要,如果貿然為了飽滿加入一些裝飾元素,很有可能是本末倒置,得不償失。這就像喝酒一樣,喝醉很容易,但微醺的感覺才是最棒的,希望你能有個好心情迎接美好的一年~
文章來源:優設網 作者:負能量補給站
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
編輯導讀:隨著5G技術的發展和AI的不斷進步,自動駕駛產業迎來了發展的快速時期。而車聯網作為自動駕駛產業鏈上的關鍵一環,吸引了包括百度阿里騰訊華為等巨頭的注意,紛紛投入資金和精力,希望在市場中搶占先機。本文作者總結車聯網2020年的發展,與你分享。
在5G應用加快落地、AI技術不斷進步之時,自動駕駛產業迎來了發展的快速時期。特別是在傳統汽車行業進入“新四化”的大趨勢中,車聯網更是成為自動駕駛產業鏈上的關鍵一環。
2020年“車聯網”作為汽車行業技術發展研究中的一個重要領域,已經成為國內外新一輪科技創新和產業發展的熱點。回顧整個2020年,國內車聯網領域的發展也是穩步向前。
近些年,在汽車產業“新四化”的推動下,“聯網化”已經被當成汽車真正成為智能化終端的基礎,并且據業內人士估算,車聯網技術如果得到充分應用,將能夠降低20%的能源消耗和25%~30%的尾氣排放;緩解60%的交通擁堵,提高現有道路通行能力2~3倍;減少80%的車輛事故率和30%~70%的死亡人數,其重要性不言而喻。
日前,IHSMarkit發布了的《2020年中國智能網聯市場發展趨勢報告》報告顯示,中國搭載智能網聯功能的汽車市場規模預計將在未來持續增長,并在2025年超過75%,高于全球水平。
也正因如此,車聯網已經成為這些年巨頭們在互聯網下半場競逐的主要賽道,從市場競爭方面來看,百度入局,多年時間在自動駕駛賽道殫精竭慮;阿里搶入其中,聯手上汽打造斑馬智行;騰訊當然也沒坐以待斃,更是打造出騰訊車聯、蘑菇車聯、梧桐車聯三張牌;在BAT之后,華為也不甘示弱,成立了智能汽車解決方案事業部,攜鴻蒙OS籌建自身朋友圈;今年車聯網賽道戰事再升級,京東、字節跳動也先后宣布加入混戰,至此巨頭云集的車聯網迎來“大割據時代”。
巨頭混戰同樣也在加速車聯網商業化進程,有專家表示“智能駕駛下的車聯網是未來,3到5年可以全面實現。”而市場數據同樣也在印證這一說法。
在《2020年中國智能網聯市場發展趨勢報告》中,公布了今年BAT車聯網系統的上車情況,具體來看,今年1-7月的新車銷量市場占比中,百度實際搭載新車銷量占比高達49%,騰訊占比35%,阿里占比16%。
而2020年全年當前市場搭載車型數量預估來看,百度預計將有61款搭載小度車載的車型上市,大大領先于阿里的32款及騰訊的26款,截止目前百度合作上市車型已超過600余款。
另外,在合作品牌方面,2020年也迎來了較大突破,BAT車聯網合作汽車品牌在今年都有所增加,截止今年8月,百度Apollo智能車聯已與奔馳、寶馬、奧迪、福特、別克、凱迪拉克、雷克薩斯、吉利、長城、奇瑞、現代、起亞等汽車品牌達成合作;阿里方面則有福特、斯柯達、名爵、榮威、觀致、寶駿等上汽品牌;騰訊合作方則有哈佛、吉利、長安、福特、奧迪、寶馬、Jeep、瑪莎拉蒂等品牌。
從品牌數量上能看出,依舊是百度遙遙領先,并且更大的優勢在于百度Apollo智能車聯不僅合作車企數量多,同時全面覆蓋各大車系。除了自主品牌外,與德系、美系、韓系、日系的眾多汽車品牌也在保持緊密合作,而這正是騰訊與阿里所缺乏的。
值得一提的是,在前不久的百度Apollo生態大會上百度提出了“領先一代”的概念和內容,其中“領先一代商業模式”就是重點之一,所謂領先一代商業模式是指,通過小度助手汽車版將為整成廠商提供從賣硬件到賣軟件與服務的轉型,為整車廠商開拓更寬廣的增長引擎,將車聯網從成本中心直接變成利潤中心,并打造“會呼吸、有生命、可進化”的載體驗,幫助整車伙伴業務持續升級,并且小度助手汽車版將通過高度集成的新運營工具集,賦能車企全周期用戶運營。
2020年已被不少人視為5G車聯網商用的拐點,在“軟件定義汽車”的共識下,無論是軟件企業還是整車品牌都在越跑越快,在百度Apollo生態大會上百度Apollo智能車聯事業部總經理蘇坦就表示:“汽車行業正在經歷著前所未有的變革,軟件正在定義著硬件,智能也在定義著性能,而車已經開始有了靈魂,這靈魂正在定義著車的形態?!?
從軟件到服務、到智能硬件支持、再到整體解決方案,車聯網產業鏈上的每一個環節都蘊藏這巨大商機,而百度們正在加速開啟。
當下車聯網技術層面的競爭,包括BAT在內玩家都在宣傳自家的車聯網方案都是一個開放的生態,都在建立一個開源的“技術底座”,但其中也存在不少差異。
例如,百度依托Apollo這個當下全球最大的自動駕駛開放平臺,集成了包括車輛平臺、硬件平臺、軟件平臺和云端數據服務,再通過小度車載OS為智能網聯系統,將能力集中對軟硬件平臺以云端數據平臺進行管控,以此成就了百度Apollo智能車聯的車載場景解決方案。
阿里旗下的斑馬網絡則是通過與YUNOS重組,形成了具備貫穿端、邊、云、網能力的整體系統,使其達成在整車電子電氣架構智能化、車機硬件與軟件、車機內底層操作系統、上層應用形成四個層面的技術閉環,而AliOS則是鏈接樞紐。
騰訊車聯網則是由五大基礎框架構成,包括大數據、云計算、人工智能、安全能力和內容平臺,像旗下三張牌之一的蘑菇車聯就推出了“蘑菇OS+AI云+智能終端+傳感器“的解決方案。日前,梧桐車聯基于TINNOVE OpenOS技術,也推出了TINNOVE 3.0解決方案。
在外人看來,三家的車聯網技術解決方案好像非常接近,只是形式和對概念的表述方式有所差異,其實不然內核區別非常大,簡單來講百度Apollo智能網聯其覆蓋了包括車聯網、V2X、自動駕駛全領域的布局,而斑馬,騰訊的解決方案主要僅覆蓋于智能網聯領域。
再來要弄清楚,車聯網領域到底需要怎樣的“技術底座”,是需要滿足不同的車型,為汽車產品提供標準化解決方案?還是需要具備多場景應用生態,可以為行業提供豐富的可兼容性軟件工具?答案是都要具備。
再來對比三大玩家,也是因為解決方案本質上覆蓋領域的不同,目前而言能夠滿足這一要求的還只有百度。今年成都、北京的幾大車展上,百度都展現出了這方面的能力,像全新推出的小度車載2021,基于五大基座滿足了為汽車產品提供標準化解決方案;在多場景應用生態方面,依托強大的AI能力,百度車載OS集成了語音、搜索、小程序、地圖導航等百度AI能力。
并且從當下市場數據中我們能看到,百度Apollo智能車聯大規模上車,無論是合作車企品牌,還是搭載車型數量均位于行業第一,之前就提到已經與70多家汽車企業合作,合作上市車型超過600余款,這便是最好的證明。
在今年生態大會上,百度更是提出“領先一代的共贏關系”,對于開發者而言,依托小度助手汽車版推出首個車規級生態底座,并通過低代碼量的小程序開發框架和標準組件,讓更多車企與海量小程序對接,并開放豐富的車機流量入口,通過接入豐富成熟的運營?具,形成獨特的跨聯盟超級APP流量交換。助力開發者快速達成AI能力閉環,實現一次開發,多屏、多車型適配搭載,讓開發者快速上車,同時通過豐富的車機流量,承接豐富成熟的運營工具,形成獨特的跨聯盟超級APP流量交換,引領開發者實現共贏。
除此之外,智能汽車已進入“人機共駕”新時代,如何打造人與車之間的全方位流暢交互,也成為汽車智能化行業的核心問題之一,為此百度地圖汽版迎來再次進化,推出了智能領航系統,成為了最懂駕駛的下一代智能座艙地圖,面向車企百度地圖汽車版2021提供了三橫一縱全方位地圖解決方案,讓車企量產更加簡單,百度也將這稱之為“領先一代的車載地圖”。百度正的實現“開放”,而這些方面是現階段阿里與騰訊無法比擬的。
2020年百度已經成為大部分車廠的技術底座已是事實,至于未來這個位置是否會發生變化,還要看百度能否一步快步步快。
最后,隨著車聯網滲透率越來越高,汽車的駕乘體驗不再局限于駕駛感受、靜音舒適這類硬件機械層面的體驗,而延伸到車機交互、LBS服務等基于技術能力和內容生態方面的體驗感受。
而2020年正是車載內容生態爆發的一年,“車內大生態”這一概念也被提出,BAT依然是這方面的佼佼者。
百度方面,車載生態一直都是強項。比如LBS,百度已經打造了中國車載領域最豐富的LBS服務基礎設施;數據基座方面,同樣建立起了一套完整的專為汽車和出行服務的數據平臺,通過對車內車外云端數據整合和大數據分析,實現數據驅動變革;至于生態伙伴方面,截至目前Apollo已引入喜馬拉雅、QQ音樂、蜻蜓FM等頭部生態伙伴超300家,并且囊括了全球所有主流汽車制造商、一級零部件供應商、芯片公司、傳感器公司、交通集成商、出行企業等等,覆蓋了從硬件到軟件的完整產業鏈。“軟硬兼施、內外兼修”是百度在車聯網內容生態方面路徑。
阿里在車聯網生態方面則有著不小的麻煩,“自生態閉環”遭到不少質疑,所謂“自生態閉環”即AliOS系統所搭載軟件均為“阿里系”APP,地圖一律用高德,音樂為蝦米,每個都裝有支付寶,若安裝車載微信等第三方軟件,需要將斑馬系統破解。特別是當下“反壟斷”成為熱點后,阿里車聯網生態也在遭受質疑,有行業人士認為“閉環說白了就是壟斷,客戶的選擇有排他性,上面搭載的軟件不管好不好用,都得用它的?!?
在大方向上,騰訊與阿里一樣也有著自己的“生態閉環”,但今年騰訊在車載內容生態上的布局并非以內容為主,像今年推出的騰訊生態車聯網3.0作用在 “上車速度”方面,用騰訊的話來說,其搭建了一個適合車載的應用框架——“小場景”,可以通過云端統一發送,減少了對車輛硬件的占用,但同時又更容易上車?,F階段騰訊內容生態主要包含了微信車載版、愛趣聽、小場景、云小微語音助手、騰訊地圖等程序,并且已落地到部分車型。
三家對比可以發現,無論是數量上還是質量上,百度都有著較大的優勢,其一百度擁有更多的第三方軟件來源,也是因為企業屬性,百度需要更多來自外界的助力;其二,在內容生態層面同樣是百度更加開放,不同于阿里、騰訊的“自生態閉環”,像支付環節,小度車載OS提供的支付渠道中,不但有百度的度小滿,還有銀聯、支付寶和微信支付等渠道也都可由用戶自行選擇。
更重要的是,百度還推出了“領先一代的智能車內體驗”,像小度助手汽車版就是專門為車而生的車載Killer App,帶來領先一代的智能化體驗。例如,在交互方面小度助手汽車版創新發布專屬虛擬助手形象,用戶只需上傳一張自己的照片,就可以得到一個投射在車機中的虛擬形象,成為自己專屬的虛擬助手,從新交互、新智能、新場景、新生態四方面引領全新的用戶體驗;又比如在車載地圖方面,面向用戶,百度地圖汽車版2021導航將更加智能,包括融合定位、多屏聯動導航、電動車出行服務化、場景出行服務化等,像提前感知可輔助駕駛路段,幫助用戶提前決策、實現全行程的規劃和安全引導等等。之外,小度助手汽車版還搭建了全新Feed流式交互框架、全雙工多模融合交互、SMLTA離在線語音模型等多種全新的交互方式,讓用戶擁有更加便利、快捷的交互體驗。
當然,目前也不是終點,即便BAT暫時領先,但包括華為在內的新選擇都在躍躍欲試,像百度現在雖然有著顯著的領先優勢,但也無法掉以輕心。
回到智能汽車發展層面,雖然現階段整個行業仍然處于起步階段,但從“車聯網”這些局部區域也大致能進行一些判斷。
透過車聯網我們能看到,百度自身的技術和生態基礎已經足夠強大,且作為中國自動駕駛道路測試牌照最多、專利申請數量最多、生態最龐大的玩家,百度各方面都處于領先。但智能駕駛無法一蹴而就,百度也還有較大的上升空間。
特別是今年百度已經實現在智能汽車“增量供應商”的競爭中提前占位,而“領先一代”概念和內容的提出更是讓百度在車聯網乃至智能駕駛領域登上了更高的山峰,同時在商業化、技術、生態等方面的全面推動下,不得不說百度已是國內智能駕駛領域當之無愧的“頭號玩家”。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
前言
在這艱難又魔幻的2020年的尾聲,有必要系統匯總下關于UI/UX的設計發展方向,為接下來的2021的開篇帶個好頭。本文在了解這些趨勢的同時,分析特點并舉例落地實例,來幫助大家啟發創意設計工作的思考切入點。
流行趨勢跟人們所處的環境密切相關,從最初的方塊馬賽克——>追求極度寫實——>扁平風——>到現在的質感擬物,扁平設計霸屏的這幾年,設計風又向更立體、豐富、更有層次感的方向發展,所以說趨勢就是一個輪回。設計風格沒有絕對的好壞,在審美達到一定疲勞時,就會開始出現新的設計風格。每一個新風格都值得設計師去拆解、思考,本質都是為了提升更好的交互體驗。
而在進入下一個十年的過程中,我們對數字產品和體驗的依賴將日益增長,預測真正勝出的將會是3D動畫和用戶界面/用戶體驗設計的結合設計,5G技術的發展,它將重塑了我們以前無法想象的交互方式,這將是一段充滿創意、鼓舞人心的發展階段。在這里讓我們來看看未來那些不可忽視的設計趨勢吧。
(注:圖片來自網絡,均標明出處及作者,若有侵權請告知刪除)
1、3D與UI結合
隨著且易用的3d軟件工具的出現,3D 元素已經開始變得越來越受歡迎,而在這之前,UI界面一直被平面設計所主導。與 2D 不同,它提供了更為逼真的立體效果,從插畫、動效、電商到平面視覺,在所有的設計類型中都能找到它,3D現實主義已是各個領域的大勢。
圈中也出現了很多免費或付費的3D預設元素及場景組件,幫助3D小白更快地搭建出具有沖擊力的視覺組合。
特點:
? 直觀感受;
? 立體真實;
? 形態豐富;
▲Izmahsa
▲Mike
▲Tran Mau Tri Tam ?
▲Vikiiing
▲https://www.awwwards.com/inspiration/3d-hover-number-reveal
實例應用:
各大廠都開始紛紛嘗試在產品中加入3D元素,將自家IP立體化,植入到各個品牌靜態頁面,加深品牌印象滲入。3D技術雖然已經出現有一段時間了,但是為了保證速度和性能表現,較少應用到產品中,隨著軟件技術的提升,立體渲染產品將開始慢慢運用到更多的界面交互、H5活動中。
▲閑魚、QQ、花椒直播的3D啟動頁
▲得物(毒)的3D空間動效
網易云音樂每年的音樂總結報告都追隨著的設計潮流,今年還可以自由選擇人物形象,增強了用戶的主觀代入感,以下是每年的設計風格變化:
▲2018-漸變插畫、2019-撞色漸變、2020-3D人物場景
▲2020-總結陳詞H5
▲總結報告Banner的動效
其中IP立體化最多的當屬K12教育領域,除了制作IP周邊外,3D效果能適應豐富的運營場景,高度還原現實世界,給小朋友帶來最真實的學習互動體驗。
▲洪恩識字(3D學習場景)、騰訊開心鼠英語ABCmouse
▲IP在播放兒歌時的互動
值得一提的是今年蘋果發布的macOS Big Sur除了玻璃擬態的變化,圖標還加入了3D維度的擬物視覺層次。
蘋果的 mac OS 的人機交互指南中也明確指出:“圖標不僅是裝飾性的,而且在與用戶交流中起著至關重要的作用,它應該傳達應用程序的主要目的并暗示用戶體驗?!边@次扁平化和擬物化的結合,將又要引領一波設計趨勢。
2、軟漸變(Soft gradients)
過于強烈的漸變不再是趨勢,大多數設計師都開始喜歡使用非常簡單和微妙的漸變,如果產品的目標用戶人群需要輕松溫和的視覺環境,那么此風格再適合不過。
軟漸變包括背景、陰影、反光,常與線條平面圖形結合,應用于界面、網站、圖標、icon等設計中。
特點:
? 低調溫和
? 微妙漸變
? 清新愉悅
2.1、柔和背景
在設計網站中我們已經看到了許多非常精致,明亮柔和配色方案,混合兩種以上的顏色來創造多彩的模糊背景。它使設計看起來非常現代、不打擾、清新而令人愉悅,其中畫面內容是主要視覺焦點。
▲Vladimir Gruev
▲Sajon
▲Anton Mikhaltsov
▲Ghani Pradita
實例應用:
▲咔咔、美柚
2.2、柔和陰影
柔和的彩色陰影使UI有了更微妙的深度變化,在圖標設計中經常需要漸變或陰影來塑造物體,柔陰影使設計元素更豐富立體,并且它們有助于區分內容之間的層次結構。
▲Ghani Pradita
▲Sèrgi Mi
▲Taro Huang
實例應用:
▲有道數學(已下架)
▲Uki
3、玻璃擬態(Glassmorphism)
去年新擬態掀起了一陣狂熱,但這種模擬受到擠壓的塑料效果(凹/凸層次感),在用戶的閱讀性上可能會出現問題,新擬態更適合用在局部的少量元素點綴,無法完整地使用在整套應用程序中。
▲Alexander Plyut
伴隨著今年蘋果發布的 MacOS Big Sur 操作系統的發布,新的擬物風格正式回歸大眾視野,整體風格應用了新擬態(Neumorphism)的設計思路,利用大量的毛玻璃質感和大量投影縱深感,能很好的突出前景信息,中和了扁平化圖文帶來的生硬不立體感。而Big Sur的圖標也加入了 3D 質感設計,設計語言更為時尚簡潔。蘋果設計師 Alan Dye 在發布會上也提到了設計風格轉變的原因,主要是希望「降低視覺的復雜度,讓用戶能夠將注意力集中在內容上」。
而的玻璃擬態則更加注重垂直空間 z 軸的使用,背景多鮮艷色彩,在上空使用隔一層高斯模糊的毛玻璃質感,模糊的邊界有細微的淺色邊框,整體效果就是讓元素之間有虛實結合的特殊空間。毛玻璃運用在界面中對關鍵信息起到強調作用,用戶可以看到物體間的層次關系,哪一層在哪一層之上,就像物理空間中真實的玻璃一樣。
特點:
? 透氣磨砂
? 層級空間
? 簡潔擬物
▲引領新擬態風格的Alexander的作品也朝著玻璃擬態變化
▲Kostia Varhatiuk
▲Ghani Pradita
▲Ibrahim emran
▲Queble
實例運用:▲毛玻璃視覺可追溯到2007年發售的Windows Vista,而當時的 OS X Yosemite 也大量使用了這種設計語言
▲的MacOS Big Sur操作系統
▲圖標的變化
4、暗黑模式
暗黑模式是白色界面的相反版本,適用于午夜時分。之前用了很長時間微信的暗黑模式,突然切換成白色界面后,就像吸血鬼見到太陽光般刺眼,果然暗黑模式用久了還是比較舒服的。
暗黑模式和之前經常提到的夜間模式是有區別的,簡單來說暗黑模式可以在任何場景下使用,并沒有降低對比亮度;夜間模式則專為夜間場景設計,重在降低對比度,以降低在暗光環境下屏幕對人眼的刺激。
特點:
? 突出內容
? 減輕干擾
? 沉浸體驗
▲Tom Koszyk
▲Victa Wille
▲Golo
▲https://www.awwwards.com/inspiration/3d-hover-number-reveal
▲Tran Mau Tri Tam ?
實例應用:
▲有道詞典
▲愛范兒(ifanr)
最常使用暗黑模式的車載系統:
▲小度車載
暗黑模式的靈感最早引起大家注意的應該是抖音,在這之前大部分的應用都是白色為主,抖音整體黑色界面帶來的沉浸以及輕打擾體驗還是很棒的,在這之后也相繼出現了以黑色為主的APP設計:
▲MOO音樂(可手動切換顏色模式)
▲Space FM
5、多彩高對比度界面
受Material Design調色板的影響,2020年用戶界面趨勢的一定不能少了亮色和熒光色的,可以作為主色也可以作為輔色,簡約的界面中明亮大膽且對比鮮明的色彩一直都處于增長趨勢。熒光色一直是90后喜歡的風格,我個人就非常喜歡熒光色,現在要是談到該風格的受眾主力軍可是90后啊。
顏色是為界面添加信息和情緒以及使其看起來美觀和吸引人的最有效方式之一,對比鮮明的顏色在白色和黑色界面上都能很快吸引用戶的注意力,這種風格已經成為清新、酷炫、數字時代的代名詞,而在2021一趨勢還將會繼續影響UI、平面、廣告、插畫等領域。
特點:
? 活潑大膽
? 對比鮮明
? 潮流科技
▲Amy Martino
▲Halo Mobile
▲Anastasia
▲Paolo Spazzini
在網站設計中的應用:
▲https://www.theartcenter.nyc/
▲https://www.squadeasy.com/en/
實例應用:
▲GoFun出行
▲開言英語
6、抽象幾何元素
從上世紀初開始,抽象構成中的簡單幾何形狀就已經用于視覺藝術中,多用于主背景主題或色彩細節,使用鋼筆工具編輯最簡單的形狀(正方形,圓形、橢圓形),加上不同的顏色或漸變,讓設計看起來既規則又有趣。
幾何圖形可以運用到UI設計中 ,將它們混合在一起以創建馬賽克的效果,形成具有品牌意向符號的記憶點。
特點:
? 規則組合
? 品牌印象
? 重復記憶
▲Johnny Nova
▲Vladimir Gruev
實例應用:
最近看到的一組原色視覺剛好融合了高對比度+幾何這兩種風格,那就是SHINee的正規六輯合輯《‘The Story of Light’》,采用紅黃藍三色加上圓形、正方形、三角形的大塊面積來打造畫面空間及變化,帶來極具視覺沖擊的音樂色彩與魅力。
▲專輯的主視覺
當然,幾何形狀不止用于色彩圖案細節,在UI界面布局中經常使用大塊面圖形,這種設計方法受到越來越多的關注。
7、極簡風
極簡設計的前身是2010年代中期精巧又花哨的設計,這種設計已經存在很長一段時間了,但在2020年,人們每天需要消化的信息量越來越多,所以現在用戶想要盡可能避免“視覺垃圾”,這也是為什么我們會選擇更簡潔專一的界面。
特點
? 專注信息
? 清晰易用
? 簡單操作
▲RonDesignLab
▲Quan
▲BAOLIN
▲Gregory Loshakov
談到極簡主義,就不可避免會涉及到無鍵趨勢,因為按鍵越少就意味著設計越簡潔,而這種簡化過的設計將讓手勢操作和語音交互更為流行。
▲Taras Migulko
▲Gleb Kuznetsov?
實例應用:
▲夸克瀏覽器的夸克寶寶
8、將視頻應用到UI中
在 2020 年,信息的觸達的速度將會變得更快,而視頻是很好的載體,各個年齡段的用戶都喜歡觀看引人入勝的動畫,無論是選擇通過短視頻還是電影的方式來推廣產品,都很好地灌輸品牌理念,建立與受眾群體的關系,加強用戶忠誠信任感。
特點:
? 營造氛圍
? 類型多樣
? 品牌調性
▲Fireart Studio
▲Ehsan Rahimi
實例應用:
▲moo音樂登錄頁
▲蝦米音樂歡迎頁
9、插畫與3D的界線越來越模糊
藝術插圖從2017年開始到現在仍然很流行,幾乎適用于任何類型的設計行業,是設計領域中最熱的趨勢之一。插畫的視覺能很好的幫助用戶理解產品背后的故事,為了把故事講好,我們可以創造出一個品牌人物,賦予他人格,為他制造一些故事和沖突,最終幫助我們解決產品問題。這是在產品設計中講好故事的基礎,至于講故事的方式,在 UI 和 UX 中都有使用,原理一樣只是落地方式不同。
在2018年的蜘蛛俠平行宇宙中我們就已經看到了3D與插畫的結合,藝術家保留了人物在美式漫畫中的的線條筆觸,把“手繪”的細節和質感都放大到了熒幕上,在劇中還采用對比強烈的大色塊擴大了視覺張力,分分鐘把漫畫書甩到面前,讓人忍不住驚呼,索尼的藝術家們是怎么把片子做得這么酷!
▲3D人物的畫筆觸感
▲畫面光源處由波普圓點組成的背景
▲紙本漫畫書中的“聲音詞”
▲漫畫經典線條
▲Entei Ryu在3D建模使用插畫質感
▲Minh Pham ?在ui界面中的嘗試
實例應用:
騰訊旗下音樂平臺JOOX最近的概念宣傳片,從MG、三維、定格、插畫多個風格之間來回切換,給我們帶來了一個多元的音樂世界。各大視頻網站還搜不到,不能直接鏈接視頻地址,喜歡的朋友可以關注微信視頻號“UoU_Studio”觀看完整視頻。
在3D開始迅速發展的階段,二維與三維之間的界限變得越來越模糊,插畫作品也可以具備強互動性,而3D插畫與動效的結合提供了一種奇妙的新方法,希望能夠看到未來插畫更多的可能性。
10、更多的微交互動效
最后一點,還是要強調動效在UI中的的作用,微交互最早出現在 2018 年,讓用戶更好地理解系統如何工作,并在引導其獲得更好的體驗方面扮演著非常重要的角色。它們在 UI 設計中決定了一個 App 或網站是普通還是優秀,從點擊反饋、加載等待、導航交互等等,為用戶界面設計增加了動態性,交互性和直觀性。
動效起到的作用:
? 引起人們對應該做什么或接下來將要發生的事情的關注;
? 創造流暢和視覺愉悅的過渡;
? 帶給使用者美觀的享受;
? 指導我們進行復雜的操作;
? 確認用戶使用旅程中的操作。
▲Jakub Antalik
▲Forever D.
▲Kingyo
▲Eugene Paryhin
▲Leo Natsume
▲Taras Migulko
實例應用:
▲GoFun選擇車輛后的頁面轉場動效
結尾:
2020的趨勢在滿足用戶的美學要求上,側重內容和感情表達,還會根據不同設備載體、新的技術而變化,為用戶提供的豐富體驗。
借用Adobe設計副總裁 Jamie Myrold 的一句話:如今設計師要思考的,絕不僅僅是設計一款App、網站或設計工具。我們要思考的是人類的需求、用戶的需求,打造真正人性化、多元化與包容性的設計。
設計趨勢還在快速增長變化,有些趨勢總能長期霸屏,未來還將迎來更多新技術,每個設計人員都可以找到自己喜歡的方向,不管哪種趨勢,最重要的是如何學習并合理地運用到產品中,以產生最大的設計商業價值。
文章來源:UI中國 作者:_阿丹a_
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
2020年結束,此時正是一個很好的時間節點,我們共同探尋2021年即將擁有怎樣的未來。本文將帶你發現,即將在2021年流行的十種移動用戶體驗設計趨勢。
通過這篇文章,你將全面了解2021UI趨勢中最熱門的Glassmorphism風格
“由理有劇”系列以”我們怎樣理解暗黑模式“為開篇,緣由作者正在任職的工作是 TO B 產品交互及界面設計,入職時正值公司整體產品線升級迭代,用戶界面從淺色模式向暗黑模式探索的階段。這個探索階段面臨的本質問題便是“到底什么是暗黑模式”,同時“我們為什么要用暗黑模式”的問題也隨之而來。
為了給公司同事闡述這兩個問題,作者搜集了大量資料,翻閱了相關產品系統所給出的設計文檔,重點圍繞“什么是暗黑模式”展開,逐步推敲其中的理論原理,總結出便于理解的文字內容。這樣做的目的簡單有二,一是與產品、開發、測試方面的同事能夠達成向暗黑模式優化升級的共識;二是能夠讓我們的各個產品線更從容地去擁抱暗黑模式的到來。
文章大綱
1、是什么?
2、為什么?
隨著 iOS 13 和 Android 10 的正式發布,“暗黑模式 (Dark Mode)”一詞逐漸走入了我們的視野,“暗黑模式是什么?”這個問題也一度霸占了Google搜索榜首。想要深入了解暗黑模式,也許我們可以換一個角度,從用戶界面的演進歷史中尋找線索,從而幫助我們更好地理解暗黑模式。
作者自從拜讀了《蘋果三劍客》,對于用戶界面的前世今生才有了更深的了解,蘋果的產品發展史,某種程度上也可以稱為用戶界面的演進史。廢話不說,下面讓我們一起簡單聊聊。
計算機誕生的早期,其顯示器一直以“暗黑模式”面向操作者,其緣由是早期的顯示技術一直被CRT主導,CRT釋義為“陰極射線顯像管”,在19世紀末被研制出來,因為制造原理相對簡單,所以CRT一直是早期電腦顯示的主力,但在上世紀80年代之前僅支持單色顯示。
下面兩圖分別為蘋果公司于1977至1980年間生產發售的 Apple II 及 Apple III 型計算機
圖中顯而易見,兩款計算機的顯示方式均為單調的黑底白字或綠字,呈現出一種“暗黑模式”的視覺效果。蘋果公司的 Apple II 和 Apple III 兩支產品線一直以這種“暗黑模式”面向用戶。這也反映了早期的計算機以輸入代碼執行數字運算作為主要功能,但是這從另一方面反應出:未來計算機會借助不斷成長、成熟的電子技術,必將掀起一場接一場的變革,用戶界面也隨之不斷地革新。
上個世紀80年代之后,CRT彩色顯示技術成熟,逐漸流行普及到各個電子行業,但當時主流的計算機操作系統并沒有“圖形界面”這個概念,所以大部分計算機產品依舊延續了先前黑色背景的顯示方式。
直到1983年1月9日,在年度股東大會上,蘋果宣布了兩款將在未來的計算機行業中占據關鍵地位的產品:一款叫 Apple Lisa (麗薩,老喬的第一個女兒),蘋果第一臺(也是全球第一款)基于圖形用戶界面(GUI)的計算機,也就是 Macintosh 的前身;另一臺叫 Apple IIe ,是已獲高度成功的 Apple II 系列的新一代進階產品。
Apple Lisa 向主流個人電腦行業介紹了一種全新的鼠標控制的圖形用戶界面,宣布向單調的黑白用戶界面告別。
運用形象的圖標、方便的下拉菜單和重疊的窗口,替代了此前一貫使用的輸入文字命令,Lisa的圖形用戶界面開啟了消費者與個人電腦交互方式的革新之路。盡管Lisa存在諸多缺點,如定價過高,功能缺失、運行緩慢等,但它的圖形用戶界面依然給它贏得一陣喝彩。
Lisa的GUI影響如此深遠,以至于諸多電腦制造商紛紛加入鼠標控制的GUI領域,爭相模仿。就在Lisa首次亮相十個月后,微軟于1983年11月推出了Windows操作環境。(對于此事,老喬總是公開譴責微軟的蓋茨抄襲他的產品創意,甚至想讓蓋茨吃官司,兩位大佬一直不合也是業界皆知,跑題了...)
///一個有意思的事兒:今年7月份,一位外國的蘋果粉在Twitter上發布了一條關于 Apple IIe 型計算機的動態,內容展示了自己使用 Apple IIe 型計算機進行智能化任務的過程,如發送推文、在Evernote中寫作、發送電子郵件,甚至控制智能家居(如下圖)。要知道,這臺計算機生產發售至今已有37年的時間。由此感嘆,不得不說蘋果對于產品的品控做到了那個時代的。
1984年,蘋果發布了個人計算機 Macintosh(麥金塔),Macintosh 延續了 Lisa 的圖形界面語言,并向世界普及了圖形用戶界面(Graphic User Interface)的概念,從而開啟了以白色為底色的圖形交互時代。
Lisa獲得的一些成就在 Macintosh 上體現的淋漓盡致,包括靈活的鼠標、點陣影像圖、桌面的布局、形象的圖標、相稱的字體、屏幕上方的下拉菜單和重疊的窗口,這些也得益于日益成熟的顯示技術和不斷進步的計算處理技術。形象生動的圖形設計和界面交互一直是老喬最引以為傲的杰作,不得不說,老喬對于計算機行業甚至是設計行業都有著極高的敏感度和先于旁人的前瞻性。(當然,這里的主語應該是蘋果)
Macintosh 產品的成功,不是蘋果一味地迎合計算機消費市場,而是利用創新的方式引導市場,引領計算機行業向人性化的用戶界面發展、邁進。
至此,我們也徹底地向“暗黑模式”說了再見,全面擁抱“淺色模式”的到來。
麥金塔搭載的 System 1 打破了字符終端的模式,淺色的界面風格一直持續到 System 6 都沒有顯著的改變。直到1991 年的 System 7 開始引入彩色,圖標也增加了隱約的灰色,藍色和黃色陰影。System 7 系列中的 7.6 版本正式被蘋果公司改名為 Mac OS ,而這一年是1997年。
與此同時,微軟的 Windows 從黑屏的 DOS 發展到全屏幕的 Windows 1,再到較為成熟的 Windows 3,最后演變到奠定當今 Windows 界面基礎的炫麗多彩的 Windows 95。用那個時代的眼光來看,微軟的變化是相當驚人的,微軟儼然成為了一匹計算機行業的黑馬,一路趕超蘋果成為行業霸主,而蘋果因為因循守舊,在界面設計上從領先掉到了最后。
此后,從 Mac OS 8 到 Mac OS X Server 1.0 ,蘋果一直專注于改善操作系統和優化界面表現,直到2001 年 3 月,經歷了四個開發者預覽版和一個公共測試版之后的 Aqua 界面終于跟隨 10.0 正式發布,發布后改變了人們對計算機界面的印象,在隨后的10年里蘋果一直沿用這套界面風格。
OS X 系列用戶界面較大的更新來自于2007年10月發布的 10.5 Leopard 豹,雖然基本的界面仍為 Aqua 和其糖果滾動條,但新加入了一些鉑灰色和藍色,另外重新設計的 3D Dock和更多的動畫交互使得新界面看上去 3D效果更強,此外還改進了 Finder、半透明菜單條并新增了最初只用于 iTunes 的 Cover Flow界面。
整體來說,Mac OS X 10.5 Leopard 豹 這一版本的用戶界面相比之前有了翻天覆地的變化,靈活生動的圖形語言和交互體驗重新得到了用戶青睞,蘋果也以此,再一次走上了引領潮流之路,使得多彩的“淺色模式”成為用戶交互界面的主流。
蘋果開創性的界面圖形語言也延續到了移動設備領域。
2007年的初代iPhone作為蘋果公司第一個移動設備產品(iPhone1代)首次亮相市場,驚艷了整個行業,iPhone搭載的 iPhone OS 和后來更名為 iOS 的系統,延續了 Mac OS 用戶界面的設計語言。在歷代iPhone上可以看到沒有物理鍵盤侵占空間的屏幕,精美的的方塊圖案整齊的排列開來,顏色豐富且耐看。
依稀記得當時的我們,還玩著黑白屏幕上的俄羅斯方塊,還敲打著物理鍵盤上的九宮格,挪雞鴨也表示永不為奴。
2010年堪稱iPhone史上最重要的一年,蘋果推出了“改變一切”的iPhone 4,并對其用戶界面進行了革新。
生動的擬物化設計風格正式成為業界潮流,這也使得UI行業逐漸熱了起來,蘋果的界面設計規范也順勢成為了主流的移動端設計規范。
蘋果以此作為移動端界面設計的基礎,沿用到之后的iPhone系列中,期間iOS系統的風格保持依舊,只有 iPhone 5S 搭載的 iOS 7 做出了圖標由擬物化向扁平化的改變,但整體都以“淺色模式”作為主流的用戶界面視覺模式。
在 Mac OS 的系統上,用戶可以通過“通用設置-外觀”來對整體界面進行淺色、深色的切換,可以看出,蘋果早已把“暗黑模式”納入到他們的開發隊列中,也就是說,“暗黑模式”的概念主要來源于蘋果的 Mac OS,這也為“暗黑模式”的正式登場埋下了伏筆。
自從有了這個概念之后,很多網站都為用戶提供了“淺色”和“深色”兩套界面,便于用戶根據自己的習慣或愛好進行切換。在 Mac OS 之后,很多 App 和 Android 定制 ROM 也加入了所謂“深色模式”的支持,其中也不乏 Web 端的網站、系統等。
北京時間2019年6月4日,果粉期待已久的蘋果WWDC19如期而至。
發布會上,庫克一如既往地優先調侃了Andriod系統一番….(蘋果一直喜歡用數據說話,想了解的同學可以回顧一下發布會的視頻)
言歸正傳,在發布了一系列硬件之后,庫克終于介紹了大家期待已久的 iOS 13。新發布的 iOS 13,除了提升系統流暢度和增加系統穩定性外,還介紹了其他提升用戶體驗的優化。
其中,最為引人注目的“暗黑模式”即將亮相于新系統。
發布會表示,暗黑模式可以“改善電池壽命,改善視力不佳和強光下的人的可視性,以及在弱光環境中更好地使用設備”。
“Wow,beautiful!”、“That’s beautiful!”、“That’s so beautiful!”發布會的主持人一邊演示使用在暗黑模式下的App應用,一邊不由自主地發出贊美。這也許也受到了老喬的影響,猶如在劇場舞臺中心的話劇演員,有著一種無可比擬的自信和氣場。
但有意思的一點是,主持人展示了 iOS 13 暗黑模式的開發團隊合照,從極客穿著到賽博朋克式的暗黑搖滾裝扮,這一戲劇性的變化似乎在告訴大家:“玩,我們也是認真的?!?
發布會上簡單演示了暗黑模式下的漂亮界面,雖然沒有過多地闡述暗黑模式的開發細節,但是這標志著暗黑模式“重新”登上歷史舞臺。
我們從蘋果產品發展史中,不難發現蘋果對于用戶體驗的理解是具有創造性的,總是能先于用戶發現用戶的潛在需求。蘋果產品的發展史也可以稱之為用戶界面的演進史,從早期黑色背景的計算機桌面發展到以淺色為主的用戶界面,再到 iOS 13 正式發布的“暗黑模式”,這一過程貌似是在“返祖”,但這些始終是圍繞以用戶體驗為中心的改變和突破。
“暗黑模式”是什么?拋開技術理論,簡單理解就是降低用戶界面在設備上的亮度,以深色的背景、較低的對比度、灰階的色彩來呈現用戶界面,提升用戶使用產品的體驗。
上面我們提到了,根據 Apple 官方的說法,暗黑模式可以“改善電池壽命,改善視力不佳和強光下的人的可視性,以及在弱光環境中更好地使用設備”。
我們可以圍繞這個說法,結合我們與設備、環境的關系進行探討。
隨著人們對智能設備的依賴性越來越強,設備使用的時間也高頻覆蓋了白天到黑夜,夜晚使用的頻率更是與日俱增,所以暗光環境的使用需求被實實在在地擺到了臺面上。以設計職業為例,在阿里巴巴 UCAN 2019 設計大會上分享的數據結果顯示:設計師群體夜晚的工作時間通常在5-6個小時…
不是在加班就是在加班路上的我們更習慣于在夜間工作,夜間安靜的環境更能讓我們專注設計、靈感爆棚。但這也在另一方面表達了我們需要設備更加符合我們在弱光環境下的視聽需求。
Dark Mode 由此應運而生,使用暗色模式可以縮小屏幕顯示內容與環境光強度的差距,可以保證使用者在暗光環境下使用設備的舒適度。也就是說 Dark Mode 可以降低屏幕的整體視覺亮度,降低對眼睛的視覺壓力,再也不用怕夜晚的設備屏幕刺瞎我們的雙眼了。
但這里我們要理解一個概念,“降低對眼睛的視覺壓力”并不等同于所謂的“護眼”,夜晚使用暗黑模式的設備,實際上并沒有改變屏幕的“頻閃”問題,所以說用戶看屏幕的時候依舊會有視覺疲勞的癥狀,所以各位大佬還是晚上少看屏幕,多愛護眼睛吧。
想象一下,我們在電影院看電影時,為什么要全場關燈?
甚至有些APP, 在影片的下方也會有一個模擬關燈效果的按鈕,來讓整個手機屏幕變黑, 只剩下視頻畫面的部分,這都幫助我們可以更專注、更沉浸在當前的內容下,也就是所謂的“沉浸感”。
這其中的原理就是色彩本身是具有層級關系的,深色會在視覺感官上自動后退,淺色部分則會向前延展,這樣對比強烈的層次關系可以讓用戶更注重被凸顯出來的內容和交互操作;尤其在信息負責界面內層級關系的合理拉開對操作效率都有明顯的促進作用。
這一點在股票交易軟件上就是最好的驗證,目前來看全世界絕大多數的股票軟件采用的都是負極性,也就是暗色底的設計方式。紅色和綠色代表的漲或跌(不同國家顏色表示可能不一樣)在這樣的深色背景下就會特別顯眼,還有一些顏色比如藍色用于某些數據的走勢圖。這樣的顯示幫助用戶更好地集中精力在數據獲取上,更快地做出決策。
這里所提到的消費品味是來自用戶層面的潛在心理需求。
從心理學角度而言,顏色可以影響觀者的感受和情緒,這直接影響到用戶對于一個事物的判斷和選擇,這就像我們消費購物一般,有時候我們的消費不完全是為功能、實用性買單,而更加看重的是一個產品的外觀屬性,當產品的外觀符合我們的消費審美甚至超越預期時,我們往往會更快地做出消費選擇。
而黑色在積極層面的外在直觀表現為高貴、莊嚴、鎮定、神秘,這代表著黑色相比其他顏色存在著更多的可能性,這也造就了黑色成為百搭色,可以作為其他顏色的底色、陪襯色進行使用。暗黑模式也存在同樣的心理暗示,沉穩、神秘的黑色會讓用戶聯想到產品的穩定和高級,提升用戶的心理信任度,迎合用戶的消費品味。
最后才探討耗電功效方面的問題,算是一個壓軸問題了,在某種程度上說,智能移動設備目前最大的矛盾是性能與電池功效的博弈。如果去微博等社交網站進行搜索可以發現,為了省電而使用深色主題或者說黑暗模式的用戶大有人在,尤其是一些中高端采用 OLED 屏幕的手機。這是為什么?
暗黑模式省電的作用來源于 OLED 這種材質的特性,這種屏幕經過多年發展如今已經取代了 LCD 在中高端手機上的地位。和 LCD 依賴于背光不同,OLED 自發光的特性使得屏幕能夠獨立控制單個像素是否發光,也就是說畫面越黑,采用 OLED 屏幕的手機就越省電。下圖做了一個簡單的理解示例,每一列的格子代表亮度,在不同亮度下有相對應的耗電量顯示,閃電的亮度代表耗電量的多少。
理解了簡單含義,我們再來看一下Notebookcheck上對于OLED功耗的專業研究數據。在使用 OLED 屏幕時,屏幕上顯示的內容決定了功耗。當屏幕基本全黑時(OLED <1% White),OLED 屏在任何亮度下的功耗都保持恒定。顯示了白色內容的屏幕,功耗曲線會隨著亮度提高而逐漸變陡。
上面的可視化圖表相對來說可能需要一定的理解時間,讓我們翻譯簡化一下。
上圖顯而易見,OLED屏幕的耗電量不僅受到亮度高低的影響,關鍵在于在OLED屏幕顯示了什么,有多少區域是淺色甚至是白色的,有多少區域是深色甚至黑色的,深色區域占比越高,相比較之下OLED屏幕也就越省電。這也就證明:OLED屏幕在使用以深色為主的顯示模式時,能夠降低耗電量,提升供電效率,也就是改善電池壽命。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
設計趨勢輪回,玻璃效果以一種新的展現形式回歸,我們以往對它的稱呼有毛玻璃效果、磨砂效果等,在下文中統稱為毛玻璃擬態。
設計趨勢總是在不斷的變化,近幾年擬物風格又以新的形式——新擬態回歸大眾視野,蘋果發布了macOS Big Sur 操作系統,整體風格應用了新擬態的設計思路,采用了3D質感的元素設計,其中還包含了運用陰影、透明度以及背景模糊/高斯模糊手法模仿玻璃形態,構建空間感的新興擬物態風格——毛玻璃擬態風格。
毛玻璃視覺其實可以追溯到2007年微軟發售的 Windows Vista和Windows7,隨之后來的OS X 10.10(Yosemite)和iOS7中大量出現毛玻璃效果,比如底部快捷菜單欄、通知中心和多任務切換窗口等,蘋果公司加大了模糊程度,透明效果基于扁平,更順應當時UI扁平化的設計趨勢。
后來,蘋果在他們的移動操作系統中大大減少了毛玻璃效果,但是最近在 MacOS Big Sur 中又增加了毛玻璃質感。微軟的 Fluent 設計系統也非常注重這一效果,他們稱這種效果為 “亞克力”,并將其作為設計系統的組成部分之一。
毛玻璃擬態模仿了塑料材質(凹凸質感,凸顯層次感),這個新的視覺風格更加注重垂直空間Z軸的使用:
這是注重空間感的典型特征,意味著這種風格有助于用戶建立界面的層次結構和深度。用戶可以看到物體間的層次關系,哪一層在哪一層之上,就像空間中真實的玻璃一樣。
毛玻璃擬態效果之所以被大家應用和認可除了它能帶來的優秀視覺表現,更重要的是其本身的功能意義,它能幫助設計師更好的拉開信息層級并達到視覺統一
(1)視覺表達
通過背景毛玻璃化,可以中和扁平化圖文帶來的生硬不立體。在卡片元素上添加毛玻璃效果,與其他元素疊加后視覺上建立層次感,將信息層級更好的表達出來;在圖標中增加毛玻璃效果,可以提升圖標通透的質感。
(2)品牌感
良好的視覺統一,有助于提升產品的品牌感。
毛玻璃擬態效果并不好應用于上線產品。它不適用于按鈕或開關(這些重要的界面元素應該具備高對比度,更加清晰明確),模糊效果也要注意分寸,屏幕上過度使用模糊效果,會使整個 UI 對某些用戶可閱讀性差,同時也會使頁面看起來顯臟。
也可以這樣理解,使用毛玻璃擬態風格的前提是卡片內部有足夠的對比度和合適的間距來定義層次結構,并在視覺上 “分組” 所有相關的對象。它可以只在一個元素上使用,也可以作為卡片背景修飾視覺效果,這種很容易達到較好的視覺效果,頁面風格也會特別亮眼,整體干凈、明亮。
用作卡片背景時,能很好的表達信息之間的層級感,朦朧透出下層視覺元素,營造了良好的視覺美感。
用作APP圖標,可以提升圖標通透的質感。常見的三種圖標案例:A.頂部圖形為白色,底部圖形為其他色;B.頂部圖形和底部圖形為同色,頂部圖形顏色明度高;C.頂部圖形和底部圖形不同色
運用毛玻璃去包裝UI界面,頁面風格整體干凈、明亮,有較好的視覺效果。
1.和任何基于卡片的布局一樣,物體離我們越近,它吸引的光就越多。在這種情況下,意味著它會更透明一些。
2. 整個效果的基礎是陰影、透明度和背景模糊的組合。這種風格可以使用一個透明層,也可以使用多個透明層,但多個透明層疊加在復雜彩色背景上的效果會更好(當至少兩個透明層出現在一個相當復雜的彩色背景上時,玻璃形態的效果是最突出的)。
重要的是要記住,你不能讓整個形狀透明,需要調整填充的透明度來達到透明效果。如果不調整填充的透明度,僅僅是調整整個對象的透明度,就不會產生模糊的效果。
在上面的例子中,背景模糊值完全相同,但圓形圖像的疊加效果看起來完全不同。當填充不透明度為 100% 時,對象的透明度再低也沒有用,根本無法得到想要的模糊效果。
最底層背景在這個效果中扮演著重要的角色。不能太簡單或太單調,否則毛玻璃效果就看不出來,但也不能太復雜。
復雜的背景有助于玻璃形態的展現,這可能就是蘋果選擇了彩色背景作為 MacOS Big Sur 默認壁紙的原因。當模糊的透明層位于背景之上時,那些容易辨別的色調差異也很容易被看到。
用作卡片背景繪制操作比較簡單,使用背景模糊就可以搞定,重點在于根據實際情況進行透明度和模糊度的調整,這里就不再做展示。
第一步:繪制基礎圖形,頂部圖形顏色#DDEDFF,底部圖形漸變色#00EDFB——#001EEE
第二步:底部圖形復制一層,做高斯模糊效果,高斯模糊:12,不透明度72%,將模糊層置于頂部圖形上,添加蒙版
第三步:為了更好的增加圖標辨識度,增加漸變描邊,漸變色#FFFFFF——#D5E9FF,圖標繪制完成。
過程中用到的色值和模糊度可以根據視覺美觀度做適當調整,也可為圖標增加陰影,提升整體效果。
作為設計師,我們可以看到,設計趨勢一直在變化,每隔幾年就會轉向另一種風格,但似乎每種風格又有自己的前世今生。所謂趨勢輪回,并不只是單純的回歸,而是以一種的更豐富、更立體、更具有層次感的方式呈現在人們面前。
我們要做的就是不盲目,不盲從,看清楚趨勢變化的本質。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
微信支付、支付寶支付這些常見的支付方式都屬于第三方支付,而在互聯網發展的下半場,第三方支付會走向何方呢?本文以第三方支付未來發展變遷方向洞察為重點,分析內容主要包括了第三方支付行業發展變遷盤點和第三方支付行業變遷方向預判。
1999年,隨著首信易支付的成立,我國的第三方支付業務開始正式起步。這一階段,我國第三方支付行業的監管相對混亂,行業的進入門檻也比較低;第三方支付公司在當時所起的作用僅僅相當于支付通道,商業模式單一,業務增值空間有限。加上該階段電子商務在我國尚處于市場起步期,消費者對于第三方支付的整體接受程度依舊不高。因此,當時我國第三方支付行業整體的交易規模和增速均不突出,不同第三方支付公司之前的產品同質化問題較為嚴重,企業之間的競爭較為激烈。一些規模較小、商業模式不清晰的第三方支付公司的業務體量隨之開始出現萎縮。
供需兩端雙向發力,第三方支付交易額快速增長。
供給端,線上交易領域,支付寶在2005年首次提出了“擔保交易”的概念。這一概念的提出不僅提高了消費者對第三方支付平臺的信任,也進一步拓展了第三方支付公司的業務想象空間。線下交易領域,拉卡拉從2007年開始大力進行線下便民支付點的建設和信用卡還款業務的推廣,充分滿足居民日常的支付需求;需求端,電商、在線航旅等行業的發展成熟也推動了消費者對于第三方支付的相關需求。在供需兩端的雙重作用下,2008-2010年,我國第三方支付行業的交易額連續3年增長率超過100%。
隨著行業的發展和成交額的快速攀升,依然處于監管空白期的第三方支付行業開始出現挪用資金、非法套現等一系列的行業問題,監管層也開始逐漸加強對于第三方支付行業的監管。2010年,央行出臺《非金融機構支付服務管理辦法》,確立了第三方支付相關的配套管理辦法和細則;2011年,央行正式開始發放第三方支付牌照,拉卡拉等公司成為首批持牌展業的第三方支付公司,我國的第三方支付行業開始正式進入合規化發展階段。
支付機構積極響應監管要求,相關企業開始移動支付試點。
為第一時間獲得對應的支付資質,眾多支付機構積極對監管的要求予以回應,努力滿足監管的相關規定。
隨著網絡的逐漸進步和智能手機的問世,通信運營商、銀聯等機構紛紛開始進行移動支付的試點,國內的移動支付開始逐漸起步。2011年11月,支付寶正式推出了手機APP二維碼支付業務,二維碼支付正式在國內亮相。
伴隨著移動互聯網的發展和智能手機等硬件的逐漸成熟,打車、外賣、理財、紅包轉賬等手機端的交易場景開始接連出現,居民對于移動支付服務的相關需求開始迅速攀升。各家支付機構也開始加快移動支付相關技術的研發和市場推廣。在這一過程中,二維碼憑借著自身編碼范圍廣、傳播制作成本低、容錯率高、識讀方便等一系列優勢成功上位,逐漸成為市場上最為主流的移動支付方式。
交易規模迅速攀升,支付機構全面擁抱移動互聯網。
隨著場景、硬件的日趨成熟和居民對移動支付認可度的快速提高,我國移動支付市場的交易規模也迎來了爆發式增長。根據易觀分析數據顯示,2015至2017年,我國移動支付市場交易規模的增速連續三年超過100%, 2017年的交易規模增速更是達到了208.7% ;交易規模的飛速增長也加速了相關企業的業務布局。拉卡拉、中國銀聯等支付機構先后推出了自己的智能移動支付產品,積極擁抱移動互聯網。
隨著時代的發展和社會的進步,我國的互聯網也正逐漸由消費互聯網向產業互聯網邁進:技術領域,人工智能、云計算、區塊鏈等技術逐漸發展成熟并被落地應用;政策領域,監管層積極出臺關于產業互聯網、工業互聯網等方面的相關支持性政策,大力扶持相關產業的發展;企業層面,拉卡拉、三一重工、海爾等不同類型的企業均開始進行產業互聯網、工業互聯網等領域的業務布局,準備以全新的姿態迎接新時代的到來。
1)支付在產業互聯網時代將逐漸成為商業社會運行基礎設施
隨著產業互聯網的來臨,數據對于各個企業的生產、經營和創新都開始發揮越來越重要的作用。在這樣的大背景下,支付數據覆蓋用戶廣泛、真實有效、數量龐大的優勢開始逐漸體現。支付數據和支付機構開始在商業社會的運行過程中發揮越來越大的價值。支付也逐漸演變成商業社會運行的基礎設施。
高速發展過后,我國的第三方支付行業迎來了發展變革的十字路口:一方面,受到監管政策趨嚴、成交額基數增大等原因的影響,第三方支付機構傳統支付收單業務的增速開始放緩,業務的天花板逐漸開始見頂;另一方面,隨著我國數字經濟的發展和產業互聯網時代的到來,越來越多的企業開始產生一系列金融服務、營銷、風控等方面的增值服務需求,企業服務市場的發展潛力開始逐漸凸顯。在這樣的背景下,越來越多的支付機構開始深挖自身已有數據資源的價值,積極利用人工智能、云計算、大數據等一系列前沿科技進行企業服務業務的拓展,開始進行由單一支付服務商向綜合型產業服務商轉型的嘗試,積極尋求自身的二次增長。
根據易觀分析的觀察,目前階段,我國第三方支付機構轉型綜合型產業服務商的路徑主要有兩條:一條是以側重于B端企業或機構的深度服務,努力為合作的B端企業或機構創造更大的價值;另一種則更加偏向C端消費者的深度運營,通過持續拓展服務場景和業務邊界來鞏固C端消費者與自身產品之間的關系,并為C端用戶提供更加豐富的產品服務。
盡管我國的很多第三方支付機構已經開始進行轉型綜合型產業服務商的努力與嘗試,但是其在轉型的過程當中也不可避免的會面臨來自產品研發、營銷推廣、外部競爭、市場成熟度不高、數據安全等各種各樣潛在的風險與挑戰。
2011年至今,央行共計發放了9批271張支付牌照,但是在2015年3月之后,央行就基本停止了第三方支付牌照的發放。這也就使得后續的公司只能通過收并購的方式來獲得相關的支付資質。第三方支付牌照快速成為市面上的稀缺資源。
根據易觀分析不完全統計,2012年至今,我國境內共發生了近100起支付牌照交易案例,國美、美團、唯品會、小米、滴滴、字節跳動等眾多企業均通過收并購的方式獲得了支付業務的“入場券”。
易觀分析認為,未持牌企業積極收購支付牌照主要是出于以下三個方面的考慮:1、確保自己支付收單業務的合規性,規避潛在的合規風險;2、節省下對應的支付通道服務費用,獲得對應的備付金利息;3、獲得底層的支付數據,方便企業構建更加詳細的消費者和商家畫像,進行后續的精細化運營和業務拓展。
易觀分析預測,拼多多、字節跳動等企業的先后入場將會再次引發移動支付機構對于C端市場的爭奪;另一方面,更有實力的市場參與者的加入也將對市面上的獨立第三方支付公司產生影響:依舊希望繼續獨立運營的第三方支付公司在未來將進一步加快自己對于場景和產品服務的建設,努力構建起自身的核心競爭力;而難以構建起核心競爭壁壘的第三方支付公司則可能寄希望于其他公司的收并購需求。
隨著我國第三方支付行業的發展,我國的持牌第三方支付公司也進入相對成熟的發展階段,拉卡拉行業頭部企業開始逐漸得到資本市場的關注加碼。在這樣的背景下,我國的持牌第三方支付公司在近幾年開始頻繁的登陸資本市場。
隨著持牌支付機構陸續獲得資本市場認可,同樣位于支付產業鏈上的非持牌支付產業服務商和終端廠商也開始逐漸獲得資本市場關注,二者與持牌支付機構共同推動泛支付行業逐漸成為資本市場上一個重要的獨立板塊。
除了拉卡拉等已經成功上市的泛支付公司外,收錢吧、PingPong等公司在近幾年均獲得高額融資;以銀聯商務為代表的幾家持牌支付機構也在積極的謀求上市??梢灶A見的是,泛支付上市公司的陣容在未來將變得越來越大。
對于泛支付板塊中的相關公司來說,獲得資本市場的青睞將會為公司帶來更加充足的市場關注度、資金等相關資源,也可以推動公司的規范化發展。隨著頭部公司逐漸得到資本認可,越來越多的泛支付公司在將來也會開始嘗試登陸資本市場,整個泛支付板塊未來在資本市場的影響力和重要性也將不斷的得到提高。
泛支付板塊公司獲得資本市場關注的積極意義
海外市場前景依然廣闊,支付機構積極構建全球業務版圖。
除了繼續關注國內市場的發展外,不少支付公司也已經將自己的目光轉移到了海外市場。相關需求方面,隨著留學、旅游、購物等海外消費的快速發展,我國居民和商戶對跨境收付款的需求增長明顯;市場想象空間方面,以東南亞市場為代表的移動互聯網和移動支付依然處于快速發展階段,整個市場依然有著不小的增量空間;從產業成熟度的角度來看,我國移動支付的相關技術和商業模式已經非常成熟,具備進行海外輸出的能力和條件。
國內消費者和商戶跨境收付款需求增長明顯:
東南亞等海外移動支付市場依然有著不小的增量空間:
我國移動支付市場發展成熟,具備進行海外輸出的能力:
目前階段,我國支付機構拓展海外市場有兩種比較主要的業務模式:一種是國內支付機構自己直接進行海外相關業務的展業;另一種更為普遍的則是“出海造船”模式,即通過投資或合作的方式尋找本地的合作伙伴進行技術、商業模式的輸出或業務的合作推進。
在主要面向的客戶群體方面,在國內C端移動支付市場有明顯流量優勢的支付企業在海外可能同樣傾向于C端錢包賬戶體系的打造和消費者支付場景的拓展;而以拉卡拉為代表的其他支付機構則把業務發展的重心放在了B端商戶上。
易觀分析認為,對于進行海外購物的消費者來說,支付機構紛紛“出?!笨梢赃M一步優化其跨境支付的體驗,更好的保障自身的資金安全;對我國的跨境貿易來說,跨境收付款產品服務的升級可以幫助相關企業減少收付款過程中遇到的問題,推動我國整個跨境貿易的發展和增長;對于拓展跨境支付業務的第三方支付機構來說,跨境支付及相關增值服務可以幫助支付機構尋找到新的業務增長點,實現公司的二次發展。
對消費者:可以讓更多的消費者在海外通過國內的支付APP進行付款,進一步提高消費者跨境收付款的效率,優化消費者跨境支付的體驗,更好的保障消費者的資金安全。
對我國的跨境貿易:跨境收付款及相關增值產品服務的升級可以幫助相關企業減少展業過程中遇到的問題,提高自身生產經營的效率,推動跨境貿易企業以及我國整個跨境貿易行業的發展。
對第三方支付機構自身:跨境支付及相關增值服務更高的利潤水平和更大的想象空間將使其成為支付機構下一階段重要的業務增長引擎,幫助支付機構優化自身收入結構,實現營收和利潤的良性增長。
盡管“出?!痹诮鼉赡瓿蔀橹Ц缎袠I的熱門話題,但是支付機構在境內境外跨境支付業務拓展的過程中依舊可能面臨來自多方面的挑戰。境外業務拓展方面,海外市場的監管政策、宏觀環境、用戶偏好、業務合作模式和國內可能都存在著巨大的差異,這些外部因素的變化很可能使得國內支付機構之前積累的很多經驗并不能發揮足夠的效用;相關人才的不足也對支付機構的業務拓展造成了一定的影響。境內業務拓展方面,相比較于傳統的境內支付業務,支付機構對于跨境商戶的相關資質審核、交易真實性的驗證和可疑交易篩查的難度也都會更大。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
今年受到新冠疫情的影響,線上電子商務行業飛速發展。直播帶貨、社區團購等成為新的風口,未來它們還能這么火嗎?本文作者從自身工作經驗出發,對2021年中國電商市場的趨勢進行預測,與你分享。
2020年受新冠疫情影響,線上電子商務行業飛速發展。社區團購,C2M趨勢越來越明顯,因此預計2021年將是中國電子商務市場充滿創新和擴展的一年。各商家將采用新的舉措和技術,并希望將業務擴展到低端城市。以下是2021年中國電子商務市場的10大趨勢預測。
因此:2021年將是中國電子商務市場創新與擴展的一年。
實時流媒體在2020年對消費者的購物行為產生了更大的影響,并將在2021年繼續在中國電子商務市場中發揮越來越重要的作用。這種銷售媒介類似于電視購物(例如QVC),但在21世紀得到了升級。
直播會話的視頻內容實時廣播,觀眾可以通過在線鏈接在觀看視頻的同時購買商品。就像QVC上的導購一樣,實時流媒體主持人出售各種各樣的產品,從服裝和化妝品到電子產品和汽車。
購物者被直播吸引的原因有幾個:
通過這些策略,直播主持人能夠吸引大量的購物者。例如,在2019年雙十一,李佳琦直播了六個多小時,吸引了3680萬觀眾。
在2019年雙十一期間,超過100,000個品牌使用在線直播作為銷售方式。在購物狂歡節的第一個小時內,在線直播產生的商品總銷量(GMV)超過了去年在線直播的全日總成交量??傮w而言,2019年11月11日,GMV達到200億日元(28.5億美元),約占阿里巴巴2684億日元總銷售額的7.5%。
關鍵意見消費者(KOC)是通過視頻制作和帖子發布以分享自己產品使用體驗感的普通消費者。這種新興趨勢將為品牌商和零售商提供一種新的傳播途徑,使他們采用有影響力的營銷方式,而不是使用KOL。由于包括快手、小紅書和抖音在內的一些中國社交應用程序的普及,KOC可以輕松共享其產品評論,從而影響其他購物者的購買決定。
KOC越來越受歡迎的原因之一是:消費者越來越意識到KOL是由品牌贊助來提出產品建議的人,因此他們認為提供的信息不那么可信和真實。另一方面,KOC本身就是日常消費者,他們更能提供公正的產品評論。
KOC越來越受歡迎的部分原因是購物者希望從日常消費者那里尋求建議。例如,新父母在選擇母嬰產品時會尋求他們的朋友和其他有經驗的父母的建議。通過的社交應用,這些購物者現在可以在做出購買決定之前,觀看經驗豐富的KOC的視頻和評論。
實際上,KOC營銷是「完美日記」營銷計劃的關鍵組成部分之一,該計劃已使其成為中國化妝品品牌之一。在公司成立之初,該品牌就開始與KOC進行大規模合作,這使普通消費者覺得該品牌非常受歡迎。
短視頻應用程序已涉足電子商務市場,我們預計這一趨勢將在2021年繼續。短視頻的長度通常為10–20秒,富含了各種各樣的內容。據報道,一些用戶在短視頻應用上日平均花費數小時。借助人工智能技術和算法,鼓勵用戶根據瀏覽歷史和喜好定制個性化內容,更大提高了用戶對短視頻的擁護。
短視頻行業在中國蓬勃發展,截至2019年,中國的用戶數量超過8.2億。據商業智能提供商QuestMobile稱,這一總數同比增長了32%。在中國10個移動互聯網用戶中,平均有7.2個使用了快手和抖音等短視頻應用程序。根據QuestMobile的數據,自2018年以來,用戶在這些平臺上花費的時間同比增長了8.6%,總計每月超過22個小時。
為了利用這些統計數據和消費者行為模式,短視頻應用程序已采取步驟以通過其用戶流量獲利:
到2021年,電商平臺將大力發展社區團購,如果消費者大量購買,團購將以大大降低的價格提供產品和服務。這種購物模式對預算有限的購物者特別是二、三線城市的購物者具有吸引力。
這些用戶在雙十一購物狂歡節中提供了巨大的消費能力:聚劃算報告稱,有576種產品在前兩個小時內收到了超過1000萬張訂單;京東表示,其40%的新客戶來自靖西。而拼多多在11月11日的前16分鐘內售出了1000多輛汽車。
對品牌的影響:團購模式將以較低的價格提供給想要擴展到中國低端城市的品牌。這些地區的消費者往往對價格更為敏感,并且可能會尋找便宜貨。團購還為零售商提供了清理庫存的好機會。
小程序可在支付寶,美團和微信等應用程序中運行。他們為品牌提供了一個額外的在線平臺來銷售其產品,用戶無需下載單獨的應用程序即可執行類似的功能。
品牌可以使用小程序作為大型電子商務平臺的補充,而不是替代。小程序用作輔助銷售渠道,可以列出通過快速促銷快速銷售的需求商品。小程序也可以用作品牌工具——品牌可以創建交互式的視覺程序,以更好地吸引客戶并鼓勵他們與朋友分享內容。微信小程序現在支持增強現實(AR),它將虛擬圖像疊加到物理世界上。這種類型的第一個是阿瑪尼的化妝品小程序,該程序允許用戶通過用戶在手機上使用的自帶攝像頭來測試不同化妝品的外觀,例如各種色調的唇膏。
資料來源:阿瑪尼的微信小程序
小程序為希望打入低端市場的品牌提供了優勢,購物者可能不愿下載新的應用程序。品牌可以將小程序與團購結合起來,以訪問較低線城市的微信用戶。
對品牌的影響:由于小程序的容量很輕,因此品牌在此投資進行營銷,客戶參與和電子商務是一件好事。微信小程序的創造者微信報告說,截至2019年,它已擁有7億用戶,他們每月使用微信小程序42.6次。
我們預計到2021年,物流提供商將通過升級物流基礎設施和增加保稅倉庫的產能來提供更快的交貨速度。這樣就可以為更多產品提供當天交貨。阿里巴巴的菜鳥計劃旨在通過幫助物流公司大規模部署物聯網(IoT)解決方案來數字化并加速整個交付過程。菜鳥計劃在2020年至2022年之間將1億臺智能設備連接到其IoT技術,包括其倉庫,交付機器人和算法支持的管理系統。
菜鳥還將通過最后一公里送貨業務“菜鳥郵局”建立10萬個中轉站,以增加送貨選擇。菜鳥郵局提供定期送貨,智能儲物柜和送貨上門取件等服務。
通過采用5G技術,物流提供商將能夠提供更,更快的交付。京東物流于2019年北京開設了首個由5G供電的智能物流園區,并使用一代的連接性對叉車的位置和路線進行實時監控,并提供異常預警情況。
對品牌的影響:新技術將推動中國交付的進一步加速。品牌和零售商可以利用諸如智能路由之類的工具,該工具使用機器學習算法來優化交付路線,從而提高交付效率。
中國的消費者對制造商(C2M)模式將成為電子商務發展的新動力,幫助企業更好地滿足消費者的需求并實現銷售增長。
在C2M模式中,工廠變得以消費者為中心。零售商和制造商從客戶那里收集數據,并使用大數據創建客戶資料,分析消費特征并計劃生產。這有助于制造商預測產品需求并減少庫存和供應鏈風險,這也使品牌商和零售商受益。
在2019年的光棍節購物節期間,天貓用戶搶購了1.70億個C2M產品。一家公司報告說,電動牙刷的銷量在11月11日達到了25,000。羅曼利用天貓的消費者見識來影響牙刷的設計,例如牙刷頭的尺寸和牙刷的顏色等。
C2M模型還與中國對產品個性化需求的增長相吻合,中國由80年代后的消費者(1980-1989年出生的人)和90年代后的消費者(1990-1999年出生的人)主導。C2M模式將允許制造商和零售商根據消費者的需求生產產品。
品牌影響:根據中國研究公司艾瑞咨詢的數據,中國的C2M市場在2018年達到175億日元(25億美元),預計到2022年將達到420億日元(60億美元),復合年增長率為24.4%。據Statista估計,這相當于2018年中國電子商務總銷售額的0.4%和2022年中國電子商務總銷售額的0.6%。品牌可以使用C2M模型更好地滿足消費者需求,并提高整個供應鏈的效率。
垂直市場是電子商務平臺,在該平臺上,商品和服務被出售給特定的客戶群,他們可以通過在線社區相互聯系。我們預計此類網站將在2021年蓬勃發展。Babytree(專注于母嬰產品)和Gegejia(面向女性市場的全球食品進口商)等網站和應用都是成功的垂直市場的例子。
對品牌的影響:隨著消費者對其購買選擇的了解越來越復雜,我們希望垂直的電商站點能夠吸引人們的注意力,不僅提供產品知識,而且還提供志趣相投的客戶可以進行交互的社區。品牌可以與這些平臺一起有效地將其產品定位到適當的消費者基礎。
我們預計跨境電商的格局將在2020年得到鞏固。阿里巴巴于2019年9月收購了中國當時最大的跨境電商平臺考拉,并將其整合到天貓。然后,阿里巴巴將占中國跨境電商市場的50%以上:根據研究公司iMedia Research的數據,網易考拉在2019年上半年占據了27.7%的市場份額,而阿里巴巴的天貓全球市場則占據了25.1%的份額。
這項收購將增加阿里巴巴接觸需要跨境購買商品的中國購物者的機會。這也將幫助該公司實現天貓的商業模式多樣化,該模式主要涉及邀請外國品牌在其網站上開設在線商店——考拉通常直接從外國商人那里大量購買各種商品,然后再轉售給中國消費者。首席執行官Daniel Zhang表示,阿里巴巴對考拉的收購將通過阿里巴巴整個生態系統的協同效應,進一步提升該公司為中國消費者提供的進口服務和體驗。
實時流媒體將在2021年的電子商務中扮演更重要的角色,因為它使品牌和零售商可以實時向消費者推銷產品,并為消費者提供限時折扣的優勢。
電商的格局將變得更加多樣化,短視頻平臺和小程序將持續開展直播帶貨,為零售商提供諸如AR之類的技術,以進一步與潛在客戶互動。電商大廠將繼續投資,以擴大產品范圍,例如阿里巴巴收購中國跨境電子商務平臺考拉,并利用技術為消費者提供更無縫的購物體驗(例如,使用5G連接簡化交付流程)。
基于關系的營銷方法將在2021年激增:垂直市場為購物社區提供參與機會。團購將以相對較低的成本提供產品,從而成為零售商吸引來自中國二線城市消費者的一種有效方法。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn