Азы проектирования каталогов для интернет-магазинов
Преждем чем приступать к рисованию эскизов (используя Pencil Project или moqups.com) вам необходимо подумать над тем,
что вы продаете в магазине и соответственно о иерархии (структуре каталога).
Но сначала немного терминологии:
а) Сущность - единица чего-то в нашем проекте, каталоге.
б) Основная сущность - это товар, то есть то что мы продаем.
в) Второстепенные сущности - это категории, производители и пр.
1. Ответьте на вопрос "Что продаете?". Например, обувь.
2. Опишите все свойства вашего товара. Напримеру, у обуви есть размер, цвет, кожа\некожа, бренд, модель, год выпуска, срок гарантии и т д.
Свойства, которые почти всегда есть:
- ID - уникальный номер товара, это единственное что не меняется у товара, остальное все или почти все меняется, даже название.
- название. Иногда название может автоматически формироваться на основе других свойств, например: кроссовки абибас М100, тут название составилось из: категории товара, бренда, модели, аналогичная ситуация с объявлениями на авито.
- артикул
- цена
- цена со скидкой
- описание (большое место для большого текста)
- фото
Если не знаете товар и его свойства (характеристики) - то это печально. В отечественном автопроме видимо такие же конструкторы?
Выхода два: спросить у Заказчика (легко, но не эффективно и не быстро), посмотреть на аналогичных сайтах (быстро, но можно упустить специфику Заказчика).
3. Подумайте и составьте список свойств по которым нужен поиск? Например, по названию? или только поцене? по артикулу?
4. Подумайте и составьте список категорий. Иногда конечно их не бывает, но даже в таких случаях потом приходится как-то разделять товары, чтобы было проще оринетироваться. Не забудьте про глубину вложенности, например, обувь можно сначала разделить на мужскую, женскую и десткую, а потом каждую категорию еще на: спорт, не спорт и пр.
Одноуровневый каталог реализовывать (программировать) легче.
Ну что же, теперь можно перейти к эскизам.
C - create - создать, добавить товар в каталог.
R - read - показать, отобразить товар.
U - update - изменить товар.
D - delete - удалить товар.
То есть вам нужно подумать и отобразить на эскизах все четыре действия если они требуются, в админке (за редким исключением) все 4 есть, а в публичной части только R - то есть только отображение товара. С него и начнем.
5. Рисуем эскизы для публичной части, то есть не админки.
В публичной части 3 эскиза + главная.
1. Главная - главная страница сайта. Из каталога здесь обычно размещают: новинки и хиты продаж, то есть последние добавленные и товары помеченные как Хит.
2. Каталог - Здесь размещаются категории, например, Мужская обувь, женская, десткая.
3. Категория - здесь размещаются список товаров в данной категории (анонс товаров), обычно: фото, название, цена товара.
4. Товар - здесь вся информация по товару, то есть все характеристики.
Бывают разные страницы в паблике, но обычно этих достаточно, для начала так точно достаточно.
5. Рисуем эскизы для закрытой части, то есть админки.
Вот здесь "КРУД" работает по полной программе, поскольку и товары, и категории, и производители надо и добавлять, и изменять, и просматривать и удалять.
Но как это отразить на эскизах? Тут тоже ничего сложноного, особенно если начать с минимума.
Я обычно начинаю с боковой панели, в которую все сущности и пишу: товары, категории, производители. Если есть корзина, то добавляют заказы, причем первыми и заказы отображаются по умолчанию.
Также в боковую панель (она ведь на всех страницах админки есть) для быстрого доступа добавляют: "Добавить товар".
а) Страница товары. Тут все просто: таблица с товарами, столбцы обычно такие: id, название, категория, цена, действия. В действиях Изменить и Удалить. Из круда остается только добавить: а эту кнопку мы размещаем всегда над таблицей справа.
б) Страница категории. Тут все аналогично, таблица, столбцы, действия.
Страницу Удалить не надо рисовать (это и так понятно). А вот страницу Изменить или Добавить (они полностью схожи, только отличаются тем, что в Добавить поля изначально пустоые, а в Изменить поля уже заполненные) рисуем на основе свойств (характеристик) нашей сущности начиная с поля "Название".
След. урок
Но сначала немного терминологии:
а) Сущность - единица чего-то в нашем проекте, каталоге.
б) Основная сущность - это товар, то есть то что мы продаем.
в) Второстепенные сущности - это категории, производители и пр.
1. Ответьте на вопрос "Что продаете?". Например, обувь.
2. Опишите все свойства вашего товара. Напримеру, у обуви есть размер, цвет, кожа\некожа, бренд, модель, год выпуска, срок гарантии и т д.
Свойства, которые почти всегда есть:
- ID - уникальный номер товара, это единственное что не меняется у товара, остальное все или почти все меняется, даже название.
- название. Иногда название может автоматически формироваться на основе других свойств, например: кроссовки абибас М100, тут название составилось из: категории товара, бренда, модели, аналогичная ситуация с объявлениями на авито.
- артикул
- цена
- цена со скидкой
- описание (большое место для большого текста)
- фото
Если не знаете товар и его свойства (характеристики) - то это печально. В отечественном автопроме видимо такие же конструкторы?
Выхода два: спросить у Заказчика (легко, но не эффективно и не быстро), посмотреть на аналогичных сайтах (быстро, но можно упустить специфику Заказчика).
3. Подумайте и составьте список свойств по которым нужен поиск? Например, по названию? или только поцене? по артикулу?
4. Подумайте и составьте список категорий. Иногда конечно их не бывает, но даже в таких случаях потом приходится как-то разделять товары, чтобы было проще оринетироваться. Не забудьте про глубину вложенности, например, обувь можно сначала разделить на мужскую, женскую и десткую, а потом каждую категорию еще на: спорт, не спорт и пр.
Одноуровневый каталог реализовывать (программировать) легче.
Ну что же, теперь можно перейти к эскизам.
CRUD - 4 действа
Над нашей основной сущностью (товаром), да и над остальными сущностями тоже, нужно выполнять 4 действия или продумать и отмести ненужные действия, например, удаление товара.C - create - создать, добавить товар в каталог.
R - read - показать, отобразить товар.
U - update - изменить товар.
D - delete - удалить товар.
То есть вам нужно подумать и отобразить на эскизах все четыре действия если они требуются, в админке (за редким исключением) все 4 есть, а в публичной части только R - то есть только отображение товара. С него и начнем.
5. Рисуем эскизы для публичной части, то есть не админки.
В публичной части 3 эскиза + главная.
1. Главная - главная страница сайта. Из каталога здесь обычно размещают: новинки и хиты продаж, то есть последние добавленные и товары помеченные как Хит.
2. Каталог - Здесь размещаются категории, например, Мужская обувь, женская, десткая.
3. Категория - здесь размещаются список товаров в данной категории (анонс товаров), обычно: фото, название, цена товара.
4. Товар - здесь вся информация по товару, то есть все характеристики.
Бывают разные страницы в паблике, но обычно этих достаточно, для начала так точно достаточно.
5. Рисуем эскизы для закрытой части, то есть админки.
Вот здесь "КРУД" работает по полной программе, поскольку и товары, и категории, и производители надо и добавлять, и изменять, и просматривать и удалять.
Но как это отразить на эскизах? Тут тоже ничего сложноного, особенно если начать с минимума.
Я обычно начинаю с боковой панели, в которую все сущности и пишу: товары, категории, производители. Если есть корзина, то добавляют заказы, причем первыми и заказы отображаются по умолчанию.
Также в боковую панель (она ведь на всех страницах админки есть) для быстрого доступа добавляют: "Добавить товар".
а) Страница товары. Тут все просто: таблица с товарами, столбцы обычно такие: id, название, категория, цена, действия. В действиях Изменить и Удалить. Из круда остается только добавить: а эту кнопку мы размещаем всегда над таблицей справа.
б) Страница категории. Тут все аналогично, таблица, столбцы, действия.
Страницу Удалить не надо рисовать (это и так понятно). А вот страницу Изменить или Добавить (они полностью схожи, только отличаются тем, что в Добавить поля изначально пустоые, а в Изменить поля уже заполненные) рисуем на основе свойств (характеристик) нашей сущности начиная с поля "Название".
След. урок