亚洲人成网站18禁止无码,日韩免费一区二区三区在线播放,国产日韩精品一区二区

072022-4

數(shù)據(jù)可視化圖表設(shè)計指南：圓環(huán)圖

seo達(dá)人

3種圓環(huán)圖樣式

標(biāo)準(zhǔn)圓環(huán)圖

圖表中間空心的部分用來展示數(shù)據(jù)的總數(shù)，用圓環(huán)的弧長和顏色表示不同數(shù)據(jù)的占比，圖表旁邊有圖例用來解釋說明。

布爾圓環(huán)圖

布爾圓環(huán)圖就像是給圓環(huán)圖做了布爾運算，只表示正負(fù)兩個值。

比如想重點突出完成率，就使用綠色圓環(huán)來表示68%的完成率，圓環(huán)其他部分為灰色，同理想重點突出反彈率，就使用紅色圓環(huán)來表示83%的反彈率，圓環(huán)其他部分為灰色。

圓環(huán)中心部分用來顯示相關(guān)數(shù)值的百分比和標(biāo)簽。此外布爾圓環(huán)圖不需要額外添加圖例。

標(biāo)簽圓環(huán)圖

直接在對應(yīng)的圓環(huán)上加入標(biāo)簽比使用圖例更容易理解。在屏幕空間允許的情況下，可以直接在圓環(huán)上添加「名稱+所占比例+數(shù)量」的標(biāo)簽形式。

圓環(huán)圖交互狀態(tài)分析

懸停狀態(tài)

在標(biāo)準(zhǔn)圓環(huán)圖中，鼠標(biāo)懸停在圓環(huán)圖上時，跳出分段名稱+百分比+數(shù)量值的彈窗。在標(biāo)簽圓環(huán)圖中，懸停的圓環(huán)部分突出顯示，其余部分淡出處理。

點選狀態(tài)

圖表段可以是交互式的，點擊對應(yīng)的分段時，右側(cè)的圖例也會同步高亮顯示。

焦點狀態(tài)

焦點狀態(tài)和上面提到的懸停狀態(tài)類似，唯一的區(qū)別在于，焦點狀態(tài)選中分段后有一個放大+描邊的圓環(huán)效果，突出展示數(shù)據(jù)。

空狀態(tài)

當(dāng)沒有可用的數(shù)據(jù)時，應(yīng)該在圖表上表明這一點，并給出提示引導(dǎo)用戶去點擊。

錯誤狀態(tài)

獲取數(shù)據(jù)時偶爾會出現(xiàn)發(fā)生錯誤的情況。發(fā)生這種情況時，向用戶提供有用的、可操作的解釋，說明發(fā)生錯誤的原因并告訴用戶可以采取哪些措施來解決問題。

圓環(huán)圖使用指南

使用分類顏色

保持圓環(huán)圖每部分顏色都使用醒目的顏色且具有對比性。在圓環(huán)圖中不建議使用同色系顏色來顯示數(shù)據(jù)，同色系顏色常用在直方圖中。

最多使用五個分段

當(dāng)圓環(huán)圖包含多個數(shù)據(jù)分段時，圖標(biāo)會變得難以理解，為保證圖標(biāo)的清晰，盡可能將分段控制在 2-3 段，不要超過5段。如果數(shù)據(jù)過多，可以考慮使用柱狀圖、條形圖等其他形式的圖表。

保證數(shù)據(jù)準(zhǔn)確

圓環(huán)圖的所有分段加起來的數(shù)值應(yīng)該始終為 100%，沒有有多段數(shù)據(jù)占比過小，可以一起匯總到“其他”分段中。

按順序排列數(shù)據(jù)

圓環(huán)圖的份分段應(yīng)從12點位置開始按最大值排序，然后按順時針方向依次按大小排列每個數(shù)值。右側(cè)的圖例頁應(yīng)該從上到下保持一致的排序。

不要將時間分段

