圖表作為一個使用頻率不高卻很重要的組件，讓設計者們操碎了心?？粗约涸O計的圖表，總覺得有哪里不好，但又說不上來。本文作者總結了快速提升B端圖表用戶體驗的15小細節，一起來看一下吧。

B端界面中使用頻率不高，但卻無比重要的組件——圖表，可謂是讓設計者們煩透了心。圖表設計起來不難，但想要設計好，也是需要下一番功夫的。

很多小伙伴問我，說：每次在設計圖表的時候，總是找不出自己哪里設計的不好，但看著自己設計的圖表，又沒有那么滿意，該如何辦呢？今天，我們就來一起了解下B端的圖表，挖掘一些設計者們平時未曾捕捉到的細節，獲得這些細節，將從細微之處提升產品的用戶體驗。

本文將從以下五個部分來展開：

1. 什么是圖表
2. 圖表的優勢
3. 開源圖表庫有哪些
4. 15個圖表小細節
5. 總結

一、什么是圖表

百度百科解釋：“圖表，Microsoft Office用語，泛指在屏幕中顯示的，可直觀展示統計信息屬性（時間性，數量性等），對知識挖掘和信息直觀生動感受起關鍵作用的圖形結構，是一種很好的將對象屬性數據直觀，形象的‘可視化’的手段。”

根據百度百科的解釋，我們來做一個”數據圖表化“的小推導。我從網站找了一段描述低碼的數據（數據來源艾瑞咨詢，并做了一些小修改），如下：

“2016年開始低代碼概念開始從國內逐漸興起，當年低代碼相關產品投融資事件達10起，億元以上融資數量2起，至2020年中國低代碼市場共有59起投融資事件，其中億元以上融資共有13起。2017年融資事件11起，億元以上融資3起；2018年融資事件12起，億元以上融資2起；2019年融資事件12起，億元以上融資3起；2020年融資事件14起，億元以上融資3起。隨著企業對系統敏捷性、易用性需求的增加和對業務部門低代碼接受度的提升，市場會迎來新的發展契機，短期內投融資熱度將持續增長?！?

雖然以上的文字已經做了一些簡練，但閱讀時候不免覺得有些繞，不能很直觀的理解數據，且要記住關鍵數據還是較為困難的。

下面，我們對以上文字進行再次梳理，適當分段，進行結構化排版：

“2016年開始低代碼概念開始從國內逐漸興起，當年低代碼相關產品投融資事件達10起，億元以上融資數量2起。

至2020年中國低代碼市場共有59起投融資事件，其中億元以上融資共有13起。

2017年融資事件11起，億元以上融資3起；

2018年融資事件12起，億元以上融資2起；

2019年融資事件12起，億元以上融資3起；

2020年融資事件14起，億元以上融資3起。

隨著企業對系統敏捷性、易用性需求的增加和對業務部門低代碼接受度的提升，市場會迎來新的發展契機，短期內投融資熱度將持續增長?！?

通過分段描述，以上段落顯得清楚了很多，但是例如”融資事件、億元以上融資“等詞語還是反復出現，整體來說不夠簡練。

那么，我們再將以上數據進行表格化展示來看看，如下：

我們可以發現，表格的展現形式比分段的結構化文本又清晰了太多，使得數據展示非常直觀。不僅用戶可以看清楚數據本身，還可以對比數據，假如表格再設計的人性化一些，可以將最大值進行重點標注（根據業務需要對數據進行差異化標注）。

不過表格也有劣勢，無法展現數據隨時間變化的趨勢等問題。我們再次仔細閱讀上述數據，可以梳理出如下圖表。

上圖將2016年到2020年的融資事件總數進行了重點處理，億元以上融資事件數量進行了次要處理。并且用柱狀圖疊加折線圖的圖表表達了2016年到2020年低碼融資事件數量的趨勢情況。

二、圖表的優勢

綜上所述我們可以發現，從通常意義上來說，圖表優于表格，表格優于結構化文本，結構化文本優于普通段落。那我們來看看圖表有哪些優勢。

1. 針對性

一圖一類型是圖表的特點，例如柱狀圖是用來比較同一指標下不同對象情況的圖表；餅圖是展現部分與部分之間，及部分與整體之間占比的情況。我們在使用圖表時，需要先對數據進行判斷，再選擇合適的圖表進行展現。

2. 直觀性

圖表與文字相比，在數據的表現上非常直觀。不僅可以讓用戶一目了然地看到數據，還能讓用戶將數據進行對比，從而發現問題，定位原因，解決問題。

3. 混合與拓展性

