Framer-də həssas layouts dizaynı

Cihazlar arasında prototip yaratmaq üçün əsas dəyər obyektlərindən istifadə edin.

Çerçeve prototipləri ilə kifayət qədər uzun müddət işləmisinizsə, birdən çox cihazı və istiqamətləri yerləşdirmək üçün bir prototipin necə düzəldilməsi problemi ilə qarşılaşa bilərsiniz. Hər vəziyyət üçün öz prototipinizi yaratmaq əvəzinə - portret formatında iPhone üçün və landşaft formatında iPad üçün bir - ölçmə məlumatlarını müvafiq tələblərə uyğunlaşdıran həssas prototip dizayn edə bilərsiniz. Bunun üçün bəzi parametrlər tələb olunur, ancaq bir obyekt deyilən bir məlumat quruluşundan istifadə edərək prosesi çox asanlaşdırmaq olar.

"Obyekt" çox şeyə istinad edə bilən qeyri-müəyyən bir termindir. Burada əsas dəyər cütləri toplusundan bəhs edirik. Bunlar dəyişənlərə bənzəyir: düymə cütlüyə ad verməyə imkan verir, dəyər əlaqəli məlumatları ehtiva edir.

Çəkiciləri prototipləşdirmək üçün istifadə olunan dil olan CoffeeScript-də belə bir obyekt yarada bilərsiniz:

objectName = əsas dəyər anotherKey: anotherValue

(Qeyd edək ki, bərabər işarəsi obyektin adını izləyir, lakin düymələr və dəyərləri ayırmaq üçün iki nöqtəli nöqtə istifadə olunur.)

Yerləşmiş obyektlər üçün daha inkişaf etmiş hiyerarşilər mümkündür. Burada maraqlı olur:

objectName = keySet1: key value anotherKey: anotherValue keySet2: key value anotherKey: anotherValue

Bunun yerleşim problemimizin həllinə necə səbəb ola biləcəyini görmək asandır:

Ölçü = iphone: viewSidePadding: 20 ipad: viewSidePadding: 40

Bəs bu dəyərlərə necə çatırıq? Rahatlıqla, CoffeeScript iki üsul təklif edir: nöqtə işarəsi və mötərizə qeyd. Nöqtə işarəsi ilə obyekt adından başlayırıq və istinadları nöqtələrlə ayıraraq iyerarxiyaya enirik:

çap ölçüsü.iphone.viewSidePadding

Bunun əvəzinə, mötərizə qeydində, hər bir istinad mötərizədə və tırnak işarələrində qeyd olunur:

Çap ölçüsü ["iphone"] ["viewSidePadding"]

(Nəzərə alın ki, obyekt adı heç bir şeyə əlavə edilməyib.)

Dırnaq işarələri əvvəlcə yorucu görünür, amma əvəzsizdir. İfadələrdən istifadə edərək açarlarımızın adlarını düzəltməyə imkan verirlər. Məsələn, aşağıdakıları edə bilərsiniz:

Çap ölçüsü ["iphone"] ["view" + "SidePadding"]

İndiyə qədər bunun heç bir mənası yoxdur, ancaq lazım olduqda bu arayışların necə bölünəcəyini və yenidən qurulacağını tapa bilərsiniz.

Bu qeydləri istədiyiniz kimi qarışdırmaq və uyğunlaşdırmaq da mümkündür:

Çap ölçüsü ["iphone"]. viewSidePadding
çap sizing.iphone ["viewSidePadding"]

Həssas planlara bu yanaşmanın işləməsi üçün üç şeyə ehtiyacımız var:

  1. Cihaz tipini təyin etmə üsulu.
  2. Cihaz yönümünün təyin edilməsi üsulu.
  3. Müvafiq dəyəri əldə etmək üsulu.

Qısalıq üçün yalnız ilk və son məqaləyə burada baxacağıq. (Sonda əlavə olunmuş prototiplərdən biri bütün paketi nümayiş etdirəcəkdir.)

Framer'da yeni bir prototip yaradın və aşağıdakı kodu əlavə edin:

# Xüsusiyyətlər Ölçmə = viewTopPadding: 30 iphone: viewSidePadding: 20 itemMargin: 16 item Size: 250 ipad: viewSidePadding: 40 itemMargin: 64 itemSize: 400

(Bəzi əsas dəyər cütlərinin birbaşa üst səviyyədə olduğunu unutmayın. Bunlar iPhone və iPad üçün eynidir və cihazlarda dəyərləri dəyişmir.)

Sonra cihaz tipi aşkarlama funksiyası əlavə edin. Bunu necə etməli olduğunuz prototipinizin harada görünməsini istədiyinizə bağlıdır. Aşağıdakılar Framer-də işləyən bir metoddur:

# Cihaz növü alın checkDevice = (deviceType = "iphone") -> framerDevice = Framer.Device.deviceType deviceType = "iphone" əgər _.includes (framerDevice, "iphone") deviceType = "ipad" əgər _.includes (framerDevice, "ipad") Return deviceType
Prototipinizin mobil cihazlarda əvvəlcədən baxılması nəzərdə tutulursa, Screen.width aşkarlanması daha etibarlı bir metod ola bilər.

