design profissional de um menu vertical extremamente fino

7

Ok, então eu sou um programador e um desastre completo em web design. Até agora, consegui produzir looks "aceitáveis" com a ajuda de estruturas como o bootstrap, mas estou preso a um pequeno menu lateral. A melhor coisa que consegui sugerir é a seguinte:

Como é um pequeno menu lateral em uma página em que você possui um cliente RDP no navegador, o principal requisito é que ele seja MUITO fino e, de preferência, flutue no lado esquerdo da tela (altere-o para horizontal e cole-o no a parte superior da tela não é uma opção). Ele também deve estar visível o tempo todo, para que não apareça ao passar o mouse na área correta. Ele contém três botões clicáveis (MENU, TECLAS, FECHAR). E como uma observação lateral: as teclas de botão são específicas da solução e são uma descrição clara no contexto do usuário.

Minha pergunta é: como posso fazer com que este menu atenda aos critérios acima tão esbeltos -> ~ 20px de largura sempre visíveis e ainda assim pareçam profissionais e sem distrair? Eu realmente aprecio qualquer forma de conselho e dicas!

website-design interface-design css

— larzz11
fonte

O que exatamente as três opções fazem? Presumo que o Menu mostraria um menu com mais opções de RD; Keys abriria um teclado virtual? Dê uma lista de teclas de atalho que você pode usar no cliente RDP? Algo mais? E o Close (como suponho) fecha a conexão / sessão RDP atual, basicamente desconectando você? E se minhas suposições estiverem corretas, há um motivo específico para você atribuir a Keys e Close uma posição de destaque (não incorporada), em vez de apenas ter um menu com todas as opções? Quantas opções existem no menu desdobrável?

— Janus Bahs Jacquet

@Janus Bahs Jacquet, o fato é que a maioria dos usuários não está familiarizada com coisas como o ícone do menu de hambúrguer ... Tenho certeza de que, quando essas três coisas nem sempre são visíveis, receberei reclamações e perguntas ... Mas eu estou pensando em mudar para apenas um ícone próximo e um ícone de hambúrguer que abrirá o menu e moverá o botão de teclas extras para lá.

— larzz11

@ larzz11 Depende da sua base de usuários, é claro, mas o ícone hambúrguer é tão onipresente nos dias de hoje que eu me atreveria quase todos os usuários estão muito familiarizados com ela.

— Janus Bahs Jacquet

8

Considere usar padrões de interface do usuário estabelecidos, como o ícone do menu do hambúrguer ou uma seta para mostrar que há um desenho ou menu. O ícone é suficiente para as pessoas saberem que há navegação / configurações a serem clicadas.

Este é apenas um esboço rápido, mas você pode obter ícones como este na biblioteca Bootstraps.

— Consuma Café
fonte

Mmm, é uma boa ideia. Agora que penso nisso, é um pouco exagerado / redundante criar um menu em que um dos botões abrirá outro menu ... É o botão Fechar que eu gostaria de estar visível o tempo todo, mas acho que sim poderia ser transferido para outro menu e, em seguida, ter apenas um pequeno botão que abre o menu maior ....

— larzz11

Você pode apenas colocar um X em uma caixa até o canto superior esquerdo e, em seguida, abrir o menu o suficiente para que não seja clicado por acidente. Às vezes, o design simplesmente remove tudo até chegar aos elementos básicos e depois adiciona um pouco de polimento. Acho que somos todos culpados de pensar demais :) feliz por ajudar.

— Consuma café

"Às vezes, o design é simplesmente remover tudo até chegar aos elementos básicos e depois adicionar um pouco de polimento". Eu acho que deveria enquadrar aquele :)

— larzz11

@ larzz11: é (possivelmente) adaptado de citações famosas de St Exupery:"Perfection is Achieved Not When There Is Nothing More to Add, But When There Is Nothing Left to Take Away"

— Olivier Dulac

@OlivierDulac Eu pensei que estava parafraseando alguém :) é a única coisa que realmente ficou na universidade.

— Consumir café

1

