設計資源 - 設計每日一貼---北京蘭亭妙微/UI設計公司

<address id="ttjl9"></address>

<noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>

<form id="ttjl9"></form>

<em id="ttjl9"><span id="ttjl9"></span></em>

<address id="ttjl9"></address>

<noframes id="ttjl9"><form id="ttjl9"></form>

首頁

072022-4

12種超級好用的-免費漸變神器

01 Cool Backgrounds

網站鏈接：https://coolbackgrounds.io/

網站介紹：Cool Background 是由5個開源生成器整理組成的彩色漸變圖像集合在一起的工具集，內置5種不同的背景風格，每一種風格還提供了簡單的參數配置。非常的炫酷美觀。

低模三角形

粒子

CSS漸變

階梯漸變

圖片

使用方式：左側選擇不規則形狀、圖形、漸變背景、圖片等，右側可以選擇不同的色彩組合，選擇適合自己的色彩風格后，點擊下載即可。

02 180種漸變背景

網站鏈接：https://www.fengtupic.com/colortool

網站介紹：內含180種漸變配色方案，特別好看美觀，適合各種場景模式下的背景使用。

使用方式：選擇適合自己場景的漸變色，可拷貝css格式，也可下載png格式。

03 Pigment

網站鏈接：https://pigment.shapefactory.co/

網站介紹：可通過改變飽和度、色溫和色系改變配色方案，還可通過查看場景效果觀察此配色方案呈現效果。

網站截圖

飽和度亮度顏色

選中和更多

使用方式：左側可以選擇不同的飽和度和亮度，選擇其他色調，右側放大可查看場景配色效果。

04 ColorSpace

網站鏈接：https://mycolor.space/

網站介紹：Color Space 是一款非常實用的漸變生成器，我們只需要選擇一個顏色，就可以快速生成20-30種不同風格的配色方案。同時還提供了梯度和三色漸變選項，可以快速生成配色并查看 CSS 代碼。

網站截圖

輸入顏色代碼或選擇顏色

生成方案

更多與修改

CSS代碼模式

三色漸變

使用方式：上面輸入色值，自動出來漸變方案，還可左右滑動選擇適合自己的搭配方案

05 Adobe Color

網站鏈接：https://color.adobe.com/zh/create/color-wheel

網站介紹：可自由選擇色環上不同的顏色值，依照類比、單色、三原色、補色等不同搭配模式進行搭配，下面展示一系列色值。同時可將看到的好的圖片色紙上傳上來，自動配比色值，同時，還能查看背景色與文字的對比度檢測，非常適合網站多色搭配。

色輪

輔助工具

使用方式：滑動多tab滑塊，選擇色環顏色做不同類型搭配；利用協助工具查看文字與背景的對比檢測。

06 BrandColors

網站鏈接：https://brandcolors.net/

網站介紹：這個網站是基于最大的官方品牌顏色做整理，包含了眾多品牌顏色官網的配色方案，可作為網站或者品牌配色的借鑒。

顏色方案

選中后復制下載

使用方式：選擇好相關品牌的色彩調性，可查看色值，可復制色值，也可以下載相關色值，超級方便。

07 Color Leap

網站鏈接：https://colorleap.app/home

網站介紹：一鍵生成復古風圖片色調分離，可以選擇年代搜索過去180種配色方案。

年份選擇

年份列表

代表圖片和查看顏色

查看顏色和查看圖片

使用方式：選擇年代，選擇圖片風格的配色方案，查看顏色，復制相關色調即可。

08 ColorBox

網站鏈接：https://www.colorbox.io/

網站介紹：ColorBox 是選擇一個顏色，會生成一個顏色系列的顏色工具?？梢詭椭覀冚p松地創建非常炫酷的色彩集，配色頁面還有大量的個性化選項，滿足我們的任何需求。

網站截圖

飽和

使用方式：左側可以添加不同的顏色分類值，右側調整搭配的顏色系列和同色系和補色系不同選擇，曲線直觀展示出色調和飽和度的變化幅度。

09 Eggradients

網站鏈接：https://www.eggradients.com/

網站介紹：Eggradients 是一款收錄了最新設計趨勢漸變色彩的配色網站，以雞蛋的形式展現，支持一鍵復制。

預選顏色

漸變調色板

使用方式：選擇適合自己設計場景的配色方案，復制即可。

10 CoolHue 2.0

網站鏈接：https://webkul.github.io/coolhue/sketch-plugin/

