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

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

二、Bejson

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

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

三、iLoveIMG

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

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

四、TinyPNG

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

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

五、圖好快

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

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

六、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 是一個(gè)簡(jiǎn)單的在線 GIF 制作工具和用于基本動(dòng)畫 GIF 編輯的工具集。在這里，您可以創(chuàng)建、調(diào)整大小、裁剪、反轉(zhuǎn)、優(yōu)化和對(duì) GIF 應(yīng)用一些效果。

九、ilovepdf

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

在線處理PDF工具站。

十、易轉(zhuǎn)換

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

免費(fèi)好用的文件轉(zhuǎn)換工具。

十一、Aconvert

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

Aconvert.com是一個(gè)寶藏工具站，可以在線轉(zhuǎn)換各類PDF，文檔，電子書，圖像，圖標(biāo)，視頻，音頻等格式和壓縮文件，非常方便。

十二、bigjpg

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

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

十三、removeby

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

自動(dòng)摳圖神器，上傳圖片一鍵摳圖。

十四、搞定摳圖

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

搞定設(shè)計(jì)出品的AI智能口摳圖工具，還有好多好玩的可以去探索。

十五、圖象

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

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

原文地址：小六可視化設(shè)計(jì)（公眾號(hào)）

作者：Mr小六

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》效率必備！這15個(gè)圖像處理網(wǎng)站你收藏了嗎？

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(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)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

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

定義

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

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

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

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

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

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

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

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

業(yè)務(wù)

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

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

頁面

在整個(gè)內(nèi)容創(chuàng)作平臺(tái)當(dāng)中，會(huì)有很多非常典型的頁面，作為設(shè)計(jì)師，我們就來看看典型頁面如何下手

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

在內(nèi)容創(chuàng)作平臺(tái)當(dāng)中，必須要提供的功能便是內(nèi)容上傳，因?yàn)闊o論是文章、又或是視頻，都需要?jiǎng)?chuàng)作者進(jìn)行上傳、編輯
因此作為設(shè)計(jì)師，我們首先應(yīng)該關(guān)注的便是這個(gè)內(nèi)容編輯頁的使用體驗(yàn)

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

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

Block 編輯器：畢竟我是深度 Notion+飛書的用戶，如果對(duì)這個(gè)感興趣，可以去到文末留言，我們之后單獨(dú)出一篇文章來講

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

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

https://www.wangeditor.com/

https://summernote.org/

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

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

因此你會(huì)發(fā)現(xiàn)，內(nèi)容編輯部分，大家的功能都會(huì)比較趨同（因?yàn)闊o論是 視頻還是文字媒介，因?yàn)榍芭_(tái)系統(tǒng)對(duì)于內(nèi)容的要求都基本一致，因此如果想要了解前后臺(tái)系統(tǒng)的邏輯關(guān)系，其實(shí)可以從基礎(chǔ)的內(nèi)容創(chuàng)作平臺(tái)入手去做分析）

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

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

3、其他頁面

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

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

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

原文鏈接：CE青年Youthce（公眾號(hào)）

作者：CE青年

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》內(nèi)容創(chuàng)作平臺(tái)的解析與分享

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(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)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

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

原文地址：黑馬家族（公眾號(hào)）

作者：黑馬青年

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》【UI設(shè)計(jì)作品總結(jié)】DJI 農(nóng)業(yè)無人機(jī) APP 頁面重構(gòu)

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(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)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

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

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

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

分析Alex Krugli的畫風(fēng)特點(diǎn) 

我真是一個(gè)善于總結(jié)的好學(xué)生，下面開始畫起來吧~

本次的主題我想以建筑為主元素，構(gòu)建一個(gè)室外場(chǎng)景畫面，首先我們可以去百度或者花瓣搜索些漂亮的房子照片，找找靈感，關(guān)鍵詞可以是歐式建筑，復(fù)古小房子等。

搜索建筑素材圖片時(shí)，需要注意兩點(diǎn)：

1、幾何感強(qiáng)

