Sketch-də möhtəşəm tel kafellər necə hazırlanır

(Bu yazı əvvəlcə alexanderskogberg.com saytında yayımlandı.)

Son bir neçə ildə Sketch dizaynerlər arasında ən yaxşı vektor qrafik redaktorlarından birinə çevrildi. Həftədə bir neçə dəfə işdə istifadə edirəm və çox sevirəm! Sketch-də möhtəşəm tel kadrlar yaratmaq üçün tövsiyələrim.

2011-ci ildə İT üzrə məsləhətçi kimi işə başlayanda dizayner yoldaşlarım hamısı fərqli vektor qrafiklərindən istifadə etdilər. Bu gün demək olar ki, hamısı yalnız eskizdən istifadə edir.

Tel telləri hazırlayırsınızsa, bir stil rəhbərini hazırlayırsınızsa və ya illüstrasiyalar çəkirsinizsə, Sketch əla vasitədir! Populyardır, xüsusiyyətləri ilə çox yüklənməyib və Photoshop kimi redaktorlardan çox daha az xərcləyir.

Sketch-də tel çərçivə yaratmaq üçün ən yaxşı məsləhətim.

Səhifələr və iş taxtaları ilə ekranlarınızı düzəldin

Tel telləriniz böyüdükcə, effektiv qalmaq üçün bütün ekranları mütəşəkkil saxlamaq vacibdir. Buna görə səhifələrdən və iş masalarından istifadə etməlisiniz.

Hər bir əlaqəli ekran üçün bir səhifə yaradın

Eskizdə bir səhifə yeni boş bir kətandır. Bütün ekranlarınızı eyni tərəfə qoymaq üçün heç bir səbəb yoxdur. Bunun əvəzinə, simli çərçivə qurduğunuz tətbiqdə və ya veb saytında hər bir əlaqəli ekran üçün bir səhifə yaradın.

Doldurulmuş heyvanlar satın aldığınız bir veb sayt üçün tel kare yaratdıqda, aşağıdakı səhifələri yaratdım:

  • İş sahəsi (ehtiyac duyduğunuz hər şeyi yaratmaq üçün "iş masası")
  • Aktivlər (loqotiplər, fotoşəkillər və s.)
  • Mətn üslubları (yalnız mətn üslublarım üçün)
  • Rəmzlər (avtomatik olaraq Sketch tərəfindən yaradılmışdır)
  • Ev (cari təkliflər və xəbərlər üçün)
  • Kateqoriya səhifəsi (müxtəlif sevimli oyuncaqlar kateqoriyası üçün)
  • Məhsul səhifəsi (müəyyən bir doldurulmuş heyvan üçün)
  • Ödəmə səhifəsi (ünvan və ödəniş məlumatlarını daxil etmək üçün)
  • Təsdiq səhifəsi (alışı təsdiqləmək üçün)
Səhifələrin siyahısı. Seçilmiş səhifə üçün iş lövhələri aşağıda verilmişdir.

Bir səhifədəki hər bir ekran variantı üçün bir iş taxtası yaradın

Hər bir ekranın bir neçə dəyişikliyə sahib olması ehtimalı olduğundan hər biri üçün bir iş taxtası yaratmağı məsləhət görürəm. Yaratdığınız hər hansı bir iş masası avtomatik olaraq seçilmiş səhifəyə yerləşdirilir.

Yeni bir iş taxtası yaratdığınız zaman genişliyini və hündürlüyünü zövqünüzə görə təyin edə bilərsiniz. Bununla birlikdə, Sketch eyni zamanda populyar cihazlara və ekran çözünürlüklərinə əsaslanan hazır ayarları da təklif edir.

Bir ekran variantının nə olduğu sizin ixtiyarınızdadır. Ümumiyyətlə müxtəlif ekran ölçüləri üçün dəyişikliklər edirəm və qarşılıqlı dizaynın necə ətraflı işləməsini göstərmək üçün.

