Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

AndroidアプリのUI/UX改善例

2,312 views

Published on

potatotips (iOS/Android開発Tips共有会) 第26回(2016/02/17)の発表資料です。

Published in: Technology
  • Be the first to comment

AndroidアプリのUI/UX改善例

  1. 1. 2016/02/17 神原 健一(@korodroid) potatotips #26 【Android枠】 AndroidアプリのUI/UX改善例
  2. 2. 2 自己紹介 l 神原 健一 (@korodroid) l モバイル関連活動 l 国内外での講演活動 •Droidcon Stockholm 2014 •Droidcon Spain 2014 •Droidcon Amsterdam 2013 •Droidcon Paris 2013 •Smartphone & Tablet 2014 Spring Tokyo •Developers Summit 2015 l 書籍執筆 l ブログ「Mobile Dev Blog」 l NTTソフトウェア(株)所属
  3. 3. 3 ユーザに満足してもらえるアプリ 必要な機能が備わっていること 心地よいUI/UXを実現していること
  4. 4. 4 UI/UX改善と実現方式例
  5. 5. 5 セカイフォン(リアルタイム翻訳) http://www.iplatform.org/blog/sekai-phone
  6. 6. 6 UI/UX改善例 ①サイドメニューの変更 ②検索の操作性改善 ③アップナビゲーション対応
  7. 7. 7 ①サイドメニューの変更
  8. 8. 8 ①サイドメニューの変更 DrawerLayout
  →サイドメニュー入れ物 Toolbar
  →ActionBarの後継的なもの NavigationView
  →サイドメニューの内容
  9. 9. 9 <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" // 中略 
 > <LinearLayout // 中略 > <android.support.v7.widget.Toolbar // 中略 > </android.support.v7.widget.Toolbar> </LinearLayout> <android.support.design.widget.NavigationView android:id="@+id/navigation_view" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="left" app:headerLayout="@layout/navigation_header" app:menu="@menu/navigation_menu"/> </android.support.v4.widget.DrawerLayout> ①実装イメージ
  10. 10. 10 NavigationView mNavigationView = ...; DrawerLayout mDrawerLayout = ...; Toolbar mToolBar = ...; // メニューアイコン押下時の処理 mToolBar.setNavigationOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { mDrawerLayout.openDrawer(Gravity.LEFT); } }); // メニュー内項目選択時の処理 mNavigationView.setNavigationItemSelectedListener( new NavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(MenuItem item) { // … return true; } }); ①実装イメージ
  11. 11. 11 ②検索の操作性改善
  12. 12. 12 ②検索の操作性改善 SearchView
  →検索用ビュー OnQueryTextListener
  →テキスト入力感知リスナー Realm
  →データベース(LIKE検索)
  13. 13. 13 ②実装イメージ SearchView searchView = ...; searchView.setOnQueryTextListener(onQueryTextListener); // メニューアイコン押下時の処理 private SearchView.OnQueryTextListener onQueryTextListener =
 new SearchView.OnQueryTextListener() {
 @Override
 public boolean onQueryTextSubmit(String searchWord) {
 // 決定キー押下時(searchWord:入力テキスト)
 // 例)「あ」→「め」→「決定キー」の場合:
 // 1回呼び出され、「あめ」が引数に渡される
 // →検索処理実行
 }
 @Override
 public boolean onQueryTextChange(String newWord) {
 // 文字の追加・削除時(newWord:入力テキスト)
 // 例)「あ」→「め」の場合
 // 2回呼び出され、1回目「あ」2回目「あめ」が引数に渡される
 // →検索処理実行
 }
 };
  14. 14. 14 ③アップナビゲーション対応
  15. 15. 15 ③アップナビゲーション対応 Up Action
  →親画面への遷移 ParentActivity
  →Activityの親子関係を意識
  16. 16. 16 ③参考ページ Providing Up Navigation (Android公式Developerサイト)
  17. 17. 17 (PR)今回の発表と関係ないですがw… • 技術評論社 • 定価2,580円+税 • 2015年11月17日発売
 (2016年1月に電子版も!) • 詳細
 http://www.iplatform.org/ blog/archives/2628
  18. 18. 18 おわり •Facebook:http://fb.com/kanbara.kenichi •Google+:+Kenichi Kambara •LinkedIn:http://www.linkedin.com/in/korodroid •Twitter:@korodroid ご清聴ありがとうございました。 (執筆、講演依頼などのお話がございましたら、
 ご連絡をお願い致します。)

×