狠狠人妻久久久久久综合,亚洲精品自有码中文字,日韩一区二区三区久久综合,三级片免费AV在线 58av国产精品_97AV麻豆蜜桃一区二区_一本之道av不卡精品_丰满年轻岳欲乱在线播放

首頁

Google如何分組按鈕——按鈕組功能及其使用方法

杰睿

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

DM_20250701224752_001.PNG


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

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


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


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


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

 

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

 

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

 

DM_20250701224752_007.PNG
可以使用一組鏈接的按鈕在類似的操作之間切換。
鏈接按鈕組可幫助用戶選擇選項、切換視圖或?qū)R頁面上的元素。它們的行為與標準按鈕組類似,但不
會影響相鄰的按鈕。鏈接按鈕組應(yīng)取代已棄用的分段按鈕。

 

DM_20250701224752_008.PNG

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

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

 

DM_20250701224752_010.PNG

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

 

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


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

 

DM_20250701224752_012.PNG

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

DM_20250701224752_013.PNG

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

 

DM_20250701224752_014.PNG

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


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

 

DM_20250701224752_016.PNG

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

 

鏈接按鈕組和分段按鈕之間有什么區(qū)別?
雖然兩者的功能相同,但可以說它們被納入了一個按鈕組,以實現(xiàn)富有表現(xiàn)力的交互。
DM_20250701224752_017.PNG
鏈接到現(xiàn)有分段按鈕的一組按鈕。
分段按鈕也允許單選或多選,但其配置相對固定,并且視覺呈現(xiàn)受到限制。
鏈接按鈕組在調(diào)整按鈕的大小、顏色和形狀方面提供了更大的靈活性,其視覺交互也得到了增強,例如
根據(jù)選擇狀態(tài)改變形狀。按鈕以連接形式排列,并且只有選中的按鈕才會在視覺上突出顯示,從而提供
清晰的反饋。
Expressive在這種靈活性和表現(xiàn)力的基礎(chǔ)上,逐漸減少分段按鈕的的使用,轉(zhuǎn)而采用鏈接按鈕組作為替
代。

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

 

軟件開發(fā)設(shè)計 | 怎么用‘信息架構(gòu)思維’提升設(shè)計效率?

杰睿

“設(shè)計的首要任務(wù),不是美觀,而是幫助人們理解復(fù)雜信息。” ——《信息架構(gòu):超越Web設(shè)計》
很多人做官網(wǎng)時習(xí)慣直接上設(shè)計稿,但我想分享一下: 最近做一個企業(yè)官網(wǎng),先用了信息架構(gòu)思維,結(jié)果不僅讓老板很滿意,后續(xù)內(nèi)容更新也省心了很多。
 
常見誤區(qū):先做視覺稿就等于高效? 我一開始也以為先畫頁面就能快,但很快發(fā)現(xiàn):
客戶需要的核心內(nèi)容沒地方放;
產(chǎn)品介紹和解決方案反復(fù)修改,頁面結(jié)構(gòu)被打亂;
不同人理解的信息優(yōu)先級不一致,溝通成本陡增。
這些都源于沒有先規(guī)劃信息架構(gòu)。
 
書里有句話點醒我:“信息架構(gòu)要在任何設(shè)計和開發(fā)動作之前完成,它是產(chǎn)品內(nèi)容的支撐結(jié)構(gòu)。”
于是我用了三步:
 
1)卡片分類:把所有需要展示的內(nèi)容拆成卡片 比如:品牌故事、主營業(yè)務(wù)、核心優(yōu)勢、合作伙伴、聯(lián)系方式…… 然后和客戶、團隊一起做小型卡片分類工作坊,用他們的語言重新組合、排序。
結(jié)果:信息對他們自己來說也清晰了,不再互相矛盾。
 
2)搭建組織系統(tǒng):用樹狀圖規(guī)劃內(nèi)容結(jié)構(gòu) 書中提到:“組織系統(tǒng)是支撐信息環(huán)境的骨架。” 我把卡片分類結(jié)果轉(zhuǎn)成樹狀架構(gòu),先理清首頁→一級欄目→二級頁面的層級關(guān)系,確認每一層放哪些信息。 這一步讓后續(xù)頁面數(shù)量、導(dǎo)航設(shè)計都一目了然。
 
3)定義導(dǎo)航與標簽系統(tǒng):把內(nèi)容變成用戶可點可找的路徑 我沒直接用專業(yè)術(shù)語,而是用客戶和用戶能懂的標簽命名欄目,比如把“公司介紹”改成“關(guān)于我們”,把“解決方案”明確細分成“產(chǎn)品服務(wù)”、“行業(yè)案例”等。
結(jié)果:用戶可以根據(jù)直覺快速定位需要的信息。
 
別把信息架構(gòu)當成一次性工作 官網(wǎng)內(nèi)容常更新,要定期復(fù)盤:
舊頁面是否有信息冗余?
用戶搜索數(shù)據(jù)體現(xiàn)的新需求有沒有覆蓋?
新增內(nèi)容如何融入原有架構(gòu)?
持續(xù)維護信息架構(gòu)能讓官網(wǎng)始終保持清晰可用。

0a28130e045582a19f36d5e3fc28490bc8d1a60d26cd56-UPbQAi_fw1200.png

4d711bd2632f511ff6bb73fec0aadd04033886642943c4-iG1VgU_fw1200.png

616cefcf4098c151805e496866e7f9ee6ab173551d19e5-VpdjG6_fw1200.png

 

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

7天信用卡免費試用的理由

杰睿

哪種客戶獲取模式更可取——免費試用還是免費增值?

這是 SaaS 領(lǐng)域最古老、最激烈的爭論之一。

答案當然是“視情況而定”……但最近我看到越來越多的公司開始使用需要信用卡支付的7天免費試用服務(wù)。Outseta 過去兩年也一直沿用這種模式,而此前我們使用了近四年的免費增值模式。 

