吸い込まれないAndroidアプリUIを設計する方法
プログラマーと開発者は一般にデザイナーではありません。これは真実であると広く受け入れられています。 開発者はアプリを機能させることに集中する傾向があります。デザイナーはアプリを審美的に魅力的にすることに集中します。 しかし、なぜ開発者は同じことをできないのですか？
アニメーションのスプラッシュランディングページと派手なレイアウトが重要だった当時、プロのデザイナーを雇うことは理にかなっていました。 しかし、今日の傾向は最小限であるか、少なくとも大幅に簡素化されています。
逸話的な例を挙げましょう。しばらく前に、誰かがPCソフトウェアのスプラッシュスクリーンを作成するように頼みました。 だから私はすべて出かけました-スケッチ用紙にそれを描き、PhotoShopにそれをインポートし、たくさんの派手なネオンラインとエフェクトを作成しました。 スプラッシュスクリーンではなく、デスクトップの壁紙である可能性があります。 要点は、私は彼らのためにこの本当に豪華で精巧なデザインを作成したということです。
おそらく推測できるように、彼らはそれを好まなかった。 彼らが行ったデザインは、文字通り、いくつかの重なり合った色のついた丸の小さなロゴと、その下のソフトウェア名でした。 たとえば、PhotoShopジョブで2分間。 そして、あなたは何を知っていますか？ それは私のものよりも優れていることに同意しなければなりませんでした。
このように私が主張しているのは、プログラマーが私が犯したのと同じ間違いを犯すというこのtrapに陥ると思います。 UIとスプラッシュスクリーンは、アプリを際立たせる 、本当にファンシーで人目を引くものである必要があると考えがちです。 しかし、そうである必要はありません。正直に言って、そうであってはなりません。 プログラマの考え方を取り入れて、 シンプルで機能的な作品である審美的なデザインに適用する必要があります。
この記事では、デザインの経験がほとんどない場合でも、エレガントなAndroid APP UI / UXを作成する非常に簡単な方法を検討します。
あなたが本当に何か他のものを望んでいない限り、材料設計に固執する
あなたのアプリは人気があり、見栄えが良いために「 ユニーク」で「他のブランドから目立つ 」必要はありません。 これが、GoogleのMaterial Designが達成を目指したものです。業界全体のアプリUIの標準であり、彼らは良い仕事をしました。 マテリアルデザインにこだわる人気のアプリが山ほどあります。SwiftKey、Nova Launcher、Textra SMS、YouTubeなど、Androidアプリの最大の名前のいくつかは、ほんの一例です。
Material Designの主な焦点は、無地のパレットを使用したカードベースのレイアウトです。 Googleは業界のトップデザイナーと協力して、ミニマリストのデザインプラクティスから多くの要素を引き出し、無料ですべてをリリースしました。ウェブサイトやアプリのデザインコースでは電子書籍、ビデオ、等
マテリアルデザインの開始は非常に簡単で、さらに簡単にするツールがいくつかあります。以下にリストします。
- マテリアルテーマエディター（macOS + Sketch）
- マテリアルデザインカラーパレットプラグイン（PhotoShop /イラストレーター）
- マテリアルデザイン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から色の16進値をPSグラデーションエディターに貼り付けます。
必要に応じて調整します。 これで、Androidアプリにプロフェッショナルなグラデーションの背景ができました。
チェックアウトする価値がある他の勾配ツール：
- WebGradients.com
- Androidシェイプジェネレーター（ XML経由でシェイプを生成するため、グラデーションのオプション付き）
JPG / PNGの代わりにSVGを使用する
グラフィカル要素（ボタン、ロゴなど）にPNGまたはJPGを使用する代わりに、実際にはSVG（ スケーラブルベクターグラフィックス）を使用する必要があります。 これは、SVGは品質を損なうことなくサイズ変更できるためです。たとえば、JPGをより大きな値にアップスケールすると、品質が失われ、ぼやけたりピクセル化したりするためです。 SVGはそうではありません。 人々はAndroid画面に合わせてダウンスケールされる巨大なPNGファイルを使用しようとします。代わりに、品質を損なうことなくアップスケールされた小さな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アプリリソース（ Sketch）
- Freebiesbug – PSD UIキット（ PhotoShop）