2、設(shè)計(jì)感強(qiáng)的建筑做參考

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

圖片來源網(wǎng)絡(luò)，僅供賞析

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

從顏色分區(qū)可以看出畫面分了四個(gè)層次，圖中的紅色區(qū)域是畫面的前景，藍(lán)色是中前景，綠色是中后景，紫色是遠(yuǎn)景。

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

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

2. 拉開建筑大小等級(jí)，近大遠(yuǎn)小。（如下圖中近似造型的建筑在畫面中大小變化）

3. 豐富建筑剪影形，高矮、粗細(xì)、方圓相互結(jié)合。

4. 近景的造型更復(fù)雜，背景簡(jiǎn)化處理。

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

• 主體建筑物的繪制

1. 抓住照片中建筑物最有特點(diǎn)的幾個(gè)地方

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

• 遠(yuǎn)景建筑群的繪制

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

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

• 其他元素的繪制

1. 汽車的繪制：

② 用幾何圖形進(jìn)行概括和演變，車輛主要用到的幾何形是半圓角矩形和圓形。

2. 郵筒的繪制：同樣也是對(duì)照片進(jìn)行幾何圖形的概括，主要用到了半圓形、矩形以及圓形。

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

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

4. 人物：人物在畫面中也是起到點(diǎn)綴的作用，面積不大，不需要五官的刻畫，畫出基本動(dòng)態(tài)即可。

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

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

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

2. 在草圖的基礎(chǔ)上，用AI把線稿畫出來。

最后再檢查一下畫面的疏密關(guān)系，線稿就完成了。

1. 梳理黑白關(guān)系

因?yàn)楫嬅娴膶哟伪容^多，我們可以先確定下畫面的黑白關(guān)系，場(chǎng)景設(shè)定是夜晚的場(chǎng)景，整體氛圍可以是暗色調(diào)，中景區(qū)域的顏色亮暗對(duì)比較強(qiáng)，是重點(diǎn)突出的地方，背景統(tǒng)一在暗調(diào)里，不做太強(qiáng)烈的亮暗對(duì)比，起襯托作用，前景壓暗，穩(wěn)定畫面效果。

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

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

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

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

• 建筑的刻畫

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

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

同理，遠(yuǎn)景建筑也用同樣的步驟刻畫。

1. 加明暗：遠(yuǎn)景的建筑塊面顏色對(duì)比可以減弱，相對(duì)更加統(tǒng)一。

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

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

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

高飽和度的顏色能形成強(qiáng)烈的對(duì)比。在暗黑模式下使用高飽和度會(huì)很刺眼，給用戶很不好的體驗(yàn)。暗黑模式一般在晚上使用，因此對(duì)設(shè)計(jì)師來說，需要做的是讓整個(gè)配色相對(duì)柔和，讓用戶感到放松?；诖?，在設(shè)計(jì)的時(shí)候應(yīng)該將飽和度限制在200-500之間。

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

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

在同一個(gè)界面，最理想的狀態(tài)是只有一個(gè)最主要的關(guān)鍵按鈕和緊跟著的次要按鈕。這是因?yàn)槿绻粋€(gè)界面上有太多這種行動(dòng)按鈕（CTA）按鈕，會(huì)讓關(guān)鍵操作淹沒在這些按鈕中，讓用戶不知所措。

三、簡(jiǎn)化不必要的動(dòng)詞

沒必要在菜單上增加動(dòng)詞和短語，用最少的信息寫清楚功能就足夠讓用戶理解了。所以，在菜單設(shè)計(jì)上要盡量避免增加無關(guān)緊要的詞，這樣才不會(huì)影響用戶體驗(yàn)。

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

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

五、不要混用圖標(biāo)風(fēng)格

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

這里也跟大家分享2個(gè)我自己常用的figma圖標(biāo)庫：

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

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

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

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

七、新手引導(dǎo)多給用戶自主權(quán)

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

八、在圖片上增加疊加層

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

九、信息部分露出

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

十、拆分大段文字

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

十一、Z字形原理

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

