久久国产电影三级片中文字,欧美特黄一级大片

192021-5

app界面賞析+圖標(biāo)分享 ——— 北京藍(lán)藍(lán)設(shè)計移動端UI設(shè)計資源分享（二十三）

App界面設(shè)計對于設(shè)計師而言一直是盛久不衰的話題，尤其是如今越來越多的流量轉(zhuǎn)移到了移動平臺，使得更多的UI設(shè)計師涌入移動端領(lǐng)域，甚至出現(xiàn)了市場飽和的言論，對于從事移動端的UI設(shè)計師來講，充滿壓力的同時又面臨無限機(jī)遇，唯有不斷的學(xué)習(xí)才能滋生出源源不斷的設(shè)計靈感，站穩(wěn)腳跟。

摹客想在這方面給各位設(shè)計師朋友做點(diǎn)什么，除了提供簡單好用的設(shè)計工具，我們也整理了非常多的優(yōu)秀設(shè)計案例，希望可以對設(shè)計師朋友有借鑒意義。這將會是一個系列的專題，我們以月為單位，整理了國內(nèi)外設(shè)計師的優(yōu)秀APP界面設(shè)計案例，我們是搬運(yùn)工，更是好設(shè)計的傳達(dá)者，希望你會喜歡。

接下來為大家分享精美的app UI設(shè)計案例：

--手機(jī)appUI設(shè)計--

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

更多精彩文章：

手機(jī)appUI界面設(shè)計賞析（一）

手機(jī)appUI界面設(shè)計賞析（二）

手機(jī)appUI界面設(shè)計賞析（三）

手機(jī)appUI界面設(shè)計賞析（四）

手機(jī)appUI界面設(shè)計賞析（五）

手機(jī)appUI界面設(shè)計賞析（六）

手機(jī)appUI界面設(shè)計賞析（七）

手機(jī)appUI界面設(shè)計賞析（八）

手機(jī)appUI界面設(shè)計賞析（九）

手機(jī)appUI界面設(shè)計賞析（十）

手機(jī)appUI界面設(shè)計賞析（十一）

手機(jī)appUI界面設(shè)計賞析（十二）

手機(jī)appUI界面設(shè)計賞析（十三）

手機(jī)appUI界面設(shè)計賞析（十四）

手機(jī)appUI界面設(shè)計賞析（十五）

手機(jī)appUI界面設(shè)計賞析（十六）

手機(jī)appUI界面設(shè)計賞析（十七）

手機(jī)appUI界面設(shè)計賞析（十八）

手機(jī)appUI界面設(shè)計賞析（十九）

手機(jī)appUI界面設(shè)計賞析（二十）

手機(jī)appUI界面設(shè)計賞析（二十一）

手機(jī)appUI界面設(shè)計賞析（二十二）

評論(0) 瀏覽(1941)

182021-5

使用vue寫一個計時器

前端達(dá)人

**

首先我們要知道setTimeout和setInterval的區(qū)別

**
setTimeout只在指定時間后執(zhí)行一次，代碼如下：

<script>  
//定時器 異步運(yùn)行  
function hello(){  
alert("hello");  
}  
//使用方法名字執(zhí)行方法  
var t1 = window.setTimeout(hello,1000);  
var t2 = window.setTimeout("hello()",3000);//使用字符串執(zhí)行方法  
window.clearTimeout(t1);//去掉定時器  
</script> 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10

setInterval以指定時間為周期循環(huán)執(zhí)行，代碼如下：

//實(shí)時刷新時間單位為毫秒  
setInterval('refreshQuery()',8000);   
/* 刷新查詢 */  
function refreshQuery(){  
   $("#mainTable").datagrid('reload',null);  
} 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6

一般情況下setTimeout用于延遲執(zhí)行某方法或功能，
setInterval則一般用于刷新表單，對于一些表單的實(shí)時指定時間刷新同步
**

計時器

**
HTML代碼

<div class="father">
        <ul>
            <li>{{one}}<span>:</span></li>
            <li>{{two}}<span>:</span></li>
            <li>{{three}}</li>
        </ul>
        <el-button type="primary" @click="startHandler">開始</el-button>
        <el-button type="primary" @click="endHandler">暫停</el-button>
    </div> 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9

JAVASCRIPT代碼

<script>
export default {
  name: 'HelloWorld',
  data(){
      return {
        flag: null,
        one : '00', // 時
        two : '00', // 分
        three : '00', // 秒
        abc : 0, // 秒的計數(shù)
        cde : 0, // 分的計數(shù)
        efg : 0, // 時的計數(shù)
      }
  },
  props: {
    msg: String
  },
  mounted() {

  },
  methods:{
  // 開始計時
    startHandler(){
        this.flag = setInterval(()=>{
            if(this.three === 60 || this.three === '60'){
                this.three = '00';
                this.abc = 0;
                if(this.two === 60 || this.two === '60'){
                    this.two = '00';
                    this.cde = 0;
                    if(this.efg+1 <= 9){
                        this.efg++;
                        this.one = '0' + this.efg;
                    }else{
                        this.efg++;
                        this.one = this.efg;
                    }
                }else{
                    if(this.cde+1 <= 9){
                        this.cde++;
                        this.two = '0' + this.cde;
                    }else{
                        this.cde++;
                        this.two = this.cde;
                    }
                }
            }else{
                if(this.abc+1 <= 9){
                    this.abc++;
                    this.three = '0' + this.abc;
                }else{
                    this.abc++;
                    this.three=this.abc;
                }
            }

        },100)
    },
    // 暫停計時
    endHandler(){
        this.flag = clearInterval(this.flag)
    }
  }
}
</script> 


    
        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

效果如下：
在這里插入圖片描述

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

文章來源：csdn 作者：rock_23

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

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

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

評論(0) 瀏覽(2308)

182021-5

VueJs里利用CryptoJs實(shí)現(xiàn)Md5加密和3Des加密及解密

前端達(dá)人

前言

前我們介紹的用于vue用于數(shù)據(jù)簽名的操作，《【干貨】Vue TypeScript根據(jù)類生成簽名字符串》，其目的就是用于生成這個再轉(zhuǎn)MD5加密的模式進(jìn)行校驗(yàn)，原來我們在C#和Android里面已經(jīng)實(shí)現(xiàn)這些方式，因?yàn)榍岸藴?zhǔn)備用Vue來做，所以加密這塊少不了也需要實(shí)現(xiàn)的。

安裝Crypto

Crypto里面可以把md5和3des都一起做了，所以我們直接安裝這個比較方便

找到我們的程序目錄，按住Shift加鼠標(biāo)右鍵，選擇在此處打開Powershell窗口

然后在cmd窗口里面輸入npm install crypto-js -save-dev

安裝完成后可以看到紅框下面標(biāo)注著成功了。

代碼演示

MD5加密

我們還是用上次簽名的那個項(xiàng)目里面，首先要先引用Crypto-js

getmd5，我們再寫一個GetMd5的方法，傳入的字符串直接生成MD5的字符返回，

接下來再定義一個雙向綁定的字符串，在點(diǎn)擊簽名的時候同時生成md5的字符串顯示的頁面上

運(yùn)行后的效果

3DES加密、解密

核心代碼

加密

   Encrypt3Des(str: string, aStrKey: string, ivstr: string): string {
        const KeyHex = CryptoJS.enc.Utf8.parse(aStrKey);
        const encrypted = CryptoJS.TripleDES.encrypt(str,
            KeyHex,
            {
                mode: CryptoJS.mode.CBC,
                padding: CryptoJS.pad.Pkcs7,
                iv: CryptoJS.enc.Utf8.parse(ivstr)
            });
        let hexstr = encrypted.ciphertext.toString().toUpperCase();
        console.log(hexstr);
        return hexstr;
    }

一般網(wǎng)上的加解密最后紅框這里我們直接是輸出 return encrypted.tostring()，但是因?yàn)槲覀冏约旱腃#和Android的3Des的加解密都是最后輸出的16進(jìn)制的字符串，所以我們改為紅框這里輸出的樣式。

解密

    Decrypt3Des(str: string, aStrKey: string, ivstr: string): string {
        const KeyHex = CryptoJS.enc.Utf8.parse(aStrKey);
        //因?yàn)槲覀兗用艿臅r候用到的16進(jìn)制字符串，需要進(jìn)行轉(zhuǎn)換
        //第一步把16進(jìn)制字符串轉(zhuǎn)為WordArray格式
        const WordArray = CryptoJS.enc.Hex.parse(str);
        //第二步把WordArray再轉(zhuǎn)為base64的字符串
        const base64str = CryptoJS.enc.Base64.stringify(WordArray);
        //第三步再進(jìn)行解密
        const decrypted = CryptoJS.TripleDES.decrypt(base64str,
            KeyHex,
            {
                mode: CryptoJS.mode.CBC,
                padding: CryptoJS.pad.Pkcs7,
                iv: CryptoJS.enc.Utf8.parse(ivstr)
            });

        return decrypted.toString(CryptoJS.enc.Utf8);
    }

這里比較重要就是紅框里面，因?yàn)槲覀兊募用茏詈筝敵龅氖?6進(jìn)制的字符串，所以我們解密的時候首先要把16進(jìn)制字符串轉(zhuǎn)為WordArray格式，再轉(zhuǎn)換為BASE64的字符串，最后再進(jìn)行解密。因?yàn)槲乙彩莻€前端小白，就是這個問題我也是研究了一下午才搞明白。

最后下面的黃框要注意輸出的字符要轉(zhuǎn)為Utf8。

其余設(shè)置

我們在test.ts里面定義了兩個字符串，一個des3encryptstr的加密后的字符串，一個des3decryptstr是解密后的字符串，然后又加上了兩個方法，一個是加密的方法btnencrypt，一個是解密的方法btndecrypt，分別調(diào)用的就是我們剛才寫的兩段核心代碼。

然后在test.vue.html里面加上雙向綁定顯示以及一個加密按鈕和一個解密按鈕。

頁面效果

未加密的效果

點(diǎn)擊加密后的效果

點(diǎn)擊解密后的效果

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

文章來源：https://my.oschina.net/u/4582134/blog/4582375

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

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

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

評論(0) 瀏覽(4077)

182021-5

UI交互動效設(shè)計標(biāo)準(zhǔn)與規(guī)范探索

seo達(dá)人

今天分享一篇在medium很火的文章《UI交互動效設(shè)計標(biāo)準(zhǔn)與規(guī)范探索》這篇文字將系統(tǒng)性的給你介紹UI交互動畫該如何深入研究，希望對您有用！

The ultimate guide to proper use of animation in UX

現(xiàn)如今，優(yōu)秀的界面動畫很能讓人產(chǎn)生深刻印象，甚至是帶來驚喜。它一方面表達(dá)了界面之間的交互過程，解釋說明如何使用應(yīng)用，另一方面也能正確引導(dǎo)用戶的注意力。在瀏覽關(guān)于動效的文章時，我發(fā)現(xiàn)幾乎所有的文章都只描述了特定的案例或者關(guān)于動畫的一般事實(shí)，但是我還沒有遇到過任何一篇文章能夠清晰的描述所有關(guān)于界面動畫的使用規(guī)范。在這篇文章中我不會寫任何新的知識，我只是想把所有的主要原則和規(guī)范做一個收集歸納，這樣就能便于其他設(shè)計師進(jìn)行快速決策了。

動畫的速度和持續(xù)時間

當(dāng)界面元素改變他們的狀態(tài)和位置時，動畫的持續(xù)時間應(yīng)該以用戶能注意到又不用等待為標(biāo)準(zhǔn)。

合適的動畫時長，既不要太快也不至于慢到讓用戶打哈欠。

大量的研究發(fā)現(xiàn)在界面中最優(yōu)的時間是200-500ms。這個數(shù)字是根據(jù)人類大腦的認(rèn)知水平得出來的。任何小于100ms的動畫是人類很難感知到的，而其他大于1秒的動畫又會讓用戶覺得有些延遲，不夠流暢。