根據數據的屬性，圖表是可以進行混搭與拓展使用的?；齑钍侵笀D表和圖表可以拼搭使用，例如折線圖與柱狀圖經常合體使用。拓展性是指根據基礎圖表可以拓展出一系列個性化圖標。例如堆疊柱狀圖是由基礎柱狀圖衍生出來的。

三、開源圖表庫

目前開源的圖標庫以下幾種：

1. AntV G2

在AntV的官網上，是這么描述G2的：“一套面向常規統計圖表，以數據驅動的高交互可視化圖形語法，具有高度的易用性和擴展性。使用 G2，你可以無需關注圖表各種繁瑣的實現細節，一條語句即可使用 Canvas 或 SVG 構建出各種各樣的可交互的統計圖表?！?

2. ECharts

百度百科：“ECharts是一款基于JavaScript的數據可視化圖表庫，提供直觀，生動，可交互，可個性化定制的數據可視化圖表。ECharts最初由百度團隊開源，并于2018年初捐贈給Apache基金會，成為ASF孵化級項目?！?

3. High Charts

百度百科：“Highcharts 是一個用純JavaScript編寫的一個圖表庫，能夠很簡單便捷的在web網站或是web應用程序添加有交互性的圖表，并且免費提供給個人學習、個人網站和非商業用途使用。HighCharts支持的圖表類型有曲線圖、區域圖、柱狀圖、餅狀圖、散狀點圖和綜合圖表?！?

4. Chart.js

Chart.js是一個面向設計人員和開發人員的簡單而靈活的 JavaScript 圖表。以下是Chart.js的文檔鏈接。

https://chartjs.bootcss.com/docs/

5. Chartist.js

Chartist.js 是一個面向設計人員和開發人員的簡單的響應式圖表，是前端圖表生成器。

目前來說B端產品使用最廣泛的圖標庫是AntV G2和ECharts。

四、15個圖表小細節

在大致了解了圖表以后，筆者總結了基于自身經驗、團隊經驗與行業經驗的圖表小技巧。希望這些小技巧能潤物細無聲地影響我們的設計者，從而為B端提升一點小體驗。

1. 折線圖2px

通常在B端中，我們用到線，以1px居多。但在折線圖中，我們經過反復推敲，發現2px線優于1px線。首先，2px線條顯得有力而清晰；其次，在線條多的時候，便于分辨。

2. 柱狀圖間距

柱狀圖中柱子與柱子之間的間距與柱子的寬度一致就好，且最左邊和最右邊柱子距離兩邊的間距為柱子的一半。如下圖所示，若柱子的寬度為X，則柱子與柱子間的間距為X，兩邊柱子距離各自向外間距為X/2。

3. 刻度值

圖表上的刻度值遞增數值根據實際情況需要做適當約束，如最大數值為150，就不適合刻度值上線標記為1000。其次，若業務數據一直處于動態變化中，則圖表Y軸可以設置成動態。

4. 餅圖文字顯示

在餅圖分類較少時候，可以將文字寫在餅圖上，但當分類較多時候，文字適合寫在餅圖外。

5. 餅圖塊排列

餅圖塊排列也是個值得考究的事情，通常來說，餅圖塊呈順時針方向旋轉，且以12點鐘方向為起點，塊面從大到小布局，若有“其他”模塊，則放置在最后。

6. 標簽位置

通常標簽都會放在圖表的上方區域，但這并不是一成不變的規則，例如當折線圖線較多的時候，可以考慮將標簽直接跟在折線的尾部。同時可以做一些交互效果，鼠標點擊標簽可以讓線弱化或者顯示。

7. 圖表色彩

圖表在配色上要使用區分度大的顏色，不要為了好看而使用相鄰的色彩，這會導致圖表的可讀性大大降低。如有條件，建議在色彩上考慮無障礙視覺。

8. 同類色使用

屬于同一色相，不同明度和飽和度的顏色，也是有使用空間的，通常表示同一對象的梯度變化。

9. 顯示重點

當圖表上數據及其多，且產品團隊壓根沒打算將數據量減少時，我們可以考慮展示重點數據（系統默認展示推薦重點，用戶可以自己選擇他所需的重點），弱化其他數據。

10. 標題的妙用

標題不僅僅是用來呈現普通描述的，在特殊場景下，標題描述可以稍微進行變化，從而達到直觀表述圖表核心含義的目標。

11. 時間周期太長

某些業務的數據統計需要跨很長的時間周期，這時，圖表無法滿足如此長周期的時間展示需求，我們不要慌，可以通過以下幾種方式去解決。

11.1 添加縮略滑塊

給圖表添加縮略滑塊，可以通過拖拽滑塊了查看某段時間范圍的數據?；瑝K拉拽的越大，可以看到的時間范圍越大，但注意，會有極限值。

11.2 添加滑動滑塊