Yumşaq oyuncaq veb saytının çıxış səhifəsi üçün aşağıdakı ekran variantları üçün iş masaları yaradıram:

  • Ünvan və ya ödəniş məlumatı daxil edilməyib (kiçik və böyük ekranlar üçün)
  • Düzgün daxil edilmiş ünvan və ödəniş məlumatları (kiçik və böyük ekranlar üçün)
  • Yanlış daxil edilmiş ünvan və ödəniş məlumatları (kiçik və böyük ekranlar üçün)
Seçilən səhifə üçün iş lövhələri əsas kətana qoyulur.

Artboardların adlanmasına gəldikdə, ad nümunəsi ad-nömrə-dəyişdirici-size.jpg istifadə etməyi məsləhət görürəm. Bu naxışdan istifadə edərək, komanda üzvləriniz ixrac edilmiş bir taxtanın tərkibini açmadan onu müəyyənləşdirmə ehtimalı daha yüksək olacaqdır.

Bəzi nümunələr:

  • checkout-01-default-small.jpg
  • ödəmə-02-çatdırılma ünvanı-axtarış-small.jpg
  • checkout-03-correct-payment-information-small.jpg
  • ödəmə-04-səhv-ödəniş-məlumat-small.jpg
İpucu: İxrac olunan bir iş taxtasının adı ilə müəyyən edilə biləcəyinə əmin olun. Checkout-03-correct-payment-information-small.jpg kimi bir ad əladır, screen21.jpg kimi bir ad dəhşətlidir.

Mətn üslublarından istifadə edin

Mətn tellərinizdə müəyyən dərəcədə istifadə edirsiniz. Şrift ölçüsünü tənzimləməyiniz və ya şrifti tamamilə dəyişdirməyiniz lazımdırsa, hər bir ekranda etmək çox böyük vaxt və enerji itkisidir.

Xoşbəxtlikdən, Sketch mətn üslublarından istifadə edərək dizayn seçimlərinizi saxlamaq və yenidən istifadə etmək imkanı təklif edir. Mətn stili qeyd edildikdən sonra yeni mətn hissələrinə tətbiq oluna bilər. Mətn üslubunu dəyişdirdiyiniz zaman mətnin həmin mətn üslubundan istifadə edən bütün hissələrini təsir edir.

Hər dəfə yeni bir layihə üzərində işləməyə başlayanda ümumi mətn parçaları üçün mətn üslubları yaradıram:

  • H1 başlığı
  • H2 başlığı
  • H3 başlığı
  • Toplu
  • Metatekst (tarixlər, vaxt ştampları, giriş göstərişləri və s.)
  • Giriş etiketləri (giriş sahələri və radio düymələri qrupları və onay qutuları üçün)
Həmişə mətn üslublarımı ayrı bir səhifəyə qoymuşam, hamısını eyni anda görə bilmişəm.

Adlandırma konvensiyası qurun

Veb inkişaf etdiricilərində (inşallah) CSS siniflərinə ad vermək qaydaları olduğu kimi, istifadə edəcəyiniz səhifələr, iş masaları, nişanlar və mətn stilləri üçün adlandırma konvensiyası qurmalısınız.

Geliştiricilərin istifadə etdiyi eyni (və ya çox oxşar) adlandırma konvensiyasından istifadə etmək yaxşıdır. Zeplin kimi alətlərdən istifadə edərək simli kadrlarınızı onlarla bölüşdüyünüz zaman, eyni komponentlər üçün eyni adları istifadə etdikdə qarışıqlıq və təxminlər daha az olacaq.

Məsələn, inkişaf qrupunuz veb saytdakı əsas düymələrin dizaynı üçün CSS sinifinə "düymə-əsas" adını vermişdisə, "əməliyyata çağırış" əvəzinə bu adı istifadə etməlisiniz.

İpucu: Yalnız özünüz üçün deyil, başqası üçün bir adlandırma konvensiyası yaratdığınızı düşünün. Terminologiyanızın mənalı olub olmadığını kimsə soruşun.

