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

Начнём с простого

Нарисуем лист вью с иконкой, и сгенерируем вёрстку.

Так выглядит примерная структура нашего элемента списка - слева иконка, и далее текст.

Такую структуру будет иметь наш компонент - вертикальный набор элементов, который мы придумали выше.

Так, со структурой разобрались, поняли что нам примерно нужно сделать, теперь приступаем непосредственно к дизайну. Для этого мы возьмём один элемент, и сделаем его на основе компонентов Фигмы и применим к нему Auto layout. Сначала объединим текст и иконку, добавим отступы, сделаем выравнивание по высоте в середине, и по левому краю. Получится так

Далее нам нужно создать два элемента, расположить их друг под другом по высоте, и объединить их Auto layout. В целом всё кажется готовым, но на самом деле, если вы поменяете длинну текста, то элементы не будут гибко подстраиваться друг под друга.

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

В результате у нас должен получиться такой вот список.

Запускаем генератор кода.

Открывается плагин с генерацией кода. где мы можем выбрать необходимую нам технологию. Я буду использовать Tailwind 2. Далее выберем нужный нам элемент дизайна, и плагин выдаст нам готовую вёрстку.

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

Так, всё работает, кроме иконок, которые нам нужно копировать как SVG и вставить в наш код. Делается это вот так

Заменяем наши иконки в вёрстке (я вставил прям в разметку, но вы можете и так как вам удобно - по url на пример.).

Получаем результат, который идентичен нашему в Фигме.

Подробнее про Auto layout тут.

Результат тут.

Сложнее. Рисуем карточку товара.

Нашей целью будет сделать так, чтобы при генерации кода, наша карточка была выполнена на основе display: flex; - CSS модели, для построения гибких контейнеров.

Я нарисовал макет, как в прошлом примере, сделал дизайн, распределил блоки, и при помощи Auto layout выровнял всё так, как мне нужно. Сгенерировал код, подправил некоторые нюансы с картинками и иконками, в результате получил готовую карточку товара. Подробнее про Flexbox тут.

Моя сгенерированная разметка доступна по ссылке ниже. Вы можете посмотреть и попробовать сами.https://play.tailwindcss.com/2VhmQJIJDl

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

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

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

У нас есть несколько способов сделать кляксы. Давай проверим их.

Рисуем круги в SVG

Начнем с чего-то простенького. Мы можем рисовать SVG в чем-то вроде Illustrator, Sketch, Figma или чем-то ещё, но вместо этого мы будем программировать SVG.

<circle cx="100" cy="100" r="40" fill="red" />

SVG делает рисование круга довольно тривиальным благодаря элементу <circle> с соответствующим значениями:

cxопределяет координату X центра окружности.

cy определяет координату Y.

r - радиус.

fill используется для заливки формы цветом.

Этот фрагмент создает круг с радиусом 40px с центром в точке 100px по оси X и 100px по оси Y. Координаты отсчитываются с верхнего левого угла родительского контейнера.

Давайте создадим несколько перекрывающихся кругов следующим образом:

<svg height="300" width="300">  <circle cx="80" cy="80" r="40" fill="red" />  <circle cx="120" cy="80" r="40" fill="red" />  <circle cx="150" cy="80" r="40" fill="red" />  <circle cx="150" cy="120" r="40" fill="red" />  <circle cx="100" cy="100" r="40" fill="red" /></svg>

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

Но кляксы не всегда такие идеально круглые... Мы можем смешать объекты, используя <ellipse> вместо <circle>:

<ellipse cx="200" cy="80" rx="100" ry="50" fill="red" />

Этот элемент очень похож на круг, за исключением имени тега и двух значений радиуса, чтобы определить горизонтальный (rx) и вертикальный (ry) радиусы по отдельности. Забавно то, что мы все равно можем получить правильный круг, если значения радиусов будут одинаковыми. Так что в некотором смысле <ellipse> немного более универсальный круг.

Если бы всё, что нам было нужно - это круг, мы, вероятно, могли бы использовать CSS без SVG. Любой прямоугольный элемент может стать кругом или эллипсом с правильно заданным значением border-radius.

.circle {  border-radius: 50%;  height: 50px;  width: 50px;}

но об этом немного позже.

Фристайл с SVG-путями

Благодаря тегу <path> в SVG мы можем создавать любые формы. Это как рисовать карандашом или ручкой. Вы начинаете с точки и рисуете линии, кривые, формы, а потом замыкаете путь.

В <path> есть много параметров для различных задач, например:

M Переход к точке

L Рисование линии

C Рисование кривой

Q Кривые Безье

Z Закрывание пути

Нам просто нужен параметр кривой (C) для примитивной кляксы. Но мы также переместим начальную точку и закроем путь, так что мы также воспользуемся параметрами M и Z.

Координаты играют большую роль в теге, поэтому то, что мы собираемся рассмотреть, будет выглядеть как данные Google Maps, заблокированные внутри нашего кода. Но это становится более логичным, когда мы знаем, что они делают.

Попробуем это

<svg xmlns="http://personeltest.ru/away/www.w3.org/2000/svg">  <path    fill="#24A148"    d=""  /></svg>

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

