Дизайн админ панели Evolution

Evolution
Крупнее...

Преимущества SVG


Друзья

Вторую неделю как, вечерами, я занимаюсь админ панелью. Уже достигнутый результат на картинке.
Нужен ваш фидбэк.
  1. Как часто вы пользуйтесь внутрисистемными сообщениями? Нужен ли индикатор в поле видимости?
  2. Как часто вы пользуйтесь менеджером с мобильных устройств?
  3. В качестве цветовой схемы я брал схему Carbon. Может стоит свести использование цветов к минимуму?
  4. Чего вам действительно не хватает на экране приветствия. И что нужно оставить из того, что есть?
Обоснования приветствуются.
Спасибо.
TODO
  • Не забыть дифференцировать контейнеры от ресурсов цветом/оттенком.
  • Разработать удобное представление для страницы элементов, возможно вывод в дереве на манер REVO.
  • Продумать и разработать систему настраиваемых виджитов для страницы приветствия. Вероятнее всего плагином.

Дамп на гите: https://github.com/a-sharapov/evo-manager

48 комментариев

avatar
Супер идея и реализация, надеюсь допилим и выпустим в свет :)
avatar
Присоединюсь нагло к комментарию, реализовано очень симпатично, браво :)
avatar
1. Не пользовался ни разу
3. Не думаю, что стоит совсем от цвета отказываться. Например цвет иконок в дереве помогает легко отличить страницу от папки, не особо вглядываясь.

А вообще очень круто!
avatar
Спасибо.
Да, кстати в TODO не забыть дифференцировать папки от ресурсов цветом.
avatar
Симпатично, современно.

1. Ни разу не пользовался сообщениями. Возможно, индикатор стоит показывать, только если есть непрочитанные сообщения.
2. Ни разу. Но подозреваю, что число тех, кто может для админки использовать планшет или телефон, хоть и мало, но растет.
3. Получившаяся цветовая схема мне нравится. Добавить/убавить не просится.
4. Имеющийся экран приветствия совершенно не функционален. Не пользуюсь тем, что там есть. Логичнее там иметь ссылки на часто используемые модули или задачи, например на список заказов или создание новости или требующий модерации комментарий. Но это все индивидуально для каждого сайта и включается по необходимости.

По увиденному варианту:
— сбивают с столку в древе ресурсов боковые полоски у папок. мне они мешают.
— не нравится у списка сниппетов (и прочих элементов) получившийся fieldset и обводка названий категорий. Получается слишком громоздко. По-моему эти названия не нуждаются в таком сильном выделении. Зачастую в списке элементов довольно много пунктов и с таким оформлением полезный объем получается мал.
avatar
Спасибо.
У полоски есть кой какой функционал, хотя… опять же это не финальный вариант.
Комментарий отредактирован 2015-11-02 22:46:26 пользователем a-sharapov
avatar
Как часто вы пользуйтесь внутрисистемными сообщениями? Нужен ли индикатор в поле видимости?
Редко. Но на некоторых проектах туда уходят уведомления админу. Индикатор в поле видимости думаю не нужен, т.к. при необходимости можно вывести плагином туда, куда нужно.

Как часто вы пользуйтесь менеджером с мобильных устройств?
Ни разу

В качестве цветовой схемы я брал схему Carbon. Может стоит свести использование цветов к минимуму?
Лично мне нравится сочетание цветов этой схемы.

Чего вам действительно не хватает на экране приветствия. И что нужно оставить из того, что есть?
Оставить «кто из менеджеров online». Остальное можно удалять.
avatar
Как часто вы пользуйтесь внутрисистемными сообщениями? Нужен ли индикатор в поле видимости?
Как часто вы пользуйтесь менеджером с мобильных устройств?
— последнее время довольно часто. + Клиенты пользуются некоторые, не много но есть.

В качестве цветовой схемы я брал схему Carbon. Может стоит свести использование цветов к минимуму?
Цветовая схема должна быть приятная и не напрягать при долгом использовании в класической Carbon как по мне все сливается, не хватает чуточку резкозти

Чего вам действительно не хватает на экране приветствия. И что нужно оставить из того, что есть?
Я бы сделал систему виджетов что б можно было ставить то что нужно, в плане реализации особых проблем не вижу. что б можно было перетаскивать да и выводить те которые надо тогда будет проще кастомизировать сразу и не будет не нужной инфы там
avatar
Как часто вы пользуйтесь внутрисистемными сообщениями? Нужен ли индикатор в поле видимости?
редко, на одном личном сайте, веду переписку с манагерами)

Как часто вы пользуйтесь менеджером с мобильных устройств?
приходилось открывать админку с планшета, телефона. Для быстрых правок

