Ինչպես AI-ով մշակել գեղեցիկ տեսք ունեցող հավելված

Գեղեցիկ տեսք ունեցող հավելված AI-ից ստանալու համար մի խնդրեք այն «լավ տեսք տալ», այլ տվեք այն, ինչ կցանկանար դիզայները․ երկու-երեք հղում, որոնք ձեզ դուր են գալիս, դիզայնի ուղղություն և տառատեսակի, գույնի ու տարածության կոնկրետ կանոններ։ Հետո կառուցեք մեկ էկրան, մինչև այն ճիշտ լինի, և թույլ տվեք AI-ին նույն համակարգը կիրառել մնացած բոլոր էկրաններին։ AI-ի «սովորական տեսքի» մեծ մասը գալիս է անորոշ հրահանգներից։ Կոնկրետ մուտքը տալիս է կոնկրետ դիզայն։

Ինչու՞ AI-ի դիզայնը սովորական է ստացվում

Եթե AI-ին խնդրեք «ժամանակակից, մաքուր SaaS վահանակ», այն կտա բոլոր վահանակների վիճակագրական միջինը․ նույն անսերիֆ տառատեսակը, մանուշակագույնից կապույտ գրադիենտը, փափուկ ստվերներով կլորացված քարտերը, շրջանակների մեջ դրված պատկերակները և կենտրոնում դրված վերնագիր՝ «Ձեր աշխատանքը՝ պարզեցված»։ Ոչ մի ընտրություն առանձին վերցրած սխալ չէ։ Խնդիրն այն է, որ դրանցից ոչ մեկը ընտրված չէ ձեր արտադրանքի համար։

Լավ դիզայնը հիմնականում որոշումների հավաքածու է։ Ձեր խնդիրն է կայացնել այն մի քանի որոշումները, որոնք հավելվածին կերպար են տալիս, իսկ բազմաթիվ փոքր որոշումները թողնել AI-ին, որ կատարի հետևողականորեն։

Քայլ 1. Հավաքեք հղումներ նախքան հրահանգ տալը

Հատկացրեք քսան րոպե և հավաքեք երկու-չորս հղում՝ հավելվածներ կամ կայքեր, որոնց տեսքը համապատասխանում է ձեր արտադրանքին։ Լավ աղբյուրներ են այն արտադրանքները, որոնք ձեր լսարանն արդեն օգտագործում է, դիզայնի պատկերասրահները և հարակից ոլորտների ընկերությունների կայքերը։

Ամեն մեկի համար գրեք պարզ բառերով, թե ինչն եք հավանում․

• «Շատ սպիտակ տարածություն, բովանդակությունը նեղ սյունակում, մոխրագույն փոքր պիտակներ մեծ թվերից վերև»։
• «Խիտ աղյուսակներ՝ բարակ բաժանարարներով, առանց քարտերի ստվերների, մեկ գունային շեշտ գործողությունների համար»։
• «Մեծ սերիֆ վերնագրեր, տաք օֆ-White ֆոն, լուսանկարներ՝ նկարազարդումների փոխարեն»։

Այնուհետև փոխանցեք այս նկարագրությունները AI-ին և, եթե գործիքն ընդունում է պատկերներ, կցեք սքրինշոթներ։ Ոգեշնչվեք որակներից, ոչ թե արտադրանքից։ Մեկ ուրիշի ընկերության դասավորությունը, բրենդինգը կամ տեքստը ամբողջությամբ պատճենելը և՛ իրավական, և՛ հեղինակության ռիսկ է։

Քայլ 2. Ընտրեք դիզայնի ուղղություն և անվանեք այն

Ուղղությունը արտահայտում է զգացողությունը կարճ նկարագրությամբ։ Այն AI-ին տալիս է ֆիլտր յուրաքանչյուր որոշման համար։ Մի քանի օրինակ, որոնք լավ են աշխատում․

Դրեք այն առաջին հրահանգում՝ հենց այնպես, ինչպես նաև թե ում է հավելվածը նախատեսված․

Կառուցիր ամրագրման հավելված անկախ յոգայի ստուդիայի համար։ Դիզայնի ուղղություն․ հանգիստ և մինիմալիստական, ինչպես տպագիր ստուդիայի ժամանակացույցը։ Տաք օֆ-White ֆոն, գրեթե սև տեքստ, մեկ զուսպ սաղարթային կանաչ շեշտ կոճակների և ընտրված վիճակների համար։ Սերիֆ վերնագրերի համար, մաքուր անսերիֆ՝ հիմնական տեքստի համար։ Առատ տարածություն, առանց գրադիենտների, առանց ստվերների, առանց էմոջիների։ Նախ՝ բջջային։

Քայլ 3. Սահմանեք կանոնները․ տառատեսակը, գույնը և տարածությունը

Այս երեքը հիմնականում որոշում են վիզուալ որակը։ Դրանք հստակ նշելը ձեր արած ամենամեծ բարելավումն է։

Տառատեսակ