給圖表添加滑動滑塊，可以通過滑動一個固定大小的滑塊，查看某短時間范圍的數據。它與縮略滑塊的區別在于，滑動滑塊每次看到的時間段是一致的。

11.3 區塊放大鏡

如果圖表的呈現就是希望時間周期顯示完整，那么當時間周期較長的時候，顆粒度可以展示的稍微粗一些，不用太細，例如無需2月1日、2月2日、2月3日、2月4日、…連續展示，只要2月1日、3月1日、4月1日、5月1日、…間隔展示即可。在交互上，鼠標移入圖表區不斷進行某時間周期數據框選（即放大），就可以讓框選區數據不斷清晰。日K線常用此類方法去做。

12. 時間軸顯示

當時間軸日期跨越在當年時，無需每個時間點都帶上年份；而當跨年時，可以帶上年份，這樣可以保證時間軸顯示更簡單，不擁擠。

13. 等寬字體

若圖表中會采用表格去協助查看某類數據的明細，聯動展示，那么表格中的字體建議使用等寬字體，等寬字體方便用戶用視覺來比較大小。

14. 數據歸類

指標大盤上放置著各類型圖表數據，建議設計者們對數據的進行歸類整理，屬于一類的數據臨近展示，方便用戶連續性查看相關數據。

15. 靜態與動態圖表

圖表分為靜態和動態圖表，當業務呈現較為簡單時，使用靜態圖表就好。而當業務復雜，一張圖表難以表達細節時，就要考慮動態圖表去呈現了，“鼠標交互，數據擴展和下鉆”是動態圖表的特征。

五 、總結

圖表的小細節遠遠不止文中提到的這15種，還有好多好多。由于每時每刻都有設計者因為產品需求創造出新的好用的圖表類型，圖表成為了B端可持續探索的一片海洋。

往往偉大的事業都是從七月開始的、我用一個設計師的視角，來盤點一下UI/UX行業這半年的設計風格走勢。

以下我從色彩、圖形、圖標、排版、行業趨勢這五個層面進行一些2021年中期盤點總結。

在色彩方面，雖然UI是一個相對獨立的設計環境，但其實一直是在跟隨平面的趨勢。

年初潘通發布了2021年的色彩流行趨勢，灰黃色一時間成為了我們追逐的目標。

但是潘通流行色更多是表現了一種當下的社會情緒與遠景追求，并不是用來指導設計的。

(圖片來源：Dribbble)

在UI的色彩方面，我們都記得2020年還是流行的是高飽和色彩路線，而2021年UI色彩一下子就被沖淡了，各種低飽和度色彩的作品更加得到設計師的青睞，似乎也昭示著大家的情緒也從疫情中慢慢穩定了下來，這個世界的確需要設計來對情緒進行即時表達，在5月份Google的全新Material You設計語言中，這種低飽和色彩也被發揮的淋漓盡致。相信低飽和度色彩將在2021下半年會延續發展！

有關Material You信息可以看一下我的另一篇文章《Material You 為你而來！》

(圖片來源：Google Material You)

(圖片來源：Dribbble)

圖形方面，亮點在3D！毫無疑問3D插畫在2021上半年繼續著他的強勁勢頭，2021上半年涌現出了大量優秀的3D風格插畫，并且不止是3D卡通人物，在產品渲染和背景展現上也在醞釀新的力量。特別說明的是，設計工具的高速發展也讓3D門檻不斷降低，如果你只盯著C4D那就真的OUT了，像Blender Spline Stager 這樣的新興輕量級3D工具軟件是需要特別關注的，也許這些新工具是真的能讓你跑出與別人不一樣的賽道。

(值得關注的3款新興3D軟件)

在2D圖形方面，也有突破，除了傳統的矩形、圓角矩形、圓形之外，UI中將會引入到更多的形狀，像多邊形、三角形、不規則形都會大量的出現在UI設計中，UI設計越來越開放和放得開了！

(圖片來源：Google Material You)

隨著去年底蘋果BigSur操作系統的發布，3D圖標著實火了一段時間，出現了不少3D風格圖標。但是后來大家發現在圖標在2D層面其實還是很有創新點的，并且也更加實用，所以我們又看到了磨砂玻璃風格圖標走入了我們的視線。這種采用背板透光設計的風格圖標，看起來清新自然，一經亮相就讓設計師們喜歡起來了！

(圖片來源：Dribbble)

但無論是3D風格還是磨砂玻璃風格圖標設計，從某種意義上說，這些都是擬物化設計的一種新的回歸方式，設計就是一個圈哪！

排版設計，塊狀與字體成為了關鍵詞。先看幾個作品，你發現了什么了嗎？

(圖片來源：Dribbble)

