超薄垂直菜单的专业设计

平面设计 网站设计 界面设计 css
2022-02-27 22:42:27

好的,所以我是一名程序员,在网页设计方面完全是个灾难。到现在为止,我已经能够在像引导程序这样的框架的帮助下产生“可接受的”外观,但我被一个小侧菜单困住了。我能想到的最好的事情是:

可怕的菜单

它是页面上的一个小侧边菜单,其中您有一个浏览器内 RDP 客户端,因此主要要求是它非常纤薄,最好浮动在屏幕左侧(将其更改为水平并粘贴到屏幕顶部不是一个选项)。它也应该始终可见,因此当用鼠标悬停在右侧区域时不会出现。它包含三个可点击按钮(菜单、键、关闭)。附带说明:按钮键是特定于解决方案的,并且是在用户上下文中的清晰描述。

我的问题是:我怎样才能让这个菜单符合上述标准,如此纤薄 -> ~20px 宽始终可见,并且仍然让它看起来很专业,不会分散注意力?我真的很感激任何形式的建议和提示!

4个回答

考虑使用已建立的 UI 模式(如汉堡菜单图标或箭头)来显示存在绘图或菜单。该图标足以让人们知道有要单击的导航/设置。

这只是一个速写,但您可以从 Bootstraps 库中获得这样的图标。

在此处输入图像描述

这只是我在关于关闭按钮的评论中对您的一个问题的补充。

使用汉堡菜单时,您通常不会一直看到关闭按钮,发生的情况是,您单击菜单图标(汉堡菜单),整个菜单打开,并且以一种或另一种方式,汉堡图标变为关闭图标。

当点击关闭按钮时,菜单关闭并变回汉堡菜单图标。

它看起来更好,并且当菜单未打开时,您不会留下一个不执行任何操作的关闭按钮。

还有一件事

我想提一下 20px 宽是很小的......就像这个小: 在此处输入图像描述对我来说,它对于良好的用户体验来说有点太小了。苗条是一回事,但另一方面却不引人注意……您不希望那样。

您可以考虑使用当用户将鼠标靠近菜单时部分滑出的菜单以节省视觉空间。

默认状态:

在此处输入图像描述

当鼠标靠近时(使用动画过渡):

在此处输入图像描述

如果允许,您甚至可以在单击其中一个部分时进一步打开它。

由于您使用的是引导程序,因此应该很容易使用字形图标来显示它是一个菜单,而不是单词。

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

首先,您应该考虑到 20px 是一种瘦身方式。它看起来只是页面中的一些亮点,根本不是邀请用户点击的东西。我建议50px。这是用户期望看到并且会感到舒适的标准尺寸。

在此处输入图像描述

如果实在无法使用较厚的菜单,请考虑在屏幕左上角使用 50px/50px 的框。

如果您必须使用文字而不是图标,则绝对不应该将字母放在另一个之下。尝试将标题横向翻转(并使用较细的字体)。