Ilmselt olete lugenud fraasi „täiuslik kujundus“ lugematuid kordi, isegi mõtlemata selle tähendusele või tähendusele. Viimase paari kuu jooksul on võimalus, et olete kuulnud pikslitega täiusliku disainikontseptsiooni langusest, kuid nende väidetega on väike probleem, eriti mis puudutab iOS-i kasutajaliidese kujundust.

Nimelt pole pikslitega täiusliku paigutuse määratlus kivisse raiutud nagu enamik iOS-i kasutajaliidese juhiseid. Inimesed tõlgendavad seda erinevalt, sellest ka probleem: Piksli täiuslikkus võib mõnele tunduda vastuvõetamatu, kuid teised kasutavad põhimõtet ka järgnevatel aastatel, ehkki teise nime all. See on peamiselt nomenklatuuri probleem.

päisefail C++-s

Mis on pikslitega täiuslik kasutajaliidese disain?

Kuna pikslite täiuslikkuse kohta pole selget määratlust, on minu arusaam piksli täiusliku kujunduse kontseptsioonist see, et kõik on tehtud teravuse ja truuduse maksimeerimiseks. Kui kujundus on rakendatud, näeb see igal iPhone'i ekraanil välja identne, ilma artefaktide ja probleemideta.

Pikslitega täiusliku iOS-i rakenduse kasutajaliidese loomine tähendab, et loote piksleid silmas pidades kujunduse ja rakendate ekraanil täpselt sama kujundust, viidatud kujunduse iga pikselini, tagades samal ajal selle kohandumise teiste seadmetega.

Aga miks Pixel-Perfect Design?

Kasutajaliidese disainerid nad teevad kõik endast oleneva, et luua liideseid, mida on kerge tajuda ja nendega suhelda. Arendaja ametialane kohustus on austada disaineri tööd ja rakendada liides täpselt nii, nagu see tarniti.

Rakenduste puhul, mis pole pikslitega täiuslikud, ei esine kasutajatel tõenäoliselt rakenduse kasutamist ja nautimist takistavaid suuri probleeme, kuid pikslitega täiuslikud rakendused näevad kindlasti teravamad, puhtamad ja järjepidevamad.

Apple App Store'i väga konkurentsivõimelise olemuse tõttu on teretulnud kõik detailid, mis parandavad üldist välimust ja kasutuskogemust. See võib aidata teie rakendust eristada ja muuta selle nähtavamaks ning seega kasumlikumaks.

See kiire iOS-i kasutajaliidese kujundusjuhend juhatab teid läbi protsessi alates disaini põhietapist kuni rakendamiseni, alates disaineri ja arendaja vaatenurgast.

IOS-i jaoks kasutajaliidese kujunduse loomine

Alustame. Piksli täiuslikud rakendused algavad ilmselt piksli täiuslike kujundustena ja me kõik teame, kust need tänapäeval pärinevad.

Olulised iOS-i kujundustööriistad

Ma arvan, et mul on seda öeldes õigus Visand on muutunud veebi- ja mobiilsete kasutajaliideste / kasutajaliideste disainerite de facto standardiks. Kuigi Adobe XD on paljutõotav alternatiiv , jääb populaarsuse poolest Sketchist maha.

Järgmisena valime tahvli suuruse. Täna on meil iOS-i seadmed erinevad ekraani suurused ja proportsioonid ja me peame oma kujunduse loomiseks valima suuruse. Tänu automaatsele paigutusele kohandub see hõlpsasti teiste ekraanisuurustega. Vajadusel saate luua erinevate kujunduste jaoks erinevad variatsioonid Suuruseklassid .

Ainus tõeline küsimus on siin: Kuidas peaks disainer arendajaga jagama teavet erinevate ekraanide paigutuste kohandamise kohta?

Õnneks pole vaja igaühe spetsifikatsioone üles kirjutada, kuna Sketchi automaatne kujunduse pistikprogramm hoolitseb selle eest. Disainer peab lihtsalt määrama soovitud automaatse paigutuse, eksportima ühe klõpsuga erinevatesse ekraanisuurustesse ja arendaja saab aru, kuidas paigutuspiiranguid seada ja veenduda, et kõik näeks hea välja, olgu see siis iPhone X või vana iPhone 5..

Märge: Alates versioonist 44 on Sketchi meeskond dramaatiliselt parandanud suuruse muutmise juhtelemente, andes kasutajatele rohkem võimu ja kontrolli selle üle, kuidas kihid peaksid vanemate suuruse muutmisel käituma.

Disaini seadistamine

See kõlab suurepäraselt, kuid me pole veel valinud suurust, mida oma kujunduse loomiseks kasutame. Vastavalt David Smithi iOS-i statistika , 57% kõigist iPhone'i kasutajatest toetuvad 4,7-tollistele ekraanidele, mis on kasutusele võetud iPhone 6 / 6s-s ja mida hiljem kasutatakse iPhone 7-s ja isegi hiljuti välja antud iPhone 8-s.

Olen kindel, et olete juba tuttav Apple'i 4,7-tolliste ekraanidega, kuid juhul, kui te pole numbritega tegelev inimene, räägime 750x1334 pikslist ekraanist 326 pikslit tolli kohta (PPI). See on tavaline Retina ekraan ja koodis on meil pool eraldusvõimet. Seetõttu soovitan teil alustada sellega 375x667 pikslit.

Järgmisena peame veenduma, et meie iOS-i kasutajaliidese disain maksimeerib teravuse. Selle eesmärgi saavutamiseks peate aktiveerima pikslitega :

Siin on näide lihtsast ristkülikust koos pikslite klõpsatusega ja ilma:

Kasutab Ümmargune: täis pikslit vektori objektide redigeerimisel:

hea ühikutest on põhjalik ja seda nõutakse tavaliselt ainult üks kord.

Need on ilmselgelt ainult põhitõed ja sketšis pikslitega täiuslike iOS-i kasutajaliidese elementide lähemaks vaatamiseks peaksite kontrollige ametlikku õpetust .

Kasutage julgelt keerukaid vektoranimatsioone, sest arendaja saab hõlpsasti mängida loteriiraamatukogu . Adobe After Effectsi animatsioone saate mängida mobiilseadmes, ilma et oleksite kogenud artefakte. Esitage lihtsalt JSON-fail arendajale ja olete valmis.

Kasutage sRGB värviprofiili nii palju kui võimalik. Kui sRGB-st ei piisa laia gameriga ekraanidel, peate pakkuma värve või graafikat (üks sRGB ja teine ​​sisseehitatud värviprofiiliga). Üksikasjalikku teavet värviprofiilide kohta leiate aadressilt Apple'i HID-juhised kui seda vajate.

Pixeli täiuslike tulemuste kohandatud kood

Suurepärane! Nüüd teame piisavalt, et luua pikslitega täiuslik paigutus. Kuidas seda arendajaga jagada? Ilmselt peame jõudma oma tööriistakasti.

Õigete tööriistade valimine

Disaineri töö arendajatega jagamiseks on uskumatult kasulikke tööriistu: Zeplin . Lihtsalt kasutage seda ja arendajal on peaaegu kogu vajalik teave teie kasutajaliidese kujunduse töö tagamiseks: graafilised ressursid, kujunduses kasutatavad fondid ja värvid, tekst ja palju muud. Ligikaudu ainsad asjad, mida disainer võib siinkohal pakkuda, on fondifailid, juhul kui nad kasutavad fonte, mis pole iOS-is.

Teine lahe tööriist on PaintCode , mis saab vektoripiltidest koodi genereerida. PaintCode kasutab teie SVG-teesid ja värviandmeid Swifti või ObjC-klassi loomiseks. PaintCode'i abil saate kasutada väljendeid, muutujaid jne. nuppude, üles / alla olekute, dünaamilise teksti, muutuva animatsiooni ja palju muu passiivse / aktiivse oleku loomiseks.

Ilmselt peate tuginema Xcode'ile ja mõnele standardsele iOS-i arendustööriistale, kuid me jõuame selle juurde hiljem.

See on äärmiselt kasulik, kui peate dünaamiliselt värskendama ainult mõnda kujunduselementi, näiteks muutma vestluse ikoonil gradiendi tausta põhivärvi. Ja lisaboonusena kaotab teie rakendus kaalu.

Ok, arendajal on lõpuks olemas kõik, mida nad vajavad, kuidas siis piksli täiuslikku paigutust täiuslikult rakendada (vabandust sõnamängu eest)?

Tööriistade konfigureerimine ja sünkroonimine

Zepliniga peaksite saama peaaegu kõik vajaliku tingimusel, et disainer seadistab kõik õigesti. Kui midagi jääb kahe silma vahele või ebaselgeks, pakub Zeplin tõhusat tagasisidefunktsiooni, mis võimaldab disaineril ja arendajal võimalikke probleeme kiiresti tuvastada ja lahendada. Isegi kui kõik on õigesti tehtud, saab kommentaare kasutada kommentaaride ja väikeste täiustuste jaoks.

Kuid nagu me kõik teame, ei lähe kõik alati plaanipäraselt, nii et mõnikord peab arendaja valima värvi, isegi kui disainer esitas rakenduses kasutatud värvipaleti.

Et seda õigesti teha, peate oma tööriistad sünkroonima.

• Seadke ekraani värviprofiil sRGB-le: minge aadressile Süsteemi eelistused - Kuvad - Värv ja vali sRGB IEC61966-2.1 .

• Sisse Digitaalne värvimõõtja või mõni muu värvivaliku tööriist, valige kuvamiseks sRGB .

• Veenduge, et värvipaleti Xcode värviprofiil on seatud väärtusele Seadme RGB.

Märge: _ Piltidel võib olla sisseehitatud värviprofiil. Sel juhul peate oma tööriistad selle profiiliga kohandama, kui soovite pildilt õiget värvi saada. Õnneks peaks see olema erand ja te ei tohiks selliseid juhtumeid liiga sageli kogeda.

Xcode 9-s pidage meeles Säilitage vektorandmed kui vaja. Kuigi see suurendab rakenduse suurust, võimaldab see teil kasutada ka selle pilti mis tahes ekraanisuuruse jaoks. Kuid iOS 10-s ja Apple'i mobiilse operatsioonisüsteemi varasemates versioonides ei suurendata pilte _ täiendavate vektorandmete abil.

Selle asemel kasutavad opsüsteemi vanemad versioonid pärandmastaapimismehhanisme ja jätavad originaalsuurusest suuremaks muutmisel uduse pildi. Lisateavet leiate Apple'i ametlikust dokumentatsioonist see konkreetne teema .

Lõpuks peab arendaja tagama, et suurused ja vahemaad vastaksid võimalikult täpselt algsele kujundusele. Kui Zeplinis on küsitavat teavet, saate mõõta iOS-i kasutajaliidese erinevate komponentide vahelisi kaugusi ekraanijoonlahenduste variatsioonidega. Üks neist on xScope , ekraanil olev joonlaud, millel on palju praktilisi funktsioone.

Elavdage oma iOS-i kasutajaliidese kujundust

Mis puutub iOS-i kasutajaliidese kujunduse rakendamisse, siis võite valida mõne lähenemisviisi vahel: Süžeeskeem, XIB ja kohandatud kood .

• Süžeeskeem - Vaadake ekraane ja nende vahel navigeerimist, kuid pole ühtegi võimalust, kuidas paigutust ühelt kontrollerilt teisele pärida.

• XIB-id - Vaadake ekraani või selle osa, mida on lihtne pärida. Enne Xcode 9 ei olnud võimalust kasutada ülemise / alumise paigutusjuhendeid, samas kui Xcode 9-s võime seda kasutada Turvaline ala .

• Kood - Ülekaalukalt kõige paindlikum variant, kuid ei paku kohest vaatamist.

Süžeeskeemide jaoks peate jaotuse jaotama voogudeks, näiteks LoginFlow.storyboard, SettingsFlow.storyboard või NewsFeedFlow.storyboard. Nii hoiate oma süžeeskeemid kerged.

Grupeerib kasutajaliidese elemendid plokkideks. See lihtsustab kõigi piirangute toetamist. Ärge olge laisk ja seadke nimega vaated järjest, nagu need ekraanil ülalt alla ilmuvad. Pange tähele, et alaosa kuvatakse ülaosas. See aitab teil erinevaid vaateid kiiremini leida.

Rühmitatud ja rühmitamata elementide kohta vaadake järgmist näidet:

Kui teil on mitu objekti vasakule / paremale joondatud, ärge joondage neid nihkeservaga. Parim lähenemine on eelmise elemendiga joondamine või spetsiaalse vaate rakendamine ffset laiusepiiranguga. Kui peate tulevikus mingil hetkel nihet muutma, muudab see seda veidi lihtsamaks.

mis on direktiivid angularjs

IB-s värvide kasutamiseks saate Xcode'i värvivalija allosas ette valmistada paleti.

Märge: Kui teie rakenduse iOS-i minimaalne versioon on 11, saate kasutada üksuste kataloogis valikut 'Nimega värvid'.

Lõpetama

See on. Nüüd peame lihtsalt tulemuse kvaliteedikontrollimeeskonnale saatma, kontrollima, kas kõik on korras ja voilà! Meie piksli täiuslik rakendus on valmis.

Selle artikli eesmärk oli pakkuda lihtsat, lineaarset näidet pikslite täiuslikust iOS-i kasutajaliidese kujundusest, saades parimad tulemused võimalikult lühikese aja jooksul. UI disainerite ja arendajate koostöö pole alati nii lihtne ja hõõrdumatu, kuid see on teise artikli probleem.