Что такое интерфейс. графический интерфейс, типы и api — простыми словами

Содержание

Планы на будущее

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


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

Ближайшие планы по развитию фреймворка:

  • Реализовать механизмы объединения и группировок в запросах в классе Query.
  • Добавить элементы управления для работы с объединениями и группировками.
  • Разработать backend для преобразования объекта Query в json или xml, а также разработать серверную часть для работы с моделями Django.
  • Реализовать механизм кеширования запросов к серверу данных.
  • Воплотить в жизнь большое количество других идей.

Решение «всё в одном» для планирования путешествий

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

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

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

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

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

Так в чём же заключаются принципиальные продуктовые и интерфейсные решения?

Лучшие поставщики в одном месте

Наша продуктовая и бизнес-задача — соединить наиболее популярные среди пользователей сервисы в едином интерфейсе, чтобы вывести процесс планирования на новый уровень. Уже привычные Foursquare, Google Maps, Wikipedia, «Островок», RentalCars и другие сервисы участвуют в создании наглядных сценариев путешествий «Таймсинери», как из кирпичиков строятся дома.

Продуктовая ценность

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

Продуктовая задача

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

Продуктовое решение

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

1.7. Таблицы

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

Таблица.

Навигация по таблице осуществляется кнопками направления (на рисунке выше курсор стоит в ячейке «Начальный баланс». Ячейка таблицы, на которой установлен курсор, имеет более толстую границу).

В некоторых таблицах при нажатии на кнопку «Выбор» происходит какое-либо действие. Например, при нажатии кнопки «Выбор» в вы перейдете в режим . При этом если в таблице вы находились в столбце Ask, то по умолчанию вам будет предложено купить валюту, а если в столбце Bid — то продать.

1.2. Поля ввода

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

Поля ввода. Ввод значения.

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

Поле, выбранное в данный момент обводится голубой рамкой.

Рамка вокруг выбранного элемента


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

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

Эффективность.

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

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

5 последних уроков рубрики «Юзабилити»

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

  • Думаю, вы как и я уделяете кучу времени, пытаясь усовершенствовать каждую деталь вашего сайта: от превосходного отображения на различных устройствах, до создания занимательных страницы 404! В то же время, вы когда-то задумывались, что произойдёт, если пользователь оставит поле поиска пустым, а затем нажмёт Enter?

  • Термин “разумная достаточность” относится к склонности человека использовать минимальные ресурсы для успешного завершения работы. Это явление, которое осуществляется на подсознательном уровне: чаще всего мы даже не задумываемся о том, что сейчас нам необходимо использовать самый минимум усилий для выполнения определённой задачи.

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

  • Три устаревших UX подхода и их альтернативы

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

Структура нового фреймворка

Фреймворк заточен на быстрое создание интерфейсов для СУБД. Он состоит из нескольких частей (модулей). Некоторые могут использоваться отдельно, некоторые — только совместно с остальными.

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

Модуль backend — это прослойка между модулем core и базой (источником) данных. В качестве источника данных может выступать как непосредственно сервер баз данных, вроде SQL, так и прослойка для доступа к моделям других фреймворков, таких как Django или Sequelize.

Модуль model-ui отвечает за генерацию интерфейса: он визуализирует данные, предоставляемые модулем core, используя элементы управления, предоставляемые модулем ui.

Модуль ui содержит базовые элементы управления, которые используются модулем model-ui при генерации интерфейса. Эти элементы могут использоваться также и независимо от фреймворка.

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

Спроси клиента

Список моих стандартных вопросов:

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

Что вы хотите изменить в интерфейсе и почему? Определяемся с основным фронтом работ.


Кого вы считаете своим основным конкурентом? Пригодится на следующих этапах анализа.

Есть ли у вас выгодное отличие от конкурентов? Пусть редко, но иногда оказывается, что действительно есть.

Приведите пример интерфейсов, которые вам нравятся и опишите почему

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

Требуется ли вам мобильное приложение / сайт? Задел на развитие проекта.

Требуется ли версия сайта адаптированная под телефон? Мы то с вами понимаем, что сейчас выходить в интернет без адаптивной вёрстки нет смысла, но и надо рисовать под телефон тоже

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

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

