Chromium Gerrit の新しいコミットは、「マテリアル デザイン 2」を参照しているようです。これは、Google のマテリアル デザイン言語の新しく改良されたバージョンである可能性があります。
Android Lollipop と同時にリリースされた統一デザイン言語であるマテリアル デザインは、フラットなパステル カラー パレット、奥行き、柔らかな照明、リアルな物理学を特徴としています。 これは、スキューモーフィズムに頼ることなく、現実世界のオブジェクトの触感を模倣することを目的としています。 Googleは、これを「古典的な原理」とテクノロジーの「革新性と可能性」を統合したものだと説明している。
マテリアル デザインは 2014 年のデビュー以来、YouTube、Chrome、Gmail、ハングアウト、Google カレンダーなどの Google アプリはもちろん、Android エコシステム全体に野火のように広がっています。 フローティング アクション ボタン、心地よい色、エレベーション テクニックが、 材料コンポーネントライブラリ マテリアルの Android ではカスタム ビューの形で、Web では標準 HTML のようにインポートして使用できるバンドルの形で優れています。 タグ。
マテリアル デザインの 4 周年を前に、Google は次世代のマテリアル デザインを準備しているようです。 紙とインクからインスピレーションを得た 美的： マテリアルデザイン2. マテリアル デザイン 2 に関して公開されている貴重な情報はほとんどありません。今週、Chromium Gerrit の新しいコミットでその存在が明らかになりました。 私たちはそれがであるとは主張しません。 ちゃんとした 最新のマテリアル デザイン フレームワークの後継ですが、コミットメントでは、カラー パレット、図像、タッチスクリーンの動作に、微妙ではあるものの顕著な変更が示されています。
マテリアル デザイン 2 が Chromium Gerrit に登場
2 月初旬、Chromium Gerrit の新しいコミットにより、Chrome の「マテリアル デザイン 2」UI が実装されました。 タブストリップ - Web ページのタイトル、ファビコン、Chrome の上にある「タブを閉じる」ボタンを含むドラッグ可能なタブ アドレスバー。
コミットは大幅ではありませんが、Chrome のタブの外観に変更を加えます。 タブストリップの高さを増やします。 タブのコンテンツレイアウト、特にタイトルとアラートインジケーターに不特定の調整を加える。 タブのタッチ幅を減らし、タブの標準幅を増やします。 彼らは明示的に しないでください タブ アラート インジケーターの色、タブ区切り文字の色、「新しいタブ」ボタン、またはタブのタイポグラフィを変更します。
明らかに、コミットは「マテリアル デザイン 2」タブの閉じるボタン アイコンと「Google マテリアル デザイン 2 に必要な基本的な色定数」を参照しています。
コミット コードをさらに詳しく調べると、灰色、赤、赤と濃い Chromium テーマの新しい「マテリアル デザイン 2」カラー パレットと、標準の Chrome ツールバーとシークレット ツールバーの新しい色が表示されます。 16 進ルックアップ テーブルを使用して RGB スウォッチを生成しました。
マテリアルデザイン2の赤は 少し濃いめの 現在のマテリアルデザインよりも レッド800 (#C62828) および レッド600 (#E53935)、一方、新しいグレーの色合い (#3C4043、#5F6368、#BDC1C6、#F1F3F4) はより明るく青みがかった色合いです。 マテリアル デザインは従来のグレーを特徴としており、R=G=B ですが、ここではすべてのシェードで B>G>R になります (ただし、255 のうち 1 ～ 4 のみ)。
マテリアル デザイン 2 準拠バージョンの Chrome には、現在のビルドよりもはるかに明るいツールバーも搭載されており、現在の灰色がかった配色と比較するとほぼ白です。
新しい色が適用されたツールバーがどのように見えるかの簡単なモックアップを次に示します。
最後に、コミットにより新しいものが追加されます IsTouchOptimizedmaterial() にフラグを立てます マテリアルデザインコントローラー、これはタッチに最適化されたマテリアル デザイン 2 要素を指す可能性があります。 私たちは 1 月初旬に、Google の改善に向けた取り組みについて書きました。 Chrome OS デバイスにおける Chrome Web ブラウザのタッチスクリーン サポートは、その継続のようです。
たとえば、このコミットは、タッチスクリーン デバイスでは Chrome の SetStackedLayout が「常に」になることを示しています。 有効になっています。 デフォルトでは、多数のタブを開くと、他のタブの幅が縮小して、 新しいタブ。 Chrome の積み上げレイアウトでは、元のタブの幅が維持され、その後ろに新しいタブが追加されます。
マテリアル デザインにおける色の重要性
では、マテリアル デザインのより広い文脈において、新しい色は何を意味するのでしょうか?
マテリアル デザインは、単にレイヤー、コンポーネント、要素、およびそれらが相互に関連してどのように動作するかということだけではありません。 Google のデザイン モチーフの中心となるのは、ハイコントラストのテーマ、明るい色、大胆なハイライトであり、マテリアル デザインに準拠したアプリを他よりも際立たせるのはこれらの要素です。
Googleがサンプルを提供 カラーパレット プラットフォーム間で「うまく連携」するように設計されており、ソースを活用する開発者を奨励します。 500 種類の異なるコレクションからのアプリのプライマリ カラー (「ドミナント」カラーとも呼ばれる) 見本。 (「青」、「緑」、「紫」、およびその他の基本色を考えてください。) 必要に応じて、700 色の拡張コレクションから二次色を調達します。 (最も重要な UI 要素の補色、重要度の低い UI 要素の類似色、および次のサブセットからの 3 次色) 300).
色はマテリアル デザイン階層において重要な役割を果たします。 明るい色は重要性を示唆しており、目立つボタンやその他のインタラクティブな要素のために予約されています。 一方、控えめな色は、テキスト フィールド、プログレス バー、リンク、および UI のその他の部分にアクセントを付け、視覚的な面白さを加えます。
マテリアル デザイン 2 のカラー パレットについてわかっていることによると、レッド 600 や 800 など、Google の「プライマリ 500」のスウォッチの少なくともいくつかは、マテリアル デザインの以前のバージョンよりも暗いです。 しかし、灰色のような他の人々は、逆の扱いを受けます- Chrome タブのモックアップに表示されているグレーと白のスウォッチは両方とも、より冷たいグレースケールとより高い青色の値を持っています。.
現時点で、マテリアル デザイン 2 について実際にわかっているのはこれだけです。 しかし、コミットは舞台裏で何かが起こっていることを示している可能性があり、それが本当であれば、遅かれ早かれもっと多くのことが分かるかもしれません。 Googleは、Androidの次期メジャーバージョンであるAndroid Pを早ければ3月にも公開する予定で、Google I/O 2018は5月8日に開幕する。 どちらもマテリアル デザイン 2 を理解する絶好の機会です。
2018 年 2 月 4 日更新: この記事の公開直後、コミットは非公開になりました。これは、秘密にしておくことを意図していた可能性があります。 私たちは今後も Chromium Gerrit の変更をチェックし、変更が見つかった場合はこの記事を更新します。