JSON（JavaScript Object Notation, JS對象簡譜）是一種輕量級的數(shù)據(jù)交換格式。它基于 ECMAScript（European Computer Manufacturers Association, 歐洲計算機協(xié)會制定的js規(guī)范）的一個子集，采用完全獨立于編程語言的文本格式來存儲和表示數(shù)據(jù)。簡潔和清晰的層次結(jié)構(gòu)使得 JSON 成為理想的數(shù)據(jù)交換語言。 易于人閱讀和編寫，同時也易于機器解析和生成，并有效地提升網(wǎng)絡(luò)傳輸效率。
JSON源自于JavaScript，是一種輕量級（Light-Meight)、基于文本的(Text-Based)、可讀的(Human-Readable)格式。
在現(xiàn)在的開發(fā)中，能夠進行數(shù)據(jù)交換格式的，包括兩個JSON XML。
JSON是存儲和交換文本信息的語法，類似 XML，JSON比 XML更小、更快，更易解析。
那么，簡而言之，對JSON的說明總結(jié)如下：
- JSON是獨立于任何編程語言的數(shù)據(jù)格式
- 是一種用于存儲和傳輸數(shù)據(jù)的輕量級格式
- 語法是自描述的，便于人類閱讀和理解
- 數(shù)組（Array）用方括號 "[]" 表示
- 對象（0bject）用大括號 "{}" 表示
- 名稱 / 值 對(name/value）組合成數(shù)組和對象
- 名稱( name ）置于雙引號中，值（value）有字符串、數(shù)值、布爾值、null、對象和數(shù)組
- 并列的數(shù)據(jù)之間用逗號 "," 分隔
- 名稱/值對包括字段名稱（在雙引號中），后面寫一個冒號，然后是值
需要注意的是：
JSON不支持注釋。向 JSON添加注釋無效
JSON文件的文件類型是
.jsonJSON文本的
MIME類型是application/json
json是以對象的形式存在的，直接獲取JSON數(shù)據(jù)可通過如下方法：
1. json對象.鍵名
2. json對象["鍵名"]
3. 數(shù)組對象[索引]
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 循環(huán)
-
/* for(var key in person){
-
//這樣的方式獲取不行。因為相當(dāng)于 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]);
-
}
-
}
輸出結(jié)果為：
先在控制臺中打印一下JSON對象，看看有什么，如圖：
顯而易見，在JavaScript中JSON對象僅有兩個方法：parse和stringify。后面會詳細介紹一下這兩個方法
序列化的概念：序列化是將對象轉(zhuǎn)化為字節(jié)序列的過程。對象序列化后可以在網(wǎng)絡(luò)上傳輸，或者保存到硬盤上。
將對象序列化成json字符串： JSON.stringify(json對象)；
反序列化：將json字符串反序列化為對象: JSON.parse(str)
API介紹：用來解析 JSON字符串，構(gòu)造由字符串描述的 JavaScript 值或?qū)ο?，傳入的字符串不符?nbsp;JSON規(guī)范會報錯
語法：
JSON.parse(str, reviver);
str：要解析的 JSON字符串reviver：可選的函數(shù)function(key,value)，該函數(shù)的第一個參數(shù)和第二個參數(shù)分別代表鍵值對的鍵和值，并可以對值進行轉(zhuǎn)換（函數(shù)返回值當(dāng)做處理后的value）
代碼示例：
-
// JSON.parse() 解析JSON字符串， 將JSON轉(zhuǎn)換為對象
-
let json = '{"name": ["js", "webpack"], "age": 22, "gridFriend": "ljj"}';
-
console.log(JSON.parse(json));
-
// {name: Array(2), age: 22, gridFriend: 'ljj'}
-
-
// 第二個參數(shù)是一個函數(shù)，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 對象或值轉(zhuǎn)換為 JSON字符串
如果指定了一個 replacer 函數(shù)，則可以選擇性地替換值，或者指定的 replacer 是數(shù)組，則可選擇性地僅包含數(shù)組指定的屬性
語法：
JSON.stringify(value, replacer, space)value：將要序列化成 一個 JSON 字符串的值
replacer：
- 如果該參數(shù)是一個函數(shù)，則在序列化過程中，被序列化的值的每個屬性都會經(jīng)過該函數(shù)的轉(zhuǎn)換和處理
- 如果該參數(shù)是一個數(shù)組，則只有包含在這個數(shù)組中的屬性名才會被序列化到最終的 JSON 字符串中
- 如果該參數(shù)為 null 或者未提供，則對象所有的屬性都會被序列化
space：指定縮進用的空白字符串，用于美化輸出
- 如果參數(shù)是個數(shù)字，它代表有多少的空格；上限為10。該值若小于1，則意味著沒有空格
- 如果該參數(shù)為字符串（當(dāng)字符串長度超過10個字母，取其前10個字母），該字符串將被作為空格
- 如果該參數(shù)沒有提供（或者為 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"]}
-
-
// 第二個參數(shù)replacer 為函數(shù)時，被序列化的值得屬性都會經(jīng)過該函數(shù)轉(zhuǎn)換處理
-
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]}
-
-
// 當(dāng)replacer參數(shù)為數(shù)組，數(shù)組的值代表將被序列化成 JSON 字符串的屬性名
-
let result1 = JSON.stringify(obj, ["name", "lesson"]);
-
// 只保留 “name” 和 “l(fā)esson” 屬性值
-
console.log(result1);
-
// {"name":"jsx","lesson":["html","css","js"]}
-
-
// 第三個參數(shù)spcae,用來控制結(jié)果字符串里面的間距
-
let result2 = JSON.stringify(obj, null, 4);
-
console.log(result2);
-
/*{
-
"name": "jsx",
-
"age": 22,
-
"lesson": [
-
"html",
-
"css",
-
"js"
-
]
-
}*/
注意：如果replacer是一個函數(shù)，則該函數(shù)會進行深處理，即如果鍵值對的值也是一個數(shù)組，則也會執(zhí)行該函數(shù)
- 轉(zhuǎn)換值如果有
toJSON()方法，該方法定義什么值將被序列化- 非數(shù)組對象的屬性不能保證以特定的順序出現(xiàn)在序列化后的字符串中
- 布爾值、數(shù)字、字符串的包裝對象在序列化過程中會自動轉(zhuǎn)換成對應(yīng)的原始值，undefined、任意的函數(shù)以及 symbol 值，在序列化過程中會被忽略（出現(xiàn)在非數(shù)組對象的屬性值中時）或者被轉(zhuǎn)換成 null（出現(xiàn)在數(shù)組中時）。函數(shù)、undefined 被單獨轉(zhuǎn)換時，會返回 undefined，如JSON.stringify(function(){}) or JSON.stringify(undefined)
- 對包含循環(huán)引用的對象（對象之間相互引用，形成無限循環(huán)）執(zhí)行此方法，會拋出錯誤
- 所有以 symbol 為屬性鍵的屬性都會被完全忽略掉，即便 replacer 參數(shù)中強制指定包含了它們
- Date 日期調(diào)用了 toJSON() 將其轉(zhuǎn)換為了 string 字符串（同Date.toISOString()），因此會被當(dāng)做字符串處理
- NaN 和 Infinity 格式的數(shù)值及 null 都會被當(dāng)做 null
- 其他類型的對象，包括 Map/Set/WeakMap/WeakSet，僅會序列化可枚舉的屬性
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司。
1.get請求一般是去取獲取數(shù)據(jù)（其實也可以提交，但常見的是獲取數(shù)據(jù)）；
post請求一般是去提交數(shù)據(jù)。
2.get因為參數(shù)會放在url中，所以隱私性，安全性較差，請求的數(shù)據(jù)長度是有限制的，
不同的瀏覽器和服務(wù)器不同，一般限制在 2~8K 之間，更加常見的是 1k 以內(nèi)；
post請求是沒有的長度限制，請求數(shù)據(jù)是放在body中；
3.get請求刷新服務(wù)器或者回退沒有影響，post請求回退時會重新提交數(shù)據(jù)請求。
4.get請求可以被緩存，post請求不會被緩存。
5.get請求會被保存在瀏覽器歷史記錄當(dāng)中，post不會。get請求可以被收藏為書簽，因為參數(shù)就是url中，但post不能。它的參數(shù)不在url中。
6.get請求只能進行url編碼（appliacation-x-www-form-urlencoded）,post請求支持多種（multipart/form-data等）。
深入理解
1…GET 和 POST都是http請求方式， 底層都是 TCP/IP協(xié)議；通常GET 產(chǎn)生一個 TCP 數(shù)據(jù)包；POST 產(chǎn)生兩個 TCP 數(shù)據(jù)包（但firefox是發(fā)送一個數(shù)據(jù)包），
2.對于 GET 方式的請求，瀏覽器會把 http header 和 data 一并發(fā)送出去，服務(wù)器響應(yīng) 200
（返回數(shù)據(jù)）表示成功；
而對于 POST，瀏覽器先發(fā)送 header，服務(wù)器響應(yīng) 100， 瀏覽器再繼續(xù)發(fā)送 data，服
務(wù)器響應(yīng) 200 （返回數(shù)據(jù)）。
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司。
rpx是響應(yīng)式px
rpx是一種根據(jù)屏幕寬度自適應(yīng)的動態(tài)單位。以750寬的屏幕為基準，750rpx正好是屏幕的寬度。屏幕變寬，rpx實際顯示效果會等比放大，但在App端和h5端，屏幕寬度達到960px時，默認將按照375px的屏幕寬度進行計算。在開發(fā)移動端項目時選擇rpx作為尺寸單位。
uni-app在App端，H5端和小程序都支持rpx，并且可以配置不同屏幕寬度的計算方式。
頁面元素在uni-app的寬度計算公式如下：
750 * 元素在設(shè)計稿中的寬度 / 設(shè)計稿基準寬度
舉例說明：
但是要注意的是
拓展：在設(shè)置文件mainfest.json里開啟px轉(zhuǎn)rpx（默認關(guān)閉），所有的px可一鍵轉(zhuǎn)換為rpx
“transformPx”:false
rpx直接支持動態(tài)綁定
<view class="test" :style="{width:winWidth + 'rpx;'}"></view>
vue項目中，前端與后臺進行數(shù)據(jù)請求或者提交的時候，如果后臺沒有設(shè)置跨域，前端本地調(diào)試代碼的時候就會報“No 'Access-Control-Allow-Origin' header is present on the requested resource.” 這種跨域錯誤。
要想本地正常的調(diào)試，解決的辦法有三個：
一、后臺更改header
header('Access-Control-Allow-Origin:*');//允許所有來源訪問
header('Access-Control-Allow-Method:POST,GET');//允許訪問的方式
這樣就可以跨域請求數(shù)據(jù)了
二、使用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, //項目啟動時是否自動打開瀏覽器，我這里設(shè)置為false,不打開，true表示打開
proxy: {
'/api': {
target: process.env.VUE_APP_HTTP_URL,
changeOrigin: true, //是否跨域
pathRewrite: { //重寫路徑
'^/api': '/' // 或 者 'http://localhost:8080/api'
}
// 既然我們設(shè)置了代理，則所有請求url都已寫成/api/xxx/xxx，那請求如何知道我們到底請求的是哪個服務(wù)器的數(shù)據(jù)呢
// 因此這里的意義在于， 以 /api開頭的url請求，代理都會知道實際上應(yīng)該請求那里，
// ‘我是服務(wù)器/api’，后面的/api根據(jù)實際請求地址決定，即我的請求url：/api/test/test，被代理后請求的則是
// https://我是服務(wù)器/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' 對應(yīng)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相關(guān)配置
css: {
// 是否使用css分離插件 ExtractTextPlugin
extract: true,
// 開啟 CSS source maps?
sourceMap: false,
// css預(yù)設(shè)器配置項
loaderOptions: {}
// 啟用 CSS modules for all css / pre-processor files.
// modules: false
},
// 運行配置
devServer: {
port: '8222', //代理端口
open: false, //項目啟動時是否自動打開瀏覽器，我這里設(shè)置為false,不打開，true表示打開
proxy: {
'/api': {
target: process.env.VUE_APP_HTTP_URL,
changeOrigin: true, //是否跨域
pathRewrite: { //重寫路徑
'^/api': '/' // 或 者 'http://localhost:8080/api'
}
// 既然我們設(shè)置了代理，則所有請求url都已寫成/api/xxx/xxx，那請求如何知道我們到底請求的是哪個服務(wù)器的數(shù)據(jù)呢
// 因此這里的意義在于， 以 /api開頭的url請求，代理都會知道實際上應(yīng)該請求那里，
// ‘我是服務(wù)器/api’，后面的/api根據(jù)實際請求地址決定，即我的請求url：/api/test/test，被代理后請求的則是
// https://我是服務(wù)器/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'));
// 判斷不同環(huán)境 做相應(yīng)處理
if(process.env.NODE_ENV === 'production') {
// 測試生產(chǎn)環(huán)境, 不壓縮js代碼
if (process.env.VUE_APP_TITLE === 'alpha') {
config.optimization.minimize(false)
}
}
//set第一個參數(shù)：設(shè)置的別名，第二個參數(shù)：設(shè)置的路徑
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 = '公募綜合業(yè)務(wù)平臺'
return args
})
}
}
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司。
我使用命令 npm run dev 啟動項目 報了下面的錯。
'webpack-dev-server' 不是內(nèi)部或外部命令，也不是可運行的程序
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
'webpack-dev-server' 不是內(nèi)部或外部命令，也不是可運行的程序
或批處理文件。
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
什么環(huán)境都是好的，剛使用npm run dev 啟動了一個前端項目都是好的，但是現(xiàn)在這個項目就不行了。
刪除項目的node_modules文件夾（當(dāng)前運行的項目中沒有node_modules 文件夾的直接運行第二步）
在項目目錄里運行 npm install 命令
在項目目錄里運行npm run build 命令
在項目目錄里運行npm run dev 命令
這樣我就可以成功運行項目了。
眾所周知，「用戶體驗五要素」出自Jesse James Garrett 的《用戶體驗要素》一書：戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、表現(xiàn)層。
產(chǎn)品設(shè)計者和開發(fā)者的角度可以對應(yīng)理解為：為什么做、做到什么程度、這些東西如何組成、規(guī)劃用戶操作行為、如何呈現(xiàn)這些東西。
「Live Activities設(shè)計規(guī)范」由蘋果出品，原文為英文，上一篇已翻譯https://www.yuque.com/viola-ddvdh/yb7quv/uwdod71707e4nez8。上篇也提到了個人對其內(nèi)容的敘述方式存在一點意見。為了更好的記住&理解「Live Activities設(shè)計規(guī)范」，使用比較熟悉的「用戶體驗五要素」對內(nèi)容進行整理。
原文提供的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. 內(nèi)容是頻繁更新的、有進度/狀態(tài)顯示的、用戶關(guān)心的。
2. 內(nèi)容的信息量是一眼就能看完的程度。
但上述仍是表象，并非實質(zhì)，接下來思考這幾個問題：
1. 為什么顯示的是進度/狀態(tài)頻繁更新的內(nèi)容？
2. 為什么要強調(diào)用戶關(guān)心的？
3. 為什么信息量是一眼就能看完的程度？
沒有Live Activity時，頻繁更新主要靠push推送。但push容易被其他APP的push覆蓋，且隨著各種APP的頻繁使用，用戶獲取關(guān)鍵信息的效率和通過push打開APP的次數(shù)反而在下降。
進度/狀態(tài)頻繁更新的內(nèi)容，說明每個狀態(tài)存在的時間短，如果被覆蓋/忽略，同一狀態(tài)就不再復(fù)現(xiàn)，用戶所關(guān)心的，或APP所希望用戶關(guān)心的，就看不到了。比如：什么時候取外賣、待付款、上傳成功等等。
當(dāng)下我們所處的時代是信息泛濫的時代，需要對信息作精簡，但用戶的操作是可以多條線進行的，比如比如邊看劇邊吃飯、上班摸魚/等外賣、比如聽音樂的時候?qū)懽鳌?
信息內(nèi)容和量是官網(wǎng)一直在強調(diào)的，需要精簡，只展示用戶需要的，基本達到一眼看完的程度，目的就是知道變化的是什么，當(dāng)前狀態(tài)是什么。
分析了這么多，大膽推測一下Live Activity的設(shè)計初衷是：快&準確&輕。而終極目的是打動用戶，形成好體驗，進而推動口碑和銷售；為各APP提供新的通知形式，互惠互利。當(dāng)然Live Activity在一定程度上也彌補了硬件上的缺憾。
關(guān)于這個層次相當(dāng)于規(guī)定功能范圍&信息邊界限制，就是什么要，什么不能要。這部分的信息官網(wǎng)給出許多，在此將其分類梳理如下，為避免大家不好查找官網(wǎng)/譯文對應(yīng)出處，在句未已標(biāo)注。
1. 僅iPhone支持，iPadOS、macOS、tvOS或watchOS不支持。（源自：平臺注意事項）
2. 非iPhone14的僅針對iOS16有鎖屏Live Activity展示。（源自：什么是Live Activity-鎖屏）
3. 支持用戶手動清除鎖屏狀態(tài)下的Live Activity。（源自：實際操作）
4. 支持用戶直接關(guān)閉對應(yīng)APP的Live Activity。（源自：最佳實踐方式第3/c條）
5. 支持Live Activity自動開始&結(jié)束。（源自：最佳實踐方式第6/f條）
6. 限制跟蹤活動/狀態(tài)時長不超過8小時。（源自：最佳實踐方式第1/a條）
7. 限制活動/進程結(jié)束后展示時長不超過4小時。（源自：最佳實踐方式第8/h條）
8. 支持更改背景顏色&不透明度。（源自：設(shè)計有用的Live Activity第5/e條）
9. 限制內(nèi)容布局。（源自：設(shè)計有用的Live Activity第5/e條）
10. 限制不同設(shè)備的展示尺寸。（源自：規(guī)范）
1. 避免在Live Activity中顯示敏感信息。（源自：最佳實踐方式第4/d條）
2. 避免在Live Activity中顯示廣告和促銷活動。（源自：最佳實踐方式第5/e條）
3. 只提供正在進行的任務(wù)/事件的關(guān)鍵摘要。（源自：最佳實踐方式第2/b條）
4. 在任務(wù)/活動結(jié)束前，給用戶提供關(guān)閉Live Activity按鈕。（源自：最佳實踐方式第6/f條）
5. 點擊Live Activity直接定位到對應(yīng)頁面，無需用戶二次導(dǎo)航。（源自：最佳實踐方式第7/g條）
6. 考慮在活動結(jié)束后，鎖屏上在合理時段后自動刪除Live Activity。（源自：最佳實踐方式第8/g條）
（個人猜測）由于是提供一個展示區(qū)域，且展示區(qū)域有限，所以對于層級架構(gòu)，一級展示什么，二級展示什么，各階段展示什么，這些都沒有做明確規(guī)定&建議。各家APP可以根據(jù)自身實際情況進行設(shè)計。
通過Live Activity的展示形式，可以總結(jié)為2點：吸引、查看（摘要&詳情）。
1. 一般是在原深感攝像頭兩側(cè)展示（電話會直接展示擴展型），分為緊湊型和最小化。
2. 緊湊型在僅有一個活動/事件的時候展示，雖被原深感攝像頭分割兩端，但僅作為一條信息展示，為了視覺上的統(tǒng)一，這里的顏色不支持開發(fā)設(shè)置，使用的是系統(tǒng)默認色值。
3. 最小化在存在多個活動的時候展現(xiàn)，左側(cè)和原深感攝像頭粘連，右側(cè)獨立成島。
4. 不管是緊湊型，還是最小化，都可以通過點擊原深感攝像頭區(qū)域，進入APP內(nèi)頁，或者長按喚出擴展型。
1. 進入內(nèi)頁的查看基本就是各家顯神通了，這里主要講擴展型和鎖屏。
2. 原則上是不支持在擴展型和鎖屏做復(fù)雜操作的，基本點擊是進入APP。
3. 擴展型是用戶長按緊湊型/最小化喚起的展示區(qū)域，內(nèi)容是可以自定義的，當(dāng)然官方也給了相應(yīng)的建議，具體如下。內(nèi)容信息種類多的可以采用這種信息左中右排布，底部預(yù)留大按鈕。內(nèi)容信息少的可以采用左內(nèi)容右操作的方式。
4. 根據(jù)一致性原則，鎖屏展示的布局框架應(yīng)該與擴展型差不多，同樣可以點擊打開APP。只是在鎖屏狀態(tài)如果有多個任務(wù)同時進行，是會全部展示的，所以要注意品牌的傳遞，避免用戶混淆服務(wù)方。
對于如何呈現(xiàn)這些東西，蘋果還是寫了很多建議，確保視覺上的一致性和美觀。
1. 緊湊型狀態(tài)下，為了保證兩側(cè)信息的連貫，除了語句閱讀連貫，還需要在圖形和顏色上具有一致性，視覺上連貫。
2. 鎖屏狀態(tài)下的背景是可以自定義顏色、圖像、不透明度的，當(dāng)然文字的色值和不透明度也是可以定義的。這就涉及到兩者間的對比度對信息閱讀的影響。
3. 設(shè)計師不僅要考慮最佳狀態(tài)，還有深色&淺色模式下的，以及不同環(huán)境光、設(shè)備亮度下的顯示。還有一點很容易忽視的，就是在用戶自定義的墻紙下顯示的效果。不僅要注意信息獲取，還需要考慮美感問題。
1. 緊湊型和擴展型之間的布局要保持一致，兩者間的變化過渡效果是可以預(yù)測的。
2. 一般來說，擴展型和鎖屏狀態(tài)下的信息間標(biāo)準間距是20pt。
3. 在某些情況下，例如圖形和按鈕，您可能需要使用更緊湊的邊距，以避免擠滿邊緣或形成混亂的外觀。
1. 內(nèi)容和Live Activity邊緣之間的邊距需要保持一致，請遵循SwiftUI規(guī)則。
1內(nèi)容和Live Activity邊緣之間的邊距需要保持一致，，發(fā)現(xiàn)以圓角邊界為測距點得到的間距關(guān)系較為舒適。即：圓形/大致為圓形的圖形保持上下，3. 以及左側(cè)或者右側(cè)間距一致即可；方形/大致為方形的圖形保持圓角邊界與容器圓角邊界垂直對齊即可。同一位置的多個圖形圓角需要相對統(tǒng)一，才能確保間距的一致性。
需要適應(yīng)不同機型的尺寸。具體的尺寸規(guī)范如下。
動態(tài)島使用44個點的角半徑，其圓角形狀與原深感攝像頭相匹配。
下表中列出的所有值均以pt為單位。
ps：左側(cè)為寬度，右側(cè)為高度。
以上就是整理分析的全部。
在整理分析過程中加強了對「用戶體驗5要素」各個層劃分的理解，也對Live Activity在各個層次上的要求更加明確。
寫一期大熱的AIGC的設(shè)計師必備的生圖軟件，文章詳細講解Midjourney如何使用，增強我們工作的效率，現(xiàn)在很多大廠都已經(jīng)對AIGC開始制定詳細的工作流程，所以你還在猶豫什么，為什么還不趕緊學(xué)起來。
交流群分享AIGC輔助網(wǎng)站
Midjourney是搭載在Discord（Discord 是一個功能豐富且方便使用的通訊工具，還允許用戶創(chuàng)建自己的服務(wù)器以便和他人協(xié)作）上的，因此要想使用Midjourney需要先注冊一個Discord賬號。
打開Midjourney官網(wǎng) http://www.midjourney.com
點擊【Join the Beta】，根據(jù)提示完成Discord賬號注冊
沒有賬戶，點擊注冊。此app可以下載電腦的
注冊頁面，按需填寫
登錄剛剛注冊的郵箱，找到驗證郵件，點擊郵件里面的按鈕進行驗證
注冊完成后，登錄Discord賬號，在左側(cè)找到“Midjourney圖標(biāo)”，即Midjourney官方服務(wù)器，然后就可以看到各種小群組。新用戶只能加入新人群組【NEWCOMER ROOMS】，選擇一個加入，可以看到群組里有網(wǎng)友繪制的各種圖片。
由于新手群人數(shù)較多，自己生成的圖片很快會淹沒在網(wǎng)友生成的圖片中。為避免干擾，可以在Discord中創(chuàng)建自己的服務(wù)器，安靜的創(chuàng)作。
首先在左側(cè)菜單欄中點擊加號圖表，根據(jù)流程依次選擇，輸入服務(wù)器名稱，完成服務(wù)器的創(chuàng)建。
輸入自己的服務(wù)器名稱
然后，返回Midjourney 的服務(wù)器，進入房間，點擊機器人的頭像就可以選擇添加至剛創(chuàng)建的服務(wù)器中
然后進入自己創(chuàng)建的服務(wù)器中，在下方輸入框中輸入一些指令就可以使用Midjourney創(chuàng)作圖片了。
新注冊的用戶有25次免費生成圖像的機會，如果經(jīng)常使用建議訂閱會員 按年費訂閱為8折，訂閱會員需要支持外幣支付的信用卡，有外幣信用卡的可以自行訂閱會員，沒有的可以去某寶或某魚代訂閱會員或租共享賬號 相關(guān)命令：查看剩余會員資源“/info”，切換快速模式“/fast”，切換放松模式“relax”
訂閱官網(wǎng)： https://www.yuque.com/r/goto?url=https%3A%2F%2Fwww.midjourney.com%2Faccount%2F
在對話框中，輸入/imagine 指令后，輸入框會變成以下樣式，即可輸入一些圖像描述詞匯（prompt），大約一分鐘的時間Midjourney Bot 會根據(jù)prompt生成四張圖片。 一個基本的Prompt可以是簡單的一個詞、短語或表情符號。 更高級的提示可以包括一個或多個圖像URL，多個文本短語，以及一個或多個參數(shù)。
圖片URL會影響最終結(jié)果圖像的風(fēng)格和內(nèi)容，地址必須以 .png、.gif 或 .jpg 等擴展名結(jié)尾
也可以在網(wǎng)站上扒圖片地址
可以復(fù)制多個圖片（建議輸入同類型的圖片） 在圖片地址后直接輸入關(guān)鍵詞或參數(shù)即可
輸入?yún)?shù)時，記得加空格。ps：--no+空格+你需要的提詞
改變生成圖形的長寬比，默認為1:1，支持的長寬比如下圖所示。
用于添加不希望圖片中出現(xiàn)的內(nèi)容。例如，--no plants，會嘗試從圖像中去除植物。
圖像渲染時間。默認值是1，數(shù)值越高，消耗的時間越多，圖像質(zhì)量越好，反之亦然。例如，--q 2 差不多會消耗兩倍的時間額度。更高的 --quality 設(shè)置并不總是更好，有時較低的 --quality 設(shè)置可以產(chǎn)生更好的結(jié)果——這取決于您嘗試創(chuàng)建的圖像。較低的 設(shè)置可能最適合生成抽象的圖像。需要許多細節(jié)可以設(shè)置更高的值。
這可以使得生成的圖像之間保持更穩(wěn)定或可重復(fù)性，可選任何正整數(shù)。例如，--seed 100。
用于選擇使用的模型版本，默認為V4，可以選擇 <1 2, or 3>。因為V4版本生成的圖像比較寫實，因此有時可能需要選擇之前的版本。--video用于保存生成的初始圖像的進度視頻。
詳細的參數(shù)情況請前往官方文檔查看： https://docs.midjourney.com/docs/parameter-list
輸入prompts后，在生成的初始圖像網(wǎng)格下方會出現(xiàn)兩行按鈕，其中： U 按鈕用于放大圖像，生成所選圖像的更大版本并添加更多細節(jié)。 V 按鈕用于創(chuàng)建變體，會生成與所選圖像的整體風(fēng)格和構(gòu)圖相似的新圖像（4張在1圖）。
（四張圖片順時針排序：V1、V2、V3、V4；U1、U2、U3、U4）
MJ version 1,MJ version 2,
MJ version 3：偏抽象
MJ version 4：風(fēng)格多樣
MJ version 5：真實圖片
Niji mode：二次元
模型測試算法： MJ test , MJ test photo
模型只能使用一個，點擊切換模型，每個模型側(cè)重點不同
Half quality：圖片質(zhì)量低 (相當(dāng)于--q 0.5)
Base quality：圖片質(zhì)量中等 (相當(dāng)于--q 1 )
Base quality：圖片質(zhì)量高 (相當(dāng)于--q 2 )
--stylize或-s 參數(shù)影響了這種訓(xùn)練的強度。低風(fēng)格化值 產(chǎn)生的圖像與提示密切相關(guān)，但藝術(shù)性較差。高風(fēng)格化值產(chǎn)生的圖像非常有藝術(shù)性，但與提示的聯(lián)系較少。
Style Low = --s 50
Style Med = --s 100
Style High = --s 250
Style Very High = --s 750
--stylize的默認值為 100，并且在使用 默認【V4模型】時接受 0-1000的整數(shù)值。
public mode：公共模式，出的圖會在官網(wǎng)社區(qū)顯示
Stealth mode:隱私模式，出圖僅自己可見（需要會員）
生成圖片，點擊(v)的時候可更改提示詞
fast mode：快速模式，該速度下生圖沒有限制，會根據(jù)你生圖占用的 CPU排隊，生圖量越大，排隊時間越長
relax mode :輕松模式，會優(yōu)先生成你的圖（需要會員）
獲取全部關(guān)鍵詞，添加群主微信獲取
用相同的“seed種子”產(chǎn)生相同的結(jié)果，然后可以微調(diào)畫面細節(jié) 選擇郵件表情發(fā)給機器人，這樣就會收到一個機器人的私信。發(fā)“E”可以快捷搜索出圖標(biāo)
發(fā)送后，底部會出小郵件圖標(biāo)，點擊等待機器人回復(fù)
收到消息，復(fù)制種子
在輸入新的關(guān)鍵詞后，結(jié)尾輸入-- seed指令，復(fù)制上你的種子
3、復(fù)制圖片地址，利用墊圖來保持創(chuàng)作的關(guān)聯(lián)性
本文描述如何使用ChatGPT成為我們在工作與學(xué)習(xí)中的超強助手 ChatGPT是一種大型語言模型，它可以通過處理自然語言文本來產(chǎn)生回復(fù)，可進行自然、流暢的對話。ChatGPT可以在多種應(yīng)用場景中使用，例如智能客服、智能助手、問答系統(tǒng)、聊天機器人、翻譯等等。
你可能對ChatGPT帶來的變革毫不關(guān)心，認為只是一個聊天的工具，但是ChatGPT的出現(xiàn)確實見證了技術(shù)的革新，對于新事物，尤其是現(xiàn)在處在一個AI科技爆發(fā)時代，越早接觸新技術(shù)，越早擁有核心競爭力。堅持看完文章相信對你會有很大幫助。
以調(diào)研專員身份進行對話，使他可以用更專業(yè)的詞匯回答你的問題。
可以針對某個產(chǎn)品，生成對應(yīng)用戶年齡段的用戶畫像，輔助產(chǎn)品調(diào)研工作
指令：請寫 [N 份]，關(guān)于 [某個產(chǎn)品 /NN～NN歲] 的用戶畫像
針對某個產(chǎn)品，去分析產(chǎn)品高頻、低頻功能?？梢陨闪斜?，統(tǒng)計使用頻率。
指令：請查閱 [某產(chǎn)品] 用戶 [經(jīng)常使用或最少使用] 的功能，要求數(shù)據(jù)真實可查詢
生成某產(chǎn)品的調(diào)研報告，可規(guī)定字數(shù)，如果寫到一半停下，發(fā)送「繼續(xù)」的指令就可以繼續(xù)發(fā)送啦～
指令：請總結(jié)一份 [某產(chǎn)品] 用戶使用 [某功能] 的調(diào)研報告
以競品研究員的身份進行對話。如果有需求可以附加競品研究員所處的行業(yè)類別。
可以選擇自己關(guān)注的競品產(chǎn)品，生成報告，可以規(guī)定競品報告的側(cè)重點。
指令：生成一份有關(guān) [選擇你的競品] 的競品分析報告，詳細分析其雙方的 [你的需求]
當(dāng)你在對產(chǎn)品某個領(lǐng)域不太清楚時，你可以隨時收起相關(guān)的材料，比如你對金融行業(yè)的用戶體驗的行情感興趣，你想深度了解的時候，用你的資料整理助手幫你整理資料。
指令：給我 [N 篇] [領(lǐng)域] 的文章
接著你可以讓助手對上述文章進行總結(jié)
指令：用列點的方式總結(jié)上述文章中的 [數(shù)字] 重點
指令：用列點的方式總結(jié)出 [數(shù)字] 個 領(lǐng)域 知識重點
在寫報告時，經(jīng)常會對某個領(lǐng)域或知識點不清晰，無從下手的情況。遇到這種情況，可以直接使用下面的指令獲取專業(yè)的研究報告，幫你了解最新的研究以及專家觀點。
指令：寫出一篇有關(guān) [領(lǐng)域] 的 [數(shù)字] 研究報告，要求引用真實數(shù)據(jù)與專家觀點。
針對某個主題可以提出反對觀點，改變角度，擴大寫報告的思維。
指令：針對一下論述 [觀點] 提出反駁的觀點，每個論點都要有論證
寫報告時，可以針對某個部分，用AI幫你去提煉你所需的內(nèi)容。
指令：你是金融互聯(lián)網(wǎng)專家，請總結(jié)以下內(nèi)容，并針對以下內(nèi)容提出未來能進一步研究的方向 [附上內(nèi)容]
可以輔助你寫出一份ppt大綱，為你提供思路。雖然無法寫出細節(jié)，但是可以根據(jù)標(biāo)題再去發(fā)指令，生成詳情內(nèi)容。
指令：請寫一份有關(guān)于 [領(lǐng)域] 的PPT，頁數(shù)在 [數(shù)量] 頁以內(nèi)
根據(jù)大綱標(biāo)題，細化內(nèi)容
指令：輸入標(biāo)題名稱，[字數(shù)] 以內(nèi)
先去培養(yǎng)角色，讓他用簡潔的英文單詞，為你提供AI繪畫的關(guān)鍵詞。
指令： 現(xiàn)在起，當(dāng)我想要你發(fā)送圖片、照片的時候，用3/8Markdown寫，不要有反射線，不要用代碼塊。使用 Unsplash API(https://source.unsplash.com/1280x720/?)。如果聽懂了請回復(fù)明白，以后需要這樣
可以設(shè)定面試場景，生成一個對話場景，為面試做準備，提前準備面試中可能被問到的問題。
指令：請以 [崗位] 的身份，情景再現(xiàn)一場面試工作
將AI的身份塑造成面試官，模擬真實的面試場景，提高自己的面試能力
指令：請你以 [崗位] 面試官的身份與我對話，進行一場面試
針對職業(yè)方向如何發(fā)展，可以讓ChatGPT根據(jù)大數(shù)據(jù)為你推薦現(xiàn)在的職業(yè)發(fā)展的熱門方向，為未來開展明燈。
指令：[行業(yè)] 未來職業(yè)方向，哪個比較熱門
針對職業(yè)方向，可以繼續(xù)探索自己感興趣的職業(yè)規(guī)劃
指令：請?zhí)峁?strong> [崗位] 未來的職業(yè)規(guī)劃
輸入網(wǎng)頁，可幫您總結(jié)當(dāng)前網(wǎng)頁的信息，提煉關(guān)鍵信息，提高閱讀效率
指令：[網(wǎng)站] 請總結(jié)這個網(wǎng)站的信息
指令：詳細的說明 [想了解的知識]
指令：[科目] 學(xué)習(xí)看哪些網(wǎng)站
指令：我學(xué)習(xí)使用 [工具]，我應(yīng)該看哪些網(wǎng)站的教程
3、英語學(xué)習(xí)助手
1）、英語對話
指令：Can we have a conversation about [話題] ?
指令：Please correct my grammar and spelling mistakes in the text above:[附上英文文字]
安裝「Voice Control for ChatGPT」谷歌插件，可播報Chatgpt的文字，練習(xí)聽力與口語。在谷歌應(yīng)用商店中搜索下載即可。
這些就是我在用chatGPT中對設(shè)計師來說比較有價值的提問方向，希望對大家有啟發(fā)。
一、前言 —— 1.1 閱讀之前、1.2 調(diào)研背景、1.3 分享目的、1.4 術(shù)語說明
二、市場分析 —— 2.1 行業(yè)背景PEST、2.2 市場現(xiàn)狀
三、主流工具 —— 3.1 調(diào)查篩選、3.2 工具介紹、3.3 分析模型、3.4 結(jié)構(gòu)層、3.5 框架&表現(xiàn)層
四、功能體驗 —— 4.1 創(chuàng)建大屏、4.2 分享導(dǎo)出、4.3 更多玩法
五、探索思考 —— 5.1 未來迭代、5.2 設(shè)計價值
閱讀提醒
1、文章上篇約10300字，閱讀時長約20分鐘。全文主要分享本人對當(dāng)下主流可視化大屏搭建工具的調(diào)研分析，淺談對可視化行業(yè)的探索思考。由于篇幅有限，閱讀體驗更佳，故分為上下兩篇，上篇簡述可視化行業(yè)的市場分析，拆解分析主流工具（DataV、Raydata、EasyV、森大屏）的結(jié)構(gòu)層、框架層和表現(xiàn)層。下篇接著講主流工具（DataV、Raydata、EasyV、森大屏）的功能體驗，淺談可視化行業(yè)未來的探索和思考。
2、文中的拆解分析部分，多款工具可能存在較多重復(fù)觀點，由于篇幅有限，故不再贅述。
適合讀者
B端UI設(shè)計師、產(chǎn)品經(jīng)理，可視化行業(yè)相關(guān)從業(yè)者及愛好者。
調(diào)研時間
2022年9~10月
調(diào)研方式
桌面研究、問卷調(diào)查
首先，本次分享僅作為個人學(xué)習(xí)交流，文章觀點僅代表個人。目前比較少有可視化工具的產(chǎn)品分析，本次通過調(diào)研，希望了解更多可視化大屏工具的背景、知識，也希望能通過文章的形式，達成兩個分享目的：一、提升自身的復(fù)盤總結(jié)能力，鼓勵將知識沉淀后輸出分享；二、借此機會與更多行業(yè)相關(guān)者分享交流學(xué)習(xí)。
數(shù)據(jù)可視化
關(guān)于數(shù)據(jù)視覺表現(xiàn)形式的科學(xué)技術(shù)研究。
數(shù)據(jù)可視化平合
它是大數(shù)據(jù)內(nèi)在價值的最終呈現(xiàn)手殷，它利用各類圖表、趨勢圖、視覺效果對數(shù)據(jù)進行分析并展現(xiàn)，幫助用戶發(fā)現(xiàn)內(nèi)在規(guī)律、發(fā)掘深度規(guī)律、指導(dǎo)經(jīng)營決策。
大屏搭建工具
利用簡單拖拉拽、低代碼開發(fā)等方式，幫助非專業(yè)工程師快速實現(xiàn)炫酷大屏的數(shù)據(jù)可視化大屏效果的互聯(lián)網(wǎng)工具類產(chǎn)品。業(yè)務(wù)場景主要有行業(yè)可視化、智能終端、模擬演示、數(shù)據(jù)統(tǒng)計分析。
在2011年左右，國內(nèi)帆軟公司研發(fā)簡單的可視化產(chǎn)品，起名“FineBI”，解決了用戶個性化的可視化分析的需求。隨著技術(shù)發(fā)展和行業(yè)趨勢發(fā)展，在滿足智能分析報表的基礎(chǔ)上，又迎來了更高的可視化大屏的挑戰(zhàn)，國內(nèi)如光啟元Raydata、阿里DataV等可視化大屏工具開始出現(xiàn)，各大廠商如京東、百度、網(wǎng)易有數(shù)等紛紛踏上可視化賽道，隨著近年的政策支持企業(yè)數(shù)字化轉(zhuǎn)型的浪潮下，可視化行業(yè)得以快速發(fā)展成熟，為企事業(yè)單位解決了一個又一個可視化分析難題……
本次調(diào)研經(jīng)過桌面研究，分析出近年來可視化行業(yè)背景和市場現(xiàn)狀。
從政策、經(jīng)濟、社會、技術(shù)這四個方面，分析數(shù)據(jù)可視化行業(yè)的背景，得出以下結(jié)論：
一、在政策方面，數(shù)據(jù)可視化行業(yè)受到政策扶持；
二、在經(jīng)濟方面，IT產(chǎn)業(yè)體系擴大且成熟；
三、在社會方面，數(shù)據(jù)可視化解決企業(yè)痛點，機會點在政企和醫(yī)療行業(yè)；
四、在技術(shù)方面，企業(yè)通過數(shù)據(jù)可視化進行精細化管理成為現(xiàn)實。
* PEST分析法 是對宏觀環(huán)境進行分析，以便找到機會，認清威脅與挑戰(zhàn)。所謂PEST，P是政治(Polotics)，E是經(jīng)濟(Economy）, S是社會(Society），T是技術(shù)(Technology)。這種方法就是將這4個元素分別寫在4個格子中，并羅列出這4個元素相關(guān)聯(lián)的與產(chǎn)品有關(guān)的環(huán)境因素，最后投票選出3~5個點子作為PEST分析的結(jié)果。
P政策
中國相繼出臺多項政策（如《“十四五”大數(shù)據(jù)產(chǎn)業(yè)發(fā)展規(guī)劃》）重點扶持數(shù)據(jù)采集、數(shù)據(jù)安全、數(shù)據(jù)處理、數(shù)據(jù)存儲及大數(shù)據(jù)在產(chǎn)業(yè)端的應(yīng)用等方面的快速提升，進一步利好數(shù)據(jù)可視化平臺等相關(guān)細分產(chǎn)業(yè)的快速發(fā)展。
制定5個發(fā)展目標(biāo)、6大主要任務(wù)，明確大數(shù)據(jù)產(chǎn)業(yè)將步入“集成創(chuàng)新、快速發(fā)展、深度應(yīng)用、結(jié)構(gòu)優(yōu)化"的高質(zhì)量發(fā)展新階段設(shè)置數(shù)據(jù)治理能力提升、重點標(biāo)準研制及應(yīng)用推廣工業(yè)大數(shù)據(jù)價值提升、行業(yè)大數(shù)據(jù)開發(fā)利用、企業(yè)主體發(fā)展能級躍升、數(shù)據(jù)安全鑄盾六個專項行動。（參考來源：頭豹研究院）
E經(jīng)濟
2021全年國內(nèi)生產(chǎn)總值突破110萬億，GDP達114萬億元，按不變價格計算，比上年增長8.1%，兩年平均增長5.1%。
我國IT產(chǎn)業(yè)在經(jīng)歷了三十多年的發(fā)展后，已經(jīng)基本形成了產(chǎn)業(yè)規(guī)模龐大、專業(yè)門類齊全的IT產(chǎn)業(yè)體系，2020年我國IT支出達2.9萬億人民幣。
在應(yīng)用軟件領(lǐng)域百花齊放，2021年上半年我國軟件業(yè)完成軟件業(yè)務(wù)收入44198億元，同比增長23.2%；全行業(yè)實現(xiàn)利潤總額4999億元，同比增長13.6%。另外，對于云計算、大數(shù)據(jù)、物聯(lián)網(wǎng)、人工智能等新一代技術(shù)，我國也由單點向融合互動不斷演進。（參考來源：頭豹研究院）
S社會
數(shù)據(jù)可視化可有效解決企事業(yè)單位在傳統(tǒng)數(shù)據(jù)分析的痛點，降低了企業(yè)數(shù)據(jù)分析成本，助力企業(yè)在技術(shù)層、業(yè)務(wù)層、管理層及決策層等層面的決策能力。
受疫情影響，政務(wù)及醫(yī)療領(lǐng)域?qū)残l(wèi)生等等公共領(lǐng)域掌控力度加強，因此，中國數(shù)據(jù)可視化未來市場增長點將主要集中在政務(wù)及醫(yī)療衛(wèi)生領(lǐng)域。（參考來源：頭豹研究院）
T技術(shù)
伴隨著互聯(lián)網(wǎng)、物聯(lián)網(wǎng)快速發(fā)展，中國數(shù)據(jù)量持續(xù)增加，通過對數(shù)據(jù)的可視化處理及分析，企業(yè)端對日常精細化管理成為現(xiàn)實。
過去5年間，中國數(shù)據(jù)產(chǎn)生量快速增加ie中2017年的6ZB快速增加至2021年的16ZB。預(yù)計未來5年中國數(shù)據(jù)產(chǎn)生量將繼續(xù)增加，有望于2026年達到62ZB。（參考來源：頭豹研究院）
分為市場階段和市場規(guī)模，說明當(dāng)前數(shù)據(jù)可視化行業(yè)的市場現(xiàn)狀。結(jié)論如下：
一、國內(nèi)數(shù)據(jù)可視化平臺市場尚處于發(fā)展期，潛在市場容量非常巨大，前景廣闊；
二、預(yù)計未來5年國內(nèi)數(shù)據(jù)可視化平臺市場規(guī)?？焖僭黾樱瑥?fù)合增長率達32.5%。
市場階段
國外可視化展現(xiàn)平臺行業(yè)起步較早，市場相對成熟，消費者認可較高，而國內(nèi)可視化展現(xiàn)平臺行業(yè)市場還處于發(fā)展期，雖然2012年呈現(xiàn)出小爆發(fā)式增長，但市場尚不成熟，還有待于培育，然而國內(nèi)人口基數(shù)大，隨著國內(nèi)經(jīng)濟的發(fā)展，人民生活水平的提高，收入的增長，對精神生活方面的消費也不斷增加，國內(nèi)潛在市場容量非常巨大，前景廣闊，因此，可視化展現(xiàn)平臺行業(yè)的發(fā)展將逐漸向本土化轉(zhuǎn)移。
當(dāng)前，中國數(shù)據(jù)可視化平臺行業(yè)尚處于發(fā)展早期，36.8%投融資事件主要發(fā)生在早期A輪階段，行業(yè)尚具有較大發(fā)展?jié)摿?。從地域分布情況來看，中國數(shù)據(jù)可視化企業(yè)主要分布于廣東省、北京市、上海市、江蘇省及浙江省等區(qū)域，約占總體的93.5%。當(dāng)前，中國數(shù)據(jù)可視化行業(yè)投融資較為活躍。其中約36.8%的企業(yè)處于A輪融資階段，2家企業(yè)已于新三板掛板，其中，觀遠數(shù)據(jù)于2022年2月完成C輪融資，共計2.8億元。（參考來源：頭豹研究院）
市場規(guī)模
過去5年間，中國數(shù)據(jù)可視化平合市場快速增加，由2017年的13.2億元快速增加至2021年的43.8億元，復(fù)合增長率達27.1%。預(yù)計未來五年中國數(shù)據(jù)可視化平臺市場年復(fù)合增長率有望達到32.5%。（參考來源：頭豹研究院）
根據(jù)上面的行業(yè)背景和市場現(xiàn)狀，從政策扶持、經(jīng)濟增長、社會機會點增加、技術(shù)革新、市場階段成熟、市場規(guī)模擴大方面都是正向推動著可視化行業(yè)的快速發(fā)展，于是，市面上逐漸出現(xiàn)了很多數(shù)據(jù)可視化大屏搭建工具，目的是有效解決企事業(yè)單位在傳統(tǒng)數(shù)據(jù)分析的痛點，助力企事業(yè)單位快速進行數(shù)字化轉(zhuǎn)型，整合數(shù)據(jù)、提高數(shù)據(jù)展示效率及輔助管理決策。
經(jīng)桌面研究、問卷調(diào)查后，發(fā)現(xiàn)并整理出市面主流的數(shù)據(jù)可視化大屏搭建工具梯度說明。以工具滿意度、行業(yè)普及率、用戶量幾個維度來劃分梯度：
第一梯隊有阿里云DataV、騰訊RayData、袋鼠云易知微；
第二梯隊有騰訊Banber（現(xiàn)改名RayData Report）、山海鯨可視化、森工廠森大屏、51WORLD、華為云DLV；
第三梯隊有微兔可視化、ByteV中臺等。
*本次未歸入調(diào)研范圍內(nèi)：京東、百度、網(wǎng)易有數(shù)等廠商可視化產(chǎn)品，以及一些開發(fā)大佬的開源大屏工具
*使用騰訊問卷自發(fā)進行問卷調(diào)查，主要渠道為微信群，有效樣本量較少，數(shù)據(jù)僅供參考
第一梯度的阿里云DataV、騰訊RayData、袋鼠云易知微的工具滿意度、行業(yè)普及率、用戶量綜合評分較高，還有第二梯度的森工廠森大屏對比其他競品產(chǎn)來說，產(chǎn)品形式不同，后面將以阿里云DataV、騰訊RayData、袋鼠云易知微、森工廠森大屏這4個工具產(chǎn)品來進行體驗分析。
調(diào)研版本：*阿里云DataV - 企業(yè)版試用 - V6.2； 騰訊RayData - Web版 - V2.6.0； 袋鼠云易知微EasyV - 個人版 - V5.1.0； 森工廠森大屏 - V2.10.11 。
*EasyV2022年12月上新了「節(jié)點管理」功能（類似DataV的「藍圖」功能) 會與本次調(diào)研版本有一定差異。
*由于阿里云DataV在調(diào)研后2023年UI進行較大更新，所以會與本次調(diào)研版本有一定差異，更新日志傳送門：https://developer.aliyun.com/article/1127824?spm=5176.14082271.J_5834642020.1.42c74dcf64Y3FZ#slide-12
阿里云DataV
a.產(chǎn)品簡介
使用可視化應(yīng)用的方式來分析并展示龐雜數(shù)據(jù)的阿里云產(chǎn)品。其中DataV企業(yè)版試用是適合剛接觸DataV的新用戶，輕松搭建可視化大屏，匯報、客戶參觀必備。而DataV數(shù)據(jù)可視化企業(yè)版是開箱即用實時數(shù)據(jù)大屏搭建工具。
b.產(chǎn)品特點
智能識圖；藍圖節(jié)點編輯器；三維城市編輯器；BI分析組件
c.產(chǎn)品版本
企業(yè)版（本次調(diào)研）、專業(yè)版、尊享版
騰訊光啟元RayData
a.產(chǎn)品簡介
專注3D數(shù)據(jù)可視化原型設(shè)計。RayData Web是B/S架構(gòu)開發(fā)的網(wǎng)頁端可視化系統(tǒng)搭建工具，支持在線3D可視化編輯，輕松構(gòu)建商業(yè)級數(shù)字孿生項目。
b.產(chǎn)品特點
3D模型風(fēng)格獨特；圖表工作站；模型場景工作站；提供定制服務(wù)
c.產(chǎn)品版本
個人版、Web版（原名專業(yè)版，本次調(diào)研）、Plus版（私有化部署）
袋鼠云易知微EasyV
a.產(chǎn)品簡介：
數(shù)字孿生，EasyV是低成本無門檻上手數(shù)據(jù)可視化大屏的工具，數(shù)據(jù)看板可視化，輕松設(shè)計 高效搭建。
b.產(chǎn)品特點：
素材資源豐富；資源社區(qū)氛圍好；提供定制服務(wù)
c.產(chǎn)品版本：
個人版（本次調(diào)研）、高級版、尊享版、運行平臺（私有化部署）
a.產(chǎn)品簡介：
拖拉拽搭建可視化大屏，內(nèi)置豐富模板和在線圖表開發(fā)工具
b.產(chǎn)品特點：
數(shù)字孿生工具鏈生態(tài)完善；藍圖節(jié)點編輯器；圖表工作站；提供建模服務(wù)
c.產(chǎn)品版本：
基礎(chǔ)版（本次調(diào)研）、專業(yè)版、高級版
本次調(diào)研使用【用戶體驗五要素】模型方法來分析主流工具DataV企業(yè)版試用、Raydata Web專業(yè)版、EasyV個人版、森大屏基礎(chǔ)版，主要側(cè)重在表現(xiàn)層、框架層、結(jié)構(gòu)層。
此處說明一下，例如本次調(diào)研的屬于功能型產(chǎn)品，那么功能型產(chǎn)品的結(jié)構(gòu)層側(cè)重于交互設(shè)計，通?？捎盟季S導(dǎo)圖、流程圖方式來說明情況。再往上看，功能型產(chǎn)品的框架層側(cè)重于信息設(shè)計、界面設(shè)計，大致模塊尺寸大小、位置擺放，通常可用低保真原型、交互文檔來說明情況。到了模型最頂層，不論功能型還是信息型產(chǎn)品的表現(xiàn)層都是感知設(shè)計，關(guān)注視覺如何呈現(xiàn)，通常運用形、色、字、質(zhì)、構(gòu)、動著6個維度進行整體視覺設(shè)計。
用戶體驗五要素來自Jesse James Garrett 的《用戶體驗要素》一書：戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、表現(xiàn)層。
在結(jié)構(gòu)層中，DataV企業(yè)版試用、Raydata Web專業(yè)版、EasyV個人版、森大屏基礎(chǔ)版4款產(chǎn)品略有不同（且名稱叫法不一），整理總結(jié)出共性，產(chǎn)品包括系統(tǒng)頁和編輯器，系統(tǒng)頁下包括項目列表、資源管理、用戶管理、幫助中心，編輯器下包括頂部導(dǎo)航欄、組件庫、圖層面板、畫布區(qū)、信息面板。
為了更清晰了解4款產(chǎn)品的產(chǎn)品設(shè)計側(cè)重點，接下來，對比分析它們的結(jié)構(gòu)層。
關(guān)鍵詞：強調(diào)品牌感、幫助中心、靈活切換藍圖
DataV企業(yè)版試用分為系統(tǒng)頁+編輯器。系統(tǒng)頁頂部是輪播banner圖，強調(diào)品牌感和打造產(chǎn)品差異化。
系統(tǒng)頁主要包括我的可視化、我的數(shù)據(jù)、我的資產(chǎn)、教程，其中我的可視化包括3個創(chuàng)建入口，分別是PC創(chuàng)建、移動端創(chuàng)建和識圖創(chuàng)建，滿足用戶在不同場景的使用需求。系統(tǒng)頁中教程層級放在一級菜單下容易被用戶發(fā)現(xiàn)，對小白用戶比較友好，快速觀看視頻教程。
編輯器中包含畫布編輯器和藍圖編輯器。進入編輯器后，可切換畫布編輯器與藍圖編輯器，放在同一層級，方便用戶從畫布編輯器中添加圖層到藍圖編輯器中。
畫布編輯器（PC和移動端基本一致）包括圖層、資產(chǎn)列表（資產(chǎn)包、組件庫）、工具欄、畫布、頁面設(shè)置、組件設(shè)置。藍圖編輯器包括導(dǎo)入節(jié)點、邏輯節(jié)點、工具欄、配置面板。
關(guān)鍵詞：可視化統(tǒng)計、定位專業(yè)用戶、畫布占比大
Raydata Web專業(yè)版分為系統(tǒng)頁+編輯器。系統(tǒng)頁主要包括工程列表、資源管理、數(shù)據(jù)管理、權(quán)限管理。因為產(chǎn)品定位是專業(yè)版，所以弱化了幫助手冊的入口，同時編輯器中也是基于熟悉掌握工具的用戶而設(shè)計的。類比于Raydata Web個人版，系統(tǒng)頁的更多幫助入口更為明顯，適用于新手小白使用。
系統(tǒng)中的資源管理包括3D資源和2D資源，顯示資源數(shù)量，以環(huán)圖可視化的形式表現(xiàn)，系統(tǒng)中的權(quán)限管理也同樣顯示人員數(shù)量，數(shù)據(jù)統(tǒng)計一目了然。
編輯器中的大綱、概要與其他產(chǎn)品結(jié)構(gòu)不同，大綱包括系統(tǒng)UI層（放2D）、層級（放3D）、頁面（2D&3D），概要分不同情況而定，處于UI層時顯示2D組件，處于場景層時顯示3D組件。
畫布編輯器包括頂部欄（基礎(chǔ)功能、組件庫）、概要、大綱、畫布、頁面設(shè)置，頁面設(shè)置（畫布設(shè)置、組件設(shè)置）。其中組件庫折疊在頂部欄中，增大了編輯器中畫布的占比，讓用戶更關(guān)注當(dāng)前畫布操作。
關(guān)鍵詞：素材資源、幫助中心、畫布占比大
EasyV個人版分為系統(tǒng)頁+編輯器。系統(tǒng)頁包括我的應(yīng)用、我的數(shù)據(jù)、終端交互（高級版有）、組件開發(fā)（尊享版有）、后臺管理、門戶管理（高級版有）、資源中心。
其中系統(tǒng)頁的資源中心包括應(yīng)用模板、設(shè)計素材、主題資源，有入口可跳往素材廣場，EasyV的素材資源十分豐富，該跳轉(zhuǎn)入口可以很好引導(dǎo)用戶去使用官網(wǎng)設(shè)計素材，輕松搭建大屏。幫助菜單位于常駐懸浮于系統(tǒng)頁側(cè)邊欄，其包括操作日志、幫助文檔、視頻教程、問答中心、版本日志，幫助菜單對于新手小白比較友好，操作路徑簡短，方便新手查閱幫助資料。
編輯器包括任務(wù)欄（基礎(chǔ)功能、組件、資源）、圖層、畫布、詳情設(shè)置（頁面設(shè)置、組件設(shè)置）。同Raydata Web專業(yè)版產(chǎn)品，其中組件庫折疊在任務(wù)欄中，增大了編輯器中畫布的占比，讓用戶更關(guān)注當(dāng)前畫布操作。
關(guān)鍵詞：工具鏈、模板推薦、藍圖和代碼二開
森大屏基礎(chǔ)版分為系統(tǒng)頁+編輯器。森大屏的結(jié)構(gòu)和其他產(chǎn)品不同，由于數(shù)字孿生工具鏈生態(tài)比較完善，打通其他工具鏈入口（森工廠旗下有低代碼、零代碼、森大屏、森城市、森園區(qū)、森展廳、森拓撲、森數(shù)據(jù)、森模型等），所以系統(tǒng)頁頂部導(dǎo)航菜單可快速切換工具。
系統(tǒng)頁包括了個人中心、幫助手冊、我的大屏、推薦大屏（模板），側(cè)重展示推薦大屏，引導(dǎo)用戶優(yōu)先選用模板進行大屏快速搭建，生產(chǎn)提效。
編輯器包括大綱、工具欄、畫布、畫布屬性、資源管理、菜單欄、資源中心、藍圖和代碼二開。編輯器中與DataV不同的是，藍圖、代碼與畫布位于同一層級，用戶可隨時使用藍圖來鏈接交互事件，也可進行代碼二次開發(fā)操作。
將4款產(chǎn)品的框架層和表現(xiàn)層進行拆解分析。
在框架層中，大體而言按鈕、輸入框等控件圓角較小，看起來比較方正，弧線的異形設(shè)計，容易體現(xiàn)科幻造型。在登錄頁中，頁面布局各有差異。在編輯器中的布局大體一致，畫布都位于界面中心，強調(diào)用戶最關(guān)注大屏設(shè)計的畫布區(qū)域。高頻操作的組件庫在頁面的位置各有差異。
在表現(xiàn)層中，主要通過形、色、字、質(zhì)、構(gòu)、動這6個維度來進行對比分析。DataV企業(yè)版試用、Raydata Web專業(yè)版、EasyV個人版、森大屏基礎(chǔ)版4款產(chǎn)品的整體視覺調(diào)性都是以暗色、科幻風(fēng)格為主。登錄頁都選擇了亮色風(fēng)格界面，系統(tǒng)頁和編輯器都是暗黑風(fēng)格。部分產(chǎn)品品牌字體以直線為主并加入弧線和粒子元素，科幻的界面動效主要體現(xiàn)在加載頁面。
阿里云（DataV企業(yè)版試用）- 登錄頁
DataV 的登錄頁統(tǒng)一由阿里云登錄頁進入。以中心布局（核心面板偏右），三維模型+灰色背景+線條點綴的形式進行設(shè)計，主題色是阿里的橙色。因為DataV是阿里云旗下的產(chǎn)品，共用入口，所以此處沒做額外的產(chǎn)品登錄頁以強調(diào) DataV 產(chǎn)品一致的品牌感。
Raydata Web專業(yè)版 - 登錄頁
Raydata Web 登錄頁以中心布局的形式，無其他設(shè)計元素，只保留關(guān)鍵信息，同其他競品相比略顯單調(diào)。登錄頁的淺色風(fēng)格與進入系統(tǒng)頁和編輯器的暗黑風(fēng)格，缺乏界面整體色調(diào)的一致性。界面控件主題色使用藍紫漸變色，與系統(tǒng)頁和編輯器的藍色也略有差異。（可從Raychart產(chǎn)品使用手冊發(fā)現(xiàn)，舊版布局為同EasyV）
EasyV個人版 - 登錄頁
EasyV 的登錄頁有2處觸發(fā)，常規(guī)觸發(fā)和資源中心觸發(fā)，分別以左右布局的全頁和彈窗形式進行框架設(shè)計。彈窗的形式不需額外跳轉(zhuǎn)，讓用戶在資源中心挑選素材時能更快進行登錄操作。登錄頁以左右布局的形式，插圖與登錄模塊大致各占50%，深色插圖的和淺色登錄模塊的兩個色塊形成強烈視覺對比，更能吸引用戶注意。
森工廠（森大屏基礎(chǔ)版) - 登錄頁
森大屏的登錄頁以中心布局的形式，有利于聚焦視覺，背景使用簡約抽象的形狀來點綴畫面。灰色背景+抽象圖形點綴，與淺色登錄模塊拉開視覺對比。按鈕主題色是橙色，是因為森大屏是優(yōu)锘科技森工廠旗下的產(chǎn)品，共用入口，所以此處沒做額外的產(chǎn)品登錄頁以強調(diào)森大屏產(chǎn)品一致的品牌感。
DataV企業(yè)版試用 - 系統(tǒng)頁
頂部輪播圖占整個頁面四分之一左右，強調(diào)品牌感同時打造產(chǎn)品差異化，Banner內(nèi)容為統(tǒng)一風(fēng)格的3D模型場景+無襯線字體標(biāo)題為主，一級導(dǎo)航邊緣弧線的流光動效表現(xiàn)科幻酷炫風(fēng)格。
一級導(dǎo)航欄與輪播圖的重疊關(guān)系，半透的玻璃質(zhì)感，仿佛是用戶透過一層玻璃，打開可視化世界的大門，結(jié)合暗黑風(fēng)格的界面，給用戶一種進入游戲的沉浸感、躍躍欲試的沖動?？v向與橫向結(jié)合的混合導(dǎo)航，對于后期有規(guī)劃新功能而言，拓展性較強，缺點是占用面積大、交互路徑長，適用于大屏項目數(shù)不多的情況下，若項目數(shù)量較多，可能有空間不夠的焦慮。
我的可視化中的3個創(chuàng)建入口按鈕使用了扁平加光感強、冷色調(diào)風(fēng)格插畫，引起用戶注意，快速識別創(chuàng)建功能入口。主題色使用比較鮮艷活躍的藍色，輔助色為青色，占用面積不多，起到豐富點綴畫面的作用。設(shè)計元素的四周輪廓不做圓角處理，顯得整體界面比較方正端正、硬朗嚴肅的印象。
Raydata Web專業(yè)版 - 系統(tǒng)頁
左上方展示品牌Logo，清晰寫明當(dāng)前產(chǎn)品及版本，符合用戶認知。品牌元素融入進頂部欄右側(cè)頭像及皇冠圖標(biāo)，加深品牌印象。
以側(cè)邊懸浮導(dǎo)航的形式使用戶快速定位查找功能模塊的位置，拓展性較強，以較瓷片“大包小”的結(jié)構(gòu)，聚合了較多功能模塊，如果是小分辨率屏幕的情況下，經(jīng)常要鼠標(biāo)輪滑來回滾動才可看到下方功能模塊，導(dǎo)致不夠靈活高效。側(cè)邊導(dǎo)航模塊中的圖標(biāo)統(tǒng)一為形狀較方正、偏冷的中性色、扁平微漸變風(fēng)格。敬請期待的藍色沙漏圖標(biāo)在界面中略微突兀出，缺少圖標(biāo)風(fēng)格一致性。
界面為偏冷中性純色，無背景裝飾，同登錄頁只保留關(guān)鍵信息（如大屏項目卡片），不加過多裝飾的簡約風(fēng)格調(diào)性保持一致。按鈕主題色使用比較灰的藍色，透出沉穩(wěn)柔和的調(diào)性。設(shè)計元素的四周輪廓略微加了些圓角，同DataV硬朗的感覺則稍微緩和一些。
EasyV個人版 - 系統(tǒng)頁
上方展示品牌Logo，同Raydata，不再贅述。對于創(chuàng)建大屏按鈕而言，DataV用的是插畫按鈕的形式，Raydata是用卡片按鈕的形式，而EasyV則用圖文按鈕的形式，而圖文按鈕的優(yōu)點是占用面積少。
同DataV，選用了縱向與橫向結(jié)合的混合導(dǎo)航，拓展性較強，不再贅述。二級導(dǎo)航底部使用了動態(tài)插圖點綴界面，插圖是不斷旋轉(zhuǎn)的科幻裝置，角度帶有透視，讓扁平的整體界面附帶了層次感、空間感。右側(cè)側(cè)邊菜單的幫助圖標(biāo)提供給用戶快捷操作，對新手小白友好。
缺省頁運用情感化設(shè)計，以2.5d插圖的表現(xiàn)形式緩解用戶負面情緒，配色在深色界面中顯得比較明顯，個人認為可以適當(dāng)弱化插畫亮色部分。主題色使用鮮艷活躍的藍色為主，在深色的界面中同樣相對明顯、突出。設(shè)計元素的四周輪廓既有全圓角，也有小圓角，界面形狀統(tǒng)一性待加強。
森工廠（森大屏基礎(chǔ)版) - 系統(tǒng)頁
左上方展示品牌Logo，同Raydata，不再贅述。由于是森工廠旗下的工具鏈，所以森大屏的系統(tǒng)頁頂部欄可進行工具切換，界面左右兩側(cè)留白很多、版心小、淺色風(fēng)格，讓整體界面更像是一個前臺官網(wǎng)的印象。
使用了像是混合導(dǎo)航的方式，用“像”這樣表達是因為，頂部欄是工具切換欄，而側(cè)邊懸浮導(dǎo)航1竟然是所有工具的個人中心，側(cè)邊懸浮導(dǎo)航2卻是當(dāng)前工具森大屏的資源中心，右側(cè)內(nèi)容區(qū)是當(dāng)前工具森大屏的我的大屏、推薦大屏模塊?？蚣苌嫌幸欢ǔ潭炔惶嫌脩粽J知，導(dǎo)致引起疑惑和誤解。盡管如此，配色上使用橙色（森工廠）和具體工具主題色來區(qū)分當(dāng)前位置，能一定程度防止用戶混淆概念，通過多次在頂部欄切換工具，可預(yù)知上面提到的導(dǎo)航1是指所有工具而言的，而導(dǎo)航2則是指當(dāng)前具體工具而言。
右側(cè)側(cè)邊菜單提供用戶快速反饋的入口，簡單便捷。其中側(cè)邊菜單的問號圖標(biāo)與頂部欄的一樣，跳轉(zhuǎn)鏈接一致，而文案卻使用了“常見問題”和“幫助中心”2種，重復(fù)功能入口也許考慮的是為了增加點擊，而同個界面重復(fù)堆放功能入口的合理性還有待考究。圖標(biāo)使用了毛玻璃和線性圖標(biāo)的表現(xiàn)手法，為界面提升質(zhì)感。設(shè)計元素的四周輪廓加了小圓角，整體給人的感覺更為親切、友好。
DataV企業(yè)版試用 - 畫布/藍圖編輯器
整體暗黑風(fēng)格的界面下，能使得用戶設(shè)計深色風(fēng)格的可視化大屏?xí)r，保持更專注的狀態(tài)。題外話，DataV新版本的編輯器界面可切換有淺色風(fēng)格，同理，淺色編輯器界面則更適合在設(shè)計淺色風(fēng)格的大屏的場景。通過不同深色色階的背景色塊讓每個功能模塊的框架位置區(qū)分得清晰明了，另外整體配色、形狀方面都遵循視覺呈現(xiàn)一致性，降低用戶認知成本。
在編輯器左上方無退回系統(tǒng)頁的返回按鈕，用戶只能通過切換瀏覽器標(biāo)簽頁回看系統(tǒng)頁，而無法在當(dāng)前頁返回上一層級回到系統(tǒng)頁，所以對于想要快速返回上層的場景下，則顯得不那么便捷。頂部欄左側(cè)的畫布編輯器與藍圖編輯器選項按鈕歸于一組符合用戶認知，可快速切換當(dāng)前編輯器進行大屏視覺設(shè)計或鏈接交互事件。畫布編輯器和藍圖編輯器的畫布外區(qū)域保持視覺統(tǒng)一，使用了點平鋪的背景與畫布做出層次區(qū)分。
右側(cè)的屬性面板中展示組件的配置功能，當(dāng)信息較多時，用視覺較弱的分割線區(qū)分每組的配置信息，數(shù)據(jù)之間比較緊湊，提高面積利用率。編輯器中多處的功能組使用了格式塔原則的接近性，讓距離更近的功能組更有關(guān)聯(lián)性，層次清晰有序，降低用戶認知成本。
圖標(biāo)表現(xiàn)方式只使用了單色線性圖標(biāo)一種，讓整體界面表現(xiàn)得更簡潔、輕量化，忽略圖標(biāo)形狀而讓用戶更多去關(guān)注功能。配色、圓角遵循視覺呈現(xiàn)一致性，當(dāng)功能被選中時，會以藍色背景、圖標(biāo)反白的方式強調(diào)該功能的狀態(tài)、位置。
Raydata Web專業(yè)版 - 編輯器
同DataV，暗黑風(fēng)格界面，不同深淺色塊背景區(qū)分功能模塊，且界面左上方無退回系統(tǒng)頁的返回按鈕，不太便捷，不贅述。
大綱與概要類似于頁面與圖層的關(guān)系，像設(shè)計軟件Figma的Page（頁面）與Layer（圖層），大綱與概要位于界面左側(cè)的區(qū)分上下模塊，框架從上至下擺放，符合用戶認知。對于新手小白，還需額外查看教程引導(dǎo)才能認知大綱與概要的框架，因為此版本定位為專業(yè)版，所以弱化了幫助指引，簡化界面，讓專家級用戶更沉浸地、不受過多干擾地使用。
組件庫位于頂部，占用面積小，前面結(jié)構(gòu)層提過，作用是增大了畫布占比，讓用戶更專注設(shè)計，不贅述。
圖標(biāo)表現(xiàn)方式使用了單色面性圖標(biāo)和微漸變扁平投影圖標(biāo)，界面頂部是組件庫，這些微漸變圖標(biāo)呼應(yīng)了系統(tǒng)頁同樣使用了為漸變風(fēng)風(fēng)格。為了強調(diào)組件庫這種用戶高頻操作區(qū)域，使用了更吸引用戶注意力的微漸變扁平投影圖標(biāo)，而其他區(qū)域則使用單色面性圖標(biāo)，弱化視覺，讓界面輕量化，讓用戶更多去關(guān)注功能。同DataV，同樣使用格式塔原則的接近性，層次清晰，降低認知成本，不贅述。
配色、圓角遵循視覺呈現(xiàn)一致性，當(dāng)功能被選中時，會以藍色背景、圖標(biāo)反白的方式強調(diào)該功能的狀態(tài)、位置。
EasyV個人版 - 編輯器
與其余3款工具不同，EasyV在編輯器左上方有退回系統(tǒng)頁的返回按鈕，方便用戶快速返回上層的系統(tǒng)頁。
同Raydata，組件庫位于頂部任務(wù)欄中，占用面積小，前面結(jié)構(gòu)層提過，作用是增大了畫布占比，讓用戶更專注設(shè)計，不贅述。
圖標(biāo)表現(xiàn)方式使用了單色微漸變線性圖標(biāo)，部分圖標(biāo)線細節(jié)還用半透明效果，而部分則用了不透明度漸變的方式，提升圖標(biāo)質(zhì)感，讓整體界面輕量化而不至于過于單調(diào)。配色、圓角遵循視覺呈現(xiàn)一致性，降低用戶認知成本。
森工廠（森大屏基礎(chǔ)版) - 編輯器
同DataV，暗黑風(fēng)格界面，不同深淺色塊背景區(qū)分功能模塊，且界面左上方無退回系統(tǒng)頁的返回按鈕，不太便捷，不贅述。
編輯器的任務(wù)欄設(shè)計類似本地客戶端軟件的頂部菜單欄，通用的“文件、編輯、視圖、排列、圖表、調(diào)試、幫助”菜單都放在了頂部任務(wù)欄，符合用戶交互習(xí)慣，缺點占用面積較大。
與Raydata結(jié)構(gòu)一樣，同樣有類似設(shè)計軟件Figma的Page（頁面）與Layer（圖層）的關(guān)系，森大屏把圖層放在畫布底部欄，而大綱放在組件庫的左下角位置。可能考慮不占用過多面積而折疊在左下角，但缺點也很明顯，層級較深，難以找到大綱中的畫布元素，對新手小白不太友好。通過畫布底部欄切換圖層，這里圖層也是分2D和3D，還可設(shè)置圖層為全局圖層，即預(yù)覽大屏?xí)r跳轉(zhuǎn)任何地方都始終顯示該圖層，可減少重復(fù)勞動設(shè)計。
藍圖和代碼二開也位于畫布底部區(qū)域，同DataV，森大屏也有藍圖功能。底部有藍圖和代碼二開的切換按鈕，方便用戶鏈接交互事件和調(diào)試二改組件的時候，不完全遮擋畫布，讓用戶更易感知當(dāng)前所處位置和狀態(tài)，無需來回切換頁面而增加操作成本。
界面圖標(biāo)表現(xiàn)方式同DataV，只使用了單色線性圖標(biāo)，讓整體界面表現(xiàn)得更簡潔、輕量化，不贅述。畫布外區(qū)域使用了點平鋪的背景與畫布做出層次區(qū)分。
上篇簡述可視化行業(yè)的市場分析，了解到國家政策如《“十四五”大數(shù)據(jù)產(chǎn)業(yè)發(fā)展規(guī)劃》大力支持可視化行業(yè)的發(fā)展，可視化行業(yè)解決企業(yè)痛點，助力企事業(yè)單位進行數(shù)字化轉(zhuǎn)型。隨著數(shù)據(jù)可視化行業(yè)的發(fā)展，可視化報表分析工具逐漸衍生出更利于輔助分析的可視化大屏工具，隨后進行桌面研究、問卷調(diào)查后，篩選出4款主流工具（DataV、Raydata、EasyV、森大屏），分別對它們的結(jié)構(gòu)層、框架層和表現(xiàn)層進行拆解分析。
設(shè)計師在了解和體驗工具型產(chǎn)品時，也要對其行業(yè)有一定的思考，這樣更有利于了解業(yè)務(wù)、用戶以及產(chǎn)品。下篇接著講主流工具（DataV、Raydata、EasyV、森大屏）的功能體驗，淺談可視化行業(yè)未來的探索和思考。
那么，下篇再見！
我們需要什么樣的配色方案？
B端的系統(tǒng)的主色代表著一個系統(tǒng)的氣質(zhì)，與所在行業(yè)、產(chǎn)品的定位、用戶群體都有一定的關(guān)系。前面調(diào)研了眾多竟品及市場前沿配色方案，目的就是期望從它們身上找出共性，引領(lǐng)我們的系統(tǒng)找到最適合的方案，這是知彼。
光有“知彼”是不夠的，我們還要清晰的知道自己是誰？這樣我們才可以說我們的配色方案是最適合我們的，有理有據(jù)的方案。
B端系統(tǒng)的真正使用人群比較復(fù)雜，具有年齡跨度大，文化水平參差不等，從事行業(yè)廣泛等特點。
源于自然之美的色調(diào)，突顯靈活性與再生的創(chuàng)意！
依據(jù)彩通色彩研究所專家的說法，紐約時裝周2021春夏季的色彩強調(diào)我們渴望能激發(fā)出巧思與創(chuàng)意的色彩，這些色彩的百搭性質(zhì)穿越季節(jié)，容許更多的選擇自由，適于表達原創(chuàng)的風(fēng)格，也足夠靈活來適應(yīng)現(xiàn)代新的更片斷化的生活方式 。
“2021春夏的色調(diào)呈現(xiàn)出大自然，強調(diào)我們渴望擁有全年皆宜的靈活色彩，這一季的色彩充滿道地真實的感覺，這種感覺對色彩而言愈來愈重要，同時結(jié)合了某種程度的舒適與輕松感，并散發(fā)出活力，激勵振奮我們的心情”
說到這里“主題色”如何來選擇？
色彩對于人的大腦的沖擊力大于造型，比如淘寶，我們會記憶起淘寶的主色是橙色；色彩是影響人類視覺思維的重要因素，色彩能直觀的體現(xiàn)產(chǎn)品的性格和氣質(zhì)，所以選擇一款適合產(chǎn)品的主色很重要。
我們的用戶在更替，如何讓產(chǎn)品年輕化、品牌年輕化是現(xiàn)在幾乎所有企業(yè)都在思考的問題，新的用戶群體從小接受的教育和喜好決定著產(chǎn)品的發(fā)展方向。
比如：我們這次顏色升級中律動、青春活力是核心關(guān)鍵詞，而藍色則可以讓產(chǎn)品視覺符號得到延續(xù)。
對于主題色的選擇指標(biāo)有哪些？
通過關(guān)鍵詞圖片像素化提取顏色，同時參考B端產(chǎn)品顏色流行趨勢和當(dāng)年的年度流行色，以及竟品顏色分析結(jié)果，獲取藍色的色相、純度、明度范圍。
2020潘通年度顏色經(jīng)典藍（19-4052 Classic Blue），顏色值為#174A7B（H207 S81 B48）
2021潘通年度顏色搭配色鳥舍系列中19-4151Skydiver，顏色值為#02569D（H207 S99 B62）
假設(shè)：竟品的主題色藍色的色相范圍為205-225；純度的范圍為70-96，平均值為86；明度的范圍為70-98，平均值為88，B端產(chǎn)品流行趨勢的主色也多是藍色系，色相范圍為200-232；純度的平均值為70；明度的平均值為68。
色彩的使用范圍及色階有哪些？
色彩的應(yīng)用場景包括：關(guān)鍵行動點，操作狀態(tài)、重要信息高亮，圖形化等場景；針對這些使用場景只有一個色值是不能滿足所有場景使用的，所以我們要建立主題色的不同色階來滿足不同場景下顏色的使用。以建立色彩層級，或傳達信息，或強化界面層級。
在色彩系統(tǒng)中，常使用 Tints and shades 系統(tǒng)來建立調(diào)色板，通過在顏色上面增加白色，或者增加黑色，來改變它的明度和飽和度，形成同色系的調(diào)色板，在符合無障標(biāo)準的區(qū)域，選擇不同明度飽和度的色彩，形成有梯度、有層級的彩色調(diào)色板。
B端產(chǎn)品中光有“主角”是不夠的，還要有“配角” 所以我們還要看一下輔助顏色是如何定義的？
輔助色是為了幫助頁面區(qū)分狀態(tài)和層級而設(shè)立的顏色，主要包括圖表類儀表盤顏色和功能色，通過合理的顏色傳遞產(chǎn)品正確的信息，讓其信息傳達更明確清晰。
輔助色的作用是配合襯托產(chǎn)品主色調(diào)，在不同的產(chǎn)品中，輔助色運用的策略是不同的，比如我們在竟品調(diào)研中發(fā)現(xiàn)，輔助色經(jīng)常是取自主色的鄰近色、對比色和互補色等。
儀表盤配色：通過對竟品的分析可得知，優(yōu)秀的儀表盤的配色有多系列及低純度的特點，多系列配色是為了滿足用戶個性化的需求，而低純度是考慮用戶在長時間使用產(chǎn)品，色彩對其心理的影響。
功能色：這類顏色在系統(tǒng)一般不會隨意更改，而且特定的語義一般都有固定的色相，只需改變其純度和明度，使其視覺上符合主色的氣質(zhì)，使其搭配和諧。
1.通過默認主題色選擇輔助色及默認儀表盤顏色
我們以默認主題色為#467FEA（H 219 S 70 B 92) 為起始點，S（飽和度）、B（明度）保持不變，H（色相）以180°為起點，以15°為增量或減量標(biāo)準，生成24色色板。這個色板是我們選取輔助色的重要依據(jù)。
以鄰近色、互補色、對比色為原則選擇豐富的顏色
鄰近色：在色相環(huán)中，相差15°的顏色為鄰近色，凡在60°范圍內(nèi)的顏色都屬于鄰近色的范圍，主色和鄰近色的色系組成的搭配，可以在同一個色調(diào)中構(gòu)建出豐富的視覺層次感和質(zhì)感，賦予不同的功能含義，信息表達明確，和諧統(tǒng)一感很好，視覺上的趣味性，顏色的搭配顯得很柔和。
對比色： 在色相環(huán)中，角度相差120°-180°之間的色彩，這里使用了120°為角度來選擇對比色。
互補色： 在色相環(huán)中成180°角的兩種顏色，互為補色；主色可以和其互補色的兩個色彩的搭配，該色彩可以為鄰近色，例如：藍色和黃色、橙色的搭配；這種搭配既能保持互補色搭配強烈的對比度，區(qū)分關(guān)鍵信息，次要信息，又能增加視覺上的趣味性，色彩看上去豐富多彩。
例如：藍色作為主色，互補色黃色作為輔助色應(yīng)用在圖表、圖標(biāo)和標(biāo)簽上，再選擇黃色的鄰近色橙色作為另外一個輔助色，應(yīng)用在不同的關(guān)鍵信息上，有助于用戶更好的閱讀產(chǎn)品的功能和內(nèi)容。
獲得輔助色-9色相
通過鄰近色、互補色和對比色的選擇，我們從24色色相環(huán)中得到了9色相色環(huán)，9色相色盤優(yōu)化后將做為圖表的儀表盤顏色和語義類的功能色出現(xiàn)頁面設(shè)計中。
校正輔助顏色
雖然我們保持相同的飽和度和明度，使用科學(xué)的方法得到了較為合適的色相，但由于色彩本身自帶感官明度屬性，導(dǎo)致在視覺感受上的感官體驗并不同頻。
黃色、綠色的明度即發(fā)光度較高，藍色就稍微偏暗一些，導(dǎo)致色板看起來不一致，為了讓不同色相看起來更加協(xié)調(diào)，需要調(diào)整色板的明度和飽和度，以保證視覺感官體驗同頻且更加和諧舒適。
校正后的顏色主要用于功能色和儀表盤顏色。
從輔助色中提取功能色及儀表盤色系
通過對竟品的分析總結(jié)同時結(jié)合默認主題色分析得出的9色色環(huán)，歸納分離，最后形成系統(tǒng)的默認儀表盤顏色。
功能色的目的是明確信息及狀態(tài)，比如成功、出錯、失敗、提醒、鏈接等；功能色的選取需要遵守用戶對色彩的基本認知，結(jié)合分析得出的9色色環(huán)，顏色校正，得出系統(tǒng)功能色。
輔助色的色階
為了度量不同的可視化從高到低的數(shù)值，我們儀表盤顏色遠遠不夠，所有為了保證視覺上的統(tǒng)一性，我們需要加入輔助色的明度色階來區(qū)分數(shù)據(jù)層級。
同時我們產(chǎn)品有深色和淺色兩種模式，由于視覺對比的原因，在深色的場景看下看的顏色，和淺色場景下看到的顏色是兩種感受，深色場景下顏色會發(fā)亮，所以為了保持視覺上統(tǒng)一，我們也需要加入輔助色的色階。
輔助色色階建立方法與主色的色階建立方法一致，使用 Tints and shades 系統(tǒng)，通過在顏色上面增加白色，或者增加黑色，來改變它的明度和飽和度，形成同色系的調(diào)色板。
模擬方案一主色、輔助色及消色匯總
通過以上分析我們得出模擬的主題色、儀表盤顏色、功能色及消色。為了方便記憶，我們分別給顏色取了名字和編號，命名方式采用植物色彩命名，這也是200多年前顏色數(shù)值出來之前的命名方式，最早見于1814 年出版的《維爾納色彩命名法》
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司。
藍藍設(shè)計的小編 http://www.bouu.cn