بخش چهارم: طراحی ریسپانسیو دیجی کالا با المنتور

سلام! خوش اومدید به جلسه تکمیلی طراحی سایت دیجی‌کالا با استفاده از المنتور و قالب وردپرس اهورا. اگه تا حالا طراحی نسخه دسکتاپ سایت دیجی‌کالا رو با المنتور و قالب وردپرس اهورا انجام دادی، تو این مرحله وقتشه بریم سراغ بخش هیجان‌انگیز و خیلی مهم ماجرا یعنی ریسپانسیو کردن سایت!

تو این جلسه تکمیلی، قراره با هم یاد بگیریم که چطور کاری کنیم صفحه‌ی اصلی سایتمون روی موبایل و تبلت هم به بهترین شکل نمایش داده بشه. چون بیشتر کاربران با گوشی میان سراغ سایت‌مون، پس این بخش حسابی اهمیت داره! قدم‌به‌قدم با هم جلو می‌ریم، نکات کلیدی رو بررسی می‌کنیم و یاد می‌گیریم چطور نسخه موبایل سایت دیجی‌کالا رو دقیقاً همون‌طور که باید باشه طراحی کنیم.

ریسپانسیو صفحه اصلی سایت دیجی‌کالا با المنتور

خب حالا که طراحی نسخه دسکتاپ صفحه‌ی اصلی سایت‌مون تموم شده، وقتشه وارد مرحله بعد بشیم، تنظیم ظاهر سایت برای موبایل. برای این کار، اول از همه باید صفحه اصلی رو با المنتور باز کنیم.

بعد از اینکه وارد ویرایشگر المنتور شدیم، از پایین صفحه روی آیکن «ریسپانسیو» کلیک می‌کنیم (همون آیکنی که شبیه مانیتوره) و گزینه‌ی موبایل رو انتخاب می‌کنیم. با این کار، نمای صفحه به شکل نسخه موبایلی درمیاد و می‌تونیم ببینیم کاربرهایی که با گوشی وارد سایت می‌شن، چه چیزی رو می‌بینن.

حالا نوبت اونجاست که طبق طراحی صفحه اصلی دیجی‌کالا، بیایم بخش‌های مختلف رو ویرایش کنیم. مثلاً ممکنه بعضی از نوشته‌ها توی گوشی زیادی بزرگ باشن، یا فاصله‌ها بهم ریخته باشه. کاری که باید بکنیم اینه که یکی‌یکی همه‌ی بخش‌ها رو بررسی کنیم و تنظیماتش رو فقط برای نسخه موبایل درست کنیم، طوری که همه چیز مرتب، خوانا و کاربرپسند باشه.

شروع تنظیمات ریسپانسیو

وقتی وارد حالت موبایل توی المنتور شدی، اولین بخشی که احتمالاً توجهت رو جلب می‌کنه، همون استوری ابتدای صفحه‌ست. همون بخشی که توی دیجی‌کالا روی موبایل نمایش داده نمی‌شه.

اما توی طراحی ما قرار نیست این بخش رو حذف کنیم یا کاری بهش داشته باشیم. فقط کافیه از قسمت تنظیمات سکشن (همون آیکن ۶ نقطه‌ای بالای هر بخش)، بیای و یه مقدار فاصله‌ی داخلی یا Padding از بالا بهش بدی. مثلاً ۱۰ تا ۲۰ پیکسل معمولاً خوبه، ولی حتماً خودت توی پیش‌نمایش چک کن که فضا متناسب باشه.

این کار باعث می‌شه صفحه‌ی موبایل، مرتب‌تر دیده بشه و استارت سایت از بالا خیلی چسبیده به مرورگر نباشه. از اینجا به بعد، ریسپانسیو کردن اصلی شروع می‌شه!

نمایش نتیجه‌ی نمایش

اگه دقت کرده باشی، وقتی داری صفحه رو توی حالت ویرایش المنتور نگاه می‌کنی، بالا یه نوار سیاه‌رنگ می‌بینی که مربوط به مدیریت وردپرسه. این نوار فقط وقتی دیده می‌شه که وارد پیشخوان وردپرس شدی و کاربرهای عادی سایت اون رو نمی‌بینن.

