首頁

效率必備!這15個圖像處理網(wǎng)站你收藏了嗎?

seo達人



一、Squoosh

網(wǎng)站鏈接:https://squoosh.app/editor

圖片

圖片

Squoosh 是谷歌推出的一款在線圖像壓縮工具,可點擊選擇或直接往里面拖圖片,在左下方可選擇想要生成的圖片格式,右下方選擇圖片質量,再下載即可。

 

二、Bejson

網(wǎng)站鏈接:https://www.bejson.com/ui/compress_img/

圖片

非常全面的一個工具類網(wǎng)站,不但可以壓縮圖片還可以在線加水印、轉化格式、裁剪等。

 

三、iLoveIMG

網(wǎng)站鏈接:https://www.iloveimg.com/zh-cn

圖片

國外的一款工具網(wǎng)站可以提供圖片壓縮、裁剪、轉換文件,以及調(diào)整文件的大小等。還可以通過幾個點擊來制作GIF動圖!這些都是免費的。支持壓縮JPG, PNG,SVG或GIF等格式圖片。

 

四、TinyPNG

網(wǎng)站鏈接:https://tinypng.com/

圖片

之前老叫它“熊貓吃竹子”壓縮站,一個專門處理png格式的圖片壓縮網(wǎng)站非常好用,不過免費用戶單張圖片不能超過5m 單次不能超過20張。

 

五、圖好快

網(wǎng)站鏈接:https://www.tuhaokuai.com/

圖片

圖好快在線壓縮網(wǎng)站,可以有損壓縮手動控制圖片的壓縮質量,部分功能是收費的,普通用戶每天可掃描登錄免費試用一次。

 

六、Smallpdf

網(wǎng)站鏈接:https://smallpdf.com/compress-pdf

圖片

圖片

國外專門處理PDF在線壓縮、編輯的網(wǎng)站。

 

七、Optimizilla

網(wǎng)站鏈接:https://imagecompressor.com/zh/

圖片

國外JPEG、GIF、PNG格式圖片壓縮站。

 

八、Ezgif

網(wǎng)站鏈接:https://ezgif.com/

圖片

Ezgif.com 是一個簡單的在線 GIF 制作工具和用于基本動畫 GIF 編輯的工具集。在這里,您可以創(chuàng)建、調(diào)整大小、裁剪、反轉、優(yōu)化和對 GIF 應用一些效果。

 

九、ilovepdf

網(wǎng)站鏈接:https://www.ilovepdf.com/

圖片

在線處理PDF工具站。

 

十、易轉換

網(wǎng)站鏈接:https://www.easeconvert.com/

圖片

免費好用的文件轉換工具。

 

十一、Aconvert

網(wǎng)站鏈接:https://www.aconvert.com/cn/image/

圖片

Aconvert.com是一個寶藏工具站,可以在線轉換各類PDF,文檔,電子書,圖像,圖標,視頻,音頻等格式和壓縮文件,非常方便。

 

十二、bigjpg

網(wǎng)站鏈接:https://bigjpg.com/

圖片

通過AI算法可以在線放大圖片,提升圖片質量。你可以選擇在線上傳處理(較慢)或者下載客戶端。

 

十三、removeby

網(wǎng)站鏈接:https://www.remove.bg/zh/upload

圖片

自動摳圖神器,上傳圖片一鍵摳圖。

 

十四、搞定摳圖

網(wǎng)站鏈接:https://koutu.gaoding.com/

圖片

搞定設計出品的AI智能口摳圖工具,還有好多好玩的可以去探索。

 

十五、圖象

網(wǎng)站鏈接:https://www.tuuux.com/

圖片

圖象是一個聚焦國內(nèi)外可視化創(chuàng)意的社區(qū),里面的作品質量都非常不錯,不管是工作中找靈感、還是上傳作品宣傳個人IP都是一個不錯的選擇。

 

原文地址:小六可視化設計(公眾號)

作者:Mr小六

轉載請注明:學UI網(wǎng)》效率必備!這15個圖像處理網(wǎng)站你收藏了嗎?

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

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

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

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

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



內(nèi)容創(chuàng)作平臺的解析與分享

seo達人


圖片

 

定義

其實內(nèi)容創(chuàng)作平臺嚴格意義上來講,算是B端產(chǎn)品的運營管理類型的產(chǎn)品(如果不清楚運營管理類型的產(chǎn)品建議查看我之前文章 ),它主要依附于大型的C端產(chǎn)品,幫助這些產(chǎn)品去連接更多有價值的內(nèi)容

B端設計指南 – 產(chǎn)品類型

在內(nèi)容管理型產(chǎn)品當中,主要是作為平臺方,提供給在平臺當中創(chuàng)作的人們進行使用
舉一個例子,我在 Youtube 上傳了一個視頻,我想要了解我這個視頻用戶的真實反饋,以及對于自己的作品進行標簽、標題上的優(yōu)化,這樣,我便可以打開 Youtube Studio 進行查看

而目前這類內(nèi)容創(chuàng)作平臺,就是提供給這些內(nèi)容創(chuàng)作者進行使用,因此這類型的產(chǎn)品主要分為兩類:

  • 視頻:Youtube、Bilibili、抖音、快手、西瓜視頻…
  • 文字:微信公眾號、頭條號、知乎、站酷、語雀…

內(nèi)容創(chuàng)作平臺與CMS較為類似,CMS是 Content Management System 的縮寫,意思為“網(wǎng)站內(nèi)容管理系統(tǒng)”, 用來管理網(wǎng)站后臺,編輯網(wǎng)站前臺

比如我們會經(jīng)常聽到的 WordPress 就是一個非常典型的 CMS  產(chǎn)品,CMS大多數(shù)需要你自行搭建,而上方提到的內(nèi)容創(chuàng)作平臺,則是別人已經(jīng)提供好了對應的基礎功能,你只需要使用即可(這個概念與 SaaS 有一些些雷同)

圖片

而內(nèi)容創(chuàng)作平臺更加垂類一些,主要針對的就是 作者投遞的管理平臺

 

業(yè)務

嚴格意義上來說,內(nèi)容創(chuàng)作平臺只會有一個角色,也就是內(nèi)容創(chuàng)作者,只是隨著平臺的不斷擴大,后續(xù)會有很多運營等相關職位,比如 微信公眾號,它本身只支持創(chuàng)作者進入,隨著平臺規(guī)模不斷擴大,逐漸演變成 三類固定角色 提供給用戶進行綁定

當然內(nèi)容創(chuàng)作平臺的整體設計,一定要與之前平臺固有風格保持一直,這樣才能夠有統(tǒng)一的風格

圖片

圖片

 

頁面

在整個內(nèi)容創(chuàng)作平臺當中,會有很多非常典型的頁面,作為設計師,我們就來看看典型頁面如何下手

 

1、內(nèi)容編輯頁

在內(nèi)容創(chuàng)作平臺當中,必須要提供的功能便是內(nèi)容上傳,因為無論是文章、又或是視頻,都需要創(chuàng)作者進行上傳、編輯
因此作為設計師,我們首先應該關注的便是這個內(nèi)容編輯頁的使用體驗

比如文章類的產(chǎn)品中,我們需要去編輯內(nèi)容排版,那就一定會用到富文本編輯器。富文本編輯器目前會分為兩個流派,一類就是傳統(tǒng)的 頂部編輯器 ,一類是 Block 編輯器

頂部編輯器:其實這個我不知道專業(yè)的術語,根據(jù)外形隨意起的名字

Block 編輯器:畢竟我是深度 Notion+飛書的用戶,如果對這個感興趣,可以去到文末留言,我們之后單獨出一篇文章來講

圖片

不過目前,內(nèi)容創(chuàng)作平臺的產(chǎn)品都是按照基本的 富文本頂部編輯器的方式來進行,Block 更多只在筆記軟件當中出現(xiàn)

圖片

這里分享一些開源的富文本編輯器,很多B端產(chǎn)品可以讓前端直接使用

https://www.wangeditor.com/

https://summernote.org/

https://dhtmlx.com/docs/products/dhtmlxRichText/

再比如視頻類的產(chǎn)品,就主要圍繞 上傳視頻、設置封面、標題、等內(nèi)容進行展開,其實功能上都大同小異

圖片

因此你會發(fā)現(xiàn),內(nèi)容編輯部分,大家的功能都會比較趨同(因為無論是 視頻還是文字媒介,因為前臺系統(tǒng)對于內(nèi)容的要求都基本一致,因此如果想要了解前后臺系統(tǒng)的邏輯關系,其實可以從基礎的內(nèi)容創(chuàng)作平臺入手去做分析)

 

