گالری باید به کاربر کمک کند مجموعه را مرور کند و به تصویر مورد نیاز برسد. برای محصول، این نیاز ممکن است دیدن جزئیات اتصال یا رنگ باشد؛ برای پورتفولیو، شناخت خروجی یک پروژه. انتخاب Grid یا Lightbox پیش از تعیین این کار، احتمال نمایش زیبا اما کم‌فایده را بالا می‌برد. ابتدا فهرست کنید هر تصویر چه اطلاعاتی دارد، ترتیب منطقی مجموعه چیست و بازدیدکننده پس از دیدن آن چه تصمیمی می‌گیرد.
Lightbox نمایش بزرگ‌تر محتوا در یک لایه روی صفحه است. این لایه وقتی مفید است که تصویر جزئیاتی داشته باشد که در Thumbnail دیده نمی‌شود و کاربر بخواهد بدون گم کردن زمینه صفحه آن را بررسی کند. باز شدن خودکار، حرکت طولانی و کنترل‌های نامعلوم این مزیت را کم می‌کنند. گالری به Lightbox اجباری نیاز ندارد؛ گاهی تصویر بزرگ در همان صفحه، صفحه جزئیات مستقل یا لینک به نسخه اصلی پاسخ ساده‌تری به نیاز می‌دهد.
مجموعه را پیش از چیدمان آماده کنید
تصاویر تکراری را از زوایای واقعاً متفاوت جدا کنید. در مثال فرضی یک صندلی، نمای کامل، پایه، اتصال و اندازه هر کدام کار مشخصی دارند. چند عکس مشابه با تغییر اندک نور ممکن است فقط تعداد آیتم‌ها را زیاد کند. برای هر تصویر، عنوان کوتاه و نقش آن را ثبت کنید. این کار به ترتیب، متن جایگزین و انتخاب Thumbnail کمک می‌کند. تصویری که به سؤال خریدار جواب نمی‌دهد نباید فقط برای پر کردن ردیف اضافه شود.
نسبت ابعاد و برش را با موضوع هماهنگ کنید. Thumbnail مربعی شاید نظم ایجاد کند، اما برش آن نباید قسمت مهم محصول را حذف کند. نمایش نسخه کامل پس از انتخاب باید قابل پیش‌بینی باشد. اگر عکس مقیاس یا رنگ دقیق را نشان نمی‌دهد، توضیح مربوط را نزدیک مجموعه بنویسید. پردازش تصویر نباید ویژگی محصول را تغییر دهد و در پورتفولیو هم Mockup باید از خروجی واقعی قابل تشخیص باشد. ظاهر منسجم، جای صحت محتوا را نمی‌گیرد.
الگوی مرور را با محتوا انتخاب کنید
Grid یکنواخت برای آیتم‌هایی با اهمیت مشابه و Thumbnailهای هم‌اندازه خواناست. مقایسه چند گزینه در یک نگاه آسان‌تر می‌شود و ترتیب بصری با ترتیب محتوا هماهنگ می‌ماند. Masonry برای نسبت‌های متفاوت فضای خالی را کاهش می‌دهد، اما مسیر خواندن و محل آیتم بعدی ممکن است مبهم شود. اگر ترتیب زمانی یا مراحل پروژه مهم است، فقط به فشردگی چیدمان توجه نکنید. کاربر باید بتواند همان ترتیب را با صفحه‌کلید و ابزار کمکی هم دنبال کند.
Justified Grid ارتفاع ردیف را هماهنگ می‌کند و عرض تصاویر متفاوت می‌شود. این الگو برای مجموعه عکس با نسبت‌های متنوع قابل بررسی است، اما Thumbnail خیلی باریک ممکن است جزئیات را از بین ببرد. Carousel نیز مجموعه را در فضای محدود نشان می‌دهد و آیتم‌های بیرون قاب کمتر قابل کشف می‌شوند. مقاله طراحی Carousel درباره کنترل و محدودیت این الگو توضیح دارد. نام الگو به تنهایی تصمیم نمی‌سازد؛ تعداد، ترتیب و هدف مجموعه تعیین‌کننده‌اند.
گالری پروژه با گالری محصول تفاوت دارد. در پروژه، دسته‌بندی بر اساس نقش یا نوع کار ممکن است به انتخاب کمک کند؛ در محصول، تصویر مرتبط با گونه انتخاب‌شده باید مشخص باشد. فیلترهای متعدد برای مجموعه کوچک بار اضافه دارند. اگر فیلتر دارید، وضعیت انتخاب و تعداد نتایج را روشن کنید و حالت بدون نتیجه مسیر بازگشت داشته باشد. کاربر نباید پس از تغییر فیلتر با صفحه خالی روبه‌رو شود و نفهمد محتوا حذف شده یا انتخاب او نتیجه‌ای ندارد.
Thumbnail باید معنی انتخاب را منتقل کند
ظاهر Thumbnail باید نشان دهد که تعاملی است و انتخاب آن چه نتیجه‌ای دارد. اگر کلیک نسخه بزرگ‌تر را باز می‌کند، نام قابل فهم مثل «نمایش جزئیات پایه» از نام فایل بهتر است. در مجموعه طولانی، عنوان یا دسته می‌تواند مرور را سریع‌تر کند. وضعیت انتخاب‌شده را فقط با تغییر اندک رنگ مشخص نکنید؛ مرز، نشانه یا متن می‌تواند کمک کند. تعداد آیتم‌های نمایان نباید با شمارنده‌ای که تصاویر مخفی را نادیده می‌گیرد اشتباه شود.
در موبایل، فاصله و اندازه کنترل را طوری انتخاب کنید که انتخاب یک تصویر به انتخاب همسایه منجر نشود. کنترل باز کردن نباید فقط هنگام Hover ظاهر شود. کاربری که با صفحه‌کلید می‌گردد باید Focus واضح ببیند و نام هر آیتم را بفهمد. اگر همه Thumbnailها یک نام تکراری دارند، کشف تصویر خاص دشوار می‌شود. مقاله Color Contrast برای بررسی نشانه انتخاب و کنترل‌ها مفید است؛ عکس رنگارنگ پشت کنترل نباید خوانایی آن را نامطمئن کند.
Lightbox را مانند یک Dialog کامل طراحی کنید
برای نمایش Modal، رفتار Focus و زمینه صفحه باید مشخص باشد. الگوی Dialog در W3C انتقال Focus به داخل، محدود شدن حرکت Tab در لایه، بستن با Escape و بازگشت منطقی Focus پس از بسته شدن را توضیح می‌دهد. صرف تیره کردن زمینه، این رفتارها را ایجاد نمی‌کند. دکمه بستن باید قابل مشاهده و دارای نام باشد؛ آیکون بی‌برچسب در گوشه نامعلوم، راه خروج قابل اتکایی برای همه کاربران نیست.
اگر از عنصر native dialog استفاده می‌کنید، مستندات MDN تفاوت نمایش Modal با showModal و نمایش غیرModal را توضیح می‌دهد. هنوز باید عنوان، محتوای مناسب و کنترل‌های روشن داشته باشید. استفاده از یک کتابخانه هم به معنی حل خودکار همه حالت‌ها نیست. رفتار مورد نیاز را با مسئول فنی مرور کنید: باز شدن از Thumbnail، تعویض تصویر، بستن و بازگشت به همان موقعیت گالری باید یک مسیر منسجم بسازند.
Click روی زمینه می‌تواند راه اضافی بستن باشد، اما نباید تنها راه باشد. اگر کاربر در حال Zoom یا انتخاب متن Caption است، رفتار کلیک باید غافلگیرکننده نباشد. پس از بسته شدن، موقعیت Scroll صفحه اصلی حفظ شود. باز کردن Lightbox نباید کاربر را به بالای صفحه ببرد یا هنگام خروج ترتیب تصاویر را تغییر دهد. برای مجموعه‌ای که مرتب به‌روزرسانی می‌شود، شناسه تصویر از شماره موقت آن پایدارتر است و در بازگشت به آیتم درست کمک می‌کند.
ناوبری و Zoom را قابل کنترل نگه دارید
دکمه قبلی و بعدی باید برچسب روشن داشته باشد. در صفحه RTL، جهت آیکون و مفهوم قبلی و بعدی را با ترتیب مجموعه هماهنگ کنید؛ کپی بی‌بررسی یک رابط چپ‌به‌راست ممکن است رابطه را وارونه کند. شمارنده «تصویر ۲ از ۸» زمینه می‌دهد، اما عنوان محتوایی هم لازم است. رفتار انتهای مجموعه را مشخص کنید: توقف یا برگشت به آغاز. این تصمیم نباید با یک کلیک به پرش نامعلوم میان تصاویر منجر شود.
Gesture مثل Swipe و Pinch راه تکمیلی است. برای کسی که قادر به آن حرکت نیست، کنترل معادل فراهم کنید. Zoom باید امکان بازگشت به اندازه مناسب صفحه را داشته باشد و کاربر را داخل تصویر گیر نیندازد. بزرگ‌نمایی فایل کوچک جزئیات تازه نمی‌سازد؛ اگر تصویر منبع محدود است، رابط نباید وعده نمایش جزئیات دقیق بدهد. Caption و کنترل‌ها هنگام Zoom قابل دسترس بمانند و به دلیل خروج از قاب، راه بستن یا تغییر تصویر از دست نرود.
توضیح تصویر و بارگذاری را با هم ببینید
راهنمای تصاویر W3C انتخاب متن جایگزین را به نقش تصویر مرتبط می‌کند. برای تصویر اطلاعاتی، محتوای مرتبط توصیف شود؛ برای Thumbnail عملکردی، مقصد یا عمل اهمیت دارد. Caption می‌تواند زمینه بیشتری بدهد و نباید بدون فکر همان متن Alt را تکرار کند. اطلاعاتی مثل نام پروژه، زاویه محصول و محدودیت نمایش رنگ برای مخاطب مفید هستند. نام فایل یا عبارت «تصویر زیبا» چیزی درباره محتوای واقعی نمی‌گوید.
Thumbnail و نسخه بزرگ لازم نیست فایل یکسان داشته باشند. بارگذاری نسخه حجیم همه تصاویر از ابتدا هزینه شبکه را بالا می‌برد. اندازه فضای آیتم را پیش از دریافت محتوا مشخص کنید تا چیدمان جابه‌جا نشود. برای شکست بارگذاری، پیام و امکان تلاش دوباره فراهم باشد؛ یک قاب خالی بی‌توضیح کافی نیست. نسخه بعدی را می‌توان با توجه به مسیر مرور آماده کرد، اما دانلود بی‌حد کل مجموعه روی اتصال محدود تصمیم مناسبی برای همه کاربران نیست.
گالری را با سناریوی مشخص تحویل دهید
سناریوی تحویل را با یک نیاز واقعی بنویسید: پیدا کردن تصویر اتصال، بزرگ کردن، دیدن Caption و برگشت به محصول. تعداد Thumbnailهای دیده‌شده یا کلیک Lightbox به تنهایی موفقیت نیست؛ کاربر باید اطلاعات مورد نیاز را پیدا کند. مقاله پورتفولیو طراحان برای ارتباط گالری با مطالعه موردی مفید است. مسئول محتوا باید بداند افزودن تصویر تازه به چه عنوان، ترتیب و توضیحی نیاز دارد تا مجموعه پس از تحویل هم قابل مرور بماند.
هنوز دیدگاهی ثبت نشده
اولین نفری باشید که نظر می‌دهد!