Создание пользовательского интерфейса: Руководство по созданию пользовательского интерфейса — UWP applications

Содержание

Руководство по созданию пользовательского интерфейса — UWP applications



  • Чтение занимает 12 мин

В этой статье

В этом руководстве вы узнаете, как создать базовый пользовательский интерфейс для программы редактирования изображений, используя следующие инструменты:In this tutorial, you’ll learn how to create a basic UI for an image editing program by:

  • средства XAML в Visual Studio, такие как конструктор XAML, панель инструментов, редактор XAML, панель Свойства и «Структура документа» для добавления элементов правления и содержимого в пользовательский интерфейс;Using the XAML tools in Visual Studio, such as XAML Designer, Toolbox, the XAML editor, the Properties panel, and Document Outline, to add controls and content to your UI.
  • наиболее распространенные панели макетов XAML, такие как RelativePanel, Grid и StackPanel.Using some of the most common XAML layout panels, such as RelativePanel, Grid, and StackPanel.

Программа редактирования изображений содержит две страницы.The image editing program has two pages. Главная страница, на которой отображается представление фотоальбома, а также сведения о каждом файле изображения.The main page displays a photo gallery view, along with some information about each image file.

Страница сведений, на которой отображается одна выбранная фотография.The details page displays a single photo after it has been selected. Всплывающее меню редактирования позволяет изменить, переименовать и сохранить фотографию.A flyout editing menu allows the photo to be altered, renamed, and saved.

Предварительные условияPrerequisites

Часть 0.

Получение начального кода на GitHubPart 0: Get the starter code from GitHub

В этом учебнике мы начнем с упрощенной версии примера PhotoLab.For this tutorial, you’ll start with a simplified version of the PhotoLab sample.

  1. Перейдите на страницу GitHub с примером кода: https://github.com/Microsoft/Windows-appsample-photo-lab.Go to the GitHub page for the sample: https://github.com/Microsoft/Windows-appsample-photo-lab.

  2. Далее необходимо клонировать или скачать пример.Next, you’ll need to clone or download the sample. Нажмите кнопку Clone or download (Клонировать или скачать).Select the Clone or download button. Откроется подменю.A sub-menu appears.

    Если вы не знакомы с GitHub:If you’re not familiar with GitHub:

    a.a. Нажмите кнопку Download ZIP (Скачать ZIP-файл) и сохраните файл в локальном расположении.Select Download ZIP and save the file locally. Будет выполнено скачивание ZIP-файла с необходимыми файлами проекта.This downloads a .zip file that contains all the project files you need.

    b.b. Извлеките файл.Extract the file. Используйте проводник, чтобы перейти к скачанному ZIP-файлу, щелкните его правой кнопкой мыши и выберите Извлечь все.Use File Explorer to browse to the .zip file that you just downloaded, right-click it, and select Extract All….

    c.c. Перейдите к локальной копии примера кода, а затем в каталог Windows-appsample-photo-lab-master\xaml-basics-starting-points\user-interface.Browse to your local copy of the sample, and go to the Windows-appsample-photo-lab-master\xaml-basics-starting-points\user-interface directory.

    Если вы знакомы с GitHub:If you are familiar with GitHub:

    a.a. Клонируйте главную ветвь репозитория локально.Clone the main branch of the repo locally.

    b.b. Перейдите в каталог Windows-appsample-photo-lab\xaml-basics-starting-points\user-interface. Browse to the Windows-appsample-photo-lab\xaml-basics-starting-points\user-interface directory.

  3. Дважды щелкните Photolab.sln, чтобы открыть решение в Visual Studio.Double-click Photolab.sln to open the solution in Visual Studio.

Часть 1. Добавление элемента управления TextBlock с помощью конструктора XAMLPart 1: Add a TextBlock control by using XAML Designer

Visual Studio предоставляет несколько средств для удобства создания пользовательского интерфейса XAML.Visual Studio provides several tools to make creating your XAML UI easier.

  • Перетащите элементы управления с панели инструментов в область конструктора XAML и посмотрите, как они будут выглядеть перед запуском приложения.Drag controls from the Toolbox onto the XAML Designer design surface and see what they’ll look like before you run the app.
  • Панель Свойства позволяет просмотреть и настроить все свойства элемента управления, которые являются активными в конструкторе. The Properties panel lets you view and set all the properties of the control that is active in the designer.
  • На панели Структура документа отображается структура родительских и дочерних элементов визуального дерева XAML для пользовательского интерфейса.Document Outline shows the parent/child structure of the XAML visual tree for your UI.
  • Редактор XAML позволяет напрямую изменять разметку XAML.The XAML editor lets you directly enter and modify the XAML markup.

Ниже представлен пользовательский интерфейс Visual Studio с пометками около каждого инструмента.Here’s the Visual Studio UI with the tools labeled.

Каждый из этих инструментов помогает в создании пользовательского интерфейса, и при работе с этим руководством мы воспользуемся каждым из них.Each of these tools makes creating your UI easier, so we’ll use all of them in this tutorial. Прежде всего, добавим элемент управления с помощью конструктора XAML. You’ll start by using XAML Designer to add a control.

Чтобы добавить элемент управления с помощью конструктора XAML, сделайте следующее:To add a control by using XAML Designer:

  1. Дважды щелкните файл MainPage.xaml в обозревателе решений, чтобы открыть его.Double-click MainPage.xaml in Solution Explorer to open it. На этом шаге главная страница приложения отобразится без каких-либо добавленных элементов пользовательского интерфейса.This step shows the main page of the app without any UI elements added.

  2. Прежде чем продолжить, необходимо внести некоторые изменения в Visual Studio:Before going further, you need to make some adjustments to Visual Studio:

    • Убедитесь, что в качестве платформы решения выбрана архитектура x86 или x64, а не ARM.Make sure the solution platform is set to x86 or x64, not ARM.
    • Настройте главную страницу конструктора XAML на предварительный просмотр рабочего стола с диагональю 13,3 дюйма. Set the main page of XAML Designer to show the 13.3″ desktop preview.

    Оба параметра находятся в верхней части окна, как показано здесь.You should see both settings near the top of the window, as shown here.

    Теперь можно запустить приложение, но оно будет практически пустым.You can run the app now, but you won’t see much. Добавим элементы пользовательского интерфейса, чтобы сделать его интереснее.Let’s add some UI elements to make things more interesting.

  3. На панели инструментов разверните пункт Общие элементы управления XAML и найдите элемент управления TextBlock.In Toolbox, expand Common XAML controls and find the TextBlock control. Перетащите элемент управления TextBlock в область конструктора ближе к верхнему левому углу страницы.Drag a TextBlock control onto the design surface and place it near the upper-left corner of the page.

    На страницу добавится элемент управления TextBlock, и конструктор установит определенные свойства, основываясь на своем предположении о требуемом макете. The TextBlock control is added to the page, and the designer sets some properties based on its best guess at the layout you want. Вокруг элемента управления TextBlock появится синее выделение, указывающее на то, что этот объект теперь стал активным.A blue highlight appears around the TextBlock control to indicate that it is now the active object. Обратите внимание на поля и другие параметры, добавленные конструктором.Notice the margins and other settings that the designer added.

    Код XAML будет выглядеть примерно так, как показано ниже.Your XAML will look something like the following. Не стоит беспокоиться, если он отформатирован несколько иначе.Don’t worry if it’s not formatted exactly like this. В нашем примере он сокращен для удобства чтения.We abbreviated here to make it easier to read.

    <TextBlock HorizontalAlignment="Left"
               Margin="351,44,0,0"
               TextWrapping="Wrap"
               Text="TextBlock"
               VerticalAlignment="Top"/>
    

    В дальнейших шагах мы обновим эти значения. In the next steps, you’ll update these values.

  4. На панели Свойства измените значение поля Имя элемента управления TextBlock на TitleTextBlock.In the Properties panel, change the Name value of the TextBlock control to TitleTextBlock. (Убедитесь, что элемент управления TextBlock по-прежнему является активным объектом.)(Make sure the TextBlock control is still the active object.)

  5. В разделе Общие замените значение поля Текст на Коллекция.Under Common, change the Text value to Collection.

    Теперь код XAML в редакторе XAML будет выглядеть следующим образом.In the XAML editor, your XAML will now look like this.

    <TextBlock x:Name="TitleTextBlock"
               HorizontalAlignment="Left"
               Margin="351,44,0,0"
               TextWrapping="Wrap"
               Text="Collection"
               VerticalAlignment="Top"/>
    
  6. Для размещения элемента управления TextBlock необходимо сначала удалить значения свойств, добавленные Visual Studio. To position the TextBlock control, you should first remove the property values that Visual Studio added. На панели «Структура документа» щелкните правой кнопкой мыши TitleTextBlock и выберите Макет > Сбросить все.In Document Outline, right-click TitleTextBlock, and then select Layout > Reset All.

  7. На панели Свойства введите Margin в поле поиска, чтобы быстро найти свойство Margin (Поле).In the Properties panel, enter Margin into the search box to easily find the Margin property. Задайте значения левого и нижнего полей равными 24.Set the left and bottom margins to 24.

    Поля обеспечивают базовое расположение элемента на странице.Margins provide the most basic positioning of an element on the page. С их помощью удобно выполнять точную настройку макета, но не следует использовать большие значения полей, подобные добавленным Visual Studio. They’re useful for fine-tuning your layout, but you should avoid using large margin values like those added by Visual Studio. Они затрудняют адаптацию пользовательского интерфейса к различным размерам экрана.They make it difficult for your UI to adapt to various screen sizes.

    Дополнительные сведения см. в статье Выравнивание, поля и заполнение.For more info, see Alignment, margins, and padding.

  8. На панели «Структура документа» правой кнопкой мыши щелкните TitleTextBlock, а затем Изменить стиль > Применить ресурс > TitleTextBlockStyle.In Document Outline, right-click TitleTextBlock, and then select Edit Style > Apply Resource > TitleTextBlockStyle. На этом шаге к тексту названия будет применен определенный системой стиль.This step applies a system-defined style to your title text.

    <TextBlock x:Name="TitleTextBlock"
               TextWrapping="Wrap"
               Text="Collection"
               Margin="24,0,0,24"
              />
    
  9. На панели Свойства введите textwrapping в поле поиска, чтобы быстро найти свойство TextWrapping. In the Properties panel, enter textwrapping into the search box to find the TextWrapping property. Щелкните метку свойства для свойства TextWrapping, чтобы открыть его меню.Select the property marker for the TextWrapping property to open its menu. (Маркер свойства — это маленький квадратный символ справа от каждого значения свойства.(The property marker is the small box symbol to the right of each property value. Метка свойства окрашена в черный цвет, чтобы указать, что для свойства задано значение не по умолчанию.) В меню Свойство выберите TextWrapping, чтобы сбросить свойство TextWrapping.The property marker is black to indicate that the property is set to a non-default value.) On the Property menu, select Reset to reset the TextWrapping property.

    Visual Studio добавляет это свойство, но оно уже задано в примененном стиле, поэтому здесь оно не потребуется. Visual Studio adds this property, but it’s already set in the style you applied, so you don’t need it here.

