Dizayn vasitələri sıradan çıxır. Budur onları necə düzəldəcəyik.

Nadir hallarda bir gün dizayn vasitələri haqqında düşünməyə heç vaxt sərf etmədiyim yerdən keçir. Bir neçə il əvvəl mən Marvel tərəfindən əldə edilmiş bir dizayn aləti qurdum. Bu, iki il əvvəl idi, lakin o vaxtdan bəri mənzərə çox dəyişmədi və onu inkişaf etdirməyə həvəsim də qalmadı.

Bu yaxınlarda, dizayn vasitələri haqqında bir yazı yazdım - zaman-zaman məlum olduğu bir şey.

Mən o gün ağlıma gələni danışan tək deyildim, digərləri də.

28 İyul 2017 dizayn vasitələri üçün yaxşı bir gün deyildi.

Bu Twitter mövzularında dəfn edilmiş çox böyük bir fikir var, ancaq uzun müddətdir, cari dizayn alətləri modeli haqqında da bu qədər kökündən pozulduğunu düşündüyünüz şeyə dərinə getməyə vaxt ayırmaq istəyirdim. istiqamətə işarə olaraq düşünürəm ki, rəhbərlik etməliyik.

Hamımız sadəcə şəkillər çəkirik. Dəli deyil.

Demək olar ki, bütün məşhur dizayn vasitələri şəkillərə ixrac edir. Bu bir neçə səbəbə görə problemlidir:

  1. Bir şəkil ilə əlaqə qura bilməzsiniz. Prototipləmə vasitələri bizə görüntülərə ekran keçidlərini və sadə qarşılıqlı təsirləri əlavə etmək imkanı verir. Bununla birlikdə, məhsullarımız daha inkişaf etmiş ekran keçidlərini və mikro qarşılıqlı təsirləri tələb etməyə davam etdikcə, görüntülər belə davam edə bilmir.
  2. Şəkillər maye deyil. Dizayn vasitəsi ilə həssas dizayn qərarları ilə əlaqə qurmaq ümumiyyətlə çətin məsələdir.
  3. Şəkillər dövlət deyil. Bir UI üçün müxtəlif dövlətləri təsirli bir şəkildə əlaqələndirmək üçün tez-tez bir çox görüntü lazımdır.
  4. Bitmap şəkilləri qətnamədən asılıdır. Retina cihazlarının meydana gəlməsi ilə şəkillər bəzən zəif göstərə bilər.
  5. Şəkillər sənədləri ağır olmağa meyllidir və saxlamaq, idarə etmək və ya bölüşmək üçün çox vaxt çətin olur.

Dizayn alətləri şəkilləri ixrac etməyə davam etdikcə, məhsullarımızın dəqiq nümayəndələrini heç vaxt istehsal edə bilməyəcəklər. Dəqiqliyin olmaması dizaynerlər və tərtibatçılar arasında ünsiyyətə mane olur. Dizaynerlər öz işlərini ünsiyyət qurmaq üçün vay halına uyğun olmayan bir mühitdən istifadə etməyə davam etdikcə, bu iş yanlış izah etməyə həmişə açıq olacaqdır.

Bu çox əhəmiyyətli bir məqamdır, çünki demək olar ki, bütün dizayn vasitələri vektor formalarını şəkillərə çevirir. Photoshop, Illustrator, Marvel, Adobe XD, Sketch və Figma bu baxımdan hamısı eynidir. Şəkillər yalnız dizayn niyyəti ilə qismən əlaqə qura bilər. Məhsullarımız mürəkkəb qarşılıqlı təsirləri, səs girişi, video giriş, genişlənmiş reallıq, virtual reallıq, temperatur həssaslığı və s. Qəbul etməyə və dəstəkləməyə davam etdikcə, bu vasitələrin verdiyi dəyər sürətlə azalacaqdır. Təsvirə əsaslanan dizayn ölü bir sonluqdur.

Dizayn alətlərimiz bir şəkil yox, həqiqi məhsulu manipulyasiya etməlidir.

Məhsullarımız interaktivdir. Alətlərimiz statikdir.

Əvvəlki nöqtəmdə bu mövzuya toxundum, amma bir qədər də inkişaf etdirəcəyimi düşündüyüm üçün çox kritikdir.

Demək olar ki, bütün məhsullarımızda adi olan qarşılıqlı əlaqə miqdarını düşünün, lakin dizayn alətlərimizlə əlaqə qurmaq mümkün deyil. Budur başımın üstündəki qısa siyahı:

  • Bir düyməni bükmək
  • Bir giriş diqqət
  • Onay qutusunu yoxlamaq
  • Süfrə məzmunu
  • Sahələri gəzin
  • Fokuslanmış vəziyyətlər üçün tab indeksi
  • Klaviatura qısa yolları

