Men UI/UX dizaýneri bolup işleýärin. Ol näme diýseňiz, biziň ulanýan web saýtlarymyz, mobil app-larymyz we beýleki programmalryň görünýän interfeýsini çyzýan. Ýagny ulanyjy şol önümleri ulananda, kynçylyk çekmeli däl, ulanýan önümden lezzet almaly. Bu programistleriň işi dälde, UI/UX dizaýneler kömek edýär. 4 ýyllyk iş tejribämden öwrenen zatlarym bilen paýlaşaýyn onda, belki sizem şol ugra urunarsyňyz ýa-da ýöne gyzykly bolup biler.

Käwagt dizaýnyma seredýärin-de, bir zadyň ýetmeýändigini duýýaryn. Näme ýetenokka? Belli däl. Ýöne bir zat ýok.

Soň ony işdeşime görkezýän. Ol seredýär, kellesini gyşardyp “Hmm…” diýýär.

Ine, şol “Hmm” - dizaýneriň iň erbet görýän sesi.

Gowy habar näme? Köplenç uly zat gerek däl. Ownujak üýtgeşmeler ýeterlik. Käbiri bary-ýogy iki minut alýar.

Ine, şol 10 sany “çit kod”.

1. Boş ýer goý

Elementleri biri-birine gysyp goýsaň, olar ir bilen awtobusda gatnaýan adamlar ýaly bolýar. Hiç kim özüni rahat duýanok. Ekrandaky elementler bir-birine dykylşyp dursalar, seniň gözleriň hem rahat bolmaýar.

Boş ýer ünsi jemleýär. Okamagy çaltlaşdyrýar. Kelläňi ýadatmaýar.

Çit kod: 8px ulgamyny ulan. Aralyklara 8, 16, 24, 32…px goý. Göze aýratyn bildirmeýär, ýöne “arassa” duýgusyny berýär.

2. Bir ekran - bir esasy düwme

Menýuda kyrk sany tagam bar bolsa, näme sargyt etjegiňi bileňok. Uzak wagt seredip, ahyrynda “maňa-da şoň aýdany ýaly bolsunlaý” diýip goýberýäň.

Interfeýsde-de şeýle. Ulanyja bäş sany deň düwme berseň, ol hiç birine basmaýar.

Çit kod: Esasy düwmäni reňk we ölçeg bilen tapawutlandyr. Galanlary ýeňil dursun.

3. Ähli zady grid-e ýerleşdir

Deňleşdirilmedik dizaýn - çep aýagyna sag köwşüni geýen adam ýaly. Ulanyjy näme ýalňyşdygyny düşündirip bilmeýär, ýöne duýýar.

Çit kod: 12 sütünli grid ulan. Ondan soň düzediş etmek ep-esli aňsatlaşýar. (Tejribeli dizaýner bolsa, 2-3 ýa-da 4 sütün bilenem meseläni çözýär)

4. Teksti okalýan et

Tekstiň ululygyny 12px tekst goýmak — okaýja “gözüňi bir barlatsana” diýen ýaly bolýar.

Ýönekeý düzgünler:

• Esasy tekst: iň azyndan 16px

• Setirara aralyk: 1.4–1.6

• Bir setirde 60–80 harpdan köp bolmasyn

Şriftem köp gerek däl. Ikisi ýeterlik: biri sözbaşylar üçin, biri tekst üçin.

5. Reňkleri gysganyp ulan

Reňk näçe köp bolsa, şonça-da gowy däl. Köp reňkli dizaýn toý mekanyň içi ýaly - hemme zat bezelen, ýöne nirä seretjegiňi bilmeýärsiň.

Adaty professional interfeýs: 1 esasy reňk, 1 aksent (üns çekmek), galanlary neýtral.

Çit kod: Reňki diňe möhüm zatlar üçin sakla - düwmeler, duýduryşlar, statuslar.

Hemme zat ýalpyldap dursa, hiç zat tapawutlanmaýar. Ulanyja esasy zada üns jemletmek kyn bolar.

6. Iýerarhiýany aýdyň et

Ulanyjy interfeýsi okamaýar. Ol oňa göz aýlaýar. Ýagny diňe skanirläp çykýar. Üç sekunt - şondan artyk däl.

Iýerarhiýany näme bilen döredýärsiň? Ölçeg, reňk, galyňlyk, boşluk, kontrast.

Çit kod: “Gözüňi süzüp seret” usuly. Gözüňi ýarym ýumup dizaýna seret. Iň esasy element henizem tanalýan bolsa - işiň ugruna barýar dost.

7. Düwme (button) düwme ýaly görünsin

Ulanyjy “bu basylýarmyka ýa ýöne ýazgymyka?” diýip pikirlenýän bolsa, sen eýýäm ol ulanyjyny ýitirdiň.

Erbet düwme adaty tekst ýaly görünýär. Gowy düwmede kontrast, içki boşluk we anyk şekil bar.

Çit kod: Her düwmäniň dört ýagdaýyny çyz - adaty, hover (syçanjygy üstüne eltende oýanýan), basylan, işjeň däl. Ownuk zat, ýöne hili göze görnetin ýokarlandyrýar.

8. Ikonkalar teksti çalyşmaýar, oňa kömek edýär

Şesterýonka ikonkasy näme aňladýar? Sazlamalar? Parametrler? Gurallar? Ýa-da ussahana?

Kim bilýär.

Çit kod: Mümkin bolsa ikonka bilen ýazgyny bile ulan. Bu düşnüksizligi aýyrýar we elýeterliligi gowulandyrýar.

9. Boş ekranlary hem çyz

Dizaýnerler köplenç ähli zadyň gowy bolan ýagdaýyny çyzýarlar. Hakyky durmuşda welin maglumat ýok, hat ýok, netije ýok, 404 error ýaly zatlar bolup durýar.

“Maglumat tapylmady” ýazgysy bilen goýberilen ekran döwlen ýaly duýulýar.

Çit kod: “Tabşyryk ýok” diýmegiň ýerine “Heniz tabşyrygyň ýok. Ilkinjisini döredip başla” diýip ýaz.

Şu bir setir täze ulanyjyny alyp galýar.

10. Mikrointeraksiýalar interfeýsi janlandyrýar

Düwmäniň jogap bermegi, ýüklenme animasiýasy, üstünlik gazandyň belgisi - şular ownuk zatlar, ýöne interfeýsi diri edýär.

Çit kod: Animasiýalary 150–300 millisekunt aralygynda sakla. Çalt animasiýa tebigy duýulýar. Haýal animasiýa bolsa internetiň haýal ýaly duýulýar - ulanyjy günäni saňa däl-de, öz aragatnaşygyna atýar. Ýöne muňa begenmeli däl. Gider, gaýdyp gelmez.

Gowy dizaýn ýalpyldawuk suratlardan ybarat däl. Ol düşnüklilik, amatlylyk we oýlanyşykly kararlar.

Şu 10 çit koduň diňe üçüsini ulanyp gör. Dizaýnyň şobada has tertipli görner.

Köpüsi bary-ýogy birnäçe minut alýar.

Proýektiň bar bolsa, aç-da, birini synap gör. Haýsysynyň iň uly tapawut döredenini görersiň.