دليل تصميم papatto

papatto مجموعة أدوات لإنجاز المهام الصغيرة بسرعة. تجمع هذه الصفحة القواعد التي تُبقي الشاشات والنصوص متّسقة، بالقيم نفسها التي يعمل بها الموقع. إن أردت استخدام الشعار فيمكنك تنزيله من قسم «الشعار».

المحتويات

القواعد الأساسية

كل شاشة في papatto مبنية على هذه الوعود، ولا يُصنع شيء بطريقة تنقضها.

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

بنية العلامة

papatto واحد من أعمال الصانع Hoshimado. الاسم والألوان خاصة بـ papatto ولا تُعاد صباغتها بألوان Hoshimado.

يوضع توقيع «by Hoshimado» في طرف السطر الأخير من التذييل، بلون النص الهادئ (muted).
تحمل صور المشاركة التوقيع نفسه في الزاوية السفلية اليسرى بلون هادئ.
لا يوضع التوقيع في الترويسة، ولا يظهر إلا مرة واحدة في الشاشة، ولا يكون أكبر من شعار papatto.
الأدوات المضمّنة في مواقع أخرى لا تعرض التوقيع؛ شريط «افتح في papatto» هو الإشارة الوحيدة إلى المصدر.

ارتفاع التوقيع 16 بكسل. نص حقوق النشر بجانبه 12 بكسل، لذا يأخذ papatto الحد الأصغر وفق قاعدة Hoshimado «اجعل ارتفاع نص التوقيع مساويًا لنص حقوق النشر المجاور (نحو 16–20 بكسل)» (قواعد by Hoshimado).

العلاقة بدليل Hoshimado

يتبع papatto فصلَي «الكتابة» و«إمكانية الوصول» في دليل Hoshimado، مع ألوانه واسمه وشعاره الخاصة.

قواعد Hoshimado نفسها موجودة في دليل تصميم Hoshimado.

الكتابة

نكتب بكلمات بسيطة يفهمها الجميع.

جمل قصيرة وودودة، وفكرة واحدة في كل جملة.
نتجنب المصطلحات المتخصصة والكلمات غير المألوفة، ونقولها بلغة يومية.
تُسمّى الأزرار بالإجراء الذي تقوم به («اختيار ملف»، «تنزيل PDF»). وتبقى خيارات علامات التبويب والمفاتيح أسماءً («PNG»، «عمودي»).
تستخدم الشروح الكلمات الظاهرة على الشاشة نفسها، فتتطابق أسماء الأزرار مع الشروح حرفيًا.
تقول رسائل الخطأ ما الذي حدث وما الذي يجب فعله بعد ذلك («هذا التاريخ غير موجود. تحقّق من السنة والشهر واليوم.»).
لا علامات تعجّب ولا رموز تعبيرية في نصوص الواجهة.
نكون صادقين بشأن ما لا تستطيع الأداة فعله، ونكتب حقائق مثل «لا يُرسَل شيء إلى أي مكان» بدل صيغ التفضيل بلا دليل («الأسرع»، «الأفضل») أو الشعارات المطمئنة.
كل النصوص متوفرة بعشر لغات، والأصل هو اليابانية. الترجمات طبيعية لا حرفية.

اكتب	تجنّب
اختيار ملف	رفع إلى الخادم
تحويل إلى PNG	إجراء تحويل الصيغة إلى PNG
تم الحفظ	اكتملت العملية بنجاح!
تعذّر فتح هذا الملف. اختر ملفًا آخر.	حدث خطأ
الأرقام التي تُدخلها لا تُرسَل إلى أي مكان	أمان متطوّر يمنحك الطمأنينة

الشعار

يتكوّن الشعار من الرمز (دائرة برتقالية وثلاثة خطوط) والاسم. تستخدم الصفحات اليابانية «ぱぱっと»، وكل اللغات الأخرى «papatto».

على خلفية فاتحة

على خلفية داكنة

استخدم الألوان كما هي: النسخة ذات النص القريب من الأسود على الخلفيات الفاتحة، والنسخة ذات النص القريب من الأبيض على الخلفيات الداكنة.
داخل الموقع يرسم مكوّن Logo الشعار. ألوانه مأخوذة من الرموز، فيتبدّل تلقائيًا بين الفاتح والداكن.

ما يجب تجنّبه

تغيير الألوان أو إضافة تدرّجات
مطّه أو تدويره أو إضافة ظلال
تغيير المسافة أو الترتيب بين الرمز والاسم
وضعه على صور أو زخارف تصعّب قراءته

