Эскиз Учебники

5 способов сохранить свой эскиз кухни в чистоте

Посмотрите, как хорошо эта еда сгруппирована внутри ограничительной рамки! Так свежо! Так чисто!

Отказ от ответственности: я только что поел, поэтому еда у меня на уме. Просто катись со мной.

Если вы будете смотреть «Канал путешествий» или «The Food Network» столько же, сколько и я, вы увидите множество удивительных кухонь из лучших ресторанов мира. Что-то у них общего? Писклясно-чистые кухни.

Кухня настолько чистая, что они позволяют посетителям смотреть!

Рестораны, такие как Alinea в Чикаго, очень серьезно относятся к уборке, и доказательство тому - их пудинг (хотя я сомневаюсь, что в ресторане с 3 звездами Мишлен подают пудинг). Вот что сказал кто-то о ритуале чистки кухни Alinea:

Мы убирались как минимум 4 раза в течение 9-10 часов, когда я был там [в гостях]. Четыре больших все чистит, и множество меньших чистит. Добавьте это к постоянным размахам линии и пылесосу каждые 20 минут. Все станции были безупречны, и если они были не идеальны, шеф-повар обязательно подметал, ругал вас и исправлял. Это способствовало тому, чтобы работать в чистоте, имея такую ​​чистую окружающую среду. Все было блестяще, нигде не было «кухонной грязи». Все оборудование - кулеры, нижняя полка на подготовительном столе, дно кастрюль и сковородок, днища сковородок отеля, спинки оборудования, полки под линией, окна - все было чисто. Это была кухня, на которой любая поверхность была достаточно чистой, чтобы ее можно было съесть. (подробнее здесь)

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

1. Придерживайтесь базовой сетки

Я не скажу вам использовать какой-то конкретный размер, пока вы придерживаетесь его. Лично я предпочитаю базовую сетку 8px, потому что она хорошо сочетается с различными типографскими стандартами и имеет больше делителей (1, 2, 4, 8px) по сравнению с (1, 5, 10px), но я знаю, что базовые сетки 10px популярны, так как все дизайны приложения поставляются с Shift + ← как 10px. Так что используйте все, что плывет на вашем буксире. Вы можете использовать Nudg.it, чтобы изменить стандартное расстояние Shift + ←, чтобы сэкономить время. Это вызывает удивление, когда вы разрабатываете в стиле, подобном Google Material Design, который работает с сеткой 8px.

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

2. Используйте ограничивающие рамки

После того, как вы настроили свою базовую сетку, невероятно полезно использовать ограничивающие рамки, чтобы держать объекты на вашем артборде организованно и равномерно распределенными. На изображении ниже я использую ограничивающие рамки для каждого элемента вкладки, и на самом деле не нужно ставить пробел между группами вкладок. Интервал встроен в ограничивающую рамку, поэтому каждая вкладка прилегает к одной рядом с ней. Использование плагина, такого как Relabel Button Кена Мура, позволит вам создавать равномерно расположенные вкладки, подобные этой, за считанные секунды.

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

3. Никогда не используйте линии для делителей

Пока мы говорим о размерах области щелчка, можем ли мы говорить о том, как трудно захватить отрезок ?! Как будто Sketch говорит: «Мы знаем, что на экране 2 миллиона пикселей, но вам нужно нажать только этот. Не то, чтобы… нет… нет… нет… алмос… прибил я… нет.

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

Так что вы должны сделать вместо этого? Я рекомендую использовать внутренние тени для рисования линий. Нарисуйте прямоугольник и дайте ему внутреннюю тень примерно так:

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

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

4. Организуйте свои стили и символы

Это легко. Знаете ли вы, что вы можете создать стиль и подменю символов в Sketch? Поместив косую черту в свой стиль и имена символов, вы можете создать организованную структуру «папок» для последующего поиска.

Он даже алфавитирует вещи в вашем подменю для вас! Спасибо, Эскиз!

5. Назовите свои слои ... Все из них

Выберите объект на вашей артборде и изучите последовательность горячих клавиш:

Command + Shift + J,
Command + R

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

На скриншоте выше вы увидите, что я назвал слой «Имя» Джейсона Бёрка. Почему? Ну, потому что это то, что есть. По умолчанию Sketch присваивает имя слою с тем текстом, который внутри него, но видеть «Джейсон Берк» в списке из потенциально сотен слоев мне не особенно полезно.

Так что ... это не так уж важно? Не на самом деле нет. Но где это становится исключительно полезным, это когда вы можете делать такие вещи:

Исповедь: Раньше я никогда не использовал функцию поиска для поиска слоев, но как только я начал семантически именовать слои, чтобы описать, что это за контент, а не то, что сказал контент, я понял всю мощь поиска слоев.

Еще одна вещь ... чистая на ходу. Когда вы закончите разработку этого элемента списка, переименуйте его! Сгруппируйте это! Если вы чувствуете себя диким ... символизируйте это! Крошечный объем работы по пути сэкономит вам массу времени в долгосрочной перспективе.

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

Многие изображения, использованные в этом посте, были взяты непосредственно из UX Power Tools, которые мы тщательно проектировали с учетом этих (и других) техник.

Проверьте это на https://www.uxpower.tools и подпишитесь на нас в Twitter @uxpowertools. Следуйте за мной тоже, если вас развлекали: @thejmoore.