Как да използвате оразмеряването на оразмеряващи символи като бос

EDIT: Тази статия е написана преди излизането на Sketch 44. По това време имаше 4 режима: Stretch, Pin to corner, Resize object и Float на мястото. Сега е малко по-различно, така че имайте предвид, че този урок е леко остарял. Сега има много по-чист начин за справяне с проблема с лентата за напредък. Файлът за изтегляне е актуализиран съответно, така че не забравяйте да проверите как е направен. Благодаря за всички отговори и любезни коментари;)

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

За щастие създаването на системи вече е възможно по далеч по-напреднал начин, отколкото дори преди една година, благодарение на Bohemian Coding и тяхното неудържимо приложение за Sketch. Тези момчета го получават.

Въпреки че ние бяхме запознати със символите от доста време, това беше само част от решението. Но наскоро разработчиците на Sketch представиха на дизайнерите две чудесни функции, които наистина са смяна на игри: вложени символи и преоразмеряване на символи. Докато първият позволява дългоочакван комфорт за потребителите, в който няма да се ровя, вторият според мен е истинска революция в света на дизайна на потребителския интерфейс. Това е способността на дизайнерите да се потопят в света на ограниченията на разработчиците и да покажат по-добро усещане за това, как даден елемент е артикулиран. Това е огромно!

Помислете за това: сега UI елементът не е само изображение или вектор, той се е превърнал в компонент, чиито екземпляри могат да се адаптират по различен начин към контекста, в който се показват. Например, същата навигационна лента може да бъде приложена към платка с размер на iPhone или iPad и / или да има различни заглавия по екраните. Екземплярите на елемент от изглед на мрежата могат да имат собствено съдържание на текст и изображение и да изглеждат различно, докато се отнасят до този един основен елемент или символ, който определя поведението. Направете модификации на този символ и те ще се прилагат навсякъде. Редактирайте по едно отделно време, за да добавите контекст. Добре дошли в момента, в който най-накрая става вълнуващо!

Урок: отзивчивият YouTube плейър

Преди да станем практични, бих искал да се извиня за доста претенциозното заглавие на тази статия.

Сега, да започнем! Ще ви покажа като пример как направих YouTube плейъра, използвайки Sketch 39 и новата функция за преоразмеряване на символите. Ще се погрижа да споделя някои хубави съвети по пътя. Някои от тях всъщност бяха доста предизвикателство, така че останете съсредоточени! Мога само да ви насърча да проверите въвеждането на правилата за промяна на размера, преди да продължите.

Файлът е достъпен за изтегляне безплатно тук от тук. Сигурен съм, че можете да намерите някаква полза за това във вашите уеб проекти, така че се чувствайте свободни!

Ако вече сте запознати с тези инструменти, моля, преминете към секцията „Прогрес“. Именно там е истинският улов. Ако не сте сигурни и искате да вземете някои допълнителни съвети, добре дошли да следвате!

Изграждане на играча

Преди да приложите някакви правила, нека просто изградим и съставим крайния компонент, както обикновено в Sketch, в размер по подразбиране. За по-добра точност използването на екрана определено е добра идея. Създайте иконите, лентата на прогреса, поставете правоъгълник отзад с изображение, зададено за запълване на съдържанието (вижте изображението по-долу), и това е основно! Ако елементи от определен вид са в числа, като иконите в този случай, създайте споделен стил за удобство.

В този момент, направете го символ. Ще го редактирате на страницата „Символи“ и ще го тествате на всяка страница, която искате да покажете екземпляр от нея. Тя може да бъде точно до самия главен символ. Финалният комп трябва да изглежда така:

Подготовка на слоевете

Следваща стъпка: създайте граници за обединяване на глифовете. Иконите доста приличат на типографски знаци. Те сами по себе си нямат непременно един и същ размер, но имплицитно са включени в невидимите кутии със същите размери. Аз наричам тези кутии Bounds. Обикновено определям един и същ правоъгълник около всяка икона (тук, 36x36px) и групирам всяка икона с нейното ограничаващо поле поотделно. В този случай това помогна за разбирането на оформлението на контролите на плейъра, като се използва празно пространство около тях като мрежа. Всички слоеве на границите трябва да са невидими, така че създавам споделен стил, наречен _Bounds, който е запълнен и границата е деактивирана.

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

Добавяне на правила за преоразмеряване или ограничения

