Как правильно создать структуру сайта


10 сервисов для создания структуры сайта в 2020 году / Хабр

Прототипирование — значимый этап в веб-разработке, который позволяет определить и сформировать ДНК проекта на ранних стадиях. В последние годы количество онлайн-сервисов и инструментов для прототипирования ощутимо возросло. В этом обзоре представлены 10 сервисов для создания визуальных сайтмэпов.


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

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

Пример структуры веб-сайта (Блоки кликабельны)

Рассмотрим три типа сайтмэпов:

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

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

XML сайтмэпы скрыты от пользователей, но при этом важны. Описывая структуру сайта и взаимосвязи страниц, XML сайтмпэмы облегчают поисковым машинам анализ сайта. Следовательно положительно влияют и на ранжирование. В XML сайтмэпах важна чистота описания структуры и используемый синтаксис, поскольку кроулеры поисковых движков не терпят непоследовательности и расхлябанности кода. XML сайтмэпа заменили более старый способ «прямой загрузки в поисковые движки» на специальной отдельной странице. Теперь загрузка сайтмэпа происходит напрямую, или же разработчики просто ждут, пока поисковая машина найдет файл самостоятельно. Обновляя файл сайтмэпа с новой структурой, вы обеспечиваете более быстрое индексирование страниц, по сравнению со стандартной автоматической процедурой поисковой машины.

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

Зачем нужны визуальные сайтмэпы?


Планирование и прототипирование сайта уже давно стали стандартом индустрии. Чаще всего сначала строится майндмэп проекта. Делается это, чтобы определить главные и второстепенные элементы будущего сайта, а также задачи, которые сайт или сервис будет решать.

На следующем этапе планируется подробная иерархия страниц, их структура. Этот этап требует осмысления и обсуждения. Поэтому такой прототип должен быть понятен всем участникам процесса (программистами, дизайнерам, разработчикам, контент-менеджерам). Формализованная структура сайта (сайтмэп) становится отправной точкой.


Сервис c минималистичным и свежим подходом в дизайне интерфейса, запущенный в 2019 году. Без лишних деталей и довесков Octopus работает быстро, а чистый визуальный язык располагает к работе.

Основная идея проектирования сайтмэпов в Octopus заключается в формировании страниц из блоков. Такие конструкции наглядны и призваны дать подробное представление о структуре будущей страницы.

Протестировать Octopus.do возможно без регистрации. Зарегистрировать профиль понадобится только в момент сохранения проекта. Также можно посмотреть простое и понятное видео о проекте.

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

Есть и более удобный способ добавления блока — достаточно нажать Enter, и в нижней части страницы появится новый блок. Такой метод позволит быстро заполнять содержание с использованием одной лишь клавиатуры. Drag’n’drop работает предсказуемо и быстро.

Блокам могут быть присвоены цвета из заданной палитры цветов:

Пользователям платных подписок Octopus.do доступен экcпорт сайтмэпов в PNG и PDF. С бесплатной подпиской можно делиться прямой ссылкой на проект. При этом внешние пользователи смогут вносить изменения в сайтмэп, что упрощает командную работу.

Организация информационных слоев и разделов сервиса открывается в аккуратных поп-апах. Благодаря этому складывается впечатление, что пользователь не покидаете рабочее пространство минималистичного редактора.

Функция добавления текстового описания к блокам, будет полезной для планирования контента в проекте. Поп-ап вызывается нажатием на пиктограмме документа в правой части блока:

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

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

Отличительная особенность Octopus — наличие функции Estimate. Интерфейс реализован в виде выезжающей панели, которая содержит таблицу-калькулятор для оценки стоимости работ. И при известной часовой ставке за конкретную экспертизу можно оценить временные затраты и бюджет проекта.

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

Резюме

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

Стоимость, подписка: бесплатный план предусматривает 1 активный проект. Платные подписки от 8 $ в месяц.
Простота использования: для начинающих и пользователей среднего уровня
Дизайн: ★★★★☆
Командная работа: ✓
Экспорт: ссылка, PDF и PNG (только для платных пользователей)

