3分ツイートシェアはてブLINEPocket今週もdailyUIを頑張ったので報告します。dailyUIの進捗報告。プロトタイプ作るのはとっても大事。Message(Error/Success)架空の大学生向けレジュメ管理アプリ「Rakutan」の決済機能部分のフラッシュメッセージを作成しました。Protopieというツールを使用してインタラクティブなアニメーションを作成しました。Protopieの作業風景はこんな感じです。UIが直感的で、少なくとも今は機能的にも満足しています。良かった点ローディングも考慮してアニメーションの作成ができたこと。イーズイン/イーズアウトの使い分けが結構できるようになってきたこと。反省点ボタン押した時のリップルエフェクトとかあるといいなぁ。Item)架空のECサイトの画面を作成しました。シンプルにしつつも、伝えたい情報がしっかり伝わるようなデザインを意識しています。ギターの名前はテキトーです。アニメーションを写真スライドとお気に入り部分に入れました。今回もProtopieというツールを使用して、インタラクティブなアニメーションを作成しました。基本はモノクロにしつつ、画像に青っぽい差し色を入れて、その色を展開しました。ハートの色を青くするのだけは微妙だったのでハートだけピンクで。画像を生かしつつ、シンプル目に、雰囲気を壊さないような配色、レイアウトを意識した。Messaging架空のメッセージアプリの画面を作成しました。マテリアルデザインっぽい雰囲気を取り入れつつも、シンプルにメッセージアプリとして使いやすいUIを心がけました。今回もProtopieというツールを使用して、メッセージを送信する時のインタラクティブなアニメーションを作成しました。チャット画面自体は仕事でも作ったことがあり、その際にインスタ、Twitter、Facebook、LINEと言った主要アプリのUIはトレースして調べた気がします。paletteというサイトで決めました。Designっぽい配色が生成できるツールです。Designに則りながらやっています。Design感が嫌なのでやめました)作業風景。良かった点リサーチ済みだったので、要素がある程度頭の中に入っており非常にスムーズに画面作成ができた。UIデザインは経験値。Timer架空の大学生向け試験対策アプリ「Rakutan」の試験情報画面を作成しました。これまで作ってきたUIシステムを崩さないように気をつけつつ、新機能となる試験日までのカウントダウン機能を作りました。今回もProtopieというツールを使用して、インタラクティブなアニメーションを作成しました。シンプルなタイマーを作るのもアリだけど、せっかくなら何か特徴を、強い個性を持ったものを作りたい。いうことで、試験対策のアプリを作っていたので試験までのタイマーとして作成してみることにします。タイマーと言いつつも、試験対策となるとTODO機能も軽くあったほうがいいと思ったので、こちらも画面に起こしてみました。良かった点しっかりユーザー像を考えながら、必要な機能を吟味して作成ができたと思う。Protopie使い慣れてきた。既存のトンマナを崩さないように展開することができた。反省点やっぱりリップルエフェクトが欲しかった。(3回目)タスクを入力→追加できるところまで画面遷移作ってみたかった。SwitchOn/Offの切り替えスイッチを作成しました。ボタンを押してスイッチの切り替えが行えるようなアニメーションを作成しました。今回もProtopieというツールを使用して、インタラクティブなアニメーションを作成しました。画面自体は非常にシンプルですが、エフェクトに力入れて頑張りました。ボタンを押すとそこから波紋のように新しい画面が展開されてゆく。リップルエフェクトもどきのような画面を作りました。何に使うのかよく分からない画面なのですが、なんかスマイル可愛く見えてきたし、これはこれでいいか。アニメーション作るのは時間がかかります。アニメーションのためにどでかい楕円を用意しています。サトゥーProtopieのトライアル期間がもうすぐ終わってしまう...良かった点それっぽいアニメーションが作れた。インタラクティブなアニメーションが作れた。何のためのアプリなのか。エフェクトのアニメーションももう少しかっこよくできそう。いうわけで、来週は#16~#20の更新になります。コメントをキャンセルメールアドレスが公開されることはありません。date*日本語が含まれない投稿は無視されますのでご注意ください。質問箱の質問まとめ【大学受験】Ranking1一浪して東大に合格した凡人が浪人生活を振り返る。物理チートシート〜2体問題を攻略。