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