首頁

移動(dòng)端、PC端 網(wǎng)頁特效

前端達(dá)人

移動(dòng)端網(wǎng)頁特效

觸屏事件

移動(dòng)端瀏覽器兼容性較好，不需要考慮以前 JS 的兼容性問題，可以放心的使用原生 JS 書寫效果，但是移動(dòng)端也有自己獨(dú)特的地方。比如觸屏事件 touch（也稱觸摸事件），Android 和 IOS 都有。

touch 對(duì)象代表一個(gè)觸摸點(diǎn)。觸摸點(diǎn)可能是一根手指，也可能是一根觸摸筆。觸屏事件可響應(yīng)用戶手指（或觸控筆）對(duì)屏幕或者觸控板操作。

常見的觸屏事件：
在這里插入圖片描述
觸摸事件對(duì)象（TouchEvent）

TouchEvent 是一類描述手指在觸摸平面（觸摸屏、觸摸板等）的狀態(tài)變化的事件。這類事件用于描述一個(gè)或多個(gè)觸點(diǎn)，使開發(fā)者可以檢測(cè)觸點(diǎn)的移動(dòng)，觸點(diǎn)的增加和減少，等等

touchstart、touchmove、touchend 三個(gè)事件都會(huì)各自有事件對(duì)象。

觸摸事件對(duì)象常見對(duì)象列表：
在這里插入圖片描述
因?yàn)槠綍r(shí)都是給元素注冊(cè)觸摸事件，所以重點(diǎn)記住 targetTocuhes

移動(dòng)端拖動(dòng)元素JS代碼實(shí)現(xiàn)： 

// （1） 觸摸元素 touchstart：  獲取手指初始坐標(biāo)，同時(shí)獲得盒子原來的位置 // （2） 移動(dòng)手指 touchmove：  計(jì)算手指的滑動(dòng)距離，并且移動(dòng)盒子 // （3） 離開手指 touchend: var div = document.querySelector('div'); var startX = 0; //獲取手指初始坐標(biāo) var startY = 0; var x = 0; //獲得盒子原來的位置 var y = 0; div.addEventListener('touchstart', function(e) { //  獲取手指初始坐標(biāo) startX = e.targetTouches[0].pageX; startY = e.targetTouches[0].pageY; x = this.offsetLeft; y = this.offsetTop; }); div.addEventListener('touchmove', function(e) { //  計(jì)算手指的移動(dòng)距離： 手指移動(dòng)之后的坐標(biāo)減去手指初始的坐標(biāo) var moveX = e.targetTouches[0].pageX - startX; var moveY = e.targetTouches[0].pageY - startY; // 移動(dòng)我們的盒子 盒子原來的位置 + 手指移動(dòng)的距離 this.style.left = x + moveX + 'px'; this.style.top = y + moveY + 'px'; e.preventDefault(); // 阻止屏幕滾動(dòng)的默認(rèn)行為 }); 

    

    
  • 
        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新增的一個(gè)屬性。返回元素的類名，該屬性用在元素中添加、移除及切換CSS類 

<style> .bg { background-color: black; } </style> <body> <div class="one two"></div> <button> 開關(guān)燈</button> <script> // classList 返回元素的類名 var div = document.querySelector('div'); // console.log(div.classList[1]); // 1. 添加類名  是在后面追加類名不會(huì)覆蓋以前的類名 注意前面不需要加. 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
    
    •

常用開發(fā)插件

移動(dòng)端 要求的是快速開發(fā)，所以經(jīng)常會(huì)借助于一些插件來幫完成操作

JS 插件是 js 文件，它遵循一定規(guī)范編寫，方便程序展示效果，擁有特定功能且方便調(diào)用。如輪播圖和瀑布流插件

插件的使用：

  1. 引入 js 插件文件
  2. 按照規(guī)定語法使用

特點(diǎn)： 它一般是為了解決某個(gè)問題而專門存在，其功能單一，并且比較小。比如移動(dòng)端常見插件：iScroll、Swiper、SuperSlider

PC端網(wǎng)頁特效

偏移量系列 offset

offset 翻譯過來就是偏移量， 使用 offset 系列相關(guān)屬性可以 動(dòng)態(tài) 的得到該元素的位置（偏移）、大小等。

  • 獲得元素距離帶有定位父元素的位置
  • 獲得元素自身的大小（寬度高度）
  • 注意： 返回的數(shù)值都不帶單位

常用屬性：
在這里插入圖片描述
圖示：
在這里插入圖片描述

offset與style區(qū)別：

offset style
可以得到任意樣式表中的樣式值 只能得到行內(nèi)樣式表中的樣式值
offset系列獲得的數(shù)值是沒有單位的 style.width 獲得的是帶有單位的字符串
offsetWidth 包含padding+border+width style.width 獲得不包含padding和border 的值
offsetWidth 等屬性是只讀屬性，只能獲取不能賦值 style.width 是可讀寫屬性，可以獲取也可以賦值
獲取元素大小位置，用offset更合適 元素更改值，則需要用style改變

案例——獲取鼠標(biāo)在盒子內(nèi)的坐標(biāo)：

效果展示：
在這里插入圖片描述

實(shí)現(xiàn)代碼(JS)： 

// 在盒子內(nèi)點(diǎn)擊， 想要得到鼠標(biāo)距離盒子左右的距離。 // 首先得到鼠標(biāo)在頁面中的坐標(biāo)（ e.pageX, e.pageY） // 其次得到盒子在頁面中的距離(box.offsetLeft, box.offsetTop) // 用鼠標(biāo)距離頁面的坐標(biāo)減去盒子在頁面中的距離， 得到 鼠標(biāo)在盒子內(nèi)的坐標(biāo) 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坐標(biāo)是' + x + ' y坐標(biāo)是' + y; }) 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    •

案例——模態(tài)拖拽框：

  • 點(diǎn)擊彈出層， 會(huì)彈出模態(tài)框， 并且顯示灰色半透明的遮擋層。
  • 點(diǎn)擊關(guān)閉按鈕，可以關(guān)閉模態(tài)框，并且同時(shí)關(guān)閉灰色半透明遮擋層。
  • 鼠標(biāo)放到模態(tài)框最上面一行，可以按住鼠標(biāo)拖拽模態(tài)框在頁面中移動(dòng)。
  • 鼠標(biāo)松開，可以停止拖動(dòng)模態(tài)框移動(dòng)。

效果展示：
在這里插入圖片描述

實(shí)現(xiàn)代碼： 

<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:;">點(diǎn)擊，彈出登錄框</a></div> <div id="login" class="login"> <div id="title" class="login-title">登錄會(huì)員 <span><a id="closeBtn" href="javascript:void(0);" class="close-login">關(guān)閉</a></span> </div> <div class="login-input-content"> <div class="login-input"> <label>用戶名：</label> <input type="text" placeholder="請(qǐng)輸入用戶名" name="info[username]" id="username" class="list-input"> </div> <div class="login-input"> <label>登錄密碼：</label> <input type="password" placeholder="請(qǐng)輸入登錄密碼" 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">登錄會(huì)員</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. 點(diǎn)擊彈出層這個(gè)鏈接 link  讓mask 和login 顯示出來 link.addEventListener('click', function() { mask.style.display = 'block'; login.style.display = 'block'; }) // 3. 點(diǎn)擊 closeBtn 就隱藏 mask 和 login  closeBtn.addEventListener('click', function() { mask.style.display = 'none'; login.style.display = 'none'; }) // 4. 開始拖拽 // (1) 當(dāng)我們鼠標(biāo)按下， 就獲得鼠標(biāo)在盒子內(nèi)的坐標(biāo) title.addEventListener('mousedown', function(e) { var x = e.pageX - login.offsetLeft; var y = e.pageY - login.offsetTop; // (2) 鼠標(biāo)移動(dòng)的時(shí)候，把鼠標(biāo)在頁面中的坐標(biāo)，減去 鼠標(biāo)在盒子內(nèi)的坐標(biāo)就是模態(tài)框的left和top值 document.addEventListener('mousemove', move) function move(e) { login.style.left = e.pageX - x + 'px'; login.style.top = e.pageY - y + 'px'; } // (3) 鼠標(biāo)彈起，就讓鼠標(biāo)移動(dòng)事件移除 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
    
    •

可視區(qū)系列 client

client 翻譯過來就是客戶端，使用 client 系列的相關(guān)屬性來獲取元素可視區(qū)的相關(guān)信息。通過 client 系列的相關(guān)屬性可以動(dòng)態(tài)的得到該元素的邊框大小、元素大小等。

常用屬性：
在這里插入圖片描述
client和offset最大的區(qū)別就是 ：不包含邊框
圖示：
在這里插入圖片描述

滾動(dòng)系列 scroll

scroll 翻譯過來就是滾動(dòng)的，使用 scroll 系列的相關(guān)屬性可以動(dòng)態(tài)的得到該元素的大小、滾動(dòng)距離等。

常用屬性：
在這里插入圖片描述
圖示：
在這里插入圖片描述

滾動(dòng)條：

  • 如果瀏覽器的高（或?qū)挘┒炔蛔阋燥@示整個(gè)頁面時(shí)，會(huì)自動(dòng)出現(xiàn)滾動(dòng)條。
  • 當(dāng)滾動(dòng)條向下滾動(dòng)時(shí)，頁面上面被隱藏掉的高度，稱為頁面被卷去的頭部。
  • 滾動(dòng)條在滾動(dòng)時(shí)會(huì)觸發(fā) onscroll 事件。

案例——固定右側(cè)側(cè)邊欄：

  • 原先側(cè)邊欄是絕對(duì)定位
  • 當(dāng)頁面滾動(dòng)到一定位置，側(cè)邊欄改為固定定位
  • 頁面繼續(xù)滾動(dòng)，會(huì)讓 返回頂部顯示出來

效果展示：
在這里插入圖片描述

實(shí)現(xiàn)代碼： 

<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">頭部區(qū)域</div> <div class="banner w">banner區(qū)域</div> <div class="main w">主體部分</div> <script> //1. 獲取元素 var sliderbar = document.querySelector('.slider-bar'); var banner = document.querySelector('.banner'); // banner.offestTop 就是被卷去頭部的大小 一定要寫到滾動(dòng)的外面 var bannerTop = banner.offsetTop // 當(dāng)側(cè)邊欄固定定位之后應(yīng)該變化的數(shù)值 var sliderbarTop = sliderbar.offsetTop - bannerTop; // 獲取main 主體元素 var main = document.querySelector('.main'); var goBack = document.querySelector('.goBack'); var mainTop = main.offsetTop; // 2. 頁面滾動(dòng)事件 scroll document.addEventListener('scroll', function() { // window.pageYOffset 頁面被卷去的頭部 // console.log(window.pageYOffset); // 3 .當(dāng)頁面被卷去的頭部大于等于了 172 此時(shí) 側(cè)邊欄就要改為固定定位 if (window.pageYOffset >= bannerTop) { sliderbar.style.position = 'fixed'; sliderbar.style.top = sliderbarTop + 'px'; } else { sliderbar.style.position = 'absolute'; sliderbar.style.top = '300px'; } // 4. 當(dāng)我們頁面滾動(dòng)到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
    
    •

