מציג מסמכים יכול להיות פונקציונלי מבחינה טכנית ועדיין להרגיש בלתי שמיש על מסך צר. סרגלי כלים צפופים, פקדים קטנים, פאנלים צד גדולים ומכולות עם ממדים קבועים יכולים להפוך תצוגה פשוטה לתסכול מהיר.
ליישומי ASP.NET ו‑.NET על Windows, Doconut מספק ערכת פיתוח משולבת לצפייה במסמכי עסקים, קבצי PDF, שרטוטי CAD, קבצי דוא"ל ותמונות. היישום שלכם עדיין שולט בפריסת הממשק, באימות, בהרשאות, באחסון ובזרימת העבודה של המסמכים.
המדריך הזה מתמקד בחוויית המשתמש סביב הצופה המשולב: איך לתת לצופה מקום מספיק, להפוך פקדי היישום לנוחים לשימוש, להתמודד עם שינויי כיוון, ולבדוק מסמכים מציאותיים מבלי להסתמך על קוד SDK לא מאומת.
העיצוב הרספונסיבי מתחיל מחוץ לצופה
הצופה יכול להשתמש רק במרחב שהפריסה של ההורה שלו מספקת. אם היישום ממקם אותו בכרטיס צר, נותן לו רוחב קבוע של שולחן עבודה, או מקיף אותו במספר פאנלים קבועים, אז אזור המסמך יישאר צפוף.
התחילו עם שלוש שאלות:
- מה המשימה העיקרית בעמוד הזה?
- אילו פקדי יישום חייבים להישאר גלויים בזמן הקריאה?
- אילו פאנלים משניים ניתן לקפל או להעביר מאחורי כפתור?
בעמוד מסמך ייעודי, הצופה צריך בדרך כלל להיות האלמנט הדומיננטי. מטא‑נתונים, תגובות, אישורים ופעולות זרימת עבודה יכולים להישאר זמינים מבלי לתפוס מקום קבוע מהמסמך.
תכננו את הפריסה לפי המרחב הזמין
התנהגות רספונסיבית צריכה לעקוב אחרי המרחב הזמין לרכיב, ולא אחרי הנחות לגבי שם מכשיר מסוים.
פריסה רחבה
במסך רחב, העמוד עשוי להציג:
- תצוגת תמונה ממוזערת של המסמך או פאנל ניווט
- קנבס המסמך הראשי
- פאנל זרימת עבודה משני לתגובות או למטא‑נתונים
- סט מלא של פעולות יישום
כאשר פאנל משני הופך למגירה, הוסיפו את התנהגות הדיאלוג, ניהול הפוקוס והתיוג הנגיש הנדרשים על ידי מערכת העיצוב שלכם.
הפכו פקדי היישום לידידותיים למגע
פקדים סביב הצופה צריכים להיות נוחים להפעלה ללא צורך בתנועת מצביע מדויקת.
הנחיות מעשיות כוללות:
- תנו לפקדים אינטראקטיביים אזור מטרה של בערך 44 על 44 פיקסלים CSS.
- השאירו מרווח מספיק בין פעולות הרסניות לשימוש תדיר.
- אל תסתמכו על ריחוף (hover) לחשיפת מידע חיוני.
- שמרו על מצייני פוקוס גלויים למשתמשי מקלדת.
- ספקו שמות נגישים לכפתורים שמכילים רק אייקון.
- הימנעו ממיקום פקדים קריטיים קרוב לאזורי מחוות של הדפדפן או המערכת.
אל תעקפו את הסגנונות הפנימיים של Doconut עם בוררים משוערים או משתני CSS לא מתועדים. השתמשו במשאבים הרשמיים לגרסת ה‑SDK המותקנת, והחילו את חוקי הרספונסיביות על המכולות והפקדים שבבעלות היישום.
התייחסו לפאנלים צדיים כמרחב עבודה אופציונלי
תמונות ממוזערות, תוצאות חיפוש, הערות, מטא‑נתונים והיסטוריית זרימת עבודה הם בעלי ערך, אך הם לא צריכים להתחרות עם המסמך בו‑זמנית.
בפריסות קומפקטיות:
- פתחו פאנל צד רק כאשר המשתמש מבקש זאת.
- החזירו את הפוקוס לכפתור שפתח אותו לאחר הסגירה.
- לכדו פוקוס בתוך פאנלים מודאליים במידת הצורך.
- תנו לפאנל כותרת ברורה ופעולת סגירה.
- שמרו על המיקום הנוכחי של המסמך כאשר הפאנל נפתח או נסגר.
אם הצופה מספק פאנלים משלו, בדקו את ההתנהגות הרספונסיבית המתועדת לפני שמוסיפים מערכת ניווט ברמת היישום סביבם.
שמרו על מרחב העבודה של המסמך מהיר
העיצוב הרספונסיבי אינו רק חזותי. מסמכים גדולים יכולים לחשוף מגבלות זיכרון, רוחב פס והצגה, במיוחד כאשר העמוד מכיל גם לוחות מחוונים מורכבים או אנימציות.
צמצום עבודה מתחרה
הפסיקו אנימציות קישוטיות בזמן שהמשתמש קורא, הימנעו מאפקטים יקרים סביב הצופה והסירו צופים או מאזיני אירועים מיותרים.
שמירת מרחב פריסה
תנו למארח הצופה גובה יציב לפני שהוא נטען. זה מונע שינויי פריסה גדולים ומקטין את הסיכון של לחיצה על פקד שגוי.
טעינת תכונות משניות בכוונה
תגובות, היסטוריית ביקורת ופאנלים גדולים של מטא‑נתונים אינם חייבים לטעון יחד עם דף המסמך הראשון. דחו אותם עד שהמשתמש פותח את הפאנל הרלוונטי, בהתאם לזרימת העבודה שלכם.
בדיקת קבצים מייצגים
השתמשו בקבצי PDF ארוכים, גיליונות אלקטרוניים רחבים, שרטוטי CAD מפורטים, תמונות גדולות ומסמכים עם גופנים בלתי רגילים. קובץ דוגמה קטן אינו מגלה את גבולות חוויית הייצור.
שמרו על בקרת גישה בשרת
הצגה רספונסיבית אינה משנה את האחריות הביטחונית של היישום. כל בקשת מסמך עדיין צריכה לעבור אימות והרשאה ספציפית למסמך.
ביישומי ASP.NET Core, מנגנונים סטנדרטיים כגון middleware לאימות, מדיניות, תביעות, המאפיין [Authorize] והרשאה מבוססת משאבים יכולים להגן על נתיב השרת שמחזיר את המסמך.
היישום צריך:
- להשתמש במזהי מסמכים שנוצרו בשרת.
- לאמת שהמשתמש הנוכחי יכול לגשת למסמך המבוקש.
- להרחיק פרטי גישה לאחסון ונתיבים בלתי מוגבלים מהלקוח.
- לטהר שגיאות שמוצגות בדף הצופה.
- להחיל כללי שמירת קבצים מפורשים על קבצים מקוריים וזמניים.
- להימנע מתיעוד תוכן המסמך, סודות או כתובות URL גישה רגישות.
הסתרת פעולות הורדה, הדפסה או תפריט הקשר עשויה לתמוך בזרימת העבודה הרצויה, אך היא לא מחליפה הרשאות צד‑שרת ואינה יכולה למנוע כל צורת לכידה לאחר שהתוכן נחשף.
אינטגרציית Doconut בחווייה הרספונסיבית
Doconut מספק את שכבת הצפייה המשולבת, בעוד שהיישום מספק את המעטפת הרספונסיבית וזרימת העבודה העסקית.
רצף יישום מומלץ הוא:
- אשרו את הפורמטים והתכונות הנדרשות של הצופה.
- שלבו את חבילת Doconut הנתמכת עבור היישום .NET שלכם.
- הגנו על רזולוציית המסמך באמצעות הרשאות צד‑שרת.
- מקמו את הצופה במכולת מארח נוזלית שבבעלות היישום.
- עצבו מצבי קומפקט עבור סרגלי כלי היישום ופאנלים משניים.
- בדקו שינויי גודל, כיוון, פוקוס, טעינה והתנהגות שגיאות.
- אמתו את התוצאה עם מסמכי ייצור ועם סשנים מקבילים.
עיינו בדף מוצר של Doconut Viewer למידע עדכני על המוצר. השתמשו בדף ההורדה והדוקומנטציה הרשמי להתקנה והוראות אינטגרציה ספציפיות לגרסה, במקום להעתיק דוגמאות SDK לא מתועדות מפוסטים של צד שלישי.
רשימת בדיקה לצופה רספונסיבי
פריסה
- הצופה מקבל את החלק הגדול והיעיל ביותר של העמוד.
- רוחבים קבועים אינם מאלצים גלילה אופקית.
- פאנלים משניים קופצים בצורה חלקה.
- הפריסה נשארת שמישה כאשר גובה המסך מוגבל.
- מצבי טעינה ושגיאה משאירים מרחב מתאים.
אינטראקציה
- פקדי היישום בעלי גדלי מטרה נוחים.
- פעולות חיוניות אינן תלויות בריחוף.
- פקדים עם אייקון בלבד כוללים שמות נגישים.
- הפוקוס נשאר גלוי ועוקב אחרי סדר לוגי.
- מגירות ודיאלוגים מחזירים פוקוס כראוי.
מסמכים
- קבצי PDF גדולים נשארים ניתנים לניווט.
- גיליונות אלקטרוניים רחבים ניתנים לבחינה ללא שבירת הפריסה.
- שרטוטים מפורטים שומרים על מרחב זום ופאן שמיש.
- שמות קבצים ארוכים והודעות שגיאה אינם חורגים.
- שינוי גודל הפריסה אינו מאפס את המסמך ללא צורך.
אבטחה ותפעול
- השרת מאשר כל בקשת מסמך.
- פרטי האחסון נשארים פרטיים.
- שמירת קבצים ונתונים זמניים מתועדת.
- שגיאות ולוגים אינם כוללים מידע רגיש.
- מגבלות משאבים והתנהגות סשנים מקבילים נבדקו.
שאלות נפוצות
האם היישום צריך לשמור על דפי צופה נפרדים לטלפונים ולמחשבים שולחניים?
בדרך כלל, לא. דף רספונסיבי יחיד הוא קל יותר לתחזוקה. שינוי הפריסה בהתאם למרחב הזמין והצגת פקדים משניים באופן מדורג.
האם היישום יכול לעקוף את ה‑CSS הפנימי של הצופה?
הימנעו מבוררים ומשתנים לא מתועדים. עיצובו את מכולת המארח ואת פקדי היישום שלכם. השתמשו רק בנקודות ההתאמה המתועדות עבור גרסת Doconut שבה אתם משתמשים.
האם יש להסתיר כפתורי הורדה והדפסה בפריסות קומפקטיות?
זו החלטת מוצר ולא גבול אבטחה. אם פעולה מותרת אך אינה מתאימה למרחב, הציבו אותה בתפריט גלישה נגיש. אם היא לא מותרת, אכפו את המדיניות בצד השרת.
איך לבדוק מסמכים גדולים?
בנו אוסף בדיקות מנוקה המשקף ספירת עמודים, גדלי קבצים, גופנים, שרטוטים וגיליונות אלקטרוניים אמיתיים. חזרו על הסדרה לאחר עדכוני SDK, .NET, Windows Server או שינויי פריסה.
סיכום
חוויית מסמך מובייל חזקה מתחילה במכולת נוזלית, בפריסה שממקדת את המסמך, בפקדים נוחים, בפאנלים צדיים אופציונליים, בהתנהגות שינוי גודל צפויה ובאימות צד‑שרת.
Doconut יכול לספק את יכולת הצפייה בתוך היישום Windows‑based .NET שלכם. הצוות שלכם יכול לאחר מכן להתמקד במעטפת הרספונסיבית, כללי האבטחה וזרימת העבודה שהופכים את הצופה לחלק טבעי של המוצר.