انتقل إلى المقال
Aniq-UI

Ticketoryالهوية البصرية

الهوية البصرية

اجعل الموقع واللوحة لك: الاسم وصيغ الشعار والأيقونات والألوان والخطوط وبيانات المنظّم ونصوص محركات البحث.

لحزمة الحزمة الكاملة

أين توجد الهوية البصرية

العنصرالموقع (storefront/)لوحة التحكم (admin-dashboard/)
الاسم، صيغ الشعار، بريد التواصل، السوقsrc/config/brand.config.tssrc/config/brand.config.ts
الألوان والخطوط والظلالsrc/styles/theme-variables.csssrc/styles/theme-variables.css
صيغ الشعار والعلامة والأيقوناتpublic/brand/, public/, src/app/public/brand/, public/, src/app/
الزخارفpublic/decor/public/decor/
الخطوطsrc/fonts/، تُحمَّل في src/app/[locale]/layout.tsxsrc/fonts/، تُحمَّل في src/app/layout.tsx
النصوصmessages/messages/

كل لون رمز (token) يُعرَّف مرة للمظهر الفاتح (:root) ومرة للمظهر الداكن (:root[data-theme="dark"]). تقرأ المكونات الرموز فقط، لذلك يصل تغيير الرمز إلى كل صفحة. غيّر لون العلامة في الكتلتين، وإلا احتفظ مظهر واحد باللون القديم.

اسم الموقع وبريد التواصل والسوق

في storefront/src/config/brand.config.ts:

storefront/src/config/brand.config.ts
name: "Ticketory",                    // the manifest and search engines' structured data
description: "...",                   // the installable app's description
mark: "/brand/mark.svg",              // structured data for search engines
lockups: { en: {...}, ar: {...} },    // the header and footer logo, with each file's size
themeColor: { light: "#FFFBF0", dark: "#111111" }, // the browser bar
contactEmail: "support@example.test", // until the API's settings answer
market: {
  currency: "USD",           // money with no currency of its own
  timeZone: "Europe/London", // dates with no time zone of their own
},
keywords: ["events", "tickets", ...],

الاسم كما تكتبه كل لغة، ويُستخدم في عناوين التبويبات وبطاقات المشاركة، هو meta.siteName في messages/layouts/en.json وar.json. ويظهر اسم المنتج أيضًا داخل الجمل، باللغتين: ابحث في messages/ عن Ticketory وعن كتابته العربية تيكيتوري، وأعد كتابة تلك الأسطر.

الملفالاستخدام
public/brand/lockup-en-light.webp, lockup-en-dark.webpالصيغة الإنجليزية للشعار (العلامة والاسم مرسومان معًا) على الصفحات الفاتحة والداكنة
public/brand/lockup-ar-light.webp, lockup-ar-dark.webpالصيغة العربية للشعار: الاسم بالخط العربي والعلامة على اليمين
public/brand/mark.svgالعلامة وحدها
public/brand/og-card.pngبطاقة المشاركة بقياس 1200 في 630
src/app/icon.svg, src/app/apple-icon.pngأيقونتا تبويب المتصفح والشاشة الرئيسية
public/web-app-manifest-192x192.png, public/web-app-manifest-512x512.pngأيقونات التطبيق القابل للتثبيت

كل صيغة شعار صورة جاهزة واحدة بخلفية شفافة مقصوصة على محتواها. استبدلها بصورك أيًّا كان قياسها، واكتب عرض كل ملف وارتفاعه في lockups داخل إعدادات العلامة، حتى يحافظ الترويس على تناسبه.

النجوم والموجات والمثلثات والدوائر والنقاط والخطوط المتعرجة حول الأقسام هي ملفات SVG في public/decor/. يسرد كل قسم أماكن أشكاله في مجلد constants/ الخاص بميزته (وللتذييل في src/layouts/app/SiteFooter/constants/): احذف صفًّا لإسقاط شكل، أو ضع ملف SVG خاصًّا بك في public/decor/ وأضف اسم ملفه إلى DecorAsset في src/components/Decorations/types.ts.

ألوان الموقع وخطوطه

المتغيرفاتحداكنالدور
--background#FFFBF0#111111الصفحة
--surface#FFFEF7#1B1B1Bاللوحات والبطاقات والحقول
--text#080808#FFFBF0النص
--border#111111#777777الخط الحبري بسمك 3 بكسل على اللوحات وعناصر التحكم
--primaryColor#FF3289#FF3289الأزرار الأساسية والصفحة الحالية ونقطة العنوان
--accent-yellow, --accent-teal, --accent-blue#FFDC32, #00C7B8, #244BFFالشيء نفسهألوان التذاكر
--errorColor#A51D4F#FF6B9Eالأخطاء وعلامات الحقول المطلوبة

النص على التعبئات الوردية والصفراء والفيروزية أسود (--on-accent)، وعلى الأزرق والحبري كريمي. تحقق من أن النص على ألوانك ما زال مقروءًا بنسبة 4.5 إلى 1 في المظهرين. ولكل فعالية أيضًا لون تذكرتها الخاص، يُختار في محرر الفعاليات.

تأتي ملفات الخطوط في src/fonts/ داخل كل تطبيق، فلا ينزّلها البناء أبدًا: Archivo Black للعناوين (Lalezar بالعربية) وDM Sans للنص (Noto Sans Arabic)، وكلها بترخيص SIL Open Font في src/fonts/OFL.txt. لتغيير أحدها ضع ملف .woff2 في src/fonts/، ووجّه استدعاء localFont إليه، وأضف ترخيصه إلى OFL.txt.

نتائج البحث، والمشاركة، والنطاق

  • NEXT_PUBLIC_SITE_URL هو أساس كل عنوان أساسي، وبدائل اللغات، وبطاقات المشاركة، وrobots.txt، وخريطة الموقع. اضبطه على عنوانك الحقيقي قبل أن تبني.
  • العنوان والوصف ونص المشاركة الافتراضية تحت meta في messages/layouts؛ وما يخص كل صفحة تحت meta في مساحة اسمها داخل messages/. وتستخدم صفحة الفعالية عنوان الفعالية وملخصها.
  • تسرد خريطة الموقع الصفحة الرئيسية والفعاليات والأماكن والمنظّمين والأسعار والأسئلة الشائعة والتواصل والصفحات القانونية، وكل فعالية ومكان ومنظّم عام، كلًّا باللغتين مع بديلها. ويُبعد robots.txt صفحات الحساب والدفع والطلبات وتسجيل الدخول.
  • تُكتب الأموال بالطريقة نفسها في اللغتين، الرمز أولًا بأرقام لاتينية ($41.20)، عبر src/lib/format/formatMoney.ts.

فاتح وداكن ونظام

يقدّم التطبيقان النظام والفاتح والداكن. يتبع النظام نظام التشغيل ويتغير معه. يُحفظ الاختيار في localStorage بالمتصفح (ticketory-theme في الموقع وticketory-admin-theme في اللوحة)، ولا يُرسل شيء إلى واجهة API، ويطبّقه سكربت قصير في رأس الصفحة قبل أول رسم، فلا يومض المظهر الآخر عند إعادة التحميل. وألوان شريط المتصفح هي themeColor في الموقع وtheme في إعدادات علامة اللوحة.

اسم اللوحة وصيغ شعارها وألوانها

  • الاسم: name في src/config/brand.config.ts، بالإنجليزية والعربية (Ticketory وتيكيتوري، وفي company وshortName والنص البديل للشعار وmanifest أيضًا)، هو نصف العلامة في عنوان كل صفحة (Events | Ticketory) والنص البديل لصيغة الشعار؛ ويحمل meta العنوان والوصف والكلمات المفتاحية الافتراضية وصورة المشاركة (public/og-image.jpg بقياس 1200 في 630)، ويحمل domain.url أساس عناوين البيانات الوصفية المطلقة (يتقدم عليه NEXT_PUBLIC_DASHBOARD_URL)، ويحمل manifest التطبيق القابل للتثبيت. وعنوان كل صفحة نفسها تحت meta.titles في مساحتي الاسم dashboard وauth داخل messages/.
  • صيغ الشعار والأيقونات: استبدل ملفات lockup-*.webp الأربعة وmark.svg في public/brand/ مع إبقاء الأسماء، أو غيّر المسارات والأحجام في BRAND_LOCKUPS. أيقونة تبويب المتصفح هي src/app/icon0.svg، وأيقونة iPhone هي src/app/apple-icon.png، وأيقونات التطبيق القابل للتثبيت هي ملفا web-app-manifest في public/.
  • الألوان: --background و--surface و--surface-elevated و--surface-hover و--surface-sunken و--text و--text-muted و--border و--primaryColor والألوان المميِّزة و--ink-button و--on-ink و--errorColor و--shadow-ink وأزواج --tone-* لشارات الحالة، في src/styles/theme-variables.css، مرة لكل مظهر. وأي حالة تأخذ أي درجة موجود في src/config/statusTones.ts.
  • الخطوط: DM Sans وNoto Sans Arabic وArchivo Black وLalezar، تُحمَّل من src/fonts/ في src/app/layout.tsx وتُسند في src/styles/base.css.

بيانات المنظّم نفسه

اسم كل مساحة عمل وبريد الدعم والعملة (USD أو EUR أو GBP أو SAR أو AED) والمنطقة الزمنية ورسوم الحجز، التي يدفعها الحاضر دائمًا عند الدفع، كلها إعدادات تُعدَّل في اللوحة من الإعدادات ثم عام. يقرؤها الموقع من GET /api/public/settings، مع مدة حجز المقاعد (عشر دقائق في البيانات التجريبية) وطرق الدفع المعروضة. ولكل فعالية أيضًا منطقتها الزمنية الخاصة.

لا تُرفع صيغ الشعار في اللوحة: فهي تأتي من الملفات أعلاه.

الصياغة والصفحات القانونية

كل جملة مرئية موجودة في messages/، مجلد لكل قسم فيه en.json وar.json. أعد كتابة النصوص في الملفين. سياسة الخصوصية والشروط وسياسة الإلغاء في messages/legal نصوص تجريبية: أعد كتابتها لعملك ولبلدك قبل أن تبيع تذاكر حقيقية.

توقفت عند خطوة؟

ابحث عن الحل قبل أن تبدأ من جديد.

حل المشكلات

تفضيلات ملفات تعريف الارتباط

نستخدم ملفات تعريف الارتباط لتعزيز تجربة التصفح الخاصة بك وتحليل حركة المرور على الموقع وتخصيص المحتوى. بالنقر على "قبول الكل"، فإنك توافق على استخدامنا لملفات تعريف الارتباط للتحليلات والإعلانات المخصصة.