كيفية إنشاء تخطيط للموقع وليس البقاء المدقع

أدناه ، سأقدم نظرة عامة موجزة على النقاط الإلزامية التي تحتاج إلى الانتباه إليها عند إنشاء تخطيط ويب لنقله إلى التصميم.

سوف يساعدونك:

• أعتقد أعمق التصميم الخاص بك
• تجنب الأسئلة غير الضرورية
• الحصول على نتيجة أفضل
• ابقَ أصدقاء مع مطور الواجهة الأمامية

شامل

1. يجب أن تنقل تخطيطات التسمية (الصفحات ، الإطارات - المطلوبة) بوضوح الجوهر والغرض وأن تكون مرتبطة بالصفحات المنطقية للموقع أو الكيانات الكبيرة الأخرى.
   (مثال: "home - tablet" ، "main - mobile" ، "buttons")
   [الشاشة سبيل المثال]
2. من الضروري مراقبة بنية المستند عند العمل مع الطبقات والمجموعات والمكونات والشاشات ، ومنحهم أسماء شاملة
   (مثال: الخلفية الرئيسية ، الإعدادات ، الزر ، تسجيل صفحة الجوال)
   (مثال غير صحيح: الإطار 1 ، المجموعة 45 ، iPhone XR)
   [الشاشة سبيل المثال]
3. إذا كنت بحاجة إلى إصدار للهاتف المحمول ، فيجب تطوير تصميم بعرض iPhone 320 بكسل لكل شاشة ، بالإضافة إلى أنه يمكنك إنشاء تخطيطات عالية الدقة.
   [الشاشة سبيل المثال]
4. يجب أن تكون الرموز (svg ، ...) قابلة للتنزيل وتفتح بشكل صحيح في المستعرض. يجب أن يتطابق حجم لوح الرسم svg مع المحتوى والتدفق. يمكنك جمع مجموعات الرموز على لوحات فنية فردية.
   [الشاشة سبيل المثال]

5. يجب تحميل الصور (المحتوى الرسومي). لديك قرار لا يقل عن 2X. تفريغ دون المعالجة المسبقة. (مثل: الحواف الدائرية ، الشفافية ، الظل). باستثناء الحالات التي تم فيها طلب مثل هذه المعالجة بشكل صريح.
   [الشاشة سبيل المثال]

   
   
   1. من الضروري مراعاة حجم منطقة المحتوى وحقيقة أن هذا الحجم يختلف من الدقة إلى الدقة. وبالتالي ، ينبغي التفكير في "نقطة التعلق".
   2. يجب تحميل صور المحتوى كصورة واحدة.
      (على سبيل المثال: لدينا كتلة مستطيلة مع [خلفية] ستتغير. وفقًا لذلك ، يجب إلغاء تحميل الصورة بالكامل مع الخلفية ، كما في المثال أعلاه).
   
   
6. يجب ألا تحتوي ألوان الخطوط على قناة ألفا (الشفافية) ، ما لم يتم استخدام الخط على خلفيات مختلفة (تدرجات أو صور) وبالتالي يجب أن يكون لهذا المنطق.
7. يجب توفير قائمة كاملة (zip.archive) من الخطوط المستخدمة في المشروع في المقام الأول (قبل بدء العمل في المقدمة).
8. لا يُضر أيضًا باختيار خط آمن (والذي يتوفر على جميع أنظمة تشغيل Windows و Mac و Linux وما إلى ذلك) ، على غرار الخط المخصص ، بحيث يمكن استبداله في حالة وجود خطأ في تحميل الخط المخصص
   (مثال: "Roboto" ، sans-serif)
9. إذا كنا نتعامل مع خط رمز مخصص ، فيجب التعامل مع الأيقونات وفقًا لذلك ، وهي: تحتاج إلى محاذاتها على طول الخطوط الأساسية بحيث لا تكون عدة أيقونات في الصف بأحجام مختلفة ومع مسافات بادئة مختلفة. أيضًا ، يجب الحفاظ على عدد الوجوه ، والسمك الأساسي للوجوه ، ومستوى التفاصيل من أيقونة إلى أيقونة ، وإلا فإنها ستبدو غير متجانسة ، كما لو كانت من مجموعات خطوط مختلفة.
10. في حالة عدم وجود متطلبات خاصة لمنطق السلوك ، يجب أن تحافظ الكتل في الدفق على تسلسل موقعها عند التكيف مع تلك القرارات التي تنعكس في المتطلبات.
11. يجب أن ينعكس المنطق في التصميم . على سبيل المثال ، هناك عدة بطاقات متطابقة ، يعرض كل منها كمية مختلفة من المحتوى ، وصور مختلفة ، وحالات مختلفة ، وما إلى ذلك ، بحيث يصبح من الممكن تتبع التبعية.
12. بالإضافة إلى التصميم ، وصف نصي لتشغيل العناصر هو موضع ترحيب.
13. حدد سلوك العناصر عند التدفق بالنص
    (على سبيل المثال ، قم بقص نص طويل مع علامة القطع في كتلة ، وما إلى ذلك)
