ナビゲーションメニューでの透明度の使いやすさ
いくつかのcssプロパティを使用してナビゲーションメニューを半透明にするいくつかのWebサイトを見てきました。これはユーザーにページスクロールの継続的な感覚を与えることと関係していると思いますが、それは気が散って、より良いユーザーエクスペリエンスを作成しているように思えます。プラス面にはもっとマイナス面があると思いますが、その背後にある実際のユーザビリティ設計の原則はありますか？
あなたが指摘したように、これの背後にある主な理由は、ユーザーがページをスキャンしてデザインと調和するようにフローを継続することでしたが、別の理由は、主な焦点がサイト自体のコンテンツであることを確認することですナビゲーションではありません。このデザインを使用してコンテンツに焦点を当て、ナビゲーションは必要なときにのみ利用できるようにするアプリがたくさんあります。
このレイアウトに従うアプリの2つの例は、Angry birdsとKindleアプリです。引用するには 半透明のメニュー項目の使用に関するこの記事 ：
没入型コンテンツに与えられる画面領域の量を最大化します。Angry BirdsとKindleアプリには、アプリバー、タブバー、さらには通常、iPhoneデバイスのステータス専用のスペース。これにより、顧客はコンテンツに集中し、活動に没頭できます。
ナビゲーションを最小化します。Angry Birdsの唯一のナビゲーションは[一時停止]ボタンです。邪魔にならないように、左上隅にある半透明のボタンです。 Kindleアプリでは、唯一のナビゲーションは、ユーザーが画面の中央をタップしたときに表示される半透明のオーバーレイメニューです。ユーザーがコンテンツに集中している場合、またはアクティビティに没頭している場合、アクティビティに直接関連しないボタンやナビゲーションツールは、貴重な不動産を占有するだけでなく、常に気を散らす原因になります。人々が偶然にアクティブ化されないように、タブやボタンなどのコントロール領域に費やされている画面の領域を意識的に避けなければなりません。このようにして不要なナビゲーションを誤ってアクティブ化することを回避するために費やしたあらゆる努力は、活動の没入感を損なう。
Angry Birds
Kindle
Webブラウジングの場合、ページが非常に長い（コンテンツが長い）場合は、ユーザーが上にスクロールする時間を節約できるため、これが推奨されます。モバイルアプリケーションでは、テキストを処理するアプリでより一般的に使用されます-読書。
さらに、これが機能するための2つの重要なポイントがあります。
コントラスト。上記の例では、透明な白いバーに対して白いフォントが表示されています。濃い青/黒のバーに対して白のフォントを配置すると、テキストが明確に識別されるため、ユーザーフレンドリーで邪魔にならないことがわかります。
アルファの量をいじることが重要です。20％または50％を使用すると、メニューの使いやすさに大きな影響を与えます。色によって、このパーセンテージは変化しますが、これらのメニューを使用する場合は、アルファで遊んで、どれが最も読みやすくなるかを比較してください。
この透過的な固定ヘッダーの実装は好きではありません。
ヘッダーを固定したままにする場合は、ヘッダーの内容が重要であることを意味します。次に、半透明にして読みにくくしますか？直感に反する？
最終的にヘッダーを確認したいときに、コンテンツに焦点を合わせることができても（？）、メニュー項目を区別するためにもっと焦点を合わせる必要があります。他のオプションは、不透明な不透明度の変更である可能性があります。
全体として、固定ヘッダーが必要な場合は、適切な（目に見える）ヘッダーを使用してください。十分なスペースがない場合：
モバイルデバイスのメディアコントロールのようにして、メディアを使用しているときは見えないようにしますが、クリック/移動すると、再び表示されます。
ポップアップスタイルのメニューにすることができます。デフォルトではメニューの一部のみを表示し、ユーザーがメニューに近づくと、一番上までスクロールしなくても使用できるように飛び出します。
まあ、それはあなたのターゲットオーディエンスとの信頼性を効果的に確立したので、透明性はウェブサイトプロセスにおいて重要な役割を果たすものです。ナビゲーションに関しては、オーディエンスがあるセクションから別のセクションに移植できるように透明性が必要です。ウェブジャーニーの途中で訪問者が迷子にならないようにするため、透過的なナビゲーションを使用します。