<path d="M 10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>

Это показывает, что наш путь начинается с координат (10 10), обозначенных буквой M перед ними. Затем он устанавливает кубическую кривую Безье (C) с двумя контрольными точками. Кривые Безье похожи на ручки на обоих концах пути, которые контролируют изгиб между ними. У нас есть две ручки Безье: одна для начального положения (20 20) кривой, а другая для конечного положения (40 20).

Давайте воспользуемся этими знаниями для создания нашего большого двоичного объекта.

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

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

www.blobmaker.app

Эффекты липкости с фильтрами CSS и SVG

Правда SVG <path> сложен? Что, если я представлю вам способ преобразовать множество пользовательских фигур (которые вы можете создавать с помощью div) в липкие кляксы? Идея состоит в следующем - мы собираемся создать два пересекающихся прямоугольника. Они одного цвета, но имеют небольшую прозрачность, чтобы затемнить места пересечения.

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

Два пересекающихся прямоугольника превратятся в это

Давайте сначала разберемся, как работают фильтры в SVG. Они объявляются с помощью тега <filter> в элементах HTML или других элементах SVG, например, для тега <circle> можем применить CSS правило.

circle {  filter: url("#id_of_filter");}

<filter> - это, по сути, оболочка для фактических эффектов фильтра, которые включают:

• <feGaussianBlur>

• <feImage>

• <feMerge>

• <feColorMatrix>

• И другие Полный список можно найти здесь.

Наша клякса размытая и цветная, поэтому мы собираемся использовать <feGaussianBlur>и <feColorMatrix>.

<feGaussianBlur>принимает несколько атрибутов, но нас интересуют только два из них: сколько размытия мы хотим и где мы этого хотим. Стандартное отклонение (stdDeviation) и свойства in соответствуют нашим запросам.

in принимает одно из двух значений:

SourceGraphic - размывает всю форму

SourceAlpha - размывает альфа-значение и используется для создания теневых эффектов.

Немного поигравшись, я обнаружил эффект <feGaussianBlur>:

<feGaussianBlur in="SourceGraphic" stdDeviation="30" />

Это вставляется прямо в разметке HTML с идентификатором, который мы вызываем для родительского элемента нашего большого двоичного объекта:

<!-- The SVG filter --><svg style="position: absolute; width: 0; height: 0;">  <filter id="goo">    <feGaussianBlur in="SourceGraphic" stdDeviation="30" />  </filter></svg><!-- The blob --><div class="hooks-main">  <div></div>  <div></div></div>

Фильтр на самом деле не отображается, даже если он находится в разметке. Вместо этого мы ссылаемся на него как на фильтр CSS в родительском элементе большого двоичного объекта:

Мдассс, это пока не то что нам надо. Размытие расфокусировано, а форма элемента потеряла границу и цвет. Нам нужен эффект выпуклости с размытием границ и сплошной цвет для заливки формы. Здесь в игру вступает наш следующий фильтр SVG, <feColorMatrix>.

Нам нужны два атрибута <feColorMatrix> :

in - указывает, где применяется эффект, как и <feGaussianBlur>.

values - матрица из четырех строк и пяти столбцов.

Атрибут values имеет немного больше нюансов. Он содержит матрицу, которая умножается на значения цвета и альфа канала каждого пикселя и генерирует новое значение цвета для этого пикселя. Математически говоря:

new pixel color value = ( values matrix )  ( current pixel color value )

Немного математики в наших трансформациях. В этом уравнении матрица значений равна:

[F-red1 F-green1 F-blue1 F-alpha1 F-constant1 F-red2 F-green2 F-blue2 F-alpha2 F-constant2 F-red3 F-green3 F-blue3 F-alpha3 F-constant3 F-red4 F-green4 F-blue4 F-alpha4 F-constant4]

Здесь F-red означает долю красного в пикселях со значением от 0 до 1.

F-constant - это некоторое постоянное значение, которое нужно добавить (или вычесть) из значения цвета.

Разбиваем эти значения дальше

У нас есть цветной пиксель со значением RGBA rgba (214, 232, 250, 1). Чтобы преобразовать его в новый цвет, мы умножим его на нашу матрицу значений.

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

Узнайте больше о матрице значений из документации MDN.

В нашем случае эти значения работают очень хорошо:

<filter id="goo">  <feGaussianBlur in="SourceGraphic" stdDeviation="30" />  <feColorMatrix    in="blur"    values="1 0 0 0 0             0 1 0 0 0             0 0 1 0 0             0 0 0 30 -7"  /></filter>

Я добавил еще несколько стилей в кляксу, чтобы растянуть её из угла.

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

Использование CSS border-radius

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

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

.rounded {  border-radius: 25%;}

Это хороший способ добиться единообразия всех углов. Но кляксы не такие однородные. Мы хотим, чтобы одни углы были более округлыми, чем другие, чтобы некоторые из них выглядели липкими. Вот почему мы выбираем составляющие свойства border-radius, например:

.element {  border-top-left-radius: 70% 60%;  border-top-right-radius: 30% 40%;  border-bottom-right-radius: 30% 60%;  border-bottom-left-radius: 70% 40%;}

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

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

