一、視覺魅力：營造沉浸式數據空間

深色背景是天然的聚焦器，能讓亮色數據元素“跳”出來。比如在監(jiān)控大屏上，紅色預警指標、熒光綠的實時數據曲線，在黑色或深灰色背景襯托下，瞬間抓住目光，使關鍵信息不被繁雜內容淹沒。這種高對比度，就像舞臺追光燈，把核心數據推到視覺C位，讓決策者第一時間捕捉關鍵。 

同時，深色大屏自帶科技感與專業(yè)感濾鏡。在智慧工廠、航空指揮等場景，深色調契合行業(yè)對精準、嚴謹、前沿的追求，營造出沉浸式工作氛圍，仿佛置身數據宇宙，每一個閃爍的數字、流轉的圖表，都是探索業(yè)務規(guī)律的星芒，提升用戶對數據價值的感知。

 二、設計要點：平衡美觀與實用

（一）色彩搭配：精準傳遞數據含義

色彩是數據的“情緒符號”。除了利用高對比突出重點，還要為不同數據類型定制色彩規(guī)則。比如健康醫(yī)療大屏，綠色系展示正常生理指標，黃色預警潛在風險，紅色標識緊急狀況，讓醫(yī)護人員通過顏色快速判讀患者狀態(tài)；金融大屏里，綠色代表收益、紅色象征虧損，直觀反映資金流向與盈虧情況，形成視覺化“數據語義網” 。

（二）布局邏輯：構建清晰信息層次

大屏數據繁雜，布局要像搭建“信息金字塔”。把最核心、最需高頻關注的數據（如總覽性指標、實時警報）放在視覺黃金區(qū)（通常是中間或上部）；次要的趨勢分析、分類數據，有序分布在周邊。像智慧交通大屏，中心展示實時擁堵熱力圖與事故警報，側邊陳列歷史通行數據、區(qū)域流量對比，既保證決策層抓重點，又滿足分析層挖細節(jié)，讓信息流動符合業(yè)務思考路徑。

（三）動效與交互：激活數據生命力

適度動效是數據的“動態(tài)說明書”。實時更新的數據流、閃爍的新數據點、平滑切換的圖表狀態(tài)，能直觀展現(xiàn)數據變化趨勢。比如能源監(jiān)控大屏，電量流動的動態(tài)效果，模擬電力傳輸路徑；交互上，支持鉆取（點擊圖表深入查看細分數據）、篩選（按時間/區(qū)域等維度過濾），讓用戶從“看數據”升級為“探索數據”，挖掘隱藏在可視化背后的業(yè)務邏輯。 

 三、場景適配：讓深色大屏“對癥下藥”

在不同行業(yè)，深色大屏發(fā)揮獨特價值。軍事指揮中，深色降低反光，適應作戰(zhàn)室暗光環(huán)境，戰(zhàn)略地圖、兵力部署等數據在深色底上清晰呈現(xiàn)，保障指揮決策高效；能源監(jiān)控場景，深色調凸顯能源數據的精密與嚴肅，實時電量、管道壓力等信息動態(tài)更新，助力能源調度精準；文化場館的大數據展示，深色大屏搭配藝術化可視化設計，將觀眾流量、互動數據等轉化為炫酷視覺作品，兼具科技感與藝術氛圍。 

深色大屏頁面的大數據可視化設計，是一場平衡美學與功能、貼合場景與需求的創(chuàng)作。它以深色為底，繪就數據的千般模樣，讓冰冷數字變成可感知、可交互、能驅動決策的“活信息”，在智慧化浪潮中，持續(xù)拓寬數據可視化的表達邊界，為各行業(yè)洞察數據本質、挖掘價值，打造專屬的“視覺洞察窗口” ，引領我們在數據深海中，精準捕撈業(yè)務增長的“寶藏”。 

按鈕組(ButtonGroup)是一個將多個按鈕以可視化的方式組合在在一起的組件,幫助用戶快速識別并操
作相關操作。在M3Expressive中,按鈕組通過增強按鈕間的交互、布局適配以及層級表現(xiàn)力,提升
了界面的靈活性。

為什么要分組按鈕?
現(xiàn)有的按鈕只是簡單地并排放置,缺乏任何鏈接交互或按鈕之間的視覺統(tǒng)一。
拼中人。簡單
Co
在Material3中,我們將按鈕組定義為獨立的組件,以實現(xiàn)更豐富的表現(xiàn)力和自適應的布局,并提出
了一種名為Connected Button Group的新形式來取代Segmentted Button的作用。
本文我們將了解新增按鈕組的功能和使用方法。如果您想了解更多關于Expressive新增的Split Button

配置按鈕組

