Mobil inkişafda UI/UX və komponentlər: bunlar nədir, növləri və necə istifadə olunur

Dizayn sistemləri: Material Design və Human Interface Guidelines

Hər platforma öz qayda və komponentlər dəstini təklif edir. Android üçün bu, 2014-cü ildə Google tərəfindən hazırlanmış Material Design-dır. Material Design fiziki material metaforasından istifadə edir — təbəqələr, kölgələr (Elevation), animasiyalı keçidlər və uyğunlaşan düzenlər. Əsas prinsiplərə yüksəklik vasitəsilə iyerarxiya, mənalı hərəkət və müxtəlif formalara uyğunlaşma daxildir. Material Design 3 (Material You) — dinamik mövzu və fərdiləşdirilmiş rənglərlə ən son versiyanı kəşf etməyi tövsiyə edirik.

Apple Human Interface Guidelines (HIG) təqdim edir — iOS, iPadOS, macOS, watchOS və tvOS üçün qaydalar toplusu. HIG aydın tipoqrafiya (San Francisco), Notch və Dynamic Island-i nəzərə almaq üçün Safe Area, jest əsaslı naviqasiya və ardıcıllığı vurğulayır. Material Design-dan fərqli olaraq, HIG "təbəqələr" və Elevation istifadə etmir — bunun əvəzinə bulanıqlıq (vibrancy), kölgələr və incə ayırıcılardan istifadə edir. Tam HIG sənədləri yeni iOS buraxılışları ilə müntəzəm yenilənir.

IT Sectr-də müştərinin platformasından asılı olaraq hər iki dizayn sistemindən istifadə edirik. Çarpaz platformalı Flutter layihələri üçün Material Design və HIG-in ən yaxşı təcrübələrini birləşdirən vahid dizayn sistemi hazırlayırıq. Bu yanaşma kod təkrarlanması olmadan hər platformada yerli UX-i qoruyur.

Bəyani UI freymvorkları: SwiftUI və Jetpack Compose

UI qurmağın ənənəvi yanaşması XML (Android) və ya Interface Builder / kod (iOS) vasitəsilə imperativ düzendir. Müasir alternativ bəyani freymvorklardır, burada tərtibatçı interfeysin hər vəziyyətdə necə görünməli olduğunu təsvir edir və freymvork yeniləmələri idarə edir.

Jetpack Compose (Android)

Jetpack Compose Kotlin-də yerli UI qurmaq üçün Google-ın müasir alət dəstidir. XML düzenləri əvəzinə Kotlin kompozit funksiyalarından (@Composable) istifadə olunur. Compose tamamilə bəyanidir: məlumat dəyişdikdə, ekranın yalnız dəyişmiş hissələri yenidən çəkilir. Mətn və düymə ilə sadə ekran nümunəsi:

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

SwiftUI (iOS)

SwiftUI 2019-cu ildə təqdim edilmiş Apple-ın bəyani freymvorkudur. Vahid API vasitəsilə bütün Apple platformalarında (iOS, iPadOS, macOS, watchOS, tvOS) işləyir. SwiftUI məlumat idarəetməsi üçün View strukturları, @State və @Binding xüsusiyyətləri və stil vermək üçün modifierlərdən istifadə edir. SwiftUI-də yuxarıdakı nümunənin ekvivalenti:

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

Flutter Widgets

Google-ın Flutter-ı öz vidcet kitabxanasından istifadə edir. Flutter-da hər şey vidcetdir — padding-dən bütün ekrana qədər. Vidcetlər StatelessWidget (dəyişməz) və StatefulWidget (vəziyyətli) bölünür. Əsas konteynerlər Container, Row, Column, Stack-dir. Flutter platformanın yerli komponentlərini istifadə etmir — hər şeyi Skia Engine vasitəsilə çəkir və Android və iOS-da eyni görünüşü təmin edir.

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 və iOS üçün yerli UI komponentləri

Bəyani freymvorkların yayılmasına baxmayaraq, irs layihələri və dərin fərdiləşdirməni dəstəkləmək üçün yerli komponentləri başa düşmək vacib olaraq qalır.

Naviqasiya

Android-də naviqasiya Activity (ekran fəaliyyətləri) və Fragment (bir Activity daxilində parçalar) üzərində qurulub. Jetpack Navigation Component naviqasiya qrafiki vasitəsilə ekranlar arasında keçidləri sadələşdirir. iOS-da naviqasiya NavigationController — animasiyalı keçidləri olan nəzarətçi yığını — vasitəsilə həyata keçirilir. Tab Bar və Bottom Navigation tətbiqin əsas bölmələri arasında keçid etməyə imkan verir. Drawer (yan menyu) və Toolbar/ActionBar əlavə hərəkətlər üçün istifadə olunur. Android Navigation Component bütün yeni layihələr üçün tövsiyə olunur.

Siyahılar

Böyük həcmdə məlumatı göstərmək üçün Android RecyclerView — ViewHolder təkrar istifadəsi ilə səmərəli konteyner — istifadə edir. iOS-da ekvivalentlər UITableView (şaquli siyahılar) və UICollectionView (şəbəkələr) dir. Jetpack Compose LazyColumn və LazyVerticalGrid təklif edir, SwiftUI isə List və LazyVStack/LazyHStack təmin edir. Lazy komponentlərinin əsas üstünlüyü yalnız görünən elementləri göstərməkdir.

Düzenlər və yerləşdirmə

Android View Sistemi bir neçə düzen konteyneri təklif edir: ConstraintLayout (çevik məhdudiyyət sistemi), LinearLayout (xətti düzülüş), RelativeLayout (nisbi yerləşdirmə), FrameLayout (təbəqə yığma). iOS-da, Core Auto Layout elementlərin yerləşməsini təsvir etmək üçün məhdudiyyətlər sistemindən (NSLayoutConstraint) istifadə edir. SwiftUI və Flutter müvafiq olaraq VStack/HStack/ZStack və Row/Column/Stack istifadə edir.

Ölçü vahidləri və həssas düzen

Mobil cihazların UI komponentləri müxtəlif piksel sıxlığını nəzərə alaraq göstərilir. İnterfeysin bütün ekranlarda eyni görünməsi üçün sıxlıqdan müstəqil vahidlər istifadə olunur.

Ekran sıxlıqları təsnif edilir: mdpi (160 dpi, 1x), hdpi (240 dpi, 1.5x), xhdpi (320 dpi, 2x), xxhdpi (480 dpi, 3x), xxxhdpi (640 dpi, 4x). Şəkilləri hazırlayarkən, bütün sıxlıqlar üçün resurslar yaratmalısınız: icon.png, icon_hdpi.png, icon_xhdpi.png və s. Vektor formatları (Android-də VectorDrawable, iOS-da SF Symbols) çoxsaylı raster resurs problemini həll edir.

IT Sectr-də Figma-dan ikonları ixrac etmək üçün miqyaslama əmsalından istifadə edirik: iOS üçün 1x, 2x, 3x və Android üçün mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi olaraq ixrac edirik. Bu, planşetlər və qatlanan smartfonlar daxil olmaqla bütün cihazlarda kəskin göstərilməni təmin edir.

Müasir UI konsepsiyaları: Qaranlıq Rejim, Safe Area, Əlçatanlıq

Müasir mobil tətbiq UI komponentləri bir sıra standartları dəstəkləməlidir, onsuz istifadəçi təcrübəsi natamam olacaq.

Qaranlıq Rejim / İşıq Rejimi

Qaranlıq Rejim müasir tətbiqlərdə məcburi bir seçimdir. Material Design 3 və iOS 13+ qaranlıq mövzu üçün daxili dəstək təmin edir. Rəngləri tərsinə çevirmək deyil, ayrı rəng palitralarından istifadə etmək vacibdir: tünd fon, açıq mətn, ikinci dərəcəli elementlər üçün aşağı kontrast. Avtomatik keçid cihazın sistem mövzusuna bağlana bilər.

Safe Area və Notch / Dynamic Island dəstəyi

Müasir iPhone-larda Notch (ön kamera üçün kəsik) və Dynamic Island var. Android cihazlarında da kəsiklər və yuvarlaq künclər (Corner Radius) var. Safe Area sistem elementlərindən (status paneli, ev göstəricisi), naviqasiya panelindən və kəsiklərdən azad olduğu təmin edilən ekran sahəsidir. iOS Safe Area Insets-i avtomatik tətbiq edir; Android WindowInsets və ya DisplayCutout vasitəsilə açıq yoxlama tələb edir.

Əlçatanlıq (a11y)

Əlçatanlıq tətbiqin əlilliyi olan insanlar tərəfindən istifadəyə yararlılığını təmin edir. Əsas tələblər: TalkBack (Android) və VoiceOver (iOS) dəstəyi, ImageView üçün düzgün contentDescription, kifayət qədər rəng kontrastı (mətn üçün minimum 4.5:1), şrift miqyaslaması üçün Dynamic Type (iOS) dəstəyi, görmədən naviqasiya və jest alternativləri. WCAG 2.1 beynəlxalq əlçatanlıq standartıdır.

Qlobalizasiya və Lokallaşdırma (i18n / l10n)

Beynəlmiləlləşdirmə (i18n) tətbiqin çoxsaylı dilləri və regional formatları dəstəkləməyə hazırlanmasıdır. Lokallaşdırma (l10n) sətirlərin, tarixlərin, valyutaların və mədəni xüsusiyyətlərin tərcümə edilməsidir. Android resurs kataloqlarından (values-ru, values-de) istifadə edir, iOS Localizable.strings və XLIFF-dən istifadə edir. Flutter ARB tərcümə faylları ilə flutter_localizations-ı dəstəkləyir.

Jestlər və qarşılıqlı təsir

Toxunma qarşılıqlı təsiri bir çox jesti əhatə edir: Tap (toxunma), Uzun basma, Sürüşdürmə, Çimdiklə böyütmə, Çəkərək yeniləmə, Sürüklə və burax. Android GestureDetector istifadə edir, iOS UIGestureRecognizer istifadə edir. iOS həmçinin Taptic Engine vasitəsilə taktiki geribildirimlə 3D Touch (Force Touch) və Haptic Touch-ı dəstəkləyir.