首页

移动端、PC端 网页特效

前端达人

文章目录

移动端网页特效

触屏事件

移动端浏览器兼容性较好，不需要考虑以前 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区别：

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. 获得盒子当前位置
  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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
评论(0) 浏览(2162)

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

seo达人



图片

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

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

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

 

1、抛开展开和收起

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

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

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

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

 

2、先场景后行为

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

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

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

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

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

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

 

3、展开然后收起

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

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

图片

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

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

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

 

4、展开后不收起

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

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

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

 

最后

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

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

 

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

作者：Clippp

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

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

截屏2021-05-13 上午11.41.03.png

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

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




评论(0) 浏览(2002)

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

seo达人


图片
上图就是这个神器制作出来的一些效果，之前看Dribble上面有很多类似的设计，现在终于知道它们大部分来源于这个神器。
下面我也找了一些案例，大家一起来看看。
图片
图片
图片
这样看，效果还是真的不错，它支持颜色修改、样式修改，目前一共有11种几何样式。
图片
好了，现在下面正式介绍这个传说中的神器，我相信大家一定会喜欢上的。
图片
上图就是这个神器的基本外貌，一共11种基础类型，当点击其中一个进去后，可以进行编辑。
这里我点击上图中的第二个模式（MIXTAPE）进去。
图片
如果大家英文不好，可以将整个页面翻译成中文，Google自带的翻译。
进入这个页面，大家可以根据自己喜欢的风格调整样式，同时还可以修改颜色。
图片

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

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

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

图片

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

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

 

原文地址：功夫UX （公众号）
作者： 功夫UX
转载请注明：学UI网》2021 必备的超赞神器，用上它，效率都要提升三倍！！

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

截屏2021-05-13 上午11.41.03.png

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

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


评论(0) 浏览(1604)

配色不协调？来看看“邻近色”搭配

seo达人


01 邻近色的定义

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

图片

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

 

 

图片

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

图片

图片

图片

 

 

图片

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

图片

图片

 

 

图片

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

图片

图片

图片

 

 

图片

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

图片

图片

图片

 

 

图片

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

图片

图片

图片

 

 

图片

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

图片

图片

图片

图片

 

02 邻近色配色的方法

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

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

图片

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

图片

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

图片

图片

图片

 

03 总结

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

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

 

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

作者：邓海贝

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

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

截屏2021-05-13 上午11.41.03.png

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

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



评论(0) 浏览(5694)

学会“邻近色”配色，搞定配色难题（实操篇）

seo达人



图片

 

邻近色配色实操-案例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设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

截屏2021-05-13 上午11.41.03.png

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

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



评论(0) 浏览(6418)

资源分享｜两款B端设计走查神器

seo达人

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

截屏2021-05-13 上午11.41.03.png

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

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



评论(0) 浏览(2247)

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

seo达人


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

图片

 

01.特殊质感

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

图片

图片

图片

图片

图片

图片

图片

图片

图片

 

02.高饱和色彩

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

图片

图片

图片

图片

图片

图片

图片

图片

q

03.打破常规的排版

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

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

图片

图片

图片

图片

图片

图片

图片

d

04.装饰性字体

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

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片


 

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

作者：设计师深海

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

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

截屏2021-05-13 上午11.41.03.png

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

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



评论(0) 浏览(1892)

腾讯设计了一朵小红花，也太好看了吧！

seo达人


在腾讯公司滨海总部的公益文创市集上，看到一组设计，这些都是来自腾讯的设计师与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公益日的主视觉上，可以看到无数爱心化为花瓣，汇聚成一朵小红花。这是小红花形象第一次登上腾讯公益的平台。

图片

欢迎围观小红花的首支散装舞蹈。#99公益日 热情似火，遇到我就别错过我！攒小红花能赢更多配捐，还可以兑换福利哟！

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

图片

图片

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

图片

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

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

d

05.  最后 

图片

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


图片


g

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

作者：sky

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

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

截屏2021-05-13 上午11.41.03.png

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

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



评论(0) 浏览(2579)

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

seo达人

 

状态的命名

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

 

按行业规则命名

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

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

 

围绕核心操作命名

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

单个核心操作

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

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

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

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

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

 

多个核心操作

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

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

 

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

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

 

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

 

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

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

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

 

状态的视觉设计

状态的颜色

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

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

 

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

 

状态标签的样式

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

 

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

 

总结

  • 原则：流程状态的设计原则与人机交互的最根本原则一致：以用户为中心。
  • 命名：
  1. 在流程完成之前的中间过程中，告知用户下一步待执行的操作，比上一步刚刚完成哪个更重要；
  2. 在角色多、极易混淆的情况下建议在状态名上增加角色名；
  3. 同一阶段时，不建议区分不同用户角色看到的状态名，可以给他们不同的反馈或提醒。
  4. 专业工具或平台中，如果有行业约定俗成的术语来命名状态，则遵照行业规则。
  • 关系：状态组间存在一对多的映射关系时，不要将上下层状态打平到一起。
  • 颜色：表示状态的颜色不建议超过「红色、橙色、绿色、蓝色、灰色」这 5 种。

 

