免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

設計趨勢可以塑造一切，從設計師的創作方式到用戶界面設計，再從網站到包裝設計的未來迭代方向。因此關注現在的流行趨勢很重要，這樣您的設計就不會很快過時。

讓我們深入探討2022年的一些頂級網頁設計趨勢。我們將著眼于 2021 年末開始出現的趨勢，這些趨勢將為來年即將流行的設計趨勢奠定基礎。

閱讀更多以前的趨勢文章：2021 年網頁設計趨勢

目錄：

有趣、積極樂觀的設計

黑白配色方案

大膽和實驗性排版布局

超大鼠標指針

三維設計元素的應用

近乎野蠻

滾動文本元素

玻璃擬物風格

更多漸變

無圖片主頁

圖層效果

分屏美學

交互式字體

巨型頁腳

包容性設計

非凡的想象力

結論

有趣、積極樂觀的設計

時髦的形狀、顏色，甚至面孔可以帶來很多的樂趣。設計師們正在使用這一網頁設計趨勢，應用到公司機構、電商或個人展示類網站內容，提供趣味、樂觀的設計（如上面的示例），這些設計的共同點是它們為世界注入了一點額外的快樂。

沒有什么比笑臉更能表達樂觀了。恰當的配圖是描繪這種氛圍和利用這一趨勢最簡單方法。注意拍攝技巧和被拍對象的整體形象，尋找與內容契合角度，例如上面來自 LegalSuper 的示例。

在經歷了全球肺炎大流行的幾年之后，設計師們正在為設計的項目增添一些額外的樂趣和溫度。這就是我們現在都需要的感覺。

趣味和樂觀的情緒被注入以面孔為載體的配圖上、較細的字體、有趣的搭配，以及散發出積極情緒的顏色。為了充分利用這一趨勢，請考慮較細的元素并避免選擇使用較粗的字體或厚重的配色。

FOFSO用鮮艷的衣服、模特緊張但帶著快樂的面孔緊盯鏡頭來做到這一點。

黑白配色方案

黑白配色方案是今年最鮮明的設計趨勢。不使用彩色，你真的必須在限制范圍內思考和設計。雖然這聽起來有點嚇人，但它可以釋放并激發你的創造力。結果絕對是驚人的。

從另外一個角度來說，黑白配色的設計幾乎無處不在。這種對比鮮明審美表明有很多設計師會關注簡單和直接。

使黑白配色方案既清新又現代的關鍵在于應用恰當的效果和表現技巧。

在上面的例子中，懸停時有一個微妙的、流動的動畫以及超大的鼠標反色指針來增強交互性。

大膽和實驗性排版布局

在2022年，沒有錯誤的字體排版方式。大、黑、粗——甚至是襯線字體——無處不在。他們看起來棒極了。在使用這種網站設計趨勢時，請考慮文字將如何動態響應（在手機屏幕上一切看起來都將不同）以及如何最大限度地對訪問者產生影響。許多實驗性字體不僅設計有天賦，還包括動畫或 flex（CSS響應字體布局） 選項等元素。

從輪廓到彩色字體，再到不斷變化的形狀和填充，大膽和實驗性字體應用在網站設計中占據主導地位。談到今天的網絡排版，真的沒有規則，設計師們在打破束縛重建一切可能。

Garcia Salmeron在主頁的設計上使用了多種字體效果來體現這一趨勢：混合和匹配主標題中的字符、帶有實驗性的字體選擇以及帶有圖像和背景的彩色填充層。

超大鼠標指針

這是一種新的設計趨勢，點擊上圖鏈接，您會看到許多超大光標的應用示例，在參與設計過程中，在網站前端交互完成之前根本看不到超大指針或鼠標懸停的實際效果，這屬于頁面交互效果的一種。

這個用戶交互界面的應用無處不在。最常見的例子和用法是 Jade Sheng 的例子，它的圓形指針在屏幕上移動，甚至可以在穿過可點擊元素時改變顏色。

這種 UI 設計趨勢的偉大之處在于，它為網站訪問者提供了有價值的可用性信息，并幫助他們更好地參與改進設計，提升用戶體驗。

三維設計元素的應用

雖然在2020和2021年有很多設計師為網站進行全面的3D化設計，但新興趨勢是將扁平的元素通過3D控制與整體有美感結合起來。

具有3D風格的元素屬性包括用于創建深度和維度的陰影、動畫以及拉伸和變形等圖層效果。

Sennep 在上面的例子中使用一個手指插圖引導用戶發現來做到這一點，伸出手指扶正標題。插圖使用手部動作配合陰影來完成這種好玩的設計。

Skolkovo Park

是時候思考在3D三維界面中完成所有事情了。從真實的網絡模型到具有深度的視頻或照片插圖，三維元素有助于為設計提供更好更直觀的理解，例如上面的建筑渲染，或者增強視覺刺激興趣點。

Zoox

三維設計也延伸到視覺敘事?？紤]如何以突出景深和陰影的方式講好您的故事或產品展示。例如上面的示例使用視頻，是有效傳達這種風格的最可靠和最真實的方式之一。

近乎野蠻

野蠻主義是最近比較矚目的網站設計趨勢，但它對于大多數項目來說過于苛刻和尖銳。于是進入這一趨勢的最新迭代——“近乎野蠻” 的出現也就不足為奇了。

這些設計沿用了許多相同的鮮明效果，但邊緣處理更柔軟。即使有一些明顯的邊界和線條，元素之間也有足夠的空間，而不是銳利的硬邊緣。

沒有太多的裝飾或其他視覺效果，留下顏色和文字來真正承載這些。其結果更引人注目，不至于太苛刻把用戶拒之門外，是野蠻主義和可用性的結合體。

滾動文本元素

雖然我們總是希望文本元素可讀，但它們也可以是動態的。滾動文本元素——通常使用超大字體，只有幾個字，在同一個位置循環出現——可以強調關鍵詞并激發用戶的興趣。

文本滾動通常往屏幕左側位置緩慢移動?？招拿柽呑煮w是一種流行的選擇，保持可讀性的關鍵是使用簡短的常用詞或短語。

引導用戶關鍵行為召喚用語和其他消息應與滾動文本分開，以確保網站訪問者可以輕松閱讀它們。

Peppa Sauce

滾動文本選項不僅僅是網站設計趨勢或技巧，它們實際上可以幫助鼓勵用戶互動增加參與度。在上面來自 Mama Joyce Peppa Sauce 的示例中，超大鼠標光標內包含滾動文本，該文本顯示的是更大的滾動文本。（您甚至可能想重復觀看這個互動內容。）

玻璃擬物風格

玻璃擬態風格（Glassmorphism）的最初始于2020年末和 2021 年初的新擬態風格（Neumorphism），并演變進化成現在流行的玻璃擬物效果。

Glassmorphism設計外觀讓人聯想到玻璃。有透明、折射或光澤等元素構成。

很多設計師在追波（Dirbbble） 上展示使用這種設計風格的作品，也可以在大量已發布的網站設計中找到這種設計方法的設計。

更多漸變

漸變的應用一直很廣泛。在2021年之前的設計中的大部分漸變都出現在背景中。

2022年，漸變將會增加兩種新的形式：

l  文本顏色漸變填充（如上面的例子）來增加影響和突出強調

l  填充矢量插圖或圖標以創建漸變紋理效果

無圖片主頁

沒照片？沒問題！無需圖像也可設計，讓我們在2022年緊跟潮流吧。

使用不同類型的UI或設計技巧，來充分美化沒有圖像的主頁。在此處的示例中，Kirifuda 使用了漂亮的黑白配色方案，在文本元素之間增加疊印效果。超大字體和手寫風格的字體有助于將它們整合在一起。（請注意將其他設計趨勢與這一趨勢相結合以獲得出色的效果。）

沒有圖片的設計也是嘗試其他技術的好機會，例如動畫、鼠標指針懸停狀態或其他交互元素。

主頁上沒有圖像的設計通常會導致美感缺失。但這完全沒問題。使用另一種設計方法來激發用戶興趣吧，例如使用有趣的大文本字體元素。

圖層疊加效果

圖層堆疊、元素間距和圖形重疊可以在設計元素中產生景深錯位效果，彼此之間建立連接。分層效果展示明顯又直接，也可以簡單一點。這兩個選項可以一起使用或單獨使用以產生整體影響。

State Creative 使用多個圖層——背景、中景、前景——以視覺上有趣且有意義的方式將各種元素組合在一起。

分屏美學

分屏美學重新流行。幾年前的趨勢是出于可用性和響應性的原因，現在它更像是一種細分設計。

這些視覺效果可以包括水平或垂直分割的屏幕，每一側具有相同或不同的功能或點擊動作。