開門見山地說——這種模式并不總是受到潛在客戶的青睞,但它往往是最好的模式。尤其是對于小型、白手起家的公司而言。 

無論您是創(chuàng)始人還是客戶,本文都會討論此模型的優(yōu)點和缺點;我希望您能夠更充分地理解這??些決策的細微差別。

數(shù)據(jù)——轉(zhuǎn)化率、潛在客戶量和新客戶 

我職業(yè)生涯的大部分時間都在嘗試這些客戶獲取模式,但現(xiàn)在我也能掌控所有客戶的數(shù)據(jù),因為他們也在嘗試這些模式。我每周都會和創(chuàng)始人討論免費試用版和免費增值版的問題。

雖然情況確實如此,但以下數(shù)據(jù)專門針對 Outseta——我專注于我們自己的數(shù)據(jù),因為我可以證明其干凈度,并且我已經(jīng)在一段時間內(nèi)獲取了等效的樣本量,其中業(yè)務(wù)中的許多其他因素盡可能保持一致。我們的數(shù)據(jù)所講述的故事也反映了我在廣大客戶數(shù)據(jù)中看到的情況。 

我正在對 3000 多個免費增值注冊和 3000 個免費試用進行比較。

轉(zhuǎn)化率

  • 免費增值到付費:7.25%
  • 7天試用信用卡需支付:35%

這里需要注意的是,這兩種模型的實際轉(zhuǎn)化率實際上更高——我特意將“轉(zhuǎn)化”計算為轉(zhuǎn)化后30天仍為付費訂閱者的用戶。這能更準確地衡量誰真正成為了客戶。它過濾掉了忘記取消試用的用戶,以及那些提前注冊試用產(chǎn)品但實際上并沒有成為客戶意圖的用戶。

雖然7天試用模式的轉(zhuǎn)化率比免費增值計劃高出4到5倍,但值得注意的是,這也帶來了很大的阻力——很多潛在客戶根本不愿意為了注冊免費試用而掏出信用卡。毫無疑問,這種模式下的注冊量會比較少。

潛在客戶數(shù)量

與我們提供免費增值產(chǎn)品時看到的情況相比,7 天試用模式的注冊率達到了 43%。

這些是我根據(jù)我們自己的實驗可以分享的最重要的數(shù)據(jù)點,所以讓我們推斷出其影響。

新付費客戶

  • 100 個免費增值注冊 X 7.25% 轉(zhuǎn)化率 = 7 個客戶
  • 43 次免費試用 x 35% 轉(zhuǎn)化率 = 15 個新客戶

通過放棄免費增值模式并采用需要信用卡的 7 天免費試用模式,我們能夠有效地將增長率翻一番。

雖然這是事實,但這個故事和話題還有更多值得思考的地方。

歷史背景

2017 年推出 Outseta 時,我們最初采用的是免費增值模式,用戶最終會超過一些使用門檻,轉(zhuǎn)而使用付費方案。我們的想法是給用戶足夠的時間將 Outseta 集成到他們的產(chǎn)品中,而我則致力于構(gòu)建一個盡可能最方便用戶的獲取模式。

這就是我所接受的思想流派——我喜歡這種模式,我希望有一天我們能夠回到這種模式。

話雖如此,隨著人們對 Outseta 的興趣日益增長,我們很快發(fā)現(xiàn)支持量也隨之增長。我們花費了大量時間來支持不付費的客戶——其中許多客戶我們投入了數(shù)月的時間,結(jié)果卻眼睜睜地看著他們放棄或完全關(guān)閉他們的項目。 

對于一個小型的、自力更生的團隊來說,這不可能是更大的資源浪費。 

我們故意矯枉過正,在短時間內(nèi)進行了不提供免費增值產(chǎn)品或免費試用的實驗——我之前寫過這方面的文章。我不推薦直接付費模式,因為我認為買家應(yīng)該有機會在購買前先試用一下軟件。

通過7天免費試用但需要信用卡支付的模式,我們找到了一個絕佳的折中方案。它讓客戶有機會試用我們的軟件,使我們的增長率翻了一番,也讓我們節(jié)省了大量之前浪費在非付費客戶身上的時間。這讓我們能夠投入更多時間在產(chǎn)品和付費客戶身上。

顧客:這不是掠奪性的,而是為了更好地為您服務(wù)

雖然聽起來很美好,但我明白,很多客戶并不熱衷于這種需要信用卡支付的短暫試用期。作為一名軟件買家,我當然更希望有無限的時間來評估產(chǎn)品,而不用掏出信用卡!誰會不喜歡呢?

但買家常常會誤以為這是一種掠奪性的客戶獲取模式,公司希望你忘記取消試用,這樣他們就有機會向你收費。這真是大錯特錯!

事實上,我們明確地試圖避免這種情況——它會導(dǎo)致高流失率和退款。發(fā)生這種情況時,沒有人是贏家。為了解決這個問題,我們:

  • 明確告知您將在 7 天后付款,但您可以隨時取消
  • 我們會發(fā)送提醒電子郵件,告知您試用期何時到期
  • 如果某人的試用意外轉(zhuǎn)換,我們始終提供退款

我們時不時會收到一些咄咄逼人的郵件——通常是有人要求我們讓他們無需信用卡即可注冊,或者有人要求我們提供非常長的試用期(通常為3-6個月)。我會禮貌地拒絕這些請求,并花時間解釋我們的理由。 

偶爾,我們會收到“嗯,你肯定不想做我們的生意”這樣的回復(fù)——再說一遍,這完全是錯誤的。我可以肯定地告訴你,我們確實想做你的生意。但當有人注冊 Outseta 時,我們承諾幫助他們通過我們的產(chǎn)品取得成功。 

