如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

使用新版本的彈性伸縮布局
display使用彈性伸縮盒

direction容器盒內(nèi)元素的排列順序

flex-wrap設(shè)置無(wú)法容納時(shí)，自動(dòng)換行

justify-content 伸縮項(xiàng)目的排列方式

align-items 處理額外空間

align-self 單獨(dú)處理一個(gè)伸縮項(xiàng)目的額外空間

flex 控制伸縮容器的比例分配

order 設(shè)置伸縮項(xiàng)目出現(xiàn)的位置

dislpay
值：
flex 將容器盒作為塊級(jí)彈性伸縮盒顯示。
inline-flex：將容器盒作為內(nèi)聯(lián)級(jí)彈性伸縮盒顯示。
實(shí)際現(xiàn)實(shí)中 這兩個(gè)值沒區(qū)別。

direction
容器盒內(nèi)元素的排列順序

值：
row:從左到右排列
row-reverse：從右到左排列
column：從上倒下排列
column-reverse從下到上排列

flex-wrap
設(shè)置無(wú)法容納時(shí)，自動(dòng)換行

值：
nowrap：不換行
wrap：自動(dòng)換行
wrap-reverse：自動(dòng)換行，方向和wrap相反

下圖為正常排序

使用wrap-reverse后縮小瀏覽器時(shí):


justify-content
伸縮項(xiàng)目的排列方式

值：
flex-start：伸縮項(xiàng)目以起始點(diǎn)靠齊

flex-end：伸縮項(xiàng)目以結(jié)尾靠齊
center：以中心點(diǎn)靠齊
space-between：伸縮項(xiàng)目平均分布
space-around：同上但兩段保留一般的空間

實(shí)例：使用space-around的排列效果


align-items
處理額外空間

值：
flex-start：以頂部為基準(zhǔn)，清理底部的額外空間
flex-end：以底部為基準(zhǔn)，清理頂部的額外空間
center：以中間為基準(zhǔn)，清理上下部分的額外空間
baseline：以基線為基準(zhǔn)，清理額外的空間
stretch：伸縮項(xiàng)目填充整個(gè)容器，默認(rèn)值

align-self
處理額外空間

值：與align-items的值一樣，需要用nth-child（）設(shè)置某一個(gè)需要處理的伸縮項(xiàng)目
flex
設(shè)置伸縮項(xiàng)目分配比例

p:nth-child(1)
{
   flex: 1;
}

p:nth-child(2)
{
flex: 2;
}
 p:nth-child(3)
{

flex: 2;
}
p:nth-child(4)
{
flex: 1;
}

order
設(shè)置伸縮項(xiàng)目出現(xiàn)的位置

p:nth-child(1)
{
   order:2;
}

p:nth-child(2)
{
 order:3;
}
 p:nth-child(3)
{

 order:4;
}
p:nth-child(4)
{
 order:1;
}
--------------------- 
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

自從上一篇發(fā)文得到一些發(fā)表方向，以后決定以個(gè)人獨(dú)特的總結(jié)以及符合商業(yè)的思維邏輯來(lái)寫作設(shè)計(jì)拆解的相關(guān)文章教程，前期我還是按大類去詮釋我的整個(gè)想法，看看大家的反饋，如果理解門檻還是有很大障礙，我在后期的文章中會(huì)再將文章細(xì)化出來(lái)。

拆解分類

拆解1、視覺面積的影響

拆解2、明度對(duì)比的影響

拆解3、色彩的影響

拆解4、視覺位置的影響

拆解5、豐富層度的影響

拆解6、其他（浮層、常用點(diǎn)、角標(biāo)、動(dòng)效）

拆解1、視覺面積的影響

視覺面積越大層級(jí)越高，而且與比較層的面積倍數(shù)有關(guān)，參考層如果為1級(jí)，那比較層的等級(jí)是由和參考層的倍數(shù)有關(guān)，大一倍那就為2級(jí)，大兩倍那就是3級(jí)，依次類推。這是美術(shù)基礎(chǔ)中的近遠(yuǎn)的關(guān)系，越靠近的視覺點(diǎn)越大，越靠遠(yuǎn)的視覺點(diǎn)越遠(yuǎn)，這樣也很容易知道，越近獲得關(guān)注越高，越遠(yuǎn)越低。