В качестве цветовой схемы я брал схему Carbon. Может стоит свести использование цветов к минимуму?
я б посоветовал взять за основу темы Revostyle, цвета довольно приятные и ничего резкого на экране. + зеленая плашка вверху)

Чего вам действительно не хватает на экране приветствия. И что нужно оставить из того, что есть?
хз, сводной информации по работе с документами, но такое вроде есть «последние документы»
avatar
Дизайн поддерживающий мобильные устройства очень нужен, если сейчас с него редко заходят в админку, то только по тому что это мучение в ней работать.

Представленная тема понравилась — автору поклон и уважение!

Хотелки (надеюсь какие-то моменты будут поддержаны и реализованы)
1) список модулей — если он длинный, то организовывать по другому, чтобы не уходил за пределы экрана. Возможно выпадающим вниз списком. Возможно весь второй уровень вложенности хорошо бы смотрелся бы выпадающим списком.

2) Пояснительный текст над сниппетами, чанками и пр. Сделать по умолчанию свернутым. Так как это нужно только начинающим, а в остальное время занимает только время.

3) иконки в выпадающем меню для пунктов дерева зря убрали — они позволяют точно выбирать нужное, не вчитываясь в надписи.

Как часто вы пользуйтесь внутрисистемными сообщениями? Нужен ли индикатор в поле видимости?
Не использую

Как часто вы пользуйтесь менеджером с мобильных устройств?
хотелось бы чаще

В качестве цветовой схемы я брал схему Carbon. Может стоит свести использование цветов к минимуму?
не стоит, очень скучно и всё сливаться будет. Какие-то отдельные элементы хорошо бы делать выделенными, в том числе и цветом.

Чего вам действительно не хватает на экране приветствия. И что нужно оставить из того, что есть?
Виджеты для каждого сайта нужны свои — интернет магазину о текущих продажах, блогу о последних комментариях и т.д. Так что тут вопрос о возможности их легкого внедрения в текущий дизайн.
Комментарий отредактирован 2015-11-04 21:31:49 пользователем trifle
avatar
Для начала хочу сказать, что вы молодец! Большое спасибо за этот вклад! Но без замечаний никак, надеюсь, что моя критика в достаточной степени конструктивна.


В нормальном размере.

  1. Правая колонка: Поддерживаю akool про fieldset. Думаю, что fieldset вообще не нужен, просто заголовка достаточно (рамки — лишний визуальный шум).
  2. Левая колонка: боковые полоски у папок как-то мешаются, поддерживаю akool .
  3. Левая колонка: Ссылка неопубликованного документа слишком неконтрастная, читать трудно. Можно сделать такой же цвет, как у документа без отображения в меню, статус публикации прекрасно выделяется курсивом.
  4. Левая колонка: ID, выровненные по правому краю — решение понятное (они так красивенько, по одной линии), но это не удобно. Удобно было бы, если бы это была таблица и при наведении выделялась строка. Конечно же такой табличный подход здесь не уместен, т.к. нам редко надо оперировать множеством ID без относительно названий, т.е., нам не нужна отдельная колонка ID (как сейчас), их группировка не даёт функциональных преимуществ. Как мы пользуемся ID? Читаем название одного документа и тут же нам нужен его ID. Вести взгляд в другой конец блока — далеко, пусть будет рядом в скобках (как это сделано сейчас). Принцип близости нарушен, связанные объекты (которые всегда будут использоваться только вместе) получились в разных местах.
  5. Общее: Надо добработать отступы, сейчас они танцуют =)
  6. Общее: Сразу видно, что вы не используете модульную сетку, многие элементы прыгают относительно друг друга.
  7. Общее → Иконки: Есть ли смысл в разных размерах иконок? Все иконки стандартного размера 16×16, мне кажется, идеально бы смотрелись.
  8. Общее → Иконки: Субъективно, но иконка «Элементы» не считывается) Что на ней изображено? В целом, иконки самостоятельно рисовались? Может быть стоит посмотреть какие-нибудь готовые наборы, например, fontawesome.io/icons/ вполне достойный.
  9. Правая колонка: Галочки-птички для буллетов меню — сомнительное решение, на мой взгляд. Они хорошо подходят для списков TODO, а здесь бы я оставил дефолтные круглешки / квадратики.
  10. Правая колонка: Выделение ID курсивом лишнее, скобки уже служат отличным выделением. Тем более, что курсив — неопубликованный документ, а ещё, там бывает надпись «(Заблокирован)».
  11. Левая колонка → Выпадающее меню: Поддерживаю trifle , иконки зря убрали.
  12. Общее → Кнопки: Крадиент, тень, рамка снизу и тень у текста — перебор, на мой взгляд. Скевоморфизм давно не в моде (по объективным причинам, между прочим), тем более, что всё остальное плоское.
  13. Общее: Слишком много разных типов рамок, линий, толщин и теней. Можно без зазрения совести уменьшить всё в 3 раза и ничего не потерять, будет только порядок.
  14. Левая колонка → Выпадающее меню: Заголовок ресурса по центру — некрасиво. Особенно, учитывая, что центральное выравнивание больше нигде не используется. Предлагаю выровнять по левому краю (на одной линии с текстом пунктов).