Правила № 5: Научитесь выделять и утапливать текст

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

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

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

Здесь есть и цвет, и прописные буквы, и поля

Есть и другие способы, но я бы не стал их особенно рекомендовать:

  • Подчёркивание. В наши дни подчёркивание стоит использовать исключительно для ссылок.
  • Цветной фон. Этот способ встречается не так часто, но 37signals какое-то время использовали его для обозначения ссылок на своём сайте.
  • Зачёркивание. Добро пожаловать назад в 90-е, ты, гений CSS!

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

Выделение и утапливание

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

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

Мы назовём их способами для «выделения» и «утапливания» текста. Мы не будем называть их «визуальный вес», поэтому что это слишком скучно.

Заголовок «Material Design» выделен множеством способов. Он большой, очень контрастный и выделен болдом.

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

А сейчас самое важное.

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

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

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

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

Всё дело в балансе.

Contents Magazine — хороший пример выделения и утапливания текста.

Название статей — это единственный элемент на странице, который набран не курсивом

В этом случае, именно отсутствие курсива привлекает внимание (особенно в комбинации с жирным начертанием). Имя автора выделено болдом — в отличие от слова «by», набранного обычным шрифтом. Маленькая, неконтрастная подпись «ALREADY OUT» никому не мешает. Но благодаря прописным буквам, щедрой разрядке и большим полям тут же привлекает внимание.

Активные и выбранные элементы

Выделение активных элементов — ещё более сложная задача.

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

Что же тогда делать?

Можно использовать:

  • цвет текста;
  • цвет фона;
  • тени;
  • подчёркивание;
  • небольшую анимацию (подъём, опускание и так далее).

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

Выбранная иконка стала белой, но сохранила контраст по отношению к фону

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

Зачем нужен UI

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

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

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

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

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

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

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

  1. Ориентир на устройство, для которого приложение делается.
  2. Иконка обязана отражать главную идею.
  3. Область нажатия сенсорного дисплея должна иметь существенную погрешность.

Интерфейс операционной системы

Различают еще такой термин, как «интерфейс операционной системы» – набор средств, которые передают управляющие команды. Далее идет разбивка на подвиды:

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

Что такое интерфейс программы?

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

  1. Запросов, где внедрен подход, ориентированный на меню.
  2. Итогов поиска.

Три любимых лендинга

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

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


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

Sketch. Здесь тоже есть анимация, но ненавязчивая

Она не отвлекает от контента, а концентрирует на нем внимание пользователей. Там фокус на визуализации продукта и том, как он работает. 

Вертикальная навигация

Мы встречаем левую и правую панель навигации всё реже, т.к. сейчас наметилась тенденция в упрощении меню и перехода на горизонтальный вариант. Однако, вертикальная навигация не исчезнет просто потому, что не всегда горизонтальный вариант так уж универсален. Так, вертикальный вариант удобней для меню со сложной или длинной структурой дерева. Возьмём, к примеру, molotok.ru.

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

Хороший простой пример вертикальной навигации

Вертикальное меню расположено слева, под логотипом

Пользовательские сценарии

Вот из чего она состоит:

  • ФИО и возраст. На основе данных из предыдущего шага про Метрику.
  • Проблема/цель. Описание того зачем юзер открыл наш интерфейс.
  • Как пришёл на сайт. Например вбил в Гугле «Купить вакцину от Covid19». Запросы беру не с потолка, а из Метрики.
  • Страница входа. От того на какую страницу попал юзер во многом зависит его дальнейший путь. Далеко не всегда юзер попадает на главную страницу.
  • Устройство. Берём на основе метрики. От устройства с которого юзер работает с интерфейсом зависит многое в дизайне.
  • Желаемое целевое действие. То что уже мы хотим получить от юзера. Например, мы хотим чтобы он заполнил какую-то форму или нажал кнопку.

Из чего состоит сценарий:

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

Унификация интерфейса

Единый опыт на всех платформах

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

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

Особенности разработки интерфейса

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

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

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

Смартфоны

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

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


С этим читают