কৌশল

প্রকাশিত: ফেব্রুয়ারি 28, 2014

নিম্নলিখিত টিপস দিয়ে আপনার অ্যাপ্লিকেশনের ব্যবহারকারীর অভিজ্ঞতা উন্নত করুন।

অ্যাপ্লিকেশন লোড হলে ফ্লিকার

একটি ওয়েবভিউ-এর সাথে একটি অ্যাপ্লিকেশন লোড হলে কখনও কালো এবং সাদা ফ্ল্যাশ লক্ষ্য করেছেন? এটি অ্যাপের উইন্ডো ব্যাকগ্রাউন্ডের রঙ লোড করার কারণে হতে পারে, যা সাধারণত থিমে সেট করা হয়, তারপরে WebView ব্যাকগ্রাউন্ডের সাদা ফ্ল্যাশ দেখা যায়। WebView CSS সহ যেকোন সামগ্রী লোড করার আগে এটি ঘটে।

সাদা ফ্ল্যাশ অপসারণ করতে, WebView এর পটভূমির রঙ সেট করুন। ওয়েবভিউ আঁকতে মোবাইল অ্যাপে এই রঙটি প্রদর্শনের একমাত্র বিলম্ব।

mWebView.setBackgroundColor(Color.parseColor("#3498db"));

অ্যান্ড্রয়েডে, একটি res/values/colors.xml ফাইলে রঙের মান নির্ধারণ করা ভালো অভ্যাস, যেমনটি Android অ্যাপ রিসোর্স গাইডে বর্ণিত হয়েছে। আপনি যদি অ্যাপ্লিকেশনের সংস্থানগুলিতে সংজ্ঞায়িত একটি রঙ চয়ন করেন তবে কোডটি নিম্নরূপ দেখতে পারে:

mWebView.setBackgroundColor(getResources().getColor(R.color.my_color_name));

প্রতিক্রিয়া স্পর্শ করুন

মোবাইল এবং ওয়েব অ্যাপ্লিকেশনের মধ্যে একটি পার্থক্য হল অনেক ওয়েব অ্যাপে স্পর্শ প্রতিক্রিয়ার অভাব।

এই সমস্যাটি সমাধান করতে, :active pseudo class ব্যবহার করুন।

উদাহরণস্বরূপ, যদি আপনার কাছে নিম্নলিখিত স্টাইলিং সহ একটি বোতাম থাকে:

.btn {
  display: inline-block;
  position: relative;
  background-color: #f39c12;
  padding: 14px;

  border-radius: 5px;
  border-bottom-style: solid;
  border-width: 4px;
  border-color: #DA8300;
}

চাপা অবস্থা এর মত দেখতে পারে:

.btn:active {
  background-color: #E68F05;
  border-color: #CD7600;
  border-width: 2px;
  top: 2px;
}

এটি পটভূমির রঙ এবং সীমানার রঙকে কিছুটা অন্ধকার করে, এবং সীমানার আকার হ্রাস করে যাতে মনে হয় বোতামটি পৃষ্ঠায় ডুবে যাচ্ছে। top সম্পত্তি ছোট সীমানা ভারসাম্যের জন্য অবস্থান সামঞ্জস্য করে।

আপনি যদি Sass ব্যবহার করেন তবে আপনি সঠিক হেক্স মান না জেনে উপাদানের রঙ পরিবর্তন করতে গাঢ় এবং হালকা মিশ্রণ ব্যবহার করতে পারেন। অথবা আপনি hexcolortool.com এর মতো অনলাইন টুল ব্যবহার করতে পারেন।

সিস্টেম হাইলাইট

অনেক ব্যবহারকারী এজেন্ট উপাদানগুলিতে কিছু ধরণের স্পর্শ প্রতিক্রিয়া যোগ করে, যা নির্দিষ্ট শৈলী সংজ্ঞায়িত করার প্রয়োজনীয়তাকে বাধা দেয়। ওয়েবভিউতে আপনি উপাদানগুলিতে একটি কমলা রঙ বা লিঙ্ক এবং উপাদানগুলির চারপাশে একটি কমলা রিং লক্ষ্য করতে পারেন৷

আপনি যদি কাস্টম স্পর্শ এবং ফোকাস প্রতিক্রিয়া যোগ করেন, আপনি নিম্নলিখিত CSS বৈশিষ্ট্যগুলির সাথে ডিফল্টগুলি ওভাররাইড করতে পারেন:

-webkit-tap-highlight-color: rgba(0,0,0, 0.0);
outline: none;

এবং আপনার নিজস্ব রং সেট করুন:

button {
  outline: 0;
  -webkit-tap-highlight-color: rgba(0,0,0, 0.0);
}

button:focus {
  background-color: #E68F05;
  border-color: #DA8300;
}

button:active {
  background-color: #FFA91F;
  border-color: #E68F05;
}

এটি একটি ডিফল্ট, ফোকাস, এবং সক্রিয় (বা "চাপা") অবস্থা সহ অবস্থার উপর ভিত্তি করে বোতামের রঙ পরিবর্তন করে।

বোতাম ছাড়াও, ইনপুট ক্ষেত্র এবং অ্যাঙ্কর ট্যাগগুলিতে এই বৈশিষ্ট্যগুলি সেট করার কথা বিবেচনা করুন।