在线精品视频成人网,无码aⅴ免费中文字幕久久,美国一级aa在线大片

192021-5

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

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

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

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

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

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)

更多精彩文章：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

182021-5

使用vue寫(xiě)一個(gè)計(jì)時(shí)器

前端達(dá)人

**

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

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

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


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10

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

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


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6

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

計(jì)時(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">開(kāi)始</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', // 時(shí)
        two : '00', // 分
        three : '00', // 秒
        abc : 0, // 秒的計(jì)數(shù)
        cde : 0, // 分的計(jì)數(shù)
        efg : 0, // 時(shí)的計(jì)數(shù)
      }
  },
  props: {
    msg: String
  },
  mounted() {

  },
  methods:{
  // 開(kāi)始計(jì)時(shí)
    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)
    },
    // 暫停計(jì)時(shí)
    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è)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

文章來(lái)源：csdn 作者：rock_23

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

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

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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) 瀏覽(2255)

182021-5

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

前端達(dá)人

前言

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

安裝Crypto

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

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

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

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

代碼演示

MD5加密

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

getmd5，我們?cè)賹?xiě)一個(gè)GetMd5的方法，傳入的字符串直接生成MD5的字符返回，

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

運(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(shí)候用到的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)制的字符串，所以我們解密的時(shí)候首先要把16進(jìn)制字符串轉(zhuǎn)為WordArray格式，再轉(zhuǎn)換為BASE64的字符串，最后再進(jìn)行解密。因?yàn)槲乙彩莻€(gè)前端小白，就是這個(gè)問(wèn)題我也是研究了一下午才搞明白。

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

其余設(shè)置

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

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

頁(yè)面效果

未加密的效果

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

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

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

文章來(lái)源：https://my.oschina.net/u/4582134/blog/4582375

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

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

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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) 瀏覽(4019)

182021-5

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

seo達(dá)人

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

The ultimate guide to proper use of animation in UX

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

動(dòng)畫(huà)的速度和持續(xù)時(shí)間

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

合適的動(dòng)畫(huà)時(shí)長(zhǎng)，既不要太快也不至于慢到讓用戶打哈欠。

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

動(dòng)畫(huà)的持續(xù)時(shí)間是使得界面流暢的關(guān)鍵

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

設(shè)備的大小會(huì)影響動(dòng)畫(huà)的持續(xù)時(shí)間

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

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

大界面中的動(dòng)畫(huà)就一定是慢的嗎？并不一定。

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

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

動(dòng)畫(huà)的持續(xù)時(shí)間取決于物體的大小和移動(dòng)的距離

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

避免使用彈跳效果，因?yàn)樗鼤?huì)分散注意力。

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

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

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

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

緩動(dòng)

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

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

緩動(dòng)的物體會(huì)比較線性運(yùn)動(dòng)的物體看起來(lái)更加自然

線性運(yùn)動(dòng)

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

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

線性運(yùn)動(dòng)

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

緩入或者說(shuō)加速曲線

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

加速運(yùn)動(dòng)曲線

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

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

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

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

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

緩出或者說(shuō)減速曲線

與緩入恰恰相反，物體的運(yùn)動(dòng)在開(kāi)始時(shí)位移變化很大，但是后面會(huì)越來(lái)越小直到最后完全停止。

減速曲線

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

減速曲線在此時(shí)會(huì)讓動(dòng)畫(huà)顯得更加自然

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

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

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

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

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

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

卡片的非對(duì)稱曲線運(yùn)動(dòng)

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

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

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

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

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

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

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

https://easings.net/zh-cn

http://cubic-bezier.com

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

不同類型的動(dòng)畫(huà)曲線以及他們不同的參數(shù)

動(dòng)畫(huà)在界面中的編排

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

一般會(huì)有2種編排形式——同級(jí)動(dòng)畫(huà)和從屬動(dòng)畫(huà)。

同級(jí)動(dòng)畫(huà)

同級(jí)動(dòng)畫(huà)意味著所有對(duì)象的外觀都服從一個(gè)特定的規(guī)則。

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

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

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

按對(duì)角線出現(xiàn)的表格視圖動(dòng)畫(huà)

從屬動(dòng)畫(huà)

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

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

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

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

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

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

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

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

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

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

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

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

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

物體可以被抬高于其他元素之上來(lái)移動(dòng)

總結(jié)

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

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

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

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

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

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

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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) 瀏覽(2217)

182021-5

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

seo達(dá)人

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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) 瀏覽(3620)

172021-5

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

前端達(dá)人

文章目錄

效果演示

在這里插入圖片描述

Canvas簡(jiǎn)介

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

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

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

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

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

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

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

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

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

知識(shí)點(diǎn)簡(jiǎn)介

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

let img = new Image() //可以給圖片一個(gè)鏈接 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”)

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

let ctx = Canvas.getContext(contextID)  


    
        1

ctx.drawImage()

JavaScript 語(yǔ)法 1：
在畫(huà)布上定位圖像：

context.drawImage(img,x,y);  


    
        1

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

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


    
        1

JavaScript 語(yǔ)法 3：
剪切圖像，并在畫(huà)布上定位被剪切的部分：

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


    
        1

ctx.getImageData()

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

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


    
        1

ctx.putImageData()

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

接下來(lái)跟著我一步一步做完這個(gè)小功能叭~
在這里插入圖片描述

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

在這里插入圖片描述
接下來(lái)寫(xiě)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)建畫(huà)布 let ctx = canvas.getContext("2d"); //4.獲得該畫(huà)布的內(nèi)容 canvas.setAttribute('width', width) //5.為了統(tǒng)一，設(shè)置畫(huà)布的寬高為圖片的寬高 canvas.setAttribute('height', height) ctx.drawImage(this, 0, 0, width, height); //5.在畫(huà)布上繪制該圖片 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

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

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

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

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

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) //對(duì)象解構(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上離開(kāi)的補(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('你按下了并移動(dòng)了鼠標(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

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

接下來(lái)的挑戰(zhàn)更加嚴(yán)峻，我們需要去獲取像素和處理像素，讓我們?cè)僦貙?xiě)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兩個(gè)函數(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給我們提供了直接的方法，可以直接將畫(huà)布導(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

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

是不是無(wú)比輕松呢~，來(lái)看看你手寫(xiě)的代碼是否和下面一樣叭：

完整代碼

<!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é)知識(shí)讓其變?yōu)閳A形，以圓心為鼠標(biāo)中心擴(kuò)散

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

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

文章來(lái)源：csdn 作者： VGtime

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

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

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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) 瀏覽(2319)

172021-5

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

seo達(dá)人

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

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

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

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

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

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

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

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

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

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

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

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

03、萬(wàn)能鑰匙：用戶>需求>方案>反饋

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

· 場(chǎng)景二：如何順利通過(guò)晉級(jí)？

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

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

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

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

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

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

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

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

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

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

05、總結(jié)

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

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

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

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

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

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

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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) 瀏覽(2076)

172021-5

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

前端達(dá)人

和Swiper.js一樣

簡(jiǎn)介

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

