Google ব্র্যান্ডিং নির্দেশিকা দিয়ে সাইন ইন করুন

এই ডকুমেন্টে আপনার ওয়েবসাইট বা অ্যাপে "Google দিয়ে সাইন ইন করুন" বোতামটি কীভাবে প্রদর্শন করবেন তার নির্দেশিকা রয়েছে। অ্যাপ যাচাইকরণ প্রক্রিয়াটি সম্পূর্ণ করতে আপনার ওয়েবসাইট বা অ্যাপকে অবশ্যই এই নির্দেশিকাগুলি অনুসরণ করতে হবে।

আমাদের Google আইডেন্টিটি সার্ভিসেস SDK গুলি একটি "Google দিয়ে সাইন ইন করুন" বোতাম রেন্ডার করে যা সর্বদা সাম্প্রতিকতম Google ব্র্যান্ডিং নির্দেশিকা মেনে চলে। আপনার ওয়েবসাইট বা অ্যাপে "Google দিয়ে সাইন ইন করুন" বোতামটি প্রদর্শনের জন্য এগুলিই প্রস্তাবিত উপায়। যেসব ক্ষেত্রে আপনি Google-রেন্ডার করা বোতাম বিকল্পটি ব্যবহার করতে পারবেন না, সেসব ক্ষেত্রে আপনি একটি HTML বোতাম উপাদান রেন্ডার করতে পারেন, আমাদের পূর্ব-অনুমোদিত ব্র্যান্ডিং সম্পদ ডাউনলোড করতে পারেন অথবা ঐচ্ছিকভাবে একটি কাস্টম "Google দিয়ে সাইন ইন করুন" বোতাম তৈরি করতে পারেন

HTML বোতাম এলিমেন্ট রেন্ডার করুন

আমরা একটি HTML কনফিগারেটর প্রদান করি যা আপনাকে "Google দিয়ে সাইন ইন করুন" বোতামের চেহারা কাস্টমাইজ করতে দেয়। এরপর আপনি একটি HTML এবং CSS স্নিপেট ডাউনলোড করতে পারেন যা আপনার ওয়েবসাইটে বোতামটি রেন্ডার করবে।

HTML বোতাম এলিমেন্ট তৈরি করুন

  
  

পূর্ব-অনুমোদিত ব্র্যান্ড আইকনগুলি ডাউনলোড করুন

কাস্টম ইমেজ বোতাম ব্যবহারের বিকল্প হিসেবে, আপনি আমাদের পূর্ব-অনুমোদিত সাইন ইন উইথ গুগল বোতামগুলি ডাউনলোড করতে পারেন যা সমস্ত প্ল্যাটফর্মের জন্য PNG এবং SVG ফর্ম্যাটে সরবরাহ করা হয়েছে।

প্রদত্ত চিত্র বোতামগুলি স্ট্যান্ডার্ড এবং আইকন মোডে উপলব্ধ এবং নীচের স্টাইল বিকল্পগুলি অন্তর্ভুক্ত করে:

  • থিম: হালকা, নিরপেক্ষ, অন্ধকার
  • আকৃতি: আয়তক্ষেত্রাকার, বড়ি
নিচে দুটি উদাহরণ দেওয়া হল:
থিম বোতাম বিবরণ
আলো স্ট্যান্ডার্ড বৃহৎ হালকা থিমযুক্ত আয়তক্ষেত্রাকার গুগল দিয়ে সাইন ইন করুন বোতামের উদাহরণ স্ট্যান্ডার্ড বৃহৎ হালকা থিমযুক্ত আয়তক্ষেত্রাকার Google বোতাম দিয়ে সাইন ইন করুন
অন্ধকার স্ট্যান্ডার্ড গাঢ় থিমযুক্ত পিল আকৃতির গুগল দিয়ে সাইন ইন করুন বোতামের উদাহরণ স্ট্যান্ডার্ড গাঢ় থিমযুক্ত পিল আকৃতির Google বোতাম দিয়ে সাইন ইন করুন
পূর্ব-অনুমোদিত ব্র্যান্ড আইকনগুলি ডাউনলোড করুন

সমর্থিত বোতাম মোড

আলো

হালকা থিমযুক্ত গোলাকার আকৃতির গুগল দিয়ে সাইন ইন করুন বোতাম