Əlbətdə ki, bu xüsusiyyətlərdən bəziləri hackli mühəndisliklə təqlid edilə bilər, amma görəsən görəsən yer üzündə nədir? Niyə dizaynerlər yalnız həqiqi məhsulu tərtib edə bilmirlər? Nəticədə, bütün mockups birdəfəlik istifadə olunur, lakin dizaynerlər onları mükəmməlləşdirmək üçün aylardır sərf edirlər. Bu vaxt həqiqi məhsulu çimdikdən daha yaxşı keçirmək olardı.

"Dizaynerlər kodu" dovşan çuxurundan çox uzaqlaşmayacağam, amma hamımıza kod yazmağı təklif etmirəm. Dizayn alətlərimizin canlı məhsullarımızın birbaşa manipulyasiyasını dəstəkləyə bilməməsinin yaxşı bir səbəbinin olmadığını söyləyirəm.

Framer, qabaqcıl və detallı qarşılıqlı əlaqələri dəstəkləyən bu şöbədəki əksəriyyətindən daha yaxşı bir iş görür. Paketin qalan hissəsi çox geridə qalıb.

Alətlərimiz vebin düzülüş paradiqmasını dəstəkləməlidir

Təxminən bir il əvvələ qədər İnternetdə sxemlər qurmağın yeganə yolu ekrandan istifadə etmək idi: masa və şaquli-align CSS xüsusiyyətləri. İndi bizdə Flexbox var və tezliklə CSS şəbəkəsinə sahib olacağıq. Bu üç layout mühərriki DOM axını istifadə edərək olduqca oxşar şəkildə işləyir. Demək olar ki, bütün veb saytlar bu üç layout sistemindən birini istifadə edərək qurulmuşdur.

Beləliklə, dizayn alətlərimizin eyni layout modelini dəstəkləməsi məna verir. Doğrudanmı?

Bəli, demək olar ki, bütün dizayn vasitələri bu layout sistemlərinə məhəl qoymur, əvəzinə hər bir təbəqəni tamamilə öz lövhəsində yerləşdirməyə üstünlük verir. Bu, vebin necə işlədiyini və dizayn alətlərimizin necə işlədiyini, bir çox məsələni təqdim edərək bir ara açır:

  • Həssas dizayn çox çətinləşir, çünki hər bir təbəqə hər nöqtə üçün əl ilə düzəldilməlidir. Alternativ olaraq, məhdudlaşdırıcı əsaslı bir sistem sistemi tətbiq oluna bilər, lakin bu, mürəkkəbliyi artırır, öyrənmə əyriliyini artırır və nəticədə inkişaf etdiricilərin düzeni birbaşa vebə ötürməsinin qarşısını alır.
  • Hər bir təbəqə sənəd axınının xaricində olduğundan, manipulyasiya etmək çətin olur. Məsələn, bir siyahıya bir maddə əlavə etmək istəyirsinizsə, həmin siyahıdakı digər əşyaları əl ilə dəyişdirməlisiniz. Əlbətdə, ağrıları yüngülləşdirmək üçün təkrar funksiyalar və digər xülya xüsusiyyətləri təqdim etmək olar, lakin yenə bu əlavə mürəkkəbliyi təqdim edir və DOM-un bizə pulsuz verəcəyi bir şeyi çətinləşdirir.
  • Mütləq yerləşdirmə təbii olaraq sabit piksel koordinatlarına və ölçülərinə səbəb olur. Bu, qeyri-sabitliyə səbəb olur və yenidən, vebin necə işlədiyindən böyük bir uzaqlaşma. Veb em, rem, vh, vw və% kimi maye qurğular üzərində qurulub. Alətlərimiz bu bölmələri standart olaraq dəstəkləməlidir.

Dizayn alətləri vebə və onun nüanslarına bənzəməməli və ya əks etdirməməlidir - onlar yalnız veb olmalıdırlar.

Monolit bir vasitə yol deyil