三大系列作用區(qū)別：
在這里插入圖片描述

它們主要用法：

系列 作用 屬性
offset 用于獲得元素位置 offsetLeft offsetTop
client 用于獲取元素大小 clientWidth clientHeight
scroll 用于獲取滾動(dòng)距離 scrollTop scrollLeft

注意：頁面滾動(dòng)的距離通過 window.pageXOffset 獲得

動(dòng)畫原理

核心原理：通過定時(shí)器 setInterval() 不斷移動(dòng)盒子位置

實(shí)現(xiàn)步驟：

  1. 獲得盒子當(dāng)前位置
  2. 讓盒子在當(dāng)前位置加上1個(gè)移動(dòng)距離
  3. 利用定時(shí)器不斷重復(fù)這個(gè)操作
  4. 加一個(gè)結(jié)束定時(shí)器的條件
  5. 注意此元素需要添加定位，才能使用 element.style.left

簡(jiǎn)單動(dòng)畫函數(shù)封裝： 

// 簡(jiǎn)單動(dòng)畫函數(shù)封裝obj目標(biāo)對(duì)象 target 目標(biāo)位置 function animate(obj, target) { var timer = setInterval(function() { if (obj.offsetLeft >= target) { // 停止動(dòng)畫 本質(zhì)是停止定時(shí)器 clearInterval(timer); } //每次均勻向右移動(dòng)1px obj.style.left = obj.offsetLeft + 1 + 'px'; }, 30); } 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    •

緩動(dòng)效果原理：

緩動(dòng)動(dòng)畫就是讓元素運(yùn)動(dòng)速度有所變化，最常見的是讓速度慢慢停下來

  1. 讓盒子每次移動(dòng)的距離慢慢變小，速度就會(huì)慢慢落下來。
  2. 核心算法： (目標(biāo)值 - 現(xiàn)在的位置 ) / 10 做為每次移動(dòng)的距離步長
  3. 停止的條件是： 讓當(dāng)前盒子位置等于目標(biāo)位置就停止定時(shí)器
  4. 注意步長值需要取整 
// 緩動(dòng)動(dòng)畫函數(shù)封裝obj目標(biāo)對(duì)象 target 目標(biāo)位置 // 思路： // 1. 讓盒子每次移動(dòng)的距離慢慢變小， 速度就會(huì)慢慢落下來。 // 2. 核心算法：(目標(biāo)值 - 現(xiàn)在的位置) / 10 做為每次移動(dòng)的距離 步長 // 3. 停止的條件是： 讓當(dāng)前盒子位置等于目標(biāo)位置就停止定時(shí)器 function animate(obj, target) { // 先清除以前的定時(shí)器，只保留當(dāng)前的一個(gè)定時(shí)器執(zhí)行 clearInterval(obj.timer); obj.timer = setInterval(function() { // 步長值寫到定時(shí)器的里面 var step = (target - obj.offsetLeft) / 10; if (obj.offsetLeft == target) { // 停止動(dòng)畫 本質(zhì)是停止定時(shí)器 clearInterval(obj.timer); } // 把每次加1 這個(gè)步長值改為一個(gè)慢慢變小的值  步長公式：(目標(biāo)值 - 現(xiàn)在的位置) / 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
    
    •

多個(gè)目標(biāo)值之間移動(dòng)：

當(dāng)開始移動(dòng)時(shí)候，判斷步長是正值還是負(fù)值

  • 如果是正值，則步長 往大了取整
  • 如果是負(fù)值，則步長 向小了取整

動(dòng)畫函數(shù)封裝到單獨(dú)JS文件： animate.js 

function animate(obj, target, callback) { // 先清除以前的定時(shí)器，只保留當(dāng)前的一個(gè)定時(shí)器執(zhí)行 clearInterval(obj.timer); obj.timer = setInterval(function() { // 步長值寫到定時(shí)器的里面 // 把步長值改為整數(shù) 不要出現(xiàn)小數(shù)的問題 // 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) { // 停止動(dòng)畫 本質(zhì)是停止定時(shí)器 clearInterval(obj.timer); // 回調(diào)函數(shù)寫到定時(shí)器結(jié)束里面 // if (callback) { //     // 調(diào)用函數(shù) //     callback(); // } callback && callback(); } // 把每次加1 這個(gè)步長值改為一個(gè)慢慢變小的值  步長公式：(目標(biāo)值 - 現(xiàn)在的位置) / 10 obj.style.left = obj.offsetLeft + step + 'px'; }, 15); }


    藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。





    





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





    轉(zhuǎn)自：csdn
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 





    藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
評(píng)論(0) 瀏覽(2107)

展開全文后需要支持收起嗎？從運(yùn)用場(chǎng)景分析交互邏輯

seo達(dá)人



圖片

展開和收起屬于比較細(xì)節(jié)的問題，按照慣性思維，內(nèi)容多了我就折疊一部分，用戶需要看更多內(nèi)容就點(diǎn)擊「展開」，內(nèi)容展開之后，相應(yīng)的還應(yīng)該支持內(nèi)容的「收起」。

整個(gè)流程這樣看起來沒什么毛病，但是卻缺少一個(gè)重要的前提，哪些場(chǎng)景或者什么情況下才需要展開或收起呢？

如果只是單純給出一個(gè)流程，顯然缺乏對(duì)產(chǎn)品邏輯和用戶體驗(yàn)上的思考?？赡芎芏嘣O(shè)計(jì)師之前沒怎么注意過這個(gè)地方的交互邏輯，或者深入思考需要注意的問題，這次借著答疑的機(jī)會(huì)咱們一起來深入探討下。

 

1、拋開展開和收起

雖然提出的問題是分析展開和收起的運(yùn)用場(chǎng)景，但是我覺得不應(yīng)該一上來就陷入到具體的細(xì)節(jié)里。

這個(gè)問題相對(duì)來說屬于比較小的點(diǎn)，直接鉆到細(xì)節(jié)里會(huì)讓我們只盯著這一小部分，缺少對(duì)全局的思考，因小失大。

盯著已有的設(shè)計(jì)進(jìn)行推導(dǎo)，這樣多少帶有個(gè)人主觀的臆想。先不要盯著具體的展開和收起功能來想場(chǎng)景，反過來想，在設(shè)計(jì)過程中有哪些地方需要這樣的交互邏輯，為什么需要呢？

無論面對(duì)什么樣的設(shè)計(jì)需求，這樣的思考過程會(huì)一直伴隨著我們。

 

2、先場(chǎng)景后行為

先回到場(chǎng)景上，考慮哪些場(chǎng)景會(huì)觸發(fā)「展開和收起」行為，再具體問題具體分析。

場(chǎng)景一：當(dāng)某段內(nèi)容字?jǐn)?shù)太多，占據(jù)了大面積的空間，如果用戶不想看這些長篇大論，想看下一個(gè)內(nèi)容，要滑動(dòng)屏幕很久才能略過這些內(nèi)容，顯然我們不想給用戶帶來這樣的操作負(fù)擔(dān)，這時(shí)候就可以考慮添加收起功能，把多余的內(nèi)容收起來。

這里的收起需要注意兩點(diǎn)：

  • 內(nèi)容被收起不代表被收起的內(nèi)容不重要；
  • 收起相對(duì)節(jié)約屏幕空間，用戶更方便上下滑動(dòng)查看內(nèi)容。

場(chǎng)景二：頁面上仍然有很多內(nèi)容，但是這些內(nèi)容有主次之分，我們想讓用戶最先看到前面的內(nèi)容，后面的內(nèi)容可以考慮收起來突出重點(diǎn)并節(jié)省空間。

這里的收起就和場(chǎng)景一有差異，可能被收起的內(nèi)容相對(duì)沒這么重要，只露出重點(diǎn)/熱點(diǎn)內(nèi)容或權(quán)益來吸引用戶，相對(duì)次要的內(nèi)容被收起，這里的收起會(huì)涉及到內(nèi)容重要程度的排序，這種排序就可以體現(xiàn)在排行榜設(shè)計(jì)中。

 

3、展開然后收起

展開和收起屬于一組行為，看到展開我們必然會(huì)聯(lián)想到收起。展開是為了看到完整的內(nèi)容，收起則是內(nèi)容看完的標(biāo)志，點(diǎn)擊收起可以繼續(xù)下一個(gè)內(nèi)容。

在知乎問答中，我們首先看到的是標(biāo)題的問題，這些問題往往言簡(jiǎn)意賅，通常光看標(biāo)題我們就能知道這個(gè)問題想表達(dá)什么意思。

圖片

▲ 標(biāo)題下面的問題簡(jiǎn)介是對(duì)標(biāo)題的進(jìn)一步解釋和補(bǔ)充，這里的簡(jiǎn)介作為說明性文字，就支持展開和收起。當(dāng)簡(jiǎn)介內(nèi)容太多時(shí)，就要考慮折疊一部分簡(jiǎn)介，這樣能保證在首屏上能同時(shí)看到問題和答案。

另外當(dāng)內(nèi)容很多，以信息流的形式呈現(xiàn)，并且需要上下滑動(dòng)來瀏覽時(shí)，就可以考慮使用現(xiàn)展開后收起。

比如在微信朋友圈，如果文字內(nèi)容較多，就會(huì)被收起一部分，想看完整的內(nèi)容則需要點(diǎn)擊「全文」選項(xiàng)，看完后點(diǎn)擊「收起」，內(nèi)容就會(huì)被折疊起來，方便我們繼續(xù)滑動(dòng)瀏覽其他朋友圈。

 

4、展開后不收起

點(diǎn)完展開看到了全部?jī)?nèi)容，卻沒有收起選項(xiàng)，但是這樣并不影響我們的觀看體驗(yàn)，而且展開這個(gè)動(dòng)作給用戶和頁面帶來的反應(yīng)都很小，不會(huì)讓用戶感到不適。之所以選擇「展開」，一個(gè)重要的原因是因?yàn)槲覀?strong>有想看完整內(nèi)容的強(qiáng)烈需求。在這種意愿的號(hào)召下，我們會(huì)毫不猶豫地選擇展開功能。圖片

▲ 在豆瓣電影介紹頁中，在劇情簡(jiǎn)介區(qū)域會(huì)有「展開」提示，如果我們選擇展開，說明我們有觀看完整簡(jiǎn)介的意愿，并且是主動(dòng)選擇展開，不添加「收起」選項(xiàng)正好避免了給我們?cè)黾硬僮魃系呢?fù)擔(dān)。

