Figma UI/UX Režģu izveide planšetdatoriem un mobilajām ierīcēm

Planšetdatoru un tālruņu režģi
Turpinot iepriekšējo rakstu sēriju par UI/UX dizaina izstrādi, izveidosim planšetdatoru un tālruņu režģus.

Vienā no iepriekšējiem rakstiem jau pastāstīju, kā izveidot bezmaksas Figma kontu, tāpēc šeit neatkārtošos, sāksim ar to ka atveram savu Figma kontu un sākam no tukšas darba zonas…

Lai sāktu veidot jaunu režģi, nospiediet F uz tastatūras, lai labajā sānjoslā atvērtu rāmja izvēlni. Pēc tam atveriet planšetdatora izvēlni un atlasiet iPad mini.

Atlasiet darbvirsmas rāmi un virziet peles kursoru tieši pa kreisi no režģa ikonām. Tiek parādīta “sviestmaižu” kaudzes ikona. Tagad varat nospiest taustiņu Ctrl vai Shift uz tastatūras un noklikšķināt uz tā, lai atlasītu režģi, un pēc tam kopēt un ielīmēt to planšetdatora rāmī.

Tādējādi visa režģa sistēma tiek iekļauta planšetdatora rāmī. Iespējams, jūs sev uzdodat jautājumu: kā jūs veidotu planšetdatora izkārtojumu ar tik mazām kolonnām? Tātad, mainīsim 12 kolonnu režģi uz 8 kolonnu. Tagad ir daudz vairāk elpošanas telpas.

Jūsu režģis ir gatavs, lai jūs varētu sākt projektēšanu. Tālāk izveidosim savu tālruņa režģa sistēmu, veicot tās pašas darbības. Jums vajadzētu sākt, izvēloties tālruņa rāmi.

Pēc tam nokopējiet režģi un mainiet kolonnu uz 4 kolonnu režģi un mainiet piemaļu uz 20.

Tagad esat izveidojis horizontālu un vertikālu atsaucīgu režģa sistēmu. Varat arī izstiept šos rāmjus, un tie attiecīgi tiks mērogoti. Tas ir tikai sākuma punkts. Režģi var kļūt uzlaboti, jo iegūstat detalizētāku informāciju par konkrētām ierīcēm. Tomēr tas ir pietiekami labs, lai palīdzētu jums sākt savu pirmo atsaucīgo projektu.

Paslēpt režģi

Ja vēlaties skatīt rāmi bez režģa sistēmas, noklikšķiniet uz tālummaiņas procenta ekrāna augšējā labajā stūrī. Tiks atvērta izvēlne Skata iestatījumi, kurā ir iespēja ieslēgt vai izslēgt režģus. Varat arī izmantot īsinājumtaustiņus, lai izslēgtu izkārtojuma režģus. Mac datorā tā ir Command G, bet operētājsistēmā Windows — Control Shift 4. Atkārtojot to pašu komandu, tiks parādīts režģis.

UI konsekvence

Ja jūsu mērījumi atbilst tiem pašiem noteikumiem, jūs automātiski iegūstat konsekventāku lietotāja interfeisu. Lai uzlabotu konsekvenci, varat mainīt virzīšanas rekvizītus, lai tie būtu saskaņoti ar 8 punktu režģi. Pabīde ir tas, cik daudz jūs varat pārvietot rāmja slāņus, izmantojot bulttaustiņus. Ir divu veidu grūdieni: mazi un lieli. Nelielais virziens ļauj pārvietot slāni par 1 pikseļa soli, izmantojot tastatūras bulttaustiņus. Lielajam pamudinājumam var piekļūt, izmantojot pārslēgšanas un bulttaustiņus. Pēc noklusējuma Figma to ir noteicis 10 pikseļos.

Mainīsim to uz 8 punktiem. Tāpēc atlasiet preferences no Figma ikonas augšējā kreisajā stūrī un noklikšķiniet uz Pabīdīšanas daudzums, lai iestatītu lielo pabīdīšanas vērtību uz 8 punktiem. Jūs esat gatavs izpētīt vairāk režģu izveidi un darbu ar nudge īpašumu.