十二、擴(kuò)大可點(diǎn)擊范圍

擴(kuò)大點(diǎn)擊區(qū)域，維護(hù)像按鈕、單選、多選等控件的響應(yīng)尺寸，如果你設(shè)計(jì)的點(diǎn)擊區(qū)域太小會(huì)讓用戶點(diǎn)擊困難，造成流失。

十三、盡量使用簡(jiǎn)潔的圖標(biāo)

避免使用花俏和俗氣的圖標(biāo)，它們會(huì)讓整個(gè)設(shè)計(jì)顯得非常不成熟，同時(shí)也是很難理解的。用上更簡(jiǎn)單的圖標(biāo)形式，會(huì)讓界面更高級(jí)。（彩云注：當(dāng)然越簡(jiǎn)單的圖標(biāo)其實(shí)想畫出彩會(huì)更難，另外也需要區(qū)分不同的場(chǎng)景，像一些運(yùn)營類的圖標(biāo)可能會(huì)為了活動(dòng)氛圍做的相對(duì)風(fēng)格化一些。）

十四、正確的文案表達(dá)

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

十五、考慮手勢(shì)操作

輕敲和點(diǎn)擊有時(shí)候很累人，可能不如使用滑動(dòng)、拖拽等手勢(shì)操作，這些操作會(huì)讓界面更簡(jiǎn)潔并且也能順利地完成既定任務(wù)。

十六、展示部分文案

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

十七、接近法則

”鄰近的物體往往被視為是同一組內(nèi)容“。有時(shí)候?yàn)榱税褍?nèi)容區(qū)分開的更清晰，嘗試用線對(duì)相關(guān)內(nèi)容進(jìn)行分組。（彩云注：其實(shí)有留白和不同顏色做區(qū)分也是可以的，建議根據(jù)自己的設(shè)計(jì)風(fēng)格和具體內(nèi)容來定）

十八、文字控件可視化

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

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

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

二十、系列位置效應(yīng)

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

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

在設(shè)計(jì)任何體驗(yàn)時(shí)，點(diǎn)擊次數(shù)都是非常重要的指標(biāo)。統(tǒng)計(jì)用戶需要點(diǎn)擊多少次才能完成他的目標(biāo)，額外的點(diǎn)擊會(huì)減慢整個(gè)操作過程。簡(jiǎn)化過程，自然體驗(yàn)就會(huì)更好，所以盡可能的減少點(diǎn)擊次數(shù)。（彩云注：下面的案例，增加可點(diǎn)擊符號(hào)也可以減少用戶思考的時(shí)間。）

二十二、少即是多

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

二十三、留白定義重點(diǎn)

留白在設(shè)計(jì)中非常重要，太少或者沒有留白會(huì)使得設(shè)計(jì)非常混亂。明智地使用留白可以明確地強(qiáng)調(diào)內(nèi)容。

二十四、別讓用戶閑著

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

原文地址：彩云譯設(shè)計(jì)（公眾號(hào)）

作者：彩云Sky

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》用上這24個(gè)UI體驗(yàn)優(yōu)化經(jīng)驗(yàn)，果然做出來的設(shè)計(jì)更高級(jí)了！

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(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)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

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

寫在前面 

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

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

1. 圖形的大概造型參考

簡(jiǎn)單來說就是找圖形實(shí)物/繪制造型參考圖，這跟大多數(shù)風(fēng)格 logo 的設(shè)計(jì)步驟是一致的。

2. 根據(jù)造型，用基礎(chǔ)幾何圖形表達(dá)

基礎(chǔ)幾何圖形，其實(shí)就是很常見的「矩形、圓形、三角形、菱形」等等，你找的一張?jiān)煨停M量用工具自帶的「矩形」「三角形」「圓形」去代替所有的部件。

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

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

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

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

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

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

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

1. 眼睛

2. 頭上的小耳朵

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

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

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

把基礎(chǔ)組件繪制出來，再把它們組合成一個(gè)初版造型。

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

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

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

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

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

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

