UI設計をFigmaで作る

[wappon28dev]

viewer の UI 設計を Figma を使って設計する

画面遷移

stateDiagram-v2
    home --> ログイン画面
    home --> viewer
    viewer --> ダイジェスト表示
    viewer --> タイムライン表示
    viewer --> アカウント情報と設定

Loading

• ホーム

  • キービジュアル
    • タイムラインとダイジェストの画面
    • ロゴとか
  • プロジェクトの説明
    • 目的
      • 動物園に行っても, 動物が動いていない or どんな行動をしているか分からない
      • 生態活動が不明な動物がいる
      • 動物をWeb上で見ることによって、動物園に行くことができない人でも、動物たちの魅力を体験できる
    • 何をして
      • 動物園の動物の動きをカメラで撮影し, 細分化してAIで動きを分析する
      • 人の手を使わずに自動で観察をし続け, その結果をネットを介して見られるようにする
    • どうしたいか
      • 入場者に楽しんでもらい, 動物の行動についてもっと理解してもらう
      • 分析によって, 新しい生態傾向を見つける
      • 見つけた生態傾向を比較してほかの動物との共通点を見つける。
      • 動物園に来る前の事前学習などでの利用
  • lapsquash 全体の説明
    • 動物を動画で記録する
    • 専用の端末でアクティブな部分を切り取られ、アップロードされる
    • サーバー上で、圧縮された動画をAIが分析し、動物の行動をタグ付けする
    • このアプリ上で、圧縮された動画を見やすく、ダイジェスト表示とタイムライン表示で見ることができる
  • どんな機能があるか
    • 動物の行動を直感的に理解できること
    • ダイジェスト表示とタイムライン表示を切り替えられること
    • アクティブな動きの記録を書き出せること
  • ログイン画面へのリンク / アプリを開く
    • 連携してなさそうだったら置く
    • 連携済みだったらアプリを開く

• アカウント画面

  • 連携の状態
    • なんで連携が必要なのか端的に文章があると嬉しいかも
    • 連携されているなら自分の情報 と 専用の端末 (squasher) と 記録されている (squashed) 動画の状態を表示する
  • 動画一覧
    • １日ごと, １ファイルに１ビューを作る