マイクロソフトはフルーエントデザインシステムをウェブにもたらします

読書時間アイコン 2分。 読んだ


読者は MSpoweruser のサポートを支援します。私たちのリンクを通じて購入すると、手数料が発生する場合があります。 ツールチップアイコン

MSPoweruser の編集チームの維持にどのように貢献できるかについては、開示ページをお読みください。 続きを読む

Build 2017で、Microsoftはエコシステムにまったく新しいデザイン言語を導入しました。 フルーエントデザインシステム。 Fluent Designは、次のWindows 10FallクリエーターアップデートでWindows10に登場する予定であり、MicrosoftもそれをWebに提供しています。 同社は本日、すべての新しいFluent Designコンポーネントを含むWebフレームワークのメジャーアップデートを公開しましたが、非常に有望に見えます。

Microsoft’s Fluent Design system consists of 5 different components: Depth, Motion, Scale, Material, and Light. The updated Web Framework includes 4 of these components, but the Scale component is arriving later. The company’s official website for the Web Framework includes some really beautiful demos of how the Fluent Design would look on Microsoft.com, the Microsoft Account dashboard, and the Microsoft Store. There are also a couple of interactive demos that web developers and designers can play around with it, including a demo for the Depth component and one for the Reveal effect from the Light component.

Microsoft.comがFluentDesignでどのように見えるかを示す概念は次のとおりです。

https://youtu.be/oJnnznK_4-g

次のビデオでは、コンシャスヘッダー効果が実際に動作しているのを見ることができます。 この効果は、Windows10のGrooveMusicアプリで見られます。このアプリでは、ユーザーがページをスクロールすると、ヘッダーがすっきりとしたアニメーションで折りたたまれます。

https://www.youtube.com/watch?v=i0atXrZswwc&feature=youtu.be

フルーエントデザインをウェブにもたらすマイクロソフトは間違いなく非常に巨大です。 同社は、ユーザーがすべてのデバイスで一貫したエクスペリエンスを確実に得られるようにする必要があります。FluentDesignをWebに導入することで、それは確実に可能になります。 もちろん、Microsoftが独自のWebサービスにFluent Designを実装し始めるまでには、おそらく数か月から数年かかるでしょう。ですから、まだ興奮しすぎないでください。

フルーエント・デザインについて詳しくは、 MicrosoftのWebフレームワークはこちら、 そして、次のことができます ここですべてのコンポーネントのドキュメントを読んでください。 これはMicrosoftの従業員とパートナーに制限されているため、Bootstrapのようなもののようにこれを使用することは明らかにできません。

トピックの詳細: 流暢, 流暢なデザイン, マイクロソフト流暢なデザイン, MicrosoftWebフレームワーク, MWF, Webフレームワーク, 10窓