Jelly UI - Yerel HTML form kontrollerine yumuşak gövde fiziği efektleri uygulama

 (jelly-ui.com)
2 puan yazan GN⁺ 14 시간 전 | 1 yorum | WhatsApp'ta paylaş
  • Jelly UI v1.1, gerçek form kontrolleri ile yumuşak gövde fiziği efektlerini birleştiren, bağımlılıksız bir web component kütüphanesidir ve 40 özel element sunar
  • Tek bir modül script’i ile kurulur; dark mode, işletim sistemi temasını otomatik izleme, vurgu rengi değiştirme ve sağdan sola yazılan RTL düzenini destekler
  • Düğmeler yerel <button>, kaydırıcılar ise gizli range girdisi kullanarak klavye kullanımı, ekran okuyucu ve form katılımı için yerel anlamsal yapıyı korur
  • Onay kutuları ve giriş alanlarından toast, sekme ve diyaloglara kadar çeşitli öğelere basılma, esneme, dalga ve sekme gibi dokunsal animasyonlar uygular
  • Yerleşik WCAG AA renk token’ları ve ARIA kalıpları sayesinde yumuşak görsel efektleri korurken erişilebilir ürün arayüzleri oluşturmayı mümkün kılar

Kurulum ve tema

  • Jelly UI, bağımlılık olmadan, 40 özel element ve tek bir <script type="module"> etiketiyle kullanılabilir 
    <script type="module" src="https://jelly-ui.com/package.js"></script>;

<jelly-theme mode="auto">
  <jelly-button variant="mint">Publish</jelly-button>
</jelly-theme>
  • <jelly-theme>, tasarım token’larını alt ağaçta sınırlı olarak uygulayan bir tema sağlayıcısıdır
    • mode, auto, light, dark seçeneklerini destekler; böylece işletim sistemi ayarını izleyebilir veya belirli bir temayı zorlayabilirsiniz
    • accent ile vurgu rengini yeniden belirleyebilirsiniz
  • Yaygın renk varyantları azure, rose, amber, mint, graphite, platinum, white; boyutlar ise çoğunlukla small, medium, large şeklindedir

Düğmeler ve etkileşim öğeleri

  • <jelly-button>, içinde gerçek yerel <button> barındıran, klavye ve ekran okuyucu desteği sunan kapsül biçimli bir düğmedir
    • Renk, boyut, pill ve square şekilleri ile devre dışı bırakma ve blok yerleşimi ayarlanabilir
  • <jelly-icon-button>, tek bir ikona göre tasarlanmış kare veya dairesel düğmedir
    • label niteliğiyle ekran okuyucuların algılayacağı ad belirlenir

Form giriş kontrolleri

  • <jelly-checkbox>, forma katılır, checked ve belirsiz durumu (indeterminate) destekler; durum değiştiğinde jelimsi kare yukarı sıçrar
  • <jelly-input>, text, email, password için tek satırlı giriş alanıdır
    • Odak alınca yüzeyi yükselir ve kenarlık görünür; her yazımda imleç konumundan dalga yayılır
    • disabled ve readonly desteklenir
  • <jelly-label>, for ile kontrolle bağlanır
    • Tıklandığında hedefe odaklanır, etiket metni erişilebilir ad olur ve zorunluluk ile boyut belirtilebilir
  • <jelly-otp>, her rakam için bir kutu sunan tek kullanımlık kod girişidir
    • Giriş, backspace, ok tuşları ve yapıştırmayı işler; uzunluk, renk, boyut ve devre dışı durumu ayarlanabilir
  • <jelly-radio>, aynı kökte aynı name değerini paylaşan öğelerle grup oluşturur
    • Hareketli tabindex ve belge yönünü dikkate alan ok tuşu gezinmesini destekler
  • <jelly-radio-group>, jelly-radio için etiketli bir radiogroup kapsayıcısıdır
    • Başlık, yatay-dikey akış düzeni ve boyutun alt öğelere aktarımını sağlar
  • <jelly-range>, minimum ve maksimum aralığını seçen çift kulplu bir slider’dır
    • İki tutacağa da role="slider", odak ve ARIA uygulanır; sürüklenirken jelimsi tutacak içe çöker
  • <jelly-segmented>, birbirini dışlayan seçenekleri içeren kapsül biçimli bir raydır
    • Seçim göstergesi, bölümler arasında hareket ederken eğilen ve esneyen jelimsi hap formunda davranır
  • <jelly-select>, ARIA combobox ve listbox kalıplarını kullanan, formla entegre bir açılır seçimdir
    • Hem tetikleyici hem seçenek paneli yumuşak gövde yüzeyiyle tasarlanmıştır
    • Panel, alandan açılır; altta yeterli boşluk yoksa yukarı açılmaya geçer
  • <jelly-slider>, tek bir değer seçen slider’dır
    • Gizli yerel range girdisi anlamsal yapı ve form katılımını üstlenir; ekranda ise içe çöken jelimsi tutacak gösterilir
  • <jelly-switch>, sürüklenebilir bir anahtardır; tutacak sıvı damla gibi uzar ve kapalı-açık renkleri çapraz geçiş yapar
  • <jelly-textarea>, çok satırlı girişe göre minimum ve maksimum yükseklik arasında otomatik büyür
    • Yüzey de yüksekliğe uyacak şekilde uzar, yazarken imleç konumundan dalga oluşur ve disabled ile readonly desteklenir