原文地址：Ant_Design（站酷）

作者： 林叶

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

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

截屏2021-05-13 上午11.41.03.png

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

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



评论(0) 浏览(2242)

【产品体验设计】-设计实践篇

seo达人


图片

对外行业角度+对内产品角度 

图片

◆对外行业角度：

每一个产品都会经历不同的成长阶段，由萌芽期-成长期-成熟期-衰退期。几乎所有产品都会想办法去延长整个生命周期，尤其是在成长期和成熟期这两个阶段。腾讯动漫11年成立，经历了快速的成长期之后，已经逐步进入成熟期阶段。
 

漫画行业近几年属于红海市场，随着行列竞争日益激烈，除了腾讯动漫国内市场上也出现了不少头部动漫产品如快看漫画、哔哩哔哩漫画、咚漫漫画等，加上短视频冲击，导致动漫内容整体大盘逐步开始出现被分流的状态，这是从行业角度能够观察到的行业形态上的变化。 

◆对内产品角度：

随着整体用户基数平稳且大盘逐步分流，腾讯动漫近几年数据已经逐步开始出现下滑的趋势，产品开始面临数据提升和营收增长的两大难题。 
 

图片

行业+数据+用户 

图片

通过行业趋势的变化和产品内部数据表现可以发现产品目前处于生命周期的哪一个阶段，但想要了解产品具体滑落的原因，还需要进一步对问题进行定位和分析。 

◆外部竞争：

横向了解自己产品所处的环境以及竞争对手可以帮助判断产品发展趋势。我们对市面上分流产品都做了调研，发现外部除了同类内容型产品，短视频产品冲击最为剧烈，抖音快手分流严重。同时，在内容行业这片红海也涌现出了非常多的漫画类型产品，同类竞争非常激烈，产品形态和内容题材同质化越来越严重。 

◆内部困境：

纵向知道自身产品的运转逻辑以及长短板有助于站在业务角度去思考问题。漫画是内容型产品，除了自制，大多数内容依靠采买，版权成本投入非常高；相比小说这类文字内容，漫画的制作时间周期长，更新频率相对比较慢；以及漫画作为娱乐内容产业，并不是日常功能类的刚需型产品，可被替代性成本很低；这些都是我们产品面临的客观问题。

◆数据拆分：

除了对于产品大盘数据起伏有基础的了解，更需要知道产品每一个模块儿具体数据变化，以便了解用户在产品各个场景的使用情况和具体问题。通过对腾讯动漫用户产品使用路径分段拆分，能够从：用户新进-内容消费-评论互动等不同场景数据分析能够看出用户的整体活跃度有明显下降。

◆用户分层：

通过对产品各场景数据模块儿的拆分能够了解用户使用产品情况，如果想要进一步知道为什么这些数据会发生变化，就需要从使用者本身，也就是用户角度来进行具体分析。

 
每一年我们都会对平台用户做调研，多年来平台用户属性基本上已经固定，分为题材型用户、消遣型用户、拓展型用户、成熟型用户。这四类用户在我们平台对于找漫画，看漫画以及漫画内容消费上都有很多诉求点是我们平台没有满足的，这也是导致我们产品数据和口碑不断下降的核心原因。 
通过将从行业数据用户三个维度分析的问题进行汇总提炼，找到目前产品存在的痛点和短板。 

图片

明确目标+目测拆解+设计策略 

明确产品存在的痛点之后，核心要做的事情就是寻求解决这些痛点的方案，这些解决方案可能并不是直接和设计关联的，以及在解决方案方向比较模糊的情况下我们如何准确定位到设计目标并执行具体实施策略非常关键。  

图片

◆明确目标： 

产品体验设计的价值核心体现在两个方面：1 帮助业务更好达成目标；2 给用户带来体验价值。体验设计在制定目标的时候，会围绕这两点去进行切入。通过前期对于产品问题定位发现从行业、数据、用户等不同维度分析出来的问题可以归类为两大类：业务诉求和用户需求。再根据这两大类问题结合我们产品实际情况分析出目前需要解决的问题是：1提升产品用户价值；2实现产品数据的增长；而设计目标就是通过设计手段去实现这两点。 

图片

◆目标拆解：

设计目标的明确决定项目在上的设计方向和预期，要找到设计着力点还需要进行目标拆解，根据不同目标制定不同的设计策略。腾讯动漫是内容型产品，我们根据用户使用行为梳理了用户在产品时的内容消费模型（吸引-感兴趣-体验-满足-留存）。这个模型和用户体验地图类似，用户在不同阶段所关注的核心点以及体验诉求会发生变化，所以我们将模型进行分段拆分，分为前期内容基础体验和后期消费转化两个部分，并且针对这两个部分不同体验场景进行要点提炼。 

