Лучшие примеры дизайна веб-форм CRUD

Я хочу обновить наши веб-формы CRUD и буду признателен за любые примеры хорошего дизайна пользовательского интерфейса.

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

Наш процесс:

Экран поиска, на котором также есть кнопка ДОБАВИТЬ НОВУЮ. Введите значения для любых параметров, релевантных для поиска, и нажмите кнопку НАЙТИ. Соответствующие записи отображаются в сетке со ссылкой ИЗМЕНИТЬ. Соответствующая форма редактирования позволяет КЛОНИРОВАТЬ, УДАЛИТЬ и СОХРАНИТЬ.

При необходимости форма редактирования может отображать дочерние записи.

Для очень сложных записей / отношений форма редактирования заменяется карточкой записи, которая отображает все, включая кухонную раковину! и соответствующие записи / подзаписи имеют ссылки ИЗМЕНИТЬ.

Функционально, но скучно.

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

Мне нравится много пользовательского интерфейса на страницах администрирования электронной коммерции Magento , но мне были бы интересны любые другие примеры, которые вы можете порекомендовать.

Ответов (6)

Я только что наткнулся на это

там вы найдете пару ДЕЙСТВИТЕЛЬНО ОТЛИЧНЫХ шаблонов !!!

http://www.webappers.com/2009/09/18/20-professional-web-admin-templates-on-themeforest/

Веб-сайт с динамическими данными, который вы можете создать с помощью .Net 3.5, очень удобен. Хорошая чистая динамическая способность CRUD и при этом очень настраиваемая. Маршрутизация позволяет по умолчанию использовать сгенерированные страницы, когда это необходимо, и настраиваемые страницы, если вы решите их создать.

Веб-сайт с динамическими данными

Ссылки стоит посмотреть:

http://www.smashingmagazine.com/2008/04/17/web-form-design-modern-solutions-and-creative-ideas/

http://somerandomdude.com/articles/design/form-design/

У этих ребят есть действительно хорошие примеры ...

http://wufoo.com/gallery/

Для меня интерфейс администратора Django - хороший пример интерфейса CRUD.

Вот несколько примеров паттернов пользовательского интерфейса:

Элементы управления вводом

Сложенные вкладки

Встроенный сумматор ввода

Мастера одной страницы

Оверлей

Обычно каждый раздел объясняет шаблон, как и зачем его использовать, а также дает несколько графических примеров в качестве реальных примеров.

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

Надеюсь, это вам немного поможет.

Обновление от 25.07.18: Хотя трудно поддерживать работу ссылок девятилетней давности, похоже, что веб-сайт, на котором размещались примеры пользовательского интерфейса, теперь исчез. Прочтите « Прощание от Patternry» для получения дополнительной информации.