desyatykh 11 mars 2015 në orën 5:08 pasdite

Dizajni i materialit: Deri në Hënë dhe mbrapa

• Blogu i kompanisë Redmadrobot,
• Zhvillimi i aplikacionit celular,
• Zhvillimi i Android

• Tutorial

"A është vërtet i nevojshëm ky dialog i mërzitshëm?"

Në këtë artikull, unë përshkrova parimet kryesore të Dizajnit të Materialeve dhe dhashë këshilla se si t'i zbatoni ato. Teksti u shkrua në vazhdën e një master-klase për zhvilluesit, të cilin ne, Robots, e organizuam së bashku me zyrën ruse të Google (Think Mobile).

Njëherë e një kohë, të gjitha produktet e Google dukeshin keq në mënyra të ndryshme. Edhe një produkt dukej i paqëndrueshëm në platforma të ndryshme.

Gjithçka filloi të ndryshojë në vitin 2011, kur Google filloi të punonte shumë për të unifikuar pjesën vizuale të ekosistemit të produkteve të saj dhe e quajti atë Project Kennedy.

Çfarë lidhje ka Kennedy me të?

Legjenda është kjo: Presidenti Kennedy inicioi programin për të fluturuar një njeri në Hënë (nëse besoni se ky fluturim ka ndodhur ndonjëherë). Dhe shefi i madh në Google, Larry Page, pohon parimin se nuk ka kuptim të përmirësohen produktet me 10% - ato duhet të jenë 10 herë më të mira se ato të konkurrentëve. Nëse do të lëshoni një produkt, atëherë shkoni direkt në Hënë. Edhe këtu u vendos që të ribëhej rrënjësisht gjithçka.

Rezultati preku kryesisht ueb-in, por gjithashtu preku disa produkte celulare. Në të njëjtën kohë, po zhvillohej një punë e veçantë për hartimin e Android - Holo, i cili zëvendësoi ndërfaqet jo shumë të këndshme estetikisht të Android-it të vjetër.
Por kishte një problem: Holo ishte akoma ndryshe nga Projekti Kennedy.


Përdoruesit duhej të përshtateshin me ndërfaqen e re kur ndërronin, të mësoheshin me pamjen, paraqitjen e kontrolleve etj.
Prandaj, në një moment, një grup stilistësh nga pjesë të ndryshme të Google u mblodhën dhe filluan të luftojnë me këtë problem për ta zgjidhur një herë e përgjithmonë.

Në vitin 2014, në konferencën I/O, u prezantua një sistem i ri dizajni, një qasje e quajtur Material Design. Sistemi i ri i dizajnit ju lejon të krijoni një përvojë të qëndrueshme të përdoruesit në të gjitha ekranet: desktop, smartphone, tablet, orë, TV, makina. Për aplikacionet Android, Material Design është një evolucion i gjuhës vizuale dhe udhëzimeve të dizajnit të Holo. Në shumë mënyra, është një sistem më fleksibël, i projektuar me shpresën se dizajnerët e tjerë do ta përdorin atë - Google ishte vetëm përdoruesi i parë.

Material Design ju lejon të merrni një qasje më objektive për marrjen e vendimeve të projektimit: si duket diçka, si funksionon diçka, si bëhet animacioni, etj. Ai vendos kufij të arsyeshëm, por jo kufizime të panevojshme.

4 Parimet e Dizajnit të Materialeve

Dizajni i materialit bazohet në katër parime kryesore:

1. Sipërfaqet e prekshme. Në Material Design, ndërfaqja përbëhet nga shtresa të prekshme të të ashtuquajturës "letër dixhitale". Këto shtresa janë të vendosura në lartësi të ndryshme dhe hedhin hije mbi njëra-tjetrën, gjë që i ndihmon përdoruesit të kuptojnë më mirë anatominë e ndërfaqes dhe mënyrën se si ndërveprojnë me të.
2. Dizajni i printimit. Nëse i mendojmë shtresat si copa "letër dixhitale", atëherë kur bëhet fjalë për "bojë dixhitale" (gjithçka që përshkruhet në "letër dixhitale"), përdoret qasja e marrë nga dizajni grafik tradicional: për shembull, revista dhe posteri. dizajni.
3. Animacion kuptimplotë. Në botën reale, objektet nuk shfaqen nga askund dhe nuk zhduken në askund - kjo ndodh vetëm në filma. Kjo është arsyeja pse në Material Design ne jemi vazhdimisht duke menduar se si të përdorim animacionin në shtresa dhe bojë dixhitale për t'u dhënë përdoruesve sugjerime se si funksionon ndërfaqja.
4. Dizajn përshtatës. Bëhet fjalë për mënyrën se si ne i zbatojmë tre konceptet e mëparshme në pajisje të ndryshme me rezolucione dhe madhësi të ndryshme ekrani.

Pra, le të ecim me radhë.

Sipërfaqet e prekshme

Le të fillojmë me sipërfaqet e prekshme. Këto janë të njëjtat pjesë të "letrës dixhitale" që, ndryshe nga letra e zakonshme, kanë superfuqi - ato mund të shtrihen, lidhen dhe ndryshojnë formën e tyre. Përndryshe, ata sillen në përputhje të plotë me ligjet e fizikës dhe legjislacionin e Federatës Ruse.

Sipërfaqe

Çfarë është një sipërfaqe? Në thelb është një "enë" me një hije dhe asgjë tjetër. Por kjo është mjaft e mjaftueshme për të dalluar një objekt nga një tjetër dhe për të treguar se si ndodhen ato në lidhje me njëri-tjetrin. Filozofia e dizajnit të materialit përpiqet për thjeshtësi dhe dizajn "të pastër".

Nuk ka nevojë të shkoni shumë larg dhe të përdorni teksturë ose të aplikoni gradient për të përshkruar chiaroscuro. Nuk ka nevojë të jepni vetitë vizuale të lëkurës si ajo e derës së banesës së gjyshes - një hije e pastër mund të shprehë shumë. Por çdo sipërfaqe ka lartësinë e vet - një vendndodhje në boshtin Z. Dhe secila prej sipërfaqeve hedh një hije në fund, ashtu si në botën reale.

Thellesi

Në "dizajnin e sheshtë" tradicional, hije të tilla shmangen si çdo manifestim i vëllimit, por ato kryejnë një funksion të rëndësishëm për të treguar strukturën dhe hierarkinë e elementeve në ekran. Për shembull, nëse ngritja e një elementi është më e madhe, atëherë hija e tij është më e madhe. Kjo thellësi e rritur ndihmon në përqendrimin e vëmendjes së përdoruesit në gjërat kritike dhe ta bëjë këtë me hijeshi.

Thellësia gjithashtu ofron të dhëna rreth ndërveprimit. Këtu, ndërsa përdoruesi lëviz, shiriti i gjelbër ngjitet në shtresën e sipërme dhe shtohet një hije. Kjo tregon se nuk është vetëm "boja" që lëviz, por sfondi i bardhë është poshtë dhe lëviz tërësisht.

Është e rëndësishme të theksohet se thellësia ka një "fund". Supozohet se është i kufizuar nga trashësia e vetë pajisjes celulare. Kjo do të thotë, nëse në një smartphone është një centimetër nga xhami në murin e pasmë, dhe keni një kartë krediti në ndërfaqe, atëherë thjesht nuk mund ta ktheni atë - ajo do të mbështetet në xhami dhe murin e pasmë.

NB!

1. Thellësia duhet të ketë kuptim. Bëjini vetes pyetjen: "Pse është kjo dhe jo ndryshe?" Nëse nuk ka përgjigje, ka kuptim të kërkoni një zgjidhje tjetër.
2. Kujdesuni për logjistikën. Butonat lundrues, shiritat e veglave dhe kutitë e dialogut janë në një lartësi të caktuar. Ndonjëherë ata duhet të lëvizin përgjatë boshtit Z për të shmangur përplasjet kur ndodh diçka. Duhet të jeni jashtëzakonisht të kujdesshëm me këtë koreografi.
3. Nuk ka nevojë të detyrosh butonin. Butoni lundrues është një element shumë i veçantë. Shumë njerëz mendojnë se ia vlen ta shtosh atë në ndërfaqe: kjo menjëherë bëhet Dizajn Material. Por duhet të përdoret vetëm për një veprim kyç në aplikacionin tuaj. Nëse keni nevojë të mbyllni një dritare ose të konfirmoni një veprim, atëherë nuk keni nevojë të përdorni një buton lundrues. Për këtë ka edhe elementë të tjerë.
4. Jo gjithçka duhet të jetë në kartë. Nëse një objekt ka shumë forma dhe përmban shumë përmbajtje të ndryshme, atëherë një kartë është e përshtatshme. Dhe nëse jo, atëherë ndoshta do të ishte më mirë ta bëni atë me tekst të thjeshtë ose një listë tekstesh?
5. A është vërtet i nevojshëm ky dialog i mërzitshëm? Dizajnerët e Google janë përpjekur t'i bëjnë kutitë e dialogut më të mirë, por Fletët e poshtme janë akoma më të përshtatshme për shumicën e detyrave. Ka edhe Snackbars. Kutitë e dialogut nevojiten vetëm për t'i bërë një pyetje përdoruesit.
6. Përdorni zgjerimin e listës. Ky është një model i nënvlerësuar, por është mjaft material dhe e zgjidh mirë problemin.

Dizajni i printimit

Meqenëse në Material Design ne i quajmë sipërfaqet "letër dixhitale", atëherë gjithçka që vendoset në të - teksti, imazhet, ikona - shtypet me "bojë dixhitale". Dhe Material Design përdor parimet klasike të dizajnit të printimit në hartimin e ndërfaqeve.

Tipografi elegante

Në dizajnin e printimit, tipografia luan një rol thelbësor. Merrni çdo revistë dhe do të vini re se tipografia shërben dy funksione të rëndësishme. Së pari, zgjedhja dhe përbërja e fontit është një element stil-formues i markës së botimit. Së dyti, tipografia përcakton strukturën e përmbajtjes.


Ka mjaft tekst në këtë ekran. Por nëse i hidhni ikonat dhe e ktheni tekstin në blloqe gri, bëhet e qartë se struktura është mjaft e dallueshme.

Ne kemi një kokë të madhe dhe një grup elementësh më të vegjël që dallohen nga ngopja e tyre - ato më të rëndësishmet janë më të errëta. Në të njëjtën kohë, ne dallojmë qartë grupimin për faktin se disa drejtkëndësha janë të vendosur afër, dhe ka një ndarje të konsiderueshme midis blloqeve. Në përgjithësi, gjithçka është në traditat më të mira!

Përmasa e germave

Faqja e internetit google.com/design/spec ka një gamë standarde të shkronjave që mund ta përdorni me siguri. Paleta përdor fontin Roboto, por mund të zëvendësohet me fontin tuaj të nënshkrimit për të mbështetur markën. Është e rëndësishme të testoni gjithçka me kujdes, pasi interpretimi i shkronjave mund të funksionojë ndryshe në pajisje të ndryshme. Zakonisht fontet OTF performojnë më mirë se TTF.

Tipografi me kontrast

Një parim tjetër nga bota e printimit që përshtatet mirë me Material Design është tipografia e kundërta - një kontrast vërtet i dukshëm midis madhësive të shkronjave të titullit dhe tekstit të shtypjes. Është e bukur dhe thekson mirë gjënë kryesore.

Rrjetë modulare dhe udhëzues

Tani te vendndodhja e përmbajtjes në ekran. Në dizajnin e printimit, përdoren rrjeta modulare; në dizajnimin e ekranit, këto janë rrjeta më themelore me module shumë të vogla. Kështu, Material Design përdor një rrjet me një hap prej 8dp. DP është një piksel i pavarur nga dendësia, një njësi shumë e ngjashme me njësinë e pikës në iOS.

Por tipari kryesor dallues i vendosjes së përmbajtjes në përputhje me parimet e Material Design është vendosja e udhëzuesve kryesorë. Ata vendosin dhëmbëzime nga skajet e ekranit, duke strukturuar informacionin dhe duke kontrolluar shikimin e përdoruesit. Nëse jeni njohur me hartimin e botimeve me shumë faqe ose keni lexuar Tschichold, atëherë me siguri dini shumë për rrjetin dhe kufijtë dhe e kuptoni se nga vijnë këmbët.

Në fakt, ne shohim një kolonë teksti në mes dhe një diferencë të madhe në të majtë, e cila bën të mundur fokusimin në përmbajtjen kryesore dhe sigurimin e elementeve mbështetëse në margjina.

Ikonografi gjeometrike

Duke folur për ikonografinë, ikona të thjeshta janë përdorur në Android prej disa kohësh, por në Material Design ato janë bërë edhe më të thjeshta dhe miqësore. Në burimin jozyrtar materialdesignicons.com, projektuesit mund të gjejnë ikona për qëllimet e tyre dhe të kontribuojnë aty ku është e mundur.

Ngjyrë

Ashtu si në dizajnin e printimit, ngjyra është një mjet i rëndësishëm shprehjeje në dizajnin e ndërfaqes. Në Android-in e vjetër, ngjyra ishte diçka shtesë, por tani ajo luan një rol më të spikatur. Në Material Design, paleta standarde e ngjyrave të aplikacionit përbëhet nga një ngjyrë kryesore dhe një ngjyrë e theksuar.

Kryesorja përdoret për zona të mëdha si shiriti i veprimit, dhe shiriti i statusit është pikturuar në variantin e tij më të errët. Një ngjyrë më e ndritshme e theksit përdoret në pikat në kontrolle, butona, vija, tregues, etj. Një ngjyrë e theksuar është krijuar për të tërhequr vëmendjen e përdoruesit te elementët kryesorë, të tillë si një buton lundrues.

Sa ngjyrë duhet përdorur? Thekset vendosen në drejtim të pikës, në sasi të vogla. Ekziston një rregull i thjeshtë bazë për ngjyrosjen e pjesës tjetër të ndërfaqes. Kur ka shumë tekst, si për shembull një listë postash, ia vlen të lini shiritin e aplikacionit në një madhësi standarde dhe ta ngjyrosni atë për t'i lejuar përdoruesit të fokusohet në përmbajtje. Nëse nuk ka shumë përmbajtje, për shembull, një pamje e detajuar e një elementi të vetëm, një fotoje ose një kalkulator, atëherë kjo është një mundësi e shkëlqyer për të përdorur pllaka të mëdha me ngjyra - 2 ose 3 herë lartësia e shiritit të aplikacionit.

Android mbështet një bibliotekë të quajtur Palette që ju lejon të nxirrni ngjyra nga fotot. Kjo do të thotë, është e mundur të ngjyrosni në mënyrë dinamike ndërfaqen bazuar në ilustrimet e fotografive në aplikacion.

Ne bëmë një foto dhe algoritmi identifikoi 6 ngjyra me karakteristika të ndryshme prej saj:
- ka 3 ngjyra të pasura dhe 3 të heshtura;
- ato ndahen në tone të lehta, standarde dhe të errëta;
- çdo ngjyrë sfondi ka ngjyrën e saj të tekstit, e cila gjithashtu mund të përdoret.

Foto te bukura

Së fundi, ashtu si dizajni i printimit, Material Design inkurajon përdorimin e fotografisë dhe ilustrimit në të gjithë lavdinë e saj. Fotot vendosen kryesisht pa korniza, shpesh "përfundimisht". Edhe shiriti i statusit është bërë posaçërisht transparent në mënyrë që të mos ndërhyjë. Për më tepër, çdo pikë "bojë dixhitale" në ekran ka një funksion; pothuajse asgjë nuk është vetëm për dekorim.

NB!

1. Markë me kënaqësi. Google është në një pozicion më të mirë për të përdorur ngjyrat e ndezura si markë, por kjo nuk duhet parë si problem. Ju mund të zgjidhni ngjyrat nga libri i markës së korporatës dhe të përdorni logon në përgjithësi.
2. Mos harroni gërvishtjet dhe "jep pak ajër". Një rrjet bazë prej 8 dp dhe një diferencë e majtë prej 72 dp është pothuajse rregull. Lëreni që përmbajtja të jetë e mirë dhe e lirë.
3. Fotot ekspresive bëjnë diferencën. Fotografitë dhe ilustrimet janë zgjedhja jonë si mjete shprehëse.

Animacion kuptimplotë

Në botën reale, objektet nuk mund të shfaqen thjesht nga askund ose të zhduken në askund. Kjo do të shkaktonte konfuzion dhe konfuzion të njerëzve. Kjo është arsyeja pse Material Design përdor animacion kuptimplotë për të treguar saktësisht se çfarë ka ndodhur.

Shembulli 1. Animacioni tregon se kjo kartë e veçantë, kur klikohej, doli në plan të parë, u hap dhe më shumë informacion u bë i dukshëm.

Shembulli 2. Një ngjarje në kalendar, pasi klikohet, del nga sipërfaqja, kthehet në një shtresë të veçantë "letër", fillon të transformohet dhe zbulohet në formën e informacionit të detajuar për ngjarjen.

Pika interesante është se lëvizja aktive tërheq syrin - kjo është e natyrshme për shikimin tonë. Duke përdorur animacionin, ne kontrollojmë vëmendjen e përdoruesit.

Asimetria

Meqenëse thellësia e ndërfaqes është e kufizuar nga trashësia e pajisjes, të gjitha transformimet e objektit duhet të bëhen në aeroplan. Kjo gjithashtu çon në faktin se animacioni i transformimit duhet të jetë asimetrik - domethënë, ndryshimi në gjerësinë dhe lartësinë e objektit duhet të jetë i pavarur. Përndryshe, lind iluzioni i lëvizjes më afër ose më larg shikuesit, dhe në një distancë shumë të madhe.

Reagimi

Një tjetër parim shumë i rëndësishëm i animacionit në Material Design është përgjigja ndaj veprimeve të përdoruesit. Aty ku është e mundur, epiqendra e ndryshimeve të ndërfaqes duhet të jetë prekja e ekranit të pajisjes. Për shembull, një valë që shfaqet dhe shkon nga pika e kontaktit me një gisht. Ky efekt zbatohet pa probleme në Android L.

Mikroanimacione

Në Android L, ne mund të animojmë çdo element të aplikacionit - qofshin kalime midis përmbajtjes ose ikonave të veprimit të vogël. Çdo detaj i një aplikacioni është i rëndësishëm, dhe mikro-animacionet shtojnë detaje dhe reagim më të madh për çdo veprim të përdoruesit.

Qartësia dhe mprehtësia

Dhe parimi i fundit, kyç i animacionit: lëvizja duhet të jetë e shpejtë dhe e qartë. Ndryshe nga nxitimi banal në fillim dhe ngadalësimi në fund, kurba e animacionit në Material Design është më e natyrshme dhe interesante. Objektet reagojnë më shpejt dhe arrijnë gjendjen e synuar, kthehen më shpejt, por duhet pak më shumë për të arritur në gjendjen e pushimit në fund. Si rezultat, përdoruesi duhet të presë më pak (më pak i bezdisshëm). Në të njëjtën kohë, aty ku objekti tashmë është larguar nga sfera e interesave të përdoruesve, ai i lejon vetes të sillet më natyrshëm.

NB!

1. Mos e lini animacionin për të fundit. Animacioni nuk duhet të lihet deri në fund - ai mund të jetë një faktor kyç në përvojën e përdoruesit dhe duhet menduar paraprakisht.
2. Njihni kufijtë tuaj. Shumë animacion është gjithashtu i keq. Kontrolloni veten dhe mbani mend se duhet të jetë kuptimplotë.

Dizajn përshtatës

Aspekti i fundit kryesor i Dizajnit Material është koncepti i dizajnit të përgjegjshëm. Kjo do të thotë, si mund t'i zbatojmë të tre konceptet e para në pajisje dhe ekrane të ndryshme në faktorë të ndryshëm formash.

Nga e përgjithshme në specifike

Teknika më e zakonshme është zvogëlimi i sasisë së informacionit të shfaqur në ekran së bashku me zvogëlimin e ekranit. Nëse në një ekran të madh mund të përballojmë të shfaqim një listë dhe informacion të detajuar për elementin e zgjedhur, atëherë në telefonat inteligjentë lista shfaqet fillimisht, dhe për detaje na duhet një ekran i veçantë. Në rastin e tabletave, shiriti i aplikacionit ndonjëherë mund të zmadhohet për të përballuar të paktën pak hapësirën e tepërt të lirë.

Indentacionet

Vendosja e përmbajtjes duke përdorur blloqe e bën shumë më të lehtë punën me hapësirë ​​të lirë në ekrane të mëdha. Ne e dimë përmbajtjen e secilit bllok, kuptojmë se sa i gjerë mund të jetë për të mos humbur lexueshmërinë, dhe gjithashtu sa i ngushtë për të mos qenë shumë i mbushur me njerëz. Në ekranet e gjera, blloqet shtrihen në kufijtë e tyre të lexueshmërisë dhe më pas shtohen margjina nga skajet, të cilat mund të jenë të mëdha. Ato mund të mbushen me një buton lundrues dhe me ngjyra.

Korniza të bardha

Idetë për organizimin e hapësirës dhe hapësirës për ekrane të ndryshme mund të gjenden në faqen e internetit google.com/design/spec në seksionin Whiteframes. Ky është një vend i mrekullueshëm për të filluar, për të marrë idenë e përgjithshme dhe më pas për të vazhduar me eksperimentet tuaja.

Udhëzues

Udhëzuesit na japin dhëmbëza për "bojën" në fletë të veçanta "letër". Në një smartphone kemi një fletë dhe një dhëmbëzim të mirë në të majtë, por në një tabletë ka dy prej tyre dhe në të dyja rastet ka një dhëmbëzim. Është e rëndësishme që dhëmbëzimi të jetë i ndryshëm për këta dy faktorë të formës. Në një tabletë është 80dp, dhe në një smartphone është 72dp. Margjinat nga skajet e ekranit janë gjithashtu të ndryshme.

Dimensionet

Rekomandohet të merren përmasa të shumta për të gjithë elementët. Në veçanti, zgjedhja e madhësisë së shiritit të aplikacionit është shumë më e përshtatshme nëse e bëni atë një shumëfish: 1x, 2x, 3x. Kjo madhësi është e ndryshme në telefonat inteligjentë dhe tabletët, por aplikacioni përshtatet pa probleme.

Blloqe

Të menduarit në blloqe në përgjithësi mund të jetë i dobishëm. Nëse vendosni një rrjet të tillë modular të blloqeve të ndashëm me 8dp, do të merrni një ritëm të shkëlqyer vizual dhe do të jetë më i përshtatshëm për të marrë vendime. Shkoni në faqen me korniza të bardha dhe shikoni materialet.

Shiriti i veglave

Shiriti i veprimit është një nga pjesët më të rëndësishme të ndërfaqes. Ai përmban kokën, butonat e veprimit dhe navigimin. Në Android Lollipop, shiriti i veprimit është kthyer nga një shirit i kufizuar në krye në një miniaplikacion të plotë - një bllok kontrolli funksional dhe i bukur aplikacioni. Kjo u bë e mundur për shkak të faktit se tani mund të vendosni shumë elementë funksionalë në shiritin e veglave që as nuk mund t'i ëndërronit më parë:
- fushat e hyrjes, formularët;
- butoni i veprimit kryesor lundrues;
- shiriti i veglave është i fshehur nga lundrimi i zgjeruar, por këtu shohim një miniaplikacion plotësisht funksional;
- shiriti i veglave është i përshtatshëm për t'u menaxhuar nëse është e nevojshme.

NB!

1. Një sirtar navigimi nuk është gjithmonë i nevojshëm. Google përdor navigimin me rrëshqitje shumë shpesh në aplikacionet e tij, kështu që mund ta shihni atë në shembuj të ndryshëm. Por Google ka shumë probleme që mund të zgjidhen me ndihmën e tij: postimi i ndihmës, cilësimet, login/logout, informacioni i përdoruesit, etj. Nëse keni detyra të ngjashme, atëherë gjithçka është në rregull, por nëse jeni duke bërë një mjet të thjeshtë, atëherë nuk ia vlen.
2. Jini më të guximshëm dhe më të zgjuar me shiritat e veglave. Aftësia për të ndryshuar madhësinë e shiritit të veglave në mënyrë dinamike, duke e bërë atë madhësi të dyfishtë ose të trefishtë është shumë e lezetshme dhe e përshtatshme. Shumica e stilistëve kanë frikë të merren me këtë dhe të zgjedhin një madhësi një herë e përgjithmonë, por këtu mund dhe duhet të jeni më të guximshëm.
3. Nuk ka nevojë të bëni një geto nga këndi i poshtëm për një buton lundrues. Një buton lundrues mund të jetë kudo: poshtë, lart, djathtas, majtas. Sigurisht, mund të jetë e përshtatshme për ta arritur atë në një qoshe, por kjo nuk është e vetmja mundësi. Butoni mund të zhvendoset nga një vend në tjetrin në varësi të detyrës.
4. Si telefonat inteligjentë ashtu edhe tabletët; si vertikalisht ashtu edhe horizontalisht. Gama e pajisjeve Android është e madhe dhe kjo nuk ua lehtëson jetën zhvilluesve. Por e vërteta është se përdoruesit i kanë të gjitha këto pajisje që i kthejnë andej-këtej (edhe nëse flasim për telefonat inteligjentë). Ky moment duhet të përpunohet.

Ky është Dizajn Material. Mos kini frikë të eksperimentoni dhe të bëni gabime: mos u ndalni në kopjimin e zgjidhjeve ekzistuese. Provoje!

Etiketa:

• dizajn material
• android
• dizajni i ndërfaqes

Shto etiketa

Etiketoni postimin me etiketat tuaja Është më mirë të ndani etiketat me presje. Për shembull: programim, algoritme

Komentet 121

• • • • • • • • • • Ju, si Google, e mbani telefonin tuaj vetëm horizontalisht?
                    

                    Në vertikale përdoret vetëm 50-70% e ekranit

                    
                    

                    • Ka mjaft tekst në këtë ekran.

                      A është ky shumë tekst? Çfarë u ka bërë Twitter njerëzve...

Çfarë do të ndodhë nëse fëmijëria e një personi kalon duke dëgjuar filma ku kompjuterët më inteligjentë vrasin në mënyrë të pashmangshme të gjithë njerëzimin dhe kur ai të rritet pak, i njëjti person lexon për NSA-në dhe zuzarët e tjerë që lexojnë mesazhet e tij SMS gjatë gjithë kohës dhe i dërgojnë ato. në SHBA? Ai do të jetë i kujdesshëm ndaj Google.

Jo shumë kohë më parë, Good Corporation i tregoi botës vizionin e saj për ndërfaqet e përdoruesve të së ardhmes. Material Design është një koncept i unifikuar për ndërtimin e logjikës së funksionimit dhe paraqitjes së shërbimeve dhe aplikacioneve, duke unifikuar të gjitha produktet e Google për t'i bërë ato sa më të lehta dhe intuitive për t'i perceptuar përdoruesit.

Ideja është aq e madhe sa do të transformojë jo vetëm pamjen e të gjitha produkteve të Google. Me ardhjen e konceptit të ri, roli i vetë kompanisë në jetën e njerëzve do të ndryshojë.

Çfarë do të bëhet Google?

Po, tani për tani Google është vetëm një grup shërbimesh. Megjithatë, me dizajnin e materialit, kompania në fakt po krijon një realitet të dytë brenda kompjuterëve dhe pajisjeve tona celulare. Me logjikën e vet, me rregullat dhe ligjet e veta, me fizikën e vet.

Kur krijoni gjëra fizike, ju mbështeteni në përvojën njerëzore mijëravjeçare. Por dizajni i softuerit është vetëm në fillimet e tij. Ne shikuam të gjithë softuerin tonë dhe pyetëm veten, nga çfarë përbëhet? John Wiley, Drejtues i Dizajnit të Kërkimit në Google

Cilat janë shërbimet e Google për njerëzit tani? A është një shirit kërkimi që jeton në shfletues? Apo është pajisja juaj celulare Android?

Google mund të përkufizohet në shumë mënyra, dhe shumë prej tyre do të jenë të vërteta. Kjo kompani krijoi një sistem shërbimesh që u bë themeli i infrastrukturës sonë dixhitale.

Por në të ardhmen e afërt, Google nuk do të shihet më vetëm si Chrome apo Android.

Shërbimet dhe produktet individuale të Google po zhvillohen në një kanal të vetëm informacioni, ku të dhënat që janë të rëndësishme për një person thjesht shfaqen në ekranin e duhur në kohën e duhur.

Kur shikoni orën tuaj ndërsa qëndroni në një stacion treni, shihni në ekran kohën e mbërritjes së trenit tuaj të ardhshëm. Megjithatë, e njëjta orë do t'ju njoftojë për një letër të rëndësishme nga menaxhmenti nëse e shikoni në punë. Kjo orë do të zëvendësojë fjalëkalimin tuaj për të hyrë në llogarinë tuaj në kompjuterin tuaj, ekrani i së cilës do të shfaqë menjëherë trupin e asaj letre të rëndësishme nga shefi juaj. Keni nevojë të largoheni urgjentisht dhe nuk keni kohë për të përfunduar tekstin e përgjigjes? Nuk ka problem, sepse smartphone ose tableti juaj tashmë ka hapur ndërfaqen e postës me tekst gjysmë të printuar, madje edhe kursori është në vendin ku e keni lënë.

Dita e punës ka mbaruar dhe ju po shkoni në shtëpi. Të njëjtat ekrane tani kryejnë funksione krejtësisht të ndryshme. Ata do t'ju kujtojnë të merrni fëmijët, të blini sende ushqimore për darkë dhe t'ju njoftojnë për publikimin e një episodi të ri të serialit tuaj të preferuar televiziv.

Një shumëllojshmëri e tillë e jashtëzakonshme funksionesh dhe detyrash të kryera do të funksionojë në një mjedis të vetëm dixhital që është intuitiv për përdoruesit, duke u bashkuar gradualisht me botën reale.

Një nga idetë kryesore të Material Design është të krijojë një ndjenjë intuitive për përdoruesit për të punuar me objekte fizike reale brenda një mjedisi dixhital. Në thelb, ky është një emulim i hapësirës tredimensionale në rrafshin e ekranit, por me të gjitha avantazhet që mund të ofrojë një mjedis virtual. Butonat dhe dritaret këtu, të ngjashme me kartat e kartonit, mund të rriten dhe tkurren, të shpërbëhen dhe të riorganizohen.

Gjëja më mbresëlënëse në lidhje me këtë koncept është se vetitë dhe sjellja e objekteve në ekran do të jenë po aq të parashikueshme dhe të kuptueshme për njerëzit sa çdo ngjarje e thjeshtë në botën fizike. Ndryshe nga ndërfaqet ekzistuese, ku shtypja e një butoni nuk shkakton asnjë ndryshim në pjesën tjetër të ekranit, çdo veprim në Android L shkakton një efekt përkatës që ndikon në të gjithë ndërfaqen. Prekni një ditë specifike në kalendar dhe ajo do të rritet, duke shtyrë pjesën tjetër të ditëve me volumin dhe masën e saj në rritje. Shtypni butonin e luajtjes në luajtës dhe ai do të shpaloset si një mbështjellës karamele në panelin e kontrollit.

Ky koncept është rezultat i studimit të kujdesshëm të kompanisë se si funksionon letra në realitet. Ekipi që punon në projekt krijoi ikona fizike të aplikacioneve nga letra reale. Ata donin të shihnin se si drita dhe hija mund të ndërveprojnë me një material të sheshtë (si një ekran), por real.

Mjedisi virtual, nga ana tjetër, ju lejon të thyeni rregullat. Nuk ka gjasa që dikush të ketë parë letrën të ndahet në pjesë, pjesët e të cilave riorganizohen dhe bashkohen përsëri në një objekt të vetëm. Kjo ofron mundësi shtesë, por ekziston rreziku i krijimit të një sistemi shumë jorealist, shumë larg ligjeve fizike. Për të ruajtur intuitivitetin natyror, të gjitha tipografitë, imazhet dhe ngjyrat u hodhën jashtë gjatë procesit të zhvillimit. Ekipi u fokusua ekskluzivisht në performancën e letrës së mrekullisë.

Nuk është e nevojshme të jesh projektues për të vërejtur një shkelje të rregullave të botës reale. A bie letra mbi tavolinë si një copë guri? Natyrisht, diçka nuk është në rregull këtu, dhe kjo do të jetë e qartë për këdo.

Bazuar në ligje të tilla të dukshme dhe të kuptueshme për të gjithë, ekipi i Google vendosi të përdorë botën reale si bazë për konceptet e tyre.

Nëse ekziston një sistem mjaftueshëm i qartë rregullash, bëhet e mundur shtimi i materialeve të reja. Letra ishte një zgjedhje e qartë për shkak të lehtësisë së shfaqjes në ekran. Asnjë teksturë e theksuar, praktikisht pa vëllim. Por përpiquni të imagjinoni, për shembull, pëlhurë ose lëngje.

Filozofia e skeuomorfizmit, të cilën Apple e përdori në mënyrë aktive dhe e braktisi përfundimisht, vjen menjëherë në mendje, apo jo? Qasja e Apple synonte gjithashtu ta bënte botën dixhitale më miqësore për përdoruesit, por në krahasim me atë të Google duket mjaft sipërfaqësore. Skeuomorfizmi i Apple vetëm nënkuptoi ngjashmërinë e aplikacionit me homologun e tij në jetën reale.

Google nuk dëshiron vetëm të nxjerrë disa analogji për perceptim më të mirë. Qëllimi i tyre është t'u shpjegojnë përdoruesve se çfarë ndodh kur një element i veçantë i ndërfaqes shfaqet ose zhduket nga ekrani.

Material Design nuk është thjesht një përpjekje për të krijuar shërbime të dizajnuara në mënyrë identike për pajisje të ndryshme. Google po krijon një botë paralele, çdo grimcë e së cilës është një fragment i diçkaje materiale. Kur merrni një mesazh në orën tuaj inteligjente nga telefoni inteligjent, nuk shihni vetëm një tekst të vdekur. Është një copë kartoni me një mesazh mbi të, dhe ai mesazh vjen nga telefoni juaj inteligjent në kyçin tuaj.

Ndërveprimi me botën dixhitale është i mundur në mënyra krejtësisht të ndryshme. Mund të jetë diçka e rrumbullakët në kyçin tonë ose diçka drejtkëndore në dorën tonë. Material Design synon të sigurojë që qasja në të dhënat përkatëse dhe përkatëse është e garantuar, pavarësisht nga kombinimi i pajisjeve që përdor një person.

Kështu, pa imponim apo presion, kompania thjesht krijon teknologji të bazuara në parimin kryesor "përqendrohuni te përdoruesi dhe gjithçka tjetër do të vijë vetë".

Ne jemi të interesuar për mendimin tuaj. A e konsideroni të keq një koncept të tillë apo i perceptoni nisma të tilla si një mënyrë premtuese për të bashkëvepruar me mjedisin e informacionit në të ardhmen?

Kush zhvillon aplikacione celulare dhe faqe interneti, shkroi një kolonë për ne dhe vendosi gjithçka në vendin e vet në lidhje me dizajnin e banesës dhe materialit.

Në përgjithësi, ndryshimi midis dizajnit të sheshtë dhe dizajnit të materialit është delikate. Për një person që nuk ka njohuri të thella të dizajnit grafik, ata me të vërtetë mund të duken shumë të ngjashëm. Në këtë artikull do të përpiqem të "hedh dritë" mbi disa nga ndryshimet midis tyre. Do të merrni njohuri shtesë që janë aq të nevojshme në mënyrë që të mos dëmtoni aksidentalisht natyrën delikate të stilistit.

Pak histori

Para se të fillojmë të flasim për ndryshimet midis dy tendencave më të njohura të dizajnit, le të zbulojmë se nga vijnë ato. Ekziston një mendim se dizajni i materialit është krijuar në bazë të një të sheshtë. Nga erdhi atëherë dizajni i sheshtë?

Skeuomorfizmi

Kur bëhet fjalë për ndërfaqen e përdoruesit dhe dizajnin e uebit, koncepti i skeuomorfizmit i referohet një qasjeje, ideja kryesore e së cilës është imitimi. Pa hyrë në shumë detaje, le të kujtojmë ndërfaqet para-iOS 7 të Apple me "teksturat e tyre realiste, ndriçimin dhe efektet bombastike".

Përpjekja për t'i bërë objektet dixhitale të ngjasojnë me homologët e tyre të botës reale u motivua nga nevoja për të lehtësuar ndërveprimin e përdoruesit me pajisjen. Në fakt, kjo është arsyeja pse të gjitha ndërfaqet me tekstura realiste kanë dominuar botën dixhitale për shumë vite. Dizajni Skeuomorphic bën një punë të shkëlqyer për të ndihmuar përdoruesit të kalojnë pa probleme nga bota reale në atë dixhitale.

Megjithatë, me rritjen e teknologjisë celulare, gradualisht po bëhet nevoja për t'u fokusuar kryesisht në komoditetin dhe lehtësinë e përdorimit. Pajtohem, në këtë fushë nevoja për të krijuar zgjidhje celulare të aksesueshme nga pajisje të ndryshme po rritet ndjeshëm. Dhe pikërisht në këtë moment, thjeshtësia bëhet standardi i ri i dizajnit.

Shënim: Në asnjë rrethanë mos mendoni se skeuomorfizmi është zhdukur plotësisht. Përdoret gjerësisht në lojëra ku është e nevojshme të krijohet një botë realiste dhe të ndihmohen lojtarët të ndiejnë karakterin e tyre në mënyrë që të zhyten thellë në procesin e lojës.

Dizajn i sheshtë

Ky stil është plotësisht i lirë nga çdo objekt tre-dimensionale. Përafërsisht, dizajnit të sheshtë i mungojnë elementë të tillë stilistikë si hijet, teksturat, gradientët, por i kushton vëmendje lojës së shkronjave, ngjyrave dhe ikonave. Por pse ishte e nevojshme e gjithë kjo? Përgjigja është e thjeshtë.

Së pari, dizajni i sheshtë redukton ndjeshëm kohën e ngarkimit të faqes. Mungesa e detajeve skeuomorfike "të rënda" (mendoni: shtresat, fontet serif, gradientët) i bën elementët e dizajnit të sheshtë "më të lehtë", gjë që nga ana tjetër përshpejton ndjeshëm kohën e ngarkimit. Për më tepër, elementët e sheshtë duken po aq tërheqës si në ekranet me rezolucion të lartë ashtu edhe në atë të ulët.

Së dyti, imazhet e thjeshta mund të përcjellin idenë tuaj te përdoruesit më shpejt se ilustrimet e detajuara: ato janë të skicuara dhe për këtë arsye mjaft të lehta për t'u kuptuar.

Dhe, sigurisht, ikonat e sheshta me një font relativisht të thjeshtë mund ta drejtojnë vëmendjen e përdoruesve drejt përmbajtjes vërtet të rëndësishme.

Sot, dizajni i sheshtë ka marrë njohjen e merituar, por ende ka problemet e veta. Shembulli më i dukshëm i problemeve të tilla ishte lëshimi i Windows 8 nga Microsoft. Ky sistem operativ konsiderohet si një pionier i dizajnit të sheshtë dhe mbështet konceptin e dizajnit Metro. Ajo që çoi në problemet ishte se kompania e konsideroi të nevojshme t'i kushtonte më shumë vëmendje tipografisë sesa vetë grafikës.

Rezultatet nga një test i përdorshmërisë së Windows 8 të kryer nga NN Group treguan se përdoruesit kishin vështirësi të dallonin objektet e klikueshme nga ato që nuk klikohen. Përdoruesit u ankuan se objektet që dukeshin statike ishin në të vërtetë të klikueshme. Si rezultat, misioni kryesor i kompanisë - për të ndihmuar përdoruesit të interpretojnë saktë sistemin - dështoi.

Një kompani tjetër që shpesh lidhet me dizajnin e sheshtë është Apple. Ata u larguan nga elementët skeuomorfikë të dizajnit në sistemin operativ celular iOS 7, i lëshuar në 2013. Këtë herë tranzicioni u prit pak më mirë, kryesisht për faktin se kompania nuk u përpoq të përditësonte plotësisht konceptin e ndërfaqes së përdoruesit, por thjesht shtoi disa ndryshime drejt një dizajni të sheshtë. Kjo i lejoi përdoruesit të përdorin produktin duke u mbështetur në përvojën e tyre të mëparshme me sistemet operative dhe faqet e internetit.

Dizajni i materialit

Le të jemi të qartë tani: dizajni i materialit është më shumë një produkt i markës sesa një prirje spontane e dizajnit që ka fituar pranim të gjerë. Kjo është ajo që e dallon kryesisht nga dizajni i saj i sheshtë.

Duke e quajtur një material dizajni "të markës", dua të them se ai ka një grup të tërë rekomandimesh dhe parimesh të përcaktuara qartë që ndjek çdo stilist që respekton veten. Është mjaft e qartë pse Google prezantoi Dizajnin e tij Material: kishte nevojë të unifikohej dizajni në mënyrë që aplikacionet të dukeshin të njëjta në ndonjë nga pajisjet e shumta Android.

Edhe pse mjaft funksional, dizajni i sheshtë konsiderohet ende i vështirë për t'u kuptuar. E vërteta është se objektet e sheshta në ekran mund të ngatërrojnë përdoruesit (sidomos ata që nuk kanë përvojë në përdorimin e ndërfaqeve celulare dhe të internetit). Prandaj, dizajni i materialit përpiqet të rikthejë elementet e skeuomorfizmit, por në një formë shumë të thjeshtuar. Imazhet duken të sheshta, veçanërisht kur bëhet fjalë për ngjyrat, por janë ende shumëdimensionale falë pranisë së boshtit Z.

Me fjalë të tjera, dizajni i materialit mund të quhet një version i përmirësuar i dizajnit të sheshtë me elementë të skeuomorfizmit - animacion, hije dhe shtresa. Në këtë mënyrë ju mund ta bëni produktin më intuitiv për sa i përket navigimit dhe të shmangni kompleksitetin e panevojshëm brenda stilit të përgjithshëm.

Të mirat dhe të këqijat e dizajnit të sheshtë

Le të lëmë pas historinë e evolucionit të stileve dhe të kalojmë në diçka më domethënëse - le të rendisim pikat e forta dhe të dobëta të dizajnit të sheshtë.

• Minimalizëm dhe stil
• Intuitiviteti. Do të jetë më e lehtë për ju të përcillni idenë tuaj tek përdoruesit.
• Kursimi i kohës dhe burimeve. Faqet ngarkohen shumë më shpejt me më pak konsum të gjerësisë së brezit.
• Përqendrohuni në përmbajtje. Ndërfaqja është pa detaje të panevojshme që mund të largojnë vëmendjen nga informacioni vërtet i vlefshëm.
• Duket po aq mirë në pajisje të ndryshme, qoftë shfletues PC apo smartphone.
• Përshpejton procesin e zhvillimit të dizajnit të faqes në internet ose aplikacionit duke eliminuar prekjet e panevojshme të dizajnit.

• Stili minimalist.
• Mjaft intuitiv në një nivel intuitiv. Dizajni i materialit do të jetë po aq i lehtë për t'u perceptuar si për përdoruesit me përvojë ashtu edhe për fillestarët.
• Skeuomorfizëm i moderuar. Gjithçka duket më realiste falë përdorimit të boshtit Z (një koncept unik i Google).
• Ekziston një grup manualesh që përditësohen vazhdimisht. Prandaj, çdo projektues mund t'u drejtohet gjithmonë atyre nëse lindin vështirësi gjatë procesit të punës.
• Inkurajohet animacioni për zgjidhjet në internet. Nuk ka nevojë t'ju kujtojmë se sa shumë njerëzit e duan lëvizjen. Përveç kësaj, animacioni ju lejon ta bëni ndërfaqen më të qartë dhe intuitive.

• Ka një pronar (kompani Google). Prandaj, çdo pyetje dhe sugjerim për përmirësim duhet t'i drejtohet pronarit.
• Për shkak të boshtit Z, procesi i projektimit mund të marrë më shumë kohë për të përfunduar.
• Elementet e animuar kërkojnë më shumë burime.
• Respektimi i ngurtë i udhëzimeve mund të kufizojë origjinalitetin e një dizajni.

Përmblidhni

Në fakt, një nga qasjet e projektimit në shqyrtim nuk duhet të konsiderohet se ka një avantazh të qartë mbi tjetrin, pasi stilet e sheshta dhe ato materiale shkojnë krah për krah. Ata janë të dy jashtëzakonisht të njohur dhe të dy nuk kanë një realizëm të tepruar. Dizajni i materialit është një pasardhës i dizajnit të sheshtë, ndërsa vetë dizajni i sheshtë ishte një reagim ndaj zgjidhjeve që ishin shumë të rënda dhe realiste. Dizajni i materialit shtoi diçka nga e cila dizajni i sheshtë gjithmonë është përpjekur të largohet - një skeuomorfizëm i vogël. Edhe pse një gjë do të jetë gjithmonë e ndryshme midis këtyre qasjeve: dizajni i materialit është një produkt pronësor i Google dhe dizajni i sheshtë është rezultat i shkrirjes së disa praktikave të projektimit që synojnë kryesisht për thjeshtësi të përgjithshme.

Në të vërtetë, dizajni i sheshtë ka evoluar shumë vitet e fundit, nga një stil krejtësisht "i sheshtë" në një stil "gjysmë të sheshtë". Tani lejon përdorimin e shtresave dhe hijeve delikate për të lejuar që objektet të shfaqen më thellë se sa dukeshin më parë. Pra, ju dhe unë jemi bashkëkohës të lumtur të dizajnit të sheshtë 2.0.

Së fundi, asgjë nuk ju pengon të përpiqeni të kombinoni këto dy qasje për të krijuar një produkt vërtet funksional dhe miqësor për përdoruesit. Pra, merrni frymëzim nga gurutë e dizajnit të sheshtë dhe material dhe filloni punën!

Zëvendës Presidenti i Dizajnit të Google, Matias Duarte, flet për parimet bazë të dizajnit të ri, i cili quhet Material, në një intervistë për The Verge. Kjo është një qasje krejtësisht e ndryshme, duke siguruar një grup të unifikuar rregullash, duke filluar nga lloji i softuerit deri te funksionet. Tani për tani, dizajni duket pak i çuditshëm dhe kërkon pak mësimin.

Ekipi i projektimit në Google ndjeu nevojën për të krijuar një pamje dhe funksionalitet të unifikuar të softuerit që mund të përdoret në të gjitha produktet: Android, Chrome OS, shërbimet e uebit. Në vend që të fillonin me zhvillimin e një palete ngjyrash, ata filluan me pyetjen: "Çfarë është softueri?"

Materia dhe forma

Përgjigja erdhi nga departamenti i dizajnit, kur Jon Wiley, projektuesi kryesor i motorit të kërkimit të Google, dhe kolegu i tij Nicholas Jitcoff shikuan dizajnin e Google Now. Ata shikuan ndërfaqen e kartës dhe menduan: "Dhe nëse e lëvizni kartën, çfarë fshihet pas saj?"

"Kjo pyetje e pafajshme ndezi një shkëndijë të fuqishme!" - tha Duarte. I gjithë ekipi filloi të mendonte për një mënyrë të re për të bashkëvepruar me elementët e softuerit. Në vend që të përdorte vetëm pikselë në ekran dhe shtresa abstrakte, ekipi filloi të mendonte për dizajnin si një objekt real dhe të prekshëm. Prandaj, kartat duhet të kenë veti fizike. Është koha për të dalë me rregulla që do të përcaktojnë se si çdo gjë duhet të veprojë dhe të lëvizë në ekran. Ekipi i zhvillimit donte të arrinte efektin që përdoruesi po ndërvepronte me objektet fizike.

Kështu filloi puna për një material metaforik që i ngjante letrës - e sheshtë dhe e bardhë me hije realiste. Kjo ishte fara nga e cila u rrit pjesa tjetër e dizajnit, zbatimi i të cilit mund të shihet në Android L. Material Design ka të bëjë me ngjyrat e theksuara, të ndezura, minimalizmin dhe një ndjenjë konsistence.

Wiley dhe Zhitkoff thonë se është një evolucion estetik i të gjithë filozofisë së dizajnit të Google. Në 2012 dhe 2013, brenda mureve të selisë së gjigantit të internetit, filloi puna për Projektin Kennedy, i cili do të unifikonte dizajnin e gjithçkaje.

Kreativiteti dhe kufizimet

Material Design bashkon të gjitha idetë më të mira. Matias Duarte e sheh stilin tonë të ri si një sërë kufizimesh që, sipas tij, e bëjnë punën e dizajnerëve të aplikacioneve më të lehtë dhe më të qëndrueshme. Për shembull, gjesti i kthimit të një karte për të parë se çfarë është shkruar në anën e pasme. Në botën normale kjo nuk është e mundur për shkak të mungesës së hapësirës. Është sikur softueri të ishte objekte të vërteta fizike brenda pajisjeve. Dhe padyshim që nuk ka vend në telefonin tuaj për ta kthyer kartën, kështu që Google e kufizon këtë lloj manipulimi.

Ne mbështetemi shumë te fizika dhe softueri shpesh sillet në mënyra që prishin të kuptuarit tonë për botën, si disa filma fantastiko-shkencor që kundërshtojnë logjikën bazë. Duarte komenton drejtpërdrejt filozofinë e re të dizajnit të Apple për iOS.

Ne nuk po nxitojmë nëpër hapësirë ​​dhe kohë me shpejtësi supersonike. Dizajn - është një kërkim për një zgjidhje brenda kufizimeve strikte. Dizajni është një art.

Dizajnerët e Google refuzojnë me kokëfortësi të emërtojnë materialin fiktiv të përdorur. Një zgjidhje që u jep atyre një fleksibilitet më të madh dhe shton një shtresë misticizmi metafizik në substancë. Letër kuantike - kjo u tha në disa rrjedhje para Google I/O. Kjo është e rëndësishme sepse materiali i bindet fizikës dhe nuk do të bjerë në grackën e skeuomorfizmit. Nuk është saktësisht një imitim i objekteve fizike, siç thotë Duarte, është diçka "magjike".

Materiali në dizajnin tonë mund të bëjë gjëra që letrat fizike nuk munden, të tilla si rritja dhe tkurrja me animacione. Këto animacione janë të rëndësishme për Google sepse i ndihmojnë përdoruesit të kuptojnë se janë brenda softuerit. Wiley e krahason softuerin me filmat, ku ka kërcime të mprehta midis skenave. Përdoruesi humbet ndjenjën e kohës dhe hapësirës. Në softuer, është e rëndësishme që përdoruesi të kuptojë parimet e lëvizjes nga njëri në tjetrin.

Materializoj

Gjëja tjetër më e rëndësishme që sjell Material Design është unifikimi. Google ka vite që punon në algoritme për të gjitha produktet e saj dhe kjo është bërë pjesë integrale e filozofisë së re të dizajnit. Në vend që përdoruesi të duhet të konfigurojë gjithçka vetë, Material Design i bën ata të besojnë se ajo që u nevojitet në ekran do të jetë ajo që u nevojitet në kohën e duhur.

Kjo është arsyeja pse Android Wear nuk u jep përdoruesve asgjë tjetër përveç ndërveprimit me njoftimet. Alex Faaborg, projektuesi i platformës, thotë:

Ju nuk shpenzoni shumë kohë duke ndërvepruar me orën. Thjesht dëshironi të jeni në gjendje t'i hidhni një sy kyçit të dorës dhe të merrni menjëherë informacionin që ju nevojitet ose të kryeni një veprim me një komandë zanore. Ne kemi bërë një punë të jashtëzakonshme në të gjithë platformën e Google.

Google po kërkon shumë kredi për veten dhe materialin e tij "magjik" të letrës, por Duarte beson se ka arsye të mira për këtë.

Ne e bëmë këtë sepse është zgjidhja më e thjeshtë. Ne duam të dizajnojmë një dizajn sa më të thjeshtë për përdoruesit.

Parc 3.0

Ka shumë më tepër në Material Design sesa thjesht dizajni i Android L, Android Wear dhe çdo gjë tjetër me të cilën përfshihet Google. Po flasim për ndjesi në raportin mes njeriut dhe teknologjisë.

Duarte thotë se Xerox PARC ka bërë një punë të shkëlqyer për të krijuar një përvojë të njohur të dritares dhe kursorit. Kjo ishte inovative sepse kompania ishte në gjendje të krijonte një version virtual të një desktopi të vërtetë. Njerëzit e kuptuan se si funksiononte një kompjuter dhe mund të punonin me të rehat. Kjo vlen edhe për atë që Apple ka bërë me ekranet me prekje.

Tani Google beson se ka arritur të bëjë të njëjtën gjë. Wiley thotë se njerëzit sot kanë shumë teknologji: ekrane me prekje, gjeste, komanda zanore, algoritme inteligjente. Dizajni i Materialit kombinon gjithë këtë diversitet në një gjë intuitive. Kjo do t'ju ndihmojë të përdorni lehtësisht të njëjtën gjë në Chrome OS, Android ose në ueb.

9 parime

1. Materiali është një metaforë

Material Design është një sistem që racionalizon hapësirën dhe lëvizjen. Dizajni bazohet në një realitet të prekshëm, i frymëzuar nga mundësitë e letrës dhe bojës, por i hapur ndaj imagjinatës dhe magjisë.

2. Sipërfaqet janë intuitive

Planet dhe skajet përcjellin sinjale vizuale bazuar në perceptimin tonë të realitetit. Përdorimi i atributeve të njohura prekëse prek pjesët kryesore të trurit tonë dhe na ndihmon të kuptojmë shpejt atë që imagjinohet.

3. Dimensioni krijon ndërveprim

Bazat e dritës, sipërfaqes dhe lëvizjes janë thelbësore për mënyrën se si objektet ndërveprojnë. Ndriçimi realist ndan hapësirën dhe përqendron vëmendjen në pjesët lëvizëse.

4. Dizajn i unifikuar i përgjegjshëm

Një dizajn për gjithçka. Çdo pajisje pasqyron një pamje të ndryshme për të njëjtat elementë bazë. Çdo pamje është përshtatur për madhësinë dhe ndërveprimin për secilën pajisje. Ngjyrat, ikonografia, hierarkia dhe marrëdhëniet hapësinore mbeten të pandryshuara.

5. Fontet, grafika, ngjyrat

Dizajni i veçantë krijon hierarki, mirëkuptim dhe ndihmon përqendrimin. Ngjyrat e zgjedhura posaçërisht, përdorimi i hapësirës nga skaji në skaj, fontet e mëdha dhe përdorimi i qëllimshëm/i qëllimshëm i së bardhës ju lejojnë të zhytni plotësisht përdoruesin në procesin e ndërveprimit, duke e bërë atë më të qartë dhe më të kuptueshëm.

6. Veprimet primare

Veprimi i përdoruesit është thelbi i dizajnit. Veprimet primare transformojnë të gjithë dizajnin. Ata fokusohen në funksionalitetin kryesor dhe tërheqin menjëherë vëmendjen e përdoruesit.

7. Përdoruesit iniciojnë ndryshime

Ndryshimet në ndërfaqe ndodhin për shkak të veprimeve të përdoruesit. Lëvizja rrit përvojën e veprimit parësor.

8. Koreografi e animuar

Të gjitha veprimet zhvillohen në një mjedis të vetëm. Objektet që shikon përdoruesi nuk e prishin pjesën tjetër të përvojës së përdoruesit, edhe pas transformimeve dhe riorganizimeve.

9. Lëvizja jep kuptim

Lëvizja ka kuptim dhe është e nevojshme për të tërhequr vëmendjen. Tranzicionet janë efektive.

Dizajni është arti i krijimit. Qëllimi ynë është të kënaqim një gamë të ndryshme nevojash njerëzore. Ndërsa këto nevoja evoluojnë, po ashtu duhet të zhvillohen edhe planet, idetë dhe filozofitë tona.

Ne i vendosëm vetes synimin për të krijuar një gjuhë vizuale për përdoruesit tanë që kombinon parimet e njohura të dizajnit klasik me inovacionin.

Me siguri e keni dëgjuar shprehjen "dizajn material" më shumë se një herë. Koncepti i dizajnit të materialit nuk është i ri dhe është tashmë mjaft i vendosur në tregun e dizajnit të uebit, kryesisht për shkak të tërheqjes së tij ndaj përvojës së përdoruesit. Dizajni i materialit u prezantua për herë të parë në verën e vitit 2015 nga Google, dhe që atëherë ka qenë një koncept i lidhur pazgjidhshmërisht me këtë kompani. Cilat janë tiparet e tij dalluese, parimet bazë dhe a është aq i mirë sa thonë për të? Më shumë për këtë më vonë në artikull.

Dizajni i materialit nuk është thjesht një ide; dikur ai i detyroi dizajnerët të rishqyrtojnë plotësisht pikëpamjet e tyre mbi procesin e krijimit të faqeve të internetit dhe aplikacioneve. Uebsajtet moderne përdorin plotësisht kornizat e dizajnit të Google dhe dokumentacionin e dizajnit të materialit. Por, para se të kalojmë në ëmbëlsirë, le të përcaktojmë konceptin e materialit të projektimit, qëllimet dhe karakteristikat kryesore të tij.

Çfarë është dizajni i materialit?

Material Design është një gjuhë grafike dhe një stil dizajni i krijuar nga ekipi i dizajnit i Google për të ndihmuar dizajnerët të krijojnë faqe interneti dhe aplikacione që janë të arritshme, praktike dhe të dobishme. Koncepti bazohet në dokumentacionin e gjallë që është i disponueshëm publikisht dhe mund të përdoret nga kushdo i interesuar në konceptin e dizajnit të materialit. Deri më sot, dokumentacioni përditësohet vazhdimisht për të pasqyruar ndryshimet në dizajn dhe zhvillim. Falë kësaj, dizajni i materialit mbetet i rëndësishëm dhe po zhvillohet vazhdimisht si drejtim.

Dizajni i materialit ka një sërë qëllimesh dhe parimesh të deklaruara nga krijuesit e tij. Lista mund të duket disi idealiste, por idetë kryesore të saj do t'i paraqesim më poshtë.

Qëllimet e dizajnit të materialit

1. Krijo një gjuhë vizuale që kombinon parimet klasike të dizajnit të mirë me inovacionin dhe aftësitë e shkencës dhe teknologjisë moderne.
2. Zhvilloni një sistem të vetëm bazë që ju lejon të krijoni dizajne universale për platforma dhe pajisje të ndryshme. Parimet celulare janë themelore, por prekja, komandat zanore, hyrja e miut dhe tastiera janë metodat kryesore të hyrjes dhe ndërveprimit që do të merren parasysh gjatë zhvillimit të dizajneve.

Parimet e dizajnit të materialit:

1. Dizajni i materialit është një metaforë: sinjalet vizuale dhe të gjithë elementët e dizajnit grafik duhet të bazohen dhe të ndërlidhen me realitetin përreth, botën materiale.
2. Grafik, i qartë, i qëllimshëm: Teoria bazë e dizajnit (përdorimi i llojeve, rrjeteve, organizimi i hapësirës, ​​shkalla, proporcioni, ngjyra dhe imazhet) duhet të drejtojnë pamjet dhe të formojnë bazën vizuale të materialit të projektimit.
3. Çdo lëvizje ose veprim ka rëndësi: lëvizja e objekteve ose veprimet e tjera të kryera nuk duhet të ndërhyjnë tek përdoruesi, përkundrazi, ato duhet të sigurojnë komoditetin dhe qëndrueshmërinë e veprimeve të kryera.

Përveç qëllimeve dhe parimeve të mësipërme, ka edhe shumë faktorë të tjerë udhëzues. Të cilat përcaktojnë dizajnin e materialit. Dokumentacioni i dizajnit të materialit ndahet në shumë koncepte dhe teknika specifike. Kështu, për shembull, Google ka zhvilluar një sërë rregullash specifike për krijimin e animacioneve, stileve, paraqitjeve, komponentëve, etj.

Të gjitha këto rekomandime bazohen në vetitë themelore të dizajnit të materialit. Gjëja më e rëndësishme është se dizajni i materialit bazohet në realitet, në të cilin objektet janë të vendosura në një hapësirë ​​pothuajse tre-dimensionale. Për sa i përket estetikës, dizajni i materialit bie diku midis dizajnit të sheshtë dhe skeuomorfizmit.

Dizajni i Materialit Ngjyra dhe Tipografia

Ngjyrat në dizajnin e materialit kanë shumë të përbashkëta me . Paletat e materialeve janë mjaft të guximshme dhe të ndritshme. , njëlloj si në dizajnin e sheshtë, thjeshtë sans serif.

« Dizajni i materialit është plot me tone të heshtura, një qasje që merr shenjat e saj nga arkitektura moderne, shenjat rrugore, shiritat e shënjimit dhe fushat sportive,” sipas dokumentacionit të dizajnit material të Google. “Theksoni hijet dhe pikat e theksuara. Përdorni ngjyra të papritura dhe të ndritshme».

Dhe gjëja më e mirë në lidhje me konceptin e ngjyrave të dizajnit të materialit është përdorimi i kontrastit të qartë. Për lehtësinë e përdoruesve, Google ofron një gamë të plotë ngjyrash me mostra të disponueshme për shkarkim. Konceptet e ngjyrave janë aq të thjeshta saqë ju pyesni veten nëse Google mendon se dizajnerët e kanë harruar plotësisht teorinë e ngjyrave.

Udhëzimet për zgjedhjen dhe përdorimin e shkronjave janë gjithashtu mjaft themelore dhe të thjeshta. Shkronja e parazgjedhur për të gjitha aplikacionet – Roboto – është e disponueshme për shkarkim këtu, ku mund të gjeni edhe një tabelë të kombinimeve dhe përzgjedhjes së shkronjave.

Modelet, struktura dhe dizajni

Në strukturën dhe rregullimin e elementeve, dizajni i materialit huazon shumë nga koncepti i dizajnit të printimit. Dizajni i materialit inkurajon projektuesit të krijojnë dhe përdorin një rrjet bazë dhe strukturë matematikore për të vendosur elementë të bazuar në modele.

Më pas, shablloni ndahet në zona, për secilën prej të cilave dokumentacioni ofron një numër rekomandimesh që synojnë përmirësimin e përvojës së përdoruesit në sit ose aplikacion (ka edhe rekomandime në lidhje me rëndësinë e një elementi të veçantë).

Elementet bazë të dizajnit të materialit

Çdo element nga i cili mund të përbëhet një faqe e krijuar në stilin material përshkruhet në detaje në dokumentacion. Duke filluar nga mënyra e krijimit dhe si duhet të duket, te vendi, mënyra dhe momenti i shfaqjes së tij në ekranin e përdoruesit. Në përgjithësi, është e vështirë të dalësh me diçka që krijuesit e humbën ose nuk e bënë. Lista përfshin 19 komponentë kryesorë strukturorë, disa prej tyre janë renditur më poshtë.

• Ekrani i poshtëm (shtresat e poshtme të dizajnit)
• Butonat
• Kartat
• Dialogjet
• Ndarësit
• Rrjetet
• Listat
• Bare progresi dhe aktiviteti
• Rrëshqitës
• Nëntitujt
• Çelësat
• Skedat
• Fushat e tekstit
• Dritaret kërcyese

Projektuesit që pëlqejnë pamjen e komponentëve të propozuar mund të shkarkojnë edhe burimin për Illustrator. Ikonat dhe detajet e tjera çiftohen me stilet dhe përshtaten me shabllonin e zgjedhur.

Komoditeti, aksesueshmëria dhe përvoja e përdoruesit

“Një produkt është i arritshëm kur të gjithë njerëzit – pavarësisht nga aftësia – mund ta përdorin atë për të arritur qëllimet e tyre. Një produkt vërtet i suksesshëm është i arritshëm për audiencën më të gjerë të mundshme.”

Dokumentacioni i dizajnit të materialit fokusohet shumë në aksesueshmërinë, përdorshmërinë dhe përvojën e përdoruesit, të cilat janë të gjitha shumë të rëndësishme. Ndërsa shumë nga vetitë estetike të dizajnit të materialit mund të duken mjaft primitive për projektuesit me përvojë, disa nga konceptet e përvojës së përdoruesit dhe ndërveprimit zbatohen në nivelin më të lartë.

Seksioni mbi modelet e ndërveprimit është veçanërisht i dobishëm. Ai zbulon ide që synojnë t'i bëjnë elementë të caktuar të dizajnit universal në lidhje me të gjitha projektet e mundshme në internet. Për shembull, formati për të specifikuar datën dhe orën, ose operacionin e kërkimit. Këto mund të ndryshojnë nga një vend në tjetrin, por ndryshimet janë të vogla dhe në përgjithësi këta elementë janë mjaft universal. Nëse një vizitor sheh një xham zmadhues, ai kupton se ka një kërkim para tij që mund të përdoret, edhe nëse nuk ka indeks teksti pranë tij. Kjo është arsyeja pse Material Design përmban disa nga mjetet më të thjeshta që përdoruesit presin t'i shohin në çdo faqe interneti dhe janë mësuar të punojnë me të.

Aksesueshmëria dhe kuptueshmëria e dizajnit është një aspekt tjetër që mbulohet gjerësisht në dokumentacionin e dizajnit të materialit. Dizajni i materialit duhet të marrë parasysh përdoruesit që mund të ndërveprojnë me të jo vetëm përmes ngjyrave dhe formave, por edhe përmes tingujve dhe kërkimit zanor. Është gjithashtu e rëndësishme të merret parasysh aftësia për të parë dizajne në pajisje me kontrast të lartë, një ekran të madh, pa ekran të dukshëm, vetëm kontroll me zë ose një kombinim i të gjithë këtyre elementeve.

10 Burimet e Dizajnit Material

Dizajni i materialit është një temë e njohur diskutimi dhe një burim frymëzimi për shumë blogje, forume dhe faqe të tjera ku mblidhen dizajnerët e uebit. Ka shumë gjëra të dobishme që mund të shkarkohen drejtpërdrejt nga burimet e Google, por përveç kësaj ka shumë burime që postojnë punën e tyre në stilin e dizajnit të materialit. Këtu janë disa sajte që mund t'ju ndihmojnë të mësoni konceptet e dizajnit të materialit dhe të shkarkoni materiale falas.

1. Komplete elementësh në stilin e dizajnit të materialit për telefonat inteligjentë dhe pajisje të tjera celulare (shih më poshtë).

Pjesa 1: Galeria e Dizajnit të Materialeve për Uebfaqe dhe Aplikacione – Materiale Falas

Për të thjeshtuar detyrën për ata lexues që vendosën të marrin përsipër një projekt në stilin e dizajnit të materialit, vendosëm të krijojmë një galeri me zhvillime dhe zgjidhje të gatshme. Thjesht merrni një ose më shumë komplete falas, me mirësjellje të stilistëve në mbarë botën. Më poshtë do të gjeni një koleksion të gjerë të artikujve të tillë.

Dizajni i materialit nga UXPin

Dizajni i materialit nga Creative Tim

Zgjedhje falas e materialeve nga Designtory

UIDE – material skicë falas nga Mateusz Dembek

Burimi i skicës së dizajnit të materialit të Google

L Dizajni i materialit Bootstrap në stilin Android nga Vitaly Chernega

Burim skicë për dizajnin e materialit nga Boilerplate

Material Design për EL Passion

Blloqe Froala në stilin material

Free Landing 1.0 në stilin material

Dizajni i materialit celular

dizajn material avsc

Dizajni i materialit UI nga Jakub Kośla

Dizajni i materialit për Android nga Ivan Bjelajac

Dizajni i materialit nga Ultralinx

Dizajni i materialit celular nga Emma Drews

Përzgjedhje materiale falas nga Adrian Goia

Dizajni i materialit nga UI8

Dizajni i materialit për Photoshop nga Psddd

Dizajni i materialit Android PSD nga Nine Hertz

Koleksione të tjera të dizajnit të materialeve që mund të jenë të dobishme

Dizajni material interaktiv i stacionit nga Nelson Sakwa

Widgets në stilin e materialit nga Elad Izak

Skicë materiale nga Benjamin Schmidt

Materiali i zgjedhësit të ngjyrave Zgjedhësi i ngjyrave

Le ta përmbledhim

Koncepti i dizajnit të materialit është një zgjidhje e mirëmenduar për krijimin e çdo faqeje interneti moderne ose dizajn aplikacioni. Për më tepër, ekziston një udhëzues mjaft i detajuar për dizajnin e materialit që do të jetë shumë i dobishëm për dizajnerët fillestarë, por mund të duket pak primitiv për dizajnerët me përvojë.

Është e mundur që nesër të shfaqet një dizajn krejtësisht i ri, i cili do të fshijë dizajnin material nga kujtesa e zhvilluesve, ashtu siç fshiu teknologjinë Flash në kohën e vet. Askush nuk është i imunizuar nga kjo. Por si stilistë, ju keni të drejtë të vendosni vetë se sa interesant dhe i nevojshëm është dizajni i materialit për ju në projektet tuaja të ardhshme, si dhe të përdorni zhvillimet dhe elementët e tij për eksperimentet tuaja.

Argëtohuni duke krijuar dizajne dhe nëse keni diçka për të shtuar në artikull, mos ngurroni të shkruani sugjerimet tuaja në komente.