التنزيلات

الألوان

ألوان محايدة دافئة وهادئة مع لون إبراز واحد هو البرتقالي. لكل لون قيمة فاتحة وأخرى داكنة، ويتبدّل حسب إعداد الألوان.

--bgخلفية الصفحةفاتح#fffcf6داكن#17140f
--surfaceالبطاقات وحقول الإدخال ومربعات الخطواتفاتح#ffffffداكن#201c16
--surface-hoverعند تمرير المؤشر، الأسطح الهادئةفاتح#fff6e6داكن#2a241b
--fgالنص الأساسي والعناوينفاتح#26211bداكن#f3eee6
--mutedالنص المساعد والملاحظاتفاتح#6b6157داكن#aaa093
--lineالخطوط وحدود البطاقاتفاتح#ece4d6داكن#342e25
--controlحدود حقول الإدخال والمفاتيح والأزرار ذات الإطار ودوائر اللونفاتح#998c7eداكن#776d5f
--sliderمقبض شريط التمرير ومسارهفاتح#c97a00داكن#f7b13c
--accentالأزرار الرئيسية وحالات الاختيار والإنجازفاتح#f5a524داكن#f7b13c
--accent-strongإطار التركيز والروابط ونص علامات التفعيلفاتح#9c5e00داكن#f7b13c
--accent-fgالنص فوق البرتقاليفاتح#2b1a00داكن#2b1a00
--gainرصيد موجبفاتح#2e7d32داكن#74d27a
--lossرصيد سالب ونص الأخطاء (text-danger)فاتح#c0392bداكن#f4806f

التباين

نسبة اللون إلى خلفيته. الهدف لألوان النص 4.5:1 أو أكثر، ولحدود عناصر التحكم (control) 3:1 أو أكثر، وتبلغه السمتان.

	الهدف	فاتح	داكن
`fg / bg`	4.5:1	15.6:1	15.9:1
`muted / bg`	4.5:1	5.9:1	7.1:1
`muted / surface`	4.5:1	6.0:1	6.6:1
`accent-strong / bg`	4.5:1	5.1:1	9.9:1
`accent-fg / accent`	4.5:1	8.2:1	9.0:1
`gain / surface`	4.5:1	5.1:1	9.1:1
`loss / surface`	4.5:1	5.4:1	6.6:1
`control / bg`	3:1	3.2:1	3.6:1
`control / surface`	3:1	3.3:1	3.3:1

يُستخدم البرتقالي المصمت (accent) للأزرار الرئيسية والمفاتيح المفعّلة وأرقام الخطوات وعلامات العناصر المختارة. ولا يُستخدم للزينة.
يُستخدم البرتقالي القوي (accent-strong) لإطار التركيز والروابط مثل «عرض الكل» في التذييل ونص علامات التفعيل. ولا يُستخدم للأخطاء.
نص الأخطاء أحمر (text-danger، وهو لون الرصيد السالب نفسه).
تُرسم حدود حقول الإدخال والمفاتيح والأزرار ذات الإطار ودوائر اللون باللون control، والبطاقات والفواصل باللون line.
أشرطة التمرير وحدها تستخدم اللون slider (فمع accent-strong يقلّ الجزء غير المملوء من المسار عن 3:1 مقابل الخلفية).
زر رئيسي برتقالي مصمت واحد فقط في كل خطوة.
تُكتب الألوان كرموز CSS، فتعمل في الفاتح والداكن معًا.

الخطوط

تستخدم العناوين خطًا مستديرًا، والنص خطًا واضحًا بلا زوائد. تُقدَّم الخطوط من الموقع نفسه، لا من خوادم خارجية.

M PLUS Rounded 1cالعناوين (اليابانية واللغات المكتوبة بالحروف اللاتينية والكيريلية)
Noto Sans JPالنص الأساسي (اليابانية واللغات المكتوبة بالحروف اللاتينية والكيريلية)
Noto Sans KR・SC・Arabicالعناوين والنص بالكورية والصينية والعربية

الأحجام

مهام صغيرة، في لحظة.30px · text-3xl عنوان الصفحة (الحاسوب)
مهام صغيرة، في لحظة.24px · text-2xl عنوان الصفحة (الهاتف)، عناوين الأقسام الكبيرة
مهام صغيرة، في لحظة.18px · text-lg عناوين مربعات الخطوات
مهام صغيرة، في لحظة.16px · text-base النص الأساسي، حقول الإدخال على الهاتف
مهام صغيرة، في لحظة.14px · text-sm النص المساعد، حقول الإدخال على الحاسوب
مهام صغيرة، في لحظة.12px · text-xs الملاحظات، التذييل

