Интерфейс программы - это её внешний вид, наглядное представление органов управления программой, поэтому нужно очень серьезно подходить к разработке интерфейса.
Разработчики и создатели любого графического интерфейса обязаны серьезно подходить к двум основным аспектам интерфейса - визуальное представление и поведение в ответ на действие пользователя, такие как щелчки мышью или нажатие клавиш. Вид и поведение интерфейса тесно связаны между собой, ведь многие действия пользователей являются прямым следствием зрительного восприятия. Пользователь, не знакомый с тем, как выполняется та или иная операция, ищет подсказку, последовательно выполняя действия, направленные на достижение желаемого результата. Windows и другие, снабженные графическим интерфейсом, продукты стремятся свести к минимуму усилия по постижению особенностей работы новых приложений за счет использования одинаковых методов доступа к большинству стандартных операций.
Разработчики постоянно озабочены учетом нескольких очень важных требований, предъявляемых к интерфейсу:
постоянство - возможность осуществлять одинаковые операции при помощи одних и тех же команд с клавиатуры или мышью посредством зрительно одинаковых органов управления;
удобство - простые способы выполнения простых действий и возможность выполнения сложных действий посредством разумного ограниченного числа операций. Неудобные или неясные последовательности команд обычно приводят к ошибкам и неэффективному использованию системы;
усвояемость - операции должны быть достаточно просты, чтобы пользователь мог легко их запомнить. То, что пользователь узнает постигая одно из действий, должно быть применимо и к другим;
интуитивность - интерфейс должен быть очевиден настолько, что пользователю для максимального использования его возможностей не требуется дополнительной подготовки или обращения к документации;
расширяемость - способность интерфейса развиваться, чтобы соответствовать постоянно улучшающимся аппаратным средствам (например, повышению разрешающей способности мониторов или появление новых устройств ввода информации). То же самое относится и к появлению новых категорий приложений;
привлекательность. Для среднего пользователя привлекательность, а то и развлекательность интерфейса имеет большое значение.
Пользователей, как правило, интересует, в большей степени, внешний вид программы, то есть её интерфейс, нежели код программы и эффективность её работы. Чтобы создать привлекательную программу нужно учесть, что приложение должно иметь:
- интересное содержание;
- оригинальное техническое задание;
- отличный дизайн.
Отличный дизайн - это не только правильно подобранная и гармонично распределенная цветовая схема программы, но логически правильное размещение компонентов на схеме страницы. Тщательно продуманные, казалось бы, такие мелочи, как ширина полей, размер и цвет шрифта, цвет и рисунок фона, размещение и оформление гиперссылок и такое прочее значительно облегчают восприятие материала и упрощают пользование программой. В итоге интерфейс программы имеет оригинальный дизайн, и в то же время, весьма узнаваем (имеет сходства с программами Microsoft Office), что немаловажно для рядового пользователя[3].
Дизайн учебного издания - важный фактор повышения качества усвоения материала студентом. Чтобы работа с компьютером была удобной, пользователь при взаимодействии с ней должен ощущать комфорт. Поэтому в процессе создания электронного пособия были учтены рекомендации специалистов по компьютерным технологиям:
1) яркость объекта должна лежать в определенных пределах;
2) контрастность изображения относительно фона должна выбираться с учетом размеров объекта: чем меньше его размер, тем выше должна быть его контрастность;
3) следует учитывать, что наибольшую чувствительность глаз имеет к излучению желто-зеленого цвета, наименьшую - к фиолетовому и красному;
4) размер символа должен быть согласован с остротой зрения человека; нужно также учитывать, что он влияет на скорость и правильность восприятия информации;
5) все поле зрения, охватываемое глазом, можно разбить на три зоны: центрального зрения, где наиболее четко различаются детали; ясного видения, где можно опознать объект без мелких деталей; периферического зрения, где предметы обнаруживаются, но не распознаются;
6) зрительное ощущение нарастает и спадает постепенно, в сумме это время составляет 0,5 секунды.
Нужно соблюдать правила, регулирующие плотность расположения текста на экране:
оставлять пустым приблизительно половину экрана;
оставлять пустую строку после каждой пятой строки таблицы;
оставлять 4 или 5 пять пробелов между столбцами таблицы.
Фрагменты текста должны располагаться на экране так, чтобы взгляд пользователя перемещался по экрану в привычном направлении.
Содержимое полей в таблице должно не «прижиматься» к краю экрана, а располагаться около горизонтальных или вертикальных осей.
Меню, содержащее относительно небольшой объем информации, должно быть смещено в левую верхнюю часть экрана.
Один и тот же тип информации должен появляться всегда в одном и том же месте экрана.
Верхние две или три строки экрана обычно резервируются для вывода заголовка и состояния системы. Заголовок показывает, в каком месте системы находится пользователь; область состояния показывает пункты меню верхнего уровня и служит для вывода подтверждений о том, что система работоспособна.
Из-за низкого разрешения экрана ПК ухудшается различимость шрифтовых знаков. Поэтому экранный шрифт должен быть крупнее, чем при печати на бумаге, а именно - соответствовать как минимум типографскому кеглю цицеро, равному 12 пунктам[3].
Как показывает практика экранной типографики, в основном пользователи используют стандартные гарнитуры Times, Courier, Arial, Sans Serif, изначально имеющиеся в памяти любого ПК. Существует мнение, что благодаря их повсеместному применению, в том числе и в печатных изданиях, они порождают эффект шрифтовой обезлички информации, создавая эмоциональный барьер между сообщением и зрителем-читателем.
Выделяется гигиеническими и художественными достоинствами шрифт Verdana. Он рассчитан на воспроизведение с низким разрешением, прост по рисунку; удобны и красивы его пропорции. Шрифт выглядит легким, открытым и без труда воспринимается с дисплея.
Междустрочный интервал целесообразно делать в 2-2,5 раза большим, чем в печатных изданиях. На экране плохо выглядят и курсив, и разрядка, поэтому для текстовых выделений лучше использовать либо цвет, либо полужирное начертание.
Для учебного пособия черный текст на белом фоне - это стандартный, но не самый лучший вариант, поскольку сильный контраст цветов влечет дополнительную утомляемость обучаемого. Избежать этого можно простым подбором цветовой пары текст - фон.
Для цвета основного текста лучше подходит универсальный черный, хотя возможны и варианты (темно-коричневый, темно-синий и т. д.). Для фона следует использовать мягкие пастельные тона, причем лучший визуальный эффект дает не сплошная заливка фона выбранным цветом, а мягкий расфокусированный текстурный фон.
В пределах одного тематического раздела цвет и текстура фона должны оставаться постоянными для всех страниц.
Исходя из выше перечисленного для электронного учебного пособия по визуальному программированию, мною были выбраны:
цвет фона - мягко серый с мягко расфокусированной текстурой;
шрифт - Times New Roman;
размер шрифта - 14 пт;
цвет шрифта - черный, белый;
интервал - полуторный;
выравнивание - по ширине.
В электронном учебном пособии «Архитектура компьютерных систем» используются гиперссылки и фреймовая структура, что позволяет, не листая страниц (в отличие от печатного издания), быстро перейти к нужному разделу или фрагменту и при необходимости так же быстро возвратиться обратно. При этом не требуется запоминать страницы, на которых были расположены соответствующие разделы.
Формулировка задачи: разработать электронное учебное пособие на тему «Архитектура компьтерных систем», включающее в себя разделы:
теория;
практика;
тест.
Предусмотреть наличие справки, сведений о разработчике, фиксирование информации о прохождении теста.
В ходе решения данной задачи был разработан программный продукт, который включает в себя теорию, практику и тест.
2.3 Инструкция по использованию
На рисунке 2.1 представлено начальное окно программы.
Рисунок 2.1 - Начальное окно программы
В начальном окне программы необходимо ввести ФИО и группу, или же загрузить ранее сохраненный профиль.
При выборе того, или иного пункта главного меню, выполняется вход в программу.
На рисунке 2.2 представленно главное окно программы, в котором пользователю представлено общее содержание программы. В него входит 4 боковые вкладки: «Практика», «Теория», «Тест», «Профиль», а также 4 кнопки в самом окне: «Практики», «Тесты», «Выгрузить данные профиля» и «Выйти».
Рисунок 2.2 - Главное окно программы
На рисунке 2.3 представлен переход по кнопке «Теория», появляется возможность выбрать тему и изучить теоретические сведения. Для изучения теории представлены следующие 5 тем:
Правила перевода чисел из одной системы счисления в другую.
Методы кодирования и формы представления в ЭВМ числовой и графической информации.
Выполнение арифметических операций в обратном и дополнительном коде.
Преобразование логических выражений.
Синтез комбинационного логического устройства с приминением диаграмм Вейча.
После изучения лекционных тем, есть возможность выполнить практические задания, тем самым получить практические навыки.
Рисунок 2.3 - Переход по кнопке «Теория»
На рисунке 2.4 показан переход по кнопке «Практика», где пользователю необходимо выполнить задания и по завершению нажать на кнопку «Завершить».
Рисунок 2.4 - Переход по кнопке «Практика»
После выполнения практических заданий, появляется возможность закрепить знания при прохождении теста. На рисунке 2.5 представлена вкладка «Тест», где необходимо выбрать тему и выполнить тестовые задания.
Рисунок 2.5 - Начало тестирования
Сам тест имеет четыре варианта ответа, ограничение по времени его прохождения он не имеет. По завершению теста, будет показано, с каким результатом он завершен (Рисунок 2.6).
Рисунок 2.6 - Результат выполнения теста
По окончанию всей работы можно сохранить результат, перейдя в главное окно программы и нажав кнопку «Выгрузить данные профиля», как показано на рисунке 2.7. Файл сохранится в расширении .json и будет сохранен в загрузках.
Рисунок 2.7 - Сохранение результата
Также на главном окне программы в нижнем правом углу представлена информация о разработчике прогаммы (рисунок 2.8)
Рисунок 2.8 - Информация о разработчике
Далее рассмотрим листинг модулей.
На листинге 2.1 представлен код модуля «Тест»
Листинг 2.1 - Листинг модуля «Тест»
import React from 'react';
import QuizItem from './QuizItem';
import QuizNav from './QuizNav';
import QuizResult from './QuizResult';
import { QuizContext } from './QuizContext';
class Quiz extends React.Component {
/**
* props.quiz
* props.isEnd ?
* props.onComplete {Function}
* props.classes
* props.externalId
* @param {*} props
*/
constructor(props) {
super(props);
this._init();
}
_init() {
// const checkedAnswers = JSON.parse(localStorage.getItem('cachedAnswers')) || this.props.quiz.map(() => -1);
const checkedAnswers = this.props.quiz.map(() => -1);
let isEnd = this.props.isEnd === undefined ? false : this.props.isEnd;
/**
* @type {QuizState}
*/
this.state = {
'currentQuizItemId': 0,
'checkedAnswers': checkedAnswers,
'isEnd': isEnd
};
}
changeQuizItem(direction = 'r', e) {
let id;
switch (direction) {
case 'r': // след.
id = this.state.currentQuizItemId + 1;
break;
case 'l': // пред.
id = this.state.currentQuizItemId - 1;
break;
}
this.setState({
'currentQuizItemId': id
});
}
/**
*
* @param {React.SyntheticEvent} e
*/
endQuiz(e) {
let n = this.props.quiz.length;
const totalCorrect = this.props.quiz.map(e => e.correct).reduce((total, e, i) => {
if (e === this.state.checkedAnswers[i]) {
return total + 1;
}
return total;
}, 0);
this.self.dispatchEvent( new CustomEvent('q-completed', {
bubbles: true,
detail: {
type: 'quiz',
id: this.props.externalId,
total: n,
correct: totalCorrect,
// quiz: this.props.quiz,
// checkedAnswers: this.state.checkedAnswers
}
}));
this.setState({
isEnd: true
});
}
restartQuiz() {
this._init();
// this.
this.setState(this.state);
}
/**
*
* @param {React.SyntheticEvent} e
*/
updateAnswers(e) {
e.persist();
let id;
let item;
if (item = e.target.closest('[data-id]')) {
id = item.dataset.id;
}
else {
id = e.target.dataset.id;
}
if (!id) {
return;
} this.state.checkedAnswers[this.state.currentQuizItemId] = Number(id);
this.setState({
'checkedAnswers': this.state.checkedAnswers
});
}
componentDidMount() {
if (this.props.onComplete instanceof Function) {
this.self.addEventListener('q-completed', this.props.onComplete);
}
}
render() {
let classes = `quiz ${this.props.classes ?
this.props.classes : ''}`;
// число вопросов в текущем тесте
const n = this.props.quiz.length;