图表作为一个使用频率不高却很重要的组件，让设计者们操碎了心。看着自己设计的图表，总觉得有哪里不好，但又说不上来。本文作者总结了快速提升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. 混合与拓展性

根据数据的属性，图表是可以进行混搭与拓展使用的。混搭是指图表和图表可以拼搭使用，例如折线图与柱状图经常合体使用。拓展性是指根据基础图表可以拓展出一系列个性化图标。例如堆叠柱状图是由基础柱状图衍生出来的。

三、开源图表库

目前开源的图标库以下几种：

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 添加缩略滑块

给图表添加缩略滑块，可以通过拖拽滑块了查看某段时间范围的数据。滑块拉拽的越大，可以看到的时间范围越大，但注意，会有极限值。

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.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的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.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的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.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的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.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的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.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务