Я работаю над выбором макетов и форм компонентов страницы для большого образовательного веб-приложения, содержащего более 100 различных веб-страниц. В настоящее время я пытаюсь использовать плоские макеты и стараюсь использовать минимум компонентов, чтобы каждая страница выглядела простой и удобной . Большие блоки отображают теоретические предметы, а меньшие — лаборатории (количество блоков может варьироваться). Я разработал аналогичные эскизы для всего приложения. Но я хочу убедиться, где оставить место, которое можно будет эффективно использовать позже для отображения расширенных функций. Основные характеристики заключаются в следующем.
Также вышеуказанные типы страниц регулярно используются студентами, преподавателями, кафедрами, руководством института.
Пожалуйста, предложите лучшие практики для определения макетов и формы компонентов для каждой категории. Заранее спасибо.
Похоже, вы ищете какой-то руководящий принцип в том, как организовать макет из многих частей.
Лучше всего начать с того, чтобы убедиться, что вы хорошо понимаете визуальную иерархию : как расположение и представление управляют порядком просмотра вещей. Прочтите об этом, найдите хорошие интуитивно понятные макеты и подумайте, какую иерархию они создают и как они направляют взгляд, а затем пересмотрите свой список из 10 пунктов и спросите себя: кто на что должен смотреть и когда? Какие из них связаны и как (например, долгосрочные инструменты против краткосрочной информации, возможно)?
Сгруппируйте элементы в блоки в зависимости от того, кто и когда должен быть привлечен к каким блокам, а затем организуйте эти блоки в иерархию.
Также имейте в виду шаблоны, которые люди используют по умолчанию, когда нет никаких визуальных подсказок, направляющих взгляд. Исследования слежения за движением глаз показывают, что обычно их три : сверху слева вниз справа, зигзагом вниз по странице и в форме буквы F. Это может быть полезно для прогнозирования того, что люди могут делать в тех областях, где вы хотите, чтобы варианты были сбалансированы.
Но, вероятно, самая важная часть: протестируйте с реальными людьми и на основе этого доработайте свой макет.
Скотт