برای همین خیلی مهمه که پیش‌نمایش سایت رو توی حالت Incognito یا همون مرورگر ناشناس باز کنی تا شکل واقعی نمایش سایت روی گوشی رو ببینی.

چون توی المنتور ما اون نوار رو داریم، ممکنه جای بعضی از بخش‌ها اشتباه بیفته. مثلاً ممکنه فکر کنی فضای خالی بالا هست، ولی در واقع اون فضا مربوط به نوار ادمینه، نه طراحی سایت.

از طرفی، چون هدر سایت ما ثابته (یعنی وقتی اسکرول می‌کنی سر جاش می‌مونه)، باید حتماً برای سکشن اول سایت یه فاصله از بالا در نظر بگیریم تا محتوا نره زیر هدر قایم بشه. من خودم معمولاً حدود ۵۰ پیکسل فاصله بالا (یا همون Padding-Top) بهش می‌دم، ولی تو می‌تونی با عددای مختلف تست بزنی و ببینی کدوم اندازه برای طراحی خودت بهتر جواب می‌ده.

یادت باشه این تنظیم فقط برای نسخه موبایله(آیکن موبایل کنارش مشخصه)، پس حواست باشه که توی تب «Mobile» توی تنظیمات سکشن این تغییر رو بدی، نه روی همهٔ دستگاه‌ها.

تنظیم ارتفاع اسلایدر

وقتی به بخش اسلایدر توی صفحه اصلی رسیدیم، یکی از چیزایی که توی حالت موبایل باید حتماً بهش توجه کنیم، ارتفاع اسلایدر هست. اسلایدر توی دسکتاپ معمولاً خوب و اندازه دیده می‌شه، اما توی نسخه موبایل، به خاطر فضای کمتر صفحه، ممکنه بیش از حد جمع‌وجور یا فشرده بشه و تصاویر یا متن‌ها به‌درستی نمایش داده نشن.

برای همین، بهتره توی حالت ریسپانسیو، بیای و ارتفاع اسلایدر رو کمی بیشتر کنی تا عناصر داخلش بهتر دیده بشن و تجربه کاربری بهتری به بازدیدکننده بدی. برای این کار، کافیه بری روی سکشن یا ویجتی که اسلایدر رو داخلش گذاشتی، بعد وارد تنظیماتش بشی، بری به تب Advanced یا همون «پیشرفته» و از اونجا توی حالت Mobile، مقدار Height یا Padding رو زیادتر کنی. مثلاً اگه ارتفاع روی حالت پیش‌فرضه، می‌تونی یه مقدار ثابت براش تنظیم کنی یا از فاصله‌های داخلی کمک بگیری.

چیدمان آیکن‌ها

توی نسخه دسکتاپ، معمولاً چهار تا آیکن مهم داریم که کنار هم چیده شدن و ظاهر منظمی دارن. اما وقتی وارد حالت موبایل می‌شیم، ممکنه این آیکن‌ها زیر هم بیان و ظاهر مرتب‌شون به‌هم بریزه. کاری که باید بکنیم اینه که تو نسخه موبایل هم این ۴ تا آیکن کنار هم باقی بمونن، دقیقاً مثل چیزی که توی سایت دیجی‌کالا می‌بینیم.

برای رسیدن به این حالت، کافیه تنظیمات مربوط به ستون یا ویجت آیکن‌هارو باز کنی، و برای هر کدوم از اون‌ها عرض (Width) رو روی ۲۵٪ تنظیم کنی. چون ۱۰۰ تقسیم بر ۴ می‌شه ۲۵، با این کار هر آیکن دقیقاً یک‌چهارم عرض موبایل رو می‌گیره و چهار تایی کنار هم قرار می‌گیرن.

مطمئن شو که توی نسخه موبایل این تنظیمات فقط برای اون حالت اعمال بشه و نسخه دسکتاپ یا تبلت بهم نریزه. در نهایت هم چک کن که اندازه‌ی آیکن‌ها و فاصله‌ی بینشون مناسب باشه تا هم خوشگل باشه، هم کاربر بتونه راحت باهاشون تعامل کنه.

بخش پیشنهاد شگفت‌انگیز و شگفت‌انگیز سوپرمارکتی