Всъщност вече започнахме, когато поставихме фоновото изображение в режим на запълване. Това не е ново в Sketch, но все пак е доста удобно. Като алтернатива можете да използвате режима Fit, в зависимост от това какво искате да постигнете (Между другото, режимът Fit е нов). Тези режими гарантират, че изображението винаги ще запълва или приляга на наличната зона при преоразмеряване.

След това всички икони и контроли, съставящи плейъра, трябва да стоят на едно и също разстояние от най-близкия ъгъл, запазвайки същия размер, ако родителят му е преоразмерен. Е, ние имаме точно това! Използвайте Pin към ъгъл вместо опцията Stretch по подразбиране в инспектора отдясно. Ако ги групирате, уверете се, че тези групи също са настроени на Пин в ъгъла. Проверете двукратно дали размерът е достатъчен, така че всеки елемент е разположен близо до ъгъл, а не на разстояние от два ъгъла, или ще се залепи в средата на тях.

Що се отнася до градиента, искате той да преоразмери с целия компонент, така че го задайте на Resize object. Просто като това!

Така че фоновото изображение ще се държи, като използва запълване или прилягане, контролите ще се придържат към най-близките ъгли, а градиентът ще преоразмерява динамично. Добра работа! Но досега няма изненада.

Лента за напредък

О, чакайте, все още има тази емблематична червена лента за напредък, с която трябва да се справим. YouTube не би бил YouTube без него!

Ето желаното поведение: лентите за напредък и зареждане трябва да се придържат вляво, използвайки винаги една и съща граница. Същото за дъното с различна фиксирана стойност. По желание те трябва да представляват същия процент на напредъка при всякакъв размер. Цялостната лента трябва да бъде центрирана хоризонтално, като се използва един и същ фиксиран марж от двете страни и с всякакъв размер. Същото за дъното.

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

Работата е, че при четирите налични опции, които Sketch се съхранява за нас (Stretch, Pin to corner, Resize object и Float на място), първата ми мисъл беше: това не може да бъде направено. Повярвай ми, опитах.

Но така става интересно: можете да направите комбо! Не би ли било чудесно да използвате малко и от двете правила? Е, това всъщност не е възможно, но с малко шибана сесия на ума успях да намеря решение. Ето обяснението:

Първо, ние трябва да определим област, която поддържа същото разстояние от левия и десния ръб по всяко време. Също така трябва да има фиксирано разстояние от долния ръб. И това е това, което прави обектът Resize. Така че създайте правоъгълник, който запълва екрана, минус 12px марж вляво, същото вдясно и 37px в долната част (защо не 36px, YouTube?). Групирайте го и задайте на групата да преоразмерява обекта. Опитай. Трябва да се държи така:

Сега, когато имаме основите, нека тази зона да е невидима. Това, което искаме за баровете, е винаги да остават в дъното на тази зона, като поддържат пропорциите им хоризонтално, но имат фиксирана височина. Това означава, че искате да ги разтегнете до тази новоопределена област, без да влияете на нейната височина. Това не е възможно с използване на обикновени форми, като правоъгълници, но обикновена линия с дефиниран ход (в този случай 3px) няма да бъде преоразмерена по дебелина - до точка, по-скоро екстремна: <152px. Не е точно сигурно защо. Но нека не се интересуваме от това.

Поставете прогреса, лайтовете и глобалните ленти като щрихови линии в рамките на групата на групата и се уверете, че те щракнат към дъното. По подразбиране те са зададени на Stretch. Това трябва да свърши работата!

Сега можете да промените размера на екземплярите и дори съдържанието с помощта на Overrides - изминало време, глобално време, фоново изображение.

Този случай е доста специфичен, все още има решение. Може да не е така за всяка ситуация, нито за най-елегантната, но можете да я накарате да работи. Шапки към Bohemian Coding, който направи първата версия на тези ограничителни инструменти много удобна и по-проста за използване, въпреки малкото време за адаптация. Кой знае какви опции ще могат да добавят в бъдеще? Отзивчивият дизайн най-накрая е тук на правилния етап и със сигурност е най-добрият!

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

Като го кажа, знам как тези хора обичат да поддържат скицата толкова подредена, всеобхватна и ясна и те са експерти. Трябва да ги обичам за това!

Очакваме с нетърпение да видите следващите функции и подобрения! Ще се видим за следващата пробивна функция;)