FUI光感設計-一秒鐘提高頁面B格

0 評論 8326 瀏覽 39 收藏 10 分鐘

前面我們聊了《數據可視化為什么偏愛FUI》和《FUI-圖形化設計》,今天我們要聊一下FUI中一個非常實用的設計技巧——光感設計。

光感設計作為FUI最實用的設計技巧之一,不單單在視覺上能夠幫助界面快速的提升視覺效果,同時也能夠幫助產品優化信息層級,聚焦用戶目光,提升用戶的專注力。

接下來我們就聊一下關于FUI的光感設計的定義、優勢以及一些實用的小技巧。如果對 FUI 還沒有清晰認識的小伙伴可以查看我之前的文章,這樣更加有利于理解你本篇文章。

目錄

  1. 光感設計的效果
  2. 光感的定義
  3. 光感設計的優勢
  4. 光感設計的常見形式
  5. 總結

一、光感設計的效果

眼睛為實耳聽為虛,首先我們通過一些作品先從視覺上來認識光感設計:

《乘客》

《佛羅里達醫院未來愿景》

通過以上設計作品,我們可以看到具有光感設計的界面,在視覺上層次更加豐富,畫面更加飽滿。

從產品和交互的角度來看,具有光感的按鈕控件代表了當前的運行的狀態,能夠迅速直接地告訴用戶當前任務的操作狀態。

二、光感的定義

1. 光感定義

光感設計定義:光感是指僅能夠感知光亮卻不能清晰的辨別(摘自百度百科)。

圖片源自網絡

根據光感的特性,在視覺設計中,如果我們希望光或由光構成的某種信息容易為人們感覺到,就應提高它與背景的差別,增大光的面積;反之,如果不希望如此則應相反處理。

問題的關鍵不在于光的絕對亮度,而是與“背景的對比度”和“光的面積”。

三、光感設計的優勢

毫無疑問光感設計的視覺優勢,能夠讓平平無奇的設計組件看起來無比耀眼,為界面增添設計細節。接下來我們系統的認識一下光感的優勢:

1. 視覺

1. 豐富視覺層級,為畫面增添細節

例如下圖,視覺中心處凸起的地圖模塊通過添加光效使地圖細看起來視覺層級豐富,細節飽滿,光效的彌散過度使冷暖色調看起來自然和諧。

圖片源自 HUDS+GUIS

2. 畫面飽滿,立體感強

例如下圖,通過光效加強了視覺的層級感,均勻的呈放射性進行過度,讓圓環看起來更加立體飽滿。

圖片源自 HUDS+GUIS

3. 視覺重心突出,吸引用戶的目光。

光感的特性之一就是與背景之間的對比度,通過光感設計可以有效地將主體物或視覺中心與周邊的環境進行區分,例如下圖:

圖片源自 HUDS+GUIS

2. 交互

在交互上通過為設計控件增添光感,視覺上明顯的與周圍環境產生明顯的差異,能夠清晰的告訴用戶當前的狀態,進行實時的信息反饋。

《蜘蛛俠歸來》

例如在《蜘蛛俠歸來》中的戰衣界面設計,通過光感設計有效區分各個功能的狀態,對小蜘蛛進行實時的反饋。

四、光感設計的常見形式

光感設計的最常見的四種設計形式就是:漸變、光暈、色階、高光。每一種光感設計樣式都有不同的效果,接下來我們通過實際的例子來看一下每一種光效的視覺效果。

1. 漸變

設計樣式:以線性漸變和內發光為主。例如下圖:

設計技巧:色彩通常會選用與主體一直的同類色,明度偏高;我們會利用漸變工具,內發光工具來營造發光的效果。例如下圖:

步驟分析:通常情況下光效層會在內容層或者主體物的底部。例如下圖圖例所示:

2. 光暈

設計樣式:以外發光、徑向漸變為主,通過光向四周進行均勻的擴散。

設計技巧:色彩同業也是選擇同類色;工具上我們會頻繁的用到外發光、模糊工具和徑向漸變工具等等。

3. 色階

設計樣式:色階遞進,是通過色階的遞進或遞減模仿光源擴散的效果,你可以想像成光像漣漪一樣不算向四周擴散。

設計技巧:這里我們提一個小技巧,在色階的遞進或遞減通常按照10%的差異值進行調試。

4. 高光

設計樣式:營造高光點,通過對物體點綴高光,模擬物體的高光面,使其看起來像是置身一個三維空間當中。

設計技巧:利用徑向漸變工具,對橢圓進行壓扁,透明度之間的彌散的距離進行壓壓縮。

5. 組合式光感設計

單一設計設計形式現在往往無法滿足復雜的 FUI風格的設計,我們需要將多種設計技巧進行組合,就好比面對現在的市場環境單純的視覺UI設計師已經無法滿足市場需求了一樣。

我再次拿之前的進度條進行示例,首先我們看一下沒有光效的效果:

面對已經設計好的圖形設計,我們可以先觀察圖形的細節,思考那里可以進行添加光效,如何進行光效的過度等等。

例如我在設計這個進度條的時候,我首先是想到是可以講將圓形進行一個球面過度,異形的條形輪廓可以從左到右進行一個漸變過渡,最后在合適的位置點綴高光點,使其看起來像是處在一個具有光源環境的三維空間之內。

例如下圖:

五、總結

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

光感設計的優勢:視覺層級豐富,細節豐富;畫面飽滿,立體感強,視覺重心突出,吸引用戶的目光。在交互上能夠清晰地告訴用戶當前的狀態,進行實時信息反饋。

光感效果確實能為界面增添亮點,但切勿頻繁使用,否則界面全都是發光點,界面也將毫無亮點。

 

本文由 @ 姜正 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!