ユーザーインターフェースレイアウト

クリックでコピー

UIレイアウトを構築するために必要な5つのポイント。


エディターでビジュアル部分を完全にデザインし、いつでも好きなように調整、変更することができます。アプリを公開し、ユーザーが使い始めた後でも、データを失うリスクなしに、外観やページのレイアウトを完全に変更することができます。

したがって、エディタに切り替える前に、プロジェクトをどのような形で提示するかは、それほど重要ではありません。FigmaのプロトタイプでもPhotoshopの画像でも、Paintのドローイングでもフリーハンドのスケッチでも、Excelのスプレッドシートの図でもかまいません。重要なのは、それがどのように機能すべきかという明確なアイデアを持っていることです。

しかし、考慮すべき重要なポイントがいくつかあります。

Webとモバイル、どちらのアプリが必要かを決める

ユーザーの一部はモバイルデバイスから、一部はパーソナルコンピュータから作業し、データは共有されることになります。ただし、デザインは異なります。

モバイルおよびWebアプリケーションの構築には、さまざまなエディタが使用されます。開始する前に、その作業の詳細を一般的に理解することが重要です。

ユーザーグループの定義

どのような機能があるかによってユーザーをグループに分け、どのような違いがあるかを分析します。

ユーザーと管理者に分けるという話だけではありません。アプリケーションを異なるアクセスレベルの顧客や異なる部署の従業員が使用する場合、特定のユーザーが使用できる機能やデータに応じて、個々の要素やページ全体を隠したり表示したりすることができます。

例証が必要です

あなたのアプリケーションと同じようなアプリケーションをできるだけ多く見つけてください。それらのうち1つをベースとして、必要な機能を追加できるかもしれませんし、複数のアプリケーションの機能を1つにまとめたいと思うかもしれません。レイアウトを考えるときだけでなく、テクニカルサポートにアドバイスを求めるとき、プロジェクトの出演者や出資者を探すとき、そして新しいアイデアを生み出すときにも役立ちます。

ページを詳しく説明する

アプリケーションにどのようなページが存在し、それぞれにどのような情報が表示されるべきかを明確に理解する必要があります。

通常、申請書には

  • トップページ。登録の有無にかかわらず、すべてのユーザーがこのページを訪れることになります。
  • 管理者ポータル。設定やアカウントを管理します。
  • アクセスレベルの異なるユーザー用に別々のページを用意します。
  • 特定のアクションを実行するとポップアップページが表示される。
  • ユーザーへのサービスメッセージや、アクションの確認(データ送信の同意など)を行うウィンドウを別途用意することを忘れないでください。

データ交換を忘れずに

アプリケーションがどこでデータを取得し、どこに送信するかについて考えてみましょう。すべての情報はユーザーから来るのでしょうか?どのようなプロセスを自動化できるのか?

データの一部は、サイトから取得したり、会計ソフトからダウンロードしたりすることができます。アプリケーションへのログインを簡素化するために、Google や Facebook などの大規模なサービスの認証を使用します。これには、例えば「データのアップロード」や「Facebookでログイン」などのボタンなど、個別のインターフェース要素が必要です。

一度にすべてを考えるのが難しい場合は、必要最小限の機能でレイアウトを作成し、将来的に追加したい機能については別途考えを書きましょう。もし何か困ったことがあれば、テクニカルサポートの電報チャンネルに書き込んでください。