最好的分屏設計可以同時做兩件事：

l  提供了強烈的視覺沖劑體驗

l  他們使用多個入口點來深入挖掘內容

交互式字體

可變粗細的交互字體在大多數情況下，這種效果需要使用懸停狀態才有效，盡管您可以嘗試其他一些更復雜的效果。（帶有流體字體動畫也越來越受歡迎。）

在考慮交互式文本元素時，請優先考慮內容的可讀性和易于理解性。文本的效果僅在其中的文字可讀和可理解時才有效。（否則設計的意義就會丟失。）

當設計展示相對簡單時，這種設計才最有效。這個技巧在單獨使用時是最好的。

巨型頁腳

誰能想到網站頁腳——尤其是那些包含大量信息的頁腳——會成為流行的網站設計元素？

對于包含大量信息、大量頁面或多個節點入口的網站，超級頁腳是 2022 年必備的設計元素之一。

世界自然基金會有一個雙層頁腳：

l  在粗黑條中，有三列菜單選項，便于導航，按用戶可能想要在站點上執行的操作（發現、支持、聯系）分組

l  黑條中還有一個完整的注冊表單，用于了解訂閱有關該組織的更多信息

在底部較細的白色頁腳欄中是組織信息、社交媒體鏈接、非營利免責聲明、版權聲明和服務條款鏈接（隱私政策、披露信息和相關條款）

當存在明顯具有不同目的的元素分組時，超級頁腳效果很好。帶有標題的列格式以及水平底部錨點幫助， Wild Souls的這個頁腳看起來很棒。

巨型頁腳甚至可以呈現出“近乎野蠻”的風格。訣竅是使用元素來創建獨特的組織感，以便用戶知道如何輕松找到他們正在尋找的信息。

包容性設計

設計師正在努力打造一個更具包容性的網絡，它幾乎體現在所有已發布的內容中。從圖像到語言再到替代文本，沒有理由不嘗試讓您的項目更加包容所有人。

包容性延伸到種族、性別中立、文化、可及性和能力上。共同的主題是您的網站應該以這樣的方式組合在一起，以便任何想要訪問內容的人都可以訪問到內容，并且人們也可以在屏幕上看到他們可以與之相關的其他人。

這里的要點是，你不需要用大喊“我們具有包容性”的圖像和語言。這是展示比講述更重要，真實比蠻力更重要的設計。

非凡的想象力

真實和想象之間的界線從哪里開始？當您查看大量網站時，可能無法100%確定。沒關系。

享受這種想象力帶來的樂趣，融合真實和想象，創造出非凡的圖像。你的想象力是這里唯一的限制。

在 K Plus Film 的示例中，人物位于屏幕周圍飛舞的水果頂部。顏色和比例創造了一種引人入勝的視覺效果，這真是太棒了。

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

hi,朋友，你聽說過“元宇宙”嗎？你或許在網上聽過或者在視頻聽過講解，也許它只是曇花一現的概念，但是隨著越來越多的大廠開始下場執行和站臺，所以很多人開始重視和關注。

2021年，一個新奇的概念名詞在網絡上迅速躥紅，引發科技界和投資界的廣泛關注。這個概念名詞，就是“元宇宙”。

1.10  元宇宙的起源

1981年，一本名叫《真名實姓》的科幻小說，描繪了一個未來世界的樣子。在這里，人類可以通過腦機接口登錄虛擬數字世界，不僅可以有真實的生存體驗，而且可以按照自己的喜好幻化成不同的形象。

時間來到 1991年，美國著名科幻作家尼爾·斯蒂芬森（Neal Stephenson）推出了自己的小說《雪崩（Snow Crash）》。

在書中，尼爾·斯蒂芬森描述了一個平行于現實世界的網絡世界，并將其命名為“元界”。所有現實世界中的人，在元界中都有一個“網絡分身”。

這個“元界”，英文原著中叫“Metaverse”。它由Meta和Verse兩個詞根組成，Meta表示“超越”、“元”， verse表示“宇宙universe”。

沒錯，Meta Verse就是我們今天文章的主角——元宇宙。

值得一提的是，書中所說的“網絡分身”，英文單詞叫做Avatar。大家有沒有很眼熟？

是的，Avatar就是“阿凡達”。2009年，美國著名導演詹姆斯·卡梅隆的那部經典電影，就是以它命名。

在現在眾多的討論聲中，元宇宙并不是一個真實存在的世界，而是一個虛擬的世界，是一個人們對未來定義的虛擬世界。

說到虛擬世界，相信大家馬上又想2018年美國大導演史蒂文·斯皮爾伯格執導的——《頭號玩家》。在頭號玩家里描敘的的元宇宙：它是下一代互聯網，是虛擬時空，是全真互聯網。

但是不管怎么說，現在大家默認尼爾·斯蒂芬森仍被公認為是元宇宙的正式提出者。

1.20  元宇宙是什么？

元宇宙到底是什么呢？我看過很多解釋，基本都是將“Meta（超越）”與“universe（宇宙）”相互結合，這個理解過于片面，那么直譯過來不就是“超越宇宙”，這肯定是不符合情理的，要搞清楚這個問題，我們需要弄清楚“Meta”是什么意思，Facebook將公司名字改名為Meta，在側面可以說明，在扎克伯克看來，元宇宙中的元才是核心，在我們中文中，想要找到一個完全與“Meta”對應的詞是比較困難的，所以我們只能意會，“Meta”來自于古希臘語，比起元或者超越，我覺得翻譯成”關于XX的XX“是更為合理的，例如“Meta Date”就是關于數據的數據，這個概念用于文藝作品中就是，“元戲劇”和“元小說”，比較有代表的就是卡爾維諾的“寒冬夜行人”，在心理學上，還有一個概念，叫元認知，這樣去理解，就可以理解“Meta”為什么被翻譯成“元”了，“宇宙”，我們可以理解它與物理的宇宙是不一樣的意思，比如，我們都知道“漫威宇宙”，指的是漫威及一系列作品和角色組成的世界，還有國內比較火的IP“唐探宇宙”，都是指的是一個公司旗下多個IP所組成的世界觀，所以“宇宙”的理解應該是“一個領域多個IP的合集”。

按照“元宇宙第一公司”Roblox公司的說法，一個真正的元宇宙產品應該具備八大要素，分別是：身份、朋友、沉浸感、低延遲、多元化、隨地、經濟系統、文明。

身份：需要一個能代表的你身份，無論是打工人還是老板或者是總統都行，它與現實世界的身份是完全不一樣的。

朋友：在可以在擁有自由的社交和談戀愛，無論他和你在現實世界里是否有交集（也就是社交）。

沉浸感：可以讓你有在現實世界一樣的真實體驗，讓你可以忘記這是虛擬的世界。

低延遲：一個合格的元宇宙需要在整個空間范圍上進行時間統一，不能讓人感受到延遲。

多元化：元宇宙可以提供多種世界場景，供玩家有多種身份而已選擇。

隨地：元宇宙的入口需要可以隨時隨地的方便登錄，不受任何限制。

經濟系統：像現實世界一樣，無論是用BTC和ETH還是什么別的貨幣，元宇宙需要都自己的交易系統和規則

文明：元宇宙里所有人們在一起，一起努力，創造虛擬且先進的文明。

我們按照現在的技術水平對比一樣，發現很多東西都是無法去完成的，就例如文明來說吧，我們無論是哪一個虛擬的社區還是游戲里，基本這么多年的發展都無法形成自己的文明，最多是有自己的游戲文化或者社區文化。

當然，按照現在的研究和技術可以實現的，我們對于元宇宙的規劃可以總結成一句話：人以自由獨立的數字身份自由的參與可能存在的數字世界。

1.21  元宇宙的數字身份

我們將它拆分出來理解：元宇宙是一個數字世界，這個是沒錯的，它不是現實的世界，也不是物理的世界，而是一個虛擬的數字世界。

然后我們再來看看另外一個詞：“數字身份”，我們現在在上網的時候大多數都是實名的，但是在平臺上，我們會有自己虛擬的ID和昵稱，這些虛擬的ID和昵稱會遍布整個互聯網，可能是在淘寶京東買買買的你，也有可能是在騰訊視頻或者愛奇藝為某個明星瘋狂打call的你。

所以，這些虛擬的ID不擁有權力，也不會承擔義務，他們不是一個獨立的身份，他們都需要依附在線下那個擁有獨立身份的你。

那么，我們現在在想理解那句話：元宇宙是人以數字化身份參與一個虛擬的數字世界。并不是單單用數字賬號參與，是一個獨立、不受干預的數字賬號。

不同的是，在現實世界你只有一個身份一個你，而在元宇宙里，你可以擁有多個不一樣的數字身份。