تصطف الأرقام في الجداول والعدّادات (أرقام جدولية).
تستخدم حقول الإدخال على الهاتف نصًا بحجم 16 بكسل، حتى لا يكبّر iPhone الشاشة عند كل لمسة.

التخطيط والمسافات والزوايا

التصميم للهاتف أولًا، ثم يتّسع على الحاسوب. المسافات بوحدات 4 بكسل وبعدد قليل من الدرجات.

درجات المسافات

4・8px · gap-1・gap-2داخل المكوّن (الأيقونة والنص، العنوان وملاحظته)
8px · gap-2العناصر المتجاورة أفقيًا (الأزرار الصغيرة، الوسوم)
16px · gap-4العناصر المتقاربة (أزرار متراصّة، صفوف البطاقات)
32px · gap-8المجموعات (مربعات الخطوات، أعمدة الحاسوب)
48px+ · gap-12・gap-16・gap-24أقسام الصفحة (الوعود وقائمة الأدوات)
16 / 24・32px · p-4・sm:p-6・sm:p-8داخل المربع (16 بكسل على الهاتف، و24 أو 32 بكسل على الحاسوب)

استدارة الزوايا

rounded-fullالأزرار والمفاتيح والوسوم
rounded-xlحقول الإدخال والأسطح الصغيرة
rounded-2xlالبطاقات ومربعات الخطوات
rounded-3xlمربعات الإرشاد الكبيرة

تُستخدم درجات 4 و8 و16 و24 و32 و48 بكسل للمسافة بين العناصر وللحشو داخل المربعات. عند الشك: قريب = 16، مجموعة = 32.
الحشوات الصغيرة داخل المكوّنات (أعلى الوسم وأسفله، وجانبَي الزر) استثناء، وتستخدم أيضًا قيمًا خارج الدرجات مثل 2 و6 و10 و12 بكسل.
أقصى عرض للصفحة 1152 بكسل، ويلتفّ نص القراءة عند 672 بكسل. الهامش الجانبي على الهاتف 16 بكسل.
لا يخرج شيء جانبيًا عند عرض 360 بكسل (والأفضل 320 بكسل).

الحركة

الحركة تشرح فقط ما حدث للتو. قصيرة وبلا ارتداد.

عند الانتقال إلى صفحة، ينزلق المحتوى قليلًا من الجانب (0.2–0.3 ثانية)، وعند الرجوع يأتي من الجانب الآخر.
عند تبديل سمة الألوان، تتلاشى الشاشة القديمة في الجديدة خلال 0.3 ثانية.
يصعد إشعار «تم الحفظ» من الأسفل ثم يختفي نحو الأسفل.
لا تُشغَّل فيديوهات الشرح إلا وهي ظاهرة، وتتوقف عند خروجها من الشاشة.
عند تفعيل «تقليل الحركة» تتوقف الحركة وتظهر النتائج فورًا.

المكوّنات

تأتي الأزرار والمفاتيح وحقول الإدخال من مكوّنات مشتركة، ولا تصمّم الأدوات مظهرها بنفسها. المهمة نفسها تبدو متماثلة في كل أداة.

PrimaryButtonالإجراء الأهم في الخطوة. زر برتقالي واحد فقط لكل خطوة
SecondaryButtonزر بإطار يوضع تحت الزر الرئيسي
SmallButtonإجراءات صغيرة قريبة (نسخ، تراجع)
IconButtonزر دائري بأيقونة فقط، له دائمًا اسم يُقرأ
SegmentedControlاختيار واحد من 2 إلى 4 خيارات
الصيغة
Switchإعداد تشغيل/إيقاف يُطبَّق فورًا
الحفظ بالحجم الأصلي
ToggleButtonخيارات تشغيل/إيقاف متجاورة في شريط ضيق. عند التفعيل إطار برتقالي وعلامة
TextFieldحقل إدخال بسطر واحد وعنوانه فوقه
الاسم
ColorSwatchesدوائر للألوان الشائعة ودائرة بألوان قوس قزح لأي لون آخر
اللون
لون آخر#e53935
CardButton・CardLinkبطاقة صغيرة قابلة للضغط بأكملها
Badgeوسم صغير غير قابل للضغط لحالة قصيرة
صالحمنتهٍ

الحالات

