- •Основные компоненты технологии проектирования информационной системы
- •Основные компоненты технологии проектирования
- •Состав и структура операционной системы
- •2. Структура и функции операционной системы
- •3. Разновидности операционных систем
- •Назначение и состав операционной системы компьютера. Загрузка компьютера.
- •Обеспечивающие подсистемы информационных систем
- •Понятие жизненного цикла информационной системы
- •Жизненный цикл информационных систем
- •Модели жизненного цикла по ис
- •Основные элементы пользовательского интерфейса
- •Классификация структурных методологий
- •Часть 2 методологии структурного системного анализа и проектирования
- •Глава 10 кратко описывает архитектуру современной системы и ее влияние на изменения в методологиях анализа и проектирования.
- •Глава 8 классификация структурных методологий
- •Sadt - технология структурного анализа и проектирования
- •Диаграммы потоков данных
- •Системы автоматизации проектирования ис
- •Функционально-ориентированный и объектно-ориентированный подходы, проектирования
- •Содержание rad-технологии прототипного создания приложений
- •Вопрос 6. Rad-технология прототипного создания приложений
- •Методология совместного доступа к базам и программам в сложных информационных системах
- •Классификация информационных систем
- •Информационные системы в области производственного менеджмента, экономики и финансов
- •1. Информационные системы и технологии. Их классификация в организационном управлении
- •Информационные технологии в управлении финансами предприятия
- •Рейтинг разработчиков пп для управления финансами предприятия
- •Концепция интегрированной системы управления производством
- •1. Общие положения
- •2. Основные направления интеграции в системах управления
- •3. Согласование решений — основная задача иасу
- •Иерархия планирования
- •Многоуровневая адаптация в иасу
- •Декомпозиция общей задачи управления
- •Системы электронного документооборота
- •Правовые информационные системы
- •Тема 8. Обзор российского рынка справочно-правовых информационных систем
- •1. Государственные правовые базы данных.
- •1.2. Эталон.
- •Законодательство Москвы.
- •Законодательство Московской области.
- •Структура корпоративных информационных систем, основные функции и задачи
- •Программные продукты:
Модели жизненного цикла по ис
Стандарт ISO/IEC 12207 не предлагает конкретную модель ЖЦ и методы разработки ИС (под моделью ЖЦ понимается структура, определяющая последовательность выполнения и взаимосвязи процессов, действий и задач, выполняемых на протяжении ЖЦ. Модель ЖЦ зависит от специфики ИС и специфики условий, в которых последняя создается и функционирует). Его регламенты являются общими для любых моделей ЖЦ, методологий и технологий разработки. Стандарт ISO/IEC 12207 лишь описывает структуры процессов ЖЦ ИС, но не конкретизирует в деталях, как реализовать или выполнить действия и задачи, включенные в эти процессы.
Среди известных моделей ЖЦ можно выделить следующие:
• Каскадная модель (до 70-х гг.) предусматривает последовательное выполнение всех этапов проекта в строго фиксированном порядке. Переход на следующий этап означает полное завершение работ на предыдущем этапе.
Рис.1. - Каскадная модель ЖЦ ИС
• Итерационная модель (поэтапная модель с промежуточным контролем) (70-е – 80-е гг.). Разработка ИС ведется итерациями с циклами обратной связи между этапами. Межэтапные корректировки позволяют учитывать реально существующее взаимовлияние результатов разработки на различных этапах; время жизни каждого из этапов растягивается на весь период разработки.
Рис. 2 - Поэтапная модель с промежуточным контролем
• Спиральная модель (80-е – 90-е гг.). На каждом витке спирали выполняется создание очередной версии продукта, уточняются требования проекта, определяется его качество и планируются работы следующего витка. Особое внимание уделяется начальным этапам разработки - анализу и проектированию, где реализуемость тех или иных технических решений проверяется и обосновывается посредством создания прототипов (макетирования).
Рис. 3. - Спиральная модель ЖЦ ИС
Очень часто проектирование описывают как отдельный этап разработки проекта между анализом и разработкой. Однако в действительности четкого деления этапов разработки проекта нет - проектирование, как правило, не имеет явно выраженного начала и окончания и часто продолжается на этапах тестирования и реализации. Говоря об этапе тестирования, также следует отметить, что и этап анализа, и этап проектирования содержат элементы работы тестеров, например для получения экспериментального обоснования выбора того или иного решения, а также для оценки критериев качества получаемой системы. На этапе эксплуатации уместен разговор и о сопровождении системы.
Стадии жизненного цикла информационной системы
Процессы жизненного цикла информационной системы
Модели жизненного цикла информационной системы
См. 4 раздел
Основные элементы пользовательского интерфейса
https://sites.google.com/site/srd18docs/graficeskij-interfejs/osnovnye-elementy-polzovatelskogo-interfejsa
Основные элементы пользовательского интерфейса
Оглавление
Кнопка
рис. 1 Стандартная пара кнопок диалогового окна, кнопки «ОК» и «Отмена» Кнопка (Button) - базовый элемент интерфейса компьютерных программ (рис. 1), принцип действия и вид аналогичны кнопке в технике. При нажатии на кнопку происходит программно связанное с этим нажатием действие либо событие. Описание связанных с кнопкой действий предлагается разработчиком пользователю вместе с документацией к приложению. Для того что бы инициировать событие вызываемое кнопкой необходимо переместить курсор на нажимаемую область кнопки и произвести однократное или двукратное (в зависимости от функциональной спецификации) нажатие на левую кнопку мыши. Простая кнопка имеет два состояния - "нажато" и "отжато". Кнопка может изменять вид в зависимости от состояния и положения курсора или фокуса (например при «нажатии» зачастую визуально имитируется утапливание её в поверхность). Группа кнопок схожей функциональности может быть объединена в единую панель инструментов. Кнопка чаще всего представляют собой ограниченную область прямоугольной выпуклой формы с краткой подписью(или картинкой) того действия, которое может быть произведено по средством её нажатия.
Радиокнопка Радиокнопка (Radio button), или переключатель — элемент интерфейса, который позволяет пользователю выбрать одну опцию (пункт) из предопределенного набора (группы). Радиокнопки представляют собой элемент круглой (реже — квадратной или ромбовидной) формы, а выбранный элемент выделяется чаще всего точкой внутри. Рядом с кнопкой располагается описание выбираемого элемента. Радиокнопки располагают группами по несколько штук, причём в любой момент выбрана может быть только одна кнопка из группы.
рис. 2 группа радиокнопок При инициализации приложения какая-либо кнопка из группы, как правило, уже выбрана, но технически возможно оставить не выбранной ни одну. В такое состояние группу радиокнопок привести средствами только самих радиокнопок невозможно. Управление радиокнопками может совершаться как при помощи мыши, так и с клавиатуры.
Флажок Флажок (Сheck box) — элемент графического пользовательского интерфейса, позволяющий пользователю управлять параметром с двумя состояниями — ☑ включено и ☐ выключено. Во включенном состоянии внутри чекбокса отображается отметка (галочка (✓), или реже крестик(×)). В группе чекбоксов можно сделать выбор нескольких позиций, также обычно существует отдельный флажок чтобы выбрать все элементы или снять выбор со всей группы. Управление флажками может совершаться как при помощи мыши, так и с клавиатуры.
Список Список (List box) — элемент графического интерфейса пользователя, который отображает прокручиваемый список с элементами. Позволяет пользователю выбрать один или несколько элементов из списка, как правило с удержанной клавишей Ctrl или Shift, чтобы сделать множественный выбор. Все элементы содержатся в списке статически, но могут быть добавлены и динамически. Список занимает ограниченную область в интерфейсе где показано только конечное число его элементов. Для того чтобы выбрать не отображенные позиции нужно перемещать ползунок(обычно справа от списка) при помощи мыши или навигацию, нажимая Вниз(↓), Вверх(↑) на клавиатуре. Дерево Дерево, иерархический список (Tree view) - элемент графического интерфейса пользователя, который представляет собой совокупность связанных отношениями структуры пиктограмм в иерархическом древе. Каждый элемент чаще всего называют узлом и ветвью, который может иметь несколько подразделов. Обычно используется для просмотра структуры каталогов (папок) и других подобных элементов, связанных иерархическими отношениями. Каждый пункт (узел, ветвь) можно развернуть для просмотра подпунктов (если такие существуют), а также свернуть, чтобы их скрыть. Все манипуляции производятся при помощи мыши. Комбинированный список Комбинированный список, поле со списком (Combo box) — элемент графического интерфейса пользователя. Cочетание выпадающего списка (раскрывающегося при щелчке мыши) и однострочного текстового поля, которое позволяет пользователю ввести значение вручную или выбрать из списка. Перемещения в выпадающем списке можно совершать как при помощи мыши так и с клавиатуры. Ввод данных в текстовое поле совершается при помощи алфивитно-цифрового блока клавиатуры. Поле редактирования Поле редактирования (Textbox, Edit field) - элемент графического интерфейса пользователя, позволяющее производить ввод и вывод текстовой информации в определённой области интерфейса. Если записанная в поле редактирования информация превышает его размеры, необходимо использовать вертикальную или горизонтальную полосу прокрутки, двигая ползунок вертикально или горизонтально соответственно при помощи мыши. В некоторых интерфейсах для удобного отображения информации можно изменять размеры поля редактирования. Ввод данных в текстовое поле совершается при помощи алфивитно-цифрового блока клавиатуры. Меню Меню́ (Menu) — элемент интерфейса пользователя, позволяющий выбрать одну из нескольких перечисленных опций программы. В современных операционных системах меню является важнейшим элементом графического интерфейса пользователя. Элементами меню могут быть:
Выбор и перемещение между элементами меню может быть произведен как при помощи мыши так и с клавиатуры. Главное меню Главное меню́ (Сontext menu) — меню, набор позиций предполагаемо используемый пользователем чаще всего. Главное меню занимает в интерфейсе обычно одно из наиболее удобных мест. В большинстве интерфейсов состав меню можно менять при помощи настроек приложения. Главное меню может "всплывать" при нажатии на определённую кнопку либо сразу отображаться при запуске приложения. Для некоторых команд меню могут использоваться специальные сочетания клавиш. Контекстное меню Конте́кстное меню́ (Сontext menu) в графическом интерфейсе пользователя — меню, набор команд в котором зависит от выбранного, или находящегося под курсором в момент вызова объекта, а также состояния рабочей среды и программы, в которой этот объект находится — то, что в совокупности представляет собой контекст для этого меню. Вызов контекстного меню осуществляется как правило по нажатию «контекстной» (правой для правшей) кнопки мыши.
Панель инструментов Панель инструментов (Toolbar) — элемент графического интерфейса пользователя, предназначенный для размещения на нём нескольких других элементов. Обычно представляет собой горизонтальный или вертикальный прямоугольник, в котором могут быть относительно постоянно размещены такие элементы, как:
Как правило это элементы, вызывающие часто используемые функции, также доступные из меню окна (которое тоже может находиться на панели). Функции элементов могут обозначаться значками и/или текстом. Если элементы не умещаются на панели, то могут быть добавлены кнопки прокрутки, или меню с этими элементами. Состав и порядок элементов панели можно изменять в опциях приложения. Строка состояния Cтрока состояния (Status bar) - элемент графического интерфейса, предназначенный для вывода сообщений. Cтрока состояния обычно, имеет прямоугольную форму и находится в нижней части рабочего окна. Строка состояния не несет никаких других функций, кроме вывода оперативной информации.
Полоса прокрутки Полоса прокрутки (Scrollbar) - элемент графического интерфейса, предназначенный передвижения содержимого элементов вывода информации, используется чтобы переместить скрытую информацию в видимую область с помощью ползунка (slider). Полоса прокрутки обычно располагается справа или внизу другого элемента интерфейса. |
http://fimushkin.com/blog/design/ui/
Элементы пользовательского интерфейса (UI)
Пользовательский
интерфейс (на англ. user interface, UI) коротко
говорят ЮИ — это среда взаимодействия
пользователя с компьютером. Это
кнопки, меню, радиокнопки, чек-боксы
и многое другое. Сейчас не понятно,
ниже все заумные словечки объясню. Если
человек пользуется мобильным телефоном,
то приложения или браузер — это
пользовательский интерфейс.
Основные элементы пользовательского интерфейса
Сейчас буду пояснять те слова, которые написал выше. Должно все встать на свои места. Рассказываю про пользовательский интерфейс не просто так. Эта информация нужна для того, чтобы вы не забывали в макетах прорисовывать все эти элементы. Если верстальщик что-то из этого в макете не найдет он сделает это так, как ему это кажется правильным.
Тексты (заголовки)
Когда человек в вебе первое, с чем он сталкивается, это тексты и заголовки. Поэтому, нам как дизайнерам, важно прорабатывать сразу все заголовки в одном макете. Заголовки, обычно, называются H1, H2 … Hn, потому что так они называются в тегах html. В данном случае первый заголовок — это H1, далее H2 и так далее. Первый — это наиболее значимый заголовок. В лендинге это может быть на первом экране, дальше по низсходящей. В макетах нужно показывать все зголовки, чтобы верстальщик понимал, где какой тег ставить.
Ссылки
Здесь текст, заголовок и выделена ссылка. Ссылки имеют 4 состояния: обычное, при наведении (может менять цвет, подчеркиваться или что-то еще, эффект), нажатие и посещенное состояние (нажали и потом вернулись на сайт, откуда ушли).
Кнопки
Они похожи на физические кнопки, по крайней мере задумывались так, как кнопки на магнитофоне. Поэтому имеют состояния: наведение и нажатие. Это нужно все прорабатывать.
Радиобаттон и чек-боксы
Слева радиобаттон (по-русски радиокнопка, но буду называть ее радиобаттон поскольку у дизайнеров так принято), справа чек-бокс. В радиобаттоне можно выбрать только 1 вариант, у нас выбран енот. В чек-боксе возможность множественного выбора, у нас выбран тюлень и енот.
Формы
Формы нужно прорабатывать сразу в нескольких видах. Неактивная форма (наверху), активная (вторая сверху), форма с ошибкой (третья сверху), форма успешно заполненная (четвертая сверху). Иногда при ошибке в форме лучше справа сделать всплывающую выноску, где явно указать ошибку. Например, если в форме для ввода телефона посетитель ввел буквы, сделать на выноске надпись «в этом поле можно вводить только цифры». Это очень поможет людям заполнить форму и повысит ее конверсию.
Попап
Попапы или всплывающие окна авторизации (входа) на сайт нужно всегда прорисовывать. На этой картинке нет, но вообще принято делать крестик справа для выхода из формы.
Пагинация
Пагинация — постраничная навигация, которая позволяет быстро переключаться между большим количеством товара, листов или чего-либо. Сейчас распространена такая форма пагинации как лента новостей в вк, когда вы прокручиваете до низа и подгружаются еще новости. Так же можно сделать в интернет-магазине. В этом случае все равно нужно предусмотреть кнопку «показать больше товаров». Если их уже загружено очень много и показать какой-то прелоадер, то есть элемент, который показывает загрузку страницы.
Хлебные крошки
Часто можно встретить в интернет-магазине. Например, слева написано интернет-магазин, справа мужские вещи, еще правей спортивная верхняя одежда, далее куртки. Она позволяет перейти при клике на желаемый уровень вверх. По-другому называется навигационная цепочка.
Прелоадер
Штука,
которая показывает, что что-то загружается.
Они бывают очень разные. Можно нагуглить
«прелоадер гиф» и посмотреть
разнообразие и использовать понравившиеся.
Есть специальный прелоад
генератор,
где можно выбрать как он будет выглядеть,
какого цвета, в каком формате его
сохранять и так далее. Советую
использовать стандартные вещи, такие
как кружки и полосочки, для особых
проектов можно ипользовать что-то
необычное, а можно нарисовать самому
в фотошопе и сделать гиф анимацию.
Не переусердствуй, это конечно важный
элемент, но сильно много времени
на него тратить все же не стоит.
Таблицы
Часто дизайнеры забывают рисовать таблицу. Например, если делаешь интернет-магазин производственного оборудования, то в описании и в карточке товара появляются сравнительные характеристики, веса и еще что-то. Удобно использовать таблицы, когда строчки чередуются цветом, это очень хорошо воспринимается зрителем. В данном случае изображена таблица с чек-боксами, это не обязательно. Не забывайте про таблицы.
Меню
Меню —
это навигация по всему сайту. В данном
случае показал, что есть всплывающее
меню при наведении курсора. Это нужно
прорисовывать. Обрати внимание как
я показал наведение и интерактивность.
Просто скачал курсор png и поставил
его на место. Если у тебя большой
макет, поставь много курсоров. Например,
чтобы показать как работает меню, как
выглядят кнопка и ссылка при наведении.
При этом не забывай про обычное
состояние. Таким образом в статичном
макете можно легко показывать как ведут
себя элементы юзер интерфейса
в интерактивном состоянии.
Помни,
что курсоры бывают разные: для PC и для
мака.
Гуглятся
легко «курсор png». Если показываешь сайт
на маке (используешь mock-up c макбуком),
то нужно использовать правый курсор,
если в PC (например, mock-up с inernet explorer),
то левый.
