موبائل ڈیولپمنٹ میں UI/UX اور اجزاء: یہ کیا ہیں، اقسام اور کیسے استعمال کریں

ڈیزائن سسٹمز: Material Design اور Human Interface Guidelines

ہر پلیٹ فارم اپنے قواعد اور اجزاء کا سیٹ پیش کرتا ہے۔ Android کے لیے، یہ Material Design ہے، جسے Google نے 2014 میں تیار کیا تھا۔ Material Design طبعی مادے کے استعارے کا استعمال کرتا ہے — تہیں، سائے (Elevation)، اینی میٹڈ ٹرانزیشنز اور انکولی لے آؤٹ۔ اہم اصولوں میں بلندی کے ذریعے درجہ بندی، بامعنی حرکت اور مختلف فارم فیکٹرز کے مطابق ڈھلنے کی صلاحیت شامل ہے۔ ہم Material Design 3 (Material You) — متحرک تھیم اور ذاتی نوعیت کے رنگوں والا تازہ ترین ورژن — دریافت کرنے کی سفارش کرتے ہیں۔

Apple Human Interface Guidelines (HIG) پیش کرتا ہے — iOS، iPadOS، macOS، watchOS اور tvOS کے لیے قواعد کا ایک سیٹ۔ HIG واضح نوع نگاری (San Francisco)، Notch اور Dynamic Island کو مدنظر رکھنے کے لیے Safe Area، اشاروں پر مبنی نیویگیشن اور مستقل مزاجی پر زور دیتا ہے۔ Material Design کے برعکس، HIG "تہوں" اور Elevation کا استعمال نہیں کرتا — اس کے بجائے، یہ دھندلاپن (vibrancy)، سائے اور باریک تقسیم کنندگان استعمال کرتا ہے۔ مکمل HIG دستاویزات نئی iOS ریلیز کے ساتھ باقاعدگی سے اپ ڈیٹ ہوتی ہیں۔

IT Sectr میں، ہم کلائنٹ کے پلیٹ فارم کے لحاظ سے دونوں ڈیزائن سسٹم استعمال کرتے ہیں۔ کراس پلیٹ فارم Flutter پروجیکٹس کے لیے، ہم ایک متحد ڈیزائن سسٹم تیار کرتے ہیں جو Material Design اور HIG کے بہترین طریقوں کو یکجا کرتا ہے۔ یہ نقطہ نظر کوڈ کی نقل کے بغیر ہر پلیٹ فارم پر مقامی UX کو محفوظ رکھتا ہے۔

اعلامی UI فریم ورک: SwiftUI اور Jetpack Compose

UI بنانے کا روایتی طریقہ XML (Android) یا Interface Builder / کوڈ (iOS) کے ذریعے حکمیتی لے آؤٹ ہے۔ جدید متبادل اعلامی فریم ورک ہیں، جہاں ڈیولپر بیان کرتا ہے کہ انٹرفیس ہر حالت میں کیسا نظر آنا چاہیے، اور فریم ورک اپ ڈیٹس کو سنبھالتا ہے۔

Jetpack Compose (Android)

Jetpack Compose Kotlin میں مقامی UI بنانے کے لیے Google کا جدید ٹول کٹ ہے۔ XML لے آؤٹ کے بجائے، Kotlin کمپوزایبل فنکشنز (@Composable) استعمال ہوتے ہیں۔ Compose مکمل طور پر اعلامی ہے: جب ڈیٹا تبدیل ہوتا ہے، تو اسکرین کے صرف تبدیل شدہ حصے دوبارہ کھینچے جاتے ہیں۔ متن اور بٹن والی ایک سادہ اسکرین کی مثال:

@Composable
fun GreetingScreen() {
    var count = remember { mutableStateOf(0) }
    Column {
        Text(text = "Нажато: $count")
        Button(onClick = { count++ }) {
            Text("Нажми меня")
        }
    }
}

SwiftUI (iOS)

SwiftUI Apple کا اعلامی فریم ورک ہے جو 2019 میں متعارف کرایا گیا تھا۔ یہ ایک متحد API کے ذریعے تمام Apple پلیٹ فارمز (iOS، iPadOS، macOS، watchOS، tvOS) پر کام کرتا ہے۔ SwiftUI ڈیٹا کے انتظام کے لیے View ڈھانچے، @State اور @Binding خصوصیات اور اسٹائلنگ کے لیے موڈیفائر استعمال کرتا ہے۔ SwiftUI میں مندرجہ بالا مثال کے مساوی:

struct GreetingView: View {
    @State private var count = 0
    var body: some View {
        VStack {
            Text("Нажато: \(count)")
            Button("Нажми меня") {
                count += 1
            }
        }
    }
}

