Руководство по созданию интерфейсов - Insto.top - инструкции по эксплуатации и многое другое

Время на прочтение
21 мин

Количество просмотров 13K

Оглавление

Введение

Инициализация приложений Prism

Управление зависимостями между компонентами

Разработка модульных приложений

Реализация паттерна MVVM

Продвинутые сценарии MVVM

Создание пользовательского интерфейса

Рекомендации по разработке пользовательского интерфейса

Навигация

Навигация на основе представлений (View-Based Navigation)

Взаимодействие между слабо связанными компонентами

Руководство по созданию удобных для проектирования представлений

Следующие пункты являются характеристиками удобных для проектирования представлений (также известных, как blendable, или tool-able):

Их можно эффективно редактировать, используя дизайнеры в Visual Studio, или Expression Blend.
Можно использовать различные инструменты, такие как построитель выражений привязки.
Они предоставляют выборочные данные для отображения во время проектирования.
Они позволяют коду выполняться во время проектирования без генерирования необработанных исключений.

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

Действия поверхности проектирования:
- Создание объектов
- Загрузка объектов
- Установка значений свойств
- Обработка событий поверхности проектирования
- Использование элемента управления в качестве корневого элемента
- Помещение одного элемента управления внутрь другого
- Открытие, закрытие и перезагрузка XAML файла
- Перекомпиляция проекта
- Перезагрузка дизайнера
Действия построителя выражений привязки:
- Обнаружение DataContext
- Перечисление доступных источников данных
- Перечисление свойств типа источника данных
Действия выборочных данных времени проектирования:
- Использование элементов управления на поверхности проектирования для корректного отображения выборочных данных

Создание кода для исполнения во время проектирования

Для удобства использования дизайнера, Visual Studio и Expression Blend создают объекты и выполняют код во время проектирования. Однако, null reference исключения, вызванные кодом, который пытается обратиться к объектам до их создания, могут вызвать большое количество ошибок загрузки и излишних исключений во время проектирования.

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

Избегайте этого в вашем коде	Visual Studio 2010	Blend 4
Запуск нескольких потоков во время проектирования. К примеру, создание и старт `Timer` в конструкторе, или в событии `Loaded`.
Использование элементов управления, которые могут стать причиной переполнения стека во время проектирования, или которые будут рекурсивно загружать сами себя.
Генерация null reference исключения в конвертере, или в селекторе шаблона данных.
Генерация null reference исключения, или любого другого исключения в конструкторе. Это может быть вызвано: Использование кода, который производит вызовы в бизнес-слой, или слой данных приложения, для получения данных из базы данных, или через сеть, во время проектирования. Попытки разрешить зависимости при использовании контейнера перед запуском загрузчика или кода инициализации контейнера.
Генерация null reference исключения, или любого другого исключения внутри события `Loaded` элемента управления. Это может случиться, когда вы делаете предположение о состоянии элемента управления, которое может быть верно, во время выполнения, но не выполняться во время проектирования.
Попытки получить доступ к объекту `Application`, или `Application.Current` во время проектирования.
Использования `StaticResource` в WPF `UserControls`.
Создание очень больших проектов.

Обработка проблем в коде, возникающих во время проектирования

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

Когда ваше приложение начинает выполняться после запуска, выполняется код в App.xaml.cs. Если там располагается какой-либо код, от которого зависит ваше приложение, то он не будет выполнен во время проектирования. Если вы не будете ожидать, то обязательно возникнут нежелательные исключения. Для устранения этого:

Никогда не предполагайте, что объект будет создан во время проектирования. В коде, который может быть выполнен во время проектирования, всегда проводите проверку на null, перед работой с объектом.
Если ваш код работает с объектом Application, или Application.Current, проверяйте их перед этим на null.
Если код в вашем конструкторе, или в событии Loaded обращается к базе данных, или к сетевому сервису, рассмотрите следующие варианты:
- Перед вызовом кода, проверьте, не выполняется ли он в дизайнере, обратившись к следующему методу:
  - WPF: DesignerProperties.GetIsInDesignMode
  - Silverlight: DesignerProperties.IsInDesignTool
- Вместо того, чтобы запускать код непосредственно в конструкторе, или в обработчике события Loaded, абстрагируйте его за вызовом метода через интерфейс, после чего вы можете применить одну из множества техник использования разных реализаций во время выполнения, дизайна и тестов.

Определение того, что код исполняется во время проектирования

И Expression Blend, и Visual Studio используют макет корневого объекта, отображаемый в панели дизайнера. Это необходимо для предоставления дизайнером нужных функций. Так как корневой объект поддельный, его конструктор и событие Loaded не вызываются во время проектирования. Однако оставшиеся элементы управления на сцене, конструируются нормально, и их событие Loaded вызывается так же, как во время выполнения.

На следующей иллюстрации, конструктор корневого элемента Windows, и его событие Loaded не вызываются, а у дочернего элемента — вызываются.

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

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

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

Свойства времени проектирования

Встроенные свойства времени проектирования с префиксом «d:» дают простой способ повышения продуктивности во время проектирования.

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

Следующие разделы описывают, как использовать свойство d:DataContext и расширение разметки d:DesignInstance.

«d:» в предыдущем параграфе является псевдонимом пространства имён, в котором располагаются средства времени проектирования. Следующие статьи более подробно раскрывают «d:» свойства и расширения разметки:

