今日のデザイン#080 有機的なタブのデザインを持つフィットネスアプリ「Fitness for Weight Loss」

ベラルーシのデザイナーYury Fomochkinさんによるフィットネスアプリのデザインです。
1回7分ほどのワークアウトによるダイエットのためのアプリで、毎日のワークアウトの管理や日々の体重の管理を行うことができます。

UIとして特徴的なのは、カレンダーを表す”タブ”。
一般的に用いられる矩形ではなく、下部エリアからにょきっと伸びる有機的な曲線が用いられています。
001

同様の曲線は、日々のカロリー消費などを表示するグラフの形状にも用いられています。
005

グラデーションの配色と相まって、脂肪が燃焼していくような感覚を味わえるような気がしてきます。
このような感覚的な認識は、直線的な形状よりも曲線の形状の方が感じやすいのかもしれませんね。

管理画面のUIは個々の要素のサイズは小さいものの一覧性に優れたレイアウト。
一方、ワークアウト中の画面は「画像(動画)」「時間」「ワークアウト名」「次のワークアウト」のみとシンプルで、ワークアウトに集中できるデザインになっています。
002

タブレット版では、より”ダッシュボード”感のあるレイアウトになっており、情報の一覧性が高くなるよう設計されています。
004
006

目標達成時に取得できる「ACHIEVEMENTS」は明度が高い色のグラデーションが用いられており、華やかで今っぽい印象です。
003

画面が小さく一度に表示できる情報に限界があるスマホでは、”タブ”を使ったUIはOSのUIにも採用されているほど定番のUIです。
そんなどこにでもある「定番」だからこそ、オリジナルのデザインを組み込んだ時に、個性とインパクトを与えることができるんだと思います。
Webやアプリのデザインをする場合は、「Fitness for Weight Loss」のような独特のUIも検討してみてはいかがでしょうか!

Designer Info
[ via Fitness for Weight Loss on Behance ]

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です