マテリアルデザインに関する翻訳サイクルを継続します。以前の記事はこちらとこちらでご覧いただけます 。 本日の投稿では、あるレールから別のレールへの設計の最も複雑な翻訳の1つについて説明します。







アプリケーションがさまざまな機能に富んでいる場合、テキストや標準要素だけでなく、iOSアプリケーションからのインターフェイスのトレースやスキューモーフィズム、新しい視覚言語への切り替えに関しても元のデザインが開発されています。タスク。 今日はそのようなアプリケーションについてお話します。



注： 前回同様、ほとんどの投稿は実際の言語と最初の人で書かれているため、翻訳には必要に応じてメモとコメントが提供されます。



Aviary Photo Editorを新しいGoogleスタイルで編集した方法 - エミーヒント 、 Aviaryのチーフデザイナー。



3年間、私はAndroidプラットフォームのAviaryのチーフデザイナーとして働いています。 多くの人がモバイル写真の創造性への欲求を表明する助けを借りて、アプリケーションのデザインを開発できたのは幸運でした。 最近、Googleのマテリアルデザインに従って、アプリケーションのデザインを完全に再設計しました。 しかし、私は再設計プロセスだけでなく、プラットフォームの視覚言語の変更に起因する私自身の専門的な進歩についても話したいです。 今、プラットフォームによって設定されたルールは、私を刺激し、制限しません。 プラットフォームがどこに動いているかを理解するには、最初に何が起こったかを理解することが重要です。 Aviaryのオリジナルスタイルをマテリアルデザインに変更することは簡単ではありませんでした。 しかし、これのおかげで、モバイルデザインについて多くのことを学び、Androidプラットフォームのユニークな機能にも夢中になりました。

Aviary for Androidの開始方法

Aviaryで働き始めたとき、Android向けiOS向けにアプリケーションの設計を調整する仕事がありました。 それから私はiPhoneを使って、モバイルデザインの複雑さしか知りませんでした。 大学でしばらくAndroidスマートフォンを使用していましたが、実際にはわかりませんでした。



最初に、Androidでテストデバイスを調べ、Android向けにiOSの設計を適合させることができる公式を考え出そうとしました。 iOS用のAviaryアプリは、濃い影とテクスチャーを備えたskeuvorfスタイルで作成されました。 その後、Androidはビジュアル言語Holoを使用し、それをよりヘビーウェイトなデザインに適応させるための基礎として採用しました。 テクスチャをきちんとしたグラデーションに置き換え、すべての画面に鋭い角を追加しました。 そのため、Android用のAviaryデザインの最初のバージョンが登場しました。







注： 同時に、ご覧のとおり、Holoのガイドラインはまだ遠く、インターフェースには足がどこから伸びているかが示されています。



当時Aviaryは主にiOSで動作していたため、Androidプラットフォームは実験の分野になりました。 ほとんどの機能はiOSのアプリに最初に登場したので、デザインに関しては完全に自由でした。



比較的少数のユーザーしかいなかったため、彼らはAndroidアプリケーションにあまり期待していませんでした。 しかし、このプラットフォームの重要性をすぐに認識しました。 Androidでのユーザー数とダウンロード数が増加し始めたため、同社はプラットフォーム用のアプリケーションに真剣に取り組むことにしました。



当時、私は長年のAndroidユーザーであり、彼のエバンジェリストである開発者と協力しました。 彼は、私自身がiPhoneを使用し、同時にAndroid用のデザインを使用することを不快に思っていました。 2013年にHTC Oneを購入しました。 私はアプリケーションのダウンロードを開始しましたが、その中にはiOSで見られるような文体的な統一性がないことがわかりました。 電話が提供する設定の数、アプリケーション自体の柔軟性、およびそれらの間の相互作用に驚く。 多くのアプリケーションに目を通した後、ついにAndroidといくつかの設計モデルの特徴的な機能を見ました。 そのため、アプリケーションを徐々に改良し、プラットフォームにとってより便利で自然なものにしました。

提示された材料設計

2014年6月、Googleはマテリアルデザインを開発しました。 その時までに、私は2年間Androidを使用していましたが、アプリケーションの設計は壊滅的に時代遅れであることが判明しました。 私たちが行った小さな変更は、アプリケーションに深刻な影響を与えることはなく、Androidプラットフォームの利点を十分に理解することはできませんでした。 そのため、マテリアルデザインの出現を利用して、Android専用の新しいスタイルのアプリケーションを開発しました。



