談?wù)摎夂蛭C(jī)并不容易。但是，如果有更好的方式呈現(xiàn)它呢？

關(guān)于氣候危機(jī)

當(dāng)我們開始這個(gè)項(xiàng)目時(shí)，我們有一個(gè)目標(biāo)：以令人愉悅和引人入勝的方式講述令人不安和困難的主題的令人信服的故事。我們希望人們完全沉浸在一個(gè)主題中 - 一個(gè)真正激勵(lì)他們深入潛水的主題 - 所有這一切都沒有受到恐嚇。

由于當(dāng)今世界正在發(fā)生的所有事情，我們對(duì)氣候變化有著強(qiáng)烈的傾向，這是每個(gè)人都可以聯(lián)系到的問題。這是一個(gè)全球性的緊急情況，超越了我們作為人類的差異 - 每個(gè)人和每件事都受到影響。沒有雙方采取。

人類。動(dòng)物。微生物。一切。

危機(jī)只會(huì)越來越嚴(yán)重。然而，對(duì)于這樣一個(gè)激烈的問題，我們的大多數(shù)反應(yīng)仍然不冷不熱。我們?cè)趺纯赡懿惶私獾厍蛉绾窝杆傧?？那么，?dāng)實(shí)際問題對(duì)我們來說感覺如此遙遠(yuǎn)時(shí)，誰能責(zé)怪我們呢？

氣候危機(jī)一直被視為這個(gè)大問題，只有政治家和世界領(lǐng)導(dǎo)人才有資格解決。我們?？停客耆撾x了聯(lián)盟。我們只是覺得我們無法發(fā)揮作用，因?yàn)槲覀兊娜粘Ｅλ坪跷⒉蛔愕?。沒有人有興趣成為他們認(rèn)為不能解決的問題的一部分?；蛘咧辽傥覀円呀?jīng)被教導(dǎo)如何相信。

隨意交談是一個(gè)困難的話題，這無濟(jì)于事。厄運(yùn)和陰郁的氛圍并不總是好好放在咖啡上，在你的主菜之前分享一只饑餓的北極熊令人沮喪的畫面可能不是一個(gè)好主意。

所以，我們知道氣候危機(jī)從來都不容易談?wù)摗６覀儸F(xiàn)在所遇到的令人痛苦的材料也沒有完全幫助。但如果我們要鼓勵(lì)更多人談?wù)撍敲幢仨毟淖円恍┦虑椤?

這就是我們問自己的地方......

如果我們可以改變我們呈現(xiàn)它的方式怎么辦？并改變我們分享的方式？

該作品項(xiàng)目旨在成為一個(gè)微型網(wǎng)站，旨在通過現(xiàn)代UI設(shè)計(jì)激發(fā)人們的興趣并鼓勵(lì)在這種可怕的情況下進(jìn)行對(duì)話。我們希望探索將一個(gè)深刻緊迫的問題與平易近人的審美并置的可能性，希望將冷漠轉(zhuǎn)化為靈感和對(duì)知識(shí)的無知。

由于嚴(yán)酷的事實(shí)和可怕的數(shù)據(jù)到目前為止還沒有起作用，我們認(rèn)為：為什么不吸引他們吸收更多的信息呢？我們通過將復(fù)雜數(shù)據(jù)翻譯成美麗，易于理解的形式來完成大多數(shù)設(shè)計(jì)，從而解決了這個(gè)問題。

我們希望減少恐懼，距離和無助，并用希望，相關(guān)性和力量取而代之，這樣人們就可以開始意識(shí)到他們可以為氣候做多少。

但完全披露：我們顯然不是氣候?qū)＜遥?這純粹是實(shí)驗(yàn)性的。我們只是想做一些挑戰(zhàn)我們技能的事情，同時(shí)提供重要的，有意義的信息。因此，令許多人感到沮喪的是，盡管我們認(rèn)為應(yīng)該這樣，但這不是一個(gè)真實(shí)的網(wǎng)站。

那么，我們的設(shè)計(jì)方法是什么？

讓我們分解我們的關(guān)鍵點(diǎn)：

·水平滾動(dòng)

·視差

· 幾何+有機(jī)形狀

·款式和顏色

·活版印刷

水平滾動(dòng)

橫向滾動(dòng)的想法很大程度上受Apple的iPad Pro產(chǎn)品頁面的啟發(fā)。這感覺就像一個(gè)流暢的故事情節(jié)，我們也想模仿同樣的探索感。

水平滾動(dòng)最具挑戰(zhàn)性的實(shí)現(xiàn)之一是在我們的動(dòng)物列表頁面上。我們的目的是創(chuàng)造一些很酷，有趣和有趣的東西，但我們很快意識(shí)到我們太過膨脹了。我們推出了第一個(gè)版本，因?yàn)樗杏X更像是翻頁而不是頁面。視覺上有太多的東西，但沒有什么有價(jià)值的信息。白色空間只是不平衡。你們都知道我們喜歡一個(gè)好的白色空間。

當(dāng)我們撥回并磨練真實(shí)的列表概念時(shí)，我們發(fā)現(xiàn)更少的肯定更多。靜態(tài)信息標(biāo)題突出了連續(xù)性，白色空間是平衡的，整個(gè)頁面比以前更具信息性和魅力。

視差

Parallax是一個(gè)非常好的理由，我們非常興奮地進(jìn)行實(shí)驗(yàn)，因?yàn)樗峁┝撕芏嘧屖虑樽兊茂偪竦目臻g。但是，除了通常由分層圖像構(gòu)成的視差之外，我們還決定采用一個(gè)缺口和分層平面插圖。我們老實(shí)說不確定它是否會(huì)起作用（甚至可能會(huì)受到影響！）但我們冒險(xiǎn)將它們結(jié)合起來創(chuàng)造出具有深度感和現(xiàn)實(shí)感的東西。

