搜索“視頻傳輸協議”，一般會搜出來RTP，RTSP，UDP等等。光看這些協議，可能有些人會覺得奇怪為什么要把udp也往上放一起，rtp不是可以基于udp？！同時，很多文章主要去講解各個協議之間的差異，而沒有從更為宏觀的角度來考慮。本文將結合OSI的分層思路，將不同協議之間的關系都梳理清楚；同時也從視頻傳輸與組網角度進行介紹。
再者，視頻有很多封裝格式，比如m3u8，mp4等；也有很多音視頻編碼格式，比如h264，h265等，那為何有這么多的封裝格式類型和音視頻編碼格式類型呢？一方面是解決存儲的問題；另一方面是支持不同播放器的解析；但更重要的是不同的傳輸協議可以支持的音視頻編碼格式有差異，這也是由于不同的應用場景下形成的歷史原因。
流媒體（streaming media），是指將一連串的媒體數據包從服務器端發送到客戶端，可以實現邊下邊播，此技術使得數據包可以像流水一樣發送。傳統的方式需要在使用前下載整個文件，存儲到本地后才能進行播放；而流媒體只允許下載一小部分（存在視頻關鍵幀）就能進行播放。
流媒體技術不是一種單一的技術，它將網絡技術、音視頻技術還有終端緩存技術等有機地結合。也就是說，在網絡上要實現流媒體技術，必須要先制作、發布、傳輸和播放等，這需要服務器端、終端以及網絡都要能支持。當前很多的視頻軟件或者網站都是用到了這種技術。歸結下來是：
1.內容的產生。這里是指將視頻源制作成為可以對外發布的視頻格式，以及適合在網絡上傳播的分辨率和碼率。這主要用到了視頻的編解碼技術?？紤]的輸出參數，如分辨率、碼率、音視頻編碼格式、封裝格式等都需要結合應用場景和傳輸方式統一考慮。
2.對外發布。這里主要是指能夠支撐服務器對外輸出視頻資源的技術，常見的有各種流媒體網絡傳輸協議技術及其需要服務器端支撐的技術。這里的流媒體網絡傳輸協議比如：
3.組網和傳輸。
這里的傳輸還得考慮一個概念，是服務器對外主動推數據，還是等待終端到服務器端拉數據，這是兩個完全相反的處理方式。對于組播或者廣播的組網方式，往往采用的是服務器主動對外推送數據；而對于單播來說主要是終端向服務器端主動拉數據。
這里涉及到的IP組網方式中的傳輸類型有：廣播、單播、組播。
不管是什么類型的組網方式，在傳輸層就有UDP和TCP。下面也將從OSI等層面講講這些底層傳輸協議之間的關系。
4.視頻播放。這里主要是從終端側角度說，在不同操作系統中能夠進行播放視頻的播放器，比如vlc等，不同的播放器支持對不同類型的視頻數據進行播放。
從圖中也可以看到IP層（網絡層）的上層是傳輸層，通過TCP和UDP等方式進行數據包的傳輸。
（PS：下圖為網絡中所找https://blog.csdn.net/yaopeng_2005/article/details/7064869）
結合上圖，再補一個wiki上的互聯網協議套組圖，一看就更明白了。
從上面兩個圖中也可以很清楚地看到，TCP和UDP在接下去的內容有很重要的地位，這里也簡單介紹下，深度知識請自行搜索。
組播（multicast）
又稱為多點廣播或群播，或多播，主要是指將信息同時傳遞給一組目的地址。消息在每個網絡鏈路上只需傳遞一次，而且只有在鏈路分叉時，消息才會被復制，使用的效率是最高的。也正是因為這個原因，以前的廣電網絡中，針對直播多采用組播方式，流量的傳輸成本明顯降低很多。
單播：
其實是組播的一種特殊方式，即常規的點到點信息傳遞。如果所有傳輸中是以單播的方式傳遞給多個接收方，必須向每個接收者都發送一份數據副本這么多。
廣播
其實也算是組播的一種特殊方式，就是一對所有的通信方式，對每一臺主機發出的信號都進行無條件復制并轉發，所有的接收點都可以收到所有信息。
注意，組播一般指的是IP組播，常與RTP等音視頻協議相結合。雖然組播的設計理念很好，但是它需要對網絡內部的狀態比單播要多得多。實際商用中，組播主要應用在較為簡單的、只有單個源斷的情況，如之前提到廣電網絡內部用到的組播方式，UDP組播。
以上是不同類型的IP組播方式，實際在采用中要結合具體情況進行調整。比如，如果非要使用廣播，但是采用的場景不合適，也有可能產生廣播風暴。
組播、廣播、單播也介紹了基本的概念，但是他們與視頻傳輸有什么關系呢？
文章上面也提到了，組播是從IP層面的傳輸策略，而所有的視頻傳輸協議其數據包大部分都經過UDP和TCP，經由IP層進行傳輸到目的地。因此不同的IP傳輸策略與傳輸協議進行結合，就能夠落地到具體的應用場景。
同時需要注意的是，采用組播方式可以通過設置網卡為混雜模式或為多播模式，具體也是根據網卡的特性進行差異處理。如果處理方式不當，比如設置成了廣播，可能會導致在同網絡下，你在播放視頻，然后其他相同網絡下接收端也將有相應的流量，而導致他們的對外服務網口的流量被占滿。
從下圖中可以看到，標紅色的就是大家經常說的視頻傳輸協議。但是從圖中可以看到他們其實是有基于的關系，比如HLS都是基于HTTP進行傳輸，而HTTP在傳輸層都是依賴tcp數據包，再經由ip層進行分發。
1）UDP
基于UDP傳輸的視頻數據，比如udp://238.123.45.1:3001，在網絡可達的情況下，即可進行播放。可以采用vlc等播放器進行播放。
UDP視頻數據傳輸可以采用單播，組播或廣播的方式，具體采用哪種方式根據具體的組網情況進行控制。
上面也有提到過，廣電網絡中多采用組播的方式進行直播數據傳輸，這也是得益于廣電網絡的專網特性以及視頻源輸出可以控制到單一等特性。
UDP的組播大部分是采用MPEG TS流，廣電網絡中很多視頻，其視頻編碼格式也大部分是mepg2
2）RTP
整個RTP協議包括RTP數據協議和RTP控制協議（RTCP）。此外，這里也將經常一起提的RTSP介紹下。
RTP（實時傳輸協議，Real-time Transport Protocol），是一種網絡傳輸協議
RTP協議說明了傳遞音頻和視頻的標準數據包的格式。最早是作為多播協議的，后來主要應用在單播中。RTP是創建在UDP協議之上的，主要應用于流媒體、視頻會議等系統業務上。
RTP為端到端的數據傳輸提供了時間信息和流同步，但不保證服務質量，而是由服務質量由RTCP。
在RTP的數據包封裝中，包含了時間戳、標記位、同步源標識等信息。
RTP從上層接收到流媒體的數據（如H264），封裝成RTP數據包，并將其發往UDP端口中的偶數端口。
RTCP（實時傳輸控制協議，Real-time Transport Control Protocol或RTP Control Protocol）
RTP的姐妹協議。RTP使用的是偶數UDP端口，RTCP采用的是RTP下一個端口，也就是下一個奇數的端口。RTCP也是基于UDP進行傳輸的。
RTCP本身不做數據傳輸，主要與RTP協作，將視頻媒體數據打包和發送，并定期在流媒體會話參與者之間傳輸控制數據，并為RTP提供QoS反饋，簡單點說是主要保證音視頻的同步。
RTCP接收到控制信息后，封裝為RTCP控制包，并發往RTP端口下一個偶數端口。
RTSP（實時流協議，Real Time Streaming Protocol）
RTSP是一種網絡應用協議，主要來創建和控制流媒體服務器與終端之間的會話?？刂祁惖恼埱笾饕逿CP協議。
通過RTSP對流媒體數據進行控制和播放，比如進行播放、暫停、快進等操作，它定義了具體的控制消息、操作方法和狀態碼等。
與RTP、RTCP配合，在廣電網絡內部主要應用在點播場景比較多，而直播主要走UDP組播。在互聯網場景下，也有用于直播和點播的，但是相對來說使用較少。
請求的url為：rtsp://testdomain/test.mp4/streamid=0
需要服務器端和客戶端都能夠支持RTSP的控制。一般客戶端采用vlc即可，而服務器端采用Darwin Streaming Server，ffmpeg等建立流媒體服務。
3）RTMP（實時消息協議，Real-Time Messaging Protocol）
包括RTMP、RTMPT等一系列的協議，Adobe為flash播放器和服務器之間音視頻數據傳輸的協議。
4）HTTP
而基于HTTP協議的就更多了，如上圖。如果服務器部署了流媒體的服務，如Nginx等，就可以對外提供視頻播放服務了。
這里也需要說明，視頻的播放一般分為點播和直播，有些協議作為直播的傳輸協議反而是更好的，比如RTMP，時延就比較低，但RTMP做CDN成本相對較高。CDN支持很好的HTTP如果能支持直播，當前也有很多協議能支持通過HTTP的方式實現直播流媒體。
自適性流媒體（adaptive bitrate streaming，ABS）也叫碼流自適應，是流媒體服務器準備各種碼流的視頻流，所有的視頻碼流都是相同時段完全統一圖像的音視頻數據，客戶端根據網絡情況和CPU使用情況等進行動態調整。
主要有MPEG-DASH、HLS、HDS、MSS等技術方案，這幾個也是上圖中最上層的流媒體傳輸協議技術。通過這些傳輸協議封裝的視頻源，可以支持有多種碼率，并支持播放器客戶端在播放時，根據帶寬情況自動調整碼率以適應用戶的最佳觀看效果——不卡頓，不重新加載等。
這里也僅僅對碼流自適應技術做了簡單介紹，由于現在這種技術應用相當廣泛，后面將詳細介紹這種技術。
【說明】
文章轉自，華為云社區，作者Higeeon，相關版權解釋權歸原作者所有。https://bbs.huaweicloud.com/blogs/fed3df04b1e011e9b759fa163e330718
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
JSON（JavaScript Object Notation, JS對象簡譜）是一種輕量級的數據交換格式。它基于 ECMAScript（European Computer Manufacturers Association, 歐洲計算機協會制定的js規范）的一個子集，采用完全獨立于編程語言的文本格式來存儲和表示數據。簡潔和清晰的層次結構使得 JSON 成為理想的數據交換語言。 易于人閱讀和編寫，同時也易于機器解析和生成，并有效地提升網絡傳輸效率。
JSON源自于JavaScript，是一種輕量級（Light-Meight)、基于文本的(Text-Based)、可讀的(Human-Readable)格式。
在現在的開發中，能夠進行數據交換格式的，包括兩個JSON XML。
JSON是存儲和交換文本信息的語法，類似 XML，JSON比 XML更小、更快，更易解析。
那么，簡而言之，對JSON的說明總結如下：
- JSON是獨立于任何編程語言的數據格式
- 是一種用于存儲和傳輸數據的輕量級格式
- 語法是自描述的，便于人類閱讀和理解
- 數組（Array）用方括號 "[]" 表示
- 對象（0bject）用大括號 "{}" 表示
- 名稱 / 值 對(name/value）組合成數組和對象
- 名稱( name ）置于雙引號中，值（value）有字符串、數值、布爾值、null、對象和數組
- 并列的數據之間用逗號 "," 分隔
- 名稱/值對包括字段名稱（在雙引號中），后面寫一個冒號，然后是值
需要注意的是：
JSON不支持注釋。向 JSON添加注釋無效
JSON文件的文件類型是
.jsonJSON文本的
MIME類型是application/json
json是以對象的形式存在的，直接獲取JSON數據可通過如下方法：
1. json對象.鍵名
2. json對象["鍵名"]
3. 數組對象[索引]
4. 遍歷
代碼示例：
-
//定義基本格式
-
var person = { name: "張三", age: 23, gender: true };
-
var persons = [
-
{ name: "張三", age: 23, gender: true },
-
{ name: "李四", age: 24, gender: true },
-
{ name: "王五", age: 25, gender: false },
-
];
-
-
//獲取person對象中所有的鍵和值
-
//for in 循環
-
/* for(var key in person){
-
//這樣的方式獲取不行。因為相當于 person."name"
-
//alert(key + ":" + person.key);
-
alert(key+":"+person[key]);
-
}*/
-
-
//獲取persons中的所有值
-
for (var i = 0; i < persons.length; i++) {
-
var p = persons[i];
-
for (var key in p) {
-
console.log(key + ":" + p[key]);
-
}
-
}
輸出結果為：
先在控制臺中打印一下JSON對象，看看有什么，如圖：
顯而易見，在JavaScript中JSON對象僅有兩個方法：parse和stringify。后面會詳細介紹一下這兩個方法
序列化的概念：序列化是將對象轉化為字節序列的過程。對象序列化后可以在網絡上傳輸，或者保存到硬盤上。
將對象序列化成json字符串： JSON.stringify(json對象)；
反序列化：將json字符串反序列化為對象: JSON.parse(str)
API介紹：用來解析 JSON字符串，構造由字符串描述的 JavaScript 值或對象，傳入的字符串不符合 JSON規范會報錯
語法：
JSON.parse(str, reviver);
str：要解析的 JSON字符串reviver：可選的函數function(key,value)，該函數的第一個參數和第二個參數分別代表鍵值對的鍵和值，并可以對值進行轉換（函數返回值當做處理后的value）
代碼示例：
-
// JSON.parse() 解析JSON字符串， 將JSON轉換為對象
-
let json = '{"name": ["js", "webpack"], "age": 22, "gridFriend": "ljj"}';
-
console.log(JSON.parse(json));
-
// {name: Array(2), age: 22, gridFriend: 'ljj'}
-
-
// 第二個參數是一個函數，key和value代表每個key/value對
-
let result = JSON.parse(json, (key, value) => {
-
if (key == "age") {
-
return `年齡：${value}`;
-
}
-
return value;
-
});
-
console.log(result);
-
//{name: Array(2), age: '年齡：22', gridFriend: 'ljj'}
API介紹：將一個 JavaScript 對象或值轉換為 JSON字符串
如果指定了一個 replacer 函數，則可以選擇性地替換值，或者指定的 replacer 是數組，則可選擇性地僅包含數組指定的屬性
語法：
JSON.stringify(value, replacer, space)value：將要序列化成 一個 JSON 字符串的值
replacer：
- 如果該參數是一個函數，則在序列化過程中，被序列化的值的每個屬性都會經過該函數的轉換和處理
- 如果該參數是一個數組，則只有包含在這個數組中的屬性名才會被序列化到最終的 JSON 字符串中
- 如果該參數為 null 或者未提供，則對象所有的屬性都會被序列化
space：指定縮進用的空白字符串，用于美化輸出
- 如果參數是個數字，它代表有多少的空格；上限為10。該值若小于1，則意味著沒有空格
- 如果該參數為字符串（當字符串長度超過10個字母，取其前10個字母），該字符串將被作為空格
- 如果該參數沒有提供（或者為 null），將沒有空格
代碼示例：
-
let obj = {
-
name: "jsx",
-
age: 22,
-
lesson: ["html", "css", "js"],
-
};
-
let json = JSON.stringify(obj);
-
console.log(json);
-
// {"name":"jsx","age":22,"lesson":["html","css","js"]}
-
-
// 第二個參數replacer 為函數時，被序列化的值得屬性都會經過該函數轉換處理
-
function replacer(key, value) {
-
if (typeof value === "string") {
-
return undefined;
-
}
-
return value;
-
}
-
let result = JSON.stringify(obj, replacer);
-
console.log(result);
-
// {"age":22,"lesson":[null,null,null]}
-
-
// 當replacer參數為數組，數組的值代表將被序列化成 JSON 字符串的屬性名
-
let result1 = JSON.stringify(obj, ["name", "lesson"]);
-
// 只保留 “name” 和 “lesson” 屬性值
-
console.log(result1);
-
// {"name":"jsx","lesson":["html","css","js"]}
-
-
// 第三個參數spcae,用來控制結果字符串里面的間距
-
let result2 = JSON.stringify(obj, null, 4);
-
console.log(result2);
-
/*{
-
"name": "jsx",
-
"age": 22,
-
"lesson": [
-
"html",
-
"css",
-
"js"
-
]
-
}*/
注意：如果replacer是一個函數，則該函數會進行深處理，即如果鍵值對的值也是一個數組，則也會執行該函數
- 轉換值如果有
toJSON()方法，該方法定義什么值將被序列化- 非數組對象的屬性不能保證以特定的順序出現在序列化后的字符串中
- 布爾值、數字、字符串的包裝對象在序列化過程中會自動轉換成對應的原始值，undefined、任意的函數以及 symbol 值，在序列化過程中會被忽略（出現在非數組對象的屬性值中時）或者被轉換成 null（出現在數組中時）。函數、undefined 被單獨轉換時，會返回 undefined，如JSON.stringify(function(){}) or JSON.stringify(undefined)
- 對包含循環引用的對象（對象之間相互引用，形成無限循環）執行此方法，會拋出錯誤
- 所有以 symbol 為屬性鍵的屬性都會被完全忽略掉，即便 replacer 參數中強制指定包含了它們
- Date 日期調用了 toJSON() 將其轉換為了 string 字符串（同Date.toISOString()），因此會被當做字符串處理
- NaN 和 Infinity 格式的數值及 null 都會被當做 null
- 其他類型的對象，包括 Map/Set/WeakMap/WeakSet，僅會序列化可枚舉的屬性
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
1.get請求一般是去取獲取數據（其實也可以提交，但常見的是獲取數據）；
post請求一般是去提交數據。
2.get因為參數會放在url中，所以隱私性，安全性較差，請求的數據長度是有限制的，
不同的瀏覽器和服務器不同，一般限制在 2~8K 之間，更加常見的是 1k 以內；
post請求是沒有的長度限制，請求數據是放在body中；
3.get請求刷新服務器或者回退沒有影響，post請求回退時會重新提交數據請求。
4.get請求可以被緩存，post請求不會被緩存。
5.get請求會被保存在瀏覽器歷史記錄當中，post不會。get請求可以被收藏為書簽，因為參數就是url中，但post不能。它的參數不在url中。
6.get請求只能進行url編碼（appliacation-x-www-form-urlencoded）,post請求支持多種（multipart/form-data等）。
深入理解
1…GET 和 POST都是http請求方式， 底層都是 TCP/IP協議；通常GET 產生一個 TCP 數據包；POST 產生兩個 TCP 數據包（但firefox是發送一個數據包），
2.對于 GET 方式的請求，瀏覽器會把 http header 和 data 一并發送出去，服務器響應 200
（返回數據）表示成功；
而對于 POST，瀏覽器先發送 header，服務器響應 100， 瀏覽器再繼續發送 data，服
務器響應 200 （返回數據）。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
rpx是響應式px
rpx是一種根據屏幕寬度自適應的動態單位。以750寬的屏幕為基準，750rpx正好是屏幕的寬度。屏幕變寬，rpx實際顯示效果會等比放大，但在App端和h5端，屏幕寬度達到960px時，默認將按照375px的屏幕寬度進行計算。在開發移動端項目時選擇rpx作為尺寸單位。
uni-app在App端，H5端和小程序都支持rpx，并且可以配置不同屏幕寬度的計算方式。
頁面元素在uni-app的寬度計算公式如下：
750 * 元素在設計稿中的寬度 / 設計稿基準寬度
舉例說明：
但是要注意的是
拓展：在設置文件mainfest.json里開啟px轉rpx（默認關閉），所有的px可一鍵轉換為rpx
“transformPx”:false
rpx直接支持動態綁定
<view class="test" :style="{width:winWidth + 'rpx;'}"></view>
vue項目中，前端與后臺進行數據請求或者提交的時候，如果后臺沒有設置跨域，前端本地調試代碼的時候就會報“No 'Access-Control-Allow-Origin' header is present on the requested resource.” 這種跨域錯誤。
要想本地正常的調試，解決的辦法有三個：
一、后臺更改header
header('Access-Control-Allow-Origin:*');//允許所有來源訪問
header('Access-Control-Allow-Method:POST,GET');//允許訪問的方式
這樣就可以跨域請求數據了
二、使用JQuery提供的jsonp (注：vue中引入jquery，自行百度)
methods: {
getData () {
var self = this
$.ajax({
url: 'http://f.apiplus.cn/bj11x5.json',
type: 'GET',
dataType: 'JSONP',
success: function (res) {
self.data = res.data.slice(0, 3)
self.opencode = res.data[0].opencode.split(',')
}
})
}
}
通過這種方法也可以解決跨域的問題。
三、使用http-proxy-middleware 代理解決（項目使用vue-cli腳手架搭建）
例如請求的url:“/business/remind/user”
1、打開vue.config.js.js,在proxy中添寫如下代碼：
// 運行配置
devServer: {
port: '9527', //代理端口
open: false, //項目啟動時是否自動打開瀏覽器，我這里設置為false,不打開，true表示打開
proxy: {
'/api': {
target: process.env.VUE_APP_HTTP_URL,
changeOrigin: true, //是否跨域
pathRewrite: { //重寫路徑
'^/api': '/' // 或 者 'http://localhost:8080/api'
}
// 既然我們設置了代理，則所有請求url都已寫成/api/xxx/xxx，那請求如何知道我們到底請求的是哪個服務器的數據呢
// 因此這里的意義在于， 以 /api開頭的url請求，代理都會知道實際上應該請求那里，
// ‘我是服務器/api’，后面的/api根據實際請求地址決定，即我的請求url：/api/test/test，被代理后請求的則是
// https://我是服務器/api/test/test
}
}
},
附帶vue.config.js下的代碼
const chalk = require('chalk')
const path = require('path');
function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports = {
// 沒有書寫outputDir屬性 默認'dist' 對應dev.assetsSubDirectory
outputDir: 'dist',
// https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
// compiler: false,
//在vue-cli.3.3版本后 baseUrl被廢除了，因此這邊要寫成 publicPath ( 資源地址 )
publicPath: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_PUBLICPATH : '/' ,
// css相關配置
css: {
// 是否使用css分離插件 ExtractTextPlugin
extract: true,
// 開啟 CSS source maps?
sourceMap: false,
// css預設器配置項
loaderOptions: {}
// 啟用 CSS modules for all css / pre-processor files.
// modules: false
},
// 運行配置
devServer: {
port: '8222', //代理端口
open: false, //項目啟動時是否自動打開瀏覽器，我這里設置為false,不打開，true表示打開
proxy: {
'/api': {
target: process.env.VUE_APP_HTTP_URL,
changeOrigin: true, //是否跨域
pathRewrite: { //重寫路徑
'^/api': '/' // 或 者 'http://localhost:8080/api'
}
// 既然我們設置了代理，則所有請求url都已寫成/api/xxx/xxx，那請求如何知道我們到底請求的是哪個服務器的數據呢
// 因此這里的意義在于， 以 /api開頭的url請求，代理都會知道實際上應該請求那里，
// ‘我是服務器/api’，后面的/api根據實際請求地址決定，即我的請求url：/api/test/test，被代理后請求的則是
// https://我是服務器/api/test/test
}
}
},
chainWebpack: config => {
// 提示輸出的哪個地址
console.log(chalk.blueBright('\n\n running ' + process.env.VUE_APP_PROJ_NAME + ' : ') +
chalk.yellowBright(process.env.VUE_APP_HTTP_URL + ' please wait... \n'));
// 判斷不同環境 做相應處理
if(process.env.NODE_ENV === 'production') {
// 測試生產環境, 不壓縮js代碼
if (process.env.VUE_APP_TITLE === 'alpha') {
config.optimization.minimize(false)
}
}
//set第一個參數：設置的別名，第二個參數：設置的路徑
config.resolve.alias
.set('@',resolve('./src'))
.set('components',resolve('./src/components'))
.set('assets',resolve('./src/assets'))
.set('views',resolve('./src/views'))
.set('network',resolve('./src/network'))
//注意 store 和 router 沒必要配置
config.plugin('html')
.tap(args => {
args[0].title = '公募綜合業務平臺'
return args
})
}
}
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
我使用命令 npm run dev 啟動項目 報了下面的錯。
'webpack-dev-server' 不是內部或外部命令，也不是可運行的程序
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
'webpack-dev-server' 不是內部或外部命令，也不是可運行的程序
或批處理文件。
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vue@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vue@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\lara\AppData\Roaming\npm-cache\_logs\2018-06-12T09_40_42_892Z-debug.log
什么環境都是好的，剛使用npm run dev 啟動了一個前端項目都是好的，但是現在這個項目就不行了。
刪除項目的node_modules文件夾（當前運行的項目中沒有node_modules 文件夾的直接運行第二步）
在項目目錄里運行 npm install 命令
在項目目錄里運行npm run build 命令
在項目目錄里運行npm run dev 命令
這樣我就可以成功運行項目了。
眾所周知，「用戶體驗五要素」出自Jesse James Garrett 的《用戶體驗要素》一書：戰略層、范圍層、結構層、框架層、表現層。
產品設計者和開發者的角度可以對應理解為：為什么做、做到什么程度、這些東西如何組成、規劃用戶操作行為、如何呈現這些東西。
「Live Activities設計規范」由蘋果出品，原文為英文，上一篇已翻譯https://www.yuque.com/viola-ddvdh/yb7quv/uwdod71707e4nez8。上篇也提到了個人對其內容的敘述方式存在一點意見。為了更好的記住&理解「Live Activities設計規范」，使用比較熟悉的「用戶體驗五要素」對內容進行整理。
原文提供的Live Activity定義如下：
“A Live Activity displays up-to-date information from your app, allowing people to view the progress of events or tasks at a glance.”
“Live Activities help people keep track of tasks and events that they care about, offering persistent locations for displaying information that updates frequently. ”
從原文可以提煉出Live Activity顯示特點：
1. 內容是頻繁更新的、有進度/狀態顯示的、用戶關心的。
2. 內容的信息量是一眼就能看完的程度。
但上述仍是表象，并非實質，接下來思考這幾個問題：
1. 為什么顯示的是進度/狀態頻繁更新的內容？
2. 為什么要強調用戶關心的？
3. 為什么信息量是一眼就能看完的程度？
沒有Live Activity時，頻繁更新主要靠push推送。但push容易被其他APP的push覆蓋，且隨著各種APP的頻繁使用，用戶獲取關鍵信息的效率和通過push打開APP的次數反而在下降。
進度/狀態頻繁更新的內容，說明每個狀態存在的時間短，如果被覆蓋/忽略，同一狀態就不再復現，用戶所關心的，或APP所希望用戶關心的，就看不到了。比如：什么時候取外賣、待付款、上傳成功等等。
當下我們所處的時代是信息泛濫的時代，需要對信息作精簡，但用戶的操作是可以多條線進行的，比如比如邊看劇邊吃飯、上班摸魚/等外賣、比如聽音樂的時候寫作。
信息內容和量是官網一直在強調的，需要精簡，只展示用戶需要的，基本達到一眼看完的程度，目的就是知道變化的是什么，當前狀態是什么。
分析了這么多，大膽推測一下Live Activity的設計初衷是：快&準確&輕。而終極目的是打動用戶，形成好體驗，進而推動口碑和銷售；為各APP提供新的通知形式，互惠互利。當然Live Activity在一定程度上也彌補了硬件上的缺憾。
關于這個層次相當于規定功能范圍&信息邊界限制，就是什么要，什么不能要。這部分的信息官網給出許多，在此將其分類梳理如下，為避免大家不好查找官網/譯文對應出處，在句未已標注。
1. 僅iPhone支持，iPadOS、macOS、tvOS或watchOS不支持。（源自：平臺注意事項）
2. 非iPhone14的僅針對iOS16有鎖屏Live Activity展示。（源自：什么是Live Activity-鎖屏）
3. 支持用戶手動清除鎖屏狀態下的Live Activity。（源自：實際操作）
4. 支持用戶直接關閉對應APP的Live Activity。（源自：最佳實踐方式第3/c條）
5. 支持Live Activity自動開始&結束。（源自：最佳實踐方式第6/f條）
6. 限制跟蹤活動/狀態時長不超過8小時。（源自：最佳實踐方式第1/a條）
7. 限制活動/進程結束后展示時長不超過4小時。（源自：最佳實踐方式第8/h條）
8. 支持更改背景顏色&不透明度。（源自：設計有用的Live Activity第5/e條）
9. 限制內容布局。（源自：設計有用的Live Activity第5/e條）
10. 限制不同設備的展示尺寸。（源自：規范）
1. 避免在Live Activity中顯示敏感信息。（源自：最佳實踐方式第4/d條）
2. 避免在Live Activity中顯示廣告和促銷活動。（源自：最佳實踐方式第5/e條）
3. 只提供正在進行的任務/事件的關鍵摘要。（源自：最佳實踐方式第2/b條）
4. 在任務/活動結束前，給用戶提供關閉Live Activity按鈕。（源自：最佳實踐方式第6/f條）
5. 點擊Live Activity直接定位到對應頁面，無需用戶二次導航。（源自：最佳實踐方式第7/g條）
6. 考慮在活動結束后，鎖屏上在合理時段后自動刪除Live Activity。（源自：最佳實踐方式第8/g條）
（個人猜測）由于是提供一個展示區域，且展示區域有限，所以對于層級架構，一級展示什么，二級展示什么，各階段展示什么，這些都沒有做明確規定&建議。各家APP可以根據自身實際情況進行設計。
通過Live Activity的展示形式，可以總結為2點：吸引、查看（摘要&詳情）。
1. 一般是在原深感攝像頭兩側展示（電話會直接展示擴展型），分為緊湊型和最小化。
2. 緊湊型在僅有一個活動/事件的時候展示，雖被原深感攝像頭分割兩端，但僅作為一條信息展示，為了視覺上的統一，這里的顏色不支持開發設置，使用的是系統默認色值。
3. 最小化在存在多個活動的時候展現，左側和原深感攝像頭粘連，右側獨立成島。
4. 不管是緊湊型，還是最小化，都可以通過點擊原深感攝像頭區域，進入APP內頁，或者長按喚出擴展型。
1. 進入內頁的查看基本就是各家顯神通了，這里主要講擴展型和鎖屏。
2. 原則上是不支持在擴展型和鎖屏做復雜操作的，基本點擊是進入APP。
3. 擴展型是用戶長按緊湊型/最小化喚起的展示區域，內容是可以自定義的，當然官方也給了相應的建議，具體如下。內容信息種類多的可以采用這種信息左中右排布，底部預留大按鈕。內容信息少的可以采用左內容右操作的方式。
4. 根據一致性原則，鎖屏展示的布局框架應該與擴展型差不多，同樣可以點擊打開APP。只是在鎖屏狀態如果有多個任務同時進行，是會全部展示的，所以要注意品牌的傳遞，避免用戶混淆服務方。
對于如何呈現這些東西，蘋果還是寫了很多建議，確保視覺上的一致性和美觀。
1. 緊湊型狀態下，為了保證兩側信息的連貫，除了語句閱讀連貫，還需要在圖形和顏色上具有一致性，視覺上連貫。
2. 鎖屏狀態下的背景是可以自定義顏色、圖像、不透明度的，當然文字的色值和不透明度也是可以定義的。這就涉及到兩者間的對比度對信息閱讀的影響。
3. 設計師不僅要考慮最佳狀態，還有深色&淺色模式下的，以及不同環境光、設備亮度下的顯示。還有一點很容易忽視的，就是在用戶自定義的墻紙下顯示的效果。不僅要注意信息獲取，還需要考慮美感問題。
1. 緊湊型和擴展型之間的布局要保持一致，兩者間的變化過渡效果是可以預測的。
2. 一般來說，擴展型和鎖屏狀態下的信息間標準間距是20pt。
3. 在某些情況下，例如圖形和按鈕，您可能需要使用更緊湊的邊距，以避免擠滿邊緣或形成混亂的外觀。
1. 內容和Live Activity邊緣之間的邊距需要保持一致，請遵循SwiftUI規則。
1內容和Live Activity邊緣之間的邊距需要保持一致，，發現以圓角邊界為測距點得到的間距關系較為舒適。即：圓形/大致為圓形的圖形保持上下，3. 以及左側或者右側間距一致即可；方形/大致為方形的圖形保持圓角邊界與容器圓角邊界垂直對齊即可。同一位置的多個圖形圓角需要相對統一，才能確保間距的一致性。
需要適應不同機型的尺寸。具體的尺寸規范如下。
動態島使用44個點的角半徑，其圓角形狀與原深感攝像頭相匹配。
下表中列出的所有值均以pt為單位。
ps：左側為寬度，右側為高度。
以上就是整理分析的全部。
在整理分析過程中加強了對「用戶體驗5要素」各個層劃分的理解，也對Live Activity在各個層次上的要求更加明確。
寫一期大熱的AIGC的設計師必備的生圖軟件，文章詳細講解Midjourney如何使用，增強我們工作的效率，現在很多大廠都已經對AIGC開始制定詳細的工作流程，所以你還在猶豫什么，為什么還不趕緊學起來。
交流群分享AIGC輔助網站
Midjourney是搭載在Discord（Discord 是一個功能豐富且方便使用的通訊工具，還允許用戶創建自己的服務器以便和他人協作）上的，因此要想使用Midjourney需要先注冊一個Discord賬號。
打開Midjourney官網 http://www.midjourney.com
點擊【Join the Beta】，根據提示完成Discord賬號注冊
沒有賬戶，點擊注冊。此app可以下載電腦的
注冊頁面，按需填寫
登錄剛剛注冊的郵箱，找到驗證郵件，點擊郵件里面的按鈕進行驗證
注冊完成后，登錄Discord賬號，在左側找到“Midjourney圖標”，即Midjourney官方服務器，然后就可以看到各種小群組。新用戶只能加入新人群組【NEWCOMER ROOMS】，選擇一個加入，可以看到群組里有網友繪制的各種圖片。
由于新手群人數較多，自己生成的圖片很快會淹沒在網友生成的圖片中。為避免干擾，可以在Discord中創建自己的服務器，安靜的創作。
首先在左側菜單欄中點擊加號圖表，根據流程依次選擇，輸入服務器名稱，完成服務器的創建。
輸入自己的服務器名稱
然后，返回Midjourney 的服務器，進入房間，點擊機器人的頭像就可以選擇添加至剛創建的服務器中
然后進入自己創建的服務器中，在下方輸入框中輸入一些指令就可以使用Midjourney創作圖片了。
新注冊的用戶有25次免費生成圖像的機會，如果經常使用建議訂閱會員 按年費訂閱為8折，訂閱會員需要支持外幣支付的信用卡，有外幣信用卡的可以自行訂閱會員，沒有的可以去某寶或某魚代訂閱會員或租共享賬號 相關命令：查看剩余會員資源“/info”，切換快速模式“/fast”，切換放松模式“relax”
訂閱官網： https://www.yuque.com/r/goto?url=https%3A%2F%2Fwww.midjourney.com%2Faccount%2F
在對話框中，輸入/imagine 指令后，輸入框會變成以下樣式，即可輸入一些圖像描述詞匯（prompt），大約一分鐘的時間Midjourney Bot 會根據prompt生成四張圖片。 一個基本的Prompt可以是簡單的一個詞、短語或表情符號。 更高級的提示可以包括一個或多個圖像URL，多個文本短語，以及一個或多個參數。
圖片URL會影響最終結果圖像的風格和內容，地址必須以 .png、.gif 或 .jpg 等擴展名結尾
也可以在網站上扒圖片地址
可以復制多個圖片（建議輸入同類型的圖片） 在圖片地址后直接輸入關鍵詞或參數即可
輸入參數時，記得加空格。ps：--no+空格+你需要的提詞
改變生成圖形的長寬比，默認為1:1，支持的長寬比如下圖所示。
用于添加不希望圖片中出現的內容。例如，--no plants，會嘗試從圖像中去除植物。
圖像渲染時間。默認值是1，數值越高，消耗的時間越多，圖像質量越好，反之亦然。例如，--q 2 差不多會消耗兩倍的時間額度。更高的 --quality 設置并不總是更好，有時較低的 --quality 設置可以產生更好的結果——這取決于您嘗試創建的圖像。較低的 設置可能最適合生成抽象的圖像。需要許多細節可以設置更高的值。
這可以使得生成的圖像之間保持更穩定或可重復性，可選任何正整數。例如，--seed 100。
用于選擇使用的模型版本，默認為V4，可以選擇 <1 2, or 3>。因為V4版本生成的圖像比較寫實，因此有時可能需要選擇之前的版本。--video用于保存生成的初始圖像的進度視頻。
詳細的參數情況請前往官方文檔查看： https://docs.midjourney.com/docs/parameter-list
輸入prompts后，在生成的初始圖像網格下方會出現兩行按鈕，其中： U 按鈕用于放大圖像，生成所選圖像的更大版本并添加更多細節。 V 按鈕用于創建變體，會生成與所選圖像的整體風格和構圖相似的新圖像（4張在1圖）。
（四張圖片順時針排序：V1、V2、V3、V4；U1、U2、U3、U4）
MJ version 1,MJ version 2,
MJ version 3：偏抽象
MJ version 4：風格多樣
MJ version 5：真實圖片
Niji mode：二次元
模型測試算法： MJ test , MJ test photo
模型只能使用一個，點擊切換模型，每個模型側重點不同
Half quality：圖片質量低 (相當于--q 0.5)
Base quality：圖片質量中等 (相當于--q 1 )
Base quality：圖片質量高 (相當于--q 2 )
--stylize或-s 參數影響了這種訓練的強度。低風格化值 產生的圖像與提示密切相關，但藝術性較差。高風格化值產生的圖像非常有藝術性，但與提示的聯系較少。
Style Low = --s 50
Style Med = --s 100
Style High = --s 250
Style Very High = --s 750
--stylize的默認值為 100，并且在使用 默認【V4模型】時接受 0-1000的整數值。
public mode：公共模式，出的圖會在官網社區顯示
Stealth mode:隱私模式，出圖僅自己可見（需要會員）
生成圖片，點擊(v)的時候可更改提示詞
fast mode：快速模式，該速度下生圖沒有限制，會根據你生圖占用的 CPU排隊，生圖量越大，排隊時間越長
relax mode :輕松模式，會優先生成你的圖（需要會員）
獲取全部關鍵詞，添加群主微信獲取
用相同的“seed種子”產生相同的結果，然后可以微調畫面細節 選擇郵件表情發給機器人，這樣就會收到一個機器人的私信。發“E”可以快捷搜索出圖標
發送后，底部會出小郵件圖標，點擊等待機器人回復
收到消息，復制種子
在輸入新的關鍵詞后，結尾輸入-- seed指令，復制上你的種子
3、復制圖片地址，利用墊圖來保持創作的關聯性
本文描述如何使用ChatGPT成為我們在工作與學習中的超強助手 ChatGPT是一種大型語言模型，它可以通過處理自然語言文本來產生回復，可進行自然、流暢的對話。ChatGPT可以在多種應用場景中使用，例如智能客服、智能助手、問答系統、聊天機器人、翻譯等等。
你可能對ChatGPT帶來的變革毫不關心，認為只是一個聊天的工具，但是ChatGPT的出現確實見證了技術的革新，對于新事物，尤其是現在處在一個AI科技爆發時代，越早接觸新技術，越早擁有核心競爭力。堅持看完文章相信對你會有很大幫助。
以調研專員身份進行對話，使他可以用更專業的詞匯回答你的問題。
可以針對某個產品，生成對應用戶年齡段的用戶畫像，輔助產品調研工作
指令：請寫 [N 份]，關于 [某個產品 /NN～NN歲] 的用戶畫像
針對某個產品，去分析產品高頻、低頻功能。可以生成列表，統計使用頻率。
指令：請查閱 [某產品] 用戶 [經常使用或最少使用] 的功能，要求數據真實可查詢
生成某產品的調研報告，可規定字數，如果寫到一半停下，發送「繼續」的指令就可以繼續發送啦～
指令：請總結一份 [某產品] 用戶使用 [某功能] 的調研報告
以競品研究員的身份進行對話。如果有需求可以附加競品研究員所處的行業類別。
可以選擇自己關注的競品產品，生成報告，可以規定競品報告的側重點。
指令：生成一份有關 [選擇你的競品] 的競品分析報告，詳細分析其雙方的 [你的需求]
當你在對產品某個領域不太清楚時，你可以隨時收起相關的材料，比如你對金融行業的用戶體驗的行情感興趣，你想深度了解的時候，用你的資料整理助手幫你整理資料。
指令：給我 [N 篇] [領域] 的文章
接著你可以讓助手對上述文章進行總結
指令：用列點的方式總結上述文章中的 [數字] 重點
指令：用列點的方式總結出 [數字] 個 領域 知識重點
在寫報告時，經常會對某個領域或知識點不清晰，無從下手的情況。遇到這種情況，可以直接使用下面的指令獲取專業的研究報告，幫你了解最新的研究以及專家觀點。
指令：寫出一篇有關 [領域] 的 [數字] 研究報告，要求引用真實數據與專家觀點。
針對某個主題可以提出反對觀點，改變角度，擴大寫報告的思維。
指令：針對一下論述 [觀點] 提出反駁的觀點，每個論點都要有論證
寫報告時，可以針對某個部分，用AI幫你去提煉你所需的內容。
指令：你是金融互聯網專家，請總結以下內容，并針對以下內容提出未來能進一步研究的方向 [附上內容]
可以輔助你寫出一份ppt大綱，為你提供思路。雖然無法寫出細節，但是可以根據標題再去發指令，生成詳情內容。
指令：請寫一份有關于 [領域] 的PPT，頁數在 [數量] 頁以內
根據大綱標題，細化內容
指令：輸入標題名稱，[字數] 以內
先去培養角色，讓他用簡潔的英文單詞，為你提供AI繪畫的關鍵詞。
指令： 現在起，當我想要你發送圖片、照片的時候，用3/8Markdown寫，不要有反射線，不要用代碼塊。使用 Unsplash API(https://source.unsplash.com/1280x720/?)。如果聽懂了請回復明白，以后需要這樣
可以設定面試場景，生成一個對話場景，為面試做準備，提前準備面試中可能被問到的問題。
指令：請以 [崗位] 的身份，情景再現一場面試工作
將AI的身份塑造成面試官，模擬真實的面試場景，提高自己的面試能力
指令：請你以 [崗位] 面試官的身份與我對話，進行一場面試
針對職業方向如何發展，可以讓ChatGPT根據大數據為你推薦現在的職業發展的熱門方向，為未來開展明燈。
指令：[行業] 未來職業方向，哪個比較熱門
針對職業方向，可以繼續探索自己感興趣的職業規劃
指令：請提供 [崗位] 未來的職業規劃
輸入網頁，可幫您總結當前網頁的信息，提煉關鍵信息，提高閱讀效率
指令：[網站] 請總結這個網站的信息
指令：詳細的說明 [想了解的知識]
指令：[科目] 學習看哪些網站
指令：我學習使用 [工具]，我應該看哪些網站的教程
3、英語學習助手
1）、英語對話
指令：Can we have a conversation about [話題] ?
指令：Please correct my grammar and spelling mistakes in the text above:[附上英文文字]
安裝「Voice Control for ChatGPT」谷歌插件，可播報Chatgpt的文字，練習聽力與口語。在谷歌應用商店中搜索下載即可。
這些就是我在用chatGPT中對設計師來說比較有價值的提問方向，希望對大家有啟發。
一、前言 —— 1.1 閱讀之前、1.2 調研背景、1.3 分享目的、1.4 術語說明
二、市場分析 —— 2.1 行業背景PEST、2.2 市場現狀
三、主流工具 —— 3.1 調查篩選、3.2 工具介紹、3.3 分析模型、3.4 結構層、3.5 框架&表現層
四、功能體驗 —— 4.1 創建大屏、4.2 分享導出、4.3 更多玩法
五、探索思考 —— 5.1 未來迭代、5.2 設計價值
閱讀提醒
1、文章上篇約10300字，閱讀時長約20分鐘。全文主要分享本人對當下主流可視化大屏搭建工具的調研分析，淺談對可視化行業的探索思考。由于篇幅有限，閱讀體驗更佳，故分為上下兩篇，上篇簡述可視化行業的市場分析，拆解分析主流工具（DataV、Raydata、EasyV、森大屏）的結構層、框架層和表現層。下篇接著講主流工具（DataV、Raydata、EasyV、森大屏）的功能體驗，淺談可視化行業未來的探索和思考。
2、文中的拆解分析部分，多款工具可能存在較多重復觀點，由于篇幅有限，故不再贅述。
適合讀者
B端UI設計師、產品經理，可視化行業相關從業者及愛好者。
調研時間
2022年9~10月
調研方式
桌面研究、問卷調查
首先，本次分享僅作為個人學習交流，文章觀點僅代表個人。目前比較少有可視化工具的產品分析，本次通過調研，希望了解更多可視化大屏工具的背景、知識，也希望能通過文章的形式，達成兩個分享目的：一、提升自身的復盤總結能力，鼓勵將知識沉淀后輸出分享；二、借此機會與更多行業相關者分享交流學習。
數據可視化
關于數據視覺表現形式的科學技術研究。
數據可視化平合
它是大數據內在價值的最終呈現手殷，它利用各類圖表、趨勢圖、視覺效果對數據進行分析并展現，幫助用戶發現內在規律、發掘深度規律、指導經營決策。
大屏搭建工具
利用簡單拖拉拽、低代碼開發等方式，幫助非專業工程師快速實現炫酷大屏的數據可視化大屏效果的互聯網工具類產品。業務場景主要有行業可視化、智能終端、模擬演示、數據統計分析。
在2011年左右，國內帆軟公司研發簡單的可視化產品，起名“FineBI”，解決了用戶個性化的可視化分析的需求。隨著技術發展和行業趨勢發展，在滿足智能分析報表的基礎上，又迎來了更高的可視化大屏的挑戰，國內如光啟元Raydata、阿里DataV等可視化大屏工具開始出現，各大廠商如京東、百度、網易有數等紛紛踏上可視化賽道，隨著近年的政策支持企業數字化轉型的浪潮下，可視化行業得以快速發展成熟，為企事業單位解決了一個又一個可視化分析難題……
本次調研經過桌面研究，分析出近年來可視化行業背景和市場現狀。
從政策、經濟、社會、技術這四個方面，分析數據可視化行業的背景，得出以下結論：
一、在政策方面，數據可視化行業受到政策扶持；
二、在經濟方面，IT產業體系擴大且成熟；
三、在社會方面，數據可視化解決企業痛點，機會點在政企和醫療行業；
四、在技術方面，企業通過數據可視化進行精細化管理成為現實。
* PEST分析法 是對宏觀環境進行分析，以便找到機會，認清威脅與挑戰。所謂PEST，P是政治(Polotics)，E是經濟(Economy）, S是社會(Society），T是技術(Technology)。這種方法就是將這4個元素分別寫在4個格子中，并羅列出這4個元素相關聯的與產品有關的環境因素，最后投票選出3~5個點子作為PEST分析的結果。
P政策
中國相繼出臺多項政策（如《“十四五”大數據產業發展規劃》）重點扶持數據采集、數據安全、數據處理、數據存儲及大數據在產業端的應用等方面的快速提升，進一步利好數據可視化平臺等相關細分產業的快速發展。
制定5個發展目標、6大主要任務，明確大數據產業將步入“集成創新、快速發展、深度應用、結構優化"的高質量發展新階段設置數據治理能力提升、重點標準研制及應用推廣工業大數據價值提升、行業大數據開發利用、企業主體發展能級躍升、數據安全鑄盾六個專項行動。（參考來源：頭豹研究院）
E經濟
2021全年國內生產總值突破110萬億，GDP達114萬億元，按不變價格計算，比上年增長8.1%，兩年平均增長5.1%。
我國IT產業在經歷了三十多年的發展后，已經基本形成了產業規模龐大、專業門類齊全的IT產業體系，2020年我國IT支出達2.9萬億人民幣。
在應用軟件領域百花齊放，2021年上半年我國軟件業完成軟件業務收入44198億元，同比增長23.2%；全行業實現利潤總額4999億元，同比增長13.6%。另外，對于云計算、大數據、物聯網、人工智能等新一代技術，我國也由單點向融合互動不斷演進。（參考來源：頭豹研究院）
S社會
數據可視化可有效解決企事業單位在傳統數據分析的痛點，降低了企業數據分析成本，助力企業在技術層、業務層、管理層及決策層等層面的決策能力。
受疫情影響，政務及醫療領域對公共衛生等等公共領域掌控力度加強，因此，中國數據可視化未來市場增長點將主要集中在政務及醫療衛生領域。（參考來源：頭豹研究院）
T技術
伴隨著互聯網、物聯網快速發展，中國數據量持續增加，通過對數據的可視化處理及分析，企業端對日常精細化管理成為現實。
過去5年間，中國數據產生量快速增加ie中2017年的6ZB快速增加至2021年的16ZB。預計未來5年中國數據產生量將繼續增加，有望于2026年達到62ZB。（參考來源：頭豹研究院）
分為市場階段和市場規模，說明當前數據可視化行業的市場現狀。結論如下：
一、國內數據可視化平臺市場尚處于發展期，潛在市場容量非常巨大，前景廣闊；
二、預計未來5年國內數據可視化平臺市場規?？焖僭黾?，復合增長率達32.5%。
市場階段
國外可視化展現平臺行業起步較早，市場相對成熟，消費者認可較高，而國內可視化展現平臺行業市場還處于發展期，雖然2012年呈現出小爆發式增長，但市場尚不成熟，還有待于培育，然而國內人口基數大，隨著國內經濟的發展，人民生活水平的提高，收入的增長，對精神生活方面的消費也不斷增加，國內潛在市場容量非常巨大，前景廣闊，因此，可視化展現平臺行業的發展將逐漸向本土化轉移。
當前，中國數據可視化平臺行業尚處于發展早期，36.8%投融資事件主要發生在早期A輪階段，行業尚具有較大發展潛力。從地域分布情況來看，中國數據可視化企業主要分布于廣東省、北京市、上海市、江蘇省及浙江省等區域，約占總體的93.5%。當前，中國數據可視化行業投融資較為活躍。其中約36.8%的企業處于A輪融資階段，2家企業已于新三板掛板，其中，觀遠數據于2022年2月完成C輪融資，共計2.8億元。（參考來源：頭豹研究院）
市場規模
過去5年間，中國數據可視化平合市場快速增加，由2017年的13.2億元快速增加至2021年的43.8億元，復合增長率達27.1%。預計未來五年中國數據可視化平臺市場年復合增長率有望達到32.5%。（參考來源：頭豹研究院）
根據上面的行業背景和市場現狀，從政策扶持、經濟增長、社會機會點增加、技術革新、市場階段成熟、市場規模擴大方面都是正向推動著可視化行業的快速發展，于是，市面上逐漸出現了很多數據可視化大屏搭建工具，目的是有效解決企事業單位在傳統數據分析的痛點，助力企事業單位快速進行數字化轉型，整合數據、提高數據展示效率及輔助管理決策。
經桌面研究、問卷調查后，發現并整理出市面主流的數據可視化大屏搭建工具梯度說明。以工具滿意度、行業普及率、用戶量幾個維度來劃分梯度：
第一梯隊有阿里云DataV、騰訊RayData、袋鼠云易知微；
第二梯隊有騰訊Banber（現改名RayData Report）、山海鯨可視化、森工廠森大屏、51WORLD、華為云DLV；
第三梯隊有微兔可視化、ByteV中臺等。
*本次未歸入調研范圍內：京東、百度、網易有數等廠商可視化產品，以及一些開發大佬的開源大屏工具
*使用騰訊問卷自發進行問卷調查，主要渠道為微信群，有效樣本量較少，數據僅供參考
第一梯度的阿里云DataV、騰訊RayData、袋鼠云易知微的工具滿意度、行業普及率、用戶量綜合評分較高，還有第二梯度的森工廠森大屏對比其他競品產來說，產品形式不同，后面將以阿里云DataV、騰訊RayData、袋鼠云易知微、森工廠森大屏這4個工具產品來進行體驗分析。
調研版本：*阿里云DataV - 企業版試用 - V6.2； 騰訊RayData - Web版 - V2.6.0； 袋鼠云易知微EasyV - 個人版 - V5.1.0； 森工廠森大屏 - V2.10.11 。
*EasyV2022年12月上新了「節點管理」功能（類似DataV的「藍圖」功能) 會與本次調研版本有一定差異。
*由于阿里云DataV在調研后2023年UI進行較大更新，所以會與本次調研版本有一定差異，更新日志傳送門：https://developer.aliyun.com/article/1127824?spm=5176.14082271.J_5834642020.1.42c74dcf64Y3FZ#slide-12
阿里云DataV
a.產品簡介
使用可視化應用的方式來分析并展示龐雜數據的阿里云產品。其中DataV企業版試用是適合剛接觸DataV的新用戶，輕松搭建可視化大屏，匯報、客戶參觀必備。而DataV數據可視化企業版是開箱即用實時數據大屏搭建工具。
b.產品特點
智能識圖；藍圖節點編輯器；三維城市編輯器；BI分析組件
c.產品版本
企業版（本次調研）、專業版、尊享版
騰訊光啟元RayData
a.產品簡介
專注3D數據可視化原型設計。RayData Web是B/S架構開發的網頁端可視化系統搭建工具，支持在線3D可視化編輯，輕松構建商業級數字孿生項目。
b.產品特點
3D模型風格獨特；圖表工作站；模型場景工作站；提供定制服務
c.產品版本
個人版、Web版（原名專業版，本次調研）、Plus版（私有化部署）
袋鼠云易知微EasyV
a.產品簡介：
數字孿生，EasyV是低成本無門檻上手數據可視化大屏的工具，數據看板可視化，輕松設計 高效搭建。
b.產品特點：
素材資源豐富；資源社區氛圍好；提供定制服務
c.產品版本：
個人版（本次調研）、高級版、尊享版、運行平臺（私有化部署）
a.產品簡介：
拖拉拽搭建可視化大屏，內置豐富模板和在線圖表開發工具
b.產品特點：
數字孿生工具鏈生態完善；藍圖節點編輯器；圖表工作站；提供建模服務
c.產品版本：
基礎版（本次調研）、專業版、高級版
本次調研使用【用戶體驗五要素】模型方法來分析主流工具DataV企業版試用、Raydata Web專業版、EasyV個人版、森大屏基礎版，主要側重在表現層、框架層、結構層。
此處說明一下，例如本次調研的屬于功能型產品，那么功能型產品的結構層側重于交互設計，通?？捎盟季S導圖、流程圖方式來說明情況。再往上看，功能型產品的框架層側重于信息設計、界面設計，大致模塊尺寸大小、位置擺放，通?？捎玫捅Ｕ嬖?、交互文檔來說明情況。到了模型最頂層，不論功能型還是信息型產品的表現層都是感知設計，關注視覺如何呈現，通常運用形、色、字、質、構、動著6個維度進行整體視覺設計。
用戶體驗五要素來自Jesse James Garrett 的《用戶體驗要素》一書：戰略層、范圍層、結構層、框架層、表現層。
在結構層中，DataV企業版試用、Raydata Web專業版、EasyV個人版、森大屏基礎版4款產品略有不同（且名稱叫法不一），整理總結出共性，產品包括系統頁和編輯器，系統頁下包括項目列表、資源管理、用戶管理、幫助中心，編輯器下包括頂部導航欄、組件庫、圖層面板、畫布區、信息面板。
為了更清晰了解4款產品的產品設計側重點，接下來，對比分析它們的結構層。
關鍵詞：強調品牌感、幫助中心、靈活切換藍圖
DataV企業版試用分為系統頁+編輯器。系統頁頂部是輪播banner圖，強調品牌感和打造產品差異化。
系統頁主要包括我的可視化、我的數據、我的資產、教程，其中我的可視化包括3個創建入口，分別是PC創建、移動端創建和識圖創建，滿足用戶在不同場景的使用需求。系統頁中教程層級放在一級菜單下容易被用戶發現，對小白用戶比較友好，快速觀看視頻教程。
編輯器中包含畫布編輯器和藍圖編輯器。進入編輯器后，可切換畫布編輯器與藍圖編輯器，放在同一層級，方便用戶從畫布編輯器中添加圖層到藍圖編輯器中。
畫布編輯器（PC和移動端基本一致）包括圖層、資產列表（資產包、組件庫）、工具欄、畫布、頁面設置、組件設置。藍圖編輯器包括導入節點、邏輯節點、工具欄、配置面板。
關鍵詞：可視化統計、定位專業用戶、畫布占比大
Raydata Web專業版分為系統頁+編輯器。系統頁主要包括工程列表、資源管理、數據管理、權限管理。因為產品定位是專業版，所以弱化了幫助手冊的入口，同時編輯器中也是基于熟悉掌握工具的用戶而設計的。類比于Raydata Web個人版，系統頁的更多幫助入口更為明顯，適用于新手小白使用。
系統中的資源管理包括3D資源和2D資源，顯示資源數量，以環圖可視化的形式表現，系統中的權限管理也同樣顯示人員數量，數據統計一目了然。
編輯器中的大綱、概要與其他產品結構不同，大綱包括系統UI層（放2D）、層級（放3D）、頁面（2D&3D），概要分不同情況而定，處于UI層時顯示2D組件，處于場景層時顯示3D組件。
畫布編輯器包括頂部欄（基礎功能、組件庫）、概要、大綱、畫布、頁面設置，頁面設置（畫布設置、組件設置）。其中組件庫折疊在頂部欄中，增大了編輯器中畫布的占比，讓用戶更關注當前畫布操作。
關鍵詞：素材資源、幫助中心、畫布占比大
EasyV個人版分為系統頁+編輯器。系統頁包括我的應用、我的數據、終端交互（高級版有）、組件開發（尊享版有）、后臺管理、門戶管理（高級版有）、資源中心。
其中系統頁的資源中心包括應用模板、設計素材、主題資源，有入口可跳往素材廣場，EasyV的素材資源十分豐富，該跳轉入口可以很好引導用戶去使用官網設計素材，輕松搭建大屏。幫助菜單位于常駐懸浮于系統頁側邊欄，其包括操作日志、幫助文檔、視頻教程、問答中心、版本日志，幫助菜單對于新手小白比較友好，操作路徑簡短，方便新手查閱幫助資料。
編輯器包括任務欄（基礎功能、組件、資源）、圖層、畫布、詳情設置（頁面設置、組件設置）。同Raydata Web專業版產品，其中組件庫折疊在任務欄中，增大了編輯器中畫布的占比，讓用戶更關注當前畫布操作。
關鍵詞：工具鏈、模板推薦、藍圖和代碼二開
森大屏基礎版分為系統頁+編輯器。森大屏的結構和其他產品不同，由于數字孿生工具鏈生態比較完善，打通其他工具鏈入口（森工廠旗下有低代碼、零代碼、森大屏、森城市、森園區、森展廳、森拓撲、森數據、森模型等），所以系統頁頂部導航菜單可快速切換工具。
系統頁包括了個人中心、幫助手冊、我的大屏、推薦大屏（模板），側重展示推薦大屏，引導用戶優先選用模板進行大屏快速搭建，生產提效。
編輯器包括大綱、工具欄、畫布、畫布屬性、資源管理、菜單欄、資源中心、藍圖和代碼二開。編輯器中與DataV不同的是，藍圖、代碼與畫布位于同一層級，用戶可隨時使用藍圖來鏈接交互事件，也可進行代碼二次開發操作。
將4款產品的框架層和表現層進行拆解分析。
在框架層中，大體而言按鈕、輸入框等控件圓角較小，看起來比較方正，弧線的異形設計，容易體現科幻造型。在登錄頁中，頁面布局各有差異。在編輯器中的布局大體一致，畫布都位于界面中心，強調用戶最關注大屏設計的畫布區域。高頻操作的組件庫在頁面的位置各有差異。
在表現層中，主要通過形、色、字、質、構、動這6個維度來進行對比分析。DataV企業版試用、Raydata Web專業版、EasyV個人版、森大屏基礎版4款產品的整體視覺調性都是以暗色、科幻風格為主。登錄頁都選擇了亮色風格界面，系統頁和編輯器都是暗黑風格。部分產品品牌字體以直線為主并加入弧線和粒子元素，科幻的界面動效主要體現在加載頁面。
阿里云（DataV企業版試用）- 登錄頁
DataV 的登錄頁統一由阿里云登錄頁進入。以中心布局（核心面板偏右），三維模型+灰色背景+線條點綴的形式進行設計，主題色是阿里的橙色。因為DataV是阿里云旗下的產品，共用入口，所以此處沒做額外的產品登錄頁以強調 DataV 產品一致的品牌感。
Raydata Web專業版 - 登錄頁
Raydata Web 登錄頁以中心布局的形式，無其他設計元素，只保留關鍵信息，同其他競品相比略顯單調。登錄頁的淺色風格與進入系統頁和編輯器的暗黑風格，缺乏界面整體色調的一致性。界面控件主題色使用藍紫漸變色，與系統頁和編輯器的藍色也略有差異。（可從Raychart產品使用手冊發現，舊版布局為同EasyV）
EasyV個人版 - 登錄頁
EasyV 的登錄頁有2處觸發，常規觸發和資源中心觸發，分別以左右布局的全頁和彈窗形式進行框架設計。彈窗的形式不需額外跳轉，讓用戶在資源中心挑選素材時能更快進行登錄操作。登錄頁以左右布局的形式，插圖與登錄模塊大致各占50%，深色插圖的和淺色登錄模塊的兩個色塊形成強烈視覺對比，更能吸引用戶注意。
森工廠（森大屏基礎版) - 登錄頁
森大屏的登錄頁以中心布局的形式，有利于聚焦視覺，背景使用簡約抽象的形狀來點綴畫面?；疑尘?抽象圖形點綴，與淺色登錄模塊拉開視覺對比。按鈕主題色是橙色，是因為森大屏是優锘科技森工廠旗下的產品，共用入口，所以此處沒做額外的產品登錄頁以強調森大屏產品一致的品牌感。
DataV企業版試用 - 系統頁
頂部輪播圖占整個頁面四分之一左右，強調品牌感同時打造產品差異化，Banner內容為統一風格的3D模型場景+無襯線字體標題為主，一級導航邊緣弧線的流光動效表現科幻酷炫風格。
一級導航欄與輪播圖的重疊關系，半透的玻璃質感，仿佛是用戶透過一層玻璃，打開可視化世界的大門，結合暗黑風格的界面，給用戶一種進入游戲的沉浸感、躍躍欲試的沖動?？v向與橫向結合的混合導航，對于后期有規劃新功能而言，拓展性較強，缺點是占用面積大、交互路徑長，適用于大屏項目數不多的情況下，若項目數量較多，可能有空間不夠的焦慮。
我的可視化中的3個創建入口按鈕使用了扁平加光感強、冷色調風格插畫，引起用戶注意，快速識別創建功能入口。主題色使用比較鮮艷活躍的藍色，輔助色為青色，占用面積不多，起到豐富點綴畫面的作用。設計元素的四周輪廓不做圓角處理，顯得整體界面比較方正端正、硬朗嚴肅的印象。
Raydata Web專業版 - 系統頁
左上方展示品牌Logo，清晰寫明當前產品及版本，符合用戶認知。品牌元素融入進頂部欄右側頭像及皇冠圖標，加深品牌印象。
以側邊懸浮導航的形式使用戶快速定位查找功能模塊的位置，拓展性較強，以較瓷片“大包小”的結構，聚合了較多功能模塊，如果是小分辨率屏幕的情況下，經常要鼠標輪滑來回滾動才可看到下方功能模塊，導致不夠靈活高效。側邊導航模塊中的圖標統一為形狀較方正、偏冷的中性色、扁平微漸變風格。敬請期待的藍色沙漏圖標在界面中略微突兀出，缺少圖標風格一致性。
界面為偏冷中性純色，無背景裝飾，同登錄頁只保留關鍵信息（如大屏項目卡片），不加過多裝飾的簡約風格調性保持一致。按鈕主題色使用比較灰的藍色，透出沉穩柔和的調性。設計元素的四周輪廓略微加了些圓角，同DataV硬朗的感覺則稍微緩和一些。
EasyV個人版 - 系統頁
上方展示品牌Logo，同Raydata，不再贅述。對于創建大屏按鈕而言，DataV用的是插畫按鈕的形式，Raydata是用卡片按鈕的形式，而EasyV則用圖文按鈕的形式，而圖文按鈕的優點是占用面積少。
同DataV，選用了縱向與橫向結合的混合導航，拓展性較強，不再贅述。二級導航底部使用了動態插圖點綴界面，插圖是不斷旋轉的科幻裝置，角度帶有透視，讓扁平的整體界面附帶了層次感、空間感。右側側邊菜單的幫助圖標提供給用戶快捷操作，對新手小白友好。
缺省頁運用情感化設計，以2.5d插圖的表現形式緩解用戶負面情緒，配色在深色界面中顯得比較明顯，個人認為可以適當弱化插畫亮色部分。主題色使用鮮艷活躍的藍色為主，在深色的界面中同樣相對明顯、突出。設計元素的四周輪廓既有全圓角，也有小圓角，界面形狀統一性待加強。
森工廠（森大屏基礎版) - 系統頁
左上方展示品牌Logo，同Raydata，不再贅述。由于是森工廠旗下的工具鏈，所以森大屏的系統頁頂部欄可進行工具切換，界面左右兩側留白很多、版心小、淺色風格，讓整體界面更像是一個前臺官網的印象。
使用了像是混合導航的方式，用“像”這樣表達是因為，頂部欄是工具切換欄，而側邊懸浮導航1竟然是所有工具的個人中心，側邊懸浮導航2卻是當前工具森大屏的資源中心，右側內容區是當前工具森大屏的我的大屏、推薦大屏模塊?？蚣苌嫌幸欢ǔ潭炔惶嫌脩粽J知，導致引起疑惑和誤解。盡管如此，配色上使用橙色（森工廠）和具體工具主題色來區分當前位置，能一定程度防止用戶混淆概念，通過多次在頂部欄切換工具，可預知上面提到的導航1是指所有工具而言的，而導航2則是指當前具體工具而言。
右側側邊菜單提供用戶快速反饋的入口，簡單便捷。其中側邊菜單的問號圖標與頂部欄的一樣，跳轉鏈接一致，而文案卻使用了“常見問題”和“幫助中心”2種，重復功能入口也許考慮的是為了增加點擊，而同個界面重復堆放功能入口的合理性還有待考究。圖標使用了毛玻璃和線性圖標的表現手法，為界面提升質感。設計元素的四周輪廓加了小圓角，整體給人的感覺更為親切、友好。
DataV企業版試用 - 畫布/藍圖編輯器
整體暗黑風格的界面下，能使得用戶設計深色風格的可視化大屏時，保持更專注的狀態。題外話，DataV新版本的編輯器界面可切換有淺色風格，同理，淺色編輯器界面則更適合在設計淺色風格的大屏的場景。通過不同深色色階的背景色塊讓每個功能模塊的框架位置區分得清晰明了，另外整體配色、形狀方面都遵循視覺呈現一致性，降低用戶認知成本。
在編輯器左上方無退回系統頁的返回按鈕，用戶只能通過切換瀏覽器標簽頁回看系統頁，而無法在當前頁返回上一層級回到系統頁，所以對于想要快速返回上層的場景下，則顯得不那么便捷。頂部欄左側的畫布編輯器與藍圖編輯器選項按鈕歸于一組符合用戶認知，可快速切換當前編輯器進行大屏視覺設計或鏈接交互事件。畫布編輯器和藍圖編輯器的畫布外區域保持視覺統一，使用了點平鋪的背景與畫布做出層次區分。
右側的屬性面板中展示組件的配置功能，當信息較多時，用視覺較弱的分割線區分每組的配置信息，數據之間比較緊湊，提高面積利用率。編輯器中多處的功能組使用了格式塔原則的接近性，讓距離更近的功能組更有關聯性，層次清晰有序，降低用戶認知成本。
圖標表現方式只使用了單色線性圖標一種，讓整體界面表現得更簡潔、輕量化，忽略圖標形狀而讓用戶更多去關注功能。配色、圓角遵循視覺呈現一致性，當功能被選中時，會以藍色背景、圖標反白的方式強調該功能的狀態、位置。
Raydata Web專業版 - 編輯器
同DataV，暗黑風格界面，不同深淺色塊背景區分功能模塊，且界面左上方無退回系統頁的返回按鈕，不太便捷，不贅述。
大綱與概要類似于頁面與圖層的關系，像設計軟件Figma的Page（頁面）與Layer（圖層），大綱與概要位于界面左側的區分上下模塊，框架從上至下擺放，符合用戶認知。對于新手小白，還需額外查看教程引導才能認知大綱與概要的框架，因為此版本定位為專業版，所以弱化了幫助指引，簡化界面，讓專家級用戶更沉浸地、不受過多干擾地使用。
組件庫位于頂部，占用面積小，前面結構層提過，作用是增大了畫布占比，讓用戶更專注設計，不贅述。
圖標表現方式使用了單色面性圖標和微漸變扁平投影圖標，界面頂部是組件庫，這些微漸變圖標呼應了系統頁同樣使用了為漸變風風格。為了強調組件庫這種用戶高頻操作區域，使用了更吸引用戶注意力的微漸變扁平投影圖標，而其他區域則使用單色面性圖標，弱化視覺，讓界面輕量化，讓用戶更多去關注功能。同DataV，同樣使用格式塔原則的接近性，層次清晰，降低認知成本，不贅述。
配色、圓角遵循視覺呈現一致性，當功能被選中時，會以藍色背景、圖標反白的方式強調該功能的狀態、位置。
EasyV個人版 - 編輯器
與其余3款工具不同，EasyV在編輯器左上方有退回系統頁的返回按鈕，方便用戶快速返回上層的系統頁。
同Raydata，組件庫位于頂部任務欄中，占用面積小，前面結構層提過，作用是增大了畫布占比，讓用戶更專注設計，不贅述。
圖標表現方式使用了單色微漸變線性圖標，部分圖標線細節還用半透明效果，而部分則用了不透明度漸變的方式，提升圖標質感，讓整體界面輕量化而不至于過于單調。配色、圓角遵循視覺呈現一致性，降低用戶認知成本。
森工廠（森大屏基礎版) - 編輯器
同DataV，暗黑風格界面，不同深淺色塊背景區分功能模塊，且界面左上方無退回系統頁的返回按鈕，不太便捷，不贅述。
編輯器的任務欄設計類似本地客戶端軟件的頂部菜單欄，通用的“文件、編輯、視圖、排列、圖表、調試、幫助”菜單都放在了頂部任務欄，符合用戶交互習慣，缺點占用面積較大。
與Raydata結構一樣，同樣有類似設計軟件Figma的Page（頁面）與Layer（圖層）的關系，森大屏把圖層放在畫布底部欄，而大綱放在組件庫的左下角位置?？赡芸紤]不占用過多面積而折疊在左下角，但缺點也很明顯，層級較深，難以找到大綱中的畫布元素，對新手小白不太友好。通過畫布底部欄切換圖層，這里圖層也是分2D和3D，還可設置圖層為全局圖層，即預覽大屏時跳轉任何地方都始終顯示該圖層，可減少重復勞動設計。
藍圖和代碼二開也位于畫布底部區域，同DataV，森大屏也有藍圖功能。底部有藍圖和代碼二開的切換按鈕，方便用戶鏈接交互事件和調試二改組件的時候，不完全遮擋畫布，讓用戶更易感知當前所處位置和狀態，無需來回切換頁面而增加操作成本。
界面圖標表現方式同DataV，只使用了單色線性圖標，讓整體界面表現得更簡潔、輕量化，不贅述。畫布外區域使用了點平鋪的背景與畫布做出層次區分。
上篇簡述可視化行業的市場分析，了解到國家政策如《“十四五”大數據產業發展規劃》大力支持可視化行業的發展，可視化行業解決企業痛點，助力企事業單位進行數字化轉型。隨著數據可視化行業的發展，可視化報表分析工具逐漸衍生出更利于輔助分析的可視化大屏工具，隨后進行桌面研究、問卷調查后，篩選出4款主流工具（DataV、Raydata、EasyV、森大屏），分別對它們的結構層、框架層和表現層進行拆解分析。
設計師在了解和體驗工具型產品時，也要對其行業有一定的思考，這樣更有利于了解業務、用戶以及產品。下篇接著講主流工具（DataV、Raydata、EasyV、森大屏）的功能體驗，淺談可視化行業未來的探索和思考。
那么，下篇再見！
藍藍設計的小編 http://www.syprn.cn