Отсутствие необходимости регистрироваться — преимущество сервиса Gloompas. Пользователь сразу же оказывается в рабочей среде с минималистичным дизайном. Интерфейс интуитивен и помогает втянуться в процесс довольно быстро. Добавление и удаление блоков сайтмэпа происходит с понятной и предсказуемой механикой.

Возможность настраивать цвет каждого отдельного блока, задавать размер шрифта — удобный функционал, который помогает формировать акценты в сайтмэпе.

Отдельно стоит отметить настройки вида: Map View, Matrix View и Outline. В зависимости от структуры и масштаба проекта можно выбрать способ отображения сайтмэпа.

В проектах с громоздкой структурой и многоуровневой вложенностью удобной окажется функция сворачивания и разворачивать группу страниц. Gloomaps — бесплатный сервис, но не без ограничений. Ссылка на проект хранится 14 дней, и каждое новое посещение страницы проекта продлевает доступность ссылки на следующие 14 дней. Насколько известно, создавать приватные проекты нельзя. Функционал для автоматической генерации сайтмэпов не предусмотрен.

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

Резюме
Бесплатный сервис с оптимальным набором функций и широкими возможностями экспорта готового проекта.

Стоимость, подписка: бесплатно
Простота использования: подходит для начинающих
Дизайн: ★★★☆☆
Командная работа: ✓
Экспорт: ссылка, PNG, PDF, XML

Наглядный и насыщенный шаблонами Flowmapp помогает создавать как визуальные сайтмэпы, так и планировать потоки пользователей.

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

  • начать с чистого листа
  • импортировать из XML файла
  • расширить существующий шаблон

В заготовленных шаблонах найдется три типа проектов: e-Commerce, корпоративный проект и новостной портал.

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

Анимации и реакции элементов интерфейса помогают втянуться в процесс и научиться базовым манипуляциям. Удобно реализованы групповые выделения страниц для удаления или смены лейбла.

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

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

Что касается навигации, то к стандартному набору функции добавлена довольна удобная механика — Project Map. Project Map сочетает в себе как визуальную, так и механическую ценность — перемещение по структуре больших проектов упрощается.

К каждой из страниц проекта можно добавлять расширенное описание и прикреплять отдельные файлы. Эта фича полезна в процессе наполнения сайта контентом.

Широкие настройки экспорта в SVG и PNG форматы позволяют выбрать оптимальный вариант и даже задать разрешение изображения на выходе.

Резюме
Сервис с продуманным набором функций и приятным интерфейсом. В бесплатной подписке функции доступны в широком спектре. Подойдет для эффектной и качественной презентации проектов сайтмэпов.

Стоимость, подписка: бесплатный план предусматривает 1 активный проект и 100 Мб места, без ограничении по коллабораторам. Платные подписки от 8 $ в месяц при годовой оплате.
Простота использования: для начинающих и пользователей среднего уровня
Дизайн: ★★★★★
Командная работа: ✓
Экспорт: ссылка, PNG, SVG, PDF, DOCX


Относительно простой в организации Writemaps помогает проектировать сайтмэпы и планировать контент проекта. Для того, чтобы протестировать сервис, придется зарегистрироваться.

С точки зрения дизайна интерфейс можно описать, как «народный» или незамысловатый. Бесплатный план обеспечивает доступ к части функции: 3 активных сайтмэпа c 50 страницами. Остальные фичи доступны платным пользователям.

Часть платного функционала включает возможность выделять страницы проекта цветом, объединять и добавлять к ним контент, создавать разделы, делиться проектом и экспортировать сайтмэп в PDF. Хотя для бесплатных планов предусмотрен экспорт в CSV и XML.

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

Резюме
«Только самое необходимое» именно так можно охарактеризовать подход к функционалу бесплатной версии. Платная подписка подойдет для пользователей, которые планирую распределение контента, помимо общей структуры сайта.

Стоимость, подписка: бесплатный план предусматривает 3 активных проекта с ограничением в 50 страниц. Платные подписки от 14.99 $ в месяц.
Простота использования: для начинающих и пользователей среднего уровня
Дизайн: ★★☆☆☆
Командная работа: ✓
Экспорт: CSV, XML, PDF и ссылка (только для платных пользователей)

Rarchy


Beta-версия проекта обладает скромным набором функций. Сайтмэп строится как с нуля, так и в генеративном порядке по ссылке на сайт.

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