界面舉例我們告一段落，這里再說(shuō)一下比較常遇到的文字視覺面積，這塊很容易被忽略，其實(shí)文字也是具有視覺面積的，而且有不同的視覺大小。接下來(lái)我會(huì)將所有可能性都拆解出來(lái)。

同字號(hào)大小，不同粗細(xì)層度的影響/文字的邊寬形成的格式塔大小就是文字面積，但不一樣的是，文字是線性結(jié)構(gòu)，所以他不是實(shí)面，而是虛面，所以它相對(duì)于實(shí)面來(lái)說(shuō)還是低一個(gè)等級(jí)，再說(shuō)回到粗細(xì)的層級(jí)比較，越粗的文字他是越靠近實(shí)面的，所以這就能判斷越粗的文字層級(jí)越高這個(gè)道理。

同粗細(xì)，同字號(hào)大小，一個(gè)是有文字底塊，一個(gè)沒有，這樣有文字底塊的視覺層級(jí)會(huì)比沒有文字底塊的視覺層級(jí)要高，因?yàn)橛械讐K相當(dāng)于為實(shí)面，這樣就比沒有文字底塊的層級(jí)要高了

同粗細(xì)，不同字號(hào)大小，這個(gè)不難理解，這個(gè)不存在實(shí)面虛面的概念了，因?yàn)槎际且粯拥拇旨?xì)，但是這個(gè)格式塔大小不一樣，也就是說(shuō)，格式塔越大的層級(jí)越高，字號(hào)越大的層級(jí)越高。

拆解2、明度對(duì)比的影響

明度對(duì)比越高的視覺點(diǎn)會(huì)比明度對(duì)比低的視覺點(diǎn)視覺層級(jí)要高，這里其實(shí)也是美術(shù)基礎(chǔ)中的空間的視覺差，越遠(yuǎn)的物體越模糊（對(duì)比?。浇奈矬w越清晰（對(duì)比大）。所以對(duì)比大的層級(jí)會(huì)比對(duì)比小的層級(jí)會(huì)高。（這里插一句，色相也是有明度的，不同的色相也是有不同明度解析，這個(gè)可以運(yùn)用到電商banner的配色上）

下面來(lái)看看文字和背景不同對(duì)比度對(duì)視覺層級(jí)的影響。我們將統(tǒng)一文字大小和粗細(xì)，背景為白色。

拆解3、色彩的影響 

有色的視覺點(diǎn)總會(huì)比無(wú)色的視覺點(diǎn)更吸引人，因?yàn)樯室彩敲佬g(shù)的一類，給沒有色彩的視覺上色是提升視覺體驗(yàn)的一步。

文字為例：同等大小同等粗細(xì)同等明度的字，有顏色的字體會(huì)有更大的關(guān)注點(diǎn)。

拆解4、視覺位置的影響

給界面一個(gè)橫軸和縱軸，從橫軸的左邊到右邊起視覺層級(jí)逐漸減弱，從縱軸的上到下邊視覺層級(jí)逐漸減弱。這是因?yàn)橛脩糸喿x習(xí)慣的問(wèn)題，人們習(xí)慣從左上方開始往右邊閱讀，然后慢慢的往下讀取信息。

拆解5、豐富層度的影響

豐富層度越高的視覺層級(jí)越高，豐富層度越高的點(diǎn)信息量越大，越需要花時(shí)間停留。

文字為例：設(shè)計(jì)過(guò)的字體豐富層度會(huì)比默認(rèn)字體高，所以有些需要強(qiáng)調(diào)的標(biāo)題或者banner上的字體都是有精心設(shè)計(jì)過(guò)，為了拉開于界面的層級(jí)。

界面為例：界面首頁(yè)中的banner是豐富層度最高，其次是金剛區(qū)，再是標(biāo)簽欄。

拆解6、其他

