アニメーションのスプラッシュランディングページと派手なレイアウトが重要だった当時、確かに、プロのデザイナーを雇うことは理にかなっています。しかし、今日の傾向は 最小限 –または少なくとも大幅に簡素化されています。
逸話的な例を挙げましょう。しばらく前に、誰かがPCソフトウェア用のスプラッシュ画面を作成するように私に依頼しました。それで、私はすべてを尽くしました–それをスケッチ紙に描き、PhotoShopにインポートし、たくさんの派手なネオンラインとエフェクトを作成しました。スプラッシュ画面ではなく、デスクトップの壁紙である可能性があります。重要なのは、私が彼らのためにこの本当に凝った精巧なデザインを作成したということです。
ご想像のとおり、彼らはそれを気に入らなかった。彼らが使用したデザインは、文字通り、いくつかの重なり合う色付きの円の小さなロゴと、その下のソフトウェア名でした。たとえば、PhotoShopの仕事で2分。そして、あなたは何を知っていますか？私はそれが私のものよりも優れていることに同意しなければなりませんでした。
したがって、私が指摘しているのは、プログラマーは私と同じ過ちを犯すというこの罠に陥ると思います。私たちは、UIとスプラッシュ画面が、アプリを作るこれらの本当に派手で人目を引くものである必要があると考える傾向があります 目立つ 。しかし、そうである必要はありません–正直なところ、そうであるべきではありません。私たちは取る必要があります プログラマー 考え方とそれを美的デザインに適用する– シンプルで機能的、動作します。
この記事では、デザインの経験がほとんどない場合でも、エレガントなAndroid APP UI / UXを作成するための非常に簡単な方法をいくつか見ていきます。
本当に他のものが必要な場合を除いて、マテリアルデザインに固執する
アプリは「 ユニーク」 および「 残りの部分から目立つ」 それが人気があり、見栄えがするために。それがGoogleの マテリアルデザイン 達成に向けて着手–業界全体のアプリUIの標準であり、彼らは良い仕事をしてきました。マテリアルデザインにこだわる人気のアプリはたくさんあります。たとえば、SwiftKey、Nova Launcher、Textra SMS、YouTubeなど、Androidアプリで最も有名なアプリがいくつかあります。
マテリアルデザインの中心的な焦点は、無地のカラーパレットを備えたカードベースのレイアウトです。 Googleは業界のトップデザイナーと協力し、ミニマリストのデザイン手法から多くの要素を引き出し、すべてを無料でリリースしました。ウェブサイトやアプリのデザインコースでは、電子書籍、動画、等
マテリアルデザインの使用を開始するのは非常に簡単です。さらに簡単にするツールがいくつかあります。以下にそのリストを示します。
- マテリアルテーマエディター （macOS +スケッチ）
- マテリアルデザインカラーパレットプラグイン （PhotoShop /イラストレーター）
- マテリアルデザインUIキットPSD （PhotoShop）
- AndroidマテリアルデザインUIキット （（ スケッチ）
- マテリアルUIテーマジェネレータ
また、シンプルでエレガントなマテリアルデザインのテーマを作成するためのインスピレーションが必要な場合は、次のリストブログをご覧ください。
- MaterialDesignBlog –正しく行われたマテリアルデザインの15の素晴らしい例
- MockPlus –インスピレーションを引き出すための12のベストマテリアルデザインウェブサイトの例
- AndroidAuthority –Android向けの10のベストマテリアルデザインアプリ
色のグラデーションはあなたが思っているよりずっと簡単です
マテリアルデザインに代わるものとして、ドロアのグラデーションはシンプルでトレンディで人目を引くものです。そして、デザイナーはすべての色でペイントしたり、究極のグラデーションをデザインしたりするのに多くの時間を費やしていると思うかもしれません。あなたは間違っているでしょう-それはPhotoShopで10秒で行うことができます。
PhotoShopグラデーションUIで10秒。
これについても説明し、それがいかに簡単かをお見せします。
モバイル用の新しいPSプロジェクトを作成します（ 1080 x 1920 px @ 72 ppiは正常に機能します）
UIGradients.com –事前に作成されたグラデーションの大規模なコレクション。
に移動 UIGradients.com 好きなものを見つけてください。
UIGradientsからカラー16進値をコピーします
プレビューの上からグラデーションの色をコピーします。
PhotoShopグラデーションセレクター。
PSで空のレイヤーを右クリックし、[ブレンドオプション]> [グラデーションオーバーレイ]に移動します。
ドロップダウンメニューのグラデーションパターンプレビューを直接クリックします。ドロップダウンボタンはクリックしないでください。グラデーションを直接クリックすると、カラーエディタが開きます。
UIGradientからPSグラデーションツールに16進値を入力します。
次に、UIGradientからPSグラデーションエディターに色の16進値を貼り付けます。
必要に応じて調整してください。これで、Androidアプリのプロのグラデーションの背景ができました。
チェックする価値のある他のグラデーションツール：
- WebGradients.com
- Android Shapes Generator （（ XMLを介して形状を生成するため、グラデーションのオプション付き）
JPG / PNGの代わりにSVGを使用する
グラフィック要素（ボタン、ロゴなど）にPNGまたはJPGを使用する代わりに、実際にはSVG（ボタン、ロゴなど）を使用する必要があります。 スケーラブルベクターグラフィックス） 代わりに。これは、品質を損なうことなくSVGのサイズを変更できるためです。たとえば、JPGをより大きな値にアップスケールすると、品質が低下し、ぼやけたりピクセル化されたりします。 SVGはそうではありません。人々は巨大なPNGファイルを使おうとします ダウンスケール Androidの画面に合わせて–代わりに、より小さなSVGを使用できます 高級化 品質を損なうことなく。
さらに、SVGは最大 PNGよりもファイルサイズが60％から80％小さい 。これは、アプリまたはモバイルWebサイトの読み込みが速くなり、画面の解像度に関係なく見栄えが良くなることを意味します。
Theme.AppCompat.DayNightを使用してダークモードを含める
アプリにダーク/ナイトモードのテーマを含めるために、2つの別々のテーマを設計する必要はありません。 AppCompatライブラリにほぼ組み込まれているため、有効にして値を編集するだけです。
Appualのガイドをご覧ください。 Androidアプリにダークモードを実装する方法 」。
テンプレートまたはモバイルUIキットを使用する
アプリが洗練されたカスタマイズされたGUIを必要としない場合は、テンプレートやキットを使用してもまったく問題はありません。テンプレートとキットは、インスピレーションを与えるガイドラインとして使用できます。または、文字通り、テンプレート/キットをそのまま使用して、独自のボタンなどを追加することもできます。
Android UIテンプレートとキットの優れたリソース：
- SpeckyBoy – iOSおよびAndroid用の50の無料モバイルUIキット
- SketchAppSources – Android UIアプリリソース（ スケッチ）
- 景品バグ– PSD UI Kits （（ PhotoShop）
