UIデザインの学習記録(その2)
02_新規登録画面
お題は若者向けの音楽再生アプリのログイン画面でした。
若者向けのポップな音楽アプリのデザインってどんなんだろう…と考えながら前からアイソメトリックアートに挑戦したかったので、練習もかねてデザインに取り入れてみました。
この時、figmaも使ってみたくて挑戦したのですが、使いこなせず一回断念しました…
ログイン画面はどのアプリにも必要になってくるUIデザインなので、もっといろんな種類のログイン画面を作れるように勉強していこうと思いました!
03_メッセージ画面
XDでチャットアプリの画面の作り方とか全然分からなかったので、youtubeでチュートリアル がないか探し、今回はチュートリアル をみて作成しました。
(チュートリアル を見ながら作成することによってXDの使い方とか、ショートカット とか知ることができるのでオススメです😃)
お題はビジネス向けのチャットアプリでした。
ビジネスのチャットはchatworkとTeamsを使ったことがあったので、Teamsのように会議の設定をできる機能があればいいなと思い、その画面も作ってみました。
チャット一覧画面
メッセージ画面
■プロトタイプ(XD)
https://xd.adobe.com/view/91115c49-d5dd-4868-7851-ca8ff0f291d2-e720/
実際に作ってみたことで、XDでは文字の入力画面など細かいアニメーションは作成できないことがわかりました…。
■アクティブ・非アクティブについて
空のメッセージの時、ユーザーのミスを防ぐために送信ボタンの色は送信できないように非アクティブのデザインにしないといけないということで、下記の記事がとても参考になりました!
まとめ
今回は、「ログイン画面」と「チャット画面」ついての学習記録でした。
どちらの画面もアプリを使うときに頻繁に目にするので、ユーザにとって使いやすい工夫が細かくされていることなど知りました。
ただ、表面のデザインを作ることだけではなくそのようなユーザビリティを工夫した使いやすさも考慮するのも大事だなと思いました。(難しい〜😅)
上記の記事は、2014年にUIデザインについて書かれた記事です。
UIデザインが当時価値が不明であり、得体の知れないものとして捉えられていた際に、UIデザインとはどのような価値があるのか、どのようなデザインがUIデザインなのかについて記載されており、目から鱗でした。
こちらの一文を読み、美的感覚に寄ってしまっていた自分がいて、その行動、結果、数値といったどういったものなのか少し考えるようになりました…
その他の参考文献
この記事が気に入ったらサポートをしてみませんか?