Androidエンジニア デザイン部 #1 https://nohana.connpass.com/event/80530/ 続きのwebはこちら https://qiita.com/ogapants/items/8a551ed3b16bcf0cc3ed
![「AndroidはiOSと同じデザインで!」と言われたときのTips](https://cdn-ak-scissors.b.st-hatena.com/image/square/cdee6e9bb54c984fecf4899db73149dcfc4f2d83/height=288;version=1;width=512/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2F47392c16e45043e484e66964932f2911%2Fslide_0.jpg%3F9723270)
Eureka EngineeringLearn about Eureka’s engineering efforts, product developments and more.
Nuco Advent Calendar 7日目の記事です。 Design | Android Developers Human Interface Guidelines ちなみに上記の両記事を既にお読みの方は本記事を読む必要はありません。 ブラウザの戻るボタンをクリックしてください。 スマホアプリのデザイン 恐らくほとんどの人はAndroid、iOSのどちらか一方しか所持していないですよね? お近くに自分と異なるOSを使っている人がいたら、是非アプリのUIを見比べてみましょう。 思っていたより違うんじゃないでしょうか? 特に有名なアプリはほぼデザインが異なるはずです。 メニューバーはiOSは画面下部、Androidは画面上部にあるのではないでしょうか? (もちろんそうでないアプリもあると思いますが。) あるある話なのかはわかりませんが、スマホアプリの開発を行うときにデザインが一種類しかな
BACKとUPの違い バックキーが他のアプリも含めて一つ前の画面に戻るのに対して、UPボタンは同じアプリ内の上の階層に戻る。 バックキーとUPボタンの違いはわかったが、いざ作ってみると結構めんどくさいという話。 例:ECアプリ 例として以下の様な遷移のECアプリを考えてみる。 製品詳細画面に至るには4つの導線がある。 1. タイムラインから直接来る 2. タイムラインから検索を経由して来る 3. 製品詳細画面から、別の製品詳細画面に来る 4. 他のアプリ(例えばGoogle検索結果)から、ディープリンクで来る この製品詳細画面のUPボタンはどう振る舞うべきだろうか。それぞれの導線の場合について、以下のように振る舞うべきだと考える。 1の場合 タイムラインに戻る 以前表示していたタイムラインの状態(スクロール位置など)を維持する 2の場合 検索画面に戻る 以前表示していた検索画面の状態(スク
// scaleがXとY二倍になった後 textView.animate().scaleX(2f).scaleY(2f).setDuration(1000).setListener(new Animator.AnimatorListener() { @Override public void onAnimationStart(Animator animator) { } @Override public void onAnimationEnd(Animator animator) { textView.animate().scaleX(1f).scaleY(1f).setDuration(2000); } @Override public void onAnimationCancel(Animator animator) { } @Override public void onAnimat
みなさんMaterial Designやりきっていますか? Activity起動時にReveal Effectが行われて、そのあとにふわっとコンテンツが出てくるようなUIを見たことある方も多いと思いますが、アレってめちゃくちゃカッコいいですよね。 今回はカッコいいアレが実装されているInstaMaterialのコードを分解しながらどういう実装になっているのかを紐解いていきたいと思います。 概要 今回はInstaMaterialのメインページ(MainActivity)からユーザーページ(UserProfileActivity)へ画面遷移するときのアニメーションについて分解してみました。 GIFアニメーションのサイズ容量を減らすためにfpsを下げているので、細かく確認したい場合はプロジェクトを各自でビルドしてください MainActivityからUserProfileActivityへのIn
スプラッシュ iOSだとLaunchScreenとか言われる、起動時に出てくる画面です。 Androidだと、ユーザに無駄な待ち時間を与えるということで不要だと言われてたのですが、最近はGoogle製のアプリが、軒並みスプラッシュを入れてきています。 Bottom Navigationのことといい、考え方が変わってきたのでしょう。 Android開発を行う以上、プラットフォームが出すガイドラインに合わせるのが、結果的にユーザに良い体験を与えることにつながります。 スプラッシュについては、iOSと同様に、LaunchScreenというPatternで紹介されています。その実装方法を紹介します。 Activityあり SplashActivityなどを用意して、起動時に呼び出します。 なんらかの処理や、一定時間を経過した後にメインのActivityを起動させます。 DelaySplashAct
はじめに 例えば以下の2つの画像,左と右の色を比べたときにどちらの方が色が近いと思いますか? #FF0000と#400000 #FF0000と#FFBF00 単純にRGB値の距離を計算すると二つの色の距離は同じ. しかし1つ目の画像は単に暗くなっただけなのに対して,2つ目の画像は色相が変わっているため,例えば写真のマッチングを取る場合は上の方が似た色として判別した方が都合が良くなったりする. こうした色の距離,色差の計算について実装してみた. ソースはJava 8を前提に書いているが,Androidでも動作する(はず).ただし,AndroidではColorクラスが違うため適宜変更してほしい. 下準備 JavaとAndroidのColorクラスの違いや,RGB値の保存などを目的として下記のクラスを準備する.RGB値のint値を受け取るとそれぞれをdoubleの値として配列を作成し,保存する.
業務や個人でのアプリ開発で、UI デザインを考えるときに参考にできそうなサイトを紹介します。なかなか個性的・奇抜だったり、少し古い UI が混ざってたりしますが、インスピレーションを働かせる良い刺激になります。 tumblr 多めです。 Behance https://www.behance.net/ Adobe のポートフォリオサイトです。 モバイルデザインのみならずファッションやグラフィックデザインなど、様々なコンテンツが登録されています。 このサイトでは Creative Field という名前でカテゴリ分けされており、アプリ開発においては Interaction Design や Web Design あたりが参考になります。 Pinterest https://jp.pinterest.com/explore/%E3%83%A2%E3%83%90%E3%82%A4%E3%83%A
概要 ダイアログに表示されるボタンの表示順がOSごとに違ってたので整理してみました。 誤りなどあったら指摘いただけるとありがたいです。 確認用コード メインとなるアクティビティのonCreateに以下の記述を追加します。 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); AlertDialog.Builder alertDialog = new AlertDialog.Builder(this); alertDialog.setTitle("test"); alertDialog.setMessage("Sample Message"); // positiveボタ
12/9 パシフィコ横浜で開催された Google for Mobile のセッションからいくつかまとめと補完した。 マテリアル デザインでよりよいユーザー体験を実現しよう なぜマテリアルデザインしたのかとその内容の話 すでにいろいろなところにまとめれれてる Design | Android Developers Material Design Awards - Articles - Google Design Material Design with the Android Design Support Library Android Design Support Library | Android Developers Blog 高品質 Android アプリ実装ヒント集 〜 ゴミアプリと言わせないために 〜 ユーザー評価 Essentials for a Successful App
挨拶 こんにちは、12/1を担当させて頂く@wasabeef_jpです。 DroidKaigi 2016のConnpassが募集開始されましたね。 もう、結構埋まっているみたいですが、Android界隈がいっそう盛り上がって貰えたら嬉しいです(๑•̀ㅂ•́)و✧ さて、今年一発目なので、ふんわりした内容を書いていこうかと思います。 少し前にTaktというライブラリを作りましたので、その話をさせて下さい。 Takt 何が出来るライブラリかというと「FPSを表示」することが出来るライブラリになります。 ゲームとかだとFPSが落ちないように意識するのが当たり前になっていますが SNS系のアプリを作っている上で、そこまで意識していないことが多いのではないでしょうか。 重くなるようなアプリを作っていない場合は必要ないかもしれません。 私の場合、動画関連のAPIやOpenGLを利用する頻度が高かったた
TL;DR 夜などの暗闇でスマートフォンを使うときには、目に優しい色使いをしましょう これ is 何 夜な夜なスマートフォンの画面を注視していると、画面の明るさに目が馴染んでしまって、くらいところで周りが見えなくなった体験は無いでしょうか。あるいは、夜車を運転している時にスマートフォンの画面をつけていると、その光がチラチラと視界に入ってきて鬱陶しく感じることはないでしょうか。 この記事では、画面の輝度を変更する方法ではない、暗所でもユーザの目に負担とならないような UI の作り方を見ていきます。 目に優しい色 色の属性 色にも明るさがあります。 HSVモデルやHSL色空間、HSB色空間といったモデルで表される色のプロパティには、V(Value)やL(Lightness)、B(Brightness)といった、明度や輝度と呼ばれる明るさを示すスケールがあります。この値が高いほど色は明るく見え、
今回は Android アプリでよく見かけるさまざまなデザイン上の問題を、デザイン・ガイドラインに則ってご紹介します。 デザイン・ガイドラインは絶対的な基準ではありませんが、高品質なアプリを目指す上で役に立つヒントが詰まっており、Android アプリの UI/UX デザインにあたってまず参考にしていただきたい資料です。詳しくは http://d.android.com/design をご参照ください。 日本の Android 開発者のための公式 Google+ コミュニティ Android Development - Japan もよろしくお願いします。 https://plus.google.com/communities/115564198961961475282 #adia #common
ダイアログは、ユーザとの対話の中でも特に「確認」や「注意」を促すために用いられる UI コンポーネントの一つです。二択あるいは三択の項目を配置して、YES/NO や OK/Cancel などのインタラクションを用意することで、ユーザとの対話をすることが出来ます。あるいは、単に現在の状態を表示(読込中など)し、その他の各種操作をブロックすることで、待つ必要が有ることを明示することも出来ます。 一方で、ダイアログはその表示が画面の前面に大きく表示され、時にダイアログ以外へのインタラクションを禁じる場合もあることから、使いどころを間違うと非常に鬱陶しく見えるものでもあります。また、ダイアログのキャンセル操作が出来ない場合において、いつまでもダイアログが出続けてしまうとユーザの負担は大きくなります。 この記事では、ダイアログを使用している場面において、その他の表現方法や実装の工夫を使うことができる
参考資料 Android Developers 画面全般 スプラッシュ画面 必要のないスプラッシュ画面の表示はやめましょう。 なぜダメか 多くのアプリにおいて、スプラッシュ画面では何も処理していません。 このようなアプリでは、ユーザがアプリを起動してからスプラッシュ画面の表示が終わるまでの間、ユーザの時間を単純に浪費してしまいます。 わずかな時間かもしれませんが、Androidではアプリの起動/終了が頻繁に繰り返される場合があるため、デスクトップアプリと比べて表示される頻度が多くなることを意識する必要があります。 解決法 スプラッシュ画面を削除する。 余談ですが、iOSのLaunchImagesは体感上の起動時間を短縮するためにアプリ起動後の画面と似たものを使用することが推奨されています。 Androidアプリにおいて、体感上の起動時間を短縮するためにできることはスプラッシュ画面を削除する
はじめに Android Developers 公式チャネルで公開されている「UX アンチパターン」の紹介です。UX の改善はユーザの満足度向上にもつながりますので、紹介内容をチェックすることをおすすめします。 動画 URL https://www.youtube.com/watch?v=x_gxZd9kLv4 トピック別の再生用リンク ダイアログ タッチできない UI デザイン 時代遅れ 他プラットフォームの移植 非標準ナビゲーション 共有機能を独自実装 WebView で UI を作る しつこい 縦向き固定 その他 ちなみに個人的に残念だと感じるトップ3はこちらです。 下タブバー 非標準のナビゲーション WebView で UI を作る ダイアログ 読み込み中のダイアログ ちらつきについては、ProgressDialog を使用した場合のイメージでしょうか。 ダイアログ全般について、基
概要 Google Playのようにスクロールした時にToolbar部分を隠す単純な方法です。 SupportLibraryのみを使って実装できます。 余計な実装は極力省いていますのでActivityのみで実装してます。 注意 先に注意事項を。 これをLollipop未満のバージョンで実現するにはスクロールするコンテンツ部分に制限があります。 RecyclerViewまたはNestedScrollViewが必要になります。例えば普通のListViewではLollipop未満では実現できませんので注意です。(Lollipop以降でListViewでの実装は後述します) 実行イメージ 実装手順 gradle build.gradleは次のようになります。 dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) compi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く