2、數(shù)據(jù)查看頁

數(shù)據(jù)查看頁在內(nèi)容創(chuàng)作平臺非常重要,因為絕大多數(shù)內(nèi)容創(chuàng)作者都會非常關心自己的內(nèi)容數(shù)據(jù)情況,可以通過數(shù)據(jù),來為自己的內(nèi)容方向進行合理的規(guī)劃
可以把數(shù)據(jù)查看頁比作是一個小型的 數(shù)據(jù)分析 產(chǎn)品,區(qū)別的是 內(nèi)容創(chuàng)作平臺 的數(shù)據(jù)查看,是已經(jīng)提供了默認的分析維度與指標,你只能通過篩選去查看數(shù)據(jù)之間的關系,這里就不再贅述,給大家看看不同產(chǎn)品的數(shù)據(jù)查看頁,了解它們的設計方式

圖片

圖片

圖片

 

3、其他頁面

當然這類產(chǎn)品還會涉及到比如 常見話題、熱門話題、素材庫 等等…  完整的圖片內(nèi)容我就打包放在圖庫平臺上,大家可以進入查看

花瓣:www.huaban.com/user/youthce

語雀:www.yuque.com/youthce/pic/

圖片

 

原文鏈接:CE青年Youthce(公眾號)

作者:CE青年

轉載請注明:學UI網(wǎng)》內(nèi)容創(chuàng)作平臺的解析與分享

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

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

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

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

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



【UI設計作品總結】DJI 農(nóng)業(yè)無人機 APP 頁面重構

seo達人

圖片

圖片
圖片
圖片
圖片
圖片
圖片
圖片
圖片
圖片
圖片
圖片
圖片
圖片
圖片
圖片
圖片
圖片
圖片
圖片
圖片
圖片
圖片
圖片
圖片

 

原文地址:黑馬家族(公眾號)

作者:黑馬青年

轉載請注明:學UI網(wǎng)》【UI設計作品總結】DJI 農(nóng)業(yè)無人機 APP 頁面重構

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

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

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

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

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




設計師看了都會收藏的色塊矢量插畫教程來了!【零基礎】

seo達人

圖片

知識重點:構圖層次、色彩搭配、元素豐富操作工具:數(shù)位板 | illustrator操作難度:  

首先給大家介紹一位來自塞爾維亞插畫家 Alex Krugli。他擅長通過豐富的圖形組合和絢麗的色彩表達,來使原本簡單的畫面內(nèi)容變得層次豐富,百分百吸引你的眼球。

圖片

圖片

圖片

*圖片來自插畫師 Alex Krugli,僅供賞析

 

 

分析Alex Krugli的畫風特點 

1.、扁平風圖形插畫,元素幾何化概括,組合豐富,畫面飽滿,無空間透視變化,無肌理效果。

圖片

2.、構圖層次豐富,有前景,中景,遠景幾個部分組成。

圖片

3.、色調(diào)統(tǒng)一又富有變化,運用互補色使畫面更有視覺沖擊力 。

圖片

4.、圖形裝飾豐富,給簡潔的造型增加更多的可看性。

圖片

我真是一個善于總結的好學生,下面開始畫起來吧~

 

 

圖片

本次的主題我想以建筑為主元素,構建一個室外場景畫面,首先我們可以去百度或者花瓣搜索些漂亮的房子照片,找找靈感,關鍵詞可以是歐式建筑,復古小房子等。

搜索建筑素材圖片時,需要注意兩點:

1、幾何感強

2、設計感強的建筑做參考

這里我找到了兩張建筑圖片,將其中一張作為主元素建筑,另一張作為遠景建筑群,然后可以再去找找場景相關的素材,如:車輛、郵筒、植物等,同樣也是靠百度啦~

圖片

圖片來源網(wǎng)絡,僅供賞析

 

 

圖片

在 Alex Krugli 的插畫作品中,非常注重畫面層次的劃分,我們可以先分析一張他的作品。

從顏色分區(qū)可以看出畫面分了四個層次,圖中的紅色區(qū)域是畫面的前景,藍色是中前景,綠色是中后景,紫色是遠景。

圖片

那如何把畫面安排的有序且豐富呢?

1. 劃分建筑層次,由近及遠。如圖,建筑可以有單體和建筑群兩種形式,相互穿插,區(qū)別各個層次建筑的大小寬窄高低,中景建筑一般占比最大,比較密集,前景建筑起遮擋作用,背景建筑概括,占比較小。

圖片

2. 拉開建筑大小等級,近大遠小。(如下圖中近似造型的建筑在畫面中大小變化)

圖片

3. 豐富建筑剪影形,高矮、粗細、方圓相互結合。

圖片

4. 近景的造型更復雜,背景簡化處理。

圖片

通過分析確定了我的構圖方向,利用搜集的素材,我們可以大致的擺放一下位置,將畫面分四個層次,藍色區(qū)域的中景建筑是這次畫面的主體元素,紅色前景區(qū)域起到遮擋作用,綠色中后景區(qū)域豐富了畫面的層次,紫色遠景作為背景襯托前面的元素。

圖片

 

 

圖片

  • 主體建筑物的繪制

1. 抓住照片中建筑物最有特點的幾個地方

圖片

2. 根據(jù)構圖調(diào)整建筑的長寬比例,用幾何形體概括外形,扁平處理,不做透視的變化。注意:對參考照片做一些主觀的調(diào)整,不要完全一樣哦~

圖片

TIPS:這里我用了三角形和方形作為大的框架,給人穩(wěn)定的感覺,內(nèi)部添加半圓形、圓形,增加變化,給建筑物添加活力。

圖片

 

  • 遠景建筑群的繪制

1. 概括建筑群中的幾種建筑形態(tài)

圖片

2. 將幾種建筑形重新組合,做高低大小的演變,形成新的建筑群,添加植物、臺階等元素豐富層次變化,并添加建筑內(nèi)部的細節(jié)。

圖片

參考之前插畫師 Alex Krugli 對建筑層次的處理,將畫好的建筑群放置在畫面中,這里注意主建筑占比最大,建筑群需要做近大遠小處理。并且建筑要有高有低,有寬有窄,相互穿插配合。

圖片

 

  • 其他元素的繪制
建筑群繪制之后,接下來我們就要豐富畫面的其他層次,前景加上車輛,植物,街道,郵筒等元素對中景進行遮擋,背景用遠山天空延伸畫面,還有人物,增添畫面的活力。

1. 汽車的繪制:

① 對車輛進行平面化處理,將前側兩個面用一個平面概括。

圖片

② 用幾何圖形進行概括和演變,車輛主要用到的幾何形是半圓角矩形和圓形。

圖片

2. 郵筒的繪制:同樣也是對照片進行幾何圖形的概括,主要用到了半圓形、矩形以及圓形。

圖片

然后我們將二者和小植物做組合搭配,形成畫面的前景,元素組合的形式可以避免元素的單一,并且更有層次。

圖片

3. 植物:植物同樣可以從照片中提取幾何形,再進行演變,這里我通過照片提取了圓角矩形,三角形,圓形,再通過組合疊加的形式,演變成新的幾何形。植物在畫面中可以作為前景,或者穿插聯(lián)系其他單體,也可以作為點綴元素重復出現(xiàn)。

圖片

4. 人物:人物在畫面中也是起到點綴的作用,面積不大,不需要五官的刻畫,畫出基本動態(tài)即可。

① 從照片中提取動態(tài)。

圖片

② 優(yōu)化人物比例并修改動態(tài):頭放大并調(diào)整轉向,肩變窄,身體擺正,改變手臂和腿部的動態(tài),讓兩個人物之間有一點互動。

圖片

③ 幾何化處理:首先可以概括一下身體各部位的基本幾何形,再套用到動態(tài)中去,注意直線概括,使人物更加圖形化。

圖片

最后畫一下背景的遠山,月亮,云朵,草圖就完成了,啦啦啦~

圖片

 

 

圖片

線稿的繪制是在 illustrator 中完成,在草圖的基礎上添加物體內(nèi)部細節(jié)并對整個畫面做最后的調(diào)整。

1. 建筑的屋頂造型用三角形、梯形、半圓做了統(tǒng)一的規(guī)范。

圖片

2. 在草圖的基礎上,用AI把線稿畫出來。