另外，當(dāng)內(nèi)容相對(duì)沒那么多，能在一屏上顯示，不需要用戶上下滑動(dòng)太多時(shí)，可以考慮省去收起，比如在QQ群介紹、抖音個(gè)人頁的簡(jiǎn)介等。

 

最后

以上是我對(duì)展開和收起的運(yùn)用場(chǎng)景的一些小思考，主要從場(chǎng)景角度來考慮交互邏輯。

授人以魚不如授人以漁，關(guān)于展開和收起的場(chǎng)景還有很多，希望大家能掌握這樣的思考邏輯，去發(fā)掘更深層的設(shè)計(jì)內(nèi)容，當(dāng)然有問題咱們可以隨時(shí)溝通～

 

原文地址：Clip設(shè)計(jì)夾（公眾號(hào)）

作者：Clippp

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》展開全文后需要支持收起嗎？從運(yùn)用場(chǎng)景分析交互邏輯

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)




評(píng)論(0) 瀏覽(1965)

2021 必備的超贊神器，用上它，效率都要提升三倍??！

seo達(dá)人


圖片
上圖就是這個(gè)神器制作出來的一些效果，之前看Dribble上面有很多類似的設(shè)計(jì)，現(xiàn)在終于知道它們大部分來源于這個(gè)神器。
下面我也找了一些案例，大家一起來看看。
圖片
圖片
圖片
這樣看，效果還是真的不錯(cuò)，它支持顏色修改、樣式修改，目前一共有11種幾何樣式。
圖片
好了，現(xiàn)在下面正式介紹這個(gè)傳說中的神器，我相信大家一定會(huì)喜歡上的。
圖片
上圖就是這個(gè)神器的基本外貌，一共11種基礎(chǔ)類型，當(dāng)點(diǎn)擊其中一個(gè)進(jìn)去后，可以進(jìn)行編輯。
這里我點(diǎn)擊上圖中的第二個(gè)模式（MIXTAPE）進(jìn)去。
圖片
如果大家英文不好，可以將整個(gè)頁面翻譯成中文，Google自帶的翻譯。
進(jìn)入這個(gè)頁面，大家可以根據(jù)自己喜歡的風(fēng)格調(diào)整樣式，同時(shí)還可以修改顏色。
圖片

比如我可以選擇8X12列和行的幾何布局。

圖片
對(duì)顏色、列和行、開啟陰影調(diào)整，得到如上效果。
圖片

最終可以導(dǎo)出一張高清大圖（3240X4860），尺寸是完全夠用的。

圖片

隨便調(diào)整下又是一張不錯(cuò)的幾何背景，還可以作為作品集封面。好了，關(guān)鍵時(shí)刻來了，神器的網(wǎng)址已經(jīng)打包好，大家可以拿去使用。

領(lǐng)取方式如下：添加小編微信，備注：神器699，小編會(huì)將下載地址發(fā)給你（小編不是機(jī)器人，回復(fù)會(huì)慢一些，大家稍等）。

 

原文地址：功夫UX （公眾號(hào)）
作者： 功夫UX
轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》2021 必備的超贊神器，用上它，效率都要提升三倍??！

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)


評(píng)論(0) 瀏覽(1573)

配色不協(xié)調(diào)？來看看“鄰近色”搭配

seo達(dá)人


01 鄰近色的定義

顧名思義鄰近色是色相環(huán)中色相相鄰的顏色，相對(duì)單色對(duì)比，鄰近色對(duì)比增加了色相對(duì)比，因此視覺效果更豐富。

圖片

鄰近色在色相上比較接近，色彩的冷暖屬性，還有情感特性上都比較類似，所以鄰近色搭配能很好的保持畫面的協(xié)調(diào)與統(tǒng)一，是設(shè)計(jì)中使用頻率最高的配色方案之一。

 

 

圖片

黃色與橙色相配具有很和諧的過渡感，由于橙色和黃色都非常明亮鮮艷，很容易營造出輕松快樂的氛圍，充滿活力，讓人興奮愉悅。

圖片

圖片

圖片

 

 

圖片

橙色和紅色是充滿活力和激情的顏色，經(jīng)常使用在促銷等表現(xiàn)出熱鬧、愉快氛圍的設(shè)計(jì)中。

圖片

圖片

 

 

圖片

紅色和紫色搭配是高彩度、但明度相當(dāng)?shù)偷纳蚀钆?，在使用上注意不宜讓畫面過度暗沉。最好適度地提高色彩的明度和搭配高明度的色彩來增加畫面上的層次感。具有浪漫、華麗、高貴感。

圖片

圖片

圖片

 

 

圖片

藍(lán)色和紫色明度很接近，對(duì)比比較柔和。神秘夢(mèng)幻的紫色搭配上和科技感十足的藍(lán)色，顯得十分前衛(wèi)時(shí)尚。是蒸汽波、波普藝術(shù)、賽博朋克等前衛(wèi)時(shí)尚風(fēng)格常用的配色。

圖片

圖片

圖片

 

 

圖片

藍(lán)色明度低，綠色明度高，所以藍(lán)綠配色即協(xié)調(diào)統(tǒng)一又有很強(qiáng)的對(duì)比。讓人聯(lián)想到藍(lán)天綠水之美，感到平靜，放松，給人清爽舒適感。

圖片

圖片

圖片

 

 

圖片

黃綠色是調(diào)和性相當(dāng)高的色彩組合，黃色搭配清新的綠色，是自然界中很常見的色彩組合，具有自然的呼喚感，新鮮而又清澈，顯得朝氣有活力。

圖片

圖片

圖片

圖片

 

02 鄰近色配色的方法

接下來使用在線配色工具：Adobe Color來進(jìn)行配色示范色。（網(wǎng)址：color.adobe.com）

在調(diào)色規(guī)則中選擇“類比”。使用橙色為基礎(chǔ)顏色，會(huì)自動(dòng)生成四個(gè)關(guān)聯(lián)顏色，篩選適合的顏色配置到畫面中，就能很快完成配色方案：

圖片

和單色系相比，鄰近色在色相方面會(huì)稍微豐富一些，但仍然存在色調(diào)過于單一、對(duì)比不夠的問題。一般會(huì)拉開顏色之間的明度或純度，形成明暗對(duì)比，襯托出主體。

圖片

鄰近色還可以結(jié)合不同明度和純度來使用，讓畫面呈現(xiàn)出層次變化，展現(xiàn)出不同的氣質(zhì)和視覺效果。

圖片

圖片

圖片

 

03 總結(jié)

鄰近色在色相上比較接近，色彩的冷暖屬性，還有情感特性上都比較類似，所以鄰近色搭配能很好的保持畫面的協(xié)調(diào)與統(tǒng)一，是設(shè)計(jì)中使用頻率最高的配色方案之一。

鄰近色存在色調(diào)過于單一、對(duì)比不夠的問題。一般會(huì)拉開顏色之間的明度或純度，形成明暗對(duì)比，襯托出主體。

 

原文地址：藝海拾貝Design（公眾號(hào)）

作者：鄧海貝

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》配色不協(xié)調(diào)？來看看“鄰近色”搭配

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)



評(píng)論(0) 瀏覽(5587)

學(xué)會(huì)“鄰近色”配色，搞定配色難題（實(shí)操篇）

seo達(dá)人



圖片

 

鄰近色配色實(shí)操-案例1

在PS中新建文件，背景選擇紅色，英文放大鋪滿背景，顏色選擇紅色的鄰近色橙色。

圖片

畫出白色圓角矩形，給矩形添加圖層樣式“描邊”和“投影”。描邊的填充類型選擇“漸變”，顏色選擇白色和淺橙色的漸變，模擬玻璃邊緣的厚度。

圖片

圖片

接下來制作毛玻璃效果。復(fù)制背景和文字圖層，合并為一個(gè)圖層。分別給此圖層添加三個(gè)濾鏡“模糊-高斯模糊”、“濾鏡庫-扭曲-玻璃”、雜色-添加雜色“，效果如下圖：

圖片

把圖層移動(dòng)到矩形圖層上方，按快捷鍵“ctrl+alt+g”建立剪切蒙版，使毛玻璃效果只在矩形范圍顯示。

圖片

最后加上文案排版，設(shè)計(jì)完成。

此案例使用了紅色和橙色的鄰近色配色，橙色和紅色是充滿活力和激情的顏色，能呈現(xiàn)出熱鬧、愉快的氛圍。

圖片

 

鄰近色配色實(shí)操-案例2

方案二，在PS中新建文件，在背景上用綠色和黃色的柔和畫筆隨機(jī)畫出顏色。

圖片

使用“模糊-高斯模糊”讓背景顏色更好的融合在一起，再執(zhí)行“雜色-添加雜色”給背景增添質(zhì)感。

圖片

圖片

圖片

最后加入文案，顏色采用綠色和黃色，明亮的黃色搭配清新的綠色，新鮮而又清澈，顯得朝氣有活力。

圖片

 

鄰近色配色實(shí)操-案例3

方案三，在AI中輸入英文，字體選擇一款設(shè)計(jì)感較強(qiáng)的“Current”做為主體。使用藍(lán)綠色搭配，藍(lán)色明度低，綠色明度高，所以藍(lán)綠配色即協(xié)調(diào)統(tǒng)一又有很強(qiáng)的對(duì)比。

圖片

把英文轉(zhuǎn)換為輪廓，給每個(gè)字母加上不同角度的漸變色，顏色沿用藍(lán)綠色。

圖片

最后加上文案，進(jìn)行排版，設(shè)計(jì)完成：

此案例使用了藍(lán)綠色的鄰近色配色，讓人聯(lián)想到藍(lán)天綠水之美，感到平靜，放松，給人清爽舒適感。

圖片

嘗試新的配色，使用藍(lán)色和紫色搭配。藍(lán)色和紫色明度很接近，對(duì)比比較柔和，具有神秘夢(mèng)幻感。

圖片

紅色和紫色搭配顯得浪漫、華麗、高貴。

圖片

 

優(yōu)秀作業(yè)展示

以下是從本期投稿中選取的11份優(yōu)秀作品：

01 『聰_cong』

圖片

 

02 Anna

圖片

 

03 NIAN廿七

圖片

 

04 NoctilucaGladys

圖片

 

05 Trista～Z

圖片

 

06 蛋蛋DAN

圖片

 

07 金角設(shè)計(jì)

圖片

 

08 孔艷茹

圖片

 

09 龍娟

圖片

 

10 珞影隨行

圖片

 

11 咪奧mao

圖片

 

原文地址：藝海拾貝Design（公眾號(hào)）

作者：鄧海貝

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》學(xué)會(huì)“鄰近色”配色，搞定配色難題（實(shí)操篇）

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)



評(píng)論(0) 瀏覽(6333)