• Մեկ կամ երկու տառատեսակ։ Վերնագրի և հիմնական տեքստի համար, կամ մեկ ընտանիք տարբեր հաստություններով։
• Տառաչափերի սանդղակ։ Մի քանի չափ, որոնք հետևողականորեն են օգտագործվում, օրինակ՝ 14, 16, 20, 28 և 40 px, այլ ոչ թե յուրաքանչյուր բաղադրիչի համար առանձին։
• Ընթեռնելի հիմնական տեքստ։ Վեբում մոտ 16 px, տողերի բարձրություն մոտ 1,5, իսկ երկար տեքստի համար՝ 60–75 նիշ մեկ տողում։
• Հիերարխիա՝ հաստությամբ և չափով, ոչ թե գույնով։ Վերնագրերը՝ ավելի հաստ և մեծ, երկրորդական տեքստը՝ ավելի փոքր և մոխրագույն։

Գույն

• Հիմնականում չեզոք գույներ։ Ֆոնները, մակերևույթները, եզրագծերն ու տեքստի մոխրագույնները կատարում են մեծ մասը։
• Մեկ գունային շեշտ գործողությունների և ընտրված վիճակների համար։ Երկրորդը միայն այն դեպքում, եթե ունի հստակ գործառույթ։
• Իմաստային գույներ հաջողության, նախազգուշացման և սխալի համար՝ և միայն դրանց համար։
• Կոնտրաստ։ WCAG 2-ը պահանջում է առնվազն 4,5:1 կոնտրաստ սովորական հիմնական տեքստի և 3:1՝ մեծ տառերի համար։ Բաց մոխրագույն տեքստը սպիտակի վրա հաճախ չի անցնում․ խնդրեք AI-ին ստուգել։
• Մութ ռեժիմ, եթե ցանկանում եք, բայց նախագծված մտածված, այլ ոչ թե պարզապես գույները շրջած։

Տարածություն և դասավորություն

• Տարածության սանդղակ, օրինակ՝ 4, 8, 12, 16, 24, 32, 48, 64 px։ Ամեն ինչ հենվում է դրա վրա։
• Հավասարեցում։ Եզրերը համընկնում են, բովանդակությունը գտնվում է ցանցի կամ միատեսակ առավելագույն լայնության սյունակում։
• Մոտիկություն։ Կապված բաները մոտ, չկապվածները՝ հեռու։ Այս մեկ կանոնը շատ ծանրաբեռնված էկրաններ է շտկում։
• Քիչ կոնտեյներներ։ Ամեն ինչ քարտ լինելու կարիք չունի։ Եզրագծերը, բաժանարարները և սպիտակ տարածությունը հաճախ ավելի հանգիստ են խմբավորում բովանդակությունը։

Հրահանգ, որը համակարգը մեկ անգամ է սահմանում․

