Табыстар:
- Мақсаты, құрамдас бөлігі, төрт күйі (жүктеу/бос/қате/толық), дизайн жүйесі және қол жетімділік бойынша Jetpack Compose және SwiftUI үшін сенімді интерфейс кодын жасау мүмкіндігі
- Дұрыс таңбалау, жеткілікті контраст және тиісті түрту арқылы қол жетімділікті басынан бастап анықтау арқылы барлық пайдаланушылар үшін ашық интерфейсті шығару мүмкіндігі.
- Орталық тақырыптан түс пен кеңістікті оқу арқылы тұрақты, көп тілді және ашық/қараңғы тақырыпқа дайын интерфейстерді жасау мүмкіндігі
Мобильді қолданбаның сәттілігі негізінен оның пайдаланушы интерфейсімен (UI — пайдаланушы көретін және түртетін экрандар) және пайдаланушы тәжірибесімен (UX — пайдалану қаншалықты тегіс және жағымды) анықталады. Пайдаланушы нашар кодты көрмейді, бірақ бірінші секундта нашар интерфейсті сезінеді. AI интерфейсті әзірлеуде екі күшті рөл атқарады: бір жағынан ол дизайн идеясын, ағынды және мәтінді (UX жазу) жасайды; Екінші жағынан, ол бұл дизайнды жұмыс интерфейсінің кодына тікелей түрлендіреді. Бұл бөлімде біз Jetpack Compose (Android) және SwiftUI (iOS) заманауи декларативті интерфейс құралдарына назар аудара отырып, AI көмегімен жылдам, қолжетімді және дәйекті интерфейстерді қалай жасау керектігін үйренеміз. «Декларативті» дегеніміз экранды қалай салу керектігін кезең-кезеңімен түсіндірудің орнына «осы жағдайда экран осылай көрінуі керек» деп сипаттау; Қалғанын құрал жасайды.
Дизайндан кодқа дейін: дұрыс тәртіп
AI-ға «әдемі экран жаса» деп айту түсініксіз, өйткені «әдемі» өлшеу мүмкін емес. Жақсы интерфейсті генерациялау осы ретпен жүреді:
- Мақсаты мен мазмұны. Экран не істейді, ол қандай ақпаратты көрсетеді, пайдаланушы не істейді?
- Компоненттер тізімі. Тақырып, тізім, түйме, пішін өрісі сияқты бөліктер.
- Жағдайлар. Жүктелуде, бос (деректер жоқ), қате, толық — төрт негізгі экран күйі.
- Дизайн жүйесі. Түс, типография, интервал ережелері; әдетте материал 3 (Android) немесе iOS адам интерфейсі нұсқауларына сәйкес.
- Қол жетімділік. Экранды оқу құрылғысының жапсырмалары, барабар контраст, сенсорлық мақсат өлшемі.
- Код. Осының бәрін айта отырып, Composable немесе SwiftUI View буыны.
Ең жиі өткізіп жіберетін қадам - үшінші. Әзірлеушілер тек «толық» күйді қарастырады; ал нақты қолданбада пайдаланушы көбінесе «жүктеу» және «қате» жағдайларына тап болады. Барлық төрт күйді AI-ге басып шығару сенімді интерфейстің құпиясы болып табылады.
Кеңес: Сұрау соңына «жүктеуді, бос, қатені және толықты бөлек жасау» қосыңыз. Бұл жалғыз сөйлем интерфейсіңізді нақты әлемге дайын етеді және QA (сапаны тексеру) кезеңіндегі қателер санын айтарлықтай азайтады.
Қол жетімділік келіспейді
Қол жетімділік — қолданбаны көру, есту немесе моторлық ақаулары бар пайдаланушылардың пайдалану мүмкіндігі — әрі этикалық жауапкершілік, әрі дүкен және заңды күту. Қажет болса, AI қол жетімді кодты шығарады; Қажет болмаса, тегсіз, төмен контраст интерфейсін қайтарады. Үш негізгі ереже: әрбір интерактивті элементке экранды оқу құралы үшін мағыналы белгіні (contentDescription / accessibilityLabel), мәтін мен фон арасындағы сәйкес түс контрастын (кемінде 4,5:1 қатынасы) және кемінде 48x48 dp/44x44 pt түрту нысанасын беріңіз. Бұл нәрселерді АИ-ден нақты сұраңыз.
Абайлаңыз: AI сәндік белгішеге ұзақ қол жетімділік тегін қоса алады; Бұл экранды оқу құралының пайдаланушысын қажетсіз әңгімелермен толтырады. Таза сәндік элементтер «қол жетімділіктен жасырылған» болуы керек (экраннан оқу құралы өткізіп жіберуге рұқсат етілген). Жасалған жапсырмаларды қарап шығыңыз: мағыналы сөйлесін, сәндік үнсіз қалсын.
Жүйелілік: дизайн жүйесі мен тақырыбы
Кәсіби қолданбалар кездейсоқ түстер мен аралықтарды пайдаланбайды; дизайн жүйесін (түстер, қаріптер, интервал және құрамдас бөліктердің стандартты жиынтығы) бақылайды. Егер сіз AI-ға тақырып мәндерін (негізгі түс, қосымша түс, бұрыш радиусы, типография масштабы) берсеңіз, барлық экрандар біркелкі шығады. Олай етпесеңіз, әр экран көк түстің басқа реңкін пайдаланады және қолданба шашыраңқы болып көрінеді. Ең тиімді әдіс - алдымен AI-дан тақырып/дизайн таңбалауыштары файлын жасауды сұрау, содан кейін барлық экрандарды осы тақырыпқа байланыстыру.
Тақырып
нашар көзқарас
Күшті көзқарас
Түс
Әр экранның түс кодын қолмен енгізіңіз
Орталық тақырып, тақырыптан оқылатын экрандар
жағдайлар
Тек «толық» экран
Жүктелу/бос/қате/толық төрт күй
қолжетімділік
Кейінірек қосылды
Ол талап арызда басынан бастап анықталған
мәтін
кодқа енгізілген
Бөлек дереккөз, көп тілді дайын
үш шағын іс
1-жағдай — бос регистр сақталды. Жаңалықтар қолданбасының тобында AI басып шығарудың жеке экран күйлері болды. «Бос күй» экранының арқасында («Ешқандай жаңалық әлі сақталған жоқ») пайдаланушы тестілеуіне қатысушылардың 70%-ы қолданбаны бос экранда қалдырған жоқ; Алдыңғы нұсқада бос экран ақ болып қалды және пайдаланушылар оны «сынған» деп ойлап, кетіп қалды. Шағын көшірме сақтау жылдамдығын арттырды.
2-жағдай — Контрасты қабылдамау. Бір топ ашық сұр, бренд түсі мәтіні бар экрандары бар App Store дүкеніне өтініш берді. Apple төмен контрастқа байланысты қол жетімділік негізінде ескерту жасады. Жасанды интеллектке «мәтін-фон контрастын 4,5:1-ден жоғарылатыңыз» дегенде, түстер күңгірттеніп, мәселе шешілді. Әу бастан талап етілсе, кідіріс болмас еді.
3-жағдай — Сәндік жапсырма шуы. Көру қабілеті нашар тестілеуші әрбір ою-өрнек белгішесі («сызық», «нүкте», «көлеңке») AI жасаған экранда дауыстап оқылып, экранды жарамсыз ететінін хабарлады. Сәндік элементтер қол жетімділіктен жасырылған кезде экранды оқу тәжірибесі сұйық болды. Сабақ: қол жетімділік «тым көп тегтерді» емес, «дұрыс тегтерді» білдіреді.
Әлсіз шақыру / Күшті шақыру
Әлсіз шақыру: «Профиль экранын құрастыру».
Күшті шақыру: "iOS/SwiftUI үшін пайдаланушы профилінің экранын жасаңыз. Мазмұн: аватар, аты, электрондық поштасы, "Профильді өңдеу" түймесі, параметрлер тізімі. Күйлер: жүктелуде (қаңқа), қате (қайталау түймесі), толық. Дизайн: материалдық емес, iOS HIG стандартына сәйкес; жүйелік түстер, динамикалық түрі. Арнайы мүмкіндіктер: қол жетімділік, әр нысанның жасырын элементін оқу, декоративті белгі 4 мин. тақырып мәндерін бөлек файлдан алу үшін экранға түс кодын ендірмеңіз, алдымен құрамдас ағашты сызыңыз, содан кейін кодты экспорттаңыз."
Көшіретін үлгілер
Экранды құру үлгісі: "[платформа/құрал] үшін [экран атауы] жасаңыз. Мазмұн: [элементтер]. Пайдаланушы әрекеттері: [әрекеттер]. Төрт күйді бөлек жасаңыз: жүктеу, бос, қате, толық. Дизайн жүйесі: [Материал 3 / iOS HIG], тақырып таңбалауыштарынан оқу. Қол жетімділік: белгілер, контраст: 1, стандартты түрту5."
Тақырып/дизайн жүйесінің үлгісі:"Қолданбам үшін орталық тақырып анықтамасын жасау ([Тақырыпты құрастыру /SwiftUI жүйесінде дизайн таңбалауышы құрылымы]):- Негізгі түс [алтылық], қосымша [алтылық], қате түсі, бет түсі- Типография шкаласы (атауы, негізгі бөлігі, сипаттамасы)- Аралық шкаласы (4,8,16,24) және стандартты жарық радиусы."
Арнайы мүмкіндіктерді тексеру үлгісі:"Арнайы мүмкіндіктер үшін осы экран кодын тексеріңіз:1) Тегтелмеген интерактивті элементтер бар ма?2) Контраст коэффициенттері сәйкес пе?3) Түрту нысандары жеткілікті үлкен бе?4) Экранды оқу құралында сәндік элементтер жасырылған ба? Әр мәселе бойынша түзетулерді ұсыныңыз. [код]"
Дизайн коды үлгісі: "Мен келесі дизайнды сипаттаймын: [экран сипаттамасы немесе скриншот]. Мұны [Compose/SwiftUI] кодына аударыңыз. Дизайнға сәйкес аралық пен туралауды сақтаңыз, бірақ барлық төрт күйді қосыңыз."
Жалпы қателер
- Тек толық жағдайды ойлау. Көбінесе нақты пайдаланушы жүктеу/қате экранын көреді.
- Түс пен кеңістікті кодқа енгізу. Егер тақырып орталық болмаса, сәйкестік жоғалады және техникалық қызмет көрсету қиын болады.
- Арнайы мүмкіндіктерді соңғыға қалдыру. Оны кейінірек қосу қымбатқа түседі; Басынан бастап сұралса, ақысыз.
- Үстеме таңбалау. Сәндік элементтерді оқу экранды оқу құралының тәжірибесін де бұзады.
- Мәтінді кодқа енгізу. Көптілді қолдау қажет болғанда, әрбір экранды қолмен өзгерту қажет; Мәтіндерді бөлек сақтаңыз.
- Скриншоттан нақты көшірме күтілуде. AI дизайны шамамен шығарады. Пиксель дәлдігі қолмен орнатылады.
Қысқаша
AI интерфейсті өндіруде күшті, бірақ ол басшылықты қажет етеді. Дұрыс рет: мақсат, құрамдас бөліктер, төрт күй (жүктеу/бос/қате/толық), дизайн жүйесі, қолжетімділік, содан кейін код. Қол жетімділік келіспейді және «тым көп белгілер» емес, «дұрыс жапсырма» дегенді білдіреді. Сәйкестік үшін орталық тақырыптан түс пен интервалды оқыңыз, оны кодқа ендірмеңіз. Күшті ерік осының бәрін басынан бастап анықтайды; Осылайша, интерфейс нақты әлемге, дүкеннің мақұлдауына және барлық пайдаланушыларға дайын.
Қолданбалы тапсырма
Параметрлер экраны үшін «Экранды жасау үлгісін» пайдаланып, Жасау немесе SwiftUI кодын AI-дан сұраңыз және барлық төрт күйді сұраңыз. Содан кейін бірдей кодты «Арнайы мүмкіндіктерді тексеру үлгісі» арқылы тексеріңіз. Кем дегенде бір қол жетімділікті жақсартуды (жоқ белгі, төмен контраст немесе кішігірім сенсорлық мақсат) тауып, түзетіңіз және нақты пайдалануда жиі пайда болатын күйді (жүктеу/бос/қате) ескеріңіз.
бақылау парағы
- [ ] Сұрауда дисплейдің мақсаты мен құрамдастарын анық көрсеттім
- [ ] Менде төрт күй (жүктеу/бос/қате/толық) бөлек жасалған
- [ ] Мен түс пен кеңістікті орталық тақырыптан оқыдым, кодқа ендірмедім.
- [ ] Мен басынан бастап қол жетімділік белгілерін және контрастты алғым келеді
- [ ] Мен сәндік элементтердің экранды оқу құралынан жасырылғанын тексердім
- [ ] Мен мәтіндерді бөлек ұстадым, бірнеше тілге дайын болдым