動畫的持續(xù)時間是使得界面流暢的關(guān)鍵

在手機(jī)上，谷歌設(shè)計規(guī)范同樣建議動畫的持續(xù)時間在200-300ms為宜。在平板電腦上，這個時間會稍微長30%，大約在400-450ms。原因很簡單，在更大的屏幕上，元素變化的位置路徑會更長?；诖?，在可穿戴設(shè)備中，持續(xù)時間又要縮短30%了，大約在150-200ms，因?yàn)樾∑聊簧显刈兓奈恢寐窂綍獭?

設(shè)備的大小會影響動畫的持續(xù)時間

在網(wǎng)頁上又會是另外一種方式。由于我們習(xí)慣于在瀏覽器中快速打開網(wǎng)頁，所以我們也希望在不同的狀態(tài)之間能夠快速切換。所以，在網(wǎng)頁上的動畫應(yīng)該要比在手機(jī)上持續(xù)時間少2倍多，在150-200ms之間。一旦超過這個時間區(qū)間，用戶就會覺得網(wǎng)頁是不流暢的，或者覺得是不是網(wǎng)絡(luò)有了問題。

但是，如果你是在頁面中創(chuàng)建一些裝飾性的動畫或者目的是為了吸引用戶的注意力，此時就應(yīng)該拋棄這些規(guī)范，時間你可以做的更長一些。

大界面中的動畫就一定是慢的嗎？并不一定。

還需要記住的一點(diǎn)就是，無論在什么平臺，動畫的持續(xù)時間不僅跟它的移動距離有關(guān)，還跟它本身的大小有關(guān)系。小的元素或者變化不大的動畫應(yīng)該要移動的更快，而大的元素或者復(fù)雜的元素持續(xù)時間稍長一些看起來會更好。

在大小相同的對象中，移動距離最短的物體應(yīng)該最先停止。小的對象與大的對象相比較，小對象移動速度顯得更慢，因?yàn)闀a(chǎn)生更大的偏移量。

動畫的持續(xù)時間取決于物體的大小和移動的距離

當(dāng)對象發(fā)生碰撞時，根據(jù)物理原則，碰撞的能量必須在碰撞對象之間平均分布。而如果在界面中只能看到碰撞體的一部分回彈，往往會顯得不夠自然。因此，最好避免回彈效果，只在一些特殊情況下才用到它。

避免使用彈跳效果，因?yàn)樗鼤稚⒆⒁饬Α?

物體的運(yùn)動軌跡應(yīng)該是清晰銳利的，所以盡量不要使用動態(tài)模糊（在AE中做動畫效果除外）。即使是在現(xiàn)在最新的設(shè)備上也很難重現(xiàn)這些效果，不能把這種動態(tài)模糊的動畫效果應(yīng)用到界面中。

動畫中盡量不要使用動態(tài)模糊

列表項(xiàng)的出現(xiàn)應(yīng)該只允許有一個短暫的延遲。每一個新列表項(xiàng)的出現(xiàn)間隔應(yīng)該在20-25ms之間。元素出現(xiàn)太慢的話，會讓用戶感到很不爽。

列表項(xiàng)出現(xiàn)的動畫應(yīng)該在20-25ms之間。

緩動

緩動可以讓物體運(yùn)動的更加自然。這是動畫的基本原理之一，在?Ollie Johnston 和 Frank Thomas所寫的《 The Illusion of Life: Disney Animation》書中有詳細(xì)的解釋。

為了讓動畫看起來不會覺得太過機(jī)械，物體的運(yùn)動應(yīng)該會同時伴有一些加速度，就像現(xiàn)實(shí)世界中的運(yùn)動一樣，不會有絕對勻速的運(yùn)動形式。

緩動的物體會比較線性運(yùn)動的物體看起來更加自然

線性運(yùn)動

不受任何物理因素影響的運(yùn)動叫做勻速運(yùn)動，這種動畫在用戶眼中看來是非常的機(jī)械和不真實(shí)的。

所有的APP動畫都會用到動畫曲線。我將試著去解釋如何閱讀它們并說明它們的含義。下面的例子中，運(yùn)動就是勻速的，可以看到對象在相同的時間間隔中移動了相同的位置。

線性運(yùn)動

線性動畫在什么時候會用到？舉個例子，對象僅改變它的顏色和透明度的時候會用到。一般來說，當(dāng)一個對象不改變它的位置而只是改變狀態(tài)時，可以嘗試用線性動畫來改變狀態(tài)。

緩入或者說加速曲線

我們可以在曲線上看到，在相同時間內(nèi)，位置的變化會越來越大。這就說明一個物體是在進(jìn)行加速運(yùn)動。

加速運(yùn)動曲線

這種曲線一般應(yīng)用在對象移出界面時，這些可能是系統(tǒng)通知，也可能只是界面中的卡片設(shè)計。但是記住，這種動畫曲線只是會用在物體移出界面時，而反過來就不適用了。

加速曲線應(yīng)用在物體移出界面時

動畫曲線有助于表達(dá)正確的情緒。在下面的例子中，物體動畫的持續(xù)時間和位移大小都是相同的，但你會發(fā)現(xiàn)即使是曲線上一些微小的變化也會讓你看動畫的感受不同。

當(dāng)然，通過改變曲線，可以讓物體的運(yùn)動顯得更加真實(shí)自然。

相同的持續(xù)時間和相同的位移變化，但是會有不同的感受

緩出或者說減速曲線

與緩入恰恰相反，物體的運(yùn)動在開始時位移變化很大，但是后面會越來越小直到最后完全停止。

減速曲線

這種類型的運(yùn)動曲線通常是用在物體進(jìn)入界面中時——快速進(jìn)入屏幕然后再慢慢停下來，在不同卡片或?qū)ο髲钠聊煌膺M(jìn)入界面時可以應(yīng)用上。

減速曲線在此時會讓動畫顯得更加自然

緩入緩出或者說標(biāo)準(zhǔn)曲線

這種曲線使物體有加速和減速的過程。這種類型的動畫在界面中是最常用的，當(dāng)你還在遲疑該用怎樣的動畫曲線時，選擇標(biāo)準(zhǔn)曲線準(zhǔn)沒錯。

標(biāo)準(zhǔn)曲線

根據(jù)谷歌規(guī)范，建議最好是用一些非對稱曲線來使得物體運(yùn)動的更加自然真實(shí)。動畫的結(jié)尾會比動畫的開頭更加需要去強(qiáng)調(diào)，這樣的結(jié)果是加速時間要小于減速時間。在這個情況下，動畫能夠引導(dǎo)用戶更加關(guān)注元素的結(jié)束部分，以至于關(guān)注到其新的狀態(tài)。

注意觀察對稱與非對稱曲線的區(qū)別

緩入緩出動畫常被用在界面中對象從一個位置移動到另一個位置時。在這種情況下，動畫的目的是為了不讓人有過多不必要的關(guān)注。

卡片的非對稱曲線運(yùn)動

同樣的情況還適用于，元素在界面中消失后用戶還能隨時顯示，抽屜導(dǎo)航就是這樣的例子。

抽屜導(dǎo)航的收起過程就是應(yīng)用到了標(biāo)準(zhǔn)曲線

從很多例子中可以看出許多初學(xué)者都忽略了一個基本的規(guī)則——開始動畫不等同于結(jié)束動畫，應(yīng)該分別去設(shè)置，比如在抽屜導(dǎo)航動效中——打開是一個減速動畫但關(guān)閉時卻是一個標(biāo)準(zhǔn)曲線動畫。另外，根據(jù)谷歌設(shè)計規(guī)范，物體出現(xiàn)的動畫持續(xù)時間應(yīng)該略長，以吸引用戶更多的注意力。

側(cè)邊欄的動畫是配合減速曲線和標(biāo)準(zhǔn)曲線一起來實(shí)現(xiàn)的

有一個立方貝塞爾函數(shù)常用來描述這種速度曲線。之所以叫立方是因?yàn)樗腔?個點(diǎn)來的。第一個點(diǎn)在坐標(biāo)軸中是（0，0）（左下），最后一個點(diǎn)是（1，1）(右上)。

基于此，我們只需要描述圖上的兩個點(diǎn)，這是由貝塞爾函數(shù)的四個參數(shù)給出的:前兩個是第一個點(diǎn)的坐標(biāo)x和y，后兩個是第二個點(diǎn)的坐標(biāo)x和y。

為了便于實(shí)際工作，我建議使用2個工具網(wǎng)站來操作

https://easings.net/zh-cn

http://cubic-bezier.com

第一個包含一些最常使用的曲線列表，可以直接將其復(fù)制到原型工具中去。第二個是可以給你自己自定義動畫的曲線，并能實(shí)時查看效果。

不同類型的動畫曲線以及他們不同的參數(shù)

動畫在界面中的編排

就像芭蕾舞編排一樣，主要思想是從一個狀態(tài)到另一個狀態(tài)的過渡引導(dǎo)用戶注意力方向。

一般會有2種編排形式——同級動畫和從屬動畫。

同級動畫

同級動畫意味著所有對象的外觀都服從一個特定的規(guī)則。

在這種情況下，所有卡片都按一個相同的流程出現(xiàn)，引導(dǎo)用戶注意力在一個方向上，即從上到下。如果我們不按照這個順序，用戶的注意力就會分散，如果所有元素同時出現(xiàn)也會很糟糕。

用戶的注意力應(yīng)被引導(dǎo)在一個方向上

至于表格視圖，就會略微有些復(fù)雜。這種情況下，用戶往往是以對角線為焦點(diǎn)去看界面的，所以逐個出現(xiàn)的形式也比較糟糕。另外，逐個出現(xiàn)的動畫在時間上也會過長，而且把用戶的注意力引導(dǎo)成鋸齒狀，這是很不友好的。

按對角線出現(xiàn)的表格視圖動畫

從屬動畫

從屬動畫是指有一個核心運(yùn)動的元素，它吸引用戶所有的注意力，其他元素也都跟隨它的運(yùn)動。這種類型的動畫會顯得更有秩序感，讓用戶更多的去關(guān)注到內(nèi)容本身。

而在其他情況下，用戶是很難知道他到底要去看哪個元素，注意力很容易被分散。如果要設(shè)置多個動畫元素，一定要清楚的知道他的動畫順序，并盡可能的將其他動畫元素弱化。

只賦予一個中心對象生命是值得的，而所有其他的對象都服從于它。否則，用戶就不知道到底應(yīng)該注意哪個元素。

根據(jù)谷歌規(guī)范，當(dāng)運(yùn)動物體的大小不成比例地改變時，它們應(yīng)該沿著弧線而不是直線運(yùn)動。這有助于使動畫更自然。所謂“不成比例”，是指物體的高度和寬度的增加/減少是不對稱地進(jìn)行的，即以不同的速度變化(例如，一個正方形變成一個矩形)。

物體的運(yùn)動如果不成比例，那應(yīng)該按弧線變化。

當(dāng)對象按比例改變其大小時，則此時直線運(yùn)動的形式會更好。由于這種運(yùn)動形式做起來容易得多，弧線軌跡運(yùn)動的規(guī)律就往往被忽視。在現(xiàn)在很多應(yīng)用中，我們都能找到這種例子。

等比的物體運(yùn)動軌跡應(yīng)該使用直線

曲線軌跡運(yùn)動也會有兩種實(shí)現(xiàn)方式:第一種是開始水平移動，然后以垂直運(yùn)動結(jié)束;第二種是開始垂直移動，然后以水平運(yùn)動結(jié)束。

物體沿曲線移動的路徑必須與滾動界面的方向重合。例如，在下面的例子中，我們可以上下滾動界面，相應(yīng)地，卡片以垂直的方式展開更合適——先向右，然后向下。

展開/折疊卡片的方向應(yīng)與界面的軸線重合

