国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

前面我們聊了《數(shù)據(jù)可視化為什么偏愛(ài)FUI》和《FUI-圖形化設(shè)計(jì)》，今天我們要聊一下FUI中一個(gè)非常實(shí)用的設(shè)計(jì)技巧——光感設(shè)計(jì)。

光感設(shè)計(jì)作為FUI最實(shí)用的設(shè)計(jì)技巧之一，不單單在視覺(jué)上能夠幫助界面快速的提升視覺(jué)效果，同時(shí)也能夠幫助產(chǎn)品優(yōu)化信息層級(jí)，聚焦用戶(hù)目光，提升用戶(hù)的專(zhuān)注力。

接下來(lái)我們就聊一下關(guān)于FUI的光感設(shè)計(jì)的定義、優(yōu)勢(shì)以及一些實(shí)用的小技巧。如果對(duì) FUI 還沒(méi)有清晰認(rèn)識(shí)的小伙伴可以查看我之前的文章，這樣更加有利于理解你本篇文章。

• 《數(shù)據(jù)可視化為什么偏愛(ài)FUI》
• 《酷炫的 FUI 圖形設(shè)計(jì)》

目錄

1. 光感設(shè)計(jì)的效果
2. 光感的定義
3. 光感設(shè)計(jì)的優(yōu)勢(shì)
4. 光感設(shè)計(jì)的常見(jiàn)形式
5. 總結(jié)

一、光感設(shè)計(jì)的效果

眼睛為實(shí)耳聽(tīng)為虛，首先我們通過(guò)一些作品先從視覺(jué)上來(lái)認(rèn)識(shí)光感設(shè)計(jì)：

《乘客》

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

通過(guò)以上設(shè)計(jì)作品，我們可以看到具有光感設(shè)計(jì)的界面，在視覺(jué)上層次更加豐富，畫(huà)面更加飽滿(mǎn)。

從產(chǎn)品和交互的角度來(lái)看，具有光感的按鈕控件代表了當(dāng)前的運(yùn)行的狀態(tài)，能夠迅速直接地告訴用戶(hù)當(dāng)前任務(wù)的操作狀態(tài)。

二、光感的定義

1. 光感定義

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

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

根據(jù)光感的特性，在視覺(jué)設(shè)計(jì)中，如果我們希望光或由光構(gòu)成的某種信息容易為人們感覺(jué)到，就應(yīng)提高它與背景的差別，增大光的面積；反之，如果不希望如此則應(yīng)相反處理。

問(wèn)題的關(guān)鍵不在于光的絕對(duì)亮度，而是與“背景的對(duì)比度”和“光的面積”。

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

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

1. 視覺(jué)

1. 豐富視覺(jué)層級(jí)，為畫(huà)面增添細(xì)節(jié)

例如下圖，視覺(jué)中心處凸起的地圖模塊通過(guò)添加光效使地圖細(xì)看起來(lái)視覺(jué)層級(jí)豐富，細(xì)節(jié)飽滿(mǎn)，光效的彌散過(guò)度使冷暖色調(diào)看起來(lái)自然和諧。

圖片源自 HUDS+GUIS

2. 畫(huà)面飽滿(mǎn)，立體感強(qiáng)

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

圖片源自 HUDS+GUIS

3. 視覺(jué)重心突出，吸引用戶(hù)的目光。

光感的特性之一就是與背景之間的對(duì)比度，通過(guò)光感設(shè)計(jì)可以有效地將主體物或視覺(jué)中心與周邊的環(huán)境進(jìn)行區(qū)分，例如下圖：

圖片源自 HUDS+GUIS

2. 交互

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

《蜘蛛俠歸來(lái)》

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

四、光感設(shè)計(jì)的常見(jiàn)形式

光感設(shè)計(jì)的最常見(jiàn)的四種設(shè)計(jì)形式就是：漸變、光暈、色階、高光。每一種光感設(shè)計(jì)樣式都有不同的效果，接下來(lái)我們通過(guò)實(shí)際的例子來(lái)看一下每一種光效的視覺(jué)效果。

1. 漸變

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

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

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

2. 光暈

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

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

3. 色階

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

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

4. 高光

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

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

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

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

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

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

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

例如下圖：

五、總結(jié)

我們了解到光感的定義：光感是指僅能夠感知光亮卻不能清晰的辨別。

光感設(shè)計(jì)的優(yōu)勢(shì)：視覺(jué)層級(jí)豐富，細(xì)節(jié)豐富；畫(huà)面飽滿(mǎn)，立體感強(qiáng)，視覺(jué)重心突出，吸引用戶(hù)的目光。在交互上能夠清晰地告訴用戶(hù)當(dāng)前的狀態(tài)，進(jìn)行實(shí)時(shí)信息反饋。

光感效果確實(shí)能為界面增添亮點(diǎn)，但切勿頻繁使用，否則界面全都是發(fā)光點(diǎn)，界面也將毫無(wú)亮點(diǎn)。

本文由 @ 姜正 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議