خبر خوب اینه که بخش‌های «پیشنهاد شگفت‌انگیز» و «شگفت‌انگیز سوپرمارکتی» توی نسخه موبایل به‌خوبی ریسپانسیو هستن و نیاز به تغییر خاصی ندارن. المنتور و قالب اهورا این قسمت‌ها رو طوری طراحی کردن که خودشون با عرض صفحه تطبیق پیدا کنن، اسلایدرها خوب کار کنن و چیدمان هم بهم نریزه. پس فعلاً نیازی نیست توی این بخش‌ها دست ببریم یا چیزی رو تنظیم کنیم.

البته همیشه یه پیش‌نمایش سریع بزن توی مرورگر، مخصوصاً توی حالت Incognito، تا مطمئن بشی همه چیز درست دیده می‌شه. پس با خیال راحت از این قسمت‌ها رد شو و بریم سراغ بخش‌های بعدی طراحی موبایلی!

چیدمان بنرها در نسخه موبایل

توی ادامه صفحه، معمولاً یه بخش داریم که شامل ۴ تا بنر تبلیغاتی یا اطلاع‌رسانیه. اگه این بنرها توی نسخه دسکتاپ به‌خوبی چیده شدن، توی موبایل ممکنه یکی‌یکی زیر هم بیان و کل فضای صفحه رو اشغال کنن که هم ظاهرش شلوغ می‌شه، هم حس حرفه‌ای بودن سایت رو کم می‌کنه.

برای اینکه این بنرها توی نسخه موبایل هم مرتب دیده بشن، بهتره هر بنر رو روی ۵۰٪ عرض تنظیم کنیم. این‌جوری دوتا دوتا کنار هم قرار می‌گیرن و چیدمان‌شون منظم‌تر و جمع‌وجورتر می‌شه. تو المنتور، کافیه بری سراغ هر ستون یا بنر و عرضش رو توی حالت موبایل روی ۵۰ درصد بذاری. با این کار، دو بنر توی یه ردیف نمایش داده می‌شن و کل بخش تبدیل می‌شه به دو ردیف دوتایی.

یادت نره فاصله‌ی بین بنرها (Margin یا Gap) رو هم تنظیم کنی که همه چیز فضا داشته باشه و خیلی چسبیده به هم نباشن. نتیجه؟ یه ظاهر مرتب، زیبا و کاربرپسند برای نسخه موبایل که دقیقاً مثل تجربه کاربری دیجی‌کالاست.

تنظیم دسته‌بندی محصولات

توی بخش دسته‌بندی محصولات، معمولاً با چندتا آیکن یا تصویر دسته‌بندی روبه‌رو هستیم که توی نسخه دسکتاپ به‌صورت ردیفی و کنار هم نمایش داده می‌شن. حالا توی نسخه موبایل، اگه بخوایم همون ظاهر منظم رو حفظ کنیم، باید کاری کنیم که این دسته‌بندی‌ها سه‌تایی کنار هم قرار بگیرن.

برای رسیدن به این حالت، کافیه برای هر آیتم دسته‌بندی، عرض رو روی ۳۳.۳۳۳۳ درصد تنظیم کنیم. چون ۱۰۰ تقسیم بر ۳ می‌شه دقیقاً همین مقدار، این‌طوری سه تا آیتم دقیق می‌شن یه ردیف، و چیدمان کاملاً متقارن و مرتب می‌مونه.

تو المنتور، وقتی روی هر ستون یا ویجت دسته‌بندی کلیک می‌کنی، برو توی تب Responsive، و اونجا عرض (Width) رو برای حالت موبایل دستی روی ۳۳.3333٪ بذار. اگه فاصله بین ستون‌ها (Gap یا Margin) زیاده یا کمه، اونم تنظیم کن که ردیف‌ها به‌هم نچسبن و طراحی نفس بکشه. با این کار، دسته‌بندی‌ محصولات توی موبایل هم درست مثل دیجی‌کالا حرفه‌ای و تمیز نمایش داده می‌شن، بدون اینکه بی‌نظم یا پُر فاصله به‌نظر بیان.

تنظیم تصاویر در نسخه موبایل

خب حالا می‌رسیم به یه بخش ساده ولی خوش‌ظاهر. این قسمت توی خیلی از فروشگاه‌های اینترنتی دیده می‌شه، مخصوصاً دیجی‌کالا، که دوتا تصویر تبلیغاتی یا بنر کنار هم قرار گرفتن و فضای خوبی به طراحی صفحه دادن.