Este é apenas o meu preenchimento de uma de suas perguntas nos comentários sobre o botão Fechar.

Ao usar um menu de hambúrguer, geralmente você não vê o botão fechar o tempo todo, o que acontece é que você clica no ícone de menu (menu de hambúrguer), o menu completo é aberto e, de uma maneira ou de outra, o ícone de hambúrguer muda para o Feche o ícone.

Ao pressionar o botão Fechar, o menu fecha e volta ao ícone do menu de hambúrguer.

Parece melhor e você não fica com um botão Fechar que não faz nada quando o menu não está aberto.

Mais uma coisa

Eu gostaria de mencionar que 20px de largura é pequeno ... como este pequeno: e para mim, é um pouco pequeno demais para uma boa experiência do usuário. Slim é uma coisa, mas imperceptível, por outro lado ... você não quer isso.

— Alin
fonte

2

I encontrar coisas de correr em torno de quando o mouse está perto deles para ser tremendamente irritante

@GOROIE Bem, então é bom que eu mencionei que o ícone fechar só aparece depois que o menu é clicado e não pairava , certo? Seria tolice pensar que o botão Fechar aparece quando o ícone do menu é suspenso ... novamente, o que seria fechado se aparecesse ?!

— Alin

Acredito que você esteja entendendo mal o objetivo do botão "fechar". A menos que eu esteja interpretando mal a pergunta, não é um botão "fechar este menu expandido"; em vez disso, o menu tem várias opções de ações que você pode fazer com o cliente da Área de Trabalho Remota, que é a página principal, e o botão Fechar aqui é um botão "fechar a conexão / sessão atual da Área de Trabalho Remota".

— Janus Bahs Jacquet

1

Você pode considerar usar um menu que deslize parcialmente quando um usuário tiver o mouse próximo ao menu para economizar espaço visual.

O estado padrão:

Quando o mouse está próximo (usando animação para fazer a transição):

Se permitido, você poderá abri-lo ainda mais quando uma das seções for clicada.

— Zach Saucier
fonte

Pessoalmente, acho que isso é um problema. Você precisaria garantir que nada apareça abaixo / perto da "seta do menu". Caso contrário, você pode tentar destacar algum texto, abrir acidentalmente o menu. Parece incômodo. Se um menu for aberto, deixe-me decidir quando abri-lo, pois fico bastante aborrecido quando meu computador pensa que sabe o que quero (quando não sabe). Esta é apenas a minha opinião, no entanto.

— Vince Emigh

@VinceEmigh, não é realmente problemático garantir que não haja nada abaixo do menu. A página deve sempre ter uma margem de qualquer maneira, portanto, garantir que a margem tenha pelo menos o tamanho do menu não é realmente um problema.

— Cai

@ CAI Eu não quis dizer diretamente no menu. Nem todo mundo é percise em seus movimentos do mouse, e superá-lo pode resultar na abertura acidental do menu, o que pode ocultar os dados que você realmente deseja. Os sites têm margens, mas os mouses podem atrapalhar e as pessoas podem exceder ao mover o mouse. Margens do site pode ser grande o suficiente para conta para um menu aberto, mas que restringe a largura do seu menu (não quero margens ser muito grande)

— Vince Emigh

2

Concordo com o seu argumento em geral, mas a pergunta indica que o menu deve ter ~ 20 px de largura, portanto não vejo problema neste caso.

— Cai

0

Como você está usando o bootstrap, deve ser fácil usar um glyphicon para mostrar que é um menu, em vez de palavras.

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

Primeiro, você deve considerar o fato de que 20px é uma maneira de emagrecer. pareceria apenas um pontinho na página, nada convidando os usuários a clicar. Eu sugiro 50px. É um tamanho padrão que os usuários esperam ver e se sentirão confortáveis.

Se for realmente impossível usar um menu mais grosso, considere usar uma caixa de 50px / 50px na parte superior esquerda da tela.

Se você deve usar palavras, em vez de um ícone, definitivamente não deve colocar as letras uma sob a outra. Tente virar o título para o lado (e use uma fonte mais fina).

— MJH
fonte