Содержание статьи
- 1 Да, это список. Но это хорошо.
- 1.1 1. Использование стилей
- 1.2 2. Сделать таблицу стилей
- 1.3 3. Использование Transparency
- 1.4 4. Сделать пустой символ состояния
- 1.5 5 , Создать библиотеку иллюстраций
- 1.6 6. Использовать последовательные значки
- 1.7 7. Используйте плагин Organizer для Artboard от Ale Muñoz
- 1.8 8. Постройте архитектуру продукта (см. Выше)
- 1.9 9. Дайте Modals их собственный Artboard
Учебники по эскизам
Да, это список. Но это хорошо.
Авторская заметка и «Бесстыдная штепсельная вилка»: это методы, которые я придумал при создании UX Power Tools системы дизайна. Я активный дизайнер, и я использую эту систему по 10 часов в день, а также каждую технику, упомянутую в этой статье. Если бы я не верил в это, я бы не писал об этом ?
1. Использование стилей
Мне больно, как часто это нужно сказать, но я буду продолжать говорить об этом, пока вы не начнете это делать.
Фундаментальные изменения приближаются к эскизу очень скоро это сделает ваши жизни SO MUCH EASIER если вы просто пристегнитесь и начнете использовать стили. Нет лучшего времени, чем сейчас.
Использование стилей текста и стилей слоев делает ваш дизайн более последовательным и верят или нет, вы в конечном итоге будете работать быстрее .
2. Сделать таблицу стилей
Не требуется, но очень рекомендуется:
Таблицы стилей чрезвычайно важны в CSS, потому что они позволяют централизованно управлять тем, как выглядят визуально через веб-сайт. Внесите изменения в стиль и каждая кнопка на всем сайте будет обновлена.
Нет причин не создавать их для проектных проектов, чтобы у вас был аналогичный уровень контроля. Все, что вам нужно сделать, это иметь одну монтажную панель с одним экземпляром каждого сохраненного стиля текста и стиля слоя. Пока вы используете эти стили во всем своем дизайне, вы всегда сможете вернуться к этой монтажной таблице стилей, если вы когда-либо захотите обновить шрифт.
Система дизайна UX Power Tools построенный поверх центральной таблицы стилей. Вы можете менять шрифты и цвета на одной странице, синхронизировать свои изменения, и вся система будет обновляться, чтобы отражать ваши обновления. Это довольно круто и экономит мне массу времени, когда я работаю над крупными клиентскими проектами.
3. Использование Transparency
Это действительно забавный партийный трюк, но на прошлой неделе я продемонстрировал эту технику разработчику интерфейса, и я все еще убираю конференц-зал, где его разум взорвался.
Почему я использую прозрачность вместо шестнадцатеричных значений?
Это аккуратный маленький трюк, чтобы ваш текст выглядел отлично по любому цвету фона. На изображении ниже прозрачность (вторая строка) выглядит намного лучше, чем серая (первая строка), потому что она приняла оттенок цвета под ним. Нет никаких трюков; вторая строка текста является точной в каждом цветовом сценарии. Для вас просто прозрачность, которая делает их похожими на разные стили текста. Все по цене одного. Как удобно!
Этот маленький трюк можно использовать и для границ кнопок. Вы знаете, как иногда вам нужна красная кнопка со слегка более темной красной рамкой? Попробуйте внутреннюю границу с 25% черным:
4. Сделать пустой символ состояния
Я только начал делать это недавно, но это действительно хорошая экономия времени. Для таких вещей, как сетки данных или страницы, где могут быть или не быть данные в зависимости от того, что было создано или настроено, отличная идея иметь хорошее пустое состояние, чтобы пользователь знал, что не всякая надежда потеряна!
Создайте стандартный пустой символ состояния, затем вы можете быстро его повторно использовать позже. У меня обычно есть название, описание, иллюстрация и кнопка действия:
Для бонусных очков сделайте свою иллюстрацию (19459016)
Который подводит меня к …
5 , Создать библиотеку иллюстраций
Это немного продвинутая техника, но это простая концепция, которая упростит вашу жизнь, а также вашу любимую жизнь иллюстратора (спасибо, Паркер)!
Библиотеки Sketch уже давно не работают, но большинство людей используют их для управления своими проектными системами.
Создайте отдельный файл Sketch для иллюстраций, затем добавьте его в качестве библиотеки:
В вашей библиотеке иллюстраций, сделайте пометки для каждой пользовательской иллюстрации, которые вам понадобятся, а затем импортируйте символы в ваш файл дизайна в качестве заполнителей:
Это позволит вашему иллюстратору работать над их самостоятельно в любой векторной программе, которую они хотят (например, Illustrator или Affinity Designer). Когда они заканчивают иллюстрацию, они просто должны отбросить ее в соответствующую художественную панель в вашем файле библиотеки иллюстраций . Sketch уведомит вас об обновлениях библиотек, и все, что вам нужно сделать, это синхронизировать изменения. Теперь ваша блестящая новая иллюстрация во всей красе:
Довольно круто, да?
6. Использовать последовательные значки
Иконы «Нуклео» на сегодняшний день — лучшие значки, которые существуют в Интернете.
Вы можете менять цветные иконки на значки строк, менять вес и даже определять цвет акцента:
Как будто этого уже недостаточно, я никогда не нашел более простой способ создания значков для разработчиков, чем их экспортная функция:
Это серьезно не намного легче.
7. Используйте плагин Organizer для Artboard от Ale Muñoz
Мне стыдно сказать, что я не знал, что это существовало примерно месяц назад, но я с тех пор одержимо использовал его.
плагин был создан одним из ведущих разработчиков Sketch, поэтому он. просто.
Скачать здесь:
Хит Control-Option-Command-A на клавиатуре и все ваши монтажные арматуры будут волшебным образом выстраиваться и группироваться вертикально и горизонтально.
Две лучшие особенности этого плагина: Artboard Snapping и Layer Reordering Layer Reordering . Когда вы перетаскиваете арматуру в новую строку, она будет автоматически вставлена на место, даже если вы перетащите ее между другими монтажниками. Еще лучше, что монтажная панель будет корректно относиться ко всем другим монтажникам в списке слоев. Я говорю, я никогда не чувствовал себя таким организованным в моей жизни!
8. Постройте архитектуру продукта (см. Выше)
. Когда у вас установлен плагин с номером 7, архитектуры продуктов (вероятно, это лучшее название) становятся очень простыми в построении. Снимок экрана выше — это реальная архитектура продукта, которую я создал для клиентского проекта. Строки представляют собой функции, и каждая монтажная панель представляет собой экран, который мы определили, который должен быть спроектирован. Крошечные — модальные.
Это замечательно, потому что процесс проектирования буквально превращается в игру с заполнением в пробе. Легко взглянуть на весь документ, чтобы увидеть, какие пробелы все еще существуют в дизайне, и это будет очевидно, если отсутствуют монтажные панели.
9. Дайте Modals их собственный Artboard
Это небольшая подсказка, упомянутая в № 8, но перестает помещать ваши модальности поверх полных монтажных панелей . Это нормально, если вы сделаете это один раз, чтобы убедиться, что он чувствует себя хорошо в контексте другого экрана, но после того, как вы выясните правильный размер, нет необходимости продолжать показывать его на других экранах.
Почему?
Хорошо, что произойдет, если вы обновите экран в что модально? Теперь вам нужно дважды обновить этот экран: один раз на самом экране и второй раз под этим модальным экраном. Довольно раздражает.
Другим преимуществом создания автономных модульных монтажных плакатов является то, что вы можете ссылаться на них как модальные диалоги с использованием прототипирования InVision. Это позволяет пользователю щелкнуть по кнопке в макете InVision, и созданный вами мода фактически будет анимироваться на экране. Затем они могут щелкнуть от модального, и он будет «закрыт» точно так же, как в реальном приложении. Клиенты любят это дерьмо!
Загрузка...
