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

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

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

flex-wrap設(shè)置無法容納時，自動換行

justify-content 伸縮項目的排列方式

align-items 處理額外空間

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

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

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

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

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

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

flex-wrap
設(shè)置無法容納時，自動換行

值：
nowrap：不換行
wrap：自動換行
wrap-reverse：自動換行，方向和wrap相反

下圖為正常排序

使用wrap-reverse后縮小瀏覽器時:


justify-content
伸縮項目的排列方式

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

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

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


align-items
處理額外空間

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

align-self
處理額外空間

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

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à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è)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

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

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

拆解分類

拆解1、視覺面積的影響

拆解2、明度對比的影響

拆解3、色彩的影響

拆解4、視覺位置的影響

拆解5、豐富層度的影響

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

拆解1、視覺面積的影響

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

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

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

同粗細(xì)，同字號大小，一個是有文字底塊，一個沒有，這樣有文字底塊的視覺層級會比沒有文字底塊的視覺層級要高，因為有底塊相當(dāng)于為實(shí)面，這樣就比沒有文字底塊的層級要高了

同粗細(xì)，不同字號大小，這個不難理解，這個不存在實(shí)面虛面的概念了，因為都是一樣的粗細(xì)，但是這個格式塔大小不一樣，也就是說，格式塔越大的層級越高，字號越大的層級越高。

拆解2、明度對比的影響

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

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

拆解3、色彩的影響 

有色的視覺點(diǎn)總會比無色的視覺點(diǎn)更吸引人，因為色彩也是美術(shù)的一類，給沒有色彩的視覺上色是提升視覺體驗的一步。

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

拆解4、視覺位置的影響

給界面一個橫軸和縱軸，從橫軸的左邊到右邊起視覺層級逐漸減弱，從縱軸的上到下邊視覺層級逐漸減弱。這是因為用戶閱讀習(xí)慣的問題，人們習(xí)慣從左上方開始往右邊閱讀，然后慢慢的往下讀取信息。

拆解5、豐富層度的影響

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

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

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

拆解6、其他

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

圖片來源UIGREAT的作者JGM

總結(jié)

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

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

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

做了一個項目，有充值功能，充值方式為 微信和支付寶，效果如下：



代碼：

<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="請輸入金額" 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:活動]
"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('請輸入金額');
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('活動支付')
}
} 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>
支付寶方式：后臺會返回來一個form，然后提交form自動跳轉(zhuǎn)到支付寶支付頁面。

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



代碼：

<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è)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

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

界面配色

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

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

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

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

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

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

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

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

圖標(biāo)配色

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

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

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

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

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

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

配色中的主色或品牌色

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

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

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

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

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

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

不同顏色CMYK的色域范圍

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

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

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

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

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

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

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

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

1. CIE

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

2. RGB

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

3. CMYK

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

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

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

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

CMYK配色法使用技巧

CMYK 配色法就是兩種顏色的色值為 0%，但是黃色因為色域問題是由三色組成的（c值盡量小于10）。

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

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

總結(jié)

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

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