3. 統(tǒng)一建筑群中的植物造型,增加了柵爛的元素。植物這里用圓角矩形為基本型,大小疊加,幾個為一組,穿插在建筑之間。

圖片

4. 在草圖的基礎上,用AI繪制線稿,并增加車的細節(jié)。

圖片

最后再檢查一下畫面的疏密關系,線稿就完成了。

圖片

 

 

圖片

1. 梳理黑白關系

因為畫面的層次比較多,我們可以先確定下畫面的黑白關系,場景設定是夜晚的場景,整體氛圍可以是暗色調(diào),中景區(qū)域的顏色亮暗對比較強,是重點突出的地方,背景統(tǒng)一在暗調(diào)里,不做太強烈的亮暗對比,起襯托作用,前景壓暗,穩(wěn)定畫面效果。

圖片

2. 配色:配色我選擇藍紫色調(diào)為畫面的主色,輔助色選取主色的鄰近色(綠色)來豐富顏色,互補色(深紅色)來增強畫面沖擊力,用純度高的橙色與紅色作為畫面的點綴色,使整體配色既和諧統(tǒng)一,又豐富多彩。

圖片

為了避免配色雜亂,可以將畫面分塊,大致安排下畫面顏色的占比,主色大概占到畫面的 65%,鄰近色 15%,互補色 15%,點綴色 5%。

圖片

結合之前的黑白關系,我們就可以完成色稿了,注意冷暖的變化也可以體現(xiàn)畫面的層次感,背景偏冷,過渡到前景,逐漸變暖,我們以植物的顏色變化為例。

圖片

最后整體觀察,注意顏色在畫面中要分布均衡,相互呼應。不要一種顏色只出現(xiàn)在一處(如下圖的紅色運用),飽和度高一點的點綴色,可以起到點亮畫面的作用。

圖片

 

 

圖片

做完色稿,我們的畫面差不多完成 70% 了,通過刻畫三部曲,加明暗,加陰影,加裝飾,就可以讓畫面看起來更絢麗啦,下面請看具體的講解。
  • 建筑的刻畫
1. 加明暗:首先通過光源分析,確定受光面。

圖片

再通過提亮受光面顏色,做物體塊面區(qū)分。也可以通過改變顏色色相,運用冷暖色來豐富顏色。因為這部分建筑位于最中心的位置,我們要把他的分塊做的細致一些,包括門窗的亮暗都要分開,兩個三角塔形建筑是離光源最近的地方,所以他們的塊面顏色對比較強,營造光影感。

圖片

2. 加陰影:在房檐下方繪制陰影,陰影的添加可以豐富畫面層次,增加體積感。

圖片

3. 加裝飾:創(chuàng)建一些小的裝飾圖形作為花紋填補在塊面中,點面結合,使畫面裝飾細節(jié)更為豐富與細致。注意裝飾圖形的安排要有疏密變化,亮面圖形的顏色可以用物體暗面的顏色,暗面圖形的顏色可以用物體亮面的顏色,既不破壞整體色調(diào),又使畫面更加豐富。

圖片

同理,遠景建筑也用同樣的步驟刻畫。

1. 加明暗:遠景的建筑塊面顏色對比可以減弱,相對更加統(tǒng)一。

圖片

只需將墻體做一個亮暗的區(qū)分,窗戶這些小的塊面就不用再做區(qū)分了。

圖片

2. 加陰影:在建筑交接處添加陰影,豐富層次。

圖片

3. 加裝飾:添加裝飾元素,種類可以不用很多,統(tǒng)一一些。

圖片

TIPS:區(qū)分塊面的造型不限于直線的分割,這里我用了 Z 形的基本元素,做不同的造型運用到屋頂?shù)姆指钪小?/section>

圖片

 

  • 汽車刻畫

1. 加明暗:物體進行明暗的塊面區(qū)分。

圖片

2. 加強明暗對比:為了拉開與后面建筑的層次,可以加強汽車上塊面的亮暗對比,同時也為整體畫面增加亮色。

圖片

● 人物刻畫

人物的刻畫相對來說比較簡單了,只做一下明暗變化即可,再區(qū)分手臂與身體的上下關系以及雙腿的上下關系。

圖片

 

  • 植物的刻畫

1. 圓角矩形樹的刻畫:首先對同組樹叢做顏色區(qū)分。

再加上裝飾元素。

圖片

2. 單體植物的刻畫:以下圖三角形植物為例,還是按照區(qū)分塊面,加陰影,加元素的步驟刻畫。注意塊面的曲線分割和顏色的冷暖變化。

圖片

 

  • 遠景的處理

遠景對整個畫面起襯托作用,先將背景做圖形的分割,在與建筑交接處做重色的襯托,在圖形上延用了 Z 形元素,與屋頂相呼應,再依次加入月亮星星云彩、小樹、小鳥、圖形裝飾等元素,點,線,面相結合,在統(tǒng)一中富有變化。

圖片

再這樣那樣之后,我們的畫面就完成了,啦啦啦~撒花~

圖片

 

 

圖片

1. 畫面構圖的層次安排

2. 照片元素的特征提取,幾何圖形概括及組合

3. 色調(diào)的統(tǒng)一和變化

4. 裝飾元素的添加

那么今天的教程到這里也就結束了,你學廢了嗎?喜歡記得點個贊哦,我們下次再見。

 

原文地址:胡曉波工作室(公眾號)

作者:藍貴蓮

轉載請注明:學UI網(wǎng)》設計師看了都會收藏的色塊矢量插畫教程來了!【零基礎】

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

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

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

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

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



用上這24個UI體驗優(yōu)化經(jīng)驗,果然做出來的設計更高級了!

seo達人

一、暗色模式下飽和度不宜過高

高飽和度的顏色能形成強烈的對比。在暗黑模式下使用高飽和度會很刺眼,給用戶很不好的體驗。暗黑模式一般在晚上使用,因此對設計師來說,需要做的是讓整個配色相對柔和,讓用戶感到放松。基于此,在設計的時候應該將飽和度限制在200-500之間。

(彩云注:這里的200-500彩云去查了不少資料,但沒有找到最好的答案,這里引用的是Material Design中的顏色規(guī)范,感興趣的同學可以自行查找)

圖片

 

二、 按鈕要有優(yōu)先級

在同一個界面,最理想的狀態(tài)是只有一個最主要的關鍵按鈕和緊跟著的次要按鈕。這是因為如果一個界面上有太多這種行動按鈕(CTA)按鈕,會讓關鍵操作淹沒在這些按鈕中,讓用戶不知所措。

圖片

 

三、簡化不必要的動詞

沒必要在菜單上增加動詞和短語,用最少的信息寫清楚功能就足夠讓用戶理解了。所以,在菜單設計上要盡量避免增加無關緊要的詞,這樣才不會影響用戶體驗。

圖片

 

四、字體尺寸類別越少越好

你可能注意到,很少有表單的字體大小不平衡,字體之間的類別盡量少一些看起來會更加平衡。在決定字體大小時,盡量規(guī)范字號的標準。比如標題(16px),副標題(12px),正文(10px),說明文字(8px),這些尺寸都是以2為倍數(shù)的。

圖片

 

五、不要混用圖標風格

盡管我知道要做好圖標一致性,但在實際工作中依然經(jīng)常犯錯。很多設計師經(jīng)常用不同風格的圖標混在一起,這樣會讓整個UI界面的設計顯得很不成熟。圖標是為了讓用戶更有效率地理解事物。在使用圖標的時候一定要注意圖標的一致性,尤其是一些是一些風格細節(jié)。

這里也跟大家分享2個我自己常用的figma圖標庫:

1)Unicorn    (https://www.figma.com/community/file/931512007012650048)

2)Basil Icons     (https://www.figma.com/community/file/931906394678748246)

圖片

 

六、不同背景下的顏色飽和度適當微調(diào)

通常情況下,我們會認為一個顏色在深色模式和亮色模式下是用的同一個顏色值,但這其實是錯誤的。一個顏色在亮色模式下看起來非常漂亮,但在深色模式看可能就太暗了,反之亦然。解決這個問題最好辦法是使用2套不同飽和度的顏色。

圖片

 

七、新手引導多給用戶自主權

App的新手引導決定了用戶第一次體驗產(chǎn)品時的感受。在設計的時候,試著公開需要哪些具體步驟,增加”跳過“和前后移動查看的能力對新用戶來說非常重要。

圖片

 

八、在圖片上增加疊加層

許多網(wǎng)站和App都是用圖片驅動的,但在圖片上直接增加文字內(nèi)容有時候會被淹沒掉。在圖片上增加一個疊加層可以提升內(nèi)容的可讀性。

圖片

 

九、信息部分露出

對于一些大屏設備來說,像筆記本電腦,平板電腦和智能電視,它們都有非常多閑置的空間。對于這些閑置的空間來說,盡量通過設計告訴它底部還有更多內(nèi)容。這對UI和UX方面都有好處,因為空間的使用方式能夠讓用戶清晰的知道所有內(nèi)容。

圖片

 

十、拆分大段文字

為了讓用戶聚焦閱讀,應盡量避免使用大段的長/寬行。保持短句和簡潔能夠增加內(nèi)容的可讀性。(彩云注:這點用在你的作品集里也是很合適的,有些人經(jīng)常使用大段的文字內(nèi)容來描述,很可能直接勸退面試官)

圖片

 

十一、Z字形原理

Z字形原理,也就是大眾所熟知的”古騰堡原理“,它描述了當人們看到一個均勻分布元素的設計時,眼睛的總體運動情況。通過這個原理我們知道,用戶在內(nèi)容上的視線是沿著Z字形來閱讀的,所以遵循這一原理設計你想要核心表達的內(nèi)容。

圖片

 

十二、擴大可點擊范圍

擴大點擊區(qū)域,維護像按鈕、單選、多選等控件的響應尺寸,如果你設計的點擊區(qū)域太小會讓用戶點擊困難,造成流失。

圖片

 

十三、盡量使用簡潔的圖標

避免使用花俏和俗氣的圖標,它們會讓整個設計顯得非常不成熟,同時也是很難理解的。用上更簡單的圖標形式,會讓界面更高級。(彩云注:當然越簡單的圖標其實想畫出彩會更難,另外也需要區(qū)分不同的場景,像一些運營類的圖標可能會為了活動氛圍做的相對風格化一些。)

圖片

 

十四、正確的文案表達

選錯文案,會讓人們對于任務缺乏興趣,根據(jù)上下文使用更合適的詞組。

圖片

 

十五、考慮手勢操作

輕敲和點擊有時候很累人,可能不如使用滑動、拖拽等手勢操作,這些操作會讓界面更簡潔并且也能順利地完成既定任務。

圖片

 

十六、展示部分文案

在探索酒店、目的地甚至是閱讀任何文章時,用戶經(jīng)常都需要點擊卡片。為了使得探索更加吸引人注目和干脆,避免使用長文本導致的滾動。相反,可以加一個閱讀更多的按鈕方便想看全所有內(nèi)容的用戶。

圖片

 

十七、接近法則

”鄰近的物體往往被視為是同一組內(nèi)容“。有時候為了把內(nèi)容區(qū)分開的更清晰,嘗試用線對相關內(nèi)容進行分組。(彩云注:其實有留白和不同顏色做區(qū)分也是可以的,建議根據(jù)自己的設計風格和具體內(nèi)容來定)

圖片

 

十八、文字控件可視化

在設計控件時,如果可以用圖形可視化的地方就優(yōu)先嘗試把控件圖形化,除了非常需要很精確的設置參數(shù)。對于價格范圍這種,很容易將它可視化為滑塊控件。

圖片

 

十九、占位符要接近要填寫內(nèi)容

對一些人來說容易理解的東西,對某些人來說可能不是。因此,最好使用示例占位符來解釋輸入字段,這可以防止用戶在填寫內(nèi)容時出錯。

圖片

 

二十、系列位置效應

根據(jù)”系列位置效應“,心理傾向于記住列表的第一項和最后一項,而不是中間項。因此,在任何App中設計導航時,根據(jù)應用的上下文保持最左和最右的選項。例如instagram,最左邊是”首頁“,而最右邊是”用戶“。(彩云注:這是一個心理學上的理論,人們對于一系列的材料更容易記住開頭的內(nèi)容,也叫做首因效應或者首位效應;更容易記住末尾的內(nèi)容,就叫近因效應。)

圖片

 

二十一、減少點擊次數(shù)

在設計任何體驗時,點擊次數(shù)都是非常重要的指標。統(tǒng)計用戶需要點擊多少次才能完成他的目標,額外的點擊會減慢整個操作過程。簡化過程,自然體驗就會更好,所以盡可能的減少點擊次數(shù)。(彩云注:下面的案例,增加可點擊符號也可以減少用戶思考的時間。)

圖片

 

二十二、少即是多

為了使內(nèi)容突出,沒有必要使用多種字體類型,包括加粗、改色等等。只在最需要的位置使用增強的的文字層次結構、字體重量,同時只使用一種字體足以吸引用戶對內(nèi)容的注意力。

圖片

 

二十三、留白定義重點

留白在設計中非常重要,太少或者沒有留白會使得設計非?;靵y。明智地使用留白可以明確地強調(diào)內(nèi)容。

圖片

 

二十四、別讓用戶閑著

根據(jù)多爾蒂閾值(Doherty Threshold)這個理論:”系統(tǒng)需要在 400ms 內(nèi)對使用者的操作做出響應,這樣才能夠讓使用者保持專注,并提高生產(chǎn)效率?!啊R虼?,我們可以使用動畫、圖像甚至文本來保持用戶的注意力。(彩云注:給用戶的提示可以先快速加載信息框架,讓用戶有事可做,而不是什么都看不到)

圖片

 

原文地址:彩云譯設計(公眾號)

作者:彩云Sky

轉載請注明:學UI網(wǎng)》用上這24個UI體驗優(yōu)化經(jīng)驗,果然做出來的設計更高級了!

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

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

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

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

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




5 個案例帶你領悟幾何面性趣味LOGO

seo達人


寫在前面 

其實 dribble,Be 上有很多幾何化風格的 logo,大家多看看,其實可以發(fā)現(xiàn)都有一些共性。在這類 logo 風格占滿市場的時候,考慮怎么做,才能讓這一類更出彩。

我在這類 logo 的執(zhí)行,分成三個階段。

 

1. 圖形的大概造型參考

簡單來說就是找圖形實物/繪制造型參考圖,這跟大多數(shù)風格 logo 的設計步驟是一致的。

2. 根據(jù)造型,用基礎幾何圖形表達

基礎幾何圖形,其實就是很常見的「矩形、圓形、三角形、菱形」等等,你找的一張造型,盡量用工具自帶的「矩形」「三角形」「圓形」去代替所有的部件。

3. 創(chuàng)意的加分

把大概的輪廓造型做出來以后,可以適當結合字母,或是添加一些小元素,把你的 logo 整活起來,讓它更生動,畫面感、故事感更強。

好了,現(xiàn)在我們開始講案例。

 

圖片

我們先試著觀察它,發(fā)現(xiàn)這個 logo 是貓頭鷹與 L 的結合,那這個 logo 從 0 到 1,是怎么做出來的呢?

老方法,我們先找一些貓頭鷹的圖片, 作為造型的參考。提取貓頭鷹特征。

圖片

找參考這步,我一般會分為找兩種圖片,1. 實物照片(為了觀察整體造型與提取特征)  ;2. 設計師處理好的造型圖片(為了借鑒和觀察別人的處理方式,但是需要注意的是不要過渡借鑒,會構成抄襲)

圖片

 

先看實物圖片,發(fā)現(xiàn)其特征

1. 眼睛

2. 頭上的小耳朵

3. 臉上的內(nèi)輪廓

概括完貓頭鷹的特征以后,我們開始繪制整體輪廓(先不加細節(jié))。

圖片

網(wǎng)上這張插圖,其實概括的很幾何化了,我們只需要在它的基礎上再修改、變化,就可以做出我們要的整體造型??梢园l(fā)現(xiàn),身體-矩形,翅膀-半圓,眼睛-雙圓。我們根據(jù)這些概括,開始實現(xiàn)這個 logo。

圖片

把基礎組件繪制出來,再把它們組合成一個初版造型。

圖片

到這里 01,發(fā)現(xiàn)貓頭鷹的感覺還是少了一點,原因在于最關鍵的臉部的內(nèi)輪廓沒有繪制,這是能突顯貓頭鷹這個物種的很重要的元素;結合實物圖片與處理好的插圖,我們進行繪制,注意透視角度得到 02 圖。

繼續(xù)觀察,還差了一個小耳朵是不是,那我們就給它加上,這邊可以直接用矩形,也可以用三角形,可以輸出兩個效果,對比看看。

圖片

通過對比我發(fā)現(xiàn),矩形看起來跟整個大體圖形,更能融合到一起,整體感更強,最終我選擇了矩形的小耳朵版本。

圖片

得到這個初版造型以后,我們再進行調(diào)整與創(chuàng)意結合;在翅膀與身體的連接處,我們可以做一個切割,讓翅膀與身體的輪廓更清晰;同時,眼睛的輪廓也可以調(diào)整,與臉的內(nèi)輪廓斜線,可以做平行(這樣的處理,會讓整個圖形看起來更規(guī)則)。

繼續(xù)觀察、優(yōu)化這個圖形,現(xiàn)在會感覺,小耳朵與身體的連接,稍顯生硬。臉內(nèi)輪廓的直角連接同樣有這種感覺。那我們就可以給它加上圓角,這種平滑的處理,使得圖形視覺上看會顯得柔和。

圖片

最后,我們根據(jù) logo名稱「L-OWL」,讓這個圖形加上 L 的小尾巴,再上個色~就完成了!

圖片

 

 

圖片

這個 logo 的誕生是之前我去吃海底撈的時候,服務員小姐姐送了我一個小玩具。當時看到,一陣狂喜 ,這不是很適合拿來做 LOGO 么!

圖片

在執(zhí)行的時候,我發(fā)現(xiàn)按照原圖的繪制,整個造型會顯得的怪異,所以,我們可以試著把它改變一下。

圖片

我們盡可能先用矩形、圓形去繪制這個小恐龍減少原圖那些細節(jié),比如腳指之類的,能簡化就簡化它得到這個輪廓,發(fā)現(xiàn)造型不太好看,特別是頭部,不說的話有點像狗子。那我們就可以給它改變下造型,嘗試減少線段。

圖片

嘗試找出可以刪除的錨點,讓形狀以最少的線段表達出最清晰的輪廓;在這一步的修改,做了比較大的改變,不僅改變了圖形的原始造型,也修改了側面頭部的角度(因為去掉了長開的嘴,所以把仰著的頭往下調(diào)整)。

這一步是一個嘗試的過程,也是一個試錯,需要耐心的過程,大家可以多找一些圖片參考,得出你想呈現(xiàn)的造型形態(tài)。

圖片

為了方便觀察整體形態(tài),我們把描邊模式換成面性填充,發(fā)現(xiàn)小恐龍的左腿太短,不太協(xié)調(diào),那我們給它拉下來一點(注意要保持角度的平行) ;然后找了一些恐龍的圖片,發(fā)現(xiàn)缺了角,我們也給它填上。

圖片

得到了這個圖形 01 以后,基本是完成了一半。接下來,我們需要做的是讓各個部件層次清晰點。比如,頭跟身子的連接處,需要一點切割或者是陰影;腹部與腿的分層,尾巴與身體,也需要陰影。這樣做的目的,是讓你的小恐龍各個部件更清晰,而不是一坨色塊 。

圖片

現(xiàn)在給它加上小眼睛,再加上一些恐龍身上的鱗片、紋路之類形狀。在這里,我用的是小三角形,來表達恐龍身上的小角。
圖形已經(jīng)出來了,我們給它上個色看看~

圖片

之前有提過,加點裝飾或是小元素,會讓你的圖形更有創(chuàng)意性跟故事性。適當展開聯(lián)想。這邊我給它加上的是一只小蝴蝶。起到一個更具生動,讓小恐龍不那么呆板的作用。

圖片

 

 

圖片

這個 LOGO 不知道大家能不能感受到,它很卡通,也很幾何?,F(xiàn)在我們來講講這個案例。

老方法,我們第一步是要找到合適的造型參考。

圖片

在網(wǎng)上找到了這張插畫,是的,就是用它當造型參考。

圖片

然后,我們?nèi)ゲ鸱诌@個小女孩的各個部位。帽子、頭發(fā)、眼睛、鼻子、耳朵、臉型。我們用基礎幾何形狀,先嘗試組合一下初版的圖形。沒辦法用基礎形狀的,我們先用鋼筆大概勾勒一下。