UI設計的排版不止是為了視覺好看，更多是要做信息的分割與歸類，讓信息閱讀快速準確且優雅！從某種方面也就是我們說的用戶體驗。當下仍然是扁平化為主體UI設計語言的時代，陰影設計幾乎已經退出了當下的主流設計，所以在信息的區分上靠的就是留白與文字，所以加粗大字體，卡片留白、形狀色彩塊就在UI排版設計中起到重要的作用。再輔助通過一些微交互動畫，一切都是那么自然絲滑，主次分明！

(UI排版的三個趨勢)

最后我們說說行業趨勢方面，在2021上半年的UI設計作品中，除了常規的移動端APP UI設計之外，我們更多看到了一些針對于其他設備的UI設計，比如說電腦B端應用、車載HMI、數據可視化、交互動畫等這樣的新端趨勢，并且這些作品的數量越來越多了，所以從行業趨勢來講，UI設計師們還是要打開更多的眼界和格局，設計的競爭不止是在水平能力上，更重要的是行業賽道的選擇！關注趨勢尤為重要！

(圖片來源：Dribbble)

(需要關注的四個新端設計趨勢)

用我開頭的那句話，做個結尾吧！ 往往偉大的事業都是從7月開始的，無論你上半年是碩果累累還是顆粒無收，現在開始！一切都還來得及，還來得及！

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

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

往往偉大的事業都是從七月開始的、我用一個設計師的視角，來盤點一下UI/UX行業這半年的設計風格走勢。

以下我從色彩、圖形、圖標、排版、行業趨勢這五個層面進行一些2021年中期盤點總結。

在色彩方面，雖然UI是一個相對獨立的設計環境，但其實一直是在跟隨平面的趨勢。

年初潘通發布了2021年的色彩流行趨勢，灰黃色一時間成為了我們追逐的目標。

但是潘通流行色更多是表現了一種當下的社會情緒與遠景追求，并不是用來指導設計的。

(圖片來源：Dribbble)

在UI的色彩方面，我們都記得2020年還是流行的是高飽和色彩路線，而2021年UI色彩一下子就被沖淡了，各種低飽和度色彩的作品更加得到設計師的青睞，似乎也昭示著大家的情緒也從疫情中慢慢穩定了下來，這個世界的確需要設計來對情緒進行即時表達，在5月份Google的全新Material You設計語言中，這種低飽和色彩也被發揮的淋漓盡致。相信低飽和度色彩將在2021下半年會延續發展！

有關Material You信息可以看一下我的另一篇文章《Material You 為你而來！》

(圖片來源：Google Material You)

(圖片來源：Dribbble)

圖形方面，亮點在3D！毫無疑問3D插畫在2021上半年繼續著他的強勁勢頭，2021上半年涌現出了大量優秀的3D風格插畫，并且不止是3D卡通人物，在產品渲染和背景展現上也在醞釀新的力量。特別說明的是，設計工具的高速發展也讓3D門檻不斷降低，如果你只盯著C4D那就真的OUT了，像Blender Spline Stager 這樣的新興輕量級3D工具軟件是需要特別關注的，也許這些新工具是真的能讓你跑出與別人不一樣的賽道。

(值得關注的3款新興3D軟件)

在2D圖形方面，也有突破，除了傳統的矩形、圓角矩形、圓形之外，UI中將會引入到更多的形狀，像多邊形、三角形、不規則形都會大量的出現在UI設計中，UI設計越來越開放和放得開了！

(圖片來源：Google Material You)

隨著去年底蘋果BigSur操作系統的發布，3D圖標著實火了一段時間，出現了不少3D風格圖標。但是后來大家發現在圖標在2D層面其實還是很有創新點的，并且也更加實用，所以我們又看到了磨砂玻璃風格圖標走入了我們的視線。這種采用背板透光設計的風格圖標，看起來清新自然，一經亮相就讓設計師們喜歡起來了！

(圖片來源：Dribbble)

但無論是3D風格還是磨砂玻璃風格圖標設計，從某種意義上說，這些都是擬物化設計的一種新的回歸方式，設計就是一個圈哪！

排版設計，塊狀與字體成為了關鍵詞。先看幾個作品，你發現了什么了嗎？

(圖片來源：Dribbble)

UI設計的排版不止是為了視覺好看，更多是要做信息的分割與歸類，讓信息閱讀快速準確且優雅！從某種方面也就是我們說的用戶體驗。當下仍然是扁平化為主體UI設計語言的時代，陰影設計幾乎已經退出了當下的主流設計，所以在信息的區分上靠的就是留白與文字，所以加粗大字體，卡片留白、形狀色彩塊就在UI排版設計中起到重要的作用。再輔助通過一些微交互動畫，一切都是那么自然絲滑，主次分明！