1.22  元宇宙的參與性

上面那句話還有另外一個關鍵詞，數字化身份參與，如果想要更準確一點，我覺得應該是“自由參與”。我們在這個互聯網上，現在是可以自由的去訪問，去發表自己的看法，但是很多互聯網產品的規則制定和產品的細節定制和我們卻沒有任何關系。

比如，微信每次新出一個功能，都可以引起全民的熱度，甚至可以上熱搜，是因為用戶期待那個功能太久了，所以才會有這樣的討論熱度，但是微信也有很多用戶想要的功能沒有去實現，所以我們才說，互聯網產品的規則制定和產品細節的開發，我們并沒有“自由的參與”。

但是在元宇宙的設定里，你可以自由的參與規則的制定，每一個該元宇宙世界的玩家都可以參與到游戲規則的制定，讓每一個都有會有參與感。

這個就像，幾個朋友一起參與劇本殺劇情的編寫，玩法的設計，我們每個人都會討論角度與角色的關系，

討論這個細節怎么演比較好，需要一個什么樣的場景，如果有人覺得這個方案或者設定不滿意，他可以提出否定細節，然后大家在針對討論，如果大家都統一了，這句劇本殺就可以開始玩了。

1.30  元宇宙的分類

如果我們按照現在有的資料，我們想要將元宇宙去歸類，我們可以把元宇宙分為兩類，一類是傳統型元宇宙，另外一類是開放型元宇宙。

1.31 傳統型元宇宙

傳統型元宇宙，一般指的是將線下的生活直接映射到元宇宙中，最后線下線上融為一體，其實這個事情在我們的生活中也是一種在重演。

我們現在通過不同設備（手機、PC、物聯網），我們在線下搬到線上，最后回歸到線下生活，傳統型元宇宙是一個比現在網絡環境更完善、體驗更沉浸，具備生活、社交、工作、娛樂的虛擬數字的世界，也有可能有一天，我們在虛擬世界體驗比較好的方案會成為推動我們現實世界的助力器，會落地在現實的生活中。

1.32 開放型元宇宙

與傳統型元宇宙對立的，便是開放型元宇宙，它與現實的物理世界的是沒有什么關系的，他是一個獨立是虛擬的數字世界，比如，我們現實的生活是一個地球OL，那么我們在開放型元宇宙所建立的世界可能是土球OL或者是綠洲OL，是與現在世界平行存在的一個世界。

開放型的元宇宙在理論上是可以有無數個的，只要是符合建立條件的人都是可以建立的廣義元宇宙，可能有的開放型元宇宙是因為是某些KOL建立的，人氣會比較高，有的可能會無人問津，只有創建者一個人，每天“采菊東臨下，悠然見南山”。

傳統型元宇宙是需要有現實社會的映射才能存在的，現實世界才是主要的，虛擬世界只是現實世界是依附品。而開放型元宇宙則和現實世界是分開的，甚至有些開放型元宇宙的擁護者覺得開放型元宇宙研發出來之后，物理世界里的身體都不需要存在了，人的意識作為了一個代碼字符或者程序活在廣義元宇宙中，個人的榮譽感、社交、幸福感全部來自于開放型元宇宙，當然，這是一些非常極端的擁護者。

現在能看到元宇宙與元宇宙相關的新聞，基本都是和游戲相關的。例如，目前第一個將元宇宙寫進招股書的Roblox，它現在已經在紐交所上市了，而且投資名單里還有我們國內做游戲比較出名的騰訊，這家公司主要是提供一個讓玩家可以自由建立內容的游戲平臺。

所以很多人會認為游戲就是元宇宙，或者元宇宙就是進階版的元宇宙。

我們前面說“開放型元宇宙”的時候說過，開放型元宇宙是可以自由切換的，上一秒我可能是在為大家出謀劃策的軍事智囊，下一秒我便可以切換到一個充滿斗氣和斗皇滿天飛的世界，來履行我的“三年之約”。

正因為有這樣的特性，所以很多人認為游戲它和元宇宙是一樣的，比如，我在“王者榮耀”里連著跪了幾把之后，非常的沮喪，我便打開了“哈利波特”在里面騎著掃把自由自在的飛。我們可以在“王者榮耀”里和自己室友或者陌生的人一起組團玩游戲，一起推搭，是不是有點元宇宙的意思了。

其實我們體驗到了游戲和VR設備所營造的氛圍來說，它們都只是元宇宙構成組成。硬件設備和技術都是只是構成了元宇宙的一部分。而還有另外兩個組成元宇宙的基礎部分，是游戲所不具備的，一個是身份系統，另外一個經濟系統。

2.01  身份系統

我們前面說過，我們現在以賬號的形式參與互聯網上的任何活動，都是需要與現實世界中的個體是密不可分的，我們是需要現實中的個人有需求才會去選擇登錄賬號，比如，我們需要中午想吃飯，才會打開外賣軟件點外賣，都是有目的的才會去建立這個身份。

而元宇宙真正的價值就是要隔離和現實世界的身份，讓數字身份作為一個長期獨立的個體存在，不同身份之間產生各種關系和聯系，這才會讓整個元宇宙運轉起來，就如同我們現實的物理世界一樣，這便是元宇宙的身份系統。

2.02  經濟系統

經濟系統，它是維系整個元宇宙經濟正常運轉的規則。就像我們們在元宇宙里創造什么價值，都可以和別人進行交易，且整個經濟系統不會突然崩潰，例如貨幣會突然的歸零或者突然的飆漲，我們可以自由的拿著貨幣去任何地方放心的交易，都是受到保護的。

2.10  元宇宙和游戲的根本區別

說到這里，大家肯定會有疑問，我們平時所玩的游戲也有身份系統和經濟系統，那他們和元宇宙有什么區別嗎？雖然游戲里也具備這兩個基礎的條件，但是，他們和元宇宙的這兩個系統是完全無關的事情，他們最大的區別就是游戲里的身份系統和經濟系統是“中心化”的。

就拿最經濟系統來說吧，一些道具的價值和商店上架什么新品道具，完全都是在游戲廠家的掌握中，而且他們只許在游戲中用指定的交易方式交易，玩家只是按照游戲廠家制定的規則去完成任務而已。

另外，“中心化”就會存在一個問題，我們在游戲里有所的產品最終都是歸游戲廠家所有，游戲廠家會擁有“超級權限”，如果我們不按照游戲廠家的規則進行交易，有極大可能會被封號，那么我們在那個賬號里的經濟價值并會瞬間湮滅，所有，在本質上來說，游戲里的財產屬不屬于自己，是由游戲廠家說了算。

身份系統也是同樣的道理，每款游戲有什么角色，有什么裝備可以選擇，都是由游戲廠家制定好了，另外在換一個角度來說，擁有“超級權限”的廠家隨時可以決定你這個號存不存在，所以游戲里的身份不是你的。

所以中心化的游戲根本不會是元宇宙的進階版。而去中心化的元宇宙，是不會有編輯好的劇本，也沒有現成的角色供你選擇。從早起元宇宙建立的一片荒蕪，到后期的人氣如潮，這些由元宇宙所有人來參與制定和修改，該元宇宙所有的玩家都會享受極大的自由度。

我們在前面說到的Roblox能在元宇宙這個概念中這么火是有原因的。雖然它僅僅是一款普通的開放性世界的游戲，但是他采用了去中心的運營和發展形式，所以大家會公認Roblox是一款基于元宇宙原理的游戲，也有可能是元宇宙的初級形態。而我們現在無論玩的什么種類的游戲，基本都是中心化的，游戲規則和進度都是在游戲廠家規定好了的。

在去中心化的元宇宙里，我們都會以新的身份和新的權力去過一種全新的生活，在這里，我們會有新的朋友，新的家園，全新的社交關系。

我們前面說過，元宇宙要存在需要有兩個基礎條件，一個是身份系統。另外一個是經濟系統，它們構成了元宇宙存在的基礎保障。

元宇宙的經濟系統，主要是引導元宇宙的用戶或玩家一起進行經濟創造、市場交易的系統，那經濟系統是怎么運行的？它的基本運行原理和現實物理世界也是一樣的，靠的是稀缺性。

比如，石油，產量少且只有部分國家掌握石油資源，那它的價值就高，因為它具有稀缺性和不可替代性，只有稀缺性的物品才能產生交易價值和交換價值，但是我們需要明白的是，數字世界是不利用經濟系統的建立的，原因是數字世界的物品都是由代碼構成的，它可以限制的復制和無限制的擁有，如果不考慮版權問題，它是可以有無數個的。

