اگر برای کاربران در RU در حال توسعه هستید، لطفاً از دکمههای «ذخیره در تلفن» استفاده کنید زیرا Google Wallet در این کشورها فعال نیست. لطفاً به منابع و دستورالعملهای مربوطه مراجعه کنید. اگر برای کاربران خارج از RU در حال توسعه هستید، لطفاً دکمه «افزودن به Google Wallet» خود را با دانلود منابع زیر بهروزرسانی کنید.
این بخش از مستندات به شما کمک میکند تا تصاویر و سایر عناصر رابط کاربری را طوری ایجاد کنید که در برنامه Google Wallet عالی به نظر برسند.
داراییها
دکمه افزودن به کیف پول گوگل
دکمه «افزودن به کیف پول گوگل» هر زمان که کاربران را برای ذخیره یک کارت یا مجوز از برنامه یا وبسایت خود در کیف پولشان هدایت میکنید، استفاده میشود. دکمه «افزودن به کیف پول گوگل» باید یکی از جریانهای API کیف پول گوگل را فراخوانی کند. این جریانها برنامه کیف پول گوگل را نمایش میدهند که در آن کاربران میتوانند دستورالعملها را برای ذخیره مجوزها در دستگاه اندروید و حساب گوگل خود دنبال کنند. این دکمه را میتوان در برنامهها، وبسایتها یا ایمیلها استفاده کرد.
دکمههای افزودن به کیف پول گوگل در قالبهای اندروید XML، SVG و PNG در دسترس هستند.
دانلود فایلها - اندروید XML دانلود فایلها - SVG دانلود فایلها - PNGدکمه مشاهده در کیف پول گوگل
دکمه « مشاهده در کیف پول گوگل» برای پیوند عمیق کاربر به کیف پولش استفاده میشود تا بتواند کارت یا رمز عبور ذخیره شده قبلی را مشاهده کند. این دکمه را میتوان در برنامهها، وبسایتها یا ایمیلها استفاده کرد.
دکمههای View in Google Wallet با فرمت SVG و PNG در دسترس هستند.
دانلود فایلها - SVG دانلود فایلها - PNGتمام دکمههای نمایش داده شده در سایت، اپلیکیشن یا ارتباطات ایمیلی شما باید از دستورالعملهای برند ذکر شده در این صفحه پیروی کنند. نمونههایی از این دستورالعملها شامل موارد زیر است، اما محدود به آنها نیست:
- اندازه نسبت به سایر دکمهها یا عناصر مشابه صفحه
- شکل و رنگ دکمهها نباید تغییر کند
- فضای خالی
دکمههای محلیسازی شده
دکمههای محلیسازیشدهی گوگل والت برای تمام بازارهایی که والت در آنها موجود است، ارائه شدهاند. اگر در حال توسعه برای کاربران این بازارها هستید، همیشه از دکمههای لینکشده در بالا استفاده کنید. نسخهی خودتان از دکمهها را ایجاد نکنید . اگر نسخهی محلیسازیشدهی دکمه در بازار شما موجود نیست، از نسخهی انگلیسی دکمه استفاده کنید.
دکمههای افزودن به کیف پول گوگل به زبانهای آلبانیایی، عربی، ارمنی، آذربایجانی، بوسنیایی، بلغاری، کاتالان، چینی (هنگ کنگ)، چینی (سنتی)، کرواتی، چکی، دانمارکی، هلندی، انگلیسی (هند، سنگاپور، آفریقای جنوبی، استرالیا، کانادا، بریتانیای کبیر، ایالات متحده)، استونیایی، فیلیپینی، فنلاندی، فرانسوی (کانادا)، فرانسوی (فرانسه)، گرجی، آلمانی، یونانی، عبری، مجارستانی، ایسلندی، اندونزیایی، ایتالیایی، ژاپنی، قزاقی، قرقیزی، لتونیایی، لیتوانیایی، مقدونی، مالایی، نروژی، لهستانی، پرتغالی (برزیل)، پرتغالی (پرتغال)، رومانیایی، روسی (بلاروس)، صربی، اسلواکی، اسلوونیایی، اسپانیایی (آمریکای لاتین)، اسپانیایی (اسپانیا)، سوئدی، تایلندی، ترکی، اوکراینی، ازبکی و ویتنامی در دسترس هستند.
نام محلی
برای شفافیت بیشتر کاربر، نام محصول Google Wallet در بازارهای منتخب بومیسازی شده است. اگر برای کاربران این کشورها در حال توسعه هستید، همیشه از نام بومیسازی شده زیر برای وب، ایمیل و چاپ استفاده کنید. نسخه بومیسازی شده خودتان از «Google Wallet» را ایجاد نکنید. اگر بازار شما در زیر فهرست نشده است، از «Google Wallet» به زبان انگلیسی استفاده کنید.
| کشور | نام |
|---|---|
| بلاروس | گوگل کوشلِک |
| برزیل | کارتیرا برای گوگل |
| شیلی | بیلتر گوگل |
| چک | گوگل پنیژنکا |
| یونان | گوگل |
| هنگ کنگ | گوگل 錢包 |
| لیتوانی | پینیگین گوگل |
| لهستان | پورتفل گوگل |
| پرتغال | کارت گوگل |
| رومانی | پورتوفل گوگل |
| اسلواکی | گوگل پناژنکا |
| تایوان | گوگل 錢包 |
| ترکیه | گوگل کوزدان |
| امارات متحده عربی | گوگل محفظة |
| اوکراین | گوگل گیمنس |
| ایالات متحده (اسپانیایی) *اگر رابط کاربری شما به زبان اسپانیایی است، در ایالات متحده از این نام استفاده کنید | بیلتر گوگل |
اندازه
ارتفاع و عرض دکمه «افزودن به کیف پول گوگل» را متناسب با طرحبندی خود تنظیم کنید. اگر دکمههای دیگری در صفحه وجود دارد، دکمه «افزودن به کیف پول گوگل» باید اندازهای برابر یا بزرگتر داشته باشد. دکمه « افزودن به کیف پول گوگل» را کوچکتر از سایر دکمهها قرار ندهید.
سبک
دکمههای افزودن به کیف پول گوگل در دو نوع اصلی و فشرده موجود هستند. دکمه افزودن به کیف پول گوگل فقط به رنگ مشکی است. نسخههای محلیشده این دکمه ارائه شده است. دکمههایی با متن محلیشده خودتان ایجاد نکنید.
| اولیه | چگال |
|---|---|
 |  |
| از دکمه اصلی در پسزمینههای سفید و روشن استفاده کنید. | اگر فضای کافی برای دکمه اصلی یا تمام عرض وجود ندارد، از دکمه فشرده استفاده کنید. |
فضای خالی
همیشه حداقل فضای خالی ۸ dp را در تمام اطراف دکمهی «افزودن به کیف پول گوگل» حفظ کنید. مطمئن شوید که این فضای خالی هرگز با گرافیک یا متن شکسته نشود.
حداقل ارتفاع
تمام دکمههای «افزودن به کیف پول گوگل» باید حداقل ارتفاع ۴۸ dp داشته باشند.
بایدها و نبایدها
| دوس | نبایدها |
|---|---|
| انجام دهید: فقط از دکمههای «افزودن به کیف پول گوگل» که توسط گوگل ارائه شده است استفاده کنید. | انجام ندهید: دکمههای «افزودن به کیف پول گوگل» خودتان را ایجاد نکنید یا فونت، رنگ، شعاع دکمه یا فاصله بین دکمهها را به هیچ وجه تغییر ندهید. |
| انجام دهید: از دکمههایی با سبک یکسان در سراسر سایت خود استفاده کنید. | نباید: دکمههای «افزودن به کیف پول گوگل» را کوچکتر از سایر دکمهها قرار دهید. |
| انجام دهید: مطمئن شوید که اندازه دکمههای «افزودن به کیف پول گوگل» مساوی یا بزرگتر از سایر دکمهها باشد. | نباید: رنگ دکمه را تغییر دهید. |
| انجام دهید: هنگام تغییر اندازه دکمههای افزودن به کیف پول گوگل، نسبت دکمهها را یکسان نگه دارید. | انجام ندهید: دکمه را به صورت آزاد تنظیم نکنید. |
| انجام دهید: از نسخه محلیشدهی دکمهها استفاده کنید. | انجام ندهید: نسخه محلیشده خودتان از دکمه را ایجاد نکنید. |
بهترین روشها برای قرار دادن دکمه
دکمه «افزودن به کیف پول گوگل» را در صفحههای تأیید برنامه، صفحات وب یا ایمیلها نمایش دهید. برای راهنمایی در طراحی رابط کاربری خود، به بهترین شیوههای زیر مراجعه کنید.
وفاداری، کارتهای هدیه، پیشنهادات
دکمه «افزودن به کیف پول گوگل» را در صفحات تأیید نمایش دهید. همچنین میتوانید این دکمه را در وبسایت یا برنامه خود نمایش دهید یا آن را در ایمیلهای مرتبط بگنجانید.
استفاده از نام محصول کیف پول گوگل در متن
میتوانید از متن استفاده کنید تا به کاربر نشان دهید که پیشنهادش در دستگاهش ذخیره شده است.
حروف "G" و "W" را بزرگ بنویسید
همیشه برای اشاره به Google Wallet از حروف بزرگ "G" و "W" و به دنبال آن حروف کوچک استفاده کنید. نام کامل "Google Wallet" را با حروف بزرگ ننویسید، مگر اینکه بخواهید با سبک تایپوگرافی رابط کاربری خود مطابقت داشته باشد.
گوگل والت را مخفف نکنید
همیشه کلمات «گوگل» و «کیف پول» را با خط درشت بنویسید.
سبک را در رابط کاربری خود مطابقت دهید
فونت و سبک تایپوگرافی «کیف پول گوگل» را با سایر متنهای رابط کاربری خود یکسان کنید. از سبک تایپوگرافی گوگل تقلید نکنید.
همیشه از نسخه محلیشدهی «کیف پول گوگل» استفاده کنید
همیشه در نسخه محلی ارائه شده عبارت «کیف پول گوگل» را بنویسید.
طراحی
از فیلدهای height و size تگ g:savetoandroidpay HTML برای تغییر ارتفاع و عرض دکمههای Add to Google Wallet استفاده کنید. از مشخصه textsize=large برای افزایش چشمگیر اندازه متن و دکمه برای پیادهسازیهای موبایل یا مواردی با الزامات رابط کاربری خاص استفاده کنید.
از theme برای تنظیم رنگ دکمهها استفاده کنید. جدول زیر نشان میدهد که چگونه این تنظیمات بر دکمه افزودن به کیف پول گوگل تأثیر میگذارند.
لوگوها
دستورالعملهای تصویر لوگو
گوگل والت لوگوی شما را به شکل دایرهای میپوشاند.
در زیر لیستی از توصیههای رابط کاربری برای تصاویر لوگو آمده است:| راهنما | توضیحات |
|---|---|
| نوع فایل ترجیحی | پی ان جی |
| حداقل اندازه | ۶۶۰ پیکسل در ۶۶۰ پیکسل |
| نسبت ابعاد تصویر | ۱:۱ |
| نسبت ابعاد اثر هنری | ۱:۱ |
| اندازه واقعی پیکسل | مقیاس بندی بر اساس اندازه دستگاه |
| ماسک دایرهای لوگو | لوگوی شما برای قرار گرفتن در یک طرح دایرهای، ماسک شده است. مطمئن شوید که لوگوی شما در ناحیه امن (Safe Area) قرار میگیرد. لوگوی خود را از قبل ماسک نکنید. لوگو را در یک مربع با رنگ پسزمینه کامل قرار دهید. لوگو باید حاشیه ۱۵٪ داشته باشد تا هنگام ماسک شدن، بریده نشود.  |
گوگل والت لوگوی شما را به شکل دایرهای میپوشاند.
دستورالعملهای تصویر لوگوی عریض
تصاویر لوگوی عریض توسط بلیطهای رویداد، کارتهای پرواز، کارتهای حمل و نقل با کد QR، کارتهای وفاداری، پیشنهادات، کارتهای هدیه، کارتهای عمومی و کارتهای خصوصی عمومی پشتیبانی میشوند. در زیر لیستی از توصیههای رابط کاربری برای تصاویر لوگوی عریض آمده است:
| راهنما | توضیحات |
|---|---|
| نوع فایل ترجیحی | پی ان جی برای بهترین نتیجه از تصویری با رنگ پسزمینه استفاده کنید (توصیه میکنیم از همان رنگ پسزمینه گذرنامه خود استفاده کنید) |
| اندازه توصیه شده | ۱۲۸۰ پیکسل در ۴۰۰ پیکسل |
| حداقل اندازه | ۴۰۰ پیکسل برای ارتفاع، عرض متناسب است (راهنمایی بیشتر در بخش نسبت ابعاد پیشنهادی) از تصاویر عریض و مستطیلی استفاده کنید. |
| نسبت ابعاد توصیه شده | اگر تصویر روی نسبت ابعاد توصیهشده تنظیم نشده باشد، اندازه آن تغییر میکند تا با نسبت ابعاد فضاهای هدر ارائه شده متناسب شود. نمودار زیر نحوه تغییر اندازه تصویر بر اساس نسبت ابعاد را شرح میدهد.  |
رنگ پس زمینه کارت
میتوانید رنگ پسزمینه را با فیلد hexBackgroundColor تنظیم کنید. اگر این مقدار را تنظیم نکنید، یک الگوریتم لوگو را تجزیه و تحلیل میکند، رنگ غالب را پیدا میکند و از آن برای رنگ پسزمینه استفاده میکند.
تصاویر قهرمان
فیلد class.heroImage به صورت یک بنر تمام عرض در سراسر بدنه کارت ظاهر میشود.
دستورالعملهای تصویر قهرمان
در زیر لیستی از توصیههای رابط کاربری برای تصاویر قهرمان آمده است:
| راهنما | توضیحات |
|---|---|
| نوع فایل ترجیحی | پی ان جی |
| اندازه توصیه شده | ۱۰۳۲x۳۳۶ پیکسل از تصاویر عریض و مستطیلی استفاده کنید. برای بهترین نتیجه، از تصویری با پسزمینه رنگی استفاده کنید. |
| نسبت ابعاد | ۳:۱ یا عریضتر |
| اندازه نمایشگر | عرض کامل کارت و ارتفاع متناسب.  |
تصاویر تمام عرض
فیلد *.imageModulesData.mainImage در یک کلاس یا شیء به صورت یک تصویر با عرض کامل در یک گذر ظاهر میشود.
دستورالعملهای تصویر با عرض کامل
در زیر لیستی از توصیههای رابط کاربری برای تصاویر تمام عرض آمده است:
| راهنما | توضیحات |
|---|---|
| نوع فایل ترجیحی | پی ان جی |
| حداقل اندازه | عرض ۱۸۶۰ پیکسل، ارتفاع متغیر. از تصاویر عریض و مستطیلی استفاده کنید. برای بهترین نتیجه، از تصویری با پسزمینه رنگی استفاده کنید. |
| نسبت ابعاد | متغیر |
| اندازه نمایشگر | عرض کامل قالب و ارتفاع متناسب. |
| از همان طرح رنگی که برای لوگوی خود استفاده میکنید، استفاده کنید. |
تصاویر بارکد
برخی از خطوط عمودی امکان نمایش تصاویر در بالا و پایین بارکد را فراهم میکنند.
تصاویر بالای بارکد
در زیر لیستی از توصیههای رابط کاربری برای تصاویر بالای بارکد آمده است:
| راهنما | توضیحات |
|---|---|
| نوع فایل ترجیحی | پی ان جی |
| حداکثر ارتفاع | 20 dp (در حداکثر نسبت ابعاد) اندازه توصیه شده برای دو تصویر، ارتفاع ۸۰ پیکسل و عرض ۸۰ تا ۷۸۰ پیکسل است. این به آنها اجازه میدهد تا در کنار هم قرار گیرند. اگر یک تصویر مربع و دیگری مستطیل باشد، ابعاد تصاویر باید ۸۰x۸۰ پیکسل و ۷۸۰x۸۰ پیکسل باشد. |
| نسبت ابعاد | نامحدود. برای حداکثر ارتفاع و عرض ۲۰ dp برای یک تصویر واحد، از نسبت ابعاد ۲۰:۱ استفاده کنید. اگر فقط یک تصویر بالای بارکد میخواهید، تمام عرض را در نظر بگیرید (بدون حاشیه). تصویر باید ۱۶۰۰x۸۰ پیکسل باشد. |
| حداکثر اندازه نمایش (تصویر واحد) | ارتفاع ۲۰ دیپی و عرض ۴۰۰ دیپی |
تصویر زیر بارکد
در زیر لیستی از توصیههای رابط کاربری برای تصویر زیر بارکد آمده است:
| راهنما | توضیحات |
|---|---|
| نوع فایل ترجیحی | پی ان جی |
| حداکثر ارتفاع | 20 dp (در حداکثر نسبت ابعاد) اندازه توصیه شده ۸۰ پیکسل ارتفاع و ۸۰ تا ۱۶۰۰ پیکسل عرض است. اگر مربع باشد، ۸۰x۸۰ پیکسل. اگر مستطیلی باشد، ۱۶۰۰x۸۰ پیکسل. |
| نسبت ابعاد نامحدود. برای حداکثر ارتفاع و عرض 20 dp، از نسبت ابعاد 20:1 استفاده کنید. | اگر میخواهید تصویر تمام عرض باشد (بدون حاشیه)، تصویر باید ۱۶۰۰x۸۰ پیکسل باشد. |
| حداکثر اندازه نمایش، ارتفاع ۲۰ dp و عرض ۴۰۰ dp است. |
ماژولها
یک ماژول، گروهی از فیلدها را در بخش خاصی از یک الگو نشان میدهد. جدول زیر شامل دستورالعملهایی برای تعداد ماژولهایی است که باید در کلاسها و اشیاء خود بگنجانید تا از نمایش صحیح کارتهای شما در برنامه Google Wallet اطمینان حاصل شود.
| راهنما | توضیحات |
|---|---|
imageModulesData | فقط از یک imageModulesData چه در کلاس خود و چه در آبجکتهایی که ایجاد میکنید، استفاده کنید. |
infoModuleData | میتوانید حداکثر از دو یک |
linksModuleData | در مجموع میتوانید حداکثر از چهار آدرس URL مربوط به ممکن است دو URL مربوط به |
textModulesData | بین کلاس و اشیاء ایجاد شده، حداکثر از دو فیلد ممکن است در کلاس خود یک |
infoModuleData
InfoModuleData شامل اطلاعات اعضا و اطلاعات قابل تنظیم است و در نمای گسترده نمایش داده میشود. از این ماژول برای ذخیره اطلاعاتی مانند تاریخ انقضا، موجودی نقطه دوم یا موجودیهای ذخیره شده استفاده کنید.
linksModuleData
ماژول لینکها شامل آدرسهای اینترنتی (URI) به صفحات وب، شماره تلفنها و آدرسهای ایمیل است. در زیر لیستی از توصیههای رابط کاربری برای ماژول لینکها آمده است:
| راهنما | تنظیمات مثال | تصویر نمونه |
|---|---|---|
هنگام اختصاص یک آدرس اینترنتی (URI) به یک وبسایت یا مکانی در نقشههای گوگل، از پیشوند http: استفاده کنید. این پیشوند به کاربر اجازه میدهد تا با لمس لینک، به وبسایت هدایت شود یا مکان را در نقشههای گوگل مشاهده کند. این پیشوند همچنین باعث میشود که آیکونی از یک لینک یا نقشه در مقابل توضیحات در کارت شما نمایش داده شود. | 'uri': 'http://maps.google.com/?q=google' |  |
'uri': 'http://developer.google.com/wallet/' |  | |
هنگام تعریف شماره تلفن، از پیشوند tel: استفاده کنید. این پیشوند به مصرفکننده اجازه میدهد تا با لمس لینک، شماره را شمارهگیری کند. این پیشوند همچنین یک نماد تلفن در مقابل توضیحات متنی روی کارت ایجاد میکند. | 'uri': 'tel:6505555555' |  |
هنگام تعریف آدرس ایمیل از پیشوند mailto: استفاده کنید. این پیشوند به کاربر اجازه میدهد تا با لمس لینک، ایمیلی به آن آدرس ارسال کند. این پیشوند همچنین یک آیکون از ایمیل را در مقابل توضیحات متنی روی کارت ایجاد میکند. | 'uri': 'mailto:jonsmith@email.com' |  |
عنوانها، برچسبها و نامها
عنوانها، برچسبها و نامها را با حروف بزرگ بنویسید، به طوری که هر کلمه با حرف بزرگ شروع شود.
سیاستهای محتوا
محتوای هر فیلد در یک Pass باید با سیاستهای محتوای Payments مطابقت داشته باشد. محتوای وبسایتهایی که در کلاس به آنها ارجاع میدهید نیز باید با این سیاستها مطابقت داشته باشد.
قرار دادن دادههای پلتفرم شریک
برای اطمینان از اینکه کاربران میتوانند به برنامه یا وبسایت غنی از ویژگیهای شما در مورد Pass دسترسی پیدا کنند، حتماً لینک عمیق برنامه یا وبسایت خود را در ویژگی کلاس یا شیء linksModuleData.* مربوط به Pass قرار دهید. این به کاربر اجازه میدهد تا از Pass که در Google Wallet ظاهر میشود، به پلتفرم شما هدایت شود. برای دیدن نحوه رندر شدن آن، به بخشهای طراحی Pass verticals مراجعه کنید.