網站介紹：CoolHue 2.0是一款免費的 Sketch 漸變配色插件和收集工具。

使用方式：在sketch下載插件，直接點擊插件，選擇相關配色。

11 Free Mesh Gradient Collection

網站鏈接：https://www.ls.graphics/meshgradients

網站介紹：包含100多個免費的漸變色合集，支持 Sketch、PNG、AI、JPG、EPS 等多種格式下載。

網站截圖

翻譯截圖

漸變截圖

使用方式：可選擇ai、eps、jpg、png格式，選擇好看的漸變色下載即可。

12 Grabient

網站鏈接：https://www.grabient.com/

網站介紹：Grabient 一個非常漂亮且實用的漸變網站，支持 CSS 樣式代碼復制、360度漸變旋轉、自由增加或刪除漸變顏色等功能。

網站截圖

調整角度

調整顏色

漸變比例

使用方式：選擇適合自己風格的配色方案，點開調整漸變梯度，下載即可。

最后感謝大家的欣賞和學UI網干貨小組和學UI網解答團的辛苦整理；

后續仍然會給大家持續帶來 #學UI網干貨分享（其中包括在線配色網站、在線工具、插件等）

謝謝大家的持續關注！~

轉載請注明：學UI網》12種超級好用的-免費漸變神器

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

評論(0) 瀏覽(3185)

072022-4

數據可視化圖表設計指南：圓環圖

3種圓環圖樣式

標準圓環圖

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

布爾圓環圖

布爾圓環圖就像是給圓環圖做了布爾運算，只表示正負兩個值。

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

圓環中心部分用來顯示相關數值的百分比和標簽。此外布爾圓環圖不需要額外添加圖例。

標簽圓環圖

直接在對應的圓環上加入標簽比使用圖例更容易理解。在屏幕空間允許的情況下，可以直接在圓環上添加「名稱+所占比例+數量」的標簽形式。

圓環圖交互狀態分析

懸停狀態

在標準圓環圖中，鼠標懸停在圓環圖上時，跳出分段名稱+百分比+數量值的彈窗。在標簽圓環圖中，懸停的圓環部分突出顯示，其余部分淡出處理。

點選狀態

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

焦點狀態

焦點狀態和上面提到的懸停狀態類似，唯一的區別在于，焦點狀態選中分段后有一個放大+描邊的圓環效果，突出展示數據。

空狀態

當沒有可用的數據時，應該在圖表上表明這一點，并給出提示引導用戶去點擊。

錯誤狀態

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

圓環圖使用指南

使用分類顏色

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

最多使用五個分段

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

保證數據準確

圓環圖的所有分段加起來的數值應該始終為 100%，沒有有多段數據占比過小，可以一起匯總到“其他”分段中。

按順序排列數據

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

不要將時間分段

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

原文地址：Clip設計夾（公眾號）

作者：Clippp

轉載請注明：學UI網》數據可視化圖表設計指南：圓環圖

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

評論(0) 瀏覽(1931)