那我們元宇宙是怎么去解決這個問題的呢？要想知道怎么解決這個問題，我們需要知道底層的技術邏輯。說到這里，我們需要也要引入最近比較火的方案，這個方案也是最近比較公認的，Non-Fungible Tokens（簡稱NFT），

簡單地說，NFT是元宇宙里的數字版權、數字物權的一個合約。因為NFT不可替代的特性，這意味著它可以用來代表獨一無二的東西，比如博物館里的蒙娜麗莎原畫，或者一塊土地的所有權。

3.10  NFT助力設計版權增值

我們平時在網上沖浪的時候基本都知道一個道理，在數字世界的所有東西都可以低成本的復制，并可以在短時間內無限制的拷貝，是沒法聲明版權和唯一性的。但是這個一切的顧慮NFT都可以解決，它給數字世界的所有物品包裹一層數字代碼的合約，有了NFT合約的包裹，數字世界的物品就有了不可分割、不可復制的特性，這樣便解決了數字世界物品容易被盜版的問題，也就具有交易和交換的價值。

我們都知道早期騰訊賺的第一桶金就是靠的是QQ秀，經歷過QQ秀瘋狂的年代的人都知道，一個絕版的太陽神的QQ秀可以賣到1萬塊，然后到現在王者榮耀皮膚讓騰訊賺的盆滿缽滿，說明人們對好看形象的熱愛。

那我們跳出元宇宙回到現實來看一個最近的一個現象，就是NFT的頭像。好多人都不明白，一個糊的不行的頭像，為啥可以賣的那么貴，我喜歡我知道截圖，我直接自己用不可以嗎？現在我們也許明白了，截圖或者拷貝出來的是贗品，是沒有任何價值的，是不具備交易價值的。

當然。數字世界的物品能不能作為商用，還需要看作者在NFT商用合約里規定了了什么，可以做什么用途，NFT合約一般會分為兩個部分，一個是標準化的，另外一個是非標準化的。

3.11  NFT標準化合約

標準化合約就是我們前面說的那兩個特性，不可以分割和不可以復制性，這是我們用戶無法改變的，交割時只是交割了版權給你。

3.12  NFT非標準化合約

非標準化的合約部分就是由作者去制定的。例如，我們設計了一個LOGO，我們可以要求別人在公司盈利了10萬之后，在支付LOGO的設計費用，也可以要求別人的使用場景，比如，只能用于APP上，用在其他上面需要支付另外的版權費，然后在給他開通權限，不同的作者會根據環境時間和他自己的性格，來撰寫不同的NFT合約和調整合約內容。

3.20  元宇宙有哪些就業機會

以前，我讀凱文·凱利的《必然》這本書中曾經說過，“人們會在新的生產力水平上找到新工作”，在以前讀到這句話的時候，我不太理解，現在我在想起這句話，我可能讀出了新的領悟，那不就是現在說的元宇宙嗎？在元宇宙里我們會有新的雇傭模式和就業模式。人們也有可能在元宇宙里衍生出全新的職業，創造全新的價值。

現在我們越來越多提到的是人工智能將要來到，大部分重復的工作將要被取代，尤其在《人類簡史》這本書中提到了“，“未來20到30年之間，超過50%的工作機會被人工智能取代?！边@件事已經在發生了，無人超市、無人貨架、無人駕駛，都正在成為現實。不只是重復性勞動，還有像醫生、律師、文字工作者，在人工智能發展越來越強大的未來,也有被替代的風險。”

所有，對我們來說，元宇宙因為創造和關系，為我們創造了更多在的強烈的存在感。更重要的是，它提供了我們去應對人工智能對人替代的策略。

前面我們說過，當身份系統和經濟系統這兩個基礎條件滿足的時候，一個元宇宙就基本成立了，而且隨著元宇宙的熱度越來越高，全球的頭部企業都開始布局元宇宙，比如，國內外的社交巨頭Facebook和騰訊，都已經公開自己已經開始慢慢的轉型做元宇宙，而且都開始慢慢的開始研發元宇宙相關的應用和技術。

老話說過，早起的鳥兒有蟲吃，彭博社預測說，到2030年，元宇宙的市場規?？赡軙_到2.5萬億美元。但隨之而來的一個問題是，元宇宙所帶來的機會是不是還是像現在一樣，被幾家巨頭壟斷，還是我們普通人也可以參與元宇宙的建設中去。

這個我們需要分析元宇宙的構成，除了身份系統和經濟系統外，元宇宙的最終的形態肯定還是需要很多其他的資源來支持，比如，最基礎的底層基礎設施，是不是需要足夠的電力資源、算力和高速網絡，其次，我們需要進入到元宇宙，是不是需要一個引導的設備？我們想在元宇宙里生活工作，那是不是需要各種場景的布局，是不是也需要提供各種各樣的工作崗位，這意味著元宇宙有需要非常多的第三方的技術支持，有些風口，也是很多其他企業和普通人能夠去參與的。

元宇宙的建設，是一個龐大的工程，絕對不是一家兩家公司能搞定的，那么這個龐大的工程在建設的過程中，會遇到什么樣的機會和挑戰呢？在元宇宙的建設過程中，我們先來梳理下元宇宙需要的生命周期

4.10  元宇宙的準備期

準備期，這階段主要涉及元宇宙的基礎設施供應商的準備工作，我們知道，元宇宙的基礎設施主要包括通訊網絡、云計算和新的開放的網絡協議。理想中的元宇宙，能同時容納百萬級、千萬級甚至億級的人，所以它對網絡和算力的需求會有指數級的增長。

舉個簡單的例子，我們國內現在比較火熱的大逃殺游戲“和平精英”，目前一個房間能容納100人同時一起在線，而元宇宙需要的算力支持可能是“和平精英”的千倍萬倍。另外就是不同元宇宙直接如果需要聯系的話，還有需要支持統一的協議接口，這些都是需要一個統一的協會來制定，就像W3C來制定hTML代碼規范一樣，這些比較基礎的問題都要解決了才能算是度過的準備期。當然實際上在實施過程中可能會遇到更加棘手的問題需要解決。

4.20  元宇宙的啟動期

啟動期，需要解決元宇宙運行期的一些規則性的問題，比如，經濟系統的正常運轉和NFT的交易系統。經濟系統，按照我們現在能想到的技術，就是通過區塊鏈形式的記賬系統去解決。

比如我們在某個元宇宙空間的數字身份買了一包紙巾，那么元宇宙的賬本會記錄一筆，然后把這瓶的所有的權轉給我，然后并向整個區塊鏈去廣播這一筆交易。

目前在為元宇宙做記賬系統的公司已經有很多都開始進入行動階段了，比如，阿里的螞蟻鏈、騰訊的至信鏈，國外為元宇宙做準備也就更多了，比較比較知名的就是以太坊。NFT交易系統就更多了，比如，OpenSea(開放海)、

SuperRare(超級稀有)，國內的NFT交易系統還屬于剛剛起步的階段，我相信明年會有很多實力雄厚的廠家崛起。

4.30  元宇宙的爆發期

爆發期，是元宇宙設備供應商百家爭鳴的時候，有兩類目的廠家應該會大有作為，元宇宙的設備供應商和場景應用的開發商。

元宇宙相關的設備我們在電影上也看過不少，像眼睛、手表手環、腦機接口之類的，場景應用的開發商可能就更多了，比如娛樂設施、工作場景和模式、教育場景、購物場景，這些都可以構成元宇宙的豐富的場景，這都是場景應用開發商的機會。當然另外做出創新的廠家可能會成為某個單獨類目的龍頭，例如，讓腦機接口變的更小巧攜帶更方便，以方便隨時隨地的可以進入到元宇宙的空間里。

我們前面說到，要想迎來元宇宙需要經歷三個階段，分別是準備期、啟動期和爆發期。我們現在處于元宇宙的什么階段呢？距離元宇宙的開始正式商用還需要多久呢？正式進入爆發期我們需要做好哪些準備呢？我一個個來解決這些問題吧！

關于我們目前處于元宇宙什么階段，就目前技術的發展，我們應該處于元宇宙的啟動階段，為什么這么判斷呢？因為在經過過去幾年技術的沉淀，我們有成熟的區塊鏈的記賬系統，NFT系統已經得到了市場的認證，并已經開始大量啟動商用階段，在2020上半年，全球NFT的市場交易額只有1370萬美元，而到了2021年上半年，這個數字飆升25億美金。

5.10 元宇宙來臨標志

我們知道在元宇宙的產品生命周期有一個啟動期和爆發期，但是，在爆發期之前肯定有一個臨界點，當這個臨界點到來的時候，就代表我們即將迎來元宇宙的時代，那我們怎么判斷什么時間是元宇宙的臨界點呢？我們還是需要從兩個基礎條件開始判斷。