初版造型出來以后,觀察一下發(fā)現(xiàn)是可行的。我們再把它們(描邊)轉化成面性色塊,再觀察調(diào)整。

圖片

這邊的小細節(jié):耳朵被頭發(fā)蓋住,被蓋住這塊的線條,跟頭發(fā)的弧度呈平行狀態(tài)加上五官,( 這邊看你想賦予這個小女孩什么樣的性格,但是看裝扮來說,酷酷的氣質是比較符合的)想表達酷,可以加上墨鏡。歪嘴笑更加重了 cool,不屑的氣質。

圖片

到這步以后,整個圖形基本是完成了,檢查一下底部頭發(fā)的線條,可以用正圓去剪切規(guī)范它。然后就可以幫她上個色,加上一些陰影, 增強層次感。

圖片

圖片

用圓形去剪切,是很常用且好用的一種方式。它會讓你的圖形看起來更規(guī)整,更幾何化。

最后,我們得到這個圖形以后,在排版上,也做一些變化。對應圓形框內(nèi)的圖形,我們用圓形的路徑文字,去排品牌名稱。

圖片

 

 

圖片

現(xiàn)在很多同學應該還是在大量做練習的階段,有時候不知道做什么,就感覺很頭疼。這個時候,知道了某種設計方法,那就可以把你看過的圖都變成你的 LOGO 了。這個 logo 也是我偶然看到的一張狗狗的照片。然后就有了把它做成這風格 logo 的想法。

圖片

我們先繪制這只小狗的頭部(身體的形態(tài),是不是要按照這個照片來,完全取決于你,這邊我們先把頭部做出來)。

圖片

觀察照片狗各部分的形態(tài),盡可能用基礎形狀去代替。頭部其實是比較簡單的,我們先暫且擱置一邊。接下來,我們來繪制身體。這邊我沒有按照原圖的形態(tài)去繪制,覺得太過于安靜了,就去網(wǎng)上找了一些,正在行動中的狗狗的形態(tài)。

圖片

可以多找?guī)讖垍⒖紙D,方便我們結合調(diào)整。

圖片圖片

因為這個小狗的頭部是比較可愛的,跟這個身子搭配不了。這個時候,我們可以先調(diào)整身子與頭部的大小比例,看看效果。

圖片

身子這么一縮小,是不是順眼多了?比例調(diào)整到和諧以后,我們再開始優(yōu)化身子的部件。( 如果描邊模式你覺得很難觀察,那我們先把它轉成填充模式)

圖片

通過觀察找出問題,再優(yōu)化。因為狗狗走路的時候,走路的后腿是一前一后,所以會有層次關系。

圖片

我們可以嘗試把初版的圖形,把一條腿與身子切割開,這樣處理就可以很好地表達前后層級關系。

優(yōu)化處理以后,大概的形態(tài)已經(jīng)完成了??赡艽蠖鄶?shù)同學到這步,就直接上色排版了。想做出有意思的圖形,姿態(tài)、動作是很關鍵的?,F(xiàn)在這個圖形,其實直接上色是沒什么問題的,但是就會少了那么一點靈性。

要讓你的圖形生動有趣,有時候只需要把你畫的動物/人物,頭部與四肢做一點點角度,就會比之前的生動很多。比如這個小狗,我們把它的頭,往上抬一下,就會比之前的更靈性了。

圖片

最后,我們可以調(diào)整確定好的圖形形態(tài),比例關系與加點陰影細節(jié)。

圖片

我們在小狗的眼睛旁邊加個星星讓它 wink~ (誰會拒絕對你wink的小狗呢)增加調(diào)皮可愛屬性。大功告成~

圖片

 

 

圖片

設計來源于生活~善于發(fā)現(xiàn), 善于聯(lián)想。

這個 LOGO,可能 80 后,90 后,看著都比較有親切感,還記得小時候玩過的鐵皮青蛙么~

圖片

話不多說,放參考圖~

圖片

老辦法,先用基礎形狀把青蛙的大概輪廓拼出來。我們在繪制初版輪廓的時候,先觀察你的這個參考圖片,比例,形態(tài)的長短是不是符合你心中所要,如果不適合,那你可以先復制一個圖片,再對它進行拉伸/縮短。

圖片

就像這個青蛙的圖,我就覺得身子有點過長了,咱們把它壓縮一下。

圖片

圖片

