профессиональный дизайн чрезвычайно тонкого вертикального меню

Итак, я программист и полный провал в веб-дизайне. До сих пор мне удавалось создавать «приемлемые» образы с помощью таких фреймворков, как bootstrap, но я застрял в небольшом боковом меню. Лучшее, что я смог придумать, это следующее:

Ужасное меню

Это небольшое боковое меню на странице, где у вас есть встроенный в браузер RDP-клиент, поэтому главное требование состоит в том, чтобы оно было ОЧЕНЬ тонким и желательно плавающим в левой части экрана (изменив его на горизонтальное и прикрепив к левой части экрана). вверху экрана не вариант). Он также должен быть виден ВСЕГДА, поэтому он не должен появляться при наведении указателя мыши на нужную область. Он содержит три кликабельные кнопки (МЕНЮ, КЛАВИШИ, ЗАКРЫТЬ). И в качестве примечания: клавиши кнопок зависят от конкретного решения и являются четким описанием в контексте пользователя.

Мой вопрос: как мне сделать так, чтобы это меню соответствовало указанным выше критериям, таким тонким -> шириной ~ 20 пикселей, всегда видимым, и при этом оно выглядело профессионально и не отвлекало? Буду очень признателен за любые советы и подсказки!

Что именно делают три варианта? Я предполагаю, что в меню будет отображаться меню с дополнительными параметрами RD; будут ли Keys вызывать виртуальную клавиатуру? Дайте вам список сочетаний клавиш, которые вы можете использовать в клиенте RDP? Что-то другое? И закрывает ли Close (как я предполагаю) текущее соединение/сеанс RDP, по сути, выгружая вас из системы? И если мои догадки верны, есть ли какая-то конкретная причина, по которой вы дали Keys и Close такое видное (не встроенное) положение, а не просто иметь одно меню со всеми параметрами? Сколько опций в раскрывающемся меню ?
@Janus Bahs Jacquet, дело в том, что большинство пользователей не знакомы даже с такими вещами, как значок гамбургер-меню ... Я уверен, что, когда эти три вещи не всегда видны, я получу жалобы и вопросы ... Но я я думаю о том, чтобы переключиться только на значок закрытия и значок гамбургера, который откроет меню и переместит туда кнопку дополнительных клавиш.
@ larzz11 larzz11 Конечно, зависит от вашей пользовательской базы, но значок гамбургера в наши дни настолько вездесущ, что я рискну предположить, что почти все пользователи хорошо с ним знакомы.

Ответы (4)

Рассмотрите возможность использования установленных шаблонов пользовательского интерфейса, таких как значок меню гамбургера или стрелка, чтобы показать, что есть ничья или меню. Иконки достаточно, чтобы люди знали, что есть навигация / настройки, которые нужно щелкнуть.

Это всего лишь быстрый набросок, но вы можете получить подобные значки из библиотеки Bootstraps.

Ммм это хорошая идея. Теперь, когда я думаю об этом, это немного излишне / избыточно создавать меню, в котором одна из кнопок будет открывать другое меню .... Это кнопка закрытия, которую я хотел бы видеть все время, но я думаю, что это можно было бы переместить в другое меню, а затем иметь только маленькую кнопку, которая открывает меню большего размера....
Вы можете просто поставить крестик в окошке до верхнего левого угла, а затем опустить меню так, чтобы его нельзя было случайно щелкнуть. Иногда дизайн просто удаляет все до тех пор, пока он не станет базовым элементом, а затем просто добавляет немного блеска. Я думаю, что мы все виноваты в том, что слишком много обдумываем :) рад, что это помогает.
«Иногда дизайн просто удаляет все до тех пор, пока не появятся базовые элементы, а затем просто добавляет немного блеска». Я думаю, что я должен кадрировать это:)
@larzz11: это (возможно) адаптировано из известной цитаты Сент-Экзюпери:"Perfection is Achieved Not When There Is Nothing More to Add, But When There Is Nothing Left to Take Away"
@OlivierDulac Я думал, что перефразирую кого-то :) это единственное, что действительно запомнилось из университета.

введите описание изображения здесь

Это всего лишь мой ответ на один из ваших вопросов в комментариях относительно кнопки закрытия.

