Usanifu wa Kiolesura na Uzalishaji wa Msimbo wa UI kwa kutumia Akili Bandia

Faida:

• Uwezo wa kutoa msimbo thabiti wa kiolesura cha Jetpack Compose na SwiftUI kwa mpangilio wa kusudi, sehemu, majimbo manne (kupakia / tupu / kosa / kamili), mfumo wa muundo na ufikiaji.
• Uwezo wa kutoa kiolesura ambacho kiko wazi kwa watumiaji wote kwa kufafanua ufikiaji tangu mwanzo, kwa kuweka lebo sahihi, utofautishaji wa kutosha na mguso unaofaa.
• Uwezo wa kuunda violesura thabiti, vya lugha nyingi na nyepesi/giza kwa kusoma rangi na nafasi kutoka kwa mada kuu.

Mafanikio ya programu ya simu ya mkononi huamuliwa kwa kiasi kikubwa na kiolesura cha mtumiaji (UI - skrini ambazo mtumiaji huona na kugusa) na uzoefu wa mtumiaji (UX - jinsi inavyopendeza na kufurahisha kutumia). Mtumiaji haoni msimbo mbaya, lakini anahisi kiolesura kibaya katika sekunde ya kwanza. AI ina majukumu mawili yenye nguvu katika maendeleo ya interface: kwa upande mmoja, inazalisha wazo la kubuni, mtiririko na maandishi (kuandika UX); Kwa upande mwingine, inabadilisha muundo huu moja kwa moja kuwa nambari ya kiolesura cha kufanya kazi. Katika kitengo hiki, tutajifunza jinsi ya kutengeneza violesura vya haraka, vinavyoweza kufikiwa na thabiti na AI, tukizingatia zana za kisasa za kiolesura cha Jetpack Compose (Android) na SwiftUI (iOS). "Declarative" inamaanisha kuwa badala ya kuelezea hatua kwa hatua jinsi ya kuchora skrini, unaelezea "hivi ndivyo skrini inapaswa kuonekana katika hali hii"; Chombo hufanya wengine.

Kutoka kwa muundo hadi nambari: mpangilio sahihi

Kuambia AI "tengeneza skrini nzuri" ni jambo lisiloeleweka kwa sababu "nzuri" haiwezi kupimwa. Kizazi kizuri cha kiolesura kinafuata agizo hili:

1. Kusudi na yaliyomo. Skrini inafanya nini, inaonyesha habari gani, mtumiaji atafanya nini?
2. Orodha ya vipengele. Sehemu kama vile kichwa, orodha, kitufe, uwanja wa fomu.
3. Hali. Inapakia, tupu (hakuna data), hitilafu, imejaa - hali nne za msingi za skrini.
4. Mfumo wa kubuni. Rangi, uchapaji, sheria za nafasi; kwa ujumla kutii Miongozo ya Kiolesura cha Binadamu ya Nyenzo 3 (Android) au iOS.
5. Ufikivu. Lebo za kisomaji skrini, utofautishaji wa kutosha, saizi inayolengwa ya mguso.
6. Kanuni. Baada ya kusema haya yote, Kizazi cha Kuonekana cha Kutungwa au SwiftUI.

Hatua ya kurukwa mara kwa mara ni ya tatu. Watengenezaji huzingatia tu hali "kamili"; ilhali katika utumizi halisi mtumiaji mara nyingi hukutana na hali za "kupakia" na "makosa". Kuchapisha majimbo yote manne kwa AI ndio siri ya kiolesura thabiti.

Kidokezo: Ongeza "zalisha upakiaji, tupu, hitilafu, na kamili tofauti" mwishoni mwa kidokezo. Sentensi hii moja hufanya kiolesura chako kuwa tayari kwa ulimwengu halisi na hupunguza kwa kiasi kikubwa idadi ya makosa katika awamu ya QA (upimaji wa ubora).

Ufikivu hauwezi kujadiliwa

Ufikivu - uwezo wa kutumia programu na watumiaji wenye ulemavu wa kuona, kusikia au motor - ni wajibu wa kimaadili na hifadhi na matarajio ya kisheria. AI hutoa nambari inayopatikana ikiwa inataka; Hurejesha kiolesura kisicho na lebo, chenye utofautishaji wa chini ikiwa haitakiwi. Kanuni tatu za kidole gumba: kipe kila kipengele wasilianifu lebo yenye maana kwa kisomaji skrini (contentDescription/ accessibilityLabel), utofautishaji wa rangi ya kutosha kati ya maandishi na mandharinyuma (angalau uwiano wa 4.5:1), na shabaha ya mguso ya angalau 48x48 dp/44x44 pt. Uliza AI mambo haya kwa uwazi.

