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 বোতাম দিয়ে সাইন ইন করুন৷

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

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

অন্ধকার

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

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

অন্ধকার থিমযুক্ত পিল আকৃতির Google বোতাম দিয়ে সাইন ইন করুন৷

অন্ধকার থিমযুক্ত আয়তক্ষেত্র আকৃতির Google বোতাম দিয়ে সাইন ইন করুন৷

নিরপেক্ষ

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

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

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

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

Google বোতাম দিয়ে একটি কাস্টম সাইন ইন তৈরি করুন৷

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

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

আকার

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

পাঠ্য

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

রঙ

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

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

হরফ

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

প্যাডিং

অ্যান্ড্রয়েড Google লোগোর আগে 12px বাম প্যাডিং, Google লোগোর পরে 10px ডান প্যাডিং এবং Google টেক্সট দিয়ে সাইন ইন করার পরে 12px ডান প্যাডিং
iOS Google লোগোর আগে 16px বাম প্যাডিং, Google লোগোর পরে 12px ডান প্যাডিং এবং Google টেক্সট দিয়ে সাইন ইন করার পরে 16px ডান প্যাডিং
ওয়েব (মোবাইল + ডেস্কটপ) Google লোগোর আগে 12px বাম প্যাডিং, Google লোগোর পরে 10px ডান প্যাডিং এবং Google টেক্সট দিয়ে সাইন ইন করার পরে 12px ডান প্যাডিং
রেফারেন্স Google বোতাম প্যাডিং রেফারেন্স দিয়ে সাইন ইন করুন

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

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

গুগল জি আইকন

ভুল বোতাম নকশা

ব্র্যান্ডিং গ্র্যান্ডিং ডস এবং ডন্টস ইমেজ নমুনা
করবেন

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

ব্র্যান্ডিং গ্র্যান্ডিং ডস এবং ডন্টস ইমেজ নমুনা
করবেন না

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

ব্র্যান্ডিং গ্র্যান্ডিং ডস এবং ডন্টস ইমেজ নমুনা
করবেন

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

ব্র্যান্ডিং গ্র্যান্ডিং ডস এবং ডন্টস ইমেজ নমুনা
করবেন না

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

ব্র্যান্ডিং গ্র্যান্ডিং ডস এবং ডন্টস ইমেজ নমুনা
করবেন

অ্যাক্সেসযোগ্যতা এবং সমান বিশিষ্টতার জন্য ডান রঙের মোডে বোতামটি বেছে নিন।

ব্র্যান্ডিং গ্র্যান্ডিং ডস এবং ডন্টস ইমেজ নমুনা
করবেন না

আলো, গাঢ় বা নিরপেক্ষ ব্যতীত অন্য রঙিন পটভূমিতে আদর্শ রঙের Google "G" আইকনটি রাখুন৷

ব্র্যান্ডিং গ্র্যান্ডিং ডস এবং ডন্টস ইমেজ নমুনা
করবেন

স্থির প্যাডিং এবং আকার সহ Google "G" এর সাথে লেগে থাকুন।

ব্র্যান্ডিং গ্র্যান্ডিং ডস এবং ডন্টস ইমেজ নমুনা
করবেন না

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

ব্র্যান্ডিং গ্র্যান্ডিং ডস এবং ডন্টস ইমেজ নমুনা
করবেন

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

ব্র্যান্ডিং গ্র্যান্ডিং ডস এবং ডন্টস ইমেজ নমুনা
করবেন না

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

Google ব্র্যান্ডিং সেরা অনুশীলনের সাথে সাইন ইন করুন৷

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

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

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

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

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

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

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