როგორ შევქმნათ კარგად გამოიყურებოდა აპი AI-ით
რომ AI-სგან კარგად გამოიყურებოდა აპი მიიღოთ, შეწყვიტეთ მისთვის თხოვნა „გააკეთე ლამაზად" და დაუწყეთ მისთვის ის მიცემა, რაც დიზაინერს დასჭირდებოდა: ორი-სამი ნიმუში, რომელიც გიყვართ, დასახელებული დიზაინის მიმართულება და კონკრეტული წესები ტიპოგრაფიისთვის, ფერისა და დაშორებისთვის. შემდეგ ააშენეთ ერთი ეკრანი, გაასწორეთ სანამ სწორი არ გახდება და სთხოვეთ AI-ს იგივე სისტემა სხვა ეკრანებზეც გამოიყენოს. AI-ს „ხელწერა" ძირითადად ბუნდოვანი მოთხოვნებიდან მოდის, რომლებიც საშუალო პასუხებს იძლევა; კონკრეტული შეყვანა კონკრეტულ დიზაინს იძლევა.
რატომ გამოიყურება AI-ის დიზაინი ზოგადად
თუ AI-ს სთხოვთ „თანამედროვე, სუფთა SaaS დაფას", ის მოგცემთ იმ დაფების სტატისტიკურ საშუალოს, რაც მას ნანახი აქვს: იგივე sans-serif შრიფტს, იისფერ-ლურჯ გრადიენტს, მომრგვალებულ ბარათებს რბილი ჩრდილებით, წრეებში მოთავსებულ ხატულებს და ცენტრში მოთავსებულ hero სექციას სლოგანით „თქვენი სამუშაო გამარტივებულია". არც ერთი ამ არჩევანიდან თავისთავად არასწორი არ არის. პრობლემა ისაა, რომ არც ერთი მათგანი არ არის არჩეული თქვენი პროდუქტისთვის.
კარგი დიზაინი ძირითადად გადაწყვეტილებების ერთობლიობაა. თქვენი საქმეა, მიიღოთ რამდენიმე გადაწყვეტილება, რომელიც აპს ხასიათს მისცემს, და AI-ს მიანდოთ ათასობით წვრილმანი გადაწყვეტილების თანმიმდევრულად მიღება.
ნაბიჯი 1: შეაგროვეთ ნიმუშები მოთხოვნამდე
გაატარეთ ოცი წუთი და შეაგროვეთ ორიდან ოთხამდე ნიმუში: აპები ან ვებსაიტები, რომელთა იერსახეც შეეფერება თქვენს პროდუქტს. კარგი წყაროებია პროდუქტები, რომლებსაც თქვენი აუდიტორია უკვე იყენებს, დიზაინის გალერეები და ახლომდებარე სფეროების კომპანიების საიტები.
თითოეული ნიმუშისთვის ჩაიწერეთ, რა მოგწონთ, მარტივი სიტყვებით:
- „ბევრი თეთრი სივრცე, შინაარსი ვიწრო სვეტში, პატარა ნაცრისფერი ეტიკეტები დიდი ციფრების ზემოთ."
- „მკვრივი ცხრილები თხელი გამყოფებით, ბარათების ჩრდილების გარეშე, ერთი აქცენტის ფერი მოქმედებებისთვის."
- „დიდი სერიფული სათაურები, თბილი ოფ-თეთრი ფონი, ფოტოგრაფია და არა ილუსტრაციები."
შემდეგ ეს აღწერილობები გადასცით AI-ს და, თუ თქვენი ინსტრუმენტი იღებს სურათებს, მიამაგრეთ ეკრანის სურათებიც. აიღეთ შთაგონება თვისებებიდან, არა პროდუქტიდან: სხვა კომპანიის განლაგების, ბრენდინგის ან ტექსტის მთლიანად კოპირება სამართლებრივი და სანდოობის რისკია.
ნაბიჯი 2: აირჩიეთ დიზაინის მიმართულება და დაარქვით სახელი
მიმართულება არის მოკლე აღწერა იმისა, როგორი უნდა იყოს შეგრძნება. ის AI-სთვის ფილტრად მუშაობს ყველა გადაწყვეტილებაში. რამდენიმე კარგად მუშაობს:
| მიმართულება | ტიპური არჩევანი | რისთვის ეფექტურია |
|---|---|---|
| მშვიდი და მინიმალისტური | ნეიტრალური პალიტრა, გულუხვი დაშორება, ერთი აქცენტი, თხელი საზღვრები | პროდუქტიულობის ინსტრუმენტები, ფინანსები, ჯანმრთელობა |
| რედაქციული | სერიფული სათაურები, ძლიერი შრიფტული კონტრასტი, დიდი სურათები, ვიწრო ტექსტის სვეტები | პორტფოლიოები, პუბლიკაციები, პრემიუმ სერვისები |
| მკვრივი და ფუნქციონალური | კომპაქტური რიგები, პატარა შრიფტი, ცხრილები, კლავიატურისთვის მოსახერხებელი | შიდა ინსტრუმენტები, დაფები, ადმინისტრატორის პანელები |
| თბილი და მეგობრული | მომრგვალებული ფორმები, რბილი ფერები, ილუსტრაციები, უფრო დიდი შეხების ზონები | სამომხმარებლო აპები, საზოგადოება, განათლება |
| ბოლდი და გრაფიკული | მაღალი კონტრასტი, დიდი შრიფტი, ბრტყელი ფერის ბლოკები | ივენთები, გაშვებები, კრეატიული ბრენდები |
ჩართეთ ის პირველ მოთხოვნაში, ერთად იმ ადამიანთან, ვისთვისაც აპია:
ააშენე დაჯავშნის აპი დამოუკიდებელი იოგას სტუდიისთვის. დიზაინის მიმართულება: მშვიდი და მინიმალისტური, როგორც ნაბეჭდი სტუდიის განრიგი. თბილი ოფ-თეთრი ფონი, თითქმის შავი ტექსტი, ერთი მოდუნებული მწვანე-ნაცრისფერი აქცენტი ღილაკებისა და არჩეული მდგომარეობებისთვის. სერიფული შრიფტი სათაურებისთვის, სუფთა სანს-სერიფული ძირითადი ტექსტისთვის. გულუხვი დაშორება, გრადიენტების გარეშე, ჩრდილების გარეშე, ემოჯის გარეშე. ჯერ მობილურისთვის.
ნაბიჯი 3: დააყენეთ წესები — შრიფტი, ფერი და დაშორება
ეს სამი ძირითადად განსაზღვრავს ვიზუალურ ხარისხს. მათი აშკარად მითითება ერთ-ერთი ყველაზე დიდი გაუმჯობესებაა, რისი გაკეთებაც შეგიძლიათ.
ტიპოგრაფია
- ერთი ან ორი შრიფტი. სათაურის შრიფტი და ძირითადი ტექსტის შრიფტი, ან ერთი ოჯახი რამდენიმე წონით.
- ტიპოგრაფიული მასშტაბი. რამდენიმე ზომა, რომელიც თანმიმდევრულად გამოიყენება, მაგალითად 14, 16, 20, 28 და 40 პიქსელი, და არა ის, რასაც თითოეული კომპონენტი თავად ირჩევს.
- კითხვადი ძირითადი ტექსტი. ვებში დაახლოებით 16 პიქსელი, ხაზის სიმაღლე დაახლოებით 1.5, და გრძელი ტექსტისთვის სტრიქონის სიგრძე დაახლოებით 60–75 სიმბოლო.
- იერარქია წონითა და ზომით, არა ფერით. სათაურები უფრო მუქი და დიდი; მეორადი ტექსტი უფრო პატარა და რბილი ნაცრისფერი.
ფერი
- ძირითადად ნეიტრალური ფერები. ფონები, ზედაპირები, საზღვრები და ტექსტის ნაცრისფერი ტონები ძირითად სამუშაოს ასრულებს.
- ერთი აქცენტის ფერი მოქმედებებისა და არჩეული მდგომარეობებისთვის. მეორე მხოლოდ მაშინ, თუ მას მკაფიო ფუნქცია აქვს.
- სემანტიკური ფერები წარმატების, გაფრთხილებისა და შეცდომისთვის, და მხოლოდ ამ მიზნებისთვის.
- კონტრასტი. WCAG 2 მოითხოვს კონტრასტის შეფარდებას მინიმუმ 4.5:1 ჩვეულებრივი ძირითადი ტექსტისთვის და 3:1 დიდი ტექსტისთვის. ღია ნაცრისფერი ტექსტი თეთრზე ხშირად არ აკმაყოფილებს; სთხოვეთ AI-ს შემოწმება.
- მუქი რეჟიმი, თუ გინდათ, განზრახ დაპროექტებული და არა უბრალოდ შებრუნებული.
დაშორება და განლაგება
- დაშორების მასშტაბი, მაგალითად 4, 8, 12, 16, 24, 32, 48, 64 პიქსელი. ყველაფერი ამ მასშტაბს მიყვება.
- გასწორება. კიდეები ერთმანეთს ემთხვევა; შინაარსი ბადეზე ან თანმიმდევრული მაქსიმალური სიგანის სვეტში დევს.
- სიახლოვე. დაკავშირებული ელემენტები ერთმანეთთან ახლოს, შეუღლებელი — შორს. ეს ერთი წესი ხშირად აგვარებს გადატვირთულ ეკრანებს.
- ნაკლები კონტეინერი. ყველაფერს ბარათი არ სჭირდება. საზღვრები, გამყოფები და თეთრი სივრცე შინაარსს უფრო მშვიდად აჯგუფებს.
პრომპტი, რომელიც სისტემას ერთხელ აწყობს:
სანამ მეტ ეკრანს ააშენებ, დააყენე მცირე დიზაინის სისტემა და გამოიყენე ყველგან: ტიპოგრაფიული მასშტაბი 14/16/20/28/40 პიქსელი, ძირითადი ტექსტის ხაზის სიმაღლე 1.5, დაშორების მასშტაბი 4/8/12/16/24/32/48 პიქსელი, ნეიტრალური ფერები თითქმის თეთრიდან თითქმის შავამდე, ერთი აქცენტის ფერი (#3F6B5A) მხოლოდ ძირითადი მოქმედებებისთვის და წითელი მხოლოდ შეცდომებისთვის. ღილაკებს, ველებსა და ბარათებს უნდა ჰქონდეთ ერთი და იგივე საზღვრის რადიუსი. შეამოწმე, რომ მთელი ტექსტი აკმაყოფილებს WCAG AA კონტრასტს.
თუ კოდის მატარებელ ბილდერში მუშაობთ, ეს ხშირად დიზაინის ტოკენებად იქცევა — CSS ცვლადებად ან Tailwind თემად — რაც ნიშნავს, რომ შემდგომი ცვლილებები ერთ ადგილას ხდება.
ნაბიჯი 4: ჯერ ერთი ეკრანი სწორად ააშენეთ
ნუ დააგენერირებთ თორმეტ ეკრანს და შემდეგ ყველა მათგანის გასწორებას ცდილობთ. ავირჩიოთ ეკრანი, რომელსაც მომხმარებლები ყველაზე ხშირად ხედავენ — ხშირად დაფა ან მთავარი სია — და გააკეთეთ იტერაციები სანამ სწორი არ გახდება. შემდეგ:
გამოიყენე დაფა როგორც საცნობარო ყველა სხვა გვერდისთვის: იგივე სათაური, დაშორება, შრიფტის ზომები, ღილაკების სტილი და ცხრილის სტილი. განაახლე პარამეტრებისა და დაჯავშნების გვერდები, რომ შეესაბამებოდეს მას.
დასრულებული საცნობარო ეკრანი თქვენს გემოვნებას ბევრად უკეთ გადმოსცემს, ვიდრე ნებისმიერი ზედსართავი სახელი.
ნაბიჯი 5: იტერაცია მცირე და კონკრეტული მოთხოვნებით
AI-ისთვის უკუკავშირი მუშაობს ისე, როგორც უმცროს დიზაინერთან: კონკრეტული, ერთ არეზე ერთდროულად და ნათლად იმის შესახებ, რა უნდა შენარჩუნდეს.
| ბუნდოვანი | კონკრეტული |
|---|---|
| „გახადე უფრო ლამაზი." | „გაზარდე სექციებს შორის დაშორება 64 პიქსელამდე, გახადე გვერდის სათაური 40 პიქსელი და დაარბილე მეორადი ტექსტი შუა ნაცრისფერზე." |
| „ძალიან დატვირთულია." | „მოაშორე ბარათების საზღვრები სტატისტიკის რიგს, გასწორე რიცხვები მარცხნივ და ეტიკეტები მათ ზემოთ მოათავსე პატარა კაპიტალური ასოებით." |
| „გააკეთე, რომ გამოჩნდეს." | „გამოიყენე აქცენტის ფერი მხოლოდ მთავარ ღილაკზე. მეორადი ღილაკები გახადე კონტურიანი." |
| „გააუმჯობესე მობილური ხედი." | „ტელეფონის სიგანეზე დააწყვე ფილტრები ფურცელში, რომელიც იხსნება ფილტრების ღილაკიდან, და ცხრილის რიგები გადააქციე ბარათებად." |
ყოველთვის დაამატეთ, რა უნდა შენარჩუნდეს — „შეინარჩუნე ყველა მარშრუტი, ტექსტი და ფუნქცია უცვლელად" — რომ ვიზუალურმა გავლამ უხმოდ ფუნქციონალობა არ წაშალოს. და შეამოწმეთ ყოველი ცვლილება ტელეფონის ზომის ეკრანზე, სანამ შემდეგ მოთხოვნას გააგზავნით; იხილეთ როგორ ავაშენოთ მობილურისთვის მორგებული ვებ აპი, რა არის კარგი პატარა ეკრანებზე.
ნაბიჯი 6: დეტალები, რომლებიც კარგს ზოგადისგან განასხვავებს
როცა სტრუქტურა სწორია, ეს პატარა რამეები აპს დასრულებულ იერს აძლევს:
- ცარიელი მდგომარეობები. რას ხედავს ახალი მომხმარებელი მონაცემების გარეშე: მოკლე ახსნა და ერთი მკაფიო მოქმედება, და არა ცარიელი ცხრილი.
- ჩატვირთვის მდგომარეობები. ჩონჩხები, რომლებიც შინაარსის ფორმას იმეორებს, და არა ყველგან სპინერები.
- შეცდომის მდგომარეობები. გასაგები შეტყობინებები იმ ველის გვერდით, რომელმაც შეცდომა გამოიწვია.
- ჰოვერის, ფოკუსისა და დაჭერის მდგომარეობები ყველა ინტერაქტიულ ელემენტზე — ფოკუსის ჩარჩოები მნიშვნელოვანია კლავიატურით მომხმარებლებისთვის.
- რეალური შინაარსი. ჩაანაცვლეთ „Lorem ipsum" და „John Doe" რეალისტური ტექსტით და მონაცემებით; ადგილმდებარე შინაარსი დაფარავს განლაგების პრობლემებს.
- ხატულები ერთი ნაკრებიდან, ერთ ან ორ ზომაში, თანმიმდევრული ხაზის სისქით.
- სურათები მიზნით. თქვენი პროდუქტის, ადგილის ან ადამიანების რეალური ფოტოები სჯობს ზოგად სტოკს. თუ სტოკს ან გენერირებულ სურათებს იყენებთ, შეინარჩუნეთ თანმიმდევრული სტილი.
- ტექსტი. მოკლე, კონკრეტული ეტიკეტები („დაჯავშნე გაკვეთილი", არა „გაგზავნა") აღქმულ ხარისხს იმდენს აძლევს, რამდენსაც ნებისმიერი ფერის არჩევანი.
გავრცელებული შეცდომები
- ყველაფრის გადაკეთება ერთ პრომპტში. დიდი გადაწერები ახალ შეცდომებს იწვევს. წაიყვანეთ გვერდი გვერდით.
- ძალიან ბევრი აქცენტის ფერი. თუ ყველაფერი გამოკვეთილია, არაფერი გამოკვეთილი არ არის.
- ყველაფრის ცენტრში მოთავსება. ცენტრში მოთავსებული ტექსტი სათაურის გარდა ძნელად იკითხება; მეტი შინაარსი მარცხნივ გაასწორეთ.
- პატარა, დაბალკონტრასტიანი ტექსტი, რომელიც დიდ მონიტორზე ელეგანტურად გამოიყურება და ტელეფონზე მზის შუქზე არ იკითხება.
- დეკორაცია იერარქიის ნაცვლად. გრადიენტები და ჩრდილები ვერ გამოასწორებს ეკრანს, სადაც ყველაზე მნიშვნელოვანი მოქმედება არ ჩანს.
- მთავარი გვერდის უგულებელყოფა. ბევრი პროდუქტისთვის ის პირველი შთაბეჭდილებაა; იხილეთ როგორ ავაშენოთ კონვერსიული სადესანტო გვერდი.
დიზაინის მიღმა პრომპტების უფრო მეტი მაგალითისთვის წაიკითხეთ როგორ დავწეროთ პრომპტები AI აპის ბილდერებისთვის. თუ თქვენი სამუშაო თავად პროდუქტია — დიზაინის ან ფოტოგრაფიის პორტფოლიო — როგორ ავაშენოთ პორტფოლიოს ვებსაიტი უფრო ღრმად განიხილავს პრეზენტაციას.
დიზაინი Mythex-ში
Mythex-ში დიზაინს ჩატში აღწერთ, ნახავთ ცოცხალ გადახედვაში და შემდეგ ცვლილებამდე შეამოწმებთ ტელეფონის ზომის ჩარჩოს. დოკუმენტაციაში არის მოკლე შაბლონები ამისთვის: დიზაინისა და UI პრომპტები იმაზე, თუ რა შეცვალოთ და რა შეინარჩუნოთ, და UI-ის გადაწერა ერთი გვერდის განახლებისთვის ფუნქციების დაკარგვის გარეშე. Mythex-ს ჩატში შეუძლია სტოკ ფოტოების ძიება ან სურათის გენერირება — მთავარი სურათი, ფონი, გაზიარების სურათი — და მის ჩასმა აპში, როცა სთხოვთ. თუ რომელიმე გავლა ცუდად დასრულდა, დაუბრუნდით იმ წერტილს, რომელიც მის წინ იყო. თუ უკვე მზა დიზაინით გსურთ დაწყება და მხოლოდ მორგება, დაათვალიერეთ შაბლონები.
კითხვები
რატომ გამოიყურება ყველა AI-ით დიზაინირებული აპი ერთნაირად?
იმიტომ, რომ ბუნდოვანი მოთხოვნა საშუალო პასუხს იძლევა: იგივე შრიფტებს, გრადიენტებს, მომრგვალებულ ბარათებსა და ცენტრში მოთავსებულ hero სექციას. მიეცით AI-ს ნიმუშები, დასახელებული დიზაინის მიმართულება და კონკრეტული წესები ტიპოგრაფიისთვის, ფერისა და დაშორებისთვის, და შედეგი შეწყვეტს ზოგადად გამოჩენას.
შემიძლია AI-ს ეკრანის სურათი მივაწოდო, რომ სტილი დააკოპიროს?
ბევრი AI ბილდერი იღებს სურათის მიმაგრებას, და ეკრანის სურათი სტილის ერთ-ერთი ყველაზე ნათელი ჩვენების გზაა. აღწერეთ, რა მოგწონთ მასში: დაშორება, შრიფტი, ფერების გამოყენება, და არა სხვისი პროდუქტის ზუსტი ასლი.
დიზაინერი მჭირდება, თუ AI-ით ვაშენებ?
პირველი ვერსიისთვის არა. დიზაინერი ყველაზე მეტს მაშინ ამატებს, როცა გაქვთ დასაცავი ბრენდი ან რთული პროდუქტი, სადაც განლაგების გადაწყვეტილებები გავლენას ახდენს იმაზე, რამდენად კარგად შეუძლიათ ადამიანებს მისი გამოყენება. სანამ ეს არ არის, ნათელი ნიმუშები და მცირე იტერაციები სუფთა და გამოსაყენებელ ინტერფეისს მოგცემთ.
რა ხდის აპს პროფესიონალურად გამოიყურებოდა?
თანმიმდევრულობა უფრო, ვიდრე დეკორაცია: ერთი ტიპოგრაფიული მასშტაბი, ფერების მცირე პალიტრა, რომელიც მიზანმიმართულად გამოიყენება, დაშორება ფიქსირებულ მასშტაბზე, გასწორებული კიდეები და ნათელი იერარქია, რომ ყველა ეკრანზე ყველაზე მნიშვნელოვანი ნათლად ჩანდეს.