062022-4

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




    

        

            

            

        

        

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

        

    

    

        

            

            

        

        

            
                // 繪制圖表
            

        

    

    

        

            

            

        

        

            
                myChart.setOption({
            

        

    

    

        

            

            

        

        

            
                tooltip: {
            

        

    

    

        

            

            

        

        

            
                formatter: '{c}' //設置單位
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                //圖例樣式
            

        

    

    

        

            

            

        

        

            
                legend: {
            

        

    

    

        

            

            

        

        

            
                data: ['寬帶情況', '數據量'],
            

        

    

    

        

            

            

        

        

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

        

    

    

        

            

            

        

        

            
                color: '#fff',
            

        

    

    

        

            

            

        

        

            
                fontSize: 12,
            

        

    

    

        

            

            

        

        

            
                padding: [0, 20, 0, 0]
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                grid: { //設置圖標距離父級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)中用數值表示顯示間隔，0為顯示所有，1為隔一個顯示一個，以此類推
            

        

    

    

        

            

            

        

        

            
                textStyle: { //文字樣式
            

        

    

    

        

            

            

        

        

            
                color: '#62799C',
            

        

    

    

        

            

            

        

        

            
                fontSize: '12'
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

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

        

    

    

        

            

            

        

        

            
                show: false
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                yAxis: {
            

        

    

    

        

            

            

        

        

            
                type: 'value',
            

        

    

    

        

            

            

        

        

            
                //show: false,
            

        

    

    

        

            

            

        

        

            
                axisLabel: {
            

        

    

    

        

            

            

        

        

            
                textStyle: { //文字樣式
            

        

    

    

        

            

            

        

        

            
                color: '#62799C',
            

        

    

    

        

            

            

        

        

            
                fontSize: '12'
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                // 控制網格線
            

        

    

    

        

            

            

        

        

            
                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) 瀏覽(3042)

062022-4

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

//圖例
legend: {undefined
icon: "circle",
//icon形狀類型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none,
itemWidth: 10, // 設置icon寬度
itemHeight: 10, // 設置icon高度
itemGap: 40, // 設置間距
// top: '5%',//豎直位置
// left: 'center',//水平位置
x: 50,//水平位置
y: 200,//豎直位置
orient: "vertical",//設置顯示順序，默認水平（水平，豎直）
textStyle: {undefined
color: "#000"
},//文本樣式
// 使用回調函數（設置文本顯示內容，例如加百分號）
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) 瀏覽(9625)

212022-2

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

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

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

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

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

「超大字體家族」最大的優勢在于，它是已經被驗證過的優質組合，用的時候不用擔心~

2.減小標題文本字間距，視覺平衡更好

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

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

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

當你想讓整體排版的節奏感足夠好的時候，有必要針對性地重新調整行間距和段間距。

你需要根據靠近原則，讓相互關聯的標題和正文之間的段間距更加靠近一點，讓不相關的內容塊互相之間分開，間距拉遠，從而自然而然地進行區分。

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

4.如果標題很短，可以試著使用全部大寫

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

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

相應的，在使用全大寫的短標題當中，適當地拉開字間距，能夠增加呼吸感，降低壓迫感。

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

如果可以的話，標題盡量簡短有力一些。

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

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

當然，這樣的文案設計技巧是需要根據行業和領域進行優化的，這個方法并不適用于全部領域。

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

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

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

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

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

7.選擇貼合設計風格和氣質的字體

不同的字體有不同的風格。有的字體粗壯有力，有的柔和自然，有的現代而規整，有的友好而舒適，有的則有趣且俏皮，等等等等。

每種字體都有不同的氣質，你需要把握字體的氣質特征，有意識地總結這些屬性，當你在應對不同的設計項目的時候，能夠快速找到氣質貼合的字體。

這似乎是一項艱巨的任務，但是從長遠來看，能夠幫你更快地搞定各種設計問題。

結語

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

原文地址：marcandrew.me

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

作者：Marc Andrew

譯者：terechen

轉載請注明：學UI網》這7個小技巧快速幫你改善UI界面

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

評論(0) 瀏覽(1783)

252022-1

這是一份匯集全球優秀APP截圖的資源

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

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

打開網站映入眼眶的這個數字有沒有驚呆小伙伴兒，網站匯集了 50000 多個應用的屏幕截圖，大大的節省了設計師一個一個下載截圖的時間。

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

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

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

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

APP 屏幕截圖匯總網站鏈接：
https://mobbin.design/備注：僅作為學習交流，請勿他用。

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

作者：黑馬青年

轉載請注明：學UI網》這是一份匯集全球優秀APP截圖的資源

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(3149)

182022-1

設計師，如何高效完成競品分析！

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

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

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

2.競品分析方法

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

（1）尋找合適競品

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

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

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

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

（2）定義分析維度

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

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

（3）將競品進行比較

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

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

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

（4）得出關鍵結論

關鍵結論，就是將前面分析的重要要點進行整合篩選，得出最終的產品參考策略，后續可根據這份分析策略可作為產品設計參考點。

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

3.寫在最后

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

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

作者：Tony

轉載請注明：學UI網》設計師，如何高效完成競品分析！

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(1647)

092022-1

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

資深UI設計者

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

圖1 傳統動畫實現流程圖

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

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

1 ：PAG解決的問題

——————————

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

圖2 PAG動畫工作流流程圖

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

圖3 PAG和Lottie對比圖

2: PAG支持的AE特性能力

——————————

2.1 矢量特性能力的支持

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

2.2 BMP預合成--全AE特性支持

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

圖 4 BMP預合成原理圖

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

圖6 PAG矢量和BMP預合成混合導出

3: PAG導出插件

——————————

3.1 不支持AE特性提示

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

圖7 PAG導出面板

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

圖8 PAG導出面板預覽窗口

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

3.2 BMP預合成一鍵設置

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

圖9 BMP 預合成設置

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

3.3 圖片填充模式設置

在用pag設置的素材中，經常會遇到用戶填充的圖片與默認占位圖尺寸不一致的情況，在導出面板中PAG增加圖片填充的四個規則，如圖10所示：

圖10 可替換圖片填充設置

其中：

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

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

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

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

具體效果如圖11所示。

圖11 圖片填充效果圖

4桌面預覽工具PAGViewer

——————————

4.1 效果預覽

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

圖12 PAG效果預覽

4.2 性能檢測

在pag動畫實際使用的過程中，PAG經常遇到的問題是設計師辛辛苦苦設計的動畫在終端上性能表現不佳，需要進行返工優化，同樣的問題在使用Lottie方案時候也會存在。

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

圖13 PAG性能展示面板

5: PAG的應用場景

目前PAG方案已經廣泛應用于騰訊公司內外幾十款產品中，涵蓋了眾多的國民級應用。

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

5.1 UI動畫

圖15 UI動畫場景

設計師設計出動畫文件后，研發只需要替換預設的文本內容即可，并且文件體積非常小。

5.2 貼紙動畫

圖16 貼紙動畫場景

5.3 照片/視頻模板

圖17 照片/視頻模板場景

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

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

5.4 智能剪輯

圖18 智能剪輯場景

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

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

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

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(3192)

232021-12

這套圣誕節字體，寫得實在太好看了

01. 字體素材

@叁月，適合圣誕使用的手寫英文字體

f

02. 圣誕素材

@叁月，圣誕節設計素材大合集

f

03. 樣機素材

@是瑩瑩啊~，海報拍攝場景樣機

w

04. 樣機素材

@耳東，VI場景樣機

e

05. 字體素材

@耳東，圣誕節字體素材

t

06. 海報素材

@素箋書，酸性漸變元旦跨年3天倒計時海報

e

原文地址：我們的設計日記（公眾號）

作者：叮當貓

轉載請注明：學UI網》這套圣誕節字體，寫得實在太好看了

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(2543)

232021-12

利用圖形與裝飾，能讓設計化腐朽為神奇

今天我們要講的主題

圖形與裝飾

01.增加裝飾

粉色的信紙，抒寫著我對你的思念

用唱片機包裹著愛情，播放著不會有人聽到的音樂，暗示著我們原來早已分開多年，而唱片機將簡陋的版面包裝成看似文藝感的設計。

02.增加圖形

純色的藍底配上皮衣搖滾，有點枯燥，貌似點燃不了我的激情。

不妨加入圖形試試看，一個圓，不夠。畫個山還是不夠。

干脆再加點不規則的圖形吧，仿佛是愛慕的觀眾將她層層包圍，配上裝飾與文字，活躍和青春的氣氛就有了。

03.綜合示例

一張照片，我心意已久，切成圖形化讓她住進我的心房。

在心房外加點文字寄托我對你的想念

上下的色塊與圖形化的裝飾仿佛在告訴你，這就是我小鹿亂撞的樣子，加入文字切入喜歡的主題，讓這份喜悅保留下去。

圖形和裝飾就像夜店的音樂和燈光，假如失去這些，確定還能蹦的下去嗎？

04.案例實操

純色的紅底配上剛發完工資正在SHOPPING的女人，她可能不知道今天的開心是需要剩下的29天時間來填補的。

但缺少的節日氛圍和單一的畫面，讓她失去了購物所帶來的喜悅，有的只有孤獨和尷尬的笑容。

試著利用圖形與裝飾的方式，繪制圣誕樹圖形表達節日特征。

人物放置到圖形中間，給圖形的內部增加場景或者層次光源。

將人物穿插到圖形上從內而外的層次性，試著增加一些帶有透視角度的元素和有質感光澤的文字。

[優化輸出圖像]

簡單但實用的設計更符合傳達最基本的商業化設計，當然你也可以給綠色的圖形加點光，畢竟綠色加點光，日子才不慌。

[優化輸出圖像]

再來對比下該案例的效果，簡單的示例希望能啟發對設計中圖形與裝飾的運用方法。

[優化輸出圖像]

這就是今天帶來排版那點事！

原文地址：修先森撩設計（公眾號）

作者：修先森

轉載請注明：學UI網》利用圖形與裝飾，能讓設計化腐朽為神奇

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(1750)

« 1 ... 6 7 8 9 10 11 12 ... 88 »

分類

日歷

鏈接

個人資料

藍藍設計的小編 http://www.syprn.cn

存檔

亚洲va欧美va天堂v国产综合