Androidエンジニアデザイン部 #2

https://nohana.connpass.com/event/94621/

に行ってきたので、そのときのレポートブログ

LT1つ目：InvisionのAndroidアプリでみる4つのデザイン基本原則

エウレカのFutagawaさん

資料

以下、LTを聴きながらのメモ

今日話す内容

Invisionとは
4つのデザイン原則とは

Invisionとは

モックでデザインを簡単に作れるやつ

4つの原則とは

Proximity：近接
Repetition：反復
Alignment：整列
Contrast：コントラスト

「Proximity：近接」

グループ化した要素は近くに、そうじゃない要素はより遠くに

まとまりある要素同士の距離は、まとまりのない要素同士の距離よりも短くする。

「Alignment：整列」

画面内の全ての要素が他の要素と視覚的なつながりをもつようにする。

「Repetition：反復」

アプリの全体を通してなにかの特徴を繰り返す。

「Contrast：コントラスト」

同じ要素でないものははっきりと異ならせる。

例えば、タイトルとアップデート時間は全くことなるものなので

文字の濃さを変えたりする。

ノンデザイナーズ・デザインブック

https://book.mynavi.jp/ec/products/detail/id=22176

非デザイナーでも読みやすい。

たまにPDFを配ってるときとかもある。

LT2つ目：「ありがたいUI」をもっと大事にしたい。

資料

以下、LTを聴きながらのメモ

デザインに対する持論

デザインって広義的な意味でいっぱいあるが

大切にしたいと思っていることがある。

デザインって、かっこいいとか美しいとかクールと思われがちだ。

かっこいいからインストールするとか、そういう訴求力もあるが

かっこいいから使い続けてるとかはあまりない。

使い続ける理由としてかっこいいからというのはあまりない。

※ただし、アイコンは除く

ありがたいと思えるアプリ

twitterの画像表示がありがたい。

複数枚あるとスライドできるが、

消したいときは、下から上にスワイプする。

これの嬉しいところが、タイムラインを眺める動作と変わりない動作でできる。

これがもし、画面上のほうに×ボタンとかで閉じる UI だったら、少し手間になる。

CamScannerの画像切り抜き

タップ部分が拡大表示される。細かく調整ができる。

座標の調整が確認しやすい。

マルチウィンドウ対応アプリ

例えばyoutubeをバックグラウンド再生できる。

AbemaTVのCM中にtwitterみるとか、そういうことができる。

これらのアプリにある機能がありがたいので

他のアプリに乗り換えられない。

クールとか美しいアプリというのも大切だが、

ありがたいUIも大切。

LT3つ目：Google I/O 2018

Googleの方のLT

自社アプリ、IOSched について。

IOSchedは、

Androidアプリを作っている人に、リファレンスとして見てもらえるように作られている。

2018年の見所

秘伝のたれのソースコードをフルスクラッチ
Kotlin
Architecture Component

UIの面でもベストプラクティスをやろうとしている。

マテリアルデザインで出したい。

だが、I/Oがあるまではマテリアルデザインで出せない。というジレンマがあった。

なので、デザインを2つ作った。

今年の見所

Lottieというアニメーションのライブラリを使っている。

カウントダウンを実装している。

githubにソースコード公開しているので、DLしてぜひ見て見てね。

view pager

1つのviewはマテリアルデザインでいうところの1つの要素

なので、viewとviewの間には区切りが欲しい。

いろんなアプリはその区切りを入れてないので、入れることによりくっきり見える。

ボトムアップバー

これもライブラリの中に入っている。

ここはアクションのメニューを並べる。

fabが据えられる位置を決められる。

たとえばGmailみたいなアプリで、詳細画面に行ったときは返信するボタンになるとかで、

返信ボタンは左に出したいとかだったら、アニメーションを使う。

スナックバー

これまではfabを押し上げるような形だったが、

fabの上に出しましょうとしている。

ボトムシート

一時的な状態を出すのにすごくいい。

必須要素をぜひ知っていただきたい。

Googleのアプリをだすときにクリアしなければいけないこと

タッチフィードバック
色のコントラスト。背景と文字のコントラストが十分かどうか？
accesibility checkerというアプリで、チェックできる。
色だけで情報を表さない。必ず文字も入れる。色弱の人がわからないので。
前の画面ってなんだっけ？とならないようにアニメーションをつけるようにする。
talkbackでの動作

LT4つ目：Kyashはなぜ使いやすいのか

ノハナの方のLT

資料

以下、LTを聞きながらのメモ

今回のアンケート（connpassの参加フォームで「UIが好きなアプリは？」という質問があった）でも、

Kyashが一番評価がよかった。

1. シンプル

Navigation Drawerがない。

機能が絞れている。
我々は、多機能にしがちだが、Kyashは機能が絞られててよい。
階層が浅い
画面スタックが最大でも3階層
人間は画面について覚えにくいが、3階層しかないので覚えやすい。
画面内の要素が多くない

これらのこと = アプリで迷子になりにくい。

2. 操作感のあるUI

請求画面と送金画面が大体似ているが、

画面の下の操作が少し違う。

画面遷移

下から出てきて、前の画面が消えるようになっている。

横スライドで画面が変わったりもする。

画面の連続性を出すためにいい。

3. こだわり

39円を送ると、thank you というアニメーションが出る。

一見意味ないことのように思える（これでユーザ数が増えるとか思えない）が、こだわりがあってよい。

ギフトコードの画面についても、細かいアニメーション（プレゼントボックスがカタカタ動く）がある。

これも意味ないと思うが、こういったこだわりのアニメーションを実装したりすることで、

ファンが楽しくなって、ファンが増えていく。

以下、懇親会で周りの人と喋ってて知ったこと

https://material.io
マテリアルデザインについて書かれている。
なるほどデザイン
初心者向けのデザインの本。読みやすい
https://www.amazon.co.jp/dp/B012VJNW6Q/
Xamarin
Android, iOSアプリどちらも一度に作れる
Human Interface Guidelines
iOSアプリを作るときのデザインのガイドライン

Androidエンジニアデザイン部 #2に行ってきました