Tahadhari: AI inaweza pia kuongeza tagi ndefu ya ufikiaji kwenye ikoni ya mapambo; Hii hulemea mtumiaji wa kisoma skrini kwa mazungumzo yasiyo ya lazima. Vipengee vya mapambo kabisa vinapaswa "kufichwa kutoka kwa ufikiaji" (kuruhusiwa kurukwa na msomaji wa skrini). Kagua lebo zinazozalishwa: wacha wenye maana wazungumze, wacha mapambo yabaki kimya.

Uthabiti: mfumo wa kubuni na mandhari

Maombi ya kitaalamu hayatumii rangi nasibu na nafasi; hufuata mfumo wa kubuni (seti ya kawaida ya rangi, fonti, nafasi na vijenzi). Ukiipa AI thamani za mandhari yako (rangi kuu, rangi ya pili, radius ya kona, ukubwa wa uchapaji), skrini zote zitatoka sawa. Usipofanya hivyo, kila skrini itatumia rangi tofauti ya samawati na programu itaonekana kuwa na vitu vingi. Njia bora zaidi ni kwanza kuuliza AI itengeneze faili ya tokeni za mandhari/ubunifu, kisha ufunge skrini zote kwa mada hiyo.

Somo

mbinu mbaya

Mbinu kali

Rangi

Msimbo wa rangi kwa kila skrini

Mandhari kuu, skrini zilizosomwa kutoka kwenye mandhari

hali

Skrini "kamili" pekee

Inapakia/tupu/kosa/hali nne kamili

upatikanaji

Imeongezwa baadaye

Inafafanuliwa katika dai tangu mwanzo

maandishi

iliyopachikwa katika kanuni

Chanzo tofauti, lugha nyingi tayari

kesi tatu ndogo

Kesi ya 1 - Kipochi tupu kimehifadhiwa. Timu ya programu ya habari ilikuwa na hali ya skrini ya kuchapisha ya AI. Shukrani kwa skrini ya "hali ya kutofanya kazi" ("Bado hakuna habari iliyohifadhiwa"), 70% ya washiriki katika jaribio la watumiaji hawakuacha programu kwenye skrini tupu; Katika toleo la awali, skrini tupu ilibaki nyeupe na watumiaji walidhani kuwa "imevunjwa" na kushoto. Nakala ndogo iliongeza kasi ya uhifadhi.

Kesi ya 2 - Tofautisha kukataliwa. Timu moja ilituma maombi kwenye Duka la Programu iliyo na skrini zilizo na maandishi ya kijivu nyepesi, rangi ya chapa. Apple ilitoa onyo kwa misingi ya ufikivu kwa sababu ya utofauti mdogo. Wakati AI iliambiwa "ongeza utofautishaji wa mandharinyuma juu ya 4.5:1", rangi zikawa nyeusi na tatizo likatatuliwa. Kama ingeombwa tangu mwanzo, kusingekuwa na kuchelewa.

Kesi ya 3 - Kelele ya lebo ya mapambo. Mjaribu asiyeweza kuona aliripoti kuwa kila ikoni ya mapambo ("mstari," "doti," "kivuli") ilisomwa kwa sauti kwenye skrini inayozalishwa na AI, na kufanya skrini isiweze kutumika. Uzoefu wa kisoma skrini ulibadilika wakati vipengee vya mapambo vilifichwa kutoka kwa ufikivu. Somo: ufikivu unamaanisha "lebo zinazofaa," sio "lebo nyingi."

Mwongozo dhaifu / Mwongozo thabiti

Kidokezo dhaifu: "Tengeneza skrini ya wasifu."

Kidokezo chenye nguvu: "Zalisha skrini ya wasifu wa mtumiaji kwa iOS/SwiftUI. Maudhui: avatar, jina, barua pepe, kitufe cha 'Hariri wasifu', orodha ya mipangilio. Hali: inapakia (mifupa), hitilafu (kitufe cha kujaribu tena), imejaa. Muundo: Isiyo Nyege, inalingana na iOS HIG; rangi za mfumo, Aina Inayobadilika. Ufikivu: ufikiaji: ufikivu Lebo iliyofichwa, aikoni ya ufikivu iliyofichwa, alama ya 4 iliyofichwa. faili tofauti, usipachike msimbo wa rangi kwenye skrini Kwanza chora kijenzi, kisha hamisha msimbo."

Violezo vinavyoweza kunakiliwa