图片

◆设计策略：

有了设计目标和内容体验模型，如何让两者有效的结合起来形成可推动落地的方案，就是设计策略要做的核心内容。

 
前面将内容消费模型拆解为基础体验和消费转化，分为两个不同的内容消费阶段，设计策略要做的是将设计目标和不同的内容消费阶段进行结合，形成产品体验模型。整个体验策略优化我们核心要做两件事情： 
 
  • 1基础体验升级，通过满足用户在不同场景下的体验诉求，提升产品对于用户的体验价值。
 
  • 2消费转化部分，基于用户内容消费阅读路径，建立付费转化机制，从而带来付费营收的增长，实现产品商业化闭环。 

图片    

设计策略明确后，接下来就是可落地的设计方案。设计方案是围绕设计策略进行的颗粒度拆分，拆分下来你会发现围绕基础体验和消费转化会有很多可以做的内容，不可能保证所有的点我们都能做完且起到有效的作用。所以对于设计方案的执行，也需要进行优先级的排序和筛选。
 
腾讯动漫的内容型产品，回归用户使用产品本质需求，就是找内容和看内容，围绕这两个关键点再去细分用户使用产品的过程中，核心关注的体验点是什么，再围绕这些体验点，找到问题并且制定设计方案逐一优化。 
 

图片

◆基础体验

基于内容消费模型，我们分别对用户寻找内容进行了：视觉聚焦-建立视觉降噪体系、内容识别-加强内容拓展性、信息决策-提供有效决策信息等不同策略的优化。 

图片

◆视觉聚焦-建立视觉降噪体系

首先是色彩和设计样式上做减法，再根据简化后的色彩和样式搭建了图形体系、图标、插画体系，用在产品全局的视觉降噪体系上。 

图片

◆内容识别-加强内容拓展性

从品类拓展和特性打造入手。首先是结构的拓展，3种增加到9种，并且可以在首页随意组合，提升内容组成的多样性。内容模块儿的特性上，根据模块儿不同内容属性进行了重新打造，调整后数据效果非常不错。 

图片

◆信息决策-提供有效决策信息

为了提升决策效率，我们在内容筛选和决策上做了比较大的调整。对排行榜的结构和信息组成都进行了大的调整，对分类标签进行了优化，作品标签由官方维度转换为了用户维度和作品维度，同时除了配置官方分类标签以外，新增符合用户认知和当下潮流的个性化分类标签。 

图片

排行榜以前榜单形式是固定且单一的，在拓展性，品类以及公信力上都会有很多的问题。为了提升筛选效率，我们将排行榜单重新梳理，采用纵向结构满足不同绑带配置诉求；同时将榜单进行拓充，新增不同维度的榜单丰富榜单品类；在每个上榜作品上添加了作品评分以及用户评论数，提升榜单公信力。 

图片

然后是详情页决策，从页面底层结构开始着手开始梳理，用户访谈发现，线上详情页结构和用户视角的结构重合度非常低，于是我们对详情页架构进行了优化调整，新版的详情页架构结构顺序以及信息层级上，都更符合用户的认知。在整个决策过程中，我们通过优化详情页信息结构，在用户浏览过程中用不断吸引-刺激-加强用户的决策，更有效提升决策效率。 

图片

基础体验的第二部分是看内容，对于看内容的体验，我们基于漫画内容特性和用户核心的操作体验去进行了在观看体验和阅读操作上的体验优化。 

图片

图片

图片

图片

首先是观看，要想把观看体验做好，必须要有优质的内容品质，这里我们做了三点优化：
 
  • 第一点是终端适配，将传统页漫去进行条漫的分镜优化，让其更好的适配手机阅读体验；
 
  • 第二点是画质赛选，淘汰掉小尺寸的漫画图源，新增800PX以上高清图源，确保显示清晰度；
 
  • 第三点是建立后台上传系统，规范上传的尺寸、格式、以及大小等，从根源去解决漫画品质的问题。 
   

看内容第二个核心环节是操作，对整个浏览器的色调进行了轻量化设计，提升沉浸式观感和舒适度。同时，简化了信息栏结构，并且将高频操作提核，提升操作效率和易用性。 

图片

图片  

基础体验上，我们根据用户找内容和看内容的不同场景，进行体验的优化，提升产品对于用户的使用价值，也为我们后续进行进一步的内容消费转化，提供了契机。

图片

  图片

◆付费转化

我们根据用户找内容和看内容的不同场景，进行了基础体验的优化，提升产品对于用户的使用价值，也为我们后续进行进一步的内容消费转化，提供了契机。