Režģa sistēmas

Katra tīmekļa lapa sastāv no kvadrātiem un taisnstūriem. Un tie atrodas aptverošā režģa izkārtojumā. Šie kvadrāti un taisnstūri:

• Sakārto lapas saturu
• Izveido izlīdzinājumu un kārtību
• Izveido lietotāja interfeisa pamatstruktūru

Režģa sistēma ir lietotājam neredzamu līniju un kolonnu struktūra, kas satur kopā tīmekļa lapas dizaina elementus un saturu. Tie nodrošina dizainu ar konsekventu ritmu un ierobežo lēmumu pieņemšanu.

Tie sastāv no:

• Kolonnas
• Rindas
• Gutters “caurules”
• Moduļi
• Piemales / Margins

Kolonnas

• 12 uz darbvirsmas,
• 8 planšetdatorā un
• 4 mobilajā ierīcē.

Lielākajai daļai režģu kolonnu platums ir 60–80 pikseļi.

Kolonnu attēls

Rindu attēls

Caurule

Caurule ir negatīvā atstarpe starp kolonnām. Parastais caurules izmērs ir 20 pikseļi.

“Caurules” attēls

Moduļi vai satura moduļi

Rindu un kolonnu krustojums rada telpas vienības. Katrs dizaina elements (teksts, attēli, pogas utt.) iekļaujas moduļos.

Malas, piemales (apmales)

Piemale ir negatīvā atstarpe starp ārējās kolonnas malu un rāmi.

Apmales attēls

Režģu veidi

Bloku režģi

Bloku režģi ir vienkāršākā režģa struktūra, liels taisnstūra laukums aizņem lielāko daļu vietas formātā. Tie sastāv no vienas kolonnas, kurā var būt vai nu viens elements, vai vairāki elementi, kas izvietoti vertikāli un ko ieskauj piemales. Tos izmanto nepārtrauktiem teksta blokiem vai lieliem pilna platuma attēliem, piemēram, vāka vai varoņu attēliem.

Kolonnu režģis: sadalīts, tomēr vienāds

Kolonnu režģi ir visizplatītākais režģis, ko izmanto grafiskie un tīmekļa dizaineri. Tie sastāv no vairākām kolonnām, kuras galvenokārt izmanto, lai sakārtotu vairākus elementus kolonnās.

Tradicionāli kolonnu platums dizaina sistēmā nemainās, bet kolonnu skaits mainās:

• 12 galddatorā
• 8 planšetdatorā 
• 4 mobilajā ierīcē.

Kolonnu režģī var būt tikai divas kolonnas, bez absolūta ierobežojuma to skaitam.

Moduļu režģis: perfekta simetrija

Tas palīdz vienlaikus prezentēt vairākus vienumus, lai tiem būtu viegli piekļūt, ja tīmekļa dizainā ir jāsakārto vairāki elementi. Mobilo tālruņu sākuma ekrāni, kuros tiek parādīta visa lietotņu kolekcija, vai e-komercijas vietnes, kuru kategoriju lapās tiek rādītas krājumu kolekcijas, ir izplatīti moduļu režģu lietošanas gadījumi.

Hierarhiskie režģi

Hierarhiskie režģi tiek aprakstīti arī kā “brīvstila”, kuru elementi tiek ievietoti “spontāni” starp režģa kolonnām un rindām. Tas attiecas uz jebkuru neregulāru režģi, kas atbilst īpašām satura vajadzībām.

Pamatlīnijas režģi

Pamatlīnijas režģi tiek izmantoti, lai konsekvences labad iestatītu sākumu no vienas teksta rindiņas uz nākamo. Tie ir vieglāk organizējami, rada vertikālu ritmu un ir estētiski patīkami. Papīra loksne ar līniju, tāpat kā jūs, iespējams, ko izmantoja skolā, ir vienkāršs bāzes līnijas režģa piemērs.