По закону использовать изображение человека можно только по его письменному согласию и определенным в согласии образом (это написано в статье 152.1 Гражданского кодекса). Фотостудии, например, именно для этого берут у заказчиков согласие в договорах на использование фотографий в портфолио, потому, что без согласия - такое использование будет незаконным.

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

Через некоторое время присылает дизайнер новый макет с изображением уже другой девушки и сообщает, что фото скачано с сайта "стоковых" изображений, но они купили лицензию у сайта и теперь все законно. Очень хорошо, значит учатся. Прошу прислать договор с сайтом. Присылают - читаю, договор на одном листе, в котором никакой конкретики, только сумма за некую "стандартную" лицензию и ссылка на условия использования на отдельном сайте. Они их не читали. Не поленился прочитать условия на сайте, что входит в эту "стандартную" лицензию, читаю, так и есть - лицензия без ограничения для некоммерческого использования или, а для вот коммерческого только в наружной рекламе на аудиторию не более 500 000 человек. Перезваниваю дизайнеру, спрашиваю, где планируете это использовать и узнаю, что реклама будет размещаться на билбордах в Москве и Санкт-Петербурге, а также выйдет рекламой на телевидении. Уточнил у дизайнера читала ли она условия использования лицензии - не читала (а что надо было?). Макет рекламы не согласовал т. к. для такого объема нужно покупать расширенную лицензию и есть риски получить иск о запрете использования изображений и демонтаже уже размещенных рекламных конструкций.

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

С фото понятно, а если я хочу видео снять и разместить на сайте или в блоге?

Если Вы решили снять видео (фильм, рекламный ролик,) с музыкальным сопровождением и сюжетом помимо договора с актером(ами), нужно оформить с ними договор о предоставлении Вам прав на результаты творческого труда, которых Вы намерены использовать в фильме - с автором музыки, которая используется в ролике, с автором сценария и режиссером - при создании видео, или как его называет закон - аудиовизуального произведения и т. д. Интересующиеся могут почитать статью 1263 Гражданского кодекса.

Правда у этого правила тоже есть исключение - есть такие произведения, которые считаются "народным достоянием" и их можно использовать без получения согласия автора или его наследников. Но для того, чтобы произведение стало общественным достоянием нужно, чтобы прошло более 70 лет со дня смерти автора.

Однажды коллега попросил прислать форму договора с актером, который будет участвовать в съемках рекламного видеоролика. Договор я прислал и уточнил - нужны ли договоры с другими участниками этого процесса? С композитором? Исполнителем песен? Автором сценария? Где будет использоваться музыка?

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

Наш конкурент нагло копирует разработанные нами образы детских игрушек. Создает похожие и продает. Как его наказать и пресечь незаконное использование?

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

За нарушение этих требований можно получить административный штраф до 40 тыс. руб. с конфискацией контрафактных экземпляров произведений и фонограмм (см. 7.12 КоАП РФ) или лишение свободы сроком до 2 лет (статья 146 Уголовного кодекса РФ).

Практика показывает, что правообладатели весьма успешно защищают свои права и запрещают незаконное использование. ООО Смешарики, например, имеет более 500 судов с коммерсантами о взыскании компенсации за нарушение исключительных авторских прав на произведения изобразительного искусства рисунки: Лосяш, Нюша, Крош, Копатыч с ожидаемым исходом. В этом можно убедиться, если зайти на сайт арбитражного суда https://kad.arbitr.ru/ и вбить в поиск ООО Смешарики. Тем кому лень открывать и что-то искать можно почитать решения судов о том, как правообладатель наказывает рублем кондитеров: раз, два, три.

Кроме государева "ока" за соблюдением авторских прав бдят и видеосервисы и по заявлению правообладателей достаточно оперативно удаляют видео.

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

Если Вы хотите узнать, кто собственник помещения, здания или земельного участка - Вы обращаетесь к единому Государственному реестру недвижимости Росреестра. Если хотите узнать собственника товарного знака - Вы обращаетесь к сайту Роспатента. Какого-то единого реестра прав на музыку или текст песен нет. Поэтому проверку легальности продажи вам прав на произведение придется проводить самому с определенным допуском достоверности.

Для уже опубликованных произведений можно проверить дату когда была первая публикация музыки или текста (если она публиковалась) с указанием автора или текста опубликовать с указанием депонирование. Если произведение не публиковалось рекомендуется пользоваться услугой по "депонированию произведения", то есть фиксацию того, что вы "зафиксировали" в конкретную дату существование и обладание таким объектом. В случае спора это поможет доказать, что Вы первый правообладатель. Депонированием занимаются нотариусы, отдельные некоммерческие организации. Но риск купить контрафакт у мошенника в любом случае имеет место.

Ок, а кто с кем должен заключать договоры?

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

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

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

