web-dev-qa-db-ja.com

縦型アイコンのサイドメニュー

約12個のアイコンを含む縦型のアイコンメニューをウェブサイトに配置する予定です。アイコンを次のようにする予定です

http://codepen.io/nikhil/pen/sicrK

または

http://codepen.io/EduardL/pen/aBGAy

問題は、私もハンドヘルド向けのデザインをレスポンシブにするためですが、ハンドヘルド向けの12個のアイコン（サイズ変更可能なsvg）のすべてにどのように対応できると思いますか。ユーザーにスクロールして他のナビゲーションアイコンを表示するのはよくないと思います。リンクが表示されている場合、多くのアイコンがビューポートから隠されており、プレビューフレームのサイズを変更したときにのみ表示されます。

または、縦型のアイコンメニューよりも良いアイデアはありますか。

私はこのメニューを私のWebサイト全体のテンプレートの1つとして使用しています。アイデアをください。

前もって感謝します。

navigationiconsmenusidebar
2
Vignesh T.V.

単にバーを100％の高さにします。

アイコンが12個ある場合は、お勧めの方法ではないのですが、アイコンを拡張して、利用可能な画面スペースいっぱいに表示することができます。 4インチスクリーンの1/12（現在のユーザーの75％は4インチ以上で、これにはやや古い電話も含まれます）は7.33²mmの正方形になります。

enter image description here

Windows Phoneでは、7²mmの正方形を使用することをお勧めしますが、隣接するボタンが誤ってタップされるのを防ぐために2mmの空白があるため、ボタンごとに合計11²mmになります。しかし、彼らのデータは、より小さいサイズでも、見逃したタッチの量は許容できるかもしれないことを示しています。 （ this post を介して）

enter image description here

ここで明らかな欠点は、人々が誤ってタップする可能性が高くなることです。

利点は、サイトはどのデバイスでもほとんど同じように感じられ、すべてのアイコンを一度に表示できることです。

メニューを倍幅にする

または、メニューを2列幅にします。使用頻度の高い5つのアイコンを左側に配置します。常に表示され、下部にハンバーガー（および「more」ラベル）が表示されます。ハンバーガーをタップしたら、ラベルが付いた2x6ボタンの（ほぼ？）全画面テーブルにメニューを展開します。 enter image description here

ここでの欠点は、画面スペースの4分の1を失うことです（少し狭めることはできます）。これはLOTです。また、セカンドメニューの背後にいくつかの機能が隠れています。

別のレイアウトを検討する

あなたがモバイルで作業するつもりなら、あなたは実際に遊ぶ幅があまりありません。また、簡単にスクロールすることもできません。上のバーはどうですか？完全に配置されている場合、ページを読み込むとメニューが表示されますが、下にスクロールするとメニューが消え、画面の100％でコンテンツを表示できます。

または this のような少しエレガントなソリューションを使用します。

もちろん、これは12幅のバーを使用するのではなく、4x3グリッドのようなものです。垂直方向に少しスペースが必要になりますが、かなり速くスクロールしてしまいます。

enter image description here ここでの利点は、コンテンツを画面いっぱいに表示できる一方で、きちんとタップ可能なボタンですべてを表示していることです。

欠点は、ページの読み込み時にボタンがかなりいっぱいになり、常に直接アクセスできるわけではないことです。

1
PixelSnader

縦型アイコンのアイデアは問題ありませんが、折り目に隠れているアイコンが他にもあることを示すインジケーターに注意する必要があります。

考えられる解決策は次のとおりです。

  • アイコンリストの下部に半透明のグラデーションを使用する
  • 最後のアイコンがビューポートでトリミングされるようにアイコンを配置します
  • ユーザーがアプリを開いたら、アイコンリストを下から上に自動スクロールして、他のアイコンがあることを示します
1
Maciej Sawicki