Material Designのイントロを訳してみた。

今更ながらGoogle I/O 2014で発表されたっていうGoogleの新しいデザインGoogle DesignのMaterial Designを読んだ。せっかくだから訳してみた。

Material Design

Introduction

We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. This is material design. This spec is a living document that will be updated as we continue to develop the tenets and specifics of material design.

我々は、良いデザインのクラシックな原則を技術と科学の革新や可能性と合成するビジュアル言語の創造に挑戦した。これがマテリアルデザインである。この仕様は、我々がマテリアルデザインの信条と特性について開発を続けるように(？)更新される生きたドキュメントである

Goals

Create a visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science.

良いデザインのクラシックな原則を技術と科学の革新や可能性と合成するビジュアル言語を創造する。

Develop a single underlying system that allows for a unified experience across platforms and device sizes. Mobile precepts are fundamental, but touch, voice, mouse, and keyboard are all first-class input methods.

プラットフォームやデバイスのサイズを超えて、統一された体験を与えるような単一のシステムを作る。モバイルの教訓(?)は重要だが、タッチ、音声、マウス、それにキーボードは素晴らしい入力メソッドである。

Principles

Material is the metaphor

A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.

マテリアルメタファーは、合理化された空間とモーションの系とを統一した理論のことだ。マテリアルは、実際に触れることのできる現実に基づいており、紙とペンの研究にインスパイアされており、かつ技術的に進んで、想像力と魔法を受け入れる(?)。

Surfaces and edges of the material provide visual cues that are grounded in reality. The use of familiar tactile attributes helps users quickly understand affordances. Yet the flexibility of the material creates new affordances that supercede those in the physical world, without breaking the rules of physics.

マテリアルの表面と角は、現実に基づいた視覚的なキッカケを与える。似たような触覚の属性を使うと、ユーザは即座にアフォーダンスを理解できる。なおかつマテリアルの柔軟性は物理的ルールを破らず、現実のアフォーダンスに取って代わるような新しいアフォーダンスを創造する。

The fundamentals of light, surface, and movement are key to conveying how objects move, interact, and exist in space in relation to each other. Realistic lighting shows seams, divides space, and indicates moving parts.

光、表面、運動の根本は、オブジェクトがどう動くか、どう作用するか、そして互いに空間の中でどう存在するかを伝達する鍵である。現実的な照明は縫い目を表し、空間を分け、動く部分を示す。

Bold, graphic, intentional

The foundational elements of print-based design—typography, grids, space, scale, color, and use of imagery—guide visual treatments. These elements do far more than please the eye; they create hierarchy, meaning, and focus. Deliberate color choices, edge-to-edge imagery, large-scale typography, and intentional white space create a bold and graphic interface that immerses the user in the experience.

印刷に基づくデザインの基本要素、タイポグラフィ、グリッド、余白、スケール、色、そして画像を使うなど、視覚的な加工のガイドとなる。これらの要素は目を十分に楽しませるし(微妙)、階層、意味、そして焦点を作る。慎重な色の選択、隅々までの画像、大きいスケールのタイポグラフィ、そして意図したホワイトスペースは、ユーザをその体験の虜にする、大胆でグラフィカルなインタフェースを作り出す。

An emphasis on user actions makes core functionality immediately apparent and provides waypoints for the user.

ユーザのアクションを強調すると即座にコアな機能が明らかになり、ユーザに中間地点を提供する。

Motion provides meaning

Motion respects and reinforces the user as the prime mover. Primary user actions are inflection points that initiate motion, transforming the whole design.

モーションは、原動機たるユーザを重んじ、助ける。主要なユーザアクションは、モーションを開始し、全体のデザインを変換する変曲点である。

All action takes place in a single environment. Objects are presented to the user without breaking the continuity of experience even as they transform and reorganize.

アクションはみな一つの環境で行われる。オブジェクトは、変形したり再編されたりしながらも、体験の継続性を壊さずに表現される。

Motion is meaningful and appropriate, serving to focus attention and maintain continuity. Feedback is subtle yet clear. Transitions are efficient yet coherent.

モーションは意味があり、適格で、注意を惹きつけ、継続性を維持する。フィードバックは、巧みでなお明確である。変化は効果的でなおかつ筋が通っている。

訳したつもりで、今なおイマイチ意味がわからない部分も多々あって困っちゃってる。なんとなくニュアンスは読み取れてるつもりではいて、でも正確な意味を汲み取りたいんだが。

Androidで標準ギャラリーを起動して選択した画像を取得するには。

