چطور با هوش مصنوعی یک اپ خوش‌ظاهر طراحی کنیم
برای گرفتن یک اپ خوش‌ظاهر از هوش مصنوعی، دیگر از آن نخواهید که «قشنگش کن» بگوید. به آن چیزی بدهید که یک طراح می‌خواهد: دو یا سه مرجع موردعلاقه‌تان، یک جهت طراحی نام‌گذاری‌شده و قاعده‌های دقیق برای تایپ، رنگ و فاصله‌گذاری. سپس یک صفحه بسازید، آن‌قدر اصلاحش کنید تا درست شود و بعد از هوش مصنوعی بخواهید همان سیستم را در بقیه‌ی صفحات به کار ببندد. بیشتر «ظاهر هوش مصنوعی» از درخواست‌های مبهم و پاسخ‌های میانگین می‌آید؛ ورودی مشخص، طراحی مشخص تحویل می‌دهد.
چرا طراحی‌های هوش مصنوعی عمومی به نظر می‌رسند
از هوش مصنوعی بخواهید «یک داشبورد SaaS مدرن و تمیز» و میانگین همه‌ی داشبوردهایی را که دیده به شما می‌دهد: همان فونت سنس‌سریف، گرادیان بنفش به آبی، کارت‌های گرد با سایه‌ی نرم، آیکون‌های شبیه ایموجی داخل دایره و یک هیروی وسط‌چین با جمله‌ی «گردش کار شما، ساده‌شده». هیچ‌کدام از این انتخاب‌ها به‌تنهایی اشتباه نیست. مشکل این است که هیچ‌کدام برای محصول شما انتخاب نشده‌اند.
طراحی خوب بیشتر از مجموعه‌ای از تصمیم‌هاست. کار شما این است که تعداد کمی تصمیم بگیرید که به اپ شخصیت می‌دهند و بقیه‌ی هزاران تصمیم ریز را به هوش مصنوعی بسپارید تا یکدست انجام شوند.
گام ۱: پیش از پرسیدن، مرجع جمع کنید
بیست دقیقه وقت بگذارید و دو تا چهار مرجع پیدا کنید؛ اپ‌ها یا وب‌سایت‌هایی که ظاهرشان با محصولتان جور است. منابع خوب، محصولاتی هستند که مخاطبتان از قبل استفاده می‌کند، گالری‌های طراحی و سایت شرکت‌های حوزه‌های مجاور.
برای هرکدام، با زبان ساده بنویسید که چه چیزی را می‌پسندید:
- «فضای سفید زیاد، محتوا در یک ستون باریک، برچسب‌های خاکستری کوچک بالای عددهای بزرگ.»
- «جدول‌های متراکم با خطوط جداکننده‌ی نازک، بدون سایه‌ی کارت و با یک رنگ تاکیدی برای اقدام‌ها.»
- «تیترهای سریف درشت، پس‌زمینه‌ی کرم‌رنگ گرم، عکس به‌جای تصویرسازی.»
سپس این توضیح‌ها را به هوش مصنوعی بدهید و اگر ابزارتان تصویر می‌پذیرد، اسکرین‌شات هم ضمیمه کنید. از ویژگی‌ها الهام بگیرید، نه از خود محصول: کپی کردن کامل چیدمان، برند یا متن شرکت دیگری هم خطر حقوقی دارد و هم اعتبارتان را پایین می‌آورد.
گام ۲: یک جهت طراحی انتخاب کنید و نامش را بگذارید
جهت طراحی توصیفی کوتاه از حس کلی اپ است. این توصیف برای هوش مصنوعی مثل فیلتری است که هر تصمیمش از آن می‌گذرد. چند جهت که خوب جواب می‌دهند:
| جهت | انتخاب‌های معمول | مناسب برای |
|---|---|---|
| آرام و مینیمال | پالت خنثی، فاصله‌ی زیاد، یک رنگ تاکیدی، حاشیه‌های نازک | ابزارهای بهره‌وری، مالی، سلامت |
| سردبیری (ادیتوریال) | تیترهای سریف، کنتراست قوی تایپ، تصاویر بزرگ، ستون‌های باریک متن | پورتفولیو، نشریات، خدمات ویژه |
| متراکم و کاربردی | ردیف‌های فشرده، تایپ کوچک، جدول، مناسب کار با کیبورد | ابزارهای داخلی، داشبورد، پنل مدیریت |
| گرم و دوستانه | شکل‌های گرد، رنگ‌های نرم، تصویرسازی، دکمه‌های لمسی بزرگ‌تر | اپ‌های مصرفی، جامعه، آموزش |
| جسورانه و گرافیکی | کنتراست بالا، تایپ درشت، بلوک‌های رنگی تخت | رویدادها، معرفی محصول، برندهای خلاق |
آن را همراه با اینکه اپ برای چه کسی است، در اولین درخواست بگنجانید:
یک اپ رزرو برای یک استودیوی یوگای مستقل بساز. جهت طراحی: آرام و مینیمال، شبیه برنامه‌ی چاپ‌شده‌ی استودیو. پس‌زمینه‌ی کرم‌رنگ گرم، متن مشکی نزدیک، و یک رنگ سبز مرمری ملایم و کم‌رنگ برای دکمه‌ها و حالت انتخاب‌شده. برای تیترها یک فونت سریف، برای متن اصلی یک سنس‌سریف تمیز. فاصله‌گذاری زیاد، بدون گرادیان، بدون سایه، بدون ایموجی. اول موبایل.
گام ۳: قاعده‌ها را تعیین کنید؛ تایپ، رنگ و فاصله‌گذاری
این سه بیشترین کیفیت بصری را می‌سازند. صریح بودن درباره‌ی آن‌ها بزرگ‌ترین بهبودی است که می‌توانید انجام دهید.
تایپوگرافی
- یک یا دو فونت. یک فونت برای تیتر و یک فونت برای متن، یا یک خانواده با چند وزن.
- مقیاس تایپ. چند اندازه که به‌طور یکدست استفاده می‌شوند، مثلاً ۱۴، ۱۶، ۲۰، ۲۸ و ۴۰ پیکسل، به‌جای آنکه هر کامپوننت اندازه‌ی دلخواه خودش را انتخاب کند.
- متن خوانا. حدود ۱۶ پیکسل در وب، ارتفاع خط حدود ۱٫۵ برابر و طول سطر حدود ۶۰ تا ۷۵ کاراکتر برای متن بلند.
- سلسله‌مراتب با وزن و اندازه، نه با رنگ. تیترها پررنگ‌تر و بزرگ‌تر؛ متن ثانویه کوچک‌تر و خاکستری‌تر.
رنگ
- بیشتر خنثی. پس‌زمینه، سطوح، حاشیه‌ها و خاکستری‌های متن بیشترین کار را انجام می‌دهند.
- یک رنگ تاکیدی برای اقدام‌ها و حالت‌های انتخاب‌شده. رنگ دوم فقط وقتی که نقش روشنی دارد.
- رنگ‌های معنایی برای موفقیت، هشدار و خطا؛ و فقط برای همان کارها استفاده شوند.
- کنتراست. WCAG 2 برای متن اصلی نسبت کنتراست حداقل ۴٫۵ به ۱ و برای متن درشت ۳ به ۱ می‌خواهد. متن خاکستری روشن روی سفید اغلب رد می‌شود؛ از هوش مصنوعی بخواهید بررسی کند.
- حالت تاریک، اگر می‌خواهید، با طراحی عمدی، نه با وارونه کردن ساده‌ی رنگ‌ها.
فاصله‌گذاری و چیدمان
- یک مقیاس فاصله‌گذاری مثل ۴، ۸، ۱۲، ۱۶، ۲۴، ۳۲، ۴۸ و ۶۴ پیکسل. همه‌چیز روی این مقیاس قرار بگیرد.
- تراز. لبه‌ها در یک راستا باشند؛ محتوا روی یک شبکه یا یک ستون با عرض بیشینه‌ی ثابت قرار بگیرد.
- نزدیکی. چیزهای مرتبط به هم نزدیک و چیزهای نامرتبط دورتر. همین یک قاعده بیشتر صفحه‌های شلوغ را درست می‌کند.
- کانتینر کمتر. همه‌چیز به کارت نیاز ندارد. حاشیه، خط جداکننده و فضای سفید اغلب محتوا را آرام‌تر گروه‌بندی می‌کنند.
پرامپتی که این سیستم را یک‌بار و برای همیشه تعریف می‌کند:
پیش از ساخت صفحه‌های بیشتر، یک سیستم طراحی کوچک بساز و همه‌جا از آن استفاده کن: مقیاس تایپ ۱۴/۱۶/۲۰/۲۸/۴۰ پیکسل، ارتفاع خط ۱٫۵، مقیاس فاصله‌گذاری ۴/۸/۱۲/۱۶/۲۴/۳۲/۴۸ پیکسل، خنثی‌ها از سفید نزدیک تا مشکی نزدیک، یک رنگ تاکیدی (#3F6B5A) فقط برای اقدام‌های اصلی، و قرمز فقط برای خطا. دکمه‌ها، ورودی‌ها و کارت‌ها باید یک شعاع گوشه‌ی مشترک داشته باشند. بررسی کن که همه‌ی متن‌ها حداقل سطح WCAG AA را داشته باشند.
اگر با یک ساخت‌ابزار آشنا به کد کار می‌کنید، این معمولاً به توکن‌های طراحی تبدیل می‌شود؛ متغیرهای CSS یا تم Tailwind. یعنی تغییرات بعدی در یک جا انجام می‌شود.
گام ۴: اول یک صفحه را درست کنید
دوازده صفحه را یک‌جا تولید نکنید و بعد بخواهید همه را درست کنید. صفحه‌ای را انتخاب کنید که کاربران بیشتر می‌بینند؛ اغلب داشبورد یا فهرست اصلی. آن‌قدر روی آن کار کنید تا درست شود. بعد بگویید:
از داشبورد به‌عنوان مرجع برای بقیه‌ی صفحه‌ها استفاده کن: همان هدر، فاصله‌گذاری، اندازه‌ی تایپ، سبک دکمه‌ها و سبک جدول. صفحه‌های تنظیمات و رزروها را مطابق آن به‌روز کن.
یک صفحه‌ی مرجع که کامل شده، سلیقه‌ی شما را بهتر از هر صفت منتقل می‌کند.
گام ۵: با درخواست‌های کوچک و مشخص اصلاح کنید
بازخورد به هوش مصنوعی مثل بازخورد به یک طراح جونیور است: مشخص، یک بخش در هر بار، و روشن درباره‌ی آنچه باید بماند.
| مبهم | مشخص |
|---|---|
| «قشنگ‌ترش کن.» | «فاصله‌ی بین بخش‌ها را به ۶۴ پیکسل برسان، تیتر صفحه را ۴۰ پیکسل کن و متن ثانویه را به خاکستری متوسط نرم‌تر کن.» |
| «شلوغ به نظر می‌رسد.» | «حاشیه‌های کارت‌های ردیف آمار را بردار، عددها را به چپ تراز کن و برچسب‌ها را بالای آن‌ها با حروف کوچک بگذار.» |
| «جذاب‌ترش کن.» | «رنگ تاکیدی را فقط برای دکمه‌ی اصلی استفاده کن. دکمه‌های ثانویه را با حاشیه بساز.» |
| «نمای موبایل را بهتر کن.» | «در عرض گوشی، فیلترها را در یک برگه که از دکمه‌ی فیلتر باز می‌شود قرار بده و ردیف‌های جدول را به کارت تبدیل کن.» |
همیشه بنویسید چه چیزی باید بماند؛ مثلاً «همه‌ی مسیرها، متن‌ها و امکانات را ثابت نگه دار»، تا یک اصلاح بصری بی‌سروصدا امکانی را حذف نکند. و هر تغییر را روی صفحه‌ی گوشی بررسی کنید پیش از درخواست بعدی؛ برای دیدن معیار خوب در صفحه‌های کوچک، چطور یک وب‌اپ سازگار با موبایل بسازیم را ببینید.
گام ۶: جزئیاتی که طراحی خوب را از عمومی جدا می‌کند
وقتی ساختار درست شد، این چیزهای کوچک اپ را کامل به نظر می‌رسانند:
- حالت خالی. آنچه کاربر جدید بدون داده می‌بیند: یک توضیح کوتاه و یک اقدام روشن، نه یک جدول خالی.
- حالت بارگذاری. اسکلتی با شکل محتوا، نه چرخنده‌هایی همه‌جا.
- حالت خطا. پیام‌های ساده‌ی فارسی کنار فیلدی که مشکل دارد.
- حالت‌های hover، focus و فشرده‌شدن برای هر عنصر تعاملی. حلقه‌ی focus برای کاربران کیبورد مهم است.
- محتوای واقعی. «Lorem ipsum» و «علی رضایی» را با متن و داده‌ی واقعی جایگزین کنید؛ محتوای ساختگی مشکلات چیدمان را پنهان می‌کند.
- آیکون‌ها از یک مجموعه، در یک یا دو اندازه، با ضخامت خط یکسان.
- تصویری با هدف. عکس واقعی از محصول، مکان یا آدم‌های خودتان بهتر از عکس‌های عمومی است. وقتی عکس استوک یا تولیدشده استفاده می‌کنید، سبک‌شان یکدست باشد.
- متن. برچسب‌های کوتاه و مشخص («رزرو کلاس»، نه «ارسال») به کیفیت درک‌شده بیشتر از هر انتخاب رنگی کمک می‌کنند.
اشتباهات رایج
- بازطراحی همه‌چیز در یک درخواست. تغییرات بزرگ مشکلات تازه می‌سازند. صفحه‌به‌صفحه جلو بروید.
- رنگ تاکیدی زیاد. اگر همه‌چیز برجسته باشد، هیچ‌چیز برجسته نیست.
- همه‌چیز وسط‌چین. متن وسط‌چین بیرون از تیتر خواندنش سخت است؛ بیشتر محتوا را به چپ یا راست تراز کنید.
- متن ریز و کم‌کنتراست که روی مانیتور بزرگ شیک است و روی گوشی زیر نور خورشید خوانده نمی‌شود.
- تزیین به‌جای سلسله‌مراتب. گرادیان و سایه نمی‌توانند صفحه‌ای را درست کنند که مهم‌ترین اقدام در آن مشخص نیست.
- نادیده گرفتن صفحه‌ی فرود. برای بسیاری از محصولات، این اولین تصویر است؛ چطور صفحه‌ی فرودی بسازیم که تبدیل کند را ببینید.
برای الگوهای پرامپت بیشتر جز طراحی، چطور برای سازنده‌های اپ هوش مصنوعی پرامپت بنویسیم را بخوانید. اگر کار شما خود محصول است، مثل پورتفولیوی طراحی یا عکاسی، چطور یک وب‌سایت پورتفولیو بسازیم به ارائه‌ی کار عمیق‌تر می‌پردازد.
طراحی با Mythex
در Mythex طراحی را در چت توصیف می‌کنید، آن را در پیش‌نمایش زنده می‌بینید و قبل از تغییر بعدی، نمای قاب گوشی را بررسی می‌کنید. مستندات چند الگوی کوتاه برای این کار دارند: پرامپت‌های طراحی و رابط کاربری برای نام‌بردن آنچه باید عوض شود و آنچه باید بماند، و بازطراحی رابط کاربری برای تازه‌سازی یک صفحه در هر بار بدون از دست دادن امکانات. Mythex همچنین می‌تواند در چت عکس استوک جستجو کند یا یک تصویر بسازد، مثل تصویر اصلی، پس‌زمینه یا تصویر اشتراک‌گذاری، و وقتی بخواهید آن را در اپ قرار دهد. اگر یک مرحله خراب شد، به نقطه‌ی بازیابی قبل از آن برگردید. اگر ترجیح می‌دهید از یک طراحی موجود شروع کنید و آن را تنظیم کنید، قالب‌ها را مرور کنید.
پرسش‌ها
چرا طراحی‌های هوش مصنوعی همه شبیه هم‌اند؟
چون یک درخواست مبهم، میانگین‌ترین پاسخ را می‌گیرد: همان فونت‌ها، گرادیان‌ها، کارت‌های گرد و هیروی وسط‌چین. به هوش مصنوعی مرجع، یک جهت طراحی نام‌برده و قاعده‌های مشخص برای تایپ، رنگ و فاصله بدهید تا خروجی عمومی به نظر نرسد.
آیا می‌توانم به هوش مصنوعی اسکرین‌شات بدهم تا سبکی را کپی کند؟
بسیاری از سازنده‌های هوش مصنوعی تصویر را می‌پذیرند و اسکرین‌شات یکی از واضح‌ترین راه‌ها برای نشان دادن یک سبک است. آنچه را می‌پسندید توضیح دهید، مثل فاصله‌گذاری، تایپ و نحوه‌ی استفاده از رنگ، به‌جای اینکه کپی عین محصول دیگران را بخواهید.
اگر با هوش مصنوعی می‌سازم، به طراح نیاز دارم؟
برای نسخه‌ی اول لازم نیست. طراح وقتی بیشترین ارزش را دارد که برندی برای حفظ داشته باشید یا محصولی پیچیده که چیدمان آن بر راحتی استفاده تأثیر می‌گذارد. تا آن زمان، مرجع روشن و اصلاح‌های کوچک، رابط تمیز و قابل‌استفاده به شما می‌دهد.
چه چیزی یک اپ را حرفه‌ای نشان می‌دهد؟
یکدستی بیشتر از تزیین: یک مقیاس تایپ، یک پالت رنگی کوچک که با هدف استفاده می‌شود، فاصله‌گذاری روی یک مقیاس ثابت، لبه‌های تراز و سلسله‌مراتب واضح تا مهم‌ترین چیز هر صفحه بی‌درنگ دیده شود.