容器
按鈕組可以包含各種元素,例如圖標、文本按鈕等,但其核心概念是"容器",它是一種更高級的結構,
包裹著這些元素并控制其布局和交互。因此,將按鈕組理解為一個充當按鈕容器的容器,而不是按鈕的
集合,似乎更準確。

按鈕組的類型
按鈕組分為標準按鈕組和聯(lián)動按鈕組。

標準按鈕組
使用標準按鈕組將獨立的操作按鈕并排放置。
每個按鈕都保持圓潤的形狀,并且按鈕之間有一定的間距。在此組中,選定的按鈕可以改變寬度或形
狀,并且這種變化通常會影響相鄰的按鈕。整個按鈕組被設計:為一個有機的整體。
一般適合展現(xiàn)保存、取消、刪除等主要操作,并且按鈕的大小和樣式根據上下文靈活調整。

鏈接按鈕組
連接按鈕組是一種主要用于允許選擇多個選項的組件。現(xiàn)有的分段按鈕將被連接按鈕組取代。
按鈕之間物理連接、共享邊框或以一致的高度和寬度對齊。用戶可以選擇一個或多個按鈕,并且只有選中的按鈕會在視覺上突出顯示。這種設計可以有效地傳過達清晰的選擇狀態(tài),而不會影響其他按鈕。

它主要用于替代分段按鈕的作用,例如過濾、視圖切換和排序選項。

如何使用按鈕組

按鈕組使您的產品更具表現(xiàn)力。
標準按鈕組增加了相鄰按鈕之間的交互,使它們相互響應。選擇標準組內的按鈕時,會發(fā)生以下變化:
所選按鈕的形狀和寬度將會改變。
選定的切換按鈕也會改變顏色。
相鄰的按鈕移動并暫時改變寬度。

僅在重要的交互時使用形狀變化。
您可以使用不同的按鈕類型、寬度和顏色組合來強調重要元素,并在視覺上對相關按鈕進行分組。默認
情況下,標準按鈕組中的所有按鈕應具有相同的尺寸(XS到XL)和形狀(圓形或方形)。
·只有在英雄時刻,您才應該在群體中使用不同尺寸。
?混合尺寸并不常用。
僅當選擇按鈕或需要添加含義或對比時才應使用不同的形狀。
區(qū)當選擇這邊以而安添加古文現(xiàn)對比的才應使用個問的形狀。

可以使用一組鏈接的按鈕在類似的操作之間切換。
鏈接按鈕組可幫助用戶選擇選項、切換視圖或對齊頁面上的元素。它們的行為與標準按鈕組類似,但不
會影響相鄰的按鈕。鏈接按鈕組應取代已棄用的分段按鈕。

如果按鈕內容彼此關聯(lián)且可選,請使用鏈接按鈕組。在購物應用中,鏈接按鈕組用于選擇商品的容量,
因此,密切相關的操作在鏈接按鈕組中效果更佳。

使用一組鏈接按鈕來實現(xiàn)單選或多選模式。
對于使用切換按鈕的單選或多選模式,應使用鏈接按鈕組。如果所有按鈕均不可切換,則不應使用鏈接
按鈕組。

一組鏈接按鈕被配置為填充其所在頁面或區(qū)域的寬度,這會導致內部按鈕的寬度也隨之增加。在寬屏
上,建議設置最大寬度,以防止按鈕組過寬。

可以根據窗口大小手動調整按鈕的寬度、大小和填充。
按鈕組應在布局中移動到一行,并且不應換行。您可以垂直堆疊多個按鈕組,以使項目保持緊密排列,
但按鈕組之間不能進行垂直交互。

手動調整圖標按鈕的寬度時,避免將其拉伸得太寬。

您還可以根據窗口大小手動調整一組按鈕的大小、形狀和填充。
在小窗口中,最好使用較小、較窄的按鈕來容納按鈕組中的所有按鈕,而在較大的屏幕上,最好使用較
大、較寬的按鈕來有效地填充可用空間。
靈活按鈕或按鈕組會根據窗口大小自動調整其寬度。

必須在布局和設備之間保持一致的層次結構。
當窗口變大時,您應該利用顏色和大小等屬性來確保每個按鈕保持其視覺層次。例如,主要操作按鈕在
所有窗口尺寸下都應保持最大、最寬且視覺上最突出。

根據屏幕的大小,按鈕應該在榮單中隱藏或重新顯示。
在小窗口中,您可以將按鈕組末尾的按鈕設置為折疊成榮單,然后在窗口大小增加時重新顯示。建議將
榮單放置在按鈕組的末尾。按鈕組外部的按鈕不受按鈕組行為的影響。

