UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Что на самом деле означает простой дизайн? Правильный подход к созданию UI-kit для iOS
Редакція
Редакція

Опубліковано

Что на самом деле означает простой дизайн? Правильный подход к созданию UI-kit для iOS

Простой дизайн – это клише. Мы все делаем вид, что стремимся к простому дизайну. Это звучит так же, как фраза: «Сделай мир лучше!» из сериала «Silicon Valley». Подобно эпитетам «минималистичный» и «ясный», кажется, что просто написав эти заезженные слова, мы повысим ценность дизайна. Но что означает простой дизайн? Думаю, что каждый человек понимает это по-своему.

То же самое и с понятием красивый. Как мы можем определить, что прекрасно? Есть некая волшебная формула?

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

Как визуальный дизайн способствует отличному UX

Да, мы доверяем прекрасному.

Каждое утро я просматриваю свежие шоты Dribbble. Я люблю это занятие. Я считаю, что здесь рождаются тренды UI дизайна. Некоторое время назад, когда я более активно загружал файлы на Dribbble, я пытался понять, в чем заключается закономерность. Что заставляет популярные шоты выглядеть намного лучше остальных? Мы все это чувствуем, но можем ли мы объяснить почему?

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

Что ж, на этот счет есть масса книг и статей. Это философский вопрос, над которым люди думали веками, от Платона, Сократа, Аристотеля и Пифагора до наших дней.

«Анализ красоты» Уильяма Хогарта

«Попытки дать определение красоты можно разделить на две основные группы: теории, которые рассматривают красоту, как форму порядка, и теории, которые рассматривают красоту, как вид удовольствия».

Меня это особенно впечатлило – красота, как форма порядка. Думаю, это лучше всего объясняет потребность в наборах элементов интерфейса (UI kits). Они помогают упорядочить все стили.

Старт

Начало, основа, полировка. Это три этапа. Я подробно объясню все шаги, так что в конце концов вы сможете сделать их самостоятельно, следуя этому процессу. И я расскажу, как бесплатно скачать UI kit, чтобы вы могли использовать его в новом проекте.

Вы должны спланировать все очень тщательно, потому что здесь есть ряд подводных камней:

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

Строго линейный процесс

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

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

Итак, процесс выглядит примерно так:

Здесь нет этапа «Готово»

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

Определение

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

Цели

  • Многоцелевой
  • Дружелюбный и повседневный образ
  • Сбалансированный – не слишком простой или корпоративный, не слишком модный
  • Индивидуальный дизайн и уникальное ощущение (что-то отличное от стандартной формы Helvetica / SF)

Эти цели аналогичны целям в процессе UX дизайна. Они помогают сохранять четкое направление работы.

Методы

В качестве следующего шага, мы должны определить методы.

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

«В 1956 году была написана статья, которая стала одной из самых цитируемых в психологии. Она называлась «Магическое число семь, плюс- минус два: некоторые ограничения нашей способности обрабатывать информацию». Ее написал когнитивный психолог Джордж А. Миллер с факультета психологии Принстонского университета. Ее суть заключается в том, что количество перцептивных «фрагментов», которые средний человек может удерживать в рабочей памяти (компонент кратковременной памяти), составляет 7 ± 2. Эту формулу часто называют законом Миллера».

Самое важное правило в UX-дизайне, которое все нарушают

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

Модель простоты Джеффа Дэвидсона

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

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

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

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

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

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

Если мы попытаемся сделать все элементы «важными», мы достигнем точки, когда ничего не будет важным

Какая информация является основной, а какая второстепенной, третичной? Вы думаете, это понятно? Как вы думаете, если вы используете иерархию из более чем 7 (я бы сказал, более 3) блоков, пользователи не покинут сайт?

⚠️ Знаю, нечестно переделывать чужую работу, не зная контекста и требований. Но все же, уделяя особое внимание визуальным эффектам и влиянию на UX, Yolk UI kit изменил дизайн с правой стороны. Следуя целям и методам, которые я поставил ранее

Больше пустого пространства

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

