見出し画像

BONOでUIデザインのアウトプットを始めました(Part 2)

こんにちは!おかけんたです。
BONOでの課題はアウトプット重視ということで、できるだけ手を動かすようにしています。


このnoteでは、最近のアウトプットを共有できればと思います!(全然できてないところが多いと思うので、思うところがあればコメント頂けると飛んで喜びます)

Output 1(音声UIの投稿作成フロー)

デザイン作成意図:音声UIのアプリの原稿を作って、投稿する画面を作りました。Xやiphoneの録音画面を参考に、デザインしました。

投稿作成フロー
  • ボタンだけじゃなくて、文言も追加

    • 全体構成を作る

      • 対象画面

        • 音声入力前の画面(これしか作れていなかった)

        • 音声入力中の画面

        • 音声入力後の画面

      • 階層構想があるわけではない(パラの構成にな
っている)
→キャンセル・戻る という文言

      • フィードUIから接続できるようにする

        • 閉じたり、やり直す導線が必要

      • 音声入力後の画面

      • 音声入力中の画面

        • 音声SNSなので、画像よりも音声入力のボタンを大きく
する

Output 2(投稿の検索)

デザイン作成意図:音声UIのアプリの、投稿を検索する画面をデザインしました。同じくXを参考にしつつ、「代表的なカテゴリー」、「おすすめユーザー」を表示するようにしてみました!

投稿の検索
  • 検索前の画面と検索中の画面が必要だった

    • 検索中の画面

      • Card UI:複数の情報を1つのUIにまとめられる

      • ナビゲーション:なかにブロックが3つある

      • Contents:Cardが並んでいる

    • 検索後の画面

      • 過去の検索履歴

      • キーボード

      • 検索前の画面に戻れるように「キャンセル」ボタンをおく


見て頂き、ありがとうございました!

いいなと思ったら応援しよう!