کاری که باید بکنیم اینه که یه ردیف جدید بسازیم، همون‌طور که توی بخش‌های قبل هم انجام دادیم. وقتی ردیف رو ساختیم، میایم دوتا ستون براش در نظر می‌گیریم. حالا برای اینکه این دوتا ستون دقیقاً کنار هم قرار بگیرن و هرکدوم نصف عرض صفحه رو بگیرن، باید عرض هر ستون رو روی ۵۰ درصد تنظیم کنیم. با این کار ستون‌ها کاملاً مساوی و فشرده کنار هم می‌چسبن.

بعدش فقط کافیه توی هر ستون یه المان تصویر بندازیم و تصویر موردنظرمونو آپلود کنیم. مثلاً یکی می‌تونه یه بنر تخفیف‌دار باشه، یکی دیگه معرفی یه برند یا دسته‌بندی خاص. چون ستون‌ها مساوی هستن، همه چیز خیلی منظم و تمیز نشون داده می‌شه و ظاهر کار به هم نمی‌ریزه.

این بخش نه‌تنها از نظر بصری یه تنوع خوب به صفحه می‌ده، بلکه اگه تصاویر خوبی انتخاب کرده باشی، می‌تونه کلی کاربر رو جذب کنه و راهنمایی‌شون کنه به بخش‌های دیگه سایت. حتی می‌تونی این بنرها رو لینک‌دار کنی تا وقتی کاربر روشون کلیک می‌کنه، بره به یه دسته‌بندی یا صفحه‌ی محصول خاص. در کل یه بخش ساده، ولی کاربردی و تأثیرگذار توی طراحی یه فروشگاه حرفه‌ایه.

محبوب‌ترین برندها

می‌رسیم به اون قسمتی از صفحه که توی دیجی‌کالا با عنوان «محبوب‌ترین برندها» نمایش داده می‌شه. اما چون ما توی طرح‌مون قصد نداریم از اون بخش استفاده کنیم یا نیازی بهش نداریم، خیلی راحت ازش عبور می‌کنیم و کاری بهش نداریم. همین که بدونیم کجا استفاده‌ش نکردیم و چرا، کافیه.

اما درست زیر اون، دوتا بنر دیگه هست که ظاهر جذابی دارن. حالا برای اینکه این دوتا بنر بهتر دیده بشن و طراحی صفحه‌مون سنگین و فشرده نشه، بهتره هرکدوم رو توی یه ردیف جدا با عرض صد درصد قرار بدیم. یعنی به‌جای اینکه بیاییم دوتا ستون کنار هم بچینیم، این‌بار هر بنر رو توی یه ردیف کامل بندازیم تا عرضش رو کامل پر کنه.

اینطوری هم نظم صفحه حفظ می‌شه، هم بنرها بهتر دیده می‌شن. چون وقتی یه تصویر توی یه ردیف کامل قرار بگیره، فضا نفس می‌کشه و طراحی خسته‌کننده نمی‌شه. مخصوصاً اگه از تصاویری استفاده کنیم که کیفیت خوبی دارن و موضوعشون هم به محصولاتمون ربط داره، تأثیرگذاری این بخش خیلی بیشتر می‌شه.

پس توی این مرحله فقط دوتا ردیف می‌سازیم، هرکدوم با یه تصویر داخلش و عرض رو هم همون ۱۰۰ درصد می‌ذاریم بمونه. گاهی ساده‌ترین طراحی‌ها بیشترین تأثیر رو دارن.

تنظیم سایز عنوان‌ها

حالا که بیشتر بخش‌های صفحه‌مون تکمیل شده و به حالت نهایی نزدیک می‌شیم، وقتشه یه نگاهی به نسخه موبایل صفحه بندازیم. همون‌طور که می‌دونی، بیشتر کاربرا این روزا از طریق موبایل وارد سایت می‌شن، پس خیلی مهمه که همه‌ی بخش‌ها توی این حالت هم درست و مرتب نمایش داده بشن.

تقریباً همه‌ی آیتم‌های صفحه‌مون برای حالت موبایل اوکی هستن و مشکلی ندارن، فقط دوتا بخش نیاز به یه کم رسیدگی دارن، یکی بخش «پرفروش‌ترین محصولات» و یکی هم بخش «منتخب محصولات تخفیف و حراج».

توی بخش پرفروش‌ترین‌ها، مشکلی که داریم اینه که عنوان این قسمت توی موبایل یه مقدار درشته و زیادی توی چشم می‌زنه. برای اینکه جمع‌وجورتر بشه و بهتر توی گوشی دیده بشه، می‌ریم روی خود المان، بعد وارد تب «استایل» می‌شیم و از بخش «تایپوگرافی»، سایز عنوان رو یه مقدار کوچیک‌تر می‌کنیم.

این باعث می‌شه عنوان بهتر با اندازه‌ی صفحه‌ی موبایل هماهنگ بشه. ضمن اینکه چینش عنوان رو هم از همونجا می‌ذاریم روی حالت راست‌چین، چون قراره توی موبایل همه‌چی مرتب و خوندنی باشه، مخصوصاً وقتی متن فارسیه.

نکته‌ی مهم اینه که این تغییرات فقط برای اون بخش‌هایی لازمه که کنار عنوان‌شون عکس موبایل کوچیک داره، یعنی المنتور داره نشون می‌ده که این تنظیمات فقط برای حالت موبایله. اگه اون آیکن موبایل رو نمی‌بینی، داری تنظیمات دسکتاپ رو تغییر می‌دی، که نباید این اتفاق بیفته.

حالا می‌ریم سراغ بخش دوم، یعنی «منتخب محصولات تخفیف و حراج». دقیقاً مثل قبلی، این بخش هم یه‌کم عنوانش برای موبایل بزرگه و بهتره یه سایز کوچک‌تر براش انتخاب بشه. پس مثل قبل، وارد تب «استایل» می‌شیم، بعد از قسمت «جعبه»، زیرشاخه‌ی «عنوان» رو باز می‌کنیم و از همون بخش تایپوگرافی، سایز فونت رو کمتر می‌کنیم. چینش رو هم مثل قبل، می‌ذاریم روی راست‌چین تا همه‌چی هم‌خون و منظم باشه.

با همین دو تا تغییر کوچیک، ظاهر نسخه‌ی موبایل خیلی حرفه‌ای‌تر و خوش‌خوان‌تر می‌شه. چون وقتی یه کاربر وارد سایتت می‌شه و همه‌چی با گوشی‌اش هماهنگه، حس بهتری می‌گیره و احتمال اینکه بیشتر توی سایت بمونه و حتی خرید کنه، بالا می‌ره. پس این ریزه‌کاری‌ها بی‌اهمیت نیستن، بلکه دقیقاً همون چیزهایی‌ان که سایتت رو از حالت آماتور درمیارن و بهش یه ظاهر جدی و حرفه‌ای می‌دن.

کم کردن عرض بخش خواندنی‌ها

توی ادامه‌ی بهینه‌سازی نسخه‌ی موبایل، حالا می‌رسیم به بخش «خواندنی‌ها». این قسمت از صفحه هم از نظر محتوا و هم ظاهر خیلی مهمه، چون معمولاً شامل مقاله‌ها، راهنماها یا هر محتواییه که قراره کاربر بیشتر باهاش درگیر بشه و بخونه. اما یه نکته‌ای این وسط هست: توی موبایل، اگه عرض این بخش خیلی باز باشه و از لبه‌ی صفحه تا لبه‌ی دیگه کشیده شده باشه، خوندن متن‌ها یه‌کم سخت می‌شه.

برای همین بهتره بیایم یه مقدار از چپ و راست به این بخش حاشیه خارجی (Margin) بدیم. یعنی بریم روی همون المنت «خواندنی‌ها»، بعد از تب «پیشرفته»، توی تنظیمات «Margin» (همون حاشیه خارجی) برای چپ و راست، مثلاً ۱۰ پیکسل حاشیه در نظر بگیریم. با این کار، متن‌ها دیگه تا لبه‌ی صفحه نمی‌رن و یه فضای تنفس از دو طرف براشون ایجاد می‌شه که باعث می‌شه خوندنشون راحت‌تر و چشم‌نوازتر بشه.