我們做了很多同等價位其他公司做不到的事情——我們會接聽您的電話;如果您需要技術(shù)支持,我們經(jīng)驗豐富的軟件工程師將竭誠為您服務(wù)。我們不會把您的問題交給無法解決的初級員工——我們?yōu)榇烁械阶院?,并相?Outseta 平臺上將會有更多成功的項目上線。

所以,我們并非不想與您合作,而是我們刻意縮小了我們的范圍,更好地服務(wù)于一小部分愿意放下卡片的人。如果您愿意,您可以加入這個群體——選擇權(quán)在您手中。

我們對您做出了相當大的承諾,因此我們同意要求您對我們做出小的承諾。

雖然我并不是說這是“正確”的方法,但我經(jīng)??吹降奶娲桨敢仓档每紤]。 

許多提供免費增值產(chǎn)品或延長試用期的公司都得到了風(fēng)險投資的支持——從擴大支持團隊到價格上漲,您不可避免地會以其他方式感受到其影響。

還有很多公司干脆選擇打開閘門,提供糟糕的支持——他們只幫助那些有巨大潛力的客戶,而讓其他所有人都有令人沮喪的支持體驗。 

我們經(jīng)常聽到的最后一句話是:“我得先賺錢,才付錢給你。” 作為一名白手起家的創(chuàng)始人,我完全理解并欣賞這種說法——但這也不是商業(yè)運作的常態(tài)。商業(yè)就是把時間、精力,當然還有金錢,投入到一個想法上,希望能夠盈利。它并非毫無風(fēng)險。 

這里的重點很簡單——總有取舍。雖然 7 天免費試用模式可能感覺不太利于客戶獲取,但它讓我們能夠以其他方式更加貼近客戶。

創(chuàng)始人:關(guān)鍵在于找到合適的

我希望更多的創(chuàng)始人認識到,你的業(yè)務(wù)中有些部分應(yīng)該針對客戶進行優(yōu)化,而你的業(yè)務(wù)中有些部分也應(yīng)該針對你的業(yè)務(wù)進行優(yōu)化。

您需要找到適合您的情況的內(nèi)容。

例如,我們可以在 Outseta 再次提供免費增值產(chǎn)品——就初始產(chǎn)品評估而言,這是一種更利于客戶的獲取模式。但之后,我們可以將實際產(chǎn)品的價格提高三倍——免費增值模式帶來的額外曝光度和更高的價格點,使我們能夠提供我們引以為豪的客戶服務(wù)。

哪種場景對客戶更友好? 

總是會有一些付出和收獲。

許多創(chuàng)始人(和客戶)也經(jīng)常問我試用期有多長,并說“7 天根本不夠”。

我已經(jīng)嘗試過很多次了。我給創(chuàng)始人的反饋是,較短的試用期幾乎總是更好的選擇,除非你的業(yè)務(wù)運營模式具有某種周期性——用戶需要特定的時間段來有效地評估你的產(chǎn)品。 

否則,延長試用期只會滋生拖延,讓人缺乏真正評估產(chǎn)品的緊迫感。7天后和14天后收到的延長試用請求數(shù)量一樣多——我測試過,結(jié)果一致。

“試用”應(yīng)該是給某人一個嘗試你的產(chǎn)品的機會——它并不是邀請人們只在方便的時候才開始付款。

我經(jīng)常會這樣回復(fù)潛在客戶:

我們的 7 天試用期旨在幫助您主動評估我們的產(chǎn)品。如果您準備好開始評估,請隨時開始試用。

事實是,如果您真正坐下來思考這個目標,您絕對可以在 7 天內(nèi)評估幾乎任何產(chǎn)品是否適合您的需求。

人性化很重要。我一直會花時間分享我們采用這種模式的原因,以及免費增值產(chǎn)品和延長試用期為何會給我們的業(yè)務(wù)帶來問題。每次我分享這些內(nèi)容時,收到的反饋都非常積極。這或許反映出我們主要向其他創(chuàng)始人銷售產(chǎn)品(他們也能理解我們的處境),但每次分享我們的理念時,收到的真誠理解的回復(fù)數(shù)量總是讓我驚喜不已。

最后,或許也是最重要的一點,刻意縮小我們的圈子絕對幫助我們建立了有效的口碑和推薦。我們投入在43家公司的時間比投入在100家公司的時間還要多。我們經(jīng)常被告知,我們提供的貼心客戶體驗和服務(wù)水平是許多其他軟件公司所不具備的。這很難量化,但口碑是最有效的營銷策略。

收入優(yōu)化并不是一切

關(guān)于免費試用與免費增值主題的文章大多集中在收入優(yōu)化上——毫無疑問,這些都是客戶獲取模式。

我的觀點是,這其中往往還有更多內(nèi)容——你使用的模式需要適合你的業(yè)務(wù)。我在本文開頭就說過,我喜歡我們最初的免費增值模式。它對用戶非常友好,在 Outseta 早期,它最大限度地增加了我們產(chǎn)品的曝光人數(shù)。

但企業(yè)的需求是有季節(jié)變化的——過去幾年,需要信用卡的 7 天試用模式非常適合我們的業(yè)務(wù)。 

這并不意味著我不會對免費增值模式回歸的那一天感到興奮;事實上我相信那一天終將到來。

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

干貨分享 | 5分鐘教你讀懂一個網(wǎng)站的組織系統(tǒng)

杰睿

“組織系統(tǒng)定義了信息是如何被分組、標記和結(jié)構(gòu)化的,是信息架構(gòu)的核心。” ——《信息架構(gòu):超越Web設(shè)計》
一個網(wǎng)站找不找得到東西,往往不是頁面不夠漂亮,而是它的“骨架”出了問題。
 
5分鐘教你讀懂一個網(wǎng)站的組織系統(tǒng) 別急著吐槽“這個網(wǎng)站太亂了”,我們可以先快速看清它的底層組織邏輯。 看懂之后,你不僅能找信息更快,還能像信息架構(gòu)師一樣,判斷它為什么難用
 
