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

          首頁

          今天咱就講一個實用小案例,看看能不能講的透徹一點!

          seo達人


          今天我們就講一個星友的案例,好好講講這里面的原理,讓大家吸收一波!本文案例強調重點畫面主體突出,包括大小和顏色、考慮畫面的深度、元素和背景顏色前后關系;仔細把元素的精致度做好。這樣就能大大提升畫面質感。

          下面這個是星友參考的原作:

          圖片

          然后下面這個是他練習的一個作品:

          圖片

          我們來分析下二者差在那里。
          我認為有以下4點:
          1. 主體物與背景的色系反差
          2. 主體物與輔助元素的大小對比
          3. 輔助顏色的前后關系
          4. 元素的精致度

           

          1. 主體物與背景的色系反差

          從色系來看,我們看原作:

          圖片

          背景是冷色,周圍元素也是冷色,只有最突出的主體物是暖色,這樣的好處就是讓主體十分突出。
          我們做設計都知道,畫面里盡量保證只有一個主要物體突出,如果所有元素都很搶,那整體看起來就會有點亂,就像下面這個練習:

          圖片

          背景是暖色,元素的顏色有藍色、綠色,都屬于冷色,而且元素的色相都是和背景差異比較大的色相,這樣就會導致整體有點凌亂。

           

          2. 主體元素與輔助元素的大小對比

          這點很容易理解,我們看原作的主體物是不是要比輔助元素大很多:

          圖片

          而練習的這個主體就不夠大,沒有拉開對比:

          圖片

          主次不分明,也是畫面不精致的原因之一。

           

          3.輔助顏色的前后關系

          我們在觀察畫面的時候一定要注意,不要只關注二維平面的關系,還要看三維的前后關系,什么意思呢?
          我們看原作的顏色:

          圖片

          他是有很明顯的前后關系的,輔助元素有藍色:

          圖片

          藍色和背景的藍比較相近,顏色就會比較靠后。
          除此之外,還有灰白色,和卡片的顏色相近:

          圖片

          顏色也會比較靠后,這樣就形成了顏色的前后關系。
          在使用多色時,一定要想辦法融入一些無彩色,黑白灰,這樣會讓湖面沒那么膩。
          我們再來看下練習的作品,四個元素的顏色和背景都是剝離開的,沒有一個是靠向背景的:

          圖片

          這就會讓畫面的深度不夠,沒有前后關系。

           

          4. 元素精致度

          這個點以前經常說,元素盡量飽滿一些會比較精致,我們看原作的元素,我們還是老辦法,加個矩形框:

          圖片

          每一個元素都是滿的,可以撐的起來,但是練習的元素有一個就稍顯單薄:

          圖片

          如果單體不夠飽滿,當夜也會影響整體的精致度,所以大家一定要多注意。

           

          總結

          以上就是這個小案例的分析,總結一下就是:
          畫面主體要突出,不輪是大小還是顏色;
          要考慮好畫面的深度、也就是元素、顏色的前后關系;
          再有就是元素的精致度要做好。
          希望今天的小分析可以給大家一點啟發,么么扔!

           

          原文地址:菜心設計鋪(公眾號)
          作者:菜心設計鋪

          轉載請注明:學UI網》今天咱就講一個實用小案例,看看能不能講的透徹一點!

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

                                                                      微信圖片_20210513163802.png

           

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

           

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


          后臺界面設計的7條原則(附常用圖表組件庫下載)

          seo達人

          B端界面設計越來越受到重視,但設計師單從界面設計總感覺沒有太多值得發揮的地方,其實對于B端界面設計來說,視覺在其中的作用真的很有限,需要設計師有更多的深度思考。今天這篇文章就從更加深入的角度去反思B端界面的底層邏輯,一起來學習吧!

          文末會分享給大家一組非常實用的常用后臺圖表組件庫,歡迎大家下載!

           

          一個看起來很酷的儀表盤可能有很多功能、小工具和好的視覺效果。但實際上,它往往被設計成只是一個好看的玩具,而不是一個有用的工具。類似于一個多臂機器人,它能把數據整理成整齊的一堆,然后用明亮的數據讓人眼花繚亂。

          擺弄這個機器人可能很有趣,但最終會讓用它的人感到失望。

          為什么會發生這種情況?創造一種工具而不是一種可以很快被丟棄的玩具的訣竅是什么?

          圖片

          Illustration: Outcrowd

           

          1、構思儀表盤界面的大腦

          讓我們深入研究設計解剖學。儀表盤的“父母”是客戶端、設計人員和開發人員,每個組件設計都需要他們的合作產出,所有關鍵點在一開始要做出說明。

          智人是由胚胎發展而來的。首先形成的是腦細胞和神經細胞,然后是身體的其他細胞。這正是任何可行的項目應該遵循的方式。第一個階段是最重要的。如果你忽視這個階段,再花哨的設計也不能挽救局面。這正是為儀表盤的長期發展奠定基礎。

          儀表盤如果會說話的話,它會問“我為什么出生?誰需要我?“。

          試問你能回答嗎?因此你需要明確:

          • 儀表盤將如何助力公司目標?
          • 什么結構,功能和視覺效果將幫助儀表盤服務好用戶?
          • 哪種設計最適合目標受眾?

          這些問題的答案將構成你的設計理念基礎。

          圖片

          Perls

           

          儀表盤中沒有瑣碎的細節。

          儀表盤顯示的信息應該使用戶能夠做出決策。設計師的工作是幫助用戶解決問題,而不是讓他們使用一堆很酷的小工具。任何對目標不起作用的事情都會與目標背道而馳。

          從項目的最初階段到最后階段,設計師必須關注公司的目標、儀表盤的目標和用戶的目標。

          否則,儀表盤將永遠不會做的更好。

          圖片

          Clover

           

          2. 數據及關鍵指標選擇:循環系統

          儀表盤數據就像循環的血液。我們必須理解它們來自哪里,當用戶需要它們時如何處理,以及應該如何可視化。

          設計師需要理解數據的目的。顯然,這將幫助他們選擇合適的組件,但還有更多的工作要做。例如,用戶希望在屏幕上看到大量不同的讀數。你不需要移除任何東西來清除一些空間,但你可以做的是突出最重要的元素,并在視覺上“弱化”次要的東西。然而,要做到這一點,你必須知道數據的優先級。

          圖片

          Bidding Car

           

          最重要的指標是哪些數據能幫助達成目標。例如:

          • 顯示實際成功率;
          • 影響產品的感知方式;
          • 激勵創造產品的團隊。

          參數的選擇也需要了解用戶。用戶應該看到哪個關鍵指標,他們認為什么樣的可視化表現最容易理解?

          人們喜歡看到與他們的目標相符的數字。

          圖片

          Panch

           

          3. 儀表盤結構:骨架

          想象進入一個酒店房間,看到一張床,一張桌子和椅子,一面鏡子和一個壁櫥。甚至不用打開壁櫥,你就能猜到里面有什么。吹風機、拖鞋和毛巾都在你想要的地方——有人確保了這些。一個好的儀表盤就像那個房間。它是干凈的,整潔的,可預測的。你馬上就能看到所有的要點,憑直覺知道在哪里可以找到其余的內容。

          設計師有自己的工具來確保整潔。

           

          1) 層次結構

          首先,你得整理思緒。在開始設計之前,一定要對所有數據進行排序,將其分類,了解什么是最先發生的,什么是最后發生的,接下來是什么等等。確定用戶必須馬上看到的關鍵內容。

          視覺層次結構必須反映信息層次結構。

          數據層次結構通過小組件的大小和位置表示。如果你的讀者從左到右閱讀,關鍵信息必須放在左上角,最不相關的信息將在右下角。

          對數據排序的方法將取決于儀表盤的用途。重要的是根據信息的優先級組織信息,并創建邏輯場景。

          把信息面板看作是一個故事,而不是一系列數據點。

           

          2) 網格

          網格對于創建頁面的總體布局、排序、平衡和對齊元素非常有用。

          圖片

           

          3) 信息模塊

          模塊系統類似于公寓的分區。臥室是用來睡覺的,餐廳是用來吃飯的——每個區域都有自己的功能。你的舒適度取決于他們所處位置的便利程度。糟糕的布局不能通過裝修或家具來修復。相應地,必須提前考慮模塊劃分。

          模塊幫助顯示內容層次結構,根據數據的重要性、相關性和邏輯連接對數據進行分組。每個模塊都應該在給定的流程中服務于特定的目的。

          圖片

          圖片

           

          4) 連續性和接近性

          如果你去廚房需要經過有兩扇門的走廊,這是一個糟糕的布局?;ミB的流程假定邏輯接近。如果一個模塊中的流程需要來自另一個模塊的信息,那么布局上應該保證數據的連續性。這一點必須提前考慮,這樣用戶就不必在晦澀的存儲空間中尋找他們需要的信息。

          圖片

          Illustration: Outcrowd

           

          所有相關信息都應按重要到不重要的順序進行分組,并就近放置。

           

          5) 分離模塊

          沒有人需要一個延伸到臥室的廚房。為了將一個模塊與另一個模塊分開,你需要負空間。確保從一開始就考慮到這一點:將負空間視為需要視覺平衡的設計元素的組合。

          圖片

          Wingle

           

          4. 功能:肌肉

          功能和工具的數量由儀表盤的用途及其用戶的關鍵目標決定。

          要想自由活動,人類只需要兩條腿,狗需要四條腿,蜘蛛需要八條腿。一個功能太多的儀表盤就像一條六條腿的狗一樣,這有點令人毛骨悚然。

          不要在控制面板上放置過多的工具。用戶只需要手邊有必要的東西。過多的可用工具會讓人們感到困惑,并嚇走他們,因為它看起來太復雜了。個性化總是比標準化好。

          圖片

          Band

           

          5.小組件:重要的器官

          如果屏幕上有超過5到7個小組件,人們就很難理解內容。因此,我們的工作是讓相關數據易讀,但不過量。用戶應該在幾秒鐘內理解他們所看到的內容。

          數據可視化工具包括:

          • 表格
          • 圖表
          • 示意圖
          • 卡片
          • 指標
          • 地圖
          • 圖片
          • 分組
          • 篩選器
          • 列表
          • 選擇樹

          圖片

          Activity

           

          小組件的選擇取決于儀表盤的用途和用戶。想想以下幾點:

          • 哪個組件能最好地顯示一個特定的KPI?
          • 用戶可以立即看到什么?
          • 哪個組件是用戶最容易理解的?
          • 什么可以幫助用戶更快地找到他們需要的東西?

          選擇易于理解和閱讀的小組件。

          這里是一個令人困惑的小組件的例子:

          圖片

          想想主要的“目標”來吸引用戶的注意力。例如,如果你的優先級是績效目標,你應該使用數字;如果你需要比較值,用直線或柱狀圖會很好;為了激勵團隊,可以使用帶有相關亮點的排行榜。

          不正確選擇的小組件或默認小組件模板可能會使用戶混淆或導致他們誤解數據。

          最好的解決方案是分析和測試的結果。

          圖片

          最好的小組件設計是極簡和易于閱讀的。例如,一個3D圖表可能看起來令人印象深刻,但它占用了用戶太多的注意力,最終證明會分散用戶的注意力。這也適用于漸變、過度使用顏色和過多的細節。

           

          6. 視覺設計:一般技巧

          我們已經創建了儀表盤的思想和身體。唯一要做的就是皮膚——最外層。這可以根據優秀設計的基本原則來實現,但仍有一些新的需要注意的細節。

           

          1) 簡單

          儀表盤應該像你喜歡工作的桌子一樣干凈:它必須只有必要的文件和工具,沒有干擾。

          圖片

          MEMO

           

          2) 顏色

          儀表盤顏色的選擇必須有一個目的:盡可能清晰地顯示信息。顏色跨度越大,就越難把數據展示清晰。所以不要讓儀表盤的顏色過多。使用同一顏色的深淺是一個好的辦法。

          圖片

          首先要選擇底色,然后是補色。每種顏色都必須有特定的用途。一種顏色可以用來組合元素,另一種顏色可以用來高亮。顏色還能體現一個元素是積極的還是消極的。

          避免使用可能有負面含義的顏色。例如,在這個例子中,紅色看起來像是代表壞的和不受歡迎的東西:

          圖片

          如果儀表盤提供了可定制的顏色,確保所有可用的選擇看起來都比較舒服。

          選擇顏色組合的一個好工具是Adobe color CC。

           

          3) 突出

          語義高亮應該與視覺高亮相對應。為了突出一個元素,你可以使用顏色(對比度,亮度),形狀,大小,負空間等。

           

          4) 可讀性和數字格式化

          這是確保視覺清晰度的重要因素:干凈的布局,視覺層次,重點突出,對比元素,適當的字體,這些字體也必須具有對比性和易讀性。

          高精度的數字格式很難理解。最好把所有的數字都四舍五入,然后把較長的數字尾巴去掉。

           

          7. 適應性

          在實踐中,當用戶優先考慮桌面版本時,在移動版本之前創建網頁版本是合理的。如果你的目標用戶主要使用的是手機版本,那么你可以先從移動設備著手構建儀表盤,然后再開發桌面版本。

          圖片

          Snap

           

          總結

          設計一個好的儀表盤不是一件容易的事情。我們把它比作人類的發展,因為它是一個很好的方式來呈現重要的東西。當你在設計儀表盤時,請不斷地問自己:是否一切都已就緒?有多余的肢體嗎?身體的各個部位協同工作嗎?用戶會喜歡這個結果嗎?它有用嗎?

          正如你所看到的,視覺設計實際上是設計師最不應該擔心的事情。

          最后,彩云再分享一組常用的后臺圖表界面組件庫,相信會對大家的日常設計工作有幫助,

          圖片

          圖片

          圖片

          獲取方式:關注公眾號 ,后臺回復關鍵詞  后臺組件 ,即可獲得!

           

          本文翻譯已獲得作者的正式授權。

           

          原文地址:medium

          作者:Erik Messaki

          譯文地址:彩云譯設計(公眾號)

          譯者:彩云Sky

          轉載請注明:學UI網》后臺界面設計的7條原則(附常用圖表組件庫下載


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

                                                                      微信圖片_20210513163802.png

           

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

           

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

          當等待無可避免時,如何優化等待體驗?

          ui設計分享達人

          一、盡量減少用戶等待的情況,盡可能縮短等待的時間

          如當用戶瀏覽網頁的時候,若在用戶瀏覽到已加載內容的倒數第5條再預加載10條內容,可縮短用戶瀏覽接下來內容時的加載等待時間。再如生活中醫院的預約掛號系統,用戶可以提前一兩天掛號,當預約時間到了直接到指定科室看病,避免了長時間的排隊掛號。


          二、如果是不可避免的等待,該用什么辦法去優化等待體驗呢?

          總的原則是:在用戶等待時給予用戶反饋,告知狀態,且盡量讓用戶在感知上縮短等待的時間。反饋可根據等待的預估時間不同、場景不同,選取不同形式。

          • 一般情況下理想的響應時間應該控制在 100 毫秒內,一些響應的時長可允許達到1秒,絕不可超過2秒無反饋。

          • 若是等待響應時長為2-9秒時,可設計循環的加載動效(loading),告知用戶正在加載中。

          • 若是等待響應時長超過10秒時,可設計帶有進度指示的加載動效。此時除了告知用戶正在加載中(即告知等待原因和當前狀態),還要告知用戶預期響應的時間。



          可采取分步響應用戶的方式,多次反饋,可讓用戶在感知上縮短等待的時間。

          如一些頁面內容較多,加載時能分步顯示,可按照框架、文本、占位圖、圖片的順序加載顯示,會在感知上縮短加載時間。又如加載一個新視頻,視頻前幾幀優先顯示最小體積的視頻資源,等較高清視頻內容加載出來時再切換為高清視頻資源,可縮短用戶等待視頻開始播放的時間。



          唐納德諾曼提出過排隊等待的6個設計原則,可以很好地幫助我們設計等待體驗,6個原則分別是:

          (1)提供一個概念模型。

          (2)使等待看起來合理。

          (3)滿足或超越期待。

          (4)使人們保持忙碌。

          (5)公平。

          (6)積極的開始,積極的結尾。


          下面我們就說說這6個原則在優化等待體驗上的運用:


          1. 提供一個概念模型

          概念模型是幫助人們把復雜自然現象轉變成可用的,可理解的心理模型。概念模型可以幫助用戶理解事物,了解事物如何運作以及當前處在哪個階段、理解當前為什么處在等待狀態,以及產生對未來即將發生事情的預估和期待。

          如用戶通過餓了么下單后,app上會用插畫顯示商家備貨、騎士送貨的過程。讓用戶了解外賣送到手中的整個流程,以及當前處在流程的哪一階段,距下一階段預估還有多久。如果是雷雨天,訂單頁面的插畫還會模擬實時天氣情況,用戶看到插畫想到騎士正在雷雨環境下送貨取貨,也會理解騎士配送辛苦、理解當前配送緩慢,緩解等待時的負面情緒。



          2. 使等待看起來合理

          使等待看起來合理,即通過概念模型使用戶理解為什么要等待,明白等待是有緣由的。

          如用滴滴打車時,當我們按下呼叫快車按鈕,頁面會顯示動效光波信號向外擴散,同時會顯示當前排隊人數。設計師通過設計建立一個簡易的概念模型,讓用戶理解當前的等待的原因,并認為等待是合理的。實際上滴滴派單的算法流程可能與頁面顯示的流程不同。但用戶等待時會理解此時手機正在發出信號請求駕車信息、或此時正有多人在排隊、或此時正在等待司機接單。



          3. 滿足或超越期待

          滿足或超越期待指用戶給等待時間估算時長時,如果用戶實際的等待時間比心理預期的等待時間要短,用戶會有相對比較好的心理體驗。

          心理學專家曾做過一個實驗,同等時間下,同樣長度的進度加載條有三種進度顯示方式:進度條速度勻速、速度先快后慢、速度先慢后快。三種相比較發現,當進度條增加速度先慢后快,用戶的體驗最好。而用戶體驗最差的是加載速度先快后慢,因為如果開始的時候加載速度比較快,用戶一開始就有了較高的心理預期,當速度變慢時便低于用戶的心理預期,感知體驗就會變差。



          4. 使人們保持忙碌

          使人們保持忙碌即讓用戶在等待的時候有事可做。因為當人們非空閑時,對時間的心理感知會比空閑時對時間的心理感知要短。

          利用這個原則的設計如:CorelDRAW軟件下載安裝時,軟件安裝等待頁面除了顯示進度條還放映國際優秀設計圖片,CorelDRAW用戶一般都是設計愛好者或設計從業者,通過讓他們瀏覽優秀設計圖片來度過軟件安裝時間,避免用戶純空閑等待。



          5. 公平

          當用戶正在等待時,如果等待看起來是合理且公平時,不易引起用戶的負面情緒。如果等待看起來是不公平的時候,更容易引起用戶的負面情緒。如:當你正在排隊買票時,同等條件下,你看到后來半小時的人比自己先買到了票。你可能會抱怨,“為什么比我晚來半小時的人都排到了我卻還在等”。

          針對公平方面的設計如銀行的叫號辦理業務系統。用戶統一到取號機前取號,每當一個窗口的空出來,叫號系統便叫一個最早的號去該窗口辦理業務。這比人們直接分散在多個窗口排隊會更公平,不會出現早來卻因為這個窗口排隊慢而導致等待時長比晚來的用戶更長的情況。同時把多個小隊伍變成一個大隊伍,用戶感知上也會覺得隊伍移動的更快,也有助于降低等待的負面情緒。


          6. 積極的開始,積極的結尾

          德國心理學家艾賓浩斯曾提出系列位置效應,指記憶材料在系列位置中所處的位置對記憶效果發生的影響,包括首因效應和近因效應。(來源:百度百科)即人們回憶體驗時,在最開始和最后的體驗比中間的體驗更能讓人印象深刻。所以當我們在設計等待流程時,要保證等待開始和等待結束時有較好的體驗。


          如當我們在餐館排隊結賬時,一些餐館結賬臺旁邊會放著一盤薄荷糖,收銀員幫用戶辦理結賬時會對用戶說可以拿幾顆薄荷糖。這個小獎勵會讓用戶走出餐館后對剛剛結賬時排隊等待的不好體驗的記憶變弱,而對最后的薄荷糖有更深的印象,從而對餐館也留一個相對好的印象。

          關于等待體驗的優化設計案例還有好多,但基本的設計原則是相通的。

          我們在實際設計時可先整理用戶整個體驗流程中可能等待的點,看看哪些是可以通過設計或技術縮短實際等待時間的。針對不能縮短實際等待時間的點,我們先預估每個等待的時長,并設計概念模型讓用戶理解等待的緣由且能預估等待的時間,且采取合適的方式讓用戶在感知上盡量縮短等待時間。

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

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



          文章來源:站酷   作者:醬紫Y

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

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


          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,再不直接,那也一定能夠為整個產品帶來價值(不然你也沒必要推了。。)??傊?,設計體系一定要能夠為他人帶來價值,這樣才能順利推進。否則人家憑什么要協助你推進,因為你美麗可愛嗎?你也可能比較可愛,但總歸是不能一直這么來吧。。。


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




          日歷

          鏈接

          個人資料

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

          存檔

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