web-dev-qa-db-ja.com

(ハンバーガーメニューではない)3つの近い水平バーは何を表し、デザインの起源は何ですか?

enter image description here

なんらかの理由で、このJabberクライアントアプリケーションの中央にある3本の横棒は、ドラッグできるものに関連付けられているものですが、3本の棒をプルダウンできるものに関連付けた理由をまったく思い出せません。

私の質問は、これらの3本の横棒は普遍的に何を表しているのか、そしていつそれが始まったのですか?この記号をApple=電話のどこかで見たのを覚えていますが、正確な場所も覚えていません。

111
yuritsuki

これは、ノッチングのスモーフィックな描写であり、領域をプル/ドラッグできることを示しています。ガンスライドの端の切り欠きに似ています(指にグリップを追加します)。

enter image description here

これは、Windows 98から登場しました(ウィンドウの右下隅を参照)。

enter image description here

編集:これは銃に固有のものではありませんが、工業デザイン手法の詳細です。バッテリーパックが下にスライドするのをご覧ください。

enter image description here

ミシンのこのスライドプレートには、指で引っ張るための同様の溝があります。

enter image description here

150
Bowen

ボーエンの銃の例はまともですが、もっと良い例は、テレビのリモコンの裏側(またはスライドカバーの下に電池を保管する他の多くのデバイス)です。

enter image description here

ピストル、バッテリーカバー、およびその他の多くの日常品の切り込みは、主に指に摩擦/グリップを提供すると同時に、指を置くのに最適な場所を示します。摩擦はコンピューターでは明らかに問題ではないので、クリックして移動できる場所の単なる変形です。実際、Windows OSウィンドウの右下隅にある3つの対​​角線のバーは、まとめて Size Grip と呼ばれ、標準のUI要素です。

おそらく、プルダウンを示す3つの水平バーは、同じUIデザイン言語から発展したものです。

編集:以下に示すように、スタックオーバーフローはドットを使用したわずかに異なるグリップインジケーターを使用しますが、この時点でほとんどの人はこの穏やかな正則性に慣れているため、UIで隆起した表面として読み取るものはすべてユーザーによって解釈されますドラッグして操作する場所。

enter image description here

105
Mordred

既存の優れた答えに追加します。

このタイプの設計機能は、affordanceとして知られています( https://en.wikipedia.org/wiki/Affordance を参照) )。

ノッチ付きまたはテクスチャ付きの表面は、実際のオブジェクトで使用され、指で掴んだり押したりできることを示唆しています。これは、コンピューターUIのスキューモーフィズムとして採用されています。

これは、Java Swingの「金属」のルックアンドフィールのスクリーンショットです。これは、テクスチャを使用して、グリップとドラッグのアフォーダンスを示唆しています。これらは、ウィンドウのタイトルバーの中央に表示されます。垂直および水平スクロールバーのサム、ウィンドウの右下のサイズ変更ハンドル、ウィンドウの端のわずかな切り欠き。

enter image description here

ボタンは、UIデザインに取り入れられた実際のアフォーダンスのもう1つの例です。実生活のボタンは視覚的に簡単に識別でき、その隆起した表面は私たちにそれらを押すように誘います-それらのフォームは私たちが何をすべきか直感的に示唆します。

UIのボタンには、同じ「プッシュミー」アフォーダンスを示唆する影が伝統的にあります。このため、「フラットなデザイン」ボタンは、使いやすさの点で後戻りと見なすことができます。

22
Ross McNab

他の回答では、この大会のスキューモーフィックなインスピレーションに適切に対処していますが、質問は歴史についても尋ねられたので、少し見てみましょう。

私はMacintosh System 7.0(1991年ですが、その前に広くプレビューされていたUIスタイルを漠然と思い出しています)をこの規則の創始者として指名します...アクティブなスクロールバーのつまみにブリッジングが表示されます。

Mac OS 7 scroll bar ridges

これは、バッテリーカバーなどを使用した他の回答で見られるように、尾根に垂直な方向にスライドするための実際のアフォーダンスと同じです。

1991年以前のGUI(Xerox Alto、Apple Lisa、Amiga Workbench、Windows 1.x-3.0、Mac System 1.0-6.0.xを含む)の簡単な調査では、System 7のスクロールバーがこの方法でドラッグ可能性を示す最初のUI要素...プレデターや現代のシステムでは、スクロールバーやタイトルバーなどのドラッグ可能な要素は、フラット(または3D効果を作成するために面取りされているが、「不規則」なテクスチャではない)になる傾向があります。

また、元のMacintoshウィンドウのタイトルバー(1984)を、この規則のさらに初期の作成者として指定することもできます(元の外観とSystem 7の外観の両方で以下に示します)。

Mac OS 1.0 title barMac OS 7.0 title bar

ただし、まったく同じかどうかはわかりません。ここには、ドラッグできるものに「グリッピー」ラインの非常に広い表面がありますany方向で、能力を示す小さな「グリッピー」エリアではありません特定の方向にドラッグします。ここでの水平線は、ドラッグ可能性を示すためのアフォーダンスとしてではなく、どのウィンドウがアクティブであるかを示すものとして機能すると思います。

8
rickster

私はここに表示されている銃の例やその他の例に同意しますが、3つのノッチの概念は物理的な製品設計から始まり、ユーザーに摩擦コンポーネントの取り外し(つまり、バッテリーカバー)または強化されたグリップ(つまり、ガンハンドル)。以下は、いくつかの本当に良い例です:

remote cover remove
(ソース: scsstatic.ch

ハンドルバーの例: handlebars
(ソース: yimg.com

コンポーネントの表面のスコアリングは、より高い摩擦の領域を手に提供し、グリップと制御を強化して、ユーザーにグリップする機会を提供しますおよびmove手を滑らせることなく自由に。このように、このプロセスは日常のアクティビティで頻繁に遭遇するものであるため、エクスペリエンスとしてWebページに変換されました。

1
Stephn_R

これには物理的な起源があることを正しく指摘する多くの素晴らしい答えがありますが、テクスチャ領域がここに示されている成形例よりも古く、ローレットとして識別されることを指摘しなければ、私は失礼します。それを検索すると、「ローレット加工された航空機用アルミニウム」を備えた古典的なマグライトを含む多くの例が見つかります。

0
hildred