数据成为了日常工作的一大重要角色，越来越多的公司以数据驱动产品进行迭代。但令人困惑的是可视化图表无处不矮，但却给大家带来了误导。作者分享了一些简单的思路与方法，以此来改善这些问题，希望对你有所帮助。

越来越多的公司以数据驱动产品进行迭代，从中我们能看出数据的重要性。

日常工作中，无论是汇报还是设计，都离不开图表的使用。但令人困惑的可视化图表无处不在，往往给人带来误导性，通过遵循下面这些简单的思路和方法可以有效改善这些问题。

一、选择正确的图表类型

选择错误的图表类型，或默认使用最常见的类型，可能会混淆用户对数据产生误解。

一组数据可以有多种表示方式，具体类型取决于用户希望看到的内容。

二、根据正负值确定方向

当数据中出现正负值时，要先确定基线的位置，再确定数据位置，将正值分布在基线上侧（X轴）或右侧（Y轴），负值分布在下侧（X轴）或左侧（Y轴）。

避免在基线的同一侧同时添加正值和负值，造成用户对图表信息理解错误。

三、始终从零开始绘制条形图

单看左侧的条形图，能发现B的值比D的值要多3倍以上，但在右侧从零开始的条形图中，实际差异要小得多。从零开始可确保用户获得更准确的数据展示。

四、折线图使用自适应Y轴

对折线图来说，如果始终将Y轴的比例限制为从零开始，一旦数据波动幅度很小，那整个折线图会看起来很平坦，效果不明显。

折线图主要用来表现趋势，根据给定时间的数据调整比例，并保持折线区域能占到Y轴范围的三分之二。

五、使用折线图时考虑时间间隔

折线图是由一条条小线段连接组成，这些线段展示了在短时间内数据是如何变化的。当时间间隔很大或数据更新不频繁时，就要慎重考虑是否使用折线图。

例如想表示年收入，左侧的两个折线图样式都不太合适，每个月的收入是固定的数字，而折线图展现的数据更像是收入的变化，相反右侧的条形图更适合来展示每月具体的收入。

六、不要使用平滑的折线

平滑的折线图可能看着很舒服，但它们歪曲了背后的实际数据，而且过粗的线条掩盖了真正的节点。

七、谨慎使用双轴折线图

当两组数据出现X轴代表的信息相同但Y轴不同时，为节省空间我们可能会考虑用双轴图。

但大部分双轴图难以阅读，只是感觉图表上有很多数据，但远远没有单个图表展示的清晰。

八、限制饼图的切片数量

饼图是最受欢迎但经常被误用的图表之一。在使用饼图时，首先要注意切片的数量最好保持在5-7片。

如果还有很多占比很小的切片，可以将这些全部归到“其他”切片中。

九、直接在图表上标注

如果没有正确的标注，无论图表设计的多好看都没有意义。

直接在图表上标注数据或信息对使用者来说更直观，更节省时间和精力。

十、不要在切片上标注

将数值放在切片上虽然很直观，但可能会导致很多问题，例如左侧饼图数值的可读性问题、切片太薄无法添加数值等，对比来看，右侧饼图添加标注的方式更合适。

现代人的生活离不开应用程序，我们的手机中有着各种各样的app帮我们处理各种琐事。各大互联网公司开发多种应用商店，努力使我们的生活变得有趣，但要想提高整体的用户体验，还需要注意五点，不然再好的app也会让用户放弃使用。

1.禁止使用大段的功能介绍

我们必须要提示一下：如果一个应用程序要在手机屏幕上发挥作用——必须简单。这个应用需要使用冗长的功能介绍，才能让用户熟悉使用起来，那很可能是开发人员在这个版本中设置太多功能。用户并不介意多次更新程序，适应新版本，但他们也不可能为了使用程序而阅读长如圣经般的介绍。

2.牢记用户需求

如果想要急于求成，跳过用户调研，上线新的应用，那么失败的概率会大大增加。大多数应用开发团队都容易犯这样的错误，只拿到了用户发送给支持团队的数据。通过分析数据，就能迅速确定用户所需的功能，使用缺陷等，但是，总的来说，联系支持团队的用户是那些产生挫败感的人；那么99%（或更多）的用户从来没有和支持部门谈过？难道你不愿意让他们一直满意，而是花费时间，只让使用支持功能的1%用户满意？