Androidなアプリを開発していて、端末に保存されている画像をどうこうしたいって時に、標準のギャラリーを表示して、選択された画像をもらえたら楽だわ〜ってことで、作り方を書いておきます。

画面遷移

メインとなるアクティビティであるボタンを押すとギャラリーが起動する。ギャラリーで画像を選択すると起動元のアクティビティに戻る、というシンプルなもの。

ギャラリーを起動する。

Activityからギャラリーを起動するには、Intentを使って、startActivityForRequest()で起動する。

/** gallery request. */
private static final int REQUEST_GALLERY = 1;

/**
 * ギャラリー起動ボタンイベントハンドラ。
 * ギャラリーを起動する。
 */
public void onLaunchGallery(View view) {
  Intent intent = new Intent(Intent.ACTION_PICK);
  intent.setType("image/*");
  startActivityForResult(intent, REQUEST_GALLERY);
}

ギャラリーからの戻りを処理する。

startActivityForResult()で起動した別アクティビティの戻りを処理するコードを書かなきゃいけない。 このメソッドは、requestCodeにはstartActivityForResult()に渡したリクエストコードが、resultCodeには処理結果が、dataには引き継ぎ情報が入ってくる。ので、だいたい次のようなコードになる。 実際の画像へのアクセスの詳細は、次回以降に書く。

@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
  switch (requestCode) {
  case REQUEST_GALLERY:
    if (resultCode != RESULT_OK) {
      Log.e(TAG, "error occured in gallery. code=" + resultCode);
      return;
    }

    // ギャラリーで選択した画像は、dataから取得できる。
    try {
       // このままでは画像のサイズが大きい場合に、OutOfMemory例外が発生するので注意。
       InputStream in = getContentResolver().openInputStream(data.getData());
       Bitmap image = BitmapFactory.decodeStream(in);
       in.close();
    } catch (Exception e) {
      // FIXME
    }
    break;
  default:
    break;
  }
}

Android Design Principles を訳してみた。

Android Design PrinciplesにAndroidアプリのデザインの原則が記載されている。アンドロイドアプリ開発初心者としては見逃せないので、ちょっと訳してみる。

---

Enchant Me

Delight me in surprising ways

A beautiful surface, a carefully-placed animation, or a well-timed sound effect is a joy to experience. Subtle effects contribute to a feeling of effortlessness and a sense that a powerful force is at hand.

うっとりさせてね

驚きの方法で楽しませてね

美しい見た目、慎重に配置されたアニメーション、あるいは絶妙なタイミングの効果音を体験すると楽しいよね。繊細な効果が、便利な感じや強力な力が手元にある感覚を与えるんだよ。

Real objects are more fun than buttons and menus

Allow people to directly touch and manipulate objects in your app. It reduces the cognitive effort needed to perform a task while making it more emotionally satisfying.

ボタンやメニューなんかより現実のものの方が面白いよね

人々にオブジェクトを直接触らせたり操作させよう。これは、感情面でより満たされると同時にタスクを実行するのに必要な認知の労力を下げることになるんだ。

Let me make it mine

People love to add personal touches because it helps them feel at home and in control. Provide sensible, beautiful defaults, but also consider fun, optional customizations that don't hinder primary tasks.

私のものにさせてよ

人々は個人的なタッチ(?)を追加するのが大好きなのよ、それがアットホームな感覚や支配している感覚を得られるから。理にかなって美しいデフォルトを提供しよう、かつ面白さと元々のタスクを邪魔しないような任意のカスタマイズを考えよう。

Get to know me

Learn peoples' preferences over time. Rather than asking them to make the same choices over and over, place previous choices within easy reach.

私を知ってよ

常に人々の好みを学ぼう。何度も何度も彼らに同じ選択をさせるのではなく、簡単に手の届くところに前の選択肢を配置しよう。

Simplify My Life

Keep it brief

Use short phrases with simple words. People are likely to skip sentences if they're long.

人生をシンプルに

簡潔に保とう

シンプルな単語による短いフレーズを使おう。人々は長い文章は読まない。

Pictures are faster than words

Consider using pictures to explain ideas. They get people's attention and can be much more efficient than words.

絵は言葉より速い

アイデアを説明するのに図や写真を使うことを検討しよう。人々の注意を引くし、言葉よりより効果的だよ。

Decide for me but let me have the final say

Take your best guess and act rather than asking first. Too many choices and decisions make people unhappy. Just in case you get it wrong, allow for 'undo'.

お決めになって、でも最後は私が決めるわ

最初に質問するんじゃなく、ベストな推測と行動をとろう。選択と決定が多すぎると人々は不幸になるよ。もし(推測と行動が)間違っていたら、UNDOをさせればいい。

