يمكن لعارض المستندات أن يكون وظيفيًا من الناحية التقنية، لكنه لا يزال قد يشعر بأنه غير قابل للاستخدام على شاشة ضيقة. أشرطة الأدوات الكثيفة، الضوابط الصغيرة، اللوحات الجانبية الضخمة، والحاويات ذات الأبعاد الثابتة بسرعة تحول معاينة بسيطة إلى تجربة محبطة.
للتطبيقات المستندة إلى Windows باستخدام ASP.NET و .NET، يوفر Doconut مجموعة تطوير SDK مدمجة لعرض المستندات التجارية، ملفات PDF، رسومات CAD، ملفات البريد الإلكتروني، والصور. لا يزال تطبيقك يتحكم في التخطيط المحيط، المصادقة، التفويض، التخزين، وسير عمل المستند.
يركز هذا الدليل على تلك التجربة المحيطة: كيفية إعطاء العارض المدمج مساحة كافية، جعل ضوابط التطبيق مريحة للاستخدام، التعامل مع تغييرات الاتجاه، واختبار المستندات الواقعية دون الاعتماد على شفرة SDK غير الموثقة.
يبدأ التصميم الاستجابي خارج العارض
لا يمكن للعارض أن يستخدم سوى المساحة التي يوفرها التخطيط الأب له. إذا وضع التطبيق العارض داخل بطاقة ضيقة، أو أعطاه عرضًا ثابتًا لسطح المكتب، أو أحاطه بعدة لوحات ثابتة، فستظل مساحة المستند مكتظة.
ابدأ بثلاثة أسئلة:
- ما هي المهمة الأساسية في هذه الصفحة؟
- ما هي ضوابط التطبيق التي يجب أن تظل مرئية أثناء القراءة؟
- ما هي اللوحات الثانوية التي يمكن طيها أو إخفاؤها خلف زر؟
بالنسبة إلى صفحة مستند مخصصة، ينبغي عادةً أن يكون العارض هو العنصر السائد. يمكن أن تظل البيانات الوصفية، التعليقات، الموافقات، وإجراءات سير العمل متاحة دون أن تأخذ مساحة دائمة من المستند.
خطط التخطيط وفقًا للمساحة المتاحة
يجب أن يتبع سلوك الاستجابة المساحة المتاحة للمكوّن، وليس الافتراضات حول اسم جهاز معين.
تخطيط عريض
في مساحة عرض واسعة، قد تُظهر الصفحة ما يلي:
- مصغّر المستند أو لوحة التنقل
- قماش المستند الرئيسي
- لوحة سير عمل ثانوية للتعليقات أو البيانات الوصفية
- مجموعة كاملة من إجراءات التطبيق
عندما تتحول لوحة ثانوية إلى درج، أضف سلوك الحوار، إدارة التركيز، والوسم القابل للوصول المطلوبين من نظام التصميم الخاص بك.
اجعل ضوابط التطبيق صديقة للمس
يجب أن تكون الضوابط المحيطة بالعارض مريحة للتفعيل دون الحاجة إلى حركة مؤشر دقيقة.
إرشادات عملية تشمل:
- امنح الضوابط التفاعلية مساحة هدف تقريبية تبلغ 44 × 44 بكسل CSS.
- اترك مساحة كافية بين الإجراءات المدمرة وتلك المستخدمة بشكل متكرر.
- لا تعتمد على التحويم لإظهار المعلومات الأساسية.
- احرص على بقاء مؤشرات التركيز مرئية لمستخدمي لوحة المفاتيح.
- قدّم أسماء قابلة للوصول للأزرار التي تحتوي على أيقونات فقط.
- تجنب وضع الضوابط الحرجة بالقرب من مناطق إيماءات المتصفح أو النظام.
لا تقم بتجاوز الأنماط الداخلية لـ Doconut باستخدام محددات مُخمنة أو متغيرات CSS غير موثقة. استخدم الموارد الرسمية لإصدار SDK المثبت، وطبق قواعد الاستجابة على الحاويات والضوابط التي يملكها التطبيق.
اعتبر اللوحات الجانبية مساحة عمل اختيارية
تُعد المصغرات، نتائج البحث، التعليقات التوضيحية، البيانات الوصفية، وتاريخ سير العمل ذات قيمة، لكن لا ينبغي أن تتنافس جميعها مع المستند في آنٍ واحد.
في التخطيطات المدمجة:
- افتح لوحة جانبية فقط عندما يطلبها المستخدم.
- أعد التركيز إلى الزر الذي فتحها بعد الإغلاق.
- احجز التركيز داخل اللوحات النمطية حيثما كان ذلك مناسبًا.
- امنح اللوحة عنوانًا واضحًا وإجراء إغلاق.
- احفظ الموقع الحالي للمستند عند فتح أو إغلاق اللوحة.
إذا كان العارض يوفر لوحات خاصة به، اختبر سلوك الاستجابة الموثق لتلك اللوحات قبل إضافة نظام تنقل على مستوى التطبيق حولها.
حافظ على سرعة مساحة عمل المستند
ليس التصميم الاستجابي بصريًا فقط. يمكن للمستندات الكبيرة أن تكشف عن قيود الذاكرة وعرض النطاق الترددي وعرض الرسومات، خاصةً عندما تحتوي الصفحة أيضًا على لوحات معلومات معقدة أو رسومات متحركة.
تقليل العمل المتنافس
أوقف الرسوم المتحركة الزخرفية أثناء قراءة المستخدم، وتجنب التأثيرات المكلفة حول العارض، وأزل المراقبين أو مستمعي الأحداث غير الضروريين.
حجز مساحة التخطيط
امنح حاوية العارض ارتفاعًا ثابتًا قبل التحميل. يمنع ذلك التحولات الكبيرة في التخطيط ويقلل من احتمال نقر المستخدم للضابط الخطأ.
تحميل الميزات الثانوية عن قصد
لا تحتاج التعليقات، سجل التدقيق، ولوحات البيانات الوصفية الكبيرة إلى التحميل مع الصفحة الأولى للمستند دائمًا. أجرِ تأجيلها حتى يفتح المستخدم اللوحة ذات الصلة عندما يتماشى ذلك مع سير العمل الخاص بك.
اختبار ملفات تمثيلية
استخدم ملفات PDF طويلة، جداول بيانات عريضة، رسومات CAD مفصلة، صورًا كبيرة، ومستندات بخطوط غير مألوفة. لا يمكن لملف عينة صغير أن يكشف عن حدود تجربة الإنتاج.
حافظ على التحكم في الوصول على الخادم
لا يغيّر العرض الاستجابي من مسؤوليات الأمان الخاصة بالتطبيق. يجب أن يمر كل طلب مستند عبر المصادقة وتفويض المستند المحدد.
في تطبيقات ASP.NET Core، يمكن للآليات القياسية مثل middleware المصادقة، السياسات، المطالبات، السمة [Authorize]، والتفويض القائم على الموارد أن تحمي مسار الخادم الذي يُعيد المستند.
يجب على التطبيق أن:
- يستخدم معرّفات المستند التي يولدها الخادم.
- يتحقق من أن المستخدم الحالي يمكنه الوصول إلى المستند المطلوب.
- يبقي بيانات اعتماد التخزين والمسارات غير المقيدة بعيدًا عن العميل.
- ينقّح الأخطاء المعروضة في صفحة العارض.
- يطبق قواعد احتفاظ صريحة للملفات الأصلية والملفات المؤقتة.
- يتجنب تسجيل محتوى المستند أو الأسرار أو عناوين URL الحساسة.
إخفاء إجراءات التنزيل أو الطباعة أو القائمة السياقية قد يدعم سير العمل المقصود، لكنه لا يحل محل التفويض على جانب الخادم ولا يمكنه منع كل أشكال الالتقاط بعد أن يصبح المحتوى مرئيًا.
دمج Doconut في التجربة الاستجابية
توفر Doconut طبقة عرض المستندات المدمجة، بينما يوفر التطبيق القشرة الاستجابية وسير العمل التجاري.
تسلسل تنفيذ معقول هو:
- تأكد من الصيغ المطلوبة وميزات العارض.
- دمج حزمة Doconut المدعومة لتطبيق .NET الخاص بك.
- حماية حل المستند باستخدام التفويض على جانب الخادم.
- ضع العارض في حاوية مضيفة سائلة مملوكة للتطبيق.
- صمم حالات مدمجة لأشرطة أدوات التطبيق واللوحات الثانوية.
- اختبر سلوك إعادة التحجيم، والاتجاه، والتركيز، والتحميل، والأخطاء.
- تحقق من النتيجة باستخدام مستندات مشابهة للإنتاج وجلسات متزامنة.
اطلع على صفحة منتج عارض Doconut للتحقق من معلومات المنتج الحالية. استخدم صفحة التحميل الرسمية والوثائق للحصول على تعليمات تثبيت وتكامل مخصصة للإصدار بدلاً من نسخ أمثلة SDK غير موثقة من مشاركات الطرف الثالث.
قائمة مراجعة عارض استجابي
التخطيط
- يحصل العارض على أكبر حصة مفيدة من الصفحة.
- لا تُجبر العروض الثابتة على التمرير الأفقي.
- تنطوي اللوحات الثانوية بنظافة.
- يبقى التخطيط قابلًا للاستخدام عندما يكون ارتفاع العرض محدودًا.
- تحجز حالات التحميل والخطأ مساحة مناسبة.
التفاعل
- ضوابط التطبيق لها أحجام هدف مريحة.
- لا تعتمد الإجراءات الأساسية على التحويم.
- الضوابط التي تحتوي على أيقونات فقط لها أسماء قابلة للوصول.
- يبقى التركيز مرئيًا ويتبع ترتيبًا منطقيًا.
- تُعيد الأدراج والحوار التركيز بشكل صحيح.
المستندات
- تظل ملفات PDF الكبيرة قابلة للتنقل.
- يمكن فحص جداول البيانات العريضة دون كسر تخطيط الصفحة.
- تحافظ الرسومات المفصلة على مساحة تكبير وتحريك قابلة للاستخدام.
- لا تتجاوز أسماء الملفات الطويلة ورسائل الأخطاء الحد.
- تغيير حجم التخطيط لا يعيد تشغيل المستند دون ضرورة.
الأمان والعمليات
- الخادم يفوض كل طلب مستند.
- تفاصيل التخزين تظل خاصة.
- توثيق احتفاظ الملفات والبيانات المؤقتة.
- الأخطاء والسجلات تستثني المعلومات الحساسة.
- تم اختبار حدود الموارد وسلوك الجلسات المتزامنة.
أسئلة شائعة
هل يجب على التطبيق الحفاظ على صفحات عارض منفصلة للهواتف وأجهزة الكمبيوتر المكتبية؟
عادةً لا. صفحة استجابية واحدة أسهل في الصيانة. غيّر التخطيط وفقًا للمساحة المتاحة وكشف الضوابط الثانوية تدريجيًا.
هل يمكن للتطبيق تجاوز CSS الداخلي للعارض؟
تجنب المحددات والمتغيرات غير الموثقة. صمم حاوية المضيف وضوابط تطبيقك الخاصة. استخدم فقط نقاط التخصيص الموثقة لإصدار Doconut الذي تنشره.
هل يجب إخفاء أزرار التنزيل والطباعة في التخطيطات المدمجة؟
هذا قرار منتج وليس حدًا أمنيًا. إذا كان الإجراء مسموحًا به لكنه لا يتناسب، ضعّه في قائمة فائض قابلة للوصول. إذا لم يكن مسموحًا به، فطبق تلك السياسة على الخادم.
كيف يجب اختبار المستندات الكبيرة؟
أنشئ مجموعة اختبار منقاة تعكس عدد الصفحات الفعلي، أحجام الملفات، الخطوط، الرسومات، وجداول البيانات. كرّر المجموعة بعد تغييرات SDK أو .NET أو Windows Server أو التخطيط.
الخلاصة
تبدأ تجربة المستند المتنقلة القوية بحاوية سائلة، وتخطيط يضع المستند في المقام الأول، وضوابط مريحة، ولوحات جانبية اختيارية، وسلوك إعادة تحجيم متوقع، وتفويض على جانب الخادم.
يمكن لـ Doconut توفير قدرة العرض داخل تطبيق .NET المستند إلى Windows الخاص بك. يمكن لفريقك بعد ذلك التركيز على القشرة الاستجابية للتطبيق، وقواعد الأمان، وسير العمل الذي يجعل العارض يشعر كجزء طبيعي من المنتج.