اجعل الشاشة جامحة
كيف تطلب، والمفاتيح الخمسة التي تشكل النتيجة، وهي المنصة والصفحات ومستوى الجموح وكلمات الذوق وعدسات الثقافة.
تحول المهارة gobanana-explore طلبا مثل «اجعلها أجمل» إلى 3 أو 4 اتجاهات واضحة وقابلة للبناء لصفحة واحدة. توجهها بخمسة مفاتيح. يمكنك ضبطها كلها في جملة واحدة، أو تركها كلها.
اجعل شاشة الاشتراك في تطبيق التأمل على iPhone جامحة، مستوى الجموح 4،الذوق: حبيبات، خطوط كبيرة. استخدم عدسة ما اليابانية.المفتاح 1: المنصة
Section titled “المفتاح 1: المنصة”يعامل GoBanana الهاتف والجهاز اللوحي والموقع وتطبيق الويب كعوالم مختلفة. المنصة تحدد الشبكة وأحجام الخطوط والكثافة وما يجب تجنبه والمعارض التي يستخدمها البحث.
| قل | المنصة | ما الذي يتغير |
|---|---|---|
| iPhone، iOS، Android، شاشة تطبيق، شاشة اشتراك | mobile |
4 أعمدة، هوامش 16px، أهداف لمس 44pt، شريط تبويب ولوحة سفلية، عناوين 34px، نص 17px |
| iPad، جهاز لوحي | tablet |
8 أعمدة، هوامش 24px، عرض مقسوم، أهداف لمس 44pt |
| صفحة هبوط، صفحة إطلاق، صفحة رئيسية، حملة | website |
12 عمودا، خطوط مرنة حتى 120px، إجراء أول واحد واضح |
| لوحة معلومات، لوحة إدارة، SaaS، CRM، تطبيق ويب | webapp |
هيكل بشريط جانبي، إيقاع كثيف من 8px، جداول، دعم كامل للوحة المفاتيح |
إن لم تحدد كلماتك المنصة، يسأل الوكيل مرة واحدة («هل هو لتطبيق هاتف أم موقع أم تطبيق ويب؟»). يستنتج الخادم المنصة من الموجز أيضا، لكن قراءة الوكيل هي التي تعتمد. القواعد الكاملة: المنصات.
موجز الهاتف لا يحصل أبدا على لوحات معلومات ويب أو شبكات من 12 عمودا. النتائج التي لا تناسب المنصة تقيم bad ولا توضع على اللوحة.
المفتاح 2: الصفحات
Section titled “المفتاح 2: الصفحات”حدد من 1 إلى 3 صفحات، كل منها حتى 60 حرفا: «الدفع»، «التعريف عند أول تشغيل»، «/launch». سمّ صفحة واحدة لتحصل على أوضح نتيجة.
إذا سميت المنتج كله، فلن يثنيه الوكيل. سيسأل «أين تريد الجنون؟» ويعرض المواضع التي يؤتي فيها ثماره على منصتك. انظر أين يؤتي الجنون ثماره.
المفتاح 3: مستوى الجموح
Section titled “المفتاح 3: مستوى الجموح”| المستوى | الاسم | الحركات | الإحساس | قل |
|---|---|---|---|---|
| 1 | Fresh | 1 | التخطيط نفسه بسطح جديد | «أحدث قليلا»، «بلمسة خفيفة» |
| 2 | Bold | 1 | حركة واحدة قوية، وقد ينثني التخطيط | «أجرأ» |
| 3 | Weird | 2 | فكرتان تتصادمان على شاشة واحدة. الافتراضي | لا شيء |
| 4 | Wild | 2 أو 3 | أبعد مما يبدو آمنا | «اذهب بعيدا»، «ادفعها أكثر» |
| 5 | Bananas | 3 | تجاهل متعمد لقواعد سهولة الاستخدام | «جنون كامل»، «بلا قيود» |
كل حركة تستعير من مصدر واحد:
| الحركة | ما تفعله | مثال |
|---|---|---|
transplant |
تستعير شكل شيء ما وطباعته وآثار استعماله | «صفحة الدفع كبطاقة صعود الطائرة» |
material |
ترسم الأسطح كخامة بإضاءة حقيقية | «بطاقات من زجاج مصنفر» |
era |
تأخذ الخطوط والألوان والشبكة من حقبة أو حركة فنية | «Fluxus 1962»، «السويسري 1957» |
constraint |
تلتزم بقاعدة صارمة واحدة | «ألوان مسطحة، بلا تدرجات» |
scale |
تجعل عنصرا واحدا ضخما وتصغر الباقي | «خطوط بيانية ضخمة في كل مكان» |
lens |
تستلهم من تقليد بصري | «نسيج السدو»، «Memphis» |
اطلب نوعا معينا من الثني بقول «حركات الخامة والحقبة فقط». التفاصيل: الجموح والحركات والعدسات.
المفتاح 4: كلمات الذوق
Section titled “المفتاح 4: كلمات الذوق”الذوق من 1 إلى 5 كلمات قصيرة تصف الأسلوب الذي تحبه: minimal، glassmorphism، liquid glass، dark mode، big typography، monochrome، luxury، swiss style، bento grid، editorial، grainy، skeuomorphic. تعطي نتائج بحث جيدة لأن المعارض توسم الأعمال بها.
- يحفظ الذوق على اللوحة، فتستخدمه عمليات البحث اللاحقة على اللوحة نفسها.
- دون ذوق، يستخدم كل اتجاه كلمات الأسلوب الخاصة به من مواصفاته. لا يملك GoBanana أسلوبا خاصا ولا يفرض واحدا.
- بعض الكلمات تختار المعارض أيضا: «bento grid» تجلب Bento Grids، و«dark mode» تجلب Dark Design، و«big typography» تجلب Httpster. انظر المصادر.
- هل تشارك لوحة Pinterest أو لقطات شاشة؟ يصفها الوكيل بهذه الكلمات، ولا ينزلها أبدا.
المفتاح 5: عدسات الثقافة
Section titled “المفتاح 5: عدسات الثقافة”العدسة تجعل كل الاتجاهات تستلهم من تقليد بصري واحد.
| معرف العدسة | التقليد |
|---|---|
sadu |
نسيج السدو |
najdi |
العمارة النجدية |
kufic |
هندسة الكوفي المربع |
mashrabiya |
المشربية |
talli |
التلي (الضفائر المعدنية الإماراتية) |
qatt-asiri |
القط العسيري (الرسم الجداري في عسير) |
desert-modern |
الحداثة الصحراوية |
memphis |
تصميم Memphis |
swiss-international |
الأسلوب السويسري الدولي |
japanese-ma |
مفهوم ما الياباني (المساحة الفارغة) |
تقترح المهارة عدسة عندما تذكر السعودية أو الخليج أو العربية أو التراث المحلي. ولا تستخدم أبدا نصوصا مقدسة أو آيات دينية.
كيف يبدو الاتجاه
Section titled “كيف يبدو الاتجاه”يعود كل اتجاه بمواصفات بصرية كاملة. هذا مثال حقيقي من محرك الثني (موقع، صفحة إطلاق، مستوى جموح 3):
Specialty coffee launch as a spa-like cereal box (Twist: giant sparklines everywhere) [scale + transplant]Spec: type rounded: A soft rounded sans for display at clamp(48px, 8vw, 120px), a plain sansfor body at 18px | color: Eucalyptus green, stone and white; text at 4.5 to 1 contrast or more |layout: 12 column grid, fluid type, a scroll story that opens on a hero with one clear action |motion: Slow 300ms fades and eases, nothing loops, and none with reduced motion onSignature: The hero section built like a cereal box.Pattern: A loud front panel with a puzzle panel on the side, as the section divider.Steal: The print details and wear of a cereal box; The scale jump of giant sparklines.Avoid: A hero with no clear first action; Body text wider than 75 characters; Scroll jacking.Art queries: cereal box; oversized sparklines posterيعرض الوكيل بطاقة مختصرة لكل اتجاه أبقاه. المواصفات الكاملة موجودة على اللوحة وفي DIRECTION.md.
لماذا 3 اتجاهات فقط؟
Section titled “لماذا 3 اتجاهات فقط؟”يثني الوكيل 8 أفكار، ولا يبقي الفكرة إلا إذا:
- أعطت صفحتك حركة واجهة ملموسة على هذه المنصة («بطاقات أسعار تتكدس مثل بطاقات الصعود»)،
- ووجدت 6 مراجع واجهات صالحة على الأقل بعد البحث والتدقيق (الفن لا يحسب)،
- ولم تكن شبه مكررة لفكرة أبقاها.
يختار 3 (أو العدد الذي طلبته، بحد أقصى 4)، فلا تستهلك أكثر من 4 عمليات بحث. الباقي يستبعد مع الأسباب ولا يعرض. وفي مرات الثني اللاحقة تقل اقتراحات الأفكار التي تستبعد كثيرا.
ارفعها أو اخفضها أو غير اتجاهها
Section titled “ارفعها أو اخفضها أو غير اتجاهها”| قل | النتيجة |
|---|---|
| «أكثر جموحا» / «أهدأ» | ثني جديد بمستوى جموح N+1 أو N-1، كأقسام جديدة على اللوحة نفسها |
| «محاولة أخرى للاتجاه 2» | ثني إضافي بأنواع الحركات نفسها |
| «جربها على صفحة 404 أيضا» | صفحة جديدة من مواضع الجنون |
| «واجهات أقل، وإلهام خام أكثر» | يحصل صف Art direction (الاتجاه الفني) على عناصره الأربعة كاملة، وتبقى شبكة الواجهات للواجهات فقط |
| «ابدأ لوحة جديدة» | new_canvas بدلا من الإضافة إلى اللوحة الحالية |