即使你认为自己了解用户需求，也需要与他们进行沟通。

3.使用屏幕技术

当人们花费了近万元买了一部智能手机时，他们希望能使用手机上的所有功能。所以制作这款手机时没有任何借口在视觉内容上偷工减料（或忽视任何技术能力）。这就是用户花钱的原因，要想提高用户体验，就需要满足用户期望。

4.停用费时的设置向导

设置向导的本意是为用户提供更好的内容，更能让用户获取自己想要的。为了优化用户体验可以让用户填写一些内容，但并不意味着暴露全部隐私。最好在需要时索取，而非提前取得全部数据。

5.减少通知次

每个软件都想要发送通知，但是每一个通知都是必要的吗？每隔两秒钟就有一些应用告知用户一些无用消息，比如谁谁谁又发了微博，谁谁谁上线了，又或者谁谁谁开始直播了，可以根据用户的兴趣选取推送而不是一股脑全部告知用户，所以请尽量减少的通知消息吧！

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

数据展示有哪些？

01.徽标

是收纳消息数量的样式，一般出现在图标或者头像右上角。

02.标签

数据展示里面抽取出来的共性特征，将它们转化为标签。标签样式有线框、带不透明底或者面性。

03.走马灯

相当于c端的轮播图

04.文字提示

可以出现在鼠标悬浮按钮时候的行为解释说明，也可以是文案或者导航图标的解释说明。鼠标移入时候出现移出时候消失。

05.气泡卡片

比起文字提示可以承载更多内容，相对弹窗，气泡卡片操作更轻盈。

06.标签页/选项卡

标签页可以帮助用户在一个页面内快速切换不同类型内容，提升单个页面整体的扩展性。标签本质上就是内容区的导航。

07.折叠面板

折叠面板可以更好的收纳内容区域，提高页面利用率。可以和表格结合使用，折叠表格部分详情内容，使得纵向空间更节约。

08.表格

表格是数据展示的重要内容。当有大量结构化数据需要展示时或者需要对数据进行排序、搜索分页时可以用表格进行展现。

当笔记本过小，表格展示不全时候，可以固定首尾重要信息进行滚动。

带排序的表头，可对数量或者金额进行排序。

带分组的表格，建议带边框并且用色块区分表头和内容。

单元格可编辑

批量选中时只会选中当前页，因为分页还没加载出来，为了给用户正确的引导，可以给上提示性文案，例如“已选中XX项内容”。

如果当前页批量选中的数据量不满足要求，可以改变分页器，增加当前页数据量，从而增加选项。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

前言

“直播”作为一个大热领域，用户规模早在 2020 年就突破了 5 亿大关，在“直播+”的模式下，电商、教育甚至是医美，都能在直播领域下找到新赛道，并产生持续性获客。但就是这样一个核心领域，具体要怎么分析复盘，却鲜少看到系统化的文章。本文主要是结合我近期参与产品直播项目的思考，总结了自己的一套直播复盘方法论和大家分享。

为什么要做直播复盘？

虽然“直播+”模式已成为行业趋势，但在产品接入直播模块而产生的付费效益又不明显时，其存在的意义和价值仍时常被挑战，因此首要的就是验证其价值；

同时，新领域缺乏可复用的方法论，只有不断探索、优化、沉淀才能促进其健康化生长；

最后，在产品范围下的直播领域，定向吸引的还是产品用户为主，持续挖掘探索直播能为产品开辟的新赛道，为产品带来拉新，是“直播+”模式对于产品的直接价值体现。

直播复盘怎么做？

直播具备快节奏性和强竞争性，在兼顾快速复盘的同时，还需要考虑阶段性的整体化的对直播数据进行监控，因此需要将直播复盘分为快速复盘和阶段复盘 2 个大方向。

1. 快速复盘

在直播结束当天或隔天对昨日数据进行快速复盘，此时重点关注单期直播下的直观数据表现和用户反馈。目的是获得沉淀当天直播的经验并快速应用至后续直播中，是一个不断 PDCA 的过程。

在复盘维度上，可以分为数据侧和用户侧：

数据侧中我们重点聚焦本期的数据表现，同时横向对比其他直播期，去明确本期的数据表现

1）横向对比时，需要将直播关注的 3 大核心数据（总人数、最高在线人数、评论人数、在线时长均值）与其他期对比，明确该期直播的“优劣”。

