Upgrade to Pro — share decks privately, control downloads, hide ads and more …

AndroidアプリのUI/UX改善例その2

 AndroidアプリのUI/UX改善例その2

potatotips #59の発表資料です。
【Android枠】AndroidアプリのUI/UX改善例その2

Kenichi Kambara

February 28, 2019
Tweet

More Decks by Kenichi Kambara

Other Decks in Technology

Transcript

  1. 2019.02.28
    Kenichi Kambara (@korodroid)
    ʲAndroid࿮ʳ
    AndroidΞϓϦͷUI/UXվળྫͦͷ2
    potatotips #59

    View full-size slide

  2. About me
    •ϞόΠϧؔ࿈׆ಈ
    •ࠃ಺֎Ͱͷߨԋ׆ಈ
    • Droidcon UK/FR/NL/ES/SH
    • Developers Summit
    • Android Bazaar and Conference
    • StackOverflow DevDays
    • Cloud Days
    •ॻ੶ࣥච
    •ݸਓϒϩάʮMobile Dev Blogʯ
    •ձࣾϒϩάʮਆݪ݈ҰͷAndroidͰ޿͕Δੈքʯ
    •झຯɿཱྀߦʢಛʹॳΊͯͷ৔ॴɿݱࡏ26Χࠃʣ
    •NTTςΫϊΫϩεɹॴଐ
    ਆݪɹ݈Ұ(@korodroid)

    View full-size slide

  3. •͓୊໨ͷΞϓϦ
    •UI/UXվળͷBefore/After
    •ࠓճͷ͓୊໨ʢϨΠΞ΢τʣ
    Agenda

    View full-size slide

  4. ͓୊໨ͷΞϓϦ

    View full-size slide

  5. ηΧΠϑΥϯ

    View full-size slide

  6. UI/UXվળͷBefore/After

    View full-size slide

  7. Before [Supporting 18 Languages]

    View full-size slide

  8. 18ϲࠃޠˠ100ϲࠃޠରԠ͢Δͱ…

    View full-size slide

  9. After [Supporting 100 Languages]

    View full-size slide

  10. UI/UXվળྫ

    View full-size slide

  11. ଟ͘ͷ߲໨͔Βͷબ୒
    Ωʔϫʔυݕࡧ
    Dialog with Search Feature

    View full-size slide

  12. search-dialog by @mirrajabi
    https://github.com/mirrajabi/search-dialog

    View full-size slide

  13. Implementation Sample
    data class SampleModel(private var title: String) : Searchable {
    // ϥΠϒϥϦͷSearchableΠϯλϑΣʔε࣮૷ͷͨΊ
    override fun getTitle(): String {
    return title;
    }
    }
    ࣮૷Πϝʔδ: SampleModel.kt (ϞσϧΫϥε(Ϧετ಺ͷ֤߲໨))

    View full-size slide

  14. Implementation Sample
    private fun createSampleList(): ArrayList{
    val items = ArrayList()
    items.add(SampleModel(“߲໨1", R.drawable.image1))
    items.add(SampleModel("߲໨2", R.drawable.image2))
    items.add(SampleModel("߲໨3", R.drawable.image3))
    items.add(SampleModel("߲໨4", R.drawable.image4))
    items.add(SampleModel("߲໨5", R.drawable.image5))
    return items
    }
    ࣮૷Πϝʔδ: MainActivity.kt (Ϧετ߲໨ͷੜ੒)

    View full-size slide

  15. Implementation Sample
    private fun showSampleDialog() {
    SampleSearchDialogCompat(this, “߲໨ΛબΜͰ͍ͩ͘͞ɻ",
    "߲໨", null, createSampleList(),
    SearchResultListener { dialog, item, position ->
    Toast.makeText(this, item.title, Toast.LENGTH_SHORT
    ).show()
    dialog.dismiss()
    }
    ).show()
    }
    ࣮૷Πϝʔδ: MainActivity.kt (μΠΞϩάදࣔ/Πϕϯτॲཧ)

    View full-size slide

  16. ͪΐͬ͜ͱϋϚͬͨ͜ͱ

    View full-size slide

  17. [Problem] Index of Selected Item after Search

    View full-size slide

  18. [Before]Implementation
    private fun showCountryListDialog() {
    CountrySearchDialogCompat(this, "Select Country",
    "Country name", null, createSampleLocalContacts(),
    SearchResultListener { dialog, item, position ->
    // [OLD]position͕બ୒͞Ε߲ͨ໨ͱߟ͑ɺॲཧ
    // …
    dialog.dismiss()
    }
    ).show()
    }
    positionʹ͸ҙਤͨ͠஋ͱҟͳΔΠϯσοΫε͕ฦͬͯ͘Δ

    (ݕࡧޙʹީิ͕ϑΟϧλϦϯά͞Ε߲ͨ໨಺ͰͷΠϯσοΫε)

    View full-size slide

  19. [After]Implementation
    ϞσϧଆʹϢχʔΫͳΠϯσοΫεΛ௥Ճ

    (ͦͷΠϯσοΫεΛ༻͍ͯॲཧΛ࣮ࢪ͢ΔΑ͏ʹमਖ਼)
    private fun showCountryListDialog() {
    CountrySearchDialogCompat(this, "Select Country",
    "Country name", null, createSampleLocalContacts(),
    SearchResultListener { dialog, item, position ->
    // [NEW]Ϟσϧ΁ϢχʔΫΠϯσοΫε௥Ճ+ಉΠϯσοΫεΛ༻͍ͯॲཧ
    // …
    dialog.dismiss()
    }
    ).show()
    }

    View full-size slide

  20. •search-dialog

    https://github.com/mirrajabi/search-dialog
    Reference

    View full-size slide

  21. Please let me know if you have any requests 

    such as technical speeches, technical writings and so on.
    Facebook:http://fb.com/kanbara.kenichi
    Google+:+Kenichi Kambara
    LinkedIn:http://www.linkedin.com/in/korodroid
    Twitter:@korodroid
    Thank you so much

    View full-size slide