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

          首頁

          AI 時代的設計

          ui設計分享達人

          這是5月參加阿里設計周“智能與計算”分論壇后的感想小結,因為論壇大部分在講算法和實現方式,所以在這里我就其中的AI與設計相關部分做一些深入分享。undefined

          我的思路大概分為三個部分:AI時代的來臨;AI如何影響設計;未來的設計何去何從。

          undefined

          undefined

          第一部分:聊聊AI時代來臨,設計的世界發生了什么變化?

          undefined每個時代的設計都有不同的定義,農業和工業時代的設計更多是指設計師通過手工制作的方式闡釋自己對美感和藝術的理解。

          undefined到了信息時代,設計除了要考慮美感,還要考慮是否實用和好用。設計的對象開始從真實世界轉向數字世界,設計思想開始考慮以用戶為中心的設計;設計方向也增加了很多領域,包括都多媒體藝術、游戲設計、網頁設計、移動應用設計等。

          undefined在人工智能時代下,AR設計、智能硬件逐漸發展,設計的改革更多考慮的是如何將真實世界和數字世界進行融合,如何在自己產品上更好地闡釋藝術、美感和實用性。

          第二部分,AI如何影響設計,設計因為人工智能而產生了哪些改變呢?

          結合論壇的內容,我覺得從以上五個方面產生了較為深遠的影響。

          人工智能幫助設計師解決在創意過程中面臨的一系列問題,將重復勞動變得自動化 ,節省設計師大量的時間,減輕設計師的工作量。

          undefined數據驅動自動生成,取代人工建模,減少了設計的時間成本。通過組件標準化,來構建三維幾何,然后geometry格式入庫,最后由渲染引擎繪制。

          undefined再比如,雙11期間有1.7 億個BANNER,都來自阿里的“鹿班”AI設計系統。設計數據—機器學習、訓練模型—生成設計結果并評估。如果這些工作量由人工來完成,那么設計師真的就成了“沒有感情的作圖機器”了。

          當今社會,隨著產業智能的發展,在這個變革中,挑戰不單單來自技術,也來自客戶對智能數字體驗的極致追求。這給開發人員和設計師都提出了全新的難題,在可視化領域,通過技術和設計兩個角色更緊密的捆綁,產生了讓人欣喜的化學反應。

          從原始數據到圖表并不是直接的,它需要經過交互的分析,得到指標結果,最終以可視化圖表呈現,而呈現的視覺方式是多樣化的。

          這就是所謂的兩種數據,三層講述

          第一步是原始數據的準確轉譯,工具需要數據對接能力,即對現狀的講述。

          第二步是分析過程,從腳本模式跨入數據驅動,讓數據的分析變得可知可信。

          第三部是觀點數據的表達,也就是創作強化,將結論以可視化的多樣形式被表達。

          這是根據地圖的原始數據得到的多種可視化設計方案,同一份原始數據,卻得到了不同的形式表達。

          因為僅僅有準確的數據結論是不夠的,因為數據需要更好地被講述和表達,如果僅僅將數據呈現給用戶,那么理解難度將會大大提高,而設計是為了讓產品變得更加容易使被理解和使用。

          第二點,體現在建筑的三維可視。

          首先,在二維地圖選取建模范圍,通過智能化的處理,根據數據構建初始的三維地圖。

          然后通過數據聯動,將城市建筑虛擬還原。

          整個過程從數月—> 數周—> 數天,時間大大縮短,人力成本減少,釋放更多的精力去進行創意工作。

          建筑三維化的應用:比如車道級地圖。

          相比于傳統地圖,車道級地圖導航在信息精細度、定位準確性、動態信息豐富度上有大幅提升。

          undefined車道級導航能清晰顯示道路上的虛實標線、自己的車行駛在哪條車道上,還能在地圖上看到車身攝像頭和雷達檢測到的周圍車輛、錐桶、防撞桶等。

          當設計對象從單個產品轉變到用戶的經歷和當前環境時,設計師不能只考慮自己的產品體驗,需要從大局出發,思考每個產品之間的聯動,考慮不同場景下自己的產品如何服務用戶以及如何與其他產品聯動。產品設計從單體變成一塊需要考慮兼容上下左右外部環境的拼圖。

          智能化的場景的改變對設計有哪些影響呢,我們來看這張圖:設計的場景從有形—>無形、靜態—>動態、永恒—>瞬間的轉變。體驗設計的趨勢從GUI到TUI(實體交互),再到Radical Atoms,場景的改變對設計的影響維度不是單一的。

          undefined

          設計場景在AI時代不僅局限于手機,還涉及到實時場景的設計情況。

          比如谷歌的實時翻譯、語音翻譯。輸入與輸出是同步進行的,這就對設計提出了新的要求。

          此外,還有語音智能VUI,徹底打破了以往的交互體驗,改變了人和工具之間的互動關系,反向塑造著人類的認知方式和學習行為。下面來看一個小愛5.0案例:

          undefined

          對話是人與人之間交換信息的普遍方式,語音交互設計涉及系統學、語言學和心理學,因此它比 GUI的交互設計更加復雜。

          undefined體驗設計經歷了PC時代、Mobile時代,現在進入IoT體驗時代。設計的解決方案與技術的發展息息相關,設計和技術互相促進帶來新的體驗革命,設計師一直在探討和實踐在新技術環境下的新體驗設計,并基于出行、醫療、社區、政務等行業持續挖掘服務聚合模式與場景體驗的創新。

          在新零售的場景下,購買和支付流程發生了改變,這就需要設計師重新思考消費者的心理地圖。例如無人零售、Amazon Go、支付寶IOT支付等等。下面來看一下Amazon Go的案例:

          undefined

          如何讓用戶使用更便捷、體驗更順暢;要向用戶提供什么樣的服務,如何讓用戶注意到我們的產品,如何向他們傳遞企業的服務價值和特點,這是IOT新零售下需要設計深入研究的方面。

          在云端實現企業產品的全區域管控,監控的設計視覺和交互又是不一樣的,比如論壇上的案例:荷魯斯之眼、全區域覆蓋的云監控等等。

          通過對多個實體空間中的數字設計探索,重新塑造人與空間的交互界面,提升人們對于空間的使用體驗。下面舉個例子:

          AT&T discovery district是一個數字化的互動商業社區。

          它從重新審視建筑本體開始。通過虛實和光影的變幻,營造出了實體空間體驗,空間本體就是對話的那個界面。實體空間和數字內容的結合,構建出人與建筑之間新的交互界面。

          廣場的數字球體入口,人的位置和數量變動,球體內的燈光也會跟隨變動。

          undefined

          人工智能促使了交叉學科的工種產生:數字體驗設計師、創意工程師。這兩種職業是做什么呢?面對正在到來的智能時代,體驗設計師和創意工程師將共同面對“AI”這一全新的命題,在智慧工地、智慧教育、數字警務室、神經符號AI等應用中,提煉出智能感設計方法、利用圖形技術能力自研產品并賦能業務。

          數字世界中的設計師:橫跨了藝術、文化、科學、商業多個學科;從傳播學、心理學、應用科學和統計學進行用研,去解決用戶遇到的問題。

          它不僅涉及到需求分析和產品設計,還貫穿至產品運維、測試、發布、分析,從設計洞察中做出創新設計。

          未來的設計師將融合人工智能和創意編程技術,在世界數智化的大潮中找到新的定位和新的機遇。

          undefined

          第三部分,在人工智能時代下,未來的設計會走向哪里?新時代的設計師怎樣找準自己的定位呢?

          人工智能的成熟對部分設計師來說簡直是災難性的打擊,之前無論是通過技法還是數據分析才能完成的工作,人工智能一下子就可以完成,后續根本不需要這么多設計師來完成這些工作。那么設計師是否會被人工智能取代?我們先來看一張人類能力地圖:

          這張圖中,海拔高度代表這項任務被計算機執行的難度,不斷上漲的海平面代表計算機現在能做的事情。從圖中可以看出,目前人工智能水平預警線距離代表藝術的山峰還很遠。

          人工智能沒有人類的跨領域推理、抽象類比能力,也沒有人類的主觀能力如靈感、感覺和感受;更沒有人類特有的靈魂、愛、意識、理想、意圖、同理心、價值觀、人生觀等,這導致人工智能在未來很長一段時間內都無法很好理解人類的心理和行為是什么,在解決推理和情感問題時會不盡人意。

          undefined設計除了解決問題外,還涉及對美的理解和創作,美感是對美的體會和感受,它是復雜的,包含了歷史、文化、環境、情感等客觀因素和主觀因素,所以在不同的時代、階級、民族和環境中,有著不同文化文化修養和個性特征的人對美的定義也不同。

          人工智能依賴數據和經驗解決問題,它能解決大部分智力可解決的問題,但解決不了需要情感和美感才能解決的問題。而設計的擅長領域,是人工智能不擅長的:跨領域推理、抽象能力、常識、審美、自我意識與情感。那么AI與設計的關系怎樣的呢?

          設計是為了解決問題。人工智能使機器代替人類實現認知、識別、分析、決策等功能,其本質是為了讓機器幫助人類解決問題,也就是說,人工智能在一定程度上也是一種設計,它會創作出與人類思維模式類似的解決方案。所以AI與設計師是一種共生關系。因此設計師不用杞人憂天,擔心自己被人工智能取代。

          隨著AI 技術的成熟,設計必定會發生新一輪的變化,在未來,更多領域和行業需要用到界面設計、人機交互等技能,各行各業的設計師需要掌握以上技能才能更好地服務當前業務。那么未來的設計將走向哪里呢?

          undefined新一代的設計師是“與互聯網共同成長的一代”,相信在未來幾年里有更多的新晉設計師會掌握編程開發能力以及其他能力,綜合素質會比目前的設計師更強,所以我們要保持終身學習,懂得如何將自己的能力和經驗轉換為優勢,這樣才能在設計道路上不被超越。

          undefined那設計師可以從哪些方面來應對智能時代的機遇和挑戰呢?

          undefined每一代人都有被下一代人取代的風險,但有些很厲害的人就不容易被取代?因為他們在不斷創造價值。無論在社會、行業還是在企業里,當具備一定的影響力后,他們能更容易積累人脈和資源,然后反哺自己的價值,就跟滾雪球一樣,當雪球越大,他們越不容易被別人取代,設計師需要有這樣的意識。

          undefined設計師需要懂得更多領域的知識和技術才能拓寬自己的視野,這些領域包括但不局限于傳感技術、網絡技術、智能仿真技術、虛擬技術、生物技術、納米技術等。因此科學與藝術是可以并且很有必要相通與交融的,設計師一定要學會跨界思考。人工智能時代下,數字世界和物理世界會逐漸融合,大到城市建設、公共服務、衣食住行和醫療;小到智能家居、穿戴式設備,這些機會將會留給已準備好的挑戰者,所以設計師一定要拓寬自己的視野,不要把自己的目光局限在界面設計上。

          undefined如果不想被人工智能領先,人類的設計應該是創新的(未成熟、未被發現規律的),包含更多元素的(更多復雜參數如歷史、文化、環境、情感等),“設計”這個詞語就涵蓋了以上元素。人工智能在藝術設計上還遠遠達不到人類的水平,深耕藝術設計將會為設計師帶來更多機會。

          undefined在人工智能時代下,當產品基本都能滿足永不需求時,能為產品帶來活力和差異的除了自身的底層技術基礎,更多的是藝術型設計師的理念和風格,以及自身的品牌。就像時尚品牌優衣庫和Gucci,單件商品兩者的品牌和設計所帶來的的利潤差距巨大,相信未來的人工智能產品也會面臨類似的問題,設計師應該考慮如何為產品賦予更多價值,如何彰顯用戶的個性。

          undefined既然AI是一個強大的工具,那么我們要思考如何運用它來創造更多的價值。AI能夠快速便捷地獲取大量信息,幫助設計師拓展自己的視野,不斷更新自己的世界觀,從新的視角看待問題和解決問題。除了快速獲取信息外,設計師也應該考慮如何通過AI提高自己的工作效率,例如哪些純勞動力工作交給AI去做效率會更高;哪些工作可以和AI一起協同完成更能激發創意。

          undefined

          最后,用一本科普書改編的話來結尾:一想到,還有95%的問題留給開發同學,我就放心了。

          最后附上一張本文的腦圖:

          undefined

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

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



          文章來源:站酷   作者:西子zhulijuan

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

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

          ECharts中dataZoom組件及散點圖的繪制

          前端達人

          ECharts中dataZoom組件及散點圖的繪制

          dataZoom 組件是對 數軸(axis) 進行『數據窗口縮放』『數據窗口平移』操作。

          可以通過 dataZoom.xAxisIndex 或 dataZoom.yAxisIndex 來指定 dataZoom 控制哪個或哪些數軸。



          dataZoom 組件可同時存在多個,起到共同控制的作用??刂仆粋€數軸的組件,會自動聯動。下面例子中會詳細說明。



          dataZoom 的運行原理是通過『數據過濾』來達到『數據窗口縮放』的效果。



          dataZoom 的數據窗口范圍的設置,目前支持兩種形式:



          百分比形式:參見 dataZoom.start 和 dataZoom.end。



          絕對數值形式:參見 dataZoom.startValue 和 dataZoom.endValue。



          dataZoom 組件現在支持幾種子組件:



          內置型數據區域縮放組件(dataZoomInside):內置于坐標系中。



          滑動條型數據區域縮放組件(dataZoomSlider):有單獨的滑動條操作。



          框選型數據區域縮放組件(dataZoomSelect):全屏的選框進行數據區域縮放。入口和配置項均在 toolbox中。



          在代碼中加入dataZoom組件

          <!DOCTYPE html>

          <html lang="en">

          <head>

              <meta charset="UTF-8">

              <title>代碼加入dataZoom組件</title>

              <!--引入Echarts文件-->

              <script src="js/echarts.min.js"></script>

          </head>

          <body>

          <div id="main" style="width: 800px;height:400px;"></div>

          <script type="text/javascript">

              var dom=document.getElementById("main");

              var myChart=echarts.init(dom);

              var app={};

              var option=null;

              //先只在對單獨一個橫軸,加上 dataZoom 組件,代碼示例如下:

              option = {

                  tooltip:{},//提示框

                  xAxis: {

                      type: 'value'

                  },

                  yAxis: {

                      type: 'value'

                  },

                  dataZoom: [

                      {

                          type: 'slider', //這個dataZoom組件是slider型dataZoom組件

                          xAxisIndex:0,   //dataZoom-slider組件控制第一個XAxis

                          start: 10,       //左邊在10%位置

                          end: 60         //右邊在60%位置

                      },

                      {

                          type: 'inside', //這個dataZoom組件是inside型dataZoom組件

                          xAxisIndex:0,   //dataZoom-inslide組件控制第一個XAxis

                          start: 10,       //左邊在10%的位置

                          end: 60         //右邊在60%的位置

                      },{

                          type:'slider',

                          yAxisIndex:0,   //dataZoom-slider組件控制第一個yAxis

                          start:30,

                          end:80

                      },{

                          type:'inside',

                          yAxisIndex:0,   //dataZoom-inside組件控制第一個yAxis

                          start:30,

                          end:80

                      }

                  ],

                  series: [

                      {

                          name: 'scatter',

                          type: 'scatter',

                          itemStyle: {

                              normal: {

                                  opacity: 0.8

                              }

                          },

                          symbolSize: function (val) {//控制點的大小,(參數為data中第三列的數據)

                              return val[2] * 40;     //用回調函數控制點的大小(請查看官方文檔)

                          },

                          data: [//data中第三個參數控制點的大小

                              ["14.616","7.241","0.896"],

                              ["3.958","5.701","0.955"],

                              ["2.768","8.971","0.669"],

                              ["9.051","9.710","0.171"],

                              ["14.046","4.182","0.536"],

                              ["12.295","1.429","0.962"],

                              ["4.417","8.167","0.113"],

                              ["0.492","4.771","0.785"],

                              ["7.632","2.605","0.645"],

                              ["14.242","5.042","0.368"]

                          ]

                      }

                  ]

              }

              if (option && typeof option === "object") {

                  myChart.setOption(option, true);

              }

          </script>

          </body>

          </html>

          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

          47

          48

          49

          50

          51

          52

          53

          54

          55

          56

          57

          58

          59

          60

          61

          62

          63

          64

          65

          66

          67

          68

          69

          70

          71

          72

          73

          74

          75

          76

          77

          78

          79

          80

          81

          可以通過滑動滑輪實現圖形的縮放



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

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


          部分借鑒自:csdn  

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

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

          openlayers6【十九】vue HeatmapLayer熱力圖層實現熱力圖效果詳解

          前端達人

          1. 寫在前面

          本問下面有矢量圖層設置的區域,和熱力圖層設置的熱力圖的效果,區域繪制效怎么設置詳細內容可以訪問 openlayers6【十七】vue VectorLayer矢量圖層畫地圖省市區,多省市區(粵港澳大灣區)效果詳解,主要講解的是熱力圖層效果實現。區域繪制只是為了效果更好看。好了,繼續往下看

          在 openlayers 中,圖層是使用 layer 對象表示的,主要有 WebGLPoints Layer、熱度圖(HeatMap Layer)、圖片圖層(Image Layer)切片圖層(Tile Layer)和 矢量圖層(Vector Layer)五種類型,它們都是繼承 Layer 類的。

          前面兩篇文章 我們講了矢量圖層 VectorLayer的常用的場景,這篇我們寫一篇 HeatMapLayer 的使用??梢钥聪聢D所示的熱力圖實現效果。 放大縮小地圖熱力圖效果。
          在這里插入圖片描述

          2. Heatmap 類實現熱力圖

          2.1 Heatmap 參數

          var heatmapLayer = new ol.layer.Heatmap({ source: source,//熱力圖資源 opacity:1,//透明度,默認1 visible:true,//是否顯示,默認trur zIndex:1,//圖層渲染的Z索引,默認按圖層加載順序疊加 gradient:['#00f','#0ff','#0f0','#ff0','#f00'],//熱圖的顏色漸變 blur: 15,//模糊大小(像素為單位) radius: 8,//半徑大小默認為8(像素為單位) extent:[100,30,104,40],//渲染范圍,可選值,默認渲染全部 }); 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10

          2.2 實現熱力圖

          2.2.1 addHeatMap()方法詳解:

          1. 準備熱力圖需要的初始化數據,colors 熱圖的顏色漸變,hatmapData 表示值數量越多顯示到頁面的熱力圖顏色越深。codeList 準備的數據的城市對應的經緯度坐標。
          2. 創建熱力圖圖層 HeatmapLayer
          3. 把熱力圖圖層添加到 map 中
          4. 調用添加熱力圖要素的方法 AppendFeatures()

          2.2.2 addHeatMap()方法代碼:

          /**
           * 添加熱力圖
           */ addHeatMap() { let colors = [ "#2200FF", "#16D9CC", "#4DEE12", "#E8D225", "#EF1616" ]; let hatmapData = [ { name: "成都市" }, { name: "成都市" }, { name: "成都市" }, { name: "成都市" }, { name: "綿陽市" }, { name: "廣安市" }, { name: "雅安市" }, { name: "自貢市" }, { name: "自貢市" }, { name: "自貢市" }, { name: "自貢市" }, { name: "自貢市" }, { name: "自貢市" }, { name: "自貢市" }, { name: "宜賓市" }, { name: "甘孜藏族自治州市" } ]; let codeList = { 成都市: { center: { lng: 104.061902, lat: 30.609503 } }, 廣安市: { center: { lng: 106.619126, lat: 30.474142 } }, 綿陽市: { center: { lng: 104.673612, lat: 31.492565 } }, 雅安市: { center: { lng: 103.031653, lat: 30.018895 } }, 自貢市: { center: { lng: 104.797794, lat: 29.368322 } }, 宜賓市: { center: { lng: 104.610964, lat: 28.781347 } }, 甘孜藏族自治州市: { center: { lng: 101.592433, lat: 30.426712 } } }; this.layer = new HeatmapLayer({ source: new VectorSource(), blur: 30, radius: 15, gradient: colors }); this.map.addLayer(this.layer); this.AppendFeatures(hatmapData, colors, codeList, 50); }, 
          
          • 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
          • 47
          • 48
          • 49

          2.2.3 AppendFeatures()方法詳解:

          1. 遍歷hatmapData和points數據根據名稱一致的 循環創建要素 new Featurenew Point信息
          2. 把要素添加到熱力圖層的數據源中

          2.2.4 AppendFeatures()方法代碼:

          /**
           * 增加要素到熱力圖
           */ AppendFeatures(hatmapData, colors, points, max) { for (var i in hatmapData) { if (points[hatmapData[i].name]) { var coords = points[hatmapData[i].name]; this.max = max; var f = new Feature({ geometry: new Point( fromLonLat([coords.center.lng, coords.center.lat]) ) }); this.layer.getSource().addFeature(f); } } } 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16
          • 17

          3. 完整代碼

          <template> <div id="app"> <div id="Map" ref="map"></div> </div> </template> <script> import "ol/ol.css"; import VectorLayer from "ol/layer/Vector"; import VectorSource from "ol/source/Vector"; import { Tile as TileLayer, Heatmap as HeatmapLayer } from "ol/layer"; import Proj from "ol/proj/Projection"; import XYZ from "ol/source/XYZ"; import { Map, View, Feature, ol } from "ol"; import { Style, Stroke, Fill } from "ol/style"; import { Polygon, Point } from "ol/geom"; import { defaults as defaultControls } from "ol/control"; import { fromLonLat } from "ol/proj"; // 四川的邊界數據文件 import areaGeo from "@/geoJson/sichuan.json"; export default { data() { return { map: null }; }, methods: { /**
                   * 初始化地圖
                   */ initMap() { this.map = new Map({ target: "Map", controls: defaultControls({ zoom: true }).extend([]), layers: [ new TileLayer({ source: new XYZ({ url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}" }) }) ], view: new View({ center: fromLonLat([104.065735, 30.659462]), zoom: 6.5, maxZoom: 19, minZoom: 5 }) }); }, /**
                   * 設置區域
                   */ addArea(geo = []) { if (geo.length == 0) { return false; } let features = []; geo.forEach(g => { let lineData = g.features[0]; let routeFeature = ""; if (lineData.geometry.type == "MultiPolygon") { routeFeature = new Feature({ geometry: new MultiPolygon( lineData.geometry.coordinates ).transform("EPSG:4326", "EPSG:3857") }); } else if (lineData.geometry.type == "Polygon") { routeFeature = new Feature({ geometry: new Polygon( lineData.geometry.coordinates ).transform("EPSG:4326", "EPSG:3857") }); } routeFeature.setStyle( new Style({ fill: new Fill({ color: "#4e98f444" }), stroke: new Stroke({ width: 3, color: [71, 137, 227, 1] }) }) ); features.push(routeFeature); }); // 設置圖層 let routeLayer = new VectorLayer({ source: new VectorSource({ features: features }) }); // 添加圖層 this.map.addLayer(routeLayer); }, /**
                   * 添加熱力圖
                   */ addHeatMap() { let colors = [ "#2200FF", "#16D9CC", "#4DEE12", "#E8D225", "#EF1616" ]; let hatmapData = [ { name: "成都市" }, { name: "成都市" }, { name: "成都市" }, { name: "成都市" }, { name: "綿陽市" }, { name: "廣安市" }, { name: "雅安市" }, { name: "自貢市" }, { name: "自貢市" }, { name: "自貢市" }, { name: "自貢市" }, { name: "自貢市" }, { name: "自貢市" }, { name: "自貢市" }, { name: "宜賓市" }, { name: "甘孜藏族自治州市" } ]; let codeList = { 成都市: { center: { lng: 104.061902, lat: 30.609503 } }, 廣安市: { center: { lng: 106.619126, lat: 30.474142 } }, 綿陽市: { center: { lng: 104.673612, lat: 31.492565 } }, 雅安市: { center: { lng: 103.031653, lat: 30.018895 } }, 自貢市: { center: { lng: 104.797794, lat: 29.368322 } }, 宜賓市: { center: { lng: 104.610964, lat: 28.781347 } }, 甘孜藏族自治州市: { center: { lng: 101.592433, lat: 30.426712 } } }; this.layer = new HeatmapLayer({ source: new VectorSource(), blur: 30, radius: 15, gradient: colors }); this.map.addLayer(this.layer); this.AppendFeatures(hatmapData, colors, codeList, 50); }, /**
                   * 增加要素至熱力圖
                   */ AppendFeatures(hatmapData, colors, points, max) { for (var i in hatmapData) { if (points[hatmapData[i].name]) { var coords = points[hatmapData[i].name]; this.max = max; var f = new Feature({ geometry: new Point( fromLonLat([coords.center.lng, coords.center.lat]) ) }); this.layer.getSource().addFeature(f); } } } }, mounted() { this.initMap(); //初始化地圖 this.addArea(areaGeo); //添加四川省的邊界描邊和填充 this.addHeatMap(); //添加熱力圖數據 } }; </script> <style lang="scss" scoped> // 此處非核心內容,已刪除 </style> 
          
          • 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
          • 47
          • 48
          • 49
          • 50
          • 51
          • 52
          • 53
          • 54
          • 55
          • 56
          • 57
          • 58
          • 59
          • 60
          • 61
          • 62
          • 63
          • 64
          • 65
          • 66
          • 67
          • 68
          • 69
          • 70
          • 71
          • 72
          • 73
          • 74
          • 75
          • 76
          • 77
          • 78
          • 79
          • 80
          • 81
          • 82
          • 83
          • 84
          • 85
          • 86
          • 87
          • 88
          • 89
          • 90
          • 91
          • 92
          • 93
          • 94
          • 95
          • 96
          • 97
          • 98
          • 99
          • 100
          • 101
          • 102
          • 103
          • 104
          • 105
          • 106
          • 107
          • 108
          • 109
          • 110
          • 111
          • 112
          • 113
          • 114
          • 115
          • 116
          • 117
          • 118
          • 119
          • 120
          • 121
          • 122
          • 123
          • 124
          • 125
          • 126
          • 127
          • 128
          • 129
          • 130
          • 131
          • 132
          • 133
          • 134
          • 135
          • 136
          • 137
          • 138
          • 139
          • 140
          • 141
          • 142
          • 143
          • 144
          • 145
          • 146
          • 147
          • 148
          • 149
          • 150
          • 151
          • 152
          • 153
          • 154
          • 155
          • 156
          • 157
          • 158
          • 159
          • 160
          • 161
          • 162
          • 163
          • 164
          • 165
          • 166
          • 167
          • 168
          • 169
          • 170
          • 171
          • 172
          • 173
          • 174
          • 175
          • 176
          • 177

          4. 添加刪除map圖層的方法

          //添加熱力圖層 this.map.addLayer(this.layer) //刪除熱力圖層 this.map.removeLayer(this.layer) 
          
          • 1
          • 2
          • 3
          • 4

          5. 熱力圖自身的get,set方法

          //獲取-設置,模糊大小 heatmapLayer.getBlur() heatmapLayer.setBlur(15) //獲取-設置,渲染范圍 heatmapLayer.getExtent() heatmapLayer.setExtent([100,30,104,40]) //獲取-設置,熱力圖漸變色 heatmapLayer.getGradient() heatmapLayer.setGradient(['#00f','#0ff','#0f0','#ff0','#f00']) //獲取-設置,最大級別 heatmapLayer.getMaxZoom() heatmapLayer.setMaxZoom(18) //獲取-設置,最小級別 heatmapLayer.getMinZoom() heatmapLayer.setMinZoom(2) //獲取-設置,透明度 heatmapLayer.getOpacity() heatmapLayer.setOpacity(0.5) //獲取-設置,半徑 heatmapLayer.getRadius() heatmapLayer.setRadius(5) //獲取-設置,熱力源 heatmapLayer.getSource() heatmapLayer.setSource(source) //獲取-設置,是否可見 heatmapLayer.getVisible() heatmapLayer.setVisible(true) //獲取-設置,圖層的Z-index heatmapLayer.getZIndex() heatmapLayer.setZIndex(2) //綁定事件-取消事件 type事件類型,listener函數體 heatmapLayer.on(type,listener) heatmapLayer.un(type,listener)



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

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


          部分借鑒自:csdn  

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

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


          如何建立產品設計中的“安全感”

          seo達人



          根據馬斯洛需求層次理論,安全需求位于第二層,屬于低層次需求,反映了人們對穩定、安全、受到保護、有秩序、免除恐懼和焦慮的需求。所以在產品設計中需要保護用戶的隱私信息,讓用戶時刻掌握系統狀態,從而減少用戶焦慮,提升產品體驗。今天我們就聊一聊如何在產品設計中建立用戶“安全感”。

           

          文章主要分為3部分:

          1. 用戶為什么會產生不安全感
          2. 安全感的設計方法
          3. “不安全感”的應用

           

          01 用戶為什么會產生“不安全感”

          馬斯洛指出:心理的安全感(psychological security)指的是“一種從恐懼和焦慮中脫離出來的信心、安全和自由的感覺,特別是滿足一個人現在(和將來)各種需要的感覺”。也就是說,缺乏安全感是因為用戶陷入恐懼和焦慮中。

           

          1、不安全的層級

          我個人將缺乏安全感分為了3個層次:

          圖片

          1)精神層面——焦慮無助

          現實生活中,當我們遇到緊急問題又無法解決時,通常會感覺到焦慮無助。使用信息產品時,如果缺乏有效的指引和出口,我們同樣會感到焦慮。例如公司內部通訊產品,密碼必須要在內網OA系統中才能重置。如果重裝App又忘記了登錄密碼,而上班進出園區和考勤又必須使用該產品,造成了死循環,用戶必然要“出離憤怒”了。

          2)信息層面——個人空間

          微信已經成為了社交必備產品,很多人都會在朋友圈中秀出生活的日常信息。但有些“好友”關系是臨時性的,并非生活中的真實好友,用戶并不希望將個人信息曝光展示給他們,所以微信增加了好友關系分級功能,增加用戶的安全感。

          同樣瀏覽記錄、購買記錄、搜索記錄等都屬于用戶的個人行為數據,需要賦予用戶刪除權限,防止隱私信息泄漏。

          圖片

          3)物理層面——生命財產

          手機號碼、身份證、銀行卡等都是非常重要的個人信息,這些信息泄露之后可能會給我們帶來財產損失,因此產品在獲取這些信息時需要征得用戶同意,同時也要為用戶保護好隱私信息。

          圖片

           

          2、不安全感的原因

          1)信息未知

          恐懼和焦慮更多的是因為對信息的“未知”,尤其是涉及金錢、健康的場景下,當用戶對信息不理解或者不熟悉時,就很難產生信任感,更不會有安全感。

          例如用戶對于長串數字的量級識別效率會降低,當進行大額轉賬時,為了防止出錯,我們會反復確認數字。于是很多支付工具增加了漢字來展示金額量級,幫助用戶快速識別輸入的量級,從而增加用戶的安全感、提高操作效率。

          圖片

          雖然電商平臺帶來了購物的便捷,但是用戶無法親身感受商品質量,擔心購買后發生扯皮和退貨難等問題。于是就有了運費險和7天無理由退貨等保障措施,消除用戶擔憂,從而提高用戶的購買意愿。

          2)認知偏見

          正如我們對美女總是抱有莫名的好感,我們對于不美觀或者丑陋的事物也存在認知偏見。如果產品視覺效果粗制濫造,用戶更容易產生不信任感。

           

          02  安全感的設計方法

          用戶交互過程大致可以分為“認知-行動-反饋”3個階段,在不同的階段都需要帶給用戶“安全感”。

          圖片

           

          認知階段

          1、消除未知

          1)更熟悉的信息

          人們在熟悉的環境中會更有安全感,本質上是因為對信息的了解和掌控。所以對于用戶不熟悉或不易理解的功能,需要進行一定的包裝,便于用戶理解。

          例如支付寶股票中將大盤的漲跌,通過天氣晴雨表的形式來展現,讓普通用戶輕松理解大盤的狀態。淘寶搜索列表中,專門將用戶“曾經買過的店”展示出來,可以喚起用戶的購物記憶,增強用戶對商品的信心。

          圖片

          2)更真實的信息

          高德地圖利用AR技術直接將導航與實景相結合,用戶看到的不再是系統處理過的地圖,而是真實環境的直觀體驗,從而更好的提升用戶使用過程中的安全感。

          圖片

          3)更充分的信息

          讓用戶獲得更多的信息可以增強用戶的掌控感,從而建立用戶安全感。

          高德地圖導航在可選擇的條件下,默認提供3條可選路線。有些路線明明又遠又耗時間,為什么還要呈現給用戶呢?一方面更多的信息方便用戶選擇,帶來掌控感。更重要的是如果只顯示一條路線,用戶可能會產生疑問和不信任感,不確定系統給出的路線是不是最好的選擇。

          圖片

           

          2、增加未來的預期

          除了讓用戶熟悉當下信息,還需要通過足夠的信息讓用戶建立對未來的信心。

          1)信用背書

          拼多多為了增加“百億補貼”的可信度,減少用戶對商品“假貨”、“非正品”的擔憂。專門引入了中國人保保險為活動承保。1號會員店作為京東的子產品,則借用更有品牌影響力的“京東”為其代言。

          圖片

          2)達人帶貨

          網紅直播帶貨已經成為了重要的營銷方式,一方面網紅產生的超高流量,同時用戶對他們更加信任,認為他們的推薦更有保障。

          另外熟人關系也會帶來更強的信任感,所以拼多多建立了拼小圈,淘寶建立了淘友圈,通過好友關系相互影響,帶給用戶更強的購買信心。

          3)承諾保障

          正如上文所說,七天無理由退貨、假一賠四逐步成為了電商的標配。而為了減少用戶對付費會員能否“省回會費”的擔憂,電商平臺增加了“不回本退差價”的玩法。除此之外,雙11等大促活動電商平臺還會著重強調“價保”、“全年最低價”等信息,消除用戶的后顧之憂。

          圖片

           

          3、視覺帶來的情感

          1)產品IP形象

          IP形象實際上是產品擬物化的表現,可以增加親和力,拉近用戶和產品之間的距離。例如天貓貓頭設計已經成為了一種符號和載體,在雙11期間既傳遞了商品品牌,又讓平臺更加深入人心。

          圖片

          2)視覺效果

          視覺表現力已經成為了產品改版迭代重點發力方向,希望通過高品質的界面效果和視覺品牌形象,增強用戶對產品的信心。舊版的建行App簡直就是災難,我第一次打開的時候真的想立馬刪掉,但是迫于轉賬需要只好硬著頭皮使用。好在新的版本總算是進步了。

          ??????

           

          行為中

          1、掌控感

          在高德地圖中提供了豐富的信息,例如經常擁堵的時間點,擁堵狀態,擁堵距離和市場等,甚至包括了未來不同時間點的行車時長等等,幫助用戶合理的安排出行計劃。

          圖片

           

          2、行為過程中的信息反饋

          開車時最怕遇到堵車,一旦堵車用戶就會想“有沒有更好的路線呢”。高德地圖除了提醒擁堵信息之外,還附加了“雖然前方擁堵,但您依然在最優路線上”話術,讓用戶安心駕駛,不需要二次確認路線。

          此外防錯、容錯等基礎設計原則都可以幫助用戶建立很好的安全感。

           

          行為后

          1、信息可跟蹤

          用戶在使用支付寶轉賬后,會展示轉賬的節點信息,用戶可以隨時跟蹤轉賬的進程,特別是大額轉賬時間較長時,可以更好地減少用戶等待的焦慮。

          圖片

           

          2、穩定性

          如果用戶在使用產品時經常遇到bug,用戶很容易對產品產生懷疑。而對于付費會員類產品,同樣需要保持權益的穩定性,反復的權益變更也會造成用戶的不信任。

           

          03 “不安全感”的應用

          安全感是用戶需要的,但是有時候“不安全感”是商家需要的,因為可以產生一定的激勵作用。

           

          1、不確定性

          很多活動都是打著“數量有限,先到先得”的玩法,不明確告知數量,不展示進度,增加了購買的不確定性,對有需求的用戶可以產生一定的壓力,讓其盡快下單?;蛘卟捎妙A約玩法,通過預約人數的曝光給用戶帶來一定的壓力。

          圖片

           

          2、損失玩法

          很多游戲化產品都加入了互偷玩法,為避免能量損失,用戶不得不定時收取能量或者設置保護罩。

          往年的618、雙十一、雙十二期間,天貓養貓游戲都會推出團隊PK玩法,將“不安全感”發揮到了極致。為了保住勝利果實,用戶每天在對戰結束前都不敢絲毫松懈。

          所幸今年天貓官方已經宣布618期間,養貓不再設定PK玩法了,大家可以“佛系養貓”了。

          圖片

           

          以上就是我總結的體驗設計中“安全感”的設計方法。

           

          原文地址:子牧UXD(公眾號)

          作者:子牧先生


          轉載請注明:學UI網》如何建立產品設計中的“安全感”


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

                                                                      微信圖片_20210513163802.png

           

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

           

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



          設計系統指南——搭建你的專屬色彩系統

          seo達人


          想要搭建一套完整的設計系統,顏色是你需要最優先考慮的,我瀏覽了大量設計系統相關外文也下載了各類搭建完畢的設計系統文件,顏色永遠是排名第一的考慮項。至于原因,就要提到顏色(后面會統稱為色卡系統)在設計系統中所擔任的角色及其意義。

          另外,我基于figma搭建了個人博客,以期以更靈活的方式展示和分享內容,后續文章、設計系統資源都會在上面進行發布,大家可以收藏一波。

          博客鏈接 點擊此處

           

          原文地址:UI中國

          作者:南山可

           

          轉載請注明:學UI網》設計系統指南——搭建你的專屬色彩系統


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

                                                                      微信圖片_20210513163802.png

           

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

           

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


          全局性設計思維 | 讓設計創造更大價值

          ui設計分享達人

          導讀


          你的設計是否能被理解?為什么設計的價值總是不被人認可?


          設計不僅僅只是帶來美感,好的設計能夠為產品、公司甚至整個社會創造巨大的價值。而在創造好的設計這個過程中,最重要、也是最容易被人忽視的,便是設計思維。


          何為全局性設計思維?它能夠為設計師帶來哪些價值?本文將從設計的本質出發,結合設計的發展趨勢,帶你了解全局性設計思維的真正力量。




          目錄


          寫在前面

          一個習慣性的序

          一、我們為什么需要設計思維?

          二、下一個時代在哪里?

          三、互聯網“下半場”,從大勢中看變化

          四、設計思維的轉變,差異與融合

          五、探尋全新的思維方式

          六、全局性設計思維概述

          七、如何運用全局性設計思維?

          八、以全局性設計思維,構建設計體系

          九、文章預告

          -



          寫在前面


          這篇文章的主要內容,來自我在19年底的一個沙龍分享。整個分享以設計思維的角度入手,講述了全局性設計思維的來源和重要性,以及我是如何在不同產品線上去運用這種設計思維的。


          何為全局性設計思維?為什么要講這種思維方式?


          這是我一直在探索并實踐的一種設計思維。從最開始的理論雛形,到各種項目的實踐,不斷進行修正和完善,最終形成了一套卓有成效的思維方式。通過這種思維方式,我逐步幫助產品解決了許多長期性的問題,并最終構建了各種不同類型的設計體系。最終,隨著品牌矩陣與產品體系的落地,形成了一個完整的網易智慧企業設計體系。

          網易智慧企業設計體系


          因為篇幅原因,本篇文章將重點從理論層面闡釋全局性設計思維的導論、價值及使用方式。而具體的實戰案例,我之后將會以另外幾篇單獨文章的形式進行展現,并詳細講解在設計過程中的一些細節與過程。希望能夠幫助大家更深入地去理解如何根據不同的場景正確地去使用這種思維方式。


          未來可能會包含以下幾篇文章:


          全局性設計思維 | 如何打造強大的品牌體系

          FishDesign組件庫 | 從零到一構建企業級UI組件庫

          全局性設計思維 | 如何構建事業部級大型設計體系


          當然,目前的設計體系僅僅只是一個開始,未來還有很長的路要走。


          希望本文能夠給為你帶來小小的啟發,讓設計思維幫助你更好地發揮設計的價值。如果你對某一方面特別感興趣,可以直接跳到這一章進行閱讀,無需浪費過多時間。如果你有任何疑問,也歡迎隨時與我交流。




          ?

          一個習慣性的序

          -


          “喵嗚~”   我又出現了,那個愛寫序的裝逼作者。


          這次把序放在了第二段,這樣子看上去就不那么不務正業了哈哈。當然,寫序更多的是為了記錄生活,希望每一篇文章不僅僅只是傳遞知識,更是一篇有溫度的文章。


          經歷了風風雨雨的2019,又度過了魔幻版的春節,我終于又開始正式地寫文章了。但這次不同,我擁有了兩只可愛的小伙伴——汽水和芬達。汽水8月18出生,芬達8月20出生,現在都已經是肥肥壯壯的兩大只了。。


          汽水總是在我碼字的時候,睡在我的鍵盤上,或者以各種姿勢吸引我的注意力。。  為啥拖了這么久才寫寫完文章,除了懶以外,汽水大概也要背點鍋,哈哈。


          整個2019年中,經歷了很多事情,人生觀也隨之發生了些許變化。


          從并肩作戰的同事的不斷離去,到逐漸需要考慮團隊的發展。從單打獨斗闖天下,到思考如何讓整個團隊更加優秀、如何建立完善的設計體系等等。


          角色、心態、責任,以及如何坦然地面對自己。


          活在當下,用心生活。這是我一直當作座右銘的語錄,也是我希望給自己的承諾??偸窃噲D去嘗試這種狀態,但卻異常艱難。像我這樣的人,看上去總是“積極向上”,總是“規劃未來”,總是希望事事完美,強迫著每個細節的完善。但不知不覺中,人生好像開始進入了“自動駕駛”的模式,活在了過去的思索中,活在了未來的規劃中,唯獨對于當下異常麻木。


          這并不是我想要的生活,我開始嘗試做出改變。


          偶然間,通過一些書籍,我開始嘗試正念禪修。感受每個呼吸中空氣的流動、感受身體的每個部分、感受當下空間發生的每一件事情。雖然只是很淺顯的境界,但正念依然對我產生了巨大的影響。我開始重新地審視自己的人生,審視自己的生活狀態。

          網易蝸牛圖書館:與快樂的小伙伴們


          這種感覺,就像再次地呼吸了新鮮空氣一樣。


          我們其實只存在于當下的時空中,過去和未來,并非真實存在的事物。回想一下,我們有多久沒有像小時候一樣,完完全全、毫無雜念地享受在當下的時光中了?


          用心活在當下,平靜地接納一切發生的事物,這種感覺真是太美好了~




          ?

          一、我們為什么需要設計思維?

          -


          對于設計師來說,什么能力更為重要?是設計這門“技術”本身,還是思考如何去設計的“思維”能力?


          對于不同的設計師來說,一定會有不同的答案。


          這兩種能力本身并不矛盾,他們相互影響,互相促進——就像“術”與“道”之間的關系。設計能力決定了設計作品的輸出質量,而設計思維則決定了你思考問題、解決問題的能力。


          然而,在現實的大環境下,“術”的重視程度遠高于“道”,造成了很多設計師與日常業務的“分離感”。以至于,多數的設計師,無法將自己的設計能力有效地用于日常業務中;抱怨他人不理解設計,也因此錯失了許多機會。


          重視設計美感,其實并沒有問題。視覺是最直接的表現方式,我們從最初開始喜歡這個行業,并最終成為設計師,大概都是因為如此。包括我個人,也是美感的極致追求者,常常為了幾像素的細節,調整無數稿。也常常沉浸于自己的作品無法自拔emmm…


          但是,美感之后,設計還需要什么?


          路易斯·沙利文曾講過:“形式追隨功能”。而功能存在的意義,則在于解決問題。視覺的形式、美感,很多時候只是包裹在外側的表層,而解決問題才是設計真正的核心。視覺的表現,一定要遵循解決問題的方式,向用戶傳遞恰當的信息,最終引導用戶以此來解決問題。


          因此,我更希望更多的設計師,在追求美感的同時,能夠重拾設計思維本身,尋找設計最根本的價值。


          我們其實可以站得更遠一些。學會去理解事物,學會用設計去解決問題。再以此為基礎,通過你的設計能力去塑造它、點亮它,讓它成為一個真正美好而又有價值的設計。


          而設計的價值,將會成為你的價值。




          ?

          二、下一個時代在哪里?

          -


          互聯網時代中的數字產品設計,需要什么樣的設計思維?或者說,當下我們需要什么樣的設計思維?


          這個問題的答案,好像一直在變。


          互聯網本身便是一個新的形態,1989年“萬維網”發明,1996年中國引入互聯網,到今年已經有大約24個年頭。我們經歷了不同的互聯網時期,而“設計”的概念也一直在變化中。


          Internet 1.0 PC互聯網時代。在這個時代,我們將大量的信息虛擬化,并通過網絡進行信息傳遞。而我們的“設計師”們大多被稱為“美工”,我們的“設計思維”,便是將信息變得更好看。


          Internet 2.0 移動互聯網時代,或者稱為消費互聯網時代。自從2007年喬布斯發布第一代iPhone之后,疊加4G、wifi等技術,手機成為日益重要的終端,世界逐漸進入了移動互聯網時代。伴隨著iPhone與其應用的出現,喬布斯讓所有人理解了“用戶體驗”的重要性。我們不再是“美工”,我們變成了“UI設計師”、“交互設計師”。而這個時代,我們的設計思維變成了“用戶體驗思維”。


          那么,下一個時代在哪里?我們的設計思維又將如何轉變,才能適應下一個時代?




          ?

          三、互聯網下半場,從大勢中看變化

          -


          1.紅利消失、增長觸頂,互聯網下半場到來


          最近幾年,我們已經能夠明顯地感知到——互聯網的“寒冬”真的來了。隨之而來的,便是互聯網的發展方向似乎也正在發生變化。于是大約從2017年開始,互聯網圈內逐漸出現一個新的名詞——互聯網“下半場”。人們普遍認為,中國的互聯網將會由消費互聯網時代進入下一個時代,即互聯網下半場。


          我并不完全認同互聯網”下半場“的稱呼。互聯網本身是一個年輕的行業,中國互聯網“下半場”,其實更像是互聯網發展方向轉變的標志。


          因此,我們認為的下一個時代的方向,也許將會是Internet 3.0——即產業互聯網時代。



          互聯網會什么必須要進入下一個時代?


          對于互聯網企業來說,一方面在成本端,隨著人口紅利消褪,勞動力價格上升,企業的成本將逐漸升高,倒逼管理者使用系統和工具來提高效率;另一方面,在收入端,野蠻增長的時代結束,增量經濟轉向存量經濟,紅利經濟轉向效率經濟。


          在“成本”與“效率”的雙重壓力下,再加上整個市場經濟的下行周期,整體經濟出現下滑,而一些依靠融資的互聯網公司將難以為繼。因此企業不得不尋找方式來提升效率,降低成本——而這正是企業級軟件(ToB產品)最擅長的地方。


          因此,在互聯網寒冬之下,ToB市場便理所應當地開始被重視。


          讓我們縱觀整個中國市場的發展,互聯網的興趣雖然促進了消費領域的蓬勃發展,但產業領域的發展則因此受到了巨大制約。中國率先從消費端、從第三產業開始數字化,然而在第一、二產業的數字化進程似乎并不是很快。一個重要的原因是,人口紅利促使了消費互聯網的快速發展,而這種紅利讓人們忽視了產業互聯網的重要性。


          在寒冬之下,我們終于發現,消費互聯網蓬勃的基石,正是底層堅實的產業互聯網。產業互聯網如果不能得到有效的發展,則整個市場經濟將無法更進一步的發展。


          因此,產業互聯網時代的到來,是中國互聯網發展的需要,也將是大勢所趨。



          2.ToB市場將迎來機遇


          產業互聯網的發展,需要依托B端領域的發展,并逐步融入并帶動整個產業進入互聯網時代。那么,B端產品在中國目前處于一個什么階段呢?


          對于整個中國的ToB行業發展現狀,大多數的人并沒有一個清晰的概念。盤點中美上市的科技公司會發現,美國toC領域與toB領域市值之比是6:4,但在中國這個數字是20:1。


          雖然互聯網的整體環境不同,但中國ToB行業的發展,顯然是落后太多了。于是乎,2018年開始,BAT大舉布局,PE、VC加速進場——中國B端產品已經逐漸進入必須發展的時候了。


          中國市場已經坐擁全球最發達的發達的消費互聯網體系,而產業互聯網的發展則卻嚴重滯后。


          同時,對比B端中云計算領域的IaaS、PaaS、SaaS三層架構,全球市場中SaaS占據了52.5%的份額,在中國卻是IaaS分走了最大的蛋糕,占比達61.2%。中國市場VC的投資總額已經與美國相當,在SaaS領域美國企業獲得了全球70.1%的融資,而中國只有11.7%。


          因此,在互聯網下半場,相對于ToC行業的觸頂,ToB行業將會迎來歷史級的發展機遇,隨之而來的將會是產業互聯網時代的逐漸到來。而在整個B端產品的類目中,SaaS產品作為企業級軟件中最集成的產品,也將隨著這股浪潮迎來爆發式的增長。


          什么是SaaS產品?很多同學并沒有接觸過B端行業,平時用到的也都是C端產品,所以對B端產品的了解比較少。在B端行業最熱門的云計算領域中,目前普遍會分為三層架構。SaaS(Software as a Service–軟件即服務);PaaS(Platform as a Service–平臺即服務) ;IaaS(Infrastructure as a Service–基礎架構即服務)。


          附:云計算領域,三種不同的架構與對應的服務。


          PaaS基于IaaS實現,SaaS的服務層次又在PaaS之上,三者分別面對不同的需求。越往上層,產品的集成度越高,提供的服務也就越豐富,而用戶所需要的自行解決的東西就越少。而最頂層的SaaS產品,便是用戶可以直接購買并使用的云端產品。


          我們為什么要了解這些趨勢?


          因為一個新的時代,對應一場變革,也將成為一次新的機會。不管是SaaS產品還是其他B端產品,都將在新的時代中逐漸得到重視。而C端產品的發展策略,也將迎來新的變化。對于許多設計師來說,這將會是一個新的機遇。


          順勢而為,方能乘勢而上。




          ?

          四、設計思維的轉變,差異與融合

          -


          那么,在逐漸到來的產業互聯網時代,設計師需要注意哪些東西?設計思維又將進行如何轉變?


          產業互聯網時代,意味著B端產品將得到重視,并與C端產品逐漸趨于平衡。因此,了解設計思維的變化,我們首先要從B端與C端產品之間,在產品設計與產品策略之間的差異性說起。



          1.服務對象的差異性


          從服務對象來看,C端產品的服務對象是人,產品的目標是針對人們生活方式進行的變革、升級。而B端產品的服務對象則大多是企業,目標是幫助企業進行商業效率的提升,從而產生價值。


          服務對象的差異性,決定了產品在發展策略也將存在著較大的差異性。



          2.產品“打法”上的差異性


          從宏觀的打法上看,消費互聯網時代會更求“快”,而產品互聯網時代則會更偏“穩”。


          C端產品的服務對象是人,而人的需求在個體差異性上相對變化較小,這就決定了C端產品通常都擁有廣闊的用戶市場。


          因此,消費互聯網時代就像是資本在遼闊平原的角逐,長驅直入。講究快速占領市場,不斷地試錯、不斷地調整。從團購到直播,從打車到短視頻領域的興起,再到最后的單車大戰落幕。消費互聯網時代的每一次風口,都伴隨著各種“游擊戰”式的競爭。入場速度、快速調整能力、資本深度,都直接影響了最后的結果,而最終的結果也往往是勝者為王,敗者將快速地被市場淘汰。


          B端產品的服務對象是企業,而企業間的需求差異性則非常巨大,這就決定了B端產品通常需要較強的縱深能力。相對應的,其用戶群里在總量上就比較小、但也相對穩固。


          因此,產業互聯網就像在崎嶇叢林的蹣跚前行,漸次演進,如同一場曠日持久的拉鋸戰。一方面,產業互聯網的鏈條非常長,需要長期的深耕、積累才能逐漸站穩腳跟。而這也導致了產品的壁壘足夠深厚,同類產品在短期內無法快速跟進。另一方面,企業間的差距需求的差異性非常大,因此產業互聯網存在非常多的細分市場,不同的產品各自在不同的賽道中深耕。而其最終的結果往往是百花齊放,各自盛開。



          3.整體行業的協同發展


          雖然整個市場都不斷地強調——ToC增長觸頂,ToB是一篇藍海。但這并非是“取而代之”,而是逐漸走向整體的“協調發展”。中國ToB的發展的一個重要根基,其實是“中國擁有世界上最成熟的消費互聯網體系”這一巨大的優勢。


          因此,ToC在很長的時間內,仍然會是互聯網的主力,而ToC市場的轉型,也將有賴于ToB產品所提供的服務。


          而隨著中國將“互聯網+”政策上升為國家戰略,更是明確了以互聯網帶動傳統產業的發展方向。因此,互聯網的下半場,即產業互聯網時代的最終形態,將是互聯網與傳統行業的“融合式發展“。


          ToB產品將會成為帶動互聯網下一輪發展的核心驅動力。一方面幫助ToC領域完成轉型,進入更健康、更穩健的發展階段;另一方向,ToB領域賦能傳統產業與互聯網相融合,并最終完成產業升級。



          4.產品形態的融合與趨同


          整體產業的融合趨同,意味產品的特性也將互相融合。一個很重要的現象是:C端產品逐漸變得不那么C端了,而B端產品也越來越變得得不像B端了。


          比如C端產品的主流賽道中,隨著頭部產品的賽道日漸趨于穩定,其產品體量也因為業務擴展而不斷增加。同時,因為產品體系的逐漸形成,為了服務更多的C端用戶,會有越來越多的B類用戶進入平臺,而為了滿足B類商家的需要,產品的B端屬性變得越來越強了。


          而隨著B端產品的不斷受到重視,原先不被重視的產品UI、用戶體驗也逐漸在B端產品中得到加強。B端用戶雖然服務于B端,但使用者終究是人。而隨著競爭的不斷加劇,原來的“重功能、輕體驗”思路逐漸式微。我們逐漸發現,許多B端產品長的越來越像C端產品了,甚至在UI和體驗層面做的與C端產品不相上下。


          因此,隨著產品屬性的融合趨同,意味設計思維勢必會與消費者互聯網時代存在差異。而我們的設計思維將不僅僅局限在誕生于消費互聯網時代的“用戶體驗思維”。我們需要更新的、更廣闊的設計思維,以滿足下一個時代的產品發展需要。


          那么,新的思維是什么?它將從何而來?



          ?

          五、探尋全新的思維方式

          -


          從整個市場的協同發展,到產品形態的融合趨同。那么,我們的設計思維需要如何進行相應的變化?是同樣進行“融合趨同”,還是另辟蹊徑,尋求新的視角?



          1.關鍵詞提取


          首先,不管設計思維如何變化,它一定需要同時滿足兩種產品設計思維的特性。通過前文的分析,我們可以在產品設計特性的維度,提取各自的關鍵詞進行分析:


          產品體驗:誕生于消費互聯網時代的用戶體驗思維,在產業互聯網時代依然是產品設計中最重要的部分。無論是C端還是B端產品,用戶體驗必然是產品的核心競爭力,只有足夠好用、好看,產品才能獲得更多用戶,最終獲得商業上的成功。


          靈活性:在消費互聯網時代,在激烈的競爭中,C端產品的靈活性的打法對于產品的突圍至關重要。而未來的B端產品競爭將會加劇,這就需要B端產品也逐漸需要較強的靈活性。


          成長性:產品的發展必將伴隨著不斷的變化,特別是具有一定體量之后,產品設計的成長性將至關重要。因此,產品的設計是否能夠預見未來發展,滿足不斷變化的產品形態,伴隨著產品不斷地成長,也將成為產品是否能夠持續獲得成功的關鍵因素。


          產品效率:因為產品服務對象的關系,B端產品一直是產品效率的代名詞。而在人口紅利消失與經濟下行的壓力下,產品效率將成為所有企業關注的重要因素之一。產品的效率不僅影響著企業的成本,也是產品競爭力的重要體現。


          這四個關鍵詞,將會是我們在未來所需要關注的四個重點關鍵詞。越是往左,則“C”屬性越強,因為它更多地從用戶的角度出發,更關注用戶體驗。而越是往右,則“B”屬性越強,因為它更多地從企業的角度出發,更關注企業的長期發展。



          2.跳出單一層面,尋求新視角


          在四個關鍵詞中,我們會發現,特性越是靠右,其所需要的整體性就越強。要滿足靈活性,就需要用戶體驗與產品策略相關聯。要滿足成長性,則要進一步結合底層的開發能力。而產品效率的提升,則需要產品的設計與不同層面都有著緊密的耦合。


          在互聯網設計發展的過程中,我們從單點只關注視覺表層的“美工時代”,逐漸發展為關注線性的“用戶體驗思維”。在對于產品用戶體驗層面,確實有著長足的發展。


          但是,單一層面的用戶體驗思維,在逐漸成熟的互聯網時代中,逐漸顯示出了一定的局限性。我們的價值局限于單一的體驗層面,我們似乎無法對產品形成更大的影響力,也難以為產品帶來體驗之外的更多價值。


          因此,設計思維想要滿足新時代的需求,就需要同時滿足前文提到的四個關鍵詞。這就要求我們需要跳出單一層面,以全局的維度去思考產品的設計。


          因此,全局性將成為未來的關鍵,我暫且將這種思維方式稱為——全局性設計思維。




          ?

          六、全局性設計思維概述

          -


          全局性設計思維,即在設計過程中,始終能以更高的維度去審視全局,思考當下的設計。


          何以全局,如何跳出單一層面?這種思維方式的前提,是你要首先了解整個產品(亦或是物體、組織等)的運行方式,清楚的知道整個產品需要達到的目標,從而準確、合理地對針對目前的局部做出設計,并最終構成整個完整的形態。


          而“全局”的前提,是你擁有更高的眼界。你的眼界越高,你對產品、市場、甚至整個社會的洞察就越全面,你就能夠解決越大的問題,你能夠實現的價值就越高。眼界是基礎,解決更大的問題是目標,而全局性設計思維則是實現這個目標的方式與過程。


          全局性設計思維,可以幫助我們跳出產品的單一層面,去思考從產品層、到體驗層、再到開發層這一完成的整體。讓設計滿足體驗層的同時,滿足產品層面的目標,同時讓產品的設計與開發高度耦合,將整個產品串聯成一個完成的整體。


          好了,講了這么多,我們具體應該如何去運用全局性設計思維呢?




          ?

          七、全局性設計思維的運用方式

          -


          全局性設計思維,的應用方式非常廣泛。它并不是一個固定的方程式,而是一個更高層面的指導性設計思維,能夠通過不同的形式,來幫助你解決問題。



          1.全局觀——在生活思考更多可能


          在嘗試這種思維之初,我們可以通過一些小的實踐,去鍛煉這種思維能力。


          在日常的生活、工作中,其實我們有大量的事物可以練習和運用這種思維方式。比如你在裝修一個大房子,需要去選擇房子里的家具。當你在購買家具時,常規的思維方式是:這個家具在某個房間時應該是怎樣搭配的,所以我要購買什么樣形狀、顏色的家具,來滿足這個房間的需要。


          但是,用這么思維方式來購買家具,將為對家具的靈活性與長期價值造成一定影響。從居住環境的長遠來看,也許這個家具有可能會因為某些原因,需要放到另一個房間,而它的形狀、尺寸、配色卻無法滿足其他房間的需要。最終,我們只能重新購買,或者接受一個風格、尺寸上并不搭調的房間出現。


          因此,當我們在購買家具時,我們是否可以利用全局性設計思維,從整體空間的角度出發(而非單個房間),去思考如何讓家具滿足更多空間需求。長此以往,我們不僅可以打造一個風格統一的大空間,同時也能增加每個家具的利用率,在無形中也增加了這個家具本身的價值。


          之所以舉家具這個例子,是因為這個原理與產品設計的原理非常類似。你可以將這個房子看成是整個產品,而家具則是不同的組件。通過不同的家具(組件),構成了我們的不同功能模塊(房間/功能區),而所有的功能模塊則構成了整個產品(房子)。


          房子(產品體量)越大,房間/功能區(功能模塊)就越多,家具(組件)的多樣性、復雜性就越高,我們就越是需要從全局的角度去思考裝修的統一性(風格體系化)和家具的通用性(樣式組件化)。只有這樣,我們才能更好地去打造一個風格統一、體驗一致,同時又具備足夠自由調整空間的“大房子”。



          2.全鏈路——從全流程中重新思考設計


          當你仔細地去理解許多非常著名的設計作品時。你會發現,幾乎所有優秀的、巧妙的設計,往往在設計中都體現了全局性的設計思維。它不僅僅解決著當前的問題,同時也能夠解決更大的問題,發揮巨大的價值。


          比如著名的坂茂衛生紙的設計,看似普通,只是將衛生紙的軸心從圓形改成了方形,但它卻成為了舉世聞名的、公認的好的設計。為什么呢?

          undefined


          我們先了解一下這個設計為什么好。


          首先,傳統的圓形紙卷拉出來的紙會比你實際需要的更多。而方形紙卷則由于阻力的作用,讓你用得更少,從而起到了解決資源的作用。其次,在運輸過程中,圓形的紙卷之間會產生很大的空隙,而方形紙卷則能夠緊緊靠在一起,提升空間利用率,從而起到降低運輸成本的作用。


          這簡單的設計,居然發揮了如此大的作用。


          那么,為什么我們在設計時就沒有考慮到這些問題呢?因為我們從最開始,就沒有從“紙”的整個全流程來去思考問題。


          讓我們“站的更遠一些”,紙這個商品,并非只是我們見到的在商店售賣的那一刻。它從工廠中制造完成,通過運輸送到每個超市中,當我們購買以后,它又會在很長一段時間內,出現在衛生間,陪伴你使用的每一刻。我們可以將整個流程分為3個場景,而每個不同的場景,又將會對紙本身有著不同的影響。


          • 運輸場景——衛生紙的運輸成本——衛生紙的價格

          • 售賣場景——衛生紙的造型、包裝——影響用戶購買

          • 使用場景——衛生紙的使用過程——影響用戶的使用體驗


          當我們能夠考慮到衛生紙的運輸過程時,我們就可以通過設計去降低運輸成本;而當我們可以考慮到用戶的使用場景時,我們就可以通過設計,去提升阻力,降低使用量,間接地去提升用戶的使用體驗。而當我們通過全局性設計思維,可以同時解決這三個問題時,我們的設計就是好的設計,就擁有了更高的價值。


          發現了嗎,為什么你沒有想到相同的設計方案?設計能力并不是關鍵,設計思維才是指引你做出好的設計的前提。當你能按上述的方式,去思考整個流程、不同的場景,我相信大多數的人都能夠設計出坂茂的設計方案,甚至比這個方案更好的解決方式。




          ?

          八、以全局性設計思維,構建設計體系

          -


          通過前面的兩個案例,相信大家已經了解了全局觀、全鏈路兩種應用方式。


          那么,我們最最最關心的問題——如何在業務中去使用這種思維呢?


          在產品設計中,全局性設計思維也有著非常多樣化的使用方式和場景,在之后的文章中我也會講到很多應用方式。但是,在所有的方式中,我認為最為有效的,便是以全局性設計思維,幫助產品去構建一個完整的設計體系。



          1.設計體系概述


          什么是設計體系?談及設計體系,大多數設計師會認為,設計體系就是設計規范?!安痪褪钦覀€名次包裝一下規范嘛?”


          我們為什么需要設計體系?它與設計規范有何不同呢?


          設計規范是設計師最為熟悉的一種規范文檔。在產品設計時,優秀的設計師通常都會建立設計規范。然而在實際的項目中,設計規范往往無法難以有效實施。比如在開發眼中,規范并不符合開發規則,過于碎片化。而產品經理通常又不會去了解設計規范,因此在構建產品框架時也常常隨意發揮。


          很多項目做到最后,設計規范僅存在于紙面的意義,并隨著項目的發展逐漸混亂。為什么會這樣? 


          因為不同職能間的思考方式存在差別,設計規范對于其他職能來說經常難以理解與運用,無法與其他職能形成有效聯動。


          設計規范僅僅是基于視覺層面的規范,它是一個“平面”。而設計體系則是貫穿于產品的每個層面的、與產品深度結合的完整體系,它是“立體”的“有機生命體”。


          設計體系的核心在于“體”,它是貫穿于整個產品的完整體系。設計體系由設計師創造,并深度融合于產品每個部分。它能夠讓產品更緊密、更統一、更有序,伴隨著產品的生長,與產品共同進化,并最終推動產品的發展。


          創造并推動這一體系,則要求設計師需要更全面的能力。只有充分地去理解并參與產品的每個部分的設計,才能讓設計真正延伸至產品的每個部分。


          而創造這一切的前提,便是全局性設計思維。



          2.設計體系的構建法則


          羅馬不是一天建成的,設計體系也是如此。設計體系的建立是一個漫長的過程(與產品體量相關),需要在前期投入更多的精力。但若是你的方法得當,就會在項目中越來越輕松,并以此形成良性循環,而你也會越來越有成就感。


          如何正確地去構建設計體系呢?我在這里總結了幾個要點:



          1)樹立觀念


          首先,樹立長期的體系化意識是必要前提。在任何項目中都要時刻保持體系化思維,著眼于整個項目,去尋找體系化的推動時機。當你在潛意識中擁有這種思維之后,你會自然而然的將其植入到設計中。



          2)以解決問題為導向


          體系化并非憑空建立,而是建立在解決問題的基礎之上。設計體系的本質,就是由無數個標準化的解決方案,最終構成的一個完整的體系。因此,我們要以解決問題為導向,以全局性思維去思考問題的本質,最終建立適用于全局設計體系。



          3)以小為始,重視質量


          腳踏實地,從小處入手,去發現產品中最基礎的一些問題。表面上看這些問題,對項目影響不大,但他們數量龐大,加在一起便會嚴重影響整個產品的效率。因此,我們要首先建立高品質的基礎體系,再以此為基礎構建更大的體系。


          不要一開始就設法建立一個巨大的體系,那樣只會是一盤散沙,因為它的結構是無序、混亂、不健康的。而這也是大多設計規范缺乏有效性和可實施性的根源。


          梅拉妮·米歇爾的《復雜》一書中講到,任何復雜系統,都是由無數個體通過簡單的算法所構成的。在算法領域也是同樣的原理,一個優秀而強大的代碼,必然是由無數個小型模塊,通過簡單的算法耦合形成巨大的代碼矩陣。基礎算法越強大、代碼結構越“健康”,可擴展性和靈活性就越強,其能力就越強大。



          4)從規范入手,由面到體


          從本質上來說,設計體系是由“多個個層面的規范”組合而成的。因此,由設計師推動的體系化建設,往往最初都是從設計規范這一“單層規范”開始。但是,設計體系的建設需要將單層的規范,通過不同的方式,轉化為不同層面的規范,最終由面到體,形成體系化。



          5)換位思考,尋求跨職能合作


          設計體系的建立與維護,通常需要多職能的通力協作。因此,我們需要經常換位思考,在完成設計的工作,幫助其他職能完成目標。只有這樣,才能得到更多的信任,并以此為基礎推動更多體系化的建設。


          比如我在設計一個功能模塊的頁面時,首先會與不同模塊產品經理進行交流,了解不同的業務需求,并從產品層面就開始尋求統一性與通用性。這樣的話,當其他模塊需要同一個功能時,前端便可以直接復用,同時后端的數據也可以進行互通。而在開發端,我也會詳細了解不同端的開發實現原理,務求設計規范與開發規則在理解上的一致性。這一既方便了開發理解規范,同時也從根本上提升了開還原的準確性。


          長此以往,整個團隊就能夠建立良好的溝通和互信關系。有了這種默契,設計體系的推動就容易多了。



          6)保持優化,不斷成長


          設計體系的另一個重要價值在于,它是可以伴隨產品不斷成長的。所有產品都是在發展中不斷變化的,過分僵硬的規則,將會對產品發展起到反作用。


          在業務發展中,產品一定會不斷地加入新的功能模塊,并對原有頁面作出相應的調整。因此,設計體系需要時刻與產品策略保持一致,及時與上下游職能溝通,不斷地針對產品發展進行優化,以保證設計體系能夠符合產品的發展需要。



          7)使用正確的推動方式


          體系化最終能否成功實施,推動的方式至關重要。


          在日常的項目中,大多數的業務方對設計體系了解甚少,也難以體會其中的價值。因此,他們通常會認為這些東西毫無必要,多數情況也不太愿意配合體系的推進。如果強行推進,反而會引起不必要的阻力,招致反感。那么,我們應該如何正確的去推進設計體系建設呢?


          1.為他人帶來價值:首先,尋找雙方共同的利益點是首要任務。也許是可以讓其他職能的工作更高效,也許能夠促使其達成KPI,再不直接,那也一定能夠為整個產品帶來價值(不然你也沒必要推了。。)??傊O計體系一定要能夠為他人帶來價值,這樣才能順利推進。否則人家憑什么要協助你推進,因為你美麗可愛嗎?你也可能比較可愛,但總歸是不能一直這么來吧。。。


          2.在解決問題后提出方案:不要一開始就啪一下拋出一個“宏大的理想”,大部分人會覺得你不切實際。你只需要通過這個體系,幫助業務方先解決一個問題,然后再提出你解決方式的來源——一個嚴謹的、可驗證的、長遠價值的體系化解決方案。


          3.尋找合適的推動時間:最后,對于設計體系來說,尋找到正確、恰當的推進時機至關重要。比如當你在平時突然想要提出,對現有品牌進行升級時,大多數業務方都會認為你是沒事找事。而如果情況是在新的一年中,產品進行了概念的升級,這時候你將概念以及未來的品牌規劃融入在你的方案中,再去推進品牌升級,就會容易很多了。




          ?

          九、文章預告

          -


          本文旨在引導大家更好地理解和學習這種思維方式,想要用好全局性設計思維,光靠講是遠遠不夠的。最重要的是能將這種思維帶入到產品中,為業務帶來更大的價值。


          因此,在后續的幾篇文章中,我將通過不同類型案例,為大家深入講解全局性的具體實踐案例。



          全局性設計思維 | 如何打造強大的品牌體系


          為什么要建立品牌體系?品牌體系有哪些價值?設計師應該如何推動品牌體系的建立?


          本文將帶你了解網易智慧企業品牌體系的建設與推動全過程,聊一聊品牌體系建設的那些事兒~



          FishDesign組件庫 | 從零到一構建企業級UI組件庫


          我們為什么要建立組件庫?在產品的什么階段需要組件庫?如何抽象業務組件?組件庫設計過程中有哪些重要的細節需要注意?


          本文帶你深入了解,網易Web端組件庫——FishDesign組件庫從零到一的完整全過程。



          全局性設計思維 | 如何構建事業部級大型設計體系


          設計體系有什么價值?如何基于不同的業務建立設計體系?設計師如何推動體系化建設?在體系化過程中有哪些需要注意的地方?


          我將會在這篇文章中,為大家介紹網易智慧企業設計體系構建全過程


          1. 樣式組件化+規范體系化,形成產品設計體系,整體重構產品線。


          2. 結合品牌體系,推動事業部更多產品加入體系,形成智慧企業Web端產品設計體系


          3. 推動更多產品/業務融入體系中,讓智慧企業設計體系不斷成長,賦能業務發展




          ?

          寫在最后

          -


          好吧,似乎文章又寫得偏長了一些。只能說,想要認真地講清楚一個道理,確實不是一件容易的事情。


          設計思維本身并不復雜,但想要講清楚它的背景、原理及價值,就需要把它整個掰開來講。而為了確保設計思維的可實施性,又需要經過大量的實踐研究,自己能夠走通以后,才能與大家分享。


          坦白講,似乎整個社會都在追求快節奏、碎片化閱讀。但若是因此而喪失了自己學習的節奏,那么等于是沒有節奏的,你的知識體系也將是東拼西湊,無法形成一套完整的體系。這也是我更新比較慢的原因之一,希望大家讀完文章,能夠切實地得到一些東西,這就很有意義。


          不過更新這么慢,汽水和芬達都有責任。天天在面前賣萌啊吸引你注意力,那你就得陪他們玩吧?玩完以后雞胸肉你要煮一個吧?吃飯打架了你得調解吧。。你們真的不能怪我。


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

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



          文章來源:站酷   作者:Jady_劍杰

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

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


          復雜系統如何設計 | 論B端產品的體系化構建

          ui設計分享達人



          導讀


          為什么B端產品總是容易“失控”?B端產品設計與C端有何差異?如何在不斷復雜的系統中,權衡效率、成本、體驗之間的關系? 


          本文將帶你從B端產品的本質出發,了解產品發展過程中容易出現的問題,并從復雜系統的角度去探討設計體系的構建方式。



          目錄


          一、「 困局 」容易“失控”的B端產品

          A .「 關注重點的差異性 」

          B .「 微小差異的不斷疊加 」

          C .「 產品發展進入惡性循環 」

          D .「 進入效率拐點,產品失控 」


          二、「 啟發 」從復雜科學的角度思考設計

          A.「 自然算法 」

          B.「 物質的構成原理 」


          三、「 探究 」什么是產品設計體系?

          A.「 定義 」

          B .「 組成部分 」

          C .「團隊能力要求 」

          D .「 構建方向 」


          四、「 剖析 」B端產品的生命周期

          「 產品生命周期概述 」

          A .「 初創期 」解決核心問題,產生價值

          B .「 成長期 」能力完善,產品擴張

          C .「 成熟期 」效率提升,快速增長

          D .「 暮年期 」商業價值降低,發展逐漸停滯


          NEXT、「 下期預告 」設計體系的構建法則




          前言


          隨著產業互聯網時代的到來,市場對B端產品的重視程度逐漸提升。然而,談及B端產品,特別是SaaS產品,大多數設計師對此并不是特別感興趣。一來,SaaS更注重功能層面,似乎本身對設計的要求并不高;二來,SaaS產品的最終實現效果總是不盡人意,就算設計得再好看,實現出來也難以出彩。


          確實,若設計師僅僅只是關注視覺層面本身,那么B端產品確實不像C端那么吸引人。但是,若你能以整個產品構建的角度去思考B端產品設計,那么設計師能夠在其中發揮的空間是巨大的。


          假如把C端產品比作精致的小房子,那B端產品就是一幢巨大的高層建筑。建造小房子,你可以盡情地發揮創意,追逐潮流,大不了推倒重來。而建造大房子,則需要設計師考慮更多的維度,因為這是一個長期而復雜的工程。


          建筑的外觀不僅需要好看,更需要足夠耐看、穩定;為了適應更多人的需求,你不僅要考慮房子的軟裝,還要考慮戶型的合理性、通用性;而為了降低成本,你還需要考慮家具、硬裝的標準化、房間的兼容性等等…


          “你是否有信心建造一個宏偉的高樓大廈?” 


          這是我在B端設計中,反復強調體系化思維的原因之一。想要建造一個大型建筑,沒有體系化思維、沒有更完善的多職能協作流程,那么這座高樓一定會在建設過程中埋下隱患。而當問題一旦出現,涉及到的沉沒成本也將會非常巨大。


          當然,對于C端產品來說,體系化也愈發重要了。隨著互聯網時代的持續發展,一些C端產品的復雜性也堪比B端。我在之前的文章中提到過一個觀點:“C端B化,B端C化”。在未來的數字產品設計中,B端產品將會逐漸開始重視產品的外觀與體驗,因為觸達的人群更年輕化、對體驗要求更高了。而C端產品也會更注重體系化建設,因為產品體量越來越大,需要尋求效率與成本之間的平衡點。


          產品設計體系,本質上是一套更科學的復雜性數字產品的設計方法與工作流程。因此,不管是B端產品還是C端產品,設計體系能夠在提升設計品質的同時,讓產品更“可控”,提升效能,降低成本。


          這套設計方法論,是我在工作中不斷實踐與完善的一些經驗與方法。希望能借此分享一些自己淺薄的經驗,也探討一下數字產品設計未來的形態。




          ?

          一、「 困局 」容易“失控”的B端產品

          -


          作為較為復雜的數字產品,B端產品在快速發展的過程中,總是容易出現一些問題。特別是當產品體量到達一定階段后,問題就會逐漸暴露出來,比如:


          1. 產品丑、設計質量低;

          2. 組件樣式繁多,操作習慣不一致;

          3. 新老系統差異大,不同模塊體驗差異大;

          4. 頁面結構混亂。


          等等…


          很多問題大家都能明顯地意識到,但往往因為“不影響售賣”、“價值不高”、“新功能優先”等理由被擱置。


          隨著問題逐漸積累,產品的優化成本也變得越來越高,最終使整個產品已經積重難返。若只是多部分頁面/組件進行優化,小修小補,雖然成本低,但成效甚微;若是進行大修大補,那么優化成本將遠大于研發新功能的成本。


          這種普遍的B端產品現象,被稱為“產品失控”,即——團隊已經對整個產品的形態失去控制力。


          那么,為什么B端產品特別容易出現這種問題呢?



          A .「 關注重點的差異性 


          首先,產品的本質決定了其關注重點的差異性。


          與C端產品不同的是,B端產品往往更看重“能力”(為企業用戶解決問題),而產品的銷售方式與付費模式,也決定了產品體驗并非首要關注的對象。由于B端產品通常針對企業用戶,需要更長的研發過程,產品的體量和復雜性也相對較高。因此,除了產品解決問題的“能力”之外,產品還需要關注研發的效率及成本。


          因此,在產品的發展初期,企業通常對效率最為關注,其次是成本,最后才是體驗(能用就行)。絕大多數B端企業,只有在產品跑通商業邏輯,并具備一定用戶與盈利預期之后,才會對產品的體驗逐漸重視起來。



          B .「 微小差異的不斷疊加 


          任何微小的差異,在無數次的疊加之后,都會被快速放大。特別是當團隊的人員逐漸增多后,放大速度將會呈指數級上升。


          為了配合產品的快速發展,產品往往會采用“堆量”的研發模式。增加研發效率,最簡單直接的方法便是投入更多的資源。隨著產品不斷增加模塊、功能、頁面,團隊人員也在不斷地擴充。


          但是,人類不是機器,并非簡單的1+1=2。團隊數量的上升雖然會帶來效率的短期提升,但同樣也會增加團隊的管理成本。不同的產品經理、設計師、研發人員,對于產品的認知是不同的。隨著團隊人員的不斷增加,“個體差異性”將會被不斷地疊加與放大。


          就像“傳話筒”的游戲一樣,同一個事物,不同的人理解總是不同的,經過多次的“傳話”以后,往往與原本的意思已經大相徑庭了。


          這種情況表現在產品設計中,則會出現:當相同的組件由不同的人做時,總是會在基本樣式、實現原理、交互細節等不同的維度出現差異。比如上圖中的導航菜單組件,不同的模塊在開發時總是會存在差異,最后差異越來越大,形成了五花八門的導航菜單形式。



          C .「 產品發展進入惡性循環 


          令人遺憾的是,雖然問題很明顯。但是在不斷的“成本考量”中,產品團隊往往優先關注新功能的開發,而忽略底層問題的優化。


          隨著產品的快速發展,產品的優化/迭代成本將會逐漸大于研發新功能的成本。要么背負巨大的成本進行整體重構;要么降低標準,繼續以這種模式不斷疊加新功能。


          在這種情況下,大部分B端產品往往會選擇后者。于是,產品的發展將會進入一個“惡性循環”


          • 產品快速發展,功能不斷疊加;

          • 各模塊由不同的產品、不同的開發研發,導致各模塊之間差異增加;

          • 產品丑、體驗不統一,但老系統優化成本過高。綜合衡量,優先進行新功能研發;

          • 所有模塊標準不統一,產品迭代效率持續降低,維護成本持續增加。



          D .「 進入效率拐點,產品失控 


          產品的發展猶如一輛快速奔馳的巨型列車,一旦加速便難以停止。


          隨著問題的反復出現,以及在一次次的“利益權衡”中選擇性的忽略,產品的惡性循環不斷重復,而問題也逐漸疊加、沉積下來。


          當這個問題已經大到我們無法回避時,我們才發現:產品的單位迭代/優化成本,已經遠遠大于新功能的研發成本。而新功能帶來的增量,已經無法抵消現有模塊的迭代成本——產品迎來了效率拐點。


          就像一個龐大而復雜的機器,雖然依舊可以運行,但整體效率已經很低了,而與之對應的維修成本則非常巨大。小修小補根本無法解決問題,而大修大補則很有可能會帶來更大的虧損。


          最終,產品逐漸在“失控”中難以自拔,競爭力逐漸降低,但整個團隊對此卻無能為力,嚴重影響了企業的發展。


          那么,在產品發展中,我們應該如何避免這種情況呢?換而言之,一個高度復雜的數字產品,我們應該如何設計,才能避免其逐步走向混亂? 




          ?

          二、「 啟發 」從復雜科學的角度思考設計

          -


          如果我們將B端產品看作是一個復雜系統,那么產品“失控”的本質即——在不斷復雜化的形態中,缺乏有效的控制機制,最終導致整個系統失去控制。 


          但是,在大自然面前,B端產品這種復雜程度顯然不值得一提。


          像大自然這樣的復雜系統,是如何構成的?所有的物體都由原子所構成,為什么簡單的一百多種原子,能夠構成如此復雜的世界?生命又是如何在無機物的世界中誕生,并逐步進化成如此復雜的個體的?



          A.「 自然算法 


          道生一、一生二、二生三、三生萬物...無論是老子的《道德經》,還是《深奧的簡潔》、《萬物皆數》、《復雜》這些現代的書籍中都闡述了這樣一個觀點:


          任何看似復雜而又可控的系統,一定存在著精簡的“算法”,通過不斷的疊加從而形成復雜系統。


          就像愛因斯坦說的:“宇宙最不可理解之處,就是它居然是可以被理解。”


          在大自然中,有很多的花紋與圖案的形狀都存在相同的規律。比如上圖中的羊齒草分形圖案,這種圖案在森林當中到處可見,我們看到很多樹的形狀跟葉子的形狀是一致的,這就是一種分形圖案。而這種分形的圖案本質上是一個公式,通過不斷地自我引用進行迭代,這便是分形。


          科赫曲線(Koch curve)就是一種分形。其形態似雪花,又稱科赫雪花(Koch snowflake)、科赫星(Koch star)、科赫島(Koch island)或雪花曲線(Snowflake curve)。


          它最早出現在瑞典數學家海里格·馮·科赫的論文中。我們將一根直線分成四段,然后向中間擠壓形成等邊的倒V形狀;接著再將每個倒V的邊進行相同的操作,不斷地重復之后,我們發現:第一步是倒V型、第二步變成了大衛星,第三部變成了楓葉,第四步… 經過無數步以后,最終成了越來越復雜的“雪花”形態。


          科赫曲線便是“自然算法”的一種。海岸線雖然很復雜,但是卻有一個重要的特性——自相似性。從不同比例尺的地形圖上,我們可以看出海岸線的形狀大體相同,其曲折、復雜程度也很相似,換句話說,任意一段海岸線就像是整個海岸線按比例縮小的結果。而海岸線的構成原理就是這種科赫曲線,它是通過天然的演化,不斷折疊最終形成了這種形狀。


          可以發現,他們都是由 基礎物質 x 簡單算法 x 隨機變量,經過無數次疊加后,最終形成了一個復雜而多變的整體。



          B.「 物質的構成原理 


          宇宙中還有其他各種驚人的“巧合”。愛因斯坦的相對論揭示了宏觀世界的規律性,普朗克和海森堡的量子力學揭示了微觀物質世界的規律。當我們從微觀世界到天文學會發現——原子核的構成方式居然與天體的構成非常相似。粒子圍繞原子核的運動方式,就好像行星圍繞太陽運動一樣。


          不管是整個宇宙,還是生命體,將其置于復雜科學的研究框架中,那些基本定律最終也會變得極其簡單


          在宇宙中所知最為復雜的形態,便是如同我們自身的生物。這些復雜體由已知存在于銀河系中最普通的物質所構成。但是,通過氨基酸的形態,這些基本原料竟能自然地將自己組合成一個自組織系統。


          混沌中隱藏的算法,使宇宙成為極有秩序的地方。而在秩序中隱藏的隨機數,又使得宇宙成為極為豐富的世界。


          也正是因為算法的精簡,一切物質的創造才能具備復制性、延續性、進化性。


          那么,我們反過來思考——想要使復雜的系統簡單可控,是否就需要一套簡潔、有效的“算法”?通過“算法”,將基礎的“物質”不斷地“有序疊加”,形成一個可控的復雜體系。


          因此,對于復雜的SaaS系統設計,我開始引入“設計體系”這一概念,希望能夠找到未來SaaS產品設計的發展方向。只有設計體系的建立,才能保證產品可控性,才能在不斷復雜系統中,保證效率、成本、體驗之間的平衡。




          ?

          三、「 探究 」什么是產品設計體系?

          -


          產品設計體系,在國內仍舊是較為陌生的詞匯。什么是設計體系?


          A.「 定義 


          一個成熟的數字產品,需要有一個穩定、且持續迭代的形態。創造這個形態的過程,我們稱之為廣義上的產品設計(這里指產品的整個策劃和設計過程,包含策劃、交互、視覺及部分前端開發)。而負責控制和維護這個形態的這套系統,便是產品設計體系。


          我們接觸到的更多是設計系統(Design System),比如平臺級的設計體系,Apple、Google、Microsoft等系統級的設計系統,及其設計開發套件、應用生態。公司級的設計系統,如Airbnb設計系統、IBM的Carbon設計系統、螞蟻金服的Alipay Design等。


          但是,在一個企業內部,想要Design System能夠系統性地運轉,還需要基于這套標準建立的團隊協作機制。只有設計標準與團隊協作標準完美融合,才能建立真正的設計體系。



          B .「 組成部分 


          如果將數字產品比作復雜的“生命體”,產品的發展比作競爭中“自我進化”,那么設計體系便是產品的DNA。它既是產品形態的控制源,又是不斷自我迭代的進化源,它的作用是:


          • 控制產品外觀——感知性模型(視覺風格/規范)

          • 制造基礎構件——功能性模型(基礎/復合組件)

          • 模塊的構建規則——模式語言(產品框架規范)

          • 產品標準定義、生產方式制定——協作模型(高度協同的工作流程)


          它不僅能控制產品的“生產結果”,提升產品質量;還能規范產品的“生產過程”,形成一套完整的多職能協作流程,提升產品的生產、迭代和維護效率。 


          從宏觀來看,設計體系像是一個“規范的復合體”,它是各職能之間規范的有效整合,產品框架、交互規范、視覺規范、前端規則,同時也是基于整合規范所創造的一套創新的工作模式。



          C .「團隊能力要求 


          設計體系的建立,需要整個產品團隊擁有一致的目標,并為之通力協作才能完成。這就需要整個團隊擁有較高的平均素質與契合度


          同時,體系化的建立和推動,也需要團隊中有人牽頭去推動。設計師作為“產品-開發”的中間環節,是非常有條件成為推動者的角色的。


          當然,這就要求設計師擁有更豐富的橫向能力。


          一方面,設計師需要將自身的能力邊界進行拓展,與上下游的職能保持密切的溝通,并解他們的訴求。只有當設計體系滿足各方利益時,體系化才有推動的空間。


          另一方面,對于產品側與開發側人員,設計團隊也可以通過培訓來提升他們的能力邊界。比如針對產品的交互培訓、針對開發人員的基礎審美培訓等。這樣才能提升產品的下限與上限,增強產品的綜合競爭力。



          D .「 構建方向 


          設計體系并非超脫于產品之上,而是根植于產品的成長過程中。


          想要推動體系化的建立,必須充分了解產品發展的基本規律。產品處于不同的生命周期,所要解決的問題是不同的。在正確的時間做正確的事情,并對未來的形態進行規劃,才能逐步讓設計體系根植于產品、融合于產品。


          因此,在下一章,我們首先來了解一下B端產品的生命周期。




          ?

          四、「 剖析 」B端產品的生命周期

          -


          對于設計師來說,首先要更宏觀地了解產品所處的生命階段,才能知道設計需要解決的問題是什么,并以此有針對性制定不同的設計策略,最終幫助產品構建完善設計體系。


          本章更多的是對B端產品的發展階段做一個剖析,而不同階段具體的實施策略,會在后面講解。



          「 產品生命周期概述  


          類似于人的成長歷程,一個新的B端產品從誕生到逐步擴大,通常都會經歷幾個不同的生命階段。


          B端產品研發是一個漫長而系統化的過程。這個過程通常伴隨著商業業務發展與商業戰略模式的不斷調整。


          B端產品從立項到下線,產品會處于幾個典型的不同狀態中,這就是產品的生命周期。通常來看,大多數產品都會經歷以下幾個生命周期。初創期-成長期-成熟期,直至最終進入暮年期。


          而產品的商業價值,也會伴隨著產品的發展而變化。在通常情況下,伴隨著產品的逐漸成長,其商業價值也會隨之增長,并在成熟期進入黃金的商業價值期。而當商業價值出現大幅、持續性的降低時,則基本算是進入了暮年期。


          那么,不同的生命周期中,產品將會遇到哪些問題?而為了保證產品的持續發展,產品團隊又需要做哪些事情呢?



          A .「 初創期 」解決核心問題,產生價值


          初創期,即產品已經從構思到研發,并成為了初步的產品。這個時期,產品雖然還不能覆蓋完整業務,但已經能夠順利運行。


          從構思到創意,再到實踐落地。B端產品的誕生,通常源于在行業內深耕多年的資深玩家。在不斷地實踐中,通過創意與實踐,找到了一條能夠幫助行業解決問題、提升效率的路徑。


          在這個時期,產品需要解決以下幾個問題: 


          1)用戶是誰?


          B端業務的本質,就是“向組織銷售服務來獲得盈利”。哪些企業最需要你的產品?哪一類用戶的問題最需要通過這種方式得到解決的?這些都是需要在早期非常明確的。


          站在普羅大眾的角度去規劃產品固然是好的,但成功的產品都始于一小部分早期用戶;B端產品的用戶通常來自某一垂直領域,首先讓他們喜歡上你的產品,然后慢慢向外拓展至更大的人群當中。


          想想看,最初一千名喜歡你產品的種子用戶可能是哪些人?


          2)產品能夠解決什么問題?


          我們要為用戶解決什么問題?“用戶的問題”可能是一個需求、一個困擾或是一個機遇。他們的需求是否真的是痛點?


          這個時期,團隊需要拜訪大量的目標用戶,通過交流獲取痛點。我們必須驗證這個需求的真實性,以及我們的解決方案是否具備一定的可實施性。


          我們可以通過更具象的UI或流程,初步展示想法,不斷優化。最終形成一個可驗證的初步產品Demo,并通過Demo進一步與潛在用戶進行溝通。


          3)這個問題是否普遍?是否具備標準化的可能?


          不同企業的需求是有差異的,如何將個性化的需求抽象成共性的解決方案?如何權衡范圍與成本之間的關系?我們要將不同企業的需求進行抽象,形成標準化的解決路徑。


          這個階段,我們需要為種子用戶創建方向聚焦的MVP。MVP必須是名副其實的最小化可行產品,要為種子用戶帶來端到端的精準體驗。如果他們不理解產品功能,不知道如何或為什么使用,或是發現其性能低劣、bug 太多,無法達到“可行”的程度,那么你的假設就難以得到有效驗證。


          4)是否能夠形成完整的商業閉環?


          用戶是否真的會為這個產品買單?換句話說,產品是否能賺錢并且養活整個團隊?


          B端產品在初創期,最重要的是快速驗證產品與業務的親密性,能否完成既定的商業戰略。產品團隊需要通過磨合業務,快速調整業務解決方案和產品架構。


          不僅是產品的打磨,整個團隊也要形成完整的閉環。工作流程、產品的商業運轉機制也要初步跑起來。產品的售前、解決方案、產品研發、實施、客戶成功,我們需要真實地完成這一套閉環的操作,并基于此做團隊毛利模型的測算。 


          解決問題,帶來價值,并且能夠將價值轉化為收益,這才是產品可持續發展的關鍵。只有跑通完整的商業模式,擁有長期的盈利預期,產品才能順利進入下一個階段。



          B .「 成長期 」能力完善,產品擴張


          成長期,即產品形態初具完善,并具備完整商業閉環之后,處于快速成長的時期。這個時期,產品將進行快速的迭代,覆蓋的業務一天比一天完整,能滿足的業務需求越來越多,而產品為業務帶來的價值越來越大。


          與新生期的區別在于,新生期時的迭代方向還未完全明確,迭代更多的是嘗試,磨合業務與產品。而在成長期時,產品的迭代方向已經是非常清晰了的。


          1)更多用戶,更多真實需求


          產品在真正投入運營之后,所遇到的情況一定與MVP時期有所區別。隨著產品的不斷售賣,我們將會接觸到越來越多的真實用戶,以及更多的真實需求。而這些用戶與他們的訴求,將會成為產品發展的指引。


          2)解決更多問題,業務范圍擴張


          經過長期的打磨,產品的形態和可用性已經初步成熟了,商業模式也已經初步跑通。隨著更多的真實需求,產品將會選擇有價值的方向擴張業務范圍,從“解決一個問題”逐漸走向“解決一系列問題”。


          3)功能完善,產品體量快速增加


          伴隨產品的快速迭代,產品的基礎功能會逐漸完善,同時也會基于核心功能去搭建更為豐富的功能矩陣。更多的能力、產品模塊、頁面,最終逐漸疊加為一個完整的大型產品。


          4)組織逐漸完善,人員專業化


          隨著業務擴張,組織架構逐漸完善。為了提高專業性與效率,團隊人員從“多面手”逐漸轉化為專業化方向。與之對應的是,團隊成員的數量也會在這個時期快速增加。售前、解決方案、產品研發、實施、客戶成功,這一套完整的團隊模型在各模塊中不斷地復制。



          C .「 成熟期 」效率提升,快速增長


          成熟期,即產品的形態已經穩定,并能夠創造持續的商業價值。處于成熟期的產品,肯定是已經進行商業化運行的。反之,沒有達到預期的商業價值的產品,不能算成熟期。


          進入這個階段時,產品已經實現了產品-市場匹配。但是,我們需要對整個產品、以及團隊進行一系列的調和與優化,才能讓整個產品的形態與運作方式更加合理,以便將產品推向更廣闊的市場。


          1)產品效率、組織效能提升


          經過一系列的快速發展,產品體量通常都會比較大,而團隊成員也快速擴張。隨著一致性成本、溝通成本增加,勢必會造成研發效率、組織效能會下降。因此,如何降低產品的單位研發成本?如何讓整個團隊的組織效能達到最佳狀態?是需要解決的問題。特別是當產品具備一定的客戶數量以后,單位研發成本的降低將會極大提升產品整體的利潤率。


          2)產品設計-研發標準化,構建完整鏈路


          通過產品設計-研發標準化、數據架構標準化,打通不同模塊的壁壘,提升模塊化與靈活性。將單點之間的競爭力相互配合,形成“場域”競爭力。


          產品的單點也許不能保證都有最佳的競爭力,但如果我們能夠提供一系列的、高質量、無縫銜接的配套服務形成閉環,將會形成強大的整體競爭優勢。同時,產品設計-研發標準化,能夠增加產品售賣的靈活性,通過靈活的組合方式吸引不同的用戶,提升銷售靈活性與成單率。


          3)提供高質量的用戶體驗


          產品最終是給人用的,用戶體驗也會在將來逐漸成為B端產品的核心競爭力。隨著競爭的加劇,以及用戶群體的逐漸年輕化,用戶體驗將成為企業在選擇產品時的重要考量因素,也是口碑傳播的重要途徑。


          由于在“產品-市場匹配”階段需要盡快地推出產品,所以在設計開發過程中可能遺留諸多問題,需要進一步打磨優化。產品設計需要與開發具備高度的一致性,視覺交互是否合理,前端代碼是否準確合理,操作反饋是否高效等問題,都需要這個階段來進行調和。


          4)教育市場,賣給更多的人


          當產品逐漸成熟并具備一定體量之后,單靠銷售跑單是遠遠達不到發展要求。這個階段,需要市場部人員對市場進行教育,聚焦不同的行業領域,從“點式營銷”轉變為“面式營銷”,并配合銷售人員進行產品的售賣。因此,在這個階段,產品的品牌力、核心能力的傳播將至關重要。



          D .「 暮年期 」商業價值降低,發展逐漸停滯


          暮年期,即產品發展停滯甚至倒退,逐漸失去商業價值的產品。


          B端產品進入暮年期的原因,主要有兩個。一是,伴隨著業務的發展,產品已經很難滿足業務需求。且翻新產品的投入產出比較低。二是,伴隨產品的使用時長,產品將變得臃腫和遲鈍,逐漸難以敏捷地滿足業務需求。


          很多時候,商業環境的快速發展、技術的更新迭代都有可能成為產品進入暮年期的原因。對于暮年期的產品,根據商業戰略,產品經理既有可能要延長產品的壽命,也有可能持續保障產品完成順利換代。當然,更多暮年期的B端產品,由于業務的調整,最終迎來生命的終結。


          需要注意的是,很多產品因為在成長期、發展期無法建立有效的產品控制機制,導致產品過早的進入臃腫階段。也就是前文中所講的“產品失控”,非常有可能加速產品暮年期的到來。


          因此,是否能在前三個階段建立健康、完善的設計體系,是產品能夠獲得更長生命力、更多價值的關鍵。

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

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



          文章來源:站酷   作者:Jady_劍杰

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

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




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



          日歷

          鏈接

          個人資料

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

          存檔

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