Зад сцената :)

Адаптивни текстови елементи в скицата

Сладка!

Актуализация: Вчера екипът на Sketch обяви, че една от най-търсените им функции е налична в бета версията на приложението.
Наричат ​​го „Smart Layout“ и изглежда A M A Z I N G.
Това също означава, че методът в този пост ще остарее (най-накрая!).

Няколко примера от мрежата за това, което е възможно:
twitter.com/mds/status/1167145339457069062
twitter.com/svorklab/status/1167350673857482752
twitter.com/gaddafirusli/status/1167157688867835904

Отидете и го проверете> www.sketch.com/beta

Тази публикация беше замислена за първи път на 19 август 2016 г., но така и не видя светлината на деня (поради мързел / отлагане / вие го наречете). С течение на времето забелязах, че хората говорят (и дори пишат средни публикации) за поведението, за което ще говоря. Затова реших да завърша редактирането на проекта и да го публикувам. Да, за мен ...

Всичко започна с прост въпрос ...

Неотдавна се натъкнах на малък, но досаден проблем, който ме пробожда оттогава. Проектирах интерфейс на таблото за един от клиентите си и в него беше доста често срещан потребителски интерфейс; Той показва информация относно конкретен потребител с елементи като: аватар изображение, ден на публикуване и времева марка. Изглеждаше нещо така:

Докато се забърквах с потребителския интерфейс, променяйки дължината на компонента в различни моменти, се чудех дали няма по-лесен начин да променяте съдържанието, подложките и дължината на целия компонент, без да се налага да променяте всеки елемент отново и отново.

Функцията за преоразмеряване помогна малко, когато се наложи да променя дължината на реда. Има много уроци и публикации относно тази невероятна функция, като тази или тази, която препоръчвам да прочетете, ако още не сте я направили.

Това, което наистина исках да постигна, бяха динамични текстови елементи, които ще се натискат един друг, когато размерът им се промени. Така например, ако използвам плъгин като Craft by InVision (или който и да е друг плъгин, който автоматично попълва данни), елементът с потребителско име ще избута елемента за дата до него и така нататък, както в истински работещ продукт.

Докато обсъждах подобен проблем с Еран Лахав (мой колега, който също е страхотен дизайнер ), бях решена от всякога да намеря решение на проблема. Спомних си, че прочетох статия за възможността за създаване на динамични таблици с новата функция за оразмеряване (въведена във версия 39). Начинът, по който Реони Тонейк го е използвал, е използвал скрити графични елементи, използвани за подплащане на съдържанието на таблицата. Това ми даде идея да поставя скрит графичен елемент между два текстови обекта. И познай какво?

Шибано работи!
Така че всъщност следвах метода на Reony за създаване на динамичен ред, но когато изпратих файла на Eran, той ми каза, че работи с опцията за оразмеряване, която изберете за елементите.

Това ме изненада, защото бях сигурна, че това поведение е свързано с функцията за оразмеряване. След като разрових малко в официалната документация на Sketch, разбрах, че това е поведение, което е свързано с отмените на символите:

И това е оригиналната публикация за тази функция:

Работата е там, че използваха графичен обект до текстов обект, а не два текстови обекта един до друг. И когато опитах този метод само с текстови обекти, той не работи ...

След куп тестове, които ние и Еран направихме, ние сме почти сигурни, че когато използваме символи с множество текстови обекти един до друг с графични обекти между тях, графичното поведение е като „пазител“, който пази текстовите обекти да не докосват всеки други (вижте актуализация по-долу).

Update:
Изглежда, че тази функция все още работи във версия 44. Разбрах също, че когато разстоянието между два текстови елемента, които стоят до всеки е по-малко или равно на 20px, автоматичното оразмеряване ще работи. Ако разстоянието е повече от 20px, нещата ще започнат да се разпадат. Няма "пазители" :)

Еран експерименти ran

Проблемът с отмените е, че реалните плъгини за съдържание (като Craft) не винаги ще работят. С изключение на един (доколкото знам - благодаря на Eran): Sketch Data Populator от скъпоценно дизайнерско студио. Когато използвате плъгина, той засяга секцията за замяна вместо оригиналното съдържание на символи и перфектно решава проблема с попълването на данни с попълване.

EDIT: Очевидно плъгинът Craft поддържа отмяна на текст, така че моите извинения за грешката (Когато започнах да пиша тази публикация през август Craft не поддържаше отмяна на текста, следователно и грешката)

заключение

Тази функция е една от най-интуитивните, които срещнах в Sketch, но ей, тя все пак е по-добра от Illustrator.
В заключение, едно важно нещо, което трябва да помислите, преди да използвате този метод, е, че ако опитате да промените ширината или височината на основния компонент, целият ад ще се разпадне върху вас.
Знам, че страхотните момчета от приложението Anima работят, за да подобрят своя плъгин, за да работят по подобен начин и това ще направи компонента напълно отзивчив (макар че при опитването на моя метод с техния плъгин днес, 30 януари, Sketch се срива).

Надявам се този пост да е помогнал, той е първият ми в историята и ми отне известно време, за да го приготвя и напиша. Имайте страхотен ден aw.