良性的消费转化机制建立是我们的第二大设计核目标，基于用户内容消费路径建立付费转化机制。根据用户阅读路径下的体验地图，分析他们不同阶段的核心诉求，从而找到设计机会点，再将设计机会点转化成设计目标，从而制定设计策略。分别在用户阅读内容的不同阶段对用户进行付费转化上的引导刺激以及养成。 

图片

 这里结合实际输出案例具体分析下：我们根据用户阅读路径分为阅读前、阅读中、阅读后，分别在不同阶段根据用户不同诉求去进行设计目标制定和方案实施。 

图片

图片

阅读前-阅读前核心诉求是去引导消费，从其他场景进入浏览页，用户最直接的目标是希望能够尽快看到内容，所以获取内容的效率非常重要。我们将以前的支付跳转页面，改为支付弹层，并且将所有付费信息整合分层，最大化提升用户付费效率，帮助用户快速获取内容；针对用户对于付费的抵触心理，采用情感化的设计，在弹窗上加入了品牌形象，并从创作者口吻弱化官方盈利感知，同时也为用户提供非付费的观看途径，平衡用户心理预期。 

图片

阅读中-在阅读中，核心目的是去刺激用户消费，刺激用户消费需要从内容本身去挖掘用户的消费点。这里做了两点优化：第一，优化弹幕交互形式，新增表情互动功能，用户可以直接发布表情包代替文字弹幕，降低弹幕互动门槛；第二提供个性化弹幕皮肤，皮肤有主题性质和IP维度，用户可以根据自己喜好调选各自风格或者不同作品人物的弹幕皮肤，满足用户个性化定制需求。 

图片

阅读后– 最后是阅读完作品后的消费养成，我们尝试去搭建用户的荣誉体系，首先增加针对作品的打赏道具，用户可以根据自己喜好去对作品进行打赏或者吐槽，满足用户对于作品的情感宣泄。同时我们也进行了荣誉体系的搭建，对整个等级体系进行升级，以前我们等级感知，趣味性都很差。于是针对等级体系，我们开展了全民共创模式，在用户群体中去征集关于等级的创意想法，强化参与感。新版等级新增6种不同特殊样式，强化不同等级之间的差异感，刺激用户升级的活跃度。最后会设计用户专属个人等级卡片和打赏榜，满足个人成就感，加强用户对于荣誉体系的粘性。 

图片

 
方案呈现-最后将整体方案做成高保证DEMO，预览实现效果，同时也更方便和产品以及开发同学理解，有助于方案更好落地。

图片

设计体系搭建 

图片

图片

图片

在设计方案落地实现的过程中，经常会遇到两类问题：

  • 1.是设计上下游协同过程效率得不到有效保证。
  • 2.实现过程中设计方案的还原偏差。为了解决这两个问题我们进行了设计体系的初步搭建。首先，为了确保设计语言的一致性，我们提前制定了视觉规范；其次，也将部分模块组件化封装上传到协同平台形成组件库，做到随用随取；然后，在协同上利用智能标注软件和切图软件，效率高且精准的解决开发实现还原的问题；通过设计系统的完善，去提升项目的实现能力和协作效率。 

图片

数据+专业+口碑 

图片

设计师经常面临的一个难题就是项目设计完成后，设计价值无法得到有效的量化。设计相对比较主观，比较难有客观的量化结果体验好与不好，但也能够通过一些不同的维度来判断一个设计作品好与不好。这些维度可以是产品角度的可用性测试、用户角度是口碑测评、内部自查角度的项目复盘总结、以及相关专业人士或者干系人的角度的建议等。

 

主观维度：

我们进行了可用性测试，用户评论调研，也将项目整体设计思路进行相应总结，并且通过和公司内外各界专业人士进行交流获取反馈。

 

在客观角度：

从整体数据效果这块儿看，改版后这半年，我们会密切关注DAU的变化趋势，同时将整体数据拆进行分段分析，对比之前不同体验阶段数据有无明显变化，用以来评判设计改版后在数据上的有效性。
收到的设计反馈信息是单一面或者单角度时，好与不好的判断相对片面，如果能够从多方不同维度收集设计反馈，信息面相对会更全面，也能够为后续迭代提供更多的切入点。 

 

– 本文小结 –

图片

通过洞察-分析-制定清晰的用户体验策略，在设计方案推动的时候确保项目实现能力以及协调效率，最后对项目进行全面的验证，形成闭环。是产品体验设计师需要构建的能力体系，也是设计为产品创造价值的链条。这是关于产品体验的整体内容。很重要的一点：任何好产品都离不开持续迭代。

z

原文地址：TCD设计中心（公众号）

作者： OUOU

转载请注明：学UI网》【产品体验设计】-设计实践篇

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

截屏2021-05-13 上午11.41.03.png

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

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



评论(0) 浏览(1623)

分类

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档