Директор школы не государственный служащий. А вот принадлежность его к политической деятельности понятие субъективное и определяется деятельностью самого директора, а не его должностью. Верховный суд по этому поводу сказал следующее: Без согласия гражданина обнародование и использование его изображения допустимо в силу подпункта 1 пункта 1 статьи 152.1 ГК РФ, то есть когда имеет место публичный интерес, в частности если такой гражданин является публичной фигурой (занимает государственную или муниципальную должность, играет существенную роль в общественной жизни в сфере политики, экономики, искусства, спорта или любой иной области), а обнародование и использование изображения осуществляется в связи с политической или общественной дискуссией или интерес к данному лицу является общественно значимым.Вместе с тем согласие необходимо, если единственной целью обнародования и использования изображения лица является удовлетворение обывательского интереса к его частной жизни либо извлечение прибыли.Не требуется согласия на обнародование и использование изображения гражданина, если оно необходимо в целях защиты правопорядка и государственной безопасности (например, в связи с розыском граждан, в том числе пропавших без вести либо являющихся участниками или очевидцами правонарушения).

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

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

Я - человек, который не любит фотографироваться. Я часто замечаю, как граждане снимают видео/фото в общественном месте. Если у меня есть все основания полагать, что я был запечатлен чужой камерой, имею ли я хоть какие-то права? Что реально может сделать человек, которого фотографируют без его на то согласия?

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

Я могу потребовать если я попал в кадр новостей чтобы меня не показывали?

В законе о СМИ прописаны требования для журналисткой деятельности и они такие же - журналист обязан получить ваше согласие кроме случаев если вас снимали вследствие обсуждения какого-либо вопроса - то есть если вас остановили на улице задали вопрос и вы ответили на него, то вы приняли участие в общественной дискуссии и тем самым согласились на съёмку. В целом у судов неоднозначный подход к этому вопросу. Вот что пишет Конституционный суд, например, "Кроме того, фотографии, на которых А.О. Безрукова позировала фотографу, были сделаны во время проведения публичного мероприятия с участием прессы, что могло свидетельствовать о наличии ее волеизъявления не только на фотосъемку, но и на дальнейшее обнародование и использование этих изображений в средствах массовой информации."

Размещенные изображения и текст на сайте целесообразно "защитить" знаком охраны авторства. (копирайт). Знак охраны авторского права состоит из латинской буквы "С" в окружности, наименования объекта защиты права, имени правообладателя и цифрового обозначения года первого опубликования произведения (без слова "год" или сокращения "г."). От копирования он, сам по себе не спасает, но может быть полезен при доказывании своего авторства. Если кому интересно, то правилам написания копирайта посвящен целый ГОСТ Р 7.0.1-2003.

Спасибо, что дочитали до конца. Если у Вас остались вопросы - Вы можете задавать их в комментариях и прислать по почте по адресу p_slizky@mail.ru .

Для кого эта статья

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

Проблема

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

Данная проблема встречается повсеместно, и усугубить ее может пожалуй лишь контент ячейки, который не переносится построчно, увеличивая тем самым ширину колонки.

Подопытный набор данных

Для того чтобы понимать лучше суть проблемы, мы придумаем себе таблицу, и будем ее адаптировать.

Колонки:

1. Номер

2. Фото

3. ФИО

4. Телефон

5. Email

6. Дата

7. Текст описание

8. Статус

9. Действия

Результатом станет довольно обширная таблица, которая имеет все нужные нам виды колонок. Признаться даже список сверху вызывает у меня вопросы справа тратится слишком много места.

1. С фиксированной шириной и переносом строк

2. С шириной по контенту

Анонс следующей статьи О списках в интерфейсах и как их применять по феншую.

Десктоп

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

Варианты адаптации

Проблема наша талица по ширине не влезает в телефон.

Ошибочные решения

1. Уменьшать шрифт

2. Убирать колонки

3. Делать растровую картинку с таблицей и вставлять ее в макет

Возможные верные решения по убыванию

1. Каждую строку таблицы делать блоком

2. Горизонтальный скроллинг

Первый вариант адаптации - сделать каждую строку таблицу отдельным блоком, и вывести ее на экране телефона.

Проблема с данным методом: Удлиняется вертикальный скроллинг, данные повторяются. (частично решается добавлением фильтров для поиска)

Возьмём за пример таблицу, которая отображена сверху. В таком виде она не поместится по ширине в мобильный экран. Для решения этой проблемы мы будем каждую строку таблицы преобразовывать в блок.

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

Второй вариант - горизонтальный скролинг таблицы.

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

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

Вывод

Теперь адаптация таблиц не должна нам казаться невыполнимой задачей, мы научились делать так, чтобы таблицы были удобоваримыми не только на десктопной версии сайтов, но и в мобильной (что применимо и к мобильным приложениям).

Если вы заметили ошибки, или вам есть что дополнить - дайте мне знать, я обязательно это сделаю.Спасибо за внимание!

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

Я постаралась систематизировать в этой статье свой опыт подбора множества дизайнеров на проекты самой различной сложности: от пакета баннеров, лэндинга до интерфейса No-code платформы без ТЗ. Материал будет полезен тем, кто впервые подбирает дизайнера на проект или получает дизайн не того качества, которого хотелось бы.

Поймите - кто конкретно вам нужен

Дизайнеры, как и программисты все - разные. Как 1С-программист не напишет вам CMS на Python, так и дизайнер лэндингов не сделает прототип CRM, которым будет удобно пользоваться.