ドキュメントの調査から新しいデザインの開発プロセスを開始しました-Googleチーム、それを公開し始めたばかりでなく、このトピックに関するさまざまな有用なリソースを提供します。





Googleマテリアルデザインガイドライン



2014年の夏、私はこれをすべて学び始め、できるだけ多くのことを学ぼうとしました。 幸いなことに、再設計に関する情報は前回よりもはるかに多くありました。 Googleがリリースしたドキュメントは、マテリアルデザインの目的と本質を完全に説明しています。 会社の動機は明らかに、プラットフォームを統合する視覚言語を作成するための基盤を作りたいという願望でした。



私は、材料設計の基本概念を研究し始めました。紙とインクのメタファー、透明なグラフィック層の影響、動きの使用は、プラットフォームに必要な完全性を与えました。 ただし、マニュアルは、メーラーや読書アプリケーションなど、多数のリストを含むアプリケーションを対象としているように見えました。



注： これは、導入部で説明したとおりです。 アプリケーションが「カード」、入力フィールド、いくつかのボタンで構成され、メインコンテンツがテキストである場合と、非常に複雑なものを作成しようとする場合の1つです。たとえば、Aviaryで行ったようにフォトエディターです。



^{材料は比phorです| 明瞭、グラフィック、自然| 動きは重要です。 Googleの3つのマテリアルデザインの原則}



材料の研究を続けて、私は考えました：私たちのアプリケーションはこのフレームワークにどのように適合するでしょうか？ コンテンツをどのように表示しますか？ どのボタンがボリュームがあり、どのボタンが平らで、どれが浮いていますか？ インスタントアクションが非常に多いときに1つのアクションボタンを使用する方法 トランジションアニメーションを埋め込むためのリニア写真編集プロセスのどこに？ アプリケーションにカラー要素を追加し、それでも写真に集中する方法は？ しかし、これらの問題に集中する代わりに、最初はアプリケーションから不要なものをすべて削除しました。





^{Googleボタンスタイルのガイドライン}

カラーパレット

私は、いくつかのグローバルな視覚的変化から始めることができると決めました。 まず、一般的な用語で各画面を設計しました。 後にスタイルの特徴とデザインの移行を考え出すことにしました。 次に、配色を取り上げました。 マテリアルデザインのパレットに沿って、企業に適したプライマリ、セカンダリ、およびアクセントカラーを選択しました。 基本色を基本的なグレーブルーにしました。 それは中立で、黒ほど対照的ではありませんが、写真は背景に対して際立っています。 アイコンとテキストに白を使用し、アクセントとして青を使用しました。 アプリケーションからシャドウ、グラデーション、およびストロークを削除することは、すでに大きな変更でした。





^{カラーパレットAviary}

バッジ

次のステップは、アイコンをリサイクルすることでした。 私たちの古いバッジは大きすぎて重く、時代遅れに見えました。 アイデアを見つけるために、アイコンを描くためのガイドラインを調べ、既存のGoogleアイコンを調べました。 これにより、Aviaryのムードとスピリットを反映して、独自のスタイルを維持しながらAndroidのスタイルを維持することができました。 シェイプの繰り返しを使用して、対称で明確なアイコンを描画し、各ツールのスケッチを簡略化しました。 レイアウトに読み込んだ後、何かが形になり始めました。





^{Googleガイドを使用したAviaryのバッジ}

写真の選択

アプリケーションを制限まで単純化したので、ユーザーのワークフローを検討し始めました。 シンプルで直線的であり、ユーザーが標準ギャラリーから写真を選択することから始まります。 この部分をグローバルな変更なしで残すことにしました。 上部パネルを新しいパネルに交換し、アカウント設定につながるサイドパネルを追加した場合を除きます。 さらに、ギャラリーに入るためのフローティングボタンを作成しました-この画面のメインアクションです。





^{左：ギャラリーのオリジナルバージョン右：マテリアルデザインのギャラリー。}

アプリケーションで作業する

ユーザーは最初に写真を選択し、次に水平パネルのツールを選択します。 そのような要素は20個あり、特定のツールを開いた後、彼は写真付きのアクションのオプションを見つけました。 たとえば、改善ツールにはこのようなオプションが3つあります。 2番目のレベルを最初のレベルとは異なって見えるようにしたかったのです。 これを行うために、背景色を明るい色に置き換え、アイコンに丸い境界線を追加しました。 これは、ユーザーが既に別のレベルにいることを理解するのに役立ちます。 また、プライマリカラーからセカンダリカラーに移行するために、円形のドロップダウン「インク」アニメーションを追加しました。





^{左：改良機能の元のバージョン、右：再設計後の同じ機能}