«Design-Time Attributes in the WPF Designer»
«Design-Time Attributes in the Silverlight Designer»

«d:» свойства и расширения разметки не могут быть созданы, или использованы в пользовательском коде, они могут быть применены только в XAML. Они также не компилируются в ваше приложение, они используются только инструментами в Visual Studio и Expression Blend.

Свойство d:DataContext

d:DataContext задаёт контекст данных времени выполнения для элемента управления и его потомков. При задании d:DataContext вы должны всегда предоставлять данные того же типа для контекста данных DataContext во время выполнения.

Если для элемента управления заданы и DataContext, и a d:DataContext, то средства дизайна выберут d:DataContext.

Расширение разметки d:DesignInstance

Если вы не знаете, что такое расширения разметки, советую ознакомиться со статьёй в MSDN «Markup Extensions and WPF XAML».

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

Свойство расширения разметки	Описание
`Type`	Имя типа. Тип является параметром конструктора.
`IsDesignTimeCreatable`	Определяет, будет ли экземпляр этого типа создаваться. Если задано `false`, то будет создан псевдотип, а не реальный. Значение по умолчанию — false.
`CreateList`	Если true, то возвращает обобщённый список с элементами данного типа. Значение по умолчанию — `false`.

Типичные сценарии использования d:DataContext

Следующие примеры кода показывают повторяющийся шаблон для связи представлений с моделями представления.

PersonView имеет зависимость от PersonViewModel, разрешаемую во время выполнения. Хотя модель представленная в примере является намеренно упрощённой, в реальных приложениях она будет иметь зависимости, обычно инжектируемые в конструктор.

При создании PersonView, его зависимость PersonViewModel будет создана и разрешена через контейнер.

Заметка.
Если модель представления не имеет каких-либо зависимостей, она может быть создана полностью в XAML. При этом установка DataContext и d:DataContext не требуется.

PersonViewModel.cs

[Export]
public class PersonViewModel {

 public String FirstName { get; set; }
 public String LasName { get; set; }

}

PersonView.xaml.cs

[Export]
public partial class PersonView : UserControl {
 public PersonView() {
  InitializeComponent();
 }

 [Import]
 public PersonViewModel ViewModel {
  get { return this.DataContext as PersonViewModel; }
  set { this.DataContext = value; }
 }
}

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

В следующем XAML вы можете увидеть расширение разметки d:DesignInstance, используемое на элементе Grid, которое возвращает псевдоэкземпляр PersonViewModel, в который устанавливается свойство d:DataContext. В результате, дочерние элементы в Grid унаследуют значение d:DataContext, что позволяет использовать средства проектирования для обзора свойств и типов в контексте данных, что сильно облегчает работу дизайнера и программиста.

PersonView.xaml

<UserControl 
 xmlns:local="clr-namespace:WpfApplication1"
 x:Class="WpfApplication1.PersonView"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
 mc:Ignorable="d" 
 d:DesignHeight="300" d:DesignWidth="300">

 <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="10" Padding="10">

  <Grid d:DataContext="{d:DesignInstance local:PersonViewModel}">
   <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
   </Grid.RowDefinitions>
   <Grid.ColumnDefinitions>
    <ColumnDefinition Width="100" />
    <ColumnDefinition Width="Auto" />
   </Grid.ColumnDefinitions>

   <Label Grid.Column="0" Grid.Row="0" Content="First Name" />
   <Label Grid.Column="0" Grid.Row="1" Content="Las Name" />

   <TextBox 
    Grid.Column="1" Grid.Row="0" Width="150" MaxLength="50" 
    HorizontalAlignment="Left" VerticalAlignment="Top"
    Text="{Binding Path=FirstName, Mode=TwoWay}" />
   <TextBox 
    Grid.Column="1" Grid.Row="1" Width="150" MaxLength="50" 
    HorizontalAlignment="Left" VerticalAlignment="Top"
    Text="{Binding Path=LasName, Mode=TwoWay}" />

  </Grid>
 </Border>
</UserControl>

Заметка: Присоединённые свойства и решение с ViewModel Locator.
Существует несколько альтернативных техник для связи представления с моделью представления, используемых в сообществе разработчиков. Существенной проблемой является то, что решение, прекрасно работающее во время выполнения, отказывается нормально работать во время проектирования. Одно из таких решений заключается в использовании присоединенного свойства и локатора моделей представлений для присвоения DataContext. Локатор моделей представлений необходим для того, чтобы модели представления могли быть созданы, а их зависимости разрешены.

Проблемой такого решения является то, что вы должны также задавать комбинацию d:DataContext – d:DesignInstance, так как визуальный дизайнер не может работать с присоединёнными свойствами так же, как с d:DesignInstance.

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

Руководство по созданию выборочных данных времени проектирования

Команда дизайнеров WPF и Silverlight опубликовала углубленную статью, в которой описывается использование выборочных данных в WPF и Silverlight проектах. Статья доступна на MSDN: «Sample Data in the WPF and Silverlight Designer».

Использование выборочных данных (Design-Time Sample Data)

Выборочные данные становятся особенно важными при использовании средств визуального проектирования, таких как Expression Blend, или Visual Studio. Представления могут быть наполнены данными и изображениями, что сильно упрощает работу дизайнера и делает его продуктивнее.

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