(UI排版的三個趨勢)

最后我們說說行業趨勢方面，在2021上半年的UI設計作品中，除了常規的移動端APP UI設計之外，我們更多看到了一些針對于其他設備的UI設計，比如說電腦B端應用、車載HMI、數據可視化、交互動畫等這樣的新端趨勢，并且這些作品的數量越來越多了，所以從行業趨勢來講，UI設計師們還是要打開更多的眼界和格局，設計的競爭不止是在水平能力上，更重要的是行業賽道的選擇！關注趨勢尤為重要！

(圖片來源：Dribbble)

(需要關注的四個新端設計趨勢)

用我開頭的那句話，做個結尾吧！ 往往偉大的事業都是從7月開始的，無論你上半年是碩果累累還是顆粒無收，現在開始！一切都還來得及，還來得及！

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

文章來源：站酷  作者：殘酷de樂章

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

獲取元素的屬性分為兩種類型：

1-獲取元素常見的屬性（class,id,type,value…）

2-獲取自定義的元素的屬性（data-value,data-mess…）

獲取元素的屬性，設置元素的屬性：

1-原生JS

 設置屬性 .setAttribute("屬性","值") 獲取屬性 .getAttribute("屬性") 


    

        1
    

    

        2
    

2-jquery

 設置屬性 .attr("屬性","值") 獲取屬性 .attr("屬性") 


    

        1
    

    

        2
    

下面通過一個例子介紹一下，如何獲取和設置元素的屬性；

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>獲取元素屬性</title> <style> * { margin:0; padding:0; list-style:none; } </style> </head> <body> <div id="mayouchen"> <div style="background:red;height:20px">元素屬性獲取</div> <div class="test1"> <p id="demo">點擊按鈕來設置按鈕的 type,id,class 屬性。</p> <input value="OK" class="mayouchen"> <button onclick="mayouchen1()">獲取元素屬性</button> </div> <div style="background:green;height:20px">自定義屬性獲取</div> <div class="test2"> <div id="tree" data-leaves="47" data-plant-height="2.4m">我是被獲取的元素</div> <button onclick="mayouchen2()">獲取自定義元素屬性</button> </div> </div> <script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script> <script> $(function() { }); function mayouchen1() { document.getElementsByTagName("INPUT")[0].setAttribute("type", "button"); document.getElementsByTagName("INPUT")[0].setAttribute("class", "mayouchen"); document.getElementsByTagName("INPUT")[0].setAttribute("id", "test1"); document.getElementsByTagName("INPUT")[0].getAttribute("id"); document.getElementsByTagName("INPUT")[0].getAttribute("class"); console.log("id=====" + document.getElementsByTagName("INPUT")[0].getAttribute("id")); console.log("class=====" + document.getElementsByTagName("INPUT")[0].getAttribute("class")); } function mayouchen2() { var tree = document.getElementById("tree"); //getAttribute()取值屬性 console.log("data-leaves======" + tree.getAttribute("data-leaves")); console.log("data-plant-height===============" + tree.getAttribute("data-plant-height")); //setAttribute()賦值屬性 tree.setAttribute("data-come", "49"); //data-前綴屬性可以在JS中通過dataset取值，更加方便 console.log("通過dataset獲得data-leaves====" + tree.dataset.leaves); console.log("通過dataset獲得data-plant-height====" + tree.dataset.plantHeight); //注意在這里連字符的訪問時，屬性要寫成駝峰形式 } </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
    

上面有兩個test, test1是測試元素常見屬性，test2是測試元素自定義屬性

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

轉自：csdn
分享此文一切功德，皆悉回向給文章原作者及眾讀者.

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

網頁使用iframe嵌入網頁時，有時候需要動態處理src的值，而不是寫死的，所以我們需要知道如何給iframe src賦值，通常是使用js或jquery來實現。本文介紹js和jquery給iframe src賦值的3種方法。

方法一

這是最常用的js給iframe src賦值的方法，代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>iframe src賦值的方法</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <iframe frameborder="1" id="barframe" ></iframe> </body> </html> <script type="text/javascript"> document.getElementById("barframe").src = "http://localhost/EXAMPLE/iframe/example.html"; </script>

 

方法二

通過js創建一個iframe元素，然后再給該元素src賦值，代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>iframe src賦值的方法</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> </body> </html> <script type="text/javascript"> var myIframe = document.createElement('iframe');
myIframe.src = 'http://localhost/EXAMPLE/iframe/example.html';
document.body.appendChild(myIframe); </script>

 

最后一句 document.body.appendChild(myIframe); 是表示在 body 里添加剛定義的 myIframe 這個控件。

我們也可以把該iframe添加到某一個div容器里，寫法如下：document.getElementById("div1").appendChild(myIframe); ， div1是該div容器的id 。

方法三

上面兩個方法都是用js來實現的，其實我們也可以用jquery來實現，代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>iframe src賦值的方法</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://www.webkaka.com/script/jquery-1.4.2.min.js" type="text/javascript"></script> <script> $(document).ready(function() {
  $('#barframe').attr('src', 'http://localhost/EXAMPLE/iframe/example.html');
}); </script> </head> <body> <iframe frameborder="1" id="barframe"></iframe> </body> </html>