首先是身份系統。要想達到這個臨界點，必須有一個全民級作為元宇宙的入口能接入元宇宙，就像現在FacebooK一樣 ,全球使用的人數超過了一半，這便是我們現實世界互聯網的全民級的應用。

第二個標志，當然是經濟系統，衡量經濟系統的一個關鍵指標是NFT的交易規模?！，F在我們全球的GDP超過了80萬億美元，而NFT市場規模僅有約200億美元，如果要達到臨界點的標準，這個NFT市場的規模，也就是元宇宙的GDP，肯定要達到萬億美元的水平。這樣估算，距離元宇宙的臨界點，至少還有五年。

5.10 元宇宙臨界點會遭遇哪些挑戰？

在我們向元宇宙的慢慢過渡的時候，我們整個社會會遇到哪些挑戰和需要做好哪些準備呢？我認為比較重要的兩點比較關鍵，一是建立共識，二是文化和倫理的沖擊

(1) 建立共識

為什么說建立共識比較重要呢？我們都了解，創造是元宇宙最大的優勢，但是也是有風險的。比如，在元宇宙里，我們每個人都有編寫劇本和玩法的權力，這樣就會產生很多矛盾，每個編寫的元宇宙的劇本不一樣，這個是可以的，但是不同的劇本的矛盾是，元宇宙空間里可能是一個美好的元宇宙，也有可能是充滿殺戮和暴力的元宇宙，也有可能是勞動最光榮的元宇宙，也有可能是不勞而獲的元宇宙。

所以我們需要在法律、文化、價值觀等等層面，讓社會各個階級都可以參與討論，提前達成一個符合大家正能量共識的價值共識。

(2) 文化和倫理的沖擊

第二個需要解決的問題可能是面的文化和倫理的沖擊，我們可以想想，如果某一個元宇宙充滿打打殺殺的事情，在里面的玩家回到現實也是不是會有暴力傾向。比較嚴重的是，在數字世界中，暴力和殺戮它的成本會比較低，所以在里面的犯罪成本也會更低。但是，在現實世界中，發生暴力沖突，無論在哪個國家都要付出比較重的代價，可能是需要接受法律的制裁，也可能是經濟上的損失。但是在元宇宙的數字世界中，可能一個屏幕上的一個角色消失而已。

再往深一層的看，在元宇宙的世界中，我們說的自由是絕對的還是相對的呢？我覺得應該是相對的，在元宇宙世界里，還是需要法律和規則的，甚至要相對的比較嚴格，而這種規則和法律的制定恰恰是因為元宇宙不是一個開發商，不能通過監管一家公司、一個機構就可以解決的，而是要回到共識的層面，通過建立個人、社會和國家之間的公約，創建文明的元宇宙。

5.20 元宇宙技術層的挑戰

元宇宙的虛擬現實是什么呢？我覺得是欺騙大腦的感官，它光有視覺的呈現是不夠的，觸覺也需要跟的上，例如，我們在元宇宙里看到一個菠蘿，我們聞起來是菠蘿味，摸起來也是尖尖刺刺的，可能我們認為它只是元宇宙里的一串代碼，但是我們的大腦會通過感官來告訴我們，這就是菠蘿，所以除了戴在設備，可穿戴設備也是極為重要的，它會給我們一個真實的力作用的反饋，但其實，欺騙五感并不是最大的難題，最難解決的應該是移動和交互問題，我們可以想象下，我們戴好設備，來到了元宇宙，一切的聽覺視覺觸覺都非常逼真，這時候我們街道一個任務，要去野外去打BOSS，問題來了，我們該怎么過去，在真實的物理世界里，我們是需要移動的，但是，我們的房間只有20平方米，所以虛擬空間再大，我們物理空間是有限的，大部分的方案是通過傳送門直接過去，所以，元宇宙的開放世界就很難實現了。

但是即使是傳送，也不能解決所有的問題，我們都聽過3D眩暈癥，這個原理是我們生理在視覺上感覺到了移動，但是身體沒有移動，如果大腦足夠敏感或者第一次接觸，那么就是產生眩暈感，這種情況在第一個玩穿越火線的時候會比較常見，通常這種情況是視覺上越真實，眩暈感就越嚴重，在頭號玩家里，主角之所以可以在小小的車廂里可以移動，是因為他在跑步機上，現在的虛擬現實游戲的移動也是靠這種方案解決的。

交互方面就更加復雜了，這里包括了人與物、人與環境、人與人直接的問題，比如，扎克伯格演示的開會場景，我們實際上還行需要椅子和桌子，不然，我們的感官雖然可以給椅子的反饋，但是坐下來確實空氣，當開會玩了，需要互相給實體文件怎么辦，需要握手怎么辦，這都是一些交互邏輯上需要解決的問題，是不是每次開會我們都需要先把場景和東西搭建好，才可以使用，這樣的話，實用的成本也顯得太高了。每多一個步驟，用戶的體驗都是墜崖式的下跌。

所以，在現在目前看來，我們需要解決體驗層方便的東西還是太多了。

5.30 元宇宙能帶來哪些改變

前面我們對元宇宙的概念及需要的條件進行了結構，那么我們來落到實處，談談元宇宙能給生活帶來哪些便利，首先，在扎克伯克發布的關于元宇宙的視頻中，我們可以發現，元宇宙最先落地的可能是現場感，例如現在疫情比較嚴重，我們可以通過虛擬會議室來開會，還有我們很多現有的商業模式都可以借助現場感來進行重構和升級，比如，我們現在去購物，一般是自己打開APP購物，或者分享自己的購物車給朋友，未來我們可以一起在虛擬世界中逛街，足不出戶，可以一起試衣服，幫對方挑漂亮的首飾，現在看任何直播賽事，都需要通過屏幕去看，最多有人氣和在線人數，未來我們可以身臨其境，感受到四面八方的歡呼，現在我們看網紅都是隔著手機刷視頻，未來我們可以更加直接，走到小姐姐身邊，更加近距離的接觸和交談。

關于元宇宙是否有未來，是很多人一直爭論的話題，但是我們可以肯定的是，隨著全球科技水平和人民精神物質的逐步提高，人的精神層面和娛樂層面的閾值時被不斷提升的，肯定會有企業做去做能滿足人更高維度精神層次的工作，因為人對精神層面的追求的欲望時沒有頂峰的，而我們現實能滿足的條件時有限的，而虛擬現實則可以極大成本的去滿足這個條件，我們現在人平時周末的娛樂時什么，無非是玩游戲逛街和看電影，而這些在虛擬世界里也可以實現，甚至可以不用出門，但是，有人可能會說，虛擬世界的東西終究是虛擬的，怎么可以和現實的相比呢？我們所能感受到了娛樂帶來的精神滿足無非是眼、手感知到了，在傳輸給大腦，如果我們技術足夠發達，在虛擬世界中的東西反饋足夠真實，騙過大腦就不是問題。

說到這里，我想起我以前讀書的時候，我特別愛一款名叫冒險島的網絡游戲，剛好在那天，我們那個工會要去打里面的一個BOSS“扎昆”，打完BOSS會掉落一個專屬的BOSS裝備，扎昆頭盔，但是那天，我剛開團，我表姐要去買鞋，她問我，游戲里的東西有那么重要嗎？我沒有回答，但是我心里已經有答案了，當打完BOSS掉落的扎昆頭盔，隊友的興奮是真實的，當這款游戲沒落時，大家在QT里面的告別的落寞是真的，現在想到大家一起組隊刷本互相幫助的溫暖是真的，我珍惜我在冒險島的每一件橙裝還有一起和我打副本的朋友，所以，世界上哪有那么多的真真假假，當有一天，你在元宇宙花的時候比你在現實里要多，你的元宇宙的身份比你現在的身份要重要的時候，你那時候覺得那邊是虛擬哪邊是現實的，當你有一天想去現實中買鞋和衣服的時候，會有人問你，現實中的鞋子和衣服不就是一堆垃圾嗎？為什么要那么認真呢？

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

///

它是如何開始的-固定屏幕

在千禧年來臨之前，我們首先開始在單一視圖屏幕中進行UI設計，這類屏幕在當時最流行的尺寸是640x480。大多數時候，我們甚至沒有考慮讓屏幕滾動，而是在特定區域或文本局部區塊中設置了內部滾動條。毋庸置疑，當時的大部分網頁也是用Flash或HTML創建的，并帶有用于布局的表格。那是在智能手機出現之前，隨著事物的發展，我們經歷了第一個向“響應式”設計的根本轉變。我們已經走了很長一段路，CSS已得到長足的發展，“響應式”網頁設計從2010年開始才真正獲得了專有工具。

圖表來源: https://www.webdesignmuseum.org/web-design-history