Мы добавили первую часть пользовательского интерфейса в приложение.You’ve added the first part of the UI to your app. Теперь запустите приложение и посмотрите, как оно выглядит.Run the app now to see what it looks like.

Примечание

В этой части руководства вы добавили элемент управления, перетащив его.In this part of the tutorial, you added a control by dragging it. Также можно добавить элемент управления путем двойного щелчка по нему на панели инструментов.You can also add a control by double-clicking it in Toolbox. Попробуйте сделать это и обратите внимание, чем отличается код XAML, созданный Visual Studio.Give it a try, and see the differences in the XAML that Visual Studio generates.

Часть 2. Добавление элемента управления GridView с помощью редактора XAMLPart 2: Add a GridView control by using the XAML editor

В части 1 мы попробовали использовать конструктор XAML и некоторые другие средства, предоставляемые в Visual Studio. In Part 1, you had a taste of using XAML Designer and some of the other tools that Visual Studio provides. В этой части мы будем использовать редактор XAML для непосредственной работы с разметкой XAML.Here, you’ll use the XAML editor to work directly with the XAML markup. По мере изучения XAML этот способ может показаться вам более эффективным.As you become more familiar with XAML, you might find that this is a more efficient way for you to work.

Прежде всего необходимо заменить элемент Grid корневого макета на RelativePanel.First, you’ll replace the root layout Grid with RelativePanel. Элемент RelativePanel упрощает изменение расположения блоков пользовательского интерфейса относительно панели и других элементов пользовательского интерфейса.RelativePanel makes it easier to rearrange chunks of UI relative to the panel or other pieces of UI. Его преимущества продемонстрированы в руководстве Адаптивный макет XAML.You’ll see its usefulness in the XAML adaptive layout tutorial.

Затем мы добавим элемент управления GridView для отображения данных.Then, you’ll add a GridView control to display your data.

Чтобы добавить элемент управления с помощью редактора XAML, сделайте следующее:To add a control by using the XAML editor:

  1. В редакторе XAML замените корневой элемент Grid на RelativePanel.In the XAML editor, change the root Grid to RelativePanel.

    ДоBefore

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
          <TextBlock x:Name="TitleTextBlock"
                     Text="Collection"
                     Margin="24,0,0,24"
                    />
    </Grid>
    

    ПослеAfter

    <RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock x:Name="TitleTextBlock"
                   Text="Collection"
                   Margin="24,0,0,24"
                  />
    </RelativePanel>
    

    Дополнительные сведения об использовании RelativePanel в макете см. в статье Панели макета.For more info about layout using RelativePanel, see Layout panels.

  2. Под элементом TextBlock добавьте элемент управления GridView с именем ImageGridView.Below the TextBlock element, add a GridView control named ImageGridView. Настройте для RelativePanel присоединенные свойства, чтобы разместить элемент управления под текстом названия и растянуть его во всю ширину экрана.Set the RelativePanel attached properties to place the control below the title text and make it stretch across the entire width of the screen.

    Добавьте этот код XAMLAdd this XAML

    <GridView x:Name="ImageGridView"
              Margin="0,0,0,8"
              RelativePanel.AlignLeftWithPanel="True"
              RelativePanel.AlignRightWithPanel="True"
              RelativePanel.Below="TitleTextBlock"/>
    

    После элемента TextBlockAfter TextBlock

    <RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock x:Name="TitleTextBlock"
                   Text="Collection"
                   Margin="24,0,0,24"
                  />
    
        <!-- Add the GridView control here.  -->
    
    </RelativePanel>
    

    Дополнительные сведения о присоединенных свойствах панелей см. в статье Панели макета.For more info about panel attached properties, see Layout panels.

  3. Чтобы элемент управления GridView отображал какие-либо данные, необходимо предоставить ему коллекцию данных.For the GridView control to show anything, you need to give it a collection of data to show. Откройте файл MainPage.xaml.cs и найдите метод GetItemsAsync.Open MainPage.xaml.cs and find the GetItemsAsync method. Этот метод заполняет коллекцию с именем Images, которая является свойством, добавленным на страницу MainPage.This method populates a collection called Images, which is a property that we’ve added to MainPage.

    В конце метода GetItemsAsync добавьте следующую строку кода.At the end of the GetItemsAsync method, add this line of code.

    ImageGridView.ItemsSource = Images;
    

    На этом шаге для свойства ItemsSource элемента управления GridView задается значение коллекции Images приложения.This sets the GridView control’s ItemsSource property to the app’s Images collection. Также элементу управления GridView предоставляются данные для отображения.It also gives the GridView control something to show.

На этом этапе можно запустить приложение и убедиться, что все работает должным образом.This is a good place to run the app and make sure everything’s working. Приложение должно выглядеть следующим образом.It should look something like this.

Вы заметите, что приложение пока что не показывает изображения.You’ll notice that the app isn’t showing images yet. По умолчанию оно отображает значение ToString типа данных в коллекции.By default, it shows the ToString value of the data type that’s in the collection. Далее мы создадим шаблон данных, чтобы определить способ отображения данных.Next, you’ll create a data template to define how the data is shown.

Примечание

Дополнительные сведения об использовании RelativePanel в макете см. в статье Панели макета.You can learn more about layout using RelativePanel in the Layout panels article. Ознакомьтесь со статьей и поэкспериментируйте с разными макетами, изменив значения присоединенных свойств RelativePanel в элементах TextBlock и GridView.Take a look, and then experiment with some different layouts by setting RelativePanel attached properties on TextBlock and GridView.

Часть 3. Добавление объекта DataTemplate для отображения данныхPart 3: Add a DataTemplate object to display your data

Теперь мы создадим объект DataTemplate, который сообщает элементу управления GridView, как следует отображать данные.Now, you’ll create a DataTemplate object that tells the GridView control how to display your data. Полную информацию о шаблонах данных см. в разделе Контейнеры и шаблоны элементов.For a full explanation of data templates, see Item containers and templates.

В этой части вы добавите только заполнители, чтобы создать необходимый макет.For now, you’ll add only placeholders to help you create the layout you want. При работе с руководством Создание привязок данных вы замените эти заполнители реальными данными из класса ImageFileInfo.In the XAML data binding tutorial, you’ll replace these placeholders with real data from the ImageFileInfo class. Вы можете открыть файл ImageFileInfo.cs сейчас, если хотите увидеть, как выглядит объект данных.You can open the ImageFileInfo.cs file now if you want to see what the data object looks like.

Чтобы добавить шаблон данных в представление сетки, сделайте следующее:To add a data template to a grid view:

  1. Откройте файл MainPage.xaml.Open MainPage. xaml.

  2. Чтобы отобразить оценку, используйте RatingControl из пакета NuGet библиотеки пользовательского интерфейса Windows (WinUI).To show the rating, use the RatingControl from the Windows UI Library (WinUI) NuGet package. Добавьте ссылку на пространство имен XAML, которая определяет это пространство имен для элементов управления WinUI.Add a XAML namespace reference that specifies the namespace for the WinUI controls. Разместите ее в открывающем теге Page сразу после других записей xmlns:.Put this in the opening Page tag, right after the other xmlns: entries.

    Добавьте этот код XAMLAdd this XAML

    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    

    После последней записи xmlns:After the last xmlns: entry

    <Page x:Name="page"
      x:Class="PhotoLab.MainPage"
      xmlns="http://schemas. microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:PhotoLab"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
      mc:Ignorable="d"
      NavigationCacheMode="Enabled">
    

    Подробнее о пространствах имен XAML см. в разделе Пространства имен XAML и их сопоставление.For more info about XAML namespaces, see XAML namespaces and namespace mapping.

  3. На панели «Структура документа» щелкните правой кнопкой мыши ImageGridView.In Document Outline, right-click ImageGridView. В контекстном меню выберите Правка дополнительных шаблонов > Изменить созданные элементы (ItemTemplate) > Создать пустой.On the shortcut menu, select Edit Additional Templates > Edit Generated Items (ItemTemplate) > Create Empty. Откроется диалоговое окно Создание ресурса.The Create Resource dialog box opens.

  4. В этом диалоговом окне замените значение Name (ключ) на ImageGridView_DefaultItemTemplate, а затем нажмите кнопку ОК.In the dialog box, change the Name (key) value to ImageGridView_DefaultItemTemplate, and then select OK.

    После нажатия кнопки ОК происходит ряд действий.Several things happen when you select OK:

    • В раздел Page.Resources файла MainPage.xaml добавляется объект DataTemplate.A DataTemplate object is added to the Page.Resources section of MainPage.xaml.

      <Page.Resources>
          <DataTemplate x:Key="ImageGridView_DefaultItemTemplate">
              <Grid/>
          </DataTemplate>
      </Page. Resources>
      
    • Для свойства ItemTemplate элемента управления GridView задается значение ресурса DataTemplate.The GridView control’s ItemTemplate property is set to the DataTemplate resource.

          <GridView x:Name="ImageGridView"
                    Margin="0,0,0,8"
                    RelativePanel.AlignLeftWithPanel="True"
                    RelativePanel.AlignRightWithPanel="True"
                    RelativePanel.Below="TitleTextBlock"
                    ItemTemplate="{StaticResource ImageGridView_DefaultItemTemplate}"/>
      
  5. В ресурсе ImageGridView_DefaultItemTemplate задайте для свойств Height и Width элемента Grid значение 300, а для свойства Margin — 8.In the ImageGridView_DefaultItemTemplate resource, give the root Grid a height and width of 300, and margin of 8. Затем добавьте две строки и задайте для свойства Height второй строки значение Auto.Then add two rows and set the height of the second row to Auto.

    ДоBefore

    <Grid/>
    

    ПослеAfter

    <Grid
         
          Margin="8">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
    </Grid>
    

    Дополнительные сведения о макетах Grid см. в статье Панели макета.For more info about Grid layouts, see Layout panels.

  6. Добавьте элементы управления в макет Grid.Add controls to the Grid layout.

    а.a. Добавьте в сетку элемент управления Image. По умолчанию он помещается в первую строку сетки (строка 0).Add an Image control to the grid; by default, it’s placed in the first grid row (row 0). Здесь будет отображаться изображение.This is where the image will be shown. Но сейчас в качестве заполнителя будет использоваться логотип приложения в магазине.But for now, you’ll use the app’s store logo as a placeholder.

    b.b. Добавьте элементы управления TextBlock для отображения названия, типа файла и размеров изображения.Add TextBlock controls to show the image’s name, file type, and dimensions. Чтобы сделать это, используйте элементы управления StackPanel для расположения текстовых блоков.For this, you use StackPanel controls to arrange the text blocks. Используйте присоединенное свойство Grid.Row, чтобы поместить внешний элемент управления StackPanel во вторую строку (строка 1).Use the Grid.Row attached property to place the outermost StackPanel in the second row (row 1).

    Дополнительные сведения о макете StackPanel см. в статье Панели макета.For more info about StackPanel layout, see Layout panels.

    c.c. Добавьте RatingControl во внешний (вертикальный) элемент управления StackPanel.Add the RatingControl to the outer (vertical) StackPanel control. Разместите его после внутреннего (горизонтального) элемента управления StackPanel.Place it after the inner (horizontal) StackPanel control.

    Окончательный шаблонThe final template

    <Grid
         
          Margin="8">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
    
        <Image x:Name="ItemImage"
               Source="Assets/StoreLogo.png"
               Stretch="Uniform" />
    
        <StackPanel Orientation="Vertical"
                    Grid.Row="1">
            <TextBlock Text="ImageTitle"
                       HorizontalAlignment="Center"
                       />
            <StackPanel Orientation="Horizontal"
                        HorizontalAlignment="Center">
                <TextBlock Text="ImageFileType"
                           HorizontalAlignment="Center"
                           />
                <TextBlock Text="ImageDimensions"
                           HorizontalAlignment="Center"
                          
                           Margin="8,0,0,0" />
            </StackPanel>
    
            <muxc:RatingControl Value="3" IsReadOnly="True"/>
        </StackPanel>
    </Grid>
    

