Как да проектирате отзивчиви оформления във Framer

Използване на обекти с ключова стойност за създаване на прототипи на много устройства.

Ако работите достатъчно дълго с прототипите на Framer, в крайна сметка ще се сблъскате с проблема как да адаптирате оформлението на прототип, за да боравите с множество устройства и ориентации. Вместо да създавате отделен прототип за всяка ситуация - да кажем, един за iPhone в портретна ориентация и един за iPad в пейзаж - е възможно да се създаде отзивчив прототип, който да адаптира показателите си според ситуацията. Това изисква известна настройка, но процесът може да бъде значително опростен чрез структура на данни, известна като обект.

„Обект“ е неясен термин, който може да се отнася до много неща. Ето, ние го използваме за обозначаване на колекция от двойки ключ-стойност. Те работят като променливи: Ключът ви позволява да препращате двойката по име, докато стойността държи свързаните с нея данни.

В CoffeeScript, езикът, използван за създаване на прототипи на Framer, можете да конструирате обект като:

objectName =
    ключ: стойност
    AnotherKey: anotherValue

(Обърнете внимание, че знакът за равенство следва името на обекта, но двоеточие се използва за разделяне на ключове и стойности.)

По-напреднали йерархии са възможни с вложени обекти, където нещата стават интересни:

objectName =
    keySet1:
        ключ: стойност
        AnotherKey: anotherValue
    keySet2:
        ключ: стойност
        AnotherKey: anotherValue

Лесно е да видите как това може да се превърне в решение за проблема ни с оформлението:

оразмеряване =
    iphone:
        viewSidePadding: 20
    Ай Пад:
        viewSidePadding: 40

Но как да получим достъп до тези стойности? Удобно е, че CoffeeScript предлага два метода: нотация на точки и нотация на скоби. За нотиране на точки започваме с името на обекта и след това вървим надолу по йерархията, разделяйки референции с точки:

печат sizing.iphone.viewSidePadding

С нотацията на скобите вместо това обвиваме всяка препратка в скоби и кавички:

размери на печат ["iphone"] ["viewSidePadding"]

(Обърнете внимание, че името на обекта не е обвито в нищо.)

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

размери на печат ["iphone"] ["view" + "SidePadding"]

Засега това не е по-полезно, но може да започнете да виждате как тези справки могат да се разделят и реконструират според нуждите.

Възможно е също така да смесвате и съпоставяте тези обозначения по който и да е начин:

размери на печат ["iphone"]. viewSidePadding
печат sizing.iphone ["viewSidePadding"]

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

  1. Метод за определяне на типа на устройството.
  2. Метод за определяне на ориентацията на устройството.
  3. Метод за грабване на стойността, която съответства на тях.

За краткост тук ще разгледаме само първите и последните елементи. (Един от приложените прототипи в края ще демонстрира пълния пакет.)

Създайте нов прототип във Framer и добавете следния код:

# спецификации
оразмеряване =
    viewTopPadding: 30
    iphone:
        viewSidePadding: 20
        itemMargin: 16
        размер размер: 250
    Ай Пад:
        viewSidePadding: 40
        itemMargin: 64
        размер размер: 400

(Обърнете внимание, че някои двойки ключ-стойност живеят точно на най-високото ниво. Те са общи за iPhone и iPad и стойностите им няма да се променят с устройства.)

След това добавете функция за откриване на типа устройство. Как ще постигнете това ще зависи от това къде искате да се види прототипът ви, но ето метод, който работи във Framer:

# получи тип устройство
checkDevice = (deviceType = "iphone") ->
    framerDevice = Framer.Device.deviceType
    deviceType = "iphone", ако _.includes (framerDevice, "iphone")
    deviceType = "ipad", ако _.includes (framerDevice, "ipad")
    тип връщане на устройство
Ако вашият прототип е предназначен за визуализация на мобилни устройства, откриването на Screen.width може да се окаже по-надежден метод.

Нашата checkDevice () функция ще върне или низ „iphone“, или „ipad.“ Доставянето на ключа в двойка ключ-стойност е всичко, което трябва да добавим, за да получим нашата числова спецификация. Например, това ще работи:

deviceType = checkDevice ()
value = "viewSidePadding"
оразмеряване на печат [deviceType] [value]

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

  • Стойностите по-дълбоки в йерархията на обекта ще отменят тези по-нагоре. Ако дефинирате стойността на спецификацията на крос-платформата, най-добре е да не повтаряте тази стойност на ниво устройство.
  • Ако не бъдат намерени съвпадения стойности, функцията отпечатва съобщение за грешка.
# проверете спецификацията
getSpec = (spec) ->
    if! spec, след това отпечатайте „Необходимо е да посочите име на spec.“

    deviceType = checkDevice ()
    lookup = _.assign ({}, оразмеряване, оразмеряване [typeType])
    резултат = _.get (търсене, спецификация)

    ако! резултат, след това отпечатайте „Стойността не е намерена за спец. с име # {spec} в # {deviceType}.“

    възвратен резултат

С тези функции просто трябва да се обадим на getSpec („ourKeyName“), където „ourKeyName“ е ключовото име на стойност, която искаме. По този начин getSpec („viewSidePadding“) ще върне 20 на iPhone, но 40 на iPad. getSpec („viewTopPadding“) ще върне 30 по всякакъв начин.

Ние можем бързо да нокаутираме въртяща се върху PageComponent въртележка на елементи, използвайки нашите спецификации и заместваща функция за повикване за някое от измеренията:

въртележка = нов PageComponent
    ширина: ширина на екрана
    x: getSpec ("viewSidePadding")
    y: getSpec ("viewTopPadding")
    височина: getSpec ("itemSize")
    ширина: getSpec ("itemSize")
    клип: невярно
    scrollVertical: невярно
за i в [0..4]
    carouselItem = нов слой
        родител: carousel.content
        ширина: getSpec ("itemSize")
        височина: getSpec ("itemSize")
        x: i * (getSpec ("itemSize") + getSpec ("itemMargin"))

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

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

Опаковането на създаването на въртележка във функция за оформление може да изглежда така:

# функцията за оформление на изгледа
doLayout = () ->
    # унищожете всички слоеве, за да избегнете дублирането
    за слой в Framer.CurrentContext.layers
        layer.destroy ()
    
    # създайте въртележка
    въртележка = нов PageComponent
        ширина: ширина на екрана
        x: getSpec ("viewSidePadding")
        y: getSpec ("viewTopPadding")
        височина: getSpec ("itemSize")
        ширина: getSpec ("itemSize")
        клип: невярно
        scrollVertical: невярно
    
    # попълнете въртележка с клетки
    за i в [0..4]
        carouselItem = нов слой
            родител: carousel.content
            ширина: getSpec ("itemSize")
            височина: getSpec ("itemSize")
            x: i * (getSpec ("itemSize") + getSpec ("itemMargin"))
# инициализирайте
doLayout ()

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

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

За повече информация относно дизайна и разработката, абонирайте се за BPXL Craft и следвайте Black Pixel в Twitter.

Black Pixel е агенция за творчески цифрови продукти. Научете повече на blackpixel.com.