نکات و ترفندها

تاریخ انتشار: 28 فوریه 2014

با نکات زیر تجربه کاربری اپلیکیشن خود را افزایش دهید.

هنگام بارگیری برنامه، سوسو بزنید

آیا تا به حال متوجه فلش سیاه و سفید در هنگام بارگذاری برنامه با WebView شده اید؟ این ممکن است به دلیل بارگیری رنگ پس‌زمینه پنجره برنامه، که معمولاً در موضوع تنظیم می‌شود، و به دنبال آن فلاش سفید پس‌زمینه WebView باشد. این اتفاق قبل از بارگیری WebView از جمله CSS رخ می دهد.

برای حذف فلاش سفید، رنگ پس زمینه WebView را تنظیم کنید. تنها تاخیر در نمایش این رنگ در اپلیکیشن موبایل برای ترسیم WebView است.

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

در Android، تعریف مقادیر رنگ در فایل res/values/colors.xml ، همانطور که در راهنمای منابع برنامه Android توضیح داده شده است، تمرین خوبی است. اگر رنگی را انتخاب کنید که در منابع برنامه تعریف شده است، کد ممکن است به شکل زیر باشد:

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

بازخورد را لمس کنید

یکی از تفاوت های بین برنامه های موبایل و وب عدم وجود بازخورد لمسی در بسیاری از برنامه های وب است.

برای حل این مشکل از کلاس :active pseudo استفاده کنید.

برای مثال، اگر دکمه ای با استایل زیر دارید:

.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 استفاده کنید.

نکات برجسته سیستم

بسیاری از عوامل کاربر نوعی بازخورد لمسی را به عناصر اضافه می کنند که از نیاز به تعریف سبک های خاص جلوگیری می کند. در WebView ممکن است متوجه یک رنگ نارنجی روی عناصر یا یک حلقه نارنجی در اطراف پیوندها و عناصر شوید.

اگر بازخورد لمسی و فوکوس سفارشی را اضافه کنید، می‌توانید با ویژگی‌های 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;
}

این رنگ دکمه را بر اساس وضعیت، از جمله حالت پیش‌فرض، فوکوس و حالت فعال (یا "فشرده شده") تغییر می‌دهد.

علاوه بر دکمه‌ها، این ویژگی‌ها را روی فیلدهای ورودی و تگ‌های لنگر تنظیم کنید.