還記得此前的“藍(lán)黑白金裙”之爭嗎,？這個(gè)分歧源于我們的眼中用來分辨顏色的錐狀細(xì)胞的差異，而人機(jī)界面中“藍(lán)黑白金裙”之爭同樣存在，這是什么原因,？本文為你揭秘，并從色彩角度為大家介紹人機(jī)交互界面的設(shè)計(jì)。
我們這樣看著世界
人們都知道，把大象放進(jìn)冰箱需要三步,，而人眼把世界放進(jìn)大腦也可簡單分為三步：
1.眼球感應(yīng)到像（傳感器采集并轉(zhuǎn)換成數(shù)字信號(hào)）
2.轉(zhuǎn)成神經(jīng)信號(hào)傳到大腦（通過通訊系統(tǒng)將信號(hào)傳到處理器）
3.大腦處理并存放（處理器轉(zhuǎn)化成屏幕可顯示與存儲(chǔ)的格式）
圖1 人類視覺系統(tǒng)
所以，人眼開始看到的圖像格式由光信號(hào)轉(zhuǎn)化成了神經(jīng)中的電信號(hào)與化學(xué)信號(hào),，傳播格式已經(jīng)不同了,，同樣，機(jī)器也是要轉(zhuǎn)換的,。
一,、大腦里的格式——RGB圖像格式
首先，屏幕是由一個(gè)個(gè)像素點(diǎn)組成的,，里面絢麗的色彩也就只是出自像素點(diǎn)上紅（Red）,、綠（Green）、藍(lán)（Blue）三原色而已,，這種色彩的表示方法稱為RGB色彩空間表示（它也是多媒體計(jì)算機(jī)技術(shù)中用得最多的一種色彩空間表示方法）,，如下圖所示：
圖2 三基色圖
根據(jù)三基色原理，任意一種色光F都可以用不同分量的R,、G,、B三色相加混合而成。如公式1.1所示,。
公式 1.1 三基色原理
白光是多種光的混合,，所以當(dāng)三基色系數(shù)最大時(shí)為白色，零時(shí)為黑色,，而介于兩者間的就是世間百色了,。
每個(gè)像素點(diǎn)就像一個(gè)顏料盒，盒子越大,，裝的色彩種類越多,，則這個(gè)像素點(diǎn)能表達(dá)的色彩越豐富，而這個(gè)盒子的大小在電腦里叫做存儲(chǔ)空間,，調(diào)色的方式則是改變?nèi)?，下面的表越往下，所需要的存?chǔ)空間越大,，但每個(gè)像素點(diǎn)能描述的顏色越準(zhǔn)確,，屏幕的畫面也就越逼真。
RGB常見的格式如表1所示,，不用詳細(xì)看,，留著以后查就好。
表1 RGB常見格式
二,、眼球上的格式——YUV圖像格式
我們存儲(chǔ)的時(shí)候?yàn)榱斯?jié)約空間,、方便打包就用了亮度信號(hào)Y和兩個(gè)色差信號(hào)R－Y（紅色－亮度，即U）、B－Y（藍(lán)色－亮度,，即V）分別進(jìn)行編碼,，然后發(fā)出去，到了顯示終端再轉(zhuǎn)換回RGB格式,，這種色彩的表示方法就是所謂的YUV色彩空間表示,。
這時(shí)候也許你會(huì)問“咦，G（綠色）哪去了”,，其實(shí)兩種顏色加亮度也能通過算法大致表達(dá)出原本的顏色,，所以就算是融合進(jìn)R和B里了。
與RGB視頻信號(hào)傳輸相比,，YUV最大的優(yōu)點(diǎn)在于只需占用極少的帶寬（RGB要求三個(gè)獨(dú)立的視頻信號(hào)同時(shí)傳輸）,，兩種格式對(duì)帶寬的占用量噸位差異如下圖一般，RGB占用的帶寬要大得多,。
圖3 RGB格式帶寬比YUV高
難道只為了省點(diǎn)帶寬所以我們就義無反顧選擇了YUV格式嗎,？當(dāng)然不是！雖然低帶寬很關(guān)鍵,，但是色彩也至關(guān)重要,。
采用YUV色彩空間更重要在于它的亮度信號(hào)Y和色度信號(hào)U、V是分離的,，這樣分開的好處就是不但可以避免相互干擾,，還可以降低色度的采樣率而不會(huì)對(duì)圖像質(zhì)量影響太大。如果U,、V為零，就沒有顏色,，變成黑白電視了,。當(dāng)然，Y也是一個(gè)重要參數(shù),，其實(shí)平時(shí)我們看一個(gè)顏色深淺是很不一樣的,，而深淺取決于亮度Y，Y的影響如下圖示,。
圖4 明度變化圖
下面先介紹一種YUV格式,，大家觸類旁通。
YUV 4:2:2：
l“4”代表存放流碼中有4個(gè)Y,；
l“2”表示存放流碼中有2個(gè)U色差值,；
l第二個(gè)“2”表示存放流碼中有2個(gè)V色差值。
下面的四個(gè)像素為：[Y0 U0 V0] [Y1 U1 V1] [Y2 U2 V2] [Y3 U3 V3]
存放的碼流為：Y0 U0 Y1 V1 Y2 U2 Y3 V3
映射出像素點(diǎn)為：[Y0 U0 V1] [Y1 U0 V1] [Y2 U2 V3] [Y3 U2 V3]
圖5 YUV采樣網(wǎng)絡(luò)
上圖是YUV4:2:2的采樣網(wǎng)絡(luò),，燈光樣例（Y）用叉表示,，色度樣例（U、V）則用圈表示。每個(gè)點(diǎn)都有叉,，而圈只有一半,，所以這就是為什么上面的存放流碼四個(gè)Y齊全，而U,、V只有一半,。
三、交互界面的開發(fā)
圖像的開發(fā)主要是為了人機(jī)交互界面的美觀度,，目前人機(jī)交互界面的設(shè)計(jì)emWin與QT,。使用QT/E往往需要在微控制器上運(yùn)行嵌入式操作系統(tǒng)，因此對(duì)于MCU的性能有一定的要求,。除此之外,，若之前未接觸過QT/E，運(yùn)用起來將花費(fèi)一定的時(shí)間成本,。相比之下,，emWin更適合于快速、精簡UI的開發(fā),，但界面交互效果與美觀度較低,。
圖6 emWin_Demo
ZLG致遠(yuǎn)電子歷時(shí)12年開發(fā)的下一代嵌入式開發(fā)平臺(tái)AWorks平臺(tái)，內(nèi)部集成GUI編程框架——AWUI,，AWUI目前支持Qt和emWin,，用Designer編輯界面，用C++開發(fā)ViewModel/Model,，讓開發(fā)者無需學(xué)習(xí)Qt和emWin的API最終的應(yīng)用程序可以在Qt和emWin(要確保emWin上支持該控件)上運(yùn)行,。
基于AWUI，ZLG計(jì)劃年內(nèi)推出適用范圍更廣,、更好用的AWTK,。AWTK內(nèi)部包含豐富的GUI組件，突破性的開創(chuàng)“拖拽式”GUI編程模式,，大幅提升GUI編程的高效性,。搭配良好的設(shè)計(jì)架構(gòu)，兼具emWin低內(nèi)存流暢運(yùn)行與Qt高質(zhì)量界面效果等特點(diǎn),，保證交互界面的流暢性與運(yùn)行穩(wěn)定性,，使嵌入式UI開發(fā)將會(huì)以組件的方式集成于AWorks平臺(tái)中，可在該平臺(tái)下快速實(shí)現(xiàn)交互界面開發(fā),。
圖7 AWUI發(fā)展計(jì)劃
圖8 AWorks中的UI框架
ZLG致遠(yuǎn)電子M1052跨界核心板支持AWorks嵌入式開發(fā)平臺(tái),，既具備MPU的強(qiáng)勁處理性能，又兼顧MCU微控制器的簡單易用與實(shí)時(shí)性優(yōu)勢,！預(yù)裝AWorks 實(shí)時(shí)操作系統(tǒng),，面向智能硬件與工業(yè)物聯(lián)網(wǎng)方向應(yīng)用設(shè)計(jì),。
M335x-T工業(yè)核心板