Дизайнер Рик Кеннеди в своем блоге на Medium опубликовано 7 простых правил создания привлекательных интерфейсов — по его мнению, основа качественной работы — работа со светом, количеством белого пространства, прототипированием.
Сервисная команда» Я люблю ИП "перевел заметку Кеннеди для раздела Интерфейсы.
Перво-наперво.
Это руководство не для всех.
Это руководство предназначено в первую очередь для:
- разработчики, которые хотят иметь возможность делать хорошие интерфейсы для себя, если вдруг на них надавят;
- UX-дизайнеры, которые знают, что хороший UX-дизайн лучше продается в красивой UI-упаковке.
Это отлично.
Просто закройте эту вкладку и идите дальше.
Раньше я был UX-дизайнером без каких-либо навыков графического дизайна.
Мне нравилось просто проектировать интерфейсы, но вскоре я понял, что есть масса причин научиться делать это красиво:
- Мое портфолио выглядело ужасно и едва отражало мой рабочий процесс и мыслительный процесс.
- Клиенты, с которыми я работал, были бы более готовы платить тому, кто умеет рисовать не только коробки и стрелки.
- Хотел ли я когда-нибудь присоединиться к стартапу на ранней стадии? Тогда мне лучше овладеть этими навыками сейчас.
Я окончил инженерно-технологический факультет. Мне не нужно делать вещи красивыми».
В конце концов, я научился дизайну так же, как учился любому другому ремеслу: посредством холодного, жесткого анализа, бесстыдного копирования того, что работает. Я потратил на проект 10 часов, а деньги получил всего за час.
Остальные 9 - я учился.
Отчаянно ищу в Google, Pinterest и Dribbble что-нибудь, что можно скопировать.
Эти «правила» — уроки, которые я усвоил для себя за это время.
Итак, для ботаников: если я сейчас хорошо разбираюсь в дизайне интерфейсов, то это потому, что я провел много исследований и не появился из ниоткуда с интуитивным знанием баланса и красоты.
В этой статье нет теории.
Просто чистая практика.
Здесь вы не найдете ничего о золотом сечении или теории цвета.
Только то, чему научился сам.
Есть дзюдо.
Дзюдо развивалось на протяжении сотен лет на основе японских традиций и философии боевых искусств.
Если вы возьмете уроки дзюдо, вы не только будете сражаться, но и узнаете много нового о гармонии и движении энергии.
А еще есть крав-мага, которую изобрели евреи, сражавшиеся с нацистами на улицах Чехословакии в 1930-х годах.
Там нет никакого искусства.
На занятиях по крав-маге вы научитесь тыкать людям ручкой в глаза.
Эта статья — крав-мага для экранов.
Правило №1: Свет исходит сверху
Тени — лучший способ помочь мозгу понять, на какой элемент интерфейса мы смотрим.Это, пожалуй, самое важное неочевидное правило, которое нужно усвоить при дизайне интерфейсов: свет исходит сверху.
В жизни свет чаще всего падает с неба или сверху.
Если это не так, то это выглядит странно.
Когда свет падает сверху, он освещает верх и отбрасывает тень внизу.
Верх будет светлее, а низ темнее.
Обычно мы не особо замечаем тени на нижних веках, но если их осветить, то перед вами предстанет девушка, похожая на демона.
То же самое справедливо и в дизайне интерфейсов.
Как и в нижней части каждой черты лица, в нижней части почти каждого элемента интерфейса есть тень.
Наши экраны плоские, но мы прилагаем все усилия, чтобы каждый элемент на них выглядел трехмерным.
Берём пуговицы.
Даже эта относительно «плоская» кнопка имеет множество деталей, связанных со светом.
- В ненажатом состоянии (вверху) имеет темный нижний край.
Ведь туда не попадает солнечный свет.
- Верхняя часть ненажатой кнопки немного светлее нижней.
Это потому, что он имитирует слегка изогнутую поверхность.
Чтобы увидеть солнечный свет, вам нужно направить зеркало вверх — поэтому изогнутая поверхность отражает немного больше солнечного света.
- Ненажатая кнопка слегка отбрасывает тень — это видно в увеличенном виде.
- Нажатая кнопка сверху темнее, чем снизу.
Потому что он находится на уровне экрана и получает меньше солнечного света.
В реальной жизни нажимаемые кнопки также темнее, потому что мы блокируем свет рукой.
Это главный урок.
И теперь мы применим это ко всему.
Вот пара настроек из iOS 6 — «Не беспокоить» и «Уведомления».
Оно немного устарело, но может многому нас научить: Верхняя часть панели управления отбрасывает легкую тень.
Отверстие для ползунка «Вкл» расположено еще глубже.
Он имеет вогнутую форму, поэтому нижняя часть отражает больше света, чем верхняя.
Иконки, наоборот, выпуклые.
Видите яркую область вверху значков? Это поверхность, перпендикулярная солнечному свету, поэтому она поглощает и отражает его.
Перегородка имеет тень, куда не попадает солнечный свет, и наоборот. Вот еще один пример из моей старой работы: элементы, которые обычно имеют вогнутую форму:
- поля ввода текста,
- кнопки нажаты,
- отверстия для слайдеров,
- радиокнопки (неактивные),
- флажки.
- кнопки (ненажатые),
- сами слайдеры,
- контроллеры выпадающего меню,
- карты,
- сама кнопка выбранного переключателя,
- всплывающие окна.
Плоский дизайн
iOS 7 наделала много шума благодаря своему «плоскому дизайну».Он буквально плоский.
В нем нет углублений и выступов – только линии и формы сплошного цвета.
Я, как и все остальные, люблю чистый и простой дизайн, но не думаю, что эта тенденция продлится долго.
Легкие 3D-эффекты в интерфейсах выглядят слишком естественно, чтобы от них можно было полностью отказаться.
Скорее всего, в ближайшем будущем мы увидим полуплоские интерфейсы (это то, что я рекомендую вам разрабатывать профессионально).
Так же чисто и просто, но с небольшими тенями, чтобы вы знали, на что можно нажать или щелкнуть.
Кроме того, Google выпустила Material Design. Это единый визуальный язык для всех продуктов компании, который по своей сути пытается имитировать физический мир.
На этой иллюстрации из урока Material Design показано, как передать разную глубину с помощью разных теней: Это направление, в котором будет развиваться дизайн.
Использование тонких сигналов для передачи информации.
Ключевое слово здесь «тонкий».
Это не значит, что он не имитирует физический мир, но в то же время он не похож на веб-дизайн 2006 года.
Здесь нет текстур, градиентов и отражений.
Я думаю, будущее за «полуплоским» дизайном.
И плоский дизайн — это только часть истории.
Правило №2: сначала черное и белое
Создавая дизайн в черно-белом режиме, перед добавлением цвета вы сможете максимально упростить самые сложные визуальные элементы и сосредоточиться на компоновке и размещении.В наши дни многие UX-дизайнеры увлечены подходом «сначала мобильные устройства» — в первую очередь разрабатывают страницы и взаимодействия для мобильных устройств.
Этот тип ограничения прекрасен.
Это очищает разум.
Вы начинаете с более сложной задачи (простое в использовании приложение на маленьком экране), а затем адаптируете решение к более простой задаче (простое в использовании приложение на большом экране).
Вот еще одно похожее ограничение: сначала сделайте черно-белый дизайн.
Начните с задачи посложнее — сделать красивое и удобное приложение без помощи цвета.
Цвет добавляйте в последнюю очередь, и то только для определенной цели.
Это единственный способ создать «чистый» и «простой» интерфейс.
Наоборот, его очень легко испортить обилием цветов в разных местах.
Черно-белый дизайн заставляет вас сосредоточиться на пространстве, размерах и планировке.
Это основа хорошего дизайна.
Бывают ситуации, когда этот подход не очень полезен.
Дизайны с определенной сильной направленностью — «спортивный», «яркий», «мультяшный» — нуждаются в дизайнере, хорошо владеющем цветом.
Но большинству приложений нужен только «чистый и простой» дизайн.
Проектировать для других гораздо сложнее.
Шаг 2: Как добавить цвет
Самое простое — добавить только один цвет. Один цвет на черно-белом веб-сайте — простой и эффективный способ привлечь внимание.Можно пойти еще дальше и добавить два цвета или несколько оттенков одного тона.
В большинстве случаев в Интернете используются HEX-коды цветов модели RGB. Для нас они абсолютно бесполезны.
RGB не подходит для сопоставления цветов.
Лучше использовать HSB (почти то же самое, что HSV или HSL).
HSB лучше, чем RGB, потому что это модель, которая ближе к тому, как мы воспринимаем цвет, и мы можем предсказать, как изменение значений HSB повлияет на цвет. Если вы впервые слышите об этом, вот хороший вариант. гид согласно цветам HSB. Изменяя насыщенность и яркость одного и того же тона, можно создать палитру из множества цветов – темных, светлых, для фона, выделяя и привлекая внимание.
При этом они не будут слепить глаза.
Использование нескольких оттенков одного или двух основных цветов — лучший способ выделить или приглушить отдельные элементы дизайна, не испортив его.
Еще несколько замечаний по цвету
Цвет — самая сложная часть графического дизайна.И хотя большинство статей о цвете носят обывательский характер и вряд ли помогут вам в работе, есть несколько очень полезных инструментов:
- Никогда не используйте черный .
Эта статья о том, что чистый черный цвет практически не встречается в реальной жизни.
Увеличение насыщенности серых оттенков, особенно темных, добавит живости вашему дизайну.
Кроме того, насыщенные серые тона наиболее близки к реальной жизни, что само по себе хорошо.
- Adobe Color CC .
Отличный инструмент для выбора нужного цвета, его изменения или создания палитры.
- Искать на Dribbble по цвету.
Еще один классный способ найти то, что сочетается с определенным цветом.
Например, если вы уже нашли один цвет, посмотрите, какие цвета с ним сочетают лучшие дизайнеры мира.
Правило №3: Увеличьте пустое пространство
Чтобы ваш интерфейс выглядел красиво, дайте ему дышать.В правиле №2 я сказал, что черно-белая палитра заставляет дизайнеров думать о компоновке и размещении элементов, прежде чем добавлять цвет, и это хорошо.
Теперь пришло время поговорить о самом макете.
Если вы когда-либо писали HTML-страницу с нуля, вы, вероятно, знакомы с тем, как HTML выглядит по умолчанию.
Короче говоря, все вынесено в верхнюю часть экрана.
Шрифт мелкий, между строками нет пробелов.
Между абзацами места немного больше, и они растягиваются на весь экран, сколько бы пикселей он ни был, 100 или 10 000. С эстетической точки зрения это выглядит ужасно.
Если вы хотите, чтобы интерфейс выглядел красиво, вам нужно добавить много пустого пространства.
Иногда даже слишком.
Пробелы, HTML и CSS Если вы, как и я, привыкли к форматированию в CSS, где по умолчанию нет пробелов, то пришло время отучиться от этой ужасной привычки.
Начните думать, что пустое пространство имеет первостепенное значение.
В самом начале есть только это, а вы его уменьшаете, добавляя элементы на сайт. Звук дзен? Я думаю, именно поэтому люди продолжают рисовать.
Начать с чистого листа — значит начать с пустого пространства.
Подумайте об отступах и полях с самого начала.
Все, что вы рисуете, — это ваше сознательное решение уменьшить пустое пространство.
Если вы начнете с кучи неформатированного HTML, пробелы будут последним, о чем вы подумаете.
Вот концепция музыкального плеера от Питер Квятковски : Обратите внимание на меню слева.
Вертикальное пространство между ссылками меню в два раза превышает размер самого текста.
Это 12-пиксельный шрифт с одинаковыми отступами сверху и снизу.
Или посмотрите на названия списков.
Между словом «Плейлист» и его подчеркиванием должно быть пространство шириной 15 пикселей.
Это больше, чем высота заглавной буквы шрифта! Про 25 пикселей между самими списками я уже молчу.
В правом верхнем углу также много места.
Текст «Искать всю музыку» занимает 20% высоты панели навигации.
Иконки имеют схожие пропорции.
Питер намеренно добавил сюда много пустого пространства, и это окупилось сполна.
Хотя это всего лишь концепция, с точки зрения дизайна этот интерфейс может конкурировать с лучшими музыкальными плеерами, существующими на данный момент. Даже интерфейсы, такие как форумы, могут выглядеть красиво и просто с пустым пространством.
Или Википедия: Конечно, можно возразить, что этому редизайну не хватает функциональности.
Но это хорошее место для начала.
- Добавьте пробелы между строками.
- Добавьте пробелы между элементами.
- Добавьте пробелы между группами элементов.
- Проанализируйте, что работает, а что нет.
-
Это Будущее
19 Oct, 24 -
Введите Код, Указанный На Картинке
19 Oct, 24 -
Простой Способ Справиться С Прокрастинацией
19 Oct, 24 -
Новое Расширение "Лекз Ридер"
19 Oct, 24
