Вариация на тему интерфейса phpmyadmin [UPD!]



    Привет!

    Люди бывают разные и у каждого свои вкусы. Кто-то любит все яблочное, кто-то просто красивое, кому-то пофиг на красоту, и подавай им голую юзабилити, а другие вовсе не знают чего хотят. Я же(думаю, что я не одинок) отношусь к каждому типу в некоторой степени. В один из скучных вечеров решил набросать макет моего вИдения интерфейса phpmyadmin. В нем есть и то удобство(имхо), чуточку яблочности, и незагруженный лишними элементами экран.

    Макет рисовался исходя их классического интерфейса phpmyadmin 3.2.3(так, по крайне мере написано у меня на денвере). Эта версия на первый взгляд поприличнее внешне нежели 3.2.3, но визуально захламлена. У меня глаза разбежались. И дело не в том, что это просто новый интерфейс.

    Цель поста? Отдам psd макет любому желающему реализовать как тему для phpmyadmin. Нарисована только главная страница. Если кто-то возьмется, нарисую и остальной интерфейс.

    Постарался придерживаться минимализма + иконки(люблю я их).

    Иконки позаимствованные, распространяются по лицензии Creative Commons. Некоторые доработаны/склеены с другими иконками одновременно.

    К сожалению не знаю более устойчивого img хостинга, чем хабр, который сжимает картинку до 800px, поэтому ниже вы можете видеть макет в нарезке из двух частей(по клику увидите в хорошем качестве). Для скачки полной картинки жмите сюда zalil.ru/32297222(есть вариант лучше? подскажите. радикал и подобные быстро отваливаются)





    пы.сы. Знаю, что хабр — не девиант, но, думаю, тематика уместна.

    UPD: в личке и камментах пара человек изъявило желание поучаствовать в реализации. Предлагаю поступить так: в следующем топике, в котором я покажу интерфейс таблиц я упомяну этих людей и в камментах можно расставить точки — кто будет этим заниматься и в какой мере. За собой хотел бы оставить право внесение корректировок и указание на недочеты. Спасибо, за энтузиазм!
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 95

      +34
      Поддерживаю, красиво, я бы с такой работал.
      –1
      Картинки заливайте на habrastorage.org/
        +1
        К сожалению не знаю более устойчивого img хостинга, чем хабр, который сжимает картинку до 800px,
          +1
          ссори :) поторопился и не дочитал.
          а интерфейс очень милый, кстати pma поддерживает темы? просто я не вкурсе
            0
            Несколько есть на офсайте, парочку видел после гугления. Потому и решил нарисовать, ибо выбор не велик ныне.
              0
              не нашел на вики wiki.phpmyadmin.net/pma/Development доку по создании тем для pma
                +1
                Я пошел другим путем. Чтобы установить тему надо ее скачать и распаковать в /themes/.
                Следовательно скачиваем тему и смотрим ее принцип. Файлов не много.
        +7
        Дизайн понравился, только хотелось бы увидеть список таблиц или записей в таблице, т.к. это именно те страницы, которые просматривает юзер.
          +7
          Если заслуживает внимания, а учитывая реакцию читателей в такое время, похоже, заслуживает, в ближайшие дни нарисую и опубликую в этом же блоге.
          0
          Очень понравилось. Жаль, нет времени на помощь в создании темы.
            +3
            Неплохо вышло. Чем-то напомнило Chive.
              +1
              imageshack.us?
              • НЛО прилетело и опубликовало эту надпись здесь
                  +2
                  А вы navicat пробовали?
                    +4
                    Я — пробовал, мне совершенно не понравился, этот на много удобнее.
                      0
                      То же самое хотел спросить)) После того как попробовал Navicat — забыл о всяких PMA и прочей ереси как о страшном сне)
                        +1
                        Только не всегда дают прямой доступ к базе, кроме как для локалхоста.
                          0
                          Всегда (ну, или почти всегда) можно подключиться по ssh.
                            0
                            То то и оно, что «почти».
                              0
                              Если речь о дешевом shared-хостинге (а только на таком может не быть ssh), то лучше сразу выбирать тот, что дает ssh, благо вариантов предостаточно. Как минимум, для удобства работы с MySQL.
                                0
                                Хм, а я как-то и не обратил внимание что NaviCat может по ssh, спасибо что открыли глаза.
                                  0
                                  Это, кстати, и бесплатный Sequel Pro умеет.
                                    0
                                    NaviCat Lite тоже вполне бесплатный (:
                                      0
                                      Но по функциональности практически не отличается от того же Sequel, а визуально несколько менее удобен (субъективно).
                                0
                                HTTP-туннель
                              0
                              Для этого вместе с Navicat идет PHP тоннель дл работы с базой)
                            0
                            Так он платный в отличие от SequelPro.
                            +1
                            Поддерживаю, отличная вещь.
                              +2
                              Не пробовали MySQL Workbench? Дизайн, конечно, не такой няшный и тормоза бывают, но возможность строить EER-диаграммы по стурктуре БД и, наоборот, структуру по EER — окупает любые костыли интерфейса.
                                +2
                                Ну не знаю.
                                Моя душа после первого использования полюбила SqlYog. Клиент только кофе не варит.
                                Для интересующихся скрины: www.webyog.com/en/screenshots.php (SqlYog вместо MonYog выберите).
                                  +1
                                  соглашусь, после него перепробовал кучу других клиентов — ничего лучше не нашел, остался на «Йоге»
                                  –2
                                  Для «покопаться в таблице» его, конечно, более чем достаточно. А вот попробуйте-ка забекапить базу или перегнать ее с одного сервера на другой? Вот тут куда удобней navicat, хотя, он явно излишне дорог.
                                  • НЛО прилетело и опубликовало эту надпись здесь
                                    0
                                    Sequel всем хорош — недавно начал юзать, в связи с переходом на мак. Только одно мне объясните, как делать вкладки запросов??? (как в pgAdmin или MySql Workbench)
                                    • НЛО прилетело и опубликовало эту надпись здесь
                                    +10
                                    Занятно :)
                                    Если никто не возмется, то я сделаю тему через неделю
                                      +1
                                      Вот и появился желающий :) Скоро наваяю экран с таблицами.
                                        +5
                                        Кстати, для верстки подобных интерфейсов есть классный фреймворк от создателей твиттера — Twitter bootstrap. Вполне может пригодиться.
                                          0
                                          Что там с темой? 8 лет прошло.
                                          +1
                                          Все же маком слегка отдает дизайн :)
                                            +4
                                            Я не любитель продуктов Эппл, но если действительно удобно пользоваться — пусть будет хоть на что угодно похоже.

                                            Вообще же меня в стандартном phpMyAdmin сильно огорчают надписи. Они везде и занимают очень много места. Это информативно, но (имхо) неудобно.
                                              +1
                                              Минимализм != Apple.
                                                +1
                                                А мне, как пользователю мака, это гораздо больше напоминает интерфейсы Ubuntu.
                                                P.S. Не вкладываю ни капли иронии, очень приятное оформление, на порядок симпатичнее стандартных от pma.
                                                +1
                                                «классического интерфейса phpmyadmin 3.2.3»

                                                Посмотрел версию у себя на домашнерабочей машине — 2.11.9. Пошел обновляться :)
                                                  +2
                                                  зря :) там много аякса, очень сильно мешает неизвестность происходящего :(
                                                  +1
                                                  Рад видеть, что подобные темы поднимаются. Помоему с каждой версией ПхпМайАдмин становиться только хуже с точки зрения разработчика, надеюсь на шаред хостингах появиться что-то более удобное со временем, поставленное по умолчанию.
                                                    +2
                                                    может предложите Ваше оформление сразу разработчикам?
                                                      +1
                                                      В 3.4 оформление по умолчанию изменилось.

                                                      Ваш вариант тоже понравился.
                                                        +3
                                                        Этот новый интерфейс пма весьма глюкавый. лучше бы оставили старый.
                                                          +4
                                                          Вот это как раз и есть ухудшение, о котором я 2 комментами выше говорил. А уж всякие аякс фичи, когда структура таблица изменяется без отображения запроса, который только что был выполнен, это вообше беда.
                                                            +2
                                                            а мне www.adminer.org/en/phpmyadmin/ по душе пришелся
                                                              0
                                                              Всецело поддерживаю и всем рекомендую!
                                                              Это всего один файл весом около 300К! Умеет почти все тоже самое что phpMyAdmin.
                                                              Интерфейс похож на phpMyAdmin, но все действия выполняются в меньшее число кликов и более логичны.

                                                              Кроме того, очень удобно когда надо по-быстрому что то поменять в БД на чужом хостинге. Залить один файл на 300К, быстрее чем залить все файлы и каталоги phpMyAdmin.
                                                                0
                                                                Забыл сказать что Adminer поддерживает несколько баз данных, а не только MySQL.
                                                                Кстати, с темами там тоже можно поиграть.
                                                                +1
                                                                Качнул adminer, глянул, выкинул phpmyadmin.
                                                                Правильно сделал?
                                                              –1
                                                              Выкладывайте на hostingkartinok.com, он должен справится с хабраэффектом.
                                                                +4
                                                                MySQL Workbench ИМХО совсем неплох и в добавок бесплатен в отличие от Navicat
                                                                  +13
                                                                  Только консоль, только хардкор!
                                                                    –1
                                                                    Для картинок использую itmages.ru. Поставил на линь дополнение к наутилусу и рад.
                                                                      +1
                                                                      я честно скажу, что всем, кому приходится по долгу службы работать с phpMyAdmin, глубоко насрать какие в оформлении используются цвета и шрифты, гораздо важнее подумать о моментах взаимодействия и сделать доступным возможность работы с несколькими вкладками (таблицами, запросами и результатами).
                                                                        0
                                                                        Последняя версия phpMyAdmin ужасно медленная. Перешел на десктопный клиент.
                                                                          +1
                                                                          После Adminer забыл о phpMyAdmin как о страшном сне. Когда на хостинге дают ссылку на phpMyAdmin + часто бывает прикручено что-то свое для дополнительного логина между разными MySQL серверами, то часто проще и быстрее бывает залить 1 файлик админера и потом быстро и просто работать с базой.

                                                                          Правда под Админер тоже не совсем родная тема стоит, а с иконками.
                                                                            +9
                                                                            Вот что получилось сверстать:



                                                                            Кликабле.
                                                                              0
                                                                              Энтузиазм похвален, но:
                                                                              — иконки местами не соответствуют
                                                                              — шрифт везде должен быть Tahoma 11, В заголовках arial 18
                                                                              — некоторые отступы не соответствуют макету
                                                                              — фон нарезан не очень удачно(выглядит слишком зернисто)
                                                                              — бордеры на скрине выглядят иначе, нежели на макете
                                                                              — в идеале яваскриптом визуально сделать ui как на макете.
                                                                                +4
                                                                                У меня нет psd, я не могу все точно сделать :)
                                                                                Фон вырезать нормально не получается, попробуйте вы, ну или научите :)
                                                                                  0
                                                                                  Ни коим образом не ругаю :)
                                                                                  В следующем топике предоставлю все макеты в psd.
                                                                                0
                                                                                Дай, дай! ))
                                                                                  0
                                                                                  У инпутов и селектов фон должен быть разным(инверсия), т.к. инпут «впалый», а селект, как и сабмит — «выпуклый»
                                                                                    0
                                                                                    Так же другой радиус скругления табов в меню,
                                                                                    Отсутствие тени между левым и правым блоком.
                                                                                    Контейнер табов не должен прилипать слева. Немного левее.
                                                                                    Глянец в алерте мне кажется лишним.
                                                                                    0
                                                                                    Что-то мне колорит дизайна, ютубвоский напоминает…
                                                                                      +10
                                                                                      Я как раз сейчас работаю над собственным современным аналогом phpMyAdmin. Основное отличие от остальных аналогов (сам phpMyAdmin, Chive, SQL Buddy, Adminer), что это будет полноценное JS-приложение с разделением интерфейса и данных, а не так как у всех, где просто AJAX'ом загружаются куски HTML сгенеренный PHP.

                                                                                      Выглядеть это будет примерно так (хотя сейчас делаю редизайн с полным переходом на HTML5 и отказом от поддержки старых IE).



                                                                                      Основной упор сделан на работу с данными, в том числе инлайновое-редактирование (как в десктопных приложениях, выбрал ячейку потом кликнул на ней и можно редактировать), так уже удобные инструменты для фильтров, группировки, сортировки.

                                                                                      Желающие могут глянуть раннюю альфа версию, которую можно сказать для отработки технологии написал. В ней доступен только просмотр данных (сортировка, навигация, фильтрация), но можно увидеть, схему работы.

                                                                                      В общем если Вам интересна эта тема, то можете высказывать пожелания по будущему функционалу.
                                                                                        +1
                                                                                        Делайте максимально просто! А потом подумайте, и сделайте еще проще(с)
                                                                                          0
                                                                                          Так и задумано, мне в этом плане очень нравится HeidiSQL, ориентируюсь на него. Т.е. будет аналог HeidiSQL, но работающий из браузера.
                                                                                            0
                                                                                            Мое субъективное мнение — нативный интерфейс — некрасивый :)
                                                                                              +1
                                                                                              Изначально вообще была мысль сделать интерфейс максимально простым, вплоть до того, что в указанной выше альфе, вообще по сути 2 картинки: градиент заголовков столбцов (а то совсем мрачно) и стелочки сортировки, но и они в CSS прописаны.

                                                                                              Что бы Вы изменили в предложенном выше дизайне. Не нравится сами цвета, или компоновка, что-то еще? Я вообще считал, что близость по дизайну к десктопным приложениям, будет упрощать освоение.
                                                                                                0
                                                                                                Лично у меня сразу ассоциация с десктоп приложением. Мне кажется веб-приложения должны выглядеть иначе.
                                                                                                Каждый бордер в интерфейсе его утяжеляет.
                                                                                                Стараюсь не использовать безопасные цвета, ибо режут глаз. Больше мягкости!
                                                                                                  +1
                                                                                                  Так оно и работать будет намного ближе к десктопным приложениям, чем к обычным веб приложениям типа phpMyAdmin. Насколько я понимаю основная претензия к большому количеству белого? В таком случае это не проблематично, можно будет менять скинами, сейчас важна общая концепция, и чтобы не совсем уж страшно выглядело :)

                                                                                                  Вот еще тот самый редизайн в стиле Office2010, на которым сейчас работаю.
                                                                                                    0
                                                                                                    Уже более няшно ;) Как эталон можно не офис брать, а тот же Г+
                                                                                          0
                                                                                          Планирую такую штуку включить в один свой проект, где громоздкость PMA не нужна, а нужен просто редактор сток в таблицах. Больше всего хочу две вещи:
                                                                                          — другая организация кода; не как в дампере — синглтон вперемешку с непрокомментированным кодом;
                                                                                          — отключение функций в файле настроек; например: запретить пользователю (админу) возможность менять структуру таблиц движка.
                                                                                            +1
                                                                                            Насчет дампера, у него задачи специфические, там нужна высокая скорость и возможность работы на хостингах со старыми версиями PHP.

                                                                                            В данном случае почти вся логика в JS, от PHP только задача выдать индексную страницу, а потом выполнять роль тоннеля JS <-> MySQL. Там самого PHP будет очень мало.

                                                                                            Разграничение доступа сделаю, нужно только подумать, что именно туда выносить.
                                                                                        • НЛО прилетело и опубликовало эту надпись здесь
                                                                                            +1
                                                                                            Чертовски содержательный каммент
                                                                                              +4
                                                                                              Он со скрытым смыслом. Типа «консоль наше все»…
                                                                                          • НЛО прилетело и опубликовало эту надпись здесь
                                                                                              0
                                                                                              Это в принципе осуществимо. Почему бы и нет.
                                                                                              +3
                                                                                              Ещё есть замечательный HeidiSQL для MySQL и MSSQL.
                                                                                                0
                                                                                                Дизайн понравился, лучше дефолтного намного.
                                                                                                  +4
                                                                                                  не надо путать «раскрась картинку» с дизайном пользовательских интерфейсов. дизайн — это проектирование в первую очередь и только во-вторую оформление.

                                                                                                  в этой работе phpmyadmin как был херней с кучей списков, вкладок, кнопок, кривых таблиц так ею и остался. где UI?
                                                                                                    0
                                                                                                    ну в первую очередь pma это интерфейс. начать можно именно с темы, а потом и UI
                                                                                                      0
                                                                                                      Сейчас Вы пытаетесь навесить на UI уровня 98го года, современный дизайн. ИМХО, это очень и очень глупо.

                                                                                                      > начать можно именно с темы, а потом и UI
                                                                                                      Любое, даже малое, изменение UI приведет к несоразмерным в теме. Выгоднее будет сделать примитивную-примитивную тему, переделать UI, постепенно подкручивая эту простую тему под него, а затем, когда UI будет готов, сделать нормальную тему с плюшками.
                                                                                                        0
                                                                                                        ну по моему переделка интерфейса это уже не совсем тема, а форк
                                                                                                      0
                                                                                                      Читая комментарии очень ждал подобного разумного ответа.
                                                                                                      Вы чертовски правы!
                                                                                                      Перерисовать контролы — это не значит разработать дизайн.

                                                                                                      У современных дизайнеров основная проблема в их методе работы — они знают основные элементы страницы, то что можно изменить их стиль, но в процесс разработки не лезут почему-то.
                                                                                                        0
                                                                                                        это не проблема, а постановка задачи. перед написанием топика я не ставил цель изменения интерфейса. первоочередная задача была именно оформительная. по итогам двух топиков задача обретает более интересные очертания.
                                                                                                          0
                                                                                                          Так бы и назвали топик — дизайн темы для…
                                                                                                          С моей точки зрения — темы для неудобных, морально устаревших интерфейсов вообще не стоит делать.

                                                                                                          С точки зрения оформительства — чем стиль поля для ввода отличается от нажатой кнопки? Заголовки слишком прижаты к бордеру, если обратите внимание на выносные элементы — сразу поймёте о чём я говорю. Некоторые вопросы вызывают отступы между кнопками — на мой взгляд они слишком малы — это видно в разделе Interface, где под заголовком лепнина из кнопок и выпадающих меню. Пояснительные надписи вида «create new database», являющиеся элементом с слабым приоритетом для отображения ничем не отличаются от стиля списков в категориях.

                                                                                                          Удачи!
                                                                                                            0
                                                                                                            Спасибо! Замечания, разумеется, принимаю. Будем работать.

                                                                                                    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                                                                    Самое читаемое