Kiolezo cha kutengeneza skrini: "Zalisha [jina la skrini] kwa ajili ya [jukwaa/zana]. Maudhui: [vipengele]. Vitendo vya mtumiaji: [vitendo]. Tengeneza hali nne tofauti: upakiaji, tupu, hitilafu, kamili. Mfumo wa usanifu: [Nyenzo 3 / iOS HIG], soma kutoka kwa tokeni za mandhari. Ufikivu: lebo, utofautishaji >=4.5:1, kiwango kinacholengwa cha mguso."

Kiolezo cha mfumo wa mandhari/ubunifu:"Toa ufafanuzi mkuu wa mandhari ya programu yangu ([Tunga Mandhari /muundo wa tokeni wa muundo katika SwiftUI]):- Rangi ya msingi [hex], upili [hex], rangi ya hitilafu, rangi ya uso- Mizani ya uchapaji (kichwa, mwili, maelezo)- Mizani ya nafasi (4,8,16,24)- Kipenyo cha kona cha wastani Ongeza mwangaza na mwangaza mweusi."

Kiolezo cha ukaguzi wa ufikivu:"Angalia msimbo huu wa skrini kwa ufikivu:1) Je, kuna vipengele wasilianifu ambavyo havijatambulishwa?2) Je, uwiano wa utofautishaji unatosha?3) Je, shabaha za mguso ni kubwa vya kutosha?4) Je, vipengele vya mapambo vimefichwa kutoka kwa kisomaji skrini? Pendekeza marekebisho kwa kila toleo. [code]"

Kiolezo cha muundo wa msimbo: "Ninaelezea muundo ufuatao: [maelezo ya skrini au picha ya skrini]. Tafsiri hii katika msimbo wa [Tunga/SwiftUI]. Weka nafasi na utengeneze sawasawa na muundo, lakini ongeza hali zote nne."

Makosa ya kawaida

• Fikiria tu juu ya hali kamili. Mara nyingi mtumiaji halisi huona skrini ya upakiaji/hitilafu.
• Kupachika rangi na nafasi katika msimbo. Ikiwa mada sio kuu, uthabiti hupotea na matengenezo inakuwa ngumu.
• Inaacha ufikiaji kwa mwisho. Kuiongeza baadaye ni ghali; Hailipishwi ikiwa imeombwa tangu mwanzo.
• Kuweka alama juu. Vipengele vya mapambo vinasomwa pia hutatiza matumizi ya kisomaji skrini.
• Kupachika maandishi katika msimbo. Wakati usaidizi wa lugha nyingi unahitajika, ni muhimu kubadilisha kila skrini kwa mikono; Weka maandishi tofauti.
• Inatarajia nakala halisi kutoka kwa picha ya skrini. Muundo wa AI hutoa takriban. Usahihi wa Pixel umewekwa mwenyewe.

Kwa muhtasari

AI ina nguvu katika utengenezaji wa kiolesura, lakini inahitaji mwongozo. Mpangilio sahihi: madhumuni, vijenzi, hali nne (kupakia/tupu/kosa/imejaa), mfumo wa kubuni, ufikiaji, kisha msimbo. Ufikivu hauwezi kujadiliwa na unamaanisha "lebo sahihi," si "lebo nyingi." Kwa uthabiti, soma rangi na nafasi kutoka kwa mada kuu, usiyapachike katika msimbo. Nia yenye nguvu inafafanua haya yote tangu mwanzo; Kwa hivyo, interface iko tayari kwa ulimwengu wa kweli, idhini ya duka na watumiaji wote.

Jukumu la maombi

Kwa kutumia "kiolezo cha kutengeneza skrini" kwa skrini ya mipangilio, uliza AI kwa Tunga au msimbo wa SwiftUI na uombe majimbo yote manne. Kisha weka msimbo sawa na "Kiolezo cha ukaguzi wa ufikiaji". Tafuta na urekebishe angalau uboreshaji mmoja wa ufikivu (lebo inayokosekana, utofautishaji wa chini, au shabaha ndogo ya mguso) na utambue ni hali gani (ya kupakia/tupu/hitilafu) unadhani itaonekana mara nyingi katika matumizi halisi.

orodha ya ukaguzi

• [ ] Niliweka wazi madhumuni na vijenzi vya onyesho katika dodoso
• [ ] Nilikuwa na majimbo manne (kupakia/tupu/kosa/imejaa) yaliyotolewa kando
• [ ] Nilifanya rangi na nafasi isomwe kutoka kwa mada kuu, sikuipachika kwenye msimbo.
• [ ] Nilitaka lebo za ufikivu na utofautishaji kutoka mwanzo
• [ ] Nilithibitisha kuwa vipengee vya mapambo vimefichwa kutoka kwa kisomaji skrini
• [ ] Niliweka maandishi tofauti, tayari kwa lugha nyingi