設計資訊:動態界面的未來?設計與自然環境同步的用户界面美學

語言: CN / TW / HK

UI & UX

Article:2022/07/22

研究表明, 的功能不僅僅是照亮我們的環境,它們也 對我們的健康和幸福有直接影響 。光對 我們的睡眠、認知、晝夜節律有生物影響,也對我們的情緒、抑鬱值和認知表現有心理影響。

瞭解如何 在數字界面設計中實現這些效果的細微差別 ,可能會 有助於設計出改善我們健康和福祉的界面美學

思辨性探索

光的視覺效果,如形狀,強度,對比度和陰影通常在數字界面設計中表達和探索, 但只能與用户的環境隔離 。這種推測性探索的前提是為用户界面創建一個概念模型,以 促進與用户環境中的燈光同步 的美學。

基於對光影的理論理解,這種思辨性的探索 着眼於自然環境中的這些物理現象如何動態地影響用户界面,並重新思考環境如何成為數字項目美學的一部分。 其目的是就這種相互作用進行討論,並進一步提高我們對它們的潛在健康益處的理解。

瞭解自然環境中的光影

燈光在材料上的相互作用會產生反射和陰影。直接放置在陽光下的材料會產生更強的反射和更明顯的陰影。在陽光透過雲層擴散或在建築環境中反射時發生的自然環境照明下,由此產生的反射和材料上的陰影也是環境光。

在材料設計指南中,谷歌強調 需要虛擬光來照亮數字設備的用户界面 。這些虛擬光的形式是“關鍵光”,它能產生更清晰、有方向性的陰影,稱為“關鍵陰影”,而“環境光”從各個角度出現,形成擴散的、柔和的陰影,稱為“環境陰影”。

谷歌的材料設計陰影

雖然 材料設計促進獨立於環境的靜態陰影 以下探索旨在促進包括環境數據的材質上光和陰影的相互作用,以創建數字界面美學,為用户提供更 動態 的體驗。

疊加虛擬光與環境數據

材料設計環境中的虛擬光固定在一個點上,並在一天中投射相同的陰影。 虛擬光的一個更動態的實現可能是虛擬光 與陽光同步 ,以創建抽象的視覺美學,突出一天的流逝。

1. 動態反射

光對固體材料的常見影響是吸收,反射和陰影的產生。在下面的探索中,我們看到了 一天的流逝如何影響用户界面的顏色 。環境中的材料只反射特定波長的光並吸收其餘部分,光源顏色的變化也會影響材料反射的顏色。

由於白天環境色調存在動態變化,因此這種顏色變化也會影響數字界面,從而 在環境的物理和數字體驗之間建立聯繫

動態色調,是界面的真實色調和清晨色調的組合

雖然某些設備為此提供了內置方法(iOS 的夜間模式),其中顯示適應一天中的時間以創建更暖或更冷的色調,但這種方法在 UI 元素上創建了色調的泛化並且提供更 使用特定 UI 組件的空間——文本、圖像、按鈕和品牌元素。 將環境色調與品牌顏色對齊並對 UI 組件狀態引入微妙的反應可以提供更豐富的用户體驗。

全天變換色調

這種動態的燈光相互作用也可以 擴展 ,以表達 全年 觀察到的色調的微妙變化。 隨着 季節 的變化,色調可能會發生變化,從秋天的暖色調到冬季的冷色調,從充滿活力的春天到柔和的季風。

微妙的色調反映了季節的變化

Apple 更進一步,在 iOS 天氣應用程序中渲染 自然逼真的圖像 ,以 表達一天中的時間和外面的天氣

iOS 15 中的天氣應用

然而, 非天氣應用程序 中如此詳細的表達可能會使用户的 注意力 從應用程序的主要任務/目的上 移開 ,這就是為什麼所提出的界面建議在實現這些 表達時 巧妙

2. 動態陰影

與色調的變化一樣,材質在阻擋光源時也會呈現陰影。這可以通過假設太陽作為虛擬光源並 動態渲染材料陰影的傳播和方向以與白天太陽的運動同步 來在用户界面設計中表達。方向傳感器可以引導陰影的方向。此外, 相機基於其對光的敏感度,可以引導陰影的粗糙度或柔和度 。因此,可以在用户和他們的環境之間建立一種聯繫感。

Apple 前 SD 經理 Bob Burrough 通過使用房間中的燈光在界面中的對象上創建反射,進一步推進了這一概念。

Bob Burrough 的視頻解釋了對環境做出反應的 UI

他的環境照明用户界面的工作概念從設備的周圍環境中獲取信息,並使用它在屏幕上呈現物理上準確的東西。看起來好像用户周圍的燈光照在屏幕上的東西上。

3. 環境反射

將環境反射引入界面美學可以進一步提高UI組件的材料真實感。 所有材料都會反射光線(除非是黑體)。所有自然發生的視覺構圖都是來自各種來源的環境反射的組合。

環境反射——材質柔和的藍色外陰影

當UI 元素將其主要色調反射到周圍元素上時,界面中可能會發生環境反射。 這種反射可以在界面中創建顏色的動態相互作用 。將其 作為對動態陰影的擴展,可以進一步增強 UI 元素的重要性,併為界面創建準現實狀態。

來自 UI 按鈕的環境反射作為反射源

動態界面的未來

在各種環境因素的相互作用及其對用户界面的影響方面,有很多需要和探索的地方 。想象一下隨環境變化的 觸感 效果——下雨天的飄逸觸感與大風天的輕飄飄的觸感;具有 與其相關聯的材料權重的界面元素,該權重在不同的環境條件下表現不同

Google Material Design 3 指南引入了 動態顏色 ,讓用户可以更好地控制其應用的 個性化 。界面現在可以適應用户在他們的安卓設備上設置的通用顏色主題。

自定義材質M3動態顏色

這種顏色的個性化 是朝着愉悦的用户體驗方向發展的迫切需要 ,也 為數字界面引入環境影響開闢了空間

隨着無數的數字應用程序競相吸引我們日益減少的注意力廣度,我們很容易完全脱離與這個星球和自然環境的基本聯繫。 這裏的思辨性概念 探索了與用户環境相關並同步的精心設計的視覺模式,可以給用户一個機會,不僅體驗他們周圍的環境,而且加強他們與環境的聯繫。 雖然研究正在進行中,以 提高我們對數字媒體中的光線和顏色如何改善健康和福祉的理解 ,但 在這一領域的更多思辨性探索可以幫助我們進一步理解。

(部分圖文來自網絡,若有侵權,請聯繫刪除。)

加入 UI&UX交流社羣 ~

設計資源/書籍資源/知識互動

還有更多神祕福利!

一起創作更好的設計~

往期推薦 | Read More

知識乾貨:每個原型都是一個重要實驗?為你推薦最佳原型設計工具!

設計資訊:UX/UI設計師能為可持續未來做些什麼?5個親生物UX解決方案!

案例研究:如何實際應用UX設計法則?來看看 Netflix (網飛) 遵循的7個用户體驗定律!

文字丨Jelly

編輯丨Jelly

如果覺得我們做的還不錯點個贊和在看吧!

「其他文章」