Запустите приложение, чтобы просмотреть элемент управления GridView с только что созданным шаблоном элемента. Run the app now to see the GridView control with the item template that you just created. Затем вы измените цвет фона и добавите пробел между элементами сетки.Next, you’ll change the background color and add some space between the grid items.

Часть 4. Изменение стиля контейнера элементовPart 4: Modify the item container style

Шаблон элемента управления содержит визуальные элементы, отображающие состояние, например при выделении, наведении указателя и фокусировке.An item’s control template contains the visuals that display state, like selection, pointer over, and focus. Эти визуальные элементы отрисовываются над шаблоном данных или под ним.These visuals are rendered either on top of or below the data template. В этой части мы изменим свойства Background и Margin шаблона элемента управления, чтобы у элементов GridView был серый фон.Here, you’ll modify the Background and Margin properties of the control template to give the GridView items a gray background.

Чтобы изменить контейнер элементов, сделайте следующее:To modify the item container:

  1. На панели «Структура документа» щелкните правой кнопкой мыши ImageGridView.In Document Outline, right-click ImageGridView. В контекстном меню выберите Изменить дополнительные шаблоны > Изменить созданный контейнер элемента (ItemContainerStyle) > Изменить копию.On the shortcut menu, select Edit Additional Templates > Edit Generated Item Container (ItemContainerStyle) > Edit a Copy. Откроется диалоговое окно Создание ресурса.The Create Resource dialog box opens.

  2. В этом диалоговом окне замените значение Name (ключ) на ImageGridView_DefaultItemContainerStyle, а затем нажмите кнопку ОК.In the dialog box, change the Name (key) value to ImageGridView_DefaultItemContainerStyle, and then select OK.

    В раздел Page.Resources кода XAML добавляется копия стиля по умолчанию.A copy of the default style is added to the Page.Resources section of your XAML.

    <Style x:Key="ImageGridView_DefaultItemContainerStyle" TargetType="GridViewItem">
        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
        <Setter Property="Background" Value="{ThemeResource GridViewItemBackground}"/>
        <Setter Property="Foreground" Value="{ThemeResource GridViewItemForeground}"/>
        <Setter Property="TabNavigation" Value="Local"/>
        <Setter Property="IsHoldingEnabled" Value="True"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Margin" Value="0,0,4,4"/>
        <Setter Property="MinWidth" Value="{ThemeResource GridViewItemMinWidth}"/>
        <Setter Property="MinHeight" Value="{ThemeResource GridViewItemMinHeight}"/>
        <Setter Property="AllowDrop" Value="False"/>
        <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}"/>
        <Setter Property="FocusVisualMargin" Value="-2"/>
        <Setter Property="Template">
            <Setter. Value>
                <ControlTemplate TargetType="GridViewItem">
                <!-- XAML removed for clarity
                    <ListViewItemPresenter ... />
                -->   
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    

    Стиль GridViewItem по умолчанию задает значения многим свойствам.The GridViewItem default style sets a lot of properties. При этом в копии шаблона необходимо настроить только те свойства, которые нужно изменить.However, in your copy of the template, you only need to keep the properties that want to modify.

    Как и на предыдущем шаге, для свойства ItemContainerStyle элемента управления GridView задано значение нового ресурса Style.As in the previous step, the GridView control’s ItemContainerStyle property is set to the new Style resource.

        <GridView x:Name="ImageGridView"
                  Margin="0,0,0,8"
                  RelativePanel. AlignLeftWithPanel="True"
                  RelativePanel.AlignRightWithPanel="True"
                  RelativePanel.Below="TitleTextBlock"
                  ItemTemplate="{StaticResource ImageGridView_DefaultItemTemplate}"
                  ItemContainerStyle="{StaticResource ImageGridView_DefaultItemContainerStyle}"/>
    
  3. Удалите все элементы Setter, кроме Background и Margin.Delete all the Setter elements except Background and Margin.

  4. Измените значение свойства Background на Gray.Change the value for the Background property to Gray.

    ДоBefore

        <Setter Property="Background" Value="{ThemeResource GridViewItemBackground}"/>
    

    ПослеAfter

        <Setter Property="Background" Value="Gray"/>
    
  5. Измените значение свойства Margin на 8. Change the value for the Margin property to 8.

    ДоBefore

        <Setter Property="Margin" Value="0,0,4,4"/>
    

    ПослеAfter

        <Setter Property="Margin" Value="8"/>
    

Запустите приложение и посмотрите, как оно выглядит на данном этапе.Run the app and see how it looks now. Измените размер окна приложения.Resize the app window. Элемент управления GridView отвечает за изменение расположения изображений, но при некоторых значениях ширины в правой части окна приложения остается много пространства.The GridView control takes care of rearranging the images for you, but at some widths, there’s a lot of space on the right side of the app window. Приложение выглядело бы лучше, если бы изображения располагались по центру.It would look better if the images were centered. Как это сделать, описано в следующей части. You’ll take care of that next.

Примечание

Если вы хотите поэкспериментировать, попробуйте изменять значения свойств Background и Margin и посмотрите на результат.If you want to experiment, try setting the Background and Margin properties to different values and see what effect it has.

Часть 5. Последние штрихи в макетеPart 5: Apply some final adjustments to the layout

Чтобы расположить изображения по центру страницы, необходимо настроить выравнивание элемента управления Grid на странице.To center the images on the page, you need to adjust the alignment of the Grid control on the page. А возможно, следует настроить выравнивание изображений в GridView?Or do you need to adjust the alignment of the images in the GridView? Есть ли разница?Does it matter? Давайте посмотрим.Let’s see.

Дополнительные сведения о выравнивании см. в статье Выравнивание, поля и заполнение. For more info about alignment, see Alignment, margins, and padding.

(На этом шаге попробуйте установить в качестве значения свойства Background элемента GridView любой цвет на ваш выбор.(You might try setting the Background property of GridView to your favorite color for this step. Это поможет вам следить за изменениями в макете.)It will let you see more clearly what’s happening with the layout.)