14. اترك التعليقات والوصف (بأي طريقة) على العناصر والعناصر المتحركة التي لا يمكن تحديد سلوكها بشكل فريد إلا من خلال التصميم.
15. يجب أن تكون الصفحة 404 و 500 وشاشات قياسية أخرى موجودة.

يمكن رسم جميع العناصر المدرجة أدناه في الدليل والشبكات على صفحة الأنماط ، حيث سيتم هيكلة كل ذلك.

دليل ، واجهة المستخدم الرسومية ، واجهة المستخدم ، دليل نمط

1. يرد وصف وتخطيط الكتل المتصلة بوظيفة شائعة في قسم واحد من المستند.
   (على سبيل المثال ، جميع النوافذ المنبثقة لها خلفية بيضاء وزوايا مدورة 10 بكسل ، أزرار ...)
2. يجب وصف الطباعة ورسمها على لوحة فنية منفصلة.
   (مثال: كل عناوين المستوى الأول هي 24px بادئة أقل من 40px. جميع عناوين المستوى الثاني ... ، الفقرات ... ، إلخ)
3. يجب أن يتم رسم جميع الروابط والأزرار وخانات الاختيار والعناصر التفاعلية الأخرى في حالة فاعلة وسلبية. وبالمثل ، يجب أن يكون هناك حالات للهاتف الخلوي (أجهزة تعمل باللمس) - سلبية ، مضغوطة للحظة. الدول: (الرابط ، التحويم ، نشط ، التركيز ، زار ، تعطيل ، عملية).
   [خانة-مثال]
   [أزرار سبيل المثال]
4. يجب أن يتم رسم فتات الخبز في جميع الولايات (نشطة ، سابقة ، محظورة ، ...) مع مراعاة فواصل الأسطر.
5. يجب أن يظهر ترقيم الصفحات في جميع الولايات (في الخطوة الأولى والأخيرة والمتوسطة) وبعدد مختلف من الخطوات (1 ، كثيرة) ، مع مراعاة عدد كبير (3+ أحرف) من الأرقام.
6. المدخلات (حقول الإدخال) ، يجب رسم النماذج في جميع الحالات: افتراضيًا ، مع التركيز ، عند الضغط ، أو الإغلاق ، أو رسالة الخطأ ، أو رسالة التصحيح ، إلخ.
   [المدخلات ومثال]

7. الحد من عدد الألوان والظلال المستخدمة
   [مثال على مستوى اللون] .

   
   
   1. جميع الألوان المستخدمة يجب أن تكون دليل.
      (سيتم اعتبار أي لون جديد في المخطط خطأ وسيتم مساواته بأقرب دليل)
   2. يجب وصف الألوان الفريدة من حيث الوظيفة أو ربطها بالجوهر.
      (على سبيل المثال ، عنصر واجهة تعامل هالويين مع خلفية برتقالية واحدة: اللون البرتقالي هو لون أسهم هالويين)
   
   

شبكة

1. يجب أن تكون مسافات المسافة البادئة وأحجام العناصر متعددة بنفس القيمة.
   (2 بكسل ، 4 بكسل ، 8 بكسل ، 5 بكسل ...)
   [الشاشة سبيل المثال]
   [بعد سبيل المثال]
2. يجب وصف الشبكة (إن وجدت) وعدم مناقشتها
   تخطيطات. أحجام الأعمدة وكميتها وما إلى ذلك
3. ينبغي وصف أبعاد الحاوية على كل من المقدمة
   يسمح.
4. يجب وصف قيم نقاط التوقف .
5. يجب توحيد الحشو العمودي للكتل في التيار. (على غرار الطباعة)

رسائل ، بريد ، قوائم بريدية ، بريد

1. من الضروري جعل تصميم الرسالة بسيطًا قدر الإمكان . من المهم أن نفهم كيف يعمل التخطيط والعلامة <table> . يتم وضع الحروف على الجداول. (عرض: كتلة ، فليكس ، وضع مطلق - لا يمكن تطبيقها في الرسالة). التكيفية بسيطة بقدر الإمكان دون تغيير الكتل لمواقعها في الدفق. "المطاط" العادي المرغوب فيه ومجموعة واحدة من الأنماط
2. لا تستخدم الخطوط المخصصة في الرسالة

بالطبع ، إذا كنت ترسم "سال لعابه" ، إلخ. يمكنك أن تفعل ما تريد ، ولكن بالنسبة للمشروع الجاد ، فإن هذه العناصر ضرورية بنسبة 100٪.