Yaxşı dizayn mərhələlərlə baş verir. Yaxşı qurulmuş bir dizayn sistemi bir neçə fərqli təbəqəyə malikdir:

  1. Stil palitrası rənglər, kölgələr, boşluq, haşiyə radiusu, yazı tipləri, şrift ölçüləri, animasiyalar və markanın şəxsiyyətini təşkil edən digər üslublar toplusu. Hal-hazırda əksər dizayn vasitələri yalnız rəng palitrasını dəstəkləyir. Digər üslub xüsusiyyətlərini dəstəkləməyənə qədər sistematik dizayn etmək olduqca zəhmətkeş olacaqdır.
  2. Aktivlər Buraya nişanlar, təsvirlər və şəkillər kimi elementlər daxildir. Orada bəzi fenomenal görüntü redaktorları var və Figma'nın vektor aləti əladır, lakin SVG dəstəyinə gəldikdə, dizayn alətlərimiz istədikləri üçün çox şey buraxır.
  3. Komponent kitabxanası Komponent müxtəlif dəyişikliyə görə bir elementə məlumat təqdim edən üslub və aktivlər toplusudur. Nümunələrə düymələr, girişlər, döş nişanları və s. Qeyd etdiyim kimi, bu yaxınlarda Figma və Sketch bu prosesi əsas rəsm axınından uzaqlaşdırdılar - bu sadəcə komponentlərin şəkilləri deyil, yalnız komponentlərin şəkilləridir.
  4. Modullar Bir modul / kompozisiya, müxtəlif dövlətlərdə UI-nin qapalı bir hissəsinə məlumat verən komponentlər toplusudur. Nümunələrə başlıq panelləri, tab menyular, giriş formaları, masalar və s. Daxil edilə bilər. Modullar yalnız mürəkkəb komponentlər olduğundan, Figma və Sketch'in də bunları idarə edə biləcəyini təxmin edirəm. İkisini ayırmağın bir xeyri ola bilər.
  5. Ekranlar, istifadəçi ilə qarşılıqlı əlaqə qura biləcəyi tam bir UI yaratmaq üçün modullar, komponentlər və məlumatlar toplusudur.

Dizayn alətlərinin əksəriyyəti bu dizayn mərhələlərinin hər birini ən azı bir dərəcədə dəstəkləyən xüsusiyyətləri təmin edir. Problem ondadır ki, mərhələlərin hamısı qarışıqdır. Demək olar ki, bütün dizayn vasitələri yalnız bir rejimi təklif edir - rəsm rejimi. Sənət lövhələri dəsti yaradır və yalnız şəkillər çəkməyə başlayırsan. Yalnız son zamanlarda Sketch və Figma kimi mücərrəd komponentlər / simvollar əsas rəsm rejimindən uzaqdır - qəribədir, çünki ön inkişafda komponentlər uzun illər mücərrəd edilmişdir.

Bir üslub palitrası tərtib edərkən, lövhələr və ya vektor alətləri görməyə ehtiyac duymuram. Uyğun rəng seçmək üçün vasitələr görmək istəyirəm. 8dp boşluq miqyası və ya bir növ tərəzi seçimi kimi şeylər üçün hafızası istəyirəm.

Bir simge tərtib etmək, istifadəçi axını dizayn etmək üçün tamamilə fərqli düşüncə tərzi tələb edir. Doğma SVG düzbucaqlarını, dairələrini, xətlərini və yollarını çəkməyə imkan verən sadə bir SVG redaktoru, sonra optimallaşdırılmış SVG kodu ideal olardı.

Bir komponent tərtib edərkən artıq fərdi üslublar barədə düşünməməliyəm - sadəcə əvvəlcədən təyin edilmiş stil palitramdan üslub seçməyim lazımdır. Dizayn sistemimin effektivliyini azaltmaq üçün uyğunsuzluq təqdim edəcəyi üçün yalnız bir komponent üçün çarpma tərzinə başlamazam. Bir üslub palitrası yerində olduqda, yalnız mənbədən düzəldilə bilər.

Eynilə, bir modul tərtib edərkən yalnız əvvəlcədən təyin edilmiş komponent kitabxanamla tanış olmalıyam. Yan çubuğunda üslub xüsusiyyətləri olmamalıdır. Vektor alətləri yoxdur. Modul yaratmaq üçün sürükleyib ata biləcəyim təkrar istifadə olunan komponentlərin kitabxanası.

Eyni, bəstələyən ekranlara aiddir. Bu anda, UI qurmaq üçün yalnız komponentlərdən və modullardan istifadə edirik. Üslub və ya forma və ya digər yaradıcı səylər barədə düşünmürük. Əsasən məzmunun və istifadəçi axınının dizaynına yönəlmişik.

Bu dizayn mərhələlərinin hər biri ayrı bir alətlərdə tamamilə və ya eyni alət daxilində fərqli rejimlərdə baş verə bilər. Düşünmürəm ki, o qədər də vacib deyil. Bir şey əmin olsa da, indiki dizayn vasitələrinin əksəriyyəti prosesi belə tanımır.