Flutter Widgets

Google کا Flutter اپنی ویجیٹ لائبریری استعمال کرتا ہے۔ Flutter میں ہر چیز ایک ویجیٹ ہے — پیڈنگ سے لے کر پوری اسکرین تک۔ ویجیٹس StatelessWidget (ناقابل تبدیلی) اور StatefulWidget (حالت کے ساتھ) میں تقسیم ہوتے ہیں۔ بنیادی کنٹینرز Container، Row، Column، Stack ہیں۔ Flutter پلیٹ فارم کے مقامی اجزاء استعمال نہیں کرتا — یہ Skia Engine کے ذریعے سب کچھ کھینچتا ہے، جو Android اور iOS دونوں پر یکساں شکل کو یقینی بناتا ہے۔

class GreetingWidget extends StatefulWidget {
    @override
    State createState() => _GreetingWidgetState();
}
class _GreetingWidgetState extends State<GreetingWidget> {
    int count = 0;
    @override
    Widget build(BuildContext context) {
        return Column(
            children: [
                Text('Нажато: $count'),
                ElevatedButton(
                    onPressed: () => setState(() => count++),
                    child: Text('Нажми меня'),
                ),
            ],
        );
    }
}

Android اور iOS کے لیے مقامی UI اجزاء

اعلامی فریم ورک کے پھیلاؤ کے باوجود، میراثی پروجیکٹس اور گہری تخصیص کی حمایت کے لیے مقامی اجزاء کو سمجھنا اہم ہے۔

نیویگیشن

Android میں نیویگیشن Activity (اسکرین سرگرمیاں) اور Fragment (ایک Activity کے اندر ٹکڑے) پر مبنی ہے۔ Jetpack Navigation Component نیویگیشن گراف کے ذریعے اسکرینوں کے درمیان منتقلی کو آسان بناتا ہے۔ iOS میں، نیویگیشن NavigationController — اینی میٹڈ ٹرانزیشن والے کنٹرولرز کا ایک اسٹیک — کے ذریعے لاگو کی جاتی ہے۔ Tab Bar اور Bottom Navigation ایپ کے اہم حصوں کے درمیان سوئچ کرنے کے قابل بناتے ہیں۔ Drawer (سائڈ مینو) اور Toolbar/ActionBar اضافی اقدامات کے لیے استعمال ہوتے ہیں۔ Android Navigation Component تمام نئے پروجیکٹس کے لیے تجویز کیا جاتا ہے۔

فہرستیں

بڑی مقدار میں ڈیٹا ظاہر کرنے کے لیے، Android RecyclerView — ViewHolder دوبارہ استعمال کے ساتھ ایک موثر کنٹینر — استعمال کرتا ہے۔ iOS میں مساوی UITableView (عمودی فہرستیں) اور UICollectionView (گرڈ) ہیں۔ Jetpack Compose LazyColumn اور LazyVerticalGrid پیش کرتا ہے، جبکہ SwiftUI List اور LazyVStack/LazyHStack فراہم کرتا ہے۔ Lazy اجزاء کا اہم فائدہ صرف نظر آنے والے عناصر کو رینڈر کرنا ہے۔

لے آؤٹ اور پوزیشننگ

Android View System کئی لے آؤٹ کنٹینرز پیش کرتا ہے: ConstraintLayout (لچکدار رکاوٹ کا نظام)، LinearLayout (لکیری ترتیب)، RelativeLayout (نسبتی پوزیشننگ)، FrameLayout (تہوں کا اسٹیکنگ)۔ iOS میں، Core Auto Layout عناصر کی پوزیشن بیان کرنے کے لیے رکاوٹوں کا نظام (NSLayoutConstraint) استعمال کرتا ہے۔ SwiftUI اور Flutter بالترتیب VStack/HStack/ZStack اور Row/Column/Stack استعمال کرتے ہیں۔

پیمائش کی اکائیاں اور ذمہ دار لے آؤٹ

موبائل ڈیوائسز کے UI اجزاء مختلف پکسل کثافتوں کو مدنظر رکھتے ہوئے ڈسپلے ہوتے ہیں۔ انٹرفیس کو تمام اسکرینوں پر ایک جیسا دکھانے کے لیے، کثافت سے آزاد اکائیاں استعمال کی جاتی ہیں۔

