最近のUXデザインにおける、スマホアプリのインターフェイスに使用されているアイデアのまとめ

Post on:2018年6月27日

植物の水やりを管理するアプリ

Case Study: Watering Tracker. UI Design for Home Needs.

最初に紹介するのは、日常の問題を解決するアプリのインターフェイスのコンセプトです。人々は、植物の水やりをすぐ忘れてしまいます。

このアプリは、必要なときに水やりすることをユーザーに思い出させるだけでなく、水やりに関するデータも記録します。さらに、さまざまな種類の植物を世話する方法も詳細なデータで提供します。

アプリに植物を追加すると、ユーザーは今すぐ水やりする必要がある植物のディレクトリを取得できます。ユーザーによって追加された植物のコレクションは、タブで管理できます。タブの上にあるタイトルは植物の名前が表示され、水やりのタイミングを通知で知ることができます。

タブの右上にある滴のアイコンは水との相関関係を設定でき、このタブに表示される植物がすぐに水やりを必要であることをユーザーに通知します。スクリーンの最下部のタブでは、最近水やりをしたことを示すアイコンが表示されます。

植物を登録するのは簡単です。スマホのカメラで写真を撮ると、アプリケーションはそれを認識し、植物のカタログからデータを提供します。その植物の名前をはじめ、適した温度、湿度、光の適した世話の仕方などのデータも含まれています。

安眠アプリ

Works — Slumber iOS App

安眠アプリは、睡眠やリラックスするのに苦しんでいる人のためのアプリです。ユーザーインターフェイスは、アプリの機能に合わせて設計されています。夜の落ち着いた雰囲気をだすために、ダークのカラーパレットに基づいたグラフィックが使用されています。下方向のリフレッシュは素晴らしいイラストと控えめなアニメーションによって解決されています。また、フォントの選択はユーザーが短時間で画面をスキャンできるように、高い可読性と明確なタイポグラフィの階層をベースにしています。

シンプルで分かりやすい操作画面は、ユーザーが睡眠や瞑想を完璧にするために最も快適な設定とサウンドの組み合わせを選択できます。背景効果をチューニングすると、ユーザーはパーソナライズされたサウンドを作成することもできます。

ハンバーガーショップのアプリ

Case Study: Tasty Burger. UI Design for Food Ordering App

このアプリはハンバーガーを注文して配送するためのユーザーインターフェースです。ユーザーはメニューからハンバーガーを注文したり、食材を追加または削除するオプションをカスタマイズできます。UIのカラーパレットではデザイナーは背景のコントラストを効果的に使い、テキストの読みやすさ、リストの位置と操作を目的としたインタラクションゾーンが明るい背景に表示され、高い可読性を提供しています。また、暗い背景が適用された写真のコンテンツとタブはビジュアルパフォーマンスをサポートしており、グラフィックをスタイリッシュでエレガントに見せています。

注文したユーザーは店舗での受取または配達を選択でき、支払いもさまざまな方法を利用できます。

ハンバーガーを注文する際のデザインにも注目です。操作を快適にするアニメーションがあちこちに見られ、ハンバーガーを美味しく見せています。

TODOアプリ

Case Study: Upper App. UI Design for To-Do List.

このアプリは、ユーザーの生産性を向上させるシンプルでエレガントなTODOリストのアプリケーションです。UXの視点では、TODOリストのデザインは非常にシンプルなインタラクションと直観的なナビゲーションに重点が置かれていますが、UIの視点ではユーザーがどんな環境でも高い可読性と視覚的な階層を備えています。さらに、このアプリはタスク完了の進捗状況を分析し、ユーザーに最新の動機づけを表示します。

基本機能のボタンはスクリーンの下部に配置され、大きなデバイスのユーザーでもユーザビリティをサポートしています。スワイプ操作が効果的に採用されており、ユーザーはタスクに完了マークを付けることも、タスクをリストから削除することもできます。

料理のレシピアプリ

Perfect Recipes App

このアプリは料理のためのスマホアプリで、レシピや食材を購入できるショップを見つけることができます。データベースは常にアップデートされ、最新のレシピが表示されます。ユーザーは自宅にいながら、レシピを見つけたり、欠品していた食材の購入リストを作成することができます。

ユーザーは最初に、健康的な食生活・減量・筋肉増強などの達成したい目標を設定します。また、好みではない食材を登録して、それらを含むレシピをアプリが表示しないようにすることができます。

フィルタのパネルでは、レシピのリストを調整することが可能です。ユーザーは、調理時間、食事の種類、料理の種類などを設定できます。パネルは片手で操作しやすいように、スクリーンの下部を基準にデザインされています。

ベジタリアン用のレシピアプリ

Light or Dark UI? Tips to Choose a Proper Color Scheme

もう一つ、レシピアプリを取り上げます。このアプリはベジタリアン用のレシピアプリで、菜食主義のルールに基づいて料理を選択し、ショッピングリストに必要な食材を加えることができます。
UIのデザインは明るい背景にカード型コンポーネントが効果的に使用されています。インターフェイスは新鮮でスタイリッシュに見えますが、すべての情報は可読性に重点が置かれています。さらにコンテンツはすばやく操作できるように、明確にデザインされています。インターフェイスのアニメーションも非常に気持ちいい動きが加えられています。