///

它現在怎么樣-響應式設計

隨著CSS3的發布，我們獲得了對“媒體查詢”（Media Queries）的訪問權限（譯者注：隨著移動互聯網的興起,我們需要適配多種移動端設備,這就需要用到Media Queries，即“媒體查詢”），此后不久，Ethan Marcotte在2009年底創造了“響應式設計”一詞。十多年來，我們一直使用“響應式網頁設計” (RWD) 創建網頁布局，作為一種網頁設計方法，僅需基于一種屏幕尺寸進行設計，“響應式”使我們的設計能夠適配各種設備和屏幕尺寸。

在早期，當移動電話還不兼容媒體查詢或JavaScript時，“移動優先”和”漸進式增強”的概念就成為了非常流行的方法，當時有很多CSS完全不受支持。

用我們今天的話來說響應式設計，我們認為頁面的布局要適配整個瀏覽器、屏幕大小和那些需要投射到整個布局上的限制。當需要設計從桌面端調整為移動設備屏幕所需的尺寸時，我們使用“媒體查詢”來更改整個頁面布局。

///

它的未來是什么-組件驅動

很快，使用這種“響應式”設計方法可能會被認為與使用表格進行頁面布局一樣過時—就像我們在90年代所做的那樣。

我們通過基于viewport（視口）的“媒體查詢”獲得了許多強大的工具，但我們也缺乏很多適配的可能性，因為“媒體查詢”是一個適用于整個頁面的通用解決方案，并且對每個用戶來說都一樣。我們缺乏響應“用戶需求”的能力，也缺乏將“響應式”樣式注入“組件”本身的能力。

當我們談到組件時，這里指的是頁面上的“元素”，這些元素可以由其它“元素”的集合組成。例如卡片、橫劃卡或推薦模塊之類的UI內容，每個“塊”都由各種更小的“構建塊”組成。這些組件拼湊在一起構成我們的網頁。我們可以使用 global viewport information（全局視口信息）來設置這些組件，但它們仍然無法擁有自己的風格。當我們的設計系統是基于“組件”的而不是基于“頁面”的時，這使得它變得更加困難。

好消息是這個生態系統正在發生變化，而且它正在迅速變化，這需要我們進行一些思維轉變：考慮如何設計和定義組件樣式以及它們如何適應周圍環境。

CSS正在不斷發展，“響應式”網頁設計的新時代即將到來。從目前的情況來看，自從我們第一次引入 “響應式網頁設計” (RWD) 以來，僅僅10多年的時間，這個生態系統已經準備好迎接CSS發生一些相當大的改變。

讓我們深入研究一下可以期待哪些類型的變化，這會如何改變我們的設計方法，以及我們如何考慮界面設計。

///

用戶能夠設置基于個人偏好的“媒體查詢”

簡單來說，我們可以期待新的基于偏好的“媒體查詢”來幫助我們更好地“響應”用戶。它們將使我們能夠根據用戶自己的特定偏好或需求來設定網頁樣式。這將使我們能夠根據用戶的體驗偏好來調整用戶體驗。

這絕不是一個完整的列表，但能給你一些想法，這些基于偏好的“媒體查詢”可能包括：

這些將幫助我們構建更具活力和個性化的網頁體驗，專門滿足我們用戶的專屬需求，尤其是那些希望網站易于訪問的用戶。更進一步說，這些基于偏好的“媒體查詢“尊重任何用戶已經在操作系統設置的偏好。舉個例子，當用戶的操作系統偏好設定為“減少動效”時，他們很可能不喜歡你頁面上的超級華麗的介紹、加載或飛入的動畫動效。我們應先尊重他們的偏好，并為其他人提供“動效增強”的體驗。

另一個流行的媒體查詢是@prefers-color-scheme（配色偏好設定），它允許我們根據用戶的偏好和操作系統中的設置將我們的設計更改為“亮色模式”或“暗色模式”。這不依賴于用戶需要手動來更改“暗色模式”，它會自動發生。

///

“容器查詢”為你的設計系統注入新的生命力

CSS 中最令人興奮的新興領域之一是“容器查詢”（container queries），通常也稱為“元素查詢”。從基于“頁面”的“響應式”設計到基于“容器”的“響應式”設計的轉變對發展“設計系統”的作用價值不容低估，盡管今天使用它并不安全，但重要的是要了解其發展方向。

簡而言之，“容器查詢”將允許我們基于“父級容器”而不是整個頁面來設置規則。這意味著任何組件都更加獨立，與現代設計系統保持一致，真正成為“即插即用”模塊，可以轉移到任何頁面或布局，而且無需根據新環境重新考慮所有內容。

“容器查詢”為我們如何規劃、設計和構建特定組件提供了一種更加動態的方法，因為組件本身擁有它的響應信息。

甚至Ethan Marcotte自己也表達了為什么“容器查詢”如此重要，我們應該研究一下。

///

考慮各種形態因素

由于各種“形態因素”（form factors）的變化和擴展，例如新的屏幕類型，可折疊屏，我們需要“媒體查詢”來考慮這些場景。在這里提到的所有內容中，請記住，這是最具實驗性的，并且只是一項正在進行的工作，仍在嘗試解決我們可能遇到的任何復雜問題，同時考慮未來“形體因素”可能會如何發展。

在可折疊屏場景中，原型中有一些“媒體查詢”可以讓你定位屏幕跨度以及我們如何讓內容根據新環境進行適配。例如，你可以在一個屏幕上放置一個收起的側邊欄（或菜單），并允許內容在另一個屏幕上展開并隨頁面滾動。

///

為什么我們需要它？

我知道你在想什么，我們已經從事網頁設計并使用“響應式”來進行網頁設計10余年了。我們對其相當滿意，那么為什么要改變呢？如果我們真的以終局視角來看響應式設計，那么它就是關于個人用戶的用戶體驗設計。我們正朝著一個與每一位個體用戶高度相關的時代邁進。我們的網頁體驗應該去適應用戶的需求偏好。隨著設計系統的發展以及我們如何創建更便攜的網頁，諸如“容器查詢”之類的工具將變得非常有意義。

配圖：CSS 將基于各個層級來確定用戶的最佳體驗

考慮到這一點，這意味著我們現在可以使用基于頁面的媒體查（包括跨越屏幕的細微差別）來設計宏觀布局；使用容器查詢的組件設計微觀布局；使用基于用戶偏好的媒體查詢，根據用戶獨特的偏好和需求定制用戶體驗。

對于新的響應式設計，有許多新概念正在被原型化和概念化-請看下面的延伸閱讀。所有這些協同工作的方式需要我們從根本上轉變我們對設計和用戶獨特體驗的看法。我們需要更加適應這樣一個事實：即我們的設計不是靜態的，不僅在布局上，還有在用戶可獲得的體驗中，我們需要學會在這種模糊性中做出計劃。網頁和設計的未來變得越來越復雜，我們需要適應和挑戰自己，理解“新響應式”體驗的意義。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加：ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

       HMI是Human Machine Interface 的縮寫，“人機接口”，也叫人機界面。凡是參與人機信息交流的領域都存在著人機界面。本文將深度剖析車載界面的設計要點及注意規范。

       智慧城市的建設趨勢越來越顯著，政府對于汽車智能化、信息化發展非常重視，汽車駕駛體驗感與個性化的設計也會成為我們對于汽車選購的參考和方向，自從人們對于用戶體驗的重視，人機交互設計工作內容也成為重要環節。

       對于人機界面，首先我們要明確一些概念。

1、人機界面與人們常說的“觸摸屏”有什么區別？

從嚴格意義上來說，兩者是有本質上的區別的。因為“觸摸屏”僅是人機界面產品中可能用到的硬件部分，是一種替代鼠標及鍵盤部分功能，安裝在顯示屏前端的輸入設備；而人機界面產品則是一種包含硬件和軟件的人機交互設備。在工業中，人們常把具有觸摸輸入功能的人機界面產品稱為“觸摸屏”，但這是不科學的。

2.人機界面產品中是否有操作系統？

任何人機界面產品都有系統軟件部分，系統軟件運行在HMI的處理器中，支持多任務處理功能，處理器中需有小型的操作系統管理系統軟件的運行。基于平板計算機的高性能人機界面產品中，一般使用WinCE,Linux等通用的嵌入式操作系統。

       我們做的交互場景是有車輛行駛的，所以首先是要考慮安全因素，美觀其次，因此在特殊環境下操作車載系統，我們無法用傳統移動端沉浸式的設計思維來設計車載的界面與功能，需要放下所謂的美學，緊扣實際場景下的交互方式與用戶需求來設計，因為在極短時間內導致我們必須對所有可能用到的功能入口一步即達，對信息的布局必須做到一眼即見。

       汽車HMI有自己的設計原則和設計規范以及美學理念。