除了上訴的主要層級(jí)影響，還有其他一些特殊的影響，我這就說(shuō)兩三個(gè)子吧。一個(gè)呢是給模塊直接加投影，硬生生的造成前后層級(jí)。還有角標(biāo)的影響，在干凈的頁(yè)面中突然來(lái)個(gè)提示角標(biāo)，例如微信有消息時(shí)的小角標(biāo)。還一個(gè)就是用戶常用關(guān)鍵點(diǎn)，那個(gè)視覺層級(jí)整個(gè)產(chǎn)品中的最高層級(jí)，這個(gè)需要打破所有規(guī)則，這個(gè)是由用戶主動(dòng)選擇的視覺層級(jí)點(diǎn)，例如電商軟件的搜索框，不管這個(gè)搜索框大小如何，層級(jí)怎么低都行，但對(duì)于用戶進(jìn)來(lái)，第一個(gè)渴望的點(diǎn)就是這里，最后是動(dòng)效的影響，每個(gè)動(dòng)效就是一個(gè)互動(dòng)，動(dòng)的東西永遠(yuǎn)比靜止的東西有活力更加吸引人。

圖片來(lái)源UIGREAT的作者JGM

總結(jié)

視覺層級(jí)的梳理可以很大幅度的提升視覺規(guī)范和用戶體驗(yàn)，通過(guò)視覺層級(jí)的分析，可以從不同方面去詮釋復(fù)雜的頁(yè)面，也可以更好的去處理文本關(guān)系。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

做了一個(gè)項(xiàng)目，有充值功能，充值方式為 微信和支付寶，效果如下：



代碼：

<template>
<el-card class="box-card">
<ul class="msg-box">
<li>
<h4>我要充值</h4>
</li>
<li>
<h4 style="margin-bottom: 15px;">充值金額</h4>
<el-radio-group v-model="amountVal" @change="amountChange">
<el-radio border :label="''+ 100">充值100</el-radio>
<el-radio border :label="''+ 500">充值500</el-radio>
<el-radio border :label="''+ 1000">充值1000</el-radio>
<el-radio border :label="''+ 2000">充值2000</el-radio>
<el-radio border :label="''+ 5000">充值5000</el-radio>
<el-radio border :label="''">自定義</el-radio>
</el-radio-group>
</li>
<li>
<h4 style="margin-bottom: 15px;">充值方式</h4>
<el-radio-group v-model="rechargeParams.paymentType" @change="paymentTypeChange">
<el-radio border :label="''+ 0">微信</el-radio>
<el-radio border :label="''+ 1">支付寶</el-radio>
</el-radio-group>
</li>
<li>
<h4 style="margin-bottom: 15px;">充值金額</h4>
<el-input :disabled="disabled" clearable v-model="rechargeParams.totalAmt" placeholder="請(qǐng)輸入金額" style="width: 150px;"></el-input>
</li>
</ul>
<div style="text-align: center; margin-top: 30px;">
<el-button type="primary" @click="surePay">確認(rèn)支付</el-button>
</div>
</el-card>
</template>
 
<script>
export default {
data() {
return {
amountVal: '',
disabled: false,
//充值參數(shù)
rechargeParams: {
"totalAmt": '', //金額
"paymentType": "0", //支付方式[0:微信,1:支付寶,2:余額,3:活動(dòng)]
"transType": "0" //交易類型[0:充值,1:消費(fèi)]
}
}
},
methods: {
//充值金額
amountChange(val) {
this.rechargeParams.totalAmt = val;
if (val == '') {
this.disabled = false
} else {
this.disabled = true
}
},
//支付方式
paymentTypeChange(val) {
this.rechargeParams.paymentType = val
},
//確認(rèn)支付
async surePay() {
if (this.rechargeParams.totalAmt == '') {
this.$message.warning('請(qǐng)輸入金額');
return;
}
const res = await this.$http.post('orderInfo/createOrderInfo', this.rechargeParams)
const {
code,
msg,
result
} = res.data
if (code === '200') {
//支付方式跳轉(zhuǎn)
if (this.rechargeParams.paymentType == '0') {
this.$message.success('微信支付');
this.wechatPay(result);
} else if (this.rechargeParams.paymentType == '1') {
this.$message.success('支付寶支付')
const payDiv = document.getElementById('payDiv');
if (payDiv) {
document.body.removeChild(payDiv);
}
const div = document.createElement('div');
div.id = 'payDiv';
div.innerHTML = result;
document.body.appendChild(div);
document.getElementById('payDiv').getElementsByTagName('form')[0].submit();
} else if (this.rechargeParams.paymentType == '2') {
this.$message.success('余額支付成功');
this.$router.push({
name: 'order'
})
} else {
this.$message.success('活動(dòng)支付')
}
} else if (code === 401) {
this.$message.error(msg)
this.$router.push({
name: 'login'
})
} else {
this.$message.error(msg)
}
},
//微信支付
wechatPay(result) {
if (result) {
const orderParams = JSON.parse(result);
sessionStorage.qrurl = orderParams.qrurl;
sessionStorage.amt = orderParams.amt;
sessionStorage.returnUrl = orderParams.returnUrl;
sessionStorage.order_id = orderParams.order_id;
this.$router.push({
name: 'wechatPay'
})
}
}
}
}
</script>
 