觀察我們勾勒出來的形狀,青蛙的后腿,稍顯長了一點兒,我們先調(diào)整后腿的長度調(diào)整腿與身體的比例關系。簡化線段,能平滑的地方,我們刪減錨點青蛙的肚子部分,我們用半圓去剪切規(guī)整盡量讓我們繪制出來的大輪廓飽滿得到這個輪廓以后,我們再繪制青蛙的蛙掌我們還是多搜一點青蛙的圖片,去觀察蛙掌的結構。

圖片

蛙掌還是比較容易概括的,只要幾個矩形跟圓點就可以繪制出來了我們把繪制好的蛙掌,跟上面繪制好的大體形態(tài)拼起來。

圖片

調(diào)整各個部件距離,適當加點圓角添補未繪制的眼球。

圖片

四肢與身子加點切割,增加部件結構清晰度。

加上我們的旋轉小開關,最后為了防止青蛙左下側的空間太大,會造成圖形不穩(wěn),我們加一條矩形橫線,去平衡版面。

 

 

圖片

生活當中的很多美好的事物,都值得我們?nèi)ビ涗?,或許哪一天你沒有靈感的時候,它就能變成你筆下的一個 LOGO,一張插畫~

技法都不是最難的,需要你去歸納總結它。說了這么多,動筆試一試吧!行動才是硬道理!

 

原文地址:胡曉波工作室(公眾號)

作者:Douta

轉載請注明:學UI網(wǎng)》5 個案例帶你領悟幾何面性趣味LOGO

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

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

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

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

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



漸變色的正確打開方式

seo達人



一、以下幾種情況適合使用漸變色 

1、想把背景當作天空 

如果你的背景有起到天空的作用,哪怕不是真實的天空,那么用漸變色都是比較合適的,通常是用單色漸變(色相一樣,只是明度和飽和度有變化,比如藍色到淺藍色)或類比色漸變(比如藍色到青色)。并且,即使是類比色漸變也是要有明度上的變化,因為這樣的漸變可以讓畫面更透氣、更有空間感。

圖片

圖片

圖片

圖片

▲漸變的方向通常是模擬真實天空的光感,即上暗下亮,或者中間亮四周暗。

 

2、想表現(xiàn)小清新的調(diào)性 

小清新在平面設計中通常是指視覺感受是自然、淡雅、靜謐的畫面,這樣的畫面其色調(diào)應該是柔和的,所以很適合使用漸變色,而且一般是使用明度比較高、飽和度比較低的單色漸變或類比色漸變,在飲料、護膚品、家居等品牌的設計中比較常見。

圖片

圖片

圖片

圖片

圖片

 

3、想表現(xiàn)科技感

諸如3C產(chǎn)品,或與AI、互聯(lián)網(wǎng)相關的品牌、產(chǎn)品或者主題,其設計通常需要表現(xiàn)出科技感,而科技感是一種怎樣的視覺感受呢?這類視覺有一個共同的特點就是光感很強,比如下面這些作品。

圖片

圖片

圖片

圖片

圖片

所以為了表現(xiàn)比較強的科技感,畫面中通常少不了使用漸變色,因為只有漸變色才能呈現(xiàn)出鮮明的明暗對比、強烈的光感,而且這種漸變色的明暗跨度會比較大,色彩的飽和度會比較高。色相以冷色為主,比如藍色、青色、綠色、紫色。

 

4、想表現(xiàn)食欲

食品海報最基礎的要求就是要能表現(xiàn)出食物的食欲,讓人看了會有想吃、想喝的欲望。我們都知道,在色彩中,暖色是比較有食欲的,比如紅色、橙色、黃色、粉色等。另外,如果是夏季,藍色綠色會給人清爽的感覺,所以也能加強食欲(通常指飲料、雪糕類產(chǎn)品)。

吃是人類的生理需求,也是最基礎的需求,所以對于食欲的表現(xiàn)肯定要樸實有親和力,漸變色就具有這樣的特質。而且食物的色彩通常也是漸變色,所以使用漸變色作為背景可以與實物圖片形成呼應。

圖片

圖片

圖片

圖片

圖片

 

食欲強的漸變色具有以下特點:

a.明度不會太低;

b.飽和度不會太高;

c.明度對比不會太大;

d.以單色漸變和類比色漸變?yōu)橹鳌?

 

二、怎樣的漸變色更有高級感? 

確實,很多視覺高大上的設計都喜歡用純色,但并不代表漸變色就表現(xiàn)不出高級感,蔥爺研究了大量奢侈品牌、中高端品牌的視覺設計,發(fā)現(xiàn)高端的漸變色通常具有以下幾個特點:

 

1、使用單色漸變

大家都知道高端的設計在色彩使用上是很克制的,即顏色的數(shù)量會比較少,而單色漸變相比多色漸變就要克制一些。

圖片

圖片

 

2、顏色明度較低

高端的設計喜歡用黑色作為背景,想必你也發(fā)現(xiàn)了,因為黑色具有高貴、神秘、厚重的感覺,所以容易營造出高端的氛圍,除了黑色,其他顏色的深色也具有這些特點,比如深藍、深紅、深綠等等。所以漸變色要想高端,整體的顏色也要偏暗,比如黑色到灰色漸變,深藍到藍色漸變等等。

圖片

圖片

圖片

 

3、顏色來源于畫面中的圖片

如果版面中是有圖片的,比如產(chǎn)品圖片或人物圖片,那么從圖片中吸取顏色用于填充背景,會使背景與圖片關聯(lián)性更強、更融合,畫面的效果會更和諧,否則容易出現(xiàn)生硬、拼湊的感覺。

圖片

圖片

圖片

 

三、時尚的漸變色有什么特點?  

自從進入數(shù)字營銷時代,各個品類的設計都在逐漸互聯(lián)網(wǎng)化,相比傳統(tǒng)營銷,數(shù)字營銷更講究年輕化和個性化,所以在視覺上通常也要求更潮、更時尚,特別是對于一些針對年輕人的品牌。時尚類的視覺設計中也很喜歡用漸變色,其特點如下:

 

1、顏色的飽和度和亮度較高

注意,亮度不是明度,亮度高不代表明度高,但是明度肯定不會太低(在ps拾色器面板中觀看HSB模式中的B值)。飽和度和亮度較高的漸變色更鮮艷、更張揚,更符合年輕人和互聯(lián)網(wǎng)的特性。

圖片

圖片

圖片

 

2、顏色對比較強

比如對比色和補色漸變是時尚類設計很喜歡用的顏色,這樣的顏色反差比較大,視覺沖擊力也更強。

圖片

圖片

圖片

 

3、幾種效果比較時尚的漸變

a.炫彩漸變

圖片

圖片

圖片

b.鐳射漸變

圖片

c.彌散漸變

圖片

圖片

圖片

 

 

圖片

最后,蔥爺有必要提醒一下,色彩只是影響設計調(diào)性的其中一個因素,調(diào)性不是一個漸變色就能左右的,想要表達出正確的調(diào)性,還需要有圖片素材、構圖、字體、排版、設計風格等多個因素的配合,否則你的色彩用得再好也起不了多大的作用。

 

原文地址:蔥爺(公眾號)

作者:蔥爺

轉載請注明:學UI網(wǎng)》漸變色的正確打開方式

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

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

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

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

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



畫圖標,我是認真的

seo達人

正文 

對于 UI 設計師來說,圖標設計的能力至關重要,也是提升感官體驗的重要方向。對于一些初入行業(yè)的設計師,習慣下載圖標素材應付項目需求,失去了動手能力培養(yǎng)的機會。甚至一些多年工作經(jīng)驗的老司機,依然還擺脫不了使用素材的習慣,稍微復雜一點的技法就會難以駕馭。

 

一、切勿過度素材化 

對于初入職場的設計師來說,偶爾運用素材可以理解,但是一定要學會拆解和分析,掌握還原設計的技巧和能力。

圖片

過度依賴素材容易導致思維固化,不愿意去創(chuàng)造,失去創(chuàng)新設計的能力;也容易導致眼高手低,有想法卻實現(xiàn)不出來,極容易萌生放棄的念頭;素材拼貼形式完成的設計,在規(guī)范性和細節(jié)性上面也是大打折扣的,導致設計作品不夠精細化和規(guī)范性。

圖片

 

二、刻意練習強化

我們需要通過刻意練習來提升圖標設計的能力,根據(jù)一萬小時定律,技法層面的提升都是通過反復磨練達到的。

圖片

 

三、擺脫素材才能規(guī)范化

