最小カラーパレットやマイクロインタラクションなど、モバイルのUI・UXデザインにおける最新トレンド

SHARE:
image via. dribbble
image via. dribbble

<ピックアップ> Mobile 2015: UI/UX Trends

マネー関連のサービスを展開する「Monitise」で、UXとビジュアルデザイナーを勤めるOnul Oralさんの記事をピックアップしてみました。13個に上るトレンドそれぞれについて、WhatとWhyが説明されています。

「線」を除去し、スペースとブロックを活用

What: 羅線や区切り線などは、スクリーン上の特定のコーナーやカテゴリーなどを区別させることに役立つ一方で、インタフェースをうるさくしてしまう。区切り線を使わずに、コンテンツの固まりをスペースで区切ることで、よりクリーンなインタフェースが実現する。

Why: あからさまな区切り線などを取り除くことで見た目をモダンにし、ユーザーは機能やコンテンツにフォーカスできる。例えば、画像やフォントを大きくすることで、視覚的な明瞭さを形にできる。「線」を「スペース」に置き換えることで、邪魔になることなくコンテンツを区別できるはず。

より少ない色使い

What:2013年のフラットデザインの登場で、カラースキームを最小限に抑えるのもまたトレンドになった。シンプルであること、そしてわかりやすさを重視してのこと。その結果、デザイナーやユーザーは、より少ない色使いのクリーンな見た目を好むようになっている。

Why: 特定の雰囲気を作り出し、ユーザーの注意を導き、ブランドを発信すること。これには、「色」という要素が欠かせない。ところが、色の乱用は注意の妨げになってしまう。より少ない色を使うことで、ブランドアイデンティティをデザインに明確に反映できる。主要機能を目立たせ、アプリのナビゲーションフローの改善にも繫がる。

マイクロインタラクション

What:マイクロインタラクションとは、特定のユースケースにおいて、ビジュアルを使って小さく補足(例:アニメーションや音など)すること。アイテムをお気に入りする、ポップアップメッセージを表示するなどのシナリオが含まれる。細かなインタラクションではあるものの、ユーザーの注意を適切に促すことでプロダクトの差別化に繫がる。

Why: こうしたインタラクションは、ユーザーのタスク完了を導くシグナルとして活用できる(例:アプリ内の設定を変更する際に、ちょっとしたポップアップメッセージのようなものを出す)。マイクロインタラクションを上手く取り入れているアプリは使いやすく、より楽しく、またユーザーとのエンゲージメントも高い。

残りのモバイルUI/UXトレンドについては、元記事をご覧ください。アプリのデザインに入る前に標準デザインを設定すること、またプロトタイプを作成することの重要性についても語られています。

via. Medium

BRIDGE Members

BRIDGEでは会員制度の「Members」を運営しています。登録いただくと会員限定の記事が毎月3本まで読めるほか、Discordの招待リンクをお送りしています。登録は無料で、有料会員の方は会員限定記事が全て読めるようになります(初回登録時1週間無料)。
  • 会員限定記事・毎月3本
  • コミュニティDiscord招待
無料メンバー登録