アプリ設計の基本方針


レスポンシブ

  • 必ずレスポンシブデザインにする
    • ToDo 画面サイズ調べる

インタラクティブ

  • ユーザーやビジターがアクションを起こせるように
    • チャット
    • シミュレーション

チャット

  • モバイルはチャットアプリの表示形式
  • ウェブはチャット用のサイドバーを表示

タイムライン

  • 画面を開くのではなく、画面の内容が部品として下に追加されるイメージ
  • 上にスクロールしていくと、やった作業が全て並んでいる
  • どこからでもチャットやモバイルメニューから次の作業に移行できる
  • 途中の作業も上に遡って完了できる

ツールバー

  • 上部にタブバーを配置
  • 位置固定
  • 常時表示

#画面設計メモ v-toolbar + v-content + v-footer

Published by Ameba Ownd

Dev Log

タイトル

  • タブバーにタイトルを表示
  • どこにいるのか、何をしているのか、一目で分かるように

メニュー

  • モバイルはタブバーの左上のボタンからモーダルメニューを呼ぶ
  • デスクトップは、メニューがタイトルの横に並んでいて、ドロップダウンで呼び出す

多言語

  • ToDo 言語を保持するファイルをどのように管理するか

縦スクロール

  • スワイプしない
  • 横にはスクロールしない
  • 幅が欲しいときは横に持たせた状態で、やはり縦方向にスクロール

カルーセル

  • 横に並べて見せたいときはカルーセルを使用する

カード

  • カードを使った実装に統一する
  • カードの見た目は CSS で切り替える
  • カードの中身をコンポーネント化して

チュートリアル

  • オンラインチュートリアルを必須で用意
  • どこからでも呼び出せるようにしておく