হালকা থিমযুক্ত বর্গাকার আকৃতির গুগল দিয়ে সাইন ইন করুন বোতাম

হালকা থিমযুক্ত পিল আকৃতির গুগল দিয়ে সাইন ইন করুন বোতাম

হালকা থিমযুক্ত আয়তক্ষেত্র আকৃতির গুগল দিয়ে সাইন ইন করুন বোতাম

অন্ধকার

গাঢ় থিমযুক্ত গোলাকার আকৃতির Google বোতামে সাইন ইন করুন

গাঢ় থিমযুক্ত বর্গাকার আকৃতির Google বোতামে সাইন ইন করুন

গাঢ় থিমযুক্ত পিল আকৃতির গুগলের মাধ্যমে সাইন ইন করুন বোতাম

গাঢ় থিমযুক্ত আয়তক্ষেত্র আকৃতির Google বোতামে সাইন ইন করুন

নিরপেক্ষ

নিরপেক্ষ থিমযুক্ত গোলাকার আকৃতির গুগল দিয়ে সাইন ইন করুন বোতাম

নিরপেক্ষ থিমযুক্ত বর্গাকার আকৃতির গুগল দিয়ে সাইন ইন করুন বোতাম

নিরপেক্ষ থিমযুক্ত পিল আকৃতির গুগল দিয়ে সাইন ইন করুন বোতাম

নিরপেক্ষ থিমযুক্ত আয়তক্ষেত্র আকৃতির গুগল দিয়ে সাইন ইন করুন বোতাম

একটি কাস্টম Google সাইন ইন বোতাম তৈরি করুন

আমাদের Google আইডেন্টিটি সার্ভিসেস SDK অথবা পূর্ববর্তী বিভাগগুলিতে উল্লেখিত অন্য যেকোনো বিকল্প ব্যবহার করার জন্য জোরালো পরামর্শ দেওয়া হচ্ছে কারণ এটি Google ব্যবহারকারীদের Google ব্র্যান্ডকে আরও সহজে শনাক্ত করতে সক্ষম করে। ব্যবহারকারীরা যত সহজে একটি অ্যাকশন বোতাম সনাক্ত করতে পারবেন, তাদের এটির সাথে ইন্টারঅ্যাক্ট করার সম্ভাবনা তত বেশি হবে।

তবে, যদি আপনার অ্যাপ ডিজাইনের সাথে মেলে বোতামটি মানিয়ে নিতে হয়, তাহলে নিম্নলিখিত নির্দেশিকাগুলি মেনে চলুন।

আকার

আপনি বিভিন্ন ডিভাইস এবং স্ক্রিনের আকারের জন্য প্রয়োজন অনুসারে বোতামটি স্কেল করতে পারেন, তবে আপনাকে অবশ্যই আকৃতির অনুপাত বজায় রাখতে হবে যাতে গুগলের লোগোটি প্রসারিত না হয়।

টেক্সট

ব্যবহারকারীদের বোতামটি ক্লিক করতে উৎসাহিত করার জন্য, আমরা "Google দিয়ে সাইন ইন করুন", "Google দিয়ে সাইন আপ করুন", অথবা "Google দিয়ে চালিয়ে যান" এই কল-টু-অ্যাকশন টেক্সটটি সুপারিশ করি। আপনার অ্যাপ বা ওয়েবসাইটের ভাষার সাথে মিল রেখে এই টেক্সটটির স্থানীয়করণ অনুমোদিত এবং আরও ভালো ব্যবহারকারীর অভিজ্ঞতা প্রদানের জন্য উৎসাহিত করা হয়েছে। ব্যবহারকারীর কাছে এটি স্পষ্ট হওয়া উচিত যে তারা আপনার অ্যাপে সাইন ইন করছেন বা তাদের Google শংসাপত্র ব্যবহার করে আপনার অ্যাপে সাইন আপ করছেন, আপনার অ্যাপে কোনও Google অ্যাকাউন্টের জন্য সাইন আপ বা নিবন্ধন করছেন না।

রঙ

বোতামগুলির ডিফল্ট অবস্থা নীচে দেখানো হয়েছে। বোতামটিতে সর্বদা Google "G" এর জন্য আদর্শ রঙ অন্তর্ভুক্ত করা উচিত।

