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!
fonte
Respostas:
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.
fonte
"Perfection is Achieved Not When There Is Nothing More to Add, But When There Is Nothing Left to Take Away"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.
fonte
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.
fonte
Como você está usando o bootstrap, deve ser fácil usar um glyphicon para mostrar que é um menu, em vez de palavras.
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).
fonte