在標準組中,當您按下一個按鈕時,相鄰的按鈕也會改變寬度...
按下按鈕時,其寬度和形狀會發(fā)生變化。在標準按鈕組中,按皮下按鈕也會影響相鄰按鈕的寬度。相比之
下,在鏈接按鈕組中,只有按下的按鈕會改變形狀,其他按鈕丑不受影響。

所選按鈕應改變形狀以實現(xiàn)視覺區(qū)分。
選定的按鈕應從圓形變?yōu)榉叫?或從方形變?yōu)閳A形。

鏈接按鈕組和分段按鈕之間有什么區(qū)別?
雖然兩者的功能相同,但可以說它們被納入了一個按鈕組,以實現(xiàn)富有表現(xiàn)力的交互。

鏈接到現(xiàn)有分段按鈕的一組按鈕。
分段按鈕也允許單選或多選,但其配置相對固定,并且視覺呈現(xiàn)受到限制。
鏈接按鈕組在調整按鈕的大小、顏色和形狀方面提供了更大的靈活性,其視覺交互也得到了增強,例如
根據選擇狀態(tài)改變形狀。按鈕以連接形式排列,并且只有選中的按鈕才會在視覺上突出顯示,從而提供
清晰的反饋。
Expressive在這種靈活性和表現(xiàn)力的基礎上,逐漸減少分段按鈕的的使用,轉而采用鏈接按鈕組作為替
代。

綜上所述

按鈕組是實用的組件,能夠直觀地將相關操作分組,并為用戶提供清晰的上下文。它們旨在直觀地展示
按鈕之間的關系,并根據屏幕尺寸或具體情況靈活操作,從而在不同界面上提供一致的體驗。標準按鈕
組有利于實現(xiàn)交互和層級結構,而鏈接按鈕組則有利于清晰的選擇結構。然而,形狀、尺寸設置以及響
應式設計需要精細的設計。
Material3取代了現(xiàn)有的分段按鈕,并提出將一組按鈕作為獨立組件,以實現(xiàn)富有表現(xiàn)力的UI組合。
這種設計超越了簡單的按鈕排列,全面考慮了交互、布局和層級,指明了提升整個產品一致性和可用性
的方向。

?“三維圖標設計寶典” 方法論，強調從前期構思（分析競品如馬蜂窩與本品飛豬的圖標類型、配色、風格及核心辨識點，通過關鍵詞腦暴鎖定 “品質、活力、青春” 方向并產出情緒版）、繪制圖標（具象功能、簡化結構、確定基本形，融入飛豬品牌超級符號，添加毛玻璃質感等細節(jié)）到走查圖標（從辨識度、統(tǒng)一性、美感度、差異化四方面檢查，如類型、風格、體量感統(tǒng)一，融入品牌符號增強差異化）的完整流程，助設計師提升過稿率。

Hannah & Henry是一家澳大利亞電商品牌，專營時尚嬰兒尿布包。在本案例中，我們將探討他們如何應對這一挑戰(zhàn)，并將收入提升 45.67%。

 

蘭亭妙微(www.shtzxx.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發(fā)服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優(yōu)秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan

Dollar Shave Club 最近投資了一款頂級的 A/B 測試工具。我們聘請了 Conversion 來指導 Dollar Shave Club 的實驗項目，并希望通過該工具獲得積極的投資回報。在三個月內，我們啟動了足夠多的成功實驗，不僅收回了該工具的全部成本，還支付了我們每年的服務費。從那時起，我們得以擴展該項目的權限，與 Dollar Shave Club 的內部團隊緊密合作，加快了速度，并構建了一個以洞察力為導向的項目，為業(yè)務各個領域的決策提供信息。

解決方案

自 2012 年成立以來，Dollar Shave Club 利用病毒式營銷做出了巨大努力，打造了一個有趣、易于交流且深受喜愛的品牌。  

不幸的是，當我們進行研究以了解網站的情感基調和品牌感覺時，我們發(fā)現(xiàn)這種趣味性根本沒有轉化為數字體驗。 

這是一個大問題。 

 

控制：漏斗中的原始副本是非對話式的，與 DSC 的品牌語調不符

《哈佛商業(yè)評論》的研究表明，與企業(yè)有更情感聯(lián)系的顧客轉化率更高，而且會花費更多錢（平均 52%）。

因此，我們假設，如果我們能夠改善漏斗的情感共鳴，我們就可以增加用戶與品牌的情感聯(lián)系，從而增加我們產生的訂閱數量。 

在我們的第一次實驗中，我們選擇調整漏斗前兩個步驟的副本，從清晰但正式的語氣轉變?yōu)楦邔υ捫缘恼Z氣。 

 

 

變化：漏斗中的新副本輕松且具有對話性，與 DSC 的品牌語調更加匹配。