第一步:識別組織系統(tǒng)的類型 書中提到,常見的有 3 種組織系統(tǒng)
層級式(Hierarchical):像樹狀結(jié)構(gòu),從大類一路往下找小類。
 舉例:淘寶、京東,首頁 > 分類 > 品類 > 商品詳情頁
標簽式(Tag-based):通過關(guān)鍵詞給內(nèi)容打上標簽,便于橫向查找。
 舉例:豆瓣、小紅書的“標簽頁”或搜索推薦
數(shù)據(jù)庫式(Database/Faceted):通過多種維度篩選內(nèi)容。
 舉例:招聘網(wǎng)站,按職位、地點、薪資、公司規(guī)模多維度組合篩選
 
第二步:判斷它靠什么組織內(nèi)容?
是按照主題組織?(如內(nèi)容型網(wǎng)站)
按照功能任務(wù)組織?(如工具型系統(tǒng))
還是按照部門/組織結(jié)構(gòu)?(很多B端網(wǎng)站喜歡這樣,用戶卻常常迷路)
書中提醒我們:“你用什么標準組織內(nèi)容,決定了用戶能不能第一眼看懂結(jié)構(gòu)。”
 
第三步:嘗試“逆向走訪” 挑一個你想找的內(nèi)容,看你是怎么點進去的 → 你靠的是主導(dǎo)航?搜索?標簽?推薦? → 點進后路徑清晰嗎?有沒有繞圈?
這個路徑,就是它的“組織策略是否有效”的實戰(zhàn)測試。
 
小貼士:在信息架構(gòu)里,結(jié)構(gòu)不是設(shè)計出來的,是選出來的。 你要先了解網(wǎng)站內(nèi)容的本質(zhì)、用戶的需求,然后再選擇適合的組織方式,而不是反過來。
 
溫柔總結(jié) 讀懂一個網(wǎng)站的組織系統(tǒng),就像看清了一座城市的交通圖。 結(jié)構(gòu)清晰,信息才不會堵車;邏輯順暢,用戶才不會繞路。
 
你印象最深的是哪個“特別難找東西”的網(wǎng)站?
歡迎來評論區(qū)吐槽/分享,也許我們可以一起改出一個好用的結(jié)構(gòu)圖
 
蘭亭妙微(www.liangyajiaju.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計,以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計,有興趣請加入一起學(xué)習(xí)成長,咨詢及進群請加藍小助微信ben_lanlan

用戶體驗設(shè)計公司審美積累 | 玻璃擬態(tài)(Glassmorphism)

杰睿

玻璃擬態(tài)是一種通過“毛玻璃”質(zhì)感制造層次感的視覺風(fēng)格,它的核心在于“透明而不完全透明”。背景虛化、低飽和的色彩疊加、加上一點高光和邊緣描邊,讓界面看起來像一塊塊懸浮的玻璃板——清透、未來感強,但又保有一定的視覺秩序。
7df7e3223582989.684a7395c616e (1).png

0ad857ded1430e96cc8c7a17025625f7.jpg

7e79fef9154d6be3a90c416a6dcb9ec8.jpg

8bda27c807087832014ff681b4f578a1.jpg

f067704e7b4e83b329943439238218df.jpg

f2071624b91b0cbfa1246626441abc37.jpg

original-309d218b2f7b012fb02eb381a05267ee.jpg

original-a7522c880d731d08fb11b59f18fa1167.jpg

original-fe5850f5a7494ce96760d5de0e970057.jpg

風(fēng)格關(guān)鍵特征:
背景虛化(blur)+ 半透明遮罩,制造玻璃質(zhì)感
常用漸變色、霓虹色或輕微光感增強視覺層次
元素之間有明顯的空間關(guān)系,但不會很立體
字體通常保持清晰銳利,和背景形成對比
常見應(yīng)用場景:
桌面系統(tǒng)、操作中心(如 macOS、Windows 11 控制面板)
創(chuàng)意型產(chǎn)品落地頁、品牌官網(wǎng)、視覺呈現(xiàn)型App
智能設(shè)備界面,尤其適用于現(xiàn)代感、科技感產(chǎn)品
使用體驗觀察: 玻璃擬態(tài)視覺效果很抓人,但落地門檻不低: 對背景圖、模糊參數(shù)、顏色對比的控制要求很高,做不好容易顯得“臟”或“花”。另外,它對性能也有一定要求(移動端大面積使用會拖慢加載)。 所以更適合用于重點視覺區(qū)域、卡片容器、導(dǎo)航面板,而不是整套系統(tǒng)大面積通用。
實操建議:
結(jié)合深色背景或漸變背景更容易出效果
注意文本清晰度,可加暗影或顏色疊加提升可讀性
你在哪個產(chǎn)品里看到過讓你驚艷的玻璃擬態(tài)設(shè)計?歡迎分享案例,一起挖掘它的高效用法~
 
蘭亭妙微(www.liangyajiaju.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計,以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計,有興趣請加入一起學(xué)習(xí)成長,咨詢及進群請加藍小助微信ben_lanlan

Hannah & Henry 如何通過產(chǎn)品頁面優(yōu)化將收入提高 45.67%

杰睿

Hannah & Henry是一家澳大利亞電商品牌,專營時尚嬰兒尿布包。在本案例中,我們將探討他們?nèi)绾螒?yīng)對這一挑戰(zhàn),并將收入提升 45.67%。

認識漢娜和亨利

Hannah & Henry 不僅僅是一家電子商務(wù)商店——它是一個源于母親愿景的激情項目。 

該公司由Elaine創(chuàng)立,她是一位兩個孩子的母親,渴望將個人風(fēng)格與實用功能完美融合。她致力于打造一系列能夠體現(xiàn)自身風(fēng)格和價值觀的尿布包,這促成了Hannah and Henry的誕生。Hannah and Henry對品質(zhì)、耐用性、可持續(xù)性和客戶滿意度的執(zhí)著追求,為他們的電商之路樹立了高標準。