При использовании бургер-меню вы обычно не всегда видите кнопку закрытия, происходит следующее: вы щелкаете по значку меню (бургер-меню), открывается полное меню, и так или иначе иконка бургера меняется на закрыть значок.

При нажатии кнопки закрытия меню закрывается, и оно снова меняется на значок меню гамбургера.

Это выглядит лучше, и у вас больше нет кнопки закрытия, которая ничего не делает, когда меню не открыто.

Еще кое-что

Я хотел бы упомянуть, что ширина 20 пикселей — это мало… например введите описание изображения здесь, вот это: и для меня это слишком мало для хорошего взаимодействия с пользователем. Стройность — это одно, а незаметность — с другой стороны… вам это не нужно.

Я считаю, что вещи, скользящие вокруг, когда моя мышь находится рядом с ними, ужасно раздражают.
@GOROIE Хорошо, тогда хорошо, что я упомянул, что значок закрытия появляется только после нажатия на меню, а не при наведении курсора , верно? Глупо было бы думать, что кнопка закрытия появляется при наведении на иконку меню...опять же, что бы она закрыла, если бы это произошло?!
Я полагаю, вы неправильно понимаете назначение кнопки «закрыть». Если я неправильно понял вопрос, это не кнопка «закрыть это расширенное меню»; скорее, в меню есть различные варианты того, что вы можете делать с клиентом удаленного рабочего стола, который является главной страницей, а кнопка закрытия здесь — это кнопка «закрыть текущее подключение/сеанс удаленного рабочего стола».

Вы можете рассмотреть возможность использования меню, которое частично выдвигается, когда пользователь наводит указатель мыши на меню, чтобы сэкономить визуальное пространство.

Состояние по умолчанию:

введите описание изображения здесь

Когда мышь рядом (используя анимацию для перехода):

введите описание изображения здесь

Если разрешено, вы даже сможете открыть его дальше, если щелкнуть один из разделов.

Лично я нахожу это несколько хлопотным. Вам нужно убедиться, что под или рядом со «стрелкой меню» ничего не появляется. В противном случае вы могли пытаться выделить какой-то текст, случайно открыть меню. Звучит надоедливо. Если меню должно быть открыто, позвольте мне решить, когда его открыть, поскольку меня очень раздражает, когда мой компьютер думает, что знает, чего я хочу (когда это не так). Это всего лишь мое мнение.
@VinceEmigh, на самом деле несложно убедиться, что под меню ничего нет. В любом случае страница всегда должна иметь поле, поэтому убедиться, что поле не меньше размера меню, на самом деле не проблема.
@CAI Я не имел в виду прямо под меню. Не все точны в своих движениях мыши, и промах может привести к тому, что вы случайно откроете меню, что затем может скрыть данные, которые вы действительно хотели. На сайтах есть поля, но мыши могут ошибаться, и люди могут промахиваться при перемещении мыши. Поля сайта можно сделать достаточно большими, чтобы учесть открытое меню, но это ограничивает ширину вашего меню (не нужно, чтобы поля были СЛИШКОМ большими)
Я согласен с вашей точкой зрения в целом, но в вопросе говорится, что меню должно быть шириной ~ 20 пикселей, поэтому в этом случае я не вижу проблемы.

Поскольку вы используете начальную загрузку, должно быть легко использовать глификон, чтобы показать, что это меню, а не слова.

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

Во-первых, вы должны учитывать тот факт, что 20 пикселей слишком тонкие. это выглядело бы просто какой-то вспышкой на странице, а вовсе не чем-то, что побуждало бы пользователей щелкнуть мышью. Я предлагаю 50px. Это стандартный размер, который пользователи ожидают увидеть, и с которым им будет удобно.

введите описание изображения здесь

Если действительно невозможно использовать более толстое меню, рассмотрите возможность использования поля 50px/50px в верхнем левом углу экрана.

Если вы должны использовать слова вместо значка, вам определенно не следует размещать буквы одну под другой. Попробуйте перевернуть заголовок боком (и используйте более тонкий шрифт).

профессиональный дизайн чрезвычайно тонкого вертикального меню
СпросиСетьПолитика конфиденциальности1y, 0v