Մինչև ավելի շատ էկրաններ կառուցելը սահմանիր փոքր դիզայն-համակարգ և օգտագործիր այն ամենուր․ տառաչափերի սանդղակ 14/16/20/28/40 px, հիմնական տեքստի տողերի բարձրություն 1,5, տարածության սանդղակ 4/8/12/16/24/32/48 px, չեզոք գույներ գրեթե սպիտակից մինչև գրեթե սև, մեկ գունային շեշտ (#3F6B5A) միայն հիմնական գործողությունների համար, կարմիրը՝ միայն սխալների համար։ Կոճակները, դաշտերը և քարտերը պետք է ունենան եզրերի նույն կլորացումը։ Ստուգիր, որ բոլոր տեքստերը բավարարում են WCAG AA կոնտրաստը։

Եթե աշխատում եք կոդին մոտ կառուցողով, սա սովորաբար վերածվում է դիզայնի թոքենների՝ CSS փոփոխականների կամ Tailwind թեմայի, ինչը նշանակում է, որ հետագա փոփոխությունները կատարվում են մեկ տեղում։

Քայլ 4. Նախ լավ կառուցեք մեկ էկրան

Մի գեներացրեք տասներկու էկրան և հետո փորձեք բոլորը շտկել։ Ընտրեք այն էկրանը, որը օգտատերերը ամենաշատն են տեսնում, հաճախ վահանակը կամ հիմնական ցուցակը, և փոփոխեք այնքան, մինչև այն ճիշտ լինի։ Հետո՝

Օգտագործիր վահանակը որպես հղում բոլոր մյուս էջերի համար․ նույն վերնագիրը, տարածությունը, տառաչափերը, կոճակների ոճը և աղյուսակի ոճը։ Թարմացրու Կարգավորումների և Ամրագրումների էջերը, որ համապատասխանեն դրան։

Ավարտված հղումային էկրանը ավելի լավ է ցուցադրում ձեր ճաշակը, քան ցանկացած ածական։

Քայլ 5. Կրկնեք փոքր և կոնկրետ խնդրանքներով

AI-ին տրված արձագանքը աշխատում է այնպես, ինչպես արձագանքը կրտսեր դիզայներին․ կոնկրետ, մեկ տարածք միանգամից, և հստակ, թե ինչ պահել։

Միշտ ավելացրեք, թե ինչ պահել՝ «պահիր բոլոր երթուղիները, տեքստը և գործառույթները նույնը», որպեսզի վիզուալ փոփոխությունը անզգալի կերպով չհեռացնի ֆունկցիոնալությունը։ Եվ յուրաքանչյուր փոփոխությունը ստուգեք հեռախոսի չափի էկրանին, նախքան հաջորդը խնդրելը։ Թե ինչպիսին է լավը փոքր էկրանների վրա, տես ինչպես կառուցել բջջային հարմարեցված վեբ հավելված։

Քայլ 6. Մանրամասները, որոնք տարբերում են լավը սովորականից

Երբ կառուցվածքը ճիշտ է, այս փոքր բաները հավելվածը ավարտված տեսք են տալիս․

• Դատարկ վիճակներ։ Ինչ է տեսնում նոր օգտատերը առանց տվյալների՝ կարճ բացատրություն և մեկ հստակ գործողություն, ոչ թե դատարկ աղյուսակ։
• Բեռնման վիճակներ։ Բովանդակությանը համապատասխան պատկերված ուրվագծեր, ոչ թե պտտվող պտուտակ ամենուր։
• Սխալի վիճակներ։ Պարզ լեզվով հաղորդագրություններ այն դաշտի կողքին, որը առաջացրել է խնդիրը։
• Hover, focus և սեղմված վիճակներ յուրաքանչյուր ինտերակտիվ տարրի համար․ ստեղնաշարի օգտատերերի համար կարևոր են focus օղակները։
• Իրական բովանդակություն։ Փոխարինեք «Lorem ipsum»-ը և «John Doe»-ն իրական տեքստով և տվյալներով․ կեղծ բովանդակությունը թաքցնում է դասավորության խնդիրները։
• Պատկերակներ մեկ հավաքածուից, մեկ կամ երկու չափով, հետևողական գծի լայնությամբ։
• Պատկերներ՝ նպատակով։ Ձեր արտադրանքի, տեղի կամ մարդկանց իրական լուսանկարները ավելի լավ են, քան սովորական ստոկը։ Եթե օգտագործում եք ստոկ կամ գեներացված պատկերներ, պահպանեք հետևողական ոճ։
• Տեքստ։ Կարճ, կոնկրետ պիտակները («Ամրագրել դաս», ոչ թե «Ուղարկել») նույն ազդեցությունն են ունենում ընկալվող որակի վրա, ինչ ցանկացած գույն։

Սովորական սխալներ

• Ամբողջ դիզայնը մեկ հրահանգով փոխել։ Մեծ վերագրումները նոր խնդիրներ են բերում։ Գնացեք էջ առ էջ։
• Չափազանց շատ գունային շեշտեր։ Եթե ամեն ինչ նշված է, ոչինչ աչքի չի ընկնում։
• Ամեն ինչ կենտրոնացնել։ Կենտրոնացված տեքստը, բացի վերնագրից, դժվար է կարդալ․ հիմնական բովանդակությունը հավասարեցրեք ձախից։
• Փոքր, ցածր կոնտրաստի տեքստ։ Այն մեծ մոնիտորի վրա էլեգանտ է թվում, բայց հեռախոսի վրա արևի տակ անընթեռնելի է։
• Զարդարանքը՝ հիերարխիայի փոխարեն։ Գրադիենտները և ստվերները չեն կարող շտկել էկրանը, որտեղ ամենակարևոր գործողությունը հստակ չէ։
• Վայրէջքի էջի անտեսում։ Շատ արտադրանքների համար այն առաջին տպավորությունն է․ տես ինչպես կառուցել փոխարկող վայրէջքի էջ։

Դիզայնից դուրս հրահանգների այլ ձևերի համար կարդացեք ինչպես գրել հրահանգներ AI հավելվածի կառուցողների համար։ Եթե ձեր աշխատանքը ինքն է արտադրանքը՝ դիզայնի կամ լուսանկարչության պորտֆոլիո,ինչպես կառուցել պորտֆոլիո կայք-ը ավելի խորը է անդրադառնում ներկայացմանը։

Դիզայն Mythex-ում

Mythex-ում դիզայնը նկարագրում եք զրույցում, տեսնում եք այն կենդանի նախադիտման մեջ և նախքան հաջորդ փոփոխությունը ստուգում եք հեռախոսի չափի կադրը։ Փաստաթղթերում կան կարճ օրինակներ՝ դիզայնի և UI հրահանգներ այն մասին, թե ինչ փոխել և ինչ պահել, և վերադիզայնավորել ձեր UI-ը՝ մեկ էջը մեկ անգամ թարմացնելու համար՝ առանց գործառույթները կորցնելու։ Mythex-ը կարող է նաև փնտրել ստոկ լուսանկարներ կամ գեներացնել պատկեր զրույցում՝ գլխավոր նկար, ֆոն կամ կիսվելու պատկեր, և տեղադրել այն հավելվածում, երբ խնդրեք։ Եթե փոփոխությունը սխալ ստացվի, վերադարձեք դրանից առաջ եղած ստուգակետին։ Եթե ավելի հարմար եք զգում սկսել արդեն գոյություն ունեցող դիզայնից և կարգավորել այն, դիտեք կաղապարները։

Հարցեր