Durum ve geri bildirim

  • <jelly-alert>, info, success, warning, danger olmak üzere dört ton ve isteğe bağlı kapatma düğmesi sunan bir bannerdır
  • <jelly-badge>, rozet, etiket ve durum göstergesi için kullanılan küçük bir öğedir; metin değiştiğinde yukarı sıçrar
    • Dolgu/çerçeve, hap/kare şekilleri ile live, instant davranışları ayarlanabilir
  • <jelly-progress>, ilerleme arttıkça dolgunun ön kısmı sallanan bir ilerleme çubuğudur
    • Belirsiz modda kütle iki duvar arasında seker
  • <jelly-skeleton>, parıltı yerine yumuşakça nefes alır gibi salınan bir yükleme yer tutucusudur
    • line, rect, circle biçimlerini destekler
  • <jelly-spinner>, üç nokta arasında hareket eden sümüksü kütle biçimli dots ve şekil değiştirerek dönen blob göstergeleri sunar
  • <jelly-toaster>, satır sonu yönünden belirip kaybolan toast bildirimlerini yönetir
    • Genellikle jellyToast('Saved!', { tone: 'success' }) yardımcı işleviyle çağrılır
    • Yerleştirilen öğeye position="bottom" verilirse bildirim yığını yukarı doğru büyür

İçerik yüzeyleri

  • <jelly-accordion>, birden fazla <jelly-collapsible> öğesini gruplaştırır
    • single modunda biri açıldığında diğerleri sekerek kapanır
  • <jelly-card>, içeriğin altında yer alan jelimsi yüzey kapsayıcısıdır
    • squish eklendiğinde yumuşak yastık gibi içe çöker ve düğme görevi görür
  • <jelly-chip>, statik etiket, açılıp kapanabilen filtre veya kaldırılabilir etiket olarak kullanılabilir
    • Seçilebilirlik, seçili durum, kaldırılabilirlik ve devre dışı bırakma ayarlanabilir
  • <jelly-collapsible>, başlık düğmesiyle paneli sekerek açıp kapatan bir açılır/kapanır alandır
    • Metnin değil, yüzeyin hareket etmesi hedeflenmiştir
  • <jelly-divider>, yatay, dikey veya etiketli ince bir ayırıcıdır
  • <jelly-kbd>, basılabiliyormuş hissi veren jelimsi bir tuş kapağıdır
    • key ile gerçek tuşa bağlanırsa sayfanın herhangi bir yerinde o tuşa basıldığı sürece tuş kapağı da aşağı iner

Gezinme ve düzen

  • <jelly-resizable>, jelimsi ayırıcıyı sürükleyerek veya klavyeyle boyutlandırılan bir panel ızgarasıdır
    • row, vertical, both yönlerini destekler
  • <jelly-tabs>, gerçek tablist anlamsal yapısını kullanan sekmeli görünümdür
    • Jel kapsül biçimli seçim göstergesi hareket eder ve sekme panelleri sekerek görünür

Katmanlar

  • <jelly-dialog>, jel gibi sekerek beliren bir modal diyalogdur
    • Sayfayı kilitler ve kapandıktan sonra odağı önceki konuma geri verir
    • Escape tuşu, kapatma düğmesi veya arka plana tıklama ile kapatılabilir
  • <jelly-drawer>, uç noktayı biraz aşıp geri dönen yay efektiyle beliren yüzen bir sheet’tir
    • Satır içi başlangıç, bitiş veya alttan açılabilir
  • <jelly-popover>, tıklamayla açılan modal olmayan bir paneldir
    • Tetikleyiciye sabitlenir ve Escape tuşu ya da dışarı tıklamayla kapanır
    • top, bottom, start, end yerleşimlerini destekler
  • <jelly-tooltip>, fare üzerine gelindiğinde veya klavye odağı alındığında tetikleyicinin üstünde temalı bir baloncuk gösterir
    • Dört yönlü yerleşim ve üç farklı boyutu destekler

İlgili okumalar

