デザインに関する良い記事を常に探しているので、後で「 I love SP 」というサイトでの作業でそれらを使用できます。 本日、UI設計がUX設計とどのように異なるか、インターフェース設計の基礎となる基本原則について説明する別の記事を翻訳しました。
UI vs. Ux
アプリケーション設計に少しでも興味があれば、「UI」および「UX」という用語を聞いたことがあるでしょう。 しかし、それらはどのように違いますか？
最も単純な形式では、UXデザインはインターフェイスを便利にするものであり、UIデザインはそれを美しくします。 インターフェース設計は、視覚的な階層とインターフェース要素の混合です。 美しいデザインと良いデザインの違いを理解するには、インターフェイスデザインがデザインプロセス全体のレイヤーの1つにすぎないことを理解する必要があります。 おそらくそれが、2つの用語がしばしば混同される理由です。 この記事では、設計プロセスの観点から、両者の違いを説明します。
J. Garrettの著書「Elements of Interaction Experience」によると、UXデザインは5つの基本レベルで定義できます。 最も抽象的なものから始めましょう。
1.戦略
サイトの目標とユーザーのニーズ
大まかに言って、戦略は製品設計の基盤です。 この段階では、以下を理解するために、ユーザーインタビュー、競合他社分析、キャラクターなどを含むさまざまな調査手法が使用されます。
- どのような問題を解決しようとしていますか？
- ユーザーには何が必要ですか？
- あなたの製品はあなたのビジネスの文脈にどのように適合しますか（その目標は何ですか）？
2.一連の機能
機能仕様とコンテンツ要件
この段階で、プラットフォームの機能セットと情報量を決定する必要があります。 言い換えれば：
- この問題をどのように解決しますか？ どの機能をどの順序で実装しますか？
ここでのデザイナーの主な課題は、最小限のオーバーヘッドで正しく優先順位を付けることです。 確かにあなたは問題を解決する方法について何百ものアイデアを持っていますが、それらすべてを実装することはできません。
3.構造
情報アーキテクチャと相互作用の設計
この段階で、あなたのアイデアは構造の中で形になり始めます。 情報アーキテクチャは、アプリケーション内で情報がどのように提示され、ユーザーがそれをどのように知覚するかを担当します。 インタラクションデザインは、ユーザーが特定の問題を解決するのに役立つ一連のアクションを定義します。 一緒になって、ユーザーのニーズを満たすために最も論理的なステップを決定します。
4.レイアウト
インターフェイス設計と情報設計
この段階では、物事は抽象的ではなく具体的になりつつあります。
レイアウトレベルでは、前のレベルの構造を明確にするために、インターフェイスデザインと情報デザインを開発しています。 インターフェース設計は、ユーザーがシステムの機能と対話できるようにする特定のインターフェース要素の場所を担当します。 一方、情報設計は、この相互作用を促進するためにこの情報がどのように提示されるかについて責任を負います。
この段階で、ほとんどのUXまたは製品設計者が配線フレームに取り組んでいます。 Wiereフレームは非常に粗く、多くの場合、各ユーザーインターフェイス要素の目的を示す白黒のレイアウトです。
そして最後に：
5.表面
視覚的デザインと感覚的知覚
表面レベルは、その名前が示すように、壮大な感覚的知覚と視覚的デザインを作成しようとしています。 ここでのデザイナーの仕事は、ブランド、製品、その価値、特性を総合的に把握し、ユーザーとの直感的なつながりを作り出すことです。
ここで、スケッチ、Photoshop、Adobe Experience Design、Illustrator、Figmaなどのツールを使用してほとんどの作業を行うUIデザイナーを見つけることができます。
では、優れたUIデザインの基本原則に移りましょう。
原則No. 1.何よりもシンプル
アプリケーションには不確実性ほど悪いものはありません。 このボタンは何をしますか？ どうやってここに来たの？ 戻る方法は？ これを回避するために、デザイナーは常に自分自身に尋ねるべきです：
なぜここにあるのですか？ ポイントは何ですか？ 他にどのようにこれを行うことができますか？
優れた設計者は、インターフェイスレイアウトを作成する多くの可能性を見つけ、それぞれの潜在的な欠点を確認し、ユーザーが目標を達成するのに最も役立つ設計を理解します。 設計のシンプルさにより、ユーザーはアプリケーション内で自信を持って感じることができます。
原則2。明確で有益なフィードバックを提供する。
ボタンを押してみて、ボタンが機能するかどうかわからないようなサイトやアプリケーションをすべて使用しました。
簡単に言えば、すべてのアクションには反応が必要です。 たとえば、あなたがWeb開発者であれば、ボタンにカーソルを合わせると、ユーザーはその状態の変化を理解できます。
良い例は、Facebookの投稿読み込みインジケーターです。 コンテンツがロードされている間、ダウンロードインジケーター（コンテンツの形式）は、コンテンツがロードされていることをユーザーに通知します。
原則3。一貫性の問題
定常性について話すとき、アプリケーションで使用されるインターフェースまたは言語の要素のレイアウトの定常性を意味します。 ユーザーがインターフェイスの使用方法を習得したら、強制的に再学習させる必要はありません。 悪い不変性の例を見てみましょう。
これらは3つの異なる企業の3つの異なるサイトのように見えるかもしれませんが、そうではありません。 なぜこれが起こったのですか？ これらのページのメニューは異なる色、異なるフォント、異なるレイアウトを使用しているためです。 これらのページが1つのサイトに属していることはまったく明らかではないため、ユーザーを混乱させ、混乱させる可能性があります。
デザイナーとしての一貫性をどのように維持できますか？ 8ポイントグリッドなどの永続的なグリッドを使用してデザインを作成できます。8ポイントグリッドは、アイコンやモバイルアプリケーションのデザインでよく使用されます。 すべての画面で一定の配色とナビゲーション要素を使用することもできます。 これらの要素はすべてスタイルガイドに含めることができます。
結論： 恒常性と優れた構造により、ユーザーはくつろいでいます。
原則4。疑わしい場合は、よく知られているデザインパターンを使用します。
誤解しないでください-イノベーションは優れており、強く奨励されていますが、ユーザーエクスペリエンスを損なうものではありません。 古いものがそのタスクに対処する新しい自転車を発明する必要はありません。 たとえば、アイコンが単語の意味を正確かつ直感的に反映しているかどうかわからない場合は、単純な単語を使用することをお勧めします。 または、危険を警告するために赤の色合いが使用され、緑が正常に完了したことを示す通常の配色に固執します。
よく知られている設計パターンを使用する必要があるのはなぜですか？ 実際、それらの多くは人間の知覚に基づいています。 情報をスキャンするためのFパターンを例にとります。
これは、視線追跡実験中に生成されるヒートマップです。 最も表示されているセクションは赤でマークされ、最小のセクションは青でマークされています。 既にお気づきのように、ヒートマップは文字Fを幾分連想させます。しかし、これはデザイナーにとって何を意味するのでしょうか？
つまり、最も重要なコンテンツは左上隅に配置する必要があります。
通常、ロゴがあります。 これにより、企業はブランドを強化できます。 右上隅には、ナビゲーションまたは検索を配置できます。 これにより、ユーザーは他の場所でナビゲーション項目を検索することなく、ページを簡単にナビゲートできます。 この原則に準拠する2つの例を次に示します。
ページを下に行くほど、ユーザーの注意は弱くなります。 したがって、コンテンツを簡単にクロールできるように、最も重要な情報を一番上に配置し、見出しを強調してください。
原則5。視覚的な階層を使用する
視覚的階層とは何ですか？ これは、要素の相対的な重要性を示唆する要素の順序です。 これは、提示された情報が認識される順序に影響を与えるためのデザイナーによる試みです。
情報を認識する方法は、いくつかの要因に依存します。 視覚的階層の基本を見てみましょう。
1）タイポグラフィ
良いタイポグラフィとは何ですか？ 2つの主な要因は、明快さと読みやすさです。
シャープネス-これらは特定のフォントに固有のプロパティであり、文字が互いに異なることを可能にします。 それは完全にフォントに依存しており、できることはあまりありません。 したがって、適切なフォントを選択してください。
読みやすさは、単一のフォントを操作して読みやすくすることです。
上部のフォントが下部よりも悪いと認識されていることに注意してください。 そうでない場合は、...
読みやすさに影響するもう1つの要因は、文字列の長さです 。 行が短すぎる場合、ユーザーは絶えず行から行にジャンプするため、情報の認識が難しくなります。 線が長すぎる場合も同様です。そのため、目が速く疲れます。
また、大きなテキストブロックを中央に配置しないでください。 目は次の行の始まりを正確に知っているため、左揃えのテキストは読みやすくなります 。
2）ホワイト（またはネガティブ）スペース
メニュー/サイト/インターフェースを見て、「見た目は好きだけど、理由はわからない」と思ったことはありませんか？ わかった。 それはすべて空白です。 ホワイトスペースは知覚に非常に役立ちます。 2004年の研究では、段落間および左右の余白に空白を適切に使用すると、 知覚がほぼ20％向上することがわかりました。 ユーザーはそのようなコンテンツに集中して処理するのが簡単です。
犬か猫か
多くの人は、空白は好みの問題だと考えています。 これははるかに客観的だと思います。 視覚的な階層を強化するために、空白を巧みに使用できます。 ヘレン・トランのウェブサイトを見てみましょう。
素晴らしいポートフォリオ！ ここでもう一度詳しく見てみましょう。
コンテンツが4つの異なるブロックに分割されていることに気づきましたか？ さらに先へ進みましょう。
ヘレンは、先頭、フォントサイズ、色、および空白の組み合わせを使用して、各ブロック内のコンテンツを分離します。 これにより、ユーザーがスキャンしやすくなります。
3）色
しかし、色理論は非常に複雑です。 私の目標は、色の理論全体を説明することではなく、現在のデザインで使用できるいくつかの原則を提供することです。
上の写真を見ると、左側の青い正方形が右側の赤い正方形よりも遠くに見えることがわかります。 暖色は近いように見えますが、寒色は逆に背景と融合します。 この例を見てみましょう：
デザイナーは、行動を促すフレーズを強調するために暖かい赤を使用し、ナビゲーションを紛らすためにクールな青を使用します。 左の図でも同じ手法が使用されています。 ジッパー付きの赤いアイコンは、すぐに目立つようになります。
色を使用して、同様の要素をグループ化することもできます。
そして最後に、より少ないことがより多くなります。 使用する色が多いほど、それぞれの値が低くなります 。 その良い例が、Instagramの最新のデザイン変更です。
使用する色の数を減らすことで、写真を強調するだけでなく、通知が上部および下部パネルの他の色と競合する必要がなくなるため、通知の効率も向上しました。