<style scoped>
/* 信息列表樣式 */
.msg-box > li {
list-style: none;
border-bottom: 1px solid #c5c5c5;
padding: 20px 10px;
}
</style>
支付寶方式：后臺(tái)會(huì)返回來(lái)一個(gè)form，然后提交form自動(dòng)跳轉(zhuǎn)到支付寶支付頁(yè)面。

微信方式：需要自己根據(jù)后臺(tái)返回的url生成二維碼頁(yè)面，如圖所示：



代碼：

<template>
<div class="payBox">
<div class="img-logo">
<img src="http://img.huoxingbeidiao.com/public/WePayLogo.png" alt="">
</div>
<div class="info-box">
<div style="padding-bottom: 20px;">
<qrcode-vue :value="qrurl" :size="200" level="H"></qrcode-vue>
</div>
<img src="http://img.huoxingbeidiao.com/public/WePayInfo.png" alt="">
<p class="price">￥&nbsp;{{amt}}</p>
</div>
</div>
</template>
 
<script>
import QrcodeVue from 'qrcode.vue'
export default {
data() {
return {
amt: 0,
qrurl: '',
timer: null
}
},
components: {
QrcodeVue
},
methods: {
getOrderInfo() {
if (sessionStorage.qrurl && sessionStorage.amt) {
this.qrurl = sessionStorage.qrurl;
this.amt = sessionStorage.amt;
}
},
startLoop() {
this.timer = setInterval(() => {
this.isPaySuccess()
}, 3000)
},
async isPaySuccess() {
const orderId = sessionStorage.order_id;
const res = await this.$http.get('orderInfo/queryOrder?orderId=' + orderId)
const {
code,
msg,
resultList
} = res.data
if (code === '200') {
clearInterval(this.timer);
this.timer = null;
sessionStorage.removeItem('qrurl');
sessionStorage.removeItem('amt');
sessionStorage.removeItem('order_id');
sessionStorage.removeItem('returnUrl');
setTimeout(() => {
this.$router.push({
name: 'order'
})
}, 3000)
} else if (code === 401) {
clearInterval(this.timer);
this.timer = null;
sessionStorage.removeItem('qrurl');
sessionStorage.removeItem('amt');
sessionStorage.removeItem('order_id');
sessionStorage.removeItem('returnUrl');
this.$message.error(msg)
this.$router.push({
name: 'login'
})
} else {
 
}
}
},
created() {
this.getOrderInfo()
this.startLoop()
},
beforeDestroy() {
clearInterval(this.timer)
this.timer = null
}
}
</script>
 
<style scoped>
.payBox {
width: 1000px;
margin: 0 auto;
}
 
.payBox .img-logo {
padding: 20px 0;
text-align: center;
}
 
.payBox .img-logo img {
width: 180px;
}
 
.info-box {
padding: 60px 0;
border-top: 3px solid #F43B66;
-webkit-box-shadow: 0 0 32px 0 rgba(0, 0, 0, .18);
box-shadow: 0 0 32px 0 rgba(0, 0, 0, .18);
text-align: center;
}
 
.info-box .price {
color: #F43B66;
font-size: 40px;
padding-top: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #f1f1f1;
}
</style>
需要安裝qrcode.vue

npm install --save qrcode.vue  或  yarn add qrcode.vue
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

界面配色