Only show what I need when I need it

People get overwhelmed when they see too much at once. Break tasks and information into small, digestible chunks. Hide options that aren't essential at the moment, and teach people as they go.

必要なとき必要な物だけ見せてよ

人々は一度にたくさんのものを見ると圧倒されてしまうんだ。タスクや情報を小さく、消化しやすい塊に分解しよう。その瞬間に必要じゃないオプションは隠してしまって、人々がどこへ向かうべきかを教えよう。

I should always know where I am

Give people confidence that they know their way around. Make places in your app look distinct and use transitions to show relationships among screens. Provide feedback on tasks in progress.

常にどこにいるのか知らなくっちゃ。

人々に、自身の周りがわかってるっていう自信を与えよう。アプリでの場所を明確にし、トランジションを使って画面間の関連を示そう。進行中のタスクのフィードバックを提供しよう。

Never lose my stuff

Save what people took time to create and let them access it from anywhere. Remember settings, personal touches, and creations across phones, tablets, and computers. It makes upgrading the easiest thing in the world.

何も失わないわ

人々が時間をかけて作ったものは保存して、どこからでもアクセスできるようにしよう。Remember settings, personal touches, and creations across phones, tablets, and computers. It makes upgrading the easiest thing in the world.(この2文、どう訳したものか・・)

If it looks the same, it should act the same

Help people discern functional differences by making them visually distinct rather than subtle. Avoid modes, which are places that look similar but act differently on the same input.

同じにみえるのなら、同じに振る舞わなきゃ

微妙な差ではなく、見た目の明確な違いで、人々が機能的な違いを理解できるようにしよう。Avoid modes, which are places that look similar but act differently on the same input.(この文も難しいなぁ。)

Only interrupt me if it's important

Like a good personal assistant, shield people from unimportant minutiae. People want to stay focused, and unless it's critical and time-sensitive, an interruption can be taxing and frustrating.

大事な用がないなら邪魔しないでね

優秀な秘書のように、余計なことから人々を守ろう。人々は集中したいものだし、クリティカルでもtime-sensitiveでもない割り込みは、疲れていらいらさせるだけだからさ。

Make Me Amazing

Give me tricks that work everywhere

People feel great when they figure things out for themselves. Make your app easier to learn by leveraging visual patterns and muscle memory from other Android apps. For example, the swipe gesture may be a good navigational shortcut.

驚かせてよ

どこでも動く仕掛けをちょうだい

人は自身で物事を理解したときに感動するんだよ。君のアプリは他のアプリよりも見た目のパターンや筋肉の記憶による効果によって学習しやすいものにするんだ。例えば、スワイプジェスチャーはいいナビゲーションのショートカットだよ。

It's not my fault

Be gentle in how you prompt people to make corrections. They want to feel smart when they use your app. If something goes wrong, give clear recovery instructions but spare them the technical details. If you can fix it behind the scenes, even better.

私のせいじゃないわ

人々に訂正を促すような場合は優しくしよう。君のアプリを使うとき、スマートだと感じたいんだ。もし何かが間違ったら、わかりやすい解決策を提供するんだけど、技術的な詳細には触れちゃいけない。もし裏で治せるんなら、なおいいよ。

Sprinkle encouragement

Break complex tasks into smaller steps that can be easily accomplished. Give feedback on actions, even if it's just a subtle glow.

おすすめを散りばめる

複雑なタスクを簡単にできる小さなステップに分解するんだ。で、微妙な効果であってもアクションに対してフィードバックを与えよう。

Do the heavy lifting for me

Make novices feel like experts by enabling them to do things they never thought they could. For example, shortcuts that combine multiple photo effects can make amateur photographs look amazing in only a few steps.

力仕事はお願いね

初心者に、果たして出来るかどうかなんて考えさせずに、物事ができるようにすることで熟練者のように感じさせよう。例えば、いくつかのエフェクトをまとめたショートカットで、ほんの数ステップでアマチュアの写真が素晴らしいものになるよね。

Make important things fast

Not all actions are equal. Decide what's most important in your app and make it easy to find and fast to use, like the shutter button in a camera, or the pause button in a music player.

大事なことは速く

すべてのアクションは同じじゃない。君のアプリにとって何がもっとが重要かを決めて、すぐに見つけて使えるようにしよう、カメラのシャッターボタンとか、音楽プレイヤーの一時停止ボタンみたいに。

---

実際にアプリを作っていく過程で、チェックすると良さそう。訳、間違っていたらご指摘頂けると助かります。