Компонент и контейнер
Основное понятие графического интерфейса пользователя (ГИП) — компонент (component) графической системы. В русском языке это слово подразумевает просто составную часть, элемент чего-нибудь, но в графическом интерфейсе это понятие гораздо конкретнее. Оно означает отдельный, полностью определенный элемент, который можно использовать в графическом интерфейсе независимо от других элементов. Например, это поле ввода, кнопка, строка меню, полоса прокрутки, радиокнопка. Само окно приложения — тоже его компонент. Компоненты могут быть и невидимыми, например, панель, объединяющая компоненты, тоже является компонентом.
Вы не удивитесь, узнав, что в AWT компонентом считается объект класса Component или объект всякого класса, расширяющего класс component. В классе component собраны общие методы работы с любым компонентом графического интерфейса пользователя. Этот класс — центр библиотеки AWT.
Каждый компонент перед выводом на экран помещается в контейнер (container). Контейнер "знает", как разместить компоненты на экране. Разумеется, в языке Java контейнер — это объект класса Container или всякого его расширения. Прямой наследник этого класса — класс jcomponent — вершина иерархии многих классов библиотеки Swing.
Создав компонент — объект класса Component или его расширения, следует добавить его к предварительно созданному объекту класса container или его расширения одним из методов add ().
Класс Container сам является невидимым компонентом, он расширяет класс Component. Таким образом, в контейнер наряду с компонентами можно помещать контейнеры, в которых находятся какие-то другие компоненты, достигая тем самым большой гибкости расположения компонентов.
Основное окно приложения, активно взаимодействующее с операционной системой, необходимо построить по правилам графической системы. Оно должно перемещаться по экрану, изменять размеры, реагировать на дейст-
вия мыши и клавиатуры. В окне должны быть, как минимум, следующие стандартные компоненты.
Строка заголовка (title bar), с левой стороны которой необходимо разместить кнопку контекстного меню, а с правой — кнопки сворачивания и разворачивания окна и кнопку закрытия приложения.
Необязательная строка меню (menu bar) с выпадающими пунктами меню.
Горизонтальная и вертикальная полосы прокрутки (scrollbars).
Окно должно быть окружено рамкой (border), реагирующей на действия мыши.
Окно с этими компонентами в готовом виде описано в классе Frame. Чтобы создать окно, достаточно сделать свой класс расширением класса Frame, как показано в листинге 8.1. Всего восемь строк текста и окно готово.
Листинг 8.1. Слишком простое окно приложения
import j ava.awt.*;
class TooSimpleFrame extends Frame{
public static void main(String[] args){
Frame fr = new TooSimpleFrame();
fr.setSize(400, 150);
fr.setVisible(true);
}
}
Класс TooSimpleFrame обладает всеми свойствами класса Frame, являясь его расширением. В нем создается экземпляр окна fr, и устанавливаются размеры окна на экране— 400x150 пикселов— методом setsizeo. Если не задать размер окна, то на экране появится окно минимального размера — только строка заголовка. Конечно, потом его можно растянуть с помощью мыши до любого размера.
Затем окно выводится на экран методом setvisibie(true). Дело в том, что, с точки зрения библиотеки AWT, создать окно значит выделить область оперативной памяти, заполненную нужными пикселами, а вывести содержимое этой области на экран — уже другая задача, которую и решает метод
setVisible(true).
Конечно, такое окно непригодно для работы. Не говоря уже о том, что у него нет заголовка и поэтому окно нельзя закрыть. Хотя его можно перемещать по экрану, менять размеры, сворачивать на панель задач и раскрывать, но команду завершения приложения мы не запрограммировали. Окно нельзя закрыть ни щелчком кнопки мыши на кнопке с крестиком в правом верхнем углу окна, ни комбинацией клавиш <Alt>+<F4>. Приходится за вершать работу приложения средствами операционной системы, например, комбинацией клавиш <Ctrl>+<C>.
В листинге 8.2 к программе листинга 8.1 добавлены заголовок окна и обращение к методу, позволяющему завершить приложение.
10 основных принципов создания интерфейса пользователя 1 Год, 11 мес. назад |
Репутация: 1 |
Ни для кого не секрет, что по-настоящему толковые интерфейсы пользователя (UI) создавались с желанием выйти за рамки обыденного. «Выход за рамки обыденного» - это вовсе не стремление сбить с толку пользователя. Напротив, при помощи хороших UI пользователь сможет достичь поставленных целей. В результате – снижение расходов на обучение и техподержку, и мы видим счастливых, довольных и весьма заинтересованных пользователей. Если вы собрались создавать новый интерфейс, не забудьте об этих принципах… Прим. редактора: Вы сможете узнать больше о разработке дизайна интерфейса пользователя, если ознакомитесь с докладом Кайла на нью-йоркской конференции «Будущее веб-дизайна». 1. Познакомьтесь с пользователем! “Больше думайте о потребителе. Если вы не знаете, о чем беспокоиться больше – о конкурентах или о потребителях, всегда выбирайте потребителя. Начинайте вместе с потребителями и работайте дальше!» - Джефф Безос Цели вашего пользователя – это ваши цели, поэтому изучите их. Попытайтесь перефразировать эти цели, повторяйте их про себя. Узнайте о навыках и опыте ваших пользователей, поймите, что именно им нужно. Выясните, какие интерфейсы им нравятся больше всего, сядьте и понаблюдайте, как именно пользователи работают с интерфейсом. Не увлекайтесь подражанием самым модным дизайнам и добавлением разных примочек. Прежде всего, сосредоточьтесь на пользователях, и тогда вы сможете создать именно тот интерфейс, который поможет им достичь желаемых целей. 2. Обращайте внимание на шаблоны Большую часть своего времени пользователи работают с другими интерфейсами (Facebook, MySpace, Blogger, блоги, сайт банка, сайт школы или университета, новостные сайты и т.д.). Именно поэтому не стоит изобретать велосипед. Возможно, те проблемы, которые возникают у пользователя при работе с вашим интерфейсом, там уже решены. Используя уже готовые шаблоны UI, вы можете создать для своих пользователей ощущение уюта. На сайте CoTweet используется хорошо известный шаблон интерфейса, взятый из почтовых приложений. 3. Будьте последовательны “Чем больше ожиданий пользователей будет оправдано, тем сильнее они будут уверены в том, что смогут разобраться в системе и тем больше она будет им нравиться» - Джейкоб Нильсон Вашим пользователям необходима согласованность. Они хотят быть уверены в том, что если они научатся делать какую-то операцию, то всегда смогут ее воспроизвести. Как минимум, язык, разметка и дизайн интерфейса должны быть логически согласованы. Эта согласованность поможет пользователю понять, как работают элементы интерфейса, и таким образом эффективность работы возрастет. 4. Используйте визуальную иерархию “Дизайнеры могут сделать из хаоса норму, они могут легко донести идею с помощью организации и расположения слов и изображений» - Джеффри Вин, Искусство и наука веб-дизайна Создайте дизайн интерфейса так, чтобы пользователь без труда сосредоточился на самом важном. Размер, цвет и расположение каждого элемента будут оказывать совместное влияние и облегчать понимание работы вашего интерфейса. Простая и четкая иерархия развеет кажущуюся сложность (даже если выполняемые действия на самом деле будут сложными). 5. Подумайте об обратной связи Когда пользователь совершает какое-то действие – правильное, неправильное или непонятное – интерфейс должен сообщать ему об этом. Нужно всегда уведомлять пользователя о произведенных операциях, изменениях текущего состояния, ошибках или исключениях. О том, привели ли действия пользователя к желаемому результату, могут рассказать визуальные или текстовые сообщения. В интерфейсе BantamLive для всех действий существуют линейки-индикаторы степени выполнения. 6. Не будьте слишком требовательны Как бы ни совершенен был ваш дизайн, люди все равно будут делать ошибки. Ваш UI должен быть создан с учетом возможных ошибок пользователей. Нужно создать интерфейс так, чтобы пользователи могли отменять неправильные действия и вводить данные несколькими способами (никому не хочется начинать заново работу из-за одной неправильно введенной даты). Поэтому, даже если пользователь допустил какую-то ошибку, проинформируйте его об этом и укажите то место, где он ошибся. Удостоверьтесь, что пользователь теперь знает, как бороться с такой ошибкой и сможет избежать ее в следующий раз. Прекрасный пример приведет в разделе «Как увеличить количество регистраций, используя простые капчи» 7. Доверьтесь пользователю! Как только пользователь смог разобраться в вашем интерфейсе, воздайте ему должное и уберите обучающий элемент из программы. Теперь разделение сложной задачи на последовательность легких для него будет выглядеть ненужной и тягостной операцией. Остановитесь на более абстрактных вещах, необходимых пользователю для выполнения его задач, например, на сочетаниях горячих клавиш и отойдите от проблем дизайна. 8. Говорите с пользователем на его языке. “Даже если вы поработали над каждым пикселем, каждой иконкой и даже над выбором шрифта – все равно отнеситесь серьезно к каждому письму пользователя» – Getting Real Для любого интерфейса нужно написать хороший текст. Постарайтесь все объяснить доступно, не полагайтесь на интуицию других. Каждому действию дайте понятное название, постарайтесь, чтобы ваши советы были простыми. Это понравится вашим пользователям – ведь они хотят услышать не вас, а самих себя и себе подобных. 9. Помните о простоте “Парадокс современности заключается в том, что гораздо проще создать сложный интерфейс, поскольку очень сложно сделать его простым», - Пер Альмквист Самый лучший дизайн интерфейса – незаметный. Он не содержит никаких финтифлюшек или ненужных элементов. Как только вам захотелось добавить в интерфейс какую-нибудь новую примочку или новый элемент, спросите себя: «А пользователю это и вправду нужно?» или «Для чего пользователю понадобится эта анимация»? Может быть, вы добавляете эти элементы, потому что они понравились вам самим? Не допускайте того, чтобы ваши личные вкусы затмевали целесообразность интерфейса. 10. Продолжайте развиваться Дедушка: Если бы я опускал руки после каждой неудачи, то никогда бы не изобрел свои огнеупорные штаны! [Штаны сгорают и все видят нижнее белье] Grandpa Bud: Они немного странно работают! Из фильма «В гости к Робинсонам» (Meet the Robinsons) «В гости к Робинсонам» - один из моих самых любимых фильмов. В течение всего фильма главный герой Льюис стремится «двигаться вперед». Это главное в дизайне интерфейсов пользователя! Часто говорят, что для того, чтобы создавать интерфейсы, нужно уметь падать и подниматься. Вы будете делать ошибки в любом случае! Нужно просто продолжать развиваться и не забывать о том, что ваши личные предпочтения при создании UI – не самое главное. |
|