特別注意，上述jquery代碼不能缺少 $(document).ready(); ，否則iframe src賦值失敗，除非把jquery的代碼放在 <iframe ... 的html代碼后面。此外，還需要在 <head></head> 里引用 jquery.js 文件

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

轉自：博客園
分享此文一切功德，皆悉回向給文章原作者及眾讀者.

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

2021年6月5日~6日，人人都是產品經理舉辦的【2021中國B端產品經理大會·上海站】完美落幕。攜程旅游搜索產品負責人@毛新年 進行了精彩的內容分享，他分享的主題是《聚焦B端產品價值——B端產品的落地實踐指南》。

一、B端產品核心價值解析

他首先將B端產品主要分為企業自身業務對應的B端產品和互聯網業務對應的B端產品。

企業自身業務對應的B端產品服務于企業自己，產品形態多為ERP、CRM等，產品提供者是IBM、用友或者企業自研等；

互聯網業務對應的B端產品服務對象是B端商家形成的商家生態，產品形態如阿里/美團商家系統等，產品提供者則是阿里/美團等互聯網平臺。

企業是市場競爭的主體，B端產品核心目標是為企業降本增效。

二、從企業管理到業務執行，B端產品的價值體現

那么B端產品如何實現助力企業成本降低呢？

針對B端企業工作的重復、繁雜、專業特點，B端產品在產品設計上遵循以下四個邏輯可為降低企業成本發揮自己的價值：

• 人機替代：需要人做的工作盡量少，對應產品功能就要求工作盡量能夠自動化，實現人機替代；
• 智能化：如果工作確實不能系統替代，那么應該使系統盡量降低對人專業知識的依賴，對應產品功能要求系統高度智能化，小白也能做；
• 自主學習：對于小白不會的工作，系統應提供在線指導和交互學習，對應的產品功能要求系統提供便捷自助學習的能力，小白非常方便自我學習來完成工作；
• 無障礙：當有疑似錯誤操作時，系統能智能提示并容錯，對應的產品功能為自檢&容錯

除了降低成本之外，B端產品還能在提升企業效益方面做出自己的貢獻，針對B端業務管理對象多，業務蘊含的價值大的特點，在產品設計遵循如下這三個邏輯，可以充分挖掘大數據價值，提升效益：

• 規范化：將語義相同的各種說法規范為統一說法，有助于大數據的統計、歸一、計算的一致性，有助于挖掘出業務內涵價值，這要求建立業務規范知識庫；
• 標準化：B端企業在標準化業務上往往得心應手，將非標業務標準化，給平臺和商家提供增量業務空間，這就要求B端產品提供業務標準化能力，這要求建立業務標準知識庫；
• 平臺化：將工作成果平臺化共享，平臺化一方面減少商家工作量，另一方面提升了數據準確性，提升平臺和商家經營績效，這就要求建立業務規格知識庫。

接下來用典型案例來展示上述產品邏輯如何在實踐中落地。

以電商平臺商品發布業務為例，店小二發布一款商品要經歷以下步驟，每個步驟的難度不一樣。

首先要選擇商品所屬目錄，接著要填寫商品屬性規格，這是工作難度最大的，也是工作量最大的。還有填寫物流信息、填寫服務信息、上傳商品主圖、上傳商品詳情圖等一系列操作。

這是前端的業務流程，而從產品的角度，可以分成六大模塊。

• 目錄選擇步驟對應的產品后臺能力為目錄智能預測。
• 屬性填寫需要產品后臺規范知識庫、標準知識庫、產品信息庫，實現各類屬性的填寫。
• 物流填寫對應的是地址智能提示，畢竟人不能記住國家地理區劃，這就需要物流地址的智能提示功能。
• 服務填寫對應的是標準服務項目庫。以前服務不是標準化的，但是作為平臺來說需要將服務項目標準化。
• 主圖和詳情的上傳對應的是圖片智能檢測，看看圖片是否符合國家的合規規范和電商平臺的管理規范。
• 后端大數據智能化和各類知識庫支撐商品發布業務的準確、快速、低成本的B端商家訴求。

從商品發布來看如何實現降本增效？

1）重復繁雜工作自動化