支持響應(yīng)式
瀏覽器支持 CSS3 時(shí)，則使用 CSS3 過(guò)度/動(dòng)畫(huà)
支持移動(dòng)設(shè)備滑動(dòng)
支持桌面瀏覽器鼠標(biāo)拖動(dòng)
支持循環(huán)
支持左右控制
支持動(dòng)態(tài)添加、刪除、過(guò)濾
支持自動(dòng)播放、圓點(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)值	說(shuō)明
accessibility	布爾值	true	啟用Tab鍵和箭頭鍵導(dǎo)航
autoplay	布爾值	false	自動(dòng)播放
autoplaySpeed	整數(shù)	3000	自動(dòng)播放間隔
centerMode	布爾值	false	中心模式
centerPadding	字符串	’50px’	中心模式左右內(nèi)邊距
cssEase	字符串	‘ease’	CSS3 動(dòng)畫(huà)
customPaging	function	n/a	自定義分頁(yè)
dots	布爾值	false	指示點(diǎn)
draggable	布爾值	true	啟用桌面拖動(dòng)
easing	字符串	‘linear’	animate() fallback easing
fade	布爾值	false	淡入淡出
arrows	布爾值	true	左右箭頭
infinite	布爾值	true	循環(huán)播放
lazyLoad	字符串	‘ondemand’	延遲加載，可選 ondemand 和 progressive
onBeforeChange(this, index)	method	null	開(kāi)始切換前的回調(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)懸停暫停自動(dòng)播放
responsive	object	null	斷點(diǎn)觸發(fā)設(shè)置
slide	字符串	‘div’	滑動(dòng)元素查詢
slidesToShow	整數(shù)	1	幻燈片每屏顯示個(gè)數(shù)
slidesToScroll	整數(shù)	1	幻燈片每次滑動(dòng)個(gè)數(shù)
speed	整數(shù)	300	滑動(dòng)時(shí)間
swipe	布爾值	true	移動(dòng)設(shè)備滑動(dòng)事件
touchMove	布爾值	true	觸摸滑動(dòng)
touchThreshold	整數(shù)	5	滑動(dòng)切換閾值，即滑動(dòng)多少像素后切換
useCSS	布爾值	true	使用 CSS3 過(guò)度
vertical	布爾值	false	垂直方向

方法

方法	Argument	說(shuō)明
slick()	options : object	初始化 slick
unslick()		銷毀 slick
slickNext()		切換下一張
slickPrev()		切換上一張
slickPause()		暫停自動(dòng)播放
slickPlay()		開(kāi)始自動(dòng)播放
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è)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

文章來(lái)源：csdn 作者：cc蒲公英

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

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

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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) 瀏覽(2679)

172021-5

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

資深UI設(shè)計(jì)者

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

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

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

1. U user

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

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

案例：

我們?cè)诜治鼋灰拙€的數(shù)據(jù)時(shí)發(fā)現(xiàn)了一些問(wèn)題，并對(duì)數(shù)據(jù)做了對(duì)比分析。

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

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

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

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

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

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

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

2. G growth

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

案例：

這是最典型的購(gòu)物交易場(chǎng)景，通過(guò)上面的分析，我們?cè)俳Y(jié)合場(chǎng)景化的思路進(jìn)一步整理思考用戶的操作行為目的。

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

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

我們舉一個(gè)現(xiàn)實(shí)生活中的購(gòu)物場(chǎng)景來(lái)幫助思考分析（靈感來(lái)源于生活）。

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

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

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

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

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

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

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

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

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

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

3. D design

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

案例：

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

[ B方案最終UI稿 ]

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

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

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

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

文章來(lái)源：站酷作者：包大佬

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

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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) 瀏覽(1564)

172021-5

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

資深UI設(shè)計(jì)者

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

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

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

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

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

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

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

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

規(guī)范中的定義

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

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

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

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

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

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

閱讀文章 >>

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

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

從 Apple Music 說(shuō)起

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

結(jié)論

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3. 不可控場(chǎng)景

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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) 瀏覽(2948)

首頁(yè)

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

計(jì)時(shí)器

The ultimate guide to proper use of animation in UX

動(dòng)畫(huà)的速度和持續(xù)時(shí)間

緩動(dòng)

線性運(yùn)動(dòng)

緩入或者說(shuō)加速曲線

緩出或者說(shuō)減速曲線

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

動(dòng)畫(huà)在界面中的編排

同級(jí)動(dòng)畫(huà)

從屬動(dòng)畫(huà)

總結(jié)

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

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

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

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

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

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

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

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

文章目錄

效果演示

Canvas簡(jiǎn)介

知識(shí)點(diǎn)簡(jiǎn)介

step-by-step

完整代碼

簡(jiǎn)介

兼容

使用方法

1、引入文件

注意：需jQuery 1.7

2、HTML

3、JavaScript

參數(shù)

方法

1. U user

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

2. G growth

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

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

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

3. D design

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

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

規(guī)范中的定義

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

從 Apple Music 說(shuō)起

結(jié)論

分類

日歷

鏈接

個(gè)人資料

存檔

1、引入文件

2、HTML

3、JavaScript

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

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

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

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

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

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