Добивки:
- Способност да се произведе робустен интерфејс код за Jetpack Compose и SwiftUI по цел, компонента, четири состојби (вчитување/празна/грешка/целосно), дизајн систем и пристапност
- Можност за производство на интерфејс кој е отворен за сите корисници со дефинирање на пристапноста од почеток, со правилно означување, доволен контраст и соодветен допир.
- Способност за создавање конзистентни, повеќејазични и спремни интерфејси за светли/темни теми со читање боја и простор од централната тема
Успехот на мобилната апликација во голема мера е одреден од неговиот кориснички интерфејс (UI - екраните што корисникот ги гледа и допира) и корисничкото искуство (UX - колку е мазно и пријатно за користење). Корисникот не го гледа лошиот код, но го чувствува лошиот интерфејс во првата секунда. Вештачката интелигенција игра две моќни улоги во развојот на интерфејсот: од една страна, генерира дизајнерска идеја, тек и текст (пишување UX); Од друга страна, тој директно го претвора овој дизајн во код за работен интерфејс. Во оваа единица, ќе научиме како да произведуваме брзи, достапни и конзистентни интерфејси со вештачка интелигенција, фокусирајќи се на модерните алатки за декларативни интерфејси Jetpack Compose (Android) и SwiftUI (iOS). „Декларативно“ значи дека наместо да објаснувате чекор по чекор како да го нацртате екранот, опишувате „вака треба да изгледа екранот во оваа ситуација“; Алатката го прави останатото.
Од дизајн до код: правилен редослед
Да се каже на вештачката интелигенција да „направи убав екран“ е нејасно бидејќи „убавото“ не може да се измери. Добрата генерација на интерфејс го следи овој редослед:
- Цел и содржина. Што прави екранот, какви информации покажува, што ќе прави корисникот?
- Список на компоненти. Делови како наслов, листа, копче, поле за форма.
- Ситуации. Се вчитува, празно (без податоци), грешка, полн - четирите основни состојби на екранот.
- Дизајн систем. Боја, типографија, правила за растојание; генерално се усогласени со Упатствата за човечки интерфејс за материјал 3 (Андроид) или iOS.
- Пристапност. Етикети за читач на екран, соодветен контраст, целна големина на допир.
- Код. Имајќи го кажано сето ова, генерација на Composable или SwiftUI View.
Најчесто прескокнуваниот чекор е третиот. Програмерите ја разгледуваат само „целосната“ состојба; додека во реалната апликација корисникот најмногу наидува на ситуации на „вчитување“ и „грешка“. Печатењето на сите четири состојби на вештачката интелигенција е тајната на робусниот интерфејс.
Совет: додајте „генерирај вчитување, празно, грешка и полно одделно“ на крајот од известувањето. Оваа единствена реченица го прави вашиот интерфејс подготвен за реалниот свет и значително го намалува бројот на грешки во фазата QA (тестирање на квалитет).
Пристапноста не може да се преговара
Пристапност - способноста за користење на апликацијата од страна на корисници со визуелни, слух или моторни попречености - е и етичка одговорност и складирање и законско очекување. AI произведува пристапен код ако сакате; Враќа интерфејс без ознаки, со низок контраст доколку не сакате. Три основни правила: дајте му на секој интерактивен елемент значајна ознака за читачот на екранот (опис на содржината / ознака за пристапност), соодветен контраст на бојата помеѓу текстот и позадината (најмалку 4,5:1 сооднос) и цел на допир од најмалку 48x48 dp/44x44 pt. Прашајте ги овие работи експлицитно на вештачката интелигенција.
Внимание: ВИ може да додаде и долга ознака за пристапност на украсна икона; Ова го преплавува корисникот на читачот на екран со непотребно брборење. Чисто декоративните елементи треба да бидат „скриени од пристапност“ (да се дозволи да се прескокнат од читачот на екранот). Прегледајте ги произведените етикети: оставете ги значајните да зборуваат, украсните нека молчат.
Конзистентност: дизајн систем и тема
Професионалните апликации не користат случајни бои и проред; следи систем за дизајн (стандарден сет на бои, фонтови, проред и компоненти). Ако ги дадете вредностите на вашата тема на вештачката интелигенција (главна боја, секундарна боја, радиус на аголот, скала на типографија), сите екрани ќе излезат конзистентни. Ако не го правите тоа, секој екран ќе користи различна нијанса на сино и апликацијата ќе изгледа пренатрупано. Најефикасен начин е прво да побарате од вештачката интелигенција да генерира датотека со токени за тема/дизајн, а потоа да ги поврзете сите екрани на таа тема.
Предмет
лош пристап
Силен пристап
Боја
Рачно кодирајте го секој екран во боја
Централна тема, екрани прочитани од темата
ситуации
Само „цел“ екран
Вчитување/празна/грешка/полни четири состојби
пристапност
Додадено подоцна
Тоа е дефинирано во побарувањето од почеток
текст
вградени во код
Одделен извор, подготвен за повеќе јазици
три мини футроли
Случај 1 — Зачуван е празен случај. Тим на апликации за вести имаше индивидуални состојби на екранот за печатење со вештачка интелигенција. Благодарение на екранот „неактивен статус“ („Сè уште нема зачувани вести“), 70% од учесниците во тестирањето на корисниците не ја оставија апликацијата на празен екран; Во претходната верзија, празниот екран остана бел и корисниците мислеа дека е „скршен“ и замина. Мала копија ја зголеми стапката на задржување.
Случај 2 - Отфрлање на контраст. Еден тим се пријави во App Store со екрани со текст во светло сива боја, бојата на брендот. Apple издаде предупредување поради пристапност поради низок контраст. Кога на вештачката интелигенција и беше кажано „да го зголеми контрастот на текст-позадината над 4,5:1“, боите станаа потемни и проблемот беше решен. Да се бараше од почеток, немаше да има одлагање.
Случај 3 - Декоративен шум на етикетата. Тестер со оштетен вид објави дека секоја икона за украс („линија“, „точка“, „сенка“) се чита на глас на екранот генериран со вештачка интелигенција, што го прави екранот неупотреблив. Искуството со читач на екран стана флуидно кога украсните елементи беа скриени од пристапноста. Лекција: пристапноста значи „вистински ознаки“, а не „премногу ознаки“.
Слаб промпт / Силен промпт
Слаб промпт: „Дизајнирај екран на профил“.
Моќен потсетник: „Генерирај екран на кориснички профил за iOS/SwiftUI. Содржина: аватар, име, е-пошта, копче „Уреди профил“, список со поставки. Статуси: се вчитува (скелет), грешка (копче за повторно обид), целосно. Дизајн: не-материјален, усогласен со iOS HIG; бои на системот, динамичен тип. Пристапност: пристапност4 таргетирана ознака за секој елемент. Читајте ги вредностите на темата од посебна датотека, не вметнувајте го кодот во боја на екранот Прво нацртајте го компонентното дрво, а потоа извезете го кодот.
Шаблони за копирање
Шаблон за генерирање на екран: „Генерирајте [име на екранот] за [платформа/алатка]. Содржина: [елементи]. Кориснички дејства: [дејства]. Генерирајте четири состојби одделно: вчитување, празно, грешка, полн.
Шаблон за систем за тема/дизајн: „Направете дефиниција за централна тема за мојата апликација ([Состави тема / структура на токен за дизајн во SwiftUI]):- Примарна боја [шеснаесетник], секундарна [хексадесетница], боја на грешка, боја на површината- Скала за типографија (наслов, тело, опис) - скала на растојание (4,8,16, 24 зраци на светлина и стандардна поддршка за темно А)-.
Шаблон за ревизија на пристапност:„Проверете го овој код на екранот за пристапност:1) Дали има неозначени интерактивни елементи?2) Дали се соодветни соодносите на контраст?3) Дали целите на допир се доволно големи?4) Дали декоративните елементи се скриени од читачот на екранот? Предложете поправки за секој проблем. [код]“
Шаблон дизајн до код: „Го опишувам следниов дизајн: [опис на екранот или снимка од екранот]. Преведете го ова во код [Состави/SwiftUI]. Одржувајте го растојанието и порамнувањето точно на дизајнот, но додајте ги сите четири состојби.
Вообичаени грешки
- Само размислување за целосната ситуација. Поголемиот дел од времето вистинскиот корисник го гледа екранот за вчитување/грешка.
- Вградување на боја и простор во кодот. Ако темата не е централна, конзистентноста се губи и одржувањето станува тешко.
- Пристапноста се остава за крај. Додавањето подоцна е скапо; Тоа е бесплатен ако се бара од самиот почеток.
- Преозначување. Читањето на декоративните елементи исто така го нарушува искуството со читачот на екранот.
- Вградување текст во код. Кога е потребна повеќејазична поддршка, потребно е рачно да се менува секој екран; Чувајте ги текстовите одвоени.
- Се очекува точна копија од екранот. Дизајнот со вештачка интелигенција произведува прибл. Прецизноста на пикселите се поставува рачно.
Сумирано
ВИ е моќна во производството на интерфејс, но бара насоки. Правилен редослед: цел, компоненти, четири состојби (вчитување/празна/грешка/целосно), систем за дизајн, пристапност, потоа код. Пристапноста не може да се преговара и значи „вистинска етикета“, а не „премногу етикети“. За конзистентност, читајте ја бојата и растојанието од централната тема, не вметнувајте ги во код. Силната волја го дефинира сето тоа од почеток; Така, интерфејсот е подготвен за реалниот свет, одобрувањето во продавницата и сите корисници.
Задача за апликација
Користејќи го „шаблонот за генерирање екран“ за екранот за поставки, побарајте од вештачката интелигенција за Compose или SwiftUI код и побарајте ги сите четири состојби. Потоа проверете го истиот код со „шаблонот за проверка на пристапноста“. Најдете и поправете барем едно подобрување на пристапноста (недостасува етикета, низок контраст или мала цел на допир) и забележете кој статус (вчитување/празен/грешка) мислите дека ќе се појавува најчесто во вистинска употреба.
листа за проверка
- [ ] Јас ги разјаснив целта и компонентите на екранот во промптот
- [ ] Ги имав четирите состојби (вчитување/празна/грешка/целосно) генерирани посебно
- [ ] Бојата и просторот ги прочитав од централната тема, не ги вградив во кодот.
- [ ] Од самиот почеток сакав етикети за пристапност и контраст
- [ ] Потврдив дека декоративните елементи се скриени од читачот на екранот
- [ ] Ги чував текстовите одвоени, подготвени за повеќе јазици