اسکرین کی کثافتیں درجہ بندی کی جاتی ہیں: mdpi (160 dpi، 1x)، hdpi (240 dpi، 1.5x)، xhdpi (320 dpi، 2x)، xxhdpi (480 dpi، 3x)، xxxhdpi (640 dpi، 4x)۔ تصاویر تیار کرتے وقت، آپ کو تمام کثافتوں کے لیے وسائل بنانے ہوں گے: icon.png، icon_hdpi.png، icon_xhdpi.png وغیرہ۔ ویکٹر فارمیٹس (Android میں VectorDrawable، iOS میں SF Symbols) متعدد راسٹر وسائل کے مسئلے کو حل کرتے ہیں۔

IT Sectr میں، ہم Figma سے آئیکن برآمد کرنے کے لیے اسکیلنگ فیکٹر استعمال کرتے ہیں: ہم iOS کے لیے 1x، 2x، 3x اور Android کے لیے mdpi، hdpi، xhdpi، xxhdpi، xxxhdpi پر برآمد کرتے ہیں۔ یہ ٹیبلیٹ اور فولڈیبل اسمارٹ فونز سمیت تمام آلات پر تیز ڈسپلے کو یقینی بناتا ہے۔

جدید UI تصورات: ڈارک موڈ، Safe Area، قابلیت رسائی

جدید موبائل ایپ UI اجزاء کو متعدد معیارات کی حمایت کرنی چاہیے، جن کے بغیر صارف کا تجربہ نامکمل ہوگا۔

ڈارک موڈ / لائٹ موڈ

ڈارک موڈ جدید ایپلیکیشنز میں ایک لازمی آپشن ہے۔ Material Design 3 اور iOS 13+ ڈارک تھیم کے لیے بلٹ ان سپورٹ فراہم کرتے ہیں۔ رنگوں کو الٹنا نہیں بلکہ علیحدہ رنگ پیلیٹ استعمال کرنا اہم ہے: گہرا پس منظر، ہلکا متن، ثانوی عناصر کے لیے کم کنٹراسٹ۔ خودکار سوئچنگ کو ڈیوائس کے سسٹم تھیم سے منسلک کیا جا سکتا ہے۔

Safe Area اور Notch / Dynamic Island سپورٹ

جدید iPhones میں ایک Notch (فرنٹ کیمرے کے لیے کٹ آؤٹ) اور Dynamic Island ہوتا ہے۔ Android آلات میں بھی کٹ آؤٹ اور گول کونے (Corner Radius) ہوتے ہیں۔ Safe Area اسکرین کا وہ علاقہ ہے جو سسٹم عناصر (اسٹیٹس بار، ہوم انڈیکیٹر)، نیویگیشن بار اور کٹ آؤٹ سے پاک ہونے کی ضمانت ہے۔ iOS خود بخود Safe Area Insets لاگو کرتا ہے؛ Android کو WindowInsets یا DisplayCutout کے ذریعے واضح جانچ کی ضرورت ہوتی ہے۔

قابلیت رسائی (a11y)

قابلیت رسائی معذور افراد کے لیے ایپ کے استعمال کو یقینی بناتی ہے۔ اہم تقاضے: TalkBack (Android) اور VoiceOver (iOS) سپورٹ، ImageView کے لیے درست contentDescription، کافی رنگ کنٹراسٹ (متن کے لیے کم از کم 4.5:1)، فونٹ اسکیلنگ کے لیے Dynamic Type (iOS) سپورٹ، بصارت کے بغیر نیویگیشن اور اشاروں کے متبادل۔ WCAG 2.1 بین الاقوامی قابلیت رسائی کا معیار ہے۔

عالمگیریت اور مقامی化 (i18n / l10n)

بین الاقوامی化 (i18n) متعدد زبانوں اور علاقائی فارمیٹس کی حمایت کے لیے ایپ کو تیار کرنا ہے۔ مقامی化 (l10n) سٹرنگز، تاریخوں، کرنسیوں اور ثقافتی خصوصیات کا ترجمہ کرنا ہے۔ Android وسائل کی ڈائریکٹریز (values-ru، values-de) استعمال کرتا ہے، iOS Localizable.strings اور XLIFF استعمال کرتا ہے۔ Flutter ARB ترجمہ فائلوں کے ساتھ flutter_localizations کو سپورٹ کرتا ہے۔

اشارے اور تعامل

ٹچ تعامل میں کئی اشارے شامل ہیں: ٹیپ، لمبا دباؤ، سوائپ، چٹکی بھر کر زوم کریں، کھینچ کر ریفریش کریں، گھسیٹیں اور چھوڑیں۔ Android GestureDetector استعمال کرتا ہے، iOS UIGestureRecognizer استعمال کرتا ہے۔ iOS Taptic Engine کے ذریعے ہیپٹک فیڈ بیک کے ساتھ 3D Touch (Force Touch) اور Haptic Touch کو بھی سپورٹ کرتا ہے۔