Paano idisenyo ang loyalty card para sa Apple Wallet at Google Wallet

Para idisenyo ang loyalty card para sa Apple Wallet at Google Wallet, magsimula sa pinakamaliit na view at umakyat mula roon. Gumamit ng isang parisukat na logo na may espasyo sa paligid, dalawang kulay na malakas ang contrast, simpleng larawan at reward line na ilang salita lang. Ginagawang bilog ng Google ang inyong logo, inilalagay ito ng Apple sa sulok ng card, at parehong hindi nag-iiwan ng maraming espasyo para sa text. Masusubukan ninyo ang lahat ng ito nang libre sa loyalty card maker: itakda ang logo, kulay, stamp icon at reward, tapos dalhin ang parehong disenyo sa Rewardly.

Tungkol ang gabay na ito sa itsura at pagkabasa ng card sa phone: logo, kulay, larawan, text at pag-test sa dalawang phone, may halimbawa sa café. Nasa aming gabay sa digital loyalty card kung paano gumagana ang mga card para sa mga customer, at nasa digital loyalty card na nakakabenta ang mga handang setup na may mga reward.

Ang logo: parisukat, simple, may espasyo sa paligid

Ang logo ang unang nagkakaproblema, dahil magkaiba ang trato ng dalawang wallet dito.

• Google Wallet ay ginagawang bilog ang logo. Humihingi ang Google ng parisukat na PNG na hindi bababa sa 660 × 660 pixel at sinasabing huwag ninyo itong i-mask nang mag-isa: panatilihin itong parisukat na may buong kulay ng background at humigit-kumulang 15% na margin sa paligid ng artwork, para walang maputol. Binabanggit din ng pahina na sa Android, ang malapad na logo ay maaaring pumalit sa default na logo at pangalan ng negosyo sa header, na nagsasabing nakikita na ang pangalan ninyo sa tabi ng logo.
• Apple Wallet ay nagpapakita ng logo sa itaas na sulok ng card. Inililista ito ng Apple bilang `logo.png` na may taas na 50 points at lapad na 50 hanggang 160 points, karaniwang pahalang na wordmark, at nagbababala laban sa inner drop shadow dahil binabawasan nito ang pagkabasa.

Iisang logo ang puwedeng gamitin sa pareho: simpleng marka sa parisukat na file, na may maluwag na bakanteng espasyo. Ang manipis na wordmark na maayos basahin sa website ay nagiging malabo sa bilog na kasing laki ng barya. Kung mahabang pangalan ang logo ninyo, gamitin ang inisyal o ang simbolo at hayaang lumabas bilang text ang pangalan ng negosyo.

Tumatanggap ang libreng card maker ng PNG, JPG, SVG o WebP hanggang 5 MB.

Mga kulay: dalawang may contrast, hindi tatlong magkakatugma

Pumili ng background at kulay ng text, tapos i-check ang pares, dahil binabasa ng mga customer ang card sa haba ng braso, madalas sa labas sa liwanag ng araw.

Ang panukat ay ang contrast ratio. Hinihingi ng WCAG accessibility standard ang hindi bababa sa 4.5:1 para sa karaniwang text at 3:1 para sa malaking text (W3C, contrast minimum, binasa noong 5 Nobyembre 2026). Narito ang mga pares na pang café, kinuwenta gamit ang formula ng WCAG:

Ang orange sa table ay galing sa listahan ng kulay sa brand guidelines ng Google, at bagsak pa rin ang puting text dito. Hindi ginagawang nababasa ng pagiging inirerekomenda ng isang kulay ang bawat kulay ng text dito, kaya i-check ang pares. Pareho ang payo ng dalawang wallet: humihingi ang Apple ng sapat na contrast sa pagitan ng background at kulay ng text, at pinapayuhan ng Google na iwasan ang saturated neon gaya ng #00FF00 dahil maaari nitong gawing nawawala ang text. Kung wala kayong itinakdang background, pipiliin ng Google ang dominant na kulay ng logo ninyo.

Ang larawan: band, hindi poster

Sa store card style ng Apple, ang larawan ay strip image, 375 × 144 points, kaya 1125 × 432 pixel sa @3x. Iyon ang laki kung saan kino-crop ng libreng card maker ang in-upload na background, at iginuguhit ng maker ang mga stamp slot sa parehong band na dala ng totoong card ninyo. Praktikal ang mga tip ng Apple para sa strip:

• Maaaring lumabas ang text sa ibabaw nito, kaya panatilihing kalmado ang mga bahaging nasa likod ng text.
• Ilagay ang mahahalagang elemento sa ibaba o sa trailing edge.
• Huwag maglagay ng text sa loob ng larawan. Binabanggit ng Apple na hindi accessible ang naka-embed na text, at sinasabi ng Google na hindi malolokalisa ang text sa hero image nito.
• Gumamit ng PNG at panatilihing maliit ang file, dahil madalas binubuksan ang mga card mula sa link o email.

Sa stamp card, ang strip ang tirahan ng mga stamp, kaya ang magulong litrato ay nakikipagkumpitensya sa bagay na kailangang bilangin ng customer. Pinakamahusay basahin ang solid na kulay, malambot na pattern o pinadilim na litrato na may mapusyaw na stamp slot.

Text: maiikling linya, at numero sa mga field

Walang ibinibigay na limit sa character para sa text ng card ang Apple o ang Google sa mga pahinang nabasa namin, kaya ang ligtas na panuntunan ay sumulat para sa pinakamaliit na espasyo.

• Reward line: ilang salita. Ang "Libre ang bawat ika-8 kape" ay 26 na character. Sinasabi mismo ng hint ng maker na panatilihin itong sapat na maikli para mabasa sa card.
• Pangalan ng negosyo: isulat bilang text, hindi bahagi ng larawan. Nasa tabi na ng logo ang pangalan ninyo sa header ng Google.
• Anumang kailangang basahin ng customer: ilagay sa text field, huwag sa loob ng larawan. Nagbababala ang Apple na maaaring hindi lumabas ang mga larawan sa bawat device, at mas kaunting impormasyon at larawan ang ipinapakita ng Apple Watch kaysa sa iPhone.
• Harap at likod: ang harap ay para sa tinitingnan ng mga customer sa counter, ang likod ay para sa mga detalyeng bihira nilang kailangan. Pareho ang sinasabi ng Apple: panatilihing malinis ang harap at ilipat ang mga detalyeng bihirang kailanganin sa likod.

Isang halimbawa sa café

Sabihin nating ang café na tinatawag na Aurora Café ay gustong gumawa ng card para sa mga suking pumupunta isang beses kada linggo. Halimbawang disenyo lang, palitan ang mga kulay at salita ng sa inyo:

• Logo: puting marka ng tasa ng kape sa parisukat na file na may malinaw na margin, hindi ang mahabang pangalan.
• Background: espresso brown #3B2A20 para sa card at band.
• Text: off white #F8F9FA, pares na 12.95:1.
• Mga stamp slot: caramel #E9B872 sa brown na band, pares na 7.52:1, para madaling makita ang pagkakaiba ng walang laman at puno nang slot.
• Mga stamp: 8 slot na may icon ng tasa, at ibang icon sa huling slot, para laging nakikita ang premyo.
• Reward line: "Libre ang bawat ika-8 kape".

Sumusunod ang walong stamp sa hint ng maker na bagay ang anim hanggang walo sa lingguhang pagbili gaya ng kape. Kung gusto ninyong kuwentahin ang numero mula sa sarili ninyong presyo, tingnan ang ilang stamp ang dapat ilagay sa loyalty card.

Ang mas mahinang bersyon ng parehong card ay may mapusyaw na cream na logo sa beige na band, ang reward ay nakasama sa larawan at neon green na mga stamp. Maayos ang itsura nito sa monitor ng designer at sumasablay sa phone sa ilalim ng araw.

Mag-test sa dalawang phone bago i-print ang QR code

Hindi ang card sa wallet ang preview sa monitor, kaya mag-test sa isang iPhone at isang Android phone.

1. Idagdag ang card sa dalawang phone, mula sa QR code o link.
2. I-check ang logo. Naputol ba ito sa bilog ng Google? Malinaw ba ito sa sulok ng Apple?
3. Basahin ito sa haba ng braso, sa labas. Dalhin ang phone sa labas sa liwanag ng araw at bilangin ang mga stamp.
4. Tingnan ang reward. Mababasa ba ito ng estranghero sa loob ng tatlong segundo?
5. I-check ang walang laman at puno nang slot. Dapat malinaw na magkaiba ang itsura nila.
6. Magtanong sa isang taong hindi pa ito nakikita kung ano ang reward. Kung nag-aalangan siya, pasimplehin.

Mapapalitan ninyo ang disenyo at ang text ng reward sa ibang pagkakataon. Agad na makikita ng mga bagong card ang pagbabago, at nag-a-update ang mga card na nasa wallet na sa susunod na stamp o pagbili ng customer, kaya hindi kailangang perpekto ang unang bersyon.

FAQ

Gaano kalaki ang dapat na logo para sa Apple Wallet at Google Wallet?

Para sa Google, parisukat na PNG na hindi bababa sa 660 × 660 pixel na may humigit-kumulang 15% na margin. Para sa Apple, ang logo file ay 50 points ang taas at 50 hanggang 160 points ang lapad. Gumagana sa pareho ang parisukat na marka na may espasyo sa paligid.

Puwede bang gumamit ng litrato bilang background ng card?

Oo, bilang picture band, pero ilayo ang text sa litrato, panatilihing kalmado ang bahaging nasa likod ng mga stamp at padilimin ang magulong litrato hanggang malinaw na mabasa ang mapusyaw na stamp slot.

Pareho ba ang itsura ng card sa iPhone at Android?

Hindi. Ginagawang bilog ng Google ang logo at inilalagay ito ng Apple sa sulok, at may iba pang bahaging magkaiba. Kaya kailangang mag-test sa pareho.

Libre ba ang card maker?

Oo, walang bayad ang loyalty card maker. Makakagawa kayo ng card at makaka-download para i-print nang hindi nagbabayad (hihingin ang email ninyo bago ang download), at madadala ang parehong disenyo kung magpasya kayong gawin itong digital sa Rewardly, na may 14 na araw na trial.

Ilang stamp ang dapat nasa disenyo?

Anim hanggang walo ang bagay sa lingguhang pagbili gaya ng kape, ayon sa hint ng maker. Tingnan ang gabay sa stamp na naka-link sa itaas para sa kuwenta.

Idisenyo ang una ninyong wallet card. Subukan ang Rewardly nang €0

Walang paunang bayad, 14 na araw na libre.