當前位置:商標查詢大全網 - 商標註冊 - 全面解讀微軟全新的設計語言——Fluent設計系統

全面解讀微軟全新的設計語言——Fluent設計系統

[設計思維][人機交互]

微軟在Build 2017的開發者大會上發布了壹種全新的設計語言——Fluent Design System,徹底改變了沿用多年的扁平矩形用戶界面。新的設計語言不僅與視覺有關,還涉及交互方式、空間和全新元素的整合方式。微軟高度概括了FDS要實現的三個轉變:

1.從平面設計語言到沈浸式多維設計語言的轉變;

2.從小屏、觸控向跨平臺、輸入轉變;

3.從消費和交流轉變為創造和自我治療。

微軟操作系統部門副總裁喬·貝爾菲奧裏(Joe Belfiore)在Build 2017開發者大會上介紹FDS時說:“是時候告別局限於壹個平面的長方形了。新的設計語言不僅與視覺相關,還強調交互模式、空間和全新元素的融合。”

在FDS宣傳資料中,微軟團隊用13個形容詞介紹了設計理念,我將其解讀為以下10種類型:適應性設計、形象級設計、創意設計、簡易設計、模擬設計、吸引人的設計、通用設計、包容性設計、表現性設計和連貫性設計。同時,微軟將FDS高度概括為壹句話“壹個復雜世界的雄辯設計系統”,我描述為:“在壹個復雜的世界裏,沒有另壹個世界。”

全面解釋|積木(組件)

組件FDS設計語言的核心元素確保用戶在不同尺寸和不同輸入設備上的跨平臺體驗中表現出色,構建下壹個Windows時代。

構成壹個組件的五個要素是:光、深度、運動、材質和尺度。

綜合解讀|光(光效)

事實上,在Windows 10 RS2和以前的系統上,有亮度變化的反饋,而在FDS,則強調輕人機交互反饋。在壹些二維設備的程序中,隨著鼠標的移動方向,在元素本身和周圍元素上產生光反饋效果。這突出顯示了用戶正在與之交互的控件狀態。

在使用MR設備時,用戶將指針懸停在屏幕上,光線以小發光圈的形式向用戶提供反饋,這有助於用戶將UI元素與虛擬環境分開。

全面解讀|素材(Material)

微軟團隊利用Fluent設計系統中的物理紋理和空間深度的概念來區分各種UI組件元素,並將其置於視覺層次中。關鍵是調整這種材料的構成元素,以獲得其獨特的外觀和性能,並為用戶提供個性化的偏好體驗。這是UWP應用程序風格體驗的壹個重大改進。

背景透明、高斯模糊和圖層紋理增加了用戶界面的視覺深度和維度,建立了視覺層次。排除混合風格用於確保放置在丙烯酸背景上的元素具有高對比度和可讀性。色彩疊加為用戶提供了色彩個性化的機會,創造了平易近人的體驗。

這五種元素的疊加構成了壹種清新、透明、高效的材料,微軟稱之為亞克力材料。

全面解讀|亞克力材料使用規範

1.如果妳想在應用中創造不同的視覺效果,妳可以在應用的整個區域使用丙烯酸材料。

2.對於垂直導航的應用,丙烯酸材料應該應用於包含導航元素的輔助窗格。

微軟官方規定了三種亞克力材質的設計規格,分別是60%亮/深色,70%亮/深色,80%亮/深色。這裏演示60%亮光亞克力材質的具體算法。

4.對於有三個不同垂直窗格的應用程序,非主要內容應使用丙烯酸材料。

對於最接近主要內容的輔助窗格,應使用80%的亮(暗)壓克力材料。

對於遠離主要內容的第二個輔助窗格,應使用60%的亮(暗)壓克力材料。

4.對於有三個不同垂直窗格的應用程序,非主要內容應使用丙烯酸材料。對於最接近主要內容的輔助窗格,應使用80%的亮(暗)壓克力材料。對於遠離主要內容的第二個輔助窗格,應使用60%的亮(暗)壓克力材料。

