UI/UX Dizaina elementu principi

Lai gan dizains var būt jautrs un aizraujošs, darbs ar dizaina elementiem un principiem tas kādam var būt neizprotams un sarežģīts. Šajā rakstā jūs izpētīsiet dizaina elementus un principus, lai iegūtu dziļāku izpratni par to izmantošanu.

Līnijas

Līnijas ir jebkuras lineāras atzīmes, tāpēc, ja padomājat, līnijas ietver gandrīz visu. Tajās ir pat iekļauti vārdi un burti, ko lasāt un kas sastāv no tūkstošiem izliektu, leņķisku un taisnu līniju. Līnijas var vadīt arī konkrētas idejas. Piemēram, taisnas līnijas var paust kārtību un kārtīgumu, viļņotas līnijas var pārraidīt kustību, bet zigzagveida līnijas var nodot spriedzi vai satraukumu. Vadošo līniju izmantošana fotogrāfijā ir izplatīta tehnika. Spēcīgu vadošo līniju atrašana un akcentēšana rakstā var palīdzēt pievērst skatītāja uzmanību visam rakstam vai noteiktām jomām.

Mērogs

Mērogiem ir svarīga loma dizainā, dažreiz burtiski. Mērogs ir atsevišķu elementu apzināta izmēra noteikšana to visvienkāršākajā formā. Mērogs var palīdzēt jums izprast dizainu un attēlus. Tomēr mērogam ne vienmēr ir jābūt reālistiskam. Lai radītu satriecošus efektus un norādītu, kuras jūsu dizaina daļas ir svarīgākas un mazāk svarīgas. Varat dramatiski izmērīt elementus — lielus vai mazus.

Krāsa
Krāsa ir būtiska dizainā. Krāsa rada noskaņas, atmosfēru un emocijas. Katram tonim ir arī savas konotācijas. Īsāk sakot, krāsa var padarīt vai sabojāt jūsu dizainu.

Atkārtojums
Padomājiet par jebkuru labi pazīstamu zīmolu. Esmu pārliecināts, ka jūs visi atceraties viņu logotipu, vispārējo atsauces toni un vispārīgās krāsu shēmas. Kāpēc šīs lietas ir tik neaizmirstamas? Jūs uzminējāt: atkārtojums!

Runājot par zīmola dizainu, atkārtošana ir būtiska, lai jūsu zīmols būtu konsekvents un sasaistītu preces.

Negatīvā telpa
Negatīvā telpa ir “telpa starp” vai zona starp vai ap citiem elementiem, kas veido savu formu.

Ja to izmanto stratēģiski un gudri, negatīvā telpa var palīdzēt radīt patiesi satriecošus un gudrus dizainus.

Simetrija
Ir zinātniski pierādīts, ka cilvēkus piesaista simetrija. Mēs uzskatām, ka simetriskas sejas, raksti un dizaini ir pievilcīgāki, efektīvāki un skaistāki. Simetrija ne vienmēr ir katra dizaina izvēle. Tā vietā, lai mēģinātu panākt perfektu simetriju, mēģiniet savā dizainā ieviest smalkus simetrijas elementus. Izmantojot simetriju, izkārtojumā var radīt līdzsvara un kārtības sajūtu.

Pārredzamība un caurspīdīgums

Caurspīdība, kas pazīstama arī kā “necaurredzamība”, attiecas uz elementa “caurredzamību”. Jo mazāka ir necaurredzamība, jo vieglāks un mazāk pamanāms elements, un jo lielāka necaurredzamība, jo cietāks ir elements.

Tekstūra
Tekstūra var pievienot jūsu dizainam taustes, dziļuma un vēsus efektus.

Varat izveidot savam dizainam atšķirīgu gabalu, kas izcelsies no pūļa, ņemot vērā faktūru un to, kā jūsu dizains burtiski un taustāmi jūtas.

Līdzsvars
Līdzsvars nodrošina, ka neviens elements nepārspēj citu.

Viens no līdzsvara apgūšanas paņēmieniem ir iedomāties, ka katram elementam ir “svars”. Apsveriet katra elementa izmēru, formu un “svaru” attiecībā pret citiem lapas elementiem, sākot no teksta lodziņiem, attēliem un krāsu blokiem.