Запомним следующее:

• UX дизайнер/UX инженер/UX аналитик: занимаются разбором требований, пишут ТЗ, создают CJM и, иногда, прототипы.

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

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

В итоге, если вам нужен простой лэндинг - для него, как правило, хватит и UI дизайнера с ТЗ в зубах. Если нужен прототип CRM, упаковка стартапа - ищем жесткого аналитика, UX инженера с опытом разработки подобных решений.

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

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

Внимательно изучите портфолио дизайнера

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

Насколько работы похожи? Не раз видела портфолио дизайнеров, где 3-5-7 магазинов подряд являются просто перекрашенными версиями друг друга. С таким дизайнером новую кашу не сваришь.

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

Какие используются шрифты? Часто начинающие дизайнеры грешат тем, что выбирают или неудачные, нечитаемые шрифты, от которых режет глаз, или просто вставляют стандарт в виде Arial по всем макетам. И то, и другое - повод отказать.

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

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

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

Что с цветами? Если в проекте больше 3-4 цветов, или цвета спорят за внимание - в 99% случаев перед вами колхоз. Также следует обратить внимание на то, выделены ли CTA элементы (например, кнопки Купить, Заказать, Перезвоните мне) отдельным, контрастным цветом? Если да - это хороший знак. Планируя проект на большую аудиторию - помните, что далеко не все люди умеют правильно различать цвета, и дизайнер с соответствующим опытом будет очень полезен в таком деле.

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

Попросите верстальщика посмотреть один из проектов дизайнера

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

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

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

Не стесняйтесь спрашивать рекомендации

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

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

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

P.S. Если на той площадке, где вы нашли дизайнера, у него нет отзывов, спросите где они есть. Если их нет вообще нигде - лучше откажитесь. И помните что отзывы - не равно живые рекомендации.

Попросите показать готовые сайты

Да, UI дизайнер рисует картинки. Да, он не отвечает на 100% за конечный результат в виде сайта. Однако, спустя много лет работы дизайнером, просьба показать готовые сайты мне не кажется такой уж неадекватной.

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

Предложите заключить договор или безопасную сделку

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

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

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

Оцените личное общение

• Насколько внимателен дизайнер? Например, вы задаете 2 вопроса в одном сообщении. Если вам отвечают на один, причем такое повторяется не раз - думайте сразу о том количестве правок, которое будете писать, и сколько раз будете просить их исправить.

• Не боится ли он задавать вопросы, не строит ли из себя мачо, говоря что все понятно? Чем сложнее проект - тем больше вопросов заказчику я задаю, чтобы убедиться, правильно ли я его поняла. Неправильно понятое ТЗ = реальный шанс на то, что половину проекта придется переделывать.

• Предложил ли дизайнер заполнить бриф, передать ему подробности проекта? Если брифа нет, как и других документов - один тревожный звоночек у вас есть.

• Насколько грамотно и адекватно он общается? Если со второго сообщения в вас тыкают и говорят на сленге - стоит задуматься.

Работайте по адекватным ценам и соблюдайте договоренности

С моей точки зрения, в ценовой категории 200-1000 рублей в час непрофессиональных и откровенно странных дизайнеров гораздо больше, чем в категории 1500-2500 рублей в час. В первом случае, вы можете делать проект за 100.000 рублей 3 месяца, а во втором за те же деньги проект будет готов через 2 недели. В общем, попытка сэкономить часто будет стоить долгих поисков, большей вероятности возможных проблем, обильного списка правок и увеличения сроков.

И наконец, очевидное: соблюдайте договоренности и не заваливайте дизайнера десятками далеких от дизайна вопросов. Лучше изучить его анкету, работы, обсудить с понравившимся кандидатом 30 минут по Zoom и принять решение: работать или нет.Для найма на постоянную основу, критерии, конечно, другие, однако никто не мешает попробовать сделать с дизайнером 1-3 проекта, а затем, рассмотреть в качестве постоянного сотрудника.

Буду рада услышать о вашем опыте подбора дизайнера на проект!

Рассказ об истории вездесущих иллюстраций в стиле корпоративный мемфис и о том, почему они теперь буквально на каждом веб-сайте.

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

Такой стиль иллюстраций называется корпоративный мемфис.

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

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

Как так получилось? И какое значение этот стиль имеет в сфере маркетинга?

Давайте разберемся.

Откуда название корпоративный мемфис?

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

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

Со временем всё больше компаний начинали внедрять черты такого дизайна в собственные иллюстрации.

Получившийся в итоге стиль назвали корпоративным мемфисом.

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

В итоге теперь уже сложно различить компании по визуальному стилю взгляните сами.

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

1. Смерть скевоморфизма

Помните старые 3D-иллюстрации на айфонах? Это скевоморфизм дизайнерский стиль, при котором изображение элементов интерфейса имитирует реальные аналоги.

С тех пор, как Apple перешла на iOS 7, всё больше компаний меняют свой визуальный стиль, отдавая предпочтение простым, упрощенным изображениям. Причина банальная: мы уже привыкли к цифровым приложениям и сенсорным дисплеям, поэтому нам больше не нужна имитация аналогов из реальной жизни. Кроме того, чем проще дизайн, тем быстрее такой контент потребляется а мы пропускаем через себя огромное его количество.