アラームアプリ

Case Study: Toonie Alarm. App UI Design.

このアプリはユーザーが日常的に使用するアプリで、起床や仕事や約束の時間にアラームを使用すると、ステッカーがもらえ、アップグレードすることができます。ホーム画面では設定したアラームと収集したステッカーが表示されます。各アラームをスワイプすると、設定の変更や削除することができます。

アラームをアクティブにする時のアニメーションは非常に楽しく、分かりやすいです。

かわいいキャラクターはニュースや報酬やエラーを知らせる時に、親しみを加えます。

家電操作アプリ

このアプリはスマートホーム化の機能を備えています。優れた特徴とされるスクリーンはユーザーが部屋を選択し、温度や湿度やエネルギー消費などの基本データを見ることができ、設定を変更して異なるセキュリティレベルに変えることができます。

Conceptual Animation: Making UI Design Stand Out

UXのコンセプトは暗い背景を適用してインターフェースをエレガントに見せ、視覚的なレイアウト要素とカラーアクセントで素晴らしいコントラストを作り出しています。

インターフェイスは物理演算に基づいたアニメーションが採用されており、特にアイコンが気持ちよく動作します。これらのトランジションはオブジェクトの単純な移動ではなく、わずかな遅延効果が加えられています。これにより、コンセプトにスタイルとエレガントが追加されます。

家計簿アプリ

Case Study: Home Budget App. UI for Finance.

このアプリは、個人の資産を管理するためのアプリケーションです。Web版とスマホ版の2つのバージョンが用意されています。Web版のダッシュボードでは、指定期間の情報を表示します。一般的にデザイナーがダークのインターフェイスを選択するというのは、ユーザーの注意をインタラクティブなゾーンに引き付ける魅力的なレイアウトを作成することができます。

スマホ版のインタフェースでも、中心となるコア機能を持っています。ユーザーに現在の日にちを知らせ、外出先でも新しいデータを追加できるようにしています。

名刺管理アプリ

この楽しそうで明るいコンセプトは、仕事のための非常に真面目なアプリです。名刺形式で連絡データを作成し、管理することができます。複数の連絡先が必要な人物の場合は、アニメーションに表示されるようにカードのセットを作成することができます。
プロフィールのアバターからカードを引き出すという楽しいエフェクトを使用して、アニメーションはそのプロセスに命を吹き込んでいます。

バランスアプリ

バランスアプリは、家計を管理するスマホアプリの前述とは異なるコンセプトです。ユーザーはすべての銀行の残高を簡単に確認したり、特定のカテゴリの出費を確認したり、ユーザーが設定した予算の残高を確認・更新したりすることができます。
安心・信頼・成長といったキーワードと関連するように、デザイナーはグリーンをベースカラーとして採用しました。

ファイナンスアプリ

家計を管理するアプリをもう一つ取り上げます。このアプリはその機能性が異なり、個人あるいはグループで出費と収入を記録することができます。グループとは家族だけでなく、中小企業にも対応しています。
スクリーンではさまざまなデータが表示されるため、高い可読性を備えたフォントが採用されています。また、円グラフのデータがリストに変化するスタイリッシュな移行のアニメーションは、操作を快適にしています。

フィットネスアプリ

Case Study: Manuva. UI/UX Design for Gym Fitness App.

スポーツや健康を扱うフィットネスアプリのコンセプトを紹介します。このアプリはさまざまなジムでパーソナルトレーナーを見つけ、そのジムのメンバーでなくてもセッションを予約することができます。ユーザーは地図を使い、近くで利用可能なトレーナーやジムを見つけ、セッションの開始時間を調べることができます。
UIのデザインはレイアウトのディテールとアクセントのために、ブルーとピンクの対照的なカラーがホワイトの背景に使用されています。シンプルで美しいアイコンは独自にデザインされたもので、アプリのナビゲーションシステムに貢献しています。

イラストも独自にデザインされたもので、プロセスを魅力的かつ明確にするためのチュートリアル用に作成されています。

カレンダーアプリ

Gestalt Theory for Efficient UX: Principle of Similarity.

このカレンダーアプリのUIコンセプトは、色鮮やかなデザイン要素とタイポグラフィによって強力なビジュアル階層とポジティブな雰囲気を作り出しています。そのインタフェースは、デザインの原則にある類似をユーザインターフェイスに使用した良い事例です。

曜日の文字はカレンダー内の数字に使用されている色とは異なる色で、視覚的にグループ分けされています。こういった色の使い方は、ユーザーが情報を理解するプロセスをシンプルにします。

色の類似は他にも使用されています。ユーザーが選択した週は他の週より明るく見えます。重要なインタラクティブのゾーンは明るいカラーでデザインされており、瞬時に目立ち、視覚的なアクセントを提供しています。デザイナーは色を使用してグループ化を行い、効果的なビジュアル階層を作り出し、ナビゲーションを容易にしています。