2016 年玩追波的時(shí)候，有幸加入了 FreedomUnion 團(tuán)隊(duì)，當(dāng)時(shí)團(tuán)隊(duì)內(nèi)的小D（Dea_n）的界面漸變風(fēng)很受歡迎，他使用的顏色干凈、舒服、有感染力，很快形成了自己特有的設(shè)計(jì)風(fēng)格。

我被他的配色深深吸引了，特別想研究他的配色，就嘗試把他的作品在 PS 中打開，嘗試吸色，找找他經(jīng)常使用的配色范圍。為什么他配出來(lái)的顏色就很吸引人，長(zhǎng)時(shí)間看眼睛也不會(huì)太累？下面先欣賞一下小D（Dea_n）的設(shè)計(jì)作品。

作品已經(jīng)過(guò)了三年了，如果是一般的配色作品應(yīng)該看上去會(huì)有些過(guò)時(shí)，但是小D（Dea_n）的作品看上去并沒有，還是有不少作品的配色現(xiàn)在看上去也是很前衛(wèi)的。一起來(lái)看看我對(duì)小D（Dea_n）的大部分作品的吸色情況吧。

小D（Dea_n）的用色著實(shí)很大膽，很多都是貼邊用色。我上大學(xué)的時(shí)候，老師曾經(jīng)說(shuō)過(guò)盡量少用貼邊的顏色設(shè)計(jì)，包括灰色也可以使用帶有顏色傾向的高級(jí)灰。這下終于明白了為什么小D（Dea_n）的配色這么亮眼。

當(dāng)然我也有自己的小發(fā)現(xiàn)，我發(fā)現(xiàn)每個(gè)的作品主配色的 CMYK 值總會(huì)有兩種色值為 0%，比如C：0%、M：91%、Y：95%、K：0%。

難道只是偶然？當(dāng)時(shí)我也請(qǐng)教過(guò)小D（Dea_n）是否是刻意的，得到的答案是并沒有。然后小D（Dea_n）靠自己卓越的配色能力進(jìn)入小米 RIGO 設(shè)計(jì)團(tuán)隊(duì)。

當(dāng)小米 miui9 系統(tǒng)官網(wǎng)海報(bào)出來(lái)的時(shí)候，我把作品拿到 PS 一吸色，結(jié)果告訴我小D 一定參與了這個(gè)作品的配色設(shè)計(jì)。那為什么只有黃色的 CMYK 的色值是有 3 種顏色混合而成的。

難道僅靠著一點(diǎn)吸色就可以肯定 CMYK 配色方法的存在？CMYK 配色方法是不是只存在 UI 界面設(shè)計(jì)中？CMYK 配色方法可不可以增加它的擴(kuò)展性？CMYK 配色方法可以作為一種配色方法幫助設(shè)計(jì)師完成色彩搭配的工作嗎？帶著這些疑問(wèn)我繼續(xù)研究配色。

圖標(biāo)配色

我們來(lái)看一下「子彈短信」的應(yīng)用圖標(biāo)，它的用色基本符合之前說(shuō)的 CMYK 配色方法，當(dāng)然是不包含子彈上的深色調(diào)。漸漸地我發(fā)現(xiàn) CMYK 配色方法的路子越來(lái)越寬了。

Asher 是追波繪畫寫實(shí)圖標(biāo)的大神，他的寫實(shí)作品配色飽和度高，光影通透到位，需要很強(qiáng)的手繪功底。在他的設(shè)計(jì)作品中除去暗色調(diào)和深色調(diào)的部分，其他配色基本都使用了 CMYK 配色的技巧。

大廠系統(tǒng)規(guī)范

我們都知道 iOS 系統(tǒng)和 Android 系統(tǒng)，在他們各自的系統(tǒng)規(guī)范中對(duì)配色也有相應(yīng)的規(guī)范。我們提取兩大系統(tǒng)規(guī)范中的配色進(jìn)行吸色分析。

一頓猛吸之后，發(fā)現(xiàn)大廠系統(tǒng)規(guī)范的用色也基本符合 CMYK 配色方法的標(biāo)準(zhǔn)。

前段時(shí)間 IBM 重新定義了他們的設(shè)計(jì)語(yǔ)言，在產(chǎn)品配色中 Blye 60、Alert60、Alert40、Alert20、Alert50 等主要配色都符合 CMYK 配色的方法。