Источники выборочных данных

Вы можете получить выборочные данных из следующих источников:

Expression Blend XML sample data
Expression Blend 4 и Visual Studio 2010 XAML sample data
XAML ресурсы
Код

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

Expression Blend XML Sample Data

Expression Blend даёт возможность быстрого создания схемы XML и наполнения соответствующего XML файла данными. Это производится без добавления каких-либо посторонних проектов в решение.

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

Хотя большая часть выборочных данных доступна как в Expression Blend, так и в Visual Studio 2010 дизайнере, выборочные XML данные являются особенностью Expression Blend и не отображаются в дизайнере Visual Studio 2010.

Заметка.
Файл выборочных XML данных не компилируется и не добавляется в сборку. Однако XML схема компилируется в итоговую сборку.

Expression Blend 4 и Visual Studio 2010 XAML Sample Data

Начиная с Expression Blend 4 и Visual Studio 2010, было добавлено расширение разметки d:DesignData, которое позволяет загружать выборочные данные во время проектирования.

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

У d:DesignData есть свойство Source, которое принимает URI на XAML файл с выборочными данными, расположенный в проекте. Расширение разметки d:DesignData загружает этот файл, разбирает его и возвращает объектный граф. Он может быть использован свойством d:DataContext, свойством CollectionViewSource d:DesignSource, или свойством DomainDataSource d:DesignData.

Одной из проблем, решаемых расширением d:DesignData, является то, что оно может создавать выборочные данные для пользовательских типов, которые невозможно создать. Для примера, в WCF RIA приложении, объекты-сущности служб не могут быть созданы в коде. В дополнении к этому, у разработчиков могут иметься свои собственные несоздаваемые типы, для которых всё равно хотелось быть создать выборочные данные.

Вы можете менять то, как d:DesignData обрабатывает ваши выборочные данные, посредством установки свойства Build Action у файла с данными в Solution Explorer, как показано ниже:

Build Action = DesignData – будут созданы псевдотипы
Build Action = DesignDataWithDesignTimeCreatableTypes – будут созданы реальные типы

Когда для создания выборочных данных используется Expression Blend, он создаёт XAML файл с Build Action уже установленным в DesignData. Если вам требуются реальные типы, откройте решение в Visual Studio и измените Build Action для файла с данными на DesignDataWithDesignTimeCreatableTypes.

Заметка.
На следующей иллюстрации, свойство Custom Tool пусто. Это необходимо для корректной работы выборочных данных. По умолчанию, Expression Blend корректно оставляет это свойство пустым.

Когда вы создаёте выборочные данные в Visual Studio 2010, вы обычно добавляете новую библиотеку ресурсов, после чего её редактируете. В этом случае, вы должны задать Build Action и очистить свойство Custom Tool.

Expression Blend предоставляет средства для быстрого создания и привязки выборочных XAML данных. Эти данные также могут быть использованы в дизайнере Visual Studio 2010, как показано на иллюстрации ниже.

Задание выборочных данных в Expression Blend 4

После создания выборочных данных, они появятся в панели данных, как показано ниже.

Панель данных.

После этого, вы можете перетащить их на корневой элемент представления, такой как UserControl, что должным образом установит его d:DataContext свойство. Вы также можете перетащить коллекцию выборочных данных на ItemsControl, после чего Blend создаст привязку к этим данным.

Заметка.
Выборочные XAML данные не компилируются и не включаются в итоговую сборку.

XAML ресурсы

Вы можете создать ресурс в XAML, где создаётся желаемый тип, после чего привязать его к DataContext, или к списку.

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

Код

Если вы предпочитаете создавать выборочные данные в коде, вы можете написать класс, которые имеет свойства и методы, возвращающие выборочные данные. Для примера, вы можете написать класс Customers, который в стандартном беспараметрическом конструкторе заполняет себя экземплярами класса Customer, заполненных требуемыми данными.

Одним из способа потребления таких данных, является использование связки d:DataContext — d:DesignInstance, установив свойство d:DesignInstance.IsDesignTimeCreatable в true, для того, чтобы код был выполнен во время проектирования. Если не установить это свойство, то будет создан псевдотип, и во время проектирования будут доступны только данные о типе.

Следующий XAML демонстрирует создание экземпляра класса Customers и установку его как d:DataContext. Дочерние к Grid элементы управления после этого могут использовать выборочные данные, предоставленные классом Customers.

<Grid d:DataContext="{d:DesignInstance local:Customers, IsDesignTimeCreatable=True}">

Ключевые решения при создании разметки пользовательского интерфейса

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

Эти решения следующие:

Определите поток приложения и задайте регионы в соответствии с ним.
Определите, какой тип представлений будет загружен в каждый используемый регион.
Решите, будете ли вы использовать Region Navigation APIs.
Решите, какие паттерны вы будете использовать при создании пользовательского интерфейса (MVVM, presentation model, или другие).
Определите стратегию создания выборочных данных.

Дополнительная информация

Для получения дополнительной информации о расширении Prism Library, смотрите «Extending Prism.»

Для получения дополнительной информации о командах, смотрите «Commands» в части 5, «Implementing the MVVM Pattern.»