圖標設計從素材習慣過度到設計動手其實很容易,但是從會畫到畫好之間看似簡單卻很難掌握。擺脫素材是圖標設計規(guī)范化的關鍵,然后再統(tǒng)一風格和細節(jié)規(guī)范,掌握數(shù)字化關系也是需要我們反復研究的課題。

圖片

比如以這個天氣圖標來舉例,相信很多同學都能畫出來,但是有沒有把控里面的數(shù)字關系就難說了。通過以下示意圖我們可以看出來,大圓和小圓之間的比例關系是 4:3,而間距的關系也與圓形的大小有著數(shù)字關系。這些數(shù)字關系可以使得圖標設計更加精細化,也能引導我們?nèi)ヌ剿髟O計背后量化的標準和關系。

圖片

 

四、質感的層層強化

當我們繪制完圖標的造型之后,運用合適的風格進行質感強化也是尤為重要的。這里我先運用其中的一個風格來完成,選擇了磨砂玻璃質感的效果。為了質感和層級關系更加明顯,這里單獨對局部進行了光影強化和邊界處理,看看以下步驟拆解圖感受一下。

圖片

備注:運用的軟件功能是背景模糊,Sketch 或者 Figma 等軟件皆可實現(xiàn)。

 

五、延展界面場景

為了進一步強化圖標練習,延展了一個簡單的界面場景,一個由宮格布局組合成的界面設計。為了填充所需的內(nèi)容,先把之前的一些圖標作品放進去占個位置。雖然都是質感一類的圖標,但是由于透視、配色、風格和細節(jié)規(guī)范等不一致,整體還是存在一定的排斥感。

圖片

 

六、根據(jù)界面環(huán)境重新調(diào)整

由于界面設計屬于深色主題,之前練習的天氣圖標放入場景中顯得過于突出,而且玻璃質感的通透性沒有得到很好的發(fā)揮。于是根據(jù)界面環(huán)境對天氣圖標進行了重新調(diào)整,以深色關系調(diào)整了云朵部分,針對太陽的配色和尺寸比例也進行了調(diào)整,如以下效果圖。

圖片

 

七、延續(xù)風格補全設計

以調(diào)整后的天氣圖標作為風格規(guī)范,延續(xù)了其它業(yè)務場景的圖標設計,在透視關系、細節(jié)規(guī)范、配色比例和光影效果等方面進行了直接延續(xù)。在光影方向上面選擇了縱向區(qū)分,左邊三個選擇左上角打光,右邊三個選擇右上角打光。(當然也可以統(tǒng)一一個方向設置光影)

圖片

 
 

八、統(tǒng)一性還是差異化

完成的整體設計視覺風格雖然比較統(tǒng)一,但是也有一些問題存在。圖標之間缺少差異化,過度統(tǒng)一容易視覺疲勞,于是在統(tǒng)一性和差異化上面開始糾結了。

圖片

為了既保障圖標設計表達的統(tǒng)一性,又能形成視覺感的差異化,做出了調(diào)整配色關系的決定。根據(jù)天氣圖標的配色關系延續(xù)出了其它色系,看看最終的效果如何。

圖片

 

你喜歡哪一版?

關于統(tǒng)一性和差異化因人而異,在朋友圈征集意見也是各有差異,那么你會喜歡哪一版呢?歡迎留言區(qū)一起互動交流。

圖片

 

原文地址:黑馬家族(公眾號)

作者:黑馬青年

轉載請注明:學UI網(wǎng)》畫圖標,我是認真的

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

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

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

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

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



最常見的7個配色問題,如何解決?

seo達人

色彩搭配對于平面設計有著非常重要的意義,但很多設計師會忽視它的重要性,他們可能會去刻意練習版式設計、字體設計、軟件等等,卻不愿在色彩搭配上花多一點時間,所以很多設計作品都會有色彩搭配的問題,最常見的有顏色太灰、太臟、太亂等等,今天蔥爺用幾個案例來給大家分享一下,如何解決7個常見的色彩搭配問題。

 

一、顏色調(diào)性不對

色彩的調(diào)性會直接影響到整件設計作品的調(diào)性,調(diào)性對了才能傳遞出正確的情感和信息,而要想使你的配色在調(diào)性上不跑偏,首先你得了解不同的色彩和色彩組合分別具有怎樣的視覺感受;還要深刻理解、分析你的品牌、產(chǎn)品、設計主題應該是什么樣的調(diào)性。這些都可以通過閱覽大量的作品、觀察身邊的事物總結出來。

圖片

下圖一個手工家居品牌的海報,產(chǎn)品是一個草綠色的編織花盆,標題是:大自然的色彩。根據(jù)上面這些信息,我們大概能判斷出該海報的配色應該要有自然、簡約、安靜、輕松的感覺。但下圖的顏色整體偏暗,而且中間的紅色圓形與背景色和產(chǎn)品對比太強,所以視覺上并沒有自然、輕松的感覺。

圖片

在調(diào)整后的方案中我使用了產(chǎn)品的類比色組合,即綠色、青色、黃色,

圖片

而且把背景色的明度提高了,飽和度降低了。

圖片

圖片

注:拾色器面板中的HSB分別代表顏色的色相、飽和度、亮度值。

最終的顏色搭配效果更和諧、更符合產(chǎn)品和文案的調(diào)性。

圖片

 

 

二、顏色太灰

顏色太灰通常是因為顏色的飽和度和亮度偏低,再加上顏色之間的對比不夠強所導致的。比如下圖是一本服裝畫冊的目錄設計,版面中的色彩取自圖片中的粉紅色與綠色,設計師應該想通過這組對比色表現(xiàn)出時尚的感覺,但是最終的配色效果有點太灰了。

圖片

圖片

對于這種問題還是比較好解決的,我們只要選中目前的顏色然后打開拾色器面板,然后把顏色的S值(飽和度)或B值(亮度)提高一點就好,在調(diào)整數(shù)值時要觀察實際的顏色效果,直到得到最滿意的效果為止,如果飽和度或亮度過高,會導致顏色太重或太爆。

圖片

圖片

圖片

 

 

三、顏色太爆(刺眼)

與顏色太灰相反,還有很多設計師在配色時會出現(xiàn)太爆的情況,顏色太爆通常是因為顏色的飽和度和亮度過高導致的,但并不是說各顏色的飽和度和亮度值都很高,組合在一起就一定會很爆,還跟顏色的色相、顏色面積占比、顏色與圖片的組合效果、是否與產(chǎn)品調(diào)性相符等相關??傊?,整件設計作品在視覺上要比較舒適,而不是辣眼睛。

比如下圖是一張食品海報,背景用了一個大紅色,突出價格的圓形色塊使用了一個熒光綠,這兩個顏色的飽和度值和亮度值都是100,雖然這兩個顏色都來自畫面中的食物圖片,但圖片中的顏色其飽和度和亮度值都沒這么高,所以這種色彩組合方式會讓人感覺背景比主體還要突出,產(chǎn)品與背景不夠融合。

圖片

圖片

另外,背景上的文字全部使用白色也會加強這種爆的感覺,似乎所有的顏色都在爭著跑到最前面來,缺乏層次。

對于這種情況,我們則需要把它的飽和度適當降低,比較穩(wěn)妥的做法是拾取圖片中的顏色。把圖片復制一層,然后選擇濾鏡-像素化-馬賽克,選擇一個合適的參數(shù),就能得到上圖的效果。把原圖中的紅色和綠色用圖片中的紅色和綠色替換,然后把標題和副標題的顏色改為暗紅色,這種“爆”的感覺就立馬消失了,如果背景使用一點點漸變效果,那么與圖片的融合性會更好。

圖片

圖片

 

 

四、顏色太花(太多)

顏色太花通常是因為顏色太多、且顏色跨度較大,主次不明顯,比如下面這則促銷海報,顏色有七種,除了黃色是背景色面積最大以外,其他顏色的面積都差不多。設計師之所以用這么多色彩是想讓不停的促銷信息能有清晰的區(qū)隔,但實際上這些信息通過排版以后已經(jīng)非常清晰了,所以沒必要再通過不同顏色來進行區(qū)隔。

圖片

其實,把這些不同套餐的色塊統(tǒng)一成一個顏色,個別關鍵字、詞用一個顏色突出就好。另外用黃色作為背景色太過傳統(tǒng),而且與中國移動的調(diào)性不是很契合,所以改成了玫紅色的對比色-藍色,這也是中國移動的品牌色。

圖片

圖片