Никаких дополнительных настроек отображения блоков не предусмотрено. Тем не меннее drag’n’drop работает понятно. А форматы отображения схемы позволяют переключить проект в вид биоморфной схемы. Возможно, такой вид покажется наглядным и уместным.

На момент публикации доступен экспорт только в CSV-файл. Поделиться прямой ссылкой нельзя.

Стоимость, подписка: бесплатно
Простота использования: для начинающих
Дизайн: ★★☆☆☆
Командная работа:
Экспорт: CSV


В сервисе Visual Sitemaps сайтмэпы строятся на основе уже запущенных проектов автоматически. Инструмент кроулит структуру сайта и делает полноразмерные скриншоты страниц. При этом пользователь определяет количество скриншотов и глубину кроулинга в уровнях. Пользователям бесплатных подписок доступна глубина не более 2-х уровнейю.

Процесс кроулинга относительно быстрый. Но если проект объемен, то будет разумно запустить процесс и отвлечься на другие задачи, а сервис сообщит по почте о готовности сайтмэпа автоматически. Предусмотрен экспорт проекта в PDF.

На момент публикации дополнительных функции не так много, но анонсированы комментарии к скриншотам страниц, возможность реорганизовывать структуру проекта и защищать проекты паролем.

Резюме
Visual Sitemaps будет удобен для предварительного анализа проекта. Особенно, если есть необходимость посмотреть и оценить устройство страниц.

Стоимость, подписка: бесплатный план предусматривает регистрацию одного пользователя и 50 скриншотов с ограничение глубины кроула до двух уровней. Платные подписки от 29 $ в месяц.
Простота использования: для начинающих и пользователей среднего уровня
Дизайн: ★★★★☆
Командная работа: ✓
Экспорт: ссылка, PDF

Slickplan


Многофункциональный сервис Slickplan включает в себя проектировщик сайтмэпов, инструмент по созданию диаграмм и потоков. Широкий набор инструментов планирования контента и дизайн шаблоны.

Среда устроена логично, рабочая зона четко отделена от элементов навигации. А панель навигации наследует логику классических desktop-приложений. Сайтмэп можно построить с нуля или же импортировать: возможно использовать XML и текстовые файлы, а также встроенный кроулер.

Механика манипуляции с блоками интуитивно понятна. Добавление новых страниц происходит быстро, а drag’n’drop объектов позволяет менять порядок и иерархию. Настройки каждого элемента (страницы, блока) сайтмэпа включают:

  • Добавление контента (текстовый и мультимедиа)
  • Добавление заметок
  • Выбора типа страницы
  • Распределение дизайн шаблона
  • Диаграмы
  • Добавление ссылки

В Slickplan стилизовать сайтмэп можно не только с помощью заготовленных цветовых схем, но и индивидуально. Настройки найдутся во вкладке Styles верхней панели инструментов.

Командная работа реализована подробно. Помимо пользователей с правами редактора, можно подключать пользователей права которых ограничены просмотром проекта. А раздел с комментариями поможет вести обсуждения проекта онлайн.

Сервис предусматривает подключение Google Analytics. Это отличительная и полезная особенность Slickplan. A интеграция со сторонними сервисами (Basecamp, Slack и другие) позволяет шерить проект в удобном формате. Проект может быть защищен паролем.

Конечно, с таким набором функций не стоит ожидать бесплатных подписок. 30-дневный триальный период подведет к выбору подходящего плана от 9.99 $ в месяц.

Резюме
Богатый набор функций и продуманный интерфейс. Огромный набор возможностей и настроек экспорта.

Стоимость, подписка: 30-дневный триальный период. Платные подписки от 9.99 $ в месяц.
Простота использования: для пользователей среднего и продвинутого уровней
Дизайн: ★★★★☆
Командная работа: ✓
Экспорт: ссылка, PDF, EPS, HTML, CSV, TXT, DOCX, Slickplan Sitemap XML


Чтобы осмотреться в Dynomapper придется создать аккаунт. Доступен 14-дневный тестовый период. Знакомство c сервисом начнется с наглядного видео-эксплейнера.

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