«Несмотря на то, что вам могут сказать некоторые клиенты, пустое пространство в дизайне – это не пространство, которое нужно заполнить контентом или баннерами с рекламой. Пробелы так же важны, как и логотип вашей компании. Клод Дебюсси однажды сказал, что музыка – это промежуток между нотами. Точно так же хорошая типографика – это не только расстояние между буквами, но и сами буквы».

О веб-типографике

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

Более жирные, более заметные визуальные элементы

Таким образом, мы еще больше упростим сканирование, чтобы все было видно с первого взгляда.

Меньше контрастных стилей шрифтов

Наша цель – минимизировать когнитивную нагрузку. Просто выберите два стиля: для заголовка и для второстепенного текста. Давайте сравним его, например, со страницей раздела «Terms and Conditions» – увидев более шести разных стилей текста, вы понимаете, что не будете это читать.

Никакого плоского дизайна

Честно говоря, мне никогда не нравился плоский дизайн. Думаю, что он приносит в жертву ясность, чтобы следовать визуальному тренду. Строгое следование плоскому дизайну просто ради модности и минимализма упускает из виду многие важные визуальные подсказки. Подсказки, которые говорят людям, где они могут кликнуть, и куда они могут перейти.

Для меня старый образ 2013 года намного проще по сравнению с редизайном 2015 года

На мой взгляд, текстовые поля ввода – лучший пример недостатка плоского дизайна. Помните, как примерно пять лет назад по всей сети можно было увидеть эти штриховые поля? Не зря команда Google изменила их дизайн.

Мне кажется два новых стиля текстовых поле лучше

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

Единственная разница между полями ввода «Width» и «Height» и выбором «Scale» - это крошечный шеврон в дальнем правом углу

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

Похоже на улучшение?

Я бы выбрал более сбалансированный подход вместо того, чтобы следовать новому радикальному скевоморфизму или неоморфизму, как его называют на Dribbble. Давайте не будем пытаться произвести революцию в пользовательском интерфейсе, а просто немного подправим его.

Будьте последовательны

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

Инструменты

Перед тем как начать, мы должны знать, на каком количестве устройств должен работать интерфейс. Это Android или iOS девайс, или он должен быть гибким, или мы создадим версию для каждого устройства. Я бы посоветовал вам сделать ваши компоненты гибкими, чтобы вы могли легко изменить их размер.

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

Основа

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

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

Сетка

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

Я загрузил файл iOS с сайта apple.com, чтобы воспользоваться рекомендациями Human Design, и убедиться, что мой комплект соответствует им. Я должен признать, что я фанат Apple, но с точки зрения определения руководящих принципов, думаю, что руководство Material Design для Android намного более подробны, и да – они лучше. К сожалению, Apple не использует строгую сетку для своих устройств, поэтому я создал свою с нуля.

Несколько лет назад макеты сетки стали популярными в веб-дизайне, и самым популярным фреймом была сетка 960px, а содержимое было разделено на 12 столбцов. Позже, когда мы перешли на мобильные устройства, я попробовал использовать тот же подход, но он не сработал, потому что на мобильных девайсах значительно меньше пространства, а полужирные элементы уменьшают наши возможности, поэтому нам нужны более узкие столбцы. Я по-прежнему стараюсь сохранить более жирный макет сетки для основных шаблонов, но нам нужна более тонкая сетка с меньшими приращениями. Например, пространство между кнопкой действия и ее меткой на панели навигации. В данном случае промежуток в 15pt – слишком большой, поэтому я выберу 5pt. Я упомяну этот момент в разделе «Компромиссы» ниже.

Ширина экрана iPhone 12 Pro составляет 390pt, поэтому я разделил его на 26 столбцов шириной 15pt.

iPhone 12 Pro. 26 столбцов. 15pt каждый

Высота 844pt. Согласно iOS Human Design, индикатор «Домой» занимает 34pt. Я перехожу к нижней панели навигации, высота которой составляет 83pt в соответствии с рекомендациями iOS, поэтому я постараюсь сохранить это значение, как можно ближе.

Затем я перехожу к верхней панели. Нам нужно более одного стандартного заголовка. Высота строки состояния составляет 44pt. Следующим шагом будет установка места для кнопок с обеих сторон и заголовка посередине.

Горизонтальная сетка

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

