কন্টেন্ট
- 01. পাঠ্যের সাহায্যে উপাদানগুলিতে নমনীয় উচ্চতা ব্যবহার করুন
- 02. বিভাগগুলি নিখুঁতভাবে সঙ্কুচিত এবং উচ্চতায় বৃদ্ধি পেতে অনুমতি দিন
- ছোট সংস্করণে ক্লিপযুক্ত অতিরিক্ত তথ্য অন্তর্ভুক্ত করুন
- সর্বনিম্ন উচ্চতা অন্তর্ভুক্ত করুন
- 03. অক্ষরের সীমা, ছাঁটাই এবং ওভারফ্লো
- 04. একাধিক সম্পত্তি তৈরি রোধ করতে সর্বজনীন চিত্র ব্যবহার করুন
- 05. উপাদান নমনীয় প্রস্থ দিন
- 06. বিভাগগুলি করুণভাবে অদৃশ্য হওয়ার অনুমতি দিন
- 07. সমর্থিত অক্ষর সেট সহ ফন্টগুলি চয়ন করুন
- 08. নির্দিষ্ট প্রস্থের সাথে কাজ করার সময় সমস্ত সংমিশ্রণ পরীক্ষা করুন
- 09. যেখানে সম্ভব পাঠ্যের পরিবর্তে আইকনগুলি ব্যবহার করুন
- 10. চিত্রগুলিতে অনুলিপি অন্তর্ভুক্ত করবেন না
- এই পছন্দ? এগুলো পড়াে!
একজন ব্যবহারকারী-বান্ধব ইন্টারফেস তৈরি করার সময় ডিজাইনারের বিবেচনা করা উচিত এমন ভেরিয়েবলের সংখ্যা আন্তর্জাতিক গ্রাহকদের জন্য খাদ্য সরবরাহ উল্লেখযোগ্যভাবে বাড়িয়ে তুলতে পারে। শব্দ এবং বাক্যগুলি দৈর্ঘ্যে নাটকীয়ভাবে পরিবর্তিত হতে পারে এবং সামগ্রীগুলি নির্দিষ্ট লোকেলে প্রযোজ্য নয়। আপনার ডিজাইনগুলি কীভাবে সাজানো হয়েছে সে সম্পর্কে আপনি যদি স্মার্ট না হন তবে আপনার টাইপোগ্রাফি এবং বিন্যাসটি অন্য ভাষায় সম্পূর্ণরূপে বিচ্ছিন্ন হয়ে দেখতে পাবেন। আপনাকে একই সম্পদের একাধিক সংস্করণও তৈরি করতে হতে পারে। স্থানীয়করণকে অ্যাকাউন্টে নেয়নি এমন নকশাগুলি সম্পূর্ণ হতে অনেক বেশি সময় নিতে পারে - বিশেষত যদি আলাদা আলাদা অঞ্চলের জন্য ব্যবধান, ফন্ট আকার এবং সামগ্রী পরিবর্তনের জন্য আপনার প্রয়োজন হয়। ইন্টারফেসগুলি আপনার স্থানীয় ভাষায় খুব বেশি মনোযোগ কেন্দ্রীভূত করলে বিভিন্ন লোকালগুলিতে বিরতি বা অস্বাস্থ্যকর দেখতে পারে।
এই টিপসগুলির সাহায্যে কোনও অঞ্চলের মানকে অবনতি না করে আন্তর্জাতিক গ্রাহকদের কাছে একটি পরিচ্ছন্ন অভিজ্ঞতা সরবরাহ করতে সহায়তা করা উচিত, পাশাপাশি আপনার বাজেটের মধ্যে খেতে পারে এমন অপ্রয়োজনীয় কাজ রোধ করা উচিত। টিপসটি ডিজাইনের উপর ফোকাসযুক্ত তবে বিকাশকারীদের সমান ভূমিকা নেওয়ার জন্য ব্যবহারিক সিএসএস উদাহরণগুলিও কভার করে। (অনুবাদকৃত অনুলিপি নীচের উদাহরণগুলির সুবিধার্থে গুগল ট্রান্সলেটের সৌজন্যে সরবরাহ করা হয়েছে, সুতরাং দয়া করে কোনও সাংস্কৃতিক ভুলকে ক্ষমা করুন))
01. পাঠ্যের সাহায্যে উপাদানগুলিতে নমনীয় উচ্চতা ব্যবহার করুন
একটি সাধারণ সমস্যা হ'ল পাঠ্যটি বিভিন্ন লাইনে আবদ্ধ হওয়ার সময় উপাদানগুলিকে পরিচ্ছন্ন দেখায়। এই উদাহরণে আপনি দেখতে পাচ্ছেন বোতামগুলির সারিটি ইংরেজিতে সুন্দর এবং পরিচ্ছন্ন দেখাচ্ছে। প্রতিটি উপাদান একই উচ্চতা এবং অনুলিপি সমস্ত এক লাইনে হয়। সুদৃশ্য অনুবাদকৃত অনুলিপিটি সহজেই যুক্ত করা হলে এখানে একটি সাধারণ সমস্যার উদাহরণ রয়েছে।
আমাদের রাশিয়ান বন্ধুদের জন্য এমন দুর্দান্ত অভিজ্ঞতা নয়। আপনার পাঠ্যটি যথাযথভাবে উল্লম্বভাবে সারিবদ্ধ হয়েছে এবং উপাদান উচ্চতা সমান হয়েছে তা নিশ্চিত করুন। এই উদাহরণে, বোতামগুলির একটি গতিশীল উচ্চতা প্রয়োজন যা লম্বা উপাদানটির সমান। ওয়েব ডিজাইনে একটি ভাল প্রতারণা CSS বৈশিষ্ট্য প্রদর্শনটি ব্যবহার করা: টেবিল-ঘর। ভাইবোন উপাদানগুলি টেবিল কোষগুলির মতো আচরণ করবে, যা স্বয়ংক্রিয়ভাবে এমনকি উচ্চতাগুলিও দেয় এবং আপনাকে পাঠ্যের উল্লম্ব প্রান্তিককরণের উপর ভাল নিয়ন্ত্রণ দেয়।
02. বিভাগগুলি নিখুঁতভাবে সঙ্কুচিত এবং উচ্চতায় বৃদ্ধি পেতে অনুমতি দিন
এই উদাহরণের অনুলিপি উত্সর্গীকৃত স্থানের পটভূমিতে পুরোপুরি ফিট করে। বিভিন্ন পরিমাণে পাঠ্য বিভাগের উচ্চতা উপরে বা নীচে ঠেলে দেবে যাতে নিম্নলিখিত সমস্যাটি রোধ করতে ব্যাকগ্রাউন্ড গ্রাফিককে সেই অনুযায়ী সামঞ্জস্য করতে হবে।
যদি পটভূমিটি এক সংস্করণের জন্য নিখুঁত উচ্চতায় রফতানি করা হয় তবে প্রসার করার কোনও জায়গা নেই। এই বিভাগটি আরও নমনীয় তা নিশ্চিত করার জন্য আপনি কিছু জিনিস করতে পারেন।
ছোট সংস্করণে ক্লিপযুক্ত অতিরিক্ত তথ্য অন্তর্ভুক্ত করুন
এটি আপনার অনুলিপি ঘর বাড়িয়ে দেয়। আপনি অসীম দৈর্ঘ্য নিশ্চিত করতে ইমেজটিকে একটি শক্ত রঙ বা পুনরাবৃত্তি প্যাটার্নে বিবর্ণ করতে পারেন। এটি যখন অতিরিক্ত অতিরিক্ত ডেটা ব্যবহার করে তখন জার্মান সংস্করণটি দেখতে হ'ল।
সর্বনিম্ন উচ্চতা অন্তর্ভুক্ত করুন
কখনও কখনও অনুলিপি লেখক একটি বিভাগের জন্য পর্যাপ্ত পাঠ্য অন্তর্ভুক্ত করবে না। ন্যূনতম উচ্চতা সহ বিভাগগুলি এত ছোট হওয়া থেকে রোধ করতে পারে যে তারা নীচের মত জায়গা বা অস্পষ্ট দেখায়।
03. অক্ষরের সীমা, ছাঁটাই এবং ওভারফ্লো
আপনার অনুবাদ কীভাবে সংগঠিত হয়েছে তার উপর নির্ভর করে চরিত্রের সীমা নির্ধারণ করা সম্ভব। সীমাবদ্ধ স্থান সহ অঞ্চলগুলিতে অনুলিপিগুলি অনুলিপি বর্ধমান রোধ করতে এটি দরকারী। কখনও কখনও এটি সর্বদা ব্যবহারিক হয় না, সুতরাং ফ্যালব্যাক প্রয়োগ করার পরামর্শ দেওয়া হয় যেমন অনুলিপিটির একটি ছোট ক্ষেত্র দেখানো এবং পুরো পাঠ্যটি প্রকাশ করার বিকল্প দেওয়া।
পাঠ্যের ব্লকগুলি কখনই কোনও নির্দিষ্ট আকারের বেশি না যায় তা নিশ্চিত করার জন্য এটি দুর্দান্ত কৌশল। এটি কপির দৈর্ঘ্যতে পরিবর্তিত হয় এমন লোকেলগুলিতে সামঞ্জস্যপূর্ণ ডিজাইন রাখার জন্যও দরকারী। তবে ব্যবহারকারীকে ক্রমাগত বিষয়বস্তু প্রকাশ করতে বাধা দেওয়ার জন্য অল্প পরিমাণে এটি সেরা ব্যবহার করা হয়। অনুলিপি প্রকাশিত হলে কী ঘটে তা বিবেচনা করতে ভুলবেন না; পার্শ্ববর্তী উপাদানগুলি সেই অনুযায়ী প্রসারিত করা উচিত।
যদি লুকানো পাঠ্য প্রকাশ করা কোনও বিকল্প না হয় তবে সর্বশেষ অবলম্বনটি হ'ল অনুলিপি করা। এটি এমন জায়গাগুলির জন্য প্রাসঙ্গিক হতে পারে যেখানে স্থান স্থির থাকে এবং এর বাইরে আর কোনও প্রকাশের অবকাশ নেই। কাটা ছাড়াই, সর্বাধিক প্রচলিত সমস্যা হ'ল পাঠের সীমাবদ্ধতার উপর দিয়ে রক্তপাত।
সংক্ষিপ্তকরণ সত্যিই আঁটসাঁট জায়গা পরিপাটি করতে সহায়তা করতে পারে। এটির জন্য একটি সুবিধাজনক সিএসএস সম্পত্তি পাঠ্য-ওভারফ্লো: উপবৃত্ত, যা স্বয়ংক্রিয়ভাবে পাঠ্য কেটে দেয় এবং তিনটি বিন্দু যুক্ত করে… ’’ যদি এটি নির্ধারিত জায়গার মধ্যে ফিট না করে।
04. একাধিক সম্পত্তি তৈরি রোধ করতে সর্বজনীন চিত্র ব্যবহার করুন
আন্তর্জাতিক সাইটের জন্য চিত্রের বিভিন্নতা তৈরি করা কখনও কখনও অনিবার্য। যদিও তাদের ব্যবহারকারীর পক্ষে লোকেলতে অঞ্চল-নির্দিষ্ট চিত্রাবলী পাওয়া উপকারী হতে পারে তবে এটি সম্ভবত প্রয়োজনীয় নাও হতে পারে এবং আপনার কাজের চাপ উল্লেখযোগ্যভাবে বাড়িয়ে তুলতে পারে, বিশেষত যদি ভবিষ্যতে চিত্রের কোনও বৈচিত্রগুলি পরিবর্তন হয়।
আসুন আমরা আপনাকে এমন কোনও ক্লায়েন্টের সাথে ডিল করে যাচ্ছি যা ফাস্ট ফুডের আউটলেটগুলির জন্য ভাউচার প্রচার করছে। একটি দেশ ম্যাকডোনাল্ডকে টার্গেট করছে, অন্যটি বার্গার কিংকে লক্ষ্য করতে পারে এবং আরও অনেক কিছু। প্রতিটি আউটলেটের জন্য নির্দিষ্ট লোগোগুলি প্রদর্শন করার পরিবর্তে, যার জন্য প্রতি অঞ্চলতে একটি সম্পদ উত্পন্ন হতে পারে, বার্গারের সিলুয়েটের মতো জেনেরিক সম্পদ বেছে নেওয়া আরও দক্ষ।
এটি সর্বজনীনভাবে বোঝা যাবে এবং সময়ের সাথে সাথে আউটলেট এবং লোগোগুলি পরিবর্তিত হওয়ার পরে আপডেট করারও প্রয়োজন হয় না।
05. উপাদান নমনীয় প্রস্থ দিন
নীচের বোতামগুলি বিভিন্ন সামগ্রী ফিল্টার উপস্থাপন করে। এই উদাহরণে, অঞ্চলে ব্যবহারকারীর চয়ন করার জন্য চারটি বিভাগ উপলব্ধ।
প্রস্থগুলি একটি এমনকি 25 শতাংশ কারণ এটি এই দৃষ্টিতে দুর্দান্তভাবে কাজ করে। অনুলিপি যদি এমন অঞ্চলের জন্য স্থানীয় করা হয় যার জন্য কম বিভাগের প্রয়োজন হয় তবে এটি দেখতে এরকম কিছু হবে:
প্রস্থ স্থির করা দীর্ঘতর অনুলিপি বা বিভিন্ন বিভাগের জন্য অ্যাকাউন্ট করে না। যখন উপাদানগুলি নমনীয় হয় এবং প্যারেন্ট ব্লকটি পৃষ্ঠার প্রস্থ পূরণ করে তখন এটি কীভাবে উন্নতি করতে পারে তা আপনি দেখতে পারেন।
06. বিভাগগুলি করুণভাবে অদৃশ্য হওয়ার অনুমতি দিন
কখনও কখনও সামগ্রীর ব্লকগুলি নির্দিষ্ট কয়েকটি লোকেলের ক্ষেত্রে প্রযোজ্য। উদাহরণস্বরূপ, যদি কোনও ওয়েবসাইট কোনও মোবাইল ফোন নেটওয়ার্কের জন্য বৈশিষ্ট্যগুলি তালিকাভুক্ত করে এবং 4 জি এর মতো বৈশিষ্ট্য কেবল নির্দিষ্ট দেশগুলির জন্যই প্রাসঙ্গিক হয় তবে পৃষ্ঠার নকশা করা ভাল that বিভাগটি কোনও লক্ষণীয় ফাঁকা স্থান ছাড়াই নিখরচায় ছাড়তে পারে।
আপনি 4 জি বিভাগটি সরিয়ে ফেললে এই বিন্যাসটি কাজ করবে না। ওয়াই-ফাই ব্লকটি জায়গার সাথে মানানসইভাবে প্রসারিত করার পক্ষে যথেষ্ট পরিমাণে নয়, তাই এটি প্রসারিত এবং হারিয়ে যাওয়া দেখতে শেষ হয়।
একটি সমাধান বিভাগগুলি stackable করা হবে। বিভাগগুলি পৃথক করা হয় এবং তাদের নিজস্ব অনুভূমিক ব্লকগুলি দেওয়া হলে তারা আশেপাশের কোনও কিছুকে প্রভাবিত না করে কৃপণভাবে অদৃশ্য হয়ে যেতে পারে।
07. সমর্থিত অক্ষর সেট সহ ফন্টগুলি চয়ন করুন
আপনি যখন নির্দিষ্ট কয়েকটি দেশের সাথে ডিল করছেন, আপনাকে অবশ্যই আপনার নির্বাচিত ফন্টের প্রাসঙ্গিক অক্ষর সেট আছে তা নিশ্চিত করতে হবে। ইংরাজীভাষী দেশগুলিতে সাধারণত লাতিন অক্ষর সেট দ্বারা আবৃত অক্ষরগুলির প্রয়োজন হয় তবে অন্যদের গ্রীক বা আরবি সেটগুলিতে পাওয়া অক্ষরগুলির প্রয়োজন হতে পারে। যদি আপনার ফন্টটিতে ভাষাটি সমর্থন করার জন্য প্রয়োজনীয় অক্ষর না থাকে তবে আপনার ব্যবহারকারীরা খালি অক্ষর দেখতে পাবেন। লাইসেন্সবিহীন ফন্টগুলি সাধারণত লাতিন সেটের বাইরের অক্ষরের পরিবেশন করে না, তাই আপনার ফন্টগুলি বুদ্ধিমানের সাথে বেছে নিতে ভুলবেন না। সিস্টেম ফন্টগুলি ব্যবহারকারীরা যাতে অনুপস্থিত বা ফাঁকা অক্ষরের মুখোমুখি না হন তা নিশ্চিত করার একটি ভাল উপায় কারণ এই ফন্টগুলিতে ভাষার বিস্তৃত পরিসীমা সমর্থন করার জন্য সাধারণত অক্ষর থাকে। আপনি যদি আইওএসের জন্য ডিজাইনিং করেন তবে আইওএস ফন্টগুলি সিস্টেম ফন্ট চয়ন করার জন্য একটি ভাল উত্স।
08. নির্দিষ্ট প্রস্থের সাথে কাজ করার সময় সমস্ত সংমিশ্রণ পরীক্ষা করুন
আপনার কাছে উপলব্ধ স্থানটি যদি সীমাবদ্ধ থাকে তবে কখনও কখনও আপনি সর্বাধিক সম্ভাব্য ফলাফলের ভিত্তিতে একটি বিন্যাসের সিদ্ধান্ত নিতে পারেন। আপনি যদি অনুবাদটির সমস্ত সম্ভাব্য সংমিশ্রণগুলি জানেন তবে আপনার কোনও সমস্যার মুখোমুখি হওয়ার সম্ভাবনা আছে কিনা তা দেখার জন্য ধারকটির মধ্যে দীর্ঘতম স্ট্রিং রাখা ভাল ধারণা idea
উপরের উদাহরণটি ব্যবহার করে, যদি আমি নিশ্চিত করতে চাই যে ‘জবাব দেওয়া’ লিঙ্কটি এমন একটি অবস্থানে রয়েছে যা সমস্ত অঞ্চলে কাজ করবে তবে আমাকে নিশ্চিত করতে হবে যে এটির ব্যবহারকারীর নামটি কখনই ছড়িয়ে যাবে না no আমি জানি যে ব্যবহারকারীর ব্যবহারের জন্য সর্বাধিক অক্ষরের প্রস্থটি 15 টি অক্ষর এবং আমরা একটি নির্দিষ্ট-প্রস্থের ফন্ট ব্যবহার করছি না, তাই আমি 'জবাব' দেওয়ার জন্য দীর্ঘতম অনুবাদ পাশাপাশি দীর্ঘতম অক্ষর (‘মি’) পরীক্ষা করি।
যখন উপাদানগুলি পাশাপাশি রাখা হয় তখন আমি দেখতে পাই তারা সিদ্ধান্ত নেওয়ার জন্য আমার জন্য একটি আরামদায়ক জায়গা ছেড়ে যায়।
09. যেখানে সম্ভব পাঠ্যের পরিবর্তে আইকনগুলি ব্যবহার করুন
ইউআই উপাদানগুলির সাথে কাজ করার সময়, বিস্তৃত স্বীকৃত আকারগুলির দ্বারা প্রতিনিধিত্ব করা বোতামগুলি দেখতে সাধারণ। এখানে বোতামে পাঠ্য লেবেল ব্যবহার করে এমন একটি উদাহরণ মিডিয়া প্লেয়ার।
মিডিয়া প্লেয়ারের দৈর্ঘ্যের বাইরে বোতামগুলি প্রসারিত করার জন্য স্থানীয়করণকৃত অনুলিপিটির জন্য এখানে বিপদ রয়েছে। পাঠ্যের পরিবর্তে আইকনটি ব্যবহার করার সৌন্দর্য হ'ল এটির স্থানীয়করণ প্রয়োজন হয় না এবং সর্বদা একই পরিমাণ স্থান নেয়।
10. চিত্রগুলিতে অনুলিপি অন্তর্ভুক্ত করবেন না
যেখানে সম্ভব সেখানে রফতানি করা চিত্র এবং সম্পদের জন্য স্থানীয়করণ প্রয়োজন এমন পাঠ্য ব্যবহার করা উচিত নয়। আপনাকে কেবল প্রতিটি অঞ্চলের জন্য একটি চিত্র সম্পদ তৈরি করতে হবে না, তবে অনুলিপি পরিবর্তন হলে আপনাকে সেগুলি আবারও রপ্তানি করতে হবে। চিত্রগুলির শীর্ষে গতিশীল মার্কআপ ব্যবহার করা আরও বেশি দক্ষ তাই আপনাকে কেবল একটি চিত্র তৈরি করতে হবে। অনুলিপিটির পরে কোনও সম্পদের কোনও পরিবর্তন করার প্রয়োজন ছাড়াই পরিবর্তন করা যেতে পারে।
স্থানীয়করণ কৌশলযুক্ত হতে পারে তবে আপনি যখন বিভিন্ন সংস্কৃতি এবং জাতীয়তার ব্যবহারকারীরাও সমান অভিজ্ঞতা ভাগ করে নেবেন তখন তা ফলপ্রসূ হতে পারে। ডিজাইনিং করার সময় একটি ভাষায় ফোকাস করা সহজ হতে পারে এবং প্রায়শই আপনি কিছু লোকেলকে অবহেলিত দেখতে পাবেন কারণ তাদের একটি কার্যনির্বাহী সমাধান দেওয়ার কোনও প্রচেষ্টা করা হয়নি। আপনি যদি প্রতিটি পদক্ষেপে স্থানীয়করণকে মনে রাখেন তবে এমনটি হওয়ার দরকার নেই। আপনি যদি শুরুতে ডিজাইনগুলিকে আরও নমনীয় করে তুলতে সময় ব্যয় করেন তবে দীর্ঘমেয়াদে সময় সাশ্রয় করবেন, পুরো বিভাগের পুনরায় নকশা আটকাতে বা অপ্রয়োজনীয় সম্পদ রফতানি করে বাজেট জ্বালিয়ে ফেলুন।
আপনি একবার স্থানীয় উত্পাদিত সংস্করণগুলিকে সামঞ্জস্য করার জন্য একটি পণ্য ডিজাইন করেছেন, আপনি যে পরিকল্পনা অবাক করেননি তা অবাক করার জন্য সর্বদা তাদের ভালভাবে পরীক্ষা করা ভাল। আপনার আন্তর্জাতিক ব্যবহারকারীগণ এটির জন্য আপনাকে ধন্যবাদ জানাবে।
জোয়ের ওয়েব ডিজাইন এবং ফ্রন্টএন্ড বিকাশের এক দশকেরও বেশি সময় ধরে বাণিজ্যিক অভিজ্ঞতা রয়েছে। তিনি ২০১২ সালে সনিতে প্লেস্টেশন ওয়েবসাইট এবং অ্যাপ্লিকেশনগুলির ডিজাইনার হিসাবে যোগদান করেছিলেন।
এই পছন্দ? এগুলো পড়াে!
- কীভাবে একটি অ্যাপ তৈরি করতে হয়
- এখনই আপনার জন্য নিখরচায় গ্রাফিক ডিজাইনের সফ্টওয়্যার!
- উজ্জ্বল ওয়ার্ডপ্রেস টিউটোরিয়াল নির্বাচন
- এই প্রো টিপস সহ একটি নিখুঁত মেজাজ বোর্ড তৈরি করুন