Для получения дополнительной информации о привязке данных, смотрите «Data Binding» в части 5, «Implementing the MVVM Pattern.»

Для получения дополнительной информации о навигации регионов, смотрите часть 8, «Navigation.»

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

«Dependency Properties Overview» on MSDN:
http://msdn.microsoft.com/en-us/library/ms752914.aspx.
Data binding; see:
- «Data Binding Overview» on MSDN:
  http://msdn.microsoft.com/en-us/library/ms742521.aspx.
- «Data Binding in WPF» in MSDN Magazine:
  http://msdn.microsoft.com/en-us/magazine/cc163299.aspx.
«Data Templating Overview» on MSDN:
http://msdn.microsoft.com/en-us/library/ms742521.aspx.
«Resources Overview» on MSDN:
http://msdn.microsoft.com/en-us/library/ms750613.aspx.
«UserControl Class» on MSDN:
http://msdn.microsoft.com/en-us/library/system.windows.forms.usercontrol.aspx.
«VisualStateManager Class» on MSDN:
http://msdn.microsoft.com/en-us/library/cc626338(v=VS.95).aspx.
«Customizing Controls For Windows Presentation Foundation» in MSDN Magazine:
http://msdn.microsoft.com/en-us/magazine/cc163421.aspx.
«ComponentResourceKey Markup Extension» MSDN topic:
http://msdn.microsoft.com/en-us/library/ms753186.aspx.
«Design-Time Attributes in the WPF Designer» on MSDN:
http://msdn.microsoft.com/en-us/library/ee839627.aspx.
«Design-Time Attributes in the Silverlight Designer» on MSDN:
http://msdn.microsoft.com/en-us/library/ff602277(VS.95).aspx.
«Markup Extensions and WPF XAML» on MSDN:
http://msdn.microsoft.com/en-us/library/ms747254.aspx.
«Using Custom Fonts in Silverlight»:
http://silverlight.net/learn/learnvideo.aspx?video=69800.
«Sample Data in the WPF and Silverlight Designer» on MSDN:
http://blogs.msdn.com/b/wpfsldesigner/archive/2010/06/30/sample-data-in-the-wpf-and-silverlight-designer.aspx.
Learning the Visual Studio WPF and Silverlight DesignerThis contains tutorials and articles on layout, resources, data binding, sample data, debugging data bindings, object data sources, and master-detail forms.
http://blogs.msdn.com/b/wpfsldesigner/archive/2010/01/15/learn.aspx.

Источник

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

GUI в переводе — это графический интерфейс пользователя. Все эти кнопки, иконки, окна, значки, вкладки, которые вы видите на своем компьютере и телефоне…

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

Что такое графический пользовательский интерфейс (GUI)

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

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

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

Как создаются GUI

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

А вот на десктопе вы можете без труда взаимодействовать даже с мелкими иконками и другими элементами GUI — при помощи мыши.

В чем отличия от UI

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

Таким образом, GUI — это подвид UI.

Гарантированно приведем клиентов

на ваш новый лендинг

Подробнее

Элементы GUI: какие бывают

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

Окно

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

В GUI предусмотрено несколько типов окон, например, окно-контейнер, окно браузера, окно текстового терминала, дочернее окно, окно сообщения и так далее.

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

Иконки

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

Элементы управления: виджеты

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

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

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

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

Вкладка

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

Также к элементам GUI можно отнести: формы, поля ввода (текстовые поля, холсты), кнопки (CTA, значки, плавающие кнопки) и так далее.

Как работает GUI: пример

Рассмотрим работу пользовательского интерфейса на примере десктопного устройства с ОС Windows 7. У нас есть рабочий стол, окна, меню. GUI использует окна, значки, меню и кнопки для разных целей. Само действие выполняется с помощью курсора, клавиатуры или сенсорного экрана. Например, мы кликаем на значок и открываем файл или приложение.

Одиночный клик указывает системе выделить значок, а двойной — открыть папку или приложение, представленное значком. Но графический пользовательский интерфейс — это не только красивая картинка: “под капотом” GUI интерпретирует и выполняет команду, представленную конкретным действием.

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

Преимущества и недостатки графического интерфейса

Вот главные плюсы GUI для пользователя:

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

Теперь плюсы GUI для разработчика:

Можно задать любую функциональность.
Быстрее, чем интерфейс командной строки (визуальные элементы, а не запоминание команд).

Но есть у GUI и минусы. Для разработчика:

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

Для пользователя минусов три:

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

Примеры графических интерфейсов пользователя

Существует множество различных типов и версий графических интерфейсов. Собственные системные GUI вы встретите на разных операционных системах:

MacOS
Windows 10
Android
iOS
Chrome OS

На каких языках программирования строится GUI

Какие языки, технологии и другие инструменты понадобятся для создания GUI? Самые разные! И все зависит от задачи, например, для высокопроизводительного программирования GUI в играх, лучший вариант — C и C++, но для создания интерфейса на этой парочке — потребуется много усилий, опыта и времени.

Разработка для Web

Это все что касается веб-приложений. Без пользовательского интерфейса — сложно представить любой сайт.

Для создания GUI в вебе активно используются три технологии:

HTML (структура страниц).
Основы CSS (внешний вид).
Основы JavaScript (в вебе при помощи этого языка программируется функциональность элементов страницы).