Hierarhija
Vissvarīgākās lietas jūsu lapā ir virsraksti un virsraksti. Tie atrodas hierarhijas skalas augšgalā, un tiem tiek pievērsta vislielākā uzmanība. Tālāk mums ir apakšvirsraksti, citāti un papildu informācija. Pārvilkšanas citāts ir neliela teksta daļa, kas iegūta no raksta vai grāmatas un citēta citā formātā. Pārliecinieties, ka tie ir pievilcīgi un pamanāmi, bet ne tik pamanāmi kā virsraksti. Jūsu dizaina elementi, kuriem tiek piešķirts vismazākais vizuālais šarms, ir tādas lietas kā pamatteksta kopija, mazāk svarīga informācija, saites un tā tālāk. Hierarhija neapstājas ar tipu. Attēliem ir arī hierarhija. Jūsu attēla elementiem, kas ir lielāki, krāsaināki vai centrālāki, būs augstāka hierarhija nekā tiem, kas ir mazāki, blāvāki vai mazāk detalizēti.

Kontrasts
Kontrasts bieži vien ir maģiska, galvenā sastāvdaļa, lai padarītu jūsu dizainu “populāru” vai izcilu.

Kontrasts tā visvienkāršākajā formā ir atšķirības pakāpe starp diviem jūsu dizaina elementiem. Kontrasta piemēri ir tumšs pret gaišo, biezs pret plānu, liels pret mazu un tā tālāk. Kontrasts būtiski ietekmē lasāmību un salasāmību. Kontrasts ir vairāk nekā tikai stilistisks elements vai salasāmības uzlabotājs; to var arī izmantot, lai pievērstu uzmanību konkrētiem jūsu dizaina elementiem. Dizaineri bieži izmanto šo paņēmienu vietņu dizainā. Tāpēc izmantojiet kontrastu, lai padarītu savus dizainus vizuāli “izcilākus” vai izceltos, pievēršot uzmanību konkrētiem dizaina elementiem, piemēram, pogām “aicinājums uz darbību”, kas ir apmeklētājam dotas instrukcijas, lai mudinātu viņus rīkoties. “call-to-action” var būt tikpat vienkārša kā “zvaniet mums tūlīt”, “uzziniet vairāk” vai “abonējiet mūsu biļetenu”.

Rāmis
Pareiza dizaina kadrēšana ir tikpat svarīga kā fotogrāfiju un mākslas darbu ierāmēšana. Padomājiet par kadrēšanu saistībā ar fotografēšanu — ko jūs iekļaujat, izslēdzat un tā tālāk. Tomēr ierāmēšana ir tikpat nepieciešama dizainā.

Varat izmantot kastes kontūras vai grafiskos elementus, lai uzlabotu vai pievērstu uzmanību konkrētiem sava dizaina elementiem. Rāmis pievērš uzmanību detaļai un vērš uzmanību uz svarīgākajām daļām.

Režģis
Padomājiet par dizaina režģi, kas būtu mājas pamats; tas ir nepieciešams pirmais solis, lai jūs varētu izveidot funkcionālu un skaistu galaproduktu. Tas norāda būvētājam vai projektētājam, kur atsevišķi elementi ir jāizvieto, kam jāsaskaņo ar ko un sniedz arī vispārīgu izklāstu.

Režģi ir svarīgas, bet bieži neredzētas gandrīz jebkura dizaina sastāvdaļas. Tie sastāv no noteikta skaita rindu un kolonnu, pret kurām varat līdzināt savus elementus. Režģi var palīdzēt uzturēt saturu sakārtotu, kārtīgu, salasāmu un vizuāli pievilcīgu. Tāpēc sāciet ar režģi, kas ir piemērots jums un jūsu dizainam, un virzieties uz augšu.

Virziens
Acs virziens un kustība pa lapu ir svarīgi daudzu dizainu aspekti; to sauc arī par “plūsmu”. Kā tavas acis šķērso lapu? Vai jūsu lasītāji zina, ko meklēt tālāk? Vai ceļš, ko viņu acis iet, ir loģisks?

Diagramma, kas attēlo dizaina skatu punktus

Ir veikti vairāki pētījumi, lai noteiktu precīzu mūsu acu kustību ieradumu raksturu un modeļus, ko mūsu acis izseko, skatoties konkrētus objektus. Noklikšķiniet uz tālāk esošās saites, lai izpētītu Nielsen Norman Group acu izsekošanas pētījumu, kurā tika izsekots cilvēku skatiens tīmekļa lapu skatīšanas laikā, lai noteiktu to lietošanas paradumus.

https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content-discovered/

