幫你看懂微軟最新發(fā)布的流暢設(shè)計(jì)體系

2017-12-29 1141 0
阿本:就在剛剛舉辦的 Microsoft Build 2017 中,微軟對(duì)外公布了它們最新的設(shè)計(jì)語言——“Fluent Design System”,這一消息給廣大設(shè)計(jì)師又帶來了一針強(qiáng)心劑,作為軟件大鱷的微軟也開始要在設(shè)計(jì)語言的道路上扮演一個(gè)指路人的角色了嗎?在視頻中,他們分別提出了 Light、Depth、Motion、Material、Scale 幾個(gè)理念,讓我們通過官網(wǎng)的解釋以及結(jié)合視頻看看這幾個(gè)理念分別表示什么。另外,由于 Fluent Design 的官網(wǎng)是不兼容 Chrome 的(簡(jiǎn)直不可思議),導(dǎo)致之前對(duì)這幾個(gè)理念的理解主要是基于發(fā)布會(huì)視頻,所以會(huì)有很多不對(duì)的地方,我在接下來的分析中做了修正。 Fluent Design 1. Light 之前通過視頻案例我把 Light 理解成了 Fluent Design 推崇輕量合理的交互方式,而官方將 Light 解釋為“光”并且引入到了設(shè)計(jì)語言中,認(rèn)為光是一種能夠給用戶提供邀請(qǐng)的交互方式,通過照亮其他元素吸引用戶,同時(shí)因?yàn)樗旧砗w的“溫暖”特質(zhì)同樣能夠與“邀請(qǐng)”相輔相成。 Material Design 通過光引入了 Shadow,而 Fluent Design 引入了 Light,不得不說它們都希望把自己的設(shè)計(jì)語言立意在大自然的基礎(chǔ)上,從而更貼近人們的生活,在交互中盡可能調(diào)用用戶的“自主心智”理解設(shè)計(jì)。 2. Depth 對(duì) Depth 的理解與官方解釋基本一致,F(xiàn)luent Design 同樣打破平面理念引入了三維空間的概念,將 Z 軸也考慮到了設(shè)計(jì)和交互中(類似 Material Design 的Elevation),從而增加設(shè)計(jì)載體的空間,讓更多設(shè)計(jì)的交互體現(xiàn)方式與生活相輔相成,同樣也是為了在 VR/AR 中能夠采用這套設(shè)計(jì)規(guī)范。 3. Motion 動(dòng)效已經(jīng)成為了一個(gè)優(yōu)秀產(chǎn)品必不可少的一環(huán),同樣也類似 Material Design Motion 一樣,F(xiàn)luent Design 應(yīng)該也會(huì)在這塊提出更多的合理指導(dǎo)意見,從而讓自身平臺(tái)產(chǎn)品在動(dòng)效這塊有更多參考。 4. Material 從官方解釋來看,Material 這個(gè)特性確實(shí)是為了強(qiáng)調(diào)設(shè)計(jì)語言中關(guān)于材料的概念,在符合條件的產(chǎn)品中采用自然界中與其相契合的材料表現(xiàn)(例如毛玻璃材料、紙張材料等),從而給用戶合理的心理感知和體驗(yàn),這也是將設(shè)計(jì)與生活以及自然界結(jié)合的一種理念。 5. Scale 視頻在這里引入了幾個(gè)不同規(guī)模的交互場(chǎng)景(小屏幕觸控、VR 大場(chǎng)景交互),意義應(yīng)該是要表明該設(shè)計(jì)語言能夠 cover 住所有規(guī)模的場(chǎng)景設(shè)計(jì)需求(果然野心夠大),看了下官方對(duì)這個(gè)理念的解釋,基本契合。最后我們?cè)倏纯匆曨l結(jié)尾的一些基于該設(shè)計(jì)語言制作的演示內(nèi)容: 演示中甚至涵蓋了 VR 和 AR,看來微軟這次確實(shí)在下一盤大棋,雖然有些都是概念設(shè)計(jì),但是設(shè)計(jì)界就是需要有這樣的突破性思維和想法,才有可能創(chuàng)造出更富有前瞻性的設(shè)計(jì)語言。非常期待 Fluent Design System 能夠給設(shè)計(jì)界帶來如何的改變。 Fluent Design System 官網(wǎng)(不兼容 Chrome,可以用 Safari 正常瀏覽)。
7
評(píng)論區(qū)(0)
正在加載評(píng)論...