一般に、UIを設計する場合、モックアップの外観だけがあったため、Webページの設計時に注意すべきところがミスする点がよくあります。UIデザイナーとグラフィックデザイナーを区別する良い方法です。

どうしてそんなこと言いますか？

一般的なグラフィックデザインとは異なり、Webページはスクロール、マウスの移動、コンテンツの長さの変更、端末の使い、幅と高さなど、さまざまな原因でレイアウトが変わることがあります。したがって、UIを設計するのも決して簡単ではありません。

ここでは、さまざまなパターンを1つずつ紹介することはできませんが、いくつかのアイディアを説明します。

状態

UIを設計するときは、状態から始めることが多いです

空っぽい状態

テキスト、タイトル、画像などない状態ではどう表示するか。ユーザーがアカウントを作成したばかりで、情報のないページがたくさんあります。その場合はUIの表示はどうなりますか？

多くのデザイナーはこれらの状況を考慮しないことがよくあり、モックアップは理想的なUI表示で作ってしまった場合があります。開発者も注意しないと、そのままモックアップを実装され、本番環境で違った表示してしまう場合があります。この方法では、実際のアプリケーションに適用できません。

一般的なステータス

通常の状態で、UIはどう表示するのか

まれな状態

まれな状態とは、通常の状況ではまれであるが、存在している状態です。たとえば、タイトルが長すぎる場合はどのように表示しますか？直接改行しますか？または、代わりに「...」を使用しますか？または、2行後に「...」を使用しますか？

もしくは実際の画像に対する画像の比率が正しくない場合はどうなりますか？たとえば、カードデザインの画像比率は16：9ですが、一部のユーザーの画像は1：1、9：16でもあります。直接カットしますか、それとも他の方法を使いますか？

テキストレイアウトの処理

ブラウザでは、 rem、 emを使って、直接書き込むことなく相対フォントサイズでデザインしています。SCSSまたはその他のツールを使って、UIをより体系的に管理できます。

また、テキストを異なるデバイスで比例的にスケーリングする必要があるかどうか、または個別に異なるフォントサイズを使用する必要があるかどうかを検討する必要があります。

空白

空白のシステムを管理する方法は非常に重要です。適切なギャップがあると、UIの一貫性が向上し、管理しやすくなります。たとえば、空白のシステムのセットを定義し、タイトルとタイトルの間のギャップ、カードとカードの間のギャップなどを定義することで、UIの一貫性が向上することができます。

読み込みステータス

データがロードされていない場合は、Placeholderを使用して実行できます。最近、いくつかの偽のUIを作成してそこに配置することがトレンドでしたが`background-positionは実際にレイアウトとペイントを発火します。あまりにも多くは良いことではないので、代わりにスピナーやgifなど使えばよいと思います

エラーが発生した場合はどうすればよいですか？

UIは400、404、401、402を処理できますか？ユーザーがフォームを入力している場合、ポップアップなどの表示とかしましたか？データはlocalStorageにもしくは他の方法で保存しましたか？データが直接なくなった場合、ユーザーが落ち込むことが多いので注意が必要です。
入力の検証は正しいですか？（対応するエラーメッセージを設計したり、考えられるエラーをカバーしたりしていますか？たとえば、パスワードの長さ、電子メールの長さ...）
エラーメッセージは十分気づかれますか？
- ユーザーは簡単にエラーを発見できますか？
- ユーザーが次のステップに進むことができるように、完全な情報とフォローアップができますか？
APIが呼び出されたときにUIがすぐに応答できますか？
- リクエストを呼び出すとき、ロード中、保留状態とかUIに反映していますか？

結論

この記事ではUI設計上いくつ考えなければならないことをまとめました。ご参考になれば幸いです。