web-dev-qa-db-ja.com

垂直および水平の3つのドットアイコンボタンの使用

マテリアルデザインには優れたガイドラインドキュメントがありますが、モバイルの場合、垂直方向のソリューションは安定したパターンであるため、Webアプリの垂直/水平ドットアイコンについて混乱しています。

縦のドットはセカンダリオプションメニュー用であるという投稿を見つけましたが、横方向も使用できることを示す例がいくつかあります。 enter image description here

オプションメニューのあるテーブルリストを再設計していますが、一部はオプションページにリンクされています。縦のメニューの代わりに横のドットアイコンをオプションページのリンクとしても使用できますか?

enter image description here

6
luxo

Material HIG は、WebおよびAndroidでは垂直メニューアイコン、iOSでは水平メニューアイコンを使用することをお勧めします。

enter image description here

一般にこれらのガイドラインに従っている場合は、垂直アイコンを使用するのが最善です。

Spotify、LinkedIn、およびJiraについては、いずれもマテリアルデザインガイドラインに従っていません。実際、さまざまなアプリケーションやプラットフォーム全体を見ると、「メニューオーバーフロー」機能に1つの一貫したアイコンがないことがわかります。Microsoftは水平ドットを使用し、FirefoxとGnomeはハンバーガーアイコンを使用しています(これはナビゲーションのみに使用されます) Androidでは)、一部のiOSアプリでは歯車やツールのアイコンが使用されています。

1
Tin Man

3つの水平ドットの代替使用法に注意してください:ハンバーガーアイコンの方言であることに加えて、フィールドにパス名を入力するファイルを参照するためのプロンプトとしてボタンに使用される水平3ドットを見ました。

1
docwizard

アイコンの意味は同じであり、どちらを使用するかについてのコンセンサスがないため、両方の方法を使用できます。他にも複数の解決策があります(私はそれらがより良いと宣言していません)。

アイデアとして(状況に応じて):

  • テーブルで直接プライマリアクションを表示し、サブメニューでセカンダリアクションのみを非表示にすると便利な場合があります。
  • テーブルがかなり満杯の場合は、マウスオーバーと行の選択時にのみアクションを表示することにより、ビューを少し整理することができます。

enter image description here

0
Avadeha

一貫性の理由から、混合するのではなく、選択した1つのガイドラインに従うことをお勧めします。インターフェース全体で一貫している必要がありますが、それが構築されたデバイスも考慮してください。

マテリアルデザインについて説明しましたが、そのガイドラインに従っていて、Android/Webアプリを作成していると思います。その場合は、垂直アイコンを使用する必要があります。 コンポーネント>コンテキストメニューenter image description here

Appleデバイス用に設計する場合、ガイドラインでは水平アイコンを使用します。 システムアイコン 、特に 詳細 アイコンを参照してください。

タイポグラフィ Ellipsis を連想させる水平方向のアイコンが好まれます。これは、「より多くの」アイテムを提案することを意図していたため、ユーザーの心にはより一般的な解釈がありますが、上記の設定よりも、一貫性。

0

これは本当に興味深い質問です、ルクソ。水平と垂直の違いは、デザインの形状、スペース、および/またはフィット感に基づく必要があります。

たとえば、(下の写真のような)アイコンのあるナビゲーションメニューを備えたモバイルアプリを見てみましょう。縦長の省略記号はスペースによりよくフィットし、デザイン内の連続性を提供します。横長の省略記号は、Nice of a touchにはなりません。

常に見た目が重要というわけではありませんが、思いつかないかもしれないという理由で、「見た目/感じが正しい」場合もあります。しかし、深く掘り下げると、is見栄えがよくなる理由があります。この場合、他の要素間の連続性と調和が原因ですそれが持っていること。

enter image description here

0
sjsteve