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

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

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

          首頁

          使用D3js繪制Force-Directed Graph(力導向圖)

          前端達人

          Force-directed(力導向)圖形繪制算法通過圖形本身的結構(圖中頂點與邊的拓撲關系)計算出圖形的層次,而不依賴于特定領域的知識。使用力導向算法繪制的平面圖形通常比較美觀,并且圖中各條邊之間的交叉盡可能的少。

          本文對使用D3js繪制Foorce-Directed Graph(力導向圖)的過程進行簡要的介紹,以下面的邏輯圖(包含6個節點和5條邊)為例。

          import json #nodes為圖的節點集合 nodes = [{'name' : 'nodeA'}, 
                   {'name' : 'nodeB'}, 
                   {'name' : 'nodeC'}, 
                   {'name' : 'nodeD'}, 
                   {'name' : 'nodeE'}, 
                   {'name' : 'nodeF'}] #links為圖的邊集合,source為起點,target為終點 links = [{'source' : 0 , 'target' : 1}, 
                   {'source' : 0 , 'target' : 2}, 
                   {'source' : 0 , 'target' : 3}, 
                   {'source' : 0 , 'target' : 4}, 
                   {'source' : 0 , 'target' : 5}] #graph為邏輯圖,由節點集合和邊集合組成 graph = {'nodes' : nodes , 'links' : links} print json.dumps(graph) 

          上例的源碼 force-directed-graph.html 及注釋如下:

          <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> .link { stroke : #CCC; stroke-width : 2; } .node text { pointer-events : none; font-size : 12px; } svg { overflow : hidden; } </style> <script src="http://libs.useso.com/js/jquery/1.11.1/jquery.min.js"></script> <script src="http://libs.useso.com/js/d3/3.4.8/d3.min.js"></script> <script> var graph = {"nodes": [{"name": "nodeA"}, 
          {"name": "nodeB"}, 
          {"name": "nodeC"}, 
          {"name": "nodeD"}, 
          {"name": "nodeE"}, 
          {"name": "nodeF"}], "links": [{"source": 0, "target":1}, 
          {"source": 0, "target": 2}, 
          {"source": 0, "target": 3}, 
          {"source": 0, "target": 4}, 
          {"source": 0, "target": 5}]}; //返回隨機顏色代碼 function random_color() { var letters = '0123456789ABCDEF'.split(''); var color = '#'; for (var i = 0; i < 6; i++ ) {
                  color += letters[Math.round(Math.random() * 15)];
              } return color;
          } function draw() { var width = 400; var height = 300; //設置svg寬度和高度 var svg = d3.select("#canvas svg")
              .attr("width", width)
              .attr("height", height); //設置Force-Directed力參數 var force = d3.layout.force()
              .gravity(.05)
              .distance(120)
              .charge(-100)
              .size([width, height]);
            force
              .nodes(graph.nodes)
              .links(graph.links)
              .start(); //選擇邊集合 var link = svg.selectAll(".link")
              .data(graph.links)
              .enter().append("line")
              .attr("class", "link"); //選擇節點集合 var node = svg.selectAll(".node")
              .data(graph.nodes)
              .enter().append("g")
              .attr("class", "node")
              .call(force.drag); //響應鼠標拖拽事件 //節點添加圓形圖案 node.append("svg:circle").attr("r", 10)
              .style("fill", function(){ return random_color();
              })
              .style("stroke", "#FFF").style("stroke-width", 3);
              node.append("text")
                .attr("dx", 12)
                .attr("dy", ".36em")
                .text(function(d) { return d.name }); //綁定tick事件 force.on("tick", function() { link.attr("x1", function(d) { return d.source.x; })
                .attr("y1", function(d) { return d.source.y; })
                .attr("x2", function(d) { return d.target.x; })
                .attr("y2", function(d) { return d.target.y; });
              node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
            });
          }
          $(function(){ draw();
          }); </script> </head> <body> <div id="canvas"> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="300"></svg> </div> </body> </html> 

           

          本文鏈接:http://bookshadow.com/weblog/2014/11/04/d3js-force-directed-graph/
          請尊重作者的勞動成果,轉載請注明出處!書影博客保留對文章的所有權利。



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

          截屏2021-05-13 上午11.41.03.png

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


          3d-force-graph力導向樹(DAG模式)的使用

          前端達人

          首先3d-force-graph在碼云或者github直接搜索,它的文檔確實有點少。這個插件用了3次,每一次都有不同的痛苦,也有粗心大意所導致的。

          好的,我們現在講解一下這個插件中的導向樹DAG模式

          我的案例都會基于Vue開發,創建項目等等我們進不說了,進入正題。

          步驟:1.安裝:npm i 3d-force-graph (我安裝的是"3d-force-graph": “^1.67.5”,)
          2.導入 import ForceGraph from ‘3d-force-graph’;

          首先注意點:
          1.不要全部cv我的代碼,或者光放文檔中的代碼,我們要依據后臺數據實際看問題,但是基本的代碼步驟是差不多的,但是也不要全CV,不然你的瀏覽器會報錯,而且你以為錯誤是你的邏輯問題,實際上是cv多了的問題(這一點使我耽誤了半天的時間)
          2. 數據處理設計到了遞歸等,數據接口我就不寫了

          在模板中定義:

          <template>
            <div class="wrap"></div>
          </template> 
          
          • 1
          • 2
          • 3
          import ForceGraph from '3d-force-graph'; // 導入 import { subjectList } from '../src/request/api'; // 掉數據的接口 
          
          • 1
          • 2
           data() { return { // 源數據 sourceData: null, // 力導向圖數據 nodes: [], links: [], ForceGraphData: {} }; }, 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10

          初始話完成

           async created() { // 獲取數據接口 try { const { data: res } = await subjectList(); this.sourceData = res.data; console.log(this.sourceData); } catch (err) { console.log(err); } this.digui(this.sourceData); // 遞歸處理數據 this.SetForce(); // 調用力導向圖 }, 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12

          進入數據

          methods: { // 1.先定義數據 // 首先定義nodes數據;節點數據 設計遞歸定義方法 digui(data) { data.children.forEach(item => { if (item.children) { this.digui(item); } const nodeObjs = {}; nodeObjs.name = item.name; nodeObjs.id = item.id; nodeObjs.level = item.level; nodeObjs.parent_id = item.parent_id; nodeObjs.has_children = item.has_children; const linksObjs = {}; linksObjs.source = item.parent_id; linksObjs.target = item.id; this.nodes.push(nodeObjs); this.links.push(linksObjs); }); }, 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16
          • 17
          • 18
          • 19
          • 20
          • 21

          后端返回的數據是格式我們需要用遞歸地方法把他們處理在這里插入圖片描述
          要知道插件的節點是nodes數據,連線是links數據,links數組中的每一項都有source和target,source的是連線的開始端,target是連線的結束端,source的是parent_id,target的是id,也就是依據數據進行連接,這一不懂的話可以看看這個插件的這個案例
          在這里插入圖片描述
          好,繼續,處理完的數據是nodes數據后端數據返回的每一項包括children下的每一項,links數據是每一項是的target:id和source:parent_id
          處理數據完成,下一部在methods中設置力導向圖的函數

           // 設置力導向圖 SetForce() { // 這里在最想面插入了一條數據是因為后端返還的數據和依據插件的機制需要我在最前面插入一條最起點的數據  //也就是這條數據就是起源,一般來說你們也會在最前面插入一條起源數據,因為后端數據差不多樣式都是一樣的 // 這條數據就不用在添加parent_id了,就是返回的有parent_id,而不需要添加。 this.nodes.unshift({ id: 10515, name: '化學', level: 1, }); this.ForceGraphData.links = this.links; this.ForceGraphData.nodes = this.nodes; const gukergForce = ForceGraph(); gukergForce(document.querySelector('.wrap')) // 力導向圖放在容器中 記住這個容器在樣式中要給大小 .graphData(this.ForceGraphData)// 這條就是數據源 .dagMode('td') // 模式有很多選擇,我選擇的td,自上而下的格式,文檔中有選擇,你們按自己需求選 } }, 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16
          • 17
          • 18
          • 19
          • 20

          現在一個簡單的力導向樹就出來了,隨項目的需求你可在節點加圖片,你需要import * as THREE from ‘three’;這個包不用下載,直接導入就可以,

           const gukergForce = ForceGraph(); // 力導向圖放在容器中 gukergForce(document.querySelector('.wrap')) .graphData(this.ForceGraphData) .dagLevelDistance(70) // 兩點直接的距離 .dagMode('td') .nodeResolution(50) // 較高的值產生較光滑的球體。 .nodeThreeObject(node => { .nodeThreeObject(node => { if (node.level === 1) { console.log('你好'); } let imgTexture = ''; if (node.level === 1) { imgTexture = new THREE.TextureLoader().load(require('./assets/1.png')); } else if (node.level === 2) { imgTexture = new THREE.TextureLoader().load(require('./assets/2.png')); } else if (node.level === 3) { imgTexture = new THREE.TextureLoader().load(require('./assets/3.png')); } else if (node.level === 4) { imgTexture = new THREE.TextureLoader().load(require('./assets/4.png')); } else if (node.level === 5) { imgTexture = new THREE.TextureLoader().load(require('./assets/5.png')); } const material = new THREE.SpriteMaterial({ map: imgTexture }); const sprite = new THREE.Sprite(material); if (node.level === 1) { sprite.scale.set(50, 45); return sprite; } else if (node.level === 2) { sprite.scale.set(20, 20); return sprite; } if (node.level === 3) { sprite.scale.set(30, 30); return sprite; } if (node.level === 4) { sprite.scale.set(20, 15); return sprite; } if (node.level === 5) { sprite.scale.set(20, 20); return sprite; } }); } 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16
          • 17
          • 18
          • 19
          • 20
          • 21
          • 22
          • 23
          • 24
          • 25
          • 26
          • 27
          • 28
          • 29
          • 30
          • 31
          • 32
          • 33
          • 34
          • 35
          • 36
          • 37
          • 38
          • 39
          • 40
          • 41
          • 42
          • 43
          • 44
          • 45
          • 46

          其實由誰解決了它節點之間不重復的問題,可以給我留言,謝謝




          轉自:csdn論壇

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

          截屏2021-05-13 上午11.41.03.png

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

          信息可視化是什么?

          資深UI設計者


          今天我要和大家介紹的這位設計師,他在業內被譽為是“信息可視化設計”領域的天花板。一提到信息可視化這么高大上的詞,相信大家都多少有些了解,在日益復雜的信息交流活動中,將信息圖表化已經是一名設計所必須掌握的技能之一了。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          舉些常見的例子,比如在公共場合中,我們看到的交通標志,以及用來顯示地理位置的地圖、將時間具象化的時刻表等等,這些數據都以某種圖形化的形式呈現在我們周圍。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          而信息可視化領域也不僅僅是將簡單的數據繪制成圖表那么簡單,比如要弄清楚社會中隱藏著的各種問題,從而促進新觀點的提出和對問題解決的思考。這種并不以信息為主導,而是著重于根據創建者的主題來選擇要傳達的信息,并尋求接收者的主動解釋。

          而我們今天要介紹的這位設計大神就是這個領域的專家

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          △ 中野豪雄 TAKEO NAKANO 圖形設計師

          1977 年出生于東京都。武藏野美術大學畢業,師從著名設計師勝井三雄。2005 年設立中野設計事務所。以信息的構造化和上下文的可視化為主題,在各種領域探索圖形設計的可能性。日本 typographic 年鑒大獎賽,同最佳作品,造書裝幀比賽經濟產業大臣獎等獲獎。入選世界海報三年展和拉哈蒂國際海報雙年展等。作為邀請作家參加了國際泰晤士報雙年展“首爾 2011”。文藝博物館永久收藏。武藏野美術大學、多摩美術大學教授。

          咱們先來看看中野老師平時的作品都長什么樣吧!

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          是不是很厲害!但說實話,這種信息的密度,工作量絕對是巨大的!而在一些訪談中,中野老師也明確指出,自己更傾向于采用更宏觀的視角去做設計,因為這樣不僅能夠達到傳達目標,同時也由于對比的存在,進而產生嶄新的視角。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          圖中我們現在看到的信息可視化海報,是 graphic trial 2015 的一次展覽。老師一共設計了五張 B1 大小的凸版印刷海報。內容是關于地震的四年時間里,哪些話題被人們報道直到事件完結,然后回歸到日常生活中。以及在大數據為主的信息社會中,思考有關制作印刷物的意義。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          人們在地震發生時,所接受到的信息,就像圖中展示的這樣,是從喧囂到日?;耐埔坪脱葑儯蠋煏紤]到,促進這個過程的因素和推動力是否能夠被可視化。從當代語言推動社會發展的角度去考察,想象著是否能將這個語言本身地圖話。從而建立起一個提供人們思考的平臺,這也是平面設計能否引發輿論爭議的關鍵。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          首先我們從信息收集的角度來向大家講解,這張圖是國立情報研究所的北本先生制作的數據圖,搜索關鍵詞是“受災地”。圖中折線展示的是,受災四年間,相關詞被搜索的高峰和頻率。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          接下來我們來看這張語言地圖是如何被延展出來的,常規情況下,我們形容時間的話,當然會使用線性的橫向時間軸。而中野老師的解決辦法,是將時間軸以環形的方式呈現,并且將起點與終點之間的差異可視化。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          五張海報,分別從受災后第一個月、半年后、一年后、兩年后以及四年后展開。呈現出由遠到近的視角變化,第一張海報中,展示的是受災后 31 天內的變化,逐漸到最后一樣,受災后 1460 天時,人們對于這個事件的關注轉變。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          老師從北本先生那里得到的數據,大概可以劃分成四個種類,分別是時間、主題的力度、語言關鍵詞頻繁出現的次數以及與東日本大地震的關聯度。時間就是剛剛提到的,以環形角度的方式呈現。話題的力度越高,就會離中心越近,反之就越遠。頻率則是按照關鍵詞出現的數量,以圓的大小來呈現。另外也通過顏色來區分與地震話題相關的詞語。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          △ 一個月,六個月,一年,兩年,四年

          最終就呈現出了這樣的畫面,首先這個項目是單人項目,所以合成這樣圖的工作量是非常巨大的,過程當中老師也請到了一些研究者對這個項目進行一些幫助。整個海報的重量據說非常重,拿起來大約有二十四千克。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          如果使用常規的四色印刷的話,也就需要利用青品黃黑去合成不同的顏色。不過這樣最終的效果并不理想。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          于是老師選擇了專色印制,也就是每一種顏色都單獨去印制一版。單獨印制一張海報,就需要反復印刷 16 版。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          其中的黑色,也就是全部 16 版疊壓到一塊的效果,可以說是黑中之黑了。當然這個黑色也是有所比喻的,也就是龐大的信息是無法單獨存在的,當所有信息混在一起,才能比對出彼此的聯系。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          第一張圖展示的是災害發生時的第一個月,畫面中展示了很多的圓圈,大部分都發生在外圓,也就是說當時各種各樣的搜索關鍵詞,與災害相關聯,被搜索的頻率非常高。在色彩的區分中,我們也能感受到相當強大的熱度。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          這是兩年后的情況,也就是說圓的一半就是一年,左半邊就是第二年,可以很直觀的看到,前半年使用的暖色是比較多的,當來到了后半年時,話題熱度逐漸冷卻的樣子。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          來到第四年的時候,也就是圓的四分之一是一年。右半邊展示的是過去來年的樣子,而左半邊就是又過了兩年之后的樣子。整個圖標展示的是起點“311”大地震動開始的日期,直到截止四年后的 3 月 11 日。

          可以看到暖色的部分逐漸變得零星起來。為什么會有這樣比較有規律的分布呢,那是因為暖色出現的位置都是所謂的紀念日,也就是人們會想起那次事件的日期。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          比如其中煙花這個詞,就是從災難過后才開始頻繁出現的,它代表了人們對于災難的一種寄托,人們期盼著生活能夠回歸正軌。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          這樣的可視化設計,意義在于人們能夠通過它,俯瞰全局,通過使用宏觀的視野來連接新的視角,讓人們意識到它們沒有注意到的觀點。各個詞語,會根據時間軸的變化與聯動,起到喚醒記憶的作用。通過這個設計作品投影人們過去的經歷。

          它是從整體到部分之間的一種信息差異。就圖的整體視角來看,它表示了“人們遺忘的節奏”,進而對遺忘進行批判。另外從圖的部分視角出發,它表示了“記憶的意外發現”包含了對回憶的期待。

          看到這是不是覺得中野老師很厲害呢。那么接下來,咱們再來看看他的成長經歷

          成為一名設計師的契機有很多,比如父母是設計師,或者是有看過一部激動人心的電影海報,想要成為一名從業人員??芍幸袄蠋熯x擇設計這個專業時卻完全不是這樣的。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          他選擇的了一種極度理性的方法,逐一排除自己不喜歡的東西。

          但這種做法本身就很難,最終中野猶豫著要不要選擇美術專業。始終沒有鼓足勇氣的他,還是向附近的預備校老師請教了這個事情。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          聽了中野的情況后,老師的評價是,他覺得中野很適合平面設計這個專業,還問他要不要試試呢?

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          因此在報考志愿里,中野寫下了武藏野美術大學和多摩美術大學。如果按照主角光環的劇本,這個時候,中野老師應該就已經平步青云,從此走上人生巔峰了。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          然而現實卻是,在第一次考試中,他卻落榜了。作為“差生”的他,周圍都是什么樣的人呢?插畫、攝影甚至編程,這樣的擁有特殊技能的人幾乎占據了大多數。在這樣的環境里,中野老師當時卻并沒有什么特別的特長,對于不善于表達的他,在當時感到很無奈。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          那時的他一直在問自己。我的特長是什么?我的興趣點是什么?有次散步的機會,他終于得到了靈感。那就是雖然自己沒辦法做出特別厲害的作品,但踏踏實實的繪制圖形卻是可行的。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          當意識到了這一點之后,于是在一次研究宋體(明朝體)的過程中,就產生了做一本書去記錄這段悠久歷史的想法。他想通過探索歷史的過程,去尋找屬于自己的興趣點。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          當從宏觀角度看待一段歷史的進程,通過推演,人們總能或多或少看到未來的一些可能性。通過研究書籍的過去,會發現最初的書籍形態起源與泥板,也就是說,從人類發展初期就存在了書的概念。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          就是這樣一步步的研究,信息的宏觀樣貌,如果從宏觀的視角來看待的話,會發現人們通常能夠了解到的信息其實并不多,當從更高的維度看到相同的事件時,是能夠展現出事物本質的。所以在之后做視覺圖表作品時,中野就開始有意識的展現從整體到局部之間的相互對照。

          我們接下來一起看看中野老師還有哪些精彩的作品吧!

          以信息結構和文章脈絡的可視化設計為主題,探索各個領域中平面設計的可能性。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          △ 這是中野老師從 2012 年到 2013 年期間,為建筑雜志設計的封面,因為是月刊,所以在兩年時間里,一共做了 24 本。

          雜志的內容主要和災害相關,比如第一版,是關于日本東北地區的一些內容、第二本是關于海嘯的內容,除此之外,還有關于建筑產業、能源、以及關于福島災難重建等問題。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          每本雜志都有各自的特征,數據來源主要由政府以及大學中的一些數據研究者們提供。當接收到這些信息之后,中野老師需要甄別哪些內容是需要保留的,哪些是需要刪減的。在這個過程中,不斷的思考”怎樣才能將這些數據清晰的傳達給讀者”這類問題。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          這個展覽是 2018 的時候,中野老師在印刷博物館策劃的一個天文學與印刷的展覽 。主要展覽的是 15 世紀到 18 世紀的書籍和印刷物。希望能夠以全新的視角,向大家展現天文學與印刷之間的關系。畫面中左上角的同心圓,是哥白尼提出的太陽中心說,從此人們開始以全新的視野觀察這個世界。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          這是這個展覽的宣傳單頁,博物館的宣傳單頁通常都是 A4 尺寸的,最初老師設計了八張相同的傳單頁面。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          隨后最終通過局部特寫的方式,構建出了八種不同的傳單樣式。如果全部收集完全,可以拼接成完成了一個大畫面。

          從天文學和印刷術之間的關系開始發展聯想,結合了天文學,哲學、數學等等一些學科,統一展現出了宇宙的這個概念。老師分別從三個角度思考這個問題,分別是“秩序”“整合”“規格”。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          如果把文字去掉,我們會看到這樣一張插圖,我們來分析一下為什么需要做成這個樣子。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          這里的橫軸代表著時間,豎軸代表著規模,畫面頂部展現的是關于宇宙的圖像,而下方主要以人的視角,展現了地球的圖像。學術本身是建立在各種各樣的理論之上,前人建立起的理論,可能會被后來者推翻重建,逐步形成了我們今天的天文學。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          這個展覽中會展示各種各樣的宇宙學理論體系,通過各種各樣的宇宙論,去展現這個世界的演變。讓人們隨著時間的進程,在各種學術體系中了解了文明的變遷,通過圖像讓觀賞者提前在腦海中呈現出視覺化的內容。也就是說,我們從看到這個宣傳畫面的那一刻起,這個展覽的內容就已經開始了。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          這個展會的名字叫《改變世界的信息》,畫面長度有 12 米左右,這個畫面是展會的入口處。從數據我們可以看到,受到貧困和災難的人群,占據著百分之七十的人群。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          中野老師針對這一點,將世界各個地區以及不同的國家,把其受災的程度和數據都集中到了一塊。分別是水資源、糧食、能源、醫療、住房、交通、識字率、通訊等問題。一共有一百多個國家。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          通過這個圖,我們會發現這其中每一個問題都是相互牽制,相互影響的。比如說水的問題就和所有的內容都有關系。整個圖標并非是想要解決某些問題,而是希望人們在看到它們時,能夠從中發現到一些問題。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          通過人們的議論,去碰撞出全新的思考。由此可以知道,圖表設計其實是對社會非常有幫助的設計領域。



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

          截屏2021-05-13 上午11.41.03.png



          文章來源:花瓣   作者:研習社

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          如何通過設計驅動產品的增長設計

          資深UI設計者

          在《增長黑客》中有這樣一句話“If you are not growing,then you are dying!”(如果企業不在增長,那么就在衰亡?。@話也適用于個人。人生畢竟不像企業,是非成敗,似乎都無可厚非,所以我們常常放飛自我偏離軌道,以至于有時候不得不提醒自己“不在成長,就在消亡”。我們來人間一趟,有沒有全力以赴想要成全的事?可以反復嘗試、不斷接近嗎?所以,我認為,增長它是一個永恒的話題,我們在學生時代讀書的時候希望自己的分數與排名能增長,在企業上班工作的時候,我們希望我們的收入能增長,當我們創業的時候,我們希望自己企業的業績能增長,增長是長期伴隨著我們生活的一個指數。

          《在大數據時代》一書中提出了“量化一切”的概念,即一切都可以用數據來衡量。其實,在“數字敏感”的互聯網時代,電商平臺“銷量”、電影票房、百大up主、文章閱讀10w+等等,我們其實早已在不知不覺中用數據丈量著一切。

          增長設計這個概念好像是最近幾年才廣為互聯網從業人員才熟知,成為每個互聯網er所討論的熱門話題,因為在過去的十多年,是中國經濟數字化騰飛發展的十年,我們90后更是親身見證著互聯網企業的成長,“眼見他起高樓,眼見他宴賓客,眼見他樓塌了”。

          我們關于用戶增長也是在不斷的迭代的,從最早期的雛形AIDA法則,由路易斯提出推銷模式,西方推銷學中一個重要的公式,AIDA法則也稱“愛達”公式,然后到2007年的facebook,提出這個概念,即,我們知道我們的廣告費是浪費掉了,但是我不知道是哪一半,于是,精于廣告投放的facebook便通過科學的,可復制性,可以被檢測的廣告投放可以幫助于其他企業做好用戶增長,然后便是我們知道后期比較流行的AARRR海盜模型這樣更加精細的用戶增長策略.


          2.1 關于增長設計


          在近幾年我們經歷了從互聯網市場在基本火熱到冷靜,尤其是隨著移動互聯網的流量紅利開始消失,“增長黑客”與“用戶增長”這兩個概念開始慢慢火爆開來,我們國內互聯網企業互聯網從業人員也開始重視用戶增長。

          企業的增長,也可以理解為企業的成長,所以企業能否保持增長,是老板和員工都比較關心的一件事,因為企業只有保持一定幅度的增長,才能保證大家在未來繼續過上好日子。以前傳統企業做增長可能就是通過贊助冠名一個很火的電視欄目,或者請個明星作為企業產品代言人,都可以在一定時期內來吸引消費者的關注,實現快速增長。但是這幾年我們可能也發現了,傳統意義上的營銷手段似乎不太管用了。因為以前我們從在電視和傳統紙媒上獲取信息的用戶都慢慢轉移到朋友圈、B站、抖音等互聯網頭部平臺,過去的傳統營銷三板斧來拉動企業業績的增長,已經變得越來越難。

          所以我們發現,在2017 年可口可樂宣布取消 CMO(首席營銷官),由 CGO(首席增長官)替代,以增長為中心的各個職位在招聘網站上也如雨后春筍一般涌出。

          看到這里,這些好像和我們從事Ui視覺工作的好像關系并不是很大,而恰恰相反,我認為用戶增長設計并不是一套虛無縹緲的說辭,而是一種能夠與團隊協助的工作形式,在一個產品團隊中,我們每一個人都應該了解一些關于用戶增長設計方面的知識。

          我們所知道的產品是為用戶在服務,是為了滿足用戶的實際的需求,所以我們所理解的增長設計便是產品創造了價值,而增長設計是將產品的價值放大傳遞,讓更多的人去發現。


          2.20 關于以用戶為中心的增長設計


          而我們體驗設計師更多關注在做產品增長設計的時候盡可能的不去傷害到用戶,以同理心去思考做增長設計的策略。這個我們會稱為用戶增長設計(User Growth Design),即簡稱UGD,簡單的理解為用戶增長設計要以用戶為中心,以用戶的角度和思維方式去想問題,去做用戶的增長。

          讓產品簡單到“傻瓜”也能操作,是喬布斯和張小龍做產品的核心理念。坐擁10億用戶的微信之父張小龍說過,產品經理要有傻瓜心態?!拔乙涍^5~10分鐘的醞釀才能達到傻瓜狀態,馬化騰需要1分鐘,功力最深的是喬布斯,傳說他能在專家和傻瓜之間隨意切換,來去自如,即所謂的Stayfoolish?!?

          當然,此傻瓜不是彼傻瓜,而是一種跳出當下局限的外行心態,是站在普通用戶的角度是操作、帶有同理心去思考產品,這樣才會更容易發現產品本質上的問題和抓住真痛點,找到影響用戶增長的關鍵因素。

          2.30 設計師該如何去做設計增長


          我們設計師要想所做的用戶增長肯定不是去街上發個小廣告,去地鐵上拿著產品的下載二維碼讓用戶去下載我們的產品,我們設計師著手的設計增長范圍還是從用戶體驗去入手的,所以我們在考慮提升產品數據的時候也需要考慮用戶的使用體驗,例如,公司現在想要提升產品的成交額,我們設計師肯定不會提出的方案肯定不會是讓公司去請個明星代言來吸引用戶下單之類的,我們設計事所要思考的是如何提升用戶在下單過程中的流暢感,如何縮短路徑,讓用戶能方便成交,所以我們設計師的增長觀一定是在產品現有的基礎上,提升用戶的體驗,盡量讓用戶有良好的體驗下來提升用戶的數據增長。


          2.40 什么樣的產品適合做增長設計


          那我們產品都是來自五花八門的類目,那什么樣的產品適合做增長或者以什么樣的形式做增長合適呢?在增長設計概念最火熱的幾年,我聽過這樣的一個有趣的故事,一個做服務于醫療聚合類的設計同學去給面試官講他們這個產品的怎么做用戶增長的,其中講到他們通過如何通過增長策略去拉動用戶增長,如何留住用戶,面試官聽完,反問了一句,那們這個增長設計的策略是通過給城市投病毒導致那么多人生病的嗎?

          所以,世間萬物的增長都需要條件,用戶的增長需要內在的動力,不能浮于表面,需要認清內在動力這樣才能有助我們找到增長的關鍵因素,從而合理有針對性的部署資源和策略。


          (1)C端產品如何做增長設計


          C 端的產品,一般是個人消費場景,單一決策購買,所以我們需要給用戶持續使用產品的動力,即產品可以持續給用戶提供其他產品無法提供的價值。用戶在使用產品獲得價值提升,例如獲得友情、愉快、知識、優惠、收入等等,用戶才會繼續使用,甚至會給身邊的好友去推薦。

          例如我們的國民軟件微信,拉進了人與人之間的距離,帶來了免費通話和朋友圈和這個門檻最低的社交網絡,我們可以通過朋友圈去展示和表達,我們微信上的各種”相親相愛的一家人“”多少級的同學“群成為我們去維系友情親情的寶地,現在我們通過掃一掃便可以完成生活中很多事情,都為用戶提供了極大的便利,微信獨有的社交屬性促成了巨大的網狀人際關系,讓用戶自發的去加入,并難以離開。在2020年3月底QuestMobile提供的數據來看,微信活躍用戶180日留存率為95.5%,位于常用APP用戶留存率排行的首位,擁有如此高的用戶長期留存,可見微信為用戶提供的價值之大。

          所以C端的產品只有能為用戶提供價值,用戶才會選擇留下,甚至會主動傳播為產品帶來更多有價值的用戶,這才是最理想的、良性的用戶增長。


          (2)B端產品如何做增長設計


          B端的產品和C端的產品不同,B端的產品往往是做決策的過程比較復雜,往往能決定購買的人并不是產品的使用者,他們只是負責采購的,另外有的采購量比較大的企業往往和銷售的人脈關系掛鉤,

          但是阿里的團隊通過不斷的深耕B端的市場發現,雖然 To B 增長很難,但在中小企業的增長很有機會。一般的中小企業,使用的人數不是特別多,一般都是5人以內的使用者,這類企業能決定購買和使用者是同一類的人,所以它會與我們C端的購買決策的路徑比較相似。另外中小企業的數量也是比較多,所以這塊的市場還是有挖掘空間的。


          2.50 什么是用戶的增長設計


          用戶增長設計設計其實就是從吸引新用戶的注意力到產品能給用戶一些價值最后用戶認可我們產品的過程,這是一個從短期流量到長效流量轉化的過程,


          (1)用戶的吸引力(獲客)


          我們一般獲取用戶的方式最直接便是去投放廣或者軟文推廣,用戶通過點擊下載APP來訪問我們的產品界面,在我們的產品中尋找自己想要的信息,一直周而復始,直到找到自己想要的信息,反正,產品的內容沒能吸引用戶,這時候,用戶便會退出產品,也就是用戶的流失。


          在這個過程中,一直圍繞著三個比較關鍵的因素“使用者(人)”、“使用場景”、“用戶行為”,我們需要明確用戶的使用路徑中,產生行為的原因和流失的因素。


          (2)用戶的注意力(激活)


          我們在設計中怎么通過設計策略去避免用戶的流失呢?我們需要去引導用戶的注意力,讓用戶在使用過程中對我們產品有認可,都可以有效的去避免用戶的流失,


          ·如何引導用戶的注意力


          我們怎么去衡量我們的產品是否吸引了用戶的注意力呢?根據Alibaba Design Ucan 2020所提出的一個公式。用戶的注意力=心理需求*視線所及,用戶的注意力是用戶的心里所想和目標所看到的交匯,當產品給用戶看到的信息是用戶想要的東西的時候,這時候,用戶便會點擊進入,所以通常曝光率則可以驗證用戶在產品使用中的注意力。


          例如,我們在瀏覽商品的時候,我們的目標首先關注的商品的品牌然后是名稱和價格,我們用戶心里想的可能是哪個品牌會比較可靠,哪個的價值比較低,有沒有我常用的品牌,視線所及便是我們展現給用戶的列表,當用戶看到某品牌有我喜歡的明星的代言或者喜歡明星的同款,這便是用戶所想的。當滿足這些前置條件,用戶便會產生點擊行為。


          ·如何引導用戶認同我們的產品


          我們想要用戶去認可我們產品的價值,我們需要了解用戶,了解用戶可以從三個關鍵因素去入手,1.用戶群體,2.認同目標,3.說服用戶



          例如當新用戶進去拼多多后,界面會彈出新人的專享紅包,引導新人用戶的點擊,下一個頁面便是彈出手氣最佳的紅包,最后展示頁面出現現在限時下單全額度返利的banner,每一個頁面的場景關聯度極強。一步一步的去說服用戶去下單、有效的提升用戶點擊率。從而提升新用戶的首次下單的增長。


          (3)用戶的安全感(留存)


          張小龍曾提出一個產品觀叫“用完即走”,與我們常常提到的“留存”“粘性”的原則是背道而馳的,其實我理解的用完即走便是產品其實不想讓用戶離開,我們的產品能給用戶一個確定性的答案,無論是在產品的易用性還是在產品體驗層面,都可以保持高效,讓用戶在使用過程中有愉悅感,讓用戶遷移成本提升,便是用完即走后的戀戀不忘、

          例如早期的打車軟件和團購軟件,那時候用戶在網上打車和線上支付習慣還沒養成,對產品的模式的認同度還不夠,所以,那時候打車軟件和團購軟件給予人的確定的心理印象便是,你在我這里支付購買會便宜。培養用戶的使用習慣,給用戶一個用了該軟件確實會便宜的心理安全感,從而實現了用戶的留存。

          我們平時準備出門或者去一些陌生的地方,我們都會使用高德地圖或者百度地圖看下路上是否堵車,我們這次出行走哪條路需要用時多久,以方便我們去選擇合適自己的出行方式。

          我們設計師在做設計的時候也是一樣的,我們通過之前的數據,也可以分析出產品一些不一樣的改版點,我們能把一些抽象的問題具體化,能更好的去度量我們的設計,所以設計師在學習如何增長設計前,我們需要了解一些關于產品的數據知識,我們分析一款產品的時候,通過比較關注的點是用戶、需求和數據。

          當我們的產品上線或者上新某一個功能的時候,往往用戶的意見反饋代表的是個體的聲音,而數據是用戶對于產品的客觀反饋,數據的變化能代表用戶對產品的態度,所以,設計師要是能讀一些數據報表,那么我們可以從體驗設計師角度去給產品迭代的時候能提出不一樣的觀點,輔助我們所服務企業的app的成長。


          3.10 數據是如何產生的


          數據如如何產生的,比較深的知識是不需要我們去深挖的,我們日常接觸到數據反饋都是來自產品的“埋點”,而埋點數據的獲取通常通過第三方的工具進行獲取,比較常見的數據分析企業有友盟、七麥、GrowingIO等,這些工具可以在我們想要的頁面或者功能按鈕上添加監聽功能,當條件被滿足的時候,便會完成一次數據的統計,埋點需要提供兩個關鍵的信息:一是需要埋點的內容,二是埋點的名稱,這可以方便我們以后快速的找到相關的數據,當埋點完成后,產品上線就會檢測用戶的行為動作,當用戶進入我們的“埋點"界面或者功能的時候,后臺系統就會上報數據,我們就會收到數據反饋,但是在現實工作的場景可能比這個要復雜的多,我們可以根據具體的場景在靈活應變。

          3.20 設計師為什么要了解數據


          我們對一款的產品的優化可能有很多層面的思考,但是我們去對用戶數據的分析則是對當前產品最有價值的參考點,數據的采集與分析無論是對產品的規劃還是對設計師下一步的工作開展都是比較重要的指標,因為用戶可能會因為一些客觀的原因可能不會說出自己內心的真心話。

          例如我們去面試的時候,在一番精心的準備和問答之后,我們在面試結束之后,如果去問面試官“您覺得我這樣面試表現怎樣”,有的面試官可能會就你這次的變現去做出比較切合實際的點評或者建議,但是有可能你那場面試因為外部的原因會失常發揮,但有的面試官可能會照顧你的面子,可能會說表現的還可以之類的話來安慰你,但是面試官最后會不會錄用你這點他肯定不會作假,所以有時候我們在分析用戶行為及操作路徑的時候,一些用戶的數據表現便是我們對產品優化的關鍵因素。

          我們通常將數據的指標分為三大類:1.用戶相關指標、2.用戶行為指標、3.業務數據指標



          3.30 用戶相關指標


          我們常見的與用戶相關的指數有像DAU、MAU、新增人數等,我們需要了解的數據為1.用戶的活躍指數,2.用戶的留存率,3.人均使用時長。

          3.31 用戶的活躍指數


          在互聯網行業里,通常我們會通過拉新把客戶引過來,但是經過一段時間可能就會有一部分客戶逐漸流失了。那些留下來的人或者是經?;卦L我們公司網站 / App 的人就稱為留存。

          在一段時間內,對某個網站 / App 等有過任意行為的用戶,稱之為這個網站 / App 這段時間的活躍用戶,這個任意行為可以是訪問網站、打開 App 等等。

          我們常見的用戶指標有「日活」 即日活躍用戶量,縮寫為DAU,,縮「周活」 即周活躍用戶量,縮寫為WAU,「月活」 即月活躍用戶量,縮寫為MAU。


          3.32 用戶的留存率


          留存率是最能反映一個產品是否對用戶有吸引力的指標,一般的留存率是基于某個時間段而得出的結論,例如我們常常聽說的次日留存和七日留存率。

          次日的留存率計算公式為:當天拉新的用戶中,次日留存率=在注冊的第二天繼續登錄/第一天拉新用戶的總數量

          七日留存率的計算公式為:在第一天拉進的用戶中,七日留存率=在注冊七天后還有登錄的用戶數/第一天拉新的用戶總數。




          3.33 人均使用時長


          人均使用時長通常是對內容和游戲類的參考價值的很大,它可衡量我們產品是否做的比較優秀,能不能留住用戶的注意力。如果我們做的是工具類的產品,例如計算機之類的,這個時候的人均使用比較長,說明我們的產品可能出現了問題,無法讓用戶在短時間內得到他想要結果。

          人均使用時長的計算公式為:人均使用時長= 總活躍時長 /總活躍用戶數。


          3.40 用戶行為指標


          用戶行為相關常見的指數有用戶的頁面訪問量率、轉化率等指標。



          3.41 頁面訪問量率


          我們對頁面的訪問流量的定義分為兩種,一種是PV(page View)即頁面瀏覽量,另外一UV(UniqueVisitor):獨立訪客數。

          PV(page View)也就是頁面瀏覽量,即你每觀看一次就會漲一個PV,類似于B站的播放量,我們每個賬戶只要點開觀看一次視頻,播放量就會增長一次,關閉在打開,也會在增長一次,所以我們每播放一次,便會漲一個PV值。

          UV(UniqueVisitor):也就是獨立訪客數,類似于騰訊視頻和優酷的播放量,每個賬戶點進去播放只會增長一個播放量,你再關閉再點進去也只漲一個VU值。在正常情況下是依靠瀏覽器的cookies來確定訪客是否為獨立訪客之前是否訪問過該頁面。


          (1) UV的類別


          在統計數據的過程中, 我們會將不同的點擊率來劃分,從而更好的可以來統計數據來分析。我們將UV分為:1.

          曝光UV ,2.點擊UV , 3.意向UV。



          ·曝光UV


          曝光UV即曝光在視野內的用戶數,例如我們在京東或者天貓去搜索某個產品進入了搜索的feed列表頁的時候,當我在當前的列表停留2-3秒的時候,都可以算一次曝光UV。


          ·點擊UV


          點擊UV即有點擊行為的用戶數,例如我們在京東或者天貓去搜索某個產品進入了搜索的feed列表頁的時候,我點擊某個商品進去了詳情頁,那么就可以算一個有效的點擊UV。


          ·意向UV


          意向UV即進入意向頁面的用戶數,例如我現在想去買一個Macbookpro, 我在B站看完關于Macbookpro,的評測視頻,在百度看完Macbookpro的參數后,我在去天貓和京東去搜索進行比價的時候這個時候我就屬于意向UV,在舉個我們比價常見的例子,當我們在百度搜索寶馬的時候,排在前面的經常是各種五花八門的關于車的廣告,在百度看來,我們便是想去買車的意向UV,是有機會促成交易的。

          所以我們看用戶對我們的產品或者活動是否感興趣,便可以看看PV和VU的數據如何。

          3.42 頁面的轉化率


          頁面的轉化率是任何一個企業都比較關心的數據為,我們的任何運營活動和產品的推廣都是為了轉化用戶的時間或者金錢,我們費盡心思的用戶點擊進來,也都是為了轉化用戶的購買。

          用戶的注冊、下單、登錄和復購都可以用轉化率來進行量化,我們根據產品不同的情況來制定轉化率的指標。通常我們計算轉化率:產生購買行為的戶人數/總的用戶訪客* 100%。例如我們這個頁面訪問人數是1000,接下來有100人進行了購買的行動,那么我們頁面轉化率為:100/1000*100%=10%的轉化率。


          (1)意向用戶轉化率


          意向用戶轉化率,即意向Intention Click Value Rate,簡稱意向UV CVR,是通過直觀科學的角度去評判需求是否達到了預期的效果,意向用戶轉化率一般用來衡量用戶訪購行為,是可以通過該指數去發現問題中隱藏的核心問題的依據,非意向UV的轉化流失有很多不確定因素,而意向UV的流失往往跟產品體驗有更大關聯性,通常計算的方法為:產生購買行為的客戶人數/所有到達店鋪的意向訪人數* 100%。

          例如像民宿和酒店類的APP的核心轉化率是客房的預定量,像B站和西瓜的核心轉換率則是用戶評論和點贊。


          3.43  頁面的點擊率與意向率


          通常我們在曝光UV和點擊UV直接會有一個點擊率的關系,Click-thougphRate,簡寫為CTR,即點擊數占展示次數的百分比,通常的計算形式為,點擊率=點擊次數/頁面訪問次數,

          在曝光UV與意向UV之前也有一個比例關系,叫意向率,即意向UV占曝光UV的比例關系,通常用以衡量運營活動或者功能的導流能力,主要用來看用戶的質量,通常的計算方式是意向率=意向UV/占曝光UV。

          3.43 跳出率


          跳出率是在設計用的比較少的一個數據,一般是運營人員會關心的數據指標。指的是用戶通過搜索點擊進入該商品的詳情頁,只是簡單的瀏覽一遍就關掉了頁面,在該頁面沒有任何的活動行為我們稱之為一次跳出行為。

          跳出率的計算公式為:頁面的跳出率=一個頁面離開的次數/總的訪問次數*100%


          3.50 業務數據指標


          我們對業務的數據指標可以將他們分為兩類:一是免費供用戶使用的產品,例如微信、B站等產品,我們更多的關注用戶的使用時長和停留時長。二是需要用戶有購買行為產品,例如淘寶、拼多多和京東之類的,這里的產品我們更多關注的是產品的GMV和ARPU等指數。



          3.51 GMV


          Gross merchandise Volume,簡稱為GMV,指標通常稱為網站成交金額,屬于電商平臺企業成交類指標,主要指拍下訂單的總金額,包含付款和未付款兩部分。

          GMV反映的是電商平臺直觀的成績,但在電商行業,GMV包括拍下未支付的訂單金額,GMV=銷售額+取消訂單金額+拒收訂單金額+退貨訂單金額,

          3.52 ARPU


          ARPU是 “The average revenue per user” 的縮寫,譯為每用戶平均收入或平均每用戶收入。也可以理解為單個用戶的價值。

          通常的ARPU用來反映這個產品在這段時間內從單個用戶獲得的利潤和收益,通常用來計算用戶生命周期價值的作用:它是 App 成功的指標,是用戶忠誠度的反應,是預測用戶增長的工具。簡單來說,用戶生命周期價值是驅動移動市場預算的動力。它會告訴你每個用戶值多少錢;你應該花多少成本去獲取一個用戶。

          ARPU的計算公式為:ARPU=在指定時期總收入/指定時期的付費用戶的總數*100%。

          3.53 付費率


          付費率是用來衡量用戶轉化行為的指標,通常所有用戶和付費用戶之間的一個轉化比率。我們前面說到的ARPU值是付費用戶的人數來計算的,我們通常會把付費率和ARPU值放在一起分析。一般該產品的付費率越高,這說明用戶對該產品的認可度越高。

          我們的產品每個階段的增長指標在不同階段會有不同的定義。每個時期所需要注意的事項也是不一樣的,我們對基礎的數據有了認識和了解之后,我們更重要的事情就是怎么去實踐在我們自己的產品中。


          4.10 提升列表CTR的設計策略


          我們產品中很多時候,我們的設計做的是否合理,我們的商品類別該怎么去排序,都和CTR的數據去掛鉤,產品中的很多核心的數據也需要CTR等基礎數據去做支撐,那么我們一起來復盤下提升列表的CTR策略點:1.增加影響用戶決策的信息,2.梳理列表的信息層級,3.新增適當的交互,4.標題優化(非設計角度)

          4.11 增加影響用戶決策的信息


          平時我們在逛街的時候一定會發現這樣的場景,當一條街上開了很多店的時候,每個店鋪一定會派出自己店鋪長相比較甜美的店員或者比較擅長口播的店員在自己店前面進行“吆喝”,比較小的店鋪就算人手不足也會用音箱去反復播放店內的促銷信息,這些策略都是為了在眾多的店鋪中去吸引過往行人的注意力。

          那么我們做設計也是一樣的原理,我們在在做列表時候,想要提升用戶擊我們的列表進入詳情頁的意愿,首先我們需要了解我們的用戶對什么樣的信息比較感興趣,我們將它整理并放出來,從而達到吸引用戶來點擊。


          4.12 梳理列表的信息層級


          我們平時去逛超市的時候,我們發現每個類目的貨架前都會擺放特價或者促銷力度比較的商品的合集,理貨員會將他們放在一起,這樣,對于價格敏感的會直接過去挑選。

          我們在梳理列表的信息也是一樣的,我們需要將用戶比較關注的信息或者產品的賣點信息層級抬高,減少用戶在挑選時候的跳出率。


          4.13 新增適當的交互


          我們想提升列表的點擊率也可以從另外一個角度是入口,就是想辦法讓用戶在最短時間內可以看到更多的信息列表,讓質變產生量變,這一點我們可以從改進交互的操作入手,讓讓用戶看的比較多的列表交互。


          (1)十字交互


          因為這種形式的設計他占用的位置比較少,且只需用用戶通過手指左右去滑動,便可以查看更多的信息列表或者產品列表。

          (2)隨機的列表


          在交互層面另外一個可以讓用戶看的更多的設計形式便是點擊就換一批,這樣可以讓用戶感受到我每次點擊過后的詳情列表和產品列表都是不一樣的,這樣每一次點擊都會有新的“多巴胺”去刺激用戶再次去點擊“換一批”按鈕,從而達到讓用戶看到更多的列表,以質變產生量變。

          4.14 標題優化(非設計角度)


          (1)美化標題


          我們經常上網經常瀏覽新聞的朋友一定知道有個詞叫做“標題黨”,簡單的來說就是標題經常以夸張、“故弄玄虛”的方式出現,UC是眾多平臺中運用標題“最好的楷?!?,所以網民也會親切的稱之“UC震驚部”,所以一個列表流的標題對點擊量的影響也是比較大的。


          (2)字符限制


          另外一個角度就是當標題顯示不全的時候,用戶對信息傳遞無法感知的時候, 我們取再好的標題也是沒用的,也許關鍵信息會被省略掉,所以我們在設計標題的時候,也可以限制標題可輸入的字數,避免文字的縮略顯示,讓用戶可以完全看清標題的意思,提升用戶的點擊欲望。


          4.20 上新功能如何提升CTR


          我們產品在上新一個新功能的時候,我i們如何布局能去讓用戶從熟悉到使用我們的新功能都是需要一個過程的,我們需要慢慢的去引導用戶,我們可以從一下策略去去入手:1.替換用戶習慣的功能,2.把控出現時間,3.用動態吸引注意力,4.合理劃分功能層級.、

          4.21 替換用戶習慣點擊的功能(按鈕)


          我們每個都會有自己的習慣性的動作,例如我們習慣左手寫字,右手拿筷子吃飯,我們每天回家習慣性的走同一條路,這些都是我們下意識的動作,是不需要經過思考的意識,那我們在軟件的使用中,也會有這樣的習慣,例如,通常底Tap欄的圖標第一個通常是首頁或者軟件的主要功能,而最后一個通常會放個人中心,這也是我們在軟件使用的中的共識,所以我們可以利用人下意識的習慣將常用的功能與新功能去替換,用戶便會在下意識的慣性中去點錯,例如網易云音樂為了推廣“云村”功能,便會將以前在最后一個的“我的”給替換成“云村,會導致很多用戶的下意識的動作點錯而提升新上的功能”云村“的點擊率。

          4.22 把控出現時間


          我們在下班回家的路上,當我路過一些小吃攤的時候會覺得街邊的小吃特別想吃,也特別有購買的欲望,這是為什么呢?因為我們在勞累的工作了,下班的時間也正是需要吃飯的時候,所以這個時候我們會看到街邊攤的小吃特別想吃,也特別想買,因為他擺攤的時間點和位置都恰好滿足了我們的需求,所以我們轉換到界面里也是一樣的,我們想要用戶去分享一篇文章的時候,一定要等看用戶在讀的時候,然后在出現分享功能,這個時候如果用戶讀到比較精彩的內容,便會和朋友分享這篇文章,例如用戶在進入商品也可以瀏覽的時候,我們這個時候可以出現滿減的紅包,這都是在適當的時候給與用戶想要的,把控好了出現的時間。


          4.23 用動態吸引注意力


          在一些靜態的元素中,突然有一個元素動起來,那么,那個動起來肯定是更吸引人的眼球的,所以我們在電商的頁面頁面中,會經常看到一些會動的icon和一些會動的膠囊導航,我能在付款頁面也可以看到一些立即付款的按鈕會忽大忽小的動起來,這都是為了吸引我們的注意力,引起我們去關注它的存在。


          4.24 合理劃分功能層級


          我們做設計排版的時候一定都聽說過這樣的一句話,就是你什么都想突出,結果你卻什么都沒有突出,這句話的意思是我們在做設計的時候一定要注意運用對比,將次要元素與主要功能的要做好主次的對比,這樣的層次對比才有利于用戶的閱讀,可以分清主次。

          我們在ui設計中也是一樣的,要想用戶快速的找到想要的功能,高頻使用的功能和不常用的功能要做好強弱的設計區分,這樣才能讓用戶一眼能看到自己想找的功能,例如美團和支付寶,都是將用戶高頻的操作放大并放置于頂部比較顯眼的位置,方便用戶去操作。


          4.25 合理使用彈窗功能


          我們都知道,彈窗在軟件中屬于級別最高的通知,就相當于學校里面的校園廣告,只要打開軟件的人,基本都可以看到,所以我們想推廣一個新功能的時候,使用彈窗是流量比較大的,但是也是比較打擾用戶的,我們需要看情況而定。

          4.30 提升人均使用時長的策略


          軟件的人均使用時長代表用戶對我們人均軟件關注度和我們給予用戶的價值,當人均使用時長在增長的時候,說明我們的產品正在良性的增長,在提升人均使用時長我們可以從以下幾個策略入手:1.讓用戶忘記時間,2.弱化用戶的負面情緒,3.多變的板式消除疲勞,4.激發用戶的好奇心



          4.31 讓用戶忘記時間


          我們放假在家打游戲的時候,總有這樣的感覺,就是打著打著不知不知的天就黑了,或者打著打著天就亮了,感覺時間過的非??欤俏覀冃枰⒁庖粋€細節就是一般打游戲的時候,游戲是會將頂部的時間狀態給隱去的,是為了給用戶更好的沉浸式的體驗,正因為我們看不到時間,所以便會忘記這件事情,一局一局的打著游戲。例如早期的抖音,在進去界面后變會隱藏時間條,讓用戶在刷抖音的過程中忽略時間,所以 ,我們想要提升人均使用時長,在一些娛樂性的產品或者模式下,可以嘗試著隱藏時間條,給予用戶更沉浸式的體驗,這樣用戶便會忽略時間這件事情。

          4.32 弱化用戶的負面情緒


          我們在飯店高峰期去餐廳吃飯的時候,一般會遇到餐廳客滿需要排隊拿號的情況,海底撈的做法是給排隊的客戶免費的小零食,外界對海底撈的服務評價可以用16個字來概括:有求必應,無微不至,噓寒問暖,小恩小惠,中國有古話是這樣說的“伸手不打笑臉人”,也許我們在就餐中會有各種不滿,但是海底撈都可以用他的服務去抵消客戶的負面情緒。所以,我們一般在餐廳催菜是時候,不管菜做沒有,服務員都會對我們說菜正在做,都是抵消我們等待中的負面情緒,讓客戶不會在等待的過程中離開或者退菜。

          我們在做界面中也是一樣的道理,我們的APP在實際運行過程中肯定也會遇到各式各樣異常問題,我們做設計的時候要為用戶提前給考慮進去,為用戶提供貼心、無微不至的服務。例如我們用戶可能在使用過程中可能手機信號不好,有的頁面加載不出來,我們需要設計有趣的加載動畫和頁面加載不出來的時候的占位符,告訴用戶我們的APP還是在正常的運行中,不是宕機了。


          4.33 多變的板式消除疲勞


          我們都開車或者坐車經過高速公路,我們會發現高速公路在一條直道后馬上會迎來一個彎道,我們小學的時候都學過,兩點之間直線最短,那么高速公路為了節省司機開車的時候,能否直接全部設計成直線的呢?答案是不可以,除了有些地方路線的規劃外,其次安全因素也很重要,經科學家研究表明在筆直的公路長期行駛很容易導致駕駛員發生事故,這是因為在筆直的高速上行駛,駕駛員的神經長時間處于放松狀態,容易麻痹大意,如果適當的時候來個轉彎會提醒駕駛員注意力集中,減速行駛,從而減少事故發生率。其次從心理學角度來說,駕駛員一旦在筆直的高速上行駛,容易產生飆車行為,誰都會想猛踩油門來追逐刺激,如果適當時候來個彎路,能夠抑制飆車行為的發生,從而減少故事發生率。

          所以我們在設計板式布局的時候,讓用戶盯著單一的布局形式,用戶很容易感覺到疲勞,從而會在頁面跳出。我們為了避免這樣的情況發生,讓用戶在瀏覽過程中能感受到板式的變化,而不是滑到底都是一樣,單一且無趣,很容易疲勞,我們設計者需要在單一的板式尋求不一樣的解決方案。


          4.34 激發用戶的好奇心


          我們都比較喜歡看懸疑劇的一個重要的因素是因為情節一環扣一環,線索和劇情結合的比較緊密,劇情比較扣人心弦,能激發我們對真相的探索欲,這才是我們喜歡追懸疑劇的原因之一。

          所有,我們做設計時候也需要給予線索讓用戶去探索,讓用戶感受到內容源的充沛,用戶才會興趣去向下探索,從而提升用戶的使用時長,所以,大部分的APP在最后一個板式都會做成瀑布流的形式,因為他在滑動的時候會不斷給予用戶新的提示,告訴用戶你不斷往下滑,都會有新的內容。

          4.40 提升留存率的策略


          留存率是用于反映產品的的運營情況的統計指標,我們產品的留存越高,說明我們產品很活躍,真正穩步的向前邁進,那我們在優化留存的策略可以從以下幾個入手:1.優化初次上手體驗,2. 減輕用戶的使用負擔,用內容留住用戶,3.完善獎勵機制,4.增加沉沒成本

          4.41 優化初次上手體驗


          我們現在年輕人由于生活的節奏越來越快,在使用APP的時間往往都是碎片化的,用戶的持續注意力會越來越短,一個產品在初次上手的難度越高,能勸退的用戶就越多,用戶在上手一款產品的時候,首先會關注界面是否易于上手,能不能快速找到自己想要的功能,例如在登錄的時候設計驗證碼登錄或者第三方的快捷登錄,在新用戶初次進去的時候,對新功能有使用說明,用戶在初次體驗是很重要,有了第一次的良好體驗印象,用戶才會有第二次第三次的回訪率,這也是提升留存的第一步。



          4.42 減輕用戶的使用負擔,用內容留住用戶


          減輕用戶的使用負擔是指在核心功能盡量能讓用戶能用最短的時間去完成,讓用戶感受到產品對用戶是有價值的,做到用完即走,例如,微信就算其他功能做在有趣,上手在簡單,它的核心聊天功能做的不好,用戶發一條要等很久, 我相信也不會有人去選擇用它去聊天,早期的米聊,其他的功能和想法都是比較超前的,微信也是根據米聊的模式改進,但是早期米聊在即時通信領域不是很擅長,在發送消息的即時性上欠缺,導致失了先手,在手機聊天領域輸了給微信。

          在產品做好了核心功能,能夠吸引一批忠實的種子用戶,這樣我們在一些附加功能,才是錦上添花,例如現在無論什么產品都喜歡做社區功能,就是希望用內容去留住用戶的注意力,附加功能一般都是利用人性的七宗罪去設計布局的(傲慢、嫉妒、憤怒、懶惰、貪婪、淫欲和暴食。)例如微信的搖一搖是利用人想認識新的異性,擴大好友圈,汽車APP的社區功能會經常發一些車站的車模,來吸引精準用戶的注意力,這些都可以提升用戶再次來使用我們的產品。


          4.43 完善獎勵機制


          我們在工作中,一定遇到這樣的情況,就是公司會設置獎勵機制,當員工的績效達到一定的程度的時候,公司會給予員工一定的獎勵,反正則會觸發懲罰機制,這會使得員工為了完成目標而努力工作,從而達到目標得到的獎勵會觸發員工的“爽點”。

          這是因為這樣,所以越來越多的產品開始做自己的會員體系,在加入積分商城,最后在來個簽到獎勵,簡單來講,就是通過給予用戶一些“爽”的東西,來讓用戶幫我們的產品達成一些我們需要的商業目標,其中最主要的目的就是用戶的留存率.

          4.44  增加沉沒成本


          我們在去理發店去理發或者在去網吧上網的時候,他們都會希望我們去辦理一張會員卡,在往里面存在錢,有的是存多少送多少,當我們一但存錢辦理會員后,我們會惦記著我們有類似的消費的時候,都會想起我在那家店里會員還有余額,會員里的余額就是們遷移的成本。

          所以共享單車會推出月卡服務,視頻會員會有連續包月或者年卡套餐,甚至我們點外賣開通會員也能享受大額的折扣,讓用戶感覺占便宜的感覺,這些都是為了鎖定用戶,增加用戶的遷移成本,來達到讓用戶再次來我們產品來消費,從而提升用戶的留存率。

          4.50 提升產品活躍度發力點


          產品的活躍度也可以稱為產品的粘性,產品的留存率是計算單次打開產品的次數。而多次打開我們的產品也可以稱為產品的活躍度,或者用戶對我們產品的粘性,我們去優化產品的活躍的可以從以下幾個策略入手:1.讓產品看起來生機勃勃,2.主動與用戶溝通,3.讓用戶有自己的社交圈,

          4.51 讓產品看起來生機勃勃


          我們都會有湊熱鬧的習慣,看到街邊有人排長隊我們會不自覺的看過去,所以我們在新聞看到了網紅店會請人來排隊,都是為了營造該店看起來很有生機,人很多,很熱鬧。

          我們在做產品設計的時候也是一樣的,需要在設計層面讓用戶看我們的產品也是很有熱鬧,很有生機,例如我們產品的運營區的圖片會經常更換,讓人感覺有人在運營,每天都是不一樣的,當我們的用戶關注的人比較少或者沒關注的時候, 我們需要給用戶去推薦質量比較高KOL去讓用戶去關注,有什么活動我也可以主動推送給用戶,這都是可以讓我們產品看起來有活力,從而讓用戶可以多次打開,提升活躍度。

          4.52 主動與用戶溝通


          我們小時候通常會被家長教導,遇到熟人和長輩要主動打招呼,這樣會讓我們看起來比較有禮貌,我們生活中也樂于和有禮貌的人去交往,因為對方會看起來比較有親和力,比較好溝通。

          我們做設計的時候也是一樣,我們的產品也需要主動與產品去溝通,讓用戶去了解我們,例如,我們評論去外露,是在告訴用戶我們這個商品已經得到了大多數的肯定,也可以讓用戶感受到我們這個產品其實用的人還是不少的,比較有生命力。

          4.53 讓用戶有自己的社交圈


          不知道從什么時候起,無論是什么類目都有了自己的社區,淘寶有自己微淘,咸魚有自己的魚塘,求職找工作的APP也開放了求職討論專區,連墨跡天氣都開放了社區功能,讓大家可以拍自己的當地的風景來討論。

          為什么大量的產品開始做社區功能呢?因為他們希望自己的用戶能在自己的產品有自己的社交圈,只有用戶有自己固定的圈子,才會有用戶粘性,把路人用戶轉化為死忠粉,大家一起來討論,從而達到提升產品的活躍度。

          4.60 提升產品核心轉化率發力點


          核心轉換率一般我們的用戶需要走的流程比較多,我們需要按照實際情況去刪減合并流程,來保障用戶無障礙的可以付款下單,我總結一下幾個優化策略:1.優化核心流程,2.豐富決策信息,降低轉化顧慮


          4.61 優化核心流程


          我們以前在放學的路上一定熟知自己家到學校的各種小道,在巷子的玩玩轉轉,比走大路要節省很多時間,節省了很多時間。


          (1)合并優化流程


          我們在做電商APP的時候,想要讓用戶快速下單購買也是需要提升用戶的下單效率,例如我們以前輸入完密碼還需要點確認才能付款,現在我們在輸入完第6位數密碼的時候就直接付款了,現在手機的升級了指紋和面容識別后都不需要輸入,就可以直接付款了,點外賣的時候,會有一鍵搭配購買,這都把以前復雜的步驟給整合優化,提升用戶的下單效率。


          (2)復雜流程分開顯示,提升放棄成本


          已經簡化到最簡單的流程仍然步驟還是很多的時候,我們可以將流程分開展示給用戶,例如我們的流程一共有12項,已經是優化的最精簡了,這個時候,我們每個頁面顯示4個給用戶去填寫,如果用戶在第二個或者第三個想放棄的時候我們這個時候提示他,馬上就要完成了,用戶想著我之前已經填寫一頁了,反正也沒多少了,我就在堅持寫一頁把,例如我們常見的電商產品,現在都是支持先選購商品加入購物車,在需要購買的時候在提升用戶登錄并付款,避免用戶還沒選商品就被登錄界面給阻攔了。這都是可以提升核心轉化率的策略。

          4.62 豐富決策信息,降低轉化顧慮


          我們在超市購物時候,一般會先看看產品信息和生產品日期,然后在看看品牌,最后看看產品的價格,覺得合適就拿走付錢了,就算我們有挑選的空間,也會在這這家超市買,因為往往兩家超市隔的都是比較遠的,跑來跑去比較費力,但是我們在網上購物或者選東西的,換平臺成本比較低,也不怎么費力,所以我們需要將我們的能有的優勢都展示出來,降低用戶的下單顧慮。

          例如自如租房的優勢就是有管家服務,服務比較全,這是它的優勢,也是我們租房的時候比較擔心的,有時候房間洗衣機或者熱水器壞了找人也找不到,另外就是我們商品的銷量好也需要展示出來,那么多人都買了都沒問題,我也肯定可以放心的下單購買,我們產品或者平臺有什么優勢都可以展示全,去盡力打消用戶最后的心理防線,從而提升下單轉化率。

          5.10 確定增長指標


          當我們想做增長的時候,會遇到各種各樣的指標,經常我們會覺得提升哪個指標都會比較重要,然后我們在把各個指標一把抓的時候卻發現與目標卻是南轅北轍的背道而馳,最終是研究了很多數據指標,卻仍然沒做好增長設計。

          其中最關鍵的因素是我們每找到唯一的關鍵性指標,即OMTM,,全稱是 One Metric That Matters,最早提出這一概念的是《精益數據分析》這本書中提出的,后來肖恩·艾利斯在《增長黑客》一書將其稱為“北極星指標(North Star Metric)”,現在“北極星指標”已經稱為行業的通用詞匯。

          北極星指標即在紛繁的產品世界中照耀著我們去走向終點的指標,它是產品走向成功的關鍵且唯一的指標,我們整個組織的增長目標都應該統一指向北極星指標。那么北極星指標有什么作用?

          (1)明確目標:讓我們避免南轅北轍,,幫助我們確定現階段的產品最需要解決的問題,幫助我們找到清晰的目標,來促進用戶的增長。

          (2)集中資源:有助于減少內部的溝通成本,整合企業的人力、技術、資金等資源,明確方向,力往一處使,利出一孔。


          5.11 怎么確定北極星指標


          我們在前面說到北極星指標的重要性,我們前面也講到關于很多數據指標,我們怎么可以確定符合企業定位的北極星指標呢?

          北極星指標確立和我們自身的產品的屬性、行業是密不可分的,不同的產品和行業也對應著不同的用戶和盈利模式,用戶價值的不同和商業模式不同,所對應的關鍵指標也會不同,因此,我們要確定北極星指標首先要了解產品的受眾和我們的產品可以給受眾提供什么樣的價值來盈利、

          在過去互聯網高速的發展的過程中,也衍生出了不同品類的產品。但是總體來說,我們大致可以把互聯網產品給歸類為內容產品、社交產品、電商產品、工具產品、游戲等幾大類目。我們可以看看不同的產品所對應的北極星指標。


          5.20 怎么拆解增長指標


          如果我們確定了產品的北極星指標,那么接下來我們需要做的就是任務的分配工作以及各部門的協作與協調,讓每位成員能夠能明確各自的職責,這樣我們設立的北極星指標才可能完成,這里我推薦一種在各大企業都開始推行的一種工作方式OKR((Objectives and Key Results)工作法。全稱為目標和關鍵成果,是一套明確和跟蹤目標及其完成情況的管理工具和方法。

          OKR 這套系統最初由英特爾公司制定,在谷歌成立不久,被風投家約翰·都爾(John-Doerr)引入谷歌,并一直沿用至今。除了Google以外,現如今有很多公司在使用,國外Facebook,Twitter,Linkedin,國內我知道知乎,字節跳動,明道等在使用。

          通過這么多公司的使用充分說明了OKR方式的可行性,OKR在執行過程主

          要以季度為周期來進行管理。

          整個OKR制定是從上到下,逐級進行拆分的類似金字塔式結構,最終拆分到團隊或者個人OKR。


          OKR中的“O”代表我們這次工作的目標,例如:年度目標、季度目標、階段目標,“KR”是關鍵成果,就是這些目標可以通過哪些關鍵成功可以完成,然后還有一個Action(行動方案),這些關鍵成功需要通過哪些方案去達成。



          我們以一款內容社區類的產品為例子,我們這個產品的季度的北極星指標為提升用戶的粘性,那么可能分配到我們設計負責人手上的目標為提升用戶的留存率和簡化產品的操作留程,那我們設計師需要做的可能是新增一個簽到功能,讓用戶每天都記得簽到來領獎勵,或者簡化直達看帖區的交互步驟,讓內容能留住用戶

          所以我們北極星指標結合OKR工作法,如何在合適的階段做合適的事,如下圖所示


          5.30 GSM數據驅動


          GSM模型是Google的用戶體驗團隊提出的一種指標體系,與OKR工作法不同,OKR主要適用于整個企業的任務的排兵布陣,而GSN體系主要是用來量化用戶體驗的,GSM分別為目標(Goal)→信號(Signal)→指標(Metric),所以也簡稱GSM模型。

          但是由于我們國內的互聯網情況和國外的環境也是不一樣的,經過本土化的改良,我們國內的GSM被精細化為6步。

          我們來結合實際的案例來看下吧!

          例如我們我們公司的一款民宿的產品,我們的產品團隊接到的需求是提升我們產品的活躍度。


          (1)數據目標


          那我們的數據目標便是提升產品的活躍度,我們接下來的工作便是對產品的現狀進行分析,以方便我們開展接下來的設計工作。


          (2)用戶分析


          用戶分析主要是對我們現在的用戶進行一個比較全面的分析,了解我們用戶群體的使用習慣,發現用戶主要的查看內容和用戶的痛點,以方便我們做針對性的設計策略

          (3)發現問題

          我們對用戶問題的采集主要是通過軟件自帶的用戶意見反饋和APP store 的用戶評價,從這里去獲取的用戶對產品的評價都會是比較客觀的。

          我們通過評價可以發現,用戶對產品存在的一些隱形的坑的體驗不好,例如附近有裝修會影響人睡覺的之類的,那我們怎么去幫助用戶去避免這些問題呢?我們可以讓一些經常住民宿的人去寫一些住店的體驗日記,方便我們用戶去查看。


          (4)用戶表現


          有了住店日記,我們的用戶表現是什么樣的呢?我們的用戶在決定入駐一些民宿的時候,可以去多方位的去查看其他人發入住日記??梢宰龆喾矫娴膶Ρ?,這樣用戶不僅可以減少踩到坑,在對比的過程中,在使用我們軟件的時間也會更長了。


          (5)設計策略


          那我們怎么可以讓一些入住過用戶去寫一些入住日記呢?我們可以針對愿意寫的用戶寫的好的用戶的日記進行曝光,他可以獲得自己的粉絲群里,然后,你發一篇日記,我們會獎勵給你相應的金幣,這些金幣在積累后可以獲得優惠券,在下次入住后可以減免相應的入住費用,然后我們的產品可以發現寫的比較好的日記推送給沒有住過的新用戶,或者有意向、搜索過的用戶,方便用戶橫向對比,從而提升用戶的活躍度

          (6)衡量指標

          因為活躍度它是比較抽象的一個概念。我們怎么去驗證我們的設計策略呢?我們可以通過一些用戶的金幣的積累去驗證我們數據,這樣就會比較直觀。只有當有有用戶去發表住店日記,他才能獲得金幣的獎勵。


          增長設計需要精準的界定用戶的痛點,這是用戶增長的重要基礎,然后在聚焦核心的業務,不斷的強化痛點來驅動用戶的增長。

          隨著行業的發展,現在行業對Ui設計的要求也是水漲船高,我們每一次改動需要給企業去提供一個能說得通的理由,我們也需要不斷的去學習行業里的新的知識,來豐富我們的思維,這樣我們才能在寒冬中走自己的坦途,一起加油!


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

          截屏2021-05-13 上午11.41.03.png



          文章來源:站酷   作者:Endings

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          B端設計:智能銷售平臺界面優化方案

          seo達人


          “知識內容視頻化、主旋律電影娛樂化,所有的事物正在以大眾更能接受的方式進行變化,B端C化是未來「TO B」產品的新方向。B端產品普遍存在的問題是信息密度高和模塊化封裝度低。當C端的用戶體驗越來越好時,相比之下的B端體驗就顯得更糟糕。”為了解決這個問題,我們發起了這次改版,希望能提高銷售顧問的效率。

          界面中舊版的頁面是設計稿和測試環境,不涉及公司隱私,相關部分已進行涂抹處理。

          圖片較大,需要加載一會會~強烈建議電腦觀看。

           

          原文地址:站酷
          作者:牙線y2x

          轉載請注明:學UI網》B端設計:智能銷售平臺界面優化方案


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

                                                                      微信圖片_20210513163802.png

           

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

           

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

          做好新手指引,把握黃金半分鐘

          seo達人

          有很多心理學研究表明,一個人形成對別人的第一印象,只需要幾秒鐘而已。
          最常見的說法是 7 秒,但也實驗證明是 3 秒、5秒,甚至 27 秒的,這是因為對于第一印象的標準和人群、場合等因素的差異。

          但無論具體數字,用戶對產品形成第一印象的時間都很短,通常都會半分鐘內做出主觀判斷并得出結論。
          很多產品,尤其是手機 APP,打開后第一眼看到的是廣告閃屏,第二眼看到的是新手指引,再加上無可避免的加載延遲,這「黃金半分鐘」很快就消耗掉了。
          圖片
          所以,我建議至少第一次開啟 APP 時不要展示廣告閃屏(真的不差這點廣告費)。
          其次,如果真的需要新手指引,那么一定要好好設計,因為這將成為用戶判斷自己是否要繼續使用下去的關鍵。

           

          新手指引有很多形式

          最容易陷入俗套的,就是:

           

          圖文滑頁

          圖片
          掌上生活
          因為很多產品做這種新手指引,只是為了好看并不是為了真正幫到用戶,可就是有很多領導/甲方喜歡這種(也許主要因為顯得有檔次)。
          如果做得不好,容易像套模板一樣,會放一些不是很有意義的功能和更新說明,看起來更像廣告或者說明書,只會讓人想要快點翻完跳過。
          但如果做得好,也能美觀而且讓用戶知道使用產品的要點。
          手機 APP 的新手指引里,現在越來越流行的,是更加簡單的:

           

          操作示意

          抖音
          其實產品的功能特色,通常用戶應該在下載之前就知道了,或者至少也在應用市場/AppStore 看過,不然也不會稀里糊涂就下載。
          而手機 APP 應該設計得簡單且符合用戶習慣,根本不需要很長的圖文說明。
          所以經常只需要把用戶可以立即使用主要操作,重點示意一下就好了,免得用戶不小心被卡在第一步。
          不過這種形式通常也就是對簡單的 APP 有效,如果是復雜的 APP 或者是 PC 端工具類產品,需要一定學習成本的,可能就要用到:

           

          步驟指引

          圖片
          Salesforce
          這類型新手指引,通常會把一個重要功能拆分成好幾步操作,一步一步地引導用戶走一遍。
          這對于功能比較復雜的產品來說很有用,但是如果出現的時機不對,也容易讓用戶失去耐心想要跳過。
          這種新手指引走一遍都要花費好幾分鐘,所以最好是能夠提供跳出按鈕,因為可能步驟走到一半,用戶認為已經學會或者不想跟著做了。
          很多產品其實根本不適合這種新手指引,因為功能太多很難一一試用,例如 UI設計工具 Figma,總不可能先帶領用戶把編輯功能都試一遍吧。
          這時與其浪費時間讓用戶跟著操作,還不如選擇更加高效的:

           

          視頻介紹

          Figma
          把重要功能集合成一個視頻(或者動圖),讓用戶快速瀏覽一遍,比把步驟拆分出來讓用戶跟著做要高效多了。
          尤其如果在功能數量很多,卻難度不高的情況下。
          就算有的功能用戶看過一遍也未必會用,也可以在需要的時候自己去搜索尋找方法。
          而這視頻還能用作宣傳,可以一舉多得了。
          但還是有些產品不適合這種新手指引,因為用戶的需求或者熟練程度相差太大了,做一個視頻很容易顧此失彼。
          例如 PS 這類工具,小白用戶和高手用戶的需求根本無法用一個視頻覆蓋,更好的方法是使用靈活性更強的:

           

          學習課程

          圖片
          Photoshop
          當產品太復雜新用戶必須學習,而用戶需求差異太大無法統一成單一的新手指引時,那還不如先讓他們自己選擇想學什么。
          可以做成一套從小白到高手,按照功能拆分整理的系統課程,無論用戶處于什么階段都能快速找到自己需要的。
          這樣,新手指引就和操作說明沒有什么很大區別了,還可以順手搞一個學習社區。

           

          新手指引的注意事項

          盡量整合避免重復

          以上幾種新手指引,建議如非必要只選一種,否則用著用著可能突然冒出一個新手指引,想想都煩。
          真有那么多需要指引的,可以考慮弄一個新手指引的常駐入口,用戶需要的話可以隨時找到。

           

          允許跳過

          雖然前面提過了,但這里還是再次強調一下:任何新手指引都不能強制,因為:
          新用戶≠新手
          也就是說,其實產品本身根本無法得知一個用戶是不是新手,只能判斷是新手的概率是不是夠大。
          如果凡是新用戶都要展示新手指引,會讓很多非新手的新用戶反感。

           

          在設計初就考慮到

          何況新手指引如果有,很可能會占據用戶對產品形成第一印象的「黃金半分鐘」,可以說是非常關鍵了。
          所以新手指引最好被當成產品的一部分,在考慮用戶旅程或者體驗流程時,一并加入。
          而不應該是設計完產品后,發現太復雜用戶不懂,再思考要不要加上。

           

          專注需求而非功能

          一個產品的功能通常很多,如果你在設計新手指引時,總想著要介紹什么功能給用戶,那么你會發現想「塞給」用戶的內容太多了。
          新手指引的內容太多,結果只會讓人想要跳過。
          所以建議在考慮新手指引的內容時,只考慮用戶當時最迫切需要的是什么,否則再重要的功能,也沒有必要加上。

           

          思考總結

          說來慚愧,過去我自己也經常到最后才考慮新手指引這個問題。
          不過主要原因不是我覺得不重要,而是 C 端產品一開始想要盡量把產品做得簡單好用,不需要新手指引。
          但如果是 B 端/工具類產品,就真的不該抱著這樣僥幸的心理了。
          因為仔細想想,我自己每次試用新產品時,也大概率在新手指引的階段,決定要不要退出卸載的,不知道大家是不是和我一樣?

           

          原文地址:體驗進階(公眾號)
          作者:設計師ZoeYZ

          轉載請注明:學UI網》做好新手指引,把我黃金半分鐘



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

                                                                      微信圖片_20210513163802.png

           

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

           

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


          總監說:你做的啥設計?方向全錯了!!!

          seo達人

          同學有這樣的困擾,一個設計師分享他的設計,沒想到被這個總監直接噴了說完全不專業,那么怎么做才專業?今天聊下下部分。

           

          1.符合情感的色彩 

          圖片

          如果你在設計中使用顏色,一定要考慮色彩的整體和諧性以及色調。色彩明度不同,色調不同,帶來的視覺感受是完全不一樣的,比如紅色,有的紅色很個性化,有的紅色很現代,有的紅色比較性感。我們需要掌握不同顏色的性格特征。

          這里推薦一個工具就是-色彩意象尺,它能幫你了解不同顏色的色彩情感。一般在做品牌的過程中用的比較多。

          圖片

          色彩意向尺,能告訴你不通過顏色的情感是什么樣的。在確定一個品牌色,或者配色時候都可以用到。給大家看一個定義品牌色的案例。

          舉例說明

          比如要做一款全球的社交產品,主要用戶是00后的,整體的品牌個性是時尚,年輕的方向。那么可以從這個尺度表里面去挑選色彩位置,再進行配色調試。

          圖片

          第一步就從整個色彩尺度表空間里面,找到了這個色彩的位置。找到了一個基礎顏色,紅色,黃色。

          看看競品的色彩方向

          圖片

          比如發現競品其實都趨向于紅色方向,那么也可以從策略上,我們避開紅色方向,最終來定出一個黃色作為整體品牌色。

          根據人群喜好調整配色

          圖片

          圖片

          確定品牌色方向:黃色

          在確定方向后,就要思考,我們的用戶比例,是男性多還是女性多,加入我們的用戶是男性多,可以根據上圖男女喜好去做色彩傾向。比如男性喜好色彩大膽一些配色,那么基于黃色去做一些黃色的調整。

          圖片

          調整黃色的明度和飽和度,讓整體更大膽一些,最后定下來一個偏糖果玉米的黃色。

          以上就是一個大概如何定義品牌色過程,那這中間其實有很多知識點,可能是同學們第一次聽說,比如:品牌個性維度,色彩情感,以及色相意向尺,不過沒關系,今天大家只要通過這篇文章,了解的這些理論。然后在你的項目和工作中,不斷反復運用,相信我,你有一天也可以從0到1去定義一些很經典的配色。

          圖片

          上圖就是一個使用色彩意向尺的范案例,通過產品定位優雅高級,從色彩意向尺里面選擇中性色去運用的一個案例。

          圖片

          分享給大家一個網站,這個網站匯聚了全球所有大公司的品牌色。你在做品牌色時候,都可以去參考學習。

           

          2.有品質的圖片 

          圖片

          片來源:設計日記私塾班學員-小冉子

          圖片是做設計非常重要的工具,沒有一個工具比圖片簡單強大。圖片是最被設計師忽略的一個工具。如果你會使用圖片,能很好幫你做設計提案,幫助你很好的把產品氣質和調性傳遞出去。

          圖片

          片來源:設計日記私塾班學員-小冉子

          比如今天我們設計想表達安全,那么怎么去體現,怎么去和同事領導表達安全的概念。圖片就是一個很好的方式。比如安全的人,警察,保鏢。安全的事情手機鎖屏解鎖,戴口罩等等。安全的物體有保險箱,指紋鎖等等。也能通過圖片找到一些視覺表達方式,比如塊面感像保險箱一樣,比如穩重的字體,對稱的構成形式等等。

          圖片除了用在情緒板去表達你的設計意圖,在設計中好的圖片能幫你傳遞出清晰的概念,能幫你視覺加分,在視覺上提升品質。

          圖片

          如上圖就是一個攝影照片,那么運用到設計中,和設計很巧妙結合,效果就會非常好。

          圖片

          合成后的效果圖非常好,汽車和風景的結合也比較融洽。

          圖片

          特別在電商設計中,圖片選的好,符合產品氣質。整體的銷量還有設計效果都會提升。

          圖片

          設計師合理的運用圖片,通過圖片去表達設計概念。通過圖片的選擇幫助產品提升品質,最終達到設計目標是每個設計師都需要具備的能力。

           

          3.帶隱喻且合理的圖標 

          圖片

          在頁面中合理運用圖形很重要,現在圖標不僅僅是表達含義,更多時候也是設計圖形的象征,圖標也是有情感的。不同圖形的圓角大小,質感不一樣,傳遞的氣質也會完全不一樣。

          圖片

          斷口和疊加色彩的圖標,給人感覺輕松活潑,傳遞出親和力。

          圖片

          這種就是比較硬朗的圖形,一般在視覺上給人穩定,品質的感受,適合于金融產品,偏硬朗一些的產品設計。

          圖片

          另外在圖形的設計上,要遵循用戶平時的習慣,圖形要和他日常生活中的事情能聯系起來,也就是常說的隱喻,圖形要有合理的隱喻。

           a

          4.明確按鈕規則 

          圖片

          按鈕是產品設計中出現頻率最多的,按鈕主要是行動點,所以我們有必要明確每個按鈕的含義和動作。

          圖片

          按鈕的視覺樣式也很多,有填充的,線框的,色塊描邊的,還有文字按鈕。在產品設計中,需要明確每個按鈕的使用場景和含義,比如一般的主行動按鈕一般用品牌色填充,比如去購買,下一步等等。一般輔助操作用白色快描邊的方式處理,這樣更輕量化。警告類的操作一般運用紅色按鈕,無效按鈕一般用灰色等等。

          圖片

          如果沒有很明確的按鈕指引規范,就會出現設計不合理,功能不合理。

           a

          5.視覺對齊準則 

          在設計時候,有時候需要設計的很精準,比如間距規則,圖形大小都要遵循數學原則,也就是像素眼對齊。但是有些場景,可能需要進行視覺矯正。純粹的數學對齊往往看起來不和諧。

          圖片

          NAVER閃屏,字體是偏上一點設計,看起來更加和諧。如果兩邊都是一比一會有些壓抑。

          圖片

          上圖兩個圖標,左邊的是數字對齊,但是看起來圖片有點偏左了,右邊是進行視覺對齊調整后看起來和諧很多。

          圖片

          上圖左邊正方形和圓形的大小相同,圓形看起來就特別的小,所以在這種情況下。圓形要比正方形更大一些。

          圖片

          經常會用到字體,有時候粗體和細體會一起使用。如果同樣字號的粗體和細體放在一起就會感覺粗體更大。這個時候其實就需要將細體微調整1px或者2px的大小,讓其看起來更合理。

          圖片

          同樣的在中文和英文數字組合時候,中文會比數字看起來大很多,會有些不均衡。這個時候可以把數字稍微加大一點,這樣看起來就會均衡很多。

           

          最后 

          以上就是我總結的一些視覺標準準則,也是一個設計合格的基礎,當然設計遠遠沒有完美的,沒有100分的設計,只有不斷優化的設計,希望這兩篇關于如何從哪幾個維度做好設計,能讓你更好的了解設計,并在工作中運用。

           

          原文地址:我們的設計日記(公眾號)

          作者:sky




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

                                                                      微信圖片_20210513163802.png

           

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

           

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


          node.js搭建服務端項目

          前端達人



          Node.js 是一個基于 Chrome V8 引擎 的 JavaScript 運行時(即node.js不是一門語言也不是庫和框架,它是一個JavaScript運行時環境)。 用于方便地搭建響應速度快、易于擴展的網絡應用。Node.js使用事件驅動,非阻塞I/O 模型而得以輕量和高效,非常適合在分布式設備上運行數據密集型的實時應用。

          安裝node

          直接到官網上下載自己電腦的版本,官網地址:https://nodejs.org/zh-cn/
          安裝完成之后可以通過在終端上運行

           node -v //查看是否安裝成功,成功的話會展示當前安裝版本 npm -v //安裝node的時會連同一起將npm安裝包一起打包安裝了,npm是nodejs的包管理器 npm install -g cnpm --registry=https://registry.npm.taobao.org //安裝淘寶鏡像可提高下載包工具的速度 

          Express框架

          Express 是一個簡潔而靈活的 node.js Web應用框架, 提供了一系列強大特性幫助你創建各種 Web 應用,和豐富的 HTTP 工具。

          使用 Express 可以快速地搭建一個完整功能的網站。express 是nodejs的一個web框架,使用express,能夠更便捷的使用nodejs.

          安裝

          第一步:安裝express

          npm install express --save -g 

          第二步:安裝express-generator

          npm install express-generator --save -g //express-generator是express應用生成器,相當于express 的骨架 

          第三步:打開終端進入你將要建立項目的文件夾中創建你的項目

          express expressDemo //你要建立的項目名稱 

          第四步:安裝:npm install
          第五步:啟動項目:npm start
          這樣你的第一個express項目就創建成功了

          express-路由

          Express框架建立在node.js內置的http模塊上。http模塊生成服務器的原始代碼如下。

          var http = require("http"); var app = http.createServer(function(request, response) { response.writeHead(200, {"Content-Type": "text/plain"}); response.end("Hello world!"); }); app.listen(3000, "localhost"); 

          上面代碼的關鍵是http模塊的createServer方法,表示生成一個HTTP服務器實例。該方法接受一個回調函數,該回調函數的參數,分別為代表HTTP請求和HTTP回應的request對象和response對象。

          Express框架的核心是對http模塊的再包裝。上面的代碼用Express改寫如下。

          var express = require('express'); var app = express(); app.get('/', function (req, res) { res.send('Hello world!'); }); app.listen(3000); 

          比較兩段代碼,可以看到它們非常接近。原來是用http.createServer方法新建一個app實例,現在則是用Express的構造方法,生成一個Epress實例。兩者的回調函數都是相同的。Express框架等于在http模塊之上,加了一個中間層。

          中間件

          簡單說,中間件(middleware)就是處理HTTP請求的函數。它最大的特點就是,一個中間件處理完,再傳遞給下一個中間件。App實例在運行過程中,會調用一系列的中間件。

          每個中間件可以從App實例,接收三個參數,依次為request對象(代表HTTP請求)、response對象(代表HTTP回應),next回調函數(代表下一個中間件)。每個中間件都可以對HTTP請求(request對象)進行加工,并且決定是否調用next方法,將request對象再傳給下一個中間件。
          Express 應用程序基本上是一系列中間件函數調用。
          中間件函數可以執行以下任務:

          • 執行任何代碼。
          • 對請求和響應對象進行更改。
          • 結束請求/響應循環。
          • 調用堆棧中的下一個中間件函數。

          Express 應用程序可以使用以下類型的中間件:

          • 應用層中間件
          • 路由器層中間件
          • 錯誤處理中間件
          • 內置中間件
          • 第三方中間件

          應用層中間件
          使用 app.use()app.METHOD() 函數將應用層中間件綁定到應用程序對象的實例,其中 METHOD 是中間件函數處理的請求的小寫 HTTP 方法(例如 GET、PUT 或 POST)。

          app.use('/user/:id', function (req, res, next) { //在 /user/:id 路徑中為任何類型的 HTTP 請求執行此函數。 console.log('Request Type:', req.method); next(); }); app.get('/user/:id', function (req, res, next) { res.send('USER'); }); 

          路由器層中間件
          路由器層中間件的工作方式與應用層中間件基本相同,差異之處在于它綁定到 express.Router() 的實例。

          var router = express.Router(); 

          錯誤處理中間件
          錯誤處理中間件函數的定義方式與其他中間件函數基本相同,差別在于錯誤處理函數有四個自變量而不是三個,專門具有特征符 (err, req, res, next):

          app.use(function(err, req, res, next) { console.error(err.stack); res.status(500).send('Something broke!'); }); 

          有關錯誤處理中間件的詳細信息,請參閱:錯誤處理。

          內置中間件
          自 V4.x 起,Express 不再依賴于 Connect。除 express.static 外,先前 Express 隨附的所有中間件函數現在以單獨模塊的形式提供。請查看中間件函數的列表

          第三方中間件
          使用第三方中間件向 Express 應用程序添加功能。
          安裝具有所需功能的 Node.js 模塊,然后在應用層或路由器層的應用程序中將其加裝入。
          列如cookie-parser中間件函數
          首先安裝cookie-parser。 npm install cookie-parser

          var express = require('express'); var app = express(); var cookieParser = require('cookie-parser'); // load the cookie-parsing middleware app.use(cookieParser()); 

          MongoDB數據庫

          MongoDB 是一個基于分布式文件存儲的數據庫。由 C++ 語言編寫。旨在為 WEB 應用提供可擴展的高性能數據存儲解決方案。
          MongoDB 是一個介于關系數據庫和非關系數據庫之間的產品,是非關系數據庫當中功能最豐富,最像關系數據庫的。

          你可以在mongodb官網下載該安裝包,地址為:https://www.mongodb.com/download-center#community。
          以下以Mac版本為例講解

          1,打開終端修改環境變量

          echo $PATH 

          你可以查看到你當前的環境變量下面的文件


          image.png

          2,選擇其中一個文件夾進去然后將你的mongodb的安裝包路徑映射到此文件上

          ln -s 你的MongoDB的安裝包路徑/bin/mongo mongo 

          3,你創建一個數據庫存儲目錄 /data/db:

          sudo mkdir -p /data/db 

          4,啟動 mongodb,默認數據庫目錄即為 /data/db:

          sudo mongod 

          5,再打開一個終端執行以下命令連接

          mongo 

          這樣你就啟動連接上了本地的數據庫
          你可以下載安裝mongosBooster數據庫管理你的數據,地址為https://nosqlbooster.com/downloads

          mongoose

          mongoose是nodeJS提供連接 mongodb的一個庫. 此外還有mongoskin, mongodb(mongodb官方出品). 本人,還是比較青睞mongoose的, 因為他遵循的是一種, 模板式方法, 能夠對你輸入的數據進行自動處理. 有興趣的同學可以去Mongoose官網看看.
          安裝mongoose

          npm install mongoose --save 

          Mongoose里面有幾個基本概念.

          • Schema: 相當于一個數據庫的模板. Model可以通過mongoose.model 集成其基本屬性內容. 當然也可以選擇不繼承.
          • Model: 基本文檔數據的父類,通過集成Schema定義的基本方法和屬性得到相關的內容.
          • instance: 這就是實實在在的數據了. 通過 new Model()初始化得到.
            在保證你已經啟動連接上了mongoDB時你就可以使用了,列如以下Demo
          const mongoose = require('mongoose'); mongoose.connect('mongodb://localhost:27017/test'); const con = mongoose.connection; con.on('error', console.error.bind(console, '連接數據庫失敗')); con.once('open',()=>{ //定義一個schema let Schema = mongoose.Schema({ category:String, name:String }); Schema.methods.eat = function(){ console.log("I've eatten one "+this.name); } //繼承一個schema let Model = mongoose.model("fruit",Schema); //生成一個document let people = new Model({ category:'apple', name:'apple' }); //存放數據 people.save((err,apple)=>{ if(err) return console.log(err); apple.eat(); //查找數據 Model.find({name:'apple'},(err,data)=>{ console.log(data); }) }); //查詢所有數據 people.find(function(err,ret){ if(err){ console.log('查詢失敗') }else{ console.log('查詢成功') } }) //按條件查詢符合條件的數據 people.find({},function(err,ret){ }) //按條件查詢單個數據 people.findOne({},function(err,ret){ }) //刪除數據 people.remove({uesername:'zhangsan'},function(err,ret){ }) //根據ID刪除數據 peop.findByIdAndRemove({},function(err,ret){ }) //更新數據 people.findByIdAndUpdate('dfsfs',function(err,ret){ }) }) 

          到這里, 實際上, mongoose我們已經就學會了. 剩下就是看一看官方文檔的API–CRUD相關操作



          作者:orange_9706
          來源:簡書



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

          截屏2021-05-13 上午11.41.03.png

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



          優秀網站設計賞析

          前端達人

          很多網站仍然在使用老舊的頁面設計,比如國內一些企業官網,萬年不變的相類似的模板,外國的則是hero頁面,帶CTA按鈕,三欄式的布局。這些設計不能說是不好的設計,很實用,用戶能夠預測展示的內容,也容易找到需要的內容。但是正因為可預測,用戶沒有新鮮感,沒有期待,所以我們找了一些不僅打破常規,也依然有良好用戶體驗的網頁設計。

          藍藍設計(北京蘭亭妙微科技有限公司)是一家專注而深入的UI設計公司,公司對UI設計的追求一向很高,致力于為卓越的國內外企業提供卓越的手機app/安卓ui設計、軟件界面設計、網站設計,用戶研究、交互設計服務。

          接下來是精彩的UI設計賞析

          WechatIMG1969.jpegWechatIMG1970.jpegWechatIMG1971.jpegWechatIMG1972.jpegWechatIMG1973.jpegWechatIMG1974.jpegWechatIMG1975.jpegWechatIMG1977.jpegWechatIMG1976.jpeg






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

          截屏2021-05-13 上午11.41.03.png

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



            更多精彩文章:

                 ui界面設計之網站設計案例欣賞(一)

                 超贊的創意頁面排版設計,打造“視”不可擋的網頁設計

                超贊的網頁設計+精美流程圖賞析

                 超贊的網站設計賞析


          金融類產品如何「拔高」用戶體驗?

          資深UI設計者

          真正出色的金融產品是基于可用性,在成熟的數字生態系統中,能持續滿足用戶的特定需求。在UXDA每年交付的數十個UX/UI設計中,我特別選出了一些重要的作品來舉例,與大家探討設計對塑造金融產品方面的影響。


          1/10 從標準化到量身定制

          過去20年來,人們認為在創建數字金融產品時設計發揮的作用微不足道,這種刻板印象根深蒂固。大多數情況下,甚至被認為是出于營銷目的的包裝,關注點也多在產品功能和特性上。


          使用標準化設計模板來加速產品開發是常見的做法,但這也解釋了為什么許多金融服務看起來如此相似——平淡、乏味且對用戶不友好的。


          10年前出現的金融科技,打破了人們對設計的偏見,企業用其來吸引客戶,并試著將設計潛力發揮到最大。而現在,進入金融行業的新玩家更專注于獨特創新的設計,來凸顯品牌身份。


          大多數客戶厭倦了乏味又復雜的模板設計,量身定制作為一種全新的趨勢應運而生,不僅為產品注入了新鮮活力,還令金融公司的市場飆升。


          「Private Wealth Systems」的財富管理平臺就是一個很好的例子,通過量身定制的設計,為超高凈值人士 (UHNWI) 提供他們對精致生活所期望的奢華體驗。

          該平臺的優勢在于它旨在解決用戶每天遇到的痛點,關心客戶財富的同時并盡最大努力協助其管理,而量身定制也增強了品牌與客戶之間的情感聯系。敢于打破禁忌并投資于大膽現代設計的金融機構知道,隨著客戶忠誠度和參與度的提高,肯定也會帶來回報。

          Takeaway

          根據品牌VI創建的產品界面,可以使其在日后的競爭中脫穎而出。


          2/10 從有限單一功能到多功能超級應用

          向移動模式轉型時,集中出現了幾家金融科技公司,他們的優勢在于功能單一,非常簡單易懂。對客戶來說,這就像一股新鮮空氣,因為當時的銀行服務功能既復雜多又對用戶不友好。


          當今的金融產品,正在不斷擴大外部服務,打破功能壁壘?!窻evolut」就是一個很好的例子,它不斷擴展功能,逐漸成為一個超級應用程序。


          單一模式的設定確實很簡單,但隨著用戶期望的增長,以同樣方式呈現更多功能的需求也在逐步增加。對用戶來說,如何用一種既直觀又體驗佳的方式,展示100多個功能呢?


          既要為客戶提供解決功能,又不能在使用體驗上打折扣,這并不簡單。需要UX架構師和經驗豐富的UI設計師密切合作,共同面對挑戰——創建直觀的產品架構與合乎邏輯的、用戶友好的界面布局。


          來看一個UXDA的多功能銀行應用程序例子:我們將區塊鏈、游戲化、機器人咨詢、語音處理、生物識別、大數據等數十個功能整合進同一程序內,打造銀行即平臺的應用理念。

          越來越多的功能服務不斷涌現,可用性高的產品更容易吸引用戶。這就解釋了為什么金融機構都在努力創建自己的新銀行或超級應用程序,但展示的服務內容也需要與公司的發展方向保持一致。


          根據我們的經驗,品牌希望在產品中包含大量「現代」功能,他們相信這會使解決方案在競爭中脫穎而出。但也可能會適得其反,建議在UX研究階段做好取舍,以便確定更符合品牌受眾的功能。非常成功的金融產品都是基于品牌受眾的特定需求設計的,這些需求為客戶提供額外的價值。

          Takeaway

          從超級應用程序設計中學習實踐經驗,保持簡單性和可用性的同時,再進行產品拓展。


          3/10 從表格式界面到游戲化

          相信多數人看到銀行后臺,都會驚訝于它的復雜。員工必須同時使用多個軟件程序,按照說明輸入代碼才能進行工作。操作系統也需要數月時間去學習,甚至用了很多年,還是無法全部記住。


          由于涉及到大量的客戶信息,這些解決方案全靠數據驅動,非常復雜。許多銀行都在努力降低后臺成本,卻沒有意識到對客戶體驗的影響。這導致了一個悖論:銀行在數字化轉型中投入大量資金以改善用戶體驗,而削減銀行核心系統的成本又對客戶服務造成損害,銀行員工的負面體驗又會影響服務質量和最終客戶滿意度。


          后臺系統的改進可以顯著提高服務質量和速度,從而使客戶更滿意。以用戶為中心的設計方法,在當今創建金融產品中也越來越流行,它不僅可以應用于外部銀行產品,還可以應用于內部解決方案。


          提高內部工作效率的一種方法是使用游戲化設計。這種方法使整個工作流程更加現代化,從而實現了工作流程的轉變,如「ITTI Digital」所示。

          為了使其以用戶為中心,我們將大量繁重的數據翻譯成人類語言。員工的學習曲線從幾個月縮短至幾個小時,人為失誤的可能性顯著降低,服務速度、員工效率和客戶滿意度都大幅提升。

          此方案在IF的數字金融服務設計大獎中也得到了認可


          金融機構將員工視為內部用戶,為他們創造盡可能好的體驗,相當于也為銀行客戶提供了最好的服務。認為游戲化和銀行業務沒有共同之處的想法太過時了,游戲化不僅提高了員工的生產力和積極性,也讓結果變得更好。

          Takeaway

          嘗試應用游戲化來激勵用戶,還能使最無聊的金融產品煥然一新。


          4/10 從有限的功能到完整的體驗

          5年前,移動應用程序還被當做非主流的使用渠道,但今天它卻滿足了大多數客戶的要求。令人驚訝的是,移動程序的功能非常有限,用戶體驗也相當差,甚至一些銀行服務只在分行提供。疫情反應了嚴峻的現實——金融業還沒有做好迎接數字時代的準備。


          為改善金融品牌的客戶體驗,需要對移動應用程序進行全面的設計審核,以確保遠程用戶可以訪問所有服務和功能。一家成熟的金融科技公司應快速找出適合客戶的遠程體驗設計方法,而不是冠冕堂皇的借口。


          設計「阿拉伯聯合銀行 (UAB)」移動應用程序時,我們的主要挑戰是簡化所有的日常功能操作步驟,使其簡單高效。

          流程的優化使用戶更容易瀏覽應用程序,探索新的可能,同時也鼓勵用戶與程序互動,而不是聯系銀行或直接去分行。新應用僅發布數月,在App Store 和Google Play的下載率都大幅提升。

          Takeaway

          找到缺失的功能并完善它,建立一個完整的使用流程。


          5/10 從傳統企業到數字化轉型

          越來越多的老牌銀行企業敢于走出舒適圈,挑戰自我,踏上數字化轉型之路。在金融科技的啟發下,現有企業為用戶體驗設計注入了生命力,從而創造出令客戶驚嘆的產品,激勵用戶長期使用。


          他們與內部或是外部的UX/UI設計師合作,整合公司各層級的設計方法和組織文化。這種融入了設計角色的團隊,以用戶為中心快速轉型,成為金融科技獨角獸的有力競爭對手。


          「VTB銀行」是一家被數百萬人信賴的銀行,升級用戶體驗后,產品重獲新生,也體現了企業對線上銀行用戶的重視。

          「VTB銀行」的用戶反饋說:新升級的產品更貼合他們的生活方式了;銀行員工們也表示,緊跟時代變化的品牌,更能為客戶提供最優的服務。

          Takeaway

          設計至上,跳出傳統,才能打造出一流的數字產品。


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

          截屏2021-05-13 上午11.41.03.png



          文章來源:站酷   作者:UX辭典

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          日歷

          鏈接

          個人資料

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

          存檔

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