非常にスリムな縦型メニューのプロフェッショナルなデザイン

わかりました、それで私はプログラマーであり、ウェブデザインの大災害です。今までは、ブートストラップのようなフレームワークの助けを借りて、「許容できる」外観を生成することができましたが、小さなサイドメニューに悩まされています。私が思いついた最高のものは次のとおりです：

これは、ブラウザ内のRDPクライアントがあるページの小さなサイドメニューであるため、主な要件は、非常にスリムであり、画面の左側に浮かぶことが望ましいことです（水平に変更して、画面上部はオプションではありません）。また、常に表示されているはずなので、マウスで右の領域にカーソルを置いても表示されません。3つのクリック可能なボタン（メニュー、キー、閉じる）が含まれています。補足として、ボタンキーはソリューション固有のものであり、ユーザーのコンテキストで明確に説明されています。

私の質問は、どうすればこのメニューを上記の条件を満たすようにスリムにすることができますか？どんな助言や助言にも本当に感謝します！

ハンバーガーメニューアイコンや矢印などの確立されたUIパターンを使用して、ドローまたはメニューがあることを示すことを検討してください。アイコンは、クリックするナビゲーション/設定があることを人々に知らせるのに十分です。

これは簡単なスケッチですが、Bootstrapsライブラリからこのようなアイコンを取得できます。

これは、閉じるボタンに関するコメントの質問に対する私の記入項目です。

ハンバーガーメニューを使用している場合、通常は常に閉じるボタンが表示されません。何が起きるかは、メニューアイコン（ハンバーガーメニュー）をクリックすると、メニュー全体が開き、何らかの方法でハンバーガーアイコンが閉じるアイコン。

閉じるボタンを押すと、メニューが閉じて、ハンバーガーメニューアイコンに戻ります。

見栄えがよく、メニューが開いていないときに何もしない閉じるボタンが残されていません。

もう一つ

20px幅は小さいので、このように小さいと言いたいのですが、私にとっては、ユーザーエクスペリエンスを向上さ せるには少し小さすぎます。スリムなのは1つですが、一方では目立たない...そんなことはしたくない。

視覚的なスペースを節約するために、ユーザーがメニューの近くにマウスを置いたときに部分的にスライドするメニューの使用を検討する場合があります。

デフォルトの状態：

マウスが近づいたとき（アニメーションを使用して遷移）：

許可されている場合は、セクションの1つをクリックすると、さらに開くことができる場合もあります。

ブートストラップを使用しているので、言葉ではなくメニューであることを示すためにグリフィコンを使用するのは簡単です。

<div><span class="glyphicon glyphicon-menu-hamburger"></span></div>

まず、20pxがスリムになる方法であるという事実を考慮する必要があります。それはページ内のいくつかのブリップのように見えるだけであり、ユーザーにクリックするように誘うものではありません。50pxをお勧めします。これは、ユーザーが見ることを期待し、快適な標準サイズです。

厚いメニューを使用することが本当に不可能な場合は、画面の左上にある50px / 50pxボックスの使用を検討してください。

アイコンではなく単語を使用する必要がある場合は、文字を上下に重ねないでください。タイトルを横向きにしてみてください（フォントを細くしてください）。