吸い込まないAndroidアプリのUIを設計する方法

プログラマーと開発者は一般的にデザイナーではありません–これは真実であると広く受け入れられています。開発者は、アプリを機能させることに集中する傾向があります。 –デザイナーは、アプリを美的に魅力的なものにすることに重点を置いています。 。しかし、なぜ開発者は同じことができないのですか？

アニメーションのスプラッシュランディングページと派手なレイアウトが重要だった当時、確かに、プロのデザイナーを雇うことは理にかなっています。しかし、今日の傾向は最小限です。 –または少なくとも大幅に簡素化されています。

逸話的な例を挙げましょう。しばらく前に、誰かがPCソフトウェア用のスプラッシュ画面を作成するように私に依頼しました。それで、私はすべてを尽くしました–それをスケッチ紙に描き、PhotoShopにインポートし、たくさんの派手なネオンラインとエフェクトを作成しました。スプラッシュ画面ではなく、デスクトップの壁紙である可能性があります。重要なのは、私が彼らのためにこの本当に凝った精巧なデザインを作成したことです。

ご想像のとおり、彼らはそれを気に入らなかった。彼らが使用したデザインは、文字通り、いくつかの重なり合う色付きの円の小さなロゴと、その下のソフトウェア名でした。たとえば、PhotoShopの仕事で2分。そして、あなたは何を知っていますか？私はそれが私のものよりも優れていることに同意しなければなりませんでした。

したがって、私が指摘しているのは、プログラマーは私と同じ過ちを犯すというこの罠に陥ると思います。私たちは、UIとスプラッシュ画面が、アプリを目立たせるこれらの本当に派手で人目を引くものである必要があると考える傾向があります。 。しかし、そうである必要はありません–正直なところ、そうであるべきではありません。 プログラマーを取る必要があります 考え方を理解し、それを美的デザインに適用します– シンプル、機能的、機能的。

この記事では、デザインの経験がほとんどない場合でも、エレガントなAndroid APP UI/UXを作成するための非常に簡単な方法をいくつか見ていきます。

他に何かが本当に必要な場合を除いて、マテリアルデザインに固執する

アプリは「一意」である必要はありません および「他の部分から目立つ」 それが人気があり、見栄えがするために。これが、Googleのマテリアルデザインが達成しようとしていることです。これは、業界全体のアプリUIの標準であり、優れた成果を上げています。マテリアルデザインにこだわる人気のアプリはたくさんあります。たとえば、SwiftKey、Nova Launcher、Textra SMS、YouTubeなど、Androidアプリで最も有名なアプリがいくつかあります。

マテリアルデザインの中心的な焦点は、無地のカラーパレットを備えたカードベースのレイアウトです。 Googleは業界のトップデザイナーと協力し、ミニマリストのデザイン手法から多くの要素を引き出し、すべてを無料でリリースしました。ウェブサイトやアプリのデザインコースでは、電子書籍、動画、など

マテリアルデザインの使用を開始するのは非常に簡単です。さらにシンプルにするツールがいくつかあります。以下にそのリストを示します。

• マテリアルテーマエディタ（macOS + Sketch）
• マテリアルデザインカラーパレットプラグイン（PhotoShop / Illustrator）
• マテリアルデザインUIキットPSD（PhotoShop）
• AndroidマテリアルデザインUIキット（スケッチ）
• マテリアルUIテーマジェネレーター

また、シンプルでエレガントなマテリアルデザインのテーマを作成するためのインスピレーションが必要な場合は、次のリストブログをご覧ください。

• MaterialDesignBlog –正しく行われたマテリアルデザインの15の素晴らしい例
• MockPlus –インスピレーションを引き出すための12のベストマテリアルデザインウェブサイトの例
• AndroidAuthority –Android向けの10の最高のマテリアルデザインアプリ

カラーグラデーションは思ったよりずっと簡単です

マテリアルデザインに代わるものとして、ドロアのグラデーションはシンプルでトレンディで人目を引くものです。そして、デザイナーはすべての色でペイントしたり、究極のグラデーションをデザインしたりするのに多くの時間を費やしていると思うかもしれません。あなたは間違っているでしょう-それはPhotoShopで10秒で行うことができます。

簡単に説明できるように、これについても説明します。

モバイル用の新しいPSプロジェクトを作成します（ 1080 x 1920 px @ 72 ppiは正常に機能します）

UIGradients.comにアクセスして、気に入ったものを見つけてください。

プレビューの上からグラデーションの色をコピーします。

PSで空のレイヤーを右クリックし、[ブレンドオプション]>[グラデーションオーバーレイ]に移動します。

ドロップダウンメニューのグラデーションパターンプレビューを直接クリックします。ドロップダウンボタンはクリックしないでください。グラデーションを直接クリックすると、カラーエディタが開きます。

次に、UIGradientからPSグラデーションエディタに色の16進値を貼り付けます。

必要に応じて調整してください。これで、Androidアプリのプロのグラデーションの背景ができました。

チェックする価値のある他のグラデーションツール：

• WebGradients.com
• Android Shapes Generator（ XMLを介して形状を生成するため、グラデーションのオプション付き）

JPG/PNGの代わりにSVGを使用する

グラフィック要素（ボタン、ロゴなど）にPNGまたはJPGを使用する代わりに、実際にはSVG（ Scalable Vector Graphics）を使用する必要があります 代わりは。これは、品質を損なうことなくSVGのサイズを変更できるためです。たとえば、JPGをより大きな値にアップスケールすると、品質が低下し、ぼやけたりピクセル化されたりします。 SVGはそうではありません。人々はダウンスケールされる巨大なPNGファイルを使おうとします Androidの画面に合わせて–代わりに、アップスケールされた小さいSVGを使用できます 品質を損なうことなく。

さらに、SVGのファイルサイズはPNGよりも最大 60％〜80％小さくすることができます 。これは、アプリやモバイルウェブサイトの読み込みが速くなり、画面の解像度に関係なく見栄えが良くなることを意味します。

Theme.AppCompat.DayNightを使用してダークモードを含める

アプリにダーク/ナイトモードのテーマを含めるために、2つの別々のテーマをデザインする必要はありません。 AppCompatライブラリにほぼ組み込まれているため、有効にして値を編集するだけです。

Appualのガイド「Androidアプリにダークモードを実装する方法」をご覧ください。

テンプレートまたはモバイルUIキットを使用する

アプリが洗練されたカスタマイズされたGUIを必要としない場合は、テンプレートやキットを使用してもまったく問題はありません。テンプレートとキットは、インスピレーションを与えるガイドラインとして使用できます。または、文字通り、テンプレート/キットをそのまま使用して、独自のボタンなどを追加することもできます。

Android UIテンプレートとキットの優れたリソース：

• SpeckyBoy –iOSおよびAndroid用の50の無料モバイルUIキット
• SketchAppSources – Android UIアプリリソース（ Sketch）
• Freebiesbug – PSD UIキット（ Photoshop）