Ну, пока хватит =) Ещё раз спасибо за вашу работу!
Комментарий отредактирован 2015-11-05 05:15:06 пользователем Ronef
avatar
15. Верхняя часть: Чуть не забыл, иконка «×» — это «Закрыть», а не «Выйти» ;-)
16. Общее: Предлагаю не трогать пока функционал, менять только внешний вид (т.е., не трограть главный экран, оставить иконку сообщений и пр.) — оставить всё как есть. Довольно логично разделять оформление и функциональные изменения.
avatar
Спасибо.
Большинство из того что вы перечислили уже исправлено :) С некоторыми вещами согласен, с некоторыми нет. Иконки рисовал сам, кое где еще не дорисованы, поэтому скрыты. Большая часть уже перерисована в соотв. с разрешением. На вкус и цвет фломастеры разные, и к сожалению всем угодить невозможно. Ну и я совсем не сторонник плоских концепций, можно сказать яростный приверженец нелюбимого в последнее время скевоморфизма, ну и это же опенсурс. Никто не будет запрещать форкать и вносить изменения. Я планирую вложить тему на github вместе с ихсодниками, как только посчитаю её законченой. Если совсем не устроит, можно же сделать свою собственную тему, со всем тем как хочется.
avatar
Отличная стильная тема :)
avatar
А где скачать посмотреть? :)
avatar
1) Как часто вы пользуйтесь внутрисистемными сообщениями? Нужен ли индикатор в поле видимости?

— Ни разу.

2) Как часто вы пользуйтесь менеджером с мобильных устройств?

— Я как разработчик, конечно, работаю на десктопе. Но клиенты всё чаще просят адаптировать админку — но не для мобильных, а хотя бы для планшетов.

3) В качестве цветовой схемы я брал схему Carbon. Может стоит свести использование цветов к минимуму?

— На мой взгляд, это субъективно. Не приоритетно — одному нравится, другому нет.

4) Чего вам действительно не хватает на экране приветствия. И что нужно оставить из того, что есть?

— Очень важный момент. Не хватает настраиваемых быстрых ссылок. Причём не только для меня, а для (например) секретарши клиента, которая заполняет Новости. Надо, чтобы была для неё кнопка «Создать Новость». Если подобный функционал будет — это будет супер, причем я привел естественно только один пример. Быстрые ссылки могут быть самыми разными. Настраиваемый Dashboard есть у Nicola1971 на его сайте.

P.S. А фреймовая верстка там у вас остается? Или все с нуля заново делаете?
avatar
верстка уже через iFrame но от них избавляться особого смысла не вижу
пару решений по части быстрых ссылок есть но как по мне они все не очень быстро настраиваемые :( потому пока думаю что бы придумать удобного
avatar
Отлично смотрится. Автор молодец! Из пожеланий, присоединяюсь к вышесказанному:
1) Быстрые ссылки
2) На странице приветствия — настраиваемые ссылки.
Мне нравится, как все это реализовано в Windows 8.1 — 10: с помощью контекстного меню любой ярлык можно отправить на начальный экран, а там уже можно выстраивать их как угодно. Можно попробовать это сделать и для страницы приветствия и для быстрых ссылок. И то и другое можно туда прикреплять, перетаскивать, переименовать, удалить.

Если это будет интересно другим, могу помочь в реализации программной части.
avatar
Кстати, еще хочу добавить по поводу фреймов и табов. Как по мне, все же было бы удобнее без фреймов. Плюс чтобы можно было открывать несколько табов. Почему? Иногда мне нужно одновременно иметь «под рукой» несколько открытых страниц, по типу как в браузере. И быстро между ними переключаться. Сейчас это нельзя сделать. Вот как это выглядит на примере документации EasyUI: ссылка (при клике слева на любую ссылку открывается новый таб).
avatar
Iframe штука удобная тем что в ней может быть что угодно;)

