マガジンのカバー画像

マテリアルデザイン

10
本
運営しているクリエイター
ocha

【マテリアルデザイン】FAB

FAB(Floating Action Button)画面上で最も重要なアクションにはFABを使う。 FABは画面上の他のすべてのコンテンツの前に表示され、丸みを帯びた形と中央のアイコンによって認識できる。 ただし、画面が主要なアクションを表す場合など、すべての画面にFABが必要なわけではない。 FABは、スクリーンの主要なアクションの提示にのみ使用する。 FABは左寄せ、中央寄せ、右寄せのいずれでもよい。 ナビゲーションバーの上に配置することも、バーの中に入れ子にす

ocha

【マテリアルデザイン】アクションをどこに配置するか〜App bar/Tab/Navigation〜

アプリ内でボタンを置くならどの場所？「ユーザーにアクションさせよう！」「オブジェクトを表示しよう！」と思った場合、それらはどこに配置すれば良いのか？の基本から確認してみます。 「Components overview」を見る限り、このあたりが該当しそうです。 今回はオブジェクト指向UIデザインのフローに沿って「ルートナビゲーション」の検討をしたいと考えているため、これらのうち下記の項目におけるマテリアルデザインを確認してみます。 （これらはマテリアルデザイン上、「Navi

ocha

【マテリアルデザイン】visibility icon、パスワード見たいときはどっちのアイコンを使うか問題

visibility iconは2種類存在するvisibility visibility off アイコンの使いどころがサービスごとに異なる件私の個人的な感覚としては、こうです。 ・visibility：パスワードが見える状態の時に使用する ・visibility off：パスワードが見えない状態の時に使用する 目の形のアイコンは、「状態」を示すものだから、という考えだからです。 しかし、トレースなどしていると、サービスごとに上記と逆のパターンでアイコンが使用されてい

ocha

【マテリアルデザイン】テキストフィールド

2種類のテキストフィールドが存在するFilled text fields Outlined text fields Outlined text fields 塗りつぶされたテキストフィールドよりも視覚的な負荷が少ない。 シンプルなので、フォームがたくさん並ぶページで有効。 注意点同じページ内で異なるフォームを混在させない。フォームの種類は統一させる。 フォームを構成するものContainers コンテナは、テキストフィールドと周囲のコンテンツとの間にコントラスト

ocha