資源分享｜兩款B端設(shè)計(jì)走查神器

seo達(dá)人

Copiexl

圖片

這是一款 字節(jié)跳動(dòng) 出品的高效走查插件，它的原理十分簡(jiǎn)單，首先打開需要校驗(yàn)的線上項(xiàng)目；接著上傳你的設(shè)計(jì)稿圖片；然后通過降低設(shè)計(jì)稿的透明度，達(dá)到項(xiàng)目快速走查的目的。開發(fā)哪里有問題，一眼便知。簡(jiǎn)單教大家如何 安裝使用 這樣一款插件：

圖片

 

1.安裝方法：

首先打開軟件的官方網(wǎng)站（https://copixel.bytedance.com/），點(diǎn)擊免費(fèi)下載（這里只支持Chrome瀏覽器，如果你是Safari 、Firefox、Opera等瀏覽器，在官網(wǎng)往下滾動(dòng)，同樣也是提供了下載入口）。

點(diǎn)擊下載過后，就會(huì)跳轉(zhuǎn)到 Google 的應(yīng)用商店當(dāng)中，點(diǎn)擊安裝即可，與瀏覽器插件的安裝方式類似（這里需要科學(xué)網(wǎng)絡(luò)，如果你訪問不了 Google應(yīng)用商店，可以直接在公眾號(hào)后臺(tái)回復(fù)“設(shè)計(jì)走查”，提供了另一種安裝方式）。

 

2.使用教程

01.選擇合適的頁面設(shè)計(jì)尺寸

建議按照主流窗口尺寸的寬度設(shè)計(jì)，如：1366px、1440px、1920px；推薦最小設(shè)計(jì)尺寸使用1366px、1440px，最大設(shè)計(jì)尺寸1920px(寬)。目的是按照 1:1 導(dǎo)出設(shè)計(jì)圖，與開發(fā)頁面顯示效果一致。

圖片

02.該如何輸出設(shè)計(jì)稿？

Copiexl 瀏覽器插件的原理是將你的設(shè)計(jì)稿 懸浮在前端還原的頁面當(dāng)中進(jìn)行對(duì)比，這樣就能快速知道自己的設(shè)計(jì)頁面有何問題。

因此我們需要將設(shè)計(jì)稿進(jìn)行一次性導(dǎo)出成 PNG 文件。這樣可以批量導(dǎo)入到插件當(dāng)中，直接切換設(shè)計(jì)稿提高走查效率。

03.如何使用

打開前端實(shí)現(xiàn)好的頁面，使用你剛剛安裝好的瀏覽器插件“Copixel”，添加UI設(shè)計(jì)圖。

通過調(diào)整設(shè)計(jì)圖位置、大小和透明度使其與開發(fā)頁面高度重合，配合 有截圖標(biāo)注功能的軟件（比如：Xinp）進(jìn)行找茬標(biāo)記。使用 走查文檔 標(biāo)記存在問題的地方并說明問題，這樣就能高效完成項(xiàng)目走查。

然后將有問題的走查內(nèi)容直接分享給開發(fā)即可。

 

插件使用的視頻方法：

轉(zhuǎn)載至Copiexl幫助文檔

 

CSS Peeper

這是一個(gè) 設(shè)計(jì)走查 / 樣式復(fù)制 / 資源下載 的效率神器，它能夠輕松查看網(wǎng)頁端當(dāng)中所有元素的CSS屬性，并且不需要像Chrome瀏覽器那樣 “右鍵” – “檢查” 瀏覽器元素，然后在許許多多的代碼當(dāng)中尋找你需要的CSS代碼。我們只需要點(diǎn)擊插件，選擇元素就能夠快速檢查樣式。

圖片

 

場(chǎng)景一、設(shè)計(jì)走查

比如當(dāng)前端工程師完成頁面過后，需要設(shè)計(jì)師進(jìn)行一個(gè)頁面的走查，這個(gè)時(shí)候很多同學(xué)往往就會(huì)靠著自己的像素眼進(jìn)行一一的比對(duì)，如果稍微有點(diǎn)經(jīng)驗(yàn)的B端設(shè)計(jì)師會(huì)打開瀏覽器自帶的檢查，進(jìn)行元素的核對(duì)。
然而瀏覽器自帶的檢查其實(shí)更多是面向程序員進(jìn)行設(shè)計(jì)的，對(duì)于我們?cè)O(shè)計(jì)師而言，能夠看懂的卻只有一小部分內(nèi)容，顯然檢查的效率并不會(huì)太高效。

圖片

這時(shí)候使用CSS Peeper，就可以輕松對(duì)網(wǎng)頁當(dāng)中的CSS樣式進(jìn)行檢查，我們不僅可以看到元素的常規(guī)屬性，比如顏色、背景、間距；還可以看到元素的盒子模型，可以看到元素的 Padding、Margin…

通過這個(gè)插件，就能清晰的看見開發(fā)究竟是在哪一部分還原出現(xiàn)問題，并且能夠很“欠揍”的在他面前秀一下～

圖片

 

場(chǎng)景二、樣式復(fù)制

對(duì)于設(shè)計(jì)師來說，就不用再去糾結(jié)競(jìng)品究竟是如何設(shè)計(jì)？如何還原出來，因?yàn)槿魏尉W(wǎng)頁上的元素，你都可以通過這個(gè)插件，去查看他的還原思路，并且知道它的設(shè)計(jì)樣式以及屬性
同時(shí)可以點(diǎn)擊顏色或者圖片，將該頁面用到的所有顏色或者圖片總結(jié)出來進(jìn)行匯總，可以導(dǎo)出，方便在設(shè)計(jì)風(fēng)格上進(jìn)行分析。

圖片

 

場(chǎng)景三：資源下載

使用CSS Peeper 能夠快速查看在該頁面當(dāng)中，所用到哪些圖標(biāo)、圖片。并且可以將這些資源快速下載到本地進(jìn)行保存。這樣你就可以成為資源小能手。

圖片

這也就是我工作當(dāng)中最常使用的插件，你最常使用什么插件？一起來分享聊聊??！

 

原文鏈接：CE青年（公眾號(hào)）

作者：CE青年

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》資源分享｜兩款B端設(shè)計(jì)走查神器

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)



評(píng)論(0) 瀏覽(2176)

火爆全網(wǎng)的酸性設(shè)計(jì)，你看懂了嗎？

seo達(dá)人


畢竟這種風(fēng)格的核心就是挑戰(zhàn)傳統(tǒng)的美感和欲望的定義。整個(gè)風(fēng)格迷幻抽象、打破常規(guī)、高度失真或者超現(xiàn)實(shí)的視覺風(fēng)格，完完全全地向觀者展現(xiàn)著一種潮流先鋒的態(tài)度。今天我們要聊一下酸性設(shè)計(jì)的主要特點(diǎn)，方便大家快速掌握！

圖片

 

01.特殊質(zhì)感

酸性設(shè)計(jì)中一個(gè)很重要的特點(diǎn)就是往往包含大量的特殊質(zhì)感，例如液態(tài)金屬、鐳射、鋁箔、玻璃、塑料或折射等等質(zhì)感。這些特殊質(zhì)感都給我們一個(gè)共同的感官，那就是科技感和未來感。這也是酸性設(shè)計(jì)之所以能代表潮流和先鋒很重要的原因之一。

圖片

圖片

圖片

圖片

圖片

圖片

圖片

圖片

圖片

 

02.高飽和色彩

酸性設(shè)計(jì)往往充斥著大量鮮艷、高飽和的色彩，包括各種高飽和度的漸變色、迷幻絢爛的霓虹色、讓人眩暈的熒光色等等。還常常配上暗黑的背景，畫面混亂又統(tǒng)一，充滿矛盾的迷幻感。這種讓人眩暈、充滿感官刺激、打破傳統(tǒng)美感標(biāo)準(zhǔn)的色彩，也充分體現(xiàn)了這種風(fēng)格的調(diào)性，充滿了探索的先鋒精神。

圖片

圖片

圖片

圖片

圖片

圖片

圖片

圖片

q

03.打破常規(guī)的排版

酸性設(shè)計(jì)的排版看起來很難找到固定的規(guī)律，充滿了隨機(jī)性，似乎毫無章法，同時(shí)畫面飽滿豐富。但是仔細(xì)觀察就會(huì)發(fā)現(xiàn)，它的構(gòu)圖方式其實(shí)是高度幾何化的，通過幾何圖形的不斷重復(fù)、剪切，形成看起來復(fù)雜無序的組合方式，從而體現(xiàn)酸性設(shè)計(jì)的流動(dòng)感。

酸性設(shè)計(jì)就是這樣通過破壞性的方式打破傳統(tǒng)對(duì)美感的定義，引領(lǐng)了潮流的定義、創(chuàng)造一種新奇又讓人欲罷不能的風(fēng)格。

圖片

圖片

圖片

圖片

圖片

圖片

圖片

d

04.裝飾性字體

酸性設(shè)計(jì)所采用的文字特點(diǎn)也十分鮮明，通常都十分具有裝飾性，造型或尖銳或富有流動(dòng)性，例如哥特風(fēng)字體等。搭配上如同被強(qiáng)酸腐蝕過后液態(tài)金屬的質(zhì)感，充斥著危機(jī)感和刺激感。

圖片

圖片

圖片

圖片

圖片

圖片

圖片

圖片

圖片

圖片

圖片


 

原文地址：設(shè)計(jì)師深海（公眾號(hào)）

作者：設(shè)計(jì)師深海

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》火爆全網(wǎng)的酸性設(shè)計(jì)，你看懂了嗎？

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)



評(píng)論(0) 瀏覽(1845)

騰訊設(shè)計(jì)了一朵小紅花，也太好看了吧！

seo達(dá)人


在騰訊公司濱海總部的公益文創(chuàng)市集上，看到一組設(shè)計(jì)，這些都是來自騰訊的設(shè)計(jì)師與WABC無障礙藝途的“小朋友”們一起創(chuàng)作的小紅花。這些對(duì)小紅花豐富的場(chǎng)景想象里，充滿了愛，充滿了溫度。提到設(shè)計(jì)，大家這幾年聊的比較多的UX設(shè)計(jì)、UI設(shè)計(jì)，但是對(duì)于公益設(shè)計(jì)卻關(guān)注不多，公益設(shè)計(jì)相對(duì)于產(chǎn)品設(shè)計(jì)不同，它的每個(gè)設(shè)計(jì)背后都有一個(gè)動(dòng)人的故事，今天我們一起來聊一聊公益設(shè)計(jì)?？纯从心男┎灰粯拥牡胤剑拷裉煳夷脴I(yè)內(nèi)做的比較好的，騰訊公益的99公益日為案例，和大家聊聊公益設(shè)計(jì)如何去做？
圖片

 

