-
В этом видео мы собираемся говорить о проектировании с сетками
-
и использование группировки и выравнивание передать структуру.
-
Вот пример сетки: это происходит от Java выглядеть и чувствовать себя дизайн руководящих принципов,
-
и он помечается солнцем и это веб-ресурс.
-
Это диалоговое окно Поиск, и что вы можете увидеть, что
-
все элементы в диалоговом окне были организованы с помощью сетки.
-
И что мы подразумеваем под сетку, что существует набор невидимых линий
-
что все элементы на экране оснастки.
-
Так что вы можете, в верхней части диалогового окна найти и затем области поиска
-
а затем ниже, все параметры,
-
и ниже, которые все еще найти и закрыть кнопки.
-
Вы заметите, что в левой части параметров линии с левым краем окна поиска
-
и правый край кнопок линий по правому краю окна поиска.
-
Вы также заметите, что найти, что является название диалогового окна,
-
висит влево, так что это легко определить название.
-
Вы можете увидеть, что наиболее важная информация в верхней
-
и как вещи, которые концептуально более связаны —
-
как параметры что параметризует поисковая система — ближе друг к другу, чем кнопки —
-
еще часть того же диалогового но немного далее друг от друга, и поэтому они получают больше пространства.
-
Он был на Баухауза в Германии в 1920-х
-
что стратегии для проектирования с сетками действительно вступили в свои собственные.
-
Баухауз, в то время был революционный дизайн школа,
-
и их графический дизайнер, Ян Чихольд, написал эту книгу, под названием «Новая типография»
-
повлечь его видение современного графического дизайна.
-
Он проповедует асимметричной типографии, засечек шрифтов,
-
и много других вещей, которые мы привыкли думать о как модернизма.
-
Одна вещь, которая отличает о Чихольд в книге на типографии
-
Это, что он читает как политический манифест:
-
Он действительно был это убеждение, что он меняется то, что дизайн, предназначенные для мира,
-
зачистки он всех его избыток и перегонки вплоть до его голые элементы.
-
Вы можете или не может избрать придерживаться ее принципов;
-
Некоторые из этих идей, теперь, кажется, немного редуктивной или чрезмерно дидактических или слишком морализаторства;
-
но есть много здесь, что является чрезвычайно полезным.
-
И эта картина меня на Баухауза пару лет назад.
-
Так что есть некоторое количество частей, составляющих систему сетки. Главным является набором столбцов —
-
в этом случае они равной ширины, но они не обязательно должны быть.
-
И вторая часть представляет собой набор желобов, который является пробел между столбцами.
-
Кроме того вещи как правило горизонтально выравниваются с помощью базового плана.
-
Вы можете добавить текст иерархически — так здесь мы видим заголовок и подзаголовок,
-
или может быть имя автора или что-то подобное.
-
И нет никакой необходимости для сеток для всех быть равной ширины.
-
Так вот макет, например, узкие левого столбца, который можно использовать для навигации,
-
и затем широкий Центральный столбец, который может иметь такое тело статьи или основное содержание страницы.
-
Сетки широко используются в газетах, в книгах и в Интернете.
-
Вот пример Myspace, который домашней странице прямо сейчас сильно решетчатой конструкции,
-
и вы можете увидеть приятный сочетание изображения и текст на своей домашней странице.
-
Здесь вы можете увидеть Стэнфордского homepage, и невидимой сетке основе этой всей структуры.
-
Но это не значит, что все это из одного столбца широкий весь путь вниз.
-
Одна вещь, которая мне нравится в этой страницы является что различные элементы удар по нескольким столбцам.
-
И вы также можете увидеть, как эта сетка 5 колонки идет через * почти * всю страницу:
-
Вы можете увидеть, как навигации в верхней части имеет пять столбцов;
-
Стэнфорд логотип сосредоточена на первых двух из этих колонн;
-
и эти пять столбцов путешествия вниз в течение основных пробелов часть страницы.
-
Сетка нарушается несколько внизу, с нижнего колонтитула.
-
Вот Нью-Йорк таймс страницу, где, опять же, вы можете увидеть сетку 5 колонки для содержания,
-
с шестой столбец для навигации с левой стороны.
-
Вы можете увидеть, как эти пять столбцов невидимо путешествовать всей страницы
-
и что некоторые из содержания, в середине, к примеру, две колонки шириной,
-
и какие части являются две колонки широкий различаются по всей странице,
-
и так, что делает его немного более динамичной, поэтому он не чувствует себя слишком наизусть и слишком скучно.
-
Газеты пользу от grid систем и действительно толкнул конверт на нем долгое время
-
так что [Мы] видел пару Нью-Йорк таймс, чтобы дать вам чувство различными способами они используют сетки.
-
Вот пример, который сочетает в себе текст и рисунки.
-
Здесь вы можете видеть «фокус плюс контекст», где самые последние статьи в верхней является крупнейшим,
-
и нижней статей вниз поменьше.
-
Вот пример сетки на главной странице Нью-Йорк таймс, что намного ниже раза,
-
показаны разделы, а затем статей в рамках каждого раздела
-
с небольшой уменьшенное изображение для каждого из разделов.
-
Сетка не должна быть неперекрывающимся:
-
Вы можете иметь разные строки содержимого на странице придерживаться различных сетках —
-
часто они будут иметь некоторые отношения друг к другу.
-
Так что я сделал быстрый макет здесь, где у нас есть шесть элементов в два ряда,
-
и сетка в шахматном порядке.
-
Когда вы имеете содержание, которое поставляется в нескольких частей —
-
например названия классов и курс номера —
-
как вы должны организовать их, чтобы они хорошо работают вместе и легко читать?
-
Я удивлен тем, насколько часто книги займет некоторое содержание, как это
-
и положить эти точки — или каким-то образом они будут отдельные две части.
-
Это явно не невозможно читать, но я думаю, что мы можем сделать лучше.
-
Вот пример, где мы справа элемент меньше —
-
которые могут быть номера страниц, или курс числа, даты или что-то подобное-
-
и тогда мы левому большего элемента — это название или некоторых других крупных фрагмент текста.
-
Самое, что мы сделали здесь, что мы изменили вес шрифта
-
так что число различных вес от текста.
-
Теперь какой из них является тяжелым и какой из них свет? Это зависит, на котором вы хотите подчеркнуть.
-
Здесь, вероятно, более важно название курса — это то, что вы собираетесь сканировать сначала —
-
и потом когда вы хотите, чтобы зарегистрироваться, вам нужно найти номер курса
-
и так что это легкий вес, потому что это то, что вы будете использовать второй.
-
Если у вас есть три части текста — например, если вы добавляете имя инструктор —,
-
Вы можете компенсировать, типографским.
-
Вот только один пример добавления это право.
-
Добавление третьего столбца может сделать вещи немного запутанной;
-
[но] в зависимости от вашего содержания, которое может работать слишком.
-
Другая стратегия, конечно, есть что третий элемент можно поместить на отдельной строке.
-
Здесь мы видим преподавателей, перечисленные ниже номер курса.
-
И если вы собираетесь это сделать, есть вещи, что куски вместе быть ближе вместе,
-
и отдельные куски далее друг от друга.
-
Итак, что мы смотрим на прямо сейчас, что ведущий —
-
inter-line расстояние между каждой линии — идентичны,
-
и это субоптимальных, потому что это менее ясно какой элемент, имя инструктор идет с.
-
Если мы добавим немного пространства между наши элементы
-
становится ясно, какой инструктора группы с какой курс.
-
Вы также можете увидеть компромисс здесь, где, имея две линии на курс, он читает очень очевидно,
-
но мы используем вверх больше вертикального пространства — может быть менее горизонтальное пространство.
-
В зависимости от которых пространства экрана или печати пространства прокладке
-
Это будет меняться дизайнерские решения.
-
Еще одна вещь, что мы могли бы сделать, если мы действительно хотим уменьшить курс чисел
-
значение масштаба обратно серый из этого числа, чтобы сделать их дальнейшего отступают.
-
Один Быстрый Подсказка: когда вы создаете системы, как это,
-
Убедитесь, что работать с длинный блок текста в первую очередь.
-
Она может быть легко дизайн для краткое название
-
и тогда систему сетки или выравнивание, которая ломает вниз, когда вы получаете что-то больше.
-
Это особенно верно, если вы разрабатываете для нескольких различных языков.
-
Например немецкий текст часто потребляет гораздо больше недвижимости
-
чем английский или испанский или французский текст.
-
Мы собираемся посмотреть примеры стилей различных выравнивания
-
и когда они работают в различных обстоятельствах в этой лекции.
-
В общем высокого порядка правило это для языков, слева right–reading,
-
текст, выровненный слева является самым быстрым для скимминга.
-
И вы можете увидеть что здесь: я являюсь то же содержание и в центре,
-
и я оставил все вкладки, так вот почему вы получаете сумасшедший дробление.
-
Он выглядит круто, на самом деле, и если вы собираетесь за динамизм, это может работать очень хорошо.
-
Однако, если вы хотели, чтобы иметь возможность быстро сканировать вещи,
-
Это будет немного медленнее, чем если все выравнивается.
-
Вот пример одной общей стратегии дизайна, где «все вращается вокруг.»
-
И вы можете, конечно, получить информацию от этой страницы [когда] вам необходимо;
-
но центрирования делает его трудным для проверки вещей, которые вам нужно.
-
Кроме того, есть много диаграммы нежелательной на этой странице-
-
Поэтому коробки вокруг обзор и публикаций являются довольно ненужных
-
и делает его медленнее для вашего глаза, чтобы добраться до вещей, что вам нужно.
-
Если эта страница были разработаны с использованием сетка и диаграмма нежелательной устранены,
-
Затем само содержание будет двигаться на передний план более сильно.
-
Таким образом Резюмируя, используя выравнивание хорошо помогает направлять ваши глаза и уменьшить беспорядок.
-
Избегайте незначительные перекосы, потому что они подрывают способность маяк Организации.
-
Мы автоматически Обратите внимание на модели, а также отклонения от них,
-
и когда вы хотите передать последовательности, поэтому используйте шаблоны
-
и отклоняться от них только тогда, когда требуется намеренно отличить это содержимое.
-
Если отклонение от шаблона является случайной или лени,
-
Он будет скачок в глаза и отвлекать от сообщения, которое вы пытаетесь донести.
-
И вы использовать визуальные близость — куски по поддержанию закрыть вместе и автономны,
-
и отделять куски далее врозь — различать элементы.
-
И вы можете использовать масштаб и иерархии — сделать важные вещи больше
-
и менее важные вещи масштабируется или меньше обратно в цвет —
-
как способ подчеркнуть, что более и менее важные части страницы являются.
-
Так, когда приводятся некоторые примеры, когда вы можете использовать различные ряды для различных целей?
-
У нас есть прекрасный пример веб-сайте Amazon.
-
Амазонка на самом деле имеет различные части их сайта, что они используют различные виды выравнивания для.
-
И вы можете увидеть первый пример здесь, где в диалоговом окне «Добавить адрес»
-
форма выравнивается так, что все метки выравниваются по правому краю, и что поля ввода выровненный по левому
-
так что вы получите это ясно желоба, как мы видели в нашем примере курсы и титулы.
-
Это делает то, что вам нужно заполнить вне очень ясно.
-
Здесь на странице аккаунта, вы можете увидеть все метки выравнивается по левому краю.
-
Эта страница также предлагает приятный exampleof визуального иерархией,
-
где ключевой частью метки является очень большим,
-
и sub-header, которая объясняет в немного более подробно — намного меньше
-
а также масштабированных обратно в серый значение.
-
И наконец, на правой стороне этой же страницы, мы можем увидеть пример выравнивание по верхнему краю,
-
где заголовки для формы являются выше формы клеток.
-
И это разнообразие не потому, что три разных дизайнеров Amazon сделал три различных частей
-
и они никогда не координируют — или по крайней мере я предположил, что это не так.
-
Это мой горб что Amazon стратегически решил, что было наиболее важной частью каждого элемента,
-
и как сделать ясно для просмотра того, что они должны уделять внимание:
-
Для вещей, которые мы знакомы с,
-
заголовки могут быть менее важны, чем для вещей, которые мы все знакомы с.
-
Таким образом, для входа в, заголовки должны торчать меньше, тогда как для аспектов за наш счет,
-
который мы может пойти не так часто как элемент страницы, нам нужно иметь эту палку больше.
-
В этот вводный курс у нас не будет шанс говорить много о цвета,
-
но я хотел бы сказать, немного здесь.
-
Это первая и наиболее важная вещь, чтобы сказать о цвете: обращать на это внимание!
-
И если я могу дать вам один стратегии для эффективного использования цвета, она сначала разработать в шкале серого 3,2 см.
-
Часто люди полагаются на цвет как костыль для создания визуальных различий в конструкции,
-
и, действительно, вы будете хотеть использовать другие инструменты сначала:
-
Запустите, работая с размахом и макет как пути отличительных элементов на странице.
-
Затем, когда вы использовали масштаба и макет столько, сколько вы можете,
-
яркостью можно использовать как способ обозначения более и менее важной —
-
яркостью это просто фантазии слово для серый значения, так что если вы разрабатываете в шкале серого 3,2 см,
-
Это означает, некоторые вещи черный, некоторые вещи-серый, некоторые вещи белый.
-
И как только вы получили самый лучший дизайн, что вы можете в шкале серого 3,2 см — в черно-белом —,
-
Затем добавьте цвет как способ придания ему дополнительной избыточности кодирования для рельефности.
-
Чтобы снова использовать Amazon в качестве примера, вот один из их страниц с результатами поиска в шкале серого 3,2 см.
-
И вы можете видеть, что вся информация, что вам нужно
-
явно настроена с точки зрения визуального порядок страницы —
-
какие элементы крупнее, какие элементы меньше.
-
Так что все это работает в шкале серого 3,2 см — в черно-белых —, но если вы добавить цвет, она становится еще лучше.
-
И, я думаю, это наиболее эффективный способ использования цвета.
-
Вторая вещь, чтобы сказать о цвете, что я думаю полезно это: В целом, не переусердствовать!
-
Все равно, меньше цвета как правило более мощным и менее подавляющее, чем больше.
-
Это, очевидно, будет зависеть от вашего вкуса,
-
и это, очевидно, будет зависеть от того, что вы пытаетесь передать.
-
Снова от Java выглядеть и чувствовать себя руководящие принципы,
-
Ниже приведен пример использования этой версии Java 6 цветов —
-
три оттенка серого, три оттенки фиолетового —
-
как способ организации все элементы в их библиотеки виджетов.
-
Один из способов, что они использовали цвет, что все, что можно нажать на было некоторым оттенком пурпурного,
-
и все, что вы не могли нажать на некоторые оттенки серого.
-
И, что обеспечивает хороший организационный характеристика,
-
и дает смысл пользователя о том, что они могут сделать, когда они видят экране.
-
И потому, что так последовательно использован цвет — цвет означает интерактивными —
-
Это очень легко учиться, даже если подсознательно.
-
И я хотел бы закрыть с помощью кнопки в этом примере книги. Вот первая страница книги Умберто Эко,
-
«Остров день до», и это красиво отпечатанный книга.
-
Я хотел бы отметить несколько вещей об этой книге.
-
Для начала это цитата из дневника, который находится в начале страницы
-
что это отправились в курсив, чтобы показать, что он отличается.
-
Затем каждая глава начинается с пару слов текста в малые прописные буквы,
-
и есть хороший объем пространства выше этой линии текста.
-
И наконец, есть много пробелов вокруг текста в целом,
-
и предоставление пробелов имеет важное значение.
-
Книги и тексты, которые немного комнаты вокруг них легче читать
-
чем те, которые являются джем-упакованные по краям полей.
-
Это одна из причин, почему вы увидите жесткие крышки имеют больше пробелов чем дешевле в мягкой обложке.
-
В мягкой обложке случае они пытаются спасти пульпы, чтобы сделать его более низкой цене;
-
но жесткие крышки, которые они могут взимать немного больше, предлагают больше комнаты
-
и легче на глазах для чтения.
-
Если вы заинтересованы в учить больше о сетках и выравнивание,
-
Есть много великих книг там; [но] есть несколько, которые я рекомендую:
-
Один является Ян Чихольд классика, «Новая типография».
-
Другой является Кевин кефали и Darrel Sano «проектирование визуальных интерфейсов».
-
И третий — Люк Врублевский «веб-формы дизайн»;
-
Это одна из книг, Розенфельд, и это целая серия отлично с точки зрения его HCI.
