通常のデザインプロセスでは、このような疑問が生じる可能性があります。ほとんどのアプリで、1つのボタンと複数のボタンが同時に存在する場合、最も重要なボタンは通常、ページの右側に配置されます。最も重要なボタンが左側にある場合の問題は何ですか？右側のボタンの理由は何ですか？それにはどのような理論的根拠がありますか？これらの質問から、本日紹介することから始めましょう：グーテンベルクのインタラクティブ心理学の原則
関連するビデオチュートリアル資料は、記事の最後にまとめられています。
グーテンベルク原理の起源
グーテンベルクの原則は、14世紀に西洋の可動式活字印刷の発明者であるジョングーテンベルクによって提唱されました。1950年代に、彼が新聞をデザインしていたとき、彼は人々がある習慣に従うことは、本を左から右、上から下に読むようなものです。これにはどのような情報が含まれていますか？研究の後、私はついに後世によく知られている結論、グーテンベルク原理にたどり着き、「グーテンベルク図」と呼ばれる写真を添付しました。グーテンベルク図は、画面に表示されるコンテンツを4つの象限に分割します。
1.最初の視覚領域（POA）：ユーザーが最初に気づいた左上
2.強い休憩エリア（SFA）：右上、あまり目立たない
3.弱い休憩エリア（WFA）：左下、目立たない
4.ターミナル視覚領域（TA）：右下、視覚フローの終わり
グーテンベルク図
図から、ユーザーの視線は最初の視覚領域から自然に始まり、次第に終末休憩領域に移動することがわかります。読み取りプロセス全体を通して、視線は方向軸に沿って左から右へスキャンを開始します。ユーザーはページの最初と最後の領域に注意を払う可能性が高くなりますが、中央の段落にはほとんど注意が払われません。グーテンベルクは視覚軌跡の実用的な法則を明らかにした：読書重力は上から下へ、左から右へ。
グーテンベルクの原則に従って、重要な情報を左上隅、中央隅、右下隅に配置すると、要素の重要性をより適切に反映できます。たとえば、通常表示されるページポップアップ、さまざまなサポートドキュメント、契約ドキュメントなどです。
グーテンベルク図は、要素のレイアウトと構成で設計要素の重みを調整することにより、目の軌跡を導きます。ユーザーが貴重な情報をすばやく取得できるようにします。また、ユーザーが情報に精通していることも、目の軌跡に影響を与える要因の1つです。
インターネットの台頭に伴い、グーテンベルクの原則はAPPデザインとウェブデザインに徐々に適用されてきました。次に、インターフェースでの彼の実用的なアプリケーションを見てみましょう。
デザインへの応用
グーテンベルクの原則によれば、ユーザーがなじみのないインターフェイスを閲覧するとき、閲覧はユーザーの最初の行動です。彼らの視覚的なフォーカスは、左上隅から右下隅に移動します。そして、アクションポイントの最後に留まります。これは、前述のターミナルレストエリアです。次のステップは、ボタンの配置方法です。これも重要なステップです。ユーザーが読んだ後に操作する必要がある場合、ボタンの最適な位置はページの下部にある必要があります。これにより、ユーザーがコンテンツを読んだことを確認できます。
1.下ボタンの分析
1.1下部の単一ボタン
このフォームは、ユーザーの操作をガイドするページで最も一般的です。ユーザーがコンテンツを確実に読むことができるようにするために、ボタンはページの下部に配置され、コンテンツは上部に配置されます。この配置は、ユーザーの上から下への読書習慣に準拠しています。製品の期待される目標に達しました。
1.2下部にある縦の二重ボタン
上記で単一のボタンを配置するアイデアについて説明しましたが、縦の二重ボタンを配置するアイデアを見てみましょう。インターフェースに同時に優先度の異なる2つのボタンがあり、製品がユーザーに各ボタンに十分な注意を払うことを望んでいる場合は、垂直方向の配置が最適です。垂直方向の二重ボタンはスタイルで区別されますが、ユーザーは、ボタンの内容を比較して考えるためにしばらく滞在します。
次に、グーテンベルクの原則に従って、重要なボタンをページの下部に配置する必要があります。原則として、次のようになります。
上の画像を注意深く観察してください。明るい色のボタンは無視されやすいことがわかりました。これは製品の本来の意図に反しており、各ボタンに十分な注意を払う必要があるため、グーテンベルクの原則に違反してビジネスニーズを満たす必要があります。表示されるWeChat承認ページは同じですが、
「同意する」と「拒否」の2つの独立したボタンをユーザーが十分に評価でき、いずれかのボタンが簡単に無視されないようにするために、「同意する」ボタンの色が強調され、「拒否」に配置されます。ボタンの上で、目の元の垂直方向の下向きの動きが元に戻ります。
概要
原則は設計の基礎であり、それらは静的ではなく、設計の原則と製品の目標との関係を合理的に比較検討する必要があります。
2.トップボタンの分析
上部のナビゲーションバーのスペースが限られているため、ボタンは比較的小さく、クリックするのに不便です。このため、このタイプの上部のボタンは、コンテンツ編集ページの編集に適し、偶発的なタッチを回避し、ユーザーがコンテンツ自体に集中できるようにします。上部のキーボタンは、ユーザーの目の移動経路を短くすることもでき、変化の様子をユーザーにわかりやすくします。
概要
一番上のボタンは、ボタンではなく、編集可能なコンテンツ領域に重点を置いています。下のボタンは、ボタン自体に重点を置いています。コンテンツではありません。
3.水平ボタン分析
上記の上部と下部のボタンに加えて、淘宝網の詳細ページ、景東の詳細ページ、NetEaseの慎重に選択された詳細ページ、および「 「今すぐ購入」ボタンはすべて右下隅に配置され、視覚的エンドポイントの説明のグーテンベルク原理と組み合わされており、右下隅は視覚的な端末領域、つまり視覚の最終位置であるため、コンバージョン率に密接に関連する「今すぐ購入」ボタンになりますインターフェースの右下隅に配置され、ユーザーが簡単にフォローできるようにします。
別の例は、より一般的な「キャンセル」および「確認」ポップアップウィンドウスタイルです。これは、ユーザーが誤操作を防ぐために、フォームの送信、同意の承認、ユーザー情報の取得などの特定の操作動作を確認する必要がある場合に通常表示されます。 、これも製品体験を向上させるための細部です。
通常表示されるポップアップウィンドウでは、右側に推奨ボタンがありますが、左側に推奨ボタンを配置するとどうなりますか？以下に示すように：
推奨ボタンが右側に配置された後、ビジョンが水平軸上でリフローすることを確認することは難しくありません。
ポップアップウィンドウの目的は、ユーザーが[確認]ボタンをクリックできるようにすることです。[確認]が左側に配置されている場合、グーテンベルクの原則に従って、ユーザーの視力は思わず右に移動します。これは[キャンセル]ボタンの位置です。左側の「確認」ボタンの位置に戻るには、視線を移動する必要があり、目の軌跡が水平軸上を前後に往復します。これにより、ユーザーの選択時間が実質的に増加します。右側に「確認」、左側に「キャンセル」を配置すると、ユーザーの操作効率を向上させることができます。
実際の製品での適用事例：
概要
製品がユーザーに特定の操作を実行させたい場合、メインボタンは右側に配置されます。
総括する
1.グーテンベルク図の最初の視覚領域、強い静止領域、弱い静止領域、終末視覚領域
2.原則は設計の基礎であり、静的ではなく、設計原則と製品目標の間の関係は合理的に評価されなければならない
3.上部のボタンは、ボタンではなく、編集可能なコンテンツ領域により多くの注意を払っています。下のボタンは、ボタン自体に重点を置いています。内容ではない
4.製品がユーザーに特定の操作を実行することを望む場合、メインボタンは右側に配置されます。
デザイナーのデザイン認識の新しい出発点に関する必読記事https://pan.baidu.com/s/1ntWb8VkIj8yKs5rLWD_aNQ言及
UIデザイン（PS + AI）入門チュートリアル（終了）を学ぶための20日間https://pan.baidu.com/s/1wV35EyapKdgweO10P5xx0A抽出コード：5i
ロゴのデザインチュートリアル（必須バージョン）を学ぶのに1時間https://pan.baidu.com/s/1Z454utAyehurWlJBm-PXVw抽出コード：fc4
整理は基本的に完了です。無料でコードを抽出して記事に残してください。UIデザインを学んでいる友人は、メッセージを残したり、プライベートメッセージを送信したりできます。