如果物體的運(yùn)動路徑彼此相交，它們就應(yīng)該不能穿過對方。物體應(yīng)該通過減慢或加速自身的速度為另一個物體的運(yùn)動留下足夠的空間。另一種方式——只是推開其他物體。為什么要這么做？因?yàn)槲覀兗僭O(shè)界面中的所有對象都位于一個平面上。（譯者注：對于這一點(diǎn)我不是很認(rèn)同，為了更加真實(shí)么？）

在運(yùn)動過程中，物體不應(yīng)該互相穿透，而是為另一個物體的運(yùn)動留下空間。

在另一種情況下，移動的物體可以通過抬高于其他物體，而不會以溶解或通過其他物體的形式來移動。為什么?因?yàn)槲覀兿嘈沤缑嫔显氐男袨閼?yīng)該要符合物理定律，在現(xiàn)實(shí)世界中沒有任何實(shí)體能夠做到直接穿透對方。

物體可以被抬高于其他元素之上來移動

總結(jié)

如果我們總結(jié)上述所有的規(guī)律和原則，可以得出界面動畫應(yīng)該要反映物質(zhì)世界的運(yùn)動,例如我們都知道的，摩擦，加速等等。模仿現(xiàn)實(shí)世界的行為我們可以創(chuàng)建一個優(yōu)秀的動畫，滿足用戶的心理預(yù)期。

一個優(yōu)秀的動畫，應(yīng)該是不會那么刻意，也不會分散用戶對目標(biāo)的注意力。如果是的話，就需要優(yōu)化它，或者干脆把動畫去掉。核心標(biāo)準(zhǔn)是動畫不應(yīng)該降低用戶執(zhí)行任務(wù)的效率。

但是不要忘記，用戶對動畫的好壞感受，是感性大于理性的。所以，最好是把做出來的動畫給用戶進(jìn)行評鑒，然后再不斷優(yōu)化它。

文章來源：云端網(wǎng)

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

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

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

評論(0) 瀏覽(2282)

182021-5

UI設(shè)計原則：可視化層次結(jié)構(gòu)（Visual Hierarchy）設(shè)計方法介紹

seo達(dá)人

這篇文章是一篇很實(shí)用的文章，與格式塔心理學(xué)有異曲同工之處，而這篇文章是基于當(dāng)前流行的手機(jī)UI體驗(yàn)去寫的，對于移動互聯(lián)網(wǎng)這個時代來說更接地氣，更實(shí)用，希望對您有用，enjoy！

隨著技術(shù)和用戶界面的變化，對視覺設(shè)計設(shè)計技能的需求不斷增長。通過每年出現(xiàn)的典型用戶界面的新例子，我們對視覺層次，感知和構(gòu)圖的基本理解有所改變嗎？

視覺感知的現(xiàn)代概念不僅植根于科學(xué)，也植根于心理學(xué)。因此，無論用戶界面如何不斷變化，我們看到和感知視覺信息的方式都將保持不變。考慮到這一點(diǎn)，當(dāng)代交互設(shè)計是否有可能改進(jìn)圖形組合和視覺層次結(jié)構(gòu)的基礎(chǔ)？

視覺感知的基本規(guī)則對于任何視覺設(shè)計都是至關(guān)重要的，因?yàn)樗鼈冎甘救绾伪M可能快地傳達(dá)具有嵌入意義的信息。然而，由于視覺設(shè)計是圖形設(shè)計的近親，因此這些標(biāo)準(zhǔn)是針對印刷媒體而建立的，并且尚未被重新定義為數(shù)字化。

像“數(shù)字包豪斯學(xué)?！边@樣可能建立新設(shè)計原則的東西尚未形成。當(dāng)人們以與印刷完全不同的方式體驗(yàn) UI 時，視覺層次和組合的規(guī)則不僅僅是過時的，而且會在用戶界面中崩潰。

在大多數(shù)情況下，設(shè)計師仍然傾向于將屏幕視為靜態(tài)的二維對象，而交互設(shè)計師面臨的挑戰(zhàn)是創(chuàng)新，而不僅僅是將打印格式應(yīng)用于他們的數(shù)字媒體項(xiàng)目。但在新設(shè)計發(fā)展之前，需要重新審視對視覺層次，感知和構(gòu)圖的基本理解。

Web上的大多數(shù)設(shè)計層次結(jié)構(gòu)最初來自基于印刷的設(shè)計，例如報紙布局。

可視化層次結(jié)構(gòu)：對交互式接口的可視化合成的新理解

什么是視覺層次結(jié)構(gòu)，為什么它很重要？視覺層次結(jié)構(gòu)是在組合中布置內(nèi)容，以便有效地傳達(dá)信息和傳達(dá)意義?？梢晫哟谓Y(jié)構(gòu)首先將查看者引導(dǎo)至最重要的信息，然后引導(dǎo)至次要內(nèi)容。

通過適當(dāng)使用大小，顏色，形狀，距離，比例和方向來建立，通過創(chuàng)造性地使用決定視覺層次的圖形元素來傳達(dá)構(gòu)圖的含義，概念和情緒。

設(shè)計師如何使用尺寸，顏色，形狀和方向來傳達(dá)設(shè)計中的意義和情緒？

視覺層次結(jié)構(gòu)對于每種類型的視覺設(shè)計都至關(guān)重要，無論是需要引導(dǎo)訪問者眼睛的登陸頁面還是移動UI的導(dǎo)航。用戶對每個元素的理解基于組合中的其他元素及其上下文。相應(yīng)地處理組成元素以形成視覺關(guān)系，從而在整個設(shè)計中建立視覺層次。

可視層次結(jié)構(gòu)中的顏色

視覺層次結(jié)構(gòu)的許多規(guī)則可能看起來非常簡單甚至是平庸的，但它們是良好視覺設(shè)計的重要基礎(chǔ)。例如，顏色是視覺設(shè)計中最具影響力的創(chuàng)意元素。

考慮紅十字與單色交叉的直接含義。幾乎普遍，紅十字標(biāo)志著中立和保護(hù)。這樣就可以與顏色的使用立即進(jìn)行溝通。顏色也常用于識別群體，因?yàn)楫?dāng)三個單色群體中的一個紅色交叉以某種方式突出顯示為更重要時。

明亮，豐富的色彩比柔和的色彩更突出，因此具有更大的視覺沖擊力。在界面中，顏色可用于呈現(xiàn)結(jié)構(gòu)感并指向可用的交互。單色界面中的單色可以區(qū)分選擇，甚至可以建議用戶懸停在按鈕之外的內(nèi)容。

單色設(shè)計元素中的顏色或缺乏顏色可用于概述UI元素并在潛意識層面吸引用戶。

顏色也被賦予了意義和情感，可以將明確的信息傳遞給觀眾的潛意識。在品牌推廣方面，對色彩進(jìn)行了大量的心理學(xué)研究，因?yàn)樗谙M(fèi)者與品牌進(jìn)行任何有意義的互動之前就會產(chǎn)生內(nèi)心的反應(yīng)。例如，藍(lán)色通常被認(rèn)為是可靠的，安全的和平靜的，而紅色是刺激性的，并且已知會增加人們的心率。然而，取決于培養(yǎng)，顏色可能具有不同的重要性。

在網(wǎng)頁設(shè)計中有意義的，The Names for Change 網(wǎng)站是結(jié)構(gòu)化的顏色，運(yùn)用的一個很好的案例。該網(wǎng)站通過使用顏色立即傳達(dá)其結(jié)構(gòu); 組織默認(rèn)是分散的，但可以按主題和/或顏色重新排列。

然而，所選擇的音調(diào)有助于克服該站點(diǎn)意義的潛在困難之一。為襪子或衛(wèi)生棉條等日常用品籌款并不足以讓自己出售，因此該網(wǎng)站的激進(jìn)圖形基調(diào)提高了日常用品的感知價值，同時建立了必要的基礎(chǔ)組織結(jié)構(gòu)。

通過“名稱更改”站點(diǎn)上的顏色使用視覺層次結(jié)構(gòu)和結(jié)構(gòu)。

可視層次結(jié)構(gòu)中的大小

讓我們想象一下坐在三個小鳥旁邊的一只大鳥的插圖。沒有任何進(jìn)一步的信息，這個簡單的圖形立即傳達(dá)其元素之間的關(guān)系：父母和孩子，它們共同傳達(dá)一個家庭。

在傳統(tǒng)的圖形設(shè)計中，典型的策略是使最重要的元素成為最大的元素，然后逐步縮小元素的尺寸。大小建立視覺層次結(jié)構(gòu)，因?yàn)樽畲蟮脑厥紫纫鹱⒁?，因此看起來是最重要的?

在文本主體中也經(jīng)常使用不同的字體大小來指示顯著的差異，例如標(biāo)題，部分和引號。次要內(nèi)容（例如圖像標(biāo)題）通常較小，以便不與文本主體競爭。

考慮一些最廣泛使用的可視界面，例如Instagram。屏幕上沒有任何內(nèi)容與圖像和視頻競爭 – 它們占據(jù)了大多數(shù)屏幕的60％以上。 UI的目的是明確的。

在網(wǎng)頁設(shè)計中顛覆視覺層次結(jié)構(gòu)的典型結(jié)構(gòu)的一個例子是藝術(shù)/設(shè)計工作室Ro / Lu的投資組合網(wǎng)站。他們個性的網(wǎng)站可能不是最直觀的，但它挑戰(zhàn)了典型的在線創(chuàng)意組合的視覺安排。由于各種項(xiàng)目的有意隨機(jī)化，每次訪問者訪問該網(wǎng)站時，會有不同的項(xiàng)目在視覺中心展示，這使得每次訪問都會有驚喜。

在大多數(shù)創(chuàng)意設(shè)計工作室的作品集中，作品沒有按層次組織，因?yàn)槊總€項(xiàng)目都是獨(dú)特的，并且被認(rèn)為同樣重要Ro / Lu網(wǎng)站的設(shè)計創(chuàng)造了一個動態(tài)的構(gòu)圖，每次訪問都有不同程度的驚喜，并鼓勵觀眾調(diào)查工作室的廣泛組合。因此，設(shè)計工作室的折衷，跨學(xué)科性質(zhì)由內(nèi)容的隨機(jī)顯示。

藝術(shù)/設(shè)計工作室的網(wǎng)站Ro / Lu upgnds設(shè)計層次結(jié)構(gòu)以產(chǎn)生巨大的效果。

可視化層次結(jié)構(gòu)的排列

視覺層次中的對齊通過在空間上連接元素來傳達(dá)秩序感。與非線性小說中的章節(jié)一樣，想象一個在圖形構(gòu)圖中脫穎而出的正方形。當(dāng)單個元素破壞已建立的結(jié)構(gòu)時，它從組合物中脫穎而出，從而獲得相對于其余元素的含義。

除非元件從視覺網(wǎng)格突出，即從有序感中突出，否則剛性構(gòu)圖可能看起來是停滯的并且在視覺上不感興趣。不對齊或“打破網(wǎng)格”是一種給予圖形元素更多視覺權(quán)重的機(jī)會。這個概念是設(shè)計中視覺層次結(jié)構(gòu)的基礎(chǔ)。

根據(jù)傳統(tǒng)視覺設(shè)計中的原理，放置在框架中心的元件看起來更重要。例如，主要內(nèi)容或界面元素可以放在中心，而導(dǎo)航，菜單和其他次要內(nèi)容通常保持在側(cè)面。

但開創(chuàng)性的設(shè)計師喜歡挑戰(zhàn)現(xiàn)狀。當(dāng)交互式設(shè)計應(yīng)用基本的視覺層次原則，然后將界限推向創(chuàng)新的視覺組合時，就會產(chǎn)生有趣的新體驗(yàn)。通過使用不同的對齊，在元素之間建立新的關(guān)聯(lián)和含義。

例如，DNA項(xiàng)目是一個使用一系列脫節(jié)層次結(jié)構(gòu)來傳達(dá)音樂家專輯創(chuàng)意結(jié)構(gòu)的網(wǎng)站。該網(wǎng)站的結(jié)構(gòu)很復(fù)雜，專輯的結(jié)構(gòu)也是如此。