Gerçək bir adlandırma konvensiyasının bir nümunəsini axtarırsınızsa, Trello CSS Guide və ya BEM-ə baxın.

Simvolların gücünə yiyələn

Symbols eskizdəki ən yaxşı xüsusiyyətdir. Mətn üslublarına bənzəyir, ancaq bütün forma və mətn parçaları üçün. Güclüdür və uzun müddətə çox vaxt sərf edəcəkdir.

İpucu: Loqotipləri və simvolları da simvol olaraq qeyd edin.

Bir etiket və giriş işarə ilə giriş sahəsi yaratdığınızı və başqa ekranlarda yenidən istifadə etmək istədiyinizi düşünək. Bu üç elementi bir ikon olaraq saxlayaraq, artıq kitabxananızda saxlanılır və istənilən vaxt istifadə edilə bilər.

Simvolunuzda mətn varsa, həmin işarənin bütün nümunələri üçün mətn hissələrinin üzərinə yaza bilərsiniz. Mətnin dəyişdirilməsi (dizaynı deyil) digər məqamları təsir etmir.

Ad, giriş işarəsi və giriş mətni olan giriş sahəsinin simvolu. Mətn hissələri bu simvolun hər bir nümunəsi üçün yazıla bilər. İpucu: Giriş mətn sətrini

Bu simvolu daha sonra redaktə etsəniz, dəyişikliklər onun bütün nümunələrini təsir edəcəkdir.

Simvollarınızı cizgilərlə adlandırın

Çox güman ki, bir çox simvol yaratacağınız üçün onları nizamlı tutmaq üçün ətrafa (/) adlar kəsin.

Simvolların adlarına irəli bir əyri qoysanız, Sketch aradığınız simvolları tapmaqda kömək etmək üçün onları avtomatik olaraq alt-üst edir.

Bu iki ad nümunəsindən istifadə etməyi məsləhət görürəm:

  1. Kateqoriya / növ / vəziyyət
  2. Kateqoriya / tip / variasiya vəziyyəti
İpucu: Yalnız üç qat dərinliyiniz üçün maksimum iki slasa yapışın (bu mənim üçün bu günə qədər ən yaxşısını işlətdi).

Bu iki nümunəyə əsaslanan bəzi simvol nümunələri:

  • düymə / ilkin / standart
  • / Əsas / deaktiv düymə
  • düymə / ikincil / standart
  • / İkincil / deaktiv edilmiş açar
  • input / nolabel / default
  • Giriş / etiket / standart
  • Giriş / etiket / deaktiv edilmişdir
  • giriş / labelandhint / default
  • giriş / labelandhint / əlil
Alt qovluq eskizi yaratdığınız simvolların adlarına irəli əyiklər (/) əlavə etdikdə yaradılır.

Ümumi simvollar kitabxanası yaradın

Eskiz düzbucaqlı, dairə, üçbucaq və ox kimi ümumi formalara malikdir. Onları yenidən çəkmək lazım deyil. Lakin bunlardan düymələr, giriş sahələri, tarix seçiciləri və modal pəncərələr kimi ümumi interfeys komponentləri yaratmaq üçün istifadə etməlisiniz.

Məsələn, həmişə fərqli vəziyyətlərdə ümumi komponentlər üçün simvollar yaradıram, məsələn:

  • Əsas düymələr (standart və deaktiv)
  • İkinci düymələr (standart və deaktiv)
  • Mətn etiketli onay qutuları (yoxlanılmış və qeyd olunmamış)
  • Mətn etiketli radio düymələr (yoxlanılmış və yoxlanılmamış)
  • Genişləndirilə bilən bloklar (genişləndirilmiş və genişləndirilməmiş)
  • Etiketi olan giriş sahələri (standart və deaktiv)
  • Təsviri və giriş işarəsi olan giriş sahələri (standart və deaktiv)

Yükləyə və pulsuz istifadə edə biləcəyiniz əvvəlcədən hazırlanmış bir çox interfeys komponenti var. Bununla birlikdə, öz kitabxananızı yaratmağı məsləhət görürəm. Sketch istifadə haqqında daha çox məlumat əldə edəcək və daha az istifadə olunmamış simvol əldə edəcəksiniz.

