Pull to refresh

Построение интерфейса: описание паттерна Альтернативные режим просмотра (Alternative Views)

Reading time4 min
Views1.2K
Original author: http://quince.infragistics.com/Patterns/Alternative%20Views.aspx?lang=en
image image image

Это одна из серии статей рассказывающих об использовании паттернов.

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


Диспозиция:
Перед вами поставлены конкурирующие или иногда даже взаимоисключающие дизайнерские задачи для одного и того же интерфейса.

Что можно сделать?
Создайте множественные, альтернативные режимы просмотра (Alternative Views) в одном и том же интерфейсе, которые способны решить различные конкурирующие дизайнерские задачи.

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

Почему именно так?
Когда ваши дизайнерские задачи начинают настолько расходиться, что попытка совместить их все, делает экран технически непригодным для использования, вам следует начать применять альтернативные режимы просмотра документов (Alternative Views). Вероятно, самым распространенным примером такого приема считается распечатывание, особенно в Интернете, где использование функций печати браузера заканчивается низкой читаемостью из-за навигационных и вспомогательных зрительных элементов, которые не имеют прямого отношения к доступному содержанию.
Подобным образом вам может потребоваться обеспечить внешний вид для абсолютно различных форм-факторов, таких как телефоны или другие портативные устройства, или вам может потребоваться обеспечить портативный формат, такой как PDF, с тем, чтобы можно было пользоваться информацией офф-лайн в читаемой форме.
Более продвинутые приложения этого паттерна будут снабжены различными внешними обликами для одних и тех же данных, такими как различная визуализация и/или просмотровые механизмы, чтобы помочь пользователям анализировать и находить нужную информацию. Вы можете пойти дальше, создавая меняющийся/приспосабливающийся внешний вид, оптимизирующий интерфейс для пользователей, которым могут мешать специально разработанные для помощи новичкам или случайным пользователям элементы, или, может, вам понадобится вывести на экран дополнительную информацию или функциональные возможности, которые обычно не требуются большинству пользователей. Какими бы ни были детали, если вы оказываетесь в ситуации, где интерфейс становится громоздким или просто-напросто не отвечает потребностям пользователя, альтернативные виды документов – оптимальное решение. Самое главное убедитесь, что виды документов, которые вы создаете, действительно оптимально служат различению конкурирующих целей — иначе было бы ужасно тратить впустую время и усилия для создания множественных внешних видов, который также трудно использовать.

Как же это сделать?
Применение многообразных внешних видов будет варьироваться вместе с изменением потребностей различных интерфейсов. Ключевой момент – это определить, что перед вами конкурирующие потребности использования, которые не могут быть удовлетворены должным образом в одном интерфейсе, для выделения их в один или несколько режимов просмотра.
Зачастую есть только одна несовместимая потребность (такая как печать, перенос, выполнение, формирование), поэтому альтернативная структура явно необходима. Однако, иногда необходимость альтернативной структуры не очевидна до тех пор, пока вы не добавите что-нибудь к вашим стандартным настройкам, и тогда вы сталкиваетесь с чрезмерной громоздкостью, и в этом случае необходимо попытаться рационализировать структуру окон.
Тут существует соблазн сделать структуру на основе оппозиции «новички — продвинутые пользователи», но такое разделение не всегда полезно. Более полезным средством для отладки внешней структуры окон может стать использование так называемых «образов» или «ролей» (см. пример с Adobe Flash), чтобы определять, что именно потребуется тому или иному типу пользователя. Например, вы можете войти в роль рецензента-издателя, которому требуется отдельная структура – с большими или дополнительными функциональными возможностями, что отличается от роли автора, выбираемой вами по умолчанию. Терминологические определения типов пользователей (ролевых и персональных) могут помочь установить, какой именно внешний вид окон вам нужен для фокусировки на целях и задачах, стоящих перед ними.
Если нет никаких причин не делать этого, например, из соображений безопасности, вы должны обеспечить легкое переключение между различными внешними видами. Если внешний вид экрана содержит признаки состояния пользователя (например, он работает в какой-то форме или документе), вам следует убедиться, что это состояние сохраняется/переносится из одной разновидности в другую.
У некоторых технологий презентационного уровня таких, как HTML, Windows Presentation Foundation и Silverlight, есть техническая поддержка создания разнообразных внешних видов со стилями, которые могут меняться независимо от кода приложения. В HTML вы можете использовать CSS, а в Windows Presentation Foundation и Silverlight стиль, дизайн и шаблоны.

Примеры

MS Windows. Explorer
image
Самый простой и популярный пример. Любой пользователь может настроить отображение файлов исходя из удобства и потребностей.

Adobe Flash Professional
image
Adobe Flash Professional использует несколько режимов исходя из «ролей» своих пользователей. Отдельные наборы панелей для разработчиков, дизайнеров, аниматоров…

Google
image
Google использует альтернативные режимы просмотра при показе результатов поиска.
Ссылка на онлайн пример: Google Опции становятся доступными по ссылке «Показать настройки»

Quince
image
Quince использует два режима просмотра: один с использованием технологии Silverlight, второй в HTML.
Ссылка на онлайн пример: Quince

Gismeteo
image
При всей визуальной схожести на реализацию данного паттерна, на наш взгляд это не совем корректное его использование, так как после переключение в другой режим просмотра, пропадает меню выбора — постоянное присутствие которого является правилом.
Ссылка на онлайн пример: Gismeteo
Tags:
Hubs:
Total votes 13: ↑8 and ↓5+3
Comments2

Articles