這個(gè) logo 的誕生是之前我去吃海底撈的時(shí)候，服務(wù)員小姐姐送了我一個(gè)小玩具。當(dāng)時(shí)看到，一陣狂喜 ，這不是很適合拿來做 LOGO 么!

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

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

嘗試找出可以刪除的錨點(diǎn)，讓形狀以最少的線段表達(dá)出最清晰的輪廓；在這一步的修改，做了比較大的改變，不僅改變了圖形的原始造型，也修改了側(cè)面頭部的角度(因?yàn)槿サ袅碎L開的嘴，所以把仰著的頭往下調(diào)整)。

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

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

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

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

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

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

初版造型出來以后，觀察一下發(fā)現(xiàn)是可行的。我們?cè)侔阉鼈?描邊)轉(zhuǎn)化成面性色塊，再觀察調(diào)整。

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

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

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

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

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

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

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

因?yàn)檫@個(gè)小狗的頭部是比較可愛的，跟這個(gè)身子搭配不了。這個(gè)時(shí)候，我們可以先調(diào)整身子與頭部的大小比例，看看效果。

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

通過觀察找出問題，再優(yōu)化。因?yàn)楣饭纷呗返臅r(shí)候，走路的后腿是一前一后，所以會(huì)有層次關(guān)系。

我們可以嘗試把初版的圖形，把一條腿與身子切割開，這樣處理就可以很好地表達(dá)前后層級(jí)關(guān)系。

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

要讓你的圖形生動(dòng)有趣，有時(shí)候只需要把你畫的動(dòng)物/人物，頭部與四肢做一點(diǎn)點(diǎn)角度，就會(huì)比之前的生動(dòng)很多。比如這個(gè)小狗，我們把它的頭，往上抬一下，就會(huì)比之前的更靈性了。

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

我們?cè)谛」返难劬ε赃吋觽€(gè)星星讓它 wink~ (誰會(huì)拒絕對(duì)你wink的小狗呢)增加調(diào)皮可愛屬性。大功告成~

設(shè)計(jì)來源于生活~善于發(fā)現(xiàn)， 善于聯(lián)想。

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

老辦法，先用基礎(chǔ)形狀把青蛙的大概輪廓拼出來。我們?cè)诶L制初版輪廓的時(shí)候，先觀察你的這個(gè)參考圖片，比例，形態(tài)的長短是不是符合你心中所要，如果不適合，那你可以先復(fù)制一個(gè)圖片，再對(duì)它進(jìn)行拉伸/縮短。

就像這個(gè)青蛙的圖，我就覺得身子有點(diǎn)過長了，咱們把它壓縮一下。

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

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

調(diào)整各個(gè)部件距離，適當(dāng)加點(diǎn)圓角添補(bǔ)未繪制的眼球。

四肢與身子加點(diǎn)切割，增加部件結(jié)構(gòu)清晰度。

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

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

技法都不是最難的，需要你去歸納總結(jié)它。說了這么多，動(dòng)筆試一試吧！行動(dòng)才是硬道理!

原文地址：胡曉波工作室（公眾號(hào)）

作者：Douta

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》5 個(gè)案例帶你領(lǐng)悟幾何面性趣味LOGO

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(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)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

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

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

1、想把背景當(dāng)作天空 

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

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

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

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

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

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

所以為了表現(xiàn)比較強(qiáng)的科技感，畫面中通常少不了使用漸變色，因?yàn)橹挥袧u變色才能呈現(xiàn)出鮮明的明暗對(duì)比、強(qiáng)烈的光感，而且這種漸變色的明暗跨度會(huì)比較大，色彩的飽和度會(huì)比較高。色相以冷色為主，比如藍(lán)色、青色、綠色、紫色。

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

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

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

食欲強(qiáng)的漸變色具有以下特點(diǎn)：

a.明度不會(huì)太低；

b.飽和度不會(huì)太高；

c.明度對(duì)比不會(huì)太大；

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

二、怎樣的漸變色更有高級(jí)感? 

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

1、使用單色漸變

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

2、顏色明度較低