值得強調的是：這種小規(guī)模的測試正是之前會被屏蔽的那種。然而，當我們用這個版本的漏斗模型與原始版本進行A/B測試時，它的訂閱量增加了5.24%。 

這有力地證明了小型測試可以產生的影響。 

更重要的是，這次測試的經驗——情感共鳴是業(yè)務轉化的關鍵因素——迅速在整個組織內傳播開來。如今，所有新的體驗都遵循嚴格的風格指南，以確保始終保持輕松詼諧、對話式的風格。 

碎片化獎勵

我們的研究表明，另一個可能富有成效的杠桿是感知價值：如果我們能夠找到一種方法來提高產品的感知價值，我們就有更好的機會說服用戶改變他們的品牌和購買習慣。 

當我們對訂閱漏斗進行啟發(fā)式分析時，我們注意到大多數產品都是以捆綁銷售的形式呈現(xiàn)的。雖然這種做法看起來不錯——圖片也很美觀——但它違反了行為設計的一個眾所周知的原則： 

一次性成本和碎片獎勵。 

通過把成本集中在一起，你就能最大限度地降低它們被感知的重要性（就像撕掉創(chuàng)可貼一樣）。通過細分獎勵，即將它們拆分開來，并分別強調每個獎勵，你就能增加每個獎勵的關注度，從而提高整體感知價值。 

我們認為這是一個提高 DSC 訂閱服務感知價值的機會，因此我們決定重新設計某些頁面元素：具體來說，我們單獨分離出每種產品，并包含作為每種單獨產品一部分的物品的要點清單。 

 

在對照組（左圖）中，產品和功能被集中顯示。在變體組（右圖）中，每個產品（及其功能）被拆分并單獨顯示。

然后，我們在 A/B 測試中將此新版本的頁面與原始版本進行比較，結果訂閱數量增加了 11.2%。

這本身就是一個巨大的成果，但是當我們分析這次測試的數據時，我們意識到還有很大的改進空間……

迭代以產生影響

雖然轉化率顯著提升，但我們發(fā)現(xiàn)很多用戶仍然使用“更改您的選擇？”鏈接在不同頁面之間來回切換。這被稱為“跳跳跳”（pogosticking），從用戶體驗的角度來看，這通常是一個不好的跡象。

 

雖然訂閱量有所增加，但進一步分析顯示，‘pogosticking’ 用戶的比例高于預期。

在這種情況下，pogosticking 表明用戶來回查看不同產品如何影響價格。 

為了解決這個問題，我們在原始測試的基礎上進行了迭代，創(chuàng)建了一個新版本，從一開始就明確了捆綁折扣 - “您有資格享受 15％ 的 Handsome 折扣”（另外，請注意這個有趣的折扣名稱，與 DSC 的品牌完美契合）。 

我們還想了解移除默認復選框對用戶體驗的影響，以及如何幫助用戶理解優(yōu)惠信息。因此，我們創(chuàng)建了第二個變體，取消了一些最初選中的產品。 

然后，我們在 a/b/c 測試中將這兩個變體與之前的獲勝者進行對比。 

 

在第一個版本（中間截圖）中，我們添加了文案，以幫助闡明捆綁折扣。在第二個版本（右側截圖）中，除了闡明優(yōu)惠之外，我們還取消了默認復選框的勾選。

正如預期的那樣，第一個版本將轉化率額外提高了 1.5%。更令人印象深刻的是，第二個版本（取消選中復選框）將訂閱數量提高了 6.8%。 

這意味著，通過兩次實驗（最初的拆分測試及其迭代），我們能夠將訂閱轉化率提高 17% 以上。 

結果

在我們合作的最初三個月里，我們就能夠產生足夠的額外收入來支付我們服務和測試工具一整年的成本。 

事實證明 Tsega 的信念是正確的——保證了愛爾蘭獲得積極的回報。 

在順利實現(xiàn)初始目標后，我們隨后的任務是將工作范圍擴大到遠遠超出最初的范圍。 

這項更廣泛的職責的一部分涉及審核DSC現(xiàn)有的實驗能力。我們運用PACET框架來識別DSC現(xiàn)有實驗設置中的任何瓶頸和障礙。在此基礎上，我們與DSC的內部團隊密切合作，彌補任何不足，并在必要時提供技能提升。 

此次職責擴展的另一個要素是將實驗的影響擴展到整個業(yè)務。一方面，我們只是利用實驗來優(yōu)化訂閱之外的其他關鍵增長指標，例如貨幣化和留存率。另一方面，我們確保實驗能夠指導所有業(yè)務部門的決策——從市場營銷到產品，從工程到設計。 

總而言之，該計劃取得了巨大的成功。 

蘭亭妙微(www.shtzxx.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發(fā)服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優(yōu)秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan