122021-10

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

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

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

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

JSONP ：出现的早，兼容性好（兼容低版本 IE ）。是前端程序员为了解决跨域问题，被迫想出来的一种临时解决方案，最主要的缺点是只支持 GET 请求，不支持 POST 请求。

CORS ：出现的较晚，它是 W3C 标准，属于跨域 Ajax 请求的根本解决方案。支持 GET 和 POST 请求。缺点是不兼容某些低版本的浏览器。

什么是`JSONP`(⭐⭐⭐)

JSONP (JSON with Padding) 是 JSON 的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。

`JSONP`的实现原理(⭐⭐⭐)

概念：浏览器端通过 <script> 标签的 src 属性，请求服务器上的数据，同时，服务器返回一个函数的调用。这种请求数据的方式叫做 JSONP
特点：

JSONP 不属于真正的 Ajax 请求，因为它没有使用 XMLHttpRequest 这个对象

JSONP 仅支持 GET 请求，不支持 POST、PUT、DELETE 等请求

什么是CORS(⭐⭐⭐⭐⭐)

CORS (跨域资源共享) 由一系列 HTTP 响应头组成，这些 HTTP 响应头决定浏览器是否阻止前端 JS 代码跨域获取资源
浏览器的同源安全策略默认会阻止网页“跨域”获取资源。但如果接口服务器配置了 CORS 相关的 HTTP 响应头，就可以解除浏览器端的跨域访问限制

下面分别向大家演示通过CORS和JSONP实现跨域的案例：

一、通过CORS中间件解决跨域问题：

index.html文件代码演示：


    

        

            

                

                

            

            

                
                    <!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>

此时会出现跨域问题，我们需要使用 cors 中间件解决跨域问题

cors 是 Express 的一个第三方中间件。通过安装和配置 cors 中间件，可以很方便地解决跨域问题
使用步骤
- 安装中间件： npm install cors
- 导入中间件： const cors = require('cors')
- 配置中间件：在路由之前调用app.use(cors())
express接口案例代码


    

        

            

                

                

            

            

                
                    // 导入 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')
                

            

        

        

            

                

                

            

            

                
                    })

apiRouter路由文件代码：


    

        

            

                

                

            

            

                
                    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接口代码后打开index.html文件并点击get及post按钮得到请求结果：

二、通过JSONP中间件解决跨域问题：

创建 JSONP 接口的注意事项

如果项目中已经配置了 CORS 跨域资源共享，为了防止冲突，必须在配置 CORS 中间件之前声明 JSONP 的接口

否则 JSONP 接口会被处理成开启了 CORS 的接口
实现步骤：

（1）获取客户端发送过来的回调函数的名字

（2）得到要通过 JSONP 形式发送给客户端的数据

（3）根据前两步得到的数据，拼接出一个函数调用的字符串

（4）把上一步拼接得到的字符串，响应给客户端的 <script> 标签进行解析执行

案例代码如下：


    

        

            

                

                

            

            

                
                    //导入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');
                

            

        

        

            

                

                

            

            

                
                    })

创建jsonp.html客户端来接收服务器端响应过来的回调函数，代码如下：

url中callback=fn为客户端发送请求携带的参数既服务器端中的req.query.callback


    

        

            

                

                

            

            

                
                    <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界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(2150)

122021-10

文章目录

移动端网页特效

触屏事件

移动端浏览器兼容性较好，不需要考虑以前 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 文件，它遵循一定规范编写，方便程序展示效果，拥有特定功能且方便调用。如轮播图和瀑布流插件

插件的使用：

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

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

PC端网页特效

偏移量系列 offset

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

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

常用属性：
在这里插入图片描述
图示：

offset与style区别：

offset	style
可以得到任意样式表中的样式值	只能得到行内样式表中的样式值
offset系列获得的数值是没有单位的	style.width 获得的是带有单位的字符串
offsetWidth 包含padding+border+width	style.width 获得不包含padding和border 的值
offsetWidth 等属性是只读属性，只能获取不能赋值	style.width 是可读写属性，可以获取也可以赋值
获取元素大小位置，用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

三大系列作用区别：
在这里插入图片描述

它们主要用法：

系列	作用	属性
offset	用于获得元素位置	offsetLeft offsetTop
client	用于获取元素大小	clientWidth clientHeight
scroll	用于获取滚动距离	scrollTop scrollLeft

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

动画原理

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

实现步骤：

获得盒子当前位置
让盒子在当前位置加上1个移动距离
利用定时器不断重复这个操作
加一个结束定时器的条件
注意此元素需要添加定位，才能使用 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

缓动效果原理：

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

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

// 缓动动画函数封装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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

评论(0) 浏览(2600)

122021-10

展开全文后需要支持收起吗？从运用场景分析交互逻辑

seo达人

展开和收起属于比较细节的问题，按照惯性思维，内容多了我就折叠一部分，用户需要看更多内容就点击「展开」，内容展开之后，相应的还应该支持内容的「收起」。

整个流程这样看起来没什么毛病，但是却缺少一个重要的前提，哪些场景或者什么情况下才需要展开或收起呢？

如果只是单纯给出一个流程，显然缺乏对产品逻辑和用户体验上的思考。可能很多设计师之前没怎么注意过这个地方的交互逻辑，或者深入思考需要注意的问题，这次借着答疑的机会咱们一起来深入探讨下。

1、抛开展开和收起

虽然提出的问题是分析展开和收起的运用场景，但是我觉得不应该一上来就陷入到具体的细节里。

这个问题相对来说属于比较小的点，直接钻到细节里会让我们只盯着这一小部分，缺少对全局的思考，因小失大。

盯着已有的设计进行推导，这样多少带有个人主观的臆想。先不要盯着具体的展开和收起功能来想场景，反过来想，在设计过程中有哪些地方需要这样的交互逻辑，为什么需要呢？

无论面对什么样的设计需求，这样的思考过程会一直伴随着我们。

2、先场景后行为

先回到场景上，考虑哪些场景会触发「展开和收起」行为，再具体问题具体分析。

场景一：当某段内容字数太多，占据了大面积的空间，如果用户不想看这些长篇大论，想看下一个内容，要滑动屏幕很久才能略过这些内容，显然我们不想给用户带来这样的操作负担，这时候就可以考虑添加收起功能，把多余的内容收起来。

这里的收起需要注意两点：

内容被收起不代表被收起的内容不重要；
收起相对节约屏幕空间，用户更方便上下滑动查看内容。

场景二：页面上仍然有很多内容，但是这些内容有主次之分，我们想让用户最先看到前面的内容，后面的内容可以考虑收起来突出重点并节省空间。

这里的收起就和场景一有差异，可能被收起的内容相对没这么重要，只露出重点/热点内容或权益来吸引用户，相对次要的内容被收起，这里的收起会涉及到内容重要程度的排序，这种排序就可以体现在排行榜设计中。

3、展开然后收起

展开和收起属于一组行为，看到展开我们必然会联想到收起。展开是为了看到完整的内容，收起则是内容看完的标志，点击收起可以继续下一个内容。

在知乎问答中，我们首先看到的是标题的问题，这些问题往往言简意赅，通常光看标题我们就能知道这个问题想表达什么意思。

▲ 标题下面的问题简介是对标题的进一步解释和补充，这里的简介作为说明性文字，就支持展开和收起。当简介内容太多时，就要考虑折叠一部分简介，这样能保证在首屏上能同时看到问题和答案。

另外当内容很多，以信息流的形式呈现，并且需要上下滑动来浏览时，就可以考虑使用现展开后收起。

比如在微信朋友圈，如果文字内容较多，就会被收起一部分，想看完整的内容则需要点击「全文」选项，看完后点击「收起」，内容就会被折叠起来，方便我们继续滑动浏览其他朋友圈。

4、展开后不收起

点完展开看到了全部内容，却没有收起选项，但是这样并不影响我们的观看体验，而且展开这个动作给用户和页面带来的反应都很小，不会让用户感到不适。之所以选择「展开」，一个重要的原因是因为我们有想看完整内容的强烈需求。在这种意愿的号召下，我们会毫不犹豫地选择展开功能。

▲ 在豆瓣电影介绍页中，在剧情简介区域会有「展开」提示，如果我们选择展开，说明我们有观看完整简介的意愿，并且是主动选择展开，不添加「收起」选项正好避免了给我们增加操作上的负担。

另外，当内容相对没那么多，能在一屏上显示，不需要用户上下滑动太多时，可以考虑省去收起，比如在QQ群介绍、抖音个人页的简介等。

最后

以上是我对展开和收起的运用场景的一些小思考，主要从场景角度来考虑交互逻辑。

授人以鱼不如授人以渔，关于展开和收起的场景还有很多，希望大家能掌握这样的思考逻辑，去发掘更深层的设计内容，当然有问题咱们可以随时沟通～

原文地址：Clip设计夹（公众号）

作者：Clippp

转载请注明：学UI网》展开全文后需要支持收起吗？从运用场景分析交互逻辑

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

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

评论(0) 浏览(2400)

122021-10

2021 必备的超赞神器，用上它，效率都要提升三倍！！

seo达人

上图就是这个神器制作出来的一些效果，之前看Dribble上面有很多类似的设计，现在终于知道它们大部分来源于这个神器。

下面我也找了一些案例，大家一起来看看。

这样看，效果还是真的不错，它支持颜色修改、样式修改，目前一共有11种几何样式。

好了，现在下面正式介绍这个传说中的神器，我相信大家一定会喜欢上的。

上图就是这个神器的基本外貌，一共11种基础类型，当点击其中一个进去后，可以进行编辑。

这里我点击上图中的第二个模式（MIXTAPE）进去。

如果大家英文不好，可以将整个页面翻译成中文，Google自带的翻译。

进入这个页面，大家可以根据自己喜欢的风格调整样式，同时还可以修改颜色。

比如我可以选择8X12列和行的几何布局。

对颜色、列和行、开启阴影调整，得到如上效果。

最终可以导出一张高清大图（3240X4860），尺寸是完全够用的。

随便调整下又是一张不错的几何背景，还可以作为作品集封面。好了，关键时刻来了，神器的网址已经打包好，大家可以拿去使用。

领取方式如下：添加小编微信，备注：神器699，小编会将下载地址发给你（小编不是机器人，回复会慢一些，大家稍等）。

原文地址：功夫UX （公众号）

作者：功夫UX

转载请注明：学UI网》2021 必备的超赞神器，用上它，效率都要提升三倍！！

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

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

评论(0) 浏览(1812)

122021-10

01 邻近色的定义

顾名思义邻近色是色相环中色相相邻的颜色，相对单色对比，邻近色对比增加了色相对比，因此视觉效果更丰富。

邻近色在色相上比较接近，色彩的冷暖属性，还有情感特性上都比较类似，所以邻近色搭配能很好的保持画面的协调与统一，是设计中使用频率最高的配色方案之一。

黄色与橙色相配具有很和谐的过渡感，由于橙色和黄色都非常明亮鲜艳，很容易营造出轻松快乐的氛围，充满活力，让人兴奋愉悦。

橙色和红色是充满活力和激情的颜色，经常使用在促销等表现出热闹、愉快氛围的设计中。

红色和紫色搭配是高彩度、但明度相当低的色彩搭配，在使用上注意不宜让画面过度暗沉。最好适度地提高色彩的明度和搭配高明度的色彩来增加画面上的层次感。具有浪漫、华丽、高贵感。

蓝色和紫色明度很接近，对比比较柔和。神秘梦幻的紫色搭配上和科技感十足的蓝色，显得十分前卫时尚。是蒸汽波、波普艺术、赛博朋克等前卫时尚风格常用的配色。

蓝色明度低，绿色明度高，所以蓝绿配色即协调统一又有很强的对比。让人联想到蓝天绿水之美，感到平静，放松，给人清爽舒适感。

黄绿色是调和性相当高的色彩组合，黄色搭配清新的绿色，是自然界中很常见的色彩组合，具有自然的呼唤感，新鲜而又清澈，显得朝气有活力。

02 邻近色配色的方法

接下来使用在线配色工具：Adobe Color来进行配色示范色。（网址：color.adobe.com）

在调色规则中选择“类比”。使用橙色为基础颜色，会自动生成四个关联颜色，筛选适合的颜色配置到画面中，就能很快完成配色方案：

和单色系相比，邻近色在色相方面会稍微丰富一些，但仍然存在色调过于单一、对比不够的问题。一般会拉开颜色之间的明度或纯度，形成明暗对比，衬托出主体。

邻近色还可以结合不同明度和纯度来使用，让画面呈现出层次变化，展现出不同的气质和视觉效果。

03 总结

邻近色在色相上比较接近，色彩的冷暖属性，还有情感特性上都比较类似，所以邻近色搭配能很好的保持画面的协调与统一，是设计中使用频率最高的配色方案之一。

邻近色存在色调过于单一、对比不够的问题。一般会拉开颜色之间的明度或纯度，形成明暗对比，衬托出主体。

原文地址：艺海拾贝Design（公众号）

作者：邓海贝

转载请注明：学UI网》配色不协调？来看看“邻近色”搭配

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

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

评论(0) 浏览(6675)

122021-10

邻近色配色实操-案例1

在PS中新建文件，背景选择红色，英文放大铺满背景，颜色选择红色的邻近色橙色。

画出白色圆角矩形，给矩形添加图层样式“描边”和“投影”。描边的填充类型选择“渐变”，颜色选择白色和浅橙色的渐变，模拟玻璃边缘的厚度。

接下来制作毛玻璃效果。复制背景和文字图层，合并为一个图层。分别给此图层添加三个滤镜“模糊-高斯模糊”、“滤镜库-扭曲-玻璃”、杂色-添加杂色“，效果如下图：

把图层移动到矩形图层上方，按快捷键“ctrl+alt+g”建立剪切蒙版，使毛玻璃效果只在矩形范围显示。

最后加上文案排版，设计完成。

此案例使用了红色和橙色的邻近色配色，橙色和红色是充满活力和激情的颜色，能呈现出热闹、愉快的氛围。

邻近色配色实操-案例2

方案二，在PS中新建文件，在背景上用绿色和黄色的柔和画笔随机画出颜色。

使用“模糊-高斯模糊”让背景颜色更好的融合在一起，再执行“杂色-添加杂色”给背景增添质感。

最后加入文案，颜色采用绿色和黄色，明亮的黄色搭配清新的绿色，新鲜而又清澈，显得朝气有活力。

邻近色配色实操-案例3

方案三，在AI中输入英文，字体选择一款设计感较强的“Current”做为主体。使用蓝绿色搭配，蓝色明度低，绿色明度高，所以蓝绿配色即协调统一又有很强的对比。

把英文转换为轮廓，给每个字母加上不同角度的渐变色，颜色沿用蓝绿色。

最后加上文案，进行排版，设计完成：

此案例使用了蓝绿色的邻近色配色，让人联想到蓝天绿水之美，感到平静，放松，给人清爽舒适感。

尝试新的配色，使用蓝色和紫色搭配。蓝色和紫色明度很接近，对比比较柔和，具有神秘梦幻感。

红色和紫色搭配显得浪漫、华丽、高贵。

优秀作业展示

以下是从本期投稿中选取的11份优秀作品：

01 『聪_cong』

02 Anna

03 NIAN廿七

04 NoctilucaGladys

05 Trista～Z

06 蛋蛋DAN

07 金角设计

08 孔艳茹

09 龙娟

10 珞影随行

11 咪奥mao

原文地址：艺海拾贝Design（公众号）

作者：邓海贝

转载请注明：学UI网》学会“邻近色”配色，搞定配色难题（实操篇）

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

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

评论(0) 浏览(7290)

122021-10

Copiexl

这是一款字节跳动出品的高效走查插件，它的原理十分简单，首先打开需要校验的线上项目；接着上传你的设计稿图片；然后通过降低设计稿的透明度，达到项目快速走查的目的。开发哪里有问题，一眼便知。简单教大家如何安装使用这样一款插件：

1.安装方法：

首先打开软件的官方网站（https://copixel.bytedance.com/），点击免费下载（这里只支持Chrome浏览器，如果你是Safari 、Firefox、Opera等浏览器，在官网往下滚动，同样也是提供了下载入口）。

点击下载过后，就会跳转到 Google 的应用商店当中，点击安装即可，与浏览器插件的安装方式类似（这里需要科学网络，如果你访问不了 Google应用商店，可以直接在公众号后台回复“设计走查”，提供了另一种安装方式）。

2.使用教程

01.选择合适的页面设计尺寸

建议按照主流窗口尺寸的宽度设计，如：1366px、1440px、1920px；推荐最小设计尺寸使用1366px、1440px，最大设计尺寸1920px(宽)。目的是按照 1:1 导出设计图，与开发页面显示效果一致。

02.该如何输出设计稿？

Copiexl 浏览器插件的原理是将你的设计稿悬浮在前端还原的页面当中进行对比，这样就能快速知道自己的设计页面有何问题。

因此我们需要将设计稿进行一次性导出成 PNG 文件。这样可以批量导入到插件当中，直接切换设计稿提高走查效率。

03.如何使用

打开前端实现好的页面，使用你刚刚安装好的浏览器插件“Copixel”，添加UI设计图。

通过调整设计图位置、大小和透明度使其与开发页面高度重合，配合有截图标注功能的软件（比如：Xinp）进行找茬标记。使用走查文档标记存在问题的地方并说明问题，这样就能高效完成项目走查。

然后将有问题的走查内容直接分享给开发即可。

插件使用的视频方法：

转载至Copiexl帮助文档

CSS Peeper

这是一个 设计走查 / 样式复制 / 资源下载 的效率神器，它能够轻松查看网页端当中所有元素的CSS属性，并且不需要像Chrome浏览器那样 “右键” – “检查” 浏览器元素，然后在许许多多的代码当中寻找你需要的CSS代码。我们只需要点击插件，选择元素就能够快速检查样式。

场景一、设计走查

比如当前端工程师完成页面过后，需要设计师进行一个页面的走查，这个时候很多同学往往就会靠着自己的像素眼进行一一的比对，如果稍微有点经验的B端设计师会打开浏览器自带的检查，进行元素的核对。
然而浏览器自带的检查其实更多是面向程序员进行设计的，对于我们设计师而言，能够看懂的却只有一小部分内容，显然检查的效率并不会太高效。

这时候使用CSS Peeper，就可以轻松对网页当中的CSS样式进行检查，我们不仅可以看到元素的常规属性，比如颜色、背景、间距；还可以看到元素的盒子模型，可以看到元素的 Padding、Margin…

通过这个插件，就能清晰的看见开发究竟是在哪一部分还原出现问题，并且能够很“欠揍”的在他面前秀一下～

场景二、样式复制

对于设计师来说，就不用再去纠结竞品究竟是如何设计？如何还原出来，因为任何网页上的元素，你都可以通过这个插件，去查看他的还原思路，并且知道它的设计样式以及属性
同时可以点击颜色或者图片，将该页面用到的所有颜色或者图片总结出来进行汇总，可以导出，方便在设计风格上进行分析。

场景三：资源下载

使用CSS Peeper 能够快速查看在该页面当中，所用到哪些图标、图片。并且可以将这些资源快速下载到本地进行保存。这样你就可以成为资源小能手。

这也就是我工作当中最常使用的插件，你最常使用什么插件？一起来分享聊聊！！

原文链接：CE青年（公众号）

作者：CE青年

转载请注明：学UI网》资源分享｜两款B端设计走查神器

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

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

评论(0) 浏览(2799)

122021-10

火爆全网的酸性设计，你看懂了吗？

seo达人

毕竟这种风格的核心就是挑战传统的美感和欲望的定义。整个风格迷幻抽象、打破常规、高度失真或者超现实的视觉风格，完完全全地向观者展现着一种潮流先锋的态度。今天我们要聊一下酸性设计的主要特点，方便大家快速掌握！

01.特殊质感

酸性设计中一个很重要的特点就是往往包含大量的特殊质感，例如液态金属、镭射、铝箔、玻璃、塑料或折射等等质感。这些特殊质感都给我们一个共同的感官，那就是科技感和未来感。这也是酸性设计之所以能代表潮流和先锋很重要的原因之一。

02.高饱和色彩

酸性设计往往充斥着大量鲜艳、高饱和的色彩，包括各种高饱和度的渐变色、迷幻绚烂的霓虹色、让人眩晕的荧光色等等。还常常配上暗黑的背景，画面混乱又统一，充满矛盾的迷幻感。这种让人眩晕、充满感官刺激、打破传统美感标准的色彩，也充分体现了这种风格的调性，充满了探索的先锋精神。

q

03.打破常规的排版

酸性设计的排版看起来很难找到固定的规律，充满了随机性，似乎毫无章法，同时画面饱满丰富。但是仔细观察就会发现，它的构图方式其实是高度几何化的，通过几何图形的不断重复、剪切，形成看起来复杂无序的组合方式，从而体现酸性设计的流动感。

酸性设计就是这样通过破坏性的方式打破传统对美感的定义，引领了潮流的定义、创造一种新奇又让人欲罢不能的风格。

d

04.装饰性字体

酸性设计所采用的文字特点也十分鲜明，通常都十分具有装饰性，造型或尖锐或富有流动性，例如哥特风字体等。搭配上如同被强酸腐蚀过后液态金属的质感，充斥着危机感和刺激感。

原文地址：设计师深海（公众号）

作者：设计师深海

转载请注明：学UI网》火爆全网的酸性设计，你看懂了吗？

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

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

评论(0) 浏览(2385)

122021-10

在腾讯公司滨海总部的公益文创市集上，看到一组设计，这些都是来自腾讯的设计师与WABC无障碍艺途的“小朋友”们一起创作的小红花。这些对小红花丰富的场景想象里，充满了爱，充满了温度。提到设计，大家这几年聊的比较多的UX设计、UI设计，但是对于公益设计却关注不多，公益设计相对于产品设计不同，它的每个设计背后都有一个动人的故事，今天我们一起来聊一聊公益设计。看看有哪些不一样的地方？今天我拿业内做的比较好的，腾讯公益的99公益日为案例，和大家聊聊公益设计如何去做？

01. 通过跨团队合作保证一致性

● 图片来源：腾讯CDC公众号

d

公益设计是一个大的系统设计，和做产品不一样，产品流程大家都知道，产品立项、交互设计、视觉设计、前端走查等等环节，但是公益设计，需要很多团队一起去推动，除了产品设计，还需要有市场团队、公关团队，包括整个的设计策略都有不同，相对于产品设计只需要和开发、产品、运营对接不同，公益设计需要对接的角色非常多，需要设计师有非常强的项目把控能力，以及对于项目落地后结果的把控能力。所以设计师在做公益这样的项目的时候，一定要做好项目管理，包括各个对接方时间排期规划等等，都要求较高。

·

02. 通过全局联动形成品牌感

除了对接人多以外，在设计落地上，产品设计更多在线上移动端或者H5，但是公益设计的落地场景却很广，包括电梯广告、地标广告、直播物料等等。

整体的设计链路线上到线下更为立体，所以在做公益设计的时候，需要考虑更多的一致性，如何让设计联动起来，如何让用户更有体感是非常重要的。

● 图片来源：腾讯公益

a

公益设计的联动一定是多维度的，得让用户充分的感知，因此除线上直播、H5以外在用户能触达的各个场景都要覆盖到，比如机场、地铁等等。

在做线下推广时，每一张海报、每一次传播都有它的设计规范，腾讯也公开了这些设计规范，可以用来参考和学习.

● 小红花联动

e

除了线下运用，线上也需要联动，公益设计需要线上线下一起发力，如何让线上设计做的有趣好玩，让用户用参与感，是设计师需要思考的。如上图的H5场景，通过趣味化设计，答题得小红花场景，让用户参与进去，体现出更多的温暖和温度。

对于一个产品，其实最难的是，这个产品如何和其它产品进行联动，同时也不违和，非常考验设计师的整体把控性。比如最近比较流行跨界玩法，很多品牌都会和一些时尚品牌进行合作，让产品有更多和年轻人交流的机会，让年轻人感觉到公益的魅力。

● 图片来源：腾讯CDC公众号

a

腾讯公益这块是做的比较不错的，我仔细看了看2020年与2021年的IP连萌行动的一些IP形象，可以看到不论是腾讯的QQ企鹅、微信汽泡狗，还是腾讯动漫的狐妖小红娘、海尔兄弟、敦煌神鹿等，尽管画风差别不少，但小红花人与他们的联合却一点也不违和。

● 图片来源：腾讯公益

k

另外，小红花人的出现某种程度上还代表了腾讯公益俘获年轻群体的诉求。公益对于年轻群体关注度虽高，但参与度低，腾讯公益也一直在寻求解决的办法。而小红花人走到B站，去到了奈雪、喜茶的店里，与更多的年轻人沟通交流，正是把他们带回腾讯公益的平台上。

我当时看见这个广告的时候就深深被吸引，一起做好事这个主题也很轻松，在我喝一杯奶茶时候，还可以做一件公益好事，让我觉得这个设计非常有温度，公益设计一定要结合场景，让用户舒服的同时，品牌的温度和鲜活的形象也会更深刻。

a

03. 通过IP符号打造形成记忆点

● 图片来源：腾讯公益

d

在推出小红花IP后，怎么保证这些设计的一致性，打造出高度一致性的传播矩阵。别看这张海报看着很简单，其实一点不简单，首选图形上，大家第一眼记住的是什么？是不是和我一样，一朵小红花。的确如此，用户能记住的除了画面，就是符号。

● 图片来源：腾讯CDC公众号

a

就比如今天我们提到苹果你能想到什么？是不是苹果的LOGO，提到NIKE你会想到什么，是不是那个对勾，能看得出腾讯设计团队，也是想把品牌打造成符号，上图是他们的标志每年变化过程，我们能看见字体的变化、构图变化，但是唯一不变的就是这朵小红花。

● 2019-2021年99公益日主视觉

w

这么多年的设计，品牌的延续感非常的强，始终围绕着这个小红花的超级符号打造整体风格，让我想起了以前上学时候，表现好，老师会给我们发一朵小红花的场景。虽然每年小红花有一些变化，但是对于温暖情感的传递，都没有变。比如18年主视觉，围绕汇聚概念做整个设计，很多爱心小花凝聚在一起，小的爱心变成大爱，和主题非常贴切。

d

04. 赋予品牌温度和情感

● 图片来源：designforgood.qq.com

w

腾讯的设计团队不仅针对小红花设计了表情包，同时还在很多地方，立体地打造了小红花的形象。而这些小红花，就是用户参与到互联网公益最大的理由，在告诉用户“做好事得小红花”的同时，用户累计的小红花又给予产品体验的有效反馈，用户参与互联网公益的动机和动力得以确定。这一朵小红花，串联起了用户从感知、到行动、到反馈的全流程。

小红花通过这些年的打造，主视觉将手绘的花作为重点元素，根据不同公益活动类型去设计不同的KV，搭配一些手写的字体，让用户第一感受就是温暖，通过我们的公益行动绘制出一朵朵有爱的小红花，这些小红花背后都是一个个暖心故事。好的品牌一定是要不断曝光，才能在用户心中形成心智，那些伟大的品牌都是如此。

在2018年99公益日的主视觉上，可以看到无数爱心化为花瓣，汇聚成一朵小红花。这是小红花形象第一次登上腾讯公益的平台。

2019年的99公益日，不仅小红花之歌出现了，节日期间用户向好友发起集小红花的自发传播，从而为自己的捐赠争取更大配捐额，形成腾讯公益全新的社交玩法。

2021年，随着99公益日扩展为10天，配捐额也随之放大，用户可以每天到腾讯公益平台做好事打卡。同时，小红花“积分”也可以兑换公益农产品和小红花相关纪念品……

小红花表面上的成长背后，离不开产品策略与设计的支撑。更轻量与丰富的“玩法”注入，如捐赠会议时间，捐赠腾讯视频积分等，拓宽了用户获取小红花的方式；而公益节日的时间点也同步延伸至每年的春节、“520”等时间段，拓宽了用户“一块”做好事的活跃次数。

在用户体验与设计的推动下，腾讯公益用了4年时间，种出一朵朵开满地球的小红花。现在，小红花不仅是腾讯公益的品牌符号，也是用户每一次公益行为的印记，还是用户获取反馈的“积分”，它甚至成为用户新的“社交货币”——没有小红花不足以谈爱心。

d

05. 最后

随着社会的发展，人们对于公益的关注也越来越多，那么作为设计师如何通过我们的设计力量，将我们平时的创意和有温度的设计结合起来，是我们每个设计师要思考的。希望今天这篇文章对大家有所帮助。

g

原文地址：我们的设计日记（公众号）

作者：sky

转载请注明：学UI网》腾讯设计了一朵小红花，也太好看了吧！

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

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

评论(0) 浏览(3238)

122021-10

B类产品设计细节：流程状态

seo达人

状态的命名

流程状态的设计原则与人机交互的最根本原则一致，即「以用户为中心」，确保目标用户在相应的使用场景下能够快速理解并正确执行相关操作。

按行业规则命名

专业工具或平台的设计中，对于状态的命名如果有行业约定俗成的术语，则遵照行业规则命名，即便在体验设计师自己眼中可能不够简洁美好。

例如：以工程师为主要用户群体的项目管理工具 Aone 中，bug 的状态有 10 种（如下图），且遵循了英文技术术语。对于设计师来说状态种类复杂、语言不统一，但从用户的角度来说这样是必须的、规范的，因此设计师要尊重用户的习惯和需求。

围绕核心操作命名

流程的名称通常是描述对应操作的过程或结果，如「待付款」、「退款中」是操作的过程，「完成付款」、「退款失败」是操作的结果。

单个核心操作

最简单、最常见的流程是：角色A 发起流程 – 角色B 进行操作 – 流程结束给出结果

这种两个角色三步走的流程，状态命名通常分为如下两种（框中是状态命名）：

上图里面的动词可替换成其他动作；结果状态也可用「已通过」、「未通过」等，根据实际情况而定。

围绕一个核心的操作，也可能涉及多个角色。

例如：最常见的审批流程，过程中涉及多个角色的层层审批。如果不同角色审批时，用户可执行的操作不同，或审批的详细过程对用户非常关键，这时审批单的状态命名上需要注明具体角色；如果通常不需要关注具体到哪个人审批了，则统一称为「审批中」即可，用户可以到详情页面查看具体进度。

多个核心操作

涉及多个角色、一串核心操作的复杂流程。

在流程完成之前的中间过程中，告知用户下一步待执行的操作，比上一步刚刚完成哪个更重要；

在角色多、极易混淆的情况下建议在状态名上增加角色名。

例如：数字仓单的仓单质押流程中涉及三个角色（存货人、仓储方、资金方）多个步骤，过程中关键是引导用户继续后续操作、高效完成申请，所以状态上展示当前要进行的操作。同时流程中包含连续多个角色的接力审核确认，容易混淆，因此状态标签中显示当前需要哪个角色进行操作；而放款、收款的角色很明显是资金方和申请方来操作，所以对应的状态没有显示角色名称。如图：

同一阶段时，不建议区分不同用户角色看到的状态名，可以给他们不同的反馈或提醒。

状态组间存在一对多的映射关系时，要注意区分逻辑关系，不建议将上下层状态打平到一起。

接上面数字仓单的案例：系统中，货物的所有者可以用仓单进行质押，这样仓单就会有「未质押」、「质押申请中」和「质押中」状态（不允许重复质押）。而质押申请是个复杂的流程，「质押申请中」这一仓单状态，对应「质押申请单」的一系列流程状态。同理，在仓单解除质押、注销等其它情况下，又会有「解质流程中」、「注销中」等状态，对应的「解除质押流程」、「注销流程」有会一系列对应的状态。如图：

这种情况下要梳理好业务流程，如果将上下层状态打平到一起，短期内可能看起来比较简洁，但随着产品复杂度的提升（B 类产品通常会越来越复杂），逻辑关系会越来越混乱。

状态的视觉设计

状态的颜色

表示状态的颜色不建议超过 5 种：红色、橙色、绿色、蓝色、灰色。

设计师需要结合色彩的功能特性、品牌色板、产品逻辑、用户需求来选择适合的颜色。常用配色举例：

状态的颜色不止会用在标签上，对应的可视化图表、图标等视觉元素要用色一致。例如进度条：

状态标签的样式

不同状态对应不同用户的不同操作，因此状态信息通常与普通文本在视觉上有所区分。常用的样式包括彩色标签、彩色圆点等等。例如：

注意列表、表单中状态标签的样式统一。

总结

原则：流程状态的设计原则与人机交互的最根本原则一致：以用户为中心。
命名：

在流程完成之前的中间过程中，告知用户下一步待执行的操作，比上一步刚刚完成哪个更重要；
在角色多、极易混淆的情况下建议在状态名上增加角色名；
同一阶段时，不建议区分不同用户角色看到的状态名，可以给他们不同的反馈或提醒。
专业工具或平台中，如果有行业约定俗成的术语来命名状态，则遵照行业规则。

关系：状态组间存在一对多的映射关系时，不要将上下层状态打平到一起。
颜色：表示状态的颜色不建议超过「红色、橙色、绿色、蓝色、灰色」这 5 种。

原文地址：Ant_Design（站酷）

作者：林叶

转载请注明：学UI网》B类产品设计细节：流程状态

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

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

评论(0) 浏览(2837)

首页

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

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

什么是JSONP(⭐⭐⭐)

JSONP的实现原理(⭐⭐⭐)

什么是CORS(⭐⭐⭐⭐⭐)

下面分别向大家演示通过CORS和JSONP实现跨域的案例：

一、通过CORS中间件解决跨域问题 ：

二、通过JSONP中间件解决跨域问题 ：

文章目录

移动端网页特效

触屏事件

classList属性

常用开发插件

PC端网页特效

偏移量系列 offset

可视区系列 client

滚动系列 scroll

动画原理

1、抛开展开和收起

2、先场景后行为

3、展开然后收起

4、展开后不收起

最后

01 邻近色的定义

02 邻近色配色的方法

03 总结

邻近色配色实操-案例1

邻近色配色实操-案例2

邻近色配色实操-案例3

优秀作业展示

CSS Peeper

01.特殊质感

02.高饱和色彩

03.打破常规的排版

04.装饰性字体

01. 通过跨团队合作保证一致性

02. 通过全局联动形成品牌感

03. 通过IP符号打造形成记忆点

04. 赋予品牌温度和情感

05. 最后

状态的命名

按行业规则命名

围绕核心操作命名

状态的视觉设计

总结

分类

日历

链接

个人资料

存档

什么是`JSONP`(⭐⭐⭐)

`JSONP`的实现原理(⭐⭐⭐)

一、通过CORS中间件解决跨域问题：

二、通过JSONP中间件解决跨域问题：