Alətlərimiz yaxşı dizaynı təşviq etməlidir

Dizaynerlər bir layihəyə sonsuz sayda unikal üslub əlavə edə bilməyin nadir lüksünə sahibdirlər. Bir az daha böyük şrift ölçüsü lazımdır? Sadəcə vurun. Biggie yoxdur. Biraz parlaq rəng lazımdır? Yalnız çimdik. Sərindir. Bənzər üslublar üçün bir qədər fərqli dəyərlərdən istifadə edərək, eyni layihədə birdən çox artbord yarada bilərsiniz.

Dizayn alətiniz heç bir şey edə bilməyəcəyinizi söyləmək niyyətində deyil. Brenddən kənar bir rəng istifadə etdiyiniz üçün heç vaxt sizi cəlb etməyəcək. Məkan miqyasına aid olmayan boşluq dəyərini istifadə etməyinizə heç vaxt mane olmur. Əhalinin 20% -i sadəcə hazırladığınız açıq boz mətni görə bilməyəcəyiniz barədə heç vaxt xəbərdarlıq etmək niyyətində deyil.

Və niyə…? Dizayn vasitələri əhəmiyyət vermir.

Dizayn alətləri, qeyri-məhdud yaradıcılıq üçün bir vizyonla o qədər alovlandırılmışdır ki, həssas şəkildə dizayn etmək, əhatəli dizayn etmək, sistemli şəkildə dizayn etmək nə demək olduğunu gözdən itirdilər.

Sadəcə olaraq, dizayn vasitələri bizə istədiyimiz cəhənnəmin nə etdiyini etməyə imkan verir. Müəyyən dərəcədə bu sərhədsiz yaradıcılıq səviyyəsi, xüsusən də ideasiya mərhələlərində faydalıdır. UI dizaynerləri kimi, iş axınının əksəriyyəti çox yaradıcılıq tələb etmir. Əksinə, iş prosesimiz təkrar istifadə, təkrarlama, tanışlıq və standartlaşdırma tələb edir; alətlərimizi təmin etmək üçün az iş görən ehtiyaclar.

Bu məhdudiyyətsiz azadlıq veb inkişafının reallığına ziddir. Tərtibatçılar faktiki məhsulla işlədikləri üçün hamısı eyni kodla işləməlidirlər. Yaradıcılar sadəcə kod bazasına təcrid olunmuş şrift ölçülərini və ya təsadüfi rəng dəyərlərini əlavə edə bilməzlər. Birincisi, bir linter (zəif yazılmış kod barədə xəbərdarlıq mesajı), ehtimal ki, dərhal qışqırmağa başlayacaqdır. Yoxdursa, deməli, onların yaramaz sənətkarlıqları, kodu nəzərdən keçirərkən yaxalanacaqdı. Birtəhər çatlardan keçə bilsəydi, nəzərə çarpan bir performans təsiri həyəcan verəcəkdir.

Məhsul komandalarında gördüyüm ən çox narahat edən problemlərdən biri dizayn və inkişaf qrupları arasındakı əlaqədədir. Tərtibatçılar illərdir ciddi qaydalar və məhdudiyyətlərlə çalışırlar. Dizayn alətlərimiz eyni məhdudiyyətləri qəbul etməyincə, boşluq heç vaxt daralmayacaqdır.

Canlı məlumatlarla dizayn etməliyik

Canlı məlumatlar müəyyən dərəcədə çox sayda vasitə ilə birləşdirilmişdir, görmək çox xoşdur. Adobe XD, tipik canlı məlumatlara bənzəyən saxta məlumatlar yaratmaq üçün həqiqətən səliqəli xüsusiyyətlərə malikdir. Invision Craft də Sketch üçün bəzi canlı canlı məlumat xüsusiyyətləri təmin edir.

Canlı məlumatlar mətnlə bitməməlidir. Şəkillər və video kimi digər elementlər yükləmə müddətini əhəmiyyətli dərəcədə artıraraq istifadəçi təcrübəsinə böyük təsir göstərə bilər. İnternetdə işləyirsinizsə, brauzer qurğusu alətləri, müxtəlif internet sürətlərinə bənzəmək üçün əlaqəni tənzimləməyə imkan verir. Sonra, yeni bir məzmun parçasının istifadəçi təcrübəsinə necə təsir göstərə biləcəyini görə bilərsiniz.

Dizayn alətlərimiz bu lüksləri bizə verə bilərmi?

Bir sözlə: yox.