每天的商品上新，營銷活動都需要大量修圖摳圖工作，電商平臺和商家每年耗費大量美工投入到圖片制作。

2017年阿里雙11多達4億張圖片，如果靠設計師人工去設計制作，即使是業務熟練的設計師，也需要100位設計師不眠不休工作300年。所以要用人機替代的方式，利用系統來完成上述重復繁雜的工作。這種通過深度學習海量素材，自動生成各種圖片，不僅大大減少了人的工作量，而且系統設計的圖片點擊率增長一倍多，除了電商平臺自己使用外，還直接提供給商家使用，這樣大大降低了商家小二的工作量，為商家節約了大量人工成本。另外，平臺每天需要審核的圖片也有很多，通過系統自動檢測圖片是否涉黃涉敏、圖文不符、違反廣告法，違反電商平臺的運營規范等，大大減少人審核工作量，也為商家降低了大量用人需求，節約了不少成本。

2）專業工作智能化和便捷自主學習

B端產品對商家小二專業知識要求高，商家的用人成本高。

比如在類目選擇環節，需要小二熟悉平臺類目體系。

在屬性填寫環節，需要小二熟悉商品知識。

在圖片制作環節，需要小二熟悉國家電商法律法規以及平臺運營規范。

所以，就需要將專業知識內嵌的產品系統，減少對商家小二知識的依賴，這些要求在產品能力上通過智能化技術進行支撐。

有了智能化支持，在發布商品的時候，小二只需要填寫商品標題或者幾個關鍵詞，系統就會提醒你它可能屬于什么類目，讓你去做選擇。

屬性的填寫也是如此，系統將可能的屬性值羅列出來，讓你做選擇就行。

這樣即使不是一個資深的采購也能明白，將難度降低到中級甚至初級。

如果有些小二對于平臺規則不熟悉，系統會在頁面給出指引或者視頻圖文在線交互學習，引導小二正確操作。

比如小二不知道生產許可證編號是什么，系統會給出相關提示和案例，小二看到案例就會一目了然。為什么電商平臺要做到如此細致，因為商家太多了，比如阿里、拼多多、美團等平臺的商家數量高達千萬，不可能商家有疑問就找平臺客服。通過便捷式學習自助式解決，只要中初級人員就可以完成工作，降低了商家的用人成本，同時也減少了平臺客服的用工人數，降低了電商平臺企業的成本。

3）系統自檢和容錯

在智能化或在線學習前提下，小二仍舊可能發生錯誤操作，或者利益驅使下故意犯錯，或者系統知識不完備，有時候商家是正確操作，但是系統認為是錯誤的。在這樣的情況下，系統要具備實時自檢能力，根據事先內嵌的專業知識，實時校驗并提示商家實時糾錯。如果商家堅持，系統具備容錯能力，業務依舊可以進入后續環節，而不是在線等待。

比如在填寫冰箱的體積時，系統會內設一個最大最小的體積范圍，但是商家的冰箱超出了最大體積，在商家小二進行屬性填寫的時候，系統會根據內嵌的物流體積范圍，校驗小二填寫的體積，超過范圍實時提示商家糾正，如果商家堅持，還可以繼續填寫，但是系統會記錄這個異常數據，平臺客服會與商家小二進行確認，最后更新內嵌知識。

小結：

人口紅利消失，增量業務拓展難度加大的時代背景下，降成本也是提升企業競爭力的有效手段。針對B端業務的重復、繁雜、專業的業務特點，我們B端產品經理應該將B端系統設計成足夠自動化、智能化實現人機替代，并設計友好無縫的交互學習素材實現低專業知識依賴，幫助企業實現降成本的目標。

4）規范化

每個商家對商品的理解可能不同的，所以說法可能就不一樣。比如同一罐奶粉，它適用于一到三歲的孩子，也可以寫作12到36個月。相同含義項目多且雜，商家不知道該選誰、用哪種說法，因此大數據也無法歸一統計，精準分析。這就要求知識盡量規范化，將含義相同表述不同的業務知識規范化，形成業務規范知識庫。

規范化提煉后，盡量讓商家小二選擇屬性值，減少自由填寫錯誤。大數據根據規范之后的知識進行統計分析，提供給商家的數據更精準，這樣對于商家決策來說幫助更大。

而這些知識是從哪里來的呢？從商品說明書，客服、評價、調研中采集而來，屬性值通過歷史數據和商家小二的在線提報補充到知識庫，內嵌于系統中。

5）標準化

隨著電商發展，各種非標商品急需在線上獲得商業機會，同時消費者對服務的要求越來越高，所以，將非標商品或服務標準化，擴大商家的商業機會，同時有助于提供統一的交互語言和商品定價。其中包括服務的標準化，比如保險、物流、售后等，能夠提供這些服務的商家會獲得更多的流量和更高的轉化，也會倒逼其他商家進行服務升級。