DNA項(xiàng)目的網(wǎng)站具有不尋常但清晰的視覺層次結(jié)構(gòu)。

可視化層次結(jié)構(gòu)中的圖形

談到形狀時，讓我們考慮一下簡單的心形如何在大多數(shù)社交網(wǎng)絡(luò)UI中傳達(dá)其對“喜歡”的潛在用途。要確定重要性或群體，請考慮四個圈子中的一個心臟。幾何形狀就像顏色一樣，形狀帶有某些內(nèi)涵，賦予元素個性或意義。

在交互式設(shè)計中，幾何形狀對于有效溝通至關(guān)重要，因?yàn)樗鼈儽任谋靖焖伲毡榈貍鬟_(dá)意義。代替文本，圖標(biāo)（符號）（通常是簡單的幾何形狀）已成為大多數(shù)導(dǎo)航系統(tǒng)和UI的模擬。

“喜歡”圖像，下載文件，撥打電話或查看消息背后的目標(biāo)簡單直接地用圖標(biāo)（幾何形狀）傳達(dá)。在全球市場中，這種有效的視覺通信形式變得越來越重要，其中數(shù)字產(chǎn)品通常為具有多種語言的廣大國際受眾提供服務(wù)

報紙必須迅速調(diào)整他們的設(shè)計以適應(yīng)新技術(shù)。其他內(nèi)容產(chǎn)業(yè)也紛紛效仿。

要突出傳統(tǒng)印刷和數(shù)字媒體之間不同的互動模式，請考慮在藝術(shù)部分搜索實(shí)際報紙和在大多數(shù)應(yīng)用中使用搜索圖標(biāo)之間的區(qū)別。直到最近，大多數(shù)報紙網(wǎng)站都將它們的頁面布局與打印時相同，并且篩選內(nèi)容的體驗(yàn)是笨拙和迷失方向。

Signes du Quotidien網(wǎng)站打破傳統(tǒng)的網(wǎng)頁布局，以微妙的方式使用基本的方形和圓形，呈現(xiàn)獨(dú)特的視覺層次結(jié)構(gòu)，引導(dǎo)訪問者瀏覽內(nèi)容。菜單位于頁面的中心，當(dāng)訪問者點(diǎn)擊它時，會出現(xiàn)代表網(wǎng)站四個部分的四個彩色圓點(diǎn)。訪客然后將其中一個點(diǎn)拖入正方形以轉(zhuǎn)到該部分。

日常生活的標(biāo)志網(wǎng)站

可視化層次結(jié)構(gòu)中的動畫

移動元素將在一組停滯元素中承載更大的視覺重量，并且視覺層次中的運(yùn)動是不可能在打印中使用的原則，但是肯定可以包括在視覺設(shè)計器的工具箱中。

除了自身的字面翻譯之外，運(yùn)動能夠進(jìn)行什么交流？通常在UI中使用Motion作為元素可以與之交互的線索。是否可以進(jìn)一步推動運(yùn)動的使用，并將其作為一種獨(dú)特的交流方式？如果視覺層次不僅僅是關(guān)于溝通的效率，還關(guān)乎嵌入的意義，那么運(yùn)動如何被用作必要的視覺交流工具？

對于I Remember網(wǎng)站，主界面（動畫）立即引人注目，因?yàn)樗埢?。雖然動作和界面是功能性導(dǎo)航工具，但視覺設(shè)計師利用這些元素的潛在損失作為傳達(dá)網(wǎng)站潛在使命的方式：阿爾茨海默病。就像組織為其籌集資金的患者的褪色記憶一樣，如果沒有積極的互動，網(wǎng)站就會慢慢消失。

可視化層次結(jié)構(gòu)中的聲音

聲音是另一種不可能在印刷媒體中使用的工具，但尚未在等級原則中發(fā)展。由于聲音完全是非視覺的，因此沒有規(guī)則可供參考。但聲音也可以是一種有效傳達(dá)內(nèi)容，情感或意義的設(shè)計工具。攜帶某些聲音的設(shè)計元素可以相對于彼此進(jìn)行分組，而最大膽的那些可能看起來是最重要的或者可能表示與該組的分離。

附加到元素的聲音質(zhì)量應(yīng)該能夠快速識別，表征或幫助構(gòu)建內(nèi)容。與其相關(guān)視覺元素形成對比的聲音如何傳達(dá)新的含義？

聲音本身可能非常復(fù)雜，以至于在感知到任何視覺之前，它們會建立整個情緒或設(shè)計信息。就像彩色背景建立一種情緒一樣，聲音可以放在背景中，或者在UI中提供反饋，例如響應(yīng)移動設(shè)備上的按鈕。該技術(shù)的原理是基本的，但它可以采用的創(chuàng)造力是魔法可以發(fā)生的地方。

由于其在集體的創(chuàng)造性工作中的重要性，為古根海姆德國藝術(shù)家組織ZERO展覽創(chuàng)建的網(wǎng)站使用聲音作為大氣背景，并且作為導(dǎo)航網(wǎng)站時的反饋形式。大膽的鈴聲建立代表主題開頭的部分，而第三級項(xiàng)目則在后臺點(diǎn)擊。

位于古根海姆的藝術(shù)家團(tuán)體ZERO的網(wǎng)站，其中聲音起著重要作用

可視層次結(jié)構(gòu)的概念

視覺層次結(jié)構(gòu)是一個簡單的概念，理解理論實(shí)際上比設(shè)計者執(zhí)行結(jié)構(gòu)良好的組合的實(shí)際能力更容易。然而，在保持良好設(shè)計的同時在新介質(zhì)中具有創(chuàng)造性是具有挑戰(zhàn)性的。

新媒體一直出現(xiàn)，挑戰(zhàn)性的情況不會減弱 – 恰恰相反。如今，有超過200種不同的屏幕尺寸在使用中。那只是二維的。首先，它是互聯(lián)網(wǎng)，桌面瀏覽器，然后是移動設(shè)備和平板電腦，現(xiàn)在我們正在通過互動電視，物聯(lián)網(wǎng)，可穿戴設(shè)備，虛擬和增強(qiáng)現(xiàn)實(shí)等技術(shù)進(jìn)入新的領(lǐng)域。

真正推動數(shù)字媒體界限的設(shè)計仍處于起步階段。希望視覺層次和良好設(shè)計的原則能夠跟上技術(shù)的快速發(fā)展，使我們的數(shù)字媒體體驗(yàn)仍然充滿意義和樂趣。

原文：Toplal
翻譯：云端設(shè)計

文章來源：云端網(wǎng)

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

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

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

評論(0) 瀏覽(3702)

172021-5

手把手教你利用js給圖片打馬賽克

前端達(dá)人

文章目錄

效果演示

在這里插入圖片描述

Canvas簡介

這個 HTML 元素是為了客戶端矢量圖形而設(shè)計的。它自己沒有行為，但卻把一個繪圖 API 展現(xiàn)給客戶端 JavaScript 以使腳本能夠把想繪制的東西都繪制到一塊畫布上。

HTML5 標(biāo)簽用于繪制圖像（通過腳本，通常是 JavaScript）

不過，元素本身并沒有繪制能力（它僅僅是圖形的容器） - 您必須使用腳本來完成實(shí)際的繪圖任務(wù)

getContext() 方法可返回一個對象，該對象提供了用于在畫布上繪圖的方法和屬性

本手冊提供完整的 getContext(“2d”) 對象屬性和方法，可用于在畫布上繪制文本、線條、矩形、圓形等等

標(biāo)記和 SVG 以及 VML 之間的差異：

標(biāo)記和 SVG 以及 VML 之間的一個重要的不同是，有一個基于 JavaScript 的繪圖 API，而 SVG 和 VML 使用一個 XML 文檔來描述繪圖。

這兩種方式在功能上是等同的，任何一種都可以用另一種來模擬。從表面上看，它們很不相同，可是，每一種都有強(qiáng)項(xiàng)和弱點(diǎn)。例如，SVG 繪圖很容易編輯，只要從其描述中移除元素就行。

要從同一圖形的一個標(biāo)記中移除元素，往往需要擦掉繪圖重新繪制它。
在這里插入圖片描述

知識點(diǎn)簡介

利用js創(chuàng)建圖片

let img = new Image() //可以給圖片一個鏈接 img.src = 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=826495019,1749283937&fm=26&gp=0.jpg' //或者本地已有圖片的路徑 //img.src = './download.jpg' //添加到HTML中 document.body.appendChild(img)  


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8

canvas.getContext(“2d”)

語法：
參數(shù) contextID 指定了您想要在畫布上繪制的類型。當(dāng)前唯一的合法值是 “2d”，它指定了二維繪圖，并且導(dǎo)致這個方法返回一個環(huán)境對象，該對象導(dǎo)出一個二維繪圖 API

let ctx = Canvas.getContext(contextID)  


    
        1

ctx.drawImage()

JavaScript 語法 1：
在畫布上定位圖像：

context.drawImage(img,x,y);  


    
        1

JavaScript 語法 2：
在畫布上定位圖像，并規(guī)定圖像的寬度和高度：

context.drawImage(img,x,y,width,height);  


    
        1

JavaScript 語法 3：
剪切圖像，并在畫布上定位被剪切的部分：

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);  


    
        1

ctx.getImageData()

JavaScript 語法
getImageData() 方法返回 ImageData 對象，該對象拷貝了畫布指定矩形的像素數(shù)據(jù)。
對于 ImageData 對象中的每個像素，都存在著四方面的信息，即 RGBA 值：
R - 紅色 (0-255)
G - 綠色 (0-255)
B - 藍(lán)色 (0-255)
A - alpha 通道 (0-255; 0 是透明的，255 是完全可見的)
color/alpha 以數(shù)組形式存在，并存儲于 ImageData 對象的 data 屬性中

var imgData=context.getImageData(x,y,width,height);  


    
        1

ctx.putImageData()

putImageData() 方法將圖像數(shù)據(jù)（從指定的 ImageData 對象）放回畫布上。

接下來跟著我一步一步做完這個小功能叭~
在這里插入圖片描述

step-by-step

準(zhǔn)備好我們的圖片，并添加上我們的方法

<body> <img src="./download.jpg"> <button onclick="addCanvas()">生成Canvas</button> <button onclick="generateImg()">生成圖片</button> </body>  


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5

在這里插入圖片描述
接下來寫addCanvas方法

