A design system only comes to life when it’s used to create meaningful experiences. Last year, Google introduced the Material Design Awards to recognize best-in-class achievements in employing Material Design. This effort extends beyond our direct team as well—earlier this year, at Google I/O 2016, Robinhood was presented with the Google Play Award for Best Use of Material Design. With so much exc
はじめに マテリアルデザインという言葉は知っていましたが、それが一体なんなのかを正しく理解しないまま、 「これからは、マテリアルデザインだぜ」のような顔して、生活していましたが、 知ったかぶりしているのがバレる前に、少し学んでおこうと思いました。 マテリアルデザインとは 2014年にGoogleが発表した「デザインのガイドライン」。 直訳すると「物質デザイン」。 マテリアルデザインの目的 スマートフォン、タブレット、テレビ、メガネ、腕時計などのデバイスで、 統一されたデザインを取り入れることにより、操作性も統一され デバイスが変わっても使いやすいUIを実現できるとか。 現実世界のルール(奥行きや、影など、質量)を取り入れることで、直感的な操作を実現します。 マテリアルデザイン誕生までの歴史 1.スキューモフィズムでのデザイン スキューモフィズムとは スキューモーフィズム(skeuomorp
iPhoneとAndroidではiPhoneのほうが良くできているが、iOSのフラットデザインとAndroidのマテリアルデザインでは後者の設計が優れている。マテリアルデザインは、デザインとエンジニアリングが高いレベルで融合していて、ロジカルで非常に美しい。 以下、自分の理解をまとめたメモ。 紙とインク マテリアルデザインは「ペーパー」と「インク」のメタファーでできている。 ペーパーの特徴 バーやボタンといった画面上のUIコンポーネントは、バーチャルな紙でできたカードと考える。また、このペーパーは1dpの厚さを持っている。 ペーパーは純白の矩形、あるいはシンプルな円形である。三角や星型といった複雑な形はとらない。そのような複雑な形状や模様はインクが担当する。 現実とことなり、このペーパーは自由に伸縮することができる。 マテリアルデザインにおけるレイアウトは、複数のペーパーを並べたり、重ねた
Web and mobile apps move away from pages, towards completely personalized experiences. And this experience built on an aggregation of many individual pieces of content. Cards are the new creative concept. Regardless of how you feel about the concept, cards are here to stay. What are Cards? Cards are those little rectangles full of inclusive images and text that serve as entry points to more detail
マテリアルデザインのコンポーネントのうち、 Card Chips Tabs の3つについて簡単にまとめる。 各コンポーネントがどういう目的で使われ、利用するときに気をつけるべきことはなにかを理解するためのメモ。 デザイナーさんが上げてきたデザインがマテリアルデザイン的に正しいかをチェックできるくらいの基礎知識を身につけることが目的。 カードは固有の関連する情報をまとめた一枚の紙であり、写真、テキスト、単一の対象へのリンクなどで構成される。 カードは、より複雑で詳細な情報への エントリーポイントとして用いられることが多い。 カードは一定の幅と様々な高さを持つ。 カードはフリップして背後に情報を表示するといったことはできない。 Fig 1. カードの利用例 使い方 カードは 異なるタイプのオブジェクトから構成されるコンテンツを表示するのに便利な手段である。 また、似たようなオブジェクトでも、
エンジニアの黒田です。 この度Android版「マネーフォワード」アプリをマテリアルデザインにフルリニューアルしました。 そしてなんと!!! おかげさまでGooglePlayの「2014年ベストアプリ」に選出いただきました! GooglePlay 2014年ベストアプリ アプリのDLはこちらから 家計簿マネーフォワード【投資・資産管理】 この記事ではマテリアルデザイン対応するにあたり、考えたことや実際に書いたコード、使ったツールなどあれこれと書いてみたいと思います。 マテリアルデザインとは マテリアルデザインとはGoogleが発表した新たなデザインガイドラインです。 モバイルに限らず、AndroidWearやAndroidTVなど様々なデバイスでもユーザーに対して同じ体験を提供することを目的としています。 マテリアルデザインに関する細かい説明は割愛しますが、GoogleMapやGMailな
Material Design Lite Material Design Lite lets you add a Material Design look and feel to your websites. It doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers, and offer an experience that is immediately accessible. Get started now. Templates The MDL components are created with CSS, JavaScript, and HTML. You can use the compone
マテリアル・デザインって何? Androidデザイン責任者にインタヴュー2014.07.08 12:008,736 福田ミホ 目指すのは、脳にスッと入ってくるデザイン。 2年前にグーグルがAndroid Jelly Beanを発表したとき、米Gizmodoでは当時Androidのユーザーエクスペリエンスのディレクター、マティアス・デュアルテ氏とAndroidの方向性について議論しました。時は変わって先週のGoogle I/Oでは、今はデザイン担当ヴァイスプレジデントとなったデュアルテ氏がマテリアル・デザインを発表しました。 米Gizmodoでは再びデュアルテ氏の話を聞く機会を得て、Androidのデザインの試みと、それがグーグルの未来にもたらす意味について聞いてきました。 マテリアル・デザインは大胆な試みです。ひとつのUIフレームワークを、腕時計から車までグーグルの生態系の全デヴァイスに使
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く