ツールストアとアプリ内コンテンツ

追加のツール（およびアプリケーションの主な焦点）の別の例は、特にエフェクト、ステッカー、フレーム、フィルターなどのコンテンツツールです。 それぞれのメニューには、無料の要素と有料の要素があります。 さらに、「ツールストア」への入り口もあり、追加のコンテンツを表示することもできます。 「ツールストア」に変更を加えることから始めることにしました。 Google Playでのアプリケーションのプレゼンテーションに焦点を当てました。広告画像でカードとメニュータブを使用しました。 このデザインは、ユーザーに購入プロセスを紹介するのに役立つと判断しました。 したがって、材料設計要素の追加により、購入プロセスがアプリケーションにより調和して統合されるようになりました。 カードのスタイルを更新し、アプリケーションメニューのタブの下にスライダーを追加して、あるタイプのコンテンツから別のタイプに簡単に移動できるようにしました。





^{左：「ツールストア」の元のバージョン、右：Material Designの「ツールストア」のバージョン}

色と画像

また、「道具屋」では、色や画像を扱う機会がありました。 この手法は、材料設計ガイドで推奨されています。 ツールボックスごとに、慎重に選択した写真を追加します。 その上に、ツールの機能を示します。 そして、ここでカラーガイドを使用しました 。 写真から最も明るい色を選択し、より鮮やかにし、画面インターフェイスで使用することにしました。 さらに、画像を拡大して境界線を削除しました。 そのため、ユーザーの注意は写真に完全に集中しています。 また、コレクションの見出しに色を付けるために色を使用しました。 これにより、各選択に個性が与えられ、写真と調和した色で作業画面に色を付けることができます。





^{左：コンテンツ画面-古いバージョン、右：マテリアルデザインカラーのコンテンツ画面}

ダイナミックカラー

カラーガイドを試した後、アプリケーションの他のセクションで使用できることがわかりました。 編集した写真の最も明るい色を取り、インターフェイスで使用しました。 スライダーと読み込みアイコンの場合にも同じ手法を使用しました。これは、新しい写真ごとにアプリケーションが変化する方法です。 最大の効果を得るために、写真の色を標準のブラシの色に追加しました。 そのため、いくつかの標準パレットに加えて、写真の色を追加し、写真とカラーインターフェイスを調和させました。





^{写真自体の色を使用する描画ツール}

アプリケーションアイコン

そして最後に、アプリケーション自体のアイコンを再設計しました。 Googleマニュアルを使用して、古いバージョンを改善しました。 重いグラデーションと不要な詳細を削除しました。 その結果、新しいバージョンはシンプルで明るいことがわかりました。 写真に負担をかけずに、深さとレイヤーを表示するために、Google Material Designパレットから色を取り、アイコンに影を追加しました。





^{左：アイコンの元のバージョン、右： マテリアルデザイン}

打ち上げ

2015年4月9日に数か月間の努力を重ねた結果、ようやく新しいバージョンのアプリケーションがリリースされました。 そして、Androidユーザーは私たちの努力に感謝しています。 彼らの多くが結果を気に入ってくれたのはとても嬉しかったです。

プロジェクトを完了した後、最初はアプリケーションを理想的に適合させるためにガイドラインに従おうと努力しすぎたことに気付きました。 しかし、私は、Googleがすべての人に経験を繰り返すことを望まないことに気付きました。 リーダーシップは単なる示唆であり、インスピレーションの源です。 Googleにとって、アプリケーションは美しく、単一ベースで構築されていることが重要ですが、各開発者は独自のスタイルで作成できます。 もっと自由に考えようとすると、頭の中でクリックしました。プラットフォームの視覚的言語はそれを制限するものではありません。創造性の出発点を与え、自分の個性を表現することができます。



読んでくれてありがとう！ 気に入ったら、「推奨」ボタンをクリックしてください。 Google Playの AviaryからPhoto Editorをダウンロードできます。

おわりに

Aviaryアプリケーションは、マニュアルに十分な注意と理解を加えた最も複雑なアプリケーションが、現代のマテリアルデザインアプリケーション、クリーンで整頓されたインターフェイスの優れた例に変わる方法の良い例です。



これら3つの成功事例、ガイドライン、推奨事項が、アプリケーションを新しい視覚言語に翻訳するのに役立つことを願っています。 開発者コンテストに参加して 、貴重な賞品を獲得してください。主なものはユーザーの利便性と使いやすさであり、他のすべてはユーザーフレンドリーなインターフェースを実現するための単なるツールであることを忘れないでください。