01.  通過跨團(tuán)隊(duì)合作保證一致性 

圖片

● 圖片來源：騰訊CDC公眾號(hào)

d

公益設(shè)計(jì)是一個(gè)大的系統(tǒng)設(shè)計(jì)，和做產(chǎn)品不一樣，產(chǎn)品流程大家都知道，產(chǎn)品立項(xiàng)、交互設(shè)計(jì)、視覺設(shè)計(jì)、前端走查等等環(huán)節(jié)，但是公益設(shè)計(jì)，需要很多團(tuán)隊(duì)一起去推動(dòng)，除了產(chǎn)品設(shè)計(jì)，還需要有市場(chǎng)團(tuán)隊(duì)、公關(guān)團(tuán)隊(duì)，包括整個(gè)的設(shè)計(jì)策略都有不同，相對(duì)于產(chǎn)品設(shè)計(jì)只需要和開發(fā)、產(chǎn)品、運(yùn)營對(duì)接不同，公益設(shè)計(jì)需要對(duì)接的角色非常多，需要設(shè)計(jì)師有非常強(qiáng)的項(xiàng)目把控能力，以及對(duì)于項(xiàng)目落地后結(jié)果的把控能力。所以設(shè)計(jì)師在做公益這樣的項(xiàng)目的時(shí)候，一定要做好項(xiàng)目管理，包括各個(gè)對(duì)接方時(shí)間排期規(guī)劃等等，都要求較高。

·

02.  通過全局聯(lián)動(dòng)形成品牌感 

圖片

除了對(duì)接人多以外，在設(shè)計(jì)落地上，產(chǎn)品設(shè)計(jì)更多在線上移動(dòng)端或者H5，但是公益設(shè)計(jì)的落地場(chǎng)景卻很廣，包括電梯廣告、地標(biāo)廣告、直播物料等等。

整體的設(shè)計(jì)鏈路線上到線下更為立體，所以在做公益設(shè)計(jì)的時(shí)候，需要考慮更多的一致性，如何讓設(shè)計(jì)聯(lián)動(dòng)起來，如何讓用戶更有體感是非常重要的。

圖片

圖片

圖片

圖片

● 圖片來源：騰訊公益

a

公益設(shè)計(jì)的聯(lián)動(dòng)一定是多維度的，得讓用戶充分的感知，因此除線上直播、H5以外在用戶能觸達(dá)的各個(gè)場(chǎng)景都要覆蓋到，比如機(jī)場(chǎng)、地鐵等等。

在做線下推廣時(shí)，每一張海報(bào)、每一次傳播都有它的設(shè)計(jì)規(guī)范，騰訊也公開了這些設(shè)計(jì)規(guī)范，可以用來參考和學(xué)習(xí).

圖片

圖片

圖片

● 小紅花聯(lián)動(dòng)

e

除了線下運(yùn)用，線上也需要聯(lián)動(dòng)，公益設(shè)計(jì)需要線上線下一起發(fā)力，如何讓線上設(shè)計(jì)做的有趣好玩，讓用戶用參與感，是設(shè)計(jì)師需要思考的。如上圖的H5場(chǎng)景，通過趣味化設(shè)計(jì)，答題得小紅花場(chǎng)景，讓用戶參與進(jìn)去，體現(xiàn)出更多的溫暖和溫度。

對(duì)于一個(gè)產(chǎn)品，其實(shí)最難的是，這個(gè)產(chǎn)品如何和其它產(chǎn)品進(jìn)行聯(lián)動(dòng)，同時(shí)也不違和，非?？简?yàn)設(shè)計(jì)師的整體把控性。比如最近比較流行跨界玩法，很多品牌都會(huì)和一些時(shí)尚品牌進(jìn)行合作，讓產(chǎn)品有更多和年輕人交流的機(jī)會(huì)，讓年輕人感覺到公益的魅力。

● 圖片來源：騰訊CDC公眾號(hào)

a

騰訊公益這塊是做的比較不錯(cuò)的，我仔細(xì)看了看2020年與2021年的IP連萌行動(dòng)的一些IP形象，可以看到不論是騰訊的QQ企鵝、微信汽泡狗，還是騰訊動(dòng)漫的狐妖小紅娘、海爾兄弟、敦煌神鹿等，盡管畫風(fēng)差別不少，但小紅花人與他們的聯(lián)合卻一點(diǎn)也不違和。

圖片

● 圖片來源：騰訊公益

k

另外，小紅花人的出現(xiàn)某種程度上還代表了騰訊公益俘獲年輕群體的訴求。公益對(duì)于年輕群體關(guān)注度雖高，但參與度低，騰訊公益也一直在尋求解決的辦法。而小紅花人走到B站，去到了奈雪、喜茶的店里，與更多的年輕人溝通交流，正是把他們帶回騰訊公益的平臺(tái)上。 

圖片

我當(dāng)時(shí)看見這個(gè)廣告的時(shí)候就深深被吸引，一起做好事這個(gè)主題也很輕松，在我喝一杯奶茶時(shí)候，還可以做一件公益好事，讓我覺得這個(gè)設(shè)計(jì)非常有溫度，公益設(shè)計(jì)一定要結(jié)合場(chǎng)景，讓用戶舒服的同時(shí)，品牌的溫度和鮮活的形象也會(huì)更深刻。 

a

03.  通過IP符號(hào)打造形成記憶點(diǎn) 

圖片

● 圖片來源：騰訊公益

d

在推出小紅花IP后，怎么保證這些設(shè)計(jì)的一致性，打造出高度一致性的傳播矩陣。別看這張海報(bào)看著很簡(jiǎn)單，其實(shí)一點(diǎn)不簡(jiǎn)單，首選圖形上，大家第一眼記住的是什么？是不是和我一樣，一朵小紅花。的確如此，用戶能記住的除了畫面，就是符號(hào)。

圖片

● 圖片來源：騰訊CDC公眾號(hào)

a

就比如今天我們提到蘋果你能想到什么？是不是蘋果的LOGO，提到NIKE你會(huì)想到什么，是不是那個(gè)對(duì)勾，能看得出騰訊設(shè)計(jì)團(tuán)隊(duì)，也是想把品牌打造成符號(hào)，上圖是他們的標(biāo)志每年變化過程，我們能看見字體的變化、構(gòu)圖變化，但是唯一不變的就是這朵小紅花。 

圖片

圖片

圖片

● 2019-2021年99公益日主視覺

w

這么多年的設(shè)計(jì)，品牌的延續(xù)感非常的強(qiáng)，始終圍繞著這個(gè)小紅花的超級(jí)符號(hào)打造整體風(fēng)格，讓我想起了以前上學(xué)時(shí)候，表現(xiàn)好，老師會(huì)給我們發(fā)一朵小紅花的場(chǎng)景。雖然每年小紅花有一些變化，但是對(duì)于溫暖情感的傳遞，都沒有變。比如18年主視覺，圍繞匯聚概念做整個(gè)設(shè)計(jì)，很多愛心小花凝聚在一起，小的愛心變成大愛，和主題非常貼切。 

d

04.  賦予品牌溫度和情感 

圖片

圖片

● 圖片來源：designforgood.qq.com

w

騰訊的設(shè)計(jì)團(tuán)隊(duì)不僅針對(duì)小紅花設(shè)計(jì)了表情包，同時(shí)還在很多地方，立體地打造了小紅花的形象。而這些小紅花，就是用戶參與到互聯(lián)網(wǎng)公益最大的理由，在告訴用戶“做好事得小紅花”的同時(shí)，用戶累計(jì)的小紅花又給予產(chǎn)品體驗(yàn)的有效反饋，用戶參與互聯(lián)網(wǎng)公益的動(dòng)機(jī)和動(dòng)力得以確定。這一朵小紅花，串聯(lián)起了用戶從感知、到行動(dòng)、到反饋的全流程。  

圖片

小紅花通過這些年的打造，主視覺將手繪的花作為重點(diǎn)元素，根據(jù)不同公益活動(dòng)類型去設(shè)計(jì)不同的KV，搭配一些手寫的字體，讓用戶第一感受就是溫暖，通過我們的公益行動(dòng)繪制出一朵朵有愛的小紅花，這些小紅花背后都是一個(gè)個(gè)暖心故事。好的品牌一定是要不斷曝光，才能在用戶心中形成心智，那些偉大的品牌都是如此。 

圖片

在2018年99公益日的主視覺上，可以看到無數(shù)愛心化為花瓣，匯聚成一朵小紅花。這是小紅花形象第一次登上騰訊公益的平臺(tái)。

圖片

歡迎圍觀小紅花的首支散裝舞蹈。#99公益日 熱情似火，遇到我就別錯(cuò)過我！攢小紅花能贏更多配捐，還可以兌換福利喲！

2019年的99公益日，不僅小紅花之歌出現(xiàn)了，節(jié)日期間用戶向好友發(fā)起集小紅花的自發(fā)傳播，從而為自己的捐贈(zèng)爭(zhēng)取更大配捐額，形成騰訊公益全新的社交玩法。

圖片

圖片

2021年，隨著99公益日擴(kuò)展為10天，配捐額也隨之放大，用戶可以每天到騰訊公益平臺(tái)做好事打卡。同時(shí)，小紅花“積分”也可以兌換公益農(nóng)產(chǎn)品和小紅花相關(guān)紀(jì)念品…… 

圖片

小紅花表面上的成長背后，離不開產(chǎn)品策略與設(shè)計(jì)的支撐。更輕量與豐富的“玩法”注入，如捐贈(zèng)會(huì)議時(shí)間，捐贈(zèng)騰訊視頻積分等，拓寬了用戶獲取小紅花的方式；而公益節(jié)日的時(shí)間點(diǎn)也同步延伸至每年的春節(jié)、“520”等時(shí)間段，拓寬了用戶“一塊”做好事的活躍次數(shù)。

在用戶體驗(yàn)與設(shè)計(jì)的推動(dòng)下，騰訊公益用了4年時(shí)間，種出一朵朵開滿地球的小紅花。現(xiàn)在，小紅花不僅是騰訊公益的品牌符號(hào)，也是用戶每一次公益行為的印記，還是用戶獲取反饋的“積分”，它甚至成為用戶新的“社交貨幣”——沒有小紅花不足以談愛心。

d

05.  最后 

圖片

隨著社會(huì)的發(fā)展，人們對(duì)于公益的關(guān)注也越來越多，那么作為設(shè)計(jì)師如何通過我們的設(shè)計(jì)力量，將我們平時(shí)的創(chuàng)意和有溫度的設(shè)計(jì)結(jié)合起來，是我們每個(gè)設(shè)計(jì)師要思考的。希望今天這篇文章對(duì)大家有所幫助。 


圖片


g

原文地址：我們的設(shè)計(jì)日記（公眾號(hào)）

