UI設計指針２

端末大きくなりすぎ！

Pixel3買った！握れる！でも対角上には指が届かない！ 使いやすいアプリがない、どうする！！！

つ く る し か な い

UI設計指針

ということで片手で作れるUIを考えていきます。

まぁ基本はこれなんだけどね。今回は具体的に。
UI設計指針 - 阿呆の浅知恵
以前作ったTwitterクライアントアプリはオレオレUIのジェスチャーで、完全に自分用って感じでしたが今回は誰でもわかりやすいように組もうと思ったので書きます。

結論から言うと

• コントロールを上部に置かない
• 上部にあったコントロールは下部へ
• 上部に置くものは
  • 他で代替可能なものにする
  • 滅多に使わないものにする
• ジェスチャーを使って直感的なUIを作る

Googleのアプリを見てみよう

YouTube

BottomNavigationになりましたね。下で操作できる。
検索も確かに人によるけど登録チャンネルよりは使わないかも。

Google I/O

アカウント切り替えは確かにあまり使わない。
青い日付変更は横スライドで可能です。
緑のはBottomSheet、ジェスチャーですね。開くと以下のようになります。

下にスクロールして戻せるのでいい感じ。

緑の戻るボタンはバックキーで代替可能。
赤はどこタップしても同じ動作になるので中央に寄せてるになりますね。
そして黒は今まで上にあったシェアなどの動作を下に持ってきたBottomActionBarです。

こんな感じで大きい端末でも使いやすいように気をつけてアプリを作っていきたいです。

自分のアプリでやってみた。

BottomSheetを利用して下におろせますし、上はアルバムなので押す部分がありません。
裏に写ってるジャケット一覧は上に「アルバム」という名前のヘッダーを付けたり、シャッフル再生ボタンを付けて下げる予定です。
それからBottomNavigationです。こういうのはスクロールすると消えるのが鉄板ですが、あまり動くのが嫌なので固定しています。前回の記事では情報量を多くと言っているのに単純にBottomNavigationを使うだけでは情報量が少なくなってしまうので狭めて、浮かせて、更に画面の上下を透かせています。これで窮屈さを減らしています。

それからジェスチャーで直感的UIを目指しました。
これで一画面でできることが増えます。

おわりに

こんな感じで現在アプリを作っていっています。
音楽再生アプリに使いやすいものがないので頑張って作っています。11月中にはストアに上げたいけど今年中に完成するかどうか…
これが終わったらマストドンクライアントいくぞ！