フォーカスがどのように役立つか







マネージャーとデザイナーは、どこでもオフラインでの掃除を余儀なくされています。 これは悪い考えだと伝えてください!

あなたは絶対に正しいです、私たちは喜んであなたに話します。







インターフェイスには、シンプルとインタラクティブの2種類の要素があります。 単純な表現または何かを意味します。 インタラクティブでは、それらと対話することができます。 ブラウザでフォームを使用してページを開き、すぐに入力を開始します。 何も起きていませんよね? すべてのキーストロークはページに直接移動します。 しかし、フィールドに入ると、入力した文字が実行されます-フォーカスとすべてのイベントをキャプチャしました。 スペースバーは現在ページをスクロールしませんが、スペースを入れます。 とても快適です。







リンクにフォーカスを設定し、入力者がリンクを開くこともできます。ボタンにフォーカスがある場合は、スペースで押すことができます。 フォーカスがリスト、セレクター、またはレンジノブの1つのラジオボタンである場合、リストをソートするか、キーボードの矢印でノブを移動できます。 組み込みの要素だけではありません-フォーカスが合ったり、キーボードから制御されるインタラクティブな要素を作成することもできます。







キーボードからのインタラクティブな要素とのそのような相互作用が楽しい追加である場合、他の人にとってはそれが唯一の方法です。 誰もが適切な場所をクリックまたはタップできるわけではありません。多くの場合、キーボードがサイトのメインインターフェイスです。







この相互作用はどのように起こりますか? ここのメインボタンはタブで、次のインタラクティブ要素に移動します。 Shift-tabは前のタブに転送されます-自分で試してください。 目的の要素に到達するとすぐに、その要素で既に対話することができます。入力、スペース、矢印、またはキーボードからの文字だけです。







そのような状況では、どの要素が現在アクティブであるかを明確にするために、現在アクティブな要素を知ることが非常に重要です。 マウスカーソル、スタイラス、または指がある場合は、クリックした場所が常に明確になります。 どこ、どこ、まあ、まさにここ! しかし、キーボードを操作するときは、フォーカスが必要です。 彼がいなければ、あなたは今...どこにもいません。







要素にフォーカスがある場合、擬似クラス:focus



が表示されます。 デフォルトでは、ブラウザは特別なストロークを使用して、フォーカスされているインタラクティブ要素を強調表示します。 それらはブラウザやシステムによって異なります。黒い点線やフレーム、青いアウトライン、別のものなどです。 頻繁に、これらのパスは、 outline: none



を使用して無効にしようと試みられます。それらのパスが必要な理由を忘れるか、重要でないと見なします。







無効化の主な論点はtheyいものであり、設計にはそのようなものはないという。 そして、私はthoseい人さえ理解しています-そして、真実は過去のものですが、通常はおなじみのシステムスタイルの範囲内です。 ただし、オフにするだけでなく、再割り当てすることもできます! 別のoutline



、それをborder



box-shadow



または要素の背景色に置き換えbox-shadow



。 主なことは、彼が明確に述べていることです:私は今焦点を当てています。







キーボードに慣れているこれらの人々は誰ですか? これは、フィールドが多数ある長い形式のユーザーです。 または、手にマグカップを入れたり、子供を腕に入れたり、ブラシを傷つけたり、マウスの使用を妨げる運動能力を使ったりします。 彼らはまた、マウスを使うのに時間を浪費する余裕のないインターフェースのプロユーザーでもあります。 そして、それはいという理由だけでそれらをすべて拒否しますか? いいえ、もちろんです。







Yandex、Google、Githubのメインページに移動してタブを押します。これらのサイトはすべてキーボードからアクセスできます。 優れたインターフェースは、単なる画像ではありません。 デザイナーがインターフェイスを改善し、最も幅広い視聴者がマネージャーにアクセスできるようにするのはあなたの手にあります。







ビデオ版





ここで質問することができます








All Articles