Чтобы изменить выравнивание изображений, сделайте следующее:To modify the alignment of the images:

  1. В GridView задайте для свойства HorizontalAlignment значение Center.In GridView, set the HorizontalAlignment property to Center.

    ДоBefore

        <GridView x:Name="ImageGridView"
                  Margin="0,0,0,8"
                  RelativePanel.AlignLeftWithPanel="True"
                  RelativePanel.AlignRightWithPanel="True"
                  RelativePanel. Below="TitleTextBlock"
                  ItemTemplate="{StaticResource ImageGridView_DefaultItemTemplate}"/>
    

    ПослеAfter

        <GridView x:Name="ImageGridView"
                  Margin="0,0,0,8"
                  RelativePanel.AlignLeftWithPanel="True"
                  RelativePanel.AlignRightWithPanel="True"
                  RelativePanel.Below="TitleTextBlock"
                  ItemTemplate="{StaticResource ImageGridView_DefaultItemTemplate}"
                  HorizontalAlignment="Center"/>
    
  2. Запустите приложение и измените размер окна.Run the app and resize the window. Прокрутите вниз для просмотра других изображений.Scroll down to see more images.

    Изображения располагаются по центру, и приложение выглядит лучше.The images are centered, which looks better. Тем не менее полоса прокрутки выровнена по краю элемента управления GridView, а не по краю окна.However, the scroll bar is aligned with the edge of the GridView control instead of with the edge of the window. Чтобы устранить эту проблему, необходимо выровнять по центру изображения в элементе GridView, а не сам элемент GridView на странице.To fix this, you’ll center the images in GridView rather than centering GridView on the page. Это дополнительная задача, но в результате внешний вид приложения улучшится.It’s a little more work, but it will look better in the end.

  3. Удалите параметр HorizontalAlignment из предыдущего этапа.Remove the HorizontalAlignment setting from the previous step.

  4. На панели «Структура документа» щелкните правой кнопкой мыши ImageGridView.In Document Outline, right-click ImageGridView. В контекстном меню выберите Изменить дополнительные шаблоны > Изменить макет элементов (ItemsPanel) > Изменить копию.On the shortcut menu, select Edit Additional Templates > Edit Layout of Items (ItemsPanel) > Edit a Copy. Откроется диалоговое окно Создание ресурса.The Create Resource dialog box opens.

  5. В этом диалоговом окне замените значение Name (ключ) на ImageGridView_ItemsPanelTemplate, а затем нажмите кнопку ОК.In the dialog box, change the Name (key) value to ImageGridView_ItemsPanelTemplate, and then select OK.

    В раздел Page.Resources кода XAML добавляется копия ItemsPanelTemplate по умолчанию.A copy of the default ItemsPanelTemplate is added to the Page.Resources section of your XAML. (Как и раньше, GridView обновляется со ссылкой на этот ресурс.)(And as before, GridView is updated to reference this resource.)

    <ItemsPanelTemplate x:Key="ImageGridView_ItemsPanelTemplate">
        <ItemsWrapGrid Orientation="Horizontal" />
    </ItemsPanelTemplate>
    

    Мы уже использовали различные панели для расположения элементов управления в приложении, а в элементе GridView есть внутренняя панель для управления расположением его элементов. Just as you’ve used various panels to lay out the controls in your app, GridView has an internal panel that manages the layout of its items. Получив доступ к этой панели (ItemsWrapGrid), можно изменить ее свойства, чтобы поменять расположение элементов в элементе управления GridView.Now that you have access to this panel (ItemsWrapGrid), you can modify its properties to change the layout of items inside the GridView control.

  6. В ItemsWrapGrid задайте для свойства HorizontalAlignment значение Center.In the ItemsWrapGrid, set the HorizontalAlignment property to Center.

    ДоBefore

    <ItemsPanelTemplate x:Key="ImageGridView_ItemsPanelTemplate">
        <ItemsWrapGrid Orientation="Horizontal" />
    </ItemsPanelTemplate>
    

    ПослеAfter

    <ItemsPanelTemplate x:Key="ImageGridView_ItemsPanelTemplate">
        <ItemsWrapGrid Orientation="Horizontal"
                       HorizontalAlignment="Center"/>
    </ItemsPanelTemplate>
    
  7. Запустите приложение и измените размер окна еще раз. Run the app and resize the window again. Прокрутите вниз для просмотра других изображений.Scroll down to see more images.

Теперь полоса прокрутки выровнена по краю окна.Now, the scroll bar is aligned with the edge of the window. Отличная работа!Good job! Вы создали базовый пользовательский интерфейс для приложения.You’ve created the basic UI for your app.

Дальнейшие действияGo further

Создав базовый пользовательский интерфейс, можете ознакомиться с другими руководствами из этой серии.Now that you’ve created the basic UI, check out these other tutorials. В них также описывается использование примера PhotoLab.They’re also based on the PhotoLab sample.

Получите окончательную версию примера PhotoLabGet the final version of the PhotoLab sample

В этом руководстве не предусмотрено создание полноценного приложения.This tutorial doesn’t build up to the complete photo-editing app. Поэтому ознакомьтесь с окончательной версией, в которой присутствуют другие возможности, такие как пользовательская анимация и адаптивные макеты. So be sure to check out the final version to see other features, such as custom animations and adaptive layouts.



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

Реализация пользовательских интерфейсов в приложениях — трудная задача для разработчиков. Часто кажется, что нужна лишь идея, а реализовать её не составит труда. Но даже самым техничным инженерам может помешать отсутствие дизайнерского опыта. Из-за этого приложение может работать хуже — как минимум по части интерфейса.

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

Задача с точки зрения UI-дизайна

Отправная точка — это не только определение задачи, которую надо решить, но и её понимание с точки зрения ваших клиентов.

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

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

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

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

  • создание диаграммы пользовательских маршрутов;
  • изучение существующих дизайнерских шаблонов и стилей;
  • создание каркасов;
  • создание макетов.

Диаграмма пользовательских маршрутов

Сначала подумайте, как пользователи будут взаимодействовать с вашим приложением.

Как пользователи могут попасть в нужный им раздел? Можно ли на диаграмме потоков визуализировать все возможные маршруты пользователей по приложению?

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

Для удобства можно использовать различные готовые инструментарии, например, шаблоны блок-схем Miro, Milanote и Whimsical. Можно легко формировать маршруты с помощью трёх стандартных фигур:

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

Здесь проиллюстрирована диаграмма маршрутов пользователя на этапе предварительного дизайна. Исследовать другие распространённые маршруты и фильтровать широкий спектр скриншотов из iOS, Android и веб-приложений можно на Page Flows.

Изучение дизайнерских шаблонов и стилей

Планирование облегчает реализацию, поэтому всегда делите задачи на более мелкие части.

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

Дорабатывайте и совершенствуйте их, чтобы сделать ваше приложение как можно лучше.

Отличным источником информации будет UI Patterns. Это прекрасный ресурс, чтобы ознакомиться с наиболее часто используемыми шаблонами проектирования и способами их применения.

Если вы не определились с тем, какие компоненты вам понадобится включить в приложение, можете посетить дополнительные сайты вроде Behance и Dribbble. Там вы найдёте замечательные идеи, потому что многое является концептуальным, а не готовым продуктом.

Вот ещё несколько отличных ресурсов:

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

Создание каркасов

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

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

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

Также обязательно ознакомьтесь с Balsamiq, Whimsical и OmniGraffle. Эти компоненты предварительной сборки помогут в работе со структурой вашего приложения.

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

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

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

Как только иерархия установлена и структура каждого экрана определена, вы можете перейти к программному обеспечению, например, Figma или Sketch, для разработки своего продукта. Figma — облачный инструмент для UI-дизайна. Идеально подходит для реализации каркасов на этом этапе процесса.

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

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

Перевод статьи «How developers and tech founders can turn their ideas into UI design»

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

Читайте также








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



Описание пользовательского интерфейса
После установки программы на компьютер в меню






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



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






Возможности пользовательского интерфейса



Возможности пользовательского интерфейса
В окне редактирования можно отображать номера строк в колонке слева от текста сценария. За включение/выключение этого режима отвечает переключатель View Line Numbers в меню View. Для перехода к строке с заданным номером нужно нажать






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



Описание пользовательского интерфейса
После запуска Интернет-обозревателя Mozilla Firefox на экране отобразится ее пользовательский интерфейс, который показан на рис. 3.1.

Рис.






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



Настройка пользовательского интерфейса
Программа 3ds Max позволяет создавать новые и настраивать существующие меню и панели инструментов. Для этой цели служит окно Customize User Interface (Настройка пользовательского интерфейса) (рис. 1.36).