يحصل الحقل الذي فيه خطأ على حدّ أحمر (aria-invalid) ورسالة حمراء تحته تقول كيف يُصحَّح. وعند التركيز يصبح حدّ الحقل برتقاليًا قويًا.
تُظهر الأزرار التي تُشغَّل وتُطفأ (ToggleButton، وIconButton مع aria-pressed) أثناء التفعيل إطارًا برتقاليًا وخلفية برتقالية فاتحة. ولا يتغيّر نصّها ولا اسمها المقروء.
قطر دوائر اللون 32 بكسل وبينها 8 بكسل. لكل دائرة حدّ بسمك 1 بكسل (control)، وللدائرة المختارة حلقة بسمك 2 بكسل على بعد 2 بكسل.
دوائر اللون مجموعة أزرار اختيار، ويمكن اختيارها بمفاتيح الأسهم. وتنطق قارئات الشاشة اسم اللون، مثل «أحمر (#E53935)».

درجات الحجم

تُحدَّد الأزرار والعناصر القابلة للضغط بدرجات ارتفاع. أسماء الدرجات مأخوذة من فصل «الأزرار» في دليل Hoshimado.

الدرجة	الارتفاع	المكوّنات	الاستخدام
`xl`	56px	`PrimaryButton xl・SecondaryButton xl / stage`	الإجراء الأهم على مسرح الأداة الصغيرة (التدوير، البدء)
`lg`	48px	`PrimaryButton lg`	الزر الرئيسي الأخير في الخطوة (التنزيل، الحفظ)
`md`	44px	`PrimaryButton md・SecondaryButton・ChangeFileButton・TextField・Select`	القياسي. بارتفاع حقول الإدخال والاختيار نفسه، ومنه الزر ذو الإطار تحت الزر الرئيسي وأزرار اختيار ملف آخر
`sm`	36px	`PrimaryButton sm・SmallButton・ToggleButton・LinkButton inline・TextField sm`	إجراءات صغيرة قريبة (النسخ، التراجع) ومفاتيح التشغيل/الإيقاف، ومنها «حفظ» أعلى محرّر الهاتف
`icon`	44px	`IconButton lg`	أيقونة فقط، في أماكن يكثر لمسها (حذف صف، إغلاق ملء الشاشة)
`icon-sm`	36px	`IconButton`	أيقونة فقط، مثل النسخ بجانب النتيجة
`icon-xs`	32px	`ColorField (×)・Thumbnails / ImageStrip (×)`	علامة × داخل حقل الإدخال أو على صورة مصغّرة
`swatch`	32px	`ColorSwatches`	دوائر اختيار اللون

الترتيب

اترك 8 بكسل بين إجراءات المجموعة الواحدة.
إن لم يتّسع السطر فانتقل إلى السطر التالي. ومفتاح الاختيار (SegmentedControl) الذي لا يتّسع يرصّ خياراته عموديًا.
يوضع الزر الرئيسي في آخر الخطوة.

الأيقونات وفيديوهات الشرح

الأيقونات رسوم خطية، والشرح يعرض الشاشة الحقيقية بالفيديو.

أيقونات الأدوات رسوم خطية داخل مربع مستدير الزوايا، بلون النص. بلا برتقالي، كي تبقى صفوف الأيقونات هادئة.
تعرض أدوات التحويل صيغة الناتج (مثل PNG) بخط صغير داخل الأيقونة.
يعرض الشرح فيديو قصيرًا للشاشة الحقيقية لكل خطوة: الحاسوب داخل إطار متصفح، والهاتف داخل إطار هاتف.
تُحاط منطقة اللمس بإطار برتقالي.
يستخدم نص كل خطوة كلمات الشاشة ويوضّح أين تضغط وماذا يحدث.

قبل النشر

تحقّق من هذه النقاط قبل نشر شاشة جديدة.

لا إعلانات ولا رفع للملفات ولا طلبات إلى خوادم خارجية
فُحصت على الحاسوب والهاتف، فاتحًا وداكنًا، باليابانية والإنجليزية والعربية، ولا تمرير جانبي عند 360 بكسل
زر رئيسي برتقالي واحد فقط في كل خطوة
المسافات بين العناصر وداخل المربعات من الدرجات المحددة، والمكوّنات هي المشتركة
تُسمّى الأزرار بإجرائها بلا علامات تعجّب ولا رموز تعبيرية، ونص الأخطاء أحمر ويقول ما يجب فعله
اللغات العشر مكتملة، وأسماء الأزرار تطابق الشروح
خطوات الشرح مفهومة من القراءة الأولى