function addCanvas() { let bt = document.querySelector('button') let img = new Image(); //1.準(zhǔn)備賦值復(fù)制一份圖片 img.src = './download.jpg'; img.onload = function() { //2.待圖片加載完成 let width = this.width let height = this.height let canvas = document.createElement('canvas') //3.創(chuàng)建畫布 let ctx = canvas.getContext("2d"); //4.獲得該畫布的內(nèi)容 canvas.setAttribute('width', width) //5.為了統(tǒng)一，設(shè)置畫布的寬高為圖片的寬高 canvas.setAttribute('height', height) ctx.drawImage(this, 0, 0, width, height); //5.在畫布上繪制該圖片 document.body.insertBefore(canvas, bt) //5.把canvas插入到按鈕前面 } }  


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15
    

    
        16
    

    
        17
    

    
        18
    

    
        19
    

    
        20
    

    
        21

成功在畫布上得到圖片：
在這里插入圖片描述

嗯，我們已經(jīng)成功走出了成功的一小步，接下來是干什么呢？…嗯，我們需要利用原生的onmouseup和onmousedown事件，代表我們按下鼠標(biāo)這個過程，那么這兩個事件添加到哪呢？

沒錯，既然我們要在canvas上進(jìn)行馬賽克操作，那我們必然要給canvas元素添加這兩個事件

考慮到我們創(chuàng)建canvas的過程復(fù)雜了一點(diǎn)，我們做一個模塊封裝吧！

function addCanvas() { let bt = document.querySelector('button') let img = new Image(); img.src = './download.jpg'; //這里放自己的圖片 img.onload = function() { let width = this.width let height = this.height let { canvas, ctx } = createCanvasAndCtx(width, height) //對象解構(gòu)接收canvas和ctx ctx.drawImage(this, 0, 0, width, height); document.body.insertBefore(canvas, bt) } } function createCanvasAndCtx(width, height) { let canvas = document.createElement('canvas') canvas.setAttribute('width', width) canvas.setAttribute('height', height) canvas.setAttribute('onmouseout', 'end()') //修補(bǔ)鼠標(biāo)不在canvas上離開的補(bǔ)丁 canvas.setAttribute('onmousedown', 'start()') //添加鼠標(biāo)按下 canvas.setAttribute('onmouseup', 'end()') //添加鼠標(biāo)彈起 let ctx = canvas.getContext("2d"); return { canvas, ctx } } function start() { let canvas = document.querySelector('canvas') canvas.onmousemove = () => { console.log('你按下了并移動了鼠標(biāo)') } } function end() { let canvas = document.querySelector('canvas') canvas.onmousemove = null }  


    
        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

測試一下我們的start()和end()是否生效了
在這里插入圖片描述
嗯，目前來看，我們的代碼依然如我們所愿的正常工作

接下來的挑戰(zhàn)更加嚴(yán)峻，我們需要去獲取像素和處理像素，讓我們再重寫start()函數(shù)

 function start() { let img = document.querySelector('img') let canvas = document.querySelector('canvas') let ctx = canvas.getContext("2d"); imgData = ctx.getImageData(0, 0, img.clientWidth, img.clientHeight); canvas.onmousemove = (e) => { let w = imgData.width; //1.獲取圖片寬高 let h = imgData.height; //馬賽克的程度，數(shù)字越大越模糊 let num = 10; //獲取鼠標(biāo)當(dāng)前所在的像素RGBA let color = getXY(imgData, e.offsetX, e.offsetY); for (let k = 0; k < num; k++) { for (let l = 0; l < num; l++) { //設(shè)置imgData上坐標(biāo)為(e.offsetX + l, e.offsetY + k)的的顏色 setXY(imgData, e.offsetX + l, e.offsetY + k, color); } } //更新canvas數(shù)據(jù) ctx.putImageData(imgData, 0, 0); } } //這里為你提供了setXY和getXY兩個函數(shù)，如果你有興趣，可以去研究獲取的原理 function setXY(obj, x, y, color) { var w = obj.width; var h = obj.height; var d = obj.data; obj.data[4 * (y * w + x)] = color[0]; obj.data[4 * (y * w + x) + 1] = color[1]; obj.data[4 * (y * w + x) + 2] = color[2]; obj.data[4 * (y * w + x) + 3] = color[3]; } function getXY(obj, x, y) { var w = obj.width; var h = obj.height; var d = obj.data; var color = []; color[0] = obj.data[4 * (y * w + x)]; color[1] = obj.data[4 * (y * w + x) + 1]; color[2] = obj.data[4 * (y * w + x) + 2]; color[3] = obj.data[4 * (y * w + x) + 3]; return color; }  


    
        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

嗯，我們離成功不遠(yuǎn)拉，最后一步就是生成圖片

好在canavs給我們提供了直接的方法，可以直接將畫布導(dǎo)出為Base64編碼的圖片：

function generateImg() { let canvas = document.querySelector('canvas') var newImg = new Image(); newImg.src = canvas.toDataURL("image/png"); document.body.insertBefore(newImg, canvas) }  


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6

最終效果：
在這里插入圖片描述

是不是無比輕松呢~，來看看你手寫的代碼是否和下面一樣叭：

完整代碼

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <body> <img src="./download.jpg"> <button onclick="addCanvas()">生成Canvas</button> <button onclick="generateImg()">生成圖片</button> </body> <script> function addCanvas() { let bt = document.querySelector('button') let img = new Image(); img.src = './download.jpg'; //這里放自己的圖片 img.onload = function() { let width = this.width let height = this.height let { canvas, ctx } = createCanvasAndCtx(width, height) ctx.drawImage(this, 0, 0, width, height); document.body.insertBefore(canvas, bt) } } function createCanvasAndCtx(width, height) { let canvas = document.createElement('canvas') canvas.setAttribute('width', width) canvas.setAttribute('height', height) canvas.setAttribute('onmouseout', 'end()') canvas.setAttribute('onmousedown', 'start()') canvas.setAttribute('onmouseup', 'end()') let ctx = canvas.getContext("2d"); return { canvas, ctx } } function start() { let img = document.querySelector('img') let canvas = document.querySelector('canvas') let ctx = canvas.getContext("2d"); imgData = ctx.getImageData(0, 0, img.clientWidth, img.clientHeight); canvas.onmousemove = (e) => { let w = imgData.width; //1.獲取圖片寬高 let h = imgData.height; //馬賽克的程度，數(shù)字越大越模糊 let num = 10; //獲取鼠標(biāo)當(dāng)前所在的像素RGBA let color = getXY(imgData, e.offsetX, e.offsetY); for (let k = 0; k < num; k++) { for (let l = 0; l < num; l++) { //設(shè)置imgData上坐標(biāo)為(e.offsetX + l, e.offsetY + k)的的顏色 setXY(imgData, e.offsetX + l, e.offsetY + k, color); } } //更新canvas數(shù)據(jù) ctx.putImageData(imgData, 0, 0); } } function generateImg() { let canvas = document.querySelector('canvas') var newImg = new Image(); newImg.src = canvas.toDataURL("image/png"); document.body.insertBefore(newImg, canvas) } function setXY(obj, x, y, color) { var w = obj.width; var h = obj.height; var d = obj.data; obj.data[4 * (y * w + x)] = color[0]; obj.data[4 * (y * w + x) + 1] = color[1]; obj.data[4 * (y * w + x) + 2] = color[2]; obj.data[4 * (y * w + x) + 3] = color[3]; } function getXY(obj, x, y) { var w = obj.width; var h = obj.height; var d = obj.data; var color = []; color[0] = obj.data[4 * (y * w + x)]; color[1] = obj.data[4 * (y * w + x) + 1]; color[2] = obj.data[4 * (y * w + x) + 2]; color[3] = obj.data[4 * (y * w + x) + 3]; return color; } function end() { let canvas = document.querySelector('canvas') canvas.onmousemove = null } </script> </body> </html>  


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15
    

    
        16
    

    
        17
    

    
        18
    

    
        19
    

    
        20
    

    
        21
    

    
        22
    

    
        23
    

    
        24
    

    
        25
    

    
        26
    

    
        27
    

    
        28
    

    
        29
    

    
        30
    

    
        31
    

    
        32
    

    
        33
    

    
        34
    

    
        35
    

    
        36
    

    
        37
    

    
        38
    

    
        39
    

    
        40
    

    
        41
    

    
        42
    

    
        43
    

    
        44
    

    
        45
    

    
        46
    

    
        47
    

    
        48
    

    
        49
    

    
        50
    

    
        51
    

    
        52
    

    
        53
    

    
        54
    

    
        55
    

    
        56
    

    
        57
    

    
        58
    

    
        59
    

    
        60
    

    
        61
    

    
        62
    

    
        63
    

    
        64
    

    
        65
    

    
        66
    

    
        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

當(dāng)然，你可以做更多創(chuàng)作，比如上面打的馬賽克是正方形的，你可以利用你的數(shù)學(xué)知識讓其變?yōu)閳A形，以圓心為鼠標(biāo)中心擴(kuò)散

你也可以選擇完善一些過程，例如馬賽克位置打錯了，可以選擇將畫布清空然后重新開始~
或者做一些善后處理，導(dǎo)出圖片后隱藏canvas畫布
點(diǎn)個贊吧

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

文章來源：csdn 作者： VGtime

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

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

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

評論(0) 瀏覽(2375)

172021-5

設(shè)計師必修課：如何最大限度滿足顧客設(shè)計需求？

seo達(dá)人

這個問題不僅局限于日常的工作需求中，我認(rèn)為這是一種很有趣的思維方式，我們可以運(yùn)用這個思維模型，幫你Get“如何成為需求方眼里更受歡迎的設(shè)計師”、“如何做好晉級答辯”等問題。

要講清楚這個問題，首先，我們要回顧一下用戶體驗(yàn)的相關(guān)概念。

01、什么是以用戶為中心的設(shè)計

用戶體驗(yàn)這個詞最早被廣泛認(rèn)知是在上世紀(jì)90年代中期，由用戶體驗(yàn)設(shè)計師唐納德·諾曼（Donald Norman）所提出和推廣的。

用戶體驗(yàn)，即用戶在使用一個產(chǎn)品或系統(tǒng)之前、使用期間和使用之后的全部感受，包括情感、信仰、喜好、認(rèn)知印象、生理和心理反應(yīng)、行為和成就等各個方面。

UCD即user-centered design譯為“以用戶為中心的設(shè)計”。UCD 的核心思想非常簡單：在開發(fā)產(chǎn)品的每一個環(huán)節(jié)，都把用戶列入思考范圍。通常會關(guān)注以下要素：可用性，用戶特征，使用場景，用戶任務(wù)和用戶流程。

02、常規(guī)的UCD流程

1、確定場景：產(chǎn)品的主要用戶是誰，驅(qū)動用戶使用產(chǎn)品的動力是什么，用戶有什么訴求以及用戶在什么情況下使用產(chǎn)品；

2、確定需求：明確場景后，就可以確定詳細(xì)的產(chǎn)品需求；

3、構(gòu)建設(shè)計方案和開發(fā)：根據(jù)產(chǎn)品目標(biāo)和用戶需求，開始產(chǎn)品設(shè)計和開發(fā)的迭代過程；

4、評估產(chǎn)品：獲得用戶反饋是至關(guān)重要的一步，是產(chǎn)品迭代優(yōu)化的主要驅(qū)動。

重復(fù)上述過程以進(jìn)一步打磨產(chǎn)品

03、萬能鑰匙：用戶>需求>方案>反饋

基于以上兩個概念，我將UCD思維模型簡化為：用戶>需求>方案>反饋，這也是今天我要探討的主題，下面，我會通過幾個案例，來解釋如何運(yùn)用這個思維模式到我們的工作中。

04、實(shí)例與運(yùn)用

· 場景一：做一名受需求方歡迎的設(shè)計師

產(chǎn)品經(jīng)理：“設(shè)計圖多久能看??？這個需求時間我們著急上線，能快速出來看一版嗎？”

設(shè)計師：“設(shè)計也是需要花時間的，那么短時間內(nèi)完不成啊”

產(chǎn)品經(jīng)理：“這個設(shè)計圖設(shè)計的有問題啊，這里應(yīng)該這么改XXX”

設(shè)計師：“那樣改太丑了”

這個場景經(jīng)常在我們身邊發(fā)生，如果你也遇到過這樣的情況，我們可以換一個視角想一想：設(shè)計師和產(chǎn)品經(jīng)理是上下游的協(xié)同方，要共同去完成一個既定的任務(wù)。此時，設(shè)計師面對的其實(shí)有2類用戶：對接的產(chǎn)品經(jīng)理和該需求的實(shí)際用戶，大多數(shù)設(shè)計師都會有意識考慮后者，所以，今天我來談?wù)勄罢摺?

按照用戶>需求>方案>反饋的思維模式，我們把對接過程拆分如下：

1、用戶：設(shè)計師對接的產(chǎn)品經(jīng)理PM。

2、需求：PM希望設(shè)計師能清晰的理解他的訴求，在技術(shù)資源有限且允許的周期內(nèi)產(chǎn)出設(shè)計圖，這樣，他才能推進(jìn)到下一個環(huán)節(jié)以保證上線。

3、方案：PM的訴求是產(chǎn)出和效率，也就是設(shè)計師需要高效高質(zhì)量的完成需求，再次拆分一下。

如何產(chǎn)出高質(zhì)量設(shè)計圖呢？需要我們理解產(chǎn)品目標(biāo)，用戶需求進(jìn)行分析、場景理解等，最后才是執(zhí)行環(huán)節(jié)。執(zhí)行就考驗(yàn)手活了，這里不多贅述。

如何提升效率？減少信息不對稱、積極主動溝通是提升效率的關(guān)鍵，在產(chǎn)品目標(biāo)及用戶理解>場景分析>方案執(zhí)行等環(huán)節(jié)都需要及時和產(chǎn)品積極溝通，達(dá)成共識。

4、反饋：定期找對接的需求方復(fù)盤協(xié)作問題，要有開放的心態(tài)，勇于面對雙方的吐槽，做到有問題及時響應(yīng)及時解決。除此之外，我也建議設(shè)計師要爭取更多的機(jī)會貼近業(yè)務(wù)，了解各階段業(yè)務(wù)的問題和痛點(diǎn)，真正做到幫助產(chǎn)品實(shí)現(xiàn)業(yè)務(wù)目標(biāo)。

所以當(dāng)我們把產(chǎn)品經(jīng)理當(dāng)做我們的用戶，我們的協(xié)同流程理解為閉環(huán)的用戶體驗(yàn)時，很多問題就迎刃而解了。

· 場景二：如何順利通過晉級？

“我該講點(diǎn)啥？”

“我做的項(xiàng)目都很散、碎，不知道怎么整合在一起”

“我的能力怎么才能展現(xiàn)給評委”

這是很多設(shè)計師面對晉級的困惑。

雖然不能在一篇文章里面一一解答清楚這些問題，但是我們?nèi)匀荒軐x級過程思考成閉環(huán)的用戶體驗(yàn)。接下來，我們繼續(xù)拆解吧。

1、用戶：評委，這里也可以做用戶分層，包含：跨職能的評委，和設(shè)計團(tuán)隊(duì)的專業(yè)線評委。

2、需求：評委要在10-15分鐘內(nèi)，判斷你能否達(dá)到目標(biāo)職級的要求。

3、方案：幫助評委認(rèn)可我真的達(dá)到目標(biāo)職級的要求。大多數(shù)評委對答辯人其實(shí)都不太了解，我們應(yīng)該站在不了解自己的角度去講述。

所以需要我們：擺業(yè)績、講能力，把評委關(guān)心的事情（符合度）呈現(xiàn)出來，給他判斷依據(jù)和線索。當(dāng)然所有的講述素材都是日常工作中，點(diǎn)點(diǎn)滴滴積累和沉淀的。

4、反饋：結(jié)合評委、直屬leader的反饋，思考述職的表現(xiàn)。

05、總結(jié)

一流設(shè)計網(wǎng)（yiliusheji.com）提示以用戶為中心、做好用戶體驗(yàn)是一個很好的思維方式，今天我只是列舉了兩個常見的例子，我認(rèn)為還能延伸到工作、生活中的方方面面。

比如做一個項(xiàng)目匯報，當(dāng)我們面對的匯報對象不同時，我們講述的內(nèi)容和方式都要根據(jù)匯報對象，也就是用戶需求進(jìn)行設(shè)計。

同理，現(xiàn)在大家都在講產(chǎn)業(yè)升級，深入線上線下體驗(yàn)，這其中的每一個環(huán)節(jié)觸點(diǎn)，我們所面對的用戶、場景也是多樣化的，需要我們用顆粒度更細(xì)的視角去思考。

文章來源：搜狐網(wǎng)

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

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

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

評論(0) 瀏覽(2106)

172021-5

Slick.js使用方法——幻燈片

前端達(dá)人

和Swiper.js一樣

簡介

slick 是一個基于 jQuery 的響應(yīng)觸摸式幻燈片插件，支持IE8+，Chrome, Firefox, and Safari，具有以下特點(diǎn)：

支持響應(yīng)式
瀏覽器支持 CSS3 時，則使用 CSS3 過度/動畫
支持移動設(shè)備滑動
支持桌面瀏覽器鼠標(biāo)拖動
支持循環(huán)
支持左右控制
支持動態(tài)添加、刪除、過濾
支持自動播放、圓點(diǎn)、箭頭、回調(diào)等等

兼容

瀏覽器兼容：兼容 IE7+ 及其他主流瀏覽器，若要兼容 IE7，需修改 CSS（slick.css）。

jQuery兼容：兼容 1.7 及以上版本。

使用方法

1、引入文件

  
    
        <link rel="stylesheet" href="style/slick.css">
    

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

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

注意：需jQuery 1.7

2、HTML

  
    
        <div class="slick">
    

    
            <div><a ><img src="images/1.jpg" alt=""></a></div>
    

    
            <div><a ><img src="images/2.jpg" alt=""></a></div>
    

    
            <div><a ><img src="images/4.jpg" alt=""></a></div>
    

    
            <div><a ><img src="images/3.jpg" alt=""></a></div>
    
    <div><a ><img src="images/5.jpg" alt=""></a></div>
    
        </div>

3、JavaScript

  
    
        $(function(){
    

    
            $('.slick').slick({
    

    
                dots: true
    

    
        });
    

    
        });

參數(shù)

參數(shù)	類型	默認(rèn)值	說明
accessibility	布爾值	true	啟用Tab鍵和箭頭鍵導(dǎo)航
autoplay	布爾值	false	自動播放
autoplaySpeed	整數(shù)	3000	自動播放間隔
centerMode	布爾值	false	中心模式
centerPadding	字符串	’50px’	中心模式左右內(nèi)邊距
cssEase	字符串	‘ease’	CSS3 動畫
customPaging	function	n/a	自定義分頁
dots	布爾值	false	指示點(diǎn)
draggable	布爾值	true	啟用桌面拖動
easing	字符串	‘linear’	animate() fallback easing
fade	布爾值	false	淡入淡出
arrows	布爾值	true	左右箭頭
infinite	布爾值	true	循環(huán)播放
lazyLoad	字符串	‘ondemand’	延遲加載，可選 ondemand 和 progressive
onBeforeChange(this, index)	method	null	開始切換前的回調(diào)函數(shù)
onAfterChange(this, index)	method	null	切換后的回調(diào)函數(shù)
onInit(this)	method	null	第一次初始化后的回調(diào)函數(shù)
onReInit(this)	method	null	再次初始化后的回調(diào)函數(shù)
pauseOnHover	布爾值	true	鼠標(biāo)懸停暫停自動播放
responsive	object	null	斷點(diǎn)觸發(fā)設(shè)置
slide	字符串	‘div’	滑動元素查詢
slidesToShow	整數(shù)	1	幻燈片每屏顯示個數(shù)
slidesToScroll	整數(shù)	1	幻燈片每次滑動個數(shù)
speed	整數(shù)	300	滑動時間
swipe	布爾值	true	移動設(shè)備滑動事件
touchMove	布爾值	true	觸摸滑動
touchThreshold	整數(shù)	5	滑動切換閾值，即滑動多少像素后切換
useCSS	布爾值	true	使用 CSS3 過度
vertical	布爾值	false	垂直方向

方法

方法	Argument	說明
slick()	options : object	初始化 slick
unslick()		銷毀 slick
slickNext()		切換下一張
slickPrev()		切換上一張
slickPause()		暫停自動播放
slickPlay()		開始自動播放
slickGoTo()	index : int	切換到第 x 張
slickCurrentSlide()		返回當(dāng)前幻燈片索引
slickAdd()	element : html or DOM object, index: int, addBefore: bool	Add a slide. If an index is provided, will add at that index, or before if addBefore is set. If no index is provided, add to the end or to the beginning if addBefore is set. Accepts HTML String
slideRemove()	index: int, removeBefore: bool	Remove slide by index. If removeBefore is set true, remove slide preceding index, or the first slide if no index is specified. If removeBefore is set to false, remove the slide following index, or the last slide if no index is set.
slickFilter()	filter : selector or function	Filters slides using jQuery .filter syntax
slickUnfilter()		Removes applied filter
slickSetOption(option,value,refresh)	option : string(option name), value : depends on option, refresh : 布爾值	Sets an option live. Set refresh to true if it is an option that changes the display

演示下載

Demo：http://kenwheeler.github.io/slick/

GitHub：https://github.com/kenwheeler/slick

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

文章來源：csdn 作者：cc蒲公英

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

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

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

評論(0) 瀏覽(2739)

172021-5

設(shè)計師的數(shù)據(jù)分析與場景化設(shè)計

資深UI設(shè)計者

隨著互聯(lián)網(wǎng)的發(fā)展，近這幾年設(shè)計圈子里大家都在討論UGD（User Growth Design），要向UGD轉(zhuǎn)型等等，以用戶為中心，以增長為導(dǎo)向，這個概念本身并沒有問題，而且是對UED的一種非常棒的進(jìn)化和升級，要求設(shè)計團(tuán)隊(duì)需要具備更綜合的專業(yè)能力與視野。本著對團(tuán)隊(duì)的升級優(yōu)化，我也以UGD的思路對團(tuán)隊(duì)有了新的更高的要求，然而在這個過程中卻發(fā)現(xiàn)在很多問題。

隨著各種社交平臺的傳播普及，什么閉環(huán)、串聯(lián)、顆粒度等等這些互聯(lián)網(wǎng)黑語，滿大街飛來飛去，設(shè)計師們的PPT、匯報資料是越來越豐富多彩，但項(xiàng)目效果卻并不明顯。數(shù)據(jù)、增長的概念確實(shí)是鋪開了，但卻成了PPT里的裝飾，并沒有真正落地生根。

經(jīng)過很長時間的摸索，我們終于有了一套適合團(tuán)隊(duì)自己的UGD思路，也一步一步的在不斷的優(yōu)化提升，下面以我們做過的一個項(xiàng)目（用戶投資路徑優(yōu)化）為例來說說我們對UGD的思考，以及設(shè)計師對數(shù)據(jù)分析以及場景化設(shè)計的思路。

1. U user

以用戶為中心，就是關(guān)注用戶的行為，串聯(lián)數(shù)據(jù)，從點(diǎn)線面結(jié)合場景分析，提出問題所在。

作為設(shè)計師，最常關(guān)注的用戶數(shù)據(jù)就是轉(zhuǎn)化率、點(diǎn)擊率、停留時長、跳轉(zhuǎn)路徑等等，從單一數(shù)據(jù)來看，都是一些常見的簡單的數(shù)據(jù)，但要真正能夠分析用戶，還需要結(jié)合實(shí)際場景來分析。

案例：

我們在分析交易線的數(shù)據(jù)時發(fā)現(xiàn)了一些問題，并對數(shù)據(jù)做了對比分析。

[ 項(xiàng)目列表頁 ]

用戶的點(diǎn)擊主要集中在前十個投資項(xiàng)目，占據(jù)整個頁面點(diǎn)擊的80%。

[ 項(xiàng)目詳情頁 ]

用戶通過列表頁進(jìn)入到詳情頁，詳情頁的瀏覽率較高，但轉(zhuǎn)化卻很低，另外優(yōu)惠券的點(diǎn)擊率十分高，超過85%，意味著進(jìn)入到詳情頁的用戶，基本上都進(jìn)入過優(yōu)惠券頁面，而最終促成成交卻很低。

以上是整個交易環(huán)節(jié)最初始的兩個頁面，也是最核心的頁面，從單個頁面的數(shù)據(jù)（點(diǎn)）來看都屬于正常漏斗數(shù)據(jù)表現(xiàn)，接下來我們從用戶路徑（線）的角度來繼續(xù)分析。

我們從用戶當(dāng)中，抽取了部分最終完成了交易的用戶，對整個交易路徑的進(jìn)行分析，結(jié)果發(fā)現(xiàn)用戶在列表頁——詳情頁——優(yōu)惠券這三個步驟之間反復(fù)切換。

不難看出，用戶在列表頁、詳情頁、優(yōu)惠券選擇頁來回切換，即使最終產(chǎn)生交易，但整個路徑耗時長，反復(fù)操作，跳轉(zhuǎn)不合理，導(dǎo)致大量流失，這是目前數(shù)據(jù)所呈現(xiàn)出來的情況，也是問題的核心所在。

2. G growth

以增長為導(dǎo)向，以數(shù)據(jù)為依據(jù)發(fā)現(xiàn)或提出問題所在，確定最終需要增長（優(yōu)化）的數(shù)據(jù)指標(biāo)，并以此為目標(biāo)展開思考，提出解決思路。

案例：

這是最典型的購物交易場景，通過上面的分析，我們再結(jié)合場景化的思路進(jìn)一步整理思考用戶的操作行為目的。

以投資理財?shù)慕嵌?，換位思考，其實(shí)就是：想投資——挑選——看看優(yōu)惠——挑挑其他的——再看看優(yōu)惠——再看看其他的——還看優(yōu)惠。

用戶為何反復(fù)的從列表頁進(jìn)入詳情，又跳轉(zhuǎn)回列表頁再進(jìn)入詳情頁？這就是突破口了，想清楚這一點(diǎn)，解決思路也就清晰了。

我們舉一個現(xiàn)實(shí)生活中的購物場景來幫助思考分析（靈感來源于生活）。

購物路徑1：想買東西-找到對應(yīng)的貨架-使用優(yōu)惠券并買單；

購物路徑2：有優(yōu)惠券-到超市看看有沒有想買的-使用優(yōu)惠券并買單；

在現(xiàn)實(shí)生活中，除了”有想買的東西”這一主觀需求外，對交易產(chǎn)生一定決策作用的，就是優(yōu)惠。

結(jié)合前面對投資用戶路徑的分析來看，用戶交易路徑如此反復(fù)，實(shí)際上就是在同樣的資金投入的前提下，對比不同的項(xiàng)目、不同的優(yōu)惠，如何搭配才能利益最大化，這就是用戶的最核心需求。

如何幫助用戶快速完成相關(guān)數(shù)據(jù)的對比，縮短操作路徑，降低交易耗時，從而減少流失提升成交率，這就是解決思路，也是我們需要增長（優(yōu)化）的數(shù)據(jù)指標(biāo)。

基于場景化的分析明確用戶的核心需求，確定需要增長（優(yōu)化）的數(shù)據(jù)指標(biāo)，我們提出來了兩個解決方向。

[ A方案——詳情頁的快速切換（優(yōu)化） ]

，在原有的路徑上，保持用戶的操作習(xí)慣，新增詳情頁左右滑動切換的功能，用戶學(xué)習(xí)成本低，開發(fā)成本低，可快速上線，但對于路徑優(yōu)化、數(shù)據(jù)對比不夠直接，治標(biāo)不治本；

[ B方案—— 設(shè)計新的快速路徑（創(chuàng)新）]

結(jié)合前面分析的兩種現(xiàn)實(shí)生活中的購物場景，在原有的路徑上，針對平臺老客對平臺項(xiàng)目的規(guī)則詳情已經(jīng)清楚了解的特點(diǎn)，設(shè)置多一條快速通道，減少干擾，對比直接，加快老客的決策速度，但用戶學(xué)習(xí)成本高，開發(fā)成本高，雖然治本但風(fēng)險也大。

3. D design

到此為止，我們就可以進(jìn)入具體的解決方案的嘗試了，設(shè)計師的方案，自然就是設(shè)計稿了。

案例：

A方案直接開發(fā)上線即可，上線后就可以收集數(shù)據(jù)進(jìn)行分析了，經(jīng)過兩周的時間，從數(shù)據(jù)表現(xiàn)來看，交易總時長稍有所下降但并不明顯，約下降了2%，而交易率基本持平。

[ B方案最終UI稿 ]

在此期間B方案完成設(shè)計開發(fā)后，協(xié)調(diào)產(chǎn)品運(yùn)營推廣等業(yè)務(wù)方，選擇確定部分渠道進(jìn)行ABtest，經(jīng)過一個多月，持續(xù)收集數(shù)據(jù)反饋優(yōu)化方案，多輪ABtest后，從數(shù)據(jù)反饋來看，B方案數(shù)據(jù)提升明顯，有效的降低了用戶的決策時長（降低了近20%），提升交易成功率（老客轉(zhuǎn)化提升1%），說明方案的可行性強(qiáng)，隨即全量更新。

從隨后的數(shù)據(jù)表現(xiàn)來看（總轉(zhuǎn)化提升0.3%，總時長降低15%），整體方案對平臺的整體效益產(chǎn)生了積極推動作用，說證明了設(shè)計團(tuán)隊(duì)對于產(chǎn)品與企業(yè)的價值（我們不是美工）。

在后續(xù)工作過程中，持續(xù)根據(jù)數(shù)據(jù)表現(xiàn)，分析，發(fā)現(xiàn)并提出問題，提出解決方案，測試驗(yàn)證，不斷的循環(huán)重復(fù)，持續(xù)提升用戶體驗(yàn)，以數(shù)據(jù)為依據(jù)，以增長（優(yōu)化）為目標(biāo)，這就是我們對于UGD的一些思考跟嘗試。

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

文章來源：站酷作者：包大佬

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

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

評論(0) 瀏覽(1597)

172021-5

按鈕的最佳尺寸到底是多少？

資深UI設(shè)計者

很多設(shè)計師包括我在內(nèi)對按鈕尺寸有著頗多困惑。為什么很多產(chǎn)品甚至蘋果本身并沒有遵循 44pt 的標(biāo)準(zhǔn)規(guī)范？為什么有些場景下的 CTA 按鈕那么??？按鈕的最佳尺寸到底是多少？按鈕規(guī)范背后到底是什么樣的科學(xué)依據(jù)？這些依據(jù)可否量化？

emmmm，如果你和我一樣有著這些困惑，本篇文章應(yīng)該可以給你很多啟發(fā)。

按鈕尺寸對點(diǎn)擊行為的影響

按鈕的尺寸具體影響到的依舊是視覺和交互的兩種能力。

視覺能力上很好理解。當(dāng)一個元素尺寸越大，人眼就越容易抓捕到這個元素。所以那些越重要的東西，往往會給予更大的尺寸來強(qiáng)制用戶注意到它，這也可以解釋為什么甲方總喜歡不停地在背后指指點(diǎn)點(diǎn)嫌棄元素太小，就是因?yàn)檫@些元素對他們來說非常重要，只是他們沒有我們那么專業(yè)，知道強(qiáng)調(diào)一個東西的手法不僅僅是放大一種策略。

