Как создать свой интерфейс для виндовс
Обновлено: 07.07.2024
Pixate — платформа для прототипирования приложений, которая обладает большим набором функций. Вы можете создавать слои, добавлять интерактив и анимации и, что самое главное, — посмотреть, как будет выглядеть ваш дизайн в жизни. С помощью плеера Pixate вы сможете полистать готовый прототип и покликать по нему на смартфоне (поддерживаются платформы Android и iOS). Ещё один плюс программы — научиться работать в ней довольно просто. В итоге вы сможете создать дизайн приложения, не написав ни строчки кода.
2. Marvel
Можно создавать дизайн приложения сразу в Marvel или экспортировать свои макеты из Photoshop или Sketch. С готовым оформлением можно сделать прототип (добавить анимации и переходы), чтобы посмотреть, как приложение или веб-страница будет выглядеть для пользователя. Есть возможность делиться проектами и получать обратную связь в режиме реального времени.
3. iPhone Mockup
Поможет быстро и просто создать иллюстрацию или скетч мокапа iPhone. Всё, что нужно сделать, — методом drag-and-drop перетащить необходимые элементы интерфейса. Сервис не годится для серьёзной разработки, но если вы хотите быстро зафиксировать свою идею или поделиться с кем-то набросками, iPhone Mockup для этого вполне подойдёт.
4. Pencil Project
Pencil Project — бесплатный инструмент для прототипирования с открытым исходным кодом. Позволяет создавать макеты веб-страниц и мобильных приложений. Есть встроенные коллекции с популярными формами, блок-схемами и элементами интерфейсов.
5. Form
Приложение для создания прототипов и их просмотра на iPhone или iPad через Wi-Fi или USB.
6. Use Your Iinterface
Огромная коллекция анимированных интерфейсов. Заходим, вдохновляемся интересными решениями и применяем идеи на практике.
7. UX Myths
Как уже понятно из названия, на этом сайте собраны самые популярные заблуждения в области проектирования пользовательских интерфейсов — с подробными объяснениями, ссылками на исследования и полезные материалы.
8. Mobile Patterns
9. Good UI
Ещё один полезный ресурс с теорией дизайна интерфейсов (одно «но» — все материалы на английском). Здесь собрано 75 идей по оформлению веб-страниц. Все рекомендации проверены A/B-тестированием.
GUI расшифровывается как graphical user interface, что по-русски переводится как графический интерфейс пользователя. Главное отличие GUI-приложения от консольного заключается в способе взаимодействия пользователя с приложением.
В консольном приложении общение с пользователем осуществляется в последовательной манере. То есть грубо говоря:
- Пользователь что-то ввел
- Приложение что-то ответило
- Пользователь снова что-то ввел
- Приложение снова что-то ответило
- и т.д.
И перескочить со 2-го пункта на 5-ый, если программой этого не было предусмотрено, при всем желании невозможно. Все очень строго.
В графическом же приложении появляются так называемые формы (или окна, кому как больше нравится), а с ними в придачу, всякие кнопки, поля для ввода, календари, таблицы и т.п.
Необходимо: разработать интерфейс для задачи: “Студенты Иванов и Петров за время практики заработали определенную сумму. Кто из них заработал большую сумму? Определить средний заработок”.
Создаем проект
Выбираем Файл/Создать/Проект, затем Приложение Windows Forms, жмем Ok
Откроется редактор формы:
Добавляем поля для ввода
На форму надо чего-то добавить. По задаче у нас два параметра, значит придется добавить два поля для ввода. Откроем панель с элементами и для удобства зафиксируем ее с помощью пипки в верхнем правом углу.
Если у вас вдруг не видно панели с элементами, включите ее через пункт меню Вид/Панель элементов
Теперь добавим элементы на форму, нам потребуется два элемента вида TextBox (поля для ввода текста)
Чтобы было понятно чего в них вводить добавим подписи (элементы типа Label)
Но у этих подписей вместо текста написано label1 и label2, поменяем их свойства. У всех элементов типа Label есть свойство Text, которое определяет чего в них писать. Выделим label1 кликнув на него, он обведется пунктирной рамкой
в правом нижнем углу найдем панель свойств (если ее не видно нажмите F4). Среди множества свойств найдем то что называется Text и введем в него корректный текст.
Закончив вводить переключимся на форму, кликнув на нее, если все было сделано корректно текст label1 заменится на руб. заработал Петров
Повторим ту же процедуру для label2
- выберем на форме
- в окне свойств в поле Text введем руб. заработал Иванов
- снова переключимся на форму
Работаем с кнопкой
Теперь давайте добавим кнопку, и изменим размеры формы, а то что-то сильно много пустого места:
кнопка уже штука поинтереснее, давайте добавим ее какую-нибудь реакцию на щелчок. Выделим кнопку и щелкнем по ней два раза.
Нас перекинет в редактор кода, который будет выглядеть как-то так:
Мы только что создали обработчик события щелчка мыши по кнопке. В который можно добавить какую-нибудь реакцию на щелчок.
[Как работает обработчик]
Если вам не интересно как, смело пропускайте данный раздел =)
Что же тут произошло? А произошло тут создание функции (то есть Visual Studio за нас написала код, нам никто не мешает его ручками писать) с сигнатурой обработчика системного события. У функции два аргумента:
- object sender – объект от которого пришло событие, в нашем случае это будет кнопка button1
- EventArgs e – специфически свойства события, в клика нет особых свойства, а вот всякие события типа клика мыши или нажатия кнопки могут содержать дополнительную информацию (см. выше про системные события)
Далее студия привязала данную функцию к кнопке. Если смотреть через интерфейс (переключимся на форму нажав Shift+F7), то эта функция будет указана в качестве значения свойства Click в разделе Событий.
Если же смотреть еще глубже можно открыть, автогенерируемый файлик для формы Form1.Designer.cs
Там мы увидим код:
И если раскрыть узел Код автоматически созданный конструктором, то увидим сгенерированный код, который в явном виде описывает положение всех объектов на форме, а также привязанные к ним свойства. Приведу часть кода:
но ладно, вернемся к нашему обработчику.
Пишем обработчик
Если в какой-то момент времени вы потеряетесь среди файлов, то вы всегда можете дважды кликнуть на файл Form1.cs в обозревателе решений
а затем нажать F7 чтобы переключится непосредственно к коду формы.
И так, у нас там имеется код:
Запустим приложение и проверим кнопку
Читаем значения из TextBox
Переключимся на форму, нажав Shift+F7. Выберем первое поле для ввода.
Чтобы получить содержимое TextBox надо сначала узнать имя элемента. Заглянем в панель Свойств, и найдем там свойство (Name). Это и есть его имя. По умолчанию там стот textBox1, поменяем его на что-то более осознанное (txtPetrovSum):
Теперь мы сможем обратиться к элементу по этому имени. Давайте теперь еще и поменяем свойство Name у второго textBox2. Поменяем его на txtIvanovSum. По итогу будем иметь следующие названия у элементов:
переключимся обратно на код, нажмем F7, либо два раза щелкнем на кнопку.
Запускаем и проверяем:
Можно собрать какую-нибудь фразу:
Добавив “\n” мы сможем вывести текст в две строки. Получится:
Но это мы все в игрушки играемся, давайте все таки уже задачу решим
Подключаем старый код
Для лучше переносимости, рекомендую уже реализованное решение исходной задачи сначала декомпозировать, и тогда вам будет достаточно скопировать класс с логикой. Я это уже сделал с задачей про студентов еще пару статей назад, поэтому я возьму код класса Logic
и вставлю этот класс вместе со всем его содержимым после класса Form1 в файле Form1.cs. Вот что у меня получится:
Очень важно вставить код класса ПОСЛЕ класса Form1, иначе получите страшную ошибку:
Внедряем логику
правим наш обработчик клика на кнопку:
Запускаем и проверяем:
А! Нам же еще среднее арифметическое надо вывести:
еще один запуск:
Обработка ошибок
Может вы уже столкнулись с этим, но если запустить приложение, ничего не ввести и просто нажать кнопку, программа выдаст ошибку:
появление ее закономерно, программа пытается с помощью метода int.Parse преобразовать строку в число, но в строке пусто и преобразовывать нечего. Аналогичная ошибка появится если ввести буквы вместо цифр.
Наверное было бы здорово, просто проигнорировать нажатие кнопки с некорректными данными, для этого нам надо заставить программу не падать. Делается это не сильно сложно, путем добавления конструкции для перехвата ошибок, Именуется она try-catch, и выглядит так:
правда если просто вставить код в таком виде то он будет ругаться на переменные ivanovSum и petrovSum, после блока try/catch. Это происходит потому что переменные инициализируются внутри блока try, надо их вынести вовне. Придется указать тип явно.
Каких только экспериментов с Windows различных версий мы не проводили в материалах 3DNews! Мы проверяли на практике необычные техники сброса пользовательского пароля в операционной системе, рассказывали о самостоятельной сборке Live CD/USB-дистрибутивов ОС, способах отключения «шпионских» функций телеметрии и защиты данных, выуживали сведения о скрытых настройках и малоизвестных возможностях платформы, а также об эффективных и надёжных методах восстановления Windows при возникновении сбоев. Пришло время продолжить былые эксперименты и поделиться информацией о способах модификации интерфейса Windows 10, самой распространённой на сегодня системы для персональных компьютеров. Цель не то чтобы благородная, зато интересная.
Дисклеймер. Использование перечисленных в заметке инструкций и утилит, как правило, влечёт изменение системных файлов и библиотек Windows 10, вмешательство в которые может нарушить стабильную работу ОС и привести к сбоям. Воспроизводить описанные ниже действия можно исключительно по собственной инициативе и на свой страх и риск. Во избежание неприятностей настоятельно рекомендуем создать резервную копию операционной системы и данных. Редакция не несёт никакой ответственности за любые возможные последствия.
С помощью утилиты Taskbar stats можно расширить информативность панели задач Windows 10 и разместить на ней индикаторы загруженности процессора и оперативной памяти, скорости входящих и исходящих сетевых соединений, а также сведения об операциях с дисковым накопителем. Всё, что необходимо сделать, — это установить приложение (по ссылке находится страничка приложения на Github) и затем в контекстном меню панели задач включить отображение подходящих индикаторов. Распространяется Taskbar stats бесплатно и потребляет минимум ресурсов.
Тем, кому индикаторы Taskbar stats кажутся излишне аскетичными, можем посоветовать утилиту XMeters. Она решает аналогичные задачи, но по части визуализации данных намного интереснее, да и настроек в ней больше. XMeters представлена в двух редакциях — Free и Professional, последняя стоит 5 долларов США. Расставаться с кровными с ходу не стоит, так как возможностей бесплатной версии программы вполне достаточно для оперативного мониторинга системных ресурсов компьютера.
Научить Windows 10 автоматически центрировать иконки приложений в панели задач позволяет крохотная и занимающая около сотни килобайт утилита CenterTaskbar. Программа использует API Microsoft UI Automation, умеет взаимодействовать с размещённой вертикально панелью задач, поддерживает мультимониторные системы и распространяется с открытыми исходными кодами.
По умолчанию часы Windows 10 демонстрируют в правом нижнем углу рабочего стола только текущее время и дату, которые посредством нехитрых манипуляций с настройками ОС можно дополнить информацией о дне недели. Проделывается данная операция в панели управления Windows 10, в настройках региональных параметров и формата даты.
Достаточно, руководствуясь приведёнными выше скриншотами, добавить в поле «Краткая дата» символы dddd и нажать клавишу «Применить». В результате размещённые в области уведомлений часы дополнятся сведениями о текущем дне недели. Самое то для забывчивых пользователей и тех, кто привык вдумчиво наблюдать за течением времени.
Кто устал от бесконечных экспериментов разработчиков Windows 10 с плиточным меню «Пуск», тот может вернуть в операционную систему классическое оформление этого элемента интерфейса. Повернуть время вспять позволяет утилита Classic Shell, в один клик мыши возвращающая прежнее древовидное меню «Пуск», которое было в Windows 7 и более ранних версиях ОС. Приложение также дает возможность поиграться с настройками панели задач, контекстного меню и прочими элементами рабочего окружения Windows 10. Единственное но: поскольку программа Classic Shell не обновлялась более трёх лет (последняя версия была выпущена в декабре 2017 года), некоторые функции в ней уже не работают. Тем не менее со своей основной задачей приложение справляется отлично.
В этом деле можно положиться на разработанный командой Microsoft фирменный набор приложений PowerToys, добавляющий в «десятку» массу полезных функций и инструментов. Среди них: цветоподборщик, возможность предварительного просмотра значков SVG-файлов (.svg) и документов Markdown (.md), расширение оболочки Windows 10 для быстрого изменения размера изображений, диспетчер клавиатуры, средства мгновенного запуска программ и массового переименования файлов, а также многие другие функции. Интересной особенностью PowerToys является диспетчер окон FancyZones, который позволяет легко создавать сложные макеты окон и быстро размещать окна в этих макетах. Внимания заслуживают также всплывающие подсказки по сочетаниям клавиш, появляющиеся, когда пользователь удерживает клавишу Windows более одной секунды. При этом отображаются все доступные сочетания клавиш для текущего состояния рабочего стола.
Для любителей копнуть поглубже предназначены всевозможные утилиты-твикеры, позволяющие добраться до самых потаённых настроек операционной системы. В глобальной сети представлено огромное множество таких программ. Из заслуживающих доверия выделим Ultimate Windows Tweaker, открывающий доступ более чем к двум сотням скрытых параметров ОС и позволяющий конфигурировать едва ли не все элементы пользовательского интерфейса «десятки» — от меню «Пуск» и панели задач до настроек проводника и рабочего стола. Как правило, для активации тех или иных функций твикеры изменяют значения в реестре либо в конфигурационных файлах Windows 10. Именно по этой причине взаимодействие с подобного рода приложениями требует предельной аккуратности и понимания того, что любые внесённые в систему изменения могут нарушить её стабильную работу.
Для русскоязычных пользователей Windows 10 этот напичканный искусственным интеллектом инструмент несёт довольно мало практической ценности, и его можно смело исключить из системы. Чтобы значок «Кортаны» не мозолил глаза, а на диске освободилось место, нужно открыть консоль PowerShell от имени администратора и ввести команду Get-appxpackage -allusers Microsoft.549981C3F5F10 | Remove-AppxPackage. После этого от голосового помощника Cortana останутся одни воспоминания.
В былые времена программная платформа Windows позволяла размещать на рабочем столе виджеты (в мире Windows известные как гаджеты) — миниатюрные приложения, отображающие ту или иную полезную для пользователя информацию. Впоследствии из соображений безопасности Microsoft отключила эту функцию, которую без труда можно вернуть на место посредством сторонних решений, таких, например, как Win10 Widgets. Данная программа построена на базе известной opensource-разработки Rainmeter и содержит большое количество разнообразных настраиваемых виджетов, позволяющих мониторить состояние системы, следить за расходом трафика, контролировать заряд аккумулятора ноутбука и решать прочие задачи.
Такая функциональность Windows 10 не только добавит красок в рабочее окружение системы, но и упростит визуальный поиск папок с файлами. Реализовать её можно с помощью бесплатной утилиты Folder Painter, которая добавляет в контекстное меню необходимые опции для цветовой пометки значков директорий. Всё гениальное просто.
С этой доработкой можно существенно повысить эффективность работы в операционной системе Windows 10. Необходимо всего лишь воспользоваться программой Easy Context Menu, позволяющей дополнить контекстное меню часто используемыми командами и инструментами. Например, можно добавить пункты для открытия командной строки, блокировки клавиатуры, удаления временных файлов, копирования IP-адреса и прочие элементы меню, выполняющие те или иные быстрые действия. Особо мудрить с Easy Context Menu не стоит, так как в противном случае вся польза от этой программы может сойти на нет.
Для быстрого выбора подходящего режима работы пользовательского интерфейса предусмотрена соответствующая опция в меню уведомлений «десятки», однако куда практичнее доверить управление этой функцией автоматике. Сделать это можно с помощью утилиты Auto Dark Mode. Процесс настройки предельно простой: устанавливаем программу, запускаем, ставим галочку напротив пункта «Автоматическая смена темы», выбираем подходящее время для переключения в дневной/ночной режим и жмём «Применить». Ничего сложного.
Ну а в завершение выпуска в очередной раз напомним о важности резервного копирования данных, создания дисковых образов и файловых архивов. В арсенале Windows 10 для этого имеются все необходимые средства, а регулярное и своевременное их использование позволит быстро восстановить работу компьютера в случае технических сбоев операционной системы.
С выходом Windows 8, разработчикам был представлен абсолютно новый тип приложений – приложения в стиле Modern UI. Ну, как новый? Подобные приложения уже разрабатывались для Windows Phone. Данные приложения не имели ничего общего с привычными Windows-приложениями. Такие приложения не совместимы с предыдущими версиями Windows, обладают абсолютно новым интерфейсом (Modern) и для их разработки используется новый WinRT API (Windows Runtime API) и Windows XAML (язык разметки интерфейса).
Несведущему человеку может показаться, что никаких проблем это приносить не должно, хотя на деле каждая версия приложения должна быть написана с нуля полностью. Именно это является главной проблемой, так как объем работы, который требовалось выполнить, был колоссальным. Нет, конечно были способы для унификации некоторых частей приложения, но они трудны для начинающего разработчика.
В Microsoft знали об этой проблеме и долгое время работали над ее решением. Результатом этой работы стали так называемые универсальные приложения Windows (Universal Windows Apps), которые доступны начиная с Windows 8.1 Update 1 и Windows Phone 8.1 (которая до конца лета будет доступна для установки всем устройствам на Windows Phone 8). Можно предположить, что теперь приложения будут работать без перекомпиляции как на Windows, так и на Windows Phone, но это не совсем так.
Каждое приложение все так же будет создаваться и компилироваться отдельно для каждой платформы, но объем требуемой работы теперь существенно сократился. Все дело в том, что Microsoft наконец-то унифицировали большую часть API для Windows и Windows Phone. Больше всего изменений было выполнено именно на стороне Windows Phone. Отныне для написания приложений для этих двух платформ (скоро будет три, Xbox One туда же) используется WinRT API и Windows XAML. Конечно же привычный для Windows Phone Silverlight никуда не делся и даже обзавелся некоторыми дополнительными возможностями, но не о нем сейчас разговор.
Универсальные приложения теперь используют среду выполнения Windows (тот самый Windows Runtime). Эти нововведения позволяют программисту свести платформозависимый код к минимуму, ведь большинство вызовов к API идентичны.
• Visual Studio Express 2013 для Windows с обновлением 2
Это совсем минимально. С таким комплектом вы сможете разработать универсальное приложение и отлаживать его Windows-версию на своем текущем компьютере. Windows Phone-версию приложения вы сможете отлаживать только на реальном устройстве (причем требуется аккаунт разработчика).
Чтобы иметь возможность отлаживать свое приложение в эмуляторе Windows Phone, вам потребуется:
• Windows 8.1 Профессиональная (x64)
• Процессор с поддержкой аппаратной виртуализации для клиента Hyper-V (подходит даже бюджетный Celeron G1610 и вроде даже Pentium 4 на LGA775)
• Visual Studio Express 2013 для Windows с обновлением 2
С таким комплектом вы сможете разрабатывать свое приложение более полноценно и тестировать его в различных режимах с использованием имитатора Windows-планшета и эмулятора Windows Phone.
Я же буду использовать Visual Studio Ultimate 2013 и показывать все буду именно на ней. Не волнуйтесь, от бесплатной Express интерфейс практически не отличается. Начнем!
Запустим Visual Studio и создадим новый проект.
В разделе «Приложения Магазина Windows» есть различные шаблоны приложений как для Windows, так и для Windows Phone. Нас интересуют именно универсальные приложения, шаблоны которых доступны в специальном подразделе.
На выбор дается два варианта: пустое приложение и приложение с Hub (это такой классный элемент управления). Остановимся на пустом приложении, ведь мы пока только учимся, и сразу лезть в дебри не следует. Пойдем от простого.
Введите имя для создаваемого приложения. Я назвал его «UniversalHelloWorld», четко и ясно. Нажимаем «ОК» и ожидаем, пока Visual Studio создает проект. Давайте рассмотрим структуру созданного проекта.
Весь проект подразделен на три части:
• Windows - содержит код и элементы, доступные только Windows-версии приложения
• Windows Phone - содержит код и элементы, доступные только Windows Phone-версии приложения
• Shared – содержит код и элементы, которые доступны сразу для двух платформ
Обратите внимание, что на данный момент общим являются только один элемент: App.xaml ( и App.xaml.cs). Этот элемент отвечает за запуск и остановку приложения.
Вы уже можете попробовать запустить приложение. И для этого нажмите F5. Для прекращения отладки, вернитесь в Visual Studio и нажмите «Shift+F5». Вы должны увидеть пустой экран. Первоначально будет запущена Windows-версия приложения. Чтобы выбрать, какую версию приложения запустить, найдите на панели инструментов кнопку отладки (зеленый треугольник).
Здесь вы можете выбрать, где запускать отладку вашего приложения. Имитатор выполняет имитацию Windows-планшета, у которого вы можете менять ориентацию, разрешение дисплея и прочие вещи. Кнопка «Удаленный компьютер» предназначена для запуска отладки на внешнем Windows 8 устройстве. Я для этих целей использую Surface RT.
Вернемся к смене запускаемой версии. В подменю «Запускаемый проект» вы можете выбрать «Windows Phone 8.1». После этого содержимое базового меню изменится и на ваш выбор будет доступно множество эмуляторов.
Выберите желаемый эмулятор и запустите отладку. После того, как эмулятор запустится, вы увидите пустой экран своего приложения. После завершения отладки эмулятор закрывать совсем не требуется.
Пока каждая версия приложения имеет отдельную главную страницу MainPage.xaml. Так как наше приложения очень простое, нам совсем не требуется разный дизайн страницы на каждой платформе. Перенесите MainPage.xaml в раздел Shared, и затем удалите его из разделов Windows и Windows Phone. Структура проекта станет такой:
Открыв данный файл, вы увидите эту страну в визуальном редакторе, а также ее код разметки. Пока мы имеем следующий код:
Он всего лишь создает корневую сетку страницы, закрашенную стандартным цветом страницы. Давайте добавим на страницу одноименную надпись и кнопку для приветствия. Разместите в Grid элемент TextBlock. Код элемента будет таков:
Чтобы посмотреть, как страница выглядит в режиме планшета/десктопа и телефона, используйте выпадающий список над редактором кода.
Мы его еще наполним содержимым. В этом обработчике мы создадим экземпляр диалогового окна и вызовем его. Для начала добавьте следующую директиву using вверху страницы:
Готово! Теперь можно запустить приложение на каждой из платформ и с радостью обнаружить, что все работает как надо.
На этом статья подходит к концу. Сегодня я постарался рассказать, как сделать наипростейшее универсальное приложение, которое может работать как на Windows 8.1, так и на Windows Phone 8.1. При написании этой статьи я ориентировался на новичков, поэтому пытался расписать все более-менее понятно для обычного человека, близкого к компьютерной технике (и программированию, конечно).
Я думаю, что это не последняя статья, и, возможно, получится даже небольшая серия статей. В следующей статье мы напишем уже не простой «ХеллоВорлд», а более интересное приложение, которое будет работать с некоторыми данными и будет иметь более сложный интерфейс.
Читайте также: