8pt: n materiaalisuunnittelun GUI-mallit

Käytä Design Inc.: n visuaalista suunnittelua ja perustietoja

Kahdeksan..8, 16, 24, 32, 40, 48, 56, 64, 72, 80, 88, 96. Nämä numerot kulkevat pääni läpi yöllä. Olen käyttänyt 8pt-pohjaista alusta lähtien Android Autossa ja nauttinut keskeisten materiaalisuunnittelumenetelmien soveltamisesta Design Inc. -käyttöliittymiin. Viime viikolla viikoittaisessa UNDO-näyttelyssämme suunnittelija Danaan Clarke kysyi 8pt: n ruudukosta ja siitä, onko meillä kokemusta siitä. Olen aina ”närännyt” muotoilua tukevaa rakennetta ja ajatellut, että olisi hauskaa jakaa joitain “kulissien takana”.

1. Perustason ruudukko

Ensimmäinen ja tärkein vaihe on varmistaa asiakirjaruudukon ydinrakenne. Voit määrittää ruudukon arvot siirtymällä Näkymä> Kangas> Ruudukkoasetukset…

Google Material -suunnittelutiimi tekee hienoa työtä määrittelemällä menetelmän, jolla tämä perustaso vaikuttaa ydinliittymän muun tyyppisten elementtien arvoihin. Kaikki navigointipalkkeista, typografiasta, avainlinjoista, välimatkoista ja minimitavoitekohdista toiminnoille on rakennettu tämän perustason ympärille. Lisäisin lisää tähän, mutta seuraan tätä opasta melko tarkasti. Jos se ei ole rikki, älä korjaa sitä.

Lähde: Google Material Design: https://material.io/guidelines

2. Asemallimallit

Seuraava vaihe on määritellä sarakejärjestelmä asetteluille eri näytöillä. Yritän pysyä varovaisena kangaskokoissani, mutta yritän aina käyttää 4, 8 tai 16 sarakkeen ruudukkoa, jonka kouru on 8pt (tai mikä tahansa sen kertoin). Pystysuorien rytmien suhteen minulla on yksinkertainen toistuva 48pt: n ruudukko. Voit määrittää asetteluarvot siirtymällä Näkymä> Kangas> Asetteluasetukset…

Alla on yksinkertainen esimerkki siitä, kuinka hyödynnän pylväsruudustani (8 saraketta, 16pt: n kouru), perustason mittareita (8pt) ja pystysuuntaista rytmiä (48pt) uudelle suositellulle käyttöliittymälle, jonka lähetimme tällä viikolla.

3. Kuvakkeet

Kuvakkeet ovat valtava osa sitä, että perustason ruudukko toimii oikein käyttöliittymän kautta. Tämän täydellisyyden saamiseksi on paljon hankalaa matematiikkaa, mutta jos se tehdään oikein, kuvakkeesi eheys säilyy näytön tiheysalueella (verkkokalvo, 1x, 2x, MDPI – XXXHDPI… jos tämä ei ole järkevää lukea tätä) . Heidän avain kuvakkeiden suorittamiseen tällä tavoin on varmistaa, että kaikki muodot, vedot ja marginaalit ovat "tasaisia" (2, 4, 6, 8), joten sinulla on keskitetty kuvake 24 x 24pt: n alueella, joka pystyy kerrotaan myös (x2, x3, x4) ja skaalataan tasaisesti.

https://material.io/guidelines/style/icons.html#icons-system-icons

Siellä on myös tonni ilmaisia ​​kuvakejoukkoja, jotka on jo suunniteltu sopimaan 8pt: n perustasoon. Materiaalisuunnittelulla on jälleen kerran hämmästyttäviä resursseja tähän, mutta voit suunnitella oman. Alla on kuva siitä, kuinka indeksoin kaikki kuvakkeet graafisen käyttöliittymän ydinmalliin.

4. GUI-rakenne

Ei ole oikeastaan ​​mitään määrääviä sääntöjä siitä, kuinka näitä oppaita luodaan parhaiten, mutta nämä asiakirjat ovat totuuden lähde, joka antaa minulle (ja toivottavasti teknisille kollegoilleni) mielenrauhan. Tavoitteena on, että jokaisesta ydinkomponentista on pikselitäydellinen versio kaikki samassa asiakirjassa, joten jokaista näyttöä ja sovelluksen tilaa ei tarvitse piirtää tuotantoa varten. Verkossa on paljon hienoja esimerkkejä ja resursseja, joihin viitata, mutta jos haluat aloittaa tyhjästä, voit ladata perustiedostoni määritetyllä ruudukolla ja sarakkeen rakenteella.

LATAA LÄHDE-TIEDOSTO

Kiitos!

Tämä viesti oli lyhyt, mutta halusi kertoa vähän prosessistani. Jos pidit siitä hyödyllistä, jaa se ystävillesi, joista olisi hyötyä. Lisäksi, jos pidit videosta, postitan myös viikoittaisen vlogin… kiitos siitä, että tilaat.

Jos tarvitset apua seuraavassa projektissasi, lisää pyyntösi Design Inc. -yhtiöön. Jos olet suunnittelija ja haluat hakea, mielellämme nähdä työsi.