因此，相對較大的按鈕尺寸從視覺上，可以迅速捕獲用戶的注意力，對點(diǎn)擊行為是有益的。

而在交互能力上，涉及到的依然是前篇提到的菲茨定律——目標(biāo)尺寸越大，移動至目標(biāo)所花費(fèi)的時間就越短。所以，較大的按鈕尺寸可以降低用戶交互的交互成本，使得目標(biāo)更加”易點(diǎn)“，對點(diǎn)擊行為同樣是有益的。

但是，按鈕尺寸并非越大越好，一方面是避免視覺上的失衡，另一方面也會受到界面空間限制、以及場景差異等因素的影響。

規(guī)范中的定義

我們先來看下 iOS 的。蘋果規(guī)定的最小點(diǎn)擊區(qū)域是 44pt，這意味著一旦點(diǎn)擊區(qū)域低于 44pt，將可能會出現(xiàn)點(diǎn)擊失準(zhǔn)的情況。當(dāng)然，一些控件（標(biāo)簽欄圖標(biāo)、文字鏈）可以在視覺表現(xiàn)上只有 24pt*24pt，但是會在周圍加入額外的填充使其達(dá)到 44pt。

但是，在實(shí)際的 iOS 原生產(chǎn)品界面中，很多按鈕并未嚴(yán)格執(zhí)行 44pt 這個數(shù)值。小于 44pt 的按鈕比比皆是，比如信息頁的發(fā)送、App Store 的獲取、購買浮層的確認(rèn)、添加 siri、導(dǎo)航類右上角的工具型按鈕，它們的點(diǎn)擊區(qū)域?yàn)榘粹o本身，但是均未達(dá)到 44pt。況且其中有一些還是非常典型的 CTA 按鈕，比如 App Store 產(chǎn)品詳情頁中的獲取按鈕，它的高度僅僅是 27pt。

