見出し画像

ANDROID UI & GUI DESIGN 輪読会 - 2

3-1。AndroidのUI48dp

Androidのガイドラインには、48dpリズムを持って設計するのがよい
このサイズは、指先でタッチスクリーンをタッチするとき接触する平均的なサイズ

## 48dpサイズを使用しているところはどこなのか

- アイコンである
アイコンは、指先ひとつで左右に移動
縦横48dpに設計すればよい

xxxhdpi192pxxxhdpi144pxxhdpi96opx

- ボタン : ボタンも48dpの高さ

- リスト

48dpの高さ
48dp以下の高さでリストを作成する場合👉クリックすることが難しい

解像度 | 48dp px値 |mdpi | 48px |xhdpi | 72px |Xhdpi | 96px |xxhdpi | 144px |xxxhdpi | 1920px |

ざっとあれこれ作成した場合実際の画面で見たとき押しにくい→再作業する場合がある。そのため、48dpに合わせるのが良い。
それか、指先が届く長さである8mm程度を覚えた方が良い。

3-2。タブ

https://material.io/design/components/tabs.html#usage

Androidのタブは、下部ではなく、上部に主に位置する
理由は、下にあるソフトウェアキーとの競合を回避したい意図である

しかし、Androidデバイスが以前に比べて大きくなったため、上部にあるタブをクリックが難しい場合がある。
これを解決するためのものでスワイプ(swiping)である

タブを実装する方法1.固定タブ2.固定タブ+スワイプ3.スクロールタブ+スワイプ

固定タブは、スクロールタブとは異なり、実際に押すアクションが必要なので、タッチができる十分なスペースが必要である。

スクロールタブは4つ以上の項目を処理するのに適切である。
左右スワイプして、タブ間の移動も可能、タブ領域自体も左右にスクロールが可能のため、大量のアイテムを示すときいい。

3-3。ナビゲーションドロワー(navigation drawer)

https://material.io/develop/android/components/navigation-view/

[拡張性]
トップレベルのメニューが複数ある場合も設計することができる

[アクセシビリティ]
画面左から右にジェスチャーをとったらメニューが表示される
👉アクセシビリティが向上する

[ナビゲーションドロワーメニューをデザインする際に留意すべき点]

1.既存のコンテンツビューの上に表示されるように設計しなければならない。2.アクションアイテムはドロワーメニューが表示されたときに必要なものだけアクションバーの上に表示3.タイトル領域(ユーザーのアカウントやサービス名ひいき方がいい。)4.ドロワーメニューにアクションを入れない。

**3-4。リスト

モバイルUIで最も基本的情報表現形式**

3-5。グリッドリスト

縦方向にスクロールされたときと横方向にスクロールされたとき、図のように、固有の方向がある。