Так что покойся с миром, скевоморфизм.

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

Корпоративный мемфис недостающий элемент мозаики плоского фирменного стиля.

2. Взаимозаменяемые цвета

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

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

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

3. Простой, масштабируемый дизайн

Еще один фактор популярности корпоративного мемфиса простота создания иллюстраций в этом стиле.

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

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

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

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

Например, Canva одна из множества платформ, предлагающих готовые элементы оформления. Среди других ресурсов FreePik, UnDraw, векторная библиотека Adobe, Humaaans и т. д.

4. Радость на лице радость в жизни?

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

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

И это работает.

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

И что, это всё? Это и есть Корпоративный мемфис? Просто яркие цвета, культурное разнообразие и радостное настроение?

Внешность может быть обманчива

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

Ненастоящее этнокультурное разнообразие

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

Простота для ленивых

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

Бездумное счастье

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

Заключение

Корпоративный мемфис это палка о двух концах.

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

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

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

И если увидите маркетинговые материалы в стиле корпоративного мемфиса (что неизбежно), остановитесь на мгновение, задумайтесь, присмотритесь и оцените, достаточно ли правдиво эти иллюстрации воплощают компанию?

О переводчике

Alconost занимаетсялокализацией игр,приложений и сайтовна 70 языков. Переводчики-носители языка, лингвистическое тестирование, облачная платформа с API, непрерывная локализация, менеджеры проектов 24/7, любые форматы строковых ресурсов.

Мы также делаемрекламные и обучающие видеоролики для сайтов, продающие, имиджевые, рекламные, обучающие, тизеры, эксплейнеры, трейлеры для Google Play и App Store.

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

В этой заметке мы ответим на некоторые наиболее актуальные вопросы. Минимум воды, максимум пользы. Итак, начинаем наш краткий ликбез.

1. Как установить существующую библиотеку материалов

Файлы с расширением .sldmat содержат сведения о механических и физических свойствах материалов. Если вы скачали библиотеку с сайта i-tools.info, следующие 5 шагов помогут вам ее установить. Для добавления библиотеки необходимо открыть любую деталь в SOLIDWORKS:

1. В дереве конструирования FeatureManager нажимаем правой кнопкой мыши на Материал.

2. Выбираем пункт Редактировать материал.

3. В левом поле открывшегося окна кликаем в любом месте правой кнопкой мыши и выбираем Открыть библиотеку.

4. Выбираем директорию, в которой находится файл .sldmat, либо копируем его в папку с пользовательскими материалами SOLIDWORKS. Уточнить папку, выбранную по умолчанию, можно в разделе Настройки пользователя Месторасположение файлов Отобразить папки для Базы данных материалов.

5. Выбираем файл с расширением .sldmat и нажимаем кнопку Открыть.

Библиотека установлена! Если она не отображается в окне, необходимо закрыть и вновь открыть окно редактирования материала.

2. Можно ли работать на любом компьютере с установленным SOLIDWORKS, используя лишь свою лицензию?

ДА! Это называется онлайн-лицензирование SOLIDWORKS Online Licensing. Вам потребуются лишь компьютер с доступом в интернет и SOLIDWORKS выше версии 2018 года.

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

Можно сказать, это лицензия SOLIDWORKS, которая находится в облаке.

3. В чем отличие SOLIDWORKS Simulation Standard и пакета Simulation Standard, входящего в SOLIDWORKS CAD Premium?

a) В SOLIDWORKS CAD Premium нельзя строить диаграмму усталости, усталостные напряжения и получать количество циклов до разрушений.

b) В SOLIDWORKS Simulation Standard доступен анализ тенденций, то есть построение зависимостей в результатах различных повторов статического исследования. Например, меняя нагрузку, можно отслеживать напряжение, перемещение и т.д.

4. Как показать основные плоскости компонентов в сборке?

Для этого нужно включить Просмотр плоскостей:

А затем выбрать значок Скрыть / Показать основные плоскости:

5. Как выбирать спрятанные грани, не применяя функцию Скрыть деталь?

Например, вам нужно выбрать грань для создания сопряжений. Самый простой способ навести курсор мыши на спрятанную грань и нажать клавишу Alt (деталь, которая закрывает нужную вам грань, станет прозрачной), а если деталь спрятана глубже, нажмите Alt еще раз.

6. Как посмотреть на деталь из сборки, не открывая деталь отдельно?

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

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

Хотите узнать больше? Подписывайтесь на наш YouTube-канал и изучайте SOLIDWORKS самостоятельно. Нужно обучение с профессионалами? Переходите по ссылке и выбирайте курс.

Автор: Максим Салимов, технический специалист ГК CSoft, solidworks@csoft.ru

Как в условиях Home Office поздравить c Международным женским днем прекрасную половину IT департамента, а также всех женщин со стороны бизнеса? Мы в BIOCAD сделали это так:

Именные открытки для "своих" женщин

• Создали единый реестр и распределили девушек