Важно изучить ООП-подход. Используется он не только в JavaScript. Но конкретно, при создании GUI, объектно-ориентированное программирование пригодится при работе с localStorage и методами JSON, например.

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

jQuery и JQuery-ui.
Vue.
React.
Angular.

Java

Объектно-ориентированный язык на основе классов. Java в большей степени ориентирован на кросс-платформенный подход, поэтому GUI-пакеты доступны (в основном) на устройствах с поддержкой Java.

Java также имеет графическую библиотеку, которая поддерживает как двухмерную так и трехмерную графику.

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

Но, используя IDE (интегрированная среда разработки — комплекс инструментов для создания ПО), даже на Java вы можете легко разработать отзывчивый и красивый GUI, а также сэкономить немало времени.

C или C++

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

Python

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

Python активно используется для разработки GUI. Не в последнюю очередь благодаря большому количеству готовых модулей, быстрой разработке и быстрому тестированию. Всё вышеперечисленное делает Python хорошим выбором для разработки GUI.

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

Программирование GUI с помощью Python — не самый универсальный вариант. Да, Python — хороший язык для бэкэнда (который будет управляться фронтом).
Python даже может генерировать HTML и JavaScript с помощью шаблонов и библиотек.
Вы даже можете программировать в браузере на Python с помощью Brython или Sculpt, например. Но то же самое можно сказать и о десятке других языков программирования

Далее — рассмотрим фреймворки Python именно для создания GUI.

PyQt

Кроссплатформенный фреймворк, полностью написан на C++, имеет множество инструментов для разработки API. Существует также его некоммерческая версия PySide и инструмент PyGUI. Все это позволяет создавать отзывчивые и красивые графические интерфейсы.

Tkinter

Это инструмент, который может выводить и запускать скрипты Python в формате графического интерфейса. Он совместим с большинством Unix-платформ, таких как macOS и Windows.

Py-Series ++

Вообще существует множество GUI-фреймворков, которые начинаются с «Py», поэтому их коротко называют Py-Series. Pyforms — один из них. Этот фреймворк позволяет повторно использовать ранее написанный код, без всяких ограничений.

Dabo и CEF Python

Первый предназначен для WxPython, а второй — для Windows, Linux-систем и Mac OS. Эти фреймворки лучше всего подходят именно для кросс-платформенных приложений.

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

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

Если для вас главное графика и дизайн, то хорошим вариантом будет Java.
Если в приоритете скорость, то C или C++.
Java лучше всего подходит для веб-приложений.
Python больше всего подойдет для мобильных или настольных приложений.

Итог

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

Артем Алейник, руководитель отдела UX/UI TexTerra:

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

Нужно ли уметь программировать для создания графического интерфейса пользователя

Не обязательно, но такой опыт может быть полезным.

GUI создает не один специалист. Дизайнер принимает крайне серьезное участие в создании GUI, он рисует и отдает макеты разработчику. Но сам дизайнер не обязан уметь программировать, ему гораздо полезнее иметь понимание логики работы продукта, бизнес-процессов и связи состояний интерфейса между собой, а также — уметь согласовывать свои действия с разработчиками.

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

Андрей, фулстек из Москвы, стаж C++ более 10 лет:

«C++ совсем не плохой выбор для создания графических интерфейсов. Я создаю все виды графических интерфейсов на C++ с помощью Qt, уже много лет. Я не задействую Qt Designer или QML, а просто реализую код GUI на C++ (с помощью Qt Widgets). Некоторые современные графические интерфейсы действительно причудливые, с детальной графикой, разработанной профессиональными дизайнерами. Такие приходится разворачивать на C++, по дизайнерским эскизам, вместе с чужими шрифтами и изображениями. А еще у меня был кейс, когда GUI был реализован на HTML5 / Angular, а затем я переделывал его на C++ и Qt (руководство было недовольно первой версией). В итоге: моя версия потребовала меньше усилий на разработку и легче адаптировалась к запросам клиентов. Я также делал GUI на Java, Python и некоторых других языках и фреймворках, но никогда не имел такой же эффективности и свободы, как на С++. Так что, с моей точки зрения, разработка графических интерфейсов с помощью C++ и Qt — лучшее комбо».

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

Кирилл, дизайнер, разработчик на C, C++, Java, Python:

Это не слишком сложно для опытного кодера. Но, если вы новичок, — все гораздо хуже. Программирование GUI заставляет вас работать задом наперед: оно выворачивает вашу программу наизнанку. И вместо того, чтобы вы отдавали команды ОС, теперь сама ОС посылает вам события, на которые вы должны реагировать.

Если вы хотите заниматься UI, вам также придется освоить многопоточность и научиться писать многопоточные программы. Существует правило: «обновлять пользовательский интерфейс только из потока пользовательского интерфейса». Так что — вам придется придумать способы передачи данных между потоком GUI и рабочими потоками.

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

Что нужно для создания GUI

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

Если важно работать с кнопками, меню, окнами и тому подобным, в среде разработки, то лучшим вариантом для новичка будут готовые библиотеки (см. выше). Многие из них бесплатные. Преимущества библиотек:

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

Основная проблема заключается в том, что очень легко нарисовать экран и считать работу выполненной, но хороший GUI — это гораздо больше:

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

Существуют и другие трудности. Например, сложности процесса разработки:

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