当期直播核心数据

2）聚焦本期时，重点关注直播数据的整体在线人数变化趋势，定位到最高在线点，和直播内容拟合，能够帮助我们定位直播的“高光点”。

用户侧中则更关注主播在播、用户在听和答的过程，包含：

• 直播过程中，用户情绪、反馈异常的节点（如消极发言等），定位用户可能存在的痛点。
• 固定同学作为“直播观众”时，察觉到的异常问题（如信息衔接不自然等），及时复盘。
• 在直播间的互动评论中，呼声最高的内容，可以作为后续直播可以“返场”的内容，纳入直播内容需求池中。

2. 阶段复盘

在累计多场直播后，此时最需要的就是阶段性的复盘，从宏观角度对多期直播进行收敛分析，能够帮助我们明确直播对于产品的核心价值，并定位核心用户圈层、吸引点及直播应该要有的“节奏”。

在阶段复盘中，除了数据侧、用户侧外，我们还需要关注市场侧：

数据侧—不同于快速复盘，数据侧我们关注整体宏观角度上直播对产品的价值，以及直播整体的数据表现，热点分布等

1）从直播对产品价值定位来说，在未探索付费的情况下，直播能为产品做的就是吸引新用户，增加用户活跃、延长用户在产品内停留的时长上。

价值定位时关注的数据范围

在明确价值后，就应该明确后续要如何把直播做的更好，这里数据上可以分为 2 个大的方向，一是热点分析，二是直播节奏分析。

2）热点分析上，需要从单期、分类、词项拆解上看。首先，单期直播就是简单地对单期直播数据进行排序，找到“好”的直播提炼其特征性；其次，分类分析上关注各类直播数据间的横向对比，能从分类数据对比上，看出哪一类直播更吸引用户；最后，通过对每期直播的标题进行词项拆解，筛除掉无意义的词项，再乘以对应期直播的人数，对每个出现 2 次及以上的词项数据取出其对应的单期直播人数均值，即可定位到用户最关注、最能吸引用户的核心关键词。

热点分析

3）直播节奏分析上，得益于阶段性复盘的庞大数据量，我们可以聚类出多期直播聚类下的直播趋势线，在趋势线上，亦关注 3 大核心点 “拉新、增长、流失”。

a. 用户进入直播的高峰期（即新增高峰），可用于定位直播亮点，并对应布局以留住用户

用户进入直播节奏分析

b. 通过直播数据排序后的高于中位数直播、低于中位数直播的 2 种直播数据走势的对比，我们能够看出好的直播应有的数据走势应该是什么样的。以我这次分析的直播为例，能够直观看出，“差”的直播在增长黄金期都“爬”的很慢，而在黄金期后直播数据逐渐平缓，“差”的直播数据就成了定局。因此要做的就是在增长黄金期，去尽量促进增长。

用户流入流出关系分析

c. 那么在增长黄金期，从产品策略来看，要做的是留住用户？还是尽量去拉新？从数据上，我们有 2 种方式判别，分别是相关性分析和假设分析。在相关性分析中，将新增人数/流失率对标最高在线人数，以数据模型分析其相关性，从相关系数来看哪个指标与最高在线人数相关性最高，即影响最大；在假设分析中，我们可以将“低于中位数”的直播数据中的新增人数/流失率分别对标“高于中位数”直播的数据，其他保持不变，看哪种情况下，最高在线人数是更高，数据是更好的，就可以定位出更应该在哪块发力。

用户侧—要明确直播受众及用户圈层，并针对这部分受众的观看体验，进行服务体验走查，更能够帮我们明确后续业务重心、范围及宣传模式。

在用户圈层上，我们对观众数据清洗，从年龄、性别、地域、渠道等各项维度去定位观众的特征。同时，考虑到直播本身是以产品为载体，其用户圈层基本上与产品本身重合，但会存在一定差异性。因此，此处可以结合 TGI 分析，可以定位到直播用户圈层相较于产品来说的差异点，从而更针对受众进行直播内容调整。

用户圈层分析

同时，直播本身因其特殊性质，也可类比至服务体验设计的思维，因此在用户侧分析时，从直播前-中-后 3 个大环节上分析用户行为、需求、痛点、快点，从而定位到各个环节直播优化的机会点，推进优化。

直播-体验地图

市场侧—在市场分析时，我们不仅需要关注那些在直播领域做的好的同类竞品，同时也要去多分析在受众群体中，最近的热门话题是什么，有助于后续在宣发时引出直播核心话题，也能够带领我们思考直播的新赛道，以协助产品拓宽其用户圈层。

小结

直播作为互联网新赛道，直播+的模式可用于产品宣发、获客、促活等各个方面，挑战与机遇并存。但正因为是新赛道，也相对缺乏体系化的方法论。本文主要是分享我在工作中沉淀下来的直播复盘方法论，也欢迎大家有什么见解或者想法也可以与我分享。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

在我们了解JSONP 和 CORS 之前我们先明确一下：

我们为什么要使用cors和jsonp呢？

实际上，cors和jsonp都是用于解决跨域问题，当两个页面的协议、域名、端口号中有一个不一致时就存在了跨域，一旦出现跨域，浏览器发送跨域请求后，请求回来的数据都会被浏览器所拦截，准备一张图给大家看看：

核心点：如何实现跨域数据请求？(⭐⭐⭐⭐⭐)

现下实现跨域数据请求，最主要的两种解决方案分别是 JSONP 和 CORS 。

    


        


            


                


                

            

            


                

                    <!DOCTYPE html>
                

            

        

        


            


                


                

            

            


                

                    <html lang="en">
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    <head>
                

            

        

        


            


                


                

            

            


                

                    <meta charset="UTF-8">
                

            

        

        


            


                


                

            

            


                

                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                

            

        

        


            


                


                

            

            


                

                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                

            

        

        


            


                


                

            

            


                

                    <title>Document</title>
                

            

        

        


            


                


                

            

            


                

                    <script src="jquery.min.js"></script>
                

            

        

        


            


                


                

            

            


                

                    </head>
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    <body>
                

            

        

        


            


                


                

            

            


                

                    <button class="get">get请求</button>
                

            

        

        


            


                


                

            

            


                

                    <button class="post">post请求</button>
                

            

        

        


            


                


                

            

            


                

                    <script>
                

            

        

        


            


                


                

            

            


                

                    $('.get').on('click', function() {
                

            

        

        


            


                


                

            

            


                

                    $.ajax({
                

            

        

        


            


                


                

            

            


                

                    method: 'get',
                

            

        

        


            


                


                

            

            


                

                    url: 'http://127.0.0.1/api/get?name=hua&age=18',
                

            

        

        


            


                


                

            

            


                

                    success: function(res) {
                

            

        

        


            


                


                

            

            


                

                    console.log(res);
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    })
                

            

        

        


            


                


                

            

            


                

                    })
                

            

        

        


            


                


                

            

            


                

                    $('.post').on('click', function() {
                

            

        

        


            


                


                

            

            


                

                    $.ajax({
                

            

        

        


            


                


                

            

            


                

                    method: 'post',
                

            

        

        


            


                


                

            

            


                

                    url: 'http://127.0.0.1/api/post',
                

            

        

        


            


                


                

            

            


                

                    data: {
                

            

        

        


            


                


                

            

            


                

                    name: 'lajitong',
                

            

        

        


            


                


                

            

            


                

                    age: '111'
                

            

        

        


            


                


                

            

            


                

                    },
                

            

        

        


            


                


                

            

            


                

                    success: function(res) {
                

            

        

        


            


                


                

            

            


                

                    console.log(res);
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    })
                

            

        

        


            


                


                

            

            


                

                    })
                

            

        

        


            


                


                

            

            


                

                    </script>
                

            

        

        


            


                


                

            

            


                

                    </body>
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    </html>
                

            

        

    

    


        


            


                


                

            

            


                

                    // 导入 express 模块
                

            

        

        


            


                


                

            

            


                

                    const express = require('express')
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    // 创建 express 的服务器实例
                

            

        

        


            


                


                

            

            


                

                    const app = express()
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    // 导入中间件
                

            

        

        


            


                


                

            

            


                

                    const cors = require('cors')
                

            

        

        


            


                


                

            

            


                

                    // 配置中间件
                

            

        

        


            


                


                

            

            


                

                    app.use(cors())
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    // 配置解析表单数据的中间件
                

            

        

        


            


                


                

            

            


                

                    app.use(express.urlencoded({ extended: false }))
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    // 导入路由模块（被单独分离后导入）
                

            

        

        


            


                


                

            

            


                

                    const router = require('./apiRouter')
                

            

        

        


            


                


                

            

            


                

                    // 把路由模块，注册到 app 上
                

            

        

        


            


                


                

            

            


                

                    app.use('/api', router)
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    // 调用 app.listen 方法，指定端口号并启动 web 服务器
                

            

        

        


            


                


                

            

            


                

                    app.listen(80, () => {
                

            

        

        


            


                


                

            

            


                

                    console.log('http://127.0.0.1')
                

            

        

        


            


                


                

            

            


                

                    })
                

            

        

    

    


        


            


                


                

            

            


                

                    const express = require('express');
                

            

        

        


            


                


                

            

            


                

                    const router = express.Router();
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    router.get('/get', (req, res) => {
                

            

        

        


            


                


                

            

            


                

                    const query = req.query;
                

            

        

        


            


                


                

            

            


                

                    res.send({
                

            

        

        


            


                


                

            

            


                

                    status: 0,
                

            

        

        


            


                


                

            

            


                

                    msg: 'get请求成功',
                

            

        

        


            


                


                

            

            


                

                    data: query
                

            

        

        


            


                


                

            

            


                

                    })
                

            

        

        


            


                


                

            

            


                

                    })
                

            

        

        


            


                


                

            

            


                

                    router.post('/post', (req, res) => {
                

            

        

        


            


                


                

            

            


                

                    // const body = req.body;  //获取客户端请求的数据
                

            

        

        


            


                


                

            

            


                

                    res.send({
                

            

        

        


            


                


                

            

            


                

                    status: 0,
                

            

        

        


            


                


                

            

            


                

                    msg: 'post请求成功',
                

            

        

        


            


                


                

            

            


                

                    data: req.body
                

            

        

        


            


                


                

            

            


                

                    })
                

            

        

        


            


                


                

            

            


                

                    })
                

            

        

        


            


                


                

            

            


                

                    module.exports = router;
                

            

        

    

    


        


            


                


                

            

            


                

                    //导入express模块
                

            

        

        


            


                


                

            

            


                

                    const express = require('express');
                

            

        

        


            


                


                

            

            


                

                    //创建express服务器实例
                

            

        

        


            


                


                

            

            


                

                    const app = express();
                

            

        

        


            


                


                

            

            


                

                    //挂载路由
                

            

        

        


            


                


                

            

            


                

                    app.get('/jsonp', (req, res) => {
                

            

        

        


            


                


                

            

            


                

                    // 通过解构req.query客户端通过查询字符串的形式发送到客户端的参数fn
                

            

        

        


            


                


                

            

            


                

                    const { callback } = req.query
                

            

        

        


            


                


                

            

            


                

                    //在服务器端定义一个obj对象
                

            

        

        


            


                


                

            

            


                

                    const obj = {
                

            

        

        


            


                


                

            

            


                

                    uname: 'zjj',
                

            

        

        


            


                


                

            

            


                

                    age: '18'
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    //obj对象转为res.send可处理的字符串形式后从服务器端相应回调函数至客户端
                

            

        

        


            


                


                

            

            


                

                    res.send(`${callback}(${JSON.stringify(obj)})`)
                

            

        

        


            


                


                

            

            


                

                    })
                

            

        

        


            


                


                

            

            


                

                    app.listen(80, () => {
                

            

        

        


            


                


                

            

            


                

                    console.log('http://127.0.0.1');
                

            

        

        


            


                


                

            

            


                

                    })
                

            

        

    

    


        


            


                


                

            

            


                

                    <script>
                

            

        

        


            


                


                

            

            


                

                    function fn(res) {
                

            

        

        


            


                


                

            

            


                

                    console.log(res);
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    </script>
                

            

        

        


            


                


                

            

            


                

                    <script src="http://127.0.0.1/jsonp?callback=fn"></script>
                

            

        

    

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.

转自：csdn
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

移动端网页特效

触屏事件

移动端浏览器兼容性较好，不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动端也有自己独特的地方。比如触屏事件 touch（也称触摸事件），Android 和 IOS 都有。

touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。

常见的触屏事件：

触摸事件对象（TouchEvent）

TouchEvent 是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少，等等

touchstart、touchmove、touchend 三个事件都会各自有事件对象。

触摸事件对象常见对象列表：

因为平时都是给元素注册触摸事件，所以重点记住 targetTocuhes

移动端拖动元素JS代码实现：

// （1） 触摸元素 touchstart：  获取手指初始坐标，同时获得盒子原来的位置 // （2） 移动手指 touchmove：  计算手指的滑动距离，并且移动盒子 // （3） 离开手指 touchend: var div = document.querySelector('div'); var startX = 0; //获取手指初始坐标 var startY = 0; var x = 0; //获得盒子原来的位置 var y = 0; div.addEventListener('touchstart', function(e) { //  获取手指初始坐标 startX = e.targetTouches[0].pageX; startY = e.targetTouches[0].pageY; x = this.offsetLeft; y = this.offsetTop; }); div.addEventListener('touchmove', function(e) { //  计算手指的移动距离： 手指移动之后的坐标减去手指初始的坐标 var moveX = e.targetTouches[0].pageX - startX; var moveY = e.targetTouches[0].pageY - startY; // 移动我们的盒子 盒子原来的位置 + 手指移动的距离 this.style.left = x + moveX + 'px'; this.style.top = y + moveY + 'px'; e.preventDefault(); // 阻止屏幕滚动的默认行为 }); 


    

        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
    

classList属性

classList属性是HTML5新增的一个属性。返回元素的类名，该属性用在元素中添加、移除及切换CSS类

<style> .bg { background-color: black; } </style> <body> <div class="one two"></div> <button> 开关灯</button> <script> // classList 返回元素的类名 var div = document.querySelector('div'); // console.log(div.classList[1]); // 1. 添加类名  是在后面追加类名不会覆盖以前的类名 注意前面不需要加. div.classList.add('three'); // 2. 删除类名 div.classList.remove('one'); // 3. 切换类 var btn = document.querySelector('button'); btn.addEventListener('click', function() { document.body.classList.toggle('bg'); }) </script> </body> 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

常用开发插件

移动端 要求的是快速开发，所以经常会借助于一些插件来帮完成操作

JS 插件是 js 文件，它遵循一定规范编写，方便程序展示效果，拥有特定功能且方便调用。如轮播图和瀑布流插件

插件的使用：

1. 引入 js 插件文件
2. 按照规定语法使用

特点： 它一般是为了解决某个问题而专门存在，其功能单一，并且比较小。比如移动端常见插件：iScroll、Swiper、SuperSlider

PC端网页特效

偏移量系列 offset

offset 翻译过来就是偏移量， 使用 offset 系列相关属性可以 动态 的得到该元素的位置（偏移）、大小等。

• 获得元素距离带有定位父元素的位置
• 获得元素自身的大小（宽度高度）
• 注意： 返回的数值都不带单位

常用属性：

图示：

offset与style区别：

案例——获取鼠标在盒子内的坐标：

效果展示：

实现代码(JS)：

// 在盒子内点击， 想要得到鼠标距离盒子左右的距离。 // 首先得到鼠标在页面中的坐标（ e.pageX, e.pageY） // 其次得到盒子在页面中的距离(box.offsetLeft, box.offsetTop) // 用鼠标距离页面的坐标减去盒子在页面中的距离， 得到 鼠标在盒子内的坐标 var box = document.querySelector('.box'); box.addEventListener('mousemove', function(e) { // console.log(e.pageX); // console.log(e.pageY); // console.log(box.offsetLeft); var x = e.pageX - this.offsetLeft; var y = e.pageY - this.offsetTop; this.innerHTML = 'x坐标是' + x + ' y坐标是' + y; }) 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

案例——模态拖拽框：

• 点击弹出层， 会弹出模态框， 并且显示灰色半透明的遮挡层。
• 点击关闭按钮，可以关闭模态框，并且同时关闭灰色半透明遮挡层。
• 鼠标放到模态框最上面一行，可以按住鼠标拖拽模态框在页面中移动。
• 鼠标松开，可以停止拖动模态框移动。

效果展示：

实现代码：

<head lang="en"> <meta charset="UTF-8"> <title></title> <style> .login-header { width: 100%; text-align: center; height: 30px; font-size: 24px; line-height: 30px; } ul,li,ol,dl,dt,dd,div,p,span,h1,h2,h3,h4,h5,h6,a { padding: 0px; margin: 0px; } .login { display: none; width: 512px; height: 280px; position: fixed; border: #ebebeb solid 1px; left: 50%; top: 50%; background: #ffffff; box-shadow: 0px 0px 20px #ddd; z-index: 9999; transform: translate(-50%, -50%); } .login-title { width: 100%; margin: 10px 0px 0px 0px; text-align: center; line-height: 40px; height: 40px; font-size: 18px; position: relative; cursor: move; } .login-input-content { margin-top: 20px; } .login-button { width: 50%; margin: 30px auto 0px auto; line-height: 40px; font-size: 14px; border: #ebebeb 1px solid; text-align: center; } .login-bg { display: none; width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; background: rgba(0, 0, 0, .3); } a { text-decoration: none; color: #000000; } .login-button a { display: block; } .login-input input.list-input { float: left; line-height: 35px; height: 35px; width: 350px; border: #ebebeb 1px solid; text-indent: 5px; } .login-input { overflow: hidden; margin: 0px 0px 20px 0px; } .login-input label { float: left; width: 90px; padding-right: 10px; text-align: right; line-height: 35px; height: 35px; font-size: 14px; } .login-title span { position: absolute; font-size: 12px; right: -20px; top: -30px; background: #ffffff; border: #ebebeb solid 1px; width: 40px; height: 40px; border-radius: 20px; } </style> </head> <body> <div class="login-header"><a id="link" href="javascript:;">点击，弹出登录框</a></div> <div id="login" class="login"> <div id="title" class="login-title">登录会员 <span><a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a></span> </div> <div class="login-input-content"> <div class="login-input"> <label>用户名：</label> <input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input"> </div> <div class="login-input"> <label>登录密码：</label> <input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input"> </div> </div> <div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录会员</a></div> </div> <!-- 遮盖层 --> <div id="bg" class="login-bg"></div> <script> // 1. 获取元素 var login = document.querySelector('.login'); var mask = document.querySelector('.login-bg'); var link = document.querySelector('#link'); var closeBtn = document.querySelector('#closeBtn'); var title = document.querySelector('#title'); // 2. 点击弹出层这个链接 link  让mask 和login 显示出来 link.addEventListener('click', function() { mask.style.display = 'block'; login.style.display = 'block'; }) // 3. 点击 closeBtn 就隐藏 mask 和 login  closeBtn.addEventListener('click', function() { mask.style.display = 'none'; login.style.display = 'none'; }) // 4. 开始拖拽 // (1) 当我们鼠标按下， 就获得鼠标在盒子内的坐标 title.addEventListener('mousedown', function(e) { var x = e.pageX - login.offsetLeft; var y = e.pageY - login.offsetTop; // (2) 鼠标移动的时候，把鼠标在页面中的坐标，减去 鼠标在盒子内的坐标就是模态框的left和top值 document.addEventListener('mousemove', move) function move(e) { login.style.left = e.pageX - x + 'px'; login.style.top = e.pageY - y + 'px'; } // (3) 鼠标弹起，就让鼠标移动事件移除 document.addEventListener('mouseup', function() { document.removeEventListener('mousemove', move); }) }) </script> </body> 


    

        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
    

可视区系列 client

client 翻译过来就是客户端，使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。

常用属性：

client和offset最大的区别就是 ：不包含边框
图示：

滚动系列 scroll

scroll 翻译过来就是滚动的，使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。

常用属性：

图示：

滚动条：

• 如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。
• 当滚动条向下滚动时，页面上面被隐藏掉的高度，称为页面被卷去的头部。
• 滚动条在滚动时会触发 onscroll 事件。

案例——固定右侧侧边栏：

• 原先侧边栏是绝对定位
• 当页面滚动到一定位置，侧边栏改为固定定位
• 页面继续滚动，会让 返回顶部显示出来

效果展示：

实现代码：

<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .slider-bar { position: absolute; left: 50%; top: 300px; margin-left: 600px; width: 45px; height: 130px; background-color: pink; } .w { width: 1200px; margin: 10px auto; } .header { height: 150px; background-color: purple; } .banner { height: 250px; background-color: skyblue; } .main { height: 1000px; background-color: yellowgreen; } span { display: none; position: absolute; bottom: 0; } </style> </head> <body> <div class="slider-bar"> <span class="goBack">返回顶部</span> </div> <div class="header w">头部区域</div> <div class="banner w">banner区域</div> <div class="main w">主体部分</div> <script> //1. 获取元素 var sliderbar = document.querySelector('.slider-bar'); var banner = document.querySelector('.banner'); // banner.offestTop 就是被卷去头部的大小 一定要写到滚动的外面 var bannerTop = banner.offsetTop // 当侧边栏固定定位之后应该变化的数值 var sliderbarTop = sliderbar.offsetTop - bannerTop; // 获取main 主体元素 var main = document.querySelector('.main'); var goBack = document.querySelector('.goBack'); var mainTop = main.offsetTop; // 2. 页面滚动事件 scroll document.addEventListener('scroll', function() { // window.pageYOffset 页面被卷去的头部 // console.log(window.pageYOffset); // 3 .当页面被卷去的头部大于等于了 172 此时 侧边栏就要改为固定定位 if (window.pageYOffset >= bannerTop) { sliderbar.style.position = 'fixed'; sliderbar.style.top = sliderbarTop + 'px'; } else { sliderbar.style.position = 'absolute'; sliderbar.style.top = '300px'; } // 4. 当我们页面滚动到main盒子，就显示 goback模块 if (window.pageYOffset >= mainTop) { goBack.style.display = 'block'; } else { goBack.style.display = 'none'; } }) </script> </body> 


    

        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
    

三大系列作用区别：

它们主要用法：

注意：页面滚动的距离通过 window.pageXOffset 获得

动画原理

核心原理：通过定时器 setInterval() 不断移动盒子位置

实现步骤：

1. 获得盒子当前位置
2. 让盒子在当前位置加上1个移动距离
3. 利用定时器不断重复这个操作
4. 加一个结束定时器的条件
5. 注意此元素需要添加定位，才能使用 element.style.left

简单动画函数封装：

// 简单动画函数封装obj目标对象 target 目标位置 function animate(obj, target) { var timer = setInterval(function() { if (obj.offsetLeft >= target) { // 停止动画 本质是停止定时器 clearInterval(timer); } //每次均匀向右移动1px obj.style.left = obj.offsetLeft + 1 + 'px'; }, 30); } 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

缓动效果原理：

缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来

1. 让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。
2. 核心算法： (目标值 - 现在的位置 ) / 10 做为每次移动的距离步长
3. 停止的条件是： 让当前盒子位置等于目标位置就停止定时器
4. 注意步长值需要取整

// 缓动动画函数封装obj目标对象 target 目标位置 // 思路： // 1. 让盒子每次移动的距离慢慢变小， 速度就会慢慢落下来。 // 2. 核心算法：(目标值 - 现在的位置) / 10 做为每次移动的距离 步长 // 3. 停止的条件是： 让当前盒子位置等于目标位置就停止定时器 function animate(obj, target) { // 先清除以前的定时器，只保留当前的一个定时器执行 clearInterval(obj.timer); obj.timer = setInterval(function() { // 步长值写到定时器的里面 var step = (target - obj.offsetLeft) / 10; if (obj.offsetLeft == target) { // 停止动画 本质是停止定时器 clearInterval(obj.timer); } // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10 obj.style.left = obj.offsetLeft + step + 'px'; }, 15); } 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

多个目标值之间移动：

当开始移动时候，判断步长是正值还是负值

• 如果是正值，则步长 往大了取整
• 如果是负值，则步长 向小了取整

动画函数封装到单独JS文件： animate.js

function animate(obj, target, callback) { // 先清除以前的定时器，只保留当前的一个定时器执行 clearInterval(obj.timer); obj.timer = setInterval(function() { // 步长值写到定时器的里面 // 把步长值改为整数 不要出现小数的问题 // var step = Math.ceil((target - obj.offsetLeft) / 10); var step = (target - obj.offsetLeft) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); if (obj.offsetLeft == target) { // 停止动画 本质是停止定时器 clearInterval(obj.timer); // 回调函数写到定时器结束里面 // if (callback) { //     // 调用函数 //     callback(); // } callback && callback(); } // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10 obj.style.left = obj.offsetLeft + step + 'px'; }, 15); }

    蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。



    



    分享此文一切功德，皆悉回向给文章原作者及众读者.



    转自：csdn
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。 



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