Дизайн мобильного пользовательского интерфейса с помощью Sketch

Резюме урока с Адамом Рашидом

Это резюме нашего недавнего Живого Урока с Адамом Рашидом, преподавателем нашего курса « Разработка интерфейса пользователя с помощью Sketch» на SitePoint. Наш 1-часовой урок в режиме реального времени был посвящен созданию мобильного интерфейса пользователя с помощью Sketch. Чтобы узнать больше выступлений лидеров отрасли, ознакомьтесь с нашим курсом « Учись у экспертов» на SitePoint.

Мобильный дизайн с помощью Sketch

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

В этом уроке Адам рассказал всем о создании настоящего дизайна для мобильных устройств в Sketch. Мобильный первый дизайн просто имеет смысл, теперь, когда использование мобильного Интернета находится на одном уровне или, в некоторых случаях, превышает использование настольных компьютеров (по оценкам, оно составляет около 60% ). В последние годы использование мобильного интернета часто становилось спорным вопросом, в связи с резким ростом показателей использования мобильных устройств. Многие проекты по-прежнему начинаются с представлений рабочего стола и пытаются вырезать их, превращая в мобильные версии. Подход «сначала для мобильных устройств» гарантирует, что основной контент сначала хорошо отображается на мобильных устройствах, а затем расширяет дизайн для более крупных устройств.

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

Давайте вспомним вопросы пользователей о Sketch 40 и дизайне для Adam.

В: Есть ли какие-либо преимущества в Sketch, которые вы хотели бы выделить разработчикам?

Адам: Ну, я думаю, что Sketch действительно хорош для разработчиков. Самая большая вещь — это размер, расстояние и измерительные инструменты. С такими вещами, как Photoshop, это действительно сложно измерить. И вам действительно нужно отправить документ Word со всеми измерениями между вашими элементами.

Но отправьте разработчику файл Sketch, он может просто зайти и нажать Option и узнать точные размеры и размеры. И, как мы только что рассказали, атрибуты CSS, если они хотят быть очень ленивыми, могут просто скопировать атрибуты CSS для каждого элемента.

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

Разработчики могут использовать популярные фреймворки, такие как Bootstrap, Zurb Foundation или Bourbon Neat, которые по умолчанию имеют 12 макетов столбцов. Так что их очень легко развить прямо сейчас. Но опять же, это все дизайн.

Таким образом, вы хотите убедиться, что вы проектируете с учетом передового опыта. А используемая вами программа, такая как Sketch, должна позволить разработчикам сразу же приступить к работе и не беспокоиться об их изучении. Просто знайте, что они могут использовать Вариант и проверить расстояния.

В: Используете ли вы символы разных размеров артборда / разных размеров устройства?

Адам: Ну, я привык создавать разные для каждого размера экрана, но теперь это Sketch 4 (на самом деле это в 3.9, я полагаю). У них есть инструменты для изменения размера, так что теперь внутри символа можно сказать, прикрепить его к углу, и вы можете, например, если вы не хотите иметь другой контент, например, на планшете фактически есть все ссылки меню выложил. Но если бы у вас был такой же формат, как у вашего мобильного телефона … это имело бы смысл, если бы вы правильно его расположили. Например, вы должны прикрепить это к углу, чтобы оно не растягивалось. Это действительно упрощает его изменение и адаптацию к разным размерам экрана. Единственное, для чего вы хотели бы создать новый символ — это, как я уже говорил, когда вы изменяете свой контент в формате контента внутри символа.

В: Почему вы оставляете так много места между группами элементов? Выглядит ли это просто раздельно или есть техническая причина для этого?

Адам: Ну, это оба. Хороший дизайн — это решение проблем, и существует множество причин, по которым люди принимают разные решения. Использование пустого пространства всегда очень хорошая вещь. Особенно в дизайне пользовательского интерфейса, где нет, ну, когда пиксели свободны. Чем больше что-то разнесено, тем больше внимания вы можете уделить этому. Когда вы смотрите на это, если все это сгруппировано, сначала это будет выглядеть как одна большая вещь, и это будет выглядеть не так хорошо. И это будет выглядеть грязно.

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

В: Экспортируется ли CSS из Sketch, как правило, как есть, или вам нужно проделать дополнительную работу?

Адам: Давайте просто сделаем быстрый пример, давайте сделаем градиент очень быстро… и затем я скопирую его и добавлю к любому элементу, который должен иметь этот тип градиентного фона. Так что да, это полезно, но я не просто слепо копирую его. Я очень разборчив в том, какую часть кода я использую.

Завершение

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