থিম উদাহরণ
আলো হালকা থিমযুক্ত পিল আকৃতির গুগল দিয়ে সাইন ইন করুন বোতাম পূরণ করুন: #FFFFFF
স্ট্রোক: #৭৪৭৭৭৫ | ১ পিক্সেল | ভিতরে
হরফ: #1F1F1F | রোবোটো মিডিয়াম | 14/20
অন্ধকার গাঢ় থিমযুক্ত পিল আকৃতির গুগলের মাধ্যমে সাইন ইন করুন বোতাম পূরণ করুন: #১৩১৩১৪
স্ট্রোক: #8E918F | 1px | ভিতরে
হরফ: #E3E3E3 | রোবোটো মিডিয়াম | 14/20
নিরপেক্ষ নিরপেক্ষ থিমযুক্ত পিল আকৃতির গুগল দিয়ে সাইন ইন করুন বোতাম পূরণ করুন: #F2F2F2
স্ট্রোক: স্ট্রোক নেই
হরফ: #1F1F1F | রোবোটো মিডিয়াম | 14/20

ফন্ট

বোতাম ফন্টটি হল Roboto Medium, একটি TrueType ফন্ট। ইনস্টল করতে, প্রথমে Roboto ফন্টটি ডাউনলোড করুন এবং ডাউনলোড বান্ডেলটি আনজিপ করুন। Mac এ, কেবল Roboto-Medium.ttf এ ডাবল-ক্লিক করুন, তারপরে "Install Font" এ ক্লিক করুন। Windows এ, ফাইলটি "My Computer" > "Windows" > "Fonts" ফোল্ডারে টেনে আনুন।

প্যাডিং

অ্যান্ড্রয়েড গুগল লোগোর আগে ১২ পিক্সেল বাম প্যাডিং, গুগল লোগোর পরে ১০ পিক্সেল ডান প্যাডিং এবং সাইন ইন উইথ গুগল টেক্সটের পরে ১২ পিক্সেল ডান প্যাডিং
আইওএস গুগল লোগোর আগে ১৬ পিক্সেল বাম প্যাডিং, গুগল লোগোর পরে ১২ পিক্সেল ডান প্যাডিং এবং সাইন ইন উইথ গুগল টেক্সটের পরে ১৬ পিক্সেল ডান প্যাডিং
ওয়েব (মোবাইল + ডেস্কটপ) গুগল লোগোর আগে ১২ পিক্সেল বাম প্যাডিং, গুগল লোগোর পরে ১০ পিক্সেল ডান প্যাডিং এবং সাইন ইন উইথ গুগল টেক্সটের পরে ১২ পিক্সেল ডান প্যাডিং
তথ্যসূত্র Google বোতাম প্যাডিং রেফারেন্স দিয়ে সাইন ইন করুন

"Google দিয়ে সাইন ইন করুন" বোতামে Google লোগো

লেখা যাই হোক না কেন, আপনি Google "G" লোগোর আকার বা রঙ পরিবর্তন করতে পারবেন না। এটি অবশ্যই স্ট্যান্ডার্ড রঙের সংস্করণ হতে হবে এবং সাদা পটভূমিতে প্রদর্শিত হবে। যদি আপনার নিজস্ব কাস্টম আকারের Google লোগো তৈরি করতে হয়, তাহলে ডাউনলোড বান্ডেলে অন্তর্ভুক্ত যেকোনো লোগো আকার দিয়ে শুরু করুন।

গুগল জি আইকন

ভুল বোতাম ডিজাইন

ব্র্যান্ডিং গ্র্যান্ডিং করণীয় এবং করণীয় চিত্রের নমুনা
কর

বোতামের সীমানা এবং রঙের স্কিমের জন্য Google Material 3 ডিজাইন নির্দেশিকা ব্যবহার করুন।

ব্র্যান্ডিং গ্র্যান্ডিং করণীয় এবং করণীয় চিত্রের নমুনা
করো না

ব্যবহারকারীর ক্রিয়া নির্দেশ করার জন্য বোতামের সীমানা ছাড়াই এবং টেক্সট ছাড়াই গুগল আইকন বা লোগোটি ব্যবহার করুন।

ব্র্যান্ডিং গ্র্যান্ডিং করণীয় এবং করণীয় চিত্রের নমুনা
কর

গাঢ়, হালকা এবং নিরপেক্ষ মোডের জন্য Google ব্র্যান্ডের রঙ Google আইকন ব্যবহার করুন।

ব্র্যান্ডিং গ্র্যান্ডিং করণীয় এবং করণীয় চিত্রের নমুনা
করো না

বোতামটির জন্য Google "G" এর একরঙা সংস্করণ ব্যবহার করুন।

ব্র্যান্ডিং গ্র্যান্ডিং করণীয় এবং করণীয় চিত্রের নমুনা
কর

অ্যাক্সেসিবিলিটি এবং সমানভাবে প্রাধান্য পেতে সঠিক রঙের মোডে বোতামটি বেছে নিন।

ব্র্যান্ডিং গ্র্যান্ডিং করণীয় এবং করণীয় চিত্রের নমুনা
করো না

হালকা, গাঢ় বা নিরপেক্ষ ছাড়া অন্য কোনও রঙিন ব্যাকগ্রাউন্ডে স্ট্যান্ডার্ড রঙের Google "G" আইকনটি রাখুন।

ব্র্যান্ডিং গ্র্যান্ডিং করণীয় এবং করণীয় চিত্রের নমুনা
কর

নির্দিষ্ট প্যাডিং এবং আকার সহ গুগল "জি" ব্যবহার করুন।

ব্র্যান্ডিং গ্র্যান্ডিং করণীয় এবং করণীয় চিত্রের নমুনা
করো না

বোতামটির জন্য আপনার নিজস্ব আইকন তৈরি করুন।

ব্র্যান্ডিং গ্র্যান্ডিং করণীয় এবং করণীয় চিত্রের নমুনা
কর

প্রয়োজনে অ্যাকশন বোতামের জন্য গুগল "জি" নিজেই ব্যবহার করুন।

ব্র্যান্ডিং গ্র্যান্ডিং করণীয় এবং করণীয় চিত্রের নমুনা
করো না

"Google দিয়ে সাইন ইন করুন" এর ক্রিয়াটি উপস্থাপন করতে বোতামটিতে "Google" শব্দটি নিজেই ব্যবহার করুন।

গুগল ব্র্যান্ডিং সেরা অনুশীলনের মাধ্যমে সাইন ইন করুন

Google এবং অন্যান্য তৃতীয় পক্ষের সাইন-ইন বিকল্পগুলির মাধ্যমে সাইন ইন করুন

"Google দিয়ে সাইন ইন করুন" বোতামটি অন্তত অন্যান্য তৃতীয় পক্ষের সাইন-ইন বিকল্পগুলির মতোই স্পষ্টভাবে প্রদর্শিত হওয়া উচিত। উদাহরণস্বরূপ, বোতামগুলির আকার প্রায় একই হওয়া উচিত এবং তাদের ভিজ্যুয়াল ওজন একই রকম হওয়া উচিত।

অন্যান্য নির্দেশিকা

যদি আপনি অতিরিক্ত স্কোপ অনুরোধ করেন, তাহলে ক্রমবর্ধমান অনুমোদনের ( অ্যান্ড্রয়েড , iOS , ওয়েব ) মাধ্যমে তা করুন, শুধুমাত্র ব্যবহারকারীকে অনুমোদনের জন্য অনুরোধ করা হবে যখন তারা এমন একটি বৈশিষ্ট্যের সাথে ইন্টারঅ্যাক্ট করতে শুরু করবে যার জন্য API অ্যাক্সেস প্রয়োজন।

আপনি যদি YouTube স্কোপগুলির জন্য অনুরোধ করেন, তাহলে একটি YouTube বোতাম ব্যবহার করুন।

আপনি যদি Google Play গেম পরিষেবা ব্যবহার করেন, তাহলে Google Play গেম পরিষেবা ব্র্যান্ডিং নির্দেশিকাও দেখুন।

এই নথিতে স্পষ্টভাবে অন্তর্ভুক্ত নয় এমনভাবে Google ব্র্যান্ডের ব্যবহার Google এর পূর্ব লিখিত সম্মতি ছাড়া অনুমোদিত নয় (আরও তথ্যের জন্য Google ব্র্যান্ড বৈশিষ্ট্যগুলির তৃতীয় পক্ষের ব্যবহারের নির্দেশিকা দেখুন)।