На текущий момент файлы отвечающие за фреймы можно выносить в тему потому их можно менять под свои нужды;)
Тоесть реализовать работу с табами вполне реально
avatar
Кстати да. Часто в нескольких вкладках открываю админку одного и того же сайта. Без iframe было бы проще это делать.
avatar
не вижу проблемы в iFrame тут только вопрос открывать все всегда в новой вкладке? или как
avatar
В принципе, можно и с фреймами работать. Суть в том, чтобы сделать возможным открывать в новых вкладках страницы. Как на примере EasyUI. А будет это во фрейме работать или нет, это уже не важно. Как я вижу, можно в контексном меню добавить пункт Открыть в новой вкладке. И в правой части окрывается вкладка с этим документом. И так можно сделать, например, не только для документов в дереве, а и для других ссылок в админке. Конечно, тут придется немного допилить код админки, но зато будет очень удобно.
avatar
Я про то же что iFrame не мешают но надо думать что и как сделать что б вписать в текущую ситуацию
монжо сделать проще оставить основное окно в котором все работает
но в документ добавить кнопку: закрепить вкладку.
тогда оно будет оставлять текущий документ а новые открывать в новой, подменяя id блока:) это реализовать куда проще и легче

вообщем есть над чем подумать :) и потом сделать уже дело не такое уж и сложное)
avatar
Да, я тоже с этим согласен :)
avatar
сам открываю админку в 2-3 вкладках, нет проблем) ну разве что открывается главная страница
avatar
Класс, автору спасибо!
Когда пощупать общественности можно будет данный скин?

1. Не пользуюсь
2. В последнее время всё чаще и чаще
3. На скринах смотрится классно, возможно иконки и стоит выделить более контрастно или и вовсе дать пользователю задавать цветовую гамму.
4. Гугл аналитику бы туда, наличие и объем кеш файлов, лог ошибок, календарь с датами публикации ресурсов (если на будущее ставишь или на оборот есть дата снятия с публикации), история авторизации менеджеров, караваны опять же что бы удобно было грабить (: Но чет не думаю, что это можно сделать в рамках редизайна шкурки.
Комментарий отредактирован 2015-12-20 19:58:15 пользователем Chus
  • Chus
  • +1
avatar
Всем, кто следит.
Пока на паузе. Планирую выпустить стабилку и выложить на гит примерно через неделю после релиза стабильной 1.1
avatar
Неделя прошла :) Дайте же уже пощупать!
avatar
Ждем неделю после релиза стабильной 1.1 :)
avatar
покормите хоть скриншотами, есть чего ждать: Р
avatar
Я требую продолжения банкета! :D
avatar
неделька прошла )) уж очень хочется попробовать )
avatar
Спасибо всем, кто следит.
Прошу вас набраться немного терпения. Пока работы много навалилось, но по поводу темы ничего не заглохло. Энтузиазм есть и есть желание сделать максимально хорошо. Пока ждем тему от камрада @WorkForFood , там будет очень много чего вкусного с точки зрения функционала и развяжет мне руки. Сделаю всё, что хотел раньше.
avatar
Чем смогу помогу.)) Но у меня тоже завал по основной работе, двигаюсь вперед небольшими шагами.
avatar
Еще кто ни будь вожделеет вместе со мной данную шкурку или я один каждый день захожу в этот топик?
avatar
да все ждут) я устал сюда заглядывать, ниче нового, кроме пары скриншотов… сладких
avatar
надежда умирает последней? )
avatar
А кстати, WorkForFood сделал очень интересную тему, но что-то по ней всё как-то заглохло. Мне не хватает каких-то примеров, что ли, описаний.

Например, как сделать там свои кнопки-экшены (там это вроде бы легче, чем на старых темах), и вообще какие в итоге преимущества для кастомизации, ну и т.д. и т.п.
avatar
Жаль что воз и ныне там :( Может выложить на гит, а там уже сообщество поможет?)
  • EGO
  • 0
avatar
Очень хочу доделать, но пока нет возможности, выложил дамп на гит:
github.com/a-sharapov/evo-manager
avatar
задумка и реализация очень хорошая ) но очень много багов) уже успел потестить, не хватает минималистичности, слишком много границ у элементов и большие отступы.

спасибо за работу, надеюсь тема не заглохнет как остальные )
avatar
Судя по тому, что творится на гите, бекенд активно рефракторят. Если в релизе 1.1.1 доделают, то можно будет заняться с новыми силами. Так то у меня просто руки опускаются, когда вижу, что в коде творится.
Комментарий отредактирован 2016-09-01 10:52:08 пользователем a-sharapov
avatar
О! а там что-то творится? я уж думал, совсем все забросили Эво :)
avatar
Лично я забросил, увидев вот это: github.com/modxcms/evolution/commit/efa787b2b8192db23a2bd5fa3587ba04ec261510
avatar
Ого, какие навороты )) но это же офиц. ветка, у Димы в сборке вроде нет такого?
avatar
у всех оно будет) теперь наоборот, сначала плюшки в офф, а потом к Диме в сборку 8)

кипишь творится на гите, не сглазьте)
avatar
Ну и пусть ОНО будет, мне такое точно не пригодится.
Надеюсь, и не помешает :)
А насчет гита — тьфу, тьфу, тьфу!
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.