配色中的主色或品牌色

近期很多互聯(lián)網(wǎng)公司進(jìn)行了品牌改版，深亮色調(diào)到淺亮色調(diào)慢慢成為一種趨勢(shì)。

新版的 Facebook LOGO 從深藍(lán)色變?yōu)榱了{(lán)色，字體則繼續(xù)保持原樣。其中 CMY 值進(jìn)行適當(dāng)減少。除此之外，圖標(biāo)部分也由原來(lái)的圓角正方形變?yōu)閳A形，圖標(biāo)中的「f」從偏右的位置移到圓形的中間位置。

全球旅行者喜愛的民宿預(yù)訂平臺(tái) Airbnb 的品牌 logo 主色也符合 CMYK 配色的方法。和 2019 潘通流行色珊瑚橘很接近。

微信 7.0 版本使用了經(jīng)過(guò)調(diào)整的全新圖標(biāo)。圖標(biāo)除了原來(lái)綠色漸變的背板變淺外，兩個(gè)標(biāo)志性的對(duì)話氣泡與背景板的比例也做了相應(yīng)的調(diào)整。色彩的 CY 值減少了。調(diào)整后的新版圖標(biāo)除了空間感和符號(hào)感也更強(qiáng)外，整體變得「更輕」了。

在網(wǎng)易云音樂(lè) 6.0 版本中，對(duì)品牌 LOGO 再次進(jìn)行了調(diào)整。新版網(wǎng)易云音樂(lè)圖標(biāo)最明顯的變化為紅色的主色調(diào)，其次為「留聲機(jī)」和「音符」組合而成的圖形部分。

紅色較之前變得更加明亮，同時(shí)圖標(biāo)紅色背景由之前的純色改為輕微的紅色漸變填充。新的紅色著重考慮了用戶長(zhǎng)時(shí)間使用屏幕造成的視覺疲勞，采用比較「輕」的色彩可有效降低這種問(wèn)題。其中顏色 CMY 三種色值都有減少。圖形部分，新版圖形縮小了中間交叉部分的面積，頂部向右彎曲的弧形變大。整體效果較之前更加清晰，特別是在更小的應(yīng)用尺寸中，其展示的效果明顯要比之前的好。

不同顏色CMYK的色域范圍

看到上面的描述是不是特別想知道當(dāng) CMYK 中的兩個(gè)色值同時(shí)為 0 時(shí)，不同顏色的色域范圍？帶著這樣的想法，把紅橙黃綠青藍(lán)紫中每類選一種顏色進(jìn)行區(qū)域研究。打開 PS，在拾色器中截取不同顏色的色域范圍如下：

上圖白色區(qū)域就是在紅色 C 值為 0、K值為 0 時(shí)的色域范圍，范圍還是很小的。

黃色的 CMYK 色域很奇怪，在色相 38-58 度的黃色純度最高時(shí)，CMY 都有色值。也就是 PS 里面最純的黃色也是由 CMY 復(fù)色調(diào)和而成的。這也是為什么之前黃色使用時(shí)，CMYK 色值是由三種顏色混合而成的。

上圖白色區(qū)域就是在綠色 M 值為 0、K 值為 0 時(shí)的色域范圍，范圍開始慢慢變大，意味著綠色高飽和度的可使用顏色越來(lái)越多。

上圖白色區(qū)域就是在綠色 M 值為 0、K 值為 0 時(shí)的色域范圍，范圍也開始慢慢變大，大體范圍和綠色相當(dāng)。

上圖白色區(qū)域就是在藍(lán)色 Y 值為 0、K 值為 0 時(shí)的色域范圍，范圍應(yīng)該很大了。

上圖白色區(qū)域就是在紫色 Y 值為 0、K 值為 0 時(shí)的色域范圍，范圍和藍(lán)色的色域范圍相當(dāng)。

上圖白色區(qū)域就是在洋紅色 Y 值為 0、K 值為 0 時(shí)的色域范圍，范圍和藍(lán)色、紫色的色域范圍相當(dāng)。

1. CIE