設計的時候要慎重使用多層亞克力材料。在體驗中,不應該讓用戶在使用應用時,在腦海中模擬三維情境下的Z軸透視,這也可能導致視覺上出現意想不到的視錯覺。

綜合解釋|深度(視差效果)

視差是壹種視覺效果,可以在用戶界面中產生層次結構。靠近觀察者的物體比背景中的物體移動得快。視差產生深度感、透視感和運動感。

如上所述,列表和背景圖像的視差發生變化,並且列表被放置在背景圖像的頂部。為了達到視差效果,我們希望離用戶最近的物體比離用戶較遠的物體移動得更快。因此,當用戶滾動界面時,列表的移動速度比背景圖片快,從而產生深度變化的錯覺,大大提高了用戶的好感度和用戶粘性。

綜合解讀|運動(動畫)

1.連接動畫(連接動畫)

內聚動畫用於過渡兩個或多個不同視圖之間的元素變化,有助於在用戶瀏覽相關內容時保持視圖之間的連續性,實現動態、自然、快速、炫酷、引人入勝的用戶體驗,能夠快速吸引用戶的註意力,大幅提升用戶的參與度。

註意上面的動畫。在原型中,壹個內聚的動畫用於動態擴展項目圖像。當用戶與該圖像元素交互時,它成為下壹級水平標題內容,在用戶瀏覽相關內容時保持視圖之間的連續性。

2.協調動畫(協調動畫)

配合動畫是壹種特殊類型的入口動畫,其核心形式是“動”。用戶選擇的元素通過協調的動畫在某個方向上移位,並在下壹級在某個方向上顯示。

例如,在上面的動畫中,UI控件使用協調動畫。協調的動畫可以為元素之間的切換增加更多的視覺趣味,並進壹步吸引用戶對源視圖和目標視圖之間變化的註意。

Belfiore將壹個帶有動作元素的應用程序比作壹個演員用動作引導觀眾進入壹個故事。"運動元素具有特殊的魔力,可以讓我們的體驗充滿活力."他說。"同時,它可以很容易地引導用戶從壹個任務過渡到下壹個任務."運動元素也體現了創意、寫實、放松、吸引、表達、連貫、連貫的設計理念。

完整解釋|比例(縮放)

Scale的關鍵作用是在不同設備上重塑和呈現應用。在電腦顯示器上看起來合適的對象在AR或VR耳機中觀看時可能會變得太大或太小。因此,虛擬對象大小的縮放是第壹視角UI體驗的關鍵因素之壹。

對於規模,在本次開發者大會上,微軟也結合現有產品提出了未來發展的大方向。沈浸式數字對象的擴展也是3D交互界面和VR/AR時代必不可少的功能。隨著虛擬現實的發展,規模技術將更多的應用到產品中。

綜合解讀| Windows Story Remix視頻創作工具

Story Remix最大的特點就是簡單易用。其中,Remix 3D功能可以自動提供壹個故事,用戶可以根據自己想要表達的邏輯和內容重新定制,吸引各個層次的創作者。View 3D功能可以直接調用3D對象來創作VR作品。

Story Builder功能允許用戶使用照片、視頻和音樂快速創建壹個接近專業的精彩故事。Windows Story Remix允許用戶上傳照片、視頻

“添加3D對象”來創建有趣的混合現實場景。除了編輯和創建照片和視頻,Story Remix還支持直接混合音樂,就像Paint 3D壹樣。

它還集成了對Remix 3D社區的支持。

在微軟深度學習技術的支持下,Story Remix可以識別照片中的人和物,可以根據人、物、時間等幾乎任何屬性直接給照片和視頻添加註釋或塗鴉,並且還支持電容筆墨操作。

微軟在Build 2017開發者大會上給FDS做了不到壹個小時的演講,包括壹些現有的功能演示,包括Windows 10。

壹些關於未來的抽象概念。“流暢”不僅僅是Windows 10的特權,可能會滲透到整個UMP系統,就像Google的材質設計壹樣。在未來,我們可能會看到微軟的品牌從完全扁平化的設計演變成更多種類和行為的東西。值得註意的是,微軟Fluent設計系統並非以Windows命名,這也反映了微軟想成為3D用戶界面先驅的野心。