見出し画像

Daily UI #04 計算機 | やってみました!

今日は4回目のDailyUI をやったことを書きたいと思います。

4日目のお題は「Calculator」でした。

画像1

目的

簡単な計算をスムーズにできる計算機

意識したこと(全体)

・ボタンの大きさは大きめにして、押しやすいようにしました。

・「=」は計算の時に必ず使うものなので、計算記号の2倍の大きさにして押しやすくなるようにしました。


意識したこと パターン①(一番左)

・簡単な計算式「+ー×÷」にしてその他のものは縦3点リーダーで用途ごとに変更できるようにしました。

・私は結構長い計算を打って途中で間違えてしまうことがあるので、1つずつ消せるデリートボタンが欲しいと思ったのでつけました。バランスを保つために=を入れました。

・色は3色に絞ってシンプルにして、目に優しい色にしました。

・「1つ前の計算どうだったけ?」と思うこともよくあるので、時計っぽいアイコンを置いて過去の履歴も見れるようにしました。

・「0」はAndroidや実際の計算機で「00」というものがあるくらいよく使うと思ったので、=と同様大きくしました。

・計算記号とイコール・全消しは部類が違うと思ったので色を変えました。


意識したこと パターン②(真ん中)

・「Focus To -Do」というアプリで時間を測るタイマーのところがこのグラデーションでとっても素敵で使いたくなったので、グラデーションにして見ました。

・他のボタンはシンプルに白で統一しました。(やっぱりグラデーションには白が合うと思った)


意識したこと パターン③(一番右)

・最初はイコールの横にデリートボタンを入れようと思いましたが、押し間違えそうと思いました。上の右側に入れたかったので、テキストを左に寄せてみました。

・私的に+/-よりも()の方が使うなと思ったので括弧の方を入れました。


感想

今回はシンプルな計算機だったのでやりやすかったです。
自分の中でいくつかパターンをつくってそれぞれの良さを考えて作るのは楽しいなと思いました。
「押した時の画面」「3点リーダーや履歴の画面」なども作りたいと思います(⁎˃ ᵕ ˂ )ง
作るのが時間かかってしまったので次回は「10分調べたら一回作り始めてみる」のやり方をしてみようと思います!



ここまで読んでくださりありがとうございました(*ᴗˬᴗ)⁾⁾
よかったら『スキボタン』押してくださると、励みになります୧( ˃◡˂ )୨

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

記録:毎日投稿21日目 
朝活継続記録:13日目  どっちも継続頑張ります!



この記事が参加している募集

この記事が気に入ったらサポートをしてみませんか?