Как сделать интерфейс для программы
8 этапов процесса разработки интерфейса мобильного приложения
От переводчика: Роман Гапонов — сооснователь компании Django Stars, которая занимается разработкой веб- и мобильных приложений. Основываясь на личном опыте и опыте своей компании, Роман написал статью о процессе разработки пользовательского интерфейса. Изначально она была размещена на Medium, на английском языке. Перевод этой статьи публикуется нами на Хабре.
Немного приятного: в этой статье (а это уже второй материал о мобильной разработке, первый здесь) есть своеобразная пасхалка, которая позволяет получить скидку на курс Skillbox и агентства Agima по мобильной разработке. Это ребус, который при расшифровке даст слово или название решения из сферы разработки мобильных интерфейсов. Скидка за угаданный ребус — 10%. Ребусы есть и в других наших статьях из этой серии. Скидки суммируются, и если собрать их все, можно получить курс за смешную цену.
Создание концепции
Самый первый этап — это когда идея уже есть, а разработчик имеет все необходимые инструменты для ее реализации. Но с чего нужно начинать? Мы начинаем с изучения ниши, целевой аудитории и кейсов продукта. Это неплохо помогает понять будущих клиентов сервиса и создать пользовательский интерфейс, который оптимален для каждого из них.
На этом этапе могут быть затронуты и такие аспекты, как размеры и расположение кнопок и форм, шрифты и многие другие аспекты структуры интерфейса. Давайте сравним финтех-приложение и сервис такси-компании.
Финтех-приложение. Много иконок, они не слишком крупные, но работать с ними удобно. Обилие разнообразных функций
Приложение одного из такси-сервисов. Кнопок не так много, и они большие, чтобы сложно было промахнуться
В первом случае должно быть много полей, списков, графиков и переходов. Во втором случае мы видим большие элементы управления, которые просто использовать во время поездки, — и такие вещи лучше понимать уже на этом этапе.
Брейнсторминг и эскизы
Как только концепция проекта ясна, двигаемся к следующему этапу — брейнстормингу. Он нужен, чтобы превратить идею интерфейса в реальность. Мы в Django Stars берем ручку и лист бумаги — это быстрее, чем использование таких продвинутых инструментов, как Balsamiq Mockups, Sketch, Photoshop и InVision.
Диаграмма переходов
Создание эскиза дает нам структуру интерфейса. Но как пользователь должен взаимодействовать с ним? Здесь поможет User Flow Diagram. Она проиллюстрирует логику продукта, показав всевозможные способы взаимодействия с интерфейсом, дорожную карту этих взаимодействий и состояние интерфейса на каждом этапе.
Утверждение структуры и диаграммы переходов
Как только мы закончили с эскизами интерфейса и диаграммой переходов, необходимо, чтобы клиент их утвердил. Структура и переходы — основа всей дальнейшей работы с интерфейсом, поэтому мы не двигаемся дальше без получения подтверждения. На этом этапе гораздо проще внести какие-то изменения в будущий интерфейс, а значит, сэкономить и время, и деньги заказчика.
В качестве примера можно взять интернет-магазин или систему управления продажами. Меняя структуру такого проекта после внедрения дизайна, можно попасть в ситуацию, когда ломается цветовая схема сайта, поскольку элементы интерфейса и некоторые другие его части были изменены. В этом случае вам, вероятнее всего, придется отказаться от изменений. Либо всю работу нужно будет переделывать с нуля.
Выбор стиля интерфейса
Когда клиент все утверждает — можно двигаться дальше. Что будем делать? Выберем стиль интерфейса. Есть множество вариантов: от минимализма и Metro до material design и скевоморфизма. На этом этапе мы просим клиентов прислать несколько ссылок на примеры стиля интерфейса, который им нравится, а также спрашиваем об их планах на ближайшее будущее продукта. Мы уделяем внимание текущим трендам, масштабированию интерфейса, определяем время, которое необходимо на разработку и внедрение дизайна.
Подтверждение стиля
На этом этапе мы рассказываем клиенту о том, как видим все сами, а также объясняем, почему приняли то или иное решение. Он может не соглашаться с некоторыми моментами в самом начале, поскольку пока не получил полной информации об интерфейсе — у него не сформировалось представление и еще нет понимания возможных проблем. Цель — завершить обсуждение принятием варианта, который удовлетворяет и нас, и клиента.
Курс создан силами Skillbox и Agima. 4-месячная программа обо всех инструментах, без которых невозможна разработка мобильных продуктов.
Прототипирование, дизайн и их демонстрация
Как только все эти этапы завершены, мы готовы к тому, чтобы разрабатывать и показывать заказчику полную версию дизайна. Демонстрация может выглядеть по-разному. Основываясь на собственном опыте, мы рекомендуем придерживаться следующего.
Самая быстрая форма реализации ваших идей. Это низкоуровневая демонстрация дизайна. Однако такой способ позволяет показать структуру и описание взаимодействия пользователей с разрабатываемым продуктом. Выполняется в форме блочного интерфейса в оттенках серого.
Макетная демонстрация позволяет продемонстрировать проект дизайна, приближенный к реальности. Здесь все элементы и контент статичны, но воспринимается такая форма нагляднее предыдущей. И создать презентационную модель можно достаточно быстро.
Это уже детализированный прототип финального продукта. Он эмулирует взаимодействие пользователя с интерфейсом. Например, позволяет кликать по элементам управления, использовать формы и проверять другие моменты, включая анимацию. Тем не менее создание такого прототипа — процесс, который требует большого количества времени.
Так. Пришло время ребуса, вы попали именно в то место, где можно найти скидку. Учитывайте, что английский здесь может мешаться с русским, и главное — не забывайте, что мы будем тщательно следить за комментариями и удалять из них подсказки и ответы! Промослово, зашифрованное в ребусе, следует назвать, когда с вами свяжется наш менеджер после того, как вы отправите заявку на курс. Скидки за разгаданные ребусы суммируются между собой (с учетом этой статьи есть четыре ребуса), но не со скидками на сайте. Слишком медлить не стоит — промо работает до 30 августа 2018 года.
А это уже видеозапись взаимодействия пользователя с приложением. Создание демонстрационной модели такого типа требует максимального количества времени, ведь необходимо не только сделать прототип, но еще и записать на видео работу с ним. Тем не менее это очень наглядная модель.
Утверждение дизайна
Есть люди, которые четко представляют себе, как должен выглядеть дизайн, и есть те, кто лишь предполагает. Как бы там ни было, у каждого свое видение. На этом этапе клиент видит результат и обсуждает с нами важные моменты, а мы вносим необходимые коррективы.
В качестве вывода
Поэтапная разработка интерфейса позволяет быстро добраться до конечной цели. Все это экономит время, причем в процессе разработки можно без проблем вносить изменения. Также такой способ работы значительно снижает вероятность появления неожиданных правок от клиентов.
Руководство: Создание пользовательского интерфейса Tutorial: Create a user interface
В этом руководстве вы узнаете, как создать базовый пользовательский интерфейс для программы редактирования изображений, используя следующие инструменты: In this tutorial, you’ll learn how to create a basic UI for an image editing program by:
Программа редактирования изображений содержит две страницы. 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. Получение начального кода на GitHub Part 0: Get the starter code from GitHub
В этом учебнике мы начнем с упрощенной версии примера PhotoLab. For this tutorial, you’ll start with a simplified version of the PhotoLab sample.
Далее необходимо клонировать или скачать пример. 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:
Если вы знакомы с GitHub: If you are familiar with GitHub:
a. a. Клонируйте главную ветвь репозитория локально. Clone the main branch of the repo locally.
Часть 1. Добавление элемента управления TextBlock с помощью конструктора XAML Part 1: Add a TextBlock control by using XAML Designer
Visual Studio предоставляет несколько средств для удобства создания пользовательского интерфейса XAML. Visual Studio provides several tools to make creating your XAML UI easier.
Ниже представлен пользовательский интерфейс 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:
Дважды щелкните файл 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.
Прежде чем продолжить, необходимо внести некоторые изменения в Visual Studio: Before going further, you need to make some adjustments to Visual Studio:
Оба параметра находятся в верхней части окна, как показано здесь. 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.
На панели инструментов разверните пункт Общие элементы управления 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.
Код 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.
В дальнейших шагах мы обновим эти значения. In the next steps, you’ll update these values.
На панели Свойства измените значение поля Имя элемента управления 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.)
В разделе Общие замените значение поля Текст на Коллекция. Under Common, change the Text value to Collection.
Теперь код XAML в редакторе XAML будет выглядеть следующим образом. In the XAML editor, your XAML will now look like this.
Для размещения элемента управления 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.
На панели Свойства введите 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.
На панели «Структура документа» правой кнопкой мыши щелкните 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.
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 с помощью редактора XAML Part 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:
До Before
После After
Под элементом 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.
Добавьте этот код XAML Add this XAML
После элемента TextBlock After TextBlock
Дополнительные сведения о присоединенных свойствах панелей см. в статье Панели макета. For more info about panel attached properties, see Layout panels.
В конце метода GetItemsAsync добавьте следующую строку кода. At the end of the GetItemsAsync method, add this line of code.
На этом шаге для свойства 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.
Часть 3. Добавление объекта DataTemplate для отображения данных Part 3: Add a DataTemplate object to display your data
Чтобы добавить шаблон данных в представление сетки, сделайте следующее: To add a data template to a grid view:
Откройте файл MainPage.xaml. Open MainPage.xaml.
Добавьте этот код XAML Add this XAML
После последней записи xmlns: After the last xmlns: entry
Подробнее о пространствах имен XAML см. в разделе Пространства имен XAML и их сопоставление. For more info about XAML namespaces, see XAML namespaces and namespace mapping.
На панели «Структура документа» щелкните правой кнопкой мыши 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.
В этом диалоговом окне замените значение 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:
В ресурсе 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
После After
Дополнительные сведения о макетах Grid см. в статье Панели макета. For more info about Grid layouts, see Layout panels.
а. 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.
Дополнительные сведения о макете StackPanel см. в статье Панели макета. For more info about StackPanel layout, see Layout panels.
Окончательный шаблон The final template
Запустите приложение, чтобы просмотреть элемент управления 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:
На панели «Структура документа» щелкните правой кнопкой мыши 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.
В этом диалоговом окне замените значение 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.
Стиль 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.
До Before
После After
До Before
После After
Запустите приложение и посмотрите, как оно выглядит на данном этапе. 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
Дополнительные сведения о выравнивании см. в статье Выравнивание, поля и заполнение. 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:
До Before
После After
Запустите приложение и измените размер окна. Run the app and resize the window. Прокрутите вниз для просмотра других изображений. Scroll down to see more images.
Удалите параметр HorizontalAlignment из предыдущего этапа. Remove the HorizontalAlignment setting from the previous step.
На панели «Структура документа» щелкните правой кнопкой мыши 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.
В этом диалоговом окне замените значение 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.)
До Before
После After
Запустите приложение и измените размер окна еще раз. 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.
Получите окончательную версию примера PhotoLab Get 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.