После определения высоты верхних панелей мы можем установить вертикальную сетку 5pt.

Да, знаю. Важно отметить, что это не лучший подход, потому что в X-коде вы не устанавливаете эти размеры в пикселях, но именно так это работает в Sketch и Figma. Несмотря на этот дисклеймер, наш единственный способ структурировать дизайн – использовать пиксели (точки).

Типографика

Я стараюсь придерживаться iOS Human Design, но стараюсь сделать все элементы совместимыми с вертикальной базовой ритмической сеткой 5pt.

Я всегда начинаю с основного текста и использую его для установки вертикального ритма. Наиболее заметным отличием от стандартного интерфейса является более жирный основной текст и большая высота строки (микропробелы). Такой подход поможет улучшить внешний вид интерфейса.

Чтобы достичь цели «дружелюбный и непринужденный дизайн», я буду избегать плоского квадратного изображения и применять красиво закругленные углы. Я бы выбрал шрифт FF Din Rounded Pro. Он прекрасен. И я покажу вам, как он будет соответствовать форме наших иконок.

Базовый макет

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

Мы должны объединить следующие компоненты:

  • Верхние панели
  • Нижние панели
  • 1, 2 и 3 карточки

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

В итоге он выглядит так:

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

Иконки

Если они будут сделаны правильно, они очень помогут в формировании нашего стиля. Отличный подход к укреплению единообразия на разных страницах – это подогнать иконки под типографику. Я бы следовал этим правилам для своего пользовательского набора иконок.

  • Линейные иконки
  • Аналогичная ширина штриха (аналогична штриху типографики)
  • Закругленные углы
  • Сетка 5pt

Отличная статья Славы Шестопалова об оптических эффектах в интерфейсе

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

Теперь, следуя этим руководствам, я мог плавно создать свой набор:

Шаблоны

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

  • Логин
  • Настройки
  • Мой аккаунт
  • Список постов
  • Список изображений
  • Статья
  • Меню основной навигации

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

Вдумчиво добавляем цвета и мелкие детали. Я имею в виду осторожно и медленно

Базовые компоненты

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

Итак, это все необходимые компоненты:

  • Поля ввода
  • Кнопки переключения
  • Слайдеры
  • Кнопки
  • Контейнеры для карточек

Те же экраны, та же информация. Но добавлены мелкие детали.

Полировка

У нас есть фундамент, и пора доработать наш UI-кит. Теперь мы добавляем мельчайшие детали. На этом этапе нам нужно провести небольшое исследование и ответить на следующие вопросы:

  • К какой категории относится мое приложение? (Это приложение "Финансы", "Новости", "Электронная коммерция" или "Музыка"?)
  • Какие у меня конкуренты?
  • Какие цвета они используют?
  • Какие тренды сейчас в моде?
  • Какие изображения мне нужны?
  • Стоит ли применять какие-либо текстуры?
  • Какие иллюстрации мне нужны?
  • К какому тону голоса я стремлюсь?

Исследование

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

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

На мой взгляд, это самые популярные темы:

Основываясь на этих темах, я выбрал базовые экраны, которые мне понадобятся.

Экраны

  • Музыкальный проигрыватель
  • Список финансовых активов
  • Галерея
  • Экран профиля
  • Чат
  • Этапы оформления заказа

Компоненты

  • ПИН-код входа
  • Компоненты музыкального проигрывателя
  • Карта активов
  • Диаграммы
  • Карты товаров для оформления заказа
  • Календарь

Цвета

Я большой поклонник белых контейнеров на бледно-сером фоне, поэтому установил его в качестве фона экрана основного контейнера.

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

Scrovex / Cloud Security, 3D Arcade / iOS, #2017#Visual kei poster, 10Clouds ebook, Song Lyrics App Design, C Homepage Header Exploration, DOMO / SMM Agency web site

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

Нам также нужны стандартные зеленые, красные и оранжевые цвета для сообщений.

Я уже использую черный цвет с самого начала, но сейчас самое время, чтобы кое-что сказать о нем. Помните, как правило, использовать 100% черный – плохая идея. На эту тему есть несколько интересных статей, но просто отметим, что чистый черный текст на белом фоне не способствует удобочитаемости. В рекомендациях Material Design для Android предлагается использовать 87% непрозрачности черного в качестве цвета основного текста, но в моем случае это 86% #262626. Он немного легче и дополняет нашу дизайн-систему.

