AndroidのAdaptive Icon作成方法
こんにちは。
フェノメナエンターテインメント デザイン担当の山男です。
AndroidのアプリアイコンはOSバージョンに伴って徐々に変化してきていますが、今現在はAdaptive Icon (アダプティブランチャーアイコン) というものが主流になっています。
mobile
デザイナーのためのリソースカタログ Designpedia
こんにちは。
フェノメナエンターテインメント デザイン担当の山男です。
弊社がスポンサーという位置付けで Designpedia というサイトを公開しています。
“デザイナーのためのリソースカタログ” と銘打って、主にUX・UIデザインデザインにまつわる記事や書籍を掲載しているサイトです。
スマートフォンの縦長化
こんにちは。
フェノメナエンターテインメント デザイン担当の山男です。
iPhone Xの登場でスマートフォン画面の縦長化が始まり、去年からはAndroidも追従しつつあります。例えばNTTドコモのラインナップを見ると、以下のようになっています。(2019.09.27時点)
【 21:9 】Xperia 1
【 19.5:9 】AQUOS R3 / Huawei P30 Pro
【 19:9 】Galaxy S10 / S10+ / AQUOS R2
【 18.7:9 】Huawei P20 Pro
【 18:9 】その他の端末すべて
Xamarin.Forms
こんにちは。すーさんです。
前回はクロスプラットフォーム開発環境の「Xamarin」について簡単に説明しましたが、今回は画面のUIを共通化できる「Xamarin.Forms」について触れようと思います。
スマホ画面のアスペクト比
高解像度化と大型化に一段落していたスマホ画面サイズの変化が2017年から再開しそうです。
今度は縦長化が進みUIデザインに影響が発生します。
画面の縦長化は、スマホ本体のプロポーションにも変化をもたらしそうです。
何年かすると縦長感のあるスマホがスマートに感じ、現在のプロポーションはずんぐりとした印象になってしまうかもしれません。
画面の縦長化が進むと、Androidに搭載されているマルチウィンドウ機能の有効性が高まってきます。
今後は複数のアプリを同時に使用することでユーザーベネフィットにつながるケースが増えてくるのだと思います。
UI的には1ペインタイプと2ペインタイプの画面が両立する設計とデザインを行う必要が発生しそうです。
Androidアプリ「Android 標準UI見本」 リリースのご案内
フェノメナエンターテインメントです。
今回のブログは、9月6日にリリースしたAndroidアプリケーション「Android標準UI見本」のご案内です。
このアプリは、Google社製の開発環境やライブラリに用意されているUIオブジェクトを可能な限りデフォルトの状態で表示することを目的に作成されています。
アプリの企画や設計時に「このパーツはデフォルトでどんな色だっけ？」「バージョンの違う端末で表示が変わるんだっけ？」などと疑問が出たときの参考としてご利用ください。
開発時のデフォルト状態であるテーマ「AppCompat」で作成されていますので、Android4.2以降のAndroid端末で動作します。複数の端末で動作させることによりバージョン間の表示を比較できます。
アプリの企画や設計時に「このパーツはデフォルトでどんな色だっけ？」「バージョンの違う端末で表示が変わるんだっけ？」などと疑問が出たときの参考としてご利用ください。
開発時のデフォルト状態であるテーマ「AppCompat」で作成されていますので、Android4.2以降のAndroid端末で動作します。複数の端末で動作させることによりバージョン間の表示を比較できます。
ブランドカラーも開発デフォルトのprimaryColor, colorPrimaryDark, colorAccentが設定されていますが、オプションメニューから選択することでブランドカラーを削除した「Dark」「Light」「Light(DarkToolbar)」も確認することができます。
「他にも知りたいオブジェクトがある！」や「UIデザインで手を貸してほしい！」などカスタマイズのご要望がありましたら、下のリンクをクリックしてフェノメナエンターテインメントのホームページからお問合せください。
簡単！今スグ使えて便利！触って動くプロトタイプを作ろう！
yamaです。
今回は、モバイルアプリのプロトタイピングツールをいくつかご紹介したいと思います。
操作感をつかんで、 アクセシビリティ向上を！
アプリやwebサイトを作る過程で、GUIの時のイメージと、実際に実装されたものを見ると「…あれ？」と思うこと・・・ありませんか？
もしくは、事前に確認してOKをもらっていたのに、終盤のタイミングで「イメージと違ったからこうして～！」と言われてしまい、最悪、UI設計からやり直し…なんてことも！！
そんな手戻りを防ぐのはもちろん、使い勝手の良い最適なユーザインターフェースにするために、設計時に「プロトタイプ」を作って、利用者視点で操作をしてみることをお勧めします。
Android テーマ「Material」での色設定１
フェノメナエンターテインメントの「おっちゃん」です。
今回は、Androidアプリケーションを開発する際のスタイル色の設定について書きたいと思います。
テーマ「Material」からいろいろな部分の色を一括して指定できるようになりました。
基本的な設定色は、Android Designにも記載されていますが以下のパラメータです。
colorPrimary ———— アクションバーの背景色
colorPrimaryDark ——— ステータスバーの背景色
navigationBarColor —— ナビゲーションバーの背景色
windowBackground ——– アプリケーションボディの背景色
textColorPrimary ——— アクションバーのタイトル文字色
colorAccent ————– コントロールの基本色
これらのパラメーターをスタイルに設定することでアプリケーションの基本色を一括で指定できます。
<< style.xmlへの設定例 >>
| <style name=”AppThemeML” parent=”@android:style/Theme.Material.Light”> <item name=”android:colorPrimary”>#bdbdbd</item> <item name=”android:colorPrimaryDark”>#757575</item> <item name=”android:navigationBarColor”>#000000</item> <item name=”android:windowBackground”>#eeeeee</item> <item name=”android:textColorPrimary”>#000000</item> <item name=”android:colorAccent”>#009385</item> </style> |
図1基本的なパラメータ
このブログから情報発信しているUIデザイン専門家集団のホームページ :
フェノメナエンターテインメント株式会社