• Написали персональные поздравления с комплиментами в стиле SQL + TextArt. Так как открыток было много и не все парни хорошо знают SQL, сделали шаблон скрипта в PowerPoint и расшарили его через Sharepoint. Далее каждая команда собиралась и придумывала, старались по максимуму персонализировать открытки.

• Разослали открытки через бота

Например, такую открытку получила Маша, стажер в отделе мониторинга и анализа данных:

Открытки для бизнес женщин

Тут SQL мало кто знает, поэтому ограничились цветочками разных форм. Что получилось:

Мы получили огромное удовольствие несколько раз:

• когда собирались и придумывали "sql комплименты", было весело!

• когда получили невероятно позитивную обратную связь от такого поздравления

А какие вы знаете способы оригинально поздравить коллег?

Когда AMD начала предлагать процессоры Threadripper с большим количеством ядер, единственным рынком, который потреблял столько, сколько производила AMD, был рынок графического дизайна компании, которые занимались визуальными эффектами и рендерингом; им понравились количество ядер, поддержка памяти, полосы PCIe и цена. Но если есть что-то ещё, повышающее производительность, то это само стремление к производительности Threadripper Pro.

Брррр вот во что превращается вычислительная графика

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

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

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

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

Если вычислительная часть программного обеспечения не подвержена такой нагрузке, например, эта часть структурно более линейна, то потратить полгода на его переработку для GPU это напрасная трата сил. Или даже если математика лучше работает на GPU, попытки перестроить 20-летнюю (или ещё более старую) кодовую базу для GPU всё равно требуют значительных усилий со стороны группы экспертов.

Вычисления на GPU идут в гору с тех пор, как я выполнял их в конце двухтысячных годов. Но факт остается фактом: всё ещё существует ряд отраслей, представляющих смесь производительности CPU и GPU. К ним относятся машинное обучение, нефтегазовая отрасль, финансы, медицина, и та сфера, на которой мы сегодня сосредоточимся, визуальные эффекты.

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

Некоторые плагины имеют ускорение GPU, например Blender Cycles, и переход на ещё более ускоренную GPU рабочую нагрузку занимает некоторое время например. область, привлекающая большое внимание GPU, дизайн с ускоренной трассировкой лучей.

Всегда возникает вопрос о том, какой метод создаёт лучшее изображение: нет смысла использовать GPU, чтобы ускорить рендеринг, если процессор добавляет шум или портит изображение.

Скорее всего, киностудия предпочтёт медленный рендеринг более высокого качества на CPU, чем быстрый и шумный на GPU, или же, наоборот, рендеринг изображения в более низком разрешении, а затем и рендеринг более высокого класса с искусственным интеллектом.

Поставляющие продукцию для отрасли OEM-производители сообщили нам, что ряд студий прямо скажут: рендеринг их рабочего процесса на CPU единственный способ рендеринга. Другой аспект память: соответствующий задаче CPU может иметь от 256 ГБ до 4 ТБ DRAM, тогда как лучшие GPU имеют пропускную способность в 80 ГБ (и это очень дорогие графические процессоры).

Вот о чём я говорю: VFX-студии до сих пор предпочитают вычисления на CPU, и, чем таких вычислений больше, тем лучше. Когда компания AMD выпустила новые процессоры на базе Zen, в частности 32- и 64-ядерные модели, их сразу же резервировали как потенциальную замену Xeon, с которыми работали студии VFX.

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

Ряд компаний VFX, насколько мы понимаем, сосредоточились на платформе AMD Threadripper поверх соответствующего EPYC. Когда оба компонента впервые появились на рынке, VFX-студиям было очень легко инвестировать в рабочие станции, построенные на базе Threadripper, тогда как EPYC больше предназначался для серверной стойки.

Посмотрим на Threadripper 3000 и EPYC 7002: есть 64 ядра, 64 полосы PCIe 4.0 и большой выбор. студии VFX тогда всё ещё предпочитали Threadripper в основном из-за того, что эти процессоры предлагали лучшую мощность в 280 Вт в чём-то, что могло бы легко прийти от системных интеграторов, таких как Armari. Эти интеграторы специализируются на high-desk и high-compute, они также запрашивали у AMD большего.

Сегодня компания AMD развернула платформу Threadripper Pro, удовлетворяющую некоторым из требований выше. Тогда как VFX всегда ориентирован на вычисления в ядре, TR Pro предоставляет удвоенную полосу PCIe, удвоенную пропускную способность памяти, поддержку до 2 ТБ памяти, а также поддержку от администратора-профессионала.

Линии PCIe могут быть расширены до локального хранилища (которое всегда важно в VFX), а также больших RAM-дисков; поддержка администратора через DASH помогает поддерживать управление системами компании. AMD Memory Guard также входит в линейку Pro, которая создана, чтобы обеспечивать полное шифрование памяти.

Помимо работы с VFX компания AMD мировой лидер в области вычислений с помощью TR Pro в проектировании продуктов с помощью Creo, 3D-визуализации через KeyShot, в области проектирования архитектурных моделей с помощью ПО Autodesk Revit, а также в областях Data Science, таких как анализ массивов данных о нефти и газе, где наборы данных возрастают до сотен гигабайт и требуют существенной вычислительной поддержки.

