النصائح والتلميحات

تاريخ النشر: 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.

على سبيل المثال، إذا كان لديك زرّ يتضمّن التصميم التالي:

.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، يمكنك استخدام مزيجَي darken وlighten لتغيير ألوان العناصر بدون الحاجة إلى معرفة القيمة السداسية الدقيقة. أو يمكنك الاستفادة من أدوات على الإنترنت، مثل 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;
}

يؤدي ذلك إلى تغيير لون الزر استنادًا إلى حالته، بما في ذلك الحالة التلقائية والحالة التي يكون فيها الزر في المقدّمة والحالة النشط (أو "مضغوط").

بالإضافة إلى الأزرار، ننصحك بضبط هذه السمات على حقول الإدخال وعلامات الربط.