作者：sky

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》騰訊設(shè)計(jì)了一朵小紅花，也太好看了吧！

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)



評(píng)論(0) 瀏覽(2534)

B類產(chǎn)品設(shè)計(jì)細(xì)節(jié)：流程狀態(tài)

seo達(dá)人

 

狀態(tài)的命名

流程狀態(tài)的設(shè)計(jì)原則與人機(jī)交互的最根本原則一致，即「以用戶為中心」，確保目標(biāo)用戶在相應(yīng)的使用場(chǎng)景下能夠快速理解并正確執(zhí)行相關(guān)操作。

 

按行業(yè)規(guī)則命名

專業(yè)工具或平臺(tái)的設(shè)計(jì)中，對(duì)于狀態(tài)的命名如果有行業(yè)約定俗成的術(shù)語，則遵照行業(yè)規(guī)則命名，即便在體驗(yàn)設(shè)計(jì)師自己眼中可能不夠簡(jiǎn)潔美好。

例如：以工程師為主要用戶群體的項(xiàng)目管理工具 Aone 中，bug 的狀態(tài)有 10 種（如下圖），且遵循了英文技術(shù)術(shù)語。對(duì)于設(shè)計(jì)師來說狀態(tài)種類復(fù)雜、語言不統(tǒng)一，但從用戶的角度來說這樣是必須的、規(guī)范的，因此設(shè)計(jì)師要尊重用戶的習(xí)慣和需求。

 

圍繞核心操作命名

流程的名稱通常是描述對(duì)應(yīng)操作的過程或結(jié)果，如「待付款」、「退款中」是操作的過程，「完成付款」、「退款失敗」是操作的結(jié)果。

單個(gè)核心操作

最簡(jiǎn)單、最常見的流程是：角色A 發(fā)起流程 – 角色B 進(jìn)行操作 – 流程結(jié)束給出結(jié)果

這種兩個(gè)角色三步走的流程，狀態(tài)命名通常分為如下兩種（框中是狀態(tài)命名）：

上圖里面的動(dòng)詞可替換成其他動(dòng)作；結(jié)果狀態(tài)也可用「已通過」、「未通過」等，根據(jù)實(shí)際情況而定。

圍繞一個(gè)核心的操作，也可能涉及多個(gè)角色。

例如：最常見的審批流程，過程中涉及多個(gè)角色的層層審批。如果不同角色審批時(shí)，用戶可執(zhí)行的操作不同，或?qū)徟脑敿?xì)過程對(duì)用戶非常關(guān)鍵，這時(shí)審批單的狀態(tài)命名上需要注明具體角色；如果通常不需要關(guān)注具體到哪個(gè)人審批了，則統(tǒng)一稱為「審批中」即可，用戶可以到詳情頁面查看具體進(jìn)度。

 

多個(gè)核心操作

涉及多個(gè)角色、一串核心操作的復(fù)雜流程。

  • 在流程完成之前的中間過程中，告知用戶下一步待執(zhí)行的操作，比上一步剛剛完成哪個(gè)更重要；

 

  • 在角色多、極易混淆的情況下建議在狀態(tài)名上增加角色名。

例如：數(shù)字倉單的倉單質(zhì)押流程中涉及三個(gè)角色（存貨人、倉儲(chǔ)方、資金方）多個(gè)步驟，過程中關(guān)鍵是引導(dǎo)用戶繼續(xù)后續(xù)操作、高效完成申請(qǐng)，所以狀態(tài)上展示當(dāng)前要進(jìn)行的操作。同時(shí)流程中包含連續(xù)多個(gè)角色的接力審核確認(rèn)，容易混淆，因此狀態(tài)標(biāo)簽中顯示當(dāng)前需要哪個(gè)角色進(jìn)行操作；而放款、收款的角色很明顯是資金方和申請(qǐng)方來操作，所以對(duì)應(yīng)的狀態(tài)沒有顯示角色名稱。如圖：

 

  • 同一階段時(shí)，不建議區(qū)分不同用戶角色看到的狀態(tài)名，可以給他們不同的反饋或提醒。

 

  • 狀態(tài)組間存在一對(duì)多的映射關(guān)系時(shí)，要注意區(qū)分邏輯關(guān)系，不建議將上下層狀態(tài)打平到一起。

接上面數(shù)字倉單的案例：系統(tǒng)中，貨物的所有者可以用倉單進(jìn)行質(zhì)押，這樣倉單就會(huì)有「未質(zhì)押」、「質(zhì)押申請(qǐng)中」和「質(zhì)押中」?fàn)顟B(tài)（不允許重復(fù)質(zhì)押）。而質(zhì)押申請(qǐng)是個(gè)復(fù)雜的流程，「質(zhì)押申請(qǐng)中」這一倉單狀態(tài)，對(duì)應(yīng)「質(zhì)押申請(qǐng)單」的一系列流程狀態(tài)。同理，在倉單解除質(zhì)押、注銷等其它情況下，又會(huì)有「解質(zhì)流程中」、「注銷中」等狀態(tài)，對(duì)應(yīng)的「解除質(zhì)押流程」、「注銷流程」有會(huì)一系列對(duì)應(yīng)的狀態(tài)。如圖：

這種情況下要梳理好業(yè)務(wù)流程，如果將上下層狀態(tài)打平到一起，短期內(nèi)可能看起來比較簡(jiǎn)潔，但隨著產(chǎn)品復(fù)雜度的提升（B 類產(chǎn)品通常會(huì)越來越復(fù)雜），邏輯關(guān)系會(huì)越來越混亂。

 

狀態(tài)的視覺設(shè)計(jì)

狀態(tài)的顏色

表示狀態(tài)的顏色不建議超過 5 種：紅色、橙色、綠色、藍(lán)色、灰色。

設(shè)計(jì)師需要結(jié)合色彩的功能特性、品牌色板、產(chǎn)品邏輯、用戶需求來選擇適合的顏色。常用配色舉例：

 

  • 狀態(tài)的顏色不止會(huì)用在標(biāo)簽上，對(duì)應(yīng)的可視化圖表、圖標(biāo)等視覺元素要用色一致。例如進(jìn)度條：

 

狀態(tài)標(biāo)簽的樣式

不同狀態(tài)對(duì)應(yīng)不同用戶的不同操作，因此狀態(tài)信息通常與普通文本在視覺上有所區(qū)分。常用的樣式包括彩色標(biāo)簽、彩色圓點(diǎn)等等。例如：

 

  • 注意列表、表單中狀態(tài)標(biāo)簽的樣式統(tǒng)一。

 

總結(jié)

  • 原則：流程狀態(tài)的設(shè)計(jì)原則與人機(jī)交互的最根本原則一致：以用戶為中心。
  • 命名：
  1. 在流程完成之前的中間過程中，告知用戶下一步待執(zhí)行的操作，比上一步剛剛完成哪個(gè)更重要；
  2. 在角色多、極易混淆的情況下建議在狀態(tài)名上增加角色名；
  3. 同一階段時(shí)，不建議區(qū)分不同用戶角色看到的狀態(tài)名，可以給他們不同的反饋或提醒。
  4. 專業(yè)工具或平臺(tái)中，如果有行業(yè)約定俗成的術(shù)語來命名狀態(tài)，則遵照行業(yè)規(guī)則。
  • 關(guān)系：狀態(tài)組間存在一對(duì)多的映射關(guān)系時(shí)，不要將上下層狀態(tài)打平到一起。
  • 顏色：表示狀態(tài)的顏色不建議超過「紅色、橙色、綠色、藍(lán)色、灰色」這 5 種。

 

原文地址：Ant_Design（站酷）

作者： 林葉

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》B類產(chǎn)品設(shè)計(jì)細(xì)節(jié)：流程狀態(tài)

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)



評(píng)論(0) 瀏覽(2156)

【產(chǎn)品體驗(yàn)設(shè)計(jì)】-設(shè)計(jì)實(shí)踐篇

seo達(dá)人


圖片

對(duì)外行業(yè)角度+對(duì)內(nèi)產(chǎn)品角度 

圖片

◆對(duì)外行業(yè)角度：

每一個(gè)產(chǎn)品都會(huì)經(jīng)歷不同的成長階段，由萌芽期-成長期-成熟期-衰退期。幾乎所有產(chǎn)品都會(huì)想辦法去延長整個(gè)生命周期，尤其是在成長期和成熟期這兩個(gè)階段。騰訊動(dòng)漫11年成立，經(jīng)歷了快速的成長期之后，已經(jīng)逐步進(jìn)入成熟期階段。
 

漫畫行業(yè)近幾年屬于紅海市場(chǎng)，隨著行列競(jìng)爭(zhēng)日益激烈，除了騰訊動(dòng)漫國內(nèi)市場(chǎng)上也出現(xiàn)了不少頭部動(dòng)漫產(chǎn)品如快看漫畫、嗶哩嗶哩漫畫、咚漫漫畫等，加上短視頻沖擊，導(dǎo)致動(dòng)漫內(nèi)容整體大盤逐步開始出現(xiàn)被分流的狀態(tài)，這是從行業(yè)角度能夠觀察到的行業(yè)形態(tài)上的變化。 

◆對(duì)內(nèi)產(chǎn)品角度：

隨著整體用戶基數(shù)平穩(wěn)且大盤逐步分流，騰訊動(dòng)漫近幾年數(shù)據(jù)已經(jīng)逐步開始出現(xiàn)下滑的趨勢(shì)，產(chǎn)品開始面臨數(shù)據(jù)提升和營收增長的兩大難題。 
 

圖片

行業(yè)+數(shù)據(jù)+用戶 

圖片

通過行業(yè)趨勢(shì)的變化和產(chǎn)品內(nèi)部數(shù)據(jù)表現(xiàn)可以發(fā)現(xiàn)產(chǎn)品目前處于生命周期的哪一個(gè)階段，但想要了解產(chǎn)品具體滑落的原因，還需要進(jìn)一步對(duì)問題進(jìn)行定位和分析。 

◆外部競(jìng)爭(zhēng)：

橫向了解自己產(chǎn)品所處的環(huán)境以及競(jìng)爭(zhēng)對(duì)手可以幫助判斷產(chǎn)品發(fā)展趨勢(shì)。我們對(duì)市面上分流產(chǎn)品都做了調(diào)研，發(fā)現(xiàn)外部除了同類內(nèi)容型產(chǎn)品，短視頻產(chǎn)品沖擊最為劇烈，抖音快手分流嚴(yán)重。同時(shí)，在內(nèi)容行業(yè)這片紅海也涌現(xiàn)出了非常多的漫畫類型產(chǎn)品，同類競(jìng)爭(zhēng)非常激烈，產(chǎn)品形態(tài)和內(nèi)容題材同質(zhì)化越來越嚴(yán)重。 

◆內(nèi)部困境：