Рис. 1.36. Окно Customize User Interface (Настройка






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



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






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



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






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



Описание пользовательского интерфейса
Для запуска Microsoft Outlook 2007 выполните команду Пуск ? Все программы ? Microsoft Office ? Microsoft Office Outlook 2007. В результате откроется окно программы, изображенное на рис. 5.1.

Рис. 5.1. Программа Microsoft Outlook 2007В верхней части окна находится главное меню






Создание расширяемого приложения Windows Forms



Создание расширяемого приложения Windows Forms
Заключительным шагом будет создание приложения Windows Forms, которое позволит пользователю выбрать подключаемый блок с помощью стандартного диалогового окна открытия файла Windows. Создав новое приложение Windows Forms (с именем MyExtendableApp),






ГЛАВА 19. Создание окон с помощью System.Windows.Forms



ГЛАВА 19. Создание окон с помощью System.Windows.Forms
Если вы прочитали предыдущие 18 глав, вы должны иметь солидную базу дли использования языка программирования C# и архитектуры . NET. Вы, конечно же, можете применить полученные знания для построения консольных приложений следующего






Создание пользовательских элементов управления Windows Forms



Создание пользовательских элементов управления Windows Forms
Платформа .NET предлагает для разработчиков очень простой способ создания пользовательских элементов интерфейса. В отличие от (теперь уже считающихся устаревшими) элементов управления ActiveX, для элементов






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



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






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



Создание пользовательского интерфейса на базе HTML
Перед добавлением HTML-элементов в HTML-форму важно заметить, что Visual Studio 2005 позволяет редактировать содержимое файлов *. htm с помощью интегрированного HTML-редактора и окна свойств. При выборе DOCUMENT в окне свойств (рис. 23.5) вы






8.9. Защита пользовательского интерфейса



8.9. Защита пользовательского интерфейса

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






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



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














Этапы разработки пользовательского интерфейса | Проектирование человеко-машинных интерфейсов

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

Факторы влияния

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

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

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

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

Примечание: Здесь и далее речь идет о дизайне, ориентированном на пользователя (UCD), если явно не сказано об иной методологии.

Разработка интерфейса как процесс

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

  1. Проектирование
    • Функциональные требования: определение цели разработки и исходных требований.
    • Анализ пользователей: определение потребностей пользователей, разработка сценариев, оценка соответствия сценариев ожиданиям пользователей.
    • Концептуальное проектирование: моделирование процесса, для которого разрабатывается приложение.
    • Логическое проектирование: определение информационных потоков в приложении.
    • Физическое проектирование: выбор платформы, на которой будет реализован проект и средств разработки.
  2. Реализация
    • Прототипирование: разработка бумажных и/или интерактивных макетов экранных форм.
    • Конструирование: создание приложения с учетом возможности изменения его дизайна.
  3. Тестирование
    • Юзабилити-тестирование: тестирование приложения различными пользователями, в т.ч. и пользователями с ограниченными возможностями (Accessibility testing).

Рис. 1. Этапы разработки пользовательского интерфейса

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

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

Анатольев А.Г., 08.10.2014

Постоянный адрес этой страницы:

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

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

Люди не сядут в самое красивое кресло, если в нем неудобно сидеть.

Основные принципы разработки интерфейса

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

Этапы разработки интерфейса

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

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

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

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

Наши услуги:

  • дизайн пользовательского интерфейса;
  • веб-интерфейсы;
  • интерфейсы программ;
  • графические интерфейсы систем управления;
  • заставки программ и splash screen;
  • профессиональные наборы иконок для ПО.

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

Создание очень простых графических пользовательских интерфейсов с помощью Python с использованием appJar (интерфейс на основе Tkinter)

Хотя для python существует множество UI-фреймворков, большинство из них не так просты в использовании и реализации. По крайней мере, не для начинающего программиста на языке Python, поэтому сегодня мы хотим представить, как создать базовый пользовательский интерфейс с наиболее распространенные элементы пользовательского интерфейса например dropbox, радиобоксы, ввод текста, кнопки и т. д. с использованием пакета appJar для Python.

Что такое appJar

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

Графический интерфейс в Python довольно трудно реализовать самостоятельно, поэтому, если вы новичок, который хочет начать работать с python и создать свой собственный интерфейс для простых приложений, appJar — одно из самых надежных решений.

1. Установите appJar

Предпочтительный метод установки appJar через пипс. Откройте свой терминал и выполните следующую команду:

python -m pip install appjar

После установки вы можете обновить пакет, когда захотите:

python -m pip install appjar --upgrade

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

2. Использование AppJar

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

  • Разработан так, чтобы быть максимально простым, но при этом обеспечивать большую функциональность tkinter.
  • Предоставляет 3 функции для большинства виджетов:
    • add (имя, значение) это добавляет новый виджет (обычно с именем и значением)
    • set (name, value) это обновляет значение именованного виджета
    • get (name) это получает значение названного виджета
  • Использует сетку
  • При добавлении виджетов можно указать до 4 числовых «позиций»:
    • столбец — столбец для отображения, начиная с 0
    • ряд — строка, чтобы появиться, заявляя в 0
    • columnspan — сколько столбцов охватывать
    • rowspan — сколько строк пролегать вниз
  • Обеспечивает загрузку лишних битов и кусков вне ядра ткинтера
    • Часть этого была из превосходных ресурсов. http://effbot.org
    • Часть этого была из примеров slashdot о том, как решить общие проблемы
    • Часть этого была включена из модулей других людей:
      • Подсказка Майкла Ланге
      • Поддержка tkinter_png Иоганна Рохолла
      • Библиотека Мартина Дж. Фидлера NanoJPEG
  • Я пытался получить как можно больше функциональности в этой библиотеке, не требуя никаких других модулей

Инициализация приложения с пользовательским интерфейсом может быть такой простой, как следующий код:

# import the library
from appJar import gui
# create a GUI variable called app
app = gui()
# add & configure widgets - widgets get a name, to help referencing them later
app. addLabel("title", "Welcome to appJar")
app.setLabelBg("title", "red")
# start the GUI
app.go()

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

пример

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

# main.py
from appJar import gui
# Example of a semi-structured application
class MyApplication():
# Build the GUI
def Prepare(self, app):
# Form GUI
app.setTitle("Login Form")
app.setFont(16)
app.setStopFunction(self.BeforeExit)
# Add labels & entries
# in the correct row & column
app.addLabel("userLab", "Username:", 0, 0)
app.addEntry("username", 0, 1)
app.addLabel("passLab", "Password:", 1, 0)
app.addSecretEntry("password", 1, 1)
app.addButtons( ["Submit", "Cancel"], self. Submit, colspan=2)
return app
# Build and Start your application
def Start(self):
# Creates a UI
app = gui()
# Run the prebuild method that adds items to the UI
app = self.Prepare(app)
# Make the app class-accesible
self.app = app
# Start appJar
app.go()
# Callback execute before quitting your app
def BeforeExit(self):
return self.app.yesNoBox("Confirm Exit", "Are you sure you want to exit the application?")
# Define method that is executed when the user clicks on the submit buttons
# of the form
def Submit(self, btnName):
if btnName == "Submit":
username = self.app.getEntry("username")
password = self.app.getEntry("password")
# Very stupid login system (both strings equal to ourcodeworld)
if username and password == "ourcodeworld":
self.app.infoBox("Logged in", "You are now logged in !")
else:
self.app.errorBox("Error", "Your credentials are invalid !")
# Run the application
# `python main.py`
if __name__ == '__main__':
# Create an instance of your application
App = MyApplication()
# Start your app !
App. Start()

Затем запустите скрипт в вашем терминале, используя:

python main.py

Откроется новое окно с вашим основным пользовательским интерфейсом, как показано на следующем рисунке:

Проектирование пользовательского интерфейса — VisualPharm

услуги и цены

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

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

Платформы

Веб-приложения
Сложные интерактивные веб-сайты, интранет системы, удаленно управляемые приложения.

Настольные приложения
Любые приложения для операционных систем Windows и Mac OS.

Другие платформы
Сенсорные киоски, приложения для iPhone и Android.

Время

Сколько занимает прототипирование пользовательских интерфейсов? Это зависит от количества экранов. Обычно нам требуется два дня на создание одного экрана и еще пять дней на оформление всего заказа. Таким образом, на разработку пяти экранов понадобится 15 рабочих дней. Вам нужно быстрее? Свяжитесь с нами, и мы посмотрим, что мы можем сделать для Вас.

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

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

Цена

Стоимость прототипрования зависит от количества экранов.




Первый экран
Этот экран стоит дороже, поскольку является определяющим для всего приложения. При его разработке мы должны учитывать структуру всего приложения.
63 700 р.
Каждый последующий экран 28 600 р.
Иконки оцениваются отдельно

Вопросы по ценам и оплате

С чего начать

Для начала нам необходимо от Вас следующее:

Ваше приложение
Это может быть прототип, скриншоты, приложение или демо-версия.

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

Предоплата
Мы просим 50% предоплату за наши услуги.

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

Пользовательский интерфейс (UI) является важной частью любого программного продукта. Когда все сделано хорошо, пользователи этого даже не замечают. Когда все сделано плохо, пользователи не могут обойтись без этого, чтобы эффективно использовать продукт. Чтобы увеличить шансы на успех при создании пользовательских интерфейсов, большинство дизайнеров следуют принципам проектирования интерфейсов. Принципы проектирования интерфейсов представляют собой высокоуровневые концепции, которые используются для разработки программного обеспечения. В этой статье я поделюсь несколькими фундаментальными принципами.Они основаны на «10 эвристиках юзабилити для дизайна пользовательского интерфейса» Якоба Нильсена, «восьми золотых правилах дизайна интерфейсов» Бена Шнейдермана и «принципах дизайна взаимодействия» Брюса Тоньяццини. Большинство принципов применимо к любым интерактивным системам — традиционным средам графического интерфейса пользователя (таким как настольные и мобильные приложения, веб-сайты) и интерфейсам без графического интерфейса пользователя (например, системам голосового взаимодействия).

Принципы разработки пользовательского интерфейса:

  1. Предоставьте пользователям возможность управлять интерфейсом
  2. Сделайте удобное взаимодействие с продуктом
  3. Снизьте когнитивную нагрузку
  4. Сделайте пользовательские интерфейсы согласованными

1.Предоставьте пользователям возможность управлять интерфейсом.

Хорошие пользовательские интерфейсы создают ощущение
контроль в своих пользователях. Сохранение контроля над пользователями делает их удобными; Oни
быстро научится и быстро обретет чувство мастерства.

Сделайте действия обратимыми — прощайте

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

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

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

Создание удобного интерфейса

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

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

Четкий и наглядный рабочий процесс способствует завершению задачи.
Изображение предоставлено Designmodo.

Обеспечьте информативную обратную связь — будьте признательны

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

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

Обратная связь подтверждает, что действие выполнено успешно.
GIF от Колина Гарвена.

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

Пользователь видит зеленую галочку, когда требование пароля удовлетворено.
GIF от Эммануэля Торреса

Показать статус системы

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

Хороший интерфейс
может утешить пользователей, показывая прогресс, пока система выполняет задачу.
Dropbox показывает статус загрузки документа: текущий прогресс и
количество оставшегося времени.

Для пользователей с разным уровнем квалификации

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

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

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

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

Удалите все элементы, которые не помогают вашим пользователям

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

Хорошим примером приложения, которое следует подходу «меньше значит больше», избегая перегрузки интерфейса контентом или функциями, является iA Writer.

Изображение от iA Writer

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

Не запрашивать у пользователей данные, которые они уже ввели

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

Избегайте жаргона и системных терминов

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

Используйте повседневный язык, а не язык систем или разработчика.
Изображение от Think With Google

Применение закона Фиттса к интерактивным элементам

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

D — расстояние от начальной точки курсора; W — ширина цели (закон Фиттса). Изображение от Apple

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

Конструкция доступных интерфейсов

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

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

Используйте метафоры реального мира

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

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

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

Изображение Рамакриша

Инженер для ошибок

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

Хороший интерфейс содержит точные, вежливые и конструктивные сообщения об ошибках.

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

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

Защитить работу пользователя

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

3. Снизить когнитивную нагрузку

Когнитивная
нагрузка — это объем умственной вычислительной мощности, необходимый для использования продукта. Его
Лучше не заставлять пользователей слишком много думать / работать, чтобы использовать ваш продукт.

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

In
В 1956 году психолог Джордж Миллер познакомил мир с теорией
дробление. В своих работах Миллер говорит, что рабочая память человека может справиться с
семь плюс-минус два «фрагмента» информации, пока мы обрабатываем
Информация.

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

Проще сканировать и вводить блоки чисел, а не целые числа.

Уменьшить количество действий, необходимых для выполнения задачи

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

Признание превыше отзыва

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

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

Изображение предоставлено Google Hangouts

Повышение четкости изображения

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

При разработке макетов:

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

4. Обеспечьте согласованность пользовательских интерфейсов

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

Визуальная согласованность (стиль)

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

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

Функциональная согласованность (поведение)

Согласованность поведения означает, что объект должен работать одинаково во всем интерфейсе. Поведение элементов управления интерфейса, таких как кнопки и пункты меню, не должно изменяться внутри продукта. Пользователи не хотят сюрпризов или изменений в привычном поведении — они легко расстраиваются, когда что-то не работает. Это может помешать обучению и не дать пользователям почувствовать уверенность в согласованности интерфейса. Не вводите пользователя в заблуждение — сохраняйте последовательность действий, следуя «принципу наименьшего удивления», чтобы интерфейс вел себя так, как ожидают пользователи.

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

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

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

Корзина — это привычная терминология; торговый центр не является и может запутать интернет-покупателей.

Заключение

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

Что такое шаблоны проектирования пользовательского интерфейса (UI)?

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

Что такое шаблон дизайна?

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

Петрула Вронтикис, ведущий дизайнер и преподаватель дизайна; «Практикуйте безопасный дизайн: используйте концепцию». Шаблоны проектирования — это концепции, которые полностью конкретизированы и применимы более чем к одному проекту.

Автор / Правообладатель: Аарон Ротенберг. Условия авторского права и лицензия: Public Domain.

Пример использования шаблонов проектирования в программной инженерии.

Что входит в шаблон дизайна?

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

Автор / правообладатель: Неизвестен. Условия авторских прав и лицензия: Неизвестно

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

Создание шаблонов проектирования

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

  • Определить, какой шаблон проектирования будет использоваться для и четкой маркировки, которые используются в шаблоне
  • Убедитесь, что вы используете шаблоны проектирования управления версиями, чтобы последние версии шаблона всегда были предпочтительнее более ранних версий
  • Храните шаблоны проектирования где-нибудь, чтобы к ним могли легко получить доступ все соответствующие стороны — это означает либо в физическом месте, доступном для всех, либо на сервере, к которому может получить доступ каждый — шаблоны проектирования не имеют значения, если к ним нельзя добраться, когда они необходимы
  • Регулярно просматривайте шаблоны проектирования на предмет их полезности — являются они по-прежнему являются решением регулярно возникающей проблемы или от них можно отказаться? Например, если вы перешли на учетные записи в социальных сетях для приложений и веб-сайтов, возможно, потребуется удалить старые регистрационные формы из вашей библиотеки шаблонов дизайна.

Автор / Правообладатель: Джакомо Ритуччи. Условия авторского права и лицензия: CC BY-SA 3.0

Шаблоны проектирования могут иметь множество применений. Вот краткое изложение паттерна проектирования фабрики.

Преимущества шаблонов проектирования

Шаблоны проектирования полезны с точки зрения:

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

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

Недостатки шаблонов проектирования

Шаблоны проектирования также могут вызывать проблемы, если их использование не рассматривается внимательно, в том числе:

  • Они мешают надлежащему рассмотрению проблемы. Иногда проблема не в том, чем она кажется — поиск заранее созданного решения неправильной проблемы может увеличить время и стоимость жизненных циклов проектирования и разработки.
  • При определенных обстоятельствах они могут не иметь значения. Шаблоны проектирования программного обеспечения, в частности, могут не иметь значения, если стиль языка программирования отличается от предыдущего стиля, для которого был разработан шаблон. Есть много разных способов работы с вещами на разных языках программного обеспечения, и даже когда используется языковой независимый подход; уловить эти различия в шаблоне может быть сложно.
  • Они могут снизить эффективность конечного продукта или решения. То, что было лучшим решением в прошлом году, не обязательно будет лучшим решением в этом году.Даже если узор все же решает проблему — он может не решить ее наилучшим образом.
  • Они требуют управления. Чтобы паттерны дизайна были полезными, их нужно создавать тщательно (что требует времени и денег) и хранить таким образом, чтобы они были доступны каждому, кто в них нуждается. Кроме того, вам может потребоваться обучить людей использованию и созданию этих шаблонов.

Автор / Правообладатель: RegisFrey. Условия авторского права и лицензия: Public Domain.

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

Take Away

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

Ресурсы

Хотите создать шаблоны проектирования программного обеспечения? Вот вам хорошее руководство — http://code.tutsplus.com/articles/a-beginners-guide-to-design-patterns—net-12752

Здесь вы можете найти отличные примеры шаблонов дизайна пользовательского интерфейса — https://www.smashingmagazine.com/2009/06/10-ui-design-patterns-you-should-be-paying-attention-to/

Что такое геймификация? | Фонд дизайна взаимодействия (IxDF)

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

Как справиться с изменениями

В какую компьютерную игру вы впервые сыграли? Если вы начинаете вступать в средний возраст, скорее всего, это было что-то вроде Space Invaders или Pacman.Как эти игры сочетаются с современной классикой, такой как Grand Theft Auto или World of Warcraft? Между ними огромная разница, не правда ли? «Космические захватчики», возможно, казались невероятными, когда он был выпущен в 1978 году; сегодня это выглядит… ну, просто и неинтересно. Мы не будем безжалостными, потому что вряд ли справедливо сравнивать то, что произошло намного позже, но принцип все же верен.

Игровой процесс тоже изменился: «двигаться влево, двигаться вправо и стрелять», теперь можно выполнять невероятно сложные действия.В действительности, что не изменилось, так это то, что игроки могут почувствовать прилив адреналина. В конце 70-х это вылилось бы в ужас (да, это все еще форма развлечения), который чувствовал бы игрок, увидев, как последний захватчик на экране ускоряется и атакует ракеты в сверхопасных движениях (если вы никогда не играл в Space Invaders, вам нужно попробовать). Удерживайте эту мысль — теперь перенесите ее на любую игру, в которую вы, возможно, играли в начале 21-го, -го, -го века. Принципы развлечения и удовлетворения «Да!» об очистке уровня навыка и «О, черт!» о том, что это не так, как в этих играх.Тем не менее, различия велики, поэтому нам приходится иметь дело с совершенно другим набором измерений в 21, , веке.

Автор / Правообладатель: petsasjim1. Условия авторского права и лицензия: Добросовестное использование.

Pacman был одной из самых первых популярных компьютерных игр, и, хотя это все еще весело, современные игры намного сложнее и увлекательнее. Тем не менее, почему бы на мгновение не заняться ретро и не посмотреть, что общего в этих играх — или, может быть, это должно быть, почувствовать то, что они разделяют.Если вы думаете «Да!» чувство при прохождении уровня и «О, черт!» ощущение, что тебя убьют, в одном дырка.

Дизайн, ориентированный на игрока

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

«Игры создают ненужные препятствия, которые мы добровольно решаем преодолевать».
— Джейн МакГонигал, американский дизайнер игр и автор

Дизайн, ориентированный на игрока, расширяет дизайн, ориентированный на пользователя, на совершенно новый уровень; это процесс, который Джанаки Кумар и Марио Хергер придумали в своей книге « Геймификация в действии: разработка программного обеспечения для бизнеса ».Мы можем использовать дизайн, ориентированный на пользователя, для разработки приложений, насколько это возможно для разработки игр. Дизайн, ориентированный на игрока, признает, что в игру нужно играть, и рассматривает ключевые компоненты, позволяющие заставить игру работать на игрока. Вы можете увидеть эти элементы на диаграмме в самом начале.

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

Автор / Правообладатель: BagoGames. Условия авторских прав и лицензия: CC BY 2.0

Эта сцена из Farcry показывает, насколько игры должны были развиться после Pacman. Между прочим, они могут получить только «реаллера».

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

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

Дизайн, ориентированный на пользователя, использует критерии эффективности, результативности и удовлетворенности для оценки дизайна. Дизайн, ориентированный на игрока, добавляет вовлеченности в этот список. В то время как дизайн, ориентированный на пользователя, задает вопрос: «Может ли пользователь использовать продукт эффективно, результативно и удовлетворительно?», Дизайн, ориентированный на игрока, задает вопрос: «Хотят ли они его использовать в первую очередь?».

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

Традиционно заставлять рабочих читать С.Операционные процедуры (стандартные рабочие процедуры) для большинства западных организаций походили на вырывание зубов. Если вы помните, как работали в прошлом веке, вы можете вспомнить это — распечатку статей на полулегальном языке, которую вы подписали внизу, чтобы показать, что вы поняли, что, например, стоя под зубцами вилочного погрузчика, пока он снимать палитру было бы исключительно плохой идеей. С появлением Интернета электронное обучение сделало бы весь процесс электронным. В конце концов, что может быть лучше для вас как дизайнера, чем превратить дизайн, ориентированный на игрока, в мертвую и сухую работу, которую сотрудник, вероятно, только притворился бы читает? Если вы можете создать, скажем, дизайн модуля электронного обучения по разнообразию, который побуждает пользователей больше узнавать о культурах, пробуждая их аппетит к обучению и получению удовольствия от опыта, вы думаете, что ориентированы на игрока — поздравляем.Они могут перемещаться по виртуальному земному шару, скажем, набирая «паспортные» баллы, при этом идея состоит в том, что, узнавая все о культурном разнообразии, они наслаждаются опытом и чувствуют себя воодушевленными. Надеюсь, они забудут, что организация действительно имела над ними власть, чтобы заставить их перейти на электронное обучение. Такова магия, с которой может работать умело разработанный дизайн, ориентированный на игрока.

Автор / Правообладатель: Сергей Галенкин. Условия авторского права и лицензия: CC BY-SA 2.0

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

Кумар и Хергер дают нам разумный совет, когда мы размышляем над этими вопросами: «Геймификация — это продуманное введение техник геймификации, которые привлекают ваших пользователей. Геймификация — это не манипулирование пользователями, а их мотивация. В конечном счете, речь идет о хорошем дизайне, а хороший дизайн относится к пользователю с уважением.«Здесь мы можем вспомнить один из самых фундаментальных моментов, связанных с развлечениями: вы никогда не сможете заставить кого-то получить удовольствие или обмануть его; люди либо получат удовольствие, как естественную реакцию на то, что вы предоставляете, либо нет. И если они высмеивают , тогда это может быть довольно тревожным.

The Take Away

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

Ссылки и где узнать больше

Янаки Мифили Кумар и Марио Хергер, Геймификация в действии: разработка привлекательного программного обеспечения для бизнеса, The Interaction Design Foundation , 2014

Изображение героя: Автор / Правообладатель: Джанаки Кумар и Марио Хергер.Условия авторских прав и лицензия: CC-Att-ND

Что такое эмоциональный дизайн? | Фонд дизайна взаимодействия (IxDF)

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

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

Роберт Плутчик, идейный лидер в изучении эмоций.Перед своей смертью в 2006 году он как психолог написал 8 книг (и редактировал еще 7), почти 300 статей и 45 глав в эмоциональных исследованиях. Он имел докторскую степень, а также занимал профессорские должности в двух уважаемых университетах.

Психоэволюционная теория эмоций Плутчика

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

Автор / правообладатель: Machine Elf 1735. Условия авторских прав и лицензия: Public Domain.

Он поставил 10 пунктов относительно эмоций:

  • Эмоции встречаются на всех уровнях эволюции видов. Они одинаково применимы ко всем животным, как и к людям.
  • Эмоции у разных видов развивались по-разному и могут по-разному выражаться у разных видов.
  • Цель эмоций — эволюционная реакция на выживание, позволяющая организму выжить в условиях окружающей среды.
  • Хотя у разных организмов эмоции могут отображаться и вызывать с помощью различных механизмов, у эмоций есть общие элементы, которые можно идентифицировать у всех эмоциональных животных.
  • Есть 8 основных, первичных эмоций.
  • Другие эмоции — это просто комбинация этих 8 основных эмоций или производные от одной (или нескольких) этих основных эмоций.
  • Первичные эмоции «идеализированы», и их свойства должны быть выведены из свидетельств, но не могут быть точно определены полностью.
  • Каждая первичная эмоция связана с другой и является полной противоположностью этой пары.
  • Эмоции могут различаться по степени сходства друг с другом.
  • Эмоции существуют разной степени интенсивности.

Восемь основных эмоций, которые придумал Плутчик:

  • Гнев
  • Отвращение
  • Страх
  • Печаль
  • Предвкушение
  • Радость
  • Сюрприз
  • Доверие

Колесо эмоций

Из этой первоначальной эмоциональной теории Плутчик разработал Колесо эмоций.Он был разработан, чтобы помочь пользователю понять нюансы эмоций и то, как эмоции контрастируют друг с другом. Для этого он разработал как двухмерные, так и трехмерные модели. 3D-модель — это «конусообразная модель эмоций». Впервые они были описаны еще в 1980 году.

Автор / Правообладатель: xdxd_vs_xdxd. Условия авторских прав и лицензия: CC BY-SA 2.0

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

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

Базовые эмоциональные пары на

Основные эмоциональные пары следующие:

  • Радость и печаль
  • Доверие и отвращение
  • Страх и гнев
  • Сюрприз и ожидание

Эмоции на колесе Плутчика можно комбинировать следующим образом:

  • Предвкушение + радость = оптимизм (противоположность — неодобрение)
  • Радость + Доверие = Любовь (противоположность раскаяния)
  • Доверие + Страх = Покорность (его противоположность — презрение)
  • Страх + сюрприз = трепет (противоположностью агрессии)
  • Удивление + печаль = неодобрение (его противоположность — оптимизм)
  • Печаль + Отвращение = Раскаяние (противоположностью любви)
  • Отвращение + Гнев = Презрение (его противоположность — подчинение)
  • Гнев + Предвкушение = Агрессивность (противоположностью трепета)

Критика модели Плутчика

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

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

Тем не менее, принято считать, что Колесо эмоций является хорошей отправной точкой при рассмотрении того, какие эмоции может вызвать дизайн.Это не мешает UX-дизайнеру искать дополнительные инструменты для эмоционального дизайна.

The Take Away

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

Ссылки

Курс: Эмоциональный дизайн — как делать продукты, которые понравятся людям:
https: // www.Interaction-design.org/courses/emotional-design-how-to-make-products-people-will-love

Вы можете найти несколько эмоциональных моделей здесь, в Википедии — https://en.wikipedia.org/wiki/ Contrasting_and_categorization_of_emotions # Plutchik.27s_wheel_of_emotions

Вы можете найти отличные идеи для эмоциональных показателей для эмоционального дизайна в Smashing Magazine — http://www.smashingmagazine.com/2011/05/optimizing-emotional-engagement-in-web-design-through-metrics/

UX Review рассматривает эмоциональную карту для дизайна здесь — http: // theuxreview.co.uk/driving-more-valuable-customer-journeys-with-emotion-mapping-part-1/

Изображение героя: Автор / Правообладатель: shellgreenier. Условия авторских прав и лицензия: CC BY-NC-ND 2.0

10 основных советов по дизайну UI (пользовательского интерфейса)

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

И ключ к этому — в первую очередь и всегда думать о своем пользователе.

К счастью, хотя веб-дизайн — относительно новая дисциплина, он во многом обязан научным исследованиям взаимодействия человека и компьютера (HCI). И эти 9 удобных рекомендаций, взятых из исследования HCI, помогут вам сосредоточиться на своих пользователях при разработке веб-сайтов и приложений.

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

1. Знайте своих пользователей

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

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

Каковы их цели? Что мешает им достичь этих целей? Как веб-сайт может помочь им преодолеть эти проблемы или обойти их?

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

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

2. Определите, как люди используют ваш интерфейс

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

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

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

Примеры прямого взаимодействия

  • ‍Нажатие кнопки
  • Проведение карты
  • Перетаскивание объекта кончиком пальца

Примеры непрямого взаимодействия

  • Указание и щелчок мышью
  • Использование клавишных команд / горячих клавиш
  • Ввод в поле формы
  • Рисование на планшете Wacom

‍Иногда взаимодействие оказывается слишком простым.

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

3. Установите ожидания

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

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

Дизайн, оправдывающий ожидания

  • Выделение кнопки, соответствующей желаемому действию
  • Использование широко известного символа (например, корзины для кнопки удаления, знака плюса для добавления чего-либо или увеличительного стекла для поиска) в сочетании с копией
  • Выбор цвета с соответствующим значением (зеленый для кнопки «Пуск», красный для «Стоп»).

Установка ожиданий с копией

  • Копия кнопки очистки надписи
  • Обеспечение направленного / стимулирующего копирования в пустых состояниях
  • Выдача предупреждений и запрос подтверждения

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

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

4. Предвидеть ошибки

> Человеку свойственно ошибаться; прощать, божественный.

Александр Поуп, «Очерк критики»

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

  1. Предотвращение ошибок до их совершения
  2. Предоставьте способы исправить их после того, как они возникнут

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

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

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

Когда вы пишете сообщения об ошибках, убедитесь, что они делают две вещи:

  1. Объясните проблему. Например: «Вы сказали, что родились на Марсе, который люди еще не колонизировали. Пока что.»
  2. Объясните как исправить. Например: «Пожалуйста, введите место рождения здесь, на Земле».

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

Принцип предупреждения ошибки пользователя называется принципом poka-yoke. Poka-yoke — это японский термин, который переводится как «защита от ошибок».

5. Оставьте отзыв — быстро

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

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

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

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

Просто убедитесь, что все происходит быстро. Usability.gov определяет любую задержку более 1 секунды как прерывание. Более 10 секунд сбой.И последний щедрый: примерно для половины населения США 3 секунды достаточно, чтобы вызвать отказ.

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

6.Тщательно продумайте размещение элемента и размер

Закон Фиттса, фундаментальный принцип взаимодействия человека с компьютером (HCI), гласит:

Время обнаружения цели зависит от расстояния до цели и ее размера.

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

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

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

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

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

7. Не игнорируйте стандарты

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

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

Это практическое правило объясняет, почему в строке меню Документов Google представлены почти все те же параметры, что и в Microsoft Word до Vista:

‍ Строка меню Microsoft Word до Vista.

‍ Строка меню Документов Google, 2015

Это также объясняет, почему Pocket несколько лет назад пришлось изменить расположение кнопки архива в своем приложении для Android.

‍‍Изменение одной кнопки для большего соответствия шаблонам проектирования Android повысило вероятность продолжения использования Pocket у новых пользователей на 23%.

До осени 2013 года кнопка архивации находилась в верхнем левом углу экрана — именно там, где в спецификациях Android должна быть кнопка «Вверх». Pocket хотел сосредоточить внимание людей на опыте чтения, а не дублировать существующий аппаратный элемент управления, но непоследовательное размещение заставляло новых пользователей случайно закрывать и архивировать статью, которую они читали, вместо того, чтобы просто возвращаться к своему списку чтения, как ожидалось.

Это крошечное изменение «увеличило вероятность [новые пользователи] продолжать использовать Pocket с этого момента на 23%».

8. Сделайте ваши интерфейсы легкими для изучения

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

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

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

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

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

Совет

Pro: избегайте использования «узнать больше» и аналогичного неспецифического текста в ссылках и кнопках.Почему? Потому что он не сообщает пользователям, о чем они «узнают больше». Часто люди просто просматривают страницу в поисках ссылки, которая ведет их туда, куда они хотят перейти, и повторение 15 раз «узнать больше» не помогает. Это особенно актуально для пользователей программ чтения с экрана.

9. Упростите процесс принятия решений

Слишком большая часть Интернета кричит на нас: «Баннеры» внезапно расширяются, превращаясь в полноэкранную рекламу. Появляются модальные окна, умоляющие нас подписаться на блоги, которые у нас еще не было возможности читать.Межстраничные видеоролики останавливают нас, заставляя смотреть, как драгоценные секунды тикают очень-очень медленно. И даже не заставляйте меня начинать с виджетов, всплывающих окон, всплывающих подсказок…

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

Это влияет практически на все, что мы создаем:

  • Габаритные размеры
  • Меню навигации
  • Ценовые страницы
  • Индексы блога
  • Фиды контента

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

Совет

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

10. Слушайте данные

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

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

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

Так что настройте аналитику для своего сайта и регулярно анализируйте ее. Существует множество различных инструментов аналитики, но я рекомендую Google Analytics и / или Mixpanel, в зависимости от типа проекта.

Mixpanel фокусируется на событиях, поэтому он собирает данные на основе действий посетителя на вашем сайте, в то время как Google Analytics более ориентирован на поведение, давая вам время сеанса, источники трафика и т. Д. Хотя оба инструмента могут предоставлять обе формы данных, они действительно блестят в их сферах деятельности, поэтому выбирайте то, что лучше всего соответствует вашим потребностям.

Примечание: оба этих инструмента бесплатны для определенного количества точек данных. Webflow и аналогичные платформы обычно упрощают настройку аналитики за счет простого обмена ключами API.

Отличный интерактивный дизайн на сайтах Webflow

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

Расширяющийся круг навигации

Уолдо Брудрик создал забавное анимированное меню для мобильных устройств и компьютеров.При загрузке страницы кружок в правом нижнем углу читает «Меню». При щелчке он раскрывается, показывая доступные страницы, и меняется на X, позволяя пользователю закрыть меню и переориентировать контент.

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

Ты купишь той девушке выпить?

Дизайнер Шейн Херт собрал это удивительное интерактивное дерево решений, чтобы помочь вам решить, покупать ли девушке выпить или нет.Дизайн включает в себя тонну контента, но позволяет вам сосредоточиться на поставленной задаче: ответить на текущий вопрос и двигаться к своему решению. Как сделать интерфейс простым, Шейн.

Редизайн Uniqlo

Дизайнер

Тим Ноа однажды делал покупки на сайте Uniqlo, когда он понял, насколько сложна и уникальна их навигационная система. Вдохновленный, он решил «воссоздать это, но более удобным для планшетов и мобильных устройств».

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

Примечание: этот редизайн был личным проектом и никоим образом не связан с Uniqlo.

Ведущий спортивный ускоритель

В начале 2017 года дизайнер Яро Квастенберг запустил сайт, который действительно демонстрирует мощь визуального взаимодействия в Webflow: Lead Sport Accelerator.

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

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

Итак, основы вы изучили

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

Дизайн пользовательского интерфейса в современных веб-приложениях — Smashing Magazine

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

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

«То, как вы выполняете задачи с помощью продукта — что вы делаете и как он реагирует — это и есть интерфейс» — Джеф Раскин

Дизайн пользовательского интерфейса — это не только кнопки и меню; речь идет о взаимодействии между пользователем и приложением или устройством, и во многих случаях о взаимодействии между несколькими пользователями через это устройство. Это означает, что дизайн пользовательского интерфейса не о том, как выглядит продукт, а о том, как он работает.Речь идет не только о расположении кнопок и выборе цветов, но и о выборе правильных инструментов для работы. Нужны ли кнопки для конкретного интерфейса? Если да, то что должны делать эти кнопки? Что мне нужно предоставить пользователям, чтобы они могли понять, как работает мое приложение, и с легкостью выполнить то, что они хотят?

Дополнительная литература по SmashingMag:

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

Что делает отличный пользовательский интерфейс?

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

  1. Ясность : интерфейс позволяет избежать двусмысленности, делая все понятным с помощью языка, потока, иерархии и метафор для визуальных элементов.Понятные интерфейсы не нуждаются в руководствах. Они также гарантируют, что пользователи делают меньше ошибок при их использовании.
  2. Concision : Легко сделать интерфейс понятным, слишком уточнить и пометив все, но это приводит к раздуванию интерфейса, когда на экране одновременно отображается слишком много всего. Если на экране слишком много элементов, найти то, что вы ищете, будет сложно, и интерфейс станет утомительным в использовании. Настоящая проблема в создании отличного интерфейса — сделать его одновременно кратким и понятным.
  3. Знакомство : Что-то знакомое, когда вы вспоминаете предыдущую встречу с ним. Даже если кто-то впервые использует интерфейс, некоторые элементы могут быть вам знакомы. Вы можете использовать метафоры из реальной жизни, чтобы передать смысл; например, вкладки в виде папок часто используются для навигации по веб-сайтам и в приложениях. Люди узнают их как элементы навигации, потому что им знакома метафора папки.
  4. Отзывчивость : Это означает несколько вещей.Во-первых, отзывчивость означает скорость: хороший интерфейс не должен казаться вялым. Во-вторых, интерфейс должен обеспечивать хорошую обратную связь с пользователем о том, что происходит, и о том, успешно ли обрабатывается ввод пользователя.
  5. Согласованность : Сохранение единообразия интерфейса для всего приложения важно, поскольку оно позволяет пользователям распознавать шаблоны использования. Как только ваши пользователи узнают, как работают определенные части интерфейса, они могут применить эти знания к новым областям и функциям, при условии, что пользовательский интерфейс соответствует тому, что они уже знают.
  6. Aesthetics : хотя вам не нужно делать интерфейс привлекательным, чтобы он выполнял свою работу, если что-то хорошо выглядит, ваши пользователи будут проводить больше времени с вашим приложением; и более счастливые пользователи могут быть только хорошо.
  7. Эффективность : Время — деньги, и отличный интерфейс должен сделать пользователя более продуктивным за счет ярлыков и хорошего дизайна. В конце концов, это одно из основных преимуществ технологии: она позволяет нам выполнять задачи с меньшими затратами времени и усилий, делая большую часть работы за нас.
  8. Прощение : Каждый совершает ошибки, и то, как ваше приложение обрабатывает эти ошибки, будет проверкой его общего качества. Легко ли отменять действия? Легко ли восстановить удаленные файлы? Хороший интерфейс не должен наказывать пользователей за их ошибки, а должен предоставлять средства для их исправления.

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

Visual Interface Design Toolbox

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

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

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

Layout and Positioning

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

Форма и размер

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

Цвет

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

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

Контрастность

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

Текстура

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

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

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

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

Используйте пробел для построения отношений

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

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

Закругленные углы определяют границы

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

Обратите внимание, как закругленные углы в списке клиентов Ballpark определяют края каждой записи. В середине каждой записи также есть углы, но они используются как разделители между связанными данными, а не как края всего контейнера.

Передайте смысл с помощью цвета

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

Прямое внимание

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

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

Тени и затемненный фон для фокусировки

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

Подчеркнуть основные действия

Многие приложения имеют экраны, на которых отображаются основные и второстепенные действия. Например, если вы создаете проект в приложении для управления проектами, основная форма, вероятно, будет иметь поля для названия проекта, крайнего срока, уровня приоритета и т. Д.Внизу вы можете увидеть кнопку «Создать». Часто вы также видите кнопку или ссылку «Отмена» рядом с ней. Действие отмены менее важно, поскольку оно обычно не нужно вашим пользователям, поэтому вы можете уменьшить его визуальный «вес». Например, вы можете сделать «Создать» кнопку, а «Отменить» — простой гиперссылкой без визуального оформления. Это смещает фокус на основное действие и помогает пользователю быстрее найти его, когда он закончит заполнять форму.

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

Повышение эффективности со ссылками на блоки

Используйте дополненные ссылки на блоки для облегчения наведения курсора. Веб-приложения полагаются на строительные блоки HTML для их построения, что означает, что они интенсивно используют элемент привязки (более известный как «ссылка»). Элемент привязки по умолчанию является «встроенным», что в основном означает, что его ширина и высота покрывают только текст внутри него. Это, в свою очередь, означает, что размер интерактивной области ссылки равен размеру самого текста, который во многих случаях может быть слишком маленьким для пользователей, чтобы по нему было удобно нажимать.Мы можем применить padding к элементу привязки, чтобы сделать его больше.

Обратите внимание, насколько заметнее кнопка «Создать клиента» по сравнению с кнопкой «Отменить» в этой форме создания клиента Ballpark.
MobileMe использует дополненные ссылки на боковой панели навигации. Большие интерактивные области позволяют быстрее навести на них курсор мыши, что повышает удобство использования.

Для ссылок в списке, например на боковой панели, превращение якорей в «блоки» может быть даже лучшим решением. Вы можете указать тип элемента с помощью свойства CSS display; поэтому указание привязки как «блока» превратит его в элемент блока, что означает, что его высота и ширина больше не будут соответствовать размеру текста внутри него, а вместо этого будут охватывать всю ширину его контейнера по умолчанию.Это идеально подходит для списков ссылок на боковой панели.

Используйте глаголы как метки

При использовании вашего приложения люди всегда будут искать что-то делать. Это означает, что они будут думать глаголами. «Я хочу сохранить этот файл» или «Я хочу обновить эту запись». При создании диалоговых окон или любого другого типа подсказок пользователя используйте глаголы, а не восклицания, такие как «Да», «Нет» и «Хорошо». Когда пользователь видит такие варианты, как «ОК» и «Отмена», ему нужно будет прочитать сообщение выше, чтобы понять, что его просят сделать.Однако, если вы представляете варианты выбора в виде глаголов, например «Сохранить», «Не сохранять» и «Отмена», вы делаете диалоговое окно и выбор понятными для пользователя, даже не читая сопроводительное сообщение.

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

Автофокус / повторный фокус ввода

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

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

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

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

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

Twitter показывает кнопки «Ответить» и «Добавить в избранное» при наведении курсора на каждое сообщение.
Basecamp позволяет вам прикреплять несколько файлов к сообщению, но одновременно показывает только одно поле вложения.

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

Расширяющиеся формы

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

Ярлыки внутри полей ввода

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

MobileMe сжимает экран входа в систему, перемещая метки текстовых полей внутри самих текстовых полей.

Контекстно-зависимые элементы интерфейса

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

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

Значки

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

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

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

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

Индикаторы загрузки отлично подходят для короткого времени ожидания, но что, если для выполнения действия требуется минута или больше? Хотя вы ничего не можете сделать с самим временем загрузки (при условии, что вы уже сделали все, что в ваших силах), вы можете что-то сделать с ожиданием ваших пользователей.Найдите время, чтобы развлечь или проинформировать. Например, многие приложения отображают интересные подсказки и подсказки во время длительного ожидания. Если пользователь не делает ничего продуктивного, по крайней мере, он может узнать что-то новое.

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

Сделайте его отзывчивым с помощью состояний нажатых кнопок

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

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

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

Полезные пустые состояния

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

Рекламируйте функции

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

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

Undo

Одна из наиболее востребованных функций настольных приложений — это надежный ярлык отмены. Случайно изменили форматирование диаграммы, над которой вы работаете? Нет проблем: нажмите Ctrl / Cmd и Z на клавиатуре, и приложение сделает шаг назад и восстановит документ в его состоянии до вашего последнего действия. Отменить — важный инструмент в упрощении интерфейсов, и его также можно использовать в веб-приложениях. Например, вы можете либо интегрировать знакомое сочетание клавиш, либо показывать временные уведомления со ссылками для отмены в них.

Yammer показывает полезное примечание под основной областью ввода относительно функции «следовать». Когда пользователи прочитают его, они могут закрыть его с помощью маленького крестика справа.
Writeboard позволяет восстановить вашу работу в течение двух месяцев после ее удаления.

Восстановить

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

Диалоги подтверждения

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

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

Заключение

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

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

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

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

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


Кэти Уолрат

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

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

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

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

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

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


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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *