Mobiilne
Armastusega disaineritele (Esiosa arendaja kiri)
Head disainerid,
See kiri on pruulinud aastaid. Osa sellest on pika aja jooksul erinevatele disaineritele kõnes ja kirjalikult edastatud.
Kuid ma olen alati kartnud selle avaldamist kartusest, et see võib kaasa tuua praeguse disaineri või kliendi, kellega ma töötan. Nii et enne jätkamist tahaksin rõhutada, et see ei ole konkreetne kaebus, vaid üksikasjalik loetelu 18-aastastest erimeelsustest.
Oleme töötanud koos peaaegu kaks aastakümmet ja igal minu saadetud PSD-failil on olnud (enam-vähem) samad probleemid. Andke mulle andeks siis sündsusetus, kui üritasin teile oma tööd õpetada.
Ma ei eelda, et õpetaksin teile graafikat või esteetikat. Ma ei süvene tüpograafiasse, loetavusse ega tühimiku kasutamisse.
Selle asemel tahaksin selgitada, kuidas teie töö viljad minu teada annavad.
Tahaksin teile meelde tuletada, mida on vaja kujunduste reprodutseerimiseks pikslit täiuslike veebilehtedena. Tahaksin teile öelda, kuidas teie kujundusfaile dokumenteerimisel kasutatakse ja kuidas teie loodud pildid määravad kasutatava tehnoloogia - kuni skaalautuvuse ja jõudluseni.
Samuti tahaksin demonstreerida, mida saab kiiresti ja lihtsalt teha ning mis tekitab üldkulusid, mis kogu lavastuse indekseerib.
Ja eelkõige tahaksin teile meelde tuletada, et pilt praegu loodavast loomast saab elusolend, mis suhtleb ja reageerib, suhtleb tuhandete erinevate inimestega, kes peab neid õpetama ja neilt võimalikult vaevata õppima. Nii selle kui ka nende jaoks.
Dokumentatsiooni kujundamine
Kõigepealt tahaksin teile meelde tuletada, et PSD-failid mida teie toodate, pole mitte ainult piltide allikad, mida klient peab heaks kiitma, vaid ka tehniline dokumentatsioon ja lähtematerjalid arendajatele. Seetõttu hoidke palun oma kihte ja rühmi korras, korrastatud ja nimega .
Märkige oma disain üles. Looge kas kasutatud tavadega eraldi fail või märkige need eraldi peidetud kihti.
Öelge mulle, milliseid fonte olete milleks kasutanud. Andke mulle teada, milliseid värve, vahekaugusi ja kontekste kasutada. Mul on vaja teada.
Pean ka teadma, mida ekstrapoleerida, kui konkreetsele funktsioonile pole kujundust tehtud.
Ma arvan, et see, mida ma öelda tahan, on: kui vähegi võimalik looge lühike stiilijuht kujundatava toote jaoks.
Mõlemast küljest lisage standardsete tekstiplokkide (näiteks pealkirjade) lisamisel nende taha ristkülik, mis tähistab nende ümber asuvat tühikut. See peaks võimaldama teil neid iga kord järjekindlalt paigutada. Kui see on liiga palju tööd, märkige vähemalt see, milline näide dokumendis on kaanon.
Ma ei saa teile öelda, kui tihti leian, et pealkirjad on paigutatud silma järgi, nii et need sobivad visuaalselt ühe eksemplariga, kuhu nad paigutatakse, kuid kui mõõta, siis paljastada, et mõlemal on oma individuaalne tühik.
Sama lugu on sisuplokidega. Kui teil on nimekiri erinevatest siseplokkidest, palun jätke need järjekindlalt välja.
Ma räägin teile rohkem Sisu kujundamine jaotises, kuid ärge eeldage, et teie pealkirjad jäävad alati ühte ritta, ja kasutage seda teavet failis.
Jätkan neid pealkirju, mille fondi suurus on 22 pikslit ja rea kõrgus 92 pikslit (ilmselgelt kopeeritakse ja kleebitakse pealehe pealkirjast). Teie valitud seaded on asjakohased, isegi kui need ei muuda eksporditud faili visuaalselt.
Tehnoloogia kujundamine
Sellel on kaks külge: mis saab teha ja mis on sobilik keskmise jaoks.
Kuigi oleme jõudmas kiiresti punkti, kus veebisaidi väljatöötamiseks on kõik tehniliselt võimalik (kui mitte midagi muud, võin selle siiski lõuendi abil piksli haaval välja joonistada), on paljud neist lahendustest mitte tootmiseks valmis.
Asjaolu, et leidsite näite, kus keegi WebGL 3D edukalt kombineeris demolehe jaoks CSS blur plus filtrimaskidega, ei tähenda, et saate seda kasutada täisakna parallakspaneelina ühelehelises rakenduses.
Ja kui soovite tõesti veritsevat serva kõndida, pidage nõu oma arendajaga enne projekti kinnitamiseks esitamine. Vastasel juhul on raske klienti vähemaga leppima saada.
Kui soovite siiski servi proovida ja kui soovite seda oma lõbuks proovida, võtke minuga privaatselt ühendust. Mulle meeldib selliseid asju luua sama palju kui sina. Lihtsalt ärge pange seda kraami eelarvega tootmisprojekti.
Nendest asjadest kaugemale - tehes olevate piiride testimisest kaugemale - proovige olla suhtes tundlik ja mõistlik mida peaks tegema .
Sa ei ole graafikakunstnik; Sa oled rohkem kui see, sa oled disainer.
Te ei kujunda seda mitte ainult teatud viisil, vaid peate selle ka kujundama jooksma teatud viisil, suhelda ja käituma teatud viisil.
Disaineritele tuttava klišee leidmiseks kõikjal: Mis kasu on uhke välimusega toolist, kui keegi ei saa sellel istuda ?
Peate oma disaini lisama laadimiskiiruse, teostamise kiiruse ja kasutusmugavuse, et see oleks kujundus selle asemel pilt.
Püüdke saavutada võimalikult palju ainult HTML-i ja CSS-i abil.Püüdke saavutada võimalikult palju ainult HTML-i ja CSS-i abil. Vältige Photoshopis saadaolevate kena välimusega funktsioonide kasutamist. Ärge kasutage segamist! Ärge kasutage faux boldi ja faux kursiivi.
Kui te ei kavatse elementi kujutiseks kujutada, ärge kasutage muid filtreid kui kõige lihtsamad varjud.
Ärge laske mul värve arvutada ega valida, kuna olete kasutanud segatud värvitäiteid. Ärge võltsige läbipaistvaid pilte ülekatte segamise abil; Mul on tegelikult vaja kohapeal läbipaistvat pilti.
Kui kasutame kasutajaliidese raamistikku, nt Bootstrap , paljud neist probleemidest on juba lahendatud, nii et õppige, kuidas seda tehakse ja kuidas saab seda muuta. Ärge minge lihtsalt tahtmatult midagi mitteseotud kujundama.
Kui teie kujundus pole kooskõlas raamistiku tegevusega, pole selle rakendamine disaini rakendamine. Selle asemel alistame raamistiku valikuliselt, nii et see ei sega meie disaini ja seejärel rakendab seda nullist. Koormus kahekordistub poolitamise asemel.
Ja lõpuks, ärge kasutage saidil rohkem kui kolme fonti - või fondivarianti. Kui vajate kuut erinevat kaalu, millel kõigil on oma tavalised ja kaldkirjad, ei ole te enam veebi jaoks mõeldud.
Interaktiivsuse kujundamine
See on tohutu. Ja see kiri oli algselt kirjutatud ainult selle teema jaoks. Sa pead tõesti teadma ja mõistma kõiki võimalusi, kuidas kasutajad ja funktsionaalsus saavad suhelda.
Alustame lihtsamatest asjadest: linkidest.
Linkidel pole ainult kahte olekut.
Minu saadetud navigeerimisel pakute alati kujundusi lingid ja an aktiivne link (Käesolev lehekülg).
Muudel juhtudel pakute tavaliselt alus ja hõljuma osutab.
Kui soovite olla kõige vähem kasutajasõbralik, peaksite selle jaoks olema erinevad kujundused alus, hõljutage kursorit ja keskenduda osariigid ( külastatud ja aktiivne on ka UX jaoks mõnusad saada). Ja navigeerimiseks on mõlemal link ja aktiivne link olemas kõik ülaltoodud olekud .
Oh, ja kas sa ei julge muuta olekute vahelist lingi paigutust (erineva piiri laius, polsterdus jms).
Samamoodi, kui see ei näe välja nagu nupp, pole sellel ka tausta. Periood. Tekstisisese tekstielemendi täitmine on segadus ja polsterdamata tekstitaust ei saa kunagi hakkama.
Kuna me hakkame seda kasutama mobiilseadmes, veenduge, et eraldi interaktiivsete elementide vahel oleks piisavalt tühimikke ja et iga hitbox oleks piisavalt suur. Ma arvan, et vähemalt 42px mõlemal teljel on norm.
Joonistage nähtamatu ristkülik või peidetud kiht, mis näitab tabamiskaste; veenduge, et need ei kattuks ja et kasutajate interaktsioon oleks üheselt mõistetav.
Vormielemendid on veelgi hullemad.
Kõige tavalisem juhtum, mida ma näen, on raadionupud ja märkeruudud. Standardsed on koledad! Nii et kujundate ise ja annate mulle kontrollitud ja kontrollimata oleku ning peate ennast valmis.
Märkekasti jaoks on aga terve mitmemõõtmeline olekutabel ja igaüks peaks olema kasutajale visuaalselt näidatud.
Meil on järgmised olekud:
- Kontrollitud või kontrollimata
- Hõljutage kursorit või mitte
- Keskendu või mitte
- Lubatud või keelatud
- Viga või mitte
Igaüks neist saab teistega kombineerida.
Keelatud takistab mõningate kombinatsioonide kasutamist (hõljutus ja fookus on keelatud tavaliselt ebaolulised), kuid mitte kõiki (check-disabled-error on märkeruudu jaoks täiesti kehtiv ja informatiivne olek). Seega on meil lõpuks 16 lubatud ja neli puudega riiki, mis annavad kokku vähemalt 20 erinevat osariiki. Näiteks olekud, mille tavaliselt mulle annate, on selles seadistuses kontrollitud-ei-lubatud-mitte ja kontrollimata-ei-lubatud-mitte.
Teistel vormielementidel ei pruugi olla märkimata-kontrollimata olekut, kuid need võivad olla tühjad või tühjad (kuvatakse kohatäite tekst). Neil võib olla ka keerulisem informatsiooniline olek, nii et vea või mitte juhtum võib olla sama keeruline kui neutraalne-hoiatav-viga-edu.
Seejärel peaks teil olema kohustuslikud või valikulised indikaatorid koos selgelt määratletud kujunduse ja kujunduse siltide, sisestusabi ja veateksti jaoks.
Ja kui soovite tõesti olla kasutajasõbralik, vajate põlised seadistatud määrdunud olekuid, mis näitavad, et kasutaja pole kunagi andmeid esitanud või andmed on juba salvestatud või neid on veel muudetud, kuid neid pole veel salvestatud.
Interaktiivsuse kujundamine on keeruline. Ja kui soovite muuta raadionuppude välimust, siis ärge tehke seda kahe olekuga libedalt.Mida ma ütlen, on: interaktiivsuse kujundamine on keeruline. Ja kui soovite muuta raadionuppude välimust, siis ärge tehke seda kahe olekuga hõlpsalt.
Ainult üks viimane punkt interaktiivsuse kujundamisel: otsustage, milline suhtlus välja näeb. Tähendab, otsustage, milliseid konventsioone te interaktiivsete elementide jaoks kasutate, ja ärge kasutage neid millelegi muule.
Ei, linkide tähistamiseks ei ole lubatud kasutada oma peamist brändivärvi, eriti kui kasutate olulise sisu rõhutamiseks sama lahendust!
Sisu kujundamine
Iga täidetud elemendi ideaalne paigutus huulepulk sisu on kliendile pildiga esitamiseks piisavalt hea, et saada visuaalse stiili heakskiit. Kuid sisukujundus ei alga ega lõppe sellega.
Kui teil on ülevaade sellest, mida soovite sisupaigutusega teha, pidage meeles, et töötate dünaamilise sisuga.Kui teil on ülevaade sellest, mida soovite sisupaigutusega teha, pidage meeles, et töötate dünaamilise sisuga. Iga sisu puhul peate kontrollima kahte juhtumit:
- Mis siis, kui seda on liiga palju?
- Mis siis, kui seda on liiga vähe (või puudub see täielikult)?
Kontrollige, mis juhtub, kui pealkiri on naeruväärselt lühike või ebatavaliselt pikk. Kuidas peaks sisuplokk välja nägema, kui olulised elemendid puuduvad? Mis siis, kui pilti pole?
Kui lehesektsiooni sisu pole, kas eemaldame kogu jaotise - pealkirja, konteineri ja kõik - või jätame jaotise alles ja kuvame midagi järgmiselt: 'Pole veel artikleid, kontrollige hiljem uuesti?' Veelgi parem: „Kas soovite, et teid teavitataks selle sisu saabumisest? Registreeruge meie uudiskirja saamiseks! '
Tehke otsused! Siis kujunda need asjad!
Kui kavandate välisest või dünaamilisest allikast laaditud voogu või sisu, ärge unustage lisada kõiki vigu ja märguandeid. Tegelikult kujundage lehe teavitamise metasisu näitamaks, kuidas see kogu maailmas välja näeb, seejärel järgige neid kujunduskonventsioone, et teavitada kasutajat, kui midagi valesti läheb.
Vältige fikseeritud laiusega nuppe ja fikseeritud kõrgusega tekstiplokke. Ja kui ma pole seda varem öelnud, Kui arvate, et see saab alati olema üks tekstirida, siis eksite! Nüüd minge kontrollige parimat viisi mitmerealiseks muutmiseks.
Veenduge, et sama sisu on sama struktuuriga.
Kui sama pealkiri on nähtav mitmes kohas, ärge rasvake ühte sõna ühel juhul ja teist kusagil mujal!
Tegelikult proovige pealkirjade struktuure täielikult vormindada. Samamoodi ärge murda teksti käsitsi ühes kohas, vaid teises kohas teisiti. Tegelikult ärge murda teksti käsitsi!
Need asjad võivad teie disaini paremaks muuta, kuid pidage meeles, et sisu sisestatakse suure tõenäosusega CMS-i kaudu ja selle sisestaja ei pruugi enne avaldamist näha, kuidas see välja näeb või tal pole isegi tööriistu käsitsi purustamiseks või vormindage tekst.
Kujundus samade piirangutega, mis lõplikul sisul on - fikseeritud laiusega tekstimahutid ja automaatne sõnaümbris. Kui see näib niimoodi kole, pole disain hea.
Reageerimisvõime kujundamine
See on viimasel ajal palju edasi arenenud. Vähemalt nendel juhtudel, kui mobiil on tegelikult loodud. Üha enam laseme bootstrapil selle välja mõelda ja lööme Band-Aidsile pragusid.
Sellest hoolimata peate teadma mõnda lihtsat põhimõtet.
Esiteks ei ole mobiil- ja töölaua variandid eraldi lehed. Ma tean, et sa tead seda. Need on lihtsalt sama lehe tagasivoolud.
Lihtsustatult öeldes on see sama mis vasakule joondatud tekstiga töötamine. Lause ei muuda sõnade ega tähtede järjekorda lihtsalt seetõttu, et olete selle paigutanud väiksemasse konteinerisse.
Samuti tuleks sisugruppe jagada kõigi paigutuste vahel. Veergude lisamisel veenduge, et veergude vaheajad oleksid järjepidevad.
Samuti peaksid teie kokkulepped lehe erinevate versioonide puhul järgima sama struktuuri. See tähendab, et kui kaks elementi näevad töölaual identsed, peaksid need olema identsed ka mobiilseadmetes.
Oh, ja kui soovite parallaksi, andke sõbralikult pilt, mis on liikumiseks piisavalt suur. Kui sobitate pilti või kärpite seda nii, et see näeks õigesti faili, mida näidate kliendile, pole mul midagi liikuda.
Erandite kujundamine
Muidugi on alati võimalikud ka erandid. Pealegi on need vajalikud toote atraktiivse ja efektiivse väljanägemise jaoks. Kuid ärge lisage neid kastide kaupa esimesele passile.
Kui leiate, et lahendate sama disainiprobleemi ikka ja jälle, ei toimi see, eriti kui otsite igal juhul erinevat lahendust.
Kui olete kõik ülaltoodud teinud, peaksite saama tõhusa, stabiilse ja järjepideva (kui mõnevõrra igava) kujunduse. Nüüd on aeg asju vürtsitada. Vaadates lehte tervikuna, rääkige kliendiga, et tuvastada rahalennud - esemed, mis annavad neile kõige suurema paugu.
Oleme olnud koos töötama aastaid ja meie kliendid on alati olnud lõpptulemusega rahul.
Muidugi hüppan sisse, kui teil jääb mõni neist punktidest ilma ja kui keeruka kujunduse kasutamine on õigustatud, kirjutan renderdamisloogika JavaScripti, kui vaja.
Astun sisse ja põhjendan vajadusel kliendile lisatööd. Pagan, olen juba ammu kujundanud vorme ja interaktiivsust saadud kujunduste peale, nii et see pole probleem.
Loodan lihtsalt, et olles seda lugenud, peate järgmisel korral koos töötades silmas mõnda neist vihjetest. Loodan, et nad teavitavad teie tööd ja annavad juhiseid, kui te ei tea, mida teha. Tahaksin, et saaksite aru, et meie suhe on minu jaoks oluline ja et ma pole seda kirjutanud selleks, et teile haiget teha, vaid selleks, et meie suhet paremaks muuta.
Armastusega,
Teie arendaja