Или трудности в бизнес-процессах:

При ограниченных ресурсах вам, возможно, придется идти на компромиссы.

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

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

Топ-10 советов для создания отзывчивого и удобного GUI

Мы подходим к самому главному — к принципам создания пользовательского интерфейса. Вот главные из них:

Совет 1: Перегруженность лишними элементами

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

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

Совет 2: Сделайте пользовательский интерфейс понятным

Интерфейс должен предоставлять понятные, возможно даже привычные для целевой аудитории продукта инструменты. Например, менеджеры сидят в Trello, в нем они могут следить за текущим этапом задачи, контролировать дедлайны, смотреть важные напоминания:

GUI должен быть понятным для всех пользователей, для которых он создается.

Совет 3: Подумайте о стилистике

Стилистика — это цвета, иконки, типографика, изображения. Все это очень важно. Отдельно нужно разрабатывать цветовые профили. И прежде чем использовать в GUI какой-либо цвет, проведите исследования. Выбирайте сочетание в зависимости от целей вашей страницы / экрана. Также большое значение играет отрасль продукта и его особенности.

Совет 4: Заимствование удачных решений

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

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

Совет 5: Проводите A/B-тестирование

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

Совет 6: Сокращайте текст

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

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

Для контентной части: можно добавлять врезки (там где они уместны).

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

Совет 7: Позаботьтесь о пользователях с ограниченными возможностями

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

Совет 8: Проверьте размещение кнопок

Кнопки — это CTA-элемент. Если кнопка не продумана (функционально и визуально), то ее кликабельность будет низкой. Все кнопки должны иметь логическую подводку из содержимого страницы, чтобы пользователь уже имел повод начать взаимодействие.

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

Совет 9: Дайте пользователям возможность отменить свои действия

Иногда мы непроизвольно нажимаем на ненужную кнопку и попадаем на страницы, которые нам не нужны.

Сделайте действия обратимыми — это поможет пользователю быстрее освоить приложение. Кстати, это третья «Эвристика» Нормана*.

Обязательно изучите 10 принципов интерактивного дизайна Нормана:

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

*Якоб Нильсен определил 10 эвристик юзабилити — общих принципов юзабилити, которые создают лучший пользовательский опыт. Считайте их правилами при разработке GUI, следовать которым — обязательно.

Совет 10: Снижайте нагрузку на память

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

Чем больше приходится запоминать — тем меньше уверенности в правильности выполняемых действий и тем хуже пользователю удается сконцентрироваться

Не заставляйте пользователя запоминать много информации для выполнения простой задачи.

Резюме

Чтобы создать хороший GUI, лучше всего следовать такому алгоритму:

Определите цели создания сайта / программы / мобильного приложения / иного продукта.
Проведите исследование целевой аудитории;
Разработайте визуальный язык: цвета, шрифты, геймификацию;
Создайте пробные версии пользовательского интерфейса;
Протестируйте их.
Не забывайте про обратную связь от пользователей после релиза.

Проектирование

На этом этапе вас ждёт много теории, гипотез и умозрительных заключений, которые предстоит подтвердить или опровергнуть. Эти заключения касаются функциональности продукта и проистекают из вопросов: «Зачем нужен этот продукт?», «Кому он нужен?», «Как с ним будут работать и решать задачи пользователи?» и «Как он будет зарабатывать для своих владельцев?».

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

Ответить на большую часть этих вопросов поможет составление портрета целевой аудитории (ЦА) — тех самых людей, для которых делается продукт.

Главная задача дизайнеров при изучении аудитории — включить эмпатию на максимум и понять, как эта аудитория думает, дышит, видит, слышит и действует. Этому способствуют следующие методы:

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

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

Ключевые персоны — это характерные представители ЦА. Они могут быть разными по профессии, уровню жизни, мотивации пользоваться приложением и прочим параметрам, но опыт, ожидания и страхи каждой персоны ложатся в основу внешнего вида продукта и его функциональности. Например, типичному пользователю приложения «Киноголик» для покупки абонементов в кино 23 года, он работает в ИТ-компании и любит смотреть фильмы на английском.

Такая персона становится центром user story, или пользовательской истории. Это краткий, в несколько строк, рассказ про персону и то, как она работает с функциональностью приложения и какой цели достигает. User story строится по шаблону:

«Как <роль пользователя>, я <что-то хочу получить> <с такой-то целью>»

Поместив нашего 23-летнего фаната оригинальных версий в этот шаблон, получим:

«Как <23-летний любитель версий с оригинальной озвучкой>, я <ищу через функцию ”Поиск” фильмы с субтитрами> <чтобы сходить фильм на английском>»

Компания Intercom славится не только комплексным решением по внедрению чатов в сайты и мобильные приложения, но и изобретением подхода Jobs To Be Done. В основе подхода лежит не личное качество ключевой персоны, а обстоятельства и мотивация, которые толкают персону пользоваться продуктом. «Размышления» персоны называются Job story, а шаблон выглядит так:

«Когда <я оказался в такой ситуации>, я хочу <что-то сделать по некоторым причинам> <с такой-то целью>»

Ситуация с кинолюбом в рамках такого подхода выглядит иначе:

«Когда <меня раздражают посетители кинотеатров, жующие попкорн и мешающие смотреть фильм своими разговорами>, я <ищу в расписании оригинальную версию фильма>, <чтобы посидеть в полупустом зале, где никто не бубнит>

Подробнее про подход Jobs To Be Done написала в своём блоге платформа Tilda.

От User story и Job story мы переходим к User scenario. Это маршрут взаимодействия пользователя с продуктом и достижения цели.

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

Загрузка фото: от желания до его воплощения

Прототипирование

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

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

Будет ли вайрфрейм грубым наброском, который вы сделали с коллегами ручкой на бумаге для принтера, или созданной в графическом редакторе организованной картой экранов — решать вам. Единственное: готовьтесь объяснить клиенту, что визуально вайрфрейм не имеет отношения к финальному продукту.

Вайрфрейм, набросанный от руки

Вайрфрейм, сделанный в Sketch

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

Детализированный прототип — следующий шаг вайрфрейма по лестнице эволюции пользовательского интерфейса. Как и вайрфрейм, это макет, но чуть более конкретный: если в вайрфрейме экран с чатом состоит из окружностей и прямоугольников, только намекающих на свои назначения, то в детализированном прототипе окружность — это ТОЧНО фото пользователя, а прямоугольник — ТОЧНО текст сообщения c прикреплёнными файлами, аудиозаписями и стикерами.

Для презентации прототипа мало показать экраны. Нужно показать, к чему и куда приводит взаимодействие будущего пользователя с элементами интерфейса. Связав элементы линиями с другими экранами, на которые попадёт пользователь, вы получите пользовательские сценарии использования приложения, или user flow.

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

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

В качестве софта для этой задачи мы используем Overflow, чей слоган «User flows done right» даёт понять, что время за этой работой пройдёт продуктивно и с пользой. В Overflow легко импортируются экраны из Sketch или Figma, а сделать flow для 100 экранов можно за час — гораздо быстрее, чем рисовать стрелочки самому.

Нужен дополнительный уровень понимания, как продукт будет работать? С помощью таких сервисов, как Marvel, InVision, POP App и Origami Studio детализированный прототип можно превратить в интерактивный. Его польза в том, что он даёт прокликать (а в случае, если у нас мобильное приложение — прокликать прямо в телефоне) все элементы интерфейса и оценить логику работы продукта до того, как он попадёт в руки конечного пользователя.

Его создание — этап необязательный, так как с презентацией будущей работы справляются макеты и user flow. Но когда нужно показать возможности мобильного приложения и раскрыть перед клиентом предстоящий объём работ в деталях, используйте его.

После утверждения логики и функциональности продукта этап прототипирования можно считать завершённым.

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

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

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

Разработчики получают от дизайнеров прототип и user flow, чтобы максимально точно оценить этап разработки и ориентироваться в логике продукта. Затем на будущий продукт начинают накатывать стиль.

Стилизация

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

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

Дизайн-концепт «Киноголика»

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

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

Вывод

Пользоваться продуктом в первую очередь будут простые люди, а не его создатели. Будучи людьми простыми, во время работы с продуктом они прогонят его через фильтр из трёх вопросов: «Что делать?», «Куда идти?» и «Куда нажимать?». Если вы серьёзно отнесётесь к этапам работы над интерфейсом, ваши пользователи получат ясный ответ на эти вопросы и останутся довольны продуктом.

«Что делать?»

Это вопрос о том, насколько пользователю понятна основная функция продукта. Обозначить её нужно на этапе проектирования — тогда же, когда определяется целевая аудитория.

«Куда идти?»

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

«Куда нажимать?»

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

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

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

Источник

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

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

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

Программное обеспечение становится более популярным, если его пользовательский интерфейс:

привлекательный
Прост в использовании
Отзывчивый в короткие сроки
Ясно, чтобы понять
Последовательный на всех интерфейсных экранах

Пользовательский интерфейс широко разделен на две категории:

Интерфейс командной строки
Графический пользовательский интерфейс

Интерфейс командной строки (CLI)

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

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

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

CLI использует меньше ресурсов компьютера по сравнению с GUI.

Элементы CLI

Текстовый интерфейс командной строки может иметь следующие элементы:

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

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

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

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

Графический пользовательский интерфейс

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

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

Элементы графического интерфейса

GUI предоставляет набор компонентов для взаимодействия с программным или аппаратным обеспечением.

Каждый графический компонент предоставляет способ работы с системой. Система GUI имеет следующие элементы, такие как:

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

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

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

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

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

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

Компоненты графического интерфейса приложения

GUI приложения содержит один или несколько из перечисленных элементов GUI:

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

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

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

Text-Box – предоставляет пользователю область для ввода и ввода текстовых данных.

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

Радио-кнопка – отображает доступные опции для выбора. Только один может быть выбран среди всех предложенных.

Флажок – функции, аналогичные списку. Когда опция выбрана, поле помечается как отмеченное. Можно выбрать несколько параметров, представленных флажками.

Список – Предоставляет список доступных элементов для выбора. Можно выбрать более одного элемента.

Другие впечатляющие компоненты GUI:

Слайдеры
Поле со списком
Данные сетки
Выпадающий список

Деятельность по разработке пользовательского интерфейса

Существует ряд действий, выполняемых для разработки пользовательского интерфейса. Процесс проектирования и реализации GUI похож на SDLC. Любая модель может быть использована для реализации GUI среди Waterfall, Iterative или Spiral Model.

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