Стоит отметить, что дизайн среды сдержанный и консервативный. А процесс создания сайтмэпа больше похож на классическое взаимодействие с Explorer (Win) или Finder (Mac). Структура сайта, в отличие от сервисов описанных ранее, отображается в виде, напоминающем дерево файлов.

Компактно и придется по вкусу тем, кто привык к такому взаимодействию. Хотя режим Preview отображается уже в виде блок-схемы, и предусматривает 4 дополнительных вида отображения.

Настройки свойства и функций элементов удобно расположены в правой панели вкладок:

  • Page (Расширенная информация о странице)
  • Content (Планирование (добавление) текстового и мультимедийного контента)
  • Analytics
  • Comment

Приватный проект будет доступен только пользователям подключенным к аккаунту.

Гибкие настройки экспорта в PDF позволяют выбрать формат (размер) перед сохранением. Дополнительно пользователь определяет и ограничивает количество уровней вложенности для экспорта.

Отдельные манипуляции и действия требуют более подробного изучения раздела помощи.

Резюме
Инструмент производит основательное впечатление и скорее всего подразумевает более глубокую проработку проектов и работу с контентом.

Стоимость, подписка: 14-дневный триальный период. Платные подписки от 49 $ в месяц.
Простота использования: для пользователей среднего и продвинутого уровней
Дизайн: ★★☆☆☆
Командная работа: ✓
Экспорт: ссылка, PDF, CSV


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

Создатели сервиса выложили исходный код на Github (https://github.com/alentum). Кроулер бережно сохраняет историю запросов.

Стоимость, подписка: бесплатный
Простота использования: для начинающих
Дизайн: ★★☆☆☆

Creatly


Creatly заботливо создал демосреду, чтобы тестировать сервис без регистрации. Создание сайтмэпов — лишь часть функционала инструмента. Creatly предназначен для визуализации различных информационных структур.

В тестовой среде создания сайтмэпов уже создан демопроект. Пример призван помочь разобраться в базовой механике, и справляется с этой задачей.

Drag’n’drop нагляден: перетаскивание элементов сопровождается наглядными связями страниц и объектов. Редактирование страниц, удаление объектов и связывающих линий работает так, как в привычном векторном редакторе. Поэтому для дизайнеров механика будет понятна и близка.

В раскрываемой правой панели собраны настройки стилей и дополнительной информации. Сетка и привязка к ней — удобная фича. Возможно выбирать шрифты, определять выравнивание текста в блоке и т.д. Насыщенная стилями палитра поможет задавать акценты в сайтмэпе.

Размер документа в пикселях — любопытная фича. Пользователь всегда в курсе разрешения картинки еще до того, как произведет экспорт.

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

Стоимость, подписка: бесплатный план предусматривает 5 публичных документов и возможность добавления до 3-х коллабораторов. Платные подписки от 5 $ в месяц.
Простота использования: для пользователей среднего и продвинутого уровней
Дизайн: ★★★★☆
Командная работа: ✓
Экспорт: ссылка, PNG, JPG, SVG

***********************************

P.S.

Чтобы было легче выбрать, вот сравнительная таблица по всем сервисам (в самом конце) и немного больше скриншотов.

Создание долговечной структуры веб-сайта

Вы начинаете новый проект веб-сайта? Что ж, первое, что вам нужно сделать, это выбрать структуру своего сайта. Если у вас еще нет базового представления о том, как вы будете представлять информацию на своем сайте, будет сложно, а то и невозможно организовать ее. Структуры веб-сайтов - это первый шаг к созданию невероятной информационной архитектуры, то, что отделяет хорошие веб-сайты от потрясающих впечатлений.

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

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

Четыре типа структур веб-сайтов

Если вам когда-либо предлагали создать веб-сайт с нуля, вы, вероятно, уже знаете, как сложно понять, с чего начать. Многие начинающие дизайнеры могут начать с темы, однако, когда вы создаете собственные веб-сайты и более крупные сайты, заранее созданная тема может не подойти.

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

Иерархическая модель

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

Последовательная модель

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

Матричная модель

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

База данных Модель

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

Почему стоит начать со структуры сайта

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

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

Структуры веб-сайта объясняют, как пользователи перемещаются по сайту.Это влияет на удобство использования, поскольку во многом удобство использования зависит от того, насколько легко пользователи веб-сайта могут ориентироваться на сайте. На удобном для использования сайте легко ориентироваться (помимо других факторов). Структуры веб-сайта не гарантируют удобство использования, но, безусловно, помогают в этом.

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

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

Как выбрать лучшую структуру сайта

Проще говоря, структура веб-сайта помогает вам создавать лучшие сайты. Итак, следующий логичный вопрос для большинства людей: «Как узнать, какую структуру использовать?» Вот тогда все становится немного сложнее. Вы начинаете с понимания того, для кого вы создаете сайт.

Структура сайта и аудитория

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

Иерархический

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

Иерархические структуры также легко адаптировать ко многим сценариям.Вы можете выбрать простой стиль концентратора и луча или построить более сложные иерархии с подзаголовками в зависимости от предполагаемого использования и пользователя. Простые иерархии также отлично работают на мобильных сайтах, где варианты ограничены одной страницей и несколькими ссылками. Чтобы выбрать структуру, которая выдержит испытание временем, нужно создать такую, которая не будет слишком мелкой или глубокой. Слишком много (или слишком мало) подзаголовков - плохо.

Последовательный

Последовательные сайты часто ассоциируются с образовательными сайтами, и это неудивительно, поскольку эта структура основана на стиле, используемом в печатных публикациях.Если вы представляете обучающий контент, который, естественно, находится в логическом порядке (например, в алфавитном порядке) или предназначен для представления в хронологическом порядке, вероятно, лучше всего подойдет последовательная структура. Само собой разумеется, что целевая аудитория - это те, кто хочет узнать значительный объем информации, представленной на нескольких страницах.

Хотя последовательные структуры следуют четко определенному порядку и лучше всего работают на небольших сайтах, есть место для их настройки в соответствии с потребностями крупных сайтов.Используя некоторые принципы иерархической структуры, программисты могут добавлять отступления в эту структуру сайта. Эти «подстраницы» оставляют место для добавления вспомогательных страниц информации, не позволяя пользователю сайта отклониться от своей цели. Никто не любит щелкать ссылку только для того, чтобы заблудиться и не знать, как вернуться (даже если это сделано намеренно). Отступления позволяют посетителям сайта блуждать, но не слишком далеко.

Матрица и база данных

Если бы была одна фраза, описывающая этот тип структуры веб-сайта, это было бы: «Войдите в матрицу, если осмелитесь. Не только сложнее организовать структуры матриц и баз данных, но также сложно ориентироваться в них, если вы еще не знаете, что ищете.

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

В веб-дизайне матрица часто рассматривается как набор ссылок на идеи или как облако тем, которое направляет посетителей туда, где они должны находиться. Проекты баз данных основаны на параметре поиска и извлекают связанную информацию для пользователя. Сайты такого типа могут предоставлять пользователям невероятные объемы данных; поэтому вы должны быть осторожны, чтобы понять, сколько это слишком много. Когда есть большое количество тем, из которых можно выбирать, с небольшой организацией или ее отсутствием, или когда с помощью поиска не удается найти связанную информацию, многие люди становятся перегруженными и уходят.

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

Создайте свою структуру

Теперь, когда вы немного разбираетесь в структуре веб-сайтов, вы, вероятно, задаетесь вопросом, что делать дальше. Короткий ответ: начните создавать карту сайта.Нужна помощь в начале работы? Эта статья агентства цифрового маркетинга Protofuse отлично объясняет, как использовать Slickplan для представления выбранных структур сайта, планирования навигации и создания архитектуры, которая выдержит испытание временем.


Написано Дженн Мари

Дженн Мари - внештатный писатель и специалист по интернет-маркетингу из Сиэтла.Истинный технологический евангелист, Дженн ранее помогала людям использовать весь потенциал продуктов Dell, Microsoft и Amazon. Сейчас она сосредоточена на создании аутентичного присутствия в Интернете для малого бизнеса и предпринимателей через свою компанию Jenn Marie Writing & Marketing.

.

html - Как правильно настроить структуру страницы

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
  5. Реклама Обратитесь к разработчикам и технологам со всего мира
  6. О компании
.

php - Как правильно построить структуру классов

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
.

Как структурировать веб-форму - Изучить веб-разработку

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

Предварительные требования: Базовая компьютерная грамотность и базовое понимание HTML.
Цель: Чтобы понять, как структурировать HTML-формы и придать им семантику, чтобы они были удобными и доступными.

Гибкость форм делает их одной из самых сложных структур в HTML; вы можете создать любую базовую форму, используя специальные элементы и атрибуты формы. Использование правильной структуры при создании HTML-формы поможет обеспечить ее удобство и доступность.

Элемент

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

Мы уже встречались с этим в предыдущей статье.

Предупреждение: Строго запрещено вкладывать форму в другую форму. Вложенность может привести к непредсказуемому поведению форм, поэтому это плохая идея.

Всегда можно использовать элемент управления формой вне элемента .Если вы это сделаете, по умолчанию этот элемент управления не имеет ничего общего с какой-либо формой, если вы не свяжете его с формой с помощью атрибута form . Это было введено для того, чтобы вы могли явно связать элемент управления с формой, даже если он не вложен в нее.

Давайте продвинемся вперед и рассмотрим структурные элементы, которые вы найдете вложенными в форму.

Элементы
и

Элемент

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

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

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

Вот небольшой пример:

 <форма> 
Размер фруктового сока

При чтении приведенной выше формы программа чтения с экрана будет говорить «Размер фруктового сока малый» для первого виджета, «Размер фруктового сока среднего размера» для второго и «Размер фруктового сока большого размера» для третьего.

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

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

Из-за своего влияния на вспомогательные технологии элемент

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

Элемент

Как мы видели в предыдущей статье, элемент - это формальный способ определения метки для виджета HTML-формы.Это наиболее важный элемент, если вы хотите создавать доступные формы - при правильной реализации программы чтения с экрана будут озвучивать метку элемента формы вместе со всеми связанными инструкциями, а также это будет полезно для зрячих пользователей. Возьмем этот пример, который мы видели в предыдущей статье:

   

Если правильно ассоциирован с через его атрибут для (который содержит атрибут id элемента ), программа чтения с экрана зачитает что-то вроде «Имя, редактировать текст".

Существует еще один способ связать элемент управления формой с меткой - вложить элемент управления формы в , неявно связав его.

  

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

Если метки нет или если элемент управления формы не связан явно или неявно с меткой, и программа чтения с экрана зачитает что-то вроде «Редактировать пустой текст», что совсем не помогает.

Ярлыки тоже кликабельны!

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

Например, щелчок по тексту метки «Мне нравится вишня» в приведенном ниже примере переключит выбранное состояние флажка style_cherry :

 <форма> 

Несколько этикеток

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

Рассмотрим этот пример:

 

Обязательные поля сопровождаются * .

Верхний абзац устанавливает правило для обязательных элементов.Правило должно быть включено до того, как будет использоваться, чтобы зрячие пользователи и пользователи вспомогательных технологий, таких как программы чтения с экрана, могли узнать, что это означает, прежде чем они столкнутся с требуемым элементом. Хотя это помогает информировать пользователей, что означает звездочка, на это нельзя положиться. Программа чтения с экрана произносит звездочку как « star » при встрече. При наведении курсора зрячего пользователя мыши должно появиться сообщение « требуется », что достигается за счет использования атрибута title .Названия, которые читаются вслух, зависят от настроек программы чтения с экрана, поэтому более надежно также включить атрибут aria-label , который всегда читается программами чтения с экрана.

Эффективность перечисленных выше вариантов увеличивается по мере их прохождения:

  • В первом примере метка вообще не считывается при вводе - вы просто получаете «редактировать пустой текст», плюс фактические метки считываются отдельно. Множественные элементы сбивают программу чтения с экрана.
  • Во втором примере все немного яснее - метка, считываемая вместе с вводом, - это «имя звездочка имя редактировать текст требуется», а метки по-прежнему считываются отдельно. Все еще немного сбивает с толку, но на этот раз все немного лучше, потому что с привязана метка.
  • Третий пример является наилучшим - фактическая метка считывается все вместе, а метка, считываемая с вводом, - это «имя требуется изменить текст».

Примечание : Результаты могут немного отличаться в зависимости от используемой программы чтения с экрана.Это было протестировано в VoiceOver (и NVDA ведет себя аналогично). Нам тоже хотелось бы услышать о вашем опыте.

Примечание : Вы можете найти этот пример на GitHub как required-labels.html (также посмотрите его вживую). не тестируйте пример с 2 или 3 версиями без комментариев - программы чтения с экрана определенно запутаются, если у вас есть несколько меток И несколько входов с одним и тем же идентификатором!

Общие HTML-структуры, используемые с формами

Помимо структур, специфичных для веб-форм, хорошо помнить, что разметка формы - это просто HTML.Это означает, что вы можете использовать всю мощь HTML для структурирования веб-формы.

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

  • внутри списка
      или
        . Также широко используются элементы

        и

        . Списки рекомендуются для структурирования нескольких флажков или переключателей.

        Помимо элемента

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

        ,

        ) и секционирование (например,
        ) для структурирования сложных форм.

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

        , с элементами
        , содержащими переключатели.

        Активное обучение: построение структуры формы

        Давайте применим эти идеи на практике и создадим более сложную форму - форму оплаты.Эта форма будет содержать ряд типов элементов управления, которые вы, возможно, еще не понимаете. Пока не беспокойтесь об этом; вы узнаете, как они работают, в следующей статье (Основные элементы управления собственными формами). А пока внимательно прочтите описания, следуя приведенным ниже инструкциям, и начните формировать представление о том, какие элементы оболочки мы используем для структурирования формы и почему.

        1. Для начала сделайте локальную копию нашего пустого файла шаблона и CSS для нашей платежной формы в новом каталоге на вашем компьютере.
        2. Примените CSS к HTML, добавив следующую строку внутри HTML :
            
        3. Затем создайте форму, добавив внешний элемент
          :
           <форма>  
        4. Внутри тегов
          добавьте заголовок и абзац, чтобы проинформировать пользователей, как помечены обязательные поля:
           

          Форма оплаты

          Обязательные поля сопровождаются * .

        5. Затем мы добавим в форму более крупный фрагмент кода под нашей предыдущей записью. Здесь вы увидите, что мы помещаем поля контактной информации в отдельный элемент
          . Кроме того, у нас есть набор из двух переключателей, каждую из которых мы помещаем в отдельный элемент списка (
        6. ). У нас также есть два стандартных текста s и связанные с ними элементы , каждый из которых содержится внутри

          , и ввод пароля для ввода пароля.Добавьте этот код в свою форму:

           <раздел> 

          Контактная информация

          Заголовок

        7. Второй <раздел> нашей формы - это платежная информация.У нас есть три отдельных элемента управления вместе с их ярлыками, каждый из которых находится внутри

          . Первый - это раскрывающееся меню ( <выбор> ) для выбора типа кредитной карты. Второй - это элемент типа tel , для ввода номера кредитной карты; хотя мы могли бы использовать тип number , нам не нужен пользовательский интерфейс счетчика номера. Последний - это элемент типа date , для ввода даты истечения срока действия карты; этот будет иметь виджет выбора даты в поддерживающих браузерах и вернется к обычному вводу текста в не поддерживающих браузерах.Эти новые типы ввода повторно представлены в типах ввода HTML5.

          Введите следующее под предыдущим разделом:

           <раздел> 

          Платежная информация

      1. Последний раздел, который мы добавим, намного проще, он содержит только

      Готовую форму можно увидеть в действии ниже (также ее можно найти на GitHub - см. Наш источник payment-form.html и работает в режиме реального времени):

      Проверьте свои навыки!

      Вы дошли до конца этой статьи, но можете ли вы вспомнить самую важную информацию? Вы можете найти дополнительный тест, чтобы убедиться, что вы сохранили эту информацию, прежде чем двигаться дальше - см. Проверка своих навыков: структура формы.

      Сводка

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

      См. Также

      В этом модуле

      Расширенные темы

      .

      Смотрите также

      Поделиться в соц. сетях

      Опубликовать в Facebook
      Опубликовать в Одноклассники
  • Вы можете оставить комментарий, или ссылку на Ваш сайт.

    Оставить комментарий