時間是一個順序變量，不能用作圓環(huán)圖中的類別。例如每個季度的時間是相同的，但是每個季度訪客卻不一樣，使用圓環(huán)圖會給用戶造成一定的困擾。如果以時間作為基本單位，可以使用直方圖、條形圖等圖表。

原文地址：Clip設(shè)計夾（公眾號）

作者：Clippp

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》數(shù)據(jù)可視化圖表設(shè)計指南：圓環(huán)圖

藍(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)定制、用戶體驗、交互設(shè)計、網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

評論(0) 瀏覽(1891)

062022-4

echarts折線圖背景漸變以及常用配置項

前端達(dá)人




    

        

            

            

        

        

            
                let myChart = this.$echarts.init(document.getElementById('plant-charts'));
            

        

    

    

        

            

            

        

        

            
                // 繪制圖表
            

        

    

    

        

            

            

        

        

            
                myChart.setOption({
            

        

    

    

        

            

            

        

        

            
                tooltip: {
            

        

    

    

        

            

            

        

        

            
                formatter: '{c}' //設(shè)置單位
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                //圖例樣式
            

        

    

    

        

            

            

        

        

            
                legend: {
            

        

    

    

        

            

            

        

        

            
                data: ['寬帶情況', '數(shù)據(jù)量'],
            

        

    

    

        

            

            

        

        

            
                textStyle: {//圖例文字的樣式
            

        

    

    

        

            

            

        

        

            
                color: '#fff',
            

        

    

    

        

            

            

        

        

            
                fontSize: 12,
            

        

    

    

        

            

            

        

        

            
                padding: [0, 20, 0, 0]
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                grid: { //設(shè)置圖標(biāo)距離父級div的間距
            

        

    

    

        

            

            

        

        

            
                top: "10",
            

        

    

    

        

            

            

        

        

            
                left: "0",
            

        

    

    

        

            

            

        

        

            
                right: "15",
            

        

    

    

        

            

            

        

        

            
                bottom: "10",
            

        

    

    

        

            

            

        

        

            
                containLabel: true
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                xAxis: {
            

        

    

    

        

            

            

        

        

            
                type: 'category',
            

        

    

    

        

            

            

        

        

            
                boundaryGap: false,
            

        

    

    

        

            

            

        

        

            
                data: ['2015','2016','2017','2018','2019','2020','2021'],
            

        

    

    

        

            

            

        

        

            
                axisLabel: {
            

        

    

    

        

            

            

        

        

            
                interval: '0', //類目軸(category)中用數(shù)值表示顯示間隔，0為顯示所有，1為隔一個顯示一個，以此類推
            

        

    

    

        

            

            

        

        

            
                textStyle: { //文字樣式
            

        

    

    

        

            

            

        

        

            
                color: '#62799C',
            

        

    

    

        

            

            

        

        

            
                fontSize: '12'
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                axisTick: { //y軸刻度線不顯示
            

        

    

    

        

            

            

        

        

            
                show: false
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                yAxis: {
            

        

    

    

        

            

            

        

        

            
                type: 'value',
            

        

    

    

        

            

            

        

        

            
                //show: false,
            

        

    

    

        

            

            

        

        

            
                axisLabel: {
            

        

    

    

        

            

            

        

        

            
                textStyle: { //文字樣式
            

        

    

    

        

            

            

        

        

            
                color: '#62799C',
            

        

    

    

        

            

            

        

        

            
                fontSize: '12'
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                // 控制網(wǎng)格線
            

        

    

    

        

            

            

        

        

            
                splitLine: {
            

        

    

    

        

            

            

        

        

            
                //  改變軸線顏色
            

        

    

    

        

            

            

        

        

            
                lineStyle: {
            

        

    

    

        

            

            

        

        

            
                color: '#2a2a2d'
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                axisTick: { //y軸刻度線
            

        

    

    

        

            

            

        

        

            
                show: false
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                series: [{
            

        

    

    

        

            

            

        

        

            
                data: [5000,6000,7000,4400,3200,4500,6800],
            

        

    

    

        

            

            

        

        

            
                type: 'line',
            

        

    

    

        

            

            

        

        

            
                itemStyle: {
            

        

    

    

        

            

            

        

        

            
                normal: {
            

        

    

    

        

            

            

        

        

            
                color: 'rgba(62,139,222,1)'//線顏色
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                areaStyle: {
            

        

    

    

        

            

            

        

        

            
                normal: {
            

        

    

    

        

            

            

        

        

            
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ //折線圖顏色漸變
            

        

    

    

        

            

            

        

        

            
                offset: 0,
            

        

    

    

        

            

            

        

        

            
                color: 'rgba(62,139,222,0.6)'
            

        

    

    

        

            

            

        

        

            
                }, {
            

        

    

    

        

            

            

        

        

            
                offset: 1,
            

        

    

    

        

            

            

        

        

            
                color: 'rgba(62,139,222,0.01)'
            

        

    

    

        

            

            

        

        

            
                }])
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                }]
            

        

    

    

        

            

            

        

        

            
                });

評論(0) 瀏覽(2992)

062022-4

echarts圖例(legend)顯示設(shè)置位置，樣式，內(nèi)容(百分比，水平，豎直顯示，icon樣式)

前端達(dá)人

//圖例
legend: {undefined
icon: "circle",
//icon形狀類型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none,
itemWidth: 10, // 設(shè)置icon寬度
itemHeight: 10, // 設(shè)置icon高度
itemGap: 40, // 設(shè)置間距
// top: '5%',//豎直位置
// left: 'center',//水平位置
x: 50,//水平位置
y: 200,//豎直位置
orient: "vertical",//設(shè)置顯示順序，默認(rèn)水平（水平，豎直）
textStyle: {undefined
color: "#000"
},//文本樣式
// 使用回調(diào)函數(shù)（設(shè)置文本顯示內(nèi)容，例如加百分號）
formatter: function(name) {undefined
var data = option.series[0].data;
var total = 0;
var tarValue;
for (var i = 0, l = data.length; i < l; i++) {undefined
total += data[i].value;
if (data[i].name == name) {undefined
tarValue = data[i].value;
}
}
var p = ((tarValue / total) * 100).toFixed(2);
return name + " " + " " + p + "%";
},
},

評論(0) 瀏覽(9582)

212022-2

這7個小技巧快速幫你改善UI界面

seo達(dá)人

1.為了更好的字體組合，選擇「超大字體家族」吧！

在成千上萬的字體當(dāng)中尋找合適的組合是一件非常艱難的事情。如果你也為之苦惱，那么試試「超大字體家族」吧！

通常所說的「超大字體家族」（SuperFamily）其實指的是一組被打包到一起可以互相搭配的襯線和非襯線體，它們風(fēng)格和細(xì)節(jié)不一樣，但是互相搭配效果是頗為不錯的。

我個人強(qiáng)力推薦的是 Merriweather 和 Merriweather Sans、Roboto 以及 Roboto Slab 這樣的搭配。

「超大字體家族」最大的優(yōu)勢在于，它是已經(jīng)被驗證過的優(yōu)質(zhì)組合，用的時候不用擔(dān)心~

2.減小標(biāo)題文本字間距，視覺平衡更好

在標(biāo)題文本中使用較大的字間距，是排版設(shè)計中最常見的禁忌之一！

在放大文本的時候，常規(guī)比例下的字間距會顯得更加明顯，視覺上會顯得有點「稀疏」，減小字間距能夠讓標(biāo)題文本更加緊湊，在視覺上更加平衡，通常會讓人更加愉悅。

3.注意縱向行間距和段落間距的節(jié)奏感

當(dāng)你想讓整體排版的節(jié)奏感足夠好的時候，有必要針對性地重新調(diào)整行間距和段間距。

你需要根據(jù)靠近原則，讓相互關(guān)聯(lián)的標(biāo)題和正文之間的段間距更加靠近一點，讓不相關(guān)的內(nèi)容塊互相之間分開，間距拉遠(yuǎn)，從而自然而然地進(jìn)行區(qū)分。

通常而言，你可以讓標(biāo)題上方的留白更大一些，標(biāo)題下方的留白更小一些，這樣就可以了。

4.如果標(biāo)題很短，可以試著使用全部大寫

在英文為主的頁面當(dāng)中，全大寫的文本辨識度其實相對更低的一些，較長的標(biāo)題文本使用大寫字母更是難于辨認(rèn)。不過對于僅有一兩個單詞的短標(biāo)題而言，就容易識別多了。

另一方面，短標(biāo)題使用小寫字母會顯得不夠飽滿，這個時候使用大寫字母能夠讓它在視覺上更加突出。

相應(yīng)的，在使用全大寫的短標(biāo)題當(dāng)中，適當(dāng)?shù)乩_字間距，能夠增加呼吸感，降低壓迫感。

5.如果能讓你的標(biāo)題更加簡短明了……那么就這么做吧！

如果可以的話，標(biāo)題盡量簡短有力一些。

比如「It’s your style, and your way」這樣的標(biāo)題可以直接濃縮為「Your style. Your way.」。

這樣的標(biāo)題更容易閱讀，也更加有力，更容易被消化和感知到。

當(dāng)然，這樣的文案設(shè)計技巧是需要根據(jù)行業(yè)和領(lǐng)域進(jìn)行優(yōu)化的，這個方法并不適用于全部領(lǐng)域。

6.選字體的時候，盡量選擇有很多不同字重的

你所下載或者購買的字體，是否有很多不同的粗細(xì)/字重/樣式供你選擇？

如果你有的選，盡量購買或者選擇那種有很多不同字重的字體族。如果這款字體只有一種字重，建議你盡量避開它。

在很多不同的設(shè)計項目當(dāng)中，不同的場合可能會用到不同的字重，如果它只有一種字重，那么你要么只能選擇別的字體，要么就需要額外購買，很麻煩。

即使這款字體包含兩三種不同的樣式或者字重，也足以應(yīng)對很多不同的需求，創(chuàng)造出有韻律感的設(shè)計了。

7.選擇貼合設(shè)計風(fēng)格和氣質(zhì)的字體

不同的字體有不同的風(fēng)格。有的字體粗壯有力，有的柔和自然，有的現(xiàn)代而規(guī)整，有的友好而舒適，有的則有趣且俏皮，等等等等。

每種字體都有不同的氣質(zhì)，你需要把握字體的氣質(zhì)特征，有意識地總結(jié)這些屬性，當(dāng)你在應(yīng)對不同的設(shè)計項目的時候，能夠快速找到氣質(zhì)貼合的字體。

這似乎是一項艱巨的任務(wù)，但是從長遠(yuǎn)來看，能夠幫你更快地搞定各種設(shè)計問題。

結(jié)語

很多技巧都不復(fù)雜，甚至稱得上是微不足道。但是如果用好這些小技巧，能夠讓你的設(shè)計事半功倍。

原文地址：marcandrew.me

譯文地址：追波范兒（公眾號）

作者：Marc Andrew

譯者：terechen

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》這7個小技巧快速幫你改善UI界面

藍(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)定制、用戶體驗、交互設(shè)計、網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

評論(0) 瀏覽(1754)

252022-1

這是一份匯集全球優(yōu)秀APP截圖的資源

seo達(dá)人

看到這些界面很多小伙伴兒會忍不住問黑馬哥這都是什么產(chǎn)品，哪里可以下載。其實我也沒有下載~O(∩_∩)O哈哈~，這就是今天要給大家分享的一個好東西。

為了方便大家進(jìn)行靈感采集，黑馬哥為大家發(fā)現(xiàn)了一個不錯的平臺。匯集了全球眾多的優(yōu)秀 APP 截圖，你再也無需一個一個去下載截圖了，而且也不需要受到注冊才能使用的煩惱，這里全部為你截圖好了。第一次訪問的時候，驚訝到我了，簡直是非常的人性化，這些優(yōu)秀的設(shè)計開啟了設(shè)計的靈感源泉。

打開網(wǎng)站映入眼眶的這個數(shù)字有沒有驚呆小伙伴兒，網(wǎng)站匯集了 50000 多個應(yīng)用的屏幕截圖，大大的節(jié)省了設(shè)計師一個一個下載截圖的時間。

網(wǎng)站通過應(yīng)用和屏幕截圖來進(jìn)行分類展示，默認(rèn)以應(yīng)用名稱的形式展示，如果你想要直接查看屏幕截圖，點擊按鈕切換也是非常便利。

同樣的應(yīng)用還為大家區(qū)分了 iOS 和 Android 兩個不同的版本，是不是非常的人性化。

點擊選中的產(chǎn)品會進(jìn)入到該產(chǎn)品的屏幕截圖詳情界面，匯聚了這個產(chǎn)品的全部界面截圖。如果該產(chǎn)品上線了 iOS 和 Android 兩個不同的版本，詳情界面也會分別展示兩個不同版本的屏幕截圖。

這是一個使用起來非常簡單的網(wǎng)站，海量的設(shè)計必將開啟你的靈感腦洞。話不多說，大家趕緊去體驗一下吧！把那些優(yōu)秀的設(shè)計作品都翻出來，提高我們的設(shè)計效率。

APP 屏幕截圖匯總網(wǎng)站鏈接：
https://mobbin.design/備注：僅作為學(xué)習(xí)交流，請勿他用。

原文地址：黑馬家族（公眾號）

作者：黑馬青年

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》這是一份匯集全球優(yōu)秀APP截圖的資源

藍(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)定制、用戶體驗、交互設(shè)計、網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

評論(0) 瀏覽(3029)

182022-1

設(shè)計師，如何高效完成競品分析！

seo達(dá)人

1.什么時候開始競品分析

競品分析其實一般在任何時候都可以進(jìn)行，做足市場競品研究，可以有效幫助我們理解競品，發(fā)現(xiàn)可以使我們產(chǎn)品脫穎而出的機(jī)會，同時也可以減少競品對我們的直接影響。

那么啟動競品分析的幾個關(guān)鍵時間節(jié)點，新項目啟動、項目改版、競品有重大更新時，這三個階段去做競品分析，是相對不錯的時間點。

2.競品分析方法

競品分析方法有很多，在這里，我分享大家能快速掌握并上手使用的方法。通過以下四個步驟，我們可以初步完成一份競品分析文檔。下面我們來看看每個維度如何進(jìn)行？

（1）尋找合適競品

挑選競品是非常關(guān)鍵的第一步，一般需要根據(jù)自家產(chǎn)品定位，選擇垂直TOP級別的產(chǎn)品幾個不同用戶群體產(chǎn)品就可以，不需要把所有的都拿來分析。但是除了這個方向，我們還需留意一些潛力較好的產(chǎn)品，比如產(chǎn)品口碑較好、用戶下載量增長快，這也是值得我們研究的一個競品。

挑選完競品后，我們需要將競爭產(chǎn)品進(jìn)行分級，比如一級競爭對手，二級競爭對手，細(xì)分市場競爭者。因為不同等級，意味著我們花時間會有所不同。最直接競爭產(chǎn)品，當(dāng)然需要去深入研究。

如果不知道你這個領(lǐng)域那些產(chǎn)品做得好，這里推薦大家一個產(chǎn)品查詢的工具Sensortower，可以去看看排名。

https://app.sensortower.com/ios/rankings/top/iphone/us/all-categories?locale=zh-CN&date=2021-09-07

（2）定義分析維度

我一直秉承的一個觀點，也是在之前一個大師哪里學(xué)到，競爭分析切忌大而全的分析，因為越是大范圍分析，越是無法分析透徹，從而價值感就會越低。我們在分析時候，需要定義一組關(guān)鍵的維度。

比如，這次競品分析，只看某個重點功能的內(nèi)容布局設(shè)計趨勢，那么我接下來的研究分析中，都只圍繞這個主題進(jìn)行。

（3）將競品進(jìn)行比較

針對這一步，需要深入挖掘產(chǎn)品核心亮點，要去思考為什么這款產(chǎn)品是這樣的設(shè)計？同時將優(yōu)缺點都說明清楚。這里比較推薦的一種方法就是截圖進(jìn)行對比，快速有效。

比如以音樂軟件的搜索入口為例，站在用戶視角看，這個產(chǎn)品核心功能是怎么布局的？體驗亮點怎么設(shè)計吸引用戶的？視覺質(zhì)感呈現(xiàn)如何打造？主流表現(xiàn)技法？需要將每個競品的做法優(yōu)劣截圖對比，并將優(yōu)缺點寫出來。

同時還可以進(jìn)入到更深層級，比如，搜索不到情感化如何處理的？搜索過程中加載表現(xiàn)方式等？當(dāng)然，這些差異化打造，還可以看看其他行業(yè)做得較好的產(chǎn)品。

（4）得出關(guān)鍵結(jié)論

關(guān)鍵結(jié)論，就是將前面分析的重要要點進(jìn)行整合篩選，得出最終的產(chǎn)品參考策略，后續(xù)可根據(jù)這份分析策略可作為產(chǎn)品設(shè)計參考點。

這里需要注意的是，競爭分析得出結(jié)論，是給我們學(xué)習(xí)別人如何把用戶體驗做到極致的？關(guān)注競品如何解決用戶體驗問題的？品牌穿透如何做？我們完全可以充分利用這些打造自己的產(chǎn)品優(yōu)勢。

3.寫在最后

大家看到我整篇文章里面，沒有提及市場調(diào)研分析，用戶分析等。網(wǎng)上很多文章講得特別全而大，我相信有部分設(shè)計師看完就很懵逼，怎么入手？因此今天給大家支一個曉招，聚焦一個點分析，但偶爾我們可以適當(dāng)在拓寬一些維度。好了，本文就到這，大家還需要多去實戰(zhàn)練習(xí)，才能找到比較順手的方法。

原文地址：功夫UX （公眾號）

作者：Tony

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》設(shè)計師，如何高效完成競品分析！

藍(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)定制、用戶體驗、交互設(shè)計、網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

評論(0) 瀏覽(1625)

092022-1

PAG揭秘篇｜高效動畫解決方案

資深UI設(shè)計者

在終端APP中，動畫非常常見，它可以輔助視覺制造焦點，同時也可以讓用戶交互更加順滑，但動畫的實現(xiàn)卻是設(shè)計師和研發(fā)群體的一個痛點。如何輔助設(shè)計師設(shè)計高性能炫酷的動畫、如何將設(shè)計師設(shè)計的動畫準(zhǔn)確無誤的還原到終端APP上是業(yè)界不斷探索和解決的問題。

圖1 傳統(tǒng)動畫實現(xiàn)流程圖

當(dāng)前最好的動畫設(shè)計軟件是Adobe After Effects（簡稱AE），從AE動畫制作到終端APP呈現(xiàn)，傳統(tǒng)的實現(xiàn)方式如圖1所示，有三大痛點：實現(xiàn)成本高、溝通成本高和性能難以保證。

近幾年，業(yè)界誕生了像Lottie、SVGA這樣的動畫工作流解決方案，雖然在一定程度上提升了生產(chǎn)效率，但存在AE支持能力有限、動畫性能難以保證、配套工具支持有限的問題。

1 ：PAG解決的問題

——————————

PAG（Portable Animated Graphics）是騰訊PCG發(fā)布器中臺自主研發(fā)的一套完整的動畫工作流解決方案，助力于將AE動畫方便快捷的應(yīng)用于各平臺終端。PAG的流程圖如圖2所示，設(shè)計師在AE上設(shè)計出動畫后，可以通過導(dǎo)出插件導(dǎo)出pag文件，同時PAG提供了桌面端預(yù)覽工具，支持實時預(yù)覽效果，在確認(rèn)效果后，通過運行配置上線，各平臺終端可以通過PAG SDK加載渲染pag動畫。

圖2 PAG動畫工作流流程圖

與Lottie、SVGA相比，PAG增加支持了服務(wù)端。除此之外，如圖3所示，PAG動畫方案在導(dǎo)出動畫文件大小、AE特性支持和可編輯性方面具有較大的優(yōu)勢。

圖3 PAG和Lottie對比圖

2: PAG支持的AE特性能力

——————————

2.1 矢量特性能力的支持

和Lottie、SVGA實現(xiàn)不同的是，PAG不依賴平臺端渲染接口，可以實現(xiàn)各平臺的渲染一致性。PAG與Lottie、SVGA的矢量能力支持如附表1《AE特性能力支持》所示。

2.2 BMP預(yù)合成--全AE特性支持

無論是PAG還是Lottie、SVGA，所支持的AE特性僅僅是AE眾多特性中的很少的一部分，這在一定程度上限制了設(shè)計師的創(chuàng)造力。針對這個問題，PAG新增了BMP預(yù)合成的導(dǎo)出方式，支持導(dǎo)出所有AE特性，適用于不可編輯的場景。其原理如圖4所示，在合成的層面將渲染結(jié)果截取成圖片，然后進(jìn)行視頻編碼。

圖 4 BMP預(yù)合成原理圖

針對視頻不支持透明通道而動畫需要包含透明通道的問題，在編碼的層面擴(kuò)展了透明通道的支持，如圖5所示。

圖6 PAG矢量和BMP預(yù)合成混合導(dǎo)出

3: PAG導(dǎo)出插件

——————————

3.1 不支持AE特性提示

針對導(dǎo)出動畫和AE設(shè)計動畫存在偏差的問題，PAG導(dǎo)出插件增加了使用了不支持AE特性提醒功能，如下圖7所示。

圖7 PAG導(dǎo)出面板

在預(yù)覽界面，同樣有不支持特性的提示，如圖8所示。

圖8 PAG導(dǎo)出面板預(yù)覽窗口

在使用AE設(shè)計動畫的過程中，設(shè)計師可以方便快捷的提前查看使用了那些不支持直接導(dǎo)出的AE特性，換種實現(xiàn)方式或者導(dǎo)出成BMP預(yù)合成，有效的解決了設(shè)計動畫和導(dǎo)出動畫存在偏差的問題。

3.2 BMP預(yù)合成一鍵設(shè)置

在AE動畫設(shè)計的過程中，PAG導(dǎo)出面板提供了一鍵設(shè)置BMP預(yù)合成的方法，如下圖9所示。需要提示的是，一旦設(shè)置了BMP預(yù)合成，該合成中的文本和圖片將不能再被用戶編輯。

圖9 BMP 預(yù)合成設(shè)置

由于BMP預(yù)合成可能會影響到可替換圖片的數(shù)量，PAG同時會實時更新可替換圖片的數(shù)量給設(shè)計以提示。

3.3 圖片填充模式設(shè)置

在用pag設(shè)置的素材中，經(jīng)常會遇到用戶填充的圖片與默認(rèn)占位圖尺寸不一致的情況，在導(dǎo)出面板中PAG增加圖片填充的四個規(guī)則，如圖10所示：

圖10 可替換圖片填充設(shè)置

其中：

不縮放：畫面不縮放，從左上角位置開始裁剪

黑邊：在保持高寬比的情況下縮放到設(shè)備的可用屏幕大小，圖像不發(fā)生變形，如果圖片尺寸和填充區(qū)域比例不一致，會出現(xiàn)黑邊，為默認(rèn)填充模式

拉伸：不保持寬高比填充，會發(fā)生失變形

裁剪：在保持高寬比的情況下縮放到完全填滿可用的屏幕大小

具體效果如圖11所示。

圖11 圖片填充效果圖

4桌面預(yù)覽工具PAGViewer

——————————

4.1 效果預(yù)覽

PAGViewer支持桌面端預(yù)覽PAG文件動畫效果，如下圖所示。支持查看動畫文件中包含有多少個可編輯文本和可編輯圖片，且支持設(shè)計師本地填充素材，實時預(yù)覽填充效果，無需等待上線后才能確認(rèn)真實效果。圖片占位圖支持填充圖片或視頻，如果PAG文件內(nèi)置了音頻文件，支持播放音頻效果。具體效果如圖12所示。

圖12 PAG效果預(yù)覽

4.2 性能檢測

在pag動畫實際使用的過程中，PAG經(jīng)常遇到的問題是設(shè)計師辛辛苦苦設(shè)計的動畫在終端上性能表現(xiàn)不佳，需要進(jìn)行返工優(yōu)化，同樣的問題在使用Lottie方案時候也會存在。

除了效果預(yù)覽，PAGViewer還增加了性能展示面板，可以很方便的看到pag動畫的基本信息，如時長、幀率、尺寸、bmp預(yù)合成的數(shù)量，圖層總數(shù)等，還有量化的性能指標(biāo)，定量的評估pag文件的性能，如圖13所示，方便設(shè)計師進(jìn)行針對性的優(yōu)化，而不需要等到上線前才會暴露性能問題。具體效果如圖13所示。

圖13 PAG性能展示面板

5: PAG的應(yīng)用場景

目前PAG方案已經(jīng)廣泛應(yīng)用于騰訊公司內(nèi)外幾十款產(chǎn)品中，涵蓋了眾多的國民級應(yīng)用。

總結(jié)下來，PAG目前主要使用在以下幾大場景：

5.1 UI動畫

圖15 UI動畫場景

設(shè)計師設(shè)計出動畫文件后，研發(fā)只需要替換預(yù)設(shè)的文本內(nèi)容即可，并且文件體積非常小。

5.2 貼紙動畫

圖16 貼紙動畫場景

5.3 照片/視頻模板

圖17 照片/視頻模板場景

PAG支持將內(nèi)置的圖片作為占位圖替換，并保留所有動畫效果。因此可以將整個PAG動畫設(shè)計成一個模板，把預(yù)設(shè)的占位圖替換成用戶選取的照片，自動套用效果生成視頻。全程可以讓設(shè)計師自由批量生產(chǎn)模板，無需研發(fā)介入。

仍然基于圖片替換原理，PAG也支持將占位圖替換為視頻，實現(xiàn)視頻模板功能。

5.4 智能剪輯

圖18 智能剪輯場景

智能剪輯是圍繞用戶上傳的視頻內(nèi)容，生成定制化的模板，模板本身是不固定的，可以從多個PAG文件組合而成，類似活字印刷。設(shè)計師可以利用這個特性，構(gòu)建自己的特效組件庫，然后對接AI的識別能力，根據(jù)一定規(guī)則組合得到無限數(shù)量的模板效果，可以做到一鍵出片。這塊目前的典型應(yīng)用場景是王者榮耀的周戰(zhàn)報功能，隨機(jī)生成游戲高光時刻視頻。

文章來源：站酷作者：騰訊ISUX

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

免責(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)定制、用戶體驗、交互設(shè)計、網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)