從理論上講，可見光分布的色彩域就是 CIE 所表示的色域。在顏色感知的研究中，CIE 1931 XYZ 色彩空間（也叫做CIE 1931色彩空間）是其中一個(gè)采用數(shù)學(xué)方式來(lái)定義的色彩空間。從 CIE 圖中能看出冷色的區(qū)域遠(yuǎn)遠(yuǎn)大于暖色的區(qū)域。其中黃色和紅色的色域范圍相對(duì)較少，完全符合 PS 拾色器里面的色域范圍。

2. RGB

RGB 是計(jì)算機(jī)熒光屏顯示顏色的色彩方式，它們是由 R、G、B 三種發(fā)光質(zhì)通過(guò)加光混合產(chǎn)生的。RGB 色彩模式是一種加色模式，將紅光、綠光和藍(lán)光以不同的比例相加可以合成各種各樣的色光。R、G、B 三種顏色各能產(chǎn)生 2 的 8 次冪，即 256 級(jí)不同等級(jí)亮度的顏色。256*256*256 即 16777216種顏色。RGB 色彩模式主要用在電腦顯示器和電視上。RGB 色彩模式是繪圖軟件最常用的一種顏色模式。

3. CMYK

CMYK 由C（青）、M（品紅）、Y（黃）、K（黑）四色高飽和度的油墨以不同角度的網(wǎng)屏疊印形成復(fù)雜的彩色圖片。CMYK 色彩模式是一種顏料模式，它利用色料三原色混色原理，加上黑色油墨，形成各種各樣的色彩。

這種模式屬于相減混色模式，廣泛運(yùn)用于繪畫和印刷領(lǐng)域。CMYK 的色域范圍比 RGB 的色域范圍要小，某些色彩無(wú)法用 CMYK 油墨印刷出來(lái)。當(dāng)這些不能印刷出來(lái)的顏色出現(xiàn)時(shí)，在 PS 的「拾色器」對(duì)話框上會(huì)顯示一個(gè)帶感嘆號(hào)的三角形警告標(biāo)志，表示這些顏色超出 CMYK 的色域。即使設(shè)計(jì)了比較鮮艷的顏色，如果超出了 CMYK 印刷顏色的色域，計(jì)算機(jī)就會(huì)用一個(gè)接近它的較灰暗的顏色去頂替它?？梢姶蟛糠?CMYK 印刷顏色的色域小于 RGB 屏幕顏色的色域。

我們來(lái)仔細(xì)研究下 CIE 色域范圍，CMYK 當(dāng)中的黃色色域值有一小段超過(guò)了 RGM 的色域值。這就說(shuō)明黃色的更飽和的 CMYK 的原色和間色可能在 RGB 的范圍之外。

其他的我們還有一個(gè)方法去驗(yàn)證。就是在 PS 里面新建顏色模式為 CMYK 的文件，打開拾色器界面，把顏色調(diào)到右上角改變色相值的 0-360度 的范圍。色相在 38-58 度的黃色區(qū)域?qū)υ捒蛏喜粫?huì)顯示帶感嘆號(hào)的三角形警告標(biāo)志，表示黃色區(qū)域的 CMYK 色域值是超過(guò) RGB 的色域值。這就是為什么 iOS 系統(tǒng)規(guī)范中的黃色色值必須是三種顏色混合而成的。這時(shí)候特殊的顏色就需要特殊處理。

CMYK配色法使用技巧

CMYK 配色法就是兩種顏色的色值為 0%，但是黃色因?yàn)樯騿?wèn)題是由三色組成的（c值盡量小于10）。

色域集中在純色系的范圍，濁（灰）色系和暗色系除外。

界面的主色（純色系為主）、圖標(biāo)設(shè)計(jì)、品牌色（純色系為主）都可以使用 CMYK 配色法。

總結(jié)

CMYK 配色法目前多適用于互聯(lián)網(wǎng)產(chǎn)品，雖說(shuō)在創(chuàng)意上要敢于創(chuàng)新，但在實(shí)際的工作中還是需要理性地根據(jù)公司品牌和產(chǎn)品定位，合理地進(jìn)行色彩搭配。目前此方法沒有更多的理論依據(jù)支撐，如有疑問(wèn)希望多多交流。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。