Сбор требований к графическому интерфейсу – разработчикам может потребоваться список всех функциональных и нефункциональных требований графического интерфейса. Это может быть взято от пользователя и его существующего программного решения.
Анализ пользователя – дизайнер изучает, кто собирается использовать графический интерфейс программного обеспечения. Целевая аудитория имеет значение, так как детали дизайна меняются в зависимости от уровня знаний и компетенции пользователя. Если пользователь разбирается в технических вопросах, можно использовать расширенный и сложный графический интерфейс. Для начинающего пользователя, больше информации включено в с практическими рекомендациями программного обеспечения.
Анализ задач – Дизайнеры должны проанализировать, какую задачу следует решить с помощью программного решения. Здесь, в GUI, не имеет значения, как это будет сделано. Задачи могут быть представлены в иерархическом порядке, принимая одну главную задачу и разделяя ее далее на более мелкие подзадачи. Задачи обеспечивают цели для представления GUI. Поток информации среди подзадач определяет поток содержимого GUI в программном обеспечении.
Проектирование и реализация графического интерфейса. Разработчики, получив информацию о требованиях, задачах и пользовательской среде, спроектируют графический интерфейс и внедряют его в код, а затем внедряют графический интерфейс с работающим или фиктивным программным обеспечением в фоновом режиме. Затем он самопроверяется разработчиками.
Тестирование – тестирование GUI может быть выполнено различными способами. Организация может провести внутренний осмотр, непосредственное участие пользователей и выпуск бета-версии – это лишь немногие из них. Тестирование может включать в себя удобство использования, совместимость, принятие пользователем и т. Д.

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

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

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

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

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

Инструменты реализации GUI

Существует несколько инструментов, с помощью которых дизайнеры могут создавать весь графический интерфейс одним щелчком мыши. Некоторые инструменты могут быть встроены в программную среду (IDE).

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

Существуют разные сегменты инструментов с графическим интерфейсом в зависимости от их использования и платформы.

пример

Мобильный графический интерфейс, компьютерный графический интерфейс, сенсорный графический интерфейс и т. Д. Вот список нескольких инструментов, которые пригодятся для создания графического интерфейса:

ЖИДКОСТИ
AppInventor (Android)
Lucidchart
Wavemaker
Visual Studio

Пользовательский интерфейс Золотые правила

Следующие правила упоминаются как золотые правила для дизайна GUI, описанные Shneiderman и Plaisant в их книге (Проектирование интерфейса пользователя).

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

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

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

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

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

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

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

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

Источник

Рекомендации по разработке пользовательского интерфейса

Разработка UI

Композиция контейнеров (Container Composition)

Вид составного приложения во время разработки

Разметка

Анимации

Оптимизации времени выполнения

Оптимизации времени проектирования

Большие решения с множеством XAML ресурсов

XAML ресурсы

Визуальный редактор и сборки

Silverlight Design-Time App.xaml ресурсы

Руководство по созданию удобных для проектирования представлений

Создание кода для исполнения во время проектирования

Обработка проблем в коде, возникающих во время проектирования

Определение того, что код исполняется во время проектирования

Свойства времени проектирования

Свойство d:DataContext

Расширение разметки d:DesignInstance

Типичные сценарии использования d:DataContext

Руководство по созданию выборочных данных времени проектирования

Использование выборочных данных (Design-Time Sample Data)

Источники выборочных данных

Expression Blend XML Sample Data

Expression Blend 4 и Visual Studio 2010 XAML Sample Data

XAML ресурсы

Код

Ключевые решения при создании разметки пользовательского интерфейса

Дополнительная информация

Что такое графический пользовательский интерфейс (GUI)

Как создаются GUI

Элементы GUI: какие бывают

Окно

Меню

Иконки

Элементы управления: виджеты

Вкладка

Как работает GUI: пример

Преимущества и недостатки графического интерфейса

Примеры графических интерфейсов пользователя

На каких языках программирования строится GUI

Разработка для Web

Java

C или C++

Python

PyQt

Tkinter

Py-Series ++

Dabo и CEF Python

Итог

Нужно ли уметь программировать для создания графического интерфейса пользователя

Что нужно для создания GUI

Топ-10 советов для создания отзывчивого и удобного GUI

Совет 1: Перегруженность лишними элементами

Совет 2: Сделайте пользовательский интерфейс понятным

Совет 3: Подумайте о стилистике

Совет 4: Заимствование удачных решений

Совет 5: Проводите A/B-тестирование

Совет 6: Сокращайте текст

Совет 7: Позаботьтесь о пользователях с ограниченными возможностями

Совет 8: Проверьте размещение кнопок

Совет 9: Дайте пользователям возможность отменить свои действия

Совет 10: Снижайте нагрузку на память

Резюме

Проектирование

Прототипирование

Стилизация

Вывод

«Что делать?»

«Куда идти?»

«Куда нажимать?»

Интерфейс командной строки (CLI)

Элементы CLI

Графический пользовательский интерфейс

Элементы графического интерфейса

Компоненты графического интерфейса приложения

Деятельность по разработке пользовательского интерфейса

Инструменты реализации GUI

пример

Пользовательский интерфейс Золотые правила