縱向知道自身產(chǎn)品的運(yùn)轉(zhuǎn)邏輯以及長短板有助于站在業(yè)務(wù)角度去思考問題。漫畫是內(nèi)容型產(chǎn)品，除了自制，大多數(shù)內(nèi)容依靠采買，版權(quán)成本投入非常高；相比小說這類文字內(nèi)容，漫畫的制作時(shí)間周期長，更新頻率相對(duì)比較慢；以及漫畫作為娛樂內(nèi)容產(chǎn)業(yè)，并不是日常功能類的剛需型產(chǎn)品，可被替代性成本很低；這些都是我們產(chǎn)品面臨的客觀問題。

◆數(shù)據(jù)拆分：

除了對(duì)于產(chǎn)品大盤數(shù)據(jù)起伏有基礎(chǔ)的了解，更需要知道產(chǎn)品每一個(gè)模塊兒具體數(shù)據(jù)變化，以便了解用戶在產(chǎn)品各個(gè)場(chǎng)景的使用情況和具體問題。通過對(duì)騰訊動(dòng)漫用戶產(chǎn)品使用路徑分段拆分，能夠從：用戶新進(jìn)-內(nèi)容消費(fèi)-評(píng)論互動(dòng)等不同場(chǎng)景數(shù)據(jù)分析能夠看出用戶的整體活躍度有明顯下降。

◆用戶分層：

通過對(duì)產(chǎn)品各場(chǎng)景數(shù)據(jù)模塊兒的拆分能夠了解用戶使用產(chǎn)品情況，如果想要進(jìn)一步知道為什么這些數(shù)據(jù)會(huì)發(fā)生變化，就需要從使用者本身，也就是用戶角度來進(jìn)行具體分析。

 
每一年我們都會(huì)對(duì)平臺(tái)用戶做調(diào)研，多年來平臺(tái)用戶屬性基本上已經(jīng)固定，分為題材型用戶、消遣型用戶、拓展型用戶、成熟型用戶。這四類用戶在我們平臺(tái)對(duì)于找漫畫，看漫畫以及漫畫內(nèi)容消費(fèi)上都有很多訴求點(diǎn)是我們平臺(tái)沒有滿足的，這也是導(dǎo)致我們產(chǎn)品數(shù)據(jù)和口碑不斷下降的核心原因。 
通過將從行業(yè)數(shù)據(jù)用戶三個(gè)維度分析的問題進(jìn)行匯總提煉，找到目前產(chǎn)品存在的痛點(diǎn)和短板。 

圖片

明確目標(biāo)+目測(cè)拆解+設(shè)計(jì)策略 

明確產(chǎn)品存在的痛點(diǎn)之后，核心要做的事情就是尋求解決這些痛點(diǎn)的方案，這些解決方案可能并不是直接和設(shè)計(jì)關(guān)聯(lián)的，以及在解決方案方向比較模糊的情況下我們?nèi)绾螠?zhǔn)確定位到設(shè)計(jì)目標(biāo)并執(zhí)行具體實(shí)施策略非常關(guān)鍵。  

圖片

◆明確目標(biāo)： 

產(chǎn)品體驗(yàn)設(shè)計(jì)的價(jià)值核心體現(xiàn)在兩個(gè)方面：1 幫助業(yè)務(wù)更好達(dá)成目標(biāo)；2 給用戶帶來體驗(yàn)價(jià)值。體驗(yàn)設(shè)計(jì)在制定目標(biāo)的時(shí)候，會(huì)圍繞這兩點(diǎn)去進(jìn)行切入。通過前期對(duì)于產(chǎn)品問題定位發(fā)現(xiàn)從行業(yè)、數(shù)據(jù)、用戶等不同維度分析出來的問題可以歸類為兩大類：業(yè)務(wù)訴求和用戶需求。再根據(jù)這兩大類問題結(jié)合我們產(chǎn)品實(shí)際情況分析出目前需要解決的問題是：1提升產(chǎn)品用戶價(jià)值；2實(shí)現(xiàn)產(chǎn)品數(shù)據(jù)的增長；而設(shè)計(jì)目標(biāo)就是通過設(shè)計(jì)手段去實(shí)現(xiàn)這兩點(diǎn)。 

圖片

◆目標(biāo)拆解：

設(shè)計(jì)目標(biāo)的明確決定項(xiàng)目在上的設(shè)計(jì)方向和預(yù)期，要找到設(shè)計(jì)著力點(diǎn)還需要進(jìn)行目標(biāo)拆解，根據(jù)不同目標(biāo)制定不同的設(shè)計(jì)策略。騰訊動(dòng)漫是內(nèi)容型產(chǎn)品，我們根據(jù)用戶使用行為梳理了用戶在產(chǎn)品時(shí)的內(nèi)容消費(fèi)模型（吸引-感興趣-體驗(yàn)-滿足-留存）。這個(gè)模型和用戶體驗(yàn)地圖類似，用戶在不同階段所關(guān)注的核心點(diǎn)以及體驗(yàn)訴求會(huì)發(fā)生變化，所以我們將模型進(jìn)行分段拆分，分為前期內(nèi)容基礎(chǔ)體驗(yàn)和后期消費(fèi)轉(zhuǎn)化兩個(gè)部分，并且針對(duì)這兩個(gè)部分不同體驗(yàn)場(chǎng)景進(jìn)行要點(diǎn)提煉。 

圖片

◆設(shè)計(jì)策略：

有了設(shè)計(jì)目標(biāo)和內(nèi)容體驗(yàn)?zāi)Ｐ?，如何讓兩者有效的結(jié)合起來形成可推動(dòng)落地的方案，就是設(shè)計(jì)策略要做的核心內(nèi)容。

 
前面將內(nèi)容消費(fèi)模型拆解為基礎(chǔ)體驗(yàn)和消費(fèi)轉(zhuǎn)化，分為兩個(gè)不同的內(nèi)容消費(fèi)階段，設(shè)計(jì)策略要做的是將設(shè)計(jì)目標(biāo)和不同的內(nèi)容消費(fèi)階段進(jìn)行結(jié)合，形成產(chǎn)品體驗(yàn)?zāi)Ｐ?。整個(gè)體驗(yàn)策略優(yōu)化我們核心要做兩件事情： 
 
  • 1基礎(chǔ)體驗(yàn)升級(jí)，通過滿足用戶在不同場(chǎng)景下的體驗(yàn)訴求，提升產(chǎn)品對(duì)于用戶的體驗(yàn)價(jià)值。
 
  • 2消費(fèi)轉(zhuǎn)化部分，基于用戶內(nèi)容消費(fèi)閱讀路徑，建立付費(fèi)轉(zhuǎn)化機(jī)制，從而帶來付費(fèi)營收的增長，實(shí)現(xiàn)產(chǎn)品商業(yè)化閉環(huán)。 

圖片    

設(shè)計(jì)策略明確后，接下來就是可落地的設(shè)計(jì)方案。設(shè)計(jì)方案是圍繞設(shè)計(jì)策略進(jìn)行的顆粒度拆分，拆分下來你會(huì)發(fā)現(xiàn)圍繞基礎(chǔ)體驗(yàn)和消費(fèi)轉(zhuǎn)化會(huì)有很多可以做的內(nèi)容，不可能保證所有的點(diǎn)我們都能做完且起到有效的作用。所以對(duì)于設(shè)計(jì)方案的執(zhí)行，也需要進(jìn)行優(yōu)先級(jí)的排序和篩選。
 
騰訊動(dòng)漫的內(nèi)容型產(chǎn)品，回歸用戶使用產(chǎn)品本質(zhì)需求，就是找內(nèi)容和看內(nèi)容，圍繞這兩個(gè)關(guān)鍵點(diǎn)再去細(xì)分用戶使用產(chǎn)品的過程中，核心關(guān)注的體驗(yàn)點(diǎn)是什么，再圍繞這些體驗(yàn)點(diǎn)，找到問題并且制定設(shè)計(jì)方案逐一優(yōu)化。 
 

圖片

◆基礎(chǔ)體驗(yàn)

基于內(nèi)容消費(fèi)模型，我們分別對(duì)用戶尋找內(nèi)容進(jìn)行了：視覺聚焦-建立視覺降噪體系、內(nèi)容識(shí)別-加強(qiáng)內(nèi)容拓展性、信息決策-提供有效決策信息等不同策略的優(yōu)化。 

圖片

◆視覺聚焦-建立視覺降噪體系

首先是色彩和設(shè)計(jì)樣式上做減法，再根據(jù)簡(jiǎn)化后的色彩和樣式搭建了圖形體系、圖標(biāo)、插畫體系，用在產(chǎn)品全局的視覺降噪體系上。 

圖片

◆內(nèi)容識(shí)別-加強(qiáng)內(nèi)容拓展性

從品類拓展和特性打造入手。首先是結(jié)構(gòu)的拓展，3種增加到9種，并且可以在首頁隨意組合，提升內(nèi)容組成的多樣性。內(nèi)容模塊兒的特性上，根據(jù)模塊兒不同內(nèi)容屬性進(jìn)行了重新打造，調(diào)整后數(shù)據(jù)效果非常不錯(cuò)。 

圖片

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

為了提升決策效率，我們?cè)趦?nèi)容篩選和決策上做了比較大的調(diào)整。對(duì)排行榜的結(jié)構(gòu)和信息組成都進(jìn)行了大的調(diào)整，對(duì)分類標(biāo)簽進(jìn)行了優(yōu)化，作品標(biāo)簽由官方維度轉(zhuǎn)換為了用戶維度和作品維度，同時(shí)除了配置官方分類標(biāo)簽以外，新增符合用戶認(rèn)知和當(dāng)下潮流的個(gè)性化分類標(biāo)簽。 

圖片

排行榜以前榜單形式是固定且單一的，在拓展性，品類以及公信力上都會(huì)有很多的問題。為了提升篩選效率，我們將排行榜單重新梳理，采用縱向結(jié)構(gòu)滿足不同綁帶配置訴求；同時(shí)將榜單進(jìn)行拓充，新增不同維度的榜單豐富榜單品類；在每個(gè)上榜作品上添加了作品評(píng)分以及用戶評(píng)論數(shù)，提升榜單公信力。 

圖片

然后是詳情頁決策，從頁面底層結(jié)構(gòu)開始著手開始梳理，用戶訪談發(fā)現(xiàn)，線上詳情頁結(jié)構(gòu)和用戶視角的結(jié)構(gòu)重合度非常低，于是我們對(duì)詳情頁架構(gòu)進(jìn)行了優(yōu)化調(diào)整，新版的詳情頁架構(gòu)結(jié)構(gòu)順序以及信息層級(jí)上，都更符合用戶的認(rèn)知。在整個(gè)決策過程中，我們通過優(yōu)化詳情頁信息結(jié)構(gòu)，在用戶瀏覽過程中用不斷吸引-刺激-加強(qiáng)用戶的決策，更有效提升決策效率。 

圖片

基礎(chǔ)體驗(yàn)的第二部分是看內(nèi)容，對(duì)于看內(nèi)容的體驗(yàn)，我們基于漫畫內(nèi)容特性和用戶核心的操作體驗(yàn)去進(jìn)行了在觀看體驗(yàn)和閱讀操作上的體驗(yàn)優(yōu)化。 

圖片

圖片

圖片

圖片

首先是觀看，要想把觀看體驗(yàn)做好，必須要有優(yōu)質(zhì)的內(nèi)容品質(zhì)，這里我們做了三點(diǎn)優(yōu)化：
 
  • 第一點(diǎn)是終端適配，將傳統(tǒng)頁漫去進(jìn)行條漫的分鏡優(yōu)化，讓其更好的適配手機(jī)閱讀體驗(yàn)；
 
  • 第二點(diǎn)是畫質(zhì)賽選，淘汰掉小尺寸的漫畫圖源，新增800PX以上高清圖源，確保顯示清晰度；
 
  • 第三點(diǎn)是建立后臺(tái)上傳系統(tǒng)，規(guī)范上傳的尺寸、格式、以及大小等，從根源去解決漫畫品質(zhì)的問題。 
   

看內(nèi)容第二個(gè)核心環(huán)節(jié)是操作，對(duì)整個(gè)瀏覽器的色調(diào)進(jìn)行了輕量化設(shè)計(jì)，提升沉浸式觀感和舒適度。同時(shí)，簡(jiǎn)化了信息欄結(jié)構(gòu)，并且將高頻操作提核，提升操作效率和易用性。 

圖片

圖片  

基礎(chǔ)體驗(yàn)上，我們根據(jù)用戶找內(nèi)容和看內(nèi)容的不同場(chǎng)景，進(jìn)行體驗(yàn)的優(yōu)化，提升產(chǎn)品對(duì)于用戶的使用價(jià)值，也為我們后續(xù)進(jìn)行進(jìn)一步的內(nèi)容消費(fèi)轉(zhuǎn)化，提供了契機(jī)。

圖片

  圖片

◆付費(fèi)轉(zhuǎn)化

我們根據(jù)用戶找內(nèi)容和看內(nèi)容的不同場(chǎng)景，進(jìn)行了基礎(chǔ)體驗(yàn)的優(yōu)化，提升產(chǎn)品對(duì)于用戶的使用價(jià)值，也為我們后續(xù)進(jìn)行進(jìn)一步的內(nèi)容消費(fèi)轉(zhuǎn)化，提供了契機(jī)。

良性的消費(fèi)轉(zhuǎn)化機(jī)制建立是我們的第二大設(shè)計(jì)核目標(biāo)，基于用戶內(nèi)容消費(fèi)路徑建立付費(fèi)轉(zhuǎn)化機(jī)制。根據(jù)用戶閱讀路徑下的體驗(yàn)地圖，分析他們不同階段的核心訴求，從而找到設(shè)計(jì)機(jī)會(huì)點(diǎn)，再將設(shè)計(jì)機(jī)會(huì)點(diǎn)轉(zhuǎn)化成設(shè)計(jì)目標(biāo)，從而制定設(shè)計(jì)策略。分別在用戶閱讀內(nèi)容的不同階段對(duì)用戶進(jìn)行付費(fèi)轉(zhuǎn)化上的引導(dǎo)刺激以及養(yǎng)成。 

圖片

 這里結(jié)合實(shí)際輸出案例具體分析下：我們根據(jù)用戶閱讀路徑分為閱讀前、閱讀中、閱讀后，分別在不同階段根據(jù)用戶不同訴求去進(jìn)行設(shè)計(jì)目標(biāo)制定和方案實(shí)施。 

圖片

圖片

閱讀前-閱讀前核心訴求是去引導(dǎo)消費(fèi)，從其他場(chǎng)景進(jìn)入瀏覽頁，用戶最直接的目標(biāo)是希望能夠盡快看到內(nèi)容，所以獲取內(nèi)容的效率非常重要。我們將以前的支付跳轉(zhuǎn)頁面，改為支付彈層，并且將所有付費(fèi)信息整合分層，最大化提升用戶付費(fèi)效率，幫助用戶快速獲取內(nèi)容；針對(duì)用戶對(duì)于付費(fèi)的抵觸心理，采用情感化的設(shè)計(jì)，在彈窗上加入了品牌形象，并從創(chuàng)作者口吻弱化官方盈利感知，同時(shí)也為用戶提供非付費(fèi)的觀看途徑，平衡用戶心理預(yù)期。 

圖片

閱讀中-在閱讀中，核心目的是去刺激用戶消費(fèi)，刺激用戶消費(fèi)需要從內(nèi)容本身去挖掘用戶的消費(fèi)點(diǎn)。這里做了兩點(diǎn)優(yōu)化：第一，優(yōu)化彈幕交互形式，新增表情互動(dòng)功能，用戶可以直接發(fā)布表情包代替文字彈幕，降低彈幕互動(dòng)門檻；第二提供個(gè)性化彈幕皮膚，皮膚有主題性質(zhì)和IP維度，用戶可以根據(jù)自己喜好調(diào)選各自風(fēng)格或者不同作品人物的彈幕皮膚，滿足用戶個(gè)性化定制需求。 

圖片

閱讀后– 最后是閱讀完作品后的消費(fèi)養(yǎng)成，我們嘗試去搭建用戶的榮譽(yù)體系，首先增加針對(duì)作品的打賞道具，用戶可以根據(jù)自己喜好去對(duì)作品進(jìn)行打賞或者吐槽，滿足用戶對(duì)于作品的情感宣泄。同時(shí)我們也進(jìn)行了榮譽(yù)體系的搭建，對(duì)整個(gè)等級(jí)體系進(jìn)行升級(jí)，以前我們等級(jí)感知，趣味性都很差。于是針對(duì)等級(jí)體系，我們開展了全民共創(chuàng)模式，在用戶群體中去征集關(guān)于等級(jí)的創(chuàng)意想法，強(qiáng)化參與感。新版等級(jí)新增6種不同特殊樣式，強(qiáng)化不同等級(jí)之間的差異感，刺激用戶升級(jí)的活躍度。最后會(huì)設(shè)計(jì)用戶專屬個(gè)人等級(jí)卡片和打賞榜，滿足個(gè)人成就感，加強(qiáng)用戶對(duì)于榮譽(yù)體系的粘性。 

圖片

 
方案呈現(xiàn)-最后將整體方案做成高保證DEMO，預(yù)覽實(shí)現(xiàn)效果，同時(shí)也更方便和產(chǎn)品以及開發(fā)同學(xué)理解，有助于方案更好落地。

圖片

設(shè)計(jì)體系搭建 

圖片

圖片

圖片

在設(shè)計(jì)方案落地實(shí)現(xiàn)的過程中，經(jīng)常會(huì)遇到兩類問題：

  • 1.是設(shè)計(jì)上下游協(xié)同過程效率得不到有效保證。
  • 2.實(shí)現(xiàn)過程中設(shè)計(jì)方案的還原偏差。為了解決這兩個(gè)問題我們進(jìn)行了設(shè)計(jì)體系的初步搭建。首先，為了確保設(shè)計(jì)語言的一致性，我們提前制定了視覺規(guī)范；其次，也將部分模塊組件化封裝上傳到協(xié)同平臺(tái)形成組件庫，做到隨用隨取；然后，在協(xié)同上利用智能標(biāo)注軟件和切圖軟件，效率高且精準(zhǔn)的解決開發(fā)實(shí)現(xiàn)還原的問題；通過設(shè)計(jì)系統(tǒng)的完善，去提升項(xiàng)目的實(shí)現(xiàn)能力和協(xié)作效率。 

圖片

數(shù)據(jù)+專業(yè)+口碑 

圖片

設(shè)計(jì)師經(jīng)常面臨的一個(gè)難題就是項(xiàng)目設(shè)計(jì)完成后，設(shè)計(jì)價(jià)值無法得到有效的量化。設(shè)計(jì)相對(duì)比較主觀，比較難有客觀的量化結(jié)果體驗(yàn)好與不好，但也能夠通過一些不同的維度來判斷一個(gè)設(shè)計(jì)作品好與不好。這些維度可以是產(chǎn)品角度的可用性測(cè)試、用戶角度是口碑測(cè)評(píng)、內(nèi)部自查角度的項(xiàng)目復(fù)盤總結(jié)、以及相關(guān)專業(yè)人士或者干系人的角度的建議等。

 

主觀維度：

我們進(jìn)行了可用性測(cè)試，用戶評(píng)論調(diào)研，也將項(xiàng)目整體設(shè)計(jì)思路進(jìn)行相應(yīng)總結(jié)，并且通過和公司內(nèi)外各界專業(yè)人士進(jìn)行交流獲取反饋。

 

在客觀角度：

從整體數(shù)據(jù)效果這塊兒看，改版后這半年，我們會(huì)密切關(guān)注DAU的變化趨勢(shì)，同時(shí)將整體數(shù)據(jù)拆進(jìn)行分段分析，對(duì)比之前不同體驗(yàn)階段數(shù)據(jù)有無明顯變化，用以來評(píng)判設(shè)計(jì)改版后在數(shù)據(jù)上的有效性。
收到的設(shè)計(jì)反饋信息是單一面或者單角度時(shí)，好與不好的判斷相對(duì)片面，如果能夠從多方不同維度收集設(shè)計(jì)反饋，信息面相對(duì)會(huì)更全面，也能夠?yàn)楹罄m(xù)迭代提供更多的切入點(diǎn)。 

 

– 本文小結(jié) –

圖片

通過洞察-分析-制定清晰的用戶體驗(yàn)策略，在設(shè)計(jì)方案推動(dòng)的時(shí)候確保項(xiàng)目實(shí)現(xiàn)能力以及協(xié)調(diào)效率，最后對(duì)項(xiàng)目進(jìn)行全面的驗(yàn)證，形成閉環(huán)。是產(chǎn)品體驗(yàn)設(shè)計(jì)師需要構(gòu)建的能力體系，也是設(shè)計(jì)為產(chǎn)品創(chuàng)造價(jià)值的鏈條。這是關(guān)于產(chǎn)品體驗(yàn)的整體內(nèi)容。很重要的一點(diǎn)：任何好產(chǎn)品都離不開持續(xù)迭代。

z

原文地址：TCD設(shè)計(jì)中心（公眾號(hào)）

作者： OUOU

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》【產(chǎn)品體驗(yàn)設(shè)計(jì)】-設(shè)計(jì)實(shí)踐篇

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)



評(píng)論(0) 瀏覽(1579)

日歷

鏈接

個(gè)人資料

存檔