CheckDevice () funksiyamız "iphone" və ya "ipad" simvolunu qaytarır. Açarı bir dəyər-cüt cütlüyündə göstərsək, ədədi spesifikasiyanı əldə etmək üçün başqa bir şey əlavə etməyimizə ehtiyac yoxdur. Məsələn bu indi işləyəcək:

deviceType = checkDevice () dəyəri = "viewSidePadding" çap ölçüsü [DeviceType] [dəyər]

Bunu bir əsas adını alan və cari cihaz üçün uyğun dəyəri qaytaran ümumi təyinatlı bir funksiyaya genişləndirə bilərik. Aşağıdakı kodu istifadə edə bilərsiniz, ancaq iki şeydən xəbərdar olun:

  • Obyekt iyerarxiyasında daha aşağı olan dəyərlər daha yüksək dəyərlərin üzərinə yazılır. Çapraz platform spesifikasiya dəyərini təyin edərkən bu dəyəri cihaz səviyyəsində təkrarlamamaq yaxşıdır.
  • Uyğun dəyər tapılmadıqda, funksiya bir səhv mesajı qaytarır.
# Xüsusiyyətləri yoxlayın getSpec = (spec) -> if! spec sonra "Spesifikasiya adını göstərməlidir." yazdırın. deviceType = checkDevice () axtarış = _.assign ({}, ölçü, ölçü [deviceType]) Nəticə = _.get (axtarış, spesifikasiya) Əgər! "# {deviceType} 'da # {spec} adı ilə spesifikasiya dəyəri tapılmadı." Nəticəni qaytarın

Bu funksiyalarla yalnız getSpec ("ourKeyName") zəng etməliyik, burada "ourKeyName" istədiyiniz bir dəyərin açar adıdır. Buna görə getSpec ("viewSidePadding") iPhone 20 və iPad 40-da geri qayıdır. getSpec ("viewTopPadding") hər iki istiqamətdə 30 qaytarır.

Xüsusiyyətlərimizi istifadə edərək və aşağıdakı ölçülərdən birini əvəz edən funksiya çağırışlarını istifadə edərək PageComponent əsaslı əşyaların atlıkarınlığını sürətlə söndürə bilərik:

Carousel = yeni PageComponent genişliyi: ekran genişliyi x: getSpec ("viewSidePadding") y: getSpec ("viewTopPadding") boy: getSpec ("itemSize") width: getSpec ("itemSize") clip: false scrollVertical: false
i üçün [0..4] üçün carouselItem = yeni səviyyə valideyn: carousel.content width: getSpec ("itemSize") height: getSpec ("itemSize") x: i * (getSpec ("itemSize") + getSpec ("itemMargin "))

Bu, cihazın tipindəki dəyişikliklərə cavab verən layouts yaratmaq üçün kifayətdir. Hizalamaya da uyğunlaşmaq istəyirsinizsə, hizalamayı tanımalı və sonra hər dəyişiklik ilə bütün təbəqələri yenidən çəkməlisiniz. Buna nail olmağın ən asan yolu bütün təbəqə yaradılmasını bir düzəliş funksiyasına daxil etməkdir. İstiqamətdəki hər hansı bir dəyişiklik əvvəlcə bütün təbəqələri məhv etməli və sonra onları yenidən yaratmaq üçün düzəliş funksiyasını çağırmalı və ya layout funksiyası layların məhv edilməsini ilk addım kimi qəbul edə bilər.

İstiqamət dəyişdirildikdə mövcud təbəqələr məhv edilmirsə, düzəliş funksiyası yenidən çağırıldıqda təkrarlanan qatların yığınları göstərilir.

Atlıkarınca yaratmağımızı bir layout funksiyasına bağlamaq belə görünə bilər:

# görünüş düzeni funksiyası doLayout = () -> # Framer.CurrentContext.layers qatında təkrarlanmamaq üçün bütün qatları məhv etmək layer.destroy () # bir karusel atlıkarınca yaratmaq = yeni PageComponent genişliyi: ekran genişliyi x: getSpec ("viewSidePadding") y: getSpec ("viewTopPadding") Boy: getSpec ("itemSize") genişlik: getSpec ("itemSize") klip: false scrollVertical: false # Karuselin içərisindəki hüceyrələrlə doldurun [0..4] carouselItem = yeni səviyyə Ana: carousel.content genişliyi: getSpec ("itemSize") Boy: getSpec ("itemSize") x: i * (getSpec ("itemSize") + getSpec ("itemMargin"))
# doLayout başlanğıc ()

Prototipləri sınamaq və bu mexanizmlərin necə bir yerdə işlədiyini görmək üçün daha sadə prototipi və oriyentasiya dəstəyi olan birini yükləyin.

Başqa bir yanaşma, iPad üçün xüsusi ölçü məlumatlarını yazmaq üçün ayrı bir obyektdə saxlamaqdır. Bu metodu fəaliyyətdə görmək üçün Yalnış Prototipi yükləyin.

Dizayn və inkişaf haqqında daha çox məlumat üçün BPXL Craft-a abunə olun və Twitter-də Black Pixel-i izləyin.

Black Pixel rəqəmsal məhsullar üçün yaradıcı bir agentlikdir. Daha çox məlumat blackpixel.com saytında.