169
168

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

「Material Design」を Android アプリに取り入れよう!

Posted at

はじめに

本稿では、Google I/O 2014 で発表された新しいUXの体系「Material Design」のガイドラインのうち、'比較的導入が容易なもの'とその導入方法について紹介します。

「Google Design」トップ
http://www.google.com/design/

「Material Design」紹介動画
https://www.youtube.com/watch?v=Q8TXgCzxEnw#t=31

文字サイズ

タイポグラフィの標準スタイルの中で、文字サイズの基本セットについて触れています。文字サイズは原則、12、14、16、20、34spを使いましょう!
http://www.google.com/design/spec/style/typography.html#typography-roboto

res/values/dimen.xml 内にこんな感じで文字サイズを定義しておくとよいと思います。

dimen.xml
<resources>

    <dimen name="textsize_xsmall">12sp</dimen>
    <dimen name="textsize_small">14sp</dimen>
    <dimen name="textsize_medium">16sp</dimen>
    <dimen name="textsize_large">20sp</dimen>
    <dimen name="textsize_xlarge">34sp</dimen>

</resources>

タブレット向けに文字サイズを変えたい場合はこちらの記事をどうぞ。
http://qiita.com/suzukihr/items/1a3204e6c713cf870f8d

画面レイアウト

スペーシングについてかなり詳細に説明されています。このあたりがきちんと守られていると美しい画面ができてユーザに好印象を与えられると思います。意図的にデザインをする場合を除き、このページを参考にレイアウト作成をしましょう!
http://www.google.com/design/spec/layout/metrics-and-keylines.html#metrics-and-keylines-keylines-and-spacing

尚、このページ以外でも、コンポーネンツのページで、スペーシングや View のサイズ・比率についてはかなり細かく触れていますのでご参考まで。

配色

今風のカラーパレットが紹介されていますので、ここにある色の組み合わせでアプリを彩りよくしましょう。
http://www.google.com/design/spec/style/color.html

アクションバー

最近はトップにメイン画像を持ってきて、スクロールの動きに合わせてアクションバーにfadeの効果を入れる画面をよく見かけますね。こちらのライブラリが参考になると思います。
https://github.com/ManuelPeinado/FadingActionBar

代替テキスト
画像引用元ページ:http://www.google.com/design/spec/style/typography.html#typography-standard-styles

ナビゲーション

左上のメニューを押して出てくるあれです(Navigation Drawer)。今回の変更で左から出すナビゲーションは ActionBar に重ねて出るようにするんですね。似たような動きをするライブラリもいくつかありますが、導入するならなるべく標準のものを入れましょう。

オフィシャルのドキュメントはこちら。
https://developer.android.com/design/patterns/navigation-drawer.html

ソースコードはこちら。
https://developer.android.com/training/implementing-navigation/nav-drawer.html

代替テキスト
画像引用元ページ:http://www.google.com/design/spec/components/dividers.html#dividers-types-of-dividers

169
168
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
169
168

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?