1.光感設(shè)計(jì)的效果

眼睛為實(shí)耳聽為虛，首先我們通過一些作品先從視覺上來認(rèn)識(shí)光感設(shè)計(jì)：

《乘客》

《佛羅里達(dá)醫(yī)院未來愿景》

通過以上設(shè)計(jì)作品我們可以看到具有光感設(shè)計(jì)的界面，在視覺上層次更加豐富，畫面更加飽滿，從產(chǎn)品和交互的角度來看，具有光感的按鈕控件代表了當(dāng)前的運(yùn)行的狀態(tài)，能夠迅速直接的告訴用戶當(dāng)前任務(wù)的操作狀態(tài)。

2.光感的定義

光感定義：

光感設(shè)計(jì)定義：光感是指僅能夠感知光亮卻不能清晰的辨別（摘自百度百科）。

圖片源自網(wǎng)絡(luò)

根據(jù)光感的特性，在視覺設(shè)計(jì)中，如果我們希望光或由光構(gòu)成的某種信息容易為人們感覺到，就應(yīng)提高它與背景的差別，增大光的面積，反之，如果不希望如此則應(yīng)相反處理。問題的關(guān)鍵不在于光的絕對(duì)亮度，而是與“背景的對(duì)比度”和“光的面積”。

3.光感設(shè)計(jì)的優(yōu)勢(shì)

毫無疑問光感設(shè)計(jì)的視覺優(yōu)勢(shì)，能夠讓平平無奇的設(shè)計(jì)組件看起來無比耀眼，為界面增添設(shè)計(jì)細(xì)節(jié)。接下來我們系統(tǒng)的認(rèn)識(shí)一下光感的優(yōu)勢(shì)：

A.視覺

1.豐富視覺層級(jí)，為畫面增添細(xì)節(jié)。例如下圖，視覺中心處凸起的地圖模塊通過添加光效使地圖細(xì)看起來視覺層級(jí)豐富，細(xì)節(jié)飽滿，光效的彌散過度使冷暖色調(diào)看起來自然和諧。

圖片源自 HUDS+GUIS

2.畫面飽滿，立體感強(qiáng)。例如下圖，通過光效加強(qiáng)了視覺的層級(jí)感，均勻的呈放射性進(jìn)行過度，讓圓環(huán)看起來更加立體飽滿。

圖片源自 HUDS+GUIS

3.視覺重心突出，吸引用戶的目光。光感的特性之一就是與背景之間的對(duì)比度，通過光感設(shè)計(jì)可以有效的將主體物或視覺中心與周邊的環(huán)境進(jìn)行區(qū)分，例如下圖：

圖片源自 HUDS+GUIS

B.交互

在交互上通過為設(shè)計(jì)控件增添光感，視覺上明顯的與周圍環(huán)境產(chǎn)生明顯的差異，能夠清晰的告訴用戶當(dāng)前的狀態(tài)，進(jìn)行實(shí)時(shí)的信息反饋。

《蜘蛛俠歸來》

例如在《蜘蛛俠歸來》中的戰(zhàn)衣界面設(shè)計(jì)，通過光感設(shè)計(jì)有效區(qū)分各個(gè)功能的狀態(tài)，對(duì)小蜘蛛進(jìn)行實(shí)時(shí)的反饋。

4.光感設(shè)計(jì)的常見形式

光感設(shè)計(jì)的最常見的四種設(shè)計(jì)形式就是：漸變、光暈、色階、高光。

每一種光感設(shè)計(jì)樣式都有不同的效果，接下來我們通過實(shí)際的例子來看一下每一種光效的視覺效果。

A.漸變

設(shè)計(jì)樣式：以線性漸變和內(nèi)發(fā)光為主。例如下圖：

設(shè)計(jì)技巧：色彩通常會(huì)選用與主體一直的同類色，明度偏高；我們會(huì)利用漸變工具，內(nèi)發(fā)光工具來營(yíng)造發(fā)光的效果。例如下圖：

步驟分析：通常情況下光效層會(huì)在內(nèi)容層或者主體物的底部。例如下圖圖例所示：

B.光暈

設(shè)計(jì)樣式：以外發(fā)光、徑向漸變?yōu)橹?，通過光向四周進(jìn)行均勻的擴(kuò)散

設(shè)計(jì)技巧：色彩同業(yè)也是選擇同類色；工具上我們會(huì)頻繁的用到外發(fā)光、模糊工具和徑向漸變工具等等。

C.色階

設(shè)計(jì)樣式：色階遞進(jìn)，是通過色階的遞進(jìn)或遞減模仿光源擴(kuò)散的效果，你可以想像成光像漣漪一樣不算向四周擴(kuò)散。

設(shè)計(jì)技巧：這里我們提一個(gè)小技巧，在色階的遞進(jìn)或遞減通常按照10%的差異值進(jìn)行調(diào)試。

D.高光

設(shè)計(jì)樣式：營(yíng)造高光點(diǎn)，通過對(duì)物體點(diǎn)綴高光，模擬物體的高光面，使其看起來像是置身一個(gè)三維空間當(dāng)中。

設(shè)計(jì)技巧：利用徑向漸變工具，對(duì)橢圓進(jìn)行壓扁，透明度之間的彌散的距離進(jìn)行壓壓縮。

E.組合式光感設(shè)計(jì)

單一設(shè)計(jì)設(shè)計(jì)形式現(xiàn)在往往無法滿足復(fù)雜的 FUI 風(fēng)格的設(shè)計(jì)，我們需要將多種設(shè)計(jì)技巧進(jìn)行組合，就好比面對(duì)現(xiàn)在的市場(chǎng)環(huán)境單純的視覺UI設(shè)計(jì)師已經(jīng)無法滿足市場(chǎng)需求了一樣。

我再次拿之前的進(jìn)度條進(jìn)行示例，首先我們看一下沒有光效的效果：

面對(duì)已經(jīng)設(shè)計(jì)好的圖形設(shè)計(jì)，我們可以先觀察圖形的細(xì)節(jié)，思考那里可以進(jìn)行添加光效，如何進(jìn)行光效的過度等等。

例如我在設(shè)計(jì)這個(gè)進(jìn)度條的時(shí)候，我首先是想到是可以講將圓形進(jìn)行一個(gè)球面過度，異形的條形輪廓可以從左到右進(jìn)行一個(gè)漸變過渡，最后在合適的位置點(diǎn)綴高光點(diǎn)，使其看起來像是處在一個(gè)具有光源環(huán)境的三維空間之內(nèi)。例如下圖：

5.總結(jié)

我們了解到光感的定義：光感是指僅能夠感知光亮卻不能清晰的辨別；光感設(shè)計(jì)的優(yōu)勢(shì)：視覺層級(jí)豐富，細(xì)節(jié)豐富；畫面飽滿，立體感強(qiáng)，視覺重心突出，吸引用戶的目光以及在交互上能夠清晰的告訴用戶當(dāng)前的狀態(tài)，進(jìn)行實(shí)時(shí)的信息反饋。光感效果確實(shí)能為界面增添亮點(diǎn)，但切勿頻繁使用，否則界面全都是發(fā)光點(diǎn)，界面也將毫無亮點(diǎn)。

原創(chuàng)： 姜正? ? ?公眾號(hào)：海鹽社?