該品牌的使命是為父母提供設(shè)計師和日常嬰兒配件的融合,使其無縫融入他們的生活。

挑戰(zhàn)

產(chǎn)品詳情頁是電商網(wǎng)站流量的重要入口。然而,他們卻難以提高這些關(guān)鍵頁面的轉(zhuǎn)化率。

由于大多數(shù)訪問者跳過主頁并直接進入產(chǎn)品頁面,因此挑戰(zhàn)在于大規(guī)模優(yōu)化這些頁面。 

現(xiàn)在,想象一下,你想為你的產(chǎn)品頁面寫一個有創(chuàng)意的標題和摘要。假設(shè)效率最高,這個過程至少需要10分鐘才能完成一頁。 

以 Hannah 和 Henry 為例,他們有 134 個產(chǎn)品頁面。如果乘以 10 分鐘(134 x 10),就是 22 個小時,幾乎相當于連續(xù)工作三天。這看起來有點嚇人,對吧?

解決方案:智能產(chǎn)品頁面優(yōu)化器

如今,在人工智能的幫助下,智能產(chǎn)品頁面優(yōu)化器等工具正在改變產(chǎn)品頁面優(yōu)化的世界。 

Hannah 和 Henry 節(jié)省了 3 天的工作時間,因為 AI 僅用幾分鐘就為他們完成了此產(chǎn)品頁面更新。 

該工具利用人工智能來: 

  • 提出引人注目的口號

  • 創(chuàng)建引人入勝的描述,并且 

  • 確定最佳產(chǎn)品評論。 

除此之外,該工具還可以運行 A/B 測試,以找出最適合你的受眾的版本。Hannah & Henry 決定測試其產(chǎn)品頁面的多個版本,探索不同的標語、產(chǎn)品描述和評論組合。 

原始版本作為對照,同時引入添加元素的變體以觀察其影響。

查看控制版本(又名版本 A):

Hannah 和 Henry 產(chǎn)品頁面的控制版本

B 版包含一個口號和一個產(chǎn)品描述:

Hannah 和 Henry 產(chǎn)品頁面版本 B

C 版包含評論、口號和產(chǎn)品描述: 

Hannah 和 Henry 產(chǎn)品頁面 C 版

最后,版本 D 包含一條評論和一句口號(但沒有產(chǎn)品描述):

Hannah 和 Henry 產(chǎn)品頁面版本 D

結(jié)果

包含評論、口號和產(chǎn)品描述的版本 C表現(xiàn)優(yōu)于控制版本,收入增加了 45.67% 。 

這表明了為觀眾定制內(nèi)容以吸引更多客戶并推動轉(zhuǎn)化的重要性。

總結(jié)

Hannah & Henry 的經(jīng)歷提醒我們,產(chǎn)品頁面在將品牌價值與受眾聯(lián)系起來方面發(fā)揮著關(guān)鍵作用。 

他們的故事凸顯了當今先進的人工智能工具所帶來的機遇。他們利用 OptiMonk 的智能產(chǎn)品頁面優(yōu)化器提升了客戶體驗,將普通的網(wǎng)站訪問變成了一次探索育兒之道的愉悅之旅。

為成功做好準備:為高增長企業(yè)建立實驗計劃

杰睿

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

機會

作為男士美容領(lǐng)域的全球領(lǐng)導(dǎo)者,Dollar Shave Club (DSC) 深知創(chuàng)新和實驗的重要性。 

事實上,DSC 的領(lǐng)導(dǎo)團隊非常熱衷于實驗,以至于決定構(gòu)建自己的內(nèi)部測試工具 - 但這帶來了一些無法預(yù)料的復(fù)雜情況:

由于啟動新測試需要工程資源,DSC 團隊不得不在開發(fā)新功能和啟動新實驗之間做出選擇。這導(dǎo)致優(yōu)先級排序只能靠猜測,結(jié)果往往是大型項目獲得優(yōu)先考慮,而規(guī)模較小、容易實現(xiàn)的測試機會則被擱置。 

結(jié)合其他相關(guān)問題,這意味著該計劃和工具都沒有產(chǎn)生最初希望的影響。 

DSC 運營副總裁 Tsega Ortega 認為,如果企業(yè)想要成功進行實驗,就必須放棄內(nèi)部工具,轉(zhuǎn)而投資外部測試工具。 

考慮到已經(jīng)進行的大量投資,再加上外部工具的大量成本,該提議在內(nèi)部遭到了很大的反對。 

該項目具有很高的知名度,風(fēng)險很高,因此 Tsega 必須能夠立即顯示該工具的積極投資回報率。 

不幸的是,我們很快就發(fā)現(xiàn),測試工具本身提供的服務(wù)不足以使該計劃成功——這就是我們介入的地方:

實施轉(zhuǎn)換的短期目標是推動直接影響并從測試工具投資中獲得積極的投資回報。 

從長遠來看,我們的任務(wù)是促進整個企業(yè)采用實驗,同時利用實驗來產(chǎn)生重要的客戶洞察,這些洞察可以在整個企業(yè)傳播,以發(fā)掘新的機會并加速增長。 

克服惰性

作為一家以客戶為中心的企業(yè),Dollar Shave Club 渴望了解用戶不斷變化的需求和愿望,它已經(jīng)進行了一些非常強大的基礎(chǔ)研究,我們可以利用這些研究來指導(dǎo)我們工作的第一步。 

這項研究——一項針對男性個人護理購物者的家庭和店內(nèi)定性民族志研究——得出了兩個核心見解。 

  • 男性美容購物體驗中存在很多慣性:除非有充分的理由,否則男性不太可能更換品牌。 
  • 這種惰性也會影響到購買習(xí)慣:大多數(shù)男性都會購買現(xiàn)成的美容產(chǎn)品,并且不愿意轉(zhuǎn)向在線訂購。 