İşarələr yaratmağa və yadda saxlamağa başladığınız zaman simvol yan eskizi avtomatik olaraq yaradılır.

Simvollarınızın cavab verdiyinə əmin olun

Bu gün tel kafes hazırlayırsınızsa, ehtimal ki, fərqli ekran ölçüləri üçün ekranlarınızda fərqli dəyişikliklər etməlisiniz. Kiçik ekranlar üçün bir, böyük ekranlar üçün və bəlkə də orta ölçülü ekranlar üçün bir variant.

Bu o deməkdir ki, simvollarınızı üfüqi və ya şaquli uzadarkən onların düzeni pozulmaması üçün qurmalısınız.

Xoşbəxtlikdən, Sketch bunu əla edir! Bir simvoldakı hər bir element üçün, sağdakı xüsusiyyət sütunundakı bir nəzarət istifadə edərək, simvol uzandıqda necə davrandığını təyin edə bilərsiniz.

Bir simvolda seçilmiş bir element üçün edə biləcəyiniz bəzi parametrlər:

Hər istiqamətə uzanır.Ölçü saxlayır, lakin yuxarıya və aşağıya tərəflərlə eyni nisbətdə hərəkət edir.Yuxarıya sabitləndi. Genişliyini genişləndirəcək, lakin eyni hündürlüyü qoruyacaq.Sol üst küncdə sancılıb. Ölçüsünü qoruyacaq.

Simli kadrları təqdim edin

Simli kadrlarınızı komandanızdakı inkişaf etdiricilərə təqdim edərkən bir neçə seçiminiz var.

Bəzi inkişaf etdiricilər birbaşa eskiz sənədinə baxmağı üstün tuturlar, bəziləri ekranlarının şəkillərə ixrac edilməsini və bəziləri InVision kimi tıklanabilir prototiplər yaratmaq üçün vasitələrə üstünlük verirlər.

İpucu: Komandanızdakı inkişaf etdiricilərlə istifadəçilər kimi davranın. Sim tellərinizi istədiyiniz şəkildə idarə edin.

InVision maraqlı səslənirsə, xahiş edirəm mənim prototip yazımı inVision ilə bir mütəxəssis kimi oxuyun.

Eskiz sənədlərinizdə qat istifadə etməyin

İnkişaf edənlər ilə təcrübəmə əsaslanaraq, Sketch-də ekranlarınızdakı qatlardan istifadə etməməlisiniz. Məncə bu iş üsulu Photoshop birinci yerə çıxanda norma idi.

Birlikdə işlədiyim inkişaf etdiricilərin əksəriyyəti bir ekranın necə göründüyünü və necə davrandığını görmək üçün çox (çox zəif adlanan) təbəqələrin içinə girib çıxmağı incidir. Bunun əvəzinə, fərqli ekran variantlarını təmsil etmək üçün daha çox iş taxtası istifadə edin.

Daha çox oxu

Sketch istifadə ilə bağlı bir çox möhtəşəm məqalələr yazılmışdır. Budur mənim favoritlərim:

  • Eskizdə cavabdeh dizayn - Emin İnanc Ulu tərəfindən hazırlanan hissə 1
  • Javier 'Simón' Cuello tərəfindən Sketch-də simvolların bütün potensialını ortaya qoyun
  • Lloyd Humphreys tərəfindən Sketch Symbol Best Practices (indi iç içə keçmələrin dəyişdirilməsi bir şeydir)

Bu yazıya əlavə etməli, silməli və ya dəyişdirməli olduğumu düşünürsən? Şərh hissəsində mənə bildirin.

Yeri gəlmişkən! Bu tip tel şəbəkə layihəniz üçün bir az çoxdursa, xahiş edirəm yeni yazıma baxın, Kağız tel kafes sizi daha yaxşı bir dizayner edə bilər.

/ Alex