Threadripper Pro против Workstation EPYC (WEPYC)

Глядя на преимущества, которые дают эти новые процессоры, становится ясно, что они скорее компоненты EPYC в стиле рабочей станции, чем "усовершенствованные" драйверы Threadripper. Вот объясняющая таблица:

Чтобы получить (начиная с EPYC) эти новые компоненты, всё, что AMD нужно было сделать, это поднять TDP до 280 Вт и урезать поддержку DRAM. Если начинать с базового Threadripper, есть 34 существенных изменения. Так почему же название по-прежнему Threadripper Pro, а не Workstation EPYC?

Чтобы ответить на этот вопрос, снова вернёмся в студии VFX. Когда они уже купились на брендинг и образ мысли Threadripper, сохранить название компонентов Threadripper значит, помочь сгладить переход. Как было сказано, они предпочитают Threadripper, а не EPYC (из того, что сказали нам), и поэтому сохранение названия означает, что не нужно никого переучивать.

Кроме того, линия процессора EPYC несколько изломана: есть стандартные версии, высокопроизводительные модели H, высокочастотные модели F и серия заказных конструкций под B, V, другие серии для конкретных клиентов. Сохраняя название Threadripper Pro, AMD сохраняет всё под одним началом.

Предложения Threadripper Pro: от 12 до 64 ядер

В середине прошлого года AMD анонсировала эти процессоры, а также Lenovo Thinkstation P620 как платформу их запуска. По моему опыту, линейка Thinkstation очень хорошо спроектирована, и сегодня мы тестируем наш 3995WX в P620.

TR Pro анонсировали вместе с Lenovo, и мы не были уверены, что Threadripper станет доступен какому-то другому OEM-производителю. Мы спросили об этом самих OEM-производителей в том же году, ещё до того, как узнали, существует ли TR Pro на самом деле; они заявили, что AMD даже не отметил платформу в своём плане развития, о котором мы тогда рассказывали.

С тех пор мы узнали, что у Lenovo был эксклюзивный срок в полгода; информацию предоставили другим производителям (ASUS, GIGABYTE, Supermicro) только после того, как было объявлено об этом.

В связи с этим AMD объявила, что Threadripper Pro выходит на рынок розничной торговли как для других OEM-производителей, которые будут проектировать системы, так и для конечных пользователей, которые будут собирать свои системы.

Несмотря на использование того же сокета LGA4094, что и у другие процессоров Threadripper и EPYC, TR Pro заблокируют на материнских платах WRX80. На данный момент нам известно о трёх моделях, например Supermicro и GIGABYTE, и об ASUS Pro WS WRX80E-SAGE SE Wi-Fi, которая у нас была, однако мы не смогли её протестировать.

Из четырёх перечисленных выше процессоров три лучших идут в продажу. Стоит отметить, что только 64-ядерный процессор поставляется с 256 МБ кеша L3, тогда как 32-ядерный поставляется с 128 МБ L3.

AMD придерживается такой архитектуры, что в этих чиплетах (chiplet) используется только абсолютно необходимое количество наборов микросхем, кеш L3 на одно ядро, а также 8 ядер на набор микросхем (в линейке продуктов EPYC дело обстоит немного иначе). Четвёртый процессор, 12-ядерный, по-видимому, является специфическим процессором, он создан только для OEM-производителей готовых систем.

Threadripper Pro против всех

Эти предложения Threadripper Pro созданы конкурировать с двумя сегментами рынка: во-первых, с самой AMD, демонстрирующий высокую производительность всем пользователям профессиональных систем высокого класса, построенных на аппаратном обеспечении первого поколения Zen.

Второе предложение нацелено на пользователей рабочих станций Intel с односокетным Xeon W (который имеет 28 ядер) либо на пользователей двухсокетной системы Xeon, которая дороже или которая потребляет намного больше энергии просто потому, что она двухсокетная, но при этом архитектура памяти системы неоднородная.

У нас есть почти все системы (нет 7702P, но есть 7742), и на самом деле это единственные процессоры, которые следует учитывать, если 3995WX в вашем случае один из вариантов:

Intel достигает максимума на 28 ядрах, и обойти его невозможно. Технически у Intel есть линейка процессоров AP до 56 ядер, однако это для специализированных систем, а для тестирования нам не отправили ни одного процессора этой линейки. Кроме того, это $ 20 000+ на один процессор, а также два процессора в одной системе, которые прикрепили болтами в одной упаковке.

Лучшее оборудование AMD это Threadripper, лучший доступный процессор EPYC версий 2P. Самым лучшим здесь был бы 7702P, вариант с одним сокетом и по гораздо более конкурентоспособной цене, однако у нас для целей тестирования его нет; вместо него у нас есть AMD EPYC 7742 версия с двумя сокетами, но с несколько большей производительностью.

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

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

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

Узнайте подробности, как получить Level Up по навыкам и зарплате или востребованную профессию с нуля, пройдя онлайн-курсы SkillFactory со скидкой 40% и промокодомHABR, который даст еще +10% скидки на обучение.

• Профессия Data Scientist

• Профессия Data Analyst

• Курс по Data Engineering