高端的設(shè)計(jì)喜歡用黑色作為背景，想必你也發(fā)現(xiàn)了，因?yàn)楹谏哂懈哔F、神秘、厚重的感覺，所以容易營造出高端的氛圍，除了黑色，其他顏色的深色也具有這些特點(diǎn)，比如深藍(lán)、深紅、深綠等等。所以漸變色要想高端，整體的顏色也要偏暗，比如黑色到灰色漸變，深藍(lán)到藍(lán)色漸變等等。

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

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

三、時(shí)尚的漸變色有什么特點(diǎn)?  

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

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

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

2、顏色對(duì)比較強(qiáng)

比如對(duì)比色和補(bǔ)色漸變是時(shí)尚類設(shè)計(jì)很喜歡用的顏色，這樣的顏色反差比較大，視覺沖擊力也更強(qiáng)。

3、幾種效果比較時(shí)尚的漸變

a.炫彩漸變

b.鐳射漸變

c.彌散漸變

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

原文地址：蔥爺（公眾號(hào)）

作者：蔥爺

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》漸變色的正確打開方式

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(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)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

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

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

一、切勿過度素材化 

對(duì)于初入職場(chǎng)的設(shè)計(jì)師來說，偶爾運(yùn)用素材可以理解，但是一定要學(xué)會(huì)拆解和分析，掌握還原設(shè)計(jì)的技巧和能力。

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

二、刻意練習(xí)強(qiáng)化

我們需要通過刻意練習(xí)來提升圖標(biāo)設(shè)計(jì)的能力，根據(jù)一萬小時(shí)定律，技法層面的提升都是通過反復(fù)磨練達(dá)到的。

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

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

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

四、質(zhì)感的層層強(qiáng)化

當(dāng)我們繪制完圖標(biāo)的造型之后，運(yùn)用合適的風(fēng)格進(jìn)行質(zhì)感強(qiáng)化也是尤為重要的。這里我先運(yùn)用其中的一個(gè)風(fēng)格來完成，選擇了磨砂玻璃質(zhì)感的效果。為了質(zhì)感和層級(jí)關(guān)系更加明顯，這里單獨(dú)對(duì)局部進(jìn)行了光影強(qiáng)化和邊界處理，看看以下步驟拆解圖感受一下。

備注：運(yùn)用的軟件功能是背景模糊，Sketch 或者 Figma 等軟件皆可實(shí)現(xiàn)。

五、延展界面場(chǎng)景

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

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

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

七、延續(xù)風(fēng)格補(bǔ)全設(shè)計(jì)

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

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

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

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

你喜歡哪一版？

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

原文地址：黑馬家族（公眾號(hào)）

作者：黑馬青年

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》畫圖標(biāo)，我是認(rèn)真的

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(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)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

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

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

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

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

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

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

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

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

二、顏色太灰

顏色太灰通常是因?yàn)轭伾娘柡投群土炼绕?，再加上顏色之間的對(duì)比不夠強(qiáng)所導(dǎo)致的。比如下圖是一本服裝畫冊(cè)的目錄設(shè)計(jì)，版面中的色彩取自圖片中的粉紅色與綠色，設(shè)計(jì)師應(yīng)該想通過這組對(duì)比色表現(xiàn)出時(shí)尚的感覺，但是最終的配色效果有點(diǎn)太灰了。

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

三、顏色太爆(刺眼)

與顏色太灰相反，還有很多設(shè)計(jì)師在配色時(shí)會(huì)出現(xiàn)太爆的情況，顏色太爆通常是因?yàn)轭伾娘柡投群土炼冗^高導(dǎo)致的，但并不是說各顏色的飽和度和亮度值都很高，組合在一起就一定會(huì)很爆，還跟顏色的色相、顏色面積占比、顏色與圖片的組合效果、是否與產(chǎn)品調(diào)性相符等相關(guān)?？傊?，整件設(shè)計(jì)作品在視覺上要比較舒適，而不是辣眼睛。

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

