Добици:
- Способност трансформације сврхе екрана и приоритета садржаја у јасан сажетак и прављења жичаних нацрта и варијација помоћу вештачке интелигенције
- Способност брзог процењивања резултата алата који генеришу интерфејсе из текста и приказивања их у складу са принципима дизајна
- Способност сазревања АИ жичаних оквира са погледом на стварни садржај, рубни случај и приступачност
Вирефраме је скелет екрана на нивоу кутије, без боја, визуелних детаља и детаља о бренду. Његова сврха је једноставна: да брзо тестира приоритет, пласман и ток садржаја; решавање питања „шта, где, зашто овде” не улазећи у естетику. Дизајн ниске верности такође описује ову прву, грубу фазу нацрта. Вештачка интелигенција радикално убрзава овај корак: алати који генеришу жичане оквире из текста креирају обрис екрана из захтева од једне реченице. Али ова брзина такође изазива погрешно схватање да је „први излаз коначни дизајн“. Ова јединица учи како да интелигентно генеришете и критички сазрете АИ жичане оквире.
Прво бриф, затим продукција
Већина лоших жичаних оквира произилази из лошег извештаја. Ако АИ кажете да „направи екран за пријаву“, добићете генерички образац. Снажан жичани сажетак укључује:
- Сврха екрана: Зашто корисник долази на овај екран, шта добија на њему?
- Приоритет садржаја: Која су три најважнија елемента? Где прво треба да падне око корисника?
- Контекст: Уређај (мобилни/десктоп), тренутно расположење корисника, претходни екран.
- Ограничења: Обавезни елементи (одрицање од одговорности, елемент бренда), ограничење простора.
- Захтев за варијацију: Колико различитих изгледа желите да видите.
Када дате овај сажетак, модел производи различите опције које ће вам помоћи да донесете одлуку; Ако је бриеф слаб, сви ће бити слични и бескорисни.
Савет: Не тражите од вештачке интелигенције један „савршен“ жичани оквир, већ 3 изразито различита приступа (нпр. „једна листа тешка, једна слика тешка, један фокусиран на једну радњу“). Разноврсне опције отварају ваше слепе тачке.
Реална локација алата који генеришу интерфејсе из текста
Последњих година су постали широко распрострањени алати који обећавају „напиши и интерфејс се појави“. Они дају заиста брз почетни нацрт. Али ако не знате његове границе, то ће вас довести у заблуду:
- Није тестирано са стварним садржајем: Примери текстова су увек идеалне дужине; Ако стварни наслов пређе, изглед може бити поремећен.
- Нема рубних случајева: празна листа, дуго име, случај грешке се обично не цртају.
- Приступачност није подразумевана: Контраст, област додира, редослед читања се често не контролишу.
- Индиферентан је према менталном моделу: модел производи „просечан интерфејс“, а не навику вашег корисника.
Исправан став: посматрајте резултат као почетни нацрт, а не као коначни дизајн. Оно што чини „добар“ жичани оквир је то што је тестиран са стварним садржајем, рубним кућиштем и приступачношћу.
Стаге
АИ излаз
Зрелост коју сте додали
први ред
Скелет кутијасте линије
Исправите на основу приоритета садржаја
Садржај
Идеалан узорак дужине
Тестирање са стварним, преплављеним, празним садржајем
рубни случај
Обично никакве
Празно/грешка/учитавање стања
приступачност
непроверено
Контраст, секвенца, област додира
Стрим линк
један екран
Доследност са претходним/следећим екраном
три мини кофера
Случај 1 — Три варијације, јасна одлука. Дизајнер је од АИ тражио 3 различита изгледа за контролну таблу (картица са сажетком, табела, дијаграм). 3 нацрта стигла су за 15 минута; Тим је ово показао заинтересованим странама и донео одлуку о правцу за 20 минута. Да се ради ручно, 3 нацрта би трајала пола дана.
Случај 2 — Стварни садржај поремети ред. У АИ жичаном оквиру, називи производа су увек били 2 речи. У стварном каталогу, нека имена су била дуга 40 знакова и препуна су картица. Дизајнер је променио изглед након што га је тестирао са стварним подацима. Лекција: узорак садржаја лаже; Тестирајте га са стварним садржајем.
Случај 3 — Празан случај заборављен. Жичани оквир екрана „Моји фаворити“ је приказивао само целу листу. Нови корисник нема фаворита; Екран се отвара празан. Дизајнер је рекао вештачкој интелигенцији да "нацрта и празно стање" и додао водеће празно стање. Поука: празно стање је део главног дизајна, а не ивица.
Садржај пре, кутија после
Најчешћа заблуда у Вирефраминг-у је погрешно схватање дизајна за „поставку кутије“. Међутим, добар оквир је оријентисан на садржај: прво одлучујете које информације треба да буду на екрану и са којим приоритетом; Кутије су резултат ове одлуке. Креирање „приоритета садржаја“ је први корак у жичаном оквиру: наводите ствари које корисник треба да види на овом екрану, од најважнијих до најмање важних. АИ је добар партнер у састављању ове листе; Он даје приоритет могућим елементима садржаја када дате сврху екрана. Затим тај приоритет преведете у ред: најважнија ставка на највидљивијем месту. Када је овај редослед обрнут – када прво нацртате леп изглед, а затим покушате да уклопите садржај – информације које су кориснику заиста потребне се гурају у позадину.
Опрез: жичани оквир лепог изгледа може сакрити нетачан приоритет садржаја. „Да ли је ово подешавање лепо?“ али „Да ли је најважнија информација прва ствар која вам упада у очи?“ питати.
Копирајућа упутства
Ваша улога: виши дизајнер производа. Сврха екрана: <<сврха>>. Уређај: <<мобилни/десктоп>>.Топ 3 ставке: <<лист>>. Потребни елементи: <<лист>>.Задатак: Предложите 3 различита приступа жичаног оквира (са текстом, део по део). За сваки приступ: логика распореда, редослед приоритета и зашто ће функционисати.
Тестирајте ову дефиницију жичаног оквира у условима стварног света:<<текст жичаног оквира>>. Нацртајте или опишите: празно стање, дуг садржај (преливање), стање грешке, стање учитавања. За сваку од њих напишите како треба да се прилагоди изглед.
Проверите приступачност овог жичног оквира: да ли редослед читања има смисла, да ли су мете за додир довољне, да ли постоје само информације засноване на бојама, да ли је примарна акција очигледна? Наведите проблеме и предлоге један по један. Жичани оквир: <<текст>>
Генеришите реалистичан садржај чувара места за овај жичани оквир: 5 заглавља различите дужине (од кратких до веома дугачких), 3 празна статусна текста, 2 поруке о грешци. Сврха: тестирати дизајн са стварним садржајем, а не идеалним. Контекст: <<екран>>
Слаби промпт / Јаки промпт
Слабо: „Направи жичани оквир за почетну страницу.“
Резултат: генерички скелет са нејасним приоритетом садржаја, униформношћу и без рубних случајева.
Снажно: „Предложите 3 различита жичана приступа за почетну страницу за мобилне уређаје са сврхом Кс; 3 најважнија елемента су; објасните логику приоритета сваког приступа; такође прикажите празан статус и статус грешке.“
Резултат: Упоредиве, приоритетне, реалне опције.
Разлика: јаки промпт даје сврху + приоритет + варијацију + ивични случај.
Уобичајене грешке
- Узимајући у обзир први излаз као коначни дизајн. АИ вирефраме је почетак; Поступак у његовом незрелом стању је скуп.
- Будите задовољни узорком садржаја. Лажни текст идеалне дужине чини изглед лажно лепим.
- Заобилажење стања нуле и грешке. Први екран који корисник види је често празан.
- Остављамо приступачност за крај. Контраст и редослед читања се разматрају у фази оквира и не закрпе се касније.
- Настављамо са једном варијацијом. Фиксирање на прву идеју без генерисања опција повећава слепе тачке.
Укратко
Вирефраминг је најјефтинији начин тестирања приоритета садржаја и протока без упуштања у естетику; АИ у великој мери убрзава ову фазу. Кључно је да дате детаљан сажетак (сврха, приоритет, контекст, ограничење, варијација) пре производње и да се резултат посматра као почетни нацрт. Излаз алата који генеришу интерфејсе из текста не сазрева док се не тестира са стварним садржајем, рубним случајевима и доступношћу. Користите модел као брзи генератор опција; Ви додајете зрелост и одлуку.
Задатак апликације
- Изаберите екран и напишите сажетак који укључује сврху, 3 најважнија елемента и обавезне елементе.
- Генеришите 3 изразито различита приступа жичаном оквиру са првим упитом.
- Са четвртом промптом, направите реалистичан (кратко-дуго-празно) садржај чувара места и тестирајте изглед.
- Додајте статусе празног, грешке и учитавања са другом промптом.
- Извршите проверу приступачности помоћу трећег одзивника и објавите налазе на жичаном оквиру.
контролна листа
- [ ] Написао сам кратак преглед са сврхом и приоритетима пре производње.
- [ ] Направио сам не једну већ 3 различите варијације.
- [ ] Тестирао сам изглед са реалистичним (дугачким/кратким/празним) садржајем.
- [ ] Дизајнирао сам празно стање, стање грешке и учитавање.
- [ ] Урадио сам проверу приступачности у фази жичаног оквира.
- [ ] Резултат сам третирао као почетни нацрт и сазрео га.