汽車行業本身是一個有著強烈美學理念和設計規范的行業，其實準確的說應該是汽車HMI中控設計是基于自身傳統規范，結合互聯網移動端和Web端的基礎上，慢慢形成了一種新的設計規范。

       在開始講解之前，我們首先要了解官方的一些設計規范。

1. 阿里 Alios 開放平臺

https://miniapp.alios.cn/index#/document

2. 百度車載生態開放平臺

https://chelianwang.baidu.com/homepage/openPlateform/design/sec-4-1.html

3. 谷歌駕駛

https://developers.google.com/cars/design/design-foundations

4. 蘋果 Apple Car Play

https://www.apple.com.cn/ios/carplay/

5. 華為車機三方應用交互設計規范

https://developer.huawei.com/consumer/cn/doc/50902

       我們還要了解車內屏幕的類型，主駕駛前面的儀表盤、HUD和中控屏幕，副駕駛和后排的娛樂屏幕。

1. 儀表盤

汽車儀表盤是反映車輛各系統工作狀況的裝置。一般由時速表、轉速表、機油壓力表、水溫表、燃油表以及電子指示燈等組成。汽車儀表是駕駛員與汽車進行信息交流的重要接口。當今純液晶屏的儀表盤占市場主導地位，純機械、燈顯、段碼將退出歷史舞臺。

2. HUD

平視顯示器（Head Up Display），最早是航空器上的飛行輔助儀器，運用在戰斗機上，由于戰斗機上很多信息需要飛機駕駛員隨時查看，避免駕駛員低頭看儀表而分心，隨后又普及在民航客機上，由于HUD的方便性以及能夠提高飛行安全，這項技術后來也發展到汽車行業，汽車搭載的HUD抬頭數字顯示功能，是利用光學反射的原理，將重要的行駛信息胎壓、速度和轉速等信息投射到駕駛艙前段玻璃上面，在駕駛過程中不用分心看儀表盤，減輕眼睛的疲勞，給駕駛帶來便利和安全。

       此前，HUD前裝市場基本被日本精機、德國大陸、日本電裝、偉世通等國外巨頭壟斷，且競爭格局高度集中，前五名企業市場份額超95%。近三年，隨著國內智能駕駛技術商業化落地加快，不少自主品牌供應商開始嶄露頭角，且爆發力十足。HUD的發展會越來越迅猛，原因主要有以下幾點。

1、HUD作為ADAS人機交互的窗口，可以呈現駕駛輔助信息，提升駕駛的安全性和舒適性，使駕駛者擁有更佳的應用體驗；

2、為提升市場競爭力，車企對自動駕駛和智能座艙重視度提升，尤其是自主品牌車企近年在國家智能網聯發展戰略的推動和扶持下，轉型動作快、力度大，產品創新和應用上也更加大膽和前衛。、

3、HUD技術上取得突破，顯示效果大幅改善；

4、隨著技術升級，HUD配套價格逐漸下降，性價比逐步提升；

3. 娛樂屏幕

后排娛樂屏更像是一個平板，主要功能點為視頻、音樂、游戲等等，幫助后排乘客打發時間，所以后排的娛樂系統就是為娛樂而生，無需考慮安全性。

車載界面的設計原則

1.迅捷性

與人們常常所說的三秒設計原則類似。移動端系統為沉浸式操作，而車載系統不一樣，在駕駛過程中，用戶95%的精力在于聚焦駕駛上行為上，用戶只能抽取僅5%左右的精力與時間來操控車載。因此也就決定了車載系統的功能邏輯，信息布局都必須在極短的時間內以最好的方式呈現。

而如果用戶沒有在這個時間以內完成操作任務，要么用戶選擇放棄，重新再來；要么用戶花費更多時間和精力，但這樣駕駛的危險系數會成倍增長。經筆者多次在不同路段試驗，統計下來平均每次操作，即視線與注意力專注在車載上的時間，無法超過三秒，事實上，當進入第三秒時，已不得不需要利用余光開始注意前方路況了。

因此，在三秒以內，無論是用戶第一次操作失敗，重新注意路況后，再重復操作，還是用戶持續操作直到任務完成，都是非常危險的行為，在這里，由于用戶試錯的成本非常巨大，也因此交互的設計與信息布局的設計都需要做到最極致的狀態。

       隨著大屏、多屏化的發展趨勢，觸摸和語音控制應時而生，為了增強操作合理性，以及減少或避免觸摸屏的誤觸功能。從信息輸入來看，以觸控、語音為主，手勢、視覺交互為輔；從反饋輸出來看，以視覺、語音、觸控交互為主，嗅覺交互為輔。

人機交互定義需要區分車輛是行駛中還是靜止狀態，車輛在行駛中，對于需要駕駛員操作反饋的交互行為需要遵循3S原則（上面提到的三秒原則），降低安全隱患。甚至有一些交互動作在車輛行駛過程中需要禁用的。

2. 聚合性

得益于計算機算法的強大，汽車功能越來越完善，信息量也越來越大，為了讓用戶有更好的體驗，避免過多信息的干擾，必須做到界面顯示輕量化。

這也是為什么飛機駕駛艙內、國際空間站內的各種操控開關拉桿都是星羅密布式的擺放，并非以如今的科技無法做到像科幻片里一樣簡潔干凈的操控臺，而是因為考慮到在實際應用場景下，專業素質的人員不需要也沒有時間去欣賞美觀的界面，學習我們所認為的交互方式。

保障關鍵信息是醒目的，容易讓用戶視覺快速捕獲，在各種環境場景下具有良好的可見性和易讀性，無需駕駛員費力尋找和識別。

3. 及時性

這里所說的及時性指的是反饋信息的及時性，我們要考慮實現全方位的信息提示，著重考慮視覺層面和聽覺層面。

在駕駛的過程當中，司機的雙手被占用，于是眼睛和耳朵感知要提高，與移動端的視覺顯示不同，HMI設計師需要注意除了基礎的視覺顯示規范外，還需格外注意與安全相關信息的展示、視覺警告、文字易讀性和顯示眩光等顯示問題。

在車輛行駛過程中，對于司機來說，聽覺反饋也是很有必要考慮的場景，通過語音反饋司機需要獲取的信息，能讓司機盡量保持視覺焦點在路況上。多場景的融合考慮信息獲取的效率，能減少在開車過程中的安全隱患。

我們不僅要考慮設計層面，還要考慮到交互層面。

交互方式

（1）觸控

這里分兩種，一種是通過按鍵控制；一種是通過觸屏控制。

都是通過不斷的觸控功能按鈕行程鍛煉肌肉記憶，現在的趨勢越來越趨向重觸屏，輕按鈕，這樣不僅系統迭代成本小，功能可以動態分布。

但是對于一些精準調節的功能還是按鍵控制好一些。

微軟 的Surface Dial可以給我們很好的啟發，智能旋鈕可以解決大部分屏幕調節的不精準的痛點，而效率又高。

（2）語音

在汽車人機交互中，語音交互被認為是車內場景下最自然的交互方式，而語音交互需要一個載體來傳達多樣化的情感。

語音控制的前景主要在于兩個因素，一個是可以把除了界面以外的利用起來，一個可以與HMI自由交談，二是最小化HMI手動操作產生的干擾，增加安全性。

（3）手勢

手勢交互是對語音交互、觸控交互的很好補充，能夠讓車主通過簡單的手勢和語音就能完成車內的交互任務，也是能夠增加交互趣味性、表達情感、傳達情緒的另一個自然交互方式。

常用的手勢：單指滑動（上下左右）、雙指滑動（左右）、五指抓取等。

HMI的交互手勢不同于手機和IPAD，手機和IPAD握在手里，左右手都可以操作，多指組合的可能性也多，而HMI的手勢定義，更多的是需要滿足駕駛員的使用場景，屏幕是固定在車上的，要規避掉一些不方便的手勢。

比如雙指往上滑動就很不方便，向上推不靈活，也有阻力。

       所以要想系統整體跳出基礎可用性范圍，進階到好用的層次，系統對各種復雜交插的應用場景的處理需要更加智能（如導航中的來電，緊急路況的提示），對車內環境控制（如聲音、氣溫）需要更加敏感。車載系統的設計相比于移動端有著更明顯的約束，不論是從空間、時間、行為、心智，都有著明顯獨特的場景和特點，要做好車載系統設計，我們需要有豐富的同理心以及親身體驗并反復驗證設計。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