最終,效果變得更時尚了,雖然總共的顏色只有三種,但是并不單調(diào),而且也不會顯得花和亂。

 

 

五、太舊

現(xiàn)在大部分的品牌都開始年輕化,而且營銷傳播也都互聯(lián)網(wǎng)化,所以我們在做設計的時候要盡量時尚一些,特別是那些主要針對年輕人的品牌或產(chǎn)品。

下面這則中國移動促銷海報宣傳的內(nèi)容就是針對年輕人的4G套餐,但設計的調(diào)性并不時尚,主要是因為配色有點舊。雖然是以紅藍這組對比色作為主色,但是背景色的明度很高、飽和度很低;并且里面用到了大量的單色漸變,這些配色的方式比較柔和,缺乏時尚感。

圖片

在優(yōu)化后的方案中,首先我把背景色的飽和度提高了一些,把之前的單色漸變改成了純色,并使用了近幾年比較流行的鐳射漸變和熒光色,顏色的對比和視覺沖擊力更強,風格更獨特,整體的調(diào)性也變得更加時尚。

圖片

圖片

 

 

六、顏色太碎

顏色太碎會有一種凌亂的感覺,造成這種問題的原因是把一種或幾種比較跳躍的顏色,呈點狀且很分散(不連續(xù)、不集中)的分布在版面的各個部分,比如下圖的海報,設計師想用粉色突出所有他認為比較重要的詞、句或者元素,結果造成了顏色很碎的效果。

圖片

這種啥都想突出的配色方式除了在視覺上會讓畫面看起來很亂以外,也會使得版面沒有重點,因為重點太多了。

上圖的產(chǎn)品是一款進口的兒童健康食品,設計調(diào)性應該偏向中高端,所以用色應該更加克制,這種很碎的色彩搭配方式就更不合適了。我們在使用色彩突出某些關鍵信息時,盡量突出句子而不是某個字詞,或者通過色塊的方式突出整段文字(字數(shù)不是特別多的情況下)。另外,如果僅僅是為了區(qū)隔信息,那么不同信息的顏色只要有比較小的差別就好了,不需要用對比非常強烈的顏色來做區(qū)隔,否則會破壞畫面的統(tǒng)一性。

圖片

圖片

紅色和綠色在白色背景上都比較跳躍,調(diào)性很難高端,所以我把主要色彩改成了紅色和金色(金色來自包裝和logo)。 
 

七、太臟

顏色臟主要是因為顏色明度和亮度太低,顏色處理不合理,以及暗色中的細節(jié)多且不清晰所造成的。下圖這個banner設計,背景色很暗,且很多地方處理不合理,比如天空的顏色沒有地面的顏色亮,在昏暗的天空中加鏡頭光暈。另外左邊的人物完全壓暗與背景融為一體也顯得很臟,右邊人物的重影除了讓畫面變得更臟以外,并沒有其他意義。

圖片

針對這些問題我調(diào)整了兩個方案,方案一是在保持原圖明暗的基礎上,提亮了天空、壓暗了地面,并把背景的圖層混合樣式從正片疊底轉為柔光,透明度降到70%,左邊人物進行了適當?shù)奶崃粒蛊涓逦?、更立體。去掉了不合理的素材,比如鏡頭光暈和右邊模特的重影。中間的斜色塊和標題填充了一個飽和度較高的藍色,與深色背景形成鮮明的對比。

圖片

圖片

 

通過這一系列的調(diào)整,整個畫面就變得干凈了很多,而且保留了之前的氛圍。而如果想有更明顯的改變,可以放棄這種很暗的背景,比如像下圖方案二這樣,把整體的顏色都提亮,效果會更時尚、更干凈。

圖片

圖片

 

 

圖片

色彩搭配也沒有固定的標準,但有幾個原則必須遵守:

? 要傳遞正確的調(diào)性;

? 視覺上要舒適;

? 能夠方便內(nèi)容的閱讀和理解,提高傳播效率;

? 能建立品牌區(qū)隔,形成一定的個性。

常見的色彩搭配問題還有很多,以后有機會蔥爺再做補充吧。

 

原文地址:蔥爺(公眾號)

作者:蔥爺

轉載請注明:學UI網(wǎng)》最常見的7個配色問題,如何解決?

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

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

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

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

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



B端營銷創(chuàng)意|數(shù)字藏品能否成為B端業(yè)務力爆發(fā)的新介質?

seo達人


圖片

品牌價值“藏品化”的可能性

通過對阿里云用戶調(diào)研發(fā)現(xiàn),數(shù)字藏品這項技術有著廣泛的用戶認知基礎,有91%的阿里云用戶對阿里云推出數(shù)字藏品感興趣,其中81%的用戶比較感興趣及非常感興趣,40%的用戶曾經(jīng)購買過數(shù)字藏品。這項結論讓設計師們非常興奮,這就意味著利用數(shù)字藏品傳遞阿里云品牌價值存在確實的可行性。

圖片

 

 

圖片

致敬里程碑 

設計師和業(yè)務團隊就數(shù)字藏品的設計方向進行了多輪溝通和論證,以阿里云飛天5K紀念碑為表現(xiàn)形態(tài)的思路脫穎而出。

出發(fā)點是設計師們想借此項目重塑營銷品牌心智,回到“為了無法計算的價值”阿里云品牌主張,用“飛天5K紀念碑”這個開發(fā)者心中的圖騰,在網(wǎng)站上進行數(shù)字藏品與任務平臺的聯(lián)動,通過創(chuàng)意與品牌為業(yè)務帶來用戶增長價值。

圖片

回溯歷史,阿里云飛天5K是阿里云計算技術發(fā)展的一個里程碑,飛天5K集群上線是中國云計算最值得紀念的時刻,代表了中國云計算技術人勇敢追夢、追求極致的理想主義精神,其在用戶心中的意義不亞于一次成功的“登月”,這種寄托已經(jīng)成為阿里云品牌的核心資產(chǎn)之一。

圖片

圖片

圖片

圖片

圖片

因此選擇云計算開發(fā)者的精神圖騰——“飛天5K紀念碑”作為創(chuàng)意原型,進行數(shù)字藏品的設計,進一步拉進與用戶的距離,同時能在開發(fā)者圈層中打造心智,營造傳播聲量,鏈接阿里云品牌與用戶間的情感共鳴。阿里云首款數(shù)字藏品讓用戶充滿期待,用戶關注的將不僅是藏品的使用價值或增值價值,更多的是一種不可替代的情緒價值

圖片

 

圖片

 

 

圖片

業(yè)務目標的自然融入

 破圈裂變組合拳

在整體方案設計上,團隊將拉新的核心目標和飛天5K數(shù)字藏品做了深度結合,利用「阿里云IP品牌價值+首發(fā)造勢+大促氛圍+精準的種子用戶裂變+所見即所得的虛擬權益」的超強組合拳,構建了完整的爆點傳播鏈帶來規(guī)?;略鲇脩簦瓿闪艘淮纬晒Φ钠迫L試。

 多端聯(lián)動引發(fā)爆點

通過所見即所得的虛擬權益,突破用戶預期,引發(fā)了活動參與用戶通過微信群、朋友圈、微博、論壇等各種平臺的自傳播,形成穩(wěn)定裂變鏈條,吸引更多玩家參與。同時官方通過阿里云App、官方微博、鯨探App、鯨探小程序形成流量矩陣為活動背書,引爆活動傳播。

圖片

用戶因情感的喚醒,通過數(shù)字藏品活動自然的完成了對阿里云產(chǎn)品的了解,并在主會場產(chǎn)品力彰顯、爆款價格吸引下,成為了阿里云新用戶,幫助業(yè)務完美的完成了既定目標?;顒觾H僅上線6天即完成一萬份數(shù)字藏品的發(fā)放,首購ROI達到58,同比上一次奧運小寶的拉新活動提升230%。

 

 

圖片

未來之路 

數(shù)字藏品未來將成為阿里云傳遞品牌價值的重要載體,更多承載了中國云市場情感的作品將定期與用戶見面,逐步形成阿里云獨有的云數(shù)字藏品矩陣,賦能云業(yè)務的發(fā)展。

 

原文地址:阿里云設計中心(公眾號)

作者: 阿里云設計中心

轉載請注明:學UI網(wǎng)》B端營銷創(chuàng)意|數(shù)字藏品能否成為B端業(yè)務力爆發(fā)的新介質?

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

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

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

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

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



日歷

鏈接

個人資料

藍藍設計的小編 http://sillybuy.com

存檔