Представьте себе, вы создаете свое веб-приложение для этой новой эпической идеи и реализуете основные функции. Вы думаете, что дизайн может появиться позже.
Что ж, теперь, когда вы набираете обороты и получаете обратную связь, пришло время пересмотреть или полностью воссоздать свой дизайн!
В этой статье я расскажу об инструментах и методах, которые вы можете использовать для этого.
Я лично попал в такую ситуацию с моим веб-приложением Mylo, приложением для управления тренировками. По мере того, как он рос и контактировал с пользователями, возникали проблемы с цветовым контрастом, несоответствиями и многим другим.
Устранение этих проблем можно описать двумя основными направлениями:
- Дизайн-система (как все будет выглядеть)
- Реализация (как применить внешний вид)
(Я сосредотачиваюсь на том, чтобы посмотреть здесь, но понимаю, что дизайн составляет только около 20% внешнего вида, остальное должно быть связано с пользовательским опытом)
Пройдя через это, я многому научился, но также сделал очевидным, насколько еще нужно научиться. Если вы обнаружите какие-либо ошибки или у вас есть несколько советов, пожалуйста, дайте мне знать: D
В этой статье я буду использовать TailwindCSS, но все работает так же хорошо, как и без него.
Компонент 1: Дизайн-система
Первый шаг, который сейчас очень популярен, - это разработка дизайн-системы. Система дизайна - это, по сути, визуальная кодовая база вашего программного обеспечения, и, как и кодовая база, это полное и конкретное описание того, как приложение должно выглядеть практически при любых обстоятельствах.
Итак, чем больше вы изучаете, что составляет дизайн-систему, тем больше кажется, что это невыполнимая задача. Полная система дизайна включает цвета, правила интервалов, стили текста, кнопки, контейнеры, брендинг, специальные возможности и многое другое.
Лучший и наиболее исчерпывающий ресурс, который я нашел, - это Контрольный список системы дизайна.
Поэтому мне удобнее ссылаться на то, что у меня есть, как на библиотеку дизайна с нечеткими руководящими принципами. Это работает, потому что я могу просто обращаться к себе по любым дизайнерским квестам;)
Итак, мы рассмотрим, как реализовать такие элементы, как кнопки, значки, цвета и несколько типов ввода.
Компонент 2: Реализация
Структура каталогов
Кодирование элементов дизайна отлично подходит для повторного использования и единообразия, но это не очень полезно, если компоненты находятся в приложении в случайных и труднодоступных местах. Мы хотим, чтобы они были организованы.
Я рекомендую помещать самые маленькие / атомарные элементы в папку src/components, а затем в их собственные подпапки (значки, входы, кнопки и т. Д.)
Составные компоненты, созданные из более мелких, могут быть помещены в папку src/layouts, снова со своими собственными подпапками.
Цвета
Определение и применение цветов - хороший первый шаг.
Как правило, у вас есть четкий дискретный набор цветов, который позволяет ваше приложение, чтобы ввести их, вы можете либо изменить файл конфигурации TailwindCSS, либо добавить их как переменные CSS.
Вот как это выглядит в TailwindCSS: я переписал цвета по умолчанию, чтобы принудительно использовать системные цвета, но вы также можете расширить тему по умолчанию и добавить свои собственные цвета.
Документы TailwindCSS - Конфигурация темы
Если вы не используете попутный ветер, этого также можно добиться с помощью таких переменных CSS:
Иконки
Прежде всего, я рекомендую использовать значки SVG из-за их настраиваемости. Вы можете изменять их размер без потери качества, динамически изменять их цвет, а их размер файла, как правило, меньше, чем эквивалентный png / jpg.
Получить фактические SVG можно с помощью параметров экспорта таких инструментов дизайна, как Figma, Sketch или Illustrator.
Когда у вас есть файлы, вы можете оптимизировать их с помощью SVGO, есть инструмент командной строки и веб-интерфейс.
Оба работают автоматически, указывая на файл, хотя веб-версия делает доступные параметры более доступными. Обязательно посмотрите на окончательный результат, чтобы убедиться, что ваши значки по-прежнему выглядят нормально.
Затем мы переносим значки в наше приложение Vue, я использовал метод, рекомендованный в Vue Cookbook. Это система, созданная Сарой Драснер, королевой SVG, и вы можете найти ссылку на нее здесь.
Чтобы он работал с TailwindCSS, вам нужно внести несколько изменений:
Поскольку сами SVG-файлы довольно легкие, использование полных компонентов показалось мне слишком затратным, поэтому я внес некоторые дополнительные изменения, чтобы использовать функциональные компоненты, вы можете проверить мою вилку здесь:
Кнопки
Изначально я хотел добавить кнопки так же, как с иконками, используя компоненты Vue, но это оказалось обманчиво сложным. Компонент должен был работать с кнопками, ссылками или router-link (с использованием vue-router).
Поддержка ссылок была важна для доступности и семантики, поскольку ссылки предназначены для перехода на другую страницу, а кнопки - нет.
В качестве решения я извлек общие классы в их собственные утилиты в TailwindCSS, что в чистом CSS является просто нормальным правилом класса.
Некоторые примеры:
Текстовый ввод
Для входных данных мы можем использовать компоненты Vue, но есть несколько вещей, которые следует учитывать.
Наши компоненты-оболочки должны быть легкими и прозрачными, мы можем сделать это, используя функциональные компоненты и подключив все атрибуты и прослушиватели событий.
Я также рискнул включить метку в компонент. Он соответствует дизайну, более доступен и гарантирует, что я никогда не забуду их.
Начнем с BaseInput.vue компонента:
А вот пример использования BaseInput.vue:
Обратите внимание, как мы вызываем компонент BaseInput.vue. Удивительно, но импортированные компоненты не отображаются в функциональных компонентах при использовании формата шаблона. Поэтому вместо этого мы помещаем импортированные компоненты в инъекции. Их также можно поместить в реквизит, если хотите.
Этот метод был поднят в этой проблеме на github:
Радио-кнопки
После всех элементов, которые мы сделали до сих пор, радиокнопки не слишком отличаются. Разница в том, что их стилизация может быть более сложной. Хотя вместо этого можно использовать стандартные кнопки, я хотел использовать радиокнопки по умолчанию, опять же для семантики и доступности.
Уловка, которую я обнаружил, состояла в том, чтобы использовать поведение переключателей, обертывающих ярлыки.
Сами по себе кнопки маленькие, и их сложно коснуться / щелкнуть, но если вы обернете их ярлыком, щелкнув в любом месте поля ярлыка, вы также выберете радио-кнопку.
Используя это, я стилизовал переключатели, фактически сделав вид метки так, как я хотел, и спрятал переключатели внутри метки.
Будьте осторожны при скрытии переключателя, поскольку он все еще должен быть видимым для программ чтения с экрана, tailwind предлагает для этого класс в стандартном CSS, который выглядит следующим образом:
Что касается v-slot и всех OR (||), я объясню это в следующем разделе о входах select.
Действительно полезный ресурс, в котором также есть флажки:
Smashing Magazine - Создание пользовательских входов в VueJS
Выбрать вход
Компонент select очень интересен как с точки зрения дизайна, так и с точки зрения функциональности.
С точки зрения дизайна было удивительно обнаружить, насколько «хакерским» является изменение стандартной стрелки вниз. Есть несколько способов сделать это, но трюк, на который я пошел, - это удалить стиль по умолчанию, установив appearance: none;, а затем добавив свой SVG по своему выбору с функцией URL-адреса CSS.
Чтобы сделать что-то подобное, вам нужно будет закодировать свой тег SVG в строку, совместимую с URL, я обнаружил, что этот сайт делает именно это:
Затем есть еще несколько стилей позиционирования и интервалов, чтобы разместить значок там, где вы хотите.
Для функциональности конечный пользователь должен сохранять контроль над тем, как отображаются раскрывающиеся значения, решение - использовать слоты с заданной областью. С помощью этого метода наш компонент может поддерживать любой массив значений.
Это связано с тем, что в официальном документе Vue показаны примеры использования массива строк и массива объектов для заполнения выбора.
Эти компоненты оболочки также дают возможность применять передовые методы, такие как метка для ввода и пустой отключенный первый вариант для лучшей поддержки iOS.
Заключение
Что ж, вы подошли к концу, это касается всех компонентов, которые я принес из своей библиотеки дизайна. Это действительно лишь малая часть того, что возможно, и я не мог надеяться, что буду полностью исчерпывающим. Тем не менее, я надеюсь, что это помогло вам и побудило вас заняться этим редизайном или даже просто начать проектировать!
Следующим шагом после упаковки всех этих полей ввода будет их объединение в форму или другой макет для повторного использования. Это некоторые из компонентов, которые вы поместите в папку src/layouts. Вы можете рассчитывать на следующую статью, когда я сам ее закончу: D
Не стесняйтесь оставлять любые комментарии ниже, и если у вас есть вопросы или вы хотите следить за ними, вы можете найти меня в твиттере @MaxMonteil
Другие полезные ссылки
Первоначально опубликовано на https://dev.to 31 января 2020 г.