Həqiqi məhsulun dizaynına nə qədər yaxınlaşsaq, dizayn işimiz daha faydalı və təsirli ola bilər.

İnternet açıqdır. Alətlərimiz də olmalıdır.

İnternet haqqında həqiqətən gözəl şeylərdən biri də açıq olmasıdır. Bir veb saytı yalnız hər hansı bir cihazdakı istənilən veb brauzerdə baxıla bilər.

Dizayn alətləri ilə necə müqayisə olunur? Yaxşı, bir neçə gün əvvəl, qardaşım David məndən qurduğu bir tətbiqin dizayn nəzərdən keçirilməsini istədi. Mənə eskiz sənədini göndərdi. Mən onu açanda bu baş verdi ...

Dizayn vasitələrinin əksəriyyəti divarlı bağlardır. Bir həmkarımız Photoshop-da işləyirsə, başqa bir həmkarım bu layihəni Sketch-də aça bilməz. Bütün qrupunuzun eyni alətdən istifadə etməsi belə kifayət deyil - onlar da həmin vasitənin eyni versiyasını istifadə etməlidirlər.

Marvel və Figma burada yaxşı bir iş görürlər, pulsuz planlar və innovativ əməkdaşlıq xüsusiyyətləri təklif edirlər.

Beləliklə, dizayn vasitələrinin gələcəyi nədir?

Dizayn alətlərindəki yenilik son dərəcə qiymətlidir və bu yaxınlarda çox şey var. Airbnb dizayn alətlərində Jon Gold və Benjamin Wilkins React komponentlərini götürən və Sketch içərisində təqdim edən React-Sketchapp üzərində işləyirlər. Jon və Ben, həmçinin salfet eskizləri götürən və bir şəkildə onları React komponentlərinə çevirən zehni əsən yeni bir vasitə üzərində işləyirlər.

Adam Morse, Brent Jackson və John Otander, bu məqalədəki və bəlkə də dünyadakı bütün problemləri həll edən Compositor-da alətlər dəsti üzərində işləyirlər.

Bu yazıda qeyd etdiyim problemləri həll etmək məqsədi daşıyan yeni bir dizayn aləti və açıq mənbəli dizayn sistemi olan Modulz üzərində işləyirəm. Əgər istəyirsinizsə, yeniləmələr üçün Twitter-də izləyin.

Vasitələrdə yenilik vacib olsa da, əsl problem təhsildir. Dizayn icması sistematik bir dizayn aləti üçün sadəcə hazır deyil. Bir çox dizaynerlərin bina sistemlərinə marağı azdır. Bəziləri üçün JPG son hədəfdir - Dribbble sevir.

Bir növ hesabatlılıq mədəniyyətini ruhlandırmalıyıq. Yaradıcılar illərdir hesabatlılıq mədəniyyətinə sahibdirlər. Kodlarını yoxlamaq üçün alətlər var. Bir geliştirici dəfələrlə ciddi kod qaydalarından yayınsa, məsələnin həll olunacağına əmin ola bilərsiniz.

Bununla yanaşı, dizaynerlər təbəqələrin adlandırılmasına, qruplaşdırılmasına və sifariş verilməsinə az əhəmiyyət verərək, çox vaxt dağılmış dağlar yığırlar. Hər biri öz başına çox gəlir. Çıxış (raster görüntü) giriş (vektor təbəqələri) tərəfindən təsirlənmədiyi üçün təşkil ediləcək dizaynerlərə real yük verilmir. Dizaynerlər tez-tez dizayn sənətini romantikləşdirərək, özlərini ifa etmək üçün öz cihazlarına buraxılmalı olan sehrbazlar kimi boyayaraq bu təşkilat olmamasını bəhanə edirlər.

Daxil olma mədəniyyətini də ilhamlandırmalıyıq. Bir çox insan üçün mətni oxumağı çətinləşdirən ultra yüngül mətn rəngləri və ya veb səhifələrin yüklənməsini yavaş hala gətirən super yüksək keyfiyyətli yazılar və ya rəngli kor insanlar üçün başa düşülməsini çətinləşdirən naxışsız UI elementləri kimi pozuntuları aktiv şəkildə rədd etməliyik. Hal-hazırda bu tip pozuntular dizayn ictimaiyyəti arasında alqışlanır. Ağıllı bir dizayn vasitəsini alqışlayırıqsa, bu mədəniyyəti tərsinə çevirməliyik.

Sistemli bir dizayn vasitəsi ürəyimizi qazanmaqdırsa, əvvəlcə tərbiyə etməlidir.