這意味著 DSC 不僅要說服潛在客戶更換品牌(這本身就是一個很大的要求),還要說服這些客戶改變他們的購買習(xí)慣。 

我們知道這會很困難——改變根深蒂固的行為總是一場艱苦的戰(zhàn)斗——但憑借在行為科學(xué)方面的豐富專業(yè)知識,我們有信心能夠產(chǎn)生預(yù)期的影響。

解決方案

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

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

這是一個大問題。 

 

控制:漏斗中的原始副本是非對話式的,與 DSC 的品牌語調(diào)不符

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

哈佛商學(xué)院關(guān)于情感共鳴影響的數(shù)據(jù)

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

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

 

 

變化:漏斗中的新副本輕松且具有對話性,與 DSC 的品牌語調(diào)更加匹配。

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

這有力地證明了小型測試可以產(chǎn)生的影響。 

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

碎片化獎勵

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

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

一次性成本和碎片獎勵。 

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

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

 

在對照組(左圖)中,產(chǎn)品和功能被集中顯示。在變體組(右圖)中,每個產(chǎn)品(及其功能)被拆分并單獨顯示。

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

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

迭代以產(chǎn)生影響

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

 

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

在這種情況下,pogosticking 表明用戶來回查看不同產(chǎn)品如何影響價格。 

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

我們還想了解移除默認復(fù)選框?qū)τ脩趔w驗的影響,以及如何幫助用戶理解優(yōu)惠信息。因此,我們創(chuàng)建了第二個變體,取消了一些最初選中的產(chǎn)品。 

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

 

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

正如預(yù)期的那樣,第一個版本將轉(zhuǎn)化率額外提高了 1.5%。更令人印象深刻的是,第二個版本(取消選中復(fù)選框)將訂閱數(shù)量提高了 6.8%。 

這意味著,通過兩次實驗(最初的拆分測試及其迭代),我們能夠?qū)⒂嗛嗈D(zhuǎn)化率提高 17% 以上。 

結(jié)果

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

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

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

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

此次職責(zé)擴展的另一個要素是將實驗的影響擴展到整個業(yè)務(wù)。一方面,我們只是利用實驗來優(yōu)化訂閱之外的其他關(guān)鍵增長指標,例如貨幣化和留存率。另一方面,我們確保實驗?zāi)軌蛑笇?dǎo)所有業(yè)務(wù)部門的決策——從市場營銷到產(chǎn)品,從工程到設(shè)計。 

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

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

兩個 Instapage 定價頁面 A/B 測試:我們測試了什么?我們學(xué)到了什么?

杰睿

定價頁面 A/B 測試

 

 

過去,Instapage 網(wǎng)站團隊會分別測試主頁的標題、客戶徽標、推薦等內(nèi)容。之后,還會測試圖片和 MP4 動畫。毫無疑問,每次測試都會揭示一些有趣的見解。但主頁的 A/B 測試是一回事,因為它是你的在線店面,人們可以從網(wǎng)上的各種渠道訪問它。

然而,定價頁面需要用戶進行更多的搜索——他們必須在進入任何其他網(wǎng)站頁面后點擊導(dǎo)航標題。

對于這些受眾,我們?nèi)匀幌M私庥脩襞c頁面的互動情況,以及哪種版本能帶來更多免費試用注冊和企業(yè)演示請求。今天的文章將重點介紹這些實驗。

我們?yōu)槭裁匆獙Χ▋r頁面進行 A/B 測試?

 

定價頁面最能引起我們網(wǎng)站訪客的興趣。畢竟,潛在客戶需要向公司分享一些重要信息,例如價格和功能,才能開始使用像 Instapage 這樣高端的產(chǎn)品。

此外,定價頁面是客戶旅程的關(guān)鍵部分。對漏斗進行測試和實驗至關(guān)重要,以尋求可以提高轉(zhuǎn)化率或改善客戶體驗的改進方法。

實驗#1:頁面布局

 

我們測試了一種布局變體,用于展示自助服務(wù)和企業(yè)計劃之間的功能比較。Instapage 網(wǎng)站自最近重新設(shè)計以來,一直保留著原來的定價頁面布局。該變體是為重新設(shè)計而創(chuàng)建的額外模型。

我們以 70/30 的比例(70% 訪問原始頁面,30% 訪問變體頁面)對所有訪問該頁面的訪客進行了測試,這樣可以讓大量訪客與變體頁面進行互動,并生成具有統(tǒng)計意義的數(shù)據(jù)。通過跟蹤與轉(zhuǎn)化操作相關(guān)的目標,我們可以判斷改版是否對目標產(chǎn)生了影響。

這是原始頁面設(shè)計(請注意并排的長功能列表):

定價頁面 A/B 測試 Instapage 原版

以下是針對原始版本測試的變體(請注意如何根據(jù)客戶計劃分離出功能):

定價頁面 A/B 測試 Instapage 變體

(注意:上面的截圖來自之前的測試,與我們當前的實時定價頁面不同。內(nèi)容可能不匹配,不應(yīng)反映 Instapage 的當前定價和計劃選項。)

最初的假設(shè)是什么?

 

我們最初的設(shè)想是,重新設(shè)計后,Instapage 的各個套餐功能將更容易被訪客看到,并新增一個企業(yè)版專屬功能。當然,這次測試的目標是增加免費試用注冊量,以便新用戶能夠全面評估 Instapage 平臺。此外,我們也希望提升轉(zhuǎn)化率,并增加企業(yè)版的咨詢量。

結(jié)果向我們展示了什么?

 

結(jié)果表明,原始版本在所有用戶群體中的表現(xiàn)都優(yōu)于變體版本。我們將受眾群體劃分為四個用戶群體(新用戶、回訪用戶、自然流量和付費流量),以確定用戶在站內(nèi)行為方面是否存在顯著差異。