1 yorum

 
GN⁺ 14 시간 전
Hacker News yorumları

  • Pencere biraz takıldığı için nedenini kurcaladım; bu kütüphane sayfadaki tüm bileşenler genelinde her 8 ms’de bir requestAnimationFrame (RAF) animasyon döngüsü çalıştırıyor ve tüm belgeyi yeniden çizdiriyor.
    Yukarıdaki “aktif bileşenleri tek bir karede birlikte işler ve boştayken durur” yorumu da yapay zeka tarafından üretilmiş gibi. JellyEngine, jöle animasyonunu yalnızca pointer event olduğunda hesaplamıyor; sayfadaki tüm aktif bileşenleri her karede yeniden hesaplıyor. Sıradan birinin bakıp “böyle yapılmaz, bu çok abartı” diyeceği türden bir uygulama.

    • Chrome’da performans profili çıkarınca bu açıklamayı desteklemedi. Döngü, güncellenecek bileşenleri aktif bir Set() ile yönetiyor ve hareket durduğunda kaldırıyor gibi görünüyor.
      Yorumun biraz yapay zekanın üstünkörü üretimi gibi durduğuna katılıyorum ama yaklaşımın kendisinde bariz bir sorun bulamadım; hiçbir eylem yokken çekirdek döngü birkaç mikrosaniye içinde bitiyor.
    • Abartılı bir yöntem değil. Video oyunlarının %99,99’u kelimenin tam anlamıyla böyle çalışır; dikey senkronizasyon yenileme hızı ya da donanım performansı izin verdiği sürece tüm ekranı yeniden çizmeye devam eder.

  • Hoşuma gitti ama standart UX pratiklerine pek uymuyor gibi.
    Basılı tutarken fareyi öğenin dışına taşırsanız bunun tıklama olarak işlenmemesi gerektiğini düşünüyorum. Şu anda buton bunu tıklama olarak işliyor ama checkbox işlemiyor; bu da tutarsız.

    • Flash geliştiricileriyle çalışırken hep yaşadığımız sorun buydu. “Scrollbar’ın tüm işlevlerini uygulayamıyorsan scrollbar’ı yeniden uygulama” ilkesi yaygındı ama sonunda beşten fazla kez düzeltip günler harcardık.
    • İyi yakalamışsınız; buton mantığını düzelttim ve artık imleç buton sınırlarının dışındaysa tıklama gerçekleşmiyor.

  • Gerçekten çok sevimli; @media (prefers-reduced-motion: reduce) içinde doğal biçimde özelliği azaltması da güzel.
    Yine de demo sitesinde, sistem ayarını değiştirmeden kullanıcının bunu geçersiz kılabilmesi ya da en azından animasyonun gösterilmediğine dair bir bilgilendirme olması iyi olurdu.

    • Hareketin kasıtlı olarak azaltıldığını fark etmeyip bozuldu sandım. Daha önce bu ayarı açtığımı da unutmuştum.
    • Apple menüsü > Sistem Ayarları > Erişilebilirlik > Hareket bölümünden Hareketi Azalt ayarlanabiliyor.
      Böyle güzel bir demo çıktığında ayarı hatırlamam biraz zaman alıyor; o sırada da hayal kırıklığıyla “bunun nesi özel?” diye tıklayıp duruyorum.
    • Artık bir bildirim gösteriyor ve sevimli tavşan simgesine basarak sistem ayarını geçersiz kılmaya da izin veriyor.

  • Gençken olsam buna bayılırdım ama bugünlerde yerel stylesheet ile böyle efektleri kaldırmaya ya da karanlık mod ve okuma modu kullanmaya daha çok zaman harcıyorum. Zaman çok değişti.

    • Animasyonun şu anda olan ya da değişen şeyi vurgulayan geri bildirim olması hoş. Yerel bileşenler bunu her zaman iyi ifade edemiyor; doğru kullanılan animasyon sadece süs değil, gerçek bir UX değeri taşıyor.
    • Yılda bir kez kadar yazılımlarda daha fazla eğlence ister gibi oluyorum, sonra yeniden tek istediğim şeyin beni rahatsız etmemesi olduğunu hatırlıyorum.

  • Fareyle üzerine gelindiğinde de daha düşük yoğunlukta efekt görünse güzel olurdu. İlerleme çubuğu ve toast gibi bazı kontrollerde jöle efekti yok gibi.
    Demo sayfasının performansı da pek iyi değil ve kaydırmayı ele geçiriyormuş hissi veriyor; ama genel olarak sevimli ve oyun arayüzlerine iyi yakışır gibi.

  • Chip öğesi yerinde kalıp geçiş yapmalı; tıklayınca sınırların dışına taşması hoşuma gitmiyor.

  • Sevimli ama bazı kontrollerin tepki hızı çok kötü. Slider’ı ileri geri sürükleyince fare imlecinin çok gerisinde kalıyor; yapıştırıcıyla tutturulmuş gibi imleci takip etmesi gerek.
    Buna karşılık jelly-resizable gibi diğer kontroller imlece iyi tutunup hareket ediyor. "Placeholder" kontrolünde tıklayınca placeholder kaybolmuyor gibi.

  • 2007–2010 civarında Paul Neave’in web sitesinde, blogunda ve showcase’inde sayfa kenarlarında buna benzer bir jöle efekti olduğunu hatırlayan var mı merak ediyorum. O dönemde Flash ile yapılmıştı.
    O zamanlar Paul Neave benim kişisel kahramanlarımdandı; bunu okuyorsa umarım iyidir.

  • Bu UI tasarım sisteminde fizik efekti denebilecek hiçbir şey bulmak zor.

    • Bu kütüphane, istemcinin hareketi azaltma ayarına saygı göstererek tüm animasyon efektlerini devre dışı bırakıyor.

  • Benim renk görme bozukluğu türümden ya da monitör ayarlarımdan kaynaklanıyor olabilir ama kırmızı ile kehribar rengi o kadar benziyor ki butona basıp basmadığımı bile ayırt edemedim.