सलाह और सुझाव

पब्लिश करने की तारीख: 28 फ़रवरी, 2014

यहां दी गई सलाह का इस्तेमाल करके, अपने ऐप्लिकेशन के उपयोगकर्ता अनुभव को बेहतर बनाएं.

ऐप्लिकेशन लोड होने पर फ़्लिकर करना

क्या आपको कभी वेबव्यू की मदद से ऐप्लिकेशन लोड होने पर, ब्लैक ऐंड व्हाइट फ़्लैश दिखता है? ऐसा ऐप्लिकेशन की विंडो के बैकग्राउंड का रंग लोड होने की वजह से हो सकता है. आम तौर पर, यह रंग थीम में सेट होता है. इसके बाद, वेबव्यू के बैकग्राउंड का सफ़ेद रंग फ़्लैश होता है. यह तब होता है, जब 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 का इस्तेमाल करने पर, एलिमेंट के रंगों में बदलाव करने के लिए, गहरे और हल्के रंग वाले मिक्सिन का इस्तेमाल किया जा सकता है. इसके लिए, आपको हेक्स की सटीक वैल्यू जानने की ज़रूरत नहीं है. इसके अलावा, hexcolortool.com जैसे ऑनलाइन टूल का इस्तेमाल भी किया जा सकता है.

सिस्टम की हाइलाइट

कई उपयोगकर्ता एजेंट, एलिमेंट में टच फ़ीडबैक जोड़ते हैं. इससे, खास स्टाइल तय करने की ज़रूरत नहीं पड़ती. वेबव्यू में, आपको एलिमेंट पर नारंगी रंग या लिंक और एलिमेंट के चारों ओर नारंगी रंग का रिंग दिख सकता है.

कस्टम टच और फ़ोकस फ़ीडबैक जोड़ने पर, इन सीएसएस प्रॉपर्टी की मदद से डिफ़ॉल्ट वैल्यू बदली जा सकती हैं:

-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;
}

इससे बटन की स्थिति के आधार पर उसका रंग बदल जाता है. इसमें डिफ़ॉल्ट, फ़ोकस, और ऐक्टिव (या "दबाया गया") स्थिति शामिल है.

बटन के अलावा, इन प्रॉपर्टी को इनपुट फ़ील्ड और ऐंकर टैग पर सेट करें.