另外，背景上的文字全部使用白色也會(huì)加強(qiáng)這種爆的感覺，似乎所有的顏色都在爭(zhēng)著跑到最前面來，缺乏層次。

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

四、顏色太花（太多）

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

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

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

五、太舊

現(xiàn)在大部分的品牌都開始年輕化，而且營銷傳播也都互聯(lián)網(wǎng)化，所以我們?cè)谧鲈O(shè)計(jì)的時(shí)候要盡量時(shí)尚一些，特別是那些主要針對(duì)年輕人的品牌或產(chǎn)品。

下面這則中國移動(dòng)促銷海報(bào)宣傳的內(nèi)容就是針對(duì)年輕人的4G套餐，但設(shè)計(jì)的調(diào)性并不時(shí)尚，主要是因?yàn)榕渖悬c(diǎn)舊。雖然是以紅藍(lán)這組對(duì)比色作為主色，但是背景色的明度很高、飽和度很低；并且里面用到了大量的單色漸變，這些配色的方式比較柔和，缺乏時(shí)尚感。

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

六、顏色太碎

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

這種啥都想突出的配色方式除了在視覺上會(huì)讓畫面看起來很亂以外，也會(huì)使得版面沒有重點(diǎn)，因?yàn)橹攸c(diǎn)太多了。

上圖的產(chǎn)品是一款進(jìn)口的兒童健康食品，設(shè)計(jì)調(diào)性應(yīng)該偏向中高端，所以用色應(yīng)該更加克制，這種很碎的色彩搭配方式就更不合適了。我們?cè)谑褂蒙释怀瞿承╆P(guān)鍵信息時(shí)，盡量突出句子而不是某個(gè)字詞，或者通過色塊的方式突出整段文字（字?jǐn)?shù)不是特別多的情況下）。另外，如果僅僅是為了區(qū)隔信息，那么不同信息的顏色只要有比較小的差別就好了，不需要用對(duì)比非常強(qiáng)烈的顏色來做區(qū)隔，否則會(huì)破壞畫面的統(tǒng)一性。

七、太臟

顏色臟主要是因?yàn)轭伾鞫群土炼忍?，顏色處理不合理，以及暗色中的?xì)節(jié)多且不清晰所造成的。下圖這個(gè)banner設(shè)計(jì)，背景色很暗，且很多地方處理不合理，比如天空的顏色沒有地面的顏色亮，在昏暗的天空中加鏡頭光暈。另外左邊的人物完全壓暗與背景融為一體也顯得很臟，右邊人物的重影除了讓畫面變得更臟以外，并沒有其他意義。

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

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

色彩搭配也沒有固定的標(biāo)準(zhǔn)，但有幾個(gè)原則必須遵守：

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

? 視覺上要舒適；

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

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

常見的色彩搭配問題還有很多，以后有機(jī)會(huì)蔥爺再做補(bǔ)充吧。

品牌價(jià)值“藏品化”的可能性

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

致敬里程碑 

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

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

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

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

業(yè)務(wù)目標(biāo)的自然融入

〇 破圈裂變組合拳

在整體方案設(shè)計(jì)上，團(tuán)隊(duì)將拉新的核心目標(biāo)和飛天5K數(shù)字藏品做了深度結(jié)合，利用「阿里云IP品牌價(jià)值+首發(fā)造勢(shì)+大促氛圍+精準(zhǔn)的種子用戶裂變+所見即所得的虛擬權(quán)益」的超強(qiáng)組合拳，構(gòu)建了完整的爆點(diǎn)傳播鏈，帶來規(guī)?；略鲇脩?，完成了一次成功的破圈嘗試。

〇 多端聯(lián)動(dòng)引發(fā)爆點(diǎn)

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

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

未來之路 

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

原文地址：阿里云設(shè)計(jì)中心（公眾號(hào)）

作者： 阿里云設(shè)計(jì)中心

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》B端營銷創(chuàng)意｜數(shù)字藏品能否成為B端業(yè)務(wù)力爆發(fā)的新介質(zhì)？

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(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)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

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