Установка правильного количества стилей непрозрачности – непростая задача, поэтому я предлагаю использовать подход Material Design или Human Design и осторожно добавлять или удалять стили из вашего списка. Мы могли бы усилить единообразие, сохранив небольшие границы, маркеры, шевроны и другие графические детали того же цвета и непрозрачности, что и наши иконки, и стили типографики.

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

Текстуры, тени, закругленные углы

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

Легкий скевоморфизм

Я пытаюсь внести изменения в дизайн, чтобы сделать его более дружелюбным и повысить его уникальность. Я вернусь в прошлое с тонким взглядом на скевоморфизм и буду следовать подходу с закругленными углами, который мы установили ранее – что Apple сделала со своей последней версией Mac OS. Думаю, вы помните, насколько популярным был «неоморфный» стиль на Dribbble несколько месяцев назад. Честно говоря, думаю, что это слишком, поэтому когда говорю о скевоморфизме, я имею в виду что-то вроде работ Дэйва Руиса. Это один из лучших примеров этого стиля. Он вдохновлял меня с тех пор, как я работал над нашей темой Kiddo WordPress theme (2011!), но вскоре после этого Windows 10 и более поздние версии iOS 7 начали революцию «тренда плоского дизайна».

Я добавлю легкую текстуру шума на задний план, потому что она помогает контейнерам выделяться. Хорошим примером являются кнопки-переключатели, слайдеры, изящные вогнутые контейнеры и небольшие выпуклые детали, некоторые кнопки CTA из моих шотов Dribbble и, конечно же, большие жирные часы.

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

Иллюстрации

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

Например, сейчас в моде 3D-иконки и иллюстрации. Вы могли видеть их на Revolut, поскольку они недавно применили его к своему последнему интерфейсу.

Изображения

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

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

Yolk UI kit

Компромиссы

⚠️ Сетка 8pt или 4pt – это самая распространенная сетка, которую вы можете найти в других приложениях. Легче использовать столбцы с шириной сетки и меньшие приращения внутри компонентов, таких как 2, 4, 8, 12, 16, 18, 24, 32, 36. В моем случае это 5px, и это ограничение.

⚠️ Большинство наборов иконок кратны 4, например, 12, 24 и 32 точки. Поэтому использование сетки 5pt – это компромисс, потому что не так просто применить иконки, если они мне нужны.

⚠️ Работа над размером iPhone 12 Pro и отказ от тестирования того, как компоненты выглядят на других устройствах iOS – не лучший подход, но это необходимо для объяснения процесса создания дизайн-системы.

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

⚠️ Набор 3D-персонажей, который я использую, слишком велик. Тем не менее, я решил, что лучше использовать что-нибудь хорошее, чем уникальное.

⚠️ Я упомянул «дизайн-систему» вместо «UI kit», но это означает нечто более обширное и подробное, и для этого требуется больше людей, участвующих в настройке руководств.

Возможности для улучшения

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

? Я мог бы добавить более подробную информацию о наиболее подходящем типе изображений.

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

? Я должен попробовать другие шрифты.

? Иконок в наборе не бывает много. Мне нужно еще больше.

Вывод

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

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

Вы можете бесплатно загрузить файл только что созданного UI kit, щелкнув по ссылке ниже, и использовать его по своему усмотрению. Идите и подробно исследуйте все, что я объяснил.

Скачать Yolk

Ссылки:

How Visual Design Makes for Great UX

Beauty and Ugliness

The Most Important Rule in UX Design that Everyone Breaks

How Chunking Helps Content Processing

The power of white space

The Power Of Whitespace

Reading Online Text: A Comparison of Four White Space Layouts

Myth #28: White space is wasted space

Developing the Invisible

White space in UX design

The Evolution of Material Design’s Text Fields

Flat UI Elements Attract Less Attention and Cause Uncertainty

Optical Effects in User Interfaces


Перевод статьи uxdesign.cc

Топ коментарі (0)