Saskaņā ar pētījumu, parasti acs modelis ir “E” vai “F”. Tāpēc, iespējams, vislabākais veids ir ievietot galveno saturu pa kreisi vai augšpusē. “Z” forma ir vēl viens izplatīts modelis, kam seko acs.

Vispārējā ideja ir tāda, ka acs dabiski pārvietojas ar “slaucīšanas” kustību no augšējā kreisā stūra uz apakšējo labo stūri. Šo teoriju vislabāk izskaidro Gūtenberga diagramma. Noklikšķiniet uz tālāk esošās saites, lai detalizēti izlasītu šo teoriju.

https://3.7designs.co/blog/2009/01/03/the-gutenburg-diagram-in-design/

Tā vietā, lai izstrādātu tikai šos modeļus, mēģiniet pielāgot savu dizainu plūsmu un virzienu katrā gadījumā atsevišķi. Vienkārši paturiet prātā, ka acs ir vērsta uz lapas augšējo kreiso stūri un virzās uz leju.

Noteikumi
Šī ir tēma, kas noteikti izraisīs karstas debates un sadalīs jebkuru dizaineru telpu, viena puse paziņo, ka dizainā nav noteikumu, bet otra apgalvo, ka to ir daudz. Tehniski abi ir pareizi. Tāpat kā ar jebkuru prasmi, ir lietas, kas jāapgūst, un tām ir vispārīgas vadlīnijas. Pārliecinieties, vai jūsu veids ir salasāms, iemācieties atdalīt (pielāgojiet atstarpi starp atsevišķiem burtiem vai rakstzīmēm), izvairieties no pikseļu attēlu izmantošanas un tā tālāk. Tie ir dizaina pamati, elementi, kas palīdz izveidot pamata dizainu. Tomēr, kā daudzi apgalvo, kad esat iemācījušies šos noteikumus, ir pienācis laiks tos pārkāpt. Gan noteikumu ievērošanai, gan pārkāpšanai ir sava vieta dizaina pasaulē.

Dziļums

Dizaina pasaulē dziļums ir būtisks un aizraujošs princips. Jūs varat radīt dziļuma sajūtu un ilūziju, ka jūsu dizains sniedzas tālāk par otro dimensiju, pat izmantojot visplašāko mediju. Ir daudz paņēmienu, kā paziņot par jūsu dizaina dziļumu; apskatīsim dažus. Pirmkārt, ir ēnas, kas, iespējams, ir vispazīstamākā tehnika. Ēnas ir sarežģītas, jo tām ne vienmēr ir lineāra forma, jo tās var izstiepties, saliekties, deformēties un sašķiebties. Tātad reālās pasaules ēnu novērošana un skatīšanās, kā gaisma dažādos punktos ietriecas dažādos objektos, ir labs paņēmiens ēnu lietojuma izpētei.

Atsevišķu elementu pārklāšanās ir vēl viens paņēmiens. Tas samazina dizaina plakano izskatu un padara to slāņainu, ar dažādiem līmeņiem un līmeņiem. Vēl viens paņēmiens ir eksperimentēt ar perspektīvu, kas bieži vien piešķir elementiem “3-dimensiju vai 3D efektu”. Varat radīt ilūziju par noteiktu elementu izcelšanu no lapas, pielāgojot to perspektīvu, radot tūlītēju dziļumu. Spektra otrā galā varat samazināt dizaina dziļumu. Šis ir nesen populārs stils, kas pazīstams arī kā “plakans dizains”.

Sastāvs
Kompozīcija ir lieliska vieta, kur nobeigt, jo tas savieno visus citus iepriekš apspriestos principus.

“Kompozīcija” attiecas uz kopējo elementu izkārtojumu jūsu dizainā, kas izklausās nedaudz garlaicīgi, ja to skaidro šādi, taču tas ir viens no patīkamākajiem dizaina aspektiem. Šeit varat eksperimentēt un padarīt labu dizainu vēl labāku.

Noslēgumā

Šo principu pielietošana palīdzēs jums izveidot mērķtiecīgu dizainu, nodrošinot funkciju katram kompozīcijas elementam. Skaidra vēstījuma paziņošana attiecas ne tikai uz pašu ziņojumu, bet arī uz to, kā jūs to veicat, lai to skaidri nodotu.

Apsveriet šos principus un to, kā tie tiek piemēroti nākamreiz, kad skatāties dizaina kompozīciju. Jūs varēsiet atšifrēt pat vissarežģītākos dizainus un saprast, kas darbojas un kas ne.