按鈕的最佳尺寸到底是多少？這篇給你權(quán)威答案！

而 Android 中的按鈕建議尺寸是 56dp，但是和 iOS 一樣存在著大量低于這個尺寸的情況。其中不乏那些 CTA 按鈕。

學(xué)會CTA 設(shè)計方法后，按鈕的點(diǎn)擊率高了49%！

在絕大多數(shù)人的眼里，交互設(shè)計師的職責(zé)是對產(chǎn)品用戶體驗(yàn)負(fù)責(zé)，毋庸置疑這肯定是正確的。但交互設(shè)計師并不是一個獨(dú)立的個體，我們既服務(wù)于用戶又服務(wù)于團(tuán)隊(duì)，服務(wù)于產(chǎn)品的商業(yè)價值，提升轉(zhuǎn)化率也是交互設(shè)計中不得不考慮的重要一環(huán)。

閱讀文章 >>

按鈕的最佳尺寸到底是多少？這篇給你權(quán)威答案！

這些情況的發(fā)生其實(shí)也很好理解，每個按鈕所對應(yīng)的用戶場景、業(yè)務(wù)訴求不同，因此并不能一招鮮用一個尺寸吃遍所有場景。但是，有沒有一些科學(xué)的依據(jù)來可量化地解釋按鈕尺寸對點(diǎn)擊的影響？

從 Apple Music 說起

著名產(chǎn)品設(shè)計師斯科特·赫爾夫就曾在他的文章《Using science to make truly tappable user interfaces》中提過，iOS9 的 Apple Music 在鎖屏界面下的按鈕過小，經(jīng)常會發(fā)生無法準(zhǔn)確點(diǎn)擊的情況，他需要集中精力精確得點(diǎn)擊才能完成任務(wù)。

不過蘋果在 iOS10 之后，鎖屏界面下的三個按鈕、乃至進(jìn)度、音量的控制球全部被顯著地增大。這使得歌曲點(diǎn)擊操作的錯誤率明顯下降，不論是在什么場景下（你懂得，跑步、擠地鐵這些不可控的場景下總是會有聽歌的需求）都可以輕松地點(diǎn)擊。

按鈕的最佳尺寸到底是多少？這篇給你權(quán)威答案！

而他為了解釋按鈕尺寸所帶來的變化，引入了歷史上著名的兩個實(shí)驗(yàn)。

第一次實(shí)驗(yàn)

2006 年，芬蘭 Oulu 大學(xué)，Maryland 大學(xué)和 Parck 學(xué)院的研究人員組成一個研究小組。他們的研究目標(biāo)是，確定在觸摸屏幕上單手使用最容易的按鈕尺寸。

按鈕的最佳尺寸到底是多少？這篇給你權(quán)威答案！

他們進(jìn)行了兩組不同場景的實(shí)驗(yàn)。第一組讓受試者執(zhí)行一次性的任務(wù)，點(diǎn)擊一個 CTA 按鈕、復(fù)選框或者多選框；第二組讓受試者執(zhí)行多次連續(xù)的任務(wù)，比如輸入電話號碼。并且在實(shí)驗(yàn)期間，研究人員測試了每一種場景下按鈕的尺寸。最終的實(shí)驗(yàn)結(jié)果表明，單個任務(wù)下，按鈕尺寸小于 9.2mm 后錯誤率顯著增加，而多次連續(xù)任務(wù)下，按鈕尺寸小于 9.6mm 后的錯誤率顯著增加。

特別的是，對于多次連續(xù)任務(wù)，9.6mm 到 11.5mm 之間的錯誤率基本不變。

按鈕的最佳尺寸到底是多少？這篇給你權(quán)威答案！

看到這，來稍微總結(jié)一下，9.2mm 和 9.6mm 是兩個關(guān)鍵的尺寸節(jié)點(diǎn)。在單次任務(wù)和多次連續(xù)任務(wù)下，按鈕尺寸分別小于 9.2mm 和 9.6mm 會導(dǎo)致錯誤率的攀升。這個結(jié)果和 MIT Touch Lab 研究得出的最佳熱區(qū)尺寸 10mm 很接近。