我們得到了許多問題，詢問我們的視差是如何在Adobe After Effects上完成的，并且聽起來很簡(jiǎn)單，它基于一個(gè)基本原則：離你最近的物體/層最快。

這是我們圖層的簡(jiǎn)單細(xì)分：

上：背景; 從左向右移動(dòng); 最慢的層。

中心：中間地; 幾乎總是居中; 中速。

底部：前景; 從右向左移動(dòng); 最快的圖層

你會(huì)看到，當(dāng)背景和前景以不同的速度和方向移動(dòng)時(shí)，它會(huì)產(chǎn)生這樣的攝像機(jī)平移錯(cuò)覺，就像它轉(zhuǎn)向180度一樣。

幾何+有機(jī)形狀

從我們的環(huán)境中汲取靈感，我們平衡了幾何和有機(jī)形狀之間的對(duì)比，以表示人造結(jié)構(gòu)和自然的共存。但我們必須小心使用它們; 我們不得不用結(jié)構(gòu)編織可接近性，而且太多都會(huì)導(dǎo)致太僵硬或過于頑皮的東西。

嚴(yán)格的網(wǎng)格布局將網(wǎng)站結(jié)構(gòu)保持在一起

例如，我們巧妙地將結(jié)構(gòu)整合到站點(diǎn)中的一種方式是通過固定的網(wǎng)格布局。一切都故意跟隨隱形網(wǎng)格，因此UI看起來很有條理，沒有增加任何不必要的重量。

即使在我們的視覺數(shù)據(jù)中，強(qiáng)烈的直線與粗略繪制的圓形形成對(duì)比，因此在數(shù)據(jù)保持有序的情況下，頁面不會(huì)失去友好性。

強(qiáng)烈的直線與粗略繪制的圓形形成對(duì)比，以平衡與結(jié)構(gòu)化數(shù)據(jù)的可接近性

動(dòng)物實(shí)際上是這種對(duì)比平衡的完美例子。它們?nèi)坑苫镜膸缀涡螤罱M成 - 圓形，矩形，梯形 - 但經(jīng)過精心的使用和操作，以保持其自然形態(tài)和曲線，同時(shí)仍保持強(qiáng)大，獨(dú)特的結(jié)構(gòu)。

動(dòng)物是基于基本幾何形狀建造的。

這種平衡一直延伸到我們的排版選擇。你可以看到它們也是相互對(duì)比的：一個(gè)是圓潤(rùn)的，充滿活力的無襯線字體，另一個(gè)是經(jīng)典，優(yōu)雅的襯線字體 - 但是它們一起使用，它們以某種方式發(fā)揮彼此的優(yōu)勢(shì)。

風(fēng)格和顏色

因?yàn)槲覀冎饕幚砥矫娌鍒D，所以我們的風(fēng)格和顏色選擇要解決兩個(gè)主要問題：

a）尺寸

b）顏色和諧

外形尺寸

由于視差效應(yīng)是我們的主要概念之一，使用重疊技術(shù)來進(jìn)一步推動(dòng)視差包絡(luò)似乎是理想的。結(jié)合起來，它們創(chuàng)造了一種空間錯(cuò)覺，同一x和y軸上的元素可以存在于同一平面上。

這種錯(cuò)覺有可能創(chuàng)造尺寸，深度，透明度，甚至可以揭示隱藏的元素。它增加了奇思妙想和奇跡，我們正在尋找灑在這個(gè)黑暗的主題上。

最上面的櫻桃是一層隨機(jī)的有機(jī)紋理，可以為2D空間添加更多尺寸。所有不使用任何陰影效果。

左：重疊以創(chuàng)造深度; 右：重疊以創(chuàng)建透明度

色彩和諧

在這個(gè)項(xiàng)目中平衡顏色感覺就像穿過峽谷走鋼絲一樣。我們必須記住每個(gè)元素如何相互作用，確保一切都是可見的，并且不會(huì)在混合中迷失。

因此，我們不是試圖處理有限的一些顏色，而是將我們的調(diào)色板打開以適應(yīng)自然界中無限的配色方案。這是一個(gè)在某個(gè)頁面內(nèi)仔細(xì)地配對(duì)顏色而不會(huì)偏離其自然表現(xiàn)的過程。

顏色，紋理和重疊技術(shù)（隱藏元素）之間的相互作用。它是對(duì)我們消失的森林進(jìn)行評(píng)論的同時(shí)創(chuàng)造了一種奇跡感。

關(guān)鍵要點(diǎn)

我們希望您從中獲得的第一個(gè)關(guān)鍵點(diǎn)是盡管Web開發(fā)存在局限性，但始終要突破設(shè)計(jì)界限。當(dāng)我們進(jìn)行投資組合項(xiàng)目時(shí)，我們有機(jī)會(huì)回答“假設(shè)”問題。按照技術(shù)和設(shè)計(jì)的進(jìn)步，我們無法再衡量什么是不可能的了。

第二個(gè)關(guān)鍵點(diǎn)是我們?nèi)绾蝹鬟_(dá)信息或故事有時(shí)比內(nèi)容本身更重要。就像他們說的那樣：這不是你說的，但這就是你說的。

最后也是最重要的一點(diǎn)是，我們希望您能夠更多地了解氣候變化。我們?nèi)祟悓?duì)目前大規(guī)模滅絕的99％負(fù)有責(zé)任，因此我們應(yīng)該對(duì)自己的行為負(fù)責(zé)，并弄清楚我們可以停止或開始做什么。

原作者： Daphnie Loong

原文鏈接：https://blog.prototypr.io/how-we-used-ui-ux-to-confront-an-inconvenient-truth-5b70eb9e3c85