將非標商品標準化，例如生鮮水果，通過建立標準，提供統一定價依據，有助于優質商品實現優質優價，同時避免商家描述不一致帶來的客訴。

6）平臺化

平臺上有大量商家做完全相同的工作，那么能否在商家間共享工作結果，節約社會資源，例如有上百個商家賣同樣的蘋果手機，這些商家發布商品都需要填寫商品的參數信息（多達上百項），將這些相同的工作進行平臺化后能讓所有商家共享。

將商品的描述分為產品信息和銷售信息，其中產品信息是相同的，所有商家共享；銷售信息每個商家都不一樣，自己做維護。

建立這樣一個產品信息庫之后，商家只要在發布商品時檢索產品信息，其他信息全部由產品信息庫提供，無需商家輸入，數據一致性有了保障。

例如手機只需要填寫品牌、系列、顏色、內存，其他公共信息可被自動調出來供所有商家使用。

包括快消品，以濕紙巾為例，只要檢索品牌、序列、規格，就能其他信息調出來。非標品的服飾也可以這么做，提供品牌和貨號就可以調出其他信息。

小結：

馬老師曾經說過：“數據就是互聯網時代的石油”，挖掘業務蘊含的數據價值，可以為企業提升經營效益，在B端產品系統中，通過規范化、標準化和平臺化可以提升數據的準確性和一致性，有利于發揮大數據價值。

三、B端產品實施落地的難點剖析

B端產品在實施落地中主要存在兩大難點。

1. 企業內組織問題

很多時候，老板說要做一項工作，產品經理可以給出方案，推動研發并實施上線，但是產品上線后缺乏運營，最終導致產品難以達到預期成效。這主要企業內分工不清晰，有產品無運營，有系統無人背負運營或者經營指標考核，要求產品經理推動無運營無考核不立項進行產品設計，規劃，更別說研發了。

B端產品想要降本增效，但是很多人擔心會因此丟了工作。所以，他們有所顧慮讓降本增效難以推進。因此，在存量業務中找增量業務，把部分員工分流到新業務中去。例如，針對電商業務，我們可以不僅僅只做零售，還可以做批發；不單單做線上，還可以做線下，這樣對員工的技能也是很大的提升。

2. 企業間協作問題

現在企業合并或并購已經非常常見了，弱勢企業B端系統往往被要求對齊到強勢企業，改造過程困難也比較大。

尤其是文化習慣制度方面的差異，這些差異往往也體現在B端產品上。

所以，在企業文化融合方面要建立溝通共識。文化習慣制度靈活把握尺度，非原則問題的差異，可以求同存異，逐步對齊，原則問題需要一步對齊。

除了文化方面，在業務方面，不同公司也不一樣，有成熟的業務也有新業務。這種情形最好是互補，而不是一味用強勢企業取代被并購/合并方，否則不僅可能造成人員的大幅動蕩，而且可能將被收購企業的成熟業務破壞掉。例如某線上的電商平臺，并購了線下的企業，在進行商品融合的時候，給原來線下的企業新增一個線上的渠道。

以賣葡萄酒為例，線下門店是按照國家產區進行分類，比如法國、意大利、澳大利亞；而線上是按葡萄酒類型分類的，比如起泡酒、干紅等。

為什么會出現這樣的差異呢？因為電商起初的進口酒業務是商家C模式，傭金扣點都是相同的，但是線下門店是自營模式經營，來自不同國家進口葡萄酒關稅不同，因此分類體系也不同。

在融合方案的時候，不能只是簡單將線下知識廢棄掉，而是合理地吸收。

因此融合之后，線上的商品主數據多了類別和產地，線下的商品也可以在線上進行銷售。

小結：

B端產品核心價值為企業降本增效。B產品經理是企業降本增效的“引擎”，主導系統架構設計，能否按照降本增效背后本質的產品邏輯，設計出具備人機替代、智能化、規范化、標準化和平臺化系統功能決定降本增效能否實現。同時在業務流程中，我們需要設計好交互學習環節來降低工作人員的專業知識的學習成本，同時建立糾錯容錯能力確保業務順利快速展開。

針對B端產品落地實施難點，產品經理除了需要提升自身專業能力外，也需要關注企業內的組織問題和企業間的協作問題，前者主要通過明確職責分工和尋找增量業務來化解，后者需要掌握融合的原則和抓住業務差異背后的本質原因，對癥下藥。這背后需要我們產品經理具有深刻的業務洞察力，可以說思考力深度決定了產品經理職業天花板的高度。

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

文章來源：人人都是產品經理  作者：人人都是產品經理

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

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