【UIアウトプット】DailyUI #004 – Calculation

【UIアウトプット】DailyUI #004 Calculation

シルスプのブログにようこそ

DailyUI の課題４まで来ました。今回は「Calculation」

１．４日めの課題

４日目の課題は「Calculation」
学生時代からお世話になってる計算機。
当時は、関数電卓を使っていました。
こないだ触ってみるとまだ使えました。
さすが日本製！

現在よく使っているのは、実物機で手のひらサイズのものです。
ボタンは、真ん中が少しへこんでいて、触ったときにフィットします。
ボタン同士が離れているのもいいですね。

利用シーンは、作業しているときにちょっとした計算をしたい。
実物の計算機を使うときも、四則計算とメモリー機能がついているもので
十分満足しています。

書類作成や考え事をしながら計算機を使うシーンが多いので、
・スマホ利用を前提
・単純な四則計算のみ
・簡単なメモリー機能
・カラフルな計算機を使いたい。

実物は、空間に置かれるので目につくけど、
スマホ版は、使うときのみ目に触れるので
カラーは好きなものにします。

Web版とかアプリの計算機を調査。
Web版だと画面が広いので、実機に近い並びにできています。

今回は、スマホ版なので横幅が狭い！
ボタンが４列ぐらいしか並ばないなぁ
隙間もなしのほうがいいかも。

端は、隙間を開けることに決定。
アプリを使用しているときにスマホを動かすと
いらない所を触って画面が動くのにイライラすることの
ないようにしたいと思います。

４．作品

スマホ画面を想定したので、ボタンの選択、配置に悩みました。
結局、使用中の計算機の実機にかなり、引っ張られたような気がします。

ボタンに配置する文字や数字はかなり大きめにしてみました。
こだわったのは、「＝」
実機計算機のように、大きめにしました。
DailyUI #004 – Calculation

スマホ画面を想定すると、縦長なので難しかった。
ボタンのデザインがうまくいかない。
イメージしたものとかなり出来上がりが違う。。。。
ボタンの表現が課題です。

カラフルな計算機にしようと、最初は考えていました。
数字を見やすくするには、単色で黒とのコントラストを考えた方が
いいとの結論に達しました。
赤とオレンジ！最後まで悩みましたが、自分の好きなオレンジ色に決定です。

制約のある画面をデザインするには、何を残して何を省くかが問題となります。悩ましいです

では、またねぇ～