Daily UI #021(Home Monitoring Dashboard)
Daily UI 21日目のお題は「Home Monitoring Dashboard」。
家電を操作できるアプリの画面を制作します。
制作過程
今回は約3時間半でした。
リサーチ
既存のホームモニターアプリを主に参考にしました。意外とたくさんあってびっくりしました。
要件定義
いつものようにChatGPTに要件を詰めてもらいました。
ラフ
ここは割愛。
ワイヤーフレーム
制作したワイヤーフレームがこちら ↓
ビジュアル
制作途中 ↓
タブバーは、スポットライトが当たっている感じにしてみました。Dribbbleで見たデザインを参考にしています。ダークモードの方が映えそうだなと思い背景を暗くしたんですが、上部にイラストを入れるとあんまり合わなかったのでライトモードに戻しました。
完成
制作した画面がこちら ↓
場所ごとに家電を見られるようになっています。上部のタブだと、状態別(電源がONかOFFか)で見られる想定です。画面中央の画像は、リビングに設置したカメラの映像です。ペルソナが在宅勤務の想定なので、仕事中に部屋を出なくとも子どもの様子を確認できる想定です。
デザインのポイント
タブ分け
iOSで言う「Segmented Controls」を参考に作りました。「現在ON」と「現在OFF」タブにはそれぞれ該当する機器の数を()で書くことで、タブを押さなくとも一目で消し忘れなどがないか分かります。外出時なんかに使えるんじゃないかと思ってます。
制作してみて
・ペルソナのエコ志向を反映できなかったのが反省点です。先月より○%節約できています✨みたいなメッセージを出しておけば良かったかも。