اینجا هم مهمه که این تغییرات فقط برای حالت موبایل اعمال بشه. پس حواست باشه اون آیکن موبایل کوچیک کنار گزینه‌ها رو بزنی تا فقط توی نسخه موبایل این حاشیه‌ها اضافه بشن و روی حالت دسکتاپ یا تبلت اثری نذارن.

همین یه تغییر ساده توی حاشیه‌ها می‌تونه تجربه‌ی کاربر رو خیلی بهتر کنه. چون وقتی محتوا توی موبایل خوب خونده بشه، کاربر احتمالاً بیشتر وقت می‌ذاره، مطالبو دنبال می‌کنه و حتی ممکنه بیشتر توی سایت بچرخه یا به خرید نزدیک‌تر بشه. در ظاهر شاید فقط چند پیکسل حاشیه به نظر بیاد، ولی از نظر تجربه کاربری، واقعاً یه تفاوت مهمه.

صحبت آخر

خب اینم از ریسپانسیو صفحه اصلی سایت دیجی‌کالا. تا اینجا کلی کار انجام دادیم و مرحله به مرحله همه‌ی اجزای این صفحه رو چیدیم، تصاویر و متن‌ها رو تنظیم کردیم و طراحی دسکتاپ رو کامل کردیم. حالا هم بخش ریسپانسیو برای موبایل رو انجام دادیم، که یکی از مهم‌ترین قسمت‌های طراحی یه سایت فروشگاهیه.

بعد از این، اگه خواستید حرفه‌ای‌تر کار کنید و مخاطب‌های تبلت رو هم در نظر بگیرید، می‌تونید تنظیمات ریسپانسیو برای حالت تبلت رو هم جداگانه انجام بدید. روند کار دقیقاً مثل موبایله، فقط کافیه از گوشه‌ی پایین صفحه‌ی المنتور، نمای تبلت رو انتخاب کنید و برید سراغ المان‌هایی که نیاز به تنظیم دارن. بعضی از بخش‌ها ممکنه همون‌طور که هستن مناسب باشن، ولی بعضی دیگه مثل فاصله‌ها یا سایز فونت، بهتره برای تبلت هم اختصاصی تنظیم بشن.

ما توی این مسیر با هم تونستیم قدم‌به‌قدم یه صفحه‌ی اصلی کاملاً مشابه دیجی‌کالا رو با قالب اهورا طراحی کنیم. بدون نیاز به حتی یه خط کدنویسی و فقط با استفاده از المنتور و المان‌های آماده‌ی خود قالب. کلی تکنیک یاد گرفتیم، کلی جزئیات رو بررسی کردیم و دیدیم که چطور می‌تونیم با رعایت یه‌سری نکات ساده اما مهم، یه صفحه‌ی حرفه‌ای و کاربرپسند بسازیم.

اما این تازه شروع ماجراست. قراره بریم سراغ دموهای جذاب‌تر، هم از سایت‌های معروف ایرانی، هم نمونه‌های خارجی. یه‌جورایی می‌خوایم تجربه‌ی طراحی حرفه‌ای رو بیاریم وسط و تبدیلش کنیم به یه مسیر آموزشی قابل لمس برای همه. حتی اگه تازه‌کار باشی.

یه‌سری امکانات هم هست که فعلاً توی نسخه‌ی فعلی قالب اهورا استفاده نکردیم. مثلاً سبد خرید دیجی‌کالا که وقتی روش کلیک می‌کنی با یه افکت اجاکسی زیبا باز می‌شه یا سیستم دسته‌بندی‌های پیشرفته‌ای که توی صفحه اصلی دیجی‌کالا هست. بچه‌های تیم دارن روی اینا کار می‌کنن و خبر خوب اینه که به‌زودی توی نسخه‌های جدیدتر قالب این قابلیت‌ها هم ارائه می‌شن. یعنی داریم به سمتی می‌ریم که بشه بدون یه خط کدنویسی، دقیقاً همون چیزی رو طراحی کرد که توی ذهنته.

در کل اگه همراه ما باشی، این مسیر طراحی سایت می‌تونه هم برات ساده‌تر بشه، هم لذت‌بخش‌تر. شاد و سربند باشید.🙂

رضا راد

میلیون‌ها کیلومتر اسکرول کردم تا به هدفم نزدیک بشم و این داستان همچنان ادامه داره...