CSS-live.ru

Cтатьи по тегу «дизайн»

Руководство по флексбоксам и гридам для дизайнеров

3

Перевод статьи Designer’s Guide to Flexbox and Grid с сайта medium.com для CSS-live.ru, автор — Джон Яблонски

Главная картинка

Что надо знать дизайнерам про эти раскладочные инструменты и перемены, которые они несут

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

Пространство в системах дизайна

45

Перевод статьи Space in Design Systems с сайта https://medium.com, опубликовано на css-live.ru с разрешения автора — Нейтана Кёртиса.

1-1scyy1iu_z0nic9lnqhohg

От основ до продвинутых понятий, чтобы задействовать пространство с умом

Я долго называл цвет, текст и иконки «большой тройкой» визуального языка системы. Все интерфейсные компоненты — от кнопок и далее — строятся на них. Но я кое-что упустил. Пространство, по-английски называемое тем же словом, что космос, наш последний рубеж.

Материальный дизайн — Макет: Метрики и контуры

1

Перевод раздела Metrics & keylines официальной документации Google: http://www.google.com/design/spec/material-design/.

Основная сетка

Все компоненты выравниваются по основной сетке, состоящей из квадратов со стороной 8 dp. Шрифт и иконки на панели инструментов выравниваются по сетке, состоящей из квадратов со стороной 4 dp. Эти правила применимы для приложений для мобильных устройств, планшетов и ПК.

Подробная информация о компонентах представлена здесь.

Материальный дизайн — Макет: Единицы измерения и размеры

2

Перевод раздела Units and measurements официальной документации Google: http://www.google.com/design/spec/material-design/.

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

Плотность пикселей

Количество пикселей, помещающихся в одном дюйме, называют «плотностью пикселей». Экраны с высокой плотностью имеют больше пикселей на дюйм, чем экраны с низкой плотностью. В результате элементы UI (например, кнопка) выглядят крупнее на устройствах с экранами с низкой плотностью и меньше на экранах с высокой плотностью.

Dpi, или разрешение экрана, обозначает количество пикселей конкретного дисплея.

Материальный дизайн — Макет: Принципы

0

Перевод раздела Principles официальной документации Google: http://www.google.com/design/spec/material-design/.

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

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

Материальный дизайн — Типографика

1

Перевод раздела Typography официальной документации Google: http://www.google.com/design/spec/material-design/.

После релиза Android Ice Cream Sandwich, стандартным шрифтом, используемым в Android, стал Roboto. После релиза Froyo штрифт Noto стал стандартным шрифтом, используемым в Android для всех языков, не поддерживаемых шрифтом Roboto. Кроме того, Noto — это стандартный шрифт для всех языков в Chrome OS.

Содержание

Материальный дизайн — Изображения

0

Перевод раздела Imagery официальной документации Google: http://www.google.com/design/spec/material-design/.

style_imagery_introduction

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

Материальный дизайн — Иконки

0

Перевод раздела Icons официальной документации Google: http://www.google.com/design/spec/material-design/.

Иконки приложений

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

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

Материальный дизайн — Цвет

4

Перевод раздела Color официальной документации Google: http://www.google.com/design/spec/material-design/.

style_color_introduction

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

Материальный дизайн — Приятные мелочи

2

Перевод раздела Delightful details официальной документации Google: http://www.google.com/design/spec/material-design/.

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

Материальный дизайн — Осмысленные переходы

0

Перевод раздела Meaningful transitions официальной документации Google: http://www.google.com/design/spec/material-design/.

Иногда пользователю трудно определить, куда нужно смотреть. Ему бывает неясно, как элемент попал из точки А в точку Б. Тщательно скоординированный дизайн движений может фактически управлять вниманием пользователя на протяжении множества шагов процесса или процедуры, позволяет избежать путаницы при изменении структуры или перемещении элементов, и в целом делает восприятие еще приятнее. Дизайн движений должен служить функциональной цели.

Материальный дизайн — Отзывчивое взаимодействие

0

Перевод раздела Responsive interaction официальной документации Google: http://www.google.com/design/spec/material-design/.

Отзывчивое взаимодействие создает доверительную связь с пользователем и вовлекает его. Когда пользователь взаимодействует с приложением и видит, как происходят прекрасные и абсолютно логичные вещи, он чувствует удовлетворение и даже восторг. Взаимодействие имеет смысл и цель, оно не происходит произвольно, оно может быть причудливым, но не отвлекает пользователя. Оно заставляет глубже исследовать приложение. Что произойдет, если я прикоснусь вот сюда? А потом сюда?

Материальный дизайн — Достоверное движение

0

Перевод раздела Authentic motion официальной документации Google: http://www.google.com/design/spec/material-design/.

Осознание осязаемости формы объекта позволяет нам понять, как манипулировать им. Наблюдение за движением объекта позволяет нам понять, легкий он или тяжелый, гибкий или жесткий, маленький или большой. Движение в мире материального дизайна не просто красиво, оно доносит смысл расположения объектов в пространстве, возможностей и намерений системы.

Материальный дизайн — Объекты в трехмерном пространстве

0

Перевод раздела Objects in 3D space официальной документации Google: http://www.google.com/design/spec/material-design/.

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

Эти свойства применимы и к объектам в материальном дизайне. Они помогают создать пространственную модель, которая может повсеместно применяться в приложениях знакомыми пользователям способами.

Материальный дизайн — Свойства материала

13

Перевод раздела Material properties официальной документации Google: http://www.google.com/design/spec/material-design/.

Материал обладает некоторыми неизменными характеристиками и характерной линией поведения. Понимание этих свойств поможет вам манипулировать материалом в соответствии с концепциями материального дизайна.

Физические свойства

Материал обладает изменяющимися размерами по осям x и y (измеряются в dps) и единой толщиной (1dp). Толщина материала не может быть равной 0.