除了免費注冊轉(zhuǎn)化目標外,我們還分析了頁面停留時間、退出時間和跳出率:

定價頁面 A/B 測試 Instapage 變體

實驗 #2:并排功能比較

 

我們的第二個定價頁面實驗是我們原始設(shè)計顯示并排功能比較方式的變體。

最初,定價頁面將最受歡迎或差異化程度最高的功能顯示在頁面頂部。然而,大多數(shù)其他功能都被隱藏了,但訪客仍然可以點擊按鈕顯示完整列表,進行并排比較。團隊決定進行一項調(diào)查,看看僅顯示這些頂級功能時,用戶是否有足夠的信息來注冊免費試用?;蛘?,如果在長列表中顯示所有功能,是否會提高轉(zhuǎn)化率。

我們到底測試了什么?

 

我們測試了原始布局(來自重新設(shè)計和實驗 1),并使用了一個在頁面加載時顯示所有功能的變體。同樣,我們進行了 70/30 的受眾比例劃分,并等待頁面顯示足夠的數(shù)據(jù),以便將其作為性能的顯著指標。我們還保留了與上一個實驗相同的免費試用注冊目標。

最初的假設(shè)是什么?

 

我們最初的假設(shè)是,如果我們向用戶展示精簡版的功能列表,就能提供足夠的信息,讓用戶注冊免費試用,而不會讓訪客感到不知所措。我們預(yù)計原始設(shè)計的效果會優(yōu)于版本,但也想挑戰(zhàn)我們的假設(shè),并對前面提到的四個受眾群體的用戶行為感興趣。此外,團隊也很好奇,全面展開的并排功能比較是否會影響我們收到的企業(yè)演示請求數(shù)量。

結(jié)果向我們展示了什么?

 

本次實驗的初步結(jié)果表明,變體略勝原版。為了確認測試結(jié)果,我們分析了跳出率、頁面停留時間和轉(zhuǎn)化率等其他性能指標,以確保變體勝過原版:

定價頁面 A/B 測試 2 Google 優(yōu)化數(shù)據(jù)

結(jié)論

 

當前版本的定價頁面采用的是擴展視圖,所有功能都并排比較。如果沒有對頁面進行拆分測試,Instapage 團隊不可能得出如此自信的結(jié)論。

您可以訪問定價頁面,查看 Instapage 套件的完整功能列表并申請演示。或者,立即獲取您自己的定制演示。

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

分享 3 個新手入門和結(jié)賬秘訣

杰睿

今天,我們將揭開 Mural、Hubspot 和一家大型電子商務(wù)零售商進行的三項強有力的實驗的面紗。 

1.最大限度地減少用戶結(jié)賬時的震驚:僅用 1 天的工程工作就增加了 2200 萬美元的收入。 

適用于:電子商務(wù)、市場、B2B、金融科技

問題:

當用戶到達最終結(jié)賬頁面時,預(yù)估運費和實際運費之間的差異會讓他們感到不快。這種差異常常導(dǎo)致用戶放棄購物車。這家公司在結(jié)賬流程中面臨著一個挑戰(zhàn)——“沖擊因素”。

舊解決方案:

該公司最初在購物車頁面上顯示了估計的運費,一旦他們獲得了用戶的賬單地址,他們就會在最終結(jié)帳頁面上顯示“真實”的運費,但這種體驗給用戶帶來了震驚,因為他們最初看到的價格與最終需要支付的價格不符。

新的解決方案:

該公司選擇了一項大膽的戰(zhàn)略轉(zhuǎn)變。他們從購物車頁面移除了預(yù)估運費,僅在結(jié)賬頁面顯示這些費用。令人驚訝的是,那些在舊方案中原本需要支付更高運費的用戶,其結(jié)賬率卻顯著提高。這一微小的改變帶來了巨大的影響——僅花費了一天的工程成本,就實現(xiàn)了2200萬美元的年收益。

經(jīng)驗教訓(xùn):

實驗揭示了一個意想不到的真相——對于用戶購買而言,預(yù)先提供詳細的成本明細并不比在合適的時機提供準確的總價更重要。事實證明,通過精準的定價建立信任并最大程度地減少用戶的震驚才是改變游戲規(guī)則的關(guān)鍵。

2. Hubspot 的 KYC 注冊數(shù)量實現(xiàn)了兩位數(shù)的百分比增長: 

適用于:市場、B2B、金融科技

問題:

HubSpot 面臨著支付行業(yè)一個常見的挑戰(zhàn):用戶不愿遷移到新的支付平臺。為了增加平臺上 KYC 專家的數(shù)量,他們需要減少注冊流程的阻力,或者提升用戶的積極性。本次實驗的重點是前者——減少注冊流程的阻力。 

舊解決方案:

HubSpot 有一個 MVP 解決方案,要求用戶在其平臺上啟動 KYC 流程,但會將用戶重定向到 Stripe 網(wǎng)站填寫個人信息并關(guān)聯(lián)銀行賬戶。用戶訪談顯示,他們對使用 HubSpot 支付工具是否需要 Stripe 賬戶感到困惑。

新的解決方案:

Sophia Friend和她的團隊將整個用戶引導(dǎo)和信息收集流程保留在 HubSpot 的原生 UI 中,從而為客戶打造了情境化用戶體驗。HubSpot 將 KYC 流程引入公司內(nèi)部,無需將用戶重定向到第三方網(wǎng)站。

影響:

成果令人矚目——每周注冊的 KYC 專業(yè)人員數(shù)量(絕對值)顯著增長了兩位數(shù)。這一轉(zhuǎn)變是通過四個沖刺的開發(fā)工作實現(xiàn)的,即使開發(fā)成本很高,但投資回報率仍然非常值得。

經(jīng)驗教訓(xùn):

這個實驗揭示了一個深刻的教訓(xùn)——與在客戶眼中可能缺乏可信度的第三方相比,用戶往往對他們所注冊的品牌和平臺有更大的信任。

Honeybook 的示例: 

3. Mural 的留存突破:簡化的入職流程使 1 周留存率提高 10% 以上

語境:

Mural.co是一家 SaaS 公司,提供協(xié)作可視化工作平臺,旨在使團隊合作更高效、更愉快。

適用于:B2B、B2C、生產(chǎn)力

問題:

Mural 的一周留存率面臨巨大挑戰(zhàn)——新注冊用戶未能如預(yù)期般與其平臺互動。他們的目標是打造一種引導(dǎo)用戶無縫銜接首次會話的體驗,并鼓勵他們采取“高質(zhì)量”的行動。在本例中,“高質(zhì)量行動”的一個例子是用戶創(chuàng)建他們的第一個圖板或添加便簽。這些“高質(zhì)量”行動是留存率的領(lǐng)先指標。

舊解決方案:

最初的方法包括應(yīng)用提示、橫幅廣告、聊天和彈窗,導(dǎo)致用戶不知從何入手。每個彈窗都為用戶設(shè)定了特定的操作,但它們同時出現(xiàn)會讓用戶感到不知所措,最終導(dǎo)致他們忽略這些提示,因為它們與他們希望如何使用平臺的主要目標不符。

新的解決方案:

Mural 進行了一項實驗,關(guān)閉了所有上述 UI 設(shè)計,并引入了一個精簡的核對清單。這份清單僅包含五項內(nèi)容,成為用戶首次登錄平臺時的指路明燈。對簡潔明了的關(guān)注帶來了變革,因為它幫助用戶一次只專注于一項內(nèi)容。

影響:

其影響是巨大的,一周的保留率顯著提高了 10%,使入職體驗更加吸引人、更加有效。

經(jīng)驗教訓(xùn):

Mural 的歷程凸顯了簡化引導(dǎo)流程的力量。過多的指導(dǎo)可能會讓用戶不知所措。如果你的產(chǎn)品簡單易懂,用戶通??梢宰约赫业酱鸢?。專注于基礎(chǔ)知識,并提供一個清晰的起點,就能讓用戶有探索和學(xué)習(xí)的空間。有時,更少的指導(dǎo)反而能讓用戶真正掌握如何使用你的產(chǎn)品。

好了,以上就是三個改變游戲規(guī)則的實驗。記住,增長的關(guān)鍵在于創(chuàng)新和實驗。請在評論區(qū)分享你的想法、反饋或你自己的實驗。讓我們繼續(xù)探討增長話題!

如果您渴望了解更多增長實驗,請點擊訂閱按鈕。感謝您加入 GrowthInsider 社區(qū)。保持好奇心,保持創(chuàng)新,持續(xù)成長!

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

信息架構(gòu)師都在用的用戶研究工具盤點

杰睿

“用戶研究是信息架構(gòu)設(shè)計中不可或缺的基礎(chǔ),哪怕只是最低限度的觀察和傾聽。”
 ——《信息架構(gòu):超越Web設(shè)計》
你看到的是用戶卡住了,他們看到的,可能是根本找不到門。
 
信息架構(gòu)師都在用的用戶研究工具盤點 想做出真正讓用戶“好找、好懂、好用”的結(jié)構(gòu),光靠經(jīng)驗不夠,用戶研究才是底氣。 別擔(dān)心,研究不一定復(fù)雜,以下這些方法都超好上手
1ec89a013c12aedcf83d556effd98a64.jpg
1. 卡片分類法(Card Sorting) ? 適合:優(yōu)化導(dǎo)航、分類系統(tǒng) ? 怎么用:把功能/內(nèi)容寫成卡片,請用戶幫你歸類,看他們怎么理解和組織信息
書中說:“它是了解用戶心智模型最直接的方式。”
 
2. 可用性測試(Usability Testing) ? 適合:驗證你設(shè)計的導(dǎo)航、標簽、頁面路徑是否好用 ? 怎么用:讓用戶完成某個任務(wù),觀察他們是否順利,聽他們怎么想
原話:“你必須親眼看到用戶如何掙扎,才能明白你的設(shè)計有多不清晰。”
 
3. 訪談(User Interviews) ? 適合:挖掘用戶真實目標和行為習(xí)慣 ? 怎么用:與用戶面對面或線上聊聊,讓他們描述在某個場景下的操作方式和感受
書里建議:“別只是問‘你喜歡這個嗎’,而要問‘你會怎么做?為什么?’”
 
4. 內(nèi)容清單審核(Content Inventory) ? 適合:網(wǎng)站改版、信息架構(gòu)重構(gòu)初期 ? 怎么用:列出現(xiàn)有的所有頁面、內(nèi)容、功能,看看哪些有用、哪些重復(fù)、哪些沒人看
書中提醒:“設(shè)計一個結(jié)構(gòu)前,你得知道你到底在整理什么。”
 
不需要所有都做,一兩項做深,就很有幫助
沒資源做調(diào)研?從“內(nèi)容清單+2個用戶訪談”開始
做內(nèi)部系統(tǒng)?拉2位業(yè)務(wù)同事試用系統(tǒng)導(dǎo)航,也能發(fā)現(xiàn)很多問題
不擅長問問題?提前列好“使用場景”和“操作步驟”,讓用戶邊做邊說
信息架構(gòu)不是只靠感覺堆結(jié)構(gòu),它更像在幫用戶“鋪路”。 研究,就是你用心去聽他們怎么走、怎么迷路的方式。 每個觀察、每句用戶的話,都會成為你設(shè)計里的小燈塔。
 
蘭亭妙微(www.liangyajiaju.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計,以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計,有興趣請加入一起學(xué)習(xí)成長,咨詢及進群請加藍小助微信ben_lanlan

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://www.liangyajiaju.cn

存檔