如果將【UI設計】比喻成一位新型時髦的青年，那么【公共藝術】則是一位已在歷史長河中摸爬滾打數十載的老者，一位偉人曾說過：人類的發展從歷史中獲得啟迪，故筆者旨在從探討公共藝術在地性觀念的角度，來淺談如何在UI設計中凸顯情感關懷。

1 公共藝術在地性觀念

“藝術是什么”

當代藝術作品（圖片來源：網絡）

學者王瑞蕓認為當代藝術邊界模糊且藝術家創作手段任意， 不僅沒有一個能夠稱得上固定的風格，也不存在相應的美術主張，因此無法用語言對其進行概述。 而二十世紀實驗藝術的先鋒馬塞爾·杜尚 (Marcel Duchamp) 曾用種種藝術實踐行為向公眾宣告：經由藝術家之手創造的就是藝術。

“什么是公共藝術”

公共藝術作品（圖片來源：網絡）

學者金江波在其專著《地方重塑—公共藝術的挑戰與機遇》中指出：公共藝術體現的藝術主張依托于關注人文的公共理想。 復旦大學的湯筠冰教授曾在其公開課《城市公共藝術》中講述到，公共藝術與純藝術的不同之處體現在，公共藝術中包含了一種地域文化。

相較于說不清、道不明的“藝術”，公共藝術有別于純藝術“為我性”的情感抒發，更加強調藝術作品與空間、人之間有意識產生的情感聯系，用語言來概況其特性可以總結為：公共性、藝術性、在地性。

“什么是公共藝術在地性”

公共藝術作品《爬墻的熊貓》（圖片來源：網絡）

相較于“公共性”與“藝術性”的“基本性質”，筆者認為受“他人”影響而產生的“在地性”更能明顯地體現公共藝術中的文化關懷，什么是公共藝術在地性觀念，用一句話來概括：公共藝術與空間的關聯性。

縱觀藝術史，公共藝術的在地性范式可以總結為以下三類：

(一） 與空間的融合關聯性

古希臘帕特農神廟（圖片來源：網絡）

最常見的一種在地性范式，起源于人民的基本需求已得到滿足，開始追求更高層次的精神追求——對美的追求。例如古希臘帕特農神廟的建造依托于古希臘人民對細節美與民主性的崇尚與追求，以及中世紀的“城市美化運動”，“依附于建筑的藝術”，均是以在依托于周圍環境、融入當前環境的方式來體現公共藝術的藝術性價值。

(二） 與空間的沖突關聯性

藝術家佩爾施克策劃的公共藝術活動《紅球計劃》 （圖片來源：網絡）

主要集中在后現代主義時期，后現代主義藝術批判以往藝術的精英化，追求藝術“生活化”。這一時期許多藝術家將與需求空間格格不入的通俗化形象放大植入公共空間中，產生與當下空間沖突的視覺感官體驗，以“介入”空間的“逆向之美”的方式來體現出了公共藝術的藝術評判性價值。

藝術家奧登伯格創作的《世俗豐碑系列》（圖片來源：網絡）

(三） 與空間的無關聯性

《瑞秋豬》與《乳牛大游行》（圖片來源：網絡）

出現在后現代主義時期，此時藝術家致力于使藝術擺脫架上束縛，追求藝術的開放性，諸如《柏林熊》、《乳牛大游行》以及《瑞秋豬》等社區參與類公共藝術作品，以藝術家主導的活動形式讓大眾參與到藝術創作過程中，打破以往以藝術家為中心開展的藝術創作行為，去中心化，此類公共藝術擺脫空間的束縛，其在地性含義由參與者構成，其開放性藝術價值仿佛實現了大同之美。

2 在地性藝術語言與UI設計-以沖突關聯性為例

(一）關聯性的意義

例子1

上圖中左邊是由英國藝術家安尼什.卡普爾（Anish Kapoor）創作的公共藝術作品《云門》，將芝加哥市民引以為傲的摩天大樓與天際線的形象利用鏡像反射的原理映射在光滑的雕塑表面，凸顯城市文化與自信。右邊為新疆克拉瑪依油田新地標，似乎與芝加哥的《云門》沒有太大的區別，拋開是否購買版權這一點涉及到法律層面的考量，從藝術價值層面來考量這件“作品”，周遭土黃色的大樓并非是需要凸顯的城市文化與特質，強硬的植入只會削弱了作品的藝術價值。

例子2

再舉一個例子，以美的美居APP的缺省頁為例，在最新的版本中，美的美居設計團隊將缺省頁的視覺元素替換成了自身IP形象“小藍”，運用與產品相關聯的視覺元素，不僅在美化的基礎上增強了頁面與產品的關聯性，更是彰顯了品牌自信。

以上兩個例子也是為了說明，在UI設計中視覺元素的運用需站在“有理有據”的立場上，貫徹“取之有道 用之有理”的思想。以公共藝術中“與空間的沖突關聯性”藝術語言為例，來探討下此藝術語言在UI設計中的運用。而選擇沖突性藝術語言來探討的原因，主要在于該藝術語言包含的批判性、先鋒性與幽默性特質，能夠滿足當今人們對情感化產品的需求。

(二）公共藝術中的沖突性

聊到公共藝術，不得不提到的一位藝術家：致力于把生活用品變成藝術品——克萊斯.奧登伯格（Claes Oldenburg），其世俗豐碑系列作品運用幽默風趣的藝術手法，提取與日常生活中通俗的現成物的形象介入公共空間，是對藝術精英化以及國際主義千篇一律設計風格的不滿與批判，以及藝術生活化精神的體現。該藝術形式可以引起大眾對其的新鮮感以及體現出一種趣味性，但當好奇與新鮮感退卻之后，對其剩余價值的質疑也是各學者對這種藝術形式爭議不斷的原因，持有質疑態度的學者認為“沖突式”公共藝術具有時效限制性，只能在時代特定階段發揮其藝術作用。

筆者認為站在城市形象塑造的角度來看：

a、"沖突式”公共藝術能夠體現一個城市的包容性與開放性，萬千藝術姿態都能被接受與容納。

b、藝術家選取的藝術形象均來源于人們的日常生活形態，其藝術元素并不因地域等物質外在條件的不同，而對不同城市地區的人們產生不同意義，其體現的是一種全球共通性文化，其藝術性是針對城市公共空間而言。 

綜上所述，筆者認為在沖突式在地性語言中，運用的藝術元素具有以下幾點特征：

通俗性：大眾對其有相似的認知與理解

原生性：夸張、未修飾的規模與形態來展示

戲謔性：不按常理出牌，以“格格不入”的形式存在

(三）沖突關聯性語言在UI設計中的運用

例子1

針對上述三種特征，在一些APP的UI設計中，也可以找到相應的案例。例如B站番劇《總之就是非?？蓯邸返倪M度條的圖標設計案例之一，該案例的運用起因在于該番劇的劇情甜份過高，網友們紛紛用彈幕類似于表達“我酸了”的通俗網絡語言來刷屏，引起了B站的關注，于是就有了檸檬代替進度條的操作。

例子2

而Instagram推出的視頻產品「IGTV」，其加載頁借用了8090年代人們對老式電視信息收視不良的記憶——雪花屏元素，該元素與當前高科技信息技術時代的沖突性不僅營造出了炫酷的視覺效果，同時也使得產品飽含了懷舊的情感關懷，代表了一個時代的通俗回憶，得以與用戶產生共情。

例子3

嗶哩嗶哩閱讀的停更通知用更加通俗易懂的【請假】來代替，以及克拉克拉APP用【拔掉電線】的口語化用語來描述退出直播間的行為，不僅拉近了產品與生活的距離，也凸顯了幽默的情感化設計。

雖然藝術與設計的邊界日益模糊，但是二者之間仍然具有本質上的區別，那么我們在探討藝術語言在設計中的運用時，應把用戶體驗的良好與普適性也考慮其中，將藝術語言進行設計化的處理，結合上述藝術案例與設計案例來看，沖突式在地性藝術語言在UI設計中的運用時，其運用元素的特性可以歸納為：

• 基礎條件-通俗性：能夠引起大眾的共識與話題，大多數的靈感來源于生活；

• 必要條件-適應性：將原元素的特性進行特質提煉與設計化，與公共藝術不同，在UI設計中是將原元素的特征運用在設計中，同時注重例如提煉的雪花屏幕的閃爍特質，而不是直接將整個雪花屏幕運用在界面上；

• 增味條件-創新性：跨領域找參考元素。（舉個例子，從B領域提取一個元素運用在A領域上，但B領域和A領域的在大家通俗認知中的兼容性并不強，其創新性是由疏離性凸顯）

  
  

簡而言之：

1、保證元素的通俗性，結合當代語境，亦可以理解為#話題性#；

2、可跨領域找參考元素；

3、需要對元素的特質進行加工提?。?/strong>