Režģu nozīme

Režģi palīdz veidot un sakārtot tīmekļa dizainu. Jūs nezinātu, kur likt savus dizaina elementus, ja jums to nebūtu. Mums tie ir nepieciešami, lai radītu labu lietotāja pieredzi, lai lietotājs varētu pārvietoties vietnē un atrast vajadzīgo. Režģi ir noderīgi arī atsaucīgā dizainā. Lai gan galvenās lapas datorā var izmantot vairākas slejas, lai aptvertu tekstu un attēlus, noformējumam jābūt pietiekami elastīgam, lai planšetdatorā būtu 2–3 kolonnas un mobilajā ierīcē 1 kolonna. Mobilais režģis ir sakrauts kā 1 kolonnas moduļu režģis.

Norādījumi režģu lietošanai

Tagad apskatīsim, kā tīmekļa dizainā izmantot režģus.

Pirms sākat projektēšanu, apsveriet režģi
Izveidojiet režģi savai galvenajai lapai pēc tam, kad esat veicis izpēti un, iespējams, pat kādu zemas precizitātes ietvaru uz papīra. Tas ir vienpakāpes process. Pēc pabeigšanas jums vairs nebūs par to jādomā visās nākamajās galvenajās lapās. Apsveriet režģi, pirms sākat projektēšanu, nevis atstājiet to līdz beigām un mēģiniet ievietot savu dizainu režģī. Ja nepieciešams, nebaidieties novirzīties no režģa. Jaunie dizaineri var justies ierobežoti, izmantojot režģi, taču viņiem nevajadzētu. Pēc režģa izveides var izjaukt!

Nebaidieties no tukšas vietas
Tīmekļa dizainā ir ļoti svarīgi līdzsvarot atstarpes un negatīvo atstarpi. Nejūtieties par pienākumu aizpildīt visas pieejamās vietas galvenās lapas dizainā. Apsveriet iespēju izmantot lielas piemales un veselīgu atstarpi starp satura sadaļām, lai dotu lietotājam iespēju atvilkt elpu un apstāties, ritinot jūsu vietni.

Apsveriet iespēju izmantot 960 režģa sistēmu
960 Grid System ir mēģinājums vienkāršot tīmekļa izstrādes darbplūsmu, nodrošinot bieži lietotos izmērus, pamatojoties uz 960 pikseļu platumu. Ir divas iespējas: 12 kolonnas vai 16 kolonnas.

960 režģis ir sakārtots šādi:

• Kopējais platums ir 960 pikseļi.
• Izmantojiet ne vairāk kā 12 kolonnas, katras 60 pikseļus platas.
• Lai kopējais noteku attālums būtu 20 pikseļi, izmantojiet 10 pikseļu atstarpi pa kreisi un pa labi no katras kolonnas.
• 940 pikseļi ir kopējais satura apgabals.

12 kolonnu režģa sistēma nodrošina lielu elastību. Šis ir piemērs tam, kā 12 kolonnu režģi var izmantot, lai pievienotu saturu 3 kolonnu izkārtojumam. Jo vairāk izmantosit režģi, jo vairāk sapratīsit, ka tas ir ceļvedis, kas var palīdzēt izveidot labāku un ātrāku dizainu.

Nobeigumā…
Pārlūkojot internetu, neatkarīgi no tā, vai maksājat komunālo pakalpojumu rēķinu vai ritinot sociālos saziņas līdzekļus, pievērsiet uzmanību pamata tīklam. Kāda veida režģi izmanto dizainers? Vai viņi to izmantojuši, lai radītu pieredzi? Jo vairāk novērojat, kā dažādās vietnēs tiek organizēts saturs, jo vairāk pamanīsit, cik veiksmīgs vai neveiksmīgs ir režģis. Ievērojiet un pielietojiet apgūto, lai izveidotu labāku vietņu dizainu.