Пользовательский интерфейс — это совокупность средств и правил взаимодействия человека и компьютера. По мере развития и совершенствования компьютерной техники разрабатывались различные варианты пользовательских интерфейсов.
На компьютерах, оперировавших только числами и символами, был реализован командный интерфейс:
• команда подавалась с помощью последовательности символов (командной строки);
• компьютер сопоставлял поступившую команду с имеющимся в его памяти набором команд;
• выполнялось действие, соответствующее поступившей команде.
Всё это сильно затрудняло широкое внедрение компьютерной техники. Необходимость запоминать многочисленные команды отпала с появлением графических интерфейсов. Первые графические интерфейсы обеспечивали возможность с помощью клавиш или манипулятора «мышь»:
• подводить курсор к той или иной части экрана;
• выделять на экране имя файла или команду другим цветом;
• оперировать выделенными данными независимо от других.
2.5 Списки. Частые значения. Программирование на Python. Курс Stepik
В наши дни взаимодействие человека и компьютера строится на основе объектно-ориентированного графического интерфейса, в котором:
Все объекты представлены в виде значков
Оперирование объектами осуществляется в окнах.
Основным элементом программного управления является меню – выводимый на экран список команд, которые можно задать компьютеру.
Основным элементом аппаратного управления являются различные манипуляторы (мышь, трекбол, сенсорная панель)
Каждый компьютерный объект имеет своё имя и графическое обозначение
Объекты обладают определёнными свойствами
С объектами можно совершать различные действия
Основным элементом аппаратного управления компьютером в пользовательском интерфейсе является мышь, отображаемая на экране в виде указателя мыши – небольшого графического объекта, который перемещается по экрану при движении мыши.
В наше время большое внимание уделяется разработке дружественных интерфейсов.
Дружественный интерфейс – предоставление пользователям наиболее удобных способов взаимодействия с программным обеспечением за счет логичности и простоты в расположении элементов управления. При этом учитывается психологические особенности восприятие информации человеком.
Односвязный список | Динамические структуры данных #1
Окна одного типа имеют сходную структуру, содержат стандартные наборы элементов оформления и управления и позволяют использовать при работе с ними стандартные набор приёмов.
Меню – это выводимый на экран список команд, которые можно задать компьютеру. Выбор команд производиться щелчком мыши.
Контекстное меню – это список команд, относящихся к текущему объекту; оно появляется при щелчке правой кнопки мыши на выделенном объекте.
Рабочий стол – основное окно графического интерфейса операционной системы, занимающее всё пространство экрана. Рабочий стол может содержать фоновое изображение, значки, ярлыки, панель задач. Значками обозначают приложения, документы, папки.
Ярлыки представляют собой ссылку на объект,, который может быть расположен в любой папке. Отличается ярлык, тем что имеет стрелку в левом нижнем углу.
Панель задач располагается в нижней части экрана. На ней находится: кнопка «ПУСК», кнопки выполнимых программ и открытых окон документов, индикатор языка и часы. Кнопка «ПУСК» позволяет вызывать Главное меню, которое обеспечивает доступ ко всем ресурсам системы и содержит команды запуска приложений, настройки системы, поиска файлов, допуска к справочной системы.
В процессе работы на Рабочем столе могут раскладываться окна папок, диалоговые окна, окна приложений и окна документов.
Диалоговые окна предназначены для двустороннего взаимодействия между компьютером и пользователем. Они позволяют передать компьютеру более подробную информацию о команде с помощью элементов управления: полей вода, списков и раскрывающихся списков, переключателе, флажков, кнопок, счётчиков и ползунков. В поле ввода пользователь заносит нужную информацию с помощью клавиатуры.
Раскрывающийся список открывается щелчком на раскрывающей кнопке.
Переключатели служат для выбора одного из нескольких возможных вариантов. Они располагаются перед возможными вариантами и имеют форму белых кружков. В кружке, соответствующем выбранному варианту, появляется черная точка.
Флажок служит для выбора нескольких возможных вариантов. Флажки располагаются перед возможными вариантами и имеют форму квадратиков. Установленный флажок отмечается «галочкой».
Счётчик представляет собой пару стрелок, позволяющих увеличивать или уменьшать значение в связанном с ними поле.
Ползунок позволяет плавно изменять значение соответствующего параметра.
Командная кнопка обеспечивает выполнение написанного или изображенного на ней действия. Чтобы воспользоваться командной кнопкой, на ней необходимо щёлкнуть.
Окно папки – это область экрана, ы которой графически представлено содержимое папки. Оно содержит строку заголовка, строку меню, панель инструментов, адресную строку, рабочую область, полосы прокрутки, границы окна и строку состояния.
Организация индивидуального информационного пространства
Совокупность всей информации, накопленной человечеством в процессе развития науки, культуры, образования и практической деятельности людей, называют информационными ресурсами.
Информационные ресурсы , доступные пользователю при работе на компьютере, называются его индивидуальным информационным пространством.
Источник: skobelevserg.jimdofree.com
Урок 9Пользовательский интерфейс. Знакомство с интерфейсом операционной системы, установленной на ПК
Информация, изложенная в этой статье, предназначена для начинающих пользователей компьютера с минимальным уровнем подготовки и является обобщением нескольких других статтей нашего сайта. Это своего рода основа, без которой самостоятельно и быстро освоить компьютер будет достаточно сложно.
Из статьи читатель узнает, как на компьютере осуществлять основные операции с файлами и папками (создавать, переименовывать, копировать, переносить, удалять), научится работать с окнами Windows, овладеет навыками навигации в Windows, освоит умение использования компьютерной мышки.
Начинающим пользователям, читающим эту статью, желательно иметь возможность сразу же на практике опробовать примеры, изложенные в ней. Cтатью лучше скачать и распечатать (ссылка на файл чуть ниже), поскольку все открытые на компьютере приложения придется закрыть, в том числе и это окно. Подойдет также вариант с параллельным использованием второго компьютера или ноутбука.
Объектно-ориентированный интерфейс
Интерфейс современных системных и прикладных программ носит название объектно-ориентированного интерфейса. Примером операционной системы, в которой реализован объектно-ориентированный подход, является Microsoft Windows.
Операционная система работает с множеством объектов, к числу которых относятся: документы, программы, папки, дисководы, принтеры и другие физические и информационные объекты, с которыми мы имеем дело, работая на компьютере.
Документы содержат некоторую информацию: текст, звук, картинки и т. д. Программы используются для обработки документов. Отдельные программы и документы неразрывно связаны между собой: текстовый редактор работает с текстовыми документами, графический редактор — с фотографиями и иллюстрациями, программа обработки звука позволяет записывать, исправлять и прослушивать звуковые файлы.
Документы и программы — это информационные объекты. А такие объекты, как дисководы и принтеры, являются аппаратными (физическими) объектами.
С объектом операционная система связывает:
• имя;
• графическое обозначение;
• свойства;
• действия (поведение).
В интерфейсе операционной системы для обозначения документов, программ, устройств используются значки (их еще называют пиктограммами, иконками) и имена. Имя и значок дают возможность легко отличить один объект от другого (рис. 2.12).
С каждым объектом связан определенный набор свойств и множество действий, которые могут быть выполнены над объектом.
Например, свойствами документа являются его местоположение в файловой структуре и размер. Действия над документом: открыть (просмотреть или прослушать), переименовать, напечатать, скопировать, сохранить, удалить и др.
Подготовка к восприятию нового материала
Каким же образом происходит загрузка операционной системы? (В процессе загрузки ОС сначала производится тестирование работоспособности процессора, памяти и других аппаратных средств компьютера, причем краткие диагностические сообщения о процессе тестирования выводятся на экран монитора.)
После окончания загрузки ОС пользователь получает возможность управлять компьютером с использованием графического интерфейса ОС.
Как проработать UI?
Современный user interface должен быть удобным, функциональным и динамичным. При его разработке важно учитывать все этапы взаимодействия с продуктом: от первого касания до регулярного использования. Каждый экран приложения, кнопка, текстовое описание имеют значение.
Чтобы установить долгосрочные отношения с клиентами, важно изучать их поведение. Тестирование юзабилити в AskUsers поможет перед масштабным запуском оценить, насколько пользователям удобно на вашей платформе. Для пользователей интерфейс – это и есть продукт, поэтому дизайн должен помогать им разобраться в продукте.
Графический пользовательский интерфейс
Этим термином чаще обозначаются UI мобильных и веб-приложений, а также игр и сервисов для развлечений.
Мобильные интерфейсы
Выделяется в отдельную группу SIMP (Screen, Icon, Menu, Pointer). Подход к дизайну мобильных интерфейсов отличается от подхода к дизайну настольных приложений. Поведение пользователей при взаимодействии со смартфонами отличается от работы на компьютере из-за размера экрана и отсутствия отдельной клавиатуры с мышью/тачпадом. Элементы здесь заполняют экран полностью, а блоки и системы зависят от требований операционной системы.
Дизайн мобильных приложений также зависит от поведенческих паттернов пользователей, например того, как они держат смартфон в руке, какие действия удобно совершать на ходу и т.д.
Веб-интерфейсы
Технологии позволяет создавать полноценные веб-приложения, по функциональности не уступающие настольному ПО: Trello, Google Docs, Twitch, Яндекс.Дзен.
Преимущество таких приложений в том, что их не нужно устанавливать на компьютер — все функции доступны в браузере. Создают такие приложения с помощью JavaScript, HTML и CSS.
Игровой и материальный
Связан с механикой геймплея. Именно в нем лучше всего раскрывается сопровождающая роль интерфейса, так как игрок лучше ощущает, что движется к какой-то цели (например, победить босса и пройти уровень). Интерфейс зависит от игры: кнопки, жесты, движения мыши или взаимодействие с сенсором на экране или 3D интерфейс в VR, нажатие клавиш на джойстике.
Окна папок и приложений
Окно папки — это область экрана, в которой графически представлено содержимое папки.
Окна папок могут содержать строку заголовка, строку меню, панель инструментов, адресную строку, рабочую область, полосы прокрутки, границы окна и строку состояния.
Строка заголовка содержит: системный значок; заголовок окна; кнопки управления состоянием окна, позволяющие развернуть, свернуть или закрыть окно.
Строка меню представляет собой полный перечень тематически сгруппированных команд, которые можно выполнить в данном окне.
Панель инструментов содержит командные кнопки для выполнения наиболее часто встречающихся операций. В работе удобнее, чем строка меню, но ограничена по количеству команд. В окнах современных приложений панель инструментов часто бывает настраиваемой — пользователь по своему усмотрению может разместить на ней те командные кнопки, которые ему нужны чаще всего.
В адресной строке указан путь доступа к текущей папке, что удобно для ориентации в файловой структуре. Адресная строка позволяет выполнить быстрый переход к другим разделам файловой структуры с помощью раскрывающей кнопки на правом краю строки.
В рабочей области окна папки отображаются значки объектов, хранящихся в папке, причем способом отображения можно управлять. Если количество объектов слишком велико (или размер окна слишком мал), по правому и нижнему краям рабочей области могут отображаться полосы прокрутки, с помощью которых можно «прокручивать» содержимое папки в рабочей области по вертикали и по горизонтали.
Границы окна — рамка, ограничивающая окно с четырёх сторон; с помощью операции протягивания границы можно изменять размеры окна.
В строке состояния выводится дополнительная справочная информация.
Окно приложения — это область экрана, в которой представлено запущенное на выполнение приложение; открыть или закрыть окно приложения — то же, что и запустить программу на выполнение или завершить её.
Ученик, при выполнении домашнего задания, располагает на рабочем столе и держит открытыми дневник, учебник, тетрадь. Если задание сложное, ему могут понадобиться также справочник, словарь или энциклопедия.
Аналогичная возможность, называемая многооконноетью, реализована в современном пользовательском интерфейсе: на компьютерном рабочем столе также можно разложить окна различных папок и приложений. При этом можно: переходить из одного окна в другое без потери данных, полученных в ходе выполнения программ; переносить информацию из одного документа в другой.
Контекстное меню
Операционная система обеспечивает одинаковый пользовательский интерфейс при работе с разными объектами. В операционных системах Microsoft Windows и Linux для знакомства со свойствами объекта и выполнения возможных с ним действий используется контекстное меню (рис. 2.13) (для вызова контекстного меню следует выделить значок объекта и щелкнуть правой кнопкой мыши).
Меню — это выводимый на экран список, из которого пользователь может выбирать нужный ему элемент.
В меню на рис. 2.13 все пункты, кроме последнего, относятся к действиям, которые можно выполнить с документом. Выбор нужного пункта меню производится с помощью клавиш управления курсором или манипулятора (например, мыши). Если выбрать пункт меню «Свойства» , то на экран будет выведен список свойств данного объекта.
Нейроинтерфейсы
Нейроинтерфейс — это взаимодействие человека и машины посредством импульсов мозга. Существует множество компаний, занимающихся нейроинтерфейсами, например, Ctrl Labs (получают информацию, считывая мышечную активность пользователя) или Emotiv (взаимодействуют посредством анализа мозговой активности пользователя). Однако ни одна компания на данный момент не показала значимого прогресса в этой области: как правило, их возможности ограничиваются перемещением объектов по экрану.
В статье затронуты, пожалуй, самые распространенные способы взаимодействия человека и машины. Но осталось еще множество не описанных здесь, но не менее интересных устройств. Так, существуют способы взаимодействия с девайсами для людей с особыми потребностями — например, управление с помощью языка или ягодиц. Экспериментальные протезов связываются с нейронной системой человека и самообучаются: чем дольше ими пользуется человек, тем проще ему ими управлять, и тем более легкими они становятся в управлении.
Больше об интерфейсах управления и других элементах продуктового дизайна можно узнать на нашем курсе Product Design Weekend, который пройдет 22 и 23 декабря. Михаил Федосов расскажет, как функционально улучшить продукт, на что обращать внимание при оценке интерфейса и как не заблудиться в трендах.
Источник: fobosworld.ru
Как компьютеры выводят текст на экран
Текст, который вы видите на экране, мог бы выглядеть намного хуже, например так:
Сегодня разберём, как компьютеры работают с выводом текста, как добиваются плавности и красоты.
Для начала нужно вспомнить наш текст о пиксельной и векторной графике. Вот основное оттуда:
- Растровая графика состоит из точек: чем больше точек, тем чётче и качественнее выглядит картинка.
- Такие точки называются пикселями, а по-научному — растром, отсюда и название.
- Если сильно увеличить растровую картинку, то пиксели тоже увеличатся в размерах и станут заметны. Чем сильнее увеличиваем, тем сильнее видны пиксели и тем хуже становится картинка.
- Векторная графика основана на векторах — кривых линиях, которые задаются математическими формулами.
- При изменении размера векторной картинки формулы пересчитываются заново, и мы снова видим чёткую картинку.
Старая школа: единый растровый шрифт на уровне железа
Первые компьютеры выводили текст очень прямолинейно: в них были записаны рисунки каждой буквы, эти рисунки выводились по команде. Все рисунки букв были одного размера и начертания, но можно было задать другой цвет.
Например, в операционной системе MS DOS использовался шрифт, который физически записывался в памяти вашего устройства вывода видео. Чаще всего это был шрифт, известный как Code Page 437. Вот его приближение:
Плюс такого шрифта в том, что можно было попиксельно разработать каждую букву и добиться максимальной читаемости на мониторах того времени. Не нужно было разрабатывать десятки начертаний и вариантов текста, поэтому можно было сделать хорошо какой-то один.
Но такого подхода явно недостаточно, если мы хотим видеть на экране красивые шрифты. Тогда нужно использовать векторную графику.
Векторные шрифты и проблема с ними
В векторных шрифтах рисунок букв задаётся не пикселями, а формулами: прямыми линиями и кривыми. Например, чтобы с помощью векторной графики нарисовать круг (допустим, это будет точка), можно использовать несколько отрезков кривой с контрольными точками. На примере ниже круг рисуется восемью отрезками:
Векторные шрифты хороши тем, что их можно бесконечно масштабировать — делать крупнее или мельче, и компьютер пересчитает формулы, чтобы вывести текст как положено.
А проблема в том, что при пересчёте шрифта компьютер должен решить, какие пиксели включать, а какие — нет. За это отвечают алгоритмы сглаживания. Если алгоритмы хорошие, то текст будет выглядеть красиво, а если нет — то нет. Давайте посмотрим на варианты.
Без сглаживания
Возьмём векторный шрифт и наложим его векторы на сетку пикселей. Правило такое: если вектор полностью закрыл пиксель — рисуем там чёрную точку. Если вектор не закрыл пиксель полностью — точка белая. Получится вот такое изображение:
Здесь плохо не только то, что у букв есть острые края и эффект лесенки. Плохо ещё и то, что эти эффекты в непредсказуемых местах. Какие-то части букв толще, другие тоньше, и всё происходит случайным образом. Нам это не нравится.
Сглаживание
При простом сглаживании алгоритм добавляет полутона: если вектор накрыл пиксель на 50%, этот пиксель станет чёрным на 50%. Чем меньше вектор накрывает пиксель, тем светлее. Так как все пиксели небольшие, глаз их часто не различает и начинает воспринимать картинку более плавной и гладкой.
В зависимости от коэффициентов и настройки алгоритма одно и то же векторное изображение можно сгладить по-разному. Вы не заметите разницу, если увидите эти тексты по отдельности; но если поставить их рядом — станет очевидно:
Хинтинг
Параллельно со сглаживанием программисты пытались решить задачу другим способом: двигая влево-вправо те пиксели, которые явно портят букву, но соответствуют всем формулам. Это уже сложная задача, которую чаще всего делают вручную: для каждого размера шрифта и буквы указывают те области, куда можно что-то подвинуть или добавить, чтобы буква выглядела хорошо.
Проще всего это показать на картинке: слева буква «a» без хинтинга, а справа — с ним. Форма буквы стала более ровной и читать её стало проще, но с пропорциями получилась беда: все утолщения стали одного размера, а ещё потерялся хвостик вниз на верхней части буквы. Такой приём часто использовался на старых мониторах и там, где нет возможности управлять полутонами пикселей.
Сглаживание + хинтинг
Дальше инженерам пришла в голову такая мысль: совместить сглаживание и хинтинг. Это улучшило отрисовку некоторых букв: сглаживание отвечало за полутона, а хинтинг — за то, что куда подвинуть, чтобы форма буквы стала более естественной. Для примера посмотрите на эту же букву с хинтингом до сглаживания и после:
Субпиксельное сглаживание
Самый свежий подход — сглаживание с использованием субпикселей. Субпиксель — это то, из чего состоит пиксель, красные, синие и зелёные компоненты. Втроём они образуют пиксель. Если нужен пиксель красного цвета, включается один красный субпиксель, а остальные не светятся. Если нужен фиолетовый — горят красный и синий, а для белого цвета включаются все три пикселя.
Смысл субпиксельного сглаживания в том, что мы можем добавить как бы треть пикселя вместо целого: зажечь красный, синий или зелёный вместо всех троих вместе. Это сделает букву ещё более плавной и естественной.
Вот примеры на букве W из Википедии:
Текст на мониторах высокого разрешения
Стандартное разрешение на больших мониторах в 2000–2010-х — 72 точки на дюйм. Этого достаточно, чтобы смотреть на картинку с расстояния примерно полметра. Но когда такой экран применялся в смартфонах, пиксели были конкретно видны — потому что мы держим телефон ближе к глазам.
В 2010 году Apple в числе первых внедрили в смартфон экран высокого разрешения — 326 точек на дюйм. Это было сделано, чтобы люди не замечали пикселей, когда держали экран на расстоянии 20–30 см от глаз. Разница была заметной. Вот картинки из Википедии:
Дальше подобные экраны просочились во все смартфоны и планшеты. Сейчас даже в ноутбуках часто используют разрешения от 200 точек на дюйм, не говоря уже о смартфонах.
Это привело к тому, что теперь текст на экране выглядит ещё лучше:
Что с этим делать?
На старых компьютерах с Windows, если у вас монитор низкого разрешения, можно включить системное сглаживание Clear Type. Оно использует субпиксельное сглаживание.
А в остальном сейчас система сама заботится о том, чтобы красиво вывести текст. Но теперь вы знаете, как это происходит.
Курсы по программированию с нуля
Приходите к нам в ИТ. У нас есть удаленная работа, высокие зарплаты и удобное обучение в «Яндекс Практикуме». Старт бесплатно.
Получите ИТ-профессию
В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.
Источник: thecode.media