טיפים וטריקים

תאריך פרסום: 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, תוכלו להשתמש ב-mixins של darken ו-lighten כדי לשנות את הצבעים של רכיבים בלי לדעת את הערך המדויק שלהם ב-hex. לחלופין, אפשר להשתמש בכלים באינטרנט כמו 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;
}

כך אפשר לשנות את צבע הלחצן בהתאם למצב שלו, כולל מצב ברירת המחדל, מצב המיקוד ומצב פעיל (או "לוחץ").

בנוסף ללחצנים, מומלץ להגדיר את המאפיינים האלה בשדות קלט ובתגי עוגן.