Опубликован: 27.12.2012 | Доступ: свободный | Студентов: 435 / 39 | Длительность: 09:19:00
Специальности: Программист
Лекция 6:

Знакомство с принципом нового дизайна Microsoft: Мастерством стоит гордиться

< Лекция 5 || Лекция 6: 123 || Лекция 7 >
Аннотация: При разработке дизайна для Windows-приложенийнеобходимо уделять особое внимание каждой детали, так как каждый пиксель играет важную роль. Помещение содержимого в модульную сетку и использование определенного типа шрифтов определяется принципом "lessismore" ("меньше значит больше"). В этой лекции говорится о том, как в WinRT-приложениях отбрасываются ненужные элементы интерфейса и уделяют первостепенное внимание содержимому

Дополнительные материалы представлены архивом Module_6_Assets.

Презентацию к данной лекции можно скачать здесь.

Цель лекции

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

Начало

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

Эта лекция содержит общий обзор сетки в новом дизайне для Windows.

Роль сетки в дизайне

Как упоминалось в "Новый подход к дизайну пользовательского интерфейса Windows" , на новый дизайн для Windows оказал влияние Швейцарский дизайн: в нем использовалась сетка, и применялся он в основном при создании указателей в современных транспортных системах.

Применение сетки позволяет удобно и кратко представить необходимую информацию. Акцент сделан на читабельность, отсутствие ненужных элементов, ровность линий, что позволяет легко воспринимать информацию. Нельзя со стопроцентной уверенностью проследить начало использования сетки в дизайне, но Швейцарский дизайн первой половины 20-го века широко применяет её и развивает её идеи. Многие утверждают, что вдохновением для дизайнеров стали работы художника Пита Мондриана.

Пит Мондриан, работа "Composition, II, with Red and Blue" 1929

Пит Мондриан, работа "Composition, II, with Red and Blue" 1929

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

Большинство работ швейцарских дизайнеров были основаны на идеях школы Bauhaus и работах модернистов. В 1928 году немецкий каллиграф, наборщик и дизайнер Ян Чихольд опубликовал книгу под названием "Новая типографика" (DieneueTypographie), в которой сделал акцент на создание системы дизайна и геометрические аспекты книгопечатания.

К 1960 г. использование сеткишироко распространилось и ассоциировалось со Швейцарским дизайном или Интернациональным типографическим стилем. В 1961 швейцарский дизайнер Джозеф Мюллер-Брокман опубликовал книгу "TheGraphicArtistandhisDesignProblems" (Дизайнер и его проблемы), где описал все тонкости построения раскладки с помощью сетки. Книга была издана на французском, немецком и английском языках, что помогло расширить круг читателей и популяризовать сетчатую раскладку.

Основы Швейцарского дизайна

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

  • акцент на типографические методы, особенно на разборчивость и читабельность, что достигается с помощью ограничения количества доступных шрифтов, длины строк и интервала между символами;
  • акцент на четкие геометрические формы при работе с графикой;
  • предпочтение шрифтов без засечек (sans-serif), в особенности - Helvetica и AkzidenzGrotesk.
ЯнЧихольд, обложкакниги, 1940 г.

ЯнЧихольд, обложкакниги, 1940 г.
Джозеф Мюллер-Брокман, плакат, 1955 г.

увеличить изображение
Джозеф Мюллер-Брокман, плакат, 1955 г.

Связь между Швейцарским дизайном и новым дизайном Microsoft

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

Влияние Швейцарского дизайна хорошо заметно на дорожных указателях

Влияние Швейцарского дизайна хорошо заметно на дорожных указателях

Прежде, чем сетка пришла в типографику

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

Подробнее о шрифтах

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

Шрифт и гарнитура шрифта

Разница в том, что гарнитура шрифта (тип шрифта) - это абстрактное выражение, для обозначения семейства шрифтов, такого, как Segoe UI bold, Segoe UI regular, Segoe UI light и так далее. А шрифт - это какой-то определенный шрифт. Например, Segoe UI regular обычно используется для отображения описаний файлов, имеющихся на компьютере.

Классификация гарнитур шрифтов

Есть 2 большие категории: шрифты с засечками (Serif) и шрифты без засечек (Sans-Serif).

У шрифтов семейства Serif на конце символов имеются небольшие линии - засечки. У шрифтов Sans-Serif засечки отсутствуют.

В новом дизайне Microsoft гарнитура шрифта без засечек названа Segoe UI и используется по умолчанию, также используется тип шрифта с засечками, названный Cambria.

Влияние Швейцарского дизайна хорошо заметно на дорожных указателях

Влияние Швейцарского дизайна хорошо заметно на дорожных указателях
Пункты, пиксели и ем

Шрифты можно измерять по-разному. Существует три наиболее распространенных системы измерения. Пункты (pt) - самый распространенный способ, в дюйме 72 пункта.

При разработке дизайна приложений используется измерение в пикселях (px).В зависимости от разрешения экрана, пикселей может быть 72 или 96 на дюйм. И еще существует ем - относительная единица измерения, особенно полезная при создании масштабируемого дизайна приложений. Об этом вы узнаете позже.

X-высота

"X-высота" - высота строчной буквы "х" в выбранном шрифте. Используется при измерении разницы высоты символов в разных шрифтах, так как высота символов при одинаково заданных числах (например, 14 пунктов) все равно может различаться. Так что некоторые типы шрифтов не взаимозаменяемы.

Базовая линия шрифта

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


Высота строки (интерлиньяж)

Высота строки - расстояние между базовыми линиями. Высота строки обычно указывается вместе с высотой шрифта, то есть 42/48, где 42 - высота шрифта, 48 - высота строки.

Выбор шрифта в дизайне для Windows

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

Три шрифта, установленные в Windows 8 по умолчанию, которые нужно запомнить: Segoe UI, Calibri и Cambria. Segoe UI - для таких элементов интерфейса, как кнопки и элементы управления для выбора даты. Calibri - для текста, который пользователь читает и пишет, например, в чате или при работе с электронной почтой. Cambria - для больших объемов текста, например, статей.

Можно ли использовать другие шрифты в Windows 8

В WinRT-приложениях вы можете использовать другие шрифты, но крайне рекомендуется придерживаться Segoe UI, Calibri и Cambria до тех пор, пока вы не станете опытным дизайнером для Windows. Если же вы все-таки решили, что будете использовать другие шрифты, помните о следующих принципах:

  • Выбирайте шрифт, оптимизированный для дисплеев.Например, шрифт Georgia для основного текста и Arialили Verdana для заголовков.
  • Выберите несколько (3-5) комбинаций размера и жирности шрифта.
  • Применяйте эти комбинации ко всему тексту в приложении.
< Лекция 5 || Лекция 6: 123 || Лекция 7 >
Максим Домшенко
Максим Домшенко
Россия, Курск, Региональный Финансово-Экономический Институт
Андрей Бобылев
Андрей Бобылев
Россия, Москва