Что такое диалоговое окно? Разделы диалогового окна
Все современные программы и операционные системы имеют графический интерфейс. Это облегчает работу с приложениями – больше не требуется вручную вводить команды, достаточно их выбрать из списка или поставить галочки в нужных местах. Программы взаимодействует с пользователем с помощью диалоговых окон. Они могут появляться сами в процессе работы, кроме того, пользователь может вручную вызвать диалоговое окно, параметры которого нужно изменить.
Особенности и внешний вид
Внешне этот элемент интерфейса похож на стандартное окно Windows. В нем также присутствует строка заголовка, потянув за который, можно перенести окно в любое место экрана. Но есть и отличия. Диалоговое окно имеет фиксированный размер – его нельзя развернуть или свернуть. Также в верхнем правом углу часто находится иконка в виде знака вопроса. Щелчок по ней открывает справку по работе с конкретным элементом.
Диалоговые окна часто делают модальными, то есть пока пользователь не введет нужные данные или каким-нибудь образом не отреагирует на появившийся элемент, он не сможет переключиться на другие задачи.
Окно сообщений
Это самый простой и распространенный вид диалогового окна. Его применяют в качестве страховки от необратимых действий со стороны пользователя. Например, оно всегда выскакивает при удалении файла – система запрашивает подтверждение, чтобы случайно не были удалены нужные данные.
Часто это просто информационное сообщение, например, об окончании компьютерной игры, и тогда от пользователя потребуется только нажать кнопку «OK».
Ввод информации
Иногда в процессе работы приложения требуется указать данные произвольного формата. Тогда на помощь приходит окно ввода данных. Для этих целей служит текстовое поле. В офисных пакетах оно может использоваться, например, для поиска фразы в тексте или ввода формулы. Диалоговое окно этого типа применяется в задачах, где требуется отклик пользователя, который нельзя формализовать. К такому виду относятся компьютерная проверка знаний, тестирование или анкетирование. Окно может содержать как много полей ввода, так и одно (в зависимости от решаемой задачи).
Сохранение/открытие файла
Кто хоть раз создавал документ, тот неизбежно сталкивался с окном этого типа. От пользователя требуется выбрать файл из иерархического списка или указать место на диске, куда его следует сохранить. В окне предусмотрена возможность сортировки файлов, представление их в наиболее удобном виде, создание (при необходимости) новой папки.
Очень удобно, что это окно стандартизовано, то есть, разобравшись один раз в том, как с ним работать, вам не придется тратить время на изучение интерфейса в других приложениях. Назначение иконок и кнопок будет аналогичным, вплоть до расположения и внешнего вида.
Диалоговое окно печати документа
В текстовых редакторах всегда присутствует окно, предназначенное для задания параметров печати документа. Помимо настройки вида в нем устанавливаются и параметры принтера. Есть возможность напечатать избранные страницы, задать определенный диапазон, напечатать только четные или нечетные страницы.
При необходимости можно сохранить настройки печати в файл, потом распечатать документ в другом месте, если принтера под рукой не оказалось. Такое богатство возможностей по настройке режима печати в одном окне было бы невозможным без применения вкладок.
Вкладки
Они играют ту же роль, что и меню в стандартных окнах. С их помощью разделы диалогового окна компонуются в логические группы. Это облегчает работу пользователя – ему не приходится многократно открывать разные элементы. За счет этого также упрощается структура основного меню программы. Из диалогового окна можно с помощью кнопок вызвать дополнительные элементы, если опций вкладок будет недостаточно.
Фрейм
Это альтернативный вкладке способ создать раздел в диалоговом окне. Обычно фрейм располагается в левой части окна и содержит список разделов. Выделив такой раздел, пользователь в правой части может работать с его настройками. Количество разделов во фрейме может быть любым. Если они не помещаются в окне, доступ получается с помощью полосы прокрутки.
Также разделы могут быть организованы в виде иерархического списка. Компоновка данных с помощью фреймов позволит, например, представить многостраничную анкету в одном окне.
Раздел в диалоговом окне может быть создан либо через вкладки, либо с помощью фрейма, но не одновременно. На практике вкладки получили большее распространение.
Элементы управления
Коротко скажем о других элементах, которые могут присутствовать:
1. Командные кнопки диалогового окна. Служат для запуска какого-нибудь действия. Это может быть открытие другого окна или выполнение процедуры.
2. Переключатели. Позволяют выбрать один вариант из набора значений.
3. Флажки. С их помощью можно отметить несколько вариантов из предложенных или отказаться от всех.
4. Поле со списком. Содержит данные, собранные в строки. От пользователя требуется выбрать одну из них.
5. Текстовые поля. Предназначены для ввода в них произвольного текста или числовых данных.
6. Ползунок. Позволяет задать числовое значение параметра из заданного диапазона.
7. Счетчик. Служит для выбора целочисленного значения.
8. Полосы прокрутки. Бывают вертикальными и горизонтальными. Применяются, когда часть формы не помещается в окне.
9. Метка. Элемент, отвечающий за надписи на форме.
10. Линии, рамки, рисунки. Это декоративные элементы. Позволяют сгруппировать данные и сделать окно более красочным.
Этим перечнем элементы диалогового окна не исчерпываются, на самом деле их гораздо больше. Существуют также уникальные элементы управления, присущие только определенной программе. Для придания окну необычного вида могут внешне видоизменяться и традиционные элементы. Такое часто встречается в компьютерных играх.
Клавиатурные комбинации
Новичкам знать сочетания клавиш для выполнения определенного действия или переключения между элементами окна необязательно, но лицам, проводящим много времени за компьютером, это поможет сэкономить немало времени.
Дизайн окон
Если внешний вид окон кажется вам слишком будничным, есть несколько способов изменить его. На рабочем столе вызовите контекстное меню и выберите пункт «Свойства». Далее пройдите на вкладку «Оформление». Здесь можно изменить стиль окна, размер шрифта и цветовую гамму.
Нажмите кнопку «Дополнительно», и откроются настройки элементов окон. Во вкладке «Тема» есть готовые шаблоны оформления. Если ни один из них не подойдет, существует множество готовых, выложенных в интернете. Они станут доступными после размещения их в папке Windows. Есть и сторонние программы, которые содержат большие библиотеки тем оформления и обладают расширенными возможностями по настройке вашей системы. На слабой машине подобные украшательства лучше не применять, так как они потребляют много памяти.
Что значит диалоговые окна в манге разных видов
В комиксах редко обходятся без текста. У него есть свои недостатки в плане передачи информации, но для комикса это единственно возможный способ передать речь и звуки. Вроде бы, что может быть проще, чем написать текст на картинке? Но на практике оказывается, что правильное расположение баллонов и текста в них – это не такая уж и простая задача, и даже в профессиональных работах встречаются ошибки. В этой статье я попробую разобрать основные принципы и правила расположения текста на станице комикса.
1. Форма баллона
Существует множество форм баллонов. Главное правило при выборе формы – она должна быть приближена к эллипсу или прямоугольнику, ничего не должно сильно искривляться внутрь, чтобы не мешать восприятию текста. Форма баллона должна способствовать прочтению текста, поэтому не стоит помещать в баллон слишком длинные или слишком короткие фразы.
Чересчур вытянутые по горизонтали баллоны сложны для чтения. Длинные строчки просматривать неудобно, на разбор такого текста уходит больше времени. Более того, смотрится это некрасиво. Однако вытянутые по вертикали баллоны тоже не стоит использовать. Длинные слова неизбежно понадобится переносить, а перенос в репликах комикса – дурной тон. В конце концов, мы пишем по горизонтали, а не по вертикали, так что и блок для слов должен быть горизонтальным.
Идеальное соотношение сторон баллона от 1:1 до 1:3, в таком случае текст в нем читается легко. Это правило работает для текстовых блоков любой формы и размера.
Самая частая форма баллона – эллипс. Он подходит практически к любому стилю рисунка и удобен для вписывания текста. Однако эллипс идеальной формы в некоторых случаях выглядит грубо, поэтому овалы часто заменяют баллонами неправильной формы с закругленными углами. Они рисуются чуть сложнее, но выглядят более «живыми».
Другая частая форма баллона – прямоугольник. Он чаще всего используется для авторской речи, когда нужно указать время или место действия, вставить описание ландшафта или каких-либо событий, происходящих в кадре. Такой баллон не имеет «хвоста». Использовать же прямоугольники с острыми углами для речи персонажей не стоит: это выглядит слишком грубо, только если герой не имеет механического голоса (робот, к примеру). А вот прямоугольники с закругленными углами вполне приемлемы для речи обычных персонажей.
В так называемых альтернативных комиксах, отличающихся скудным разнообразием ракурсов и фонов, возможны случаи, когда баллон «обтекает» текст и персонажей по контуру.
Возможны и нестандартные формы баллонов. Они обычно используются для передачи экспрессии или когда персонаж говорит каким-то особенным голосом. Разберем на конкретных примерах. Баллоны неправильной угловатой формы обычно используются в случае, если персонаж кричит. А «облачка» — если думает.
Механические голоса (голос из телефонной трубки, сообщения по радио, ТВ и прочее) часто выделяют баллонами с резкими контурами или с выделяющимися углами, закрученными по спирали. Иногда делаются угловатыми и их хвосты. Такие баллоны используются для выделения подобных голосов на протяжении всего комикса. Но если в комиксе этого мало, лучше ограничиться стандартной формой баллона, которую вы выбрали для обычной речи.
Возможны баллоны с «растекающимися» контурами. Это позволяет более ярко передать эмоции персонажа (контуры в виде сосулек – холодность, колючек – колкая фраза, слизи – болезнь или омерзение и т.д.). Часто употреблять такие баллоны не стоит, а также рисовать на одной странице несколько баллонов с разными контурами: тогда возможна потеря необходимой эмоциональности. Еще возможны баллоны в форме предмета: камня, домика, надгробья и т.д. – это тоже прием усиления эмоций, который нельзя использовать слишком часто.
Существует вариант оформления авторского текста в виде прямоугольника с «оторванным» краем. Смотрится он достаточно стильно, но только если манера рисунка соответсвует теме комикса. Встречаются баллоны с витиеватыми границами и с границами в виде виньеток. Такие средства следует использовать с осторожностью, чтобы они не отвлекали от рисунка, либо делать их частью остальной графики.
В манге есть свои общепринятые формы баллонов (чаще всего использующиеся в жанре сёдзе, где нет сложных фонов, либо фоны отсутствуют вовсе). Вот несколько самых частых примеров:
Баллон в виде свечения с лучами или белый эллипс, обрамленный расходящимися в разные стороны линиями. Такие баллоны обычно используют в случае, если персонажа посетила какая-то шокирующая мысль или когда кто-то говорит телепатически (голос с неба, слова призрака, таинственный голос в темноте и т.д.) Белый баллон – позитивный, черный – негативный. Для большего усиления эмоций возможно добавление стилизованной молнии, ударяющей в текстовый блок.
Баллон со множеством контуров (воздушный) обычно обозначает какие-то светлые, радостные мысли героя, романтическое настроение, хорошие воспоминания. Еще один вариант «романтического» оформления – замена контуров светящимися кругами разного размера, цветами или кружевом. Такие приёмы манги можно использовать и в комиксе, но стоит помнить, что в этом случае они будут применяться по необходимости, т.е. только в особо эмоциональных сценах.
2. Цвет баллона
Обычно пространство внутри баллонов белое, т.к. читать черный текст на белом фоне проще всего. Но бывают случаи, когда белый цвет сильно отвлекает от рисунка (например, если рисунок очень темный). Эту проблему можно решить несколькими способами. Если комикс черно-белый, зоны для реплик можно покрасить бледно-серым (неприменимо, если вы используете скринтоны для полутонов: текст на скринтоне читать невозможно).
Бывают комиксы, где все баллоны окрашены в какой-то цвет. В этом случае возможно два варианта: либо на каждой странице реплика отдельного героя имеет свой цвет, либо на протяжении всего комикса каждому герою присваивается определённый цвет баллонов (такое оформление использует Оливье Ледруа в комиксе «Реквием: рыцарь вампир»). Второй вариант очень удобен тем, что по одному только цвету баллона можно определить говорящего, и для идентификации персонажа не обязательно изображать его в кадре (например, реплики ведьм зеленые, Дракулы — красные и т.д.).
Часто в американских комиксах только речь автора выделяется цветом или даже градиентной заливкой, а реплики героев остаются белыми. Я бы советовала избегать градиентов: они смотрятся бульварно. Еще вариант – цветная подложка под авторским текстом, слегка смещенная по вертикали и горизонтали.
Еще можно сделать баллоны полупрозрачными. В этом случае видно фоновый рисунок, поэтому нужно быть внимательным: пестрый фон может мешать восприятию текста. Но такие баллоны подойдут далеко не к каждой графике, поэтому используйте их с умом. Уместнее всего они в цветных комиксах, нарисованных на компьютере.
3. Контур баллона
Стандартный баллон представляет собой белую (или цветную) область, ограниченную контуром.
Контур этот не должен быть слишком тонким (так он будет рябить) или слишком толстым (он будет отвлекать от рисунка). Идеальный вариант, когда толщина линии контура баллона равна средней толщине линий контура рисунка.
Есть вариант в виде реплик без контура, но их стоит использовать с осторожностью – фон кадра не должен его перебивать. Также возможны баллоны с нечеткими или размытыми контурами, но в таком случае и сам рисунок должен быть оформлен в соответствующем стиле.
Если персонаж говорит шепотом, то иногда используется баллон с пунктирной границей.
Также у баллона может быть цветной контур, а его фон при этом оставаться белым. Такой прием иногда используется в цветной манге, где под цвет контура даже красится текст в баллоне, который соответствует конкретному персонажу.
4. Хвосты баллонов
Хвост баллона играет важную роль: он обозначает, кому принадлежит реплика. Главное правило при рисовании хвоста – он должен указывать в направлении рта говорящего, немного не доходя до головы персонажа. Это особенно важно, когда на странице много героев или нарисован детальный фон. Если хвост будет указывать на затылок персонажа, то в большинстве случаев это означает его мысли.
Формы хвостов также разнообразны, как и формы баллонов. Но не стоит их делать просто прямыми, это смотрится ужасно. Самый распространенный вариант – дуга, оканчивающаяся острым углом. Сама дуга может быть разной степени искривления в зависимости от содержания кадра или стиля художника.
К примеру, если в комиксе вдруг встречается сильно искривленный хвост, то создается ощущение, что персонаж говорит «витиевато», но если такие хвосты используются для всех реплик, то они воспринимаются уже как стиль художника (а еще искривленными дугами удобно заполнять пустой фон).
В случае, если персонаж говорит резко или кричит, дугу можно заменить резкой угловатой линией. Степень изломанности хвоста также зависит от стиля художника.
Если персонаж думает, то хвост часто рисуется в виде кружков.
Длина и расположение хвоста тоже важны. Хвост не должен перекрывать важных частей рисунка, но при этом должен указывать на рот персонажа. Лучше изогнуть дугу причудливым образом, нежели упереть ее в спину героя.
В манге обычно делают очень короткие хвостики, приблизительно указывающие в сторону говорящего. Часто хвост вообще отсутствует, если герой в кадре один или по контексту и так понятно, кому принадлежит реплика. Это обусловлено тем, что в такой манге просто нет фонов, либо они достаточно простые и не мешают определить говорящего. Если же изображен сложный фон, то хвосты обычно удлиняются, как и в комиксе.
Если одну фразу произносит сразу несколько героев, то от одного баллона идет множесто хвостов – каждому персонажу свой.
Первая публикация: muha. Текст в комиксе // Ruscomix magazine. – № 3. – 2012. С. 20-33.
Использование модальных окон в пользовательских интерфейсах
Многие дизайнеры в процессе создания цифровых продуктов основываются на свои чувства. Несмотря на то, что в некоторых случаях это полезно, существуют проверенные общие стандарты, которые помогают логически обоснованно создавать решения пользовательского интерфейса вместо того, чтобы полагаться на интуицию.
В этой статье мы постараемся изучить общий стандарт модальности в пользовательских интерфейсах, и обсудить причину, по которой существуют лишь два основных типа экранов, а также проанализировать, как приложения и веб-сайты терпят неудачу при преобразовании информационных архитектур и пользовательских потоков в интуитивно понятные пользовательские интерфейсы.
Начнем это исследование со следующего смелого утверждения:
Существует два типа экранов:
Что такое «модальный экран»?
Модальные экраны можно обнаружить в различных его формах и представлениях, например одним из ниже перечисленных в списке:
«Модальное окно создает режим, который отключает главное окно, но сохраняет его видимым с модальным окном в виде дочернего окна перед ним. Пользователи должны повзаимодействовать с модальным окном, прежде чем они смогут вернуться в родительское приложение» — Википедия
Большинство модальных окон, особенно в настольных приложениях, можно легко идентифицировать, поскольку они визуально перекрывают главное окно. Это верно для всплывающих окон, которые исчезают из основного окна в фоновом режиме, всплывающих меню и диалоговых окон, всплывающих лайтбоксов, оповещений и т.п.
Однако использование модального окна на мобильных устройствах ограничено, так как многие модальные экраны на мобильных устройствах занимают весь экран устройства. Они больше не держат основное окно видимым пользователю, и, следовательно, их труднее отличить от немодальных окон:
Пример iOS: модальные окна на мобильных устройствах часто полностью скрывают главное окно приложения.
Основное различие заключается в способе взаимодействия с каждым из окон. В то время как немодальный экран позволяет пользователям вернуться к родительскому экрану, модальный экран требует, чтобы пользователи завершили определённое действие, прежде чем вернуться в главное окно (такое как нажатие кнопки «Сохранить» в нашем примере) или отменить текущее действие, вызвавшее модальное окно.
Наиболее ярким визуальным индикатором для немодальных окон является навигация (панель вкладок в нашем примере). Немодальные экраны позволяют пользователям переходить назад и вперед на основном уровне навигации приложения.
Модальный же экран требует, чтобы пользователи закрывали окно, прежде чем они снова смогут использовать основную навигацию приложения (Кнопки «Сохранить» или «Отмена» в нашем примере).
Почему следует использовать модальность?
«Модальность создает фокусировку, не давая людям заниматься другими делами, прежде чем они не завершат задачу или не отклонят вызванное в модальном окне представление» — Apple
Когда следует использовать модальность?
Теперь, когда мы знаем, как выглядит модальный экран. Как же сравнить его с немодальным экраном и какова его цель? Прежде всего мы должны спросить себя: «В какой ситуации мы должны его использовать?»
Давайте представим, что мы создаем «гениальный и инновационный» стартап под названием «Purrrfect». Это база данных котят, которая позволяет пользователям загружать, просматривать и комментировать GIF-изображения милых котяток.
Упрощенный пользовательский поток нашего приложения может выглядеть следующим образом: пользователь открывает приложение и входит в одну из нескольких доступных вкладок (наша база данных о котятах), затем нажимает на одного из котят (входит в подробное представление одного котёнка) и затем нажимает на раздел комментариев (входит в раздел комментариев представления котёнка).
Пользовательский поток приложения «Purrrfect»
Кроме того, пользователь может выполнять дополнительные действия на каждом из этапов. Например, он может добавить другого котёнка в базу данных на экране списка котят. Или он может редактировать данные на экране подробностей котенка.
А теперь надо понять, какой из этих экранов является модальным, а какой нет? Классификация в данном случае вызывает сложность, но вот моё личное эмпирическое правило:
Используйте модальные экраны для автономных процессов, а немодальные экраны для всего остального.
«Автономный процесс» — это конкретное действие, которое имеет четкую начальную и конечную точку в процессе.
В течение ограниченного периода времени этого действия он выводит пользователя из общего потока пользователя, позволяя ему сосредоточиться на действии и затем возвращает его в ту точку потока, откуда он начал это действие.
Google формулирует это правило следующим образом:
Используйте модальные экраны (диалоги) для отображения «критической информации, которая требует конкретной пользовательской задачи, её решения или подтверждения» — Google
В случае нашего приложения «Purrrfect» это означает, что основной поток пользователя (используемый для исследования приложения) не является модальным. Однако специальные ограниченные по времени действия, такие как добавление котят, редактирование котят и написание комментариев, являются модальными.
Все модальные действия могут быть отменены либо успешно завершены, прежде чем пользователь вернется в основной поток. По этой причине модальные экраны используют кнопки «Отмена» и «Сохранить» (или другие подобные подтверждения действия) вместо кнопки «Назад». Если ваша кнопка «Назад» одновременно запускает действие сохранения на немодальном экране, вы можете рассмотреть возможность перехода на модальный экран, добавив кнопки «Отмена» и «Сохранить».
Однако верно и следующее утверждение: если два разных действия, таких как «Отмена» и «Сохранить», не имеют смысла на вашем модальном экране (потому что они вызовут одно и то же действие), вы можете переключиться на немодальное представление. В этом случае основная навигация (например, панель вкладок) также должна оставаться видимой на экране.
Давайте вернемся к нашему приложению. Возможный интерфейс для «Purrrfect» может выглядеть так:
Пользовательский интерфейс «Purrrfect»
В реальном мире различие между модальными и немодальными экранами зачастую менее очевидно. Например, полноэкранный вид изображения является модальным в большинстве приложений, хотя это не процесс или диалог. Модальный экран может также иметь смысл в других особых ситуациях, когда нужно генерировать фокус пользователя на определенном блоке информации. Если бы наш подробный экран котёнка (в центре) был конечной точкой без других действий, таких как редактирование или комментарии, мы могли бы использовать модальность (полноэкранный просмотр). Но так как он позволяет пользователям глубже переходить по информационной архитектуре и выполнять различные дополнительные действия (показывать комментарии, редактировать и т.п.), у него больше нет чёткой конечной точки, и поэтому он является частью основного потока. Следовательно, это немодальное представление.
Разработчик обязан оценить, является ли действие автономным или частью общего процесса потока приложения, и решить, делать экран модальным или нет. В случае возникновения сомнений, вспоминайте эту цитату:
Минимизируйте использование модальности. Как правило, люди предпочитают взаимодействовать с приложениями нелинейными способами. Рассматривайте возможность создания модального контекста только в тех случаях, когда важно привлечь чье-либо внимание, когда задача должна быть завершена или прекращена, чтобы продолжить использование приложения или сохранить важные данные. — Apple
Конечно, интерфейс может прекрасно работать без строгого различия между модальным и немодальным представлениями. Тем не менее, концепция модальности глубоко заложена в интерфейсных экосистемах Apple, Google, Microsoft и других компаний, которые разработали соответствующие ожидания для своих постоянных пользователей.
Как следует использовать модальность?
К настоящему времени надеюсь что возникло общее понимание того, когда использовать модальность. Остается только один вопрос: «Как мы спроектируем модальность?». Вот быстрый чеклист для использования модальных экранов:
Многоступенчатые модальные окна
Все становится сложнее, как только модальное диалоговое окно состоит из нескольких шагов или дочерних экранов. По умолчанию, кнопка продолжения действия отображается в правом верхнем углу. Экран второго шага не откроет новый модальный экран, но вместо этого остается внутри первого модального экрана и отображается как немодальный дочерний экран (так как не имеет возможности быть отменённым) существующего модального наложения в виде первого шага модального окна.
При размещении основного действия («сохранить», «применить» или «продолжить») в нижней части экрана (как было рекомендовано ранее) в верхней правой области второго шага модального блока всегда освобождается место для дополнительной кнопки отмены. Хотя перемещение выглядит более логичным слева направо, это размещение все же лучше для модального окна, чем отсутствие возможности закрывать модальный экран на дочерних (предшествующих) экранах.