第二次實(shí)驗(yàn)

當(dāng)然，這還不算完。5 年后，德國兩所大學(xué)的研究人員又進(jìn)行了一項(xiàng)類似的研究，目的是確定觸摸屏幕按鈕的最佳大小。

他們的實(shí)驗(yàn)方法相對就很潮了。他們專門開發(fā)了一款安卓游戲，游戲玩法也很無腦：玩家必須要精準(zhǔn)地點(diǎn)擊到屏幕中任何地方飄動的任意尺寸的圓圈，游戲才能繼續(xù)。并且速度越快，得分也就越高。

按鈕的最佳尺寸到底是多少？這篇給你權(quán)威答案！

這款游戲在上線之后被下載了 10w 次，并且悄咪咪得暗中記錄了用戶所有的點(diǎn)擊行為，記錄總量約為 1.2 億次。

最后根據(jù)統(tǒng)計分析，得出了錯誤率和圓圈尺寸的圖表關(guān)系。你可以看到，和 5 年前的實(shí)驗(yàn)同樣，呈現(xiàn)類似的指數(shù)關(guān)系。研究人員根據(jù)圖表發(fā)現(xiàn)：

在圓圈尺寸小于 12mm 后，錯誤率開始逐步提升。在尺寸小于 8mm 之后，錯誤率高達(dá) 40%以上。并且研究還發(fā)現(xiàn)，在圓圈尺寸超過 12mm 之后，玩家的正確率并沒有得到顯著的提升。

按鈕的最佳尺寸到底是多少？這篇給你權(quán)威答案！

結(jié)論

由上述的兩個實(shí)驗(yàn)，我們可以概括出一些有用的結(jié)論。

根據(jù)各自的實(shí)驗(yàn)，在目標(biāo)尺寸分別小于 9.2mm、9.6mm 或者 12mm 后，均會導(dǎo)致錯誤率的攀升；
當(dāng)目標(biāo)尺寸增加到一定程度之后，正確率基本保持不變。

那么，按鈕的最佳尺寸到底是多少呢？

斯科特將實(shí)驗(yàn)得出的關(guān)鍵尺寸與蘋果、谷歌和微軟三大規(guī)范進(jìn)行結(jié)合，發(fā)現(xiàn)了一些有意思的現(xiàn)象——

iOS 的 44pt 對應(yīng)到實(shí)際尺寸為 6.9mm，約 7mm；
Android 的 56pt 對應(yīng)到實(shí)際尺寸為 8.8mm，約 9mm；
而微軟的 9mm+兩邊 2mm 的熱區(qū)，對應(yīng)的實(shí)際尺寸為 13mm。

可以看到 Android 和微軟的尺寸，基本對應(yīng)到了這兩項(xiàng)實(shí)驗(yàn)得出的關(guān)鍵尺寸。

按鈕的最佳尺寸到底是多少？這篇給你權(quán)威答案！

最后，再來看下開頭 iTunes 的鎖屏界面的按鈕?？梢钥吹綇?iOS9 到 iOS10，蘋果將按鈕可點(diǎn)范圍由 7mm（44pt）擴(kuò)大至 12mm（82pt），結(jié)果也正好符合了微軟的規(guī)范?？吹竭@里，你肯定更困惑了——按鈕的最佳尺寸到底是多少？

其實(shí)，并不存在什么按鈕的最佳尺寸。

不論是 iOS 的 44pt，Android 的 56dp，還是微軟的 82pt，都需要具體情況具體分析。界面布局、用戶場景、業(yè)務(wù)訴求等等，都屬于按鈕尺寸的影響因素。

比如下面這些 iOS 端產(chǎn)品的 CTA 按鈕，它們的尺寸最小到 26pt，最大到 87pt，而且每個產(chǎn)品內(nèi)部的 CTA 按鈕也存在差異。你能說出這些按鈕哪一個是最佳尺寸嗎?

按鈕的最佳尺寸到底是多少？這篇給你權(quán)威答案！

當(dāng)然，我們起碼可以去界定一些相對可控的范圍。

這里我簡單根據(jù)斯科特文章中的結(jié)論，結(jié)合市面主流產(chǎn)品的情況劃分出按鈕的幾類尺寸：

1. 常規(guī)場景、局部模塊

比如 App Store 的產(chǎn)品詳情頁的獲取，知乎中個人主頁的關(guān)注，都屬于當(dāng)前頁的局部模塊，點(diǎn)擊之后通常是狀態(tài)的變化或者出現(xiàn)新的彈層。這些按鈕的尺寸我建議控制在 28pt~40pt 之間。

按鈕的最佳尺寸到底是多少？這篇給你權(quán)威答案！

2. 常規(guī)場景、全局模塊、強(qiáng)業(yè)務(wù)屬性

比如微信個人頁的添加好友、各大電商商品詳情頁的加購、登錄注冊頁的登錄注冊等等。這些頁面的 CTA 按鈕隸屬于頁面全局，所以可以給它極高的權(quán)重、甚至全局吸底展示（如詳情頁），以更快地促進(jìn)點(diǎn)擊。通常，這類按鈕在常規(guī)場景下具備了最大尺寸。我個人的建議是保持在 40pt~60pt 之間。

按鈕的最佳尺寸到底是多少？這篇給你權(quán)威答案！

3. 不可控場景

不可控場景的意思就是，用戶點(diǎn)擊按鈕時所處的場景可能比較特殊，并且這種特殊的場景很可能給用戶帶來一系列無法掌控的風(fēng)險。

比如 keep 在跑步場景下的按鈕，就需要充分考慮到跑步時不穩(wěn)定的狀態(tài)，如果按鈕和常規(guī)場景一樣，那很容易發(fā)生無法準(zhǔn)確點(diǎn)擊的情況，增加意外事故發(fā)生的概率；包括來電場景、地圖導(dǎo)航場景、快遞取件場景等等，都屬于不可控的場景。各位可以自己代入腦補(bǔ)一下，這些場景中無法準(zhǔn)確點(diǎn)擊時容易產(chǎn)生什么樣的后果。

所以這些場景中的按鈕就得夠大，以盡可能覆蓋到那些極端的不可控情況。我個人的建議保持在 60pt~90pt 之間。

按鈕的最佳尺寸到底是多少？這篇給你權(quán)威答案！

當(dāng)然，這僅僅是很粗略的參考區(qū)間值，如何結(jié)合現(xiàn)有業(yè)務(wù)訴求、用戶場景需求等因素去合理地界定才是重中之重。如果為了追求最佳效果或者尺寸的一致性，反而有些舍本逐末的意思。

其實(shí)從知乎去年 10 周年的大改版可以看到一些有意思的細(xì)節(jié)。很多按鈕的高度比以往更高了。比如鹽選會員的續(xù)費(fèi)按鈕，由之前的 36pt 提升到了 40pt。

按鈕的最佳尺寸到底是多少？這篇給你權(quán)威答案！

個人主頁的關(guān)注按鈕也由 28pt 提升到了 32pt，你仔細(xì)看的話，按鈕的寬度也發(fā)生了變化，從之前的 90pt 提升到了 100pt。

按鈕的最佳尺寸到底是多少？這篇給你權(quán)威答案！

邀請回答界面中的寫回答按鈕，也由原本的文字鏈，提升到了實(shí)心按鈕，高度則直接復(fù)用了關(guān)注按鈕的尺寸——32pt。哦，不好意思，這應(yīng)該是按鈕設(shè)計形式上的改變。

按鈕的最佳尺寸到底是多少？這篇給你權(quán)威答案！

總之一句話，知乎這次的改版，CTA 按鈕的尺寸更大了。我們從尺寸對點(diǎn)擊行為的影響可以推導(dǎo)出，這次改版背后更為明確的業(yè)務(wù)目標(biāo)——促進(jìn)UGC內(nèi)容生產(chǎn)、促進(jìn)關(guān)系鏈沉淀（一旦沉淀了復(fù)雜的關(guān)系鏈，用戶也就更難以離開平臺）以及會員付費(fèi)轉(zhuǎn)化。

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

文章來源：優(yōu)設(shè) 作者：轉(zhuǎn)行人的設(shè)計筆記

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

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

評論(0) 瀏覽(3019)

首頁

首先我們要知道setTimeout和setInterval的區(qū)別

計時器

The ultimate guide to proper use of animation in UX

動畫的速度和持續(xù)時間

緩動

線性運(yùn)動

緩入或者說加速曲線

緩出或者說減速曲線

緩入緩出或者說標(biāo)準(zhǔn)曲線

動畫在界面中的編排

同級動畫

從屬動畫

總結(jié)

可視化層次結(jié)構(gòu)：對交互式接口的可視化合成的新理解

可視層次結(jié)構(gòu)中的顏色

可視層次結(jié)構(gòu)中的大小

可視化層次結(jié)構(gòu)的排列

可視化層次結(jié)構(gòu)中的圖形

可視化層次結(jié)構(gòu)中的動畫

可視化層次結(jié)構(gòu)中的聲音

可視層次結(jié)構(gòu)的概念

文章目錄

效果演示

Canvas簡介

知識點(diǎn)簡介

step-by-step

完整代碼

簡介

兼容

使用方法

1、引入文件

注意：需jQuery 1.7

2、HTML

3、JavaScript

參數(shù)

方法

1. U user

以用戶為中心，就是關(guān)注用戶的行為，串聯(lián)數(shù)據(jù)，從點(diǎn)線面結(jié)合場景分析，提出問題所在。

2. G growth

以增長為導(dǎo)向，以數(shù)據(jù)為依據(jù)發(fā)現(xiàn)或提出問題所在，確定最終需要增長（優(yōu)化）的數(shù)據(jù)指標(biāo)，并以此為目標(biāo)展開思考，提出解決思路。

以投資理財?shù)慕嵌?，換位思考，其實(shí)就是：想投資——挑選——看看優(yōu)惠——挑挑其他的——再看看優(yōu)惠——再看看其他的——還看優(yōu)惠。

如何幫助用戶快速完成相關(guān)數(shù)據(jù)的對比，縮短操作路徑，降低交易耗時，從而減少流失提升成交率，這就是解決思路，也是我們需要增長（優(yōu)化）的數(shù)據(jù)指標(biāo)。

3. D design

到此為止，我們就可以進(jìn)入具體的解決方案的嘗試了，設(shè)計師的方案，自然就是設(shè)計稿了。

按鈕尺寸對點(diǎn)擊行為的影響

規(guī)范中的定義

學(xué)會CTA 設(shè)計方法后，按鈕的點(diǎn)擊率高了49%！

從 Apple Music 說起

結(jié)論

分類

日歷

鏈接

個人資料

存檔

2、HTML

3、JavaScript

以用戶為中心，就是關(guān)注用戶的行為，串聯(lián)數(shù)據(jù)，從點(diǎn)線面結(jié)合場景分析，提出問題所在。

以增長為導(dǎo)向，以數(shù)據(jù)為依據(jù)發(fā)現(xiàn)或提出問題所在，確定最終需要增長（優(yōu)化）的數(shù)據(jù)指標(biāo)，并以此為目標(biāo)展開思考，提出解決思路。

以投資理財?shù)慕嵌?，換位思考，其實(shí)就是：想投資——挑選——看看優(yōu)惠——挑挑其他的——再看看優(yōu)惠——再看看其他的——還看優(yōu)惠。

如何幫助用戶快速完成相關(guān)數(shù)據(jù)的對比，縮短操作路徑，降低交易耗時，從而減少流失提升成交率，這就是解決思路，也是我們需要增長（優(yōu)化）的數(shù)據(jù)指標(biāo)。

到此為止，我們就可以進(jìn)入具體的解決方案的嘗試了，設